/* Notif ocean theme */
:root{
  --bg:#0b1924;--bg-2:#102230;--bg-3:#182e3e;--panel:#122533;--panel-2:#172d3b;
  --line:#294352;--line-2:#3d5866;--txt:#ecf8fa;--txt-2:#b5ced7;--txt-3:#91aebb;
  --accent:#55d8c3;--accent-2:#45bea9;--accent-soft:#55d8c322;--accent-glow:#55d8c33d;
  --on-accent:#082623;--bubble-me:#20534f;--bubble-me-txt:#edfffa;
  --bubble-you:#1c3444;--bubble-you-txt:#ecf8fa;--link:#86ead8;
  --glass:#122533eb;--shadow:0 18px 56px #06111c77;
  --scene:radial-gradient(ellipse at 12% 8%,#184d54,transparent 50%),radial-gradient(ellipse at 88% 100%,#183c5a,transparent 55%),var(--bg);
}
html[data-theme="light"]{
  --bg:#e9f7f8;--bg-2:#edf8fb;--bg-3:#f6fcfd;--panel:#f8fdfd;--panel-2:#eff9fa;
  --line:#d0e5e9;--line-2:#aacbd2;--txt:#163344;--txt-2:#3c5d6e;--txt-3:#4d6b79;
  --accent:#087c70;--accent-2:#07695f;--accent-soft:#087c7018;--accent-glow:#087c702c;
  --on-accent:#fff;--bubble-me:#ccf3ea;--bubble-me-txt:#123f39;
  --bubble-you:#fff;--bubble-you-txt:#163344;--link:#07695f;
  --glass:#f8fdfde8;--shadow:0 18px 56px #285e7922;
  --scene:radial-gradient(ellipse at 12% 8%,#a6eddf,transparent 52%),radial-gradient(ellipse at 88% 100%,#bdddf9,transparent 58%),var(--bg);
}
body{background:var(--scene);line-height:1.75}
.sb-title{margin:0;padding:12px 16px 0;font-size:1.2rem;font-weight:700}
.sb-head,.cv-head,.composer{background:var(--glass)}
.sb-search,.input-wrap{border-radius:16px}
.sb-tab{font-weight:600}
.chat-list{padding-inline:9px}
.chat-item{margin-block:2px}
.chat-item:hover{box-shadow:none}
.ci-name{font-weight:700}
.chat-area{background:var(--bg-2)}
.bubble{line-height:1.75;border:1px solid var(--line)}
.avatar{background:linear-gradient(145deg,#87ded0,#bcdcf9);color:#163f48}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(min-width:821px){
  .app{width:min(1440px,calc(100% - 36px));height:calc(100dvh - 36px);margin:18px auto;
    border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
  .messages{padding-inline:clamp(18px,4vw,62px)}
  .composer-row{padding-inline:clamp(12px,3vw,38px)}
}
@media(max-width:820px){
  .sb-title{padding-top:calc(10px + var(--safe-t))}
  .sb-head{padding-top:6px}
}

/* Settings and composer */
.settings-panel{display:grid;gap:12px}
.settings-panel section{padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--panel-2)}
.settings-panel h3{margin:0 0 8px;font-size:1rem;color:var(--txt)}
.settings-panel .menu-list{margin:0;background:var(--panel);border-radius:12px}
.settings-panel .ml-sub{line-height:1.55;color:var(--txt-2)}
.settings-panel .set-row{margin-top:8px;font-weight:600}
.composer-row.focused #emojiBtn{opacity:1;width:var(--tap);min-width:var(--tap);transform:none;pointer-events:auto}
.composer-row.focused :is(#attachBtn,#stickerBtn){visibility:hidden}
.composer-row textarea,.composer-row.focused textarea{font-size:14.5px;padding:11px 14px}
.composer-row textarea{transition:min-height .24s cubic-bezier(.22,.61,.36,1)}
.composer-row.focused textarea{min-height:50px}
@media(prefers-reduced-motion:reduce){
  .composer-row :is(textarea,#attachBtn,#stickerBtn){transition:none}
}

/* Keep scroll surfaces inexpensive to repaint. */
.cv-head,.composer{background:var(--panel);backdrop-filter:none}
.chat-view,.messages .msg{animation:none}
.chat-item:hover,.chat-item:hover .avatar{transform:none}