/* Verschlüsselter Messenger (Modul crypto): Schloss-Hinweise, Entsperren, Chat-Passwort, Admin-Status.
   Nutzt die Farben aus app.css (--accent, --ok, --warn, --alarm …); responsiv bis 360 px. */

.chat-state { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; font-size: .9rem; }
.chat-state.on { background: var(--accent-soft); color: var(--ink); }
.chat-state.on .hint { display: block; }
.chat-state.off { background: var(--soft); border: 1px dashed var(--warn); }
.chat-state.off p { margin: 0 0 6px; }
.chat-state.off .row { margin-top: 4px; }

.chat-unlock { margin: 10px 0 0; border: 1px solid var(--accent); box-shadow: none; }
.chat-unlock p { margin: 0 0 6px; }
.chat-unlock-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chat-unlock-row input { flex: 1 1 180px; min-width: 0; }
.chat-unlock label.check { margin-top: 6px; }

.chat-error { margin: 8px 0 0; }
.chat-nojs { margin: 8px 0 0; }

.msg.e2e .e2e-locked { color: var(--muted); font-style: italic; margin: 0; }
.msg.e2e.mine .e2e-locked { color: inherit; opacity: .85; }
.e2e-lock { font-size: .8em; }
.e2e-flag.bad { color: var(--alarm); font-weight: 600; }
.e2e-flag.warn { color: var(--warn); }

.chat-hint { max-width: 1200px; margin-inline: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.chat-hint p { margin: 0; }

.chat-account .chat-facts { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.chat-strength { min-height: 1.2em; margin: -6px 0 0; }
.chat-strength[data-level="pw_weak"], .chat-strength[data-level="pw_short"] { color: var(--alarm); }
.chat-strength[data-level="pw_ok"] { color: var(--warn); }
.chat-strength[data-level="pw_good"] { color: var(--ok); }
.chat-device { font-weight: 600; }

.chat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-block: 12px; }
.chat-tile { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-big { font-size: 1.8rem; font-weight: 800; color: var(--accent); line-height: 1.2; }
.chat-tile.alarm .chat-big { color: var(--alarm); }
.chat-tile code { word-break: break-word; font-size: .8rem; }
.chat-authorities p { margin: 0 0 8px; }
.chat-admin pre.excerpt { overflow-x: auto; }

.chat-unavailable { text-align: left; }

/* Schlüsselprüfung: Warnung bei geändertem Schlüssel, Sicherheitsnummer */
.chat-keychange p { margin: 0 0 6px; }
.chat-safety { margin: 8px 0; padding: 8px 12px; }
.chat-safety summary { cursor: pointer; font-weight: 600; }
.chat-safety-number { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; letter-spacing: .04em;
  word-spacing: .3em; line-height: 1.7; margin: 6px 0 10px; overflow-wrap: anywhere; max-width: 40ch; }

@media (max-width: 420px) {
  .chat-unlock-row .btn { width: 100%; }
  .chat-tiles { grid-template-columns: 1fr; }
  .chat-state { font-size: .85rem; }
}