.e2ee-panel { display: flex; flex-direction: column; gap: 12px; padding-block: 12px; min-width: 0; }
.e2ee-panel > * { flex-shrink: 0; }
.e2ee-panel p { margin: 0; color: var(--muted); line-height: 1.5; }
.e2ee-panel input:not([type=checkbox]), .e2ee-panel textarea { width: 100%; box-sizing: border-box; min-height: 44px; border-radius: 8px; }
.e2ee-panel textarea { min-height: 76px; overflow-wrap: anywhere; resize: vertical; }
.e2ee-panel label { display: flex; align-items: center; gap: 8px; }
.e2ee-panel input[type=checkbox] { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: var(--accent); }
.e2ee-panel button { border-radius: 8px; min-height: 40px; white-space: normal; }
.e2ee-panel img { align-self: center; max-width: 100%; }
.e2ee-panel h4 { margin: 8px 0 0; }
.e2ee-panel .e2ee-error { color: var(--danger); }
.e2ee-qr { display: flex; justify-content: center; min-height: 44px; }
.e2ee-control { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.e2ee-control > div { flex: 1; min-width: 0; }
.e2ee-control strong { font-size: 14px; }
.e2ee-control p { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 4px 0 0; }
.e2ee-control .e2ee-switch { flex: 0 0 44px; width: 44px; min-height: 28px; height: 28px; padding: 3px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-3); }
.e2ee-switch span { display: block; width: 20px; height: 20px; border-radius: 6px; background: var(--muted); }
.e2ee-switch[aria-checked=true] { background: var(--accent); border-color: var(--accent); }
.e2ee-switch[aria-checked=true] span { transform: translateX(15px); background: var(--text-bright); }
.e2ee-switch[aria-disabled=true] { cursor: default; }
.e2ee-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.e2ee-request-key { margin-top: 8px; border-radius: 8px; }
.e2ee-device > div { min-width: 0; overflow-wrap: anywhere; }
.e2ee-device button { flex-shrink: 0; }
.e2ee-fingerprint { white-space: normal; overflow-wrap: anywhere; line-height: 1.8; padding: 8px; background: var(--bg-2); border-radius: 8px; }
.e2ee-device { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.e2ee-divider { padding: 12px 8px; text-align: center; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); }
.e2ee-warning { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--bg-2); color: var(--text); font-size: 13px; }
.e2ee-warning button { border-radius: 8px; flex-shrink: 0; }
.e2ee-list-lock { color: var(--muted); display: inline-flex; }
@media (max-width: 800px) { .e2ee-warning { flex-direction: column; align-items: stretch; } .e2ee-panel button, .e2ee-request-key { min-height: 44px; } .e2ee-control .e2ee-switch { min-height: 44px; height: 44px; padding-block: 11px; } }

.e2ee-warn { max-width: 520px; }
.e2ee-warn-list { margin: 8px 0 12px; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.modal .e2ee-warn-ack { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; margin: 10px 0 14px; font-size: 14px; color: var(--text, inherit); cursor: pointer; }
.modal .e2ee-warn-ack input[type=checkbox] { flex: none; width: 18px; height: 18px; min-width: 0; margin: 1px 0 0; padding: 0; }

/* Device linking */
.e2ee-link-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.e2ee-link-panel .e2ee-qr img { width: 200px; height: 200px; border-radius: 8px; background: #fff; padding: 8px; box-sizing: content-box; image-rendering: pixelated; }
.e2ee-link-code-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.e2ee-link-code { font-size: 22px; letter-spacing: 0.12em; font-weight: 600; padding: 6px 12px; background: var(--bg-2); border-radius: 8px; color: var(--text-bright, var(--text)); user-select: all; }
.e2ee-link-code:empty { display: none; }
.e2ee-link-check-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.e2ee-link-check-row > span { color: var(--muted); font-size: 13px; }
.e2ee-link-check { font-size: 16px; letter-spacing: 0.06em; padding: 4px 10px; line-height: 1.6; }
.e2ee-link-status { font-size: 13px; }
.e2ee-link-status:empty { display: none; }
.e2ee-link-fallback { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.e2ee-link-start input { text-transform: uppercase; letter-spacing: 0.12em; font-size: 16px; }
.e2ee-link-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.e2ee-panel [hidden] { display: none !important; }
@media (max-width: 800px) {
  .e2ee-link-fallback { flex-direction: column; align-items: stretch; }
  .e2ee-link-actions > button { flex: 1 1 auto; }
}