/* QBIT_SIMA — WhatsApp-style web layout. Colours are tokens; dark mode follows the OS. */
:root {
  --brand: #008069; --brand-strong: #017561; --accent: #25d366; --accent-ink: #fff;
  --band: #00a884; --app-bg: #d1d7db; --panel: #ffffff; --panel-2: #f0f2f5; --hover: #f5f6f6; --active: #f0f2f5;
  --line: #e9edef; --line-strong: #d1d7db; --ink: #111b21; --ink-2: #3b4a54; --muted: #667781; --icon: #54656f;
  --chat-bg: #efeae2; --doodle: rgba(17, 27, 33, .045); --out: #d9fdd3; --in: #ffffff; --bubble-shadow: 0 1px .5px rgba(11, 20, 26, .13);
  --notice-bg: #ffeecd; --notice-ink: #54656f; --divider-bg: #ffffff; --tick-read: #53bdeb; --danger: #ea0038; --warn: #b58100;
  --badge: #25d366; --modal-bg: #ffffff; --input-bg: #ffffff; --shadow: 0 2px 5px rgba(11, 20, 26, .26), 0 2px 10px rgba(11, 20, 26, .16);
  --radius: 7.5px; color-scheme: light;
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #00a884; --brand-strong: #06cf9c; --band: #0c1317; --app-bg: #0c1317; --panel: #111b21; --panel-2: #202c33; --hover: #202c33; --active: #2a3942;
    --line: #222d34; --line-strong: #2f3b43; --ink: #e9edef; --ink-2: #d1d7db; --muted: #8696a0; --icon: #aebac1;
    --chat-bg: #0b141a; --doodle: rgba(255, 255, 255, .035); --out: #005c4b; --in: #202c33; --bubble-shadow: 0 1px .5px rgba(0, 0, 0, .3);
    --notice-bg: #182229; --notice-ink: #ffd279; --divider-bg: #182229; --modal-bg: #233138; --input-bg: #2a3942; color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--app-bg); color: var(--ink); font-size: 14.2px; -webkit-font-smoothing: antialiased; overflow: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: 127px; background: var(--band); z-index: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .6; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.pad { padding: 12px; }
svg { display: block; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ------------------------------------------------ buttons */
.icon-btn { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--icon); display: grid; place-items: center; flex-shrink: 0; transition: background .15s; }
.icon-btn:hover { background: rgba(127, 127, 127, .14); }
.icon-btn.small { width: 32px; height: 32px; }
.btn-primary, .btn-danger, .btn-ghost { border-radius: 24px; padding: 9px 22px; font-weight: 600; font-size: .92rem; border: 1px solid transparent; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-strong); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost { background: transparent; color: var(--brand); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--hover); }
.btn-primary.small, .btn-danger.small, .btn-ghost.small { padding: 5px 12px; font-size: .8rem; }
.link-btn { border: 0; background: none; color: var(--brand); padding: 0; font-weight: 600; }

/* ------------------------------------------------ login */
.login-screen { position: fixed; inset: 0; z-index: 20; overflow: auto; background: var(--app-bg); display: grid; place-items: center; padding: 24px 16px; }
.login-band { position: fixed; inset: 0 0 auto; height: 222px; background: var(--band); }
.login-card { position: relative; width: min(560px, 100%); background: var(--panel); border-radius: 6px; box-shadow: var(--shadow); padding: 44px 48px 34px; }
.login-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; margin-bottom: 28px; }
.brand-mark { width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; letter-spacing: 0; font-size: 1.05rem; }
.brand-mark.big { width: 92px; height: 92px; font-size: 2.6rem; position: relative; }
.login-card h1 { font-size: 1.75rem; font-weight: 300; margin: 0 0 12px; color: var(--ink); }
.login-copy { color: var(--muted); line-height: 1.55; margin: 0 0 26px; }
.login-form label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.login-row { display: flex; gap: 10px; }
.login-row input { flex: 1; min-width: 0; border: 1px solid var(--line-strong); background: var(--input-bg); border-radius: 8px; padding: 12px 14px; font-size: 1rem; }
.login-row input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 1px var(--brand); }
.login-status { min-height: 1.4em; margin: 12px 0 0; font-size: .86rem; color: var(--muted); }
.login-status.error { color: var(--danger); }
.login-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; display: flex; align-items: center; gap: 6px; }
.lock-inline { display: inline-flex; }

/* ------------------------------------------------ shell */
.app-shell { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(300px, 30%) 1fr; width: min(1600px, calc(100% - 38px)); height: calc(100dvh - 38px); margin: 19px auto; background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
@media (max-width: 1440px) { .app-shell { width: 100%; height: 100dvh; margin: 0; } }

.pane-header { height: 59px; flex-shrink: 0; background: var(--panel-2); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; gap: 10px; }
.header-actions { display: flex; align-items: center; gap: 6px; }
.menu-anchor { position: relative; }
.dropdown { position: absolute; right: 0; top: 44px; z-index: 30; min-width: 220px; padding: 9px 0; background: var(--modal-bg); border-radius: 3px; box-shadow: var(--shadow); }
.dropdown > button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 11px 24px; font-size: .94rem; color: var(--ink-2); }
.dropdown > button:hover { background: var(--hover); }
.dropdown > button.danger { color: var(--danger); }

.avatar { border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-weight: 600; color: #fff; background: hsl(var(--hue, 170) 38% 52%); border: 0; padding: 0; overflow: hidden; }
.avatar.group { background: hsl(var(--hue, 200) 22% 62%); }
.avatar svg { width: 60%; height: 60%; }
.avatar-md { width: 40px; height: 40px; font-size: 1rem; }
.avatar-lg { width: 49px; height: 49px; font-size: 1.15rem; }

/* ------------------------------------------------ sidebar */
.sidebar { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--line); background: var(--panel); }
.conn-banner { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: #ffd279; color: #3b4a54; }
.conn-banner small { display: block; margin-top: 2px; }
.conn-dot { width: 10px; height: 10px; border-radius: 50%; background: #ffad00; box-shadow: 0 0 0 4px rgba(255, 173, 0, .25); flex-shrink: 0; animation: pulse 1.2s infinite; }
.notify-banner { display: flex; gap: 14px; align-items: center; text-align: left; border: 0; padding: 14px 16px; background: #53bdeb; color: #fff; }
.notify-banner small { display: block; opacity: .95; margin-top: 2px; }
.notify-icon { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #53bdeb; display: grid; place-items: center; flex-shrink: 0; }
.search-wrap { padding: 7px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.search-box { display: flex; align-items: center; gap: 12px; background: var(--panel-2); border-radius: 8px; padding: 0 14px; height: 36px; color: var(--icon); }
.search-box input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: .92rem; color: var(--ink); }
.search-box input::-webkit-search-cancel-button { filter: grayscale(1); }
.chat-list { flex: 1; overflow-y: auto; min-height: 0; }
.chat-row { position: relative; display: flex; align-items: center; gap: 0; width: 100%; height: 72px; background: var(--panel); padding: 0 6px 0 0; }
.chat-row:hover, .chat-row.active { background: var(--hover); }
.chat-row.active { background: var(--active); }
.chat-row-open { display: flex; align-items: center; gap: 13px; flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; text-align: left; padding: 0 0 0 13px; overflow: hidden; }
.chat-row-open:focus-visible { outline-offset: -3px; }
.chat-row-body { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 3px; border-bottom: 1px solid var(--line); padding-right: 9px; }
.chat-row-top, .chat-row-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.chat-row-top strong { font-weight: 400; font-size: 1.05rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chat-row-top time { font-size: .76rem; color: var(--muted); flex-shrink: 0; }
.chat-row.unread .chat-row-top time { color: var(--accent); font-weight: 600; }
.chat-row-preview { display: flex; align-items: center; gap: 3px; min-width: 0; color: var(--muted); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row-preview .tick { flex-shrink: 0; }
.chat-row-flags { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); flex-shrink: 0; }
.chat-row-flag svg { width: 13px; height: 13px; }
.chat-row-flag.archived { opacity: .8; }
.chat-menu-anchor { align-self: center; flex-shrink: 0; }
.chat-row-menu-button { width: 34px; height: 34px; opacity: .78; }
.chat-row-menu-button:hover, .chat-row-menu-button:focus-visible, .chat-row:hover .chat-row-menu-button { opacity: 1; background: rgba(127,127,127,.12); }
.chat-row-menu { top: 51px; right: 5px; min-width: 190px; }
.chat-row-menu > button.danger { color: var(--danger); }
.chat-list-view-toggle { width: 100%; min-height: 62px; display: flex; align-items: center; gap: 13px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--line); background: var(--panel); text-align: left; color: var(--ink); }
.chat-list-view-toggle:hover { background: var(--hover); }
.chat-list-view-toggle-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; flex-shrink: 0; }
.chat-list-view-toggle-icon svg { width: 20px; height: 20px; }
.chat-list-view-toggle-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.chat-list-view-toggle-copy strong { font-size: .93rem; font-weight: 500; }
.chat-list-view-toggle-copy small { font-size: .78rem; color: var(--muted); }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--badge); color: #fff; font-size: .74rem; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.list-empty { padding: 28px 24px; text-align: center; color: var(--muted); line-height: 1.5; }
.sidebar-foot { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; font-size: .76rem; color: var(--muted); border-top: 1px solid var(--line); }

/* ------------------------------------------------ conversation */
.conversation { position: relative; display: flex; min-width: 0; min-height: 0; background: var(--chat-bg); }
.empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; background: var(--panel-2); border-bottom: 6px solid var(--accent); }
.empty-art { position: relative; width: 220px; height: 160px; display: grid; place-items: center; margin-bottom: 26px; }
.empty-ring { position: absolute; width: 190px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 35% 40%, rgba(37, 211, 102, .22), transparent 62%), radial-gradient(circle at 70% 65%, rgba(83, 189, 235, .2), transparent 60%); }
.empty-state h2 { font-weight: 300; font-size: 2rem; margin: 0 0 12px; color: var(--ink-2); }
.empty-state p { max-width: 520px; color: var(--muted); line-height: 1.6; margin: 0; }
.empty-foot { margin-top: 44px !important; display: flex; align-items: center; gap: 6px; font-size: .84rem; }

.chat-view { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-view.dropping::after { content: "Drop to send (encrypted)"; position: absolute; inset: 59px 0 0; z-index: 8; display: grid; place-items: center; font-size: 1.2rem; color: #fff; background: rgba(0, 128, 105, .55); }
.chat-header { border-left: 1px solid var(--line); }
.back-btn { display: none; }
.chat-head-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; border: 0; background: none; text-align: left; padding: 0; height: 100%; }
.chat-head-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-head-copy strong { font-weight: 500; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head-copy small { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.messages { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 6% 10px; display: flex; flex-direction: column; background-color: var(--chat-bg);
  background-image: radial-gradient(var(--doodle) 1.2px, transparent 1.3px), radial-gradient(var(--doodle) 1px, transparent 1.1px);
  background-size: 26px 26px, 26px 26px; background-position: 0 0, 13px 13px; }
.e2ee-notice { align-self: center; max-width: min(560px, 92%); margin: 4px 0 12px; padding: 7px 12px 8px; background: var(--notice-bg); color: var(--notice-ink); border-radius: var(--radius); font-size: .8rem; line-height: 1.45; text-align: center; box-shadow: var(--bubble-shadow); }
.e2ee-notice > span:first-child { display: inline-block; vertical-align: -2px; margin-right: 4px; }
.day-divider { align-self: center; margin: 10px 0 8px; }
.day-divider span { display: inline-block; padding: 5px 12px 6px; border-radius: var(--radius); background: var(--divider-bg); color: var(--muted); font-size: .78rem; text-transform: uppercase; box-shadow: var(--bubble-shadow); }

.msg-row { display: flex; flex-direction: column; margin-top: 2px; position: relative; }
.msg-row.first { margin-top: 10px; }
.msg-row.mine { align-items: flex-end; }
.msg-row.theirs { align-items: flex-start; }
.bubble { position: relative; max-width: min(65%, 620px); min-width: 74px; padding: 6px 7px 8px 9px; border-radius: var(--radius); background: var(--in); box-shadow: var(--bubble-shadow); line-height: 1.4; overflow-wrap: anywhere; }
.mine .bubble { background: var(--out); }
.bubble.tail.theirs, .theirs .bubble.tail { border-top-left-radius: 0; }
.mine .bubble.tail { border-top-right-radius: 0; }
.theirs .bubble.tail::before, .mine .bubble.tail::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; }
.theirs .bubble.tail::before { left: -8px; background: linear-gradient(225deg, var(--in) 50%, transparent 50%); }
.mine .bubble.tail::before { right: -8px; background: linear-gradient(135deg, var(--out) 50%, transparent 50%); }
.sender-name { font-size: .8rem; font-weight: 600; margin: 0 0 3px; }
.msg-text { white-space: pre-wrap; padding-right: 4px; font-size: .93rem; color: var(--ink); }
.msg-text::after { content: ""; display: inline-block; width: 66px; } /* room for the timestamp */
.mine .msg-text::after { width: 84px; }
.meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: -12px -2px -5px 8px; position: relative; top: 6px; font-size: .69rem; color: var(--muted); white-space: nowrap; }
.has-media .meta, .is-gif .meta { float: none; position: absolute; right: 8px; bottom: 6px; top: auto; margin: 0; }
.has-media:not(:has(.msg-text)) .meta { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.has-media:has(.file-card):not(:has(.msg-text)) .meta, .has-media:has(.media-audio):not(:has(.msg-text)) .meta { position: static; float: right; color: var(--muted); text-shadow: none; margin-top: 4px; }
.has-media .msg-text { margin-top: 5px; }
.tick { display: inline-flex; color: var(--muted); }
.tick.delivered { color: var(--muted); }
.tick.seen { color: var(--tick-read); }
.tick.failed { color: var(--danger); }
.retry-btn { border: 0; background: none; padding: 0; color: var(--danger); display: inline-flex; }
.bubble-menu-btn { position: absolute; top: 3px; right: 3px; z-index: 2; width: 26px; height: 22px; border: 0; border-radius: 0 6px 0 12px; display: grid; place-items: center; color: var(--muted); background: linear-gradient(to left, var(--in) 60%, transparent); opacity: 0; transition: opacity .12s; }
.mine .bubble-menu-btn { background: linear-gradient(to left, var(--out) 60%, transparent); }
.has-media .bubble-menu-btn { background: radial-gradient(rgba(0, 0, 0, .35), transparent 70%); color: #fff; }
.bubble:hover .bubble-menu-btn, .bubble-menu-btn:focus-visible { opacity: 1; }
@media (hover: none) { .bubble-menu-btn { opacity: .75; } }
.bubble.system { background: var(--notice-bg); }
.waiting { display: flex; gap: 6px; align-items: flex-start; font-style: italic; color: var(--muted); font-size: .86rem; padding-right: 60px; }

.media-frame { display: block; position: relative; border: 0; padding: 0; background: none; border-radius: 6px; overflow: hidden; margin: -2px -3px 0 -5px; max-width: 330px; }
.media-img { display: block; max-width: 100%; max-height: 360px; min-width: 120px; border-radius: 6px; object-fit: cover; }
.gif-badge { position: absolute; left: 8px; bottom: 8px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .7rem; font-weight: 700; }
.media-video { display: block; width: min(330px, 100%); max-height: 360px; border-radius: 6px; margin: -2px -3px 0 -5px; background: #000; }
.media-audio { display: block; width: min(300px, 70vw); margin: 2px 0 18px; }
.media-placeholder { width: min(330px, 62vw); height: 190px; border: 0; border-radius: 6px; margin: -2px -3px 0 -5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, #8b9ba3, #5e6f78); color: #fff; text-align: center; padding: 10px; }
.media-placeholder small { font-size: .78rem; }
.media-placeholder.video { background: linear-gradient(135deg, #2c3a42, #11181d); }
.download-circle { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .45); }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .8s linear infinite; }
.file-card { display: flex; align-items: center; gap: 12px; padding: 10px 10px; margin: -1px -2px 2px -4px; border-radius: 6px; background: rgba(0, 0, 0, .05); min-width: min(280px, 60vw); }
.file-card.large { min-width: 280px; padding: 18px; }
.file-icon { width: 38px; height: 46px; border-radius: 4px; display: grid; place-items: center; color: #fff; background: #5157ae; flex-shrink: 0; }
.file-icon.audio { background: #ff9933; }
.file-icon.video { background: #e53970; }
.file-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.file-copy strong { font-weight: 500; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-copy small { color: var(--muted); font-size: .74rem; }
.file-action { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--icon); display: grid; place-items: center; flex-shrink: 0; }
.file-action.busy { animation: pulse 1s infinite; }
.ai-summary { margin: 7px 0 2px; padding: 7px 9px; border-left: 3px solid var(--brand); background: rgba(0, 128, 105, .08); border-radius: 4px; font-size: .84rem; white-space: pre-wrap; }
.ai-summary strong { display: flex; align-items: center; gap: 4px; color: var(--brand); font-size: .78rem; margin-bottom: 3px; }

.reactions { display: flex; gap: 4px; flex-wrap: wrap; margin: -6px 10px 4px; position: relative; z-index: 1; }
.reaction-chip { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 1px 7px; font-size: .82rem; box-shadow: var(--bubble-shadow); }
.reaction-chip.mine { border-color: var(--brand); background: rgba(0, 168, 132, .14); }

.msg-menu { position: fixed; top: 0; left: 0; width: 230px; }
.quick-reactions { display: flex; align-items: center; justify-content: space-between; gap: 2px; padding: 4px 10px 9px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.quick-reactions button { border: 0; background: none; font-size: 1.35rem; width: 30px; height: 34px; border-radius: 50%; padding: 0; }
.quick-reactions button:hover { background: var(--hover); transform: scale(1.12); }
.quick-reactions .more-react { color: var(--icon); display: grid; place-items: center; }

/* ------------------------------------------------ composer */
.composer-area { position: relative; flex-shrink: 0; background: var(--panel-2); border-left: 1px solid var(--line); }
.composer { display: flex; align-items: flex-end; gap: 6px; padding: 7px 16px 8px 10px; min-height: 62px; }
.composer .icon-btn { margin-bottom: 4px; }
#messageText { flex: 1; min-width: 0; resize: none; border: 0; outline: none; border-radius: 8px; background: var(--input-bg); padding: 11px 13px; margin: 3px 4px 5px; font-size: .95rem; line-height: 1.35; max-height: 140px; color: var(--ink); }
#messageText::placeholder { color: var(--muted); }
.voice-note-btn.recording { color: var(--danger); background: rgba(234, 0, 56, .12); animation: pulse 1.2s infinite; }
.voice-recording-status { padding: 8px 16px 0; color: var(--danger); font-size: .82rem; }
.send-btn { width: 44px; height: 44px; margin-bottom: 4px; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--icon); flex-shrink: 0; transition: background .15s, color .15s; }
.send-btn.ready { background: var(--brand); color: #fff; }
.popover { position: absolute; bottom: calc(100% + 6px); z-index: 25; background: var(--modal-bg); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.popover-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); }
.emoji-popover { left: 10px; width: min(380px, calc(100vw - 20px)); }
emoji-picker { width: 100%; height: 340px; --border-size: 0; --background: var(--modal-bg); --emoji-size: 1.45rem; --num-columns: 8; }
.attach-menu { left: 54px; padding: 8px 0; min-width: 210px; }
.attach-menu button { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; background: none; padding: 9px 18px; font-size: .95rem; color: var(--ink-2); text-align: left; }
.attach-menu button:hover { background: var(--hover); }
.attach-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.attach-icon svg { width: 20px; height: 20px; }
.attach-icon.media { background: #007bfc; } .attach-icon.doc { background: #7f66ff; } .attach-icon.audio { background: #ff7f32; } .attach-icon.gif { background: #02a698; }
.gif-panel { left: 10px; right: 10px; max-width: 560px; }
.gif-panel input { flex: 1; min-width: 0; border: 0; border-radius: 8px; background: var(--panel-2); padding: 9px 12px; outline: none; }
.gif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; padding: 8px; max-height: 300px; overflow-y: auto; }
.gif-item { border: 0; padding: 0; background: var(--panel-2); border-radius: 6px; overflow: hidden; aspect-ratio: 1; }
.gif-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-item:hover { outline: 3px solid var(--brand); }

/* ------------------------------------------------ modal / toast */
body.modal-open { overflow: hidden; }
.modal-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(11, 20, 26, .55); animation: fade .15s; }
.modal { width: min(460px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: var(--modal-bg); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }
.modal.wide { width: min(620px, 100%); }
.modal.viewer { width: min(920px, 100%); }
.modal.send-preview { width: min(560px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 10px 22px; }
.modal-head h2 { margin: 0; font-size: 1.15rem; font-weight: 500; }
.modal-body { padding: 4px 22px 16px; overflow-y: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 22px 18px; }
.modal-text { color: var(--ink-2); line-height: 1.55; margin: 0; }
.modal-text.error { color: var(--danger); }
.form-grid { display: grid; gap: 7px; }
.form-grid label { font-size: .8rem; font-weight: 600; color: var(--muted); margin-top: 8px; }
.form-grid input, .caption-input { width: 100%; border: 0; border-bottom: 2px solid var(--brand); background: transparent; padding: 8px 2px; outline: none; font-size: 1rem; }
.form-note { color: var(--muted); font-size: .8rem; line-height: 1.45; margin: 12px 0 0; display: flex; align-items: center; gap: 4px; }
.preview-body { display: flex; flex-direction: column; gap: 14px; }
.preview-stage { display: grid; place-items: center; background: var(--panel-2); border-radius: 8px; min-height: 180px; padding: 10px; }
.preview-stage img, .preview-stage video { max-width: 100%; max-height: 50dvh; border-radius: 6px; }
.viewer-body { display: grid; place-items: center; gap: 10px; }
.viewer-body img { max-width: 100%; max-height: 70dvh; border-radius: 6px; }
.enc-body h3 { font-size: .9rem; margin: 18px 0 8px; color: var(--brand); font-weight: 600; }
.enc-body h3 small { color: var(--muted); font-weight: 400; }
.enc-hero { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; background: var(--panel-2); color: var(--ink-2); line-height: 1.5; font-size: .88rem; }
.enc-hero p { margin: 0; }
.enc-hero > span { color: var(--brand); padding-top: 2px; }
.device-row { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.device-row.changed { border-color: var(--danger); }
.device-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: .88rem; }
.device-actions p { color: var(--danger); font-size: .8rem; margin: 6px 0 8px; }
.fingerprint { display: block; font-size: .82rem; letter-spacing: .04em; color: var(--ink-2); word-break: break-all; line-height: 1.6; }
.pill { font-size: .7rem; border-radius: 10px; padding: 2px 8px; font-weight: 600; white-space: nowrap; }
.pill.ok { background: rgba(37, 211, 102, .16); color: var(--brand); }
.pill.danger { background: rgba(234, 0, 56, .12); color: var(--danger); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 9px 16px; margin: 16px 0 0; font-size: .88rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; }
.toast-root { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; width: min(560px, calc(100% - 32px)); pointer-events: none; }
.toast { pointer-events: auto; background: #323739; color: #fff; padding: 11px 18px; border-radius: 8px; box-shadow: var(--shadow); font-size: .88rem; line-height: 1.45; animation: rise .2s ease-out; transition: opacity .3s, transform .3s; }
.toast.error { background: #b3261e; }
.toast.warn { background: #8a5a00; }
.toast.leaving { opacity: 0; transform: translateY(8px); }

/* ------------------------------------------------ daily group summary (kept from the original UI) */
.summary-launch{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(0,128,105,.3);background:rgba(0,168,132,.1);color:var(--brand);border-radius:18px;padding:7px 12px;font-size:.8rem;font-weight:700;white-space:nowrap}
.summary-launch:hover{background:rgba(0,168,132,.18)}
.summary-launch-icon{display:inline-flex}
.summary-overlay{position:fixed;inset:0;z-index:45;display:grid;place-items:center;padding:22px}
.summary-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;background:rgba(9,25,35,.62);backdrop-filter:blur(7px);cursor:default}
.summary-modal{position:relative;width:min(760px,100%);max-height:min(88dvh,900px);overflow:auto;background:#f7faf9;border:1px solid #ffffff80;border-radius:24px;box-shadow:0 28px 100px #061e2a50;color:#182b32;animation:summaryRise .22s ease-out}
.summary-modal-head{display:flex;align-items:center;gap:15px;padding:25px 28px 22px;background:linear-gradient(120deg,#063e39,#087b68 70%,#0c9476);color:#fff}
.summary-heading-icon{width:48px;height:48px;display:grid;place-items:center;flex-shrink:0;border-radius:16px;background:#ffffff1c;border:1px solid #ffffff2b;font-size:1.6rem}
.summary-heading-copy{flex:1;min-width:0}.summary-eyebrow{display:block;font-size:.65rem;letter-spacing:.15em;font-weight:800;color:#a8f0d7;margin-bottom:6px}
.summary-heading-copy h2{font-size:1.38rem;letter-spacing:-.035em;margin:0;font-weight:750}.summary-heading-copy p{font-size:.82rem;color:#d1eee7;margin:6px 0 0;line-height:1.4}
.summary-close{width:36px;height:36px;flex-shrink:0;border:1px solid #ffffff45;background:#ffffff14;color:white;border-radius:11px;font-size:1.45rem;line-height:1}.summary-close:hover{background:#ffffff25}
.summary-controls{display:flex;align-items:end;gap:12px;padding:18px 26px;background:#fff;border-bottom:1px solid #e5eeeb}
.summary-date-field{display:flex;flex-direction:column;gap:7px;min-width:175px}.summary-date-field label{font-size:.7rem;font-weight:800;color:#49615f;letter-spacing:.04em;text-transform:uppercase}
.summary-date-field input{height:42px;border:1px solid #d5e3de;background:#fbfdfc;color:#18352f;border-radius:10px;padding:0 11px;font-size:.86rem;color-scheme:light}
.summary-control-note{display:flex;align-items:center;gap:7px;flex:1;min-width:120px;color:#71827e;font-size:.72rem;line-height:1.4;padding-bottom:3px}.summary-lock{color:#16866d;font-size:1rem}
.summary-generate{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border:0;border-radius:11px;background:#087d65;color:white;font-size:.8rem;font-weight:800;white-space:nowrap;box-shadow:0 5px 12px #087d6526}
.summary-generate:hover{background:#06634f}.summary-generate:disabled{opacity:.65;cursor:wait;box-shadow:none}.summary-generate-glyph{font-size:1rem}
.summary-status{display:flex;align-items:center;gap:9px;margin:17px 26px 0;padding:10px 12px;border:1px solid #dcebe5;background:#eef8f3;color:#46675d;border-radius:10px;font-size:.76rem;line-height:1.45}
.summary-status.error{border-color:#f2d4d0;background:#fff2f0;color:#a23830}.summary-status.loading{border-color:#d7e4f7;background:#f0f5ff;color:#375b8d}
.summary-status-dot{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:#13a47b}.summary-status.loading .summary-status-dot{background:#5c8bd6;animation:pulse 1s infinite}.summary-status.error .summary-status-dot{background:#d65348}
.summary-empty{margin:16px 26px 26px;min-height:205px;padding:34px 24px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:linear-gradient(145deg,#fff,#f0f8f5);border:1px dashed #c8ded6;border-radius:16px}
.summary-empty.compact{min-height:90px;margin:0;padding:18px;border-radius:12px}
.summary-empty-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:#dff4eb;color:#0a886b;font-size:1.7rem;margin-bottom:13px}
.summary-empty strong{font-size:.95rem;color:#23433b}.summary-empty p{max-width:370px;margin:8px 0 0;color:#7a8c86;font-size:.78rem;line-height:1.55}
.summary-content{padding:16px 26px 24px}.summary-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.summary-stat{display:flex;align-items:center;gap:11px;padding:13px;border:1px solid #e1ece7;border-radius:13px;background:#fff;min-width:0}
.summary-stat-icon{width:35px;height:35px;display:grid;place-items:center;flex-shrink:0;border-radius:11px;background:#e7f6ef;color:#0a896c;font-size:1.2rem}
.summary-stat strong{display:block;font-size:1rem;line-height:1.3;overflow-wrap:anywhere;color:#183e34}.summary-stat small{display:block;margin-top:3px;color:#81918c;font-size:.68rem}
.summary-section-card{padding:17px 18px;background:#fff;border:1px solid #e1ece7;border-radius:15px;margin-top:12px;box-shadow:0 3px 12px #183e3406}
.summary-section-title{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.summary-section-symbol{width:36px;height:36px;display:grid;place-items:center;flex-shrink:0;border-radius:11px;background:#e7f6ef;color:#078367;font-size:1.2rem}.summary-section-symbol.media-symbol{background:#edf1ff;color:#596ec5}
.summary-section-title>div{flex:1;min-width:0}.summary-section-title h3{font-size:.88rem;margin:0;color:#203d35}.summary-section-title p{font-size:.7rem;color:#82918c;margin:4px 0 0}
.summary-count-badge{padding:5px 8px;background:#edf5f1;border-radius:8px;color:#557269;font-size:.66rem;font-weight:750;white-space:nowrap}
.summary-prose{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.84rem;line-height:1.8;color:#3e514b}.summary-prose:empty:before{content:'No conversation summary available.';color:#879690}
.summary-media-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.summary-media-item{display:flex;align-items:center;gap:10px;min-width:0;padding:11px;border:1px solid #e7efeb;border-radius:12px;background:#fbfdfc}
.summary-media-icon{width:38px;height:38px;display:grid;place-items:center;flex-shrink:0;border-radius:11px;background:#e9f5ef;color:#118469;font-size:1.15rem}
.summary-media-icon.video{background:#f0edff;color:#7660c9}.summary-media-icon.audio{background:#fff2e5;color:#b77725}.summary-media-icon.file{background:#edf2f6;color:#5d7184}
.summary-media-copy{min-width:0;flex:1}.summary-media-copy strong{display:block;font-size:.75rem;color:#29423a;overflow-wrap:anywhere;line-height:1.35}
.summary-media-copy small{display:block;margin-top:5px;color:#81918b;font-size:.66rem;line-height:1.4;overflow-wrap:anywhere}
.summary-footnote{text-align:center;color:#91a09a;font-size:.67rem;margin:15px 0 0}

/* ------------------------------------------------ animation */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes summaryRise { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ------------------------------------------------ responsive: single pane on phones */
@media (max-width: 900px) { .app-shell { grid-template-columns: minmax(280px, 40%) 1fr; } .bubble { max-width: 80%; } .messages { padding: 14px 4% 8px; } }
@media (max-width: 760px) {
  body::before { display: none; }
  .app-shell { display: block; }
  .sidebar, .conversation { position: absolute; inset: 0; }
  .conversation { display: none; }
  .app-shell.show-chat .sidebar { display: none; }
  .app-shell.show-chat .conversation { display: flex; }
  .back-btn { display: grid; margin-left: -8px; }
  .pane-header { padding: 0 8px 0 12px; }
  .summary-launch span:last-child { display: none; }
  .summary-launch { padding: 7px; }
  .header-actions { gap: 2px; }
  .header-actions .icon-btn { width: 32px; min-width: 32px; height: 34px; padding: 6px; }
  .bubble { max-width: 86%; }
  .messages { padding: 10px 10px 6px; }
  .composer { padding: 6px 6px 7px 4px; }
  .composer .icon-btn { width: 36px; }
  .attach-menu { left: 40px; }
  .media-frame, .media-video, .media-placeholder { max-width: 72vw; }
  .login-card { padding: 30px 22px 24px; }
  .login-row { flex-direction: column; }
  .summary-overlay{padding:0;align-items:end}.summary-modal{width:100%;max-height:94dvh;border-radius:22px 22px 0 0}
  .summary-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:14px 16px}.summary-control-note{grid-column:1/-1;grid-row:2}
  .summary-stats{gap:7px}.summary-stat{flex-direction:column;align-items:flex-start;padding:10px 8px}.summary-media-list{grid-template-columns:1fr}
  .modal-backdrop { padding: 0; align-items: end; }
  .modal { width: 100% !important; border-radius: 14px 14px 0 0; max-height: 92dvh; }
}

/* Media expires 48 hours after it is sent. Keep the message row but remove its cached content. */
.media-expired{display:flex;align-items:center;gap:11px;max-width:min(100%,360px);padding:12px 14px;border:1px solid #dce5e2;border-radius:12px;background:#f4f7f6;color:#53635f}
.media-expired-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:10px;background:#e6eeeb;color:#63756f}
.media-expired-icon svg{width:18px;height:18px}
.media-expired-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.media-expired-copy strong{font-size:.8rem;font-weight:700;overflow-wrap:anywhere}
.media-expired-copy small{font-size:.72rem;line-height:1.4;color:#7c8985}

@media (hover: none) { .chat-row-menu-button { opacity: 1; } }


/* Explicit, on-demand voice transcription UI. */
.voice-message { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.voice-message .media-audio { margin: 2px 0 0; }
.voice-transcribe-btn { align-self: flex-start; }
.voice-transcript { width: min(360px, 76vw); max-width: 100%; box-sizing: border-box; margin: 2px 0 1px; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 8px; background: rgba(0, 128, 105, .07); white-space: pre-wrap; overflow-wrap: anywhere; }
.voice-transcript strong { display: block; margin-bottom: 5px; color: var(--brand); font-size: .76rem; line-height: 1.35; }
.voice-transcript p { margin: 0; color: var(--ink-2); font-size: .86rem; line-height: 1.45; }
.voice-language-select { display: block; width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); background: var(--panel); font: inherit; }

/* People search in the New chat dialog. */
.user-results { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; margin: 4px -22px 0; }
.user-result { display: flex; align-items: center; gap: 13px; width: 100%; border: 0; background: none; padding: 9px 22px; text-align: left; color: var(--ink); }
.user-result:hover, .user-result:focus-visible { background: var(--hover); }
.user-result-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.user-result-copy strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-result-copy small { color: var(--muted); font-size: .78rem; }