/* Classic Connect — 2015 desktop-messenger look. Measurements come from a 1024×768 reference
   capture: 250px sidebar, 81px conversation header, 36px message bubbles, Segoe UI 13px. */
:root {
  --blue: #00aff0;
  --blue-dark: #0095cc;
  --blue-text: #0095cc;
  --day-text: #0d9acf;
  --bubble-in: #c7edfc;
  --bubble-out: #e5f7fd;
  --sidebar: #f5fcfe;
  --hover: #e5f7fd;
  --selected: #c7edfc;
  --line: #e4ecef;
  --line-soft: #d3e6ea;
  --text: #33353a;
  --muted: #6e6e73;
  --time: #a2c5d3;
  --avatar: #abd4e3;
  --online: #7fba00;
  --red: #e51323;
  --orange: #f7961f;
  --input-border: #66cff6;
  --call-bg: #222428;
  --surface: #fff;
  --surface-2: #f2f2f2;
  --text-strong: #000;
  --menu-border: #ccc;
  --menu-hover: #91c9f7;
  --menu-sep: #d7d7d7;
  --menubar-hover: #e5f3ff;
  --menubar-hover-border: #cce8ff;
  --btn-bg: #e1e1e1;
  --btn-border: #adadad;
  --btn-hover: #e5f1fb;
  --btn-hover-border: #0078d7;
  --field-border: #b5c4ca;
  --scroll-track: #f0f0f0;
  --scroll-thumb: #cdcdcd;
  --scroll-thumb-hover: #a6a6a6;
  --banner-bg: #fff5cc;
  --banner-border: #f2df92;
  --mark: #ffe680;
  --editing: #fff5cc;
  --shade: rgba(255, 255, 255, .35);
  --drop: rgba(229, 247, 253, .92);
  --placeholder: #8fa9b4;
  --disabled-btn: #c4cdd1;
  --file-border: #b9dbe8;
  --dial-border: #cfe3ea;
  --sheet-cancel: #f0f3f4;
  --cloud-sky: #cdeffc;
  --cloud-arc-1: #c4ecfb;
  --cloud-arc-2: #8edcf8;
  --cloud-arc-3: #3cc1f3;
  --list-scroll: #cfdfe5;
  --picker-border: #c8d6dc;
  --selection: #b3e3f8;
  --badge-hole: #fff;
  --font: "Segoe UI", "Segoe UI Web", Tahoma, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { height: 100dvh; }
body { font: 13px/1.35 var(--font); color: var(--text); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; accent-color: var(--blue); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
input, textarea, select { font: inherit; color: var(--text); }
[hidden] { display: none !important; }
.ico { width: 16px; height: 16px; flex: none; display: block; }
:focus-visible { outline: 1px dotted var(--text); outline-offset: 1px; }
::selection { background: var(--selection); }
::-webkit-scrollbar { width: 17px; height: 17px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 1px solid var(--scroll-track); }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
.link { color: var(--blue-text); }
.link:hover { text-decoration: underline; }

/* ---------- Menu bar and menus (browser preview; the desktop app uses native menus) ---------- */
.menubar { flex: none; height: 20px; display: flex; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 12px; user-select: none; }
body.native-menus .menubar { display: none; }
.menubar-item { padding: 0 7px; height: 20px; line-height: 19px; color: var(--text-strong); border: 1px solid transparent; }
.menubar-item:hover, .menubar-item.open { background: var(--menubar-hover); border-color: var(--menubar-hover-border); }
.menu-list { position: relative; min-width: 180px; padding: 2px; background: var(--surface-2); border: 1px solid var(--menu-border); box-shadow: 2px 2px 3px rgba(0, 0, 0, .25); font-size: 12px; color: var(--text-strong); user-select: none; }
.menu-list.submenu { position: absolute; }
.menu-list.menu-popup { position: fixed; z-index: 1000; }
.menu-row { display: flex; align-items: center; width: 100%; height: 22px; text-align: left; white-space: nowrap; border: 1px solid transparent; }
.menu-row:not(:disabled):hover, .menu-row.has-sub:hover { background: var(--menu-hover); border-color: var(--menu-hover); }
.menu-row:disabled { opacity: 1; color: var(--muted); }
.menu-check { width: 26px; text-align: center; font-size: 11px; }
.menu-label { flex: 1; padding-right: 18px; }
.menu-accel { padding-right: 6px; color: inherit; }
.menu-arrow { width: 14px; font-size: 14px; line-height: 1; }
.menu-sep { height: 1px; margin: 3px 2px 3px 28px; background: var(--menu-sep); }

/* ---------- Layout ---------- */
.app { flex: 1; display: flex; min-height: 0; }
.sidebar { width: 250px; flex: none; display: flex; flex-direction: column; background: var(--sidebar); border-right: 1px solid var(--line); min-height: 0; }
.pane { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; background: var(--surface); }

/* ---------- Avatars and presence ---------- */
.avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: var(--avatar); color: #fff; overflow: hidden; }
.avatar .ico { width: 64%; height: 64%; margin-top: 18%; }
.avatar.size-36 { width: 36px; height: 36px; }
.avatar.size-40 { width: 40px; height: 40px; }
.avatar.size-60 { width: 60px; height: 60px; }
.avatar.size-96 { width: 96px; height: 96px; }
.avatar.size-120 { width: 120px; height: 120px; }
.avatar-wrap { position: relative; display: inline-flex; flex: none; }
.badge { display: block; width: 16px; height: 16px; }
.avatar-wrap .badge, .me-avatar .badge { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--sidebar); padding: 1px; }

/* ---------- Sidebar: me ---------- */
.me { position: relative; height: 72px; flex: none; display: flex; align-items: center; padding: 12px 15px 0 23px; gap: 15px; overflow: hidden; }
.me-clouds { position: absolute; left: 0; top: 0; width: 250px; height: 70px; pointer-events: none; }
.me-avatar { position: relative; z-index: 1; border-radius: 50%; }
.me-name { position: relative; z-index: 1; font-size: 13px; text-align: left; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 0; }
.me-name:hover { color: var(--blue-text); }

.side-search { display: flex; align-items: center; gap: 9px; margin: 8px 15px 0 23px; height: 34px; border-bottom: 1px solid var(--line-soft); color: var(--blue); }
.side-search input { flex: 1; min-width: 0; border: 0; background: transparent; height: 26px; outline: none; font-size: 13px; padding: 0; }
.side-search input::placeholder { color: var(--text); opacity: 1; }
.side-search input:focus::placeholder { color: var(--placeholder); }
.side-search input::-webkit-search-cancel-button { filter: grayscale(1); }
.side-nav { padding: 10px 0 6px; flex: none; }
.side-nav button { display: flex; align-items: center; gap: 9px; width: 100%; height: 30px; padding: 0 23px; text-align: left; }
.side-nav button .ico { color: var(--blue); }
.side-nav button:hover { background: var(--hover); }
.side-nav button.active { background: var(--selected); }

.side-tabs { position: relative; flex: none; display: flex; align-items: center; height: 40px; padding: 0 15px 0 23px; gap: 15px; border-bottom: 1px solid var(--line-soft); margin-top: 4px; }
.side-tabs [role=tab] { font-size: 13px; height: 100%; letter-spacing: .1px; }
.side-tabs [role=tab][aria-selected=true] { color: var(--blue-text); }
.side-tabs [role=tab]:hover { color: var(--blue-text); }
.list-filter { margin-left: auto; display: flex; align-items: center; gap: 4px; color: var(--muted); }
.list-filter .ico { width: 13px; height: 13px; color: var(--blue); stroke-width: 3; }
.tab-notch { position: absolute; bottom: -1px; width: 20px; height: 8px; transform: translateX(-50%); transition: left .15s; pointer-events: none; }
.tab-notch::before, .tab-notch::after { content: ""; position: absolute; left: 3px; bottom: 0; width: 14px; height: 14px; transform: rotate(45deg); transform-origin: center; }
.tab-notch::before { bottom: -7px; background: var(--line-soft); }
.tab-notch::after { bottom: -8px; background: var(--sidebar); }

.contact-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 8px; }
.contact-list::-webkit-scrollbar { width: 8px; }
.contact-list::-webkit-scrollbar-track { background: transparent; }
.contact-list::-webkit-scrollbar-thumb { background: var(--list-scroll); border: 0; border-radius: 4px; }
.list-group { height: 34px; display: flex; align-items: flex-end; padding: 0 23px 5px; color: var(--muted); font-size: 13px; }
.contact-row { display: flex; align-items: center; gap: 15px; width: 100%; height: 50px; padding: 0 15px 0 23px; text-align: left; }
.contact-row:hover { background: var(--hover); }
.contact-row.active { background: var(--selected); }
.contact-row .avatar-wrap .badge { background: var(--sidebar); }
.contact-row:hover .avatar-wrap .badge { background: var(--hover); }
.contact-row.active .avatar-wrap .badge { background: var(--selected); }
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-name, .row-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-name { font-size: 13px; }
.row-sub { font-size: 12px; color: var(--muted); }
.contact-row.unread .row-name { font-weight: 600; }
.row-count { color: var(--orange); font-weight: 600; font-size: 13px; padding-left: 4px; }
.list-empty { padding: 18px 23px; color: var(--muted); line-height: 1.5; }
.list-link { display: block; padding: 10px 23px; color: var(--blue-text); text-align: left; }
.list-link:hover { text-decoration: underline; }
.directory-row .row-sub { color: var(--blue-text); }

/* ---------- Banner ---------- */
.banner { flex: none; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 20px; background: var(--banner-bg); border-bottom: 1px solid var(--banner-border); color: var(--text); }
.banner .ico { color: #e9a400; }
.banner button { margin-left: auto; color: var(--blue-text); }

/* ---------- Home ---------- */
.home-view { flex: 1; overflow: auto; padding: 36px 40px; background: linear-gradient(var(--sidebar), var(--surface) 220px); }
.home-hero { display: flex; align-items: center; gap: 24px; }
.home-hello h1 { margin: 0 0 6px; font: 300 30px/1.2 "Segoe UI Light", var(--font); }
.home-mood { color: var(--muted); font-size: 14px; text-align: left; }
.home-mood:hover { color: var(--blue-text); }
.home-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 36px; max-width: 760px; }
.home-card { border: 1px solid var(--line); background: var(--surface); padding: 16px 18px; }
.home-card h2 { margin: 0 0 6px; font: 400 16px var(--font); }
.home-card p { margin: 0 0 10px; color: var(--muted); }

/* ---------- Conversation header ---------- */
.conversation { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.conv-head { flex: none; height: 81px; display: flex; align-items: center; gap: 15px; padding: 0 28px 0 12px; border-bottom: 1px solid var(--line); }
.conv-title { flex: 1; min-width: 0; }
.conv-name-row { display: flex; align-items: center; gap: 4px; }
.conv-name-row h1 { margin: 0; font: 300 23px/1.2 "Segoe UI Light", "Segoe UI", var(--font); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.favorite { color: var(--time); display: flex; padding: 2px; }
.favorite .ico { width: 17px; height: 17px; }
.favorite .star-on, .favorite[aria-pressed=true] .star-off { display: none; }
.favorite[aria-pressed=true] .star-on { display: block; color: #fcc419; }
.favorite:hover { color: var(--blue); }
.conv-status { display: flex; align-items: center; gap: 7px; margin-top: 3px; padding-left: 3px; white-space: nowrap; overflow: hidden; }
.conv-status .badge { width: 14px; height: 14px; }
.conv-mood { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.conv-mood:not(:empty)::before { content: "|"; margin-right: 7px; color: var(--line-soft); }
.conv-actions { display: flex; gap: 15px; }
.round-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; }
.round-btn .ico { width: 21px; height: 21px; }
.round-btn:hover { background: #23aae2; }
.round-btn:active { background: var(--blue-dark); }
.round-btn.outline { background: var(--surface); color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
.round-btn.outline:hover { background: var(--hover); }
.round-btn:disabled { background: var(--disabled-btn); opacity: 1; }
.round-btn.outline:disabled { background: var(--surface); color: var(--disabled-btn); box-shadow: inset 0 0 0 2px var(--disabled-btn); }

.find-bar { flex: none; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 20px; border-bottom: 1px solid var(--line); color: var(--blue); }
.find-bar input { flex: 1; border: 0; outline: none; height: 30px; }
.find-count { color: var(--muted); font-size: 12px; }
.icon-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--blue); border-radius: 2px; }
.icon-btn:hover { background: var(--hover); }

/* ---------- Messages ---------- */
.messages { flex: 1; overflow-y: auto; padding: 10px 0 18px; min-height: 0; }
.day { text-align: center; color: var(--day-text); margin: 10px 0 12px; }
.msg-row { display: grid; grid-template-columns: 38px 36px 18px minmax(0, 1fr) 21px 70px; align-items: start; margin-top: 12px; }
.msg-row .avatar { grid-column: 2; }
.bubble-col { grid-column: 4; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.msg-row.own .bubble-col { align-items: flex-end; padding-left: 36px; }
.bubble { position: relative; max-width: 100%; padding: 8px 16px; min-height: 36px; background: var(--bubble-in); border-radius: 3px; overflow-wrap: anywhere; white-space: pre-wrap; }
.msg-row.own .bubble { background: var(--bubble-out); }
.bubble::before { content: ""; position: absolute; top: 13px; left: -5px; border: 5px solid transparent; border-left: 0; border-right-color: var(--bubble-in); }
.msg-row.own .bubble::before { left: auto; right: -5px; border: 5px solid transparent; border-right: 0; border-left-color: var(--bubble-out); }
.bubble p { margin: 0; padding: 1px 0; }
.bubble p + p { margin-top: 10px; }
.bubble p.removed { font-style: italic; color: var(--muted); }
.bubble p.sending { opacity: .6; }
.bubble p.failed { color: var(--red); }
.bubble mark { background: var(--mark); color: inherit; }
.bubble p.ctx-target { background: rgba(0, 149, 204, .12); }
.msg-time { grid-column: 6; color: var(--time); font-weight: 600; font-size: 12px; padding-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.msg-time .edited { display: flex; align-items: center; gap: 3px; font-weight: 400; }
.msg-time .edited .ico { width: 11px; height: 11px; }
.msg-time .seen { font-weight: 400; }
.msg-time .fail { color: var(--red); font-weight: 400; }
.reactions { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.reactions span { font-size: 12px; line-height: 18px; padding: 0 5px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.event-row { display: grid; grid-template-columns: 38px 36px 18px minmax(0, 1fr) 21px 70px; align-items: center; margin-top: 12px; min-height: 22px; }
.event-row .event-icon { grid-column: 2; display: flex; justify-content: center; color: var(--blue); }
.event-row .event-icon.missed { color: var(--red); }
.event-row .event-icon .ico { width: 16px; height: 16px; }
.event-row .event-text { grid-column: 4; }
.event-row .msg-time { padding-top: 0; }
.conv-empty { text-align: center; color: var(--muted); margin-top: 40px; }

/* ---------- Contact request panel ---------- */
.request-panel { flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 30px; }
.request-panel h2 { margin: 0; font: 300 22px "Segoe UI Light", var(--font); }
.request-panel p { margin: 0; max-width: 420px; color: var(--muted); }
.request-buttons { display: flex; gap: 10px; }

/* ---------- Buttons ---------- */
.btn { min-width: 75px; height: 28px; padding: 0 16px; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--text-strong); font-size: 12px; }
.btn:hover:not(:disabled) { background: var(--btn-hover); border-color: var(--btn-hover-border); }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn.large { height: 34px; padding: 0 22px; font-size: 13px; }

/* ---------- Composer ---------- */
.composer { flex: none; padding: 4px 92px 14px 92px; }
.composer-meta { display: flex; justify-content: space-between; gap: 10px; height: 20px; font-size: 12px; color: var(--text); }
.composer-meta .via { color: var(--blue-text); }
.typing { color: var(--muted); }
.composer-row { display: flex; align-items: center; gap: 0; }
.composer-box { flex: 1; display: flex; align-items: flex-start; border: 1px solid var(--input-border); background: var(--bubble-out); min-height: 36px; }
.composer-box textarea { flex: 1; resize: none; border: 0; outline: none; background: transparent; padding: 8px 15px; min-height: 34px; max-height: 120px; line-height: 18px; }
.composer-box textarea::placeholder { color: var(--placeholder); }
.composer-box textarea:disabled { cursor: not-allowed; }
.emoticon-btn { margin: 3px 6px 0 0; }
.emoticon-btn .ico { width: 19px; height: 19px; }
.send-btn { width: 42px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--blue); margin-right: -50px; margin-left: 8px; }
.send-btn .ico { width: 18px; height: 18px; }
.send-btn:hover { color: var(--blue-dark); }

.emoticon-picker { position: fixed; z-index: 900; width: 292px; padding: 8px; background: var(--surface); border: 1px solid var(--picker-border); box-shadow: 0 3px 10px rgba(0, 0, 0, .18); display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoticon-picker button { height: 33px; font: 20px/1 "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; border-radius: 2px; }
.emoticon-picker button:hover { background: var(--hover); }

/* ---------- Call stage (inside the conversation pane) ---------- */
.call-stage { position: relative; flex: none; height: 56%; min-height: 260px; background: radial-gradient(ellipse at 50% 35%, #3a3d43, var(--call-bg) 70%); color: #fff; overflow: hidden; }
.call-center { position: absolute; inset: 30px 0 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.call-center .avatar { box-shadow: 0 0 0 6px rgba(255, 255, 255, .08); }
.call-center.ringing .avatar { animation: ring-pulse 1.6s ease-out infinite; }
@keyframes ring-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 175, 240, .55); } 100% { box-shadow: 0 0 0 26px rgba(0, 175, 240, 0); } }
.call-name { font: 300 24px "Segoe UI Light", var(--font); margin-top: 8px; }
.call-status { color: #b9c3c8; }
.call-stage #local-video { position: absolute; right: 16px; bottom: 82px; width: 168px; height: 126px; object-fit: cover; background: #000; border: 1px solid rgba(255, 255, 255, .25); display: none; }
.call-stage.local-video #local-video { display: block; }
.call-bar { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 14px; }
.call-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; }
.call-btn .ico { width: 24px; height: 24px; }
.call-btn:hover { background: #23aae2; }
.call-btn.off { background: var(--surface); color: var(--text); }
.call-btn.hangup { background: var(--red); }
.call-btn.hangup:hover { background: #c40f1d; }
.call-btn.hangup .ico { width: 28px; height: 28px; }
.call-btn.answer { background: var(--online); }
.call-btn.small { width: 40px; height: 40px; }
.call-btn.small .ico { width: 20px; height: 20px; }

.incoming { position: fixed; right: 18px; bottom: 18px; z-index: 950; width: 370px; display: flex; align-items: center; gap: 12px; padding: 14px 14px; background: var(--call-bg); color: #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, .35); }
.incoming-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.incoming-text strong { font-weight: 400; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.incoming-text span { color: #b9c3c8; font-size: 12px; }
.incoming-actions { display: flex; gap: 8px; }

/* ---------- Sign in ---------- */
.signin { position: fixed; inset: 0; z-index: 800; background: var(--blue); color: #fff; display: flex; justify-content: center; overflow-y: auto; }
body:not(.native-menus) .signin { top: 20px; }
.signin-column { width: 300px; padding: 54px 0 24px; display: flex; flex-direction: column; }
.brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 34px; }
.brand-mark { width: 74px; height: 74px; }
.brand-name { font: 300 30px "Segoe UI Light", var(--font); letter-spacing: .3px; }
.signin-form h1 { margin: 0 0 14px; font: 300 20px "Segoe UI Light", var(--font); }
.field { display: block; margin-bottom: 12px; }
.field span { display: block; font-size: 12px; margin-bottom: 4px; }
.field input { width: 100%; height: 34px; border: 0; padding: 0 10px; background: var(--surface); color: var(--text); outline: none; }
.field input:focus { box-shadow: inset 0 0 0 2px #006b94; }
.server-row { display: flex; justify-content: space-between; font-size: 12px; margin: 2px 0 12px; color: #e3f6fd; }
.server-row strong { font-weight: 600; color: #fff; }
.link-light { color: #fff; text-decoration: underline; text-underline-offset: 2px; font-size: 12px; }
.link-light:hover { color: #e3f6fd; }
.signin-error { min-height: 18px; margin-bottom: 8px; font-size: 12px; color: #fff; font-weight: 600; }
.signin-error:not(:empty)::before { content: "⚠ "; }
.signin-btn { width: 100%; height: 38px; background: #0078a8; color: #fff; font-size: 14px; }
.signin-btn:hover:not(:disabled) { background: #006690; }
.signin-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 18px; }
.signin-note { margin-top: auto; padding-top: 28px; font-size: 11px; color: #c9eefc; text-align: center; }

/* ---------- Dialogs ---------- */
.dialog-shade { position: fixed; inset: 0; z-index: 990; background: var(--shade); display: flex; align-items: center; justify-content: center; padding: 20px; }
.dialog { width: 420px; max-width: 100%; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--blue); box-shadow: 0 6px 24px rgba(0, 0, 0, .22); }
.dialog-title { flex: none; height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 12px; font-size: 12px; color: var(--text-strong); }
.dialog-title button { width: 30px; height: 26px; display: flex; align-items: center; justify-content: center; }
.dialog-title button:hover { background: var(--red); color: #fff; }
.dialog-title .ico { width: 12px; height: 12px; }
.dialog-body { flex: 1; overflow: auto; padding: 8px 22px 16px; }
.dialog-body h2 { margin: 0 0 10px; font: 300 20px "Segoe UI Light", var(--font); }
.dialog-body p { margin: 0 0 10px; }
.dialog-buttons { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.dialog label.row { display: block; margin-bottom: 12px; }
.dialog label.row > span { display: block; margin-bottom: 4px; }
.dialog input[type=text], .dialog input[type=password], .dialog input:not([type]), .dialog select, .dialog textarea { width: 100%; height: 28px; border: 1px solid var(--field-border); padding: 0 8px; background: var(--surface); color: var(--text); outline: none; }
.dialog textarea { height: auto; padding: 6px 8px; resize: vertical; }
.dialog input:focus, .dialog select:focus, .dialog textarea:focus { border-color: var(--blue); }
.dialog .check { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.dialog .muted { color: var(--muted); }
.dialog .error { color: var(--red); min-height: 18px; }

.dialog.options { width: 780px; height: 541px; }
.options-body { flex: 1; display: flex; min-height: 0; }
.options-nav { width: 200px; flex: none; background: var(--sidebar); border-right: 1px solid var(--line); overflow-y: auto; padding: 8px 0; }
.options-nav .cat { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 14px; text-align: left; font-size: 13px; }
.options-nav .cat .ico { color: var(--blue); width: 18px; height: 18px; }
.options-nav .sub { display: block; width: 100%; height: 26px; padding: 0 14px 0 42px; text-align: left; font-size: 12px; }
.options-nav button:hover { background: var(--hover); }
.options-nav button.active { background: var(--selected); }
.options-page { flex: 1; overflow-y: auto; padding: 18px 24px; }
.options-page h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 300 22px "Segoe UI Light", var(--font); }
.options-page h2 .ico { width: 26px; height: 26px; color: var(--blue); }
.options-page h3 { margin: 18px 0 8px; font-size: 13px; font-weight: 600; }
.options-page .divider { height: 1px; background: var(--line); margin: 16px 0; }
.options-page select { max-width: 320px; }
.options-page .meter { height: 8px; width: 320px; background: #e4ecef; overflow: hidden; margin-top: 6px; }
.options-page .meter span { display: block; height: 100%; width: 0; background: var(--online); transition: width .08s; }
.options-page video { width: 320px; max-width: 100%; height: 240px; background: #000; margin-top: 8px; object-fit: cover; }

.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.admin-stats div { border: 1px solid var(--line); padding: 8px 10px; }
.admin-stats strong { display: block; font: 300 22px "Segoe UI Light", var(--font); }
.admin-stats span { color: var(--muted); font-size: 12px; }
.admin-list { border: 1px solid var(--line); max-height: 180px; overflow: auto; margin-bottom: 8px; }
.admin-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.admin-row:last-child { border-bottom: 0; }
.admin-row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-row small { color: var(--muted); }
.invite-code { display: flex; gap: 8px; align-items: center; margin: 8px 0 12px; padding: 8px 10px; background: var(--hover); border: 1px solid var(--input-border); }
.invite-code code { flex: 1; font: 12px Consolas, monospace; user-select: all; overflow-wrap: anywhere; }
.profile-grid { display: grid; grid-template-columns: 110px 1fr; gap: 14px 18px; align-items: start; }
.profile-grid dt { color: var(--muted); }
.profile-grid dd { margin: 0; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 1100; max-width: 460px; padding: 8px 16px; background: #33353a; color: #fff; font-size: 12px; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }

@media (max-width: 720px) {
  .sidebar { width: 210px; }
  .composer { padding-left: 24px; padding-right: 64px; }
  .msg-row, .event-row { grid-template-columns: 10px 36px 14px minmax(0, 1fr) 10px 54px; }
  .conv-mood { display: none; }
}
.sound-list { border: 1px solid var(--line); }
.sound-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.sound-row:last-child { border-bottom: 0; }
.sound-row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sound-row small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sound-row .btn { min-width: 0; padding: 0 10px; height: 24px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.picture-row { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.picture-row > div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* ---------- File transfer ---------- */
.composer { padding-left: 38px; }
.attach-btn { width: 36px; height: 36px; flex: none; margin-right: 18px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; }
.attach-btn .ico { width: 19px; height: 19px; }
.attach-btn:hover { background: #23aae2; }
.attach-btn:disabled { background: #c4cdd1; opacity: 1; }
.composer-meta { padding-left: 54px; }
.file-card { display: flex; align-items: center; gap: 12px; min-width: 260px; max-width: 420px; padding: 10px 14px; background: var(--bubble-in); border-radius: 3px; }
.msg-row.own .file-card { background: var(--bubble-out); }
.file-icon { width: 40px; height: 48px; flex: none; position: relative; background: var(--surface); border: 1px solid var(--file-border); border-radius: 2px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font: 600 9px var(--font); color: var(--blue-dark); text-transform: uppercase; }
.file-icon::after { content: ""; position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; background: linear-gradient(225deg, var(--bubble-in) 50%, var(--file-border) 50%); }
.msg-row.own .file-icon::after { background: linear-gradient(225deg, var(--bubble-out) 50%, var(--file-border) 50%); }
.file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.file-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-sub { font-size: 12px; color: var(--muted); }
.file-actions { display: flex; gap: 10px; margin-top: 2px; }
.file-actions button { color: var(--blue-text); font-size: 12px; }
.file-actions button:hover { text-decoration: underline; }
.file-progress { height: 4px; background: var(--surface); margin-top: 5px; overflow: hidden; }
.file-progress span { display: block; height: 100%; background: var(--blue); width: 0; transition: width .15s; }
.file-picture { display: block; max-width: 320px; max-height: 240px; border-radius: 3px; cursor: zoom-in; background: var(--bubble-in); min-width: 60px; min-height: 40px; object-fit: contain; }
.drop-zone { position: absolute; inset: 81px 0 0 0; z-index: 50; background: var(--drop); border: 2px dashed var(--blue); display: flex; align-items: center; justify-content: center; font: 300 22px "Segoe UI Light", var(--font); color: var(--blue-dark); pointer-events: none; }
.viewer { position: fixed; inset: 0; z-index: 1050; background: rgba(0, 0, 0, .85); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; }
.viewer img { max-width: 100%; max-height: calc(100% - 60px); object-fit: contain; box-shadow: 0 4px 24px rgba(0, 0, 0, .5); }
.viewer-bar { display: flex; align-items: center; gap: 10px; color: #fff; }
.viewer-bar span { margin-right: 10px; }

/* ---------- Browser: phones and small windows show one pane at a time ---------- */
.conv-back { display: none; }
@media (max-width: 640px) {
  .menubar { overflow-x: auto; scrollbar-width: none; }
  .menubar::-webkit-scrollbar { display: none; }
  .sidebar { width: 100%; border-right: 0; }
  .pane { display: none; }
  body.show-pane .sidebar { display: none; }
  body.show-pane .pane { display: flex; }
  .conv-back { display: flex; transform: rotate(90deg); }
  .conv-head { padding: 0 10px 0 4px; gap: 8px; height: 64px; }
  .conv-head .avatar.size-60 { width: 40px; height: 40px; }
  .conv-name-row h1 { font-size: 19px; }
  .conv-actions { gap: 8px; }
  .round-btn { width: 36px; height: 36px; }
  .composer { padding: 4px 52px 10px 10px; }
  .composer-meta { padding-left: 0; }
  .attach-btn { margin-right: 8px; }
  .msg-row, .event-row { grid-template-columns: 6px 32px 10px minmax(0, 1fr) 8px 52px; }
  .msg-row .avatar.size-36 { width: 32px; height: 32px; }
  .file-card { min-width: 0; }
  .file-picture { max-width: 100%; }
  .call-stage { height: 46%; min-height: 220px; }
  .call-stage #local-video { width: 96px; height: 72px; bottom: 76px; right: 8px; }
  .incoming { left: 8px; right: 8px; width: auto; }
  .dialog.options { width: 100%; height: 100%; }
  .options-nav { width: 130px; }
  .home-view { padding: 20px; }
  .home-hero .avatar.size-96 { width: 64px; height: 64px; }
}

/* ---------- Group calls ---------- */
.call-center[hidden] { display: none !important; }
.call-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: space-between; gap: 12px; padding: 8px 16px; font-size: 12px; color: #d6dde0; background: linear-gradient(rgba(0, 0, 0, .35), transparent); pointer-events: none; }
.call-top:empty, .call-top span:empty { display: none; }
.call-grid { position: absolute; inset: 0 0 74px; display: grid; gap: 4px; padding: 4px; }
.call-grid[data-count="0"] { display: none; }
.call-grid[data-count="2"] { grid-template-columns: 1fr 1fr; }
.call-grid[data-count="3"], .call-grid[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.call-grid[data-count="5"], .call-grid[data-count="6"], .call-grid[data-count="7"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr 1fr; }
.call-tile { position: relative; min-width: 0; min-height: 0; background: #2c2f34; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.call-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: #000; }
.call-grid[data-count="1"] .call-tile video { object-fit: contain; }
.call-tile.has-video video { display: block; }
.call-tile.has-video .tile-face { display: none; }
.call-tile audio { display: none; }
.tile-name { position: absolute; left: 8px; bottom: 6px; padding: 2px 8px; font-size: 12px; background: rgba(0, 0, 0, .5); color: #fff; border-radius: 2px; }
.call-grid:not([data-count="1"]) .tile-face .avatar { width: 64px; height: 64px; }

/* ---------- Dial pad ---------- */
.side-search .icon-btn { margin-right: -6px; }
.dial-view { flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; padding: 28px 20px; }
.dial-view h1 { margin: 0 0 4px; font: 300 26px "Segoe UI Light", var(--font); }
.dial-mine { margin: 0 0 18px; color: var(--muted); }
.dial-display { display: flex; align-items: center; width: 260px; border-bottom: 2px solid var(--blue); margin-bottom: 14px; }
.dial-display input { flex: 1; border: 0; outline: none; font: 300 30px "Segoe UI Light", var(--font); text-align: center; letter-spacing: 3px; padding: 4px 0; min-width: 0; }
.dial-keys { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px 20px; }
.dial-keys button { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--dial-border); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dial-keys button:hover { background: var(--hover); border-color: var(--blue); }
.dial-keys button:active { background: var(--selected); }
.dial-keys b { font: 300 26px/1 "Segoe UI Light", var(--font); }
.dial-keys small { font-size: 9px; letter-spacing: 1px; color: var(--muted); min-height: 11px; }
.dial-result { margin-top: 20px; min-height: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.dial-result .who { font-size: 16px; }
.dial-result .muted { color: var(--muted); }
.dial-result .row-actions { display: flex; gap: 10px; margin-top: 4px; }
.invite-link { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.invite-link input { flex: 1; font: 12px Consolas, monospace; }

/* ---------- Links and emoticons in messages ---------- */
.msg-link { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.msg-link:hover { color: #006f99; }
.emo { font-family: "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; font-size: 1.15em; line-height: 1; }

/* ---------- Group conversations ---------- */
.sender { font-size: 12px; color: var(--muted); margin: 0 0 3px 2px; }
.pick-list { max-height: 260px; overflow: auto; border: 1px solid var(--line); }
.pick-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pick-row:last-child { border-bottom: 0; }
.pick-row:hover { background: var(--hover); }
.pick-row .avatar-wrap .badge { background: var(--surface); }
.admin-row > .avatar-wrap { margin-right: 4px; }

/* ---------- Screen sharing ---------- */
.call-tile.screen video { object-fit: contain; background: #000; }
.call-btn.sharing { background: var(--surface); color: var(--blue-dark); box-shadow: 0 0 0 3px var(--blue); }
.call-stage.sharing #local-video { transform: none; object-fit: contain; }
.screen-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; max-height: 380px; overflow: auto; }
.screen-picker button { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 2px solid var(--line); background: var(--surface); text-align: left; }
.screen-picker button:hover, .screen-picker button.chosen { border-color: var(--blue); background: var(--hover); }
.screen-picker img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #222; }
.screen-picker span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Phone menus ---------- */
.mobile-menu { display: none; }
.menu-sheet-shade { position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, .35); display: flex; align-items: flex-end; }
.menu-sheet { width: 100%; max-height: 80dvh; overflow-y: auto; background: var(--surface); border-radius: 12px 12px 0 0; padding: 6px 0 calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 20px rgba(0, 0, 0, .2); animation: sheet-up .16s ease-out; }
@keyframes sheet-up { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.menu-sheet-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px 8px; font-weight: 600; color: var(--muted); font-size: 13px; }
.menu-sheet-back { color: var(--blue-dark); font-size: 15px; font-weight: 400; }
.menu-sheet-row { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 16px 0 6px; text-align: left; font-size: 16px; color: var(--text-strong); }
.menu-sheet-row:active { background: var(--hover); }
.menu-sheet-row:disabled { color: var(--muted); opacity: 1; }
.menu-sheet-row .menu-arrow { font-size: 22px; color: var(--muted); width: 20px; }
.menu-sheet .menu-sep { margin: 4px 16px; }
.menu-sheet-cancel { display: block; width: calc(100% - 24px); margin: 8px 12px 0; height: 46px; border-radius: 10px; background: var(--sheet-cancel); font-size: 16px; font-weight: 600; color: var(--blue-dark); }

.bubble p, [data-file-msg], .contact-row { -webkit-touch-callout: none; }

@media (max-width: 640px) {
  /* The desktop menu bar becomes the ☰ button. */
  .menubar { display: none !important; }
  body:not(.native-menus) .signin { top: 0; }
  .mobile-menu { display: flex; position: absolute; z-index: 2; right: 6px; top: calc(10px + env(safe-area-inset-top)); width: 40px; height: 40px; color: var(--text); }
  .me { padding-top: calc(12px + env(safe-area-inset-top)); height: calc(72px + env(safe-area-inset-top)); padding-right: 52px; }
  .me-name { max-width: none; flex: 1; font-size: 15px; }
  .conv-head { padding-top: env(safe-area-inset-top); height: calc(64px + env(safe-area-inset-top)); }
  .conv-back { width: 36px; height: 40px; }
  /* iPhone zooms into any text box under 16px. */
  input, textarea, select, .composer-box textarea, .side-search input, .field input { font-size: 16px !important; }
  .side-search { height: 42px; }
  .contact-row { height: 58px; }
  .row-name { font-size: 15px; }
  .row-sub { font-size: 13px; }
  .side-nav button { height: 42px; font-size: 15px; }
  .side-tabs [role=tab], .list-filter { font-size: 14px; }
  .composer { padding: 4px 10px calc(10px + env(safe-area-inset-bottom)) 8px; }
  .composer-meta { display: none; }
  .composer-row { align-items: flex-end; }
  .composer-box { min-height: 42px; border-radius: 21px; padding-left: 4px; }
  .composer-box textarea { padding: 10px 12px; line-height: 20px; }
  .emoticon-btn { margin-top: 6px; }
  .send-btn { width: 42px; height: 42px; margin: 0 0 0 4px; }
  .attach-btn { width: 40px; height: 40px; margin-right: 6px; }
  .messages { padding-bottom: 8px; }
  .bubble { font-size: 15px; }
  .msg-time { font-size: 11px; padding-top: 11px; }
  .day { font-size: 13px; }
  /* Call controls fit a 375 px screen. */
  .call-bar { gap: 8px; bottom: calc(12px + env(safe-area-inset-bottom)); flex-wrap: nowrap; }
  .call-btn { width: 44px; height: 44px; }
  .call-btn .ico { width: 21px; height: 21px; }
  .call-btn.hangup .ico { width: 24px; height: 24px; }
  .call-center { inset: 24px 0 70px; }
  .call-center .avatar.size-120 { width: 96px; height: 96px; }
  .call-grid { inset: 0 0 70px; }
  .incoming { bottom: calc(10px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .incoming-actions { width: 100%; justify-content: flex-end; }
  .incoming-actions .call-btn.small { width: 48px; height: 48px; }
  /* Dialogs fill the screen. */
  .dialog-shade { padding: 0; align-items: stretch; }
  .dialog { width: 100% !important; max-width: none; max-height: none; height: 100dvh; border: 0; padding-top: env(safe-area-inset-top); }
  .dialog-title { height: 46px; font-size: 15px; font-weight: 600; }
  .dialog-title button { width: 44px; height: 44px; }
  .dialog-title .ico { width: 16px; height: 16px; }
  .dialog-buttons { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .dialog-buttons .btn { height: 42px; flex: 1; font-size: 15px; }
  .btn { min-height: 34px; }
  .btn.large { height: 42px; }
  /* Options: categories become a scrolling strip across the top. */
  .options-body { flex-direction: column; }
  .options-nav { width: auto; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 0; flex: none; scrollbar-width: none; }
  .options-nav::-webkit-scrollbar { display: none; }
  .options-nav .cat { display: none; }
  .options-nav .sub { width: auto; flex: none; white-space: nowrap; height: 42px; padding: 0 14px; font-size: 14px; }
  .options-page { padding: 14px 16px; }
  .options-page select, .options-page .meter, .options-page video { max-width: 100%; width: 100%; }
  .options-page video { height: auto; aspect-ratio: 4 / 3; }
  .sound-row { flex-wrap: wrap; }
  .sound-row > span { flex-basis: 100%; }
  .sound-row .btn { height: 34px; flex: 1; }
  .admin-stats { grid-template-columns: 1fr 1fr; }
  .admin-row { flex-wrap: wrap; }
  .invite-link { flex-direction: column; align-items: stretch; }
  .screen-picker { grid-template-columns: 1fr 1fr; }
  /* Dial pad fits short phones. */
  .dial-view { padding: 16px 12px calc(16px + env(safe-area-inset-bottom)); }
  .dial-view h1 { display: none; }
  .dial-display input { font-size: 26px; letter-spacing: 2px; }
  .dial-display input::placeholder { font-size: 18px; letter-spacing: 0; }
  .dial-keys { grid-template-columns: repeat(3, 68px); gap: 10px 22px; }
  .dial-keys button { width: 68px; height: 68px; }
  .dial-result .row-actions { flex-wrap: wrap; justify-content: center; }
  .emoticon-picker { left: 8px !important; right: 8px; width: auto; grid-template-columns: repeat(8, 1fr); bottom: calc(64px + env(safe-area-inset-bottom)); top: auto !important; }
  .emoticon-picker button { height: 40px; font-size: 24px; }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); max-width: calc(100% - 32px); }
  .signin-column { padding-top: calc(32px + env(safe-area-inset-top)); width: calc(100% - 40px); max-width: 340px; }
  .field input { height: 44px; }
  .signin-btn { height: 46px; font-size: 16px; }
  .banner { font-size: 13px; flex-wrap: wrap; }
}

.dial-view { position: relative; }
@media (max-width: 640px) { .dial-back { position: absolute; left: 4px; top: calc(6px + env(safe-area-inset-top)); } }

.call-unblock { position: absolute; z-index: 3; top: 40px; left: 50%; transform: translateX(-50%); padding: 10px 18px; border-radius: 20px; background: var(--surface); color: var(--blue-dark); font-weight: 600; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }

/* ---------- Cloud header colours (follow the theme) ---------- */
.me-clouds .sky { fill: var(--cloud-sky); }
.me-clouds .arc-1 { stroke: var(--cloud-arc-1); }
.me-clouds .arc-2 { stroke: var(--cloud-arc-2); }
.me-clouds .arc-3 { stroke: var(--cloud-arc-3); }
.me-clouds .cloud { fill: var(--sidebar); }
.composer-box.editing { background: var(--editing); }
:root { color-scheme: light; }

/* ---------- Dark mode: same layout and blue accent, deep blue-grey surfaces ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --blue-text: #3cc1f3;
  --day-text: #3cc1f3;
  --bubble-in: #1f4256;
  --bubble-out: #26323b;
  --sidebar: #161c21;
  --hover: #1f2c35;
  --selected: #1c3a4b;
  --line: #2a343c;
  --line-soft: #2f3c45;
  --text: #e3e8eb;
  --muted: #95a3ab;
  --time: #6f8b98;
  --avatar: #3b5866;
  --input-border: #2f7394;
  --call-bg: #121518;
  --surface: #1c2329;
  --surface-2: #232b31;
  --text-strong: #e8edf0;
  --menu-border: #3a464e;
  --menu-hover: #1c3a4b;
  --menu-sep: #36424a;
  --menubar-hover: #24323b;
  --menubar-hover-border: #2f4350;
  --btn-bg: #2a343b;
  --btn-border: #3d4a52;
  --btn-hover: #2f3e48;
  --btn-hover-border: #3cc1f3;
  --field-border: #3a4851;
  --scroll-track: #1a2025;
  --scroll-thumb: #3a464e;
  --scroll-thumb-hover: #4b5962;
  --banner-bg: #3a3218;
  --banner-border: #574a1f;
  --mark: #7a6514;
  --editing: #3a3218;
  --shade: rgba(0, 0, 0, .45);
  --drop: rgba(22, 28, 33, .92);
  --placeholder: #6f8b98;
  --disabled-btn: #3a454c;
  --file-border: #3c6a80;
  --dial-border: #2f4350;
  --sheet-cancel: #26313a;
  --cloud-sky: #1b3442;
  --cloud-arc-1: #1d4a60;
  --cloud-arc-2: #1f6a8a;
  --cloud-arc-3: #2894bf;
  --list-scroll: #33414a;
  --picker-border: #3a464e;
  --selection: #285a73;
  --badge-hole: #161c21;
}
:root[data-theme="dark"] .round-btn.outline { background: var(--surface); }
:root[data-theme="dark"] .call-btn.off { background: #e3e8eb; color: #1c2329; }
:root[data-theme="dark"] .msg-link { color: #5fd0f7; }
:root[data-theme="dark"] .msg-link:hover { color: #8fdff9; }
:root[data-theme="dark"] .dialog { border-color: #2f7394; box-shadow: 0 6px 24px rgba(0, 0, 0, .6); }
:root[data-theme="dark"] .menu-list, :root[data-theme="dark"] .emoticon-picker { box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .toast { background: #e3e8eb; color: #1c2329; }
:root[data-theme="dark"] .reactions span { border-color: var(--line); }
:root[data-theme="dark"] .menu-sheet { box-shadow: 0 -4px 20px rgba(0, 0, 0, .6); }
:root[data-theme="dark"] .signin { background: #0a5a7a; }
:root[data-theme="dark"] .signin-btn { background: #00aff0; }
:root[data-theme="dark"] .signin-btn:hover:not(:disabled) { background: #23aae2; }

.theme-choices { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.theme-choice { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); cursor: pointer; font-size: 12px; min-width: 96px; }
.theme-choice:has(input:checked) { border-color: var(--blue); background: var(--hover); }
.theme-choice input { position: absolute; opacity: 0; pointer-events: none; }
.theme-swatch { width: 72px; height: 44px; border: 1px solid var(--line); background: linear-gradient(90deg, #f5fcfe 0 34%, #fff 34%); position: relative; }
.theme-swatch::after { content: ""; position: absolute; left: 40%; right: 10%; top: 14px; height: 10px; border-radius: 3px; background: #c7edfc; }
.theme-swatch.dark { background: linear-gradient(90deg, #161c21 0 34%, #1c2329 34%); }
.theme-swatch.dark::after { background: #1f4256; }
.theme-swatch.system { background: linear-gradient(135deg, #fff 0 50%, #1c2329 50%); }
.theme-swatch.system::after { background: linear-gradient(90deg, #c7edfc 50%, #1f4256 50%); }

/* ---------- Your profile (main pane) ---------- */
.profile-view { flex: 1; overflow-y: auto; position: relative; background: var(--surface); }
.profile-banner { height: 110px; background: linear-gradient(135deg, var(--pf-color, #00aff0), color-mix(in srgb, var(--pf-color, #00aff0) 55%, #fff)); }
:root[data-theme="dark"] .profile-banner { background: linear-gradient(135deg, var(--pf-color, #00aff0), color-mix(in srgb, var(--pf-color, #00aff0) 45%, #000)); }
.profile-form { max-width: 620px; padding: 0 32px 32px; margin-top: -60px; }
.profile-top { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 16px; }
.profile-top .avatar { box-shadow: 0 0 0 5px var(--surface); }
.profile-pic-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 6px; }
.pf-field { display: block; margin-bottom: 12px; }
.pf-field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.pf-field input, .pf-field textarea { width: 100%; border: 1px solid var(--field-border); background: var(--surface); color: var(--text); padding: 7px 10px; font: inherit; outline: none; }
.pf-field input:focus, .pf-field textarea:focus { border-color: var(--blue); }
.pf-field textarea { resize: vertical; }
.pf-name input { font: 300 22px "Segoe UI Light", var(--font); padding: 4px 10px; }
.pf-count { display: block; text-align: right; color: var(--muted); font-size: 11px; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.pf-section { margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 600; }
.pf-section small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 2px; }
.pf-colors { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-colors button { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .08); position: relative; }
.pf-colors button[aria-pressed=true]::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.pf-colors button[aria-pressed=true] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--blue); }
.pf-account dd { user-select: all; }
.pf-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
.pf-actions #pf-status { margin-right: auto; }
.profile-back { position: absolute; left: 6px; top: calc(6px + env(safe-area-inset-top)); z-index: 2; color: #fff; display: none; }
.webcam-shot video { width: 100%; aspect-ratio: 4 / 3; background: #000; object-fit: cover; transform: scaleX(-1); }
.contact-card .profile-banner { height: 70px; margin: -8px -22px 0; }
.contact-card .cc-top { display: flex; align-items: flex-end; gap: 14px; margin-top: -34px; margin-bottom: 12px; }
.contact-card .cc-top .avatar-wrap .avatar { box-shadow: 0 0 0 4px var(--surface); }
.contact-card .cc-about { white-space: pre-wrap; margin: 6px 0 12px; }
@media (max-width: 640px) {
  .profile-back { display: flex; }
  .profile-form { padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
  .profile-top { flex-direction: column; align-items: flex-start; }
  .pf-grid { grid-template-columns: 1fr; }
  .pf-actions .btn { flex: 1; }
  .contact-card .profile-banner { margin: -8px -22px 0; }
}

.storage-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.storage-bar span { display: block; height: 100%; background: var(--blue); }
.file-card.expired { opacity: .6; }
.file-card.expired .file-icon { filter: grayscale(1); }

/* ---- Private Server Administration */
.dialog.admin .options-nav .cat { gap: 12px; height: 40px; padding: 0 16px; border-left: 3px solid transparent; }
.dialog.admin .options-nav .cat span { flex: 1; }
.dialog.admin .options-nav .cat.active { border-left-color: var(--blue); }
.dialog.admin .nav-count { font-style: normal; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 16px; text-align: center; }
.dialog.admin .options-page { padding: 22px 26px 26px; }
.dialog.admin .options-page h2 { margin-bottom: 4px; }
.dialog.admin .page-sub { margin: 0 0 18px 36px; font-size: 12px; }
.dialog.admin .options-page h3 { margin: 20px 0 8px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.dialog.admin .admin-list { max-height: none; overflow: visible; border-radius: 4px; background: var(--surface); }
.dialog.admin .admin-row { min-height: 52px; padding: 8px 12px; gap: 12px; }
.dialog.admin .admin-row:hover { background: var(--hover); }
.dialog.admin .admin-row strong { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-strong); }
.dialog.admin .admin-row small { margin-top: 2px; }
.dialog.admin .admin-row.empty { color: var(--muted); justify-content: center; }
.row-actions { display: flex; gap: 6px; flex: none; }
.btn.small { min-width: 0; height: 26px; padding: 0 12px; }
.btn.danger:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.pill { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: 9px; background: var(--line-soft, var(--line)); color: var(--muted); font-size: 11px; font-weight: 600; }
.pill.blue { background: var(--selected); color: var(--blue-text); }
.pill.green { background: color-mix(in srgb, var(--online) 18%, transparent); color: color-mix(in srgb, var(--online) 75%, var(--text-strong)); }
.pill.red { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.stat-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); text-align: left; transition: border-color .12s, background .12s; }
.stat-card:hover { border-color: var(--blue); background: var(--hover); }
.stat-card .ico { width: 18px; height: 18px; color: var(--blue); margin-bottom: 6px; }
.stat-card strong { font: 300 26px/1.1 "Segoe UI Light", var(--font); color: var(--text-strong); }
.stat-card span { color: var(--muted); font-size: 12px; }
.admin-card { padding: 14px 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); margin-bottom: 10px; }
.admin-card p { margin: 4px 0 10px; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: var(--text-strong); }
.card-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12px; }
.usage { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.usage strong { font: 300 26px "Segoe UI Light", var(--font); color: var(--text-strong); }
.storage-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.storage-bar span { background: linear-gradient(90deg, var(--blue), var(--blue-dark)); border-radius: 3px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.setting-row > label, .setting-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--text-strong); }
.setting-row small { font-size: 12px; }
.dialog.admin .setting-row select { width: 190px; flex: none; }
.safe-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 4px; background: var(--hover); color: var(--text); font-size: 12px; line-height: 1.5; }
.safe-note .ico { flex: none; width: 18px; height: 18px; color: var(--blue); margin-top: 1px; }
.invite-maker { display: flex; gap: 8px; align-items: center; }
.dialog.admin .invite-maker select { width: 200px; }
.server-meta { margin-top: 14px; font-size: 12px; }
@media (max-width: 640px) {
  .dialog.admin .options-body { flex-direction: column; }
  .dialog.admin .options-nav { width: auto; display: flex; overflow-x: auto; padding: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .dialog.admin .options-nav .cat { flex: none; width: auto; height: 46px; border-left: 0; border-bottom: 3px solid transparent; gap: 6px; padding: 0 14px; }
  .dialog.admin .options-nav .cat.active { border-bottom-color: var(--blue); }
  .dialog.admin .options-nav .cat .ico { display: none; }
  .dialog.admin .options-page { padding: 16px; }
  .dialog.admin .page-sub { margin-left: 0; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .setting-row, .invite-maker { flex-direction: column; align-items: stretch; }
  .dialog.admin .setting-row select, .dialog.admin .invite-maker select { width: 100%; }
  .dialog.admin .admin-row { flex-wrap: wrap; }
  .row-actions { width: 100%; padding-left: 48px; }
  .row-actions .btn { flex: 1; }
}
.dialog.admin { height: 600px; }
.dialog.admin .admin-row > .avatar-wrap { flex: none; margin: 0; }
.dialog.admin .admin-row > span:not(.avatar-wrap) { align-items: flex-start; }
.dialog.admin .row-actions { flex: none; flex-direction: row; }
@media (max-width: 640px) {
  .dialog.admin { height: 100dvh; }
  .dialog.admin .options-nav .cat { display: flex; white-space: nowrap; font-size: 14px; }
  .dialog.admin .options-nav .cat.active { background: transparent; color: var(--blue-text); }
}

/* ---- QR sign-in */
.qr-frame { width: 200px; height: 200px; padding: 0; background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); overflow: hidden; }
.qr-frame .qr-code { display: block; width: 100%; height: 100%; }
.qr-signin { align-items: center; }
.qr-signin h1 { align-self: flex-start; }
.qr-signin .qr-frame { margin: 4px auto 16px; }
.qr-steps { margin: 0 0 10px; padding-left: 20px; font-size: 13px; line-height: 1.5; }
.qr-steps li { margin-bottom: 4px; }
.qr-status { min-height: 18px; font-size: 12px; font-weight: 600; }
.qr-handoff { display: flex; gap: 22px; align-items: flex-start; }
.qr-handoff .qr-frame { flex: none; border: 1px solid var(--line); box-shadow: none; }
.qr-handoff h2 { margin-top: 2px; }
.qr-warn { display: flex; gap: 8px; padding: 8px 10px; border-radius: 4px; background: color-mix(in srgb, var(--orange) 14%, transparent); font-size: 12px; }
.qr-warn .ico { flex: none; width: 16px; height: 16px; color: var(--orange); }
.qr-approve { text-align: center; padding: 6px 4px 0; }
.qr-approve > .ico { width: 40px; height: 40px; color: var(--blue); margin-bottom: 6px; }
@media (max-width: 640px) {
  .qr-handoff { flex-direction: column; align-items: center; }
  .qr-frame { width: 220px; height: 220px; }
}

/* ---- Devices: small phones, phones on their side, tablets and touch screens */
@media (max-width: 380px) {
  .conv-head { gap: 6px; padding-right: 6px; }
  .conv-head .avatar.size-60 { width: 34px; height: 34px; }
  .conv-name-row h1 { font-size: 17px; }
  .conv-name-row .favorite { display: none; }
  .conv-actions { gap: 6px; }
  .round-btn { width: 34px; height: 34px; }
  .round-btn .ico { width: 18px; height: 18px; }
  .stat-grid { gap: 8px; }
  .stat-card { padding: 10px; }
  .card-foot { flex-direction: column; gap: 2px; }
}
/* Touch screens (phones, iPads, Android tablets, touch laptops): bigger targets, no zoom-on-focus. */
@media (pointer: coarse) {
  input, select, textarea, .dialog input[type=text], .dialog input[type=password], .dialog input:not([type]), .dialog select { font-size: 16px; }
  .dialog input[type=text], .dialog input[type=password], .dialog input:not([type]), .dialog select { height: 36px; }
  .menubar-item { min-height: 32px; padding-left: 12px; padding-right: 12px; }
  .menu-row { min-height: 40px; }
  .btn { min-height: 36px; }
  .btn.small { min-height: 32px; }
  .options-nav .cat { min-height: 44px; }
  .options-nav .sub { min-height: 38px; }
  .dialog-title button { width: 44px; height: 36px; }
  .admin-row { min-height: 52px; }
  .check input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
}
/* Phones held sideways: little height, so dialogs use the whole screen. */
@media (max-height: 500px) and (orientation: landscape) {
  .dialog-shade { padding: 0; align-items: stretch; }
  .dialog, .dialog.options, .dialog.admin { max-height: none; height: 100dvh; border: 0; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .dialog-buttons { padding: 8px 16px; }
  .signin-column { padding-top: 16px; }
  .brand { transform: scale(.75); margin-bottom: -16px; }
  .qr-frame { width: 160px; height: 160px; }
  .qr-handoff { flex-direction: row; }
  .incoming { max-height: calc(100dvh - 16px); overflow-y: auto; }
}
/* Tablets upright (iPad, Android tablets): roomier sidebar, readable line lengths. */
@media (min-width: 641px) and (max-width: 1100px) {
  .home-view { padding: 28px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 641px) and (max-width: 1100px) and (pointer: coarse) {
  .sidebar { width: 280px; }
  .contact-row { min-height: 56px; }
}

/* Own camera shown like a mirror (front cameras/webcams only). */
.call-stage #local-video.mirror, .options-page video.mirror, .qr-viewfinder video.mirror { transform: scaleX(-1); }
/* Scan QR Code */
.qr-scan { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.qr-viewfinder { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1; background: #000; border-radius: 8px; overflow: hidden; }
.qr-viewfinder video { width: 100%; height: 100%; object-fit: cover; }
.qr-target { position: absolute; inset: 15%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.qr-scan-hint { text-align: center; margin: 0; }

/* ---------- Sign-in, polished ---------- */
.signin {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255, 255, 255, .22), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(0, 70, 120, .28), transparent 60%),
    linear-gradient(165deg, #1cc0f6 0%, #00aff0 42%, #0098d8 100%);
}
.signin-column { width: 320px; animation: signin-in .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes signin-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.brand-mark { filter: drop-shadow(0 6px 14px rgba(0, 60, 100, .25)); }
.brand-name { letter-spacing: .6px; }
.signin-form h1 { font-size: 22px; margin-bottom: 16px; }
.field span { font-size: 12px; font-weight: 600; letter-spacing: .2px; color: rgba(255, 255, 255, .92); margin-bottom: 6px; }
.field input { height: 40px; border-radius: 6px; padding: 0 12px; font-size: 14px; box-shadow: 0 1px 2px rgba(0, 40, 70, .18); transition: box-shadow .15s ease; }
.field input:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), 0 1px 2px rgba(0, 40, 70, .18); }
.password-box { position: relative; display: block; margin: 0; }
.password-box input { padding-right: 42px; }
.reveal { position: absolute; right: 4px; top: 4px; width: 34px; height: 32px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #7d8b93; }
.reveal:hover { color: #3c4a52; background: rgba(0, 0, 0, .05); }
.reveal svg { width: 18px; height: 18px; fill: currentColor; }
.reveal .eye-shut { display: none; }
.reveal.on .eye-shut { display: inline; }
.caps-note { margin: -4px 0 10px; font-size: 12px; font-weight: 600; }
.caps-note::before { content: "⇪ "; }
.server-row { align-items: center; padding: 6px 10px; border-radius: 6px; background: rgba(0, 60, 100, .16); margin: 4px 0 14px; }
.signin-error:empty { display: none; }
.signin-error { padding: 8px 10px; border-radius: 6px; background: rgba(120, 0, 20, .28); margin-bottom: 12px; line-height: 1.4; }
.signin-btn { position: relative; height: 42px; border-radius: 6px; font-size: 15px; font-weight: 600; letter-spacing: .2px; background: #006fa0; box-shadow: 0 2px 6px rgba(0, 50, 90, .25); transition: background .15s ease, transform .1s ease, box-shadow .15s ease; }
.signin-btn:hover:not(:disabled) { background: #005f8a; box-shadow: 0 4px 12px rgba(0, 50, 90, .3); }
.signin-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 3px rgba(0, 50, 90, .25); }
.signin-btn:focus-visible, .signin-ghost:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.signin-btn .spinner { display: none; position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.signin-btn.busy .spinner { display: block; }
.signin-btn.busy .btn-label::after { content: "…"; }
@keyframes spin { to { transform: rotate(360deg); } }
.signin-or { display: flex; align-items: center; gap: 10px; margin: 16px 0; font-size: 12px; color: rgba(255, 255, 255, .8); }
.signin-or::before, .signin-or::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .35); }
.signin-or[hidden], .signin-ghost[hidden] { display: none; }
.signin-ghost { width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 6px; color: #fff; font-size: 14px; font-weight: 600; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); transition: background .15s ease; }
.signin-ghost:hover { background: rgba(255, 255, 255, .22); }
.signin-ghost svg { width: 18px; height: 18px; fill: currentColor; }
.signin-links { flex-direction: row; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; }
.signin-links .dot { color: rgba(255, 255, 255, .7); }
.link-light { text-decoration-color: rgba(255, 255, 255, .55); }
.link-light:hover { color: #fff; text-decoration-color: #fff; }
.qr-signin .signin-links { justify-content: flex-start; }
.qr-signin .qr-frame { box-shadow: 0 8px 24px rgba(0, 50, 90, .3); border-radius: 10px; padding: 8px; width: 216px; height: 216px; }
.signin-note { color: rgba(255, 255, 255, .78); }
:root[data-theme="dark"] .signin {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255, 255, 255, .08), transparent 60%),
    linear-gradient(165deg, #0b5f82 0%, #094e6b 50%, #073c53 100%);
}
:root[data-theme="dark"] .signin-btn { background: #00aff0; color: #04293a; }
:root[data-theme="dark"] .signin-btn:hover:not(:disabled) { background: #23bdf5; }
@media (max-width: 640px) {
  .signin-column { width: calc(100% - 40px); max-width: 360px; }
  .field input { height: 46px; font-size: 16px; }
  .reveal { top: 6px; height: 34px; }
  .signin-btn, .signin-ghost { height: 48px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .signin-column { animation: none; } .signin-btn, .field input { transition: none; } }

/* ---------- Desktop title bar (drawn by the page; Windows keeps only its three buttons) ---------- */
.titlebar { display: contents; }
.titlebar .tb-icon, .titlebar .tb-title { display: none; }
body.custom-titlebar .titlebar {
  --tb-overlay: #eef9fe;
  flex: none; position: relative; z-index: 900; height: 32px; display: flex; align-items: center; gap: 6px;
  padding-left: 10px; padding-right: calc(100vw - env(titlebar-area-width, 100vw) - env(titlebar-area-x, 0px));
  background: linear-gradient(90deg, #dcf3fc 0%, #eef9fe 45%, var(--tb-overlay) 100%);
  color: #1d2b33; -webkit-app-region: drag; user-select: none;
}
body.custom-titlebar .tb-icon { width: 16px; height: 16px; flex: none; }
body.custom-titlebar .tb-title { flex: 1; text-align: center; font-size: 12px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
body.custom-titlebar .menubar { display: flex; height: 32px; align-items: center; gap: 2px; background: transparent; border: 0; font-size: 12.5px; -webkit-app-region: no-drag; }
body.custom-titlebar .menubar-item { height: 26px; line-height: 24px; padding: 0 10px; border-radius: 5px; border: 1px solid transparent; color: inherit; transition: background-color .12s ease; }
body.custom-titlebar .menubar-item:hover, body.custom-titlebar .menubar-item.open { background: rgba(0, 120, 170, .1); border-color: transparent; }
/* Sign-in: the bar is part of the blue backdrop. */
body.custom-titlebar.titlebar-on-blue .titlebar { --tb-overlay: #1cbff6; background: #1cbff6; color: #ffffff; }
body.custom-titlebar.titlebar-on-blue .menubar-item:hover, body.custom-titlebar.titlebar-on-blue .menubar-item.open { background: rgba(255, 255, 255, .2); }
body.custom-titlebar .signin { top: 32px; }
body.custom-titlebar .signin { background:
    linear-gradient(180deg, #1cbff6 0, rgba(28, 191, 246, 0) 140px),
    radial-gradient(1200px 600px at 50% 0%, rgba(255, 255, 255, .16), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(0, 70, 120, .28), transparent 60%),
    linear-gradient(165deg, #1cc0f6 0%, #00aff0 42%, #0098d8 100%); }
:root[data-theme="dark"] body.custom-titlebar .titlebar { --tb-overlay: #12181c; background: #12181c; color: #dfe7eb; }
:root[data-theme="dark"] body.custom-titlebar .menubar-item:hover, :root[data-theme="dark"] body.custom-titlebar .menubar-item.open { background: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] body.custom-titlebar.titlebar-on-blue .titlebar { --tb-overlay: #0b5f82; background: #0b5f82; color: #ffffff; }
:root[data-theme="dark"] body.custom-titlebar .signin { background: linear-gradient(180deg, #0b5f82 0, rgba(11, 95, 130, 0) 140px), linear-gradient(165deg, #0b5f82 0%, #094e6b 50%, #073c53 100%); }

.signin-error { background: rgba(255, 255, 255, .96); color: #b3261e; box-shadow: 0 2px 8px rgba(0, 50, 90, .18); }
.signin-error:not(:empty)::before { content: "⚠ "; color: #b3261e; }
body.custom-titlebar .tb-icon, body.custom-titlebar .tb-title { display: block; }
body.custom-titlebar.titlebar-on-blue .tb-icon, body.custom-titlebar.titlebar-on-blue .tb-title { visibility: hidden; }

/* ---------- Website: top bar and menus ---------- */
body.web-titlebar .titlebar { -webkit-app-region: no-drag; padding-right: 12px; }
@media (max-width: 640px) { body.web-titlebar .titlebar { display: none; } }
.menu-list { padding: 5px; border-radius: 9px; border: 1px solid var(--menu-border); box-shadow: 0 10px 30px rgba(0, 40, 70, .16), 0 2px 6px rgba(0, 40, 70, .08); font-size: 12.5px; animation: menu-in .12s ease-out both; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.menu-row { height: 28px; border-radius: 5px; border: 0; padding-right: 6px; }
.menu-row:not(:disabled):hover, .menu-row.has-sub:hover { background: var(--hover); border-color: transparent; }
.menu-sep { margin: 4px 6px 4px 30px; }
.menu-accel { color: var(--muted); }

/* ---------- Home ---------- */
.home-view { padding: 40px 40px 48px; background: radial-gradient(900px 300px at 20% -60px, var(--selected), transparent 70%), linear-gradient(var(--sidebar), var(--surface) 260px); }
.home-view > * { max-width: 880px; margin-left: auto; margin-right: auto; }
.home-hero .avatar.size-96 { box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--selected), 0 8px 20px rgba(0, 60, 100, .15); }
.home-hello h1 { font-size: 32px; color: var(--text-strong); }
.home-mood { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s ease, color .15s ease; }
.home-mood::after { content: "✎"; font-size: 12px; opacity: .6; }
.home-mood:hover { box-shadow: inset 0 0 0 1px var(--blue); }
.home-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.home-action { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px 16px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(0, 40, 70, .05); font-size: 13px; color: var(--text-strong); transition: transform .15s ease, box-shadow .15s ease; }
.home-action:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--selected), 0 8px 20px rgba(0, 60, 100, .12); }
.home-action:active { transform: none; }
.ha-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; box-shadow: 0 4px 10px rgba(0, 150, 210, .3); }
.ha-icon .ico { width: 22px; height: 22px; }
.home-cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; max-width: 880px; }
.home-card { border: 0; border-radius: 12px; padding: 18px 20px; box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(0, 40, 70, .05); }
.hc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.home-card h2 { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 14px var(--font); color: var(--text-strong); }
.home-card h2 .ico { width: 18px; height: 18px; color: var(--blue); }
.hc-sub { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; }
.hc-faces { display: flex; flex-wrap: wrap; gap: 10px; }
.hc-face { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; padding: 6px 0; border-radius: 10px; font-size: 12px; color: var(--text-strong); }
.hc-face:hover { background: var(--hover); }
.hc-face span:last-child { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-recent { display: flex; flex-direction: column; margin: 6px -8px 0; }
.hc-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; text-align: left; }
.hc-row:hover { background: var(--hover); }
.hc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hc-text strong { font-weight: 600; color: var(--text-strong); }
.hc-text small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-row.unread .hc-text small { color: var(--text-strong); font-weight: 600; }
.hc-time { font-size: 11px; color: var(--muted); align-self: flex-start; margin-top: 2px; }
.hc-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
@media (max-width: 900px) { .home-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .home-view { padding: 20px 16px 32px; }
  .home-hello h1 { font-size: 24px; }
  .home-actions { gap: 10px; margin-top: 22px; }
  .home-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .home-action, .menu-list { transition: none; animation: none; } }
.hc-face.away { opacity: .55; } .hc-face.away:hover { opacity: 1; }

/* ---------- Sleek scrollbars: thin, rounded, no arrows, fade into the background ---------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 20%, transparent); background-clip: padding-box; border: 4px solid transparent; border-radius: 10px; min-height: 40px; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--text) 38%, transparent); border-width: 3px; }
::-webkit-scrollbar-thumb:active { background-color: color-mix(in srgb, var(--blue) 70%, transparent); border-width: 3px; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 25%, transparent) transparent; } }

/* ---------- Chat screen polish ---------- */
.conv-head { height: 76px; border-bottom: 0; box-shadow: 0 1px 0 var(--line), 0 4px 14px rgba(0, 40, 70, .04); position: relative; z-index: 1; }
.conv-head .avatar.size-60 { box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line); }
.round-btn { transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease; box-shadow: 0 2px 6px rgba(0, 150, 210, .25); }
.round-btn.outline { box-shadow: inset 0 0 0 2px var(--blue); }
.round-btn:hover:not(:disabled) { transform: translateY(-1px); }
.round-btn:active:not(:disabled) { transform: none; }
.round-btn:disabled { box-shadow: none; }
.messages { padding-top: 14px; }
.day { display: flex; align-items: center; gap: 12px; margin: 18px 40px 10px; font-size: 12px; font-weight: 600; letter-spacing: .2px; }
.day::before, .day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.bubble { border-radius: 10px; padding: 8px 14px; box-shadow: 0 1px 1px rgba(0, 40, 70, .05); }
.bubble::before { top: 12px; }
.file-card { border-radius: 10px; box-shadow: 0 1px 1px rgba(0, 40, 70, .05); }
.file-picture { max-width: 340px; max-height: 280px; border-radius: 12px; transition: filter .15s ease, transform .15s ease; }
.file-picture[src] { background: transparent; min-width: 0; min-height: 0; }
.file-picture:hover { filter: brightness(1.05); }
.msg-time { font-weight: 500; font-size: 11.5px; }
.composer { padding-bottom: 16px; }
.composer-box { border-radius: 20px; background: var(--surface); border-color: var(--input-border); padding: 0 6px 0 4px; transition: border-color .15s ease, box-shadow .15s ease; }
.composer-box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); }
.composer-box.editing { background: var(--editing); }
.composer-box textarea { padding: 8px 12px; }
.attach-btn { box-shadow: 0 2px 6px rgba(0, 150, 210, .25); transition: background-color .15s ease, transform .1s ease; }
.attach-btn:hover:not(:disabled) { transform: translateY(-1px); }
.send-btn { border-radius: 50%; width: 38px; height: 38px; transition: background-color .15s ease, color .15s ease; }
.send-btn:hover { background: var(--hover); }
@media (prefers-reduced-motion: reduce) { .round-btn, .attach-btn, .file-picture, .composer-box { transition: none; } }

/* ---------- Scrollbars hide until you point at (or scroll) the area ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { border-width: 3px; background-color: color-mix(in srgb, var(--text) 16%, transparent); transition: background-color .2s; }
:not(.show-scroll)::-webkit-scrollbar-thumb { background-color: transparent; }
::-webkit-scrollbar-thumb:hover { border-width: 2px; }
.contact-list::-webkit-scrollbar { width: 10px; }
.contact-list::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--text) 16%, transparent); background-clip: padding-box; border: 3px solid transparent; border-radius: 10px; }
.contact-list:not(.show-scroll)::-webkit-scrollbar-thumb { background-color: transparent; }

/* ---------- Contact list polish ---------- */
.side-search { margin: 10px 14px 0; height: 36px; padding: 0 12px; border: 0; border-radius: 18px; background: color-mix(in srgb, var(--blue) 7%, var(--surface)); box-shadow: inset 0 0 0 1px var(--line-soft); transition: box-shadow .15s ease, background-color .15s ease; }
.side-search:focus-within { background: var(--surface); box-shadow: inset 0 0 0 1px var(--blue), 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
.side-nav { padding: 10px 8px 6px; }
.side-nav button { height: 34px; padding: 0 14px; border-radius: 8px; transition: background-color .12s ease; }
.side-tabs { padding: 0 14px 0 22px; gap: 18px; }
.side-tabs [role=tab] { font-weight: 600; font-size: 12px; letter-spacing: .6px; color: var(--muted); position: relative; }
.side-tabs [role=tab][aria-selected=true] { color: var(--blue-text); }
.side-tabs [role=tab][aria-selected=true]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--blue); }
.tab-notch { display: none; }
.contact-list { padding: 4px 8px 10px; }
.list-group { height: 30px; padding: 0 14px 4px; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.contact-row { height: 58px; padding: 0 12px 0 14px; gap: 12px; border-radius: 10px; margin-top: 1px; transition: background-color .12s ease; }
.contact-row.active { background: var(--selected); box-shadow: inset 3px 0 0 var(--blue); }
.row-name { font-size: 13.5px; font-weight: 500; color: var(--text-strong); }
.row-sub { font-size: 12px; margin-top: 1px; }
.contact-row.unread .row-sub { color: var(--text-strong); font-weight: 500; }
.row-meta { align-self: flex-start; margin-top: 11px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.contact-row.unread .row-meta { color: var(--blue-text); font-weight: 600; }
.row-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; }
.list-empty { padding: 18px 14px; }
.list-link { padding: 10px 14px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .contact-row, .side-nav button, .side-search { transition: none; } }
/* Firefox has no ::-webkit-scrollbar: thin bars that stay invisible until you point at the area. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .show-scroll { scrollbar-color: color-mix(in srgb, var(--text) 30%, transparent) transparent; }
}

/* ---------- Profile: more ways to make it yours ---------- */
.profile-banner { transition: background .2s ease; }
.pf-name-row { display: grid; grid-template-columns: auto 1fr 150px; gap: 0 12px; align-items: end; }
.pf-emoji { width: 44px; height: 38px; border-radius: 10px; font-size: 22px; line-height: 1; border: 1px solid var(--field-border); background: var(--surface); display: flex; align-items: center; justify-content: center; }
.pf-emoji.empty { color: var(--muted); font-size: 18px; }
.pf-emoji:hover { border-color: var(--blue); }
.pf-emoji-picker { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; margin: -4px 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 8px 24px rgba(0, 40, 70, .1); }
.pf-emoji-picker button { width: 36px; height: 36px; border-radius: 8px; font-size: 20px; }
.pf-emoji-picker button:hover { background: var(--hover); }
.pf-emoji-picker .pf-emoji-none { width: auto; padding: 0 10px; font-size: 12px; color: var(--muted); }
.pf-field input, .pf-field textarea, .pf-field select { border-radius: 6px; }
.pf-field select { width: 100%; height: 34px; border: 1px solid var(--field-border); background: var(--surface); color: var(--text); padding: 0 8px; }
.pf-mood-row { grid-template-columns: 1fr 170px; }
.pf-subhead { font-size: 12px; color: var(--muted); margin: 4px 0 8px; }
.pf-banners { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin-bottom: 6px; }
.pf-banners button { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text); border-radius: 10px; padding: 4px; }
.pf-banners button span { height: 40px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.pf-banners button[aria-pressed=true] { box-shadow: 0 0 0 2px var(--blue); }
.pf-preview { max-width: 340px; border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 8px 24px rgba(0, 40, 70, .08); }
.pv-banner { height: 64px; }
.pv-body { padding: 0 16px 16px; }
.pv-pic { display: inline-block; margin-top: -30px; border-radius: 50%; box-shadow: 0 0 0 4px var(--surface); }
.pv-name { font-size: 17px; font-weight: 600; color: var(--text-strong); margin-top: 6px; }
.pv-mood { color: var(--muted); margin-top: 2px; }
.pv-line { font-size: 12.5px; margin-top: 6px; }
.pv-link { color: var(--blue-text); }
.pv-about { margin-top: 8px; white-space: pre-wrap; font-size: 12.5px; }
.status-emoji { font-weight: 400; }
.pronouns { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--hover); color: var(--muted); font-size: 11px; font-weight: 500; vertical-align: middle; }
@media (max-width: 640px) {
  .pf-name-row { grid-template-columns: auto 1fr; }
  .pf-pronouns { grid-column: 1 / -1; }
  .pf-mood-row { grid-template-columns: 1fr; }
}

/* ---------- GIFs ---------- */
.gif-btn { flex: none; margin: 7px 6px 0 0; height: 22px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--blue-text); box-shadow: inset 0 0 0 1.5px currentColor; }
.gif-btn:hover:not(:disabled) { background: var(--hover); }
.gif-picker { position: fixed; z-index: 900; width: 380px; height: 440px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--menu-border); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 40, 70, .2); overflow: hidden; animation: menu-in .14s ease-out both; }
.gif-top { display: flex; gap: 6px; align-items: center; padding: 10px 10px 8px; }
.gif-top input { flex: 1; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--field-border); background: var(--surface); color: var(--text); outline: none; }
.gif-top input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
.gif-grid { flex: 1; overflow-y: auto; padding: 0 10px 10px; columns: 2; column-gap: 6px; }
.gif-item { display: block; width: 100%; margin: 0 0 6px; border-radius: 8px; overflow: hidden; background: var(--hover); break-inside: avoid; position: relative; }
.gif-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gif-item:hover { outline: 2px solid var(--blue); outline-offset: -2px; }
.gif-item.sending { opacity: .5; pointer-events: none; }
.gif-note { column-span: all; text-align: center; color: var(--muted); padding: 30px 16px; line-height: 1.5; }
.gif-note strong { color: var(--text-strong); }
.gif-foot { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 12px; }
.gif-credit { color: var(--muted); font-size: 11px; letter-spacing: .3px; }
@media (max-width: 640px) {
  .gif-picker { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; height: 70dvh; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .gif-btn { margin-top: 10px; }
}

/* ---------- Call screen polish ---------- */
.call-stage { background: radial-gradient(1100px 520px at 50% 18%, #2c4152 0%, #172029 55%, #0e1418 100%); }
.call-center .avatar { box-shadow: 0 0 0 6px rgba(255, 255, 255, .06), 0 18px 40px rgba(0, 0, 0, .45); }
@keyframes ring-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 175, 240, .5), 0 0 0 0 rgba(0, 175, 240, .35); } 70% { box-shadow: 0 0 0 22px rgba(0, 175, 240, 0), 0 0 0 44px rgba(0, 175, 240, 0); } 100% { box-shadow: 0 0 0 22px rgba(0, 175, 240, 0), 0 0 0 44px rgba(0, 175, 240, 0); } }
.call-name { font-size: 28px; letter-spacing: .2px; }
.call-status { font-size: 13px; color: #c3ced4; }
.call-top { justify-content: center; padding: 12px 16px; background: none; }
.call-top span { padding: 4px 12px; border-radius: 14px; background: rgba(10, 16, 20, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; color: #e6eef2; }
.call-top #call-clock { font-variant-numeric: tabular-nums; }
.call-bar { left: 50%; right: auto; bottom: 16px; transform: translateX(-50%); gap: 10px; padding: 8px 10px; border-radius: 34px; background: rgba(12, 18, 22, .62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.call-btn { width: 50px; height: 50px; background: rgba(255, 255, 255, .13); transition: background-color .15s ease, transform .1s ease; }
.call-btn:hover { background: rgba(255, 255, 255, .22); }
.call-btn:active { transform: scale(.95); }
.call-btn.off { background: #fff; color: #1b252b; }
.call-btn.off:hover { background: #e7edf0; }
.call-btn.hangup { width: 66px; border-radius: 25px; background: #e5323e; }
.call-btn.hangup:hover { background: #c9202c; }
.call-btn.answer { background: #2fb84f; }
.call-btn.answer:hover { background: #27a044; }
.call-btn.sharing { background: var(--blue); color: #fff; box-shadow: none; }
.call-btn:disabled { opacity: .35; }
.call-stage #local-video { right: 18px; bottom: 92px; width: 176px; height: 132px; border: 0; border-radius: 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .12); }
.call-grid { gap: 8px; padding: 8px; inset: 0 0 84px; }
.call-tile { border-radius: 14px; background: #1f2a32; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.tile-name { left: 10px; bottom: 10px; padding: 3px 10px; border-radius: 12px; background: rgba(10, 16, 20, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 12px; }
.call-unblock { border-radius: 22px; }
/* Incoming call card */
.incoming { right: 20px; bottom: 20px; width: 380px; padding: 14px 16px; border-radius: 18px; background: rgba(18, 26, 32, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 44px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .08); animation: incoming-in .25s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes incoming-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.incoming .avatar { animation: ring-pulse 1.6s ease-out infinite; }
.incoming-text strong { font-weight: 600; }
.incoming-actions .call-btn.small { width: 42px; height: 42px; }
.incoming-actions #incoming-answer, .incoming-actions #incoming-video { background: #2fb84f; }
.incoming-actions #incoming-answer:hover, .incoming-actions #incoming-video:hover { background: #27a044; }
.incoming-actions .call-btn.hangup { width: 42px; border-radius: 50%; }
@media (max-width: 640px) {
  .call-bar { gap: 6px; padding: 6px 8px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  .call-btn { width: 44px; height: 44px; }
  .call-btn.hangup { width: 56px; }
  .call-stage #local-video { width: 100px; height: 134px; bottom: 80px; right: 10px; border-radius: 12px; }
  .incoming { left: 10px; right: 10px; width: auto; bottom: calc(10px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .incoming, .incoming .avatar, .call-center.ringing .avatar { animation: none; } }

/* ---------- GIF picker, Discord-style ---------- */
.gif-picker { width: 440px; height: 500px; }
.gif-top { gap: 4px; }
.gif-back .ico { transform: rotate(90deg); }
.gif-title { padding: 0 14px 8px; font-weight: 700; font-size: 13px; color: var(--text-strong); }
.gif-grid.tiles { columns: initial; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.gif-tile { position: relative; height: 96px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #3a7bd5, #00aff0); }
.gif-tile.fav { background: linear-gradient(135deg, #f7b733, #fc4a1a); }
.gif-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gif-tile::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .42); transition: background-color .15s ease; }
.gif-tile:hover::after { background: rgba(0, 0, 0, .25); }
.gif-tile span { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.gif-grid.tiles .gif-note { grid-column: 1 / -1; padding: 12px; }
.gif-item { cursor: pointer; }
.gif-item.gone { display: none; }
.gif-star { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 16px; line-height: 1; opacity: 0; transition: opacity .12s ease, transform .1s ease; }
.gif-item:hover .gif-star, .gif-star.on { opacity: 1; }
.gif-star.on { color: #ffcc33; }
.gif-star:hover { transform: scale(1.1); }
.pic-wrap { position: relative; display: inline-block; }
.pic-fav { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 17px; line-height: 1; opacity: 0; transition: opacity .12s ease; }
.pic-wrap:hover .pic-fav, .pic-fav:focus-visible { opacity: 1; }
.pic-fav.on { color: #ffcc33; }
@media (hover: none) { .gif-star, .pic-fav { opacity: 1; } }
@media (max-width: 640px) { .gif-picker { height: 75dvh; } .gif-tile { height: 84px; } }

/* ---------- Settings (Options) polish ---------- */
.dialog { border-radius: 12px; overflow: hidden; border-color: color-mix(in srgb, var(--blue) 55%, var(--line)); box-shadow: 0 24px 60px rgba(0, 30, 50, .28), 0 2px 8px rgba(0, 30, 50, .12); }
.dialog-title { height: 36px; font-size: 12.5px; }
.dialog-title button { border-radius: 6px; }
.btn { border-radius: 6px; transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease; }
.btn.primary { box-shadow: 0 2px 6px rgba(0, 150, 210, .25); }
.dialog input[type=text], .dialog input[type=password], .dialog input[type=number], .dialog input:not([type]), .dialog select, .dialog textarea { border-radius: 6px; }
.dialog input[type=number] { height: 32px; border: 1px solid var(--field-border); background: var(--surface); padding: 0 10px; }
.dialog select { height: 34px; }
.dialog input:focus, .dialog select:focus, .dialog textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }

/* Sidebar: section labels with rounded page tabs */
.dialog.options:not(.admin) .options-nav { padding: 12px 10px; }
.dialog.options:not(.admin) .options-nav .cat { height: 30px; margin-top: 8px; padding: 0 8px; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.dialog.options:not(.admin) .options-nav .cat:first-child { margin-top: 0; }
.dialog.options:not(.admin) .options-nav .cat:hover { background: none; color: var(--text-strong); }
.dialog.options:not(.admin) .options-nav .cat .ico { width: 15px; height: 15px; }
.dialog.options:not(.admin) .options-nav .sub { height: 34px; padding: 0 12px 0 31px; border-radius: 8px; font-size: 13px; color: var(--text); transition: background-color .12s ease; }
.dialog.options:not(.admin) .options-nav .sub.active { background: var(--selected); color: var(--text-strong); font-weight: 600; box-shadow: inset 3px 0 0 var(--blue); }

/* Page */
.options-page { padding: 24px 28px 28px; }
.options-page h2 { font-size: 24px; margin-bottom: 18px; color: var(--text-strong); }
.options-page h3 { margin: 22px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.options-page .divider { margin: 18px 0; background: transparent; height: 0; }
.options-page p.muted, .options-page .device-note { font-size: 12.5px; line-height: 1.5; }

/* Checkboxes become switches inside a rounded list */
.options-page .check { position: relative; justify-content: space-between; flex-direction: row-reverse; gap: 16px; margin: 0; padding: 11px 14px; min-height: 46px; background: var(--surface); border: 1px solid var(--line); border-top-width: 0; color: var(--text-strong); cursor: pointer; }
.options-page .check:not(.check + .check) { border-top-width: 1px; border-top-left-radius: 10px; border-top-right-radius: 10px; margin-top: 4px; }
.options-page .check:not(:has(+ .check)) { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; margin-bottom: 8px; }
.options-page .check:hover { background: color-mix(in srgb, var(--hover) 60%, var(--surface)); }
.options-page .check input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 38px; height: 22px; margin: 0; border-radius: 11px; background: color-mix(in srgb, var(--text) 22%, transparent); position: relative; cursor: pointer; transition: background-color .15s ease; }
.options-page .check input[type=checkbox]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s ease; }
.options-page .check input[type=checkbox]:checked { background: var(--blue); }
.options-page .check input[type=checkbox]:checked::before { transform: translateX(16px); }
.options-page .check input[type=checkbox]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.options-page label.row { margin: 4px 0 12px; }
.options-page label.row > span { font-size: 12.5px; color: var(--muted); }

/* Appearance cards, sounds list, meter and preview */
.theme-choice { border-radius: 12px; padding: 10px 12px; transition: border-color .12s ease, background-color .12s ease; }
.theme-swatch { border-radius: 8px; overflow: hidden; }
.sound-list { border-radius: 10px; overflow: hidden; background: var(--surface); }
.sound-row { padding: 9px 12px; }
.sound-row .btn { height: 28px; border-radius: 6px; }
.options-page .meter { height: 8px; border-radius: 4px; width: min(320px, 100%); }
.options-page .meter span { border-radius: 4px; }
.options-page video { border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .options-page .check input[type=checkbox], .options-page .check input[type=checkbox]::before { transition: none; } }
.dialog.options:not(.admin) { height: 600px; }

/* ---------- Profile page polish ---------- */
.profile-view { background: color-mix(in srgb, var(--sidebar) 70%, var(--surface)); }
.profile-view .profile-banner { height: 170px; }
.profile-form { max-width: 1040px; margin: -72px auto 0; padding: 0 32px 96px; }
.pf-head { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.pf-avatar { position: relative; flex: none; border-radius: 50%; }
.pf-avatar .avatar { box-shadow: 0 0 0 6px var(--surface), 0 10px 26px rgba(0, 40, 70, .2); }
.pf-avatar-hover { position: absolute; inset: 0; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 12px; font-weight: 600; opacity: 0; transition: opacity .15s ease; }
.pf-avatar-hover .ico { width: 20px; height: 20px; }
.pf-avatar:hover .pf-avatar-hover, .pf-avatar:focus-visible .pf-avatar-hover { opacity: 1; }
.pf-head-text { flex: 1; min-width: 200px; padding-bottom: 8px; }
.pf-head-text h1 { margin: 0; font: 300 30px/1.2 "Segoe UI Light", var(--font); color: var(--text-strong); }
.pf-head-sub { color: var(--muted); margin-top: 4px; }
.profile-pic-actions { padding-bottom: 10px; gap: 8px; }
.pf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.pf-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pf-card { background: var(--surface); border-radius: 14px; padding: 20px 22px 18px; box-shadow: 0 0 0 1px var(--line), 0 2px 8px rgba(0, 40, 70, .04); }
.pf-card h3 { margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
.pf-card h3 + .pf-hint { margin-top: -8px; }
.pf-hint { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; }
.pf-field > span { font-weight: 600; font-size: 12px; color: var(--text); }
.pf-field input, .pf-field textarea, .pf-field select { border-radius: 8px; padding: 8px 12px; transition: border-color .12s ease, box-shadow .12s ease; }
.pf-field input:focus, .pf-field textarea:focus, .pf-field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
.pf-field select { height: 38px; }
.pf-name input { font: 400 17px var(--font); padding: 7px 12px; }
.pf-emoji { height: 40px; border-radius: 10px; }
.pf-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 10px; }
.pf-side-label { font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
.pf-side .pf-preview { max-width: none; }
.pv-banner { height: 90px; }
.pf-account { grid-template-columns: 170px 1fr; gap: 10px 18px; }
.pf-account dd { font-weight: 600; color: var(--text-strong); }
/* Privacy switches */
.pf-card .check { justify-content: space-between; flex-direction: row-reverse; gap: 16px; margin: 0; padding: 11px 14px; min-height: 46px; border: 1px solid var(--line); border-top-width: 0; color: var(--text-strong); cursor: pointer; }
.pf-card .check:not(.check + .check) { border-top-width: 1px; border-radius: 10px 10px 0 0; }
.pf-card .check:not(:has(+ .check)) { border-radius: 0 0 10px 10px; }
.pf-card .check:only-of-type { border-radius: 10px; }
.pf-card .check input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 38px; height: 22px; margin: 0; border-radius: 11px; background: color-mix(in srgb, var(--text) 22%, transparent); position: relative; cursor: pointer; transition: background-color .15s ease; }
.pf-card .check input[type=checkbox]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s ease; }
.pf-card .check input[type=checkbox]:checked { background: var(--blue); }
.pf-card .check input[type=checkbox]:checked::before { transform: translateX(16px); }
/* Floating save bar */
.pf-actions { position: sticky; bottom: 16px; z-index: 5; margin: 22px 0 0; padding: 10px 12px 10px 18px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 10px 30px rgba(0, 40, 70, .12); transition: box-shadow .2s ease, background-color .2s ease; }
.pf-actions #pf-status { margin-right: auto; color: var(--muted); font-size: 13px; }
.pf-actions.dirty { background: color-mix(in srgb, var(--blue) 10%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 45%, transparent), 0 12px 32px rgba(0, 120, 180, .22); }
.pf-actions.dirty #pf-status { color: var(--text-strong); font-weight: 600; }
.pf-actions.dirty #pf-status::before { content: "● "; color: var(--orange); }
.pf-actions:not(.dirty) #pf-reset { display: none; }
@media (max-width: 900px) {
  .pf-layout { grid-template-columns: 1fr; }
  .pf-side { position: static; order: -1; }
}
@media (max-width: 640px) {
  .profile-view .profile-banner { height: 130px; }
  .profile-form { padding: 0 14px 90px; margin-top: -60px; }
  .pf-head { gap: 12px; }
  .pf-head-text h1 { font-size: 24px; }
  .pf-card { padding: 16px; }
  .pf-account { grid-template-columns: 1fr; gap: 2px; }
  .pf-account dd { margin-bottom: 10px; }
  .pf-actions { bottom: calc(10px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .pf-avatar-hover, .pf-actions, .pf-card .check input[type=checkbox], .pf-card .check input[type=checkbox]::before { transition: none; } }
.pf-card .check { display: flex; align-items: center; }
.profile-form { margin-top: -62px; }
.pf-head-text { padding-bottom: 4px; }
.pf-head-text h1 { font-size: 28px; }
.pf-actions .btn { white-space: nowrap; }
@media (max-width: 640px) { .pf-actions { padding: 8px 8px 8px 12px; gap: 8px; } .pf-actions #pf-status { font-size: 12px; } .pf-actions .btn.large { padding: 0 14px; } }

/* ---------- Dial pad polish ---------- */
.dial-view { justify-content: flex-start; padding: 32px 20px; background: radial-gradient(700px 360px at 50% 0%, var(--selected), transparent 70%), linear-gradient(var(--sidebar), var(--surface) 320px); }
.dial-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; padding: 22px 24px 24px; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 16px 40px rgba(0, 40, 70, .1); }
.dial-head { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 14px; }
.dial-head h1 { margin: 0; font: 300 26px "Segoe UI Light", var(--font); color: var(--text-strong); }
.dial-mine { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 12px; border-radius: 14px; background: var(--hover); color: var(--muted); font-size: 12px; transition: background-color .12s ease; }
.dial-mine strong { color: var(--blue-text); letter-spacing: 1px; }
.dial-mine .ico { width: 13px; height: 13px; color: var(--blue); }
.dial-mine:hover { background: var(--selected); }
.dial-display { width: 100%; max-width: 290px; position: relative; border-bottom: 0; margin-bottom: 18px; padding: 4px 44px; border-radius: 14px; background: color-mix(in srgb, var(--blue) 5%, var(--surface)); box-shadow: inset 0 0 0 1px var(--line); }
.dial-display:focus-within { box-shadow: inset 0 0 0 1px var(--blue), 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
.dial-display input { background: transparent; color: var(--text-strong); font-size: 32px; letter-spacing: 6px; height: 56px; }
.dial-display input::placeholder { font-size: 16px; letter-spacing: .3px; color: var(--muted); }
.dial-back-key { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.dial-back-key:hover { background: var(--hover); color: var(--text-strong); }
.dial-back-key svg { width: 22px; height: 22px; }
.dial-keys { grid-template-columns: repeat(3, 74px); gap: 14px 26px; }
.dial-keys button { width: 74px; height: 74px; border: 0; background: color-mix(in srgb, var(--blue) 7%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 14%, transparent); transition: background-color .1s ease, transform .08s ease, box-shadow .1s ease; }
.dial-keys button:hover { background: color-mix(in srgb, var(--blue) 14%, var(--surface)); border-color: transparent; }
.dial-keys button:active, .dial-keys button.pressed { transform: scale(.94); background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(0, 150, 210, .35); }
.dial-keys button.pressed small, .dial-keys button:active small { color: rgba(255, 255, 255, .85); }
.dial-keys b { font-size: 28px; color: inherit; }
.dial-result { margin-top: 22px; min-height: 150px; width: 100%; }
.dial-found { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dial-result .who { font-size: 18px; font-weight: 600; color: var(--text-strong); margin-top: 4px; }
.dial-result .row-actions { gap: 22px; margin-top: 14px; }
.dial-act { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--text); }
.dial-act span { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; transition: transform .1s ease, filter .12s ease; }
.dial-act span .ico { width: 24px; height: 24px; }
.dial-act.green span { background: #2fb84f; box-shadow: 0 6px 16px rgba(47, 184, 79, .35); }
.dial-act.blue span { background: var(--blue); box-shadow: 0 6px 16px rgba(0, 150, 210, .3); }
.dial-act.plain span { background: var(--hover); color: var(--blue-text); box-shadow: inset 0 0 0 1px var(--line); }
.dial-act:hover:not(:disabled) span { filter: brightness(1.08); transform: translateY(-1px); }
.dial-act:active:not(:disabled) span { transform: scale(.95); }
.dial-act:disabled { opacity: .45; }
@media (max-width: 640px) {
  .dial-view { padding: calc(52px + env(safe-area-inset-top)) 12px 24px; }
  .dial-card { box-shadow: none; background: transparent; padding: 0; }
  .dial-keys { grid-template-columns: repeat(3, 76px); gap: 14px 24px; }
  .dial-keys button { width: 76px; height: 76px; }
}
@media (prefers-reduced-motion: reduce) { .dial-keys button, .dial-act span { transition: none; } }

/* ---------- Incoming call, polished ---------- */
.incoming { flex-direction: column; align-items: stretch; gap: 0; width: 320px; padding: 0 0 18px; overflow: hidden; border-radius: 22px; background: #121a20; }
.inc-backdrop { position: absolute; inset: 0 0 auto; height: 190px; opacity: .55; filter: blur(28px) saturate(1.2); transform: scale(1.3); pointer-events: none; }
.incoming::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(18, 26, 32, .1), #121a20 62%); pointer-events: none; }
.incoming > * { position: relative; }
.inc-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 0 18px; }
.inc-label { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.inc-silence { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 14px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 12px; }
.inc-silence svg { width: 15px; height: 15px; }
.inc-silence .slash { display: none; }
.inc-silence.on .slash { display: inline; }
.inc-silence:hover:not(:disabled) { background: rgba(255, 255, 255, .2); }
.inc-silence:disabled { opacity: .7; }
.inc-who { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 18px 20px; text-align: center; }
.inc-pic { position: relative; border-radius: 50%; }
.inc-pic::before, .inc-pic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(0, 175, 240, .55); animation: inc-wave 2s ease-out infinite; }
.inc-pic::after { animation-delay: 1s; }
@keyframes inc-wave { from { transform: scale(1); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.incoming .avatar { animation: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 12px 30px rgba(0, 0, 0, .45); }
.incoming.video .inc-pic::before, .incoming.video .inc-pic::after { border-color: rgba(47, 184, 79, .6); }
.incoming-text { align-items: center; }
.incoming-text strong { font: 600 20px var(--font); white-space: normal; }
.incoming-text span { font-size: 13px; color: #b9c6cd; margin-top: 2px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.incoming-actions { justify-content: center; gap: 22px; }
.inc-act { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: #dfe7eb; }
.inc-act span { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; transition: transform .1s ease, filter .12s ease; }
.inc-act span .ico { width: 24px; height: 24px; }
.inc-act.decline span { background: #e5323e; box-shadow: 0 8px 20px rgba(229, 50, 62, .35); }
.inc-act.answer span { background: #2fb84f; box-shadow: 0 8px 20px rgba(47, 184, 79, .35); }
.incoming.video #incoming-answer span { background: rgba(255, 255, 255, .14); box-shadow: none; }
.inc-act:hover span { filter: brightness(1.1); transform: translateY(-1px); }
.inc-act:active span { transform: scale(.94); }
.incoming.video #incoming-video span { animation: inc-nudge 1.6s ease-in-out infinite; }
.incoming:not(.video) #incoming-answer span { animation: inc-nudge 1.6s ease-in-out infinite; }
@keyframes inc-nudge { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-12deg); } 86% { transform: rotate(10deg); } 94% { transform: rotate(-6deg); } }
@media (max-width: 640px) {
  .incoming { left: 8px; right: 8px; width: auto; border-radius: 24px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .inc-act span { width: 62px; height: 62px; }
  .incoming-actions { gap: 30px; }
}
@media (prefers-reduced-motion: reduce) { .inc-pic::before, .inc-pic::after, .inc-act span { animation: none !important; } }
.incoming-actions .inc-act, .incoming-actions .inc-act:hover { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; }
.incoming > .inc-backdrop { position: absolute; }
.incoming-actions #incoming-answer, .incoming-actions #incoming-video, .incoming-actions #incoming-answer:hover, .incoming-actions #incoming-video:hover { background: none; }
/* Dial pad: no empty space reserved under the keys; placeholder centred in its box */
.dial-result { min-height: 0; margin-top: 18px; }
.dial-result:has(.dial-found) { min-height: 150px; }
.dial-display input { line-height: 56px; }
.dial-display input:placeholder-shown { font-size: 16px; letter-spacing: .3px; }
.dial-view { justify-content: center; }
/* Title bar: "Classic Connect" centred on the whole window, hidden when space is tight */
body.custom-titlebar .tb-title { position: absolute; left: 50%; transform: translateX(-50%); flex: none; max-width: 30vw; }
@media (max-width: 1000px) { body.custom-titlebar .tb-title { display: none; } }
/* The conversation fills the whole area; pictures grow a little on big screens */
@media (min-width: 1400px) { .file-picture { max-width: 420px; max-height: 340px; } .bubble { font-size: 13.5px; } }
/* Profile save bar only shows when there's something to say */
.pf-actions:not(.dirty):not(.notice) { display: none; }
.dial-none { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); text-align: center; }
.dial-none > .ico { width: 34px; height: 34px; color: var(--line); margin-bottom: 4px; }
.dial-none span { color: var(--text-strong); font-weight: 600; }
.dial-none small { font-size: 12px; }
.dial-none .link { margin-top: 6px; }

/* ---------- Contact request card ---------- */
.request-panel { justify-content: flex-start; padding: 40px 20px; background: radial-gradient(700px 320px at 50% 0%, var(--selected), transparent 70%), linear-gradient(var(--sidebar), var(--surface) 320px); }
.rq-card { width: 100%; max-width: 440px; margin: auto 0; border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 18px 44px rgba(0, 40, 70, .12); text-align: center; }
.rq-banner { height: 110px; }
.rq-body { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 28px 26px; }
.rq-pic { margin-top: -56px; border-radius: 50%; box-shadow: 0 0 0 6px var(--surface), 0 10px 24px rgba(0, 40, 70, .2); }
.rq-pill { margin-top: 8px; padding: 3px 12px; border-radius: 12px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.rq-pill.blue { background: var(--selected); color: var(--blue-text); }
.rq-pill.amber { background: color-mix(in srgb, var(--orange) 16%, transparent); color: color-mix(in srgb, var(--orange) 80%, var(--text-strong)); }
.request-panel .rq-card h2 { margin: 4px 0 0; font: 600 22px var(--font); color: var(--text-strong); }
.rq-handle { color: var(--muted); font-size: 13px; }
.rq-mood { margin-top: 4px; font-style: italic; color: var(--text); }
.rq-about { margin: 6px 0 0; max-width: 360px; color: var(--text) !important; white-space: pre-wrap; font-size: 13px; }
.rq-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.rq-perks { list-style: none; margin: 14px 0 4px; padding: 12px 16px; width: 100%; border-radius: 12px; background: color-mix(in srgb, var(--blue) 5%, var(--surface)); box-shadow: inset 0 0 0 1px var(--line); text-align: left; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text); }
.rq-perks li { display: flex; align-items: center; gap: 10px; }
.rq-perks .ico { width: 16px; height: 16px; color: var(--blue); }
.rq-note { margin: 12px 0 2px !important; max-width: 340px; font-size: 13px; }
.rq-actions { display: flex; gap: 10px; margin-top: 14px; width: 100%; justify-content: center; }
.rq-actions .btn.large { flex: 1; max-width: 170px; height: 40px; font-size: 14px; }
.rq-block { margin-top: 10px; font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.rq-block:hover { color: var(--red); }
@media (max-width: 640px) { .request-panel { padding: 16px 12px; } .rq-body { padding: 0 18px 22px; } }

/* ---------- Group chats ---------- */
.group-pic { position: relative; display: inline-block; flex: none; }
.group-pic.gp-36 { width: 36px; height: 36px; } .group-pic.gp-40 { width: 40px; height: 40px; } .group-pic.gp-60 { width: 60px; height: 60px; }
.group-pic .avatar { position: absolute; width: 68% !important; height: 68% !important; box-shadow: 0 0 0 2px var(--surface); }
.group-pic .avatar:first-child { left: 0; top: 0; }
.group-pic .avatar:nth-child(2) { right: 0; bottom: 0; }
.group-pic.single .avatar { width: 100% !important; height: 100% !important; box-shadow: none; }
.group-pic em { position: absolute; right: -4px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--blue); color: #fff; font: 700 10px/18px var(--font); text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.contact-row .group-pic .avatar { box-shadow: 0 0 0 2px var(--sidebar); }
.contact-row.active .group-pic .avatar { box-shadow: 0 0 0 2px var(--selected); }
#peer-picture.is-group { background: transparent !important; overflow: visible; }
#peer-picture.is-group > .group-pic { width: 100%; height: 100%; }
.members-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.members-link:hover { color: var(--blue-text); }
.sender { font-weight: 600; font-size: 12px; margin-bottom: 4px; }
.sys-row { display: flex; justify-content: center; margin: 14px 0 6px; padding: 0 20px; }
.sys-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 14px; border-radius: 16px; background: var(--hover); color: var(--text); font-size: 12.5px; box-shadow: inset 0 0 0 1px var(--line); }
.sys-pill .ico { width: 14px; height: 14px; color: var(--blue); flex: none; }
.sys-pill small { color: var(--muted); font-size: 11px; }
/* Group dialogs */
.grp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.grp-head > .ico { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--selected); color: var(--blue); flex: none; }
.grp-head h2 { margin: 0 0 2px !important; }
.grp-head p { margin: 0 !important; font-size: 12.5px; }
.pick-label { font-size: 12px; font-weight: 600; margin: 4px 0 6px; }
.picker { display: flex; flex-direction: column; gap: 8px; }
.pick-search { height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--field-border); background: var(--surface); color: var(--text); outline: none; }
.pick-search:focus { border-color: var(--blue); }
.pick-list { max-height: 280px; border-radius: 12px; background: var(--surface); }
.pick-row { gap: 12px; padding: 8px 12px; transition: background-color .1s ease; }
.pick-row input { position: absolute; opacity: 0; pointer-events: none; }
.pick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pick-text strong { font-weight: 600; color: var(--text-strong); }
.pick-text small { color: var(--muted); font-size: 12px; }
.pick-check { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--field-border); flex: none; display: flex; align-items: center; justify-content: center; transition: background-color .12s ease, box-shadow .12s ease; }
.pick-row:has(input:checked) { background: color-mix(in srgb, var(--blue) 8%, var(--surface)); }
.pick-row:has(input:checked) .pick-check { background: var(--blue); box-shadow: none; }
.pick-row:has(input:checked) .pick-check::after { content: ""; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.pick-row:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: -2px; }
.pick-count { font-size: 12px; color: var(--muted); text-align: right; }
.dialog.members-dialog { width: 460px; }
.grp-tools { display: flex; gap: 8px; margin-bottom: 12px; }
.grp-tools .btn { display: inline-flex; align-items: center; gap: 6px; }
.grp-tools .ico { width: 15px; height: 15px; color: var(--blue); }
.member-list { border-radius: 12px; overflow: hidden; }
.member-list .admin-row { min-height: 54px; }
.member-list .admin-row strong { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.member-list .admin-row > .avatar-wrap { flex: none; }
.member-list .admin-row > span:not(.avatar-wrap) { align-items: flex-start; }

/* ---------- Reactions ---------- */
.bubble p { position: relative; }
.rx-bar { position: absolute; right: -6px; top: -30px; z-index: 3; display: none; gap: 2px; padding: 3px 4px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 6px 16px rgba(0, 40, 70, .15); user-select: none; white-space: nowrap; font-style: normal; }
.msg-row.own .rx-bar { right: auto; left: -6px; }
.bubble p:hover > .rx-bar, .rx-bar:focus-within { display: inline-flex; }
.rx-bar button { width: 30px; height: 30px; border-radius: 50%; font-size: 17px; line-height: 1; transition: transform .1s ease, background-color .1s ease; }
.rx-bar button:hover { background: var(--hover); transform: scale(1.18); }
.rx-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; user-select: none; white-space: normal; font-style: normal; }
.rx-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; }
.rx-chip b { font-size: 11px; font-weight: 600; color: var(--muted); }
.rx-chip.mine { background: color-mix(in srgb, var(--blue) 14%, var(--surface)); box-shadow: inset 0 0 0 1px var(--blue); }
.rx-chip.mine b { color: var(--blue-text); }
.rx-chip:hover { box-shadow: inset 0 0 0 1px var(--blue); }
@media (hover: none) { .rx-bar { display: none !important; } }
/* ---------- Jump to latest ---------- */
.conversation { position: relative; }
.jump-latest { position: absolute; right: 28px; bottom: 96px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 17px; background: var(--surface); color: var(--text-strong); font-size: 12.5px; font-weight: 600; box-shadow: 0 0 0 1px var(--line), 0 8px 22px rgba(0, 40, 70, .18); animation: menu-in .15s ease-out both; }
.jump-latest svg { width: 16px; height: 16px; }
.jump-latest.has-new { background: var(--blue); color: #fff; box-shadow: 0 8px 22px rgba(0, 150, 210, .35); }
.jump-latest:hover { filter: brightness(1.05); }
@media (max-width: 640px) { .jump-latest { right: 14px; bottom: 84px; } }
/* ---------- Typing dots ---------- */
.typing-dots { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .3; animation: typing-dot 1.2s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .15s; } .typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
/* ---------- Voice messages ---------- */
.voice-btn { flex: none; margin: 4px 2px 0 0; width: 30px; height: 30px; color: var(--blue-text); }
.voice-btn svg { width: 19px; height: 19px; }
.voice-btn:hover:not(:disabled) { background: var(--hover); border-radius: 50%; }
.composer-row { position: relative; }
.recorder { position: absolute; inset: 0 0 0 54px; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 0 6px 0 10px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px #e5323e, 0 0 0 3px rgba(229, 50, 62, .15); }
.rec-cancel { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.rec-cancel:hover { color: #e5323e; background: rgba(229, 50, 62, .1); }
.rec-cancel svg { width: 18px; height: 18px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #e5323e; animation: rec-blink 1s ease-in-out infinite; }
@keyframes rec-blink { 50% { opacity: .25; } }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-strong); min-width: 38px; }
.rec-wave { flex: 1; height: 24px; display: flex; align-items: center; gap: 3px; overflow: hidden; }
.rec-wave i { flex: 1; max-width: 4px; height: 12%; border-radius: 2px; background: #e5323e; opacity: .75; transition: height .08s linear; }
.rec-send { width: 36px; height: 36px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; }
.rec-send .ico { width: 17px; height: 17px; }
.voice-msg { display: flex; align-items: center; gap: 10px; width: 260px; max-width: 100%; padding: 8px 14px 8px 8px; border-radius: 22px; background: var(--bubble-in); }
.msg-row.own .voice-msg { background: var(--bubble-out); }
.vm-play { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; }
.vm-play svg { width: 18px; height: 18px; fill: currentColor; }
.vm-pause, .voice-msg.playing .vm-tri { display: none; }
.voice-msg.playing .vm-pause { display: inline; }
.vm-wave { position: relative; flex: 1; height: 28px; display: flex; align-items: center; gap: 2px; }
.vm-wave i { flex: 1; border-radius: 2px; background: color-mix(in srgb, var(--blue) 35%, transparent); }
.vm-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: color-mix(in srgb, var(--blue) 25%, transparent); mix-blend-mode: multiply; border-radius: 4px; pointer-events: none; transition: width .2s linear; }
.vm-time { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 32px; text-align: right; }
@media (prefers-reduced-motion: reduce) { .typing-dots i, .rec-dot { animation: none; } }

/* ---------- Replies ---------- */
.reply-ref { display: block; margin: 0 0 6px; padding: 4px 10px; border-left: 3px solid var(--blue); border-radius: 4px 8px 8px 4px; background: color-mix(in srgb, var(--blue) 8%, transparent); font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; user-select: none; font-style: normal; }
.reply-ref b { color: var(--blue-text); margin-right: 6px; }
.reply-ref:hover { background: color-mix(in srgb, var(--blue) 14%, transparent); }
.rx-bar .rx-reply { font-size: 15px; color: var(--muted); }
.bubble p.flash { animation: msg-flash 1.4s ease-out; border-radius: 6px; }
@keyframes msg-flash { 0%, 30% { background: color-mix(in srgb, var(--blue) 25%, transparent); } 100% { background: transparent; } }
.reply-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 6px 54px; padding: 6px 6px 6px 12px; border-left: 3px solid var(--blue); border-radius: 6px 10px 10px 6px; background: color-mix(in srgb, var(--blue) 8%, var(--surface)); }
.reply-bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12px; }
.reply-bar-text b { color: var(--blue-text); }
.reply-bar-text span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-bar .icon-btn { width: 28px; height: 28px; border-radius: 50%; }
/* ---------- Mentions ---------- */
.mention { padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue-text); font-weight: 600; }
.mention.me { background: color-mix(in srgb, var(--orange) 22%, transparent); color: color-mix(in srgb, var(--orange) 70%, var(--text-strong)); }
.bubble p.mentioned { box-shadow: inset 3px 0 0 var(--orange); padding-left: 8px; margin-left: -8px; }
.composer { position: relative; }
.mention-list { position: absolute; left: 92px; bottom: calc(100% - 4px); z-index: 20; width: 300px; max-width: calc(100% - 100px); padding: 6px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 12px 30px rgba(0, 40, 70, .18); }
.mention-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 8px; text-align: left; }
.mention-item .avatar { width: 28px !important; height: 28px !important; }
.mention-item b { font-weight: 600; color: var(--text-strong); }
.mention-item small { color: var(--muted); margin-left: auto; }
.mention-item.active, .mention-item:hover { background: var(--hover); }
/* ---------- New messages divider ---------- */
.new-divider { display: flex; align-items: center; gap: 10px; margin: 14px 40px 6px; color: #e5323e; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.new-divider::before, .new-divider::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, #e5323e 55%, transparent); }
/* ---------- Quick switcher ---------- */
.switcher-shade { position: fixed; inset: 0; z-index: 995; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; background: rgba(5, 15, 25, .45); }
.switcher { width: 560px; max-width: calc(100% - 24px); border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: 0 30px 70px rgba(0, 20, 40, .4); animation: menu-in .14s ease-out both; }
#switcher-input { width: 100%; height: 56px; padding: 0 20px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text-strong); font-size: 18px; outline: none; }
.switcher-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.sw-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border-radius: 10px; text-align: left; }
.sw-item > span:not(.avatar-wrap) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sw-item b { font-weight: 600; color: var(--text-strong); }
.sw-item small { color: var(--muted); font-size: 12px; }
.sw-item em { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sw-item.active, .sw-item:hover { background: var(--hover); }
.sw-item.active { box-shadow: inset 3px 0 0 var(--blue); }
.sw-empty { padding: 18px; text-align: center; color: var(--muted); }
.switcher-foot { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.switcher-foot kbd { display: inline-block; min-width: 18px; padding: 1px 5px; margin-right: 3px; border-radius: 4px; background: var(--hover); box-shadow: inset 0 -1px 0 var(--line); font: 600 10px var(--font); text-align: center; }
@media (max-width: 640px) { .switcher-shade { padding-top: calc(10px + env(safe-area-inset-top)); } .switcher-foot { display: none; } .mention-list { left: 10px; max-width: calc(100% - 20px); } .reply-bar { margin-left: 0; } }

/* ---------- Muted chats ---------- */
.row-muted { flex: none; color: var(--muted); display: flex; align-self: flex-start; margin-top: 12px; }
.row-muted svg { width: 14px; height: 14px; }
.contact-row.muted .row-count { background: color-mix(in srgb, var(--text) 30%, transparent); }
.contact-row.has-draft .row-sub { color: #d9480f; }
/* ---------- Message search results ---------- */
.msg-hit { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px 14px; border-radius: 10px; text-align: left; }
.msg-hit:hover { background: var(--hover); }
.mh-top { display: flex; justify-content: space-between; gap: 8px; }
.mh-top b { font-weight: 600; color: var(--text-strong); font-size: 13px; }
.mh-top small { color: var(--muted); font-size: 11px; }
.mh-text { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mh-text mark { background: var(--mark); color: var(--text-strong); border-radius: 2px; padding: 0 1px; }
/* ---------- Forward ---------- */
.dialog.forward-dialog { width: 440px; }
.fwd-preview { margin: -4px 0 12px; padding: 8px 12px; border-left: 3px solid var(--blue); border-radius: 4px 10px 10px 4px; background: color-mix(in srgb, var(--blue) 7%, var(--surface)); color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forward-dialog .pick-search { width: 100%; margin-bottom: 8px; }
.fwd-list { max-height: 300px; overflow-y: auto; }
.fwd-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 8px; border-radius: 10px; text-align: left; }
.fwd-item:hover { background: var(--hover); }
.fwd-item b { flex: 1; font-weight: 600; color: var(--text-strong); }
.fwd-item .btn { pointer-events: none; }
.fwd-item.sending { opacity: .6; }
.fwd-item.sent .btn { background: #2fb84f; border-color: #2fb84f; color: #fff; }
/* ---------- Emoji picker ---------- */
.emoticon-picker { width: 352px; padding: 10px; border-radius: 14px; border: 1px solid var(--menu-border); box-shadow: 0 16px 40px rgba(0, 40, 70, .2); display: flex; flex-direction: column; gap: 6px; animation: menu-in .12s ease-out both; }
.ep-search { height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--field-border); background: var(--surface); color: var(--text); outline: none; }
.ep-search:focus { border-color: var(--blue); }
.ep-title { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); padding: 2px 4px; }
.ep-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; height: 236px; overflow-y: auto; align-content: start; }
.ep-grid button { height: 38px; border-radius: 8px; font: 22px/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; transition: transform .08s ease, background-color .08s ease; }
.ep-grid button:hover { background: var(--hover); transform: scale(1.15); }
.ep-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 30px 10px; margin: 0; }
.ep-tabs { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 6px; }
.ep-tabs button { flex: 1; height: 32px; border-radius: 8px; font: 17px/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; opacity: .55; }
.ep-tabs button:hover { opacity: 1; background: var(--hover); }
.ep-tabs button.active { opacity: 1; background: var(--selected); }
@media (max-width: 640px) { .emoticon-picker { left: 8px !important; right: 8px; bottom: calc(80px + env(safe-area-inset-bottom)); top: auto !important; width: auto; } .ep-grid { grid-template-columns: repeat(7, 1fr); } }

/* ---------- Pinned messages ---------- */
.pin-bar { display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 12px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--blue) 5%, var(--surface)); }
.pin-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 8px; text-align: left; }
.pin-main:hover { background: var(--hover); }
.pin-main svg { flex: none; width: 16px; height: 16px; color: var(--blue); transform: rotate(-20deg); }
.pin-text { min-width: 0; display: flex; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.pin-text b { color: var(--blue-text); font-weight: 600; }
.pin-text span { overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.pin-all { flex: none; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--blue-text); background: var(--hover); }
.pin-all:hover { background: var(--selected); }
.bubble p.pinned::after { content: ""; position: absolute; top: 6px; right: -22px; width: 12px; height: 12px; background: var(--blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 3 21 9l-3 1-4 4 1 5-2 2-4-4-5 5-1-1 5-5-4-4 2-2 5 1 4-4 1-3Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 3 21 9l-3 1-4 4 1 5-2 2-4-4-5 5-1-1 5-5-4-4 2-2 5 1 4-4 1-3Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.msg-row.own .bubble p.pinned::after { right: auto; left: -22px; }
.dialog.pins-dialog { width: 480px; }
.pin-list { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; }
.pin-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 10px; cursor: pointer; }
.pin-item:hover { background: var(--hover); }
.pin-body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; }
.pin-body b { font-weight: 600; color: var(--text-strong); }
.pin-body small { color: var(--muted); font-size: 11px; }
.pin-body > span { flex-basis: 100%; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
/* ---------- Attachment tray ---------- */
.tray { margin: 0 0 8px 54px; padding: 10px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0, 40, 70, .08); }
.tray-items { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.tray-item { position: relative; flex: none; width: 116px; display: flex; flex-direction: column; gap: 3px; }
.tray-item img, .tray-file { width: 116px; height: 86px; border-radius: 10px; object-fit: cover; background: var(--hover); display: flex; align-items: center; justify-content: center; }
.tray-name { font-size: 12px; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tray-item small { font-size: 11px; color: var(--muted); }
.tray-remove { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; font-size: 16px; line-height: 1; }
.tray-remove:hover { background: #e5323e; }
.tray-hint { margin-top: 6px; font-size: 12px; color: var(--muted); }
/* ---------- Keyboard shortcuts ---------- */
.dialog.keys-dialog { width: 480px; }
.key-list { display: flex; flex-direction: column; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.key-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.key-row:last-child { border-bottom: 0; }
.key-row > span:last-child { display: flex; align-items: center; gap: 4px; flex: none; color: var(--muted); }
.key-row kbd { display: inline-block; min-width: 22px; padding: 2px 7px; border-radius: 5px; background: var(--hover); box-shadow: inset 0 -1px 0 var(--line), 0 0 0 1px var(--line); font: 600 11px var(--font); color: var(--text-strong); text-align: center; }
.key-row i { font-style: normal; font-size: 11px; }
@media (max-width: 640px) { .tray { margin-left: 0; } .bubble p.pinned::after { display: none; } }

/* ---------- Picture viewer ---------- */
.viewer { display: block; background: rgba(6, 10, 14, .94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.viewer-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: linear-gradient(rgba(0, 0, 0, .55), transparent); color: #fff; }
.viewer-who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.viewer-who b { font-weight: 600; }
.viewer-who small { font-size: 12px; color: rgba(255, 255, 255, .7); }
.viewer-count { font-size: 12px; color: rgba(255, 255, 255, .8); margin-right: 6px; }
.viewer-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(255, 255, 255, .1); }
.viewer-btn:hover { background: rgba(255, 255, 255, .2); }
.viewer-btn svg { width: 20px; height: 20px; }
.viewer-stage { position: absolute; inset: 64px 70px 44px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); transition: transform .12s ease-out; user-select: none; touch-action: none; }
.viewer.zoomed .viewer-stage img { transition: none; border-radius: 0; }
.viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 30px; line-height: 1; padding-bottom: 4px; }
.viewer-nav:hover { background: rgba(255, 255, 255, .24); }
.viewer-nav.prev { left: 12px; } .viewer-nav.next { right: 12px; }
.viewer-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; text-align: center; color: rgba(255, 255, 255, .75); font-size: 12px; }
@media (max-width: 640px) { .viewer-stage { inset: 60px 0 40px; } .viewer-nav { width: 40px; height: 40px; } .viewer-nav.prev { left: 6px; } .viewer-nav.next { right: 6px; } }
/* ---------- Call quality bars ---------- */
.call-top .call-quality { display: inline-flex; align-items: flex-end; gap: 2px; height: 22px; padding: 4px 9px; }
.call-quality i { width: 4px; border-radius: 1px; background: rgba(255, 255, 255, .3); }
.call-quality i:nth-child(1) { height: 5px; } .call-quality i:nth-child(2) { height: 9px; } .call-quality i:nth-child(3) { height: 13px; }
.call-quality.q3 i { background: #4cd964; }
.call-quality.q2 i:nth-child(-n+2) { background: #ffcc00; }
.call-quality.q1 i:nth-child(1) { background: #ff3b30; }
/* ---------- Mini call bar ---------- */
.mini-call { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 850; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 26px; background: rgba(18, 26, 32, .94); color: #fff; box-shadow: 0 12px 34px rgba(0, 0, 0, .35); backdrop-filter: blur(12px); animation: incoming-in .2s ease-out both; }
.mc-dot { width: 9px; height: 9px; border-radius: 50%; background: #2fb84f; box-shadow: 0 0 0 4px rgba(47, 184, 79, .25); animation: rec-blink 1.6s ease-in-out infinite; }
.mc-main { display: flex; flex-direction: column; align-items: flex-start; padding: 2px 8px; border-radius: 10px; color: #fff; max-width: 220px; }
.mc-main b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mc-main small { font-size: 11px; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.mc-main:hover { background: rgba(255, 255, 255, .1); }
.mc-btn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .14); color: #fff; }
.mc-btn .ico { width: 18px; height: 18px; }
.mc-btn:hover { background: rgba(255, 255, 255, .24); }
.mc-btn.off { background: #fff; color: #1b252b; }
.mc-btn.hang { background: #e5323e; }
.mc-btn.hang:hover { background: #c9202c; }
@media (max-width: 640px) { .mini-call { bottom: calc(84px + env(safe-area-inset-bottom)); } }
/* ---------- Birthdays ---------- */
.home-birthdays { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.home-birthdays:empty { display: none; }
.bday { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.bday.today { background: linear-gradient(135deg, color-mix(in srgb, #ff6f91 14%, var(--surface)), color-mix(in srgb, #ffc371 16%, var(--surface))); box-shadow: 0 0 0 1px color-mix(in srgb, #ff6f91 35%, transparent); }
.bday-cake { font-size: 24px; }
.bday-text { flex: 1; color: var(--text); }
.bday-text b { color: var(--text-strong); }

/* ---------- Formatting ---------- */
.bubble code.ic { padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--text) 10%, transparent); font: 12.5px Consolas, "Cascadia Mono", monospace; }
.bubble pre.code-block { margin: 6px 0; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--text) 8%, var(--surface)); font: 12.5px/1.45 Consolas, "Cascadia Mono", monospace; white-space: pre; overflow-x: auto; max-width: 100%; }
.spoiler { padding: 0 3px; border-radius: 4px; background: var(--text-strong); color: transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease; user-select: none; }
.spoiler.revealed { background: color-mix(in srgb, var(--text) 12%, transparent); color: inherit; user-select: text; }
/* ---------- Link previews ---------- */
.lp { display: block; }
.lp:empty { display: none; }
.lp-card { display: flex; gap: 12px; margin-top: 8px; max-width: 460px; padding: 10px 12px; border-left: 3px solid var(--blue); border-radius: 4px 10px 10px 4px; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text); text-decoration: none; white-space: normal; font-style: normal; }
.lp-card:hover { background: var(--surface); }
.lp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lp-site { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.lp-title { color: var(--blue-text); font-weight: 600; font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-desc { font-size: 12.5px; color: var(--text); opacity: .85; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lp-img { position: relative; flex: none; width: 88px; height: 88px; border-radius: 8px; overflow: hidden; background: var(--hover); }
.lp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-card.big { flex-direction: column; }
.lp-card.big .lp-img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.lp-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 38px; border-radius: 10px; background: rgba(229, 50, 62, .92); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
/* ---------- Polls ---------- */
.poll { width: 360px; max-width: 100%; padding: 14px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 4px 14px rgba(0, 40, 70, .06); }
.poll-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.poll-tag { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--blue-text); }
.poll.closed .poll-tag { color: var(--muted); }
.poll-head b { font-size: 15px; color: var(--text-strong); }
.poll-opts { display: flex; flex-direction: column; gap: 6px; }
.poll-opt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 10px; text-align: left; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .12s ease; }
.poll-opt:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--blue); }
.poll-opt:disabled { cursor: default; opacity: 1; }
.po-fill { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--blue) 12%, transparent); transition: width .3s ease; pointer-events: none; }
.poll-opt.lead .po-fill { background: color-mix(in srgb, var(--blue) 20%, transparent); }
.poll-opt.mine { box-shadow: inset 0 0 0 2px var(--blue); }
.po-check { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--field-border); display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; }
.poll-opt.mine .po-check { background: var(--blue); box-shadow: none; }
.po-text { position: relative; flex: 1; min-width: 0; color: var(--text-strong); }
.po-faces { position: relative; display: flex; }
.po-faces .avatar { width: 20px !important; height: 20px !important; margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.po-pct { position: relative; min-width: 34px; text-align: right; font-size: 12px; font-weight: 600; color: var(--muted); }
.poll-foot { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--muted); }
.poll-inputs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
/* ---------- Seen by ---------- */
.seen-by { display: flex; align-items: center; justify-content: flex-end; gap: 0; margin: 4px 86px 8px 0; font-size: 11px; color: var(--muted); }
.seen-by .avatar { width: 16px !important; height: 16px !important; margin-left: -4px; box-shadow: 0 0 0 2px var(--surface); }
.seen-by span { margin-left: 6px; }
@media (max-width: 640px) { .seen-by { margin-right: 60px; } .poll { width: 100%; } }

/* ---------- Sign-in fits every screen: centred, and roomier on tablets and big screens ---------- */
.signin { align-items: stretch; }
.signin-column { min-height: 100%; width: min(360px, calc(100% - 40px)); padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.signin-column > .brand { margin-top: auto; }
.signin-column > .signin-note { margin-top: auto; padding-top: 28px; }
@media (min-width: 700px) and (min-height: 640px) {
  .signin-column { width: min(460px, calc(100% - 80px)); }
  .brand { margin-bottom: 26px; }
  .brand-mark { width: 92px; height: 92px; }
  .brand-name { font-size: 38px; }
  .signin-form, .qr-signin { padding: 30px 34px 28px; border-radius: 22px; background: rgba(255, 255, 255, .13); box-shadow: 0 24px 60px rgba(0, 50, 90, .22), inset 0 0 0 1px rgba(255, 255, 255, .22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .signin-form h1 { font-size: 26px; margin-bottom: 18px; }
  .field span { font-size: 13px; }
  .field input { height: 48px; font-size: 16px; border-radius: 10px; }
  .reveal { top: 7px; height: 34px; }
  .signin-btn, .signin-ghost { height: 50px; font-size: 16px; border-radius: 10px; }
  .signin-links { margin-top: 20px; }
  .link-light { font-size: 13px; }
  .signin-note { font-size: 12px; }
  .qr-signin .qr-frame { width: 240px; height: 240px; }
}
:root[data-theme="dark"] .signin-form, :root[data-theme="dark"] .qr-signin { background: rgba(255, 255, 255, .06); }
@media (min-width: 700px) and (min-height: 640px) { :root[data-theme="dark"] .signin-form, :root[data-theme="dark"] .qr-signin { box-shadow: 0 24px 60px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .1); } }
@media (max-width: 699px), (max-height: 639px) { :root[data-theme="dark"] .signin-form, :root[data-theme="dark"] .qr-signin { background: transparent; } }
@media (max-width: 640px) { body.web-titlebar .signin { top: 0; } }
@media (min-width: 900px) and (min-height: 1100px) {
  .signin-column { width: min(540px, calc(100% - 120px)); }
  .brand-mark { width: 110px; height: 110px; }
  .brand-name { font-size: 44px; }
  .signin-form, .qr-signin { padding: 38px 42px 34px; }
  .signin-form h1 { font-size: 30px; }
  .field input { height: 54px; font-size: 17px; }
  .reveal { top: 10px; }
  .signin-btn, .signin-ghost { height: 56px; font-size: 17px; }
}
/* Tall screens (tablets upright, portrait monitors): centre the home screen instead of leaving a blank lower half */
@media (min-height: 900px) and (min-width: 641px) {
  .home-view { display: flex; flex-direction: column; }
  .home-view > * { width: 100%; flex: none; }
  .home-view > .home-hero { margin-top: auto; }
  .home-view > :last-child { margin-bottom: auto; }
}
/* Date labels float at the top of the chat while you scroll */
.messages .day:not(.older) { position: sticky; top: 8px; z-index: 2; width: fit-content; margin: 14px auto 10px; padding: 3px 12px; border-radius: 12px; background: var(--surface); color: var(--blue-text); font-size: 11.5px; box-shadow: 0 0 0 1px var(--line), 0 2px 8px rgba(0, 40, 70, .08); }
.messages .day:not(.older)::before, .messages .day:not(.older)::after { display: none; }

/* ---------- Offline queue ---------- */
.msg-time .queued { color: var(--orange); font-weight: 600; }
/* ---------- Saved messages ---------- */
.bubble p.saved { box-shadow: inset -3px 0 0 #f7b733; padding-right: 8px; }
.dialog.saved-dialog { width: 500px; }
.saved-list { display: flex; flex-direction: column; gap: 2px; max-height: 440px; overflow-y: auto; }
.saved-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.saved-item:hover { background: var(--hover); }
.saved-top { display: flex; gap: 8px; align-items: baseline; }
.saved-top b { font-weight: 600; color: var(--text-strong); }
.saved-top small { color: var(--muted); font-size: 11px; }
.saved-body { grid-column: 1; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-body em { font-style: normal; color: var(--muted); }
.saved-item .btn { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
/* ---------- Reminders ---------- */
.reminder { display: flex; gap: 14px; align-items: flex-start; }
.reminder-icon { font-size: 32px; }
.reminder em { font-style: normal; color: var(--muted); }

/* ---------- Accent colours (applied over light and dark themes) ---------- */
:root[data-accent="purple"] { --blue: #8b5cf6; --blue-dark: #7c3aed; --blue-text: #7c3aed; --day-text: #7c3aed; --selected: color-mix(in srgb, #8b5cf6 22%, var(--surface)); --hover: color-mix(in srgb, #8b5cf6 9%, var(--surface)); --bubble-in: color-mix(in srgb, #8b5cf6 20%, var(--surface)); --bubble-out: color-mix(in srgb, #8b5cf6 10%, var(--surface)); --sidebar: color-mix(in srgb, #8b5cf6 4%, var(--surface)); }
:root[data-theme="dark"][data-accent="purple"] { --blue-text: #a78bfa; --day-text: #a78bfa; --selected: color-mix(in srgb, #8b5cf6 28%, var(--surface)); --bubble-in: color-mix(in srgb, #8b5cf6 26%, var(--surface)); --bubble-out: color-mix(in srgb, #8b5cf6 14%, var(--surface)); --sidebar: color-mix(in srgb, #8b5cf6 5%, #161c21); }
:root[data-accent="green"] { --blue: #22a95b; --blue-dark: #1a8a49; --blue-text: #178445; --day-text: #178445; --selected: color-mix(in srgb, #22a95b 22%, var(--surface)); --hover: color-mix(in srgb, #22a95b 9%, var(--surface)); --bubble-in: color-mix(in srgb, #22a95b 20%, var(--surface)); --bubble-out: color-mix(in srgb, #22a95b 10%, var(--surface)); --sidebar: color-mix(in srgb, #22a95b 4%, var(--surface)); }
:root[data-theme="dark"][data-accent="green"] { --blue-text: #4cc97f; --day-text: #4cc97f; --selected: color-mix(in srgb, #22a95b 28%, var(--surface)); --bubble-in: color-mix(in srgb, #22a95b 26%, var(--surface)); --bubble-out: color-mix(in srgb, #22a95b 14%, var(--surface)); --sidebar: color-mix(in srgb, #22a95b 5%, #161c21); }
:root[data-accent="pink"] { --blue: #e8458b; --blue-dark: #cf2f74; --blue-text: #c72a6c; --day-text: #c72a6c; --selected: color-mix(in srgb, #e8458b 22%, var(--surface)); --hover: color-mix(in srgb, #e8458b 9%, var(--surface)); --bubble-in: color-mix(in srgb, #e8458b 20%, var(--surface)); --bubble-out: color-mix(in srgb, #e8458b 10%, var(--surface)); --sidebar: color-mix(in srgb, #e8458b 4%, var(--surface)); }
:root[data-theme="dark"][data-accent="pink"] { --blue-text: #f27aaf; --day-text: #f27aaf; --selected: color-mix(in srgb, #e8458b 28%, var(--surface)); --bubble-in: color-mix(in srgb, #e8458b 26%, var(--surface)); --bubble-out: color-mix(in srgb, #e8458b 14%, var(--surface)); --sidebar: color-mix(in srgb, #e8458b 5%, #161c21); }
:root[data-accent="orange"] { --blue: #f08a24; --blue-dark: #d4720f; --blue-text: #c4660a; --day-text: #c4660a; --selected: color-mix(in srgb, #f08a24 22%, var(--surface)); --hover: color-mix(in srgb, #f08a24 9%, var(--surface)); --bubble-in: color-mix(in srgb, #f08a24 20%, var(--surface)); --bubble-out: color-mix(in srgb, #f08a24 10%, var(--surface)); --sidebar: color-mix(in srgb, #f08a24 4%, var(--surface)); }
:root[data-theme="dark"][data-accent="orange"] { --blue-text: #f6a85a; --day-text: #f6a85a; --selected: color-mix(in srgb, #f08a24 28%, var(--surface)); --bubble-in: color-mix(in srgb, #f08a24 26%, var(--surface)); --bubble-out: color-mix(in srgb, #f08a24 14%, var(--surface)); --sidebar: color-mix(in srgb, #f08a24 5%, #161c21); }
:root[data-accent="red"] { --blue: #e5323e; --blue-dark: #c9202c; --blue-text: #c21f2b; --day-text: #c21f2b; --selected: color-mix(in srgb, #e5323e 22%, var(--surface)); --hover: color-mix(in srgb, #e5323e 9%, var(--surface)); --bubble-in: color-mix(in srgb, #e5323e 20%, var(--surface)); --bubble-out: color-mix(in srgb, #e5323e 10%, var(--surface)); --sidebar: color-mix(in srgb, #e5323e 4%, var(--surface)); }
:root[data-theme="dark"][data-accent="red"] { --blue-text: #f06a73; --day-text: #f06a73; --selected: color-mix(in srgb, #e5323e 28%, var(--surface)); --bubble-in: color-mix(in srgb, #e5323e 26%, var(--surface)); --bubble-out: color-mix(in srgb, #e5323e 14%, var(--surface)); --sidebar: color-mix(in srgb, #e5323e 5%, #161c21); }
:root[data-accent="teal"] { --blue: #14a3a3; --blue-dark: #0f8585; --blue-text: #0d7d7d; --day-text: #0d7d7d; --selected: color-mix(in srgb, #14a3a3 22%, var(--surface)); --hover: color-mix(in srgb, #14a3a3 9%, var(--surface)); --bubble-in: color-mix(in srgb, #14a3a3 20%, var(--surface)); --bubble-out: color-mix(in srgb, #14a3a3 10%, var(--surface)); --sidebar: color-mix(in srgb, #14a3a3 4%, var(--surface)); }
:root[data-theme="dark"][data-accent="teal"] { --blue-text: #3fc4c4; --day-text: #3fc4c4; --selected: color-mix(in srgb, #14a3a3 28%, var(--surface)); --bubble-in: color-mix(in srgb, #14a3a3 26%, var(--surface)); --bubble-out: color-mix(in srgb, #14a3a3 14%, var(--surface)); --sidebar: color-mix(in srgb, #14a3a3 5%, #161c21); }
.accent-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.accent-choice { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 64px; padding: 6px 4px; border-radius: 10px; font-size: 11.5px; cursor: pointer; }
.accent-choice input { position: absolute; opacity: 0; pointer-events: none; }
.accent-choice span { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .08); }
.accent-choice:has(input:checked) { background: var(--hover); }
.accent-choice:has(input:checked) span { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px currentColor; }
.wall-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.wall-choice { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11.5px; cursor: pointer; }
.wall-choice input { position: absolute; opacity: 0; pointer-events: none; }
.wall-swatch { width: 74px; height: 50px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); background-color: var(--surface); }
.wall-choice:has(input:checked) .wall-swatch { box-shadow: 0 0 0 2px var(--blue); }
/* ---------- Chat backgrounds ---------- */
[data-wallpaper-preview="dots"], :root[data-wallpaper="dots"] .messages { background-image: radial-gradient(color-mix(in srgb, var(--blue) 18%, transparent) 1.2px, transparent 1.4px); background-size: 18px 18px; }
[data-wallpaper-preview="grid"], :root[data-wallpaper="grid"] .messages { background-image: linear-gradient(color-mix(in srgb, var(--blue) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--blue) 8%, transparent) 1px, transparent 1px); background-size: 24px 24px; }
[data-wallpaper-preview="glow"], :root[data-wallpaper="glow"] .messages { background-image: radial-gradient(900px 500px at 15% 0%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 70%), radial-gradient(700px 500px at 100% 100%, color-mix(in srgb, var(--blue) 9%, transparent), transparent 70%); background-attachment: local; }
[data-wallpaper-preview="waves"], :root[data-wallpaper="waves"] .messages { background-image: repeating-radial-gradient(circle at 0 100%, transparent 0 22px, color-mix(in srgb, var(--blue) 7%, transparent) 22px 23px); }
/* ---------- Signed-in devices ---------- */
.sessions { display: flex; flex-direction: column; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; margin-bottom: 12px; }
.session { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.session:last-child { border-bottom: 0; }
.session-icon { font-size: 22px; width: 30px; text-align: center; }
.session-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.session-text b { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-strong); }
.session-text small { color: var(--muted); font-size: 12px; }
.session-on { color: #2fb84f; font-weight: 600; }
.session.more { justify-content: center; color: var(--muted); font-size: 12px; }

/* ---------- Activity ---------- */
.activity-btn { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text); margin-left: auto; margin-right: 4px; }
.activity-btn:hover { background: var(--hover); }
.activity-btn svg { width: 19px; height: 19px; }
.act-dot { position: absolute; top: 6px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: #e5323e; box-shadow: 0 0 0 2px var(--sidebar); }
.activity-pop { position: fixed; z-index: 950; width: 360px; max-height: 70vh; display: flex; flex-direction: column; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 18px 44px rgba(0, 40, 70, .2); overflow: hidden; animation: menu-in .14s ease-out both; }
.act-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.act-head b { font-size: 14px; color: var(--text-strong); }
.act-list { overflow-y: auto; padding: 6px; }
.act-item { display: flex; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px; text-align: left; }
.act-item:hover { background: var(--hover); }
.act-item.new { background: color-mix(in srgb, var(--blue) 7%, transparent); }
.act-ic { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--hover); font-size: 16px; }
.act-ic.at { background: color-mix(in srgb, var(--orange) 20%, transparent); color: color-mix(in srgb, var(--orange) 75%, var(--text-strong)); font-weight: 700; }
.act-ic.call { background: rgba(229, 50, 62, .14); color: #e5323e; }
.act-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text); }
.act-body b { color: var(--text-strong); font-weight: 600; }
.act-body small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-body em { font-style: normal; font-size: 11px; color: var(--muted); }
.act-empty { padding: 24px 16px; text-align: center; color: var(--muted); margin: 0; }
@media (max-width: 640px) { .activity-pop { left: 8px !important; right: 8px; top: calc(70px + env(safe-area-inset-top)) !important; width: auto; } .activity-btn { margin-right: 46px; } }
/* ---------- Call reactions and raised hands ---------- */
.float-react { position: absolute; bottom: 90px; z-index: 5; font-size: 40px; pointer-events: none; animation: float-up 2.5s ease-out forwards; text-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.call-tile .float-react { bottom: 20px; }
@keyframes float-up { 0% { transform: translateY(0) scale(.6); opacity: 0; } 12% { opacity: 1; transform: translateY(-20px) scale(1.15); } 100% { transform: translateY(-220px) scale(1); opacity: 0; } }
.call-tile.hand-up::after, .call-stage.my-hand::after { content: "✋"; position: absolute; top: 10px; right: 10px; z-index: 4; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #ffcc33; font-size: 22px; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); animation: hand-wave 1.2s ease-in-out infinite; }
.call-stage.my-hand::after { top: auto; bottom: 230px; right: 26px; }
@keyframes hand-wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }
/* ---------- Getting started ---------- */
.home-start:empty { display: none; }
.start-card { margin-top: 24px; padding: 16px 18px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 35%, var(--line)), 0 6px 18px rgba(0, 40, 70, .06); }
.start-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.start-head b { font-size: 15px; color: var(--text-strong); }
.start-head span { color: var(--muted); font-size: 12.5px; flex: 1; }
.start-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-bottom: 12px; }
.start-bar span { display: block; height: 100%; background: var(--blue); border-radius: 3px; transition: width .3s ease; }
.start-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.start-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--hover); text-align: left; color: var(--text-strong); font-size: 13px; }
.start-step:hover { background: var(--selected); }
.start-step.done { color: var(--muted); text-decoration: line-through; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.start-check { flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface); box-shadow: inset 0 0 0 2px var(--blue); color: var(--blue-text); font-size: 12px; font-weight: 700; }
.start-step.done .start-check { background: #2fb84f; box-shadow: none; color: #fff; }

/* ---------- Send later ---------- */
.sched-chip { margin-left: 10px; padding: 1px 8px; border-radius: 10px; background: var(--hover); color: var(--blue-text); font-size: 11.5px; font-weight: 600; }
.sched-chip:hover { background: var(--selected); }
.later-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.later-choice { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.later-choice input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.later-choice b { font-weight: 600; color: var(--text-strong); font-size: 13px; }
.later-choice small { color: var(--muted); font-size: 12px; }
.later-choice:has(input[type=radio]:checked) { box-shadow: inset 0 0 0 2px var(--blue); background: color-mix(in srgb, var(--blue) 6%, var(--surface)); }
.later-choice.custom { grid-column: 1 / -1; }
.later-choice.custom input[type=datetime-local] { margin-top: 6px; height: 34px; border-radius: 8px; border: 1px solid var(--field-border); background: var(--surface); color: var(--text); padding: 0 10px; }
.sched-list { display: flex; flex-direction: column; gap: 4px; }
.sched-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.sched-item > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sched-item b { font-weight: 600; color: var(--text-strong); }
.sched-item small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* list keyboard focus */
.contact-row:focus-visible, .msg-hit:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }