:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#111b21;--green:#008069;--dark:#075e54;--line:#dfe3e5}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#f0f2f5}
button,input,textarea{font:inherit}button{cursor:pointer}
.app-shell{height:100%;width:100%;max-width:1440px;margin:0 auto;background:#fff;display:grid;grid-template-columns:minmax(280px,31%) 1fr;box-shadow:0 1px 8px #66778155;overflow:hidden}
.sidebar{border-right:1px solid var(--line);min-width:0;background:#fff;display:flex;flex-direction:column;height:100%;overflow:hidden}
.sidebar header,.chat-header{height:64px;flex:0 0 64px;background:#f0f2f5;display:flex;align-items:center;padding:10px 16px;gap:12px}
.sidebar header{justify-content:space-between}
.sidebar header small,.chat-header small{display:block;color:#667781;margin-top:2px}
.actions{display:flex;gap:4px}.actions form{margin:0}
.actions button,.back{border:0;background:transparent;font-size:25px;color:#54656f;border-radius:50%;width:40px;height:40px}
.chat-list{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.chat-row{width:100%;border:0;background:#fff;display:flex;text-align:left;gap:12px;padding:10px 14px}
.chat-row:hover,.chat-row.selected{background:#f0f2f5}
.avatar{width:45px;height:45px;flex:0 0 45px;border-radius:50%;display:grid;place-items:center;background:#7fbdb4;color:white;font-weight:700;font-size:19px}
.chat-copy{min-width:0;flex:1;border-bottom:1px solid #eef0f1;padding:2px 0 11px}
.chat-copy>span{display:flex;justify-content:space-between;gap:8px}
.chat-copy small{color:#667781;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-copy time{font-size:12px;color:#667781}
.chat-copy b{background:#25d366;color:white;border-radius:12px;padding:1px 6px;font-size:11px}
.conversation{min-width:0;height:100%;display:grid;grid-template-rows:64px minmax(0,1fr) auto auto;background:#efeae2;overflow:hidden}
.chat-header{border-bottom:1px solid #ddd}
.back{display:none;font-size:35px}
.messages{min-height:0;padding:24px 3%;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background-color:#efeae2;background-image:radial-gradient(#85917d20 1px,transparent 1px);background-size:18px 18px;display:flex;flex-direction:column;gap:5px}
.welcome{margin:auto;text-align:center;color:#667781}
.brand-mark{margin:auto;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-size:34px;font-weight:bold}
.bubble{max-width:90%;padding:7px 9px 5px;border-radius:8px;box-shadow:0 1px 1px #0002;overflow-wrap:anywhere}
.bubble.mine{align-self:flex-end;background:#d9fdd3;border-top-right-radius:2px}
.bubble.theirs{align-self:flex-start;background:white;border-top-left-radius:2px}
.bubble a{color:#027eb5;text-decoration:underline;word-break:break-all}.bubble a:hover{text-decoration:none}
.bubble strong{font-weight:700}.bubble .md-h{display:block;font-weight:700;line-height:1.3;margin:4px 0 2px}.bubble .md-h1{font-size:1.18em}.bubble .md-h2{font-size:1.1em}.bubble .md-h3{font-size:1.04em}.bubble em{font-style:italic}
.bubble .md-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:#00000012;padding:1px 5px;border-radius:4px}
.bubble .md-pre{margin:6px 0;padding:8px 10px;background:#00000012;border-radius:6px;overflow:auto;max-width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em;white-space:pre-wrap}
.bubble .md-pre code{background:transparent;padding:0}
.bubble time{font-size:10px;color:#667781;margin-left:8px;float:right;margin-top:7px}
.composer{background:#f0f2f5;padding:9px 15px;display:flex;gap:10px;flex:0 0 auto}
.composer textarea{border:0;border-radius:22px;resize:none;flex:1;padding:11px 16px;max-height:100px}
.composer button{border:0;border-radius:50%;background:var(--green);color:white;width:44px;height:44px}
.empty{padding:30px;text-align:center;color:#667781}
/* Attachments (v13) */
.composer{flex-wrap:wrap;align-items:flex-end}
.composer input[type=file],.pending[hidden]{display:none}
.composer .attach{background:transparent;color:#54656f;font-size:22px;width:40px;flex:0 0 40px}
.composer{flex-wrap:nowrap;min-width:0;max-width:100%;box-sizing:border-box}.composer textarea{order:1;min-width:0}.composer>button[type=submit]{order:3;flex:0 0 44px}
.pending{order:2;flex:0 1 auto;max-width:45%;display:flex;gap:6px;overflow-x:auto;align-self:center;scrollbar-width:thin}
.pending-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;height:44px;background:#fff;border-radius:10px;padding:0 2px 0 8px;font-size:13px;white-space:nowrap}
.pending-name{max-width:120px;overflow:hidden;text-overflow:ellipsis}
.pending-chip.thumb{padding:2px;position:relative}.pending-chip.thumb img{width:40px;height:40px;object-fit:cover;border-radius:8px;display:block}
.pending-chip.thumb button{position:absolute;top:-4px;right:-4px;background:#0009!important;color:#fff!important;width:18px!important;height:18px!important;font-size:12px!important;line-height:18px}
@media (pointer:fine){.composer .attach{display:none}}
@media(max-width:500px){.pending{max-width:38%}.pending-name{max-width:72px}.composer{gap:6px;padding:9px 10px}}
body.dragging::after{content:"Drop to attach";position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#00a88414;border:3px dashed var(--green);color:var(--green);font-size:20px;font-weight:600;pointer-events:none}
.pending-chip button{background:transparent!important;color:#667781!important;width:24px!important;height:24px!important;font-size:16px;padding:0}
.atts{display:flex;flex-direction:column;gap:4px;margin-bottom:2px}
.att-img img{display:block;max-width:min(280px,100%);max-height:320px;border-radius:6px;background:#0001}
.bubble a.att-file{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;background:#0000000d;color:inherit;text-decoration:none;word-break:normal;max-width:300px}
.att-file .att-icon{font-size:22px}.att-meta{min-width:0;display:flex;flex-direction:column}
.att-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.att-meta small{color:#667781}
html.dark .pending-chip{background:#2a3942;color:#e9edef}html.dark .composer .attach{color:#aebac1}
html.dark .bubble a.att-file{background:#ffffff14;color:#e9edef}html.dark .att-meta small{color:#8696a0}
.auth-page{background:linear-gradient(var(--dark) 220px,#e9edef 220px);display:grid;place-items:center;padding:30px 16px;min-height:100dvh;overflow:auto}
.auth-card{background:#fff;border-radius:8px;box-shadow:0 4px 25px #0003;width:min(430px,100%);padding:35px}
.auth-card h1{text-align:center;margin-bottom:3px}
.muted{text-align:center;color:#667781}
.tabs{display:flex;margin:25px 0}
.tab{flex:1;padding:10px;border:0;border-bottom:2px solid var(--line);background:white}
.tab.active{color:var(--green);border-color:var(--green)}
label{display:block;margin:13px 0;color:#54656f;font-size:14px}
input{display:block;width:100%;padding:11px;border:1px solid #ccd2d5;border-radius:5px;margin-top:5px}
.primary{width:100%;padding:11px;border:0;border-radius:5px;background:var(--green);color:white;font-weight:650}
.error{background:#fff0ee;color:#b3261e;padding:9px;border-radius:5px}
dialog{border:0;border-radius:9px;padding:25px;width:min(380px,calc(100% - 30px));box-shadow:0 8px 30px #0005}
dialog::backdrop{background:#1118}
.dialog-close{float:right;border:0;background:none;font-size:25px}
#toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);background:#263238;color:#fff;padding:9px 16px;border-radius:20px;opacity:0;transition:.2s;pointer-events:none;z-index:20}
#toast.show{opacity:1;transform:translate(-50%,0)}
/* Dark mode (html.dark set by app.js from localStorage or prefers-color-scheme). */
html.dark{color-scheme:dark;--line:#2a3942}
html.dark body{color:#e9edef}
html.dark .app-shell,html.dark .sidebar,html.dark .chat-row{background:#111b21;color:#e9edef}
html.dark .sidebar header,html.dark .chat-header,html.dark .composer,html.dark .chat-row:hover,html.dark .chat-row.selected{background:#202c33}
html.dark .chat-header{border-color:#2a3942}
html.dark .chat-copy{border-color:#222d34}
html.dark .sidebar header small,html.dark .chat-header small,html.dark .chat-copy small,html.dark .chat-copy time,html.dark .bubble time,html.dark .welcome,html.dark .empty{color:#8696a0}
html.dark .actions button,html.dark .back{color:#aebac1}
html.dark .conversation,html.dark .messages{background-color:#0b141a;background-image:radial-gradient(#ffffff0d 1px,transparent 1px)}
html.dark .bubble.mine{background:#005c4b;color:#e9edef}
html.dark .bubble.theirs{background:#202c33;color:#e9edef}
html.dark .bubble a{color:#53bdeb}
html.dark .bubble .md-code,html.dark .bubble .md-pre{background:#ffffff14}
html.dark .composer textarea,html.dark input{background:#2a3942;color:#e9edef;border-color:#2a3942}
html.dark dialog{background:#233138;color:#e9edef}
html.dark label,html.dark .dialog-close{color:#aebac1}
@media(max-width:700px){
  .app-shell{display:block;position:relative;max-width:none}
  .sidebar,.conversation{position:absolute;inset:0;width:100%;height:100%}
  .conversation{transform:translateX(100%);transition:transform .18s;z-index:2}
  .chat-open .conversation{transform:none}
  .back{display:block}
  .messages{padding:16px 4%}
}

/* v16: black theme, safe-area bottom (no white bar when the keyboard closes), quotes, ticks, video, optimistic send. */
.composer{padding-bottom:calc(9px + env(safe-area-inset-bottom,0px))}
.quote{border-left:4px solid var(--green);background:#0000000d;border-radius:5px;padding:4px 8px;margin-bottom:4px;font-size:13px;display:flex;flex-direction:column;max-height:4.6em;overflow:hidden}
.quote b{color:var(--green);font-size:12px}.quote span{white-space:pre-wrap;overflow:hidden;text-overflow:ellipsis;color:#54656f}
html.dark .quote{background:#ffffff12}html.dark .quote span{color:#aebac1}
#reply-bar{display:flex;align-items:center;gap:8px;background:#f0f2f5;padding:6px 15px 0}
#reply-bar[hidden]{display:none}#reply-bar .quote{flex:1;margin:0}
#reply-bar button{border:0;background:transparent;font-size:22px;color:#667781;width:32px;height:32px}
.composer[hidden]{display:none}
.ticks{margin-left:3px;letter-spacing:-3px;color:#8696a0}.ticks.read{color:#53bdeb}
.att-video{display:block;max-width:min(300px,100%);max-height:360px;border-radius:6px;background:#000}
.bubble{touch-action:pan-y}
.bubble.sending{opacity:.75}.bubble.failed{outline:1px solid #e53935}
.retry{border:0;background:transparent;color:#e53935;font-size:11px;padding:0;text-decoration:underline}

/* v17: every layer under the composer = composer colour, per theme (fixes the white strip in the gesture-nav area). */
html.dark,html.dark body{background:#202c33}
html.dark #reply-bar{background:#202c33}
html.oled,html.oled body,html.oled .app-shell,html.oled .sidebar,html.oled .chat-row,html.oled .conversation,html.oled .messages,
html.oled .sidebar header,html.oled .chat-header,html.oled .composer,html.oled #reply-bar{background-color:#000}
html.oled .messages{background-image:none}html.oled .chat-row:hover,html.oled .chat-row.selected{background:#111}
html.oled .composer textarea{background:#1a1a1a}html.oled .bubble.theirs{background:#1a1a1a}
.conversation{padding-bottom:0}
.theme-pick{border:0;padding:0;margin:0}.theme-pick label{display:flex;align-items:center;gap:10px}.theme-pick input{width:auto;margin:0}
#forward-list .chat-row{border-radius:6px}
.fwd{display:block;font-size:11px;font-style:italic;color:#667781;margin-bottom:2px}html.dark .fwd{color:#8696a0}
.quote[data-ref]{cursor:pointer}
@keyframes flash{0%,60%{box-shadow:0 0 0 3px #53bdeb}100%{box-shadow:0 1px 1px #0002}}.bubble.flash{animation:flash 1.6s ease-out}
button.title-btn,#settings.title-btn{-webkit-appearance:none;appearance:none;border:0;background:none!important;box-shadow:none;padding:0;margin:0;color:inherit;font:inherit;font-size:1.05em;text-align:left;text-decoration:none;cursor:default;border-radius:0;outline:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}#settings.title-btn:hover,#settings.title-btn:active,#settings.title-btn:focus{background:none!important;color:inherit;text-decoration:none;outline:none;box-shadow:none}#settings.title-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.call-btns{margin-left:auto;display:flex;gap:4px}.call-btns[hidden]{display:none}.call-btns button{border:0;background:transparent;font-size:21px;width:40px;height:40px;border-radius:50%}
#call-ui{position:fixed;inset:0;z-index:60;background:#000;display:flex;align-items:center;justify-content:center}#call-ui[hidden]{display:none}
#call-remote{width:100%;height:100%;object-fit:contain}#call-local{position:absolute;right:12px;top:12px;width:28%;max-width:160px;border-radius:8px;background:#222}
.call-bar{position:absolute;left:0;right:0;bottom:0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));display:flex;gap:12px;align-items:center;justify-content:center;color:#fff;background:#0008}
.call-bar button{border:0;border-radius:24px;padding:12px 22px;font-weight:600;color:#fff;background:#e53935}#call-accept{background:#00a884}