/* Szept - Material You (M3) look, same token system as SoundDiag.
   Tokens are overwritten at runtime by app.js (dynamic scheme from a seed or the Android wallpaper). */
:root {
  --primary: #6750a4; --on-primary: #fff; --primary-container: #e9ddff; --on-primary-container: #22005d;
  --secondary: #625b71; --on-secondary: #fff; --secondary-container: #e8def8; --on-secondary-container: #1e192b;
  --tertiary: #7e5260; --on-tertiary: #fff; --tertiary-container: #ffd9e3; --on-tertiary-container: #31101d;
  --error: #ba1a1a; --on-error: #fff; --error-container: #ffdad6; --on-error-container: #410002;
  --surface: #fdf7ff; --on-surface: #1d1b20; --on-surface-variant: #49454e;
  --surface-lowest: #fff; --surface-low: #f7f2fa; --surface-container: #f2ecf4; --surface-high: #ece6ee; --surface-highest: #e6e0e9;
  --outline: #7a757f; --outline-variant: #cac4cf; --ok: #1b873f;
  --r-xl: 28px; --r-lg: 20px; --r-md: 16px; --r-sm: 12px;
  --font: Roboto, "Google Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: light dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body { background: var(--surface); color: var(--on-surface); font: 400 15px/20px var(--font); overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; position: relative; overflow: hidden; }
input, textarea { font: inherit; color: var(--on-surface); }
#app { height: 100%; }
.hidden { display: none !important; }
svg { flex: none; }

/* state layers (M3 ripple-ish) */
.btn:active::after, .icon-btn:active::after, .fab:active::after, .ci:active::after, .pick:active::after, .chip:active::after {
  content: ""; position: absolute; inset: 0; background: currentColor; opacity: .12; pointer-events: none; }
@media (hover: hover) {
  .btn:hover::after, .icon-btn:hover::after, .fab:hover::after, .ci:hover::after, .pick:hover::after, .chip:hover::after {
    content: ""; position: absolute; inset: 0; background: currentColor; opacity: .08; pointer-events: none; }
}

/* ---------- auth ---------- */
.auth { height: 100%; display: grid; place-items: center; padding: max(env(safe-area-inset-top), 16px) 16px 16px; overflow-y: auto; }
.auth-card { width: min(400px, 100%); background: var(--surface-container); border-radius: var(--r-xl); padding: 24px; }
.auth-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.logo { width: 48px; height: 48px; border-radius: 16px; background: var(--primary-container); color: var(--on-primary-container); display: grid; place-items: center; flex: none; }
.logo svg { width: 28px; height: 28px; }
.auth-logo h1 { margin: 0; font: 400 28px/36px var(--font); }
.auth-logo p { margin: 0; color: var(--on-surface-variant); font-size: 14px; }
.seg { display: flex; border: 1px solid var(--outline); border-radius: 20px; overflow: hidden; margin-bottom: 16px; }
.seg button { flex: 1; height: 40px; color: var(--on-surface); font: 500 14px var(--font); border-right: 1px solid var(--outline); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--secondary-container); color: var(--on-secondary-container); }
.seg button.on::before { content: "✓ "; }
.field { display: block; margin-bottom: 12px; position: relative; }
.field span { display: block; font: 500 12px/16px var(--font); color: var(--on-surface-variant); margin: 0 0 4px 16px; }
.field input { width: 100%; height: 56px; padding: 0 16px; border-radius: 4px 4px 0 0; border: 0; border-bottom: 1px solid var(--on-surface-variant); background: var(--surface-highest); outline: none; font-size: 16px; }
.field input:focus { border-bottom: 2px solid var(--primary); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 24px; border-radius: 20px; background: var(--primary); color: var(--on-primary); font: 500 14px/20px var(--font); letter-spacing: .1px; }
.btn.wide { width: 100%; height: 48px; border-radius: 24px; }
.btn.tonal, .btn.ghost { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn.outlined { background: transparent; color: var(--primary); border: 1px solid var(--outline); }
.btn.text { background: transparent; color: var(--primary); padding: 0 12px; }
.btn.danger { background: transparent; color: var(--error); border: 1px solid var(--outline); }
.btn.err { background: var(--error); color: var(--on-error); }
.btn:disabled { opacity: .38; pointer-events: none; }
.invite-chip { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 12px; background: var(--primary-container); color: var(--on-primary-container); font-size: 14px; margin-bottom: 14px; }
.auth-hint { color: var(--on-surface-variant); font-size: 13px; line-height: 18px; margin: 14px 4px 0; }
.field input.code-in { font: 500 30px/1 ui-monospace, "Roboto Mono", Consolas, monospace; letter-spacing: 10px; text-align: center; height: 64px; }
.code.big { font-size: 40px; letter-spacing: 8px; padding: 22px; }
.muted-p { color: var(--on-surface-variant); font-size: 14px; margin: 0 0 12px; }
.err { color: var(--error); font-size: 13px; min-height: 18px; margin: 4px 4px 8px; }

/* ---------- layout ---------- */
.shell { display: grid; grid-template-columns: 360px 1fr; height: 100%; }
.side { background: var(--surface); display: flex; flex-direction: column; min-width: 0; position: relative; }
.appbar { display: flex; align-items: center; gap: 8px; padding: max(env(safe-area-inset-top), 8px) 8px 4px 16px; min-height: 64px; }
.appbar h2 { margin: 0; font: 400 22px/28px var(--font); flex: 1; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--on-surface-variant); flex: none; }
.icon-btn svg { width: 24px; height: 24px; }
.search { margin: 4px 16px 8px; position: relative; }
.search input { width: 100%; height: 56px; padding: 0 16px 0 52px; border-radius: 28px; border: 0; background: var(--surface-high); outline: none; font-size: 16px; }
.search svg { position: absolute; left: 16px; top: 16px; width: 24px; height: 24px; color: var(--on-surface-variant); }
.conn { margin: 0 16px 8px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--error); color: var(--error); font: 500 12px var(--font); display: flex; align-items: center; gap: 8px; width: fit-content; }
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--error); }
.chatlist { overflow-y: auto; flex: 1; padding: 0 0 96px; }
.ci { display: flex; gap: 16px; align-items: center; padding: 10px 16px; min-height: 72px; cursor: pointer; margin: 0 8px; border-radius: var(--r-md); }
.ci.on { background: var(--secondary-container); color: var(--on-secondary-container); }
.ci .meta { flex: 1; min-width: 0; }
.ci .row { display: flex; gap: 8px; align-items: center; }
.ci .name { flex: 1; font: 400 16px/24px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci .time { font: 500 12px var(--font); color: var(--on-surface-variant); flex: none; }
.ci .last { color: var(--on-surface-variant); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ci.unread .name { font-weight: 600; }
.ci.unread .last { color: var(--on-surface); font-weight: 500; }
.ci.unread .time { color: var(--primary); }
.ci.on .last, .ci.on .time { color: inherit; opacity: .8; }
.badge { background: var(--primary); color: var(--on-primary); font: 500 11px/16px var(--font); min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; display: grid; place-items: center; flex: none; }
.empty-list { color: var(--on-surface-variant); text-align: center; padding: 32px 24px; font-size: 14px; }

.fab { position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); height: 56px; padding: 0 20px 0 16px; border-radius: 16px; display: inline-flex; align-items: center; gap: 12px; background: var(--primary-container); color: var(--on-primary-container); font: 500 14px/20px var(--font); box-shadow: 0 3px 6px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.15); z-index: 4; }
.fab svg { width: 24px; height: 24px; }

.av { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 500 18px var(--font); user-select: none; }
.av.sm { width: 28px; height: 28px; font-size: 12px; }
.av.xs { width: 16px; height: 16px; font-size: 8px; }
.av.md { width: 40px; height: 40px; font-size: 16px; }
.av.lg { width: 80px; height: 80px; font-size: 30px; }
.av .dot { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--ok); border: 3px solid var(--surface); }
.ci.on .av .dot { border-color: var(--secondary-container); }
.av.md .dot { width: 12px; height: 12px; border-width: 2px; }
.av.group { background: var(--tertiary-container); color: var(--on-tertiary-container); }

/* ---------- conversation ---------- */
.main { display: flex; flex-direction: column; min-width: 0; background: var(--surface-low); border-radius: var(--r-xl) 0 0 var(--r-xl); overflow: hidden; }
.conv-head { display: flex; align-items: center; gap: 12px; padding: max(env(safe-area-inset-top), 8px) 8px 8px 12px; min-height: 64px; background: var(--surface-low); }
.conv-head .t { flex: 1; min-width: 0; cursor: pointer; }
.conv-head .t b { display: block; font: 400 18px/24px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-head .t small { color: var(--on-surface-variant); font-size: 13px; }
.conv-head .t small.typing { color: var(--primary); }
.back { display: none; }
.msgs { flex: 1; overflow-y: auto; padding: 8px 16px; display: flex; flex-direction: column; }
.msgs .more { align-self: center; margin-bottom: 10px; }
.day { align-self: center; font: 500 12px var(--font); color: var(--on-surface-variant); margin: 16px 0 8px; padding: 4px 12px; border-radius: 8px; background: var(--surface-container); }
.sys { align-self: center; font-size: 13px; color: var(--on-surface-variant); margin: 6px 0; text-align: center; }
.m { display: flex; gap: 8px; align-items: flex-end; margin-top: 2px; max-width: 100%; position: relative; }
.m.first { margin-top: 10px; }
.m.mine { flex-direction: row-reverse; }
.m .avslot { width: 28px; flex: none; }
.m .stack { display: flex; flex-direction: column; max-width: min(560px, 75%); min-width: 0; align-items: flex-start; }
.m.mine .stack { align-items: flex-end; }
.m .who { font: 500 12px var(--font); color: var(--on-surface-variant); margin: 0 0 2px 12px; }
.bubble { background: var(--surface-highest); color: var(--on-surface); padding: 9px 14px; border-radius: var(--r-lg); white-space: pre-wrap; overflow-wrap: anywhere; position: relative; line-height: 21px; }
.m.mine .bubble { background: var(--primary); color: var(--on-primary); }
.m:not(.mine).cont .bubble { border-top-left-radius: 6px; }
.m:not(.mine).hasnext .bubble { border-bottom-left-radius: 6px; }
.m.mine.cont .bubble { border-top-right-radius: 6px; }
.m.mine.hasnext .bubble { border-bottom-right-radius: 6px; }
.bubble.deleted { background: transparent !important; border: 1px solid var(--outline-variant); color: var(--on-surface-variant) !important; font-style: italic; }
.bubble.emoji { background: transparent !important; font-size: 42px; padding: 0 4px; line-height: 1.15; }
.bubble a { color: inherit; }
.bubble .ed { font-size: 11px; opacity: .7; margin-left: 6px; }
.quote { font-size: 13px; padding: 6px 12px; border-radius: var(--r-sm); background: var(--secondary-container); color: var(--on-secondary-container); margin-bottom: 3px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; opacity: .9; }
.img { display: block; max-width: min(320px, 100%); max-height: 340px; border-radius: var(--r-lg); cursor: zoom-in; background: var(--surface-container); object-fit: cover; }
.filebox { display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit; }
.filebox svg { width: 28px; height: 28px; }
.filebox small { display: block; opacity: .75; }
.reacts { display: flex; gap: 4px; margin-top: -6px; z-index: 1; padding: 0 6px; }
.reacts span { background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: 12px; padding: 0 6px; font-size: 13px; line-height: 22px; cursor: pointer; }
.reacts span.me { background: var(--secondary-container); border-color: transparent; }
.seen { display: flex; justify-content: flex-end; gap: 2px; margin: 3px 2px 0; align-self: flex-end; }
.status { font: 500 11px var(--font); color: var(--on-surface-variant); margin: 3px 6px 0; }
.status.failed-st { color: var(--error); cursor: pointer; }
/* triple check: ● wysłano  ●● odebrano  ●●● przeczytano */
.tick { display: flex; align-items: center; gap: 3px; margin: 4px 4px 0; font: 500 11px var(--font); color: var(--on-surface-variant); }
.tick i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--outline); transition: background .25s, border-color .25s, transform .25s; }
.tick span { margin-left: 4px; }
.tick .seen { margin: 0 0 0 4px; }
.tick.lv1 i:nth-child(1),
.tick.lv2 i:nth-child(-n+2) { background: var(--on-surface-variant); border-color: var(--on-surface-variant); }
.tick.lv3 i { background: var(--primary); border-color: var(--primary); }
.tick.lv3 span { color: var(--primary); }
.tick.lv1 i:nth-child(1), .tick.lv2 i:nth-child(2), .tick.lv3 i:nth-child(3) { animation: tickpop .35s cubic-bezier(.2,0,0,1); }
@keyframes tickpop { 50% { transform: scale(1.5); } }
.tools { position: absolute; top: -18px; display: none; gap: 2px; background: var(--surface-high); border-radius: 20px; padding: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.2); z-index: 3; }
.m:not(.mine) .tools { left: 40px; }
.m.mine .tools { right: 4px; }
@media (hover: hover) { .m:hover .tools { display: flex; } }
.m.toolson .tools { display: flex; }
.tools button { width: 34px; height: 34px; border-radius: 50%; font-size: 17px; display: grid; place-items: center; color: var(--on-surface-variant); }
.tools button:hover { background: var(--surface-highest); }
.tools svg { width: 18px; height: 18px; }
.pending .bubble { opacity: .6; }
.failed .bubble { outline: 2px solid var(--error); }

.typing-ind { display: flex; gap: 4px; padding: 13px 14px; background: var(--surface-highest); border-radius: var(--r-lg); width: fit-content; margin: 8px 0 0 36px; }
.typing-ind i { width: 7px; height: 7px; border-radius: 50%; background: var(--on-surface-variant); animation: bob 1.2s infinite; }
.typing-ind i:nth-child(2) { animation-delay: .15s; } .typing-ind i:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.composer { padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); background: var(--surface-low); }
.replybar { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-surface-variant); padding: 6px 8px 6px 14px; margin: 0 4px 8px; border-radius: var(--r-md); background: var(--surface-container); }
.replybar svg { width: 18px; height: 18px; }
.replybar div { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.replybar b { color: var(--on-surface); }
.crow { display: flex; align-items: flex-end; gap: 6px; }
.crow .box { flex: 1; display: flex; align-items: flex-end; background: var(--surface-highest); border-radius: 28px; padding: 4px; min-height: 48px; }
.crow textarea { flex: 1; resize: none; max-height: 160px; min-height: 40px; padding: 10px 8px; border: 0; background: transparent; outline: none; line-height: 20px; font-size: 16px; }
.send { width: 48px; height: 48px; border-radius: 16px; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; flex: none; }
.send svg { width: 24px; height: 24px; }
.drop { position: absolute; inset: 0; background: color-mix(in srgb, var(--primary) 18%, transparent); border: 3px dashed var(--primary); display: grid; place-items: center; font: 500 20px var(--font); color: var(--primary); z-index: 10; pointer-events: none; border-radius: var(--r-xl); }

.placeholder { flex: 1; display: grid; place-items: center; color: var(--on-surface-variant); text-align: center; padding: 20px; }
.placeholder .logo { width: 80px; height: 80px; border-radius: 26px; margin: 0 auto 12px; }
.placeholder .logo svg { width: 44px; height: 44px; }
.placeholder h3 { margin: 0 0 4px; font: 400 24px/32px var(--font); color: var(--on-surface); }

/* ---------- dialogs ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: grid; place-items: center; z-index: 50; padding: 16px; animation: fade .15s; }
.modal { background: var(--surface-high); border-radius: var(--r-xl); width: min(460px, 100%); max-height: 88vh; overflow: auto; padding: 24px; animation: pop .2s cubic-bezier(.2,0,0,1); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }
.modal h3 { margin: 0 0 16px; font: 400 24px/32px var(--font); }
.modal .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.modal .field input { background: var(--surface-highest); }
.pick { display: flex; align-items: center; gap: 16px; padding: 8px 12px; border-radius: var(--r-md); cursor: pointer; min-height: 56px; margin: 0 -12px; }
.pick input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary); }
.pick .n { flex: 1; font-size: 16px; } .pick small { color: var(--on-surface-variant); display: block; font-size: 13px; }
.switch { appearance: none; width: 52px; height: 32px; border-radius: 16px; background: var(--surface-highest); border: 2px solid var(--outline); position: relative; cursor: pointer; flex: none; transition: background .2s; }
.switch::after { content: ""; position: absolute; left: 6px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--outline); transition: all .2s; }
.switch:checked { background: var(--primary); border-color: var(--primary); }
.switch:checked::after { left: 22px; top: 2px; width: 24px; height: 24px; background: var(--on-primary); }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; outline: 2px solid transparent; }
.swatch.on { outline-color: var(--on-surface); border-color: var(--surface-high); }
.sect { background: var(--surface-container); border-radius: var(--r-lg); margin-top: 12px; padding: 16px; }
.sect h4 { margin: 0 0 12px; font: 500 14px var(--font); color: var(--primary); letter-spacing: .1px; }
.code { font: 500 22px/1 ui-monospace, "Roboto Mono", Consolas, monospace; letter-spacing: 3px; background: var(--primary-container); color: var(--on-primary-container); padding: 16px; border-radius: var(--r-md); text-align: center; margin: 8px 0; user-select: all; }
.viewer { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 60; display: grid; place-items: center; cursor: zoom-out; }
.viewer img { max-width: 96vw; max-height: 94vh; }
.toast { position: fixed; left: 16px; right: 16px; margin: 0 auto; max-width: 480px; bottom: calc(24px + env(safe-area-inset-bottom)); background: var(--on-surface); color: var(--surface); padding: 14px 16px; border-radius: 8px; z-index: 70; font-size: 14px; animation: pop .2s; }
.reactgrid { display: flex; flex-wrap: wrap; gap: 4px; font-size: 30px; }
.reactgrid button { width: 52px; height: 52px; border-radius: 16px; }

/* ---------- narrow (phone) ---------- */
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .shell.open .side { display: none; }
  .shell:not(.open) .main { display: none; }
  .main { border-radius: 0; background: var(--surface); }
  .conv-head, .composer { background: var(--surface); }
  .back { display: grid; }
  .m .stack { max-width: 82%; }
}