/* ============================================================
   Pulse — Team Chat  ·  design system
   Theme tokens (light/dark) + accent palettes + density.
   ============================================================ */

/* ---------- Accent palettes ---------- */
:root[data-accent="teal"]    { --accent:#14b8a6; --accent-2:#0d9488; --accent-contrast:#fff; }
:root[data-accent="violet"]  { --accent:#7c6cff; --accent-2:#6a4cff; --accent-contrast:#fff; }
:root[data-accent="blue"]    { --accent:#3b82f6; --accent-2:#2563eb; --accent-contrast:#fff; }
:root[data-accent="indigo"]  { --accent:#6366f1; --accent-2:#4f46e5; --accent-contrast:#fff; }
:root[data-accent="rose"]    { --accent:#f43f5e; --accent-2:#e11d48; --accent-contrast:#fff; }
:root[data-accent="amber"]   { --accent:#f59e0b; --accent-2:#d97706; --accent-contrast:#1b1500; }
:root[data-accent="emerald"] { --accent:#10b981; --accent-2:#059669; --accent-contrast:#fff; }
:root[data-accent="sunset"]  { --accent:#fb7185; --accent-2:#f97316; --accent-contrast:#fff; }

:root{
  --accent-grad: linear-gradient(135deg, var(--accent), var(--accent-2));  /* subtle modern gradient */
  --accent-glow: 0 8px 22px color-mix(in srgb, var(--accent) 38%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-softer: color-mix(in srgb, var(--accent) 7%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 38%, transparent);

  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px;
  --rail-w:76px; --sidebar-w:340px; --info-w:320px;
  --msg-gap:14px; --bubble-pad:10px 14px; --bubble-font:14.5px;
  --dur:.18s; --ease:cubic-bezier(.22,.61,.36,1);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Light theme (default) ---------- */
:root[data-theme="light"]{
  --page: radial-gradient(1200px 800px at 15% -10%, color-mix(in srgb,var(--accent) 22%, #f4f5f9), #eef0f5 55%);
  --rail-bg:#16181f; --rail-fg:#a9b0be; --rail-fg-active:#fff; --rail-active:rgba(255,255,255,.08);
  --sidebar-bg:#ffffff; --chat-bg:#ffffff; --info-bg:#ffffff;
  --panel-2:#f6f7fa; --hover:#f3f4f8; --active:var(--accent-soft);
  --text:#171922; --text-dim:#5f6674; --text-mute:#98a0af;
  --border:#eceef3; --border-strong:#e2e5ec;
  --bubble-in:#f3f4f8; --bubble-in-fg:#22252e;
  --shadow-sm:0 1px 2px rgba(20,25,40,.06);
  --shadow-md:0 12px 32px rgba(24,30,50,.12), 0 3px 10px rgba(24,30,50,.05);
  --shadow-lg:0 30px 70px rgba(20,25,45,.24), 0 8px 22px rgba(20,25,45,.12);
  --overlay:rgba(24,27,38,.42);
  color-scheme: light;
}

/* ---------- Dark theme ---------- */
:root[data-theme="dark"]{
  --page: radial-gradient(1200px 800px at 15% -10%, color-mix(in srgb,var(--accent) 20%, #0b0d12), #090a0e 60%);
  --rail-bg:#0b0c10; --rail-fg:#8b93a3; --rail-fg-active:#fff; --rail-active:rgba(255,255,255,.09);
  --sidebar-bg:#14161d; --chat-bg:#0f1116; --info-bg:#14161d;
  --panel-2:#1a1d26; --hover:#1b1e28; --active:color-mix(in srgb,var(--accent) 20%, transparent);
  --text:#e8eaf0; --text-dim:#9aa2b2; --text-mute:#6b7280;
  --border:#242833; --border-strong:#2d323f;
  --bubble-in:#1c1f28; --bubble-in-fg:#e2e5ee;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 14px 38px rgba(0,0,0,.5), 0 3px 12px rgba(0,0,0,.4);
  --shadow-lg:0 30px 80px rgba(0,0,0,.66), 0 10px 26px rgba(0,0,0,.5);
  --overlay:rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ---------- Density ---------- */
:root[data-density="compact"]{ --msg-gap:8px; --bubble-pad:7px 12px; --bubble-font:13.5px; --sidebar-w:320px; }

/* ---------- Chat wallpaper tokens ---------- */
:root[data-theme="light"]{ --wall:rgba(20,24,40,.055); --wall2:rgba(20,24,40,.03); }
:root[data-theme="dark"]{ --wall:rgba(255,255,255,.05); --wall2:rgba(255,255,255,.028); }

/* ============================================================ base */
*{ box-sizing:border-box; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--text-mute) 40%,transparent); border-radius:20px; border:3px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb,var(--text-mute) 65%,transparent); background-clip:padding-box; }
html,body{ height:100%; margin:0; }
body{
  font-family:var(--font);
  background:var(--page); color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow:hidden;
}
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea{ font-family:inherit; }
.hidden{ display:none !important; }
[hidden]{ display:none !important; }   /* ensure the hidden attribute always wins over display:grid/flex */
.ic{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.muted{ color:var(--text-mute); }
code{ background:var(--panel-2); padding:1px 6px; border-radius:6px; font-size:12px; }

/* Generic icon button */
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:12px; color:var(--text-dim); transition:background var(--dur), color var(--dur), transform var(--dur); }
.icon-btn:hover{ background:var(--hover); color:var(--text); }
.icon-btn:active{ transform:scale(.92); }
.icon-btn.small{ width:30px; height:30px; border-radius:9px; }
.icon-btn.small .ic{ width:16px; height:16px; }
.icon-btn.danger:hover{ background:color-mix(in srgb,#ef4444 16%,transparent); color:#ef4444; }

/* ============================================================ AUTH */
.auth-view{ position:absolute; inset:0; display:grid; place-items:center; padding:20px; z-index:40; }
.auth-bg{ position:absolute; inset:0; background:var(--page); }
.auth-bg::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(600px 400px at 80% 110%, var(--accent-soft), transparent 70%); }
.auth-card{ position:relative; width:min(420px,100%); background:var(--sidebar-bg); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow-lg); animation:pop .4s var(--ease); }
.auth-brand{ display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.brand-mark{ width:52px; height:52px; border-radius:16px; background:#fff; color:var(--accent-contrast); overflow:hidden;
  display:grid; place-items:center; font-weight:800; font-size:17px; letter-spacing:.5px; box-shadow:0 8px 20px var(--accent-ring); }
.brand-mark img{ width:100%; height:100%; object-fit:contain; padding:4px; box-sizing:border-box; }
.brand-name{ font-size:19px; font-weight:800; letter-spacing:-.3px; }
.brand-sub{ color:var(--text-mute); font-size:13px; }
.tabs{ display:flex; gap:6px; background:var(--panel-2); padding:5px; border-radius:14px; margin-bottom:20px; }
.tab{ flex:1; padding:10px; border-radius:10px; font-weight:600; font-size:14px; color:var(--text-dim); transition:all var(--dur); }
.tab.active{ background:var(--sidebar-bg); color:var(--text); box-shadow:var(--shadow-sm); }
.auth-form{ display:flex; flex-direction:column; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-dim); font-weight:600; }
.field input{ padding:12px 14px; border-radius:12px; border:1.5px solid var(--border-strong); background:var(--sidebar-bg);
  color:var(--text); font-size:14.5px; transition:border-color var(--dur), box-shadow var(--dur); }
.field input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-ring); }
.btn-primary{ margin-top:4px; padding:13px; border-radius:12px; background:var(--accent-grad); color:var(--accent-contrast);
  font-weight:700; font-size:15px; box-shadow:0 8px 20px var(--accent-ring); transition:transform var(--dur), filter var(--dur); }
.btn-primary:hover{ filter:brightness(1.05); } .btn-primary:active{ transform:scale(.98); }
.error{ color:#ef4444; font-size:13px; min-height:16px; margin:8px 0 0; }
.seed-hint{ margin-top:18px; font-size:13px; color:var(--text-dim); }
.seed-hint summary{ cursor:pointer; user-select:none; }
.seed-rows{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.seed-row{ text-align:left; padding:9px 12px; border-radius:10px; background:var(--panel-2); font-size:13px;
  display:flex; justify-content:space-between; transition:background var(--dur); }
.seed-row:hover{ background:var(--hover); } .seed-row em{ color:var(--text-mute); font-style:normal; }

/* ============================================================ APP shell */
.app{ position:absolute; inset:0; display:grid;
  grid-template-columns:var(--rail-w) var(--sidebar-w) 1fr auto;
  grid-template-rows:minmax(0,1fr);   /* bound the row so inner lists scroll instead of growing */
  background:var(--chat-bg); overflow:hidden; }

/* ---------- Rail ---------- */
.rail{ background:var(--rail-bg); display:flex; flex-direction:column; align-items:center; padding:16px 10px; gap:8px; }
.rail-logo{ width:42px; height:42px; border-radius:13px; background:#fff; color:var(--accent-contrast); overflow:hidden;
  display:grid; place-items:center; font-weight:800; font-size:13px; letter-spacing:.3px; margin-bottom:10px; box-shadow:0 6px 16px var(--accent-ring); }
.rail-logo img{ width:100%; height:100%; object-fit:contain; padding:3px; box-sizing:border-box; }
.rail-nav,.rail-bottom{ display:flex; flex-direction:column; gap:6px; width:100%; align-items:center; }
.rail-bottom{ margin-top:auto; }
.rail-item{ position:relative; width:52px; height:50px; border-radius:14px; color:var(--rail-fg); text-decoration:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; transition:all var(--dur); }
.rail-item .ic{ width:21px; height:21px; }
.rail-label{ font-size:9px; font-weight:600; opacity:.85; letter-spacing:.2px; }
.rail-item:hover{ background:var(--rail-active); color:var(--rail-fg-active); }
.rail-item.active{ color:var(--rail-fg-active); background:var(--rail-active); }
.rail-item.active::before{ content:""; position:absolute; left:-10px; top:50%; transform:translateY(-50%);
  width:4px; height:24px; border-radius:0 4px 4px 0; background:var(--accent); }
.rail-badge{ position:absolute; top:4px; right:6px; min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:#ef4444; color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; box-shadow:0 0 0 2px var(--rail-bg); }
.rail-avatar{ width:30px; height:30px; border-radius:10px; background:var(--accent-grad); color:#fff;
  display:grid; place-items:center; font-size:12px; font-weight:700; }

/* ---------- Sidebar ---------- */
.sidebar{ background:var(--sidebar-bg); border-right:1px solid var(--border); display:flex; flex-direction:column; min-width:0; min-height:0; }
.sidebar-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 18px 10px; }
.sidebar-head h1{ font-size:23px; font-weight:800; letter-spacing:-.4px; margin:0; }
.search{ margin:4px 16px 10px; display:flex; align-items:center; gap:9px; padding:0 12px; height:42px;
  background:var(--panel-2); border-radius:13px; color:var(--text-mute); transition:box-shadow var(--dur); }
.search:focus-within{ box-shadow:0 0 0 3px var(--accent-ring); }
.search .ic{ width:17px; height:17px; }
.search input{ border:none; background:none; outline:none; color:var(--text); font-size:14px; width:100%; }
.convo-list{ list-style:none; margin:0; padding:4px 10px 14px; overflow-y:auto; flex:1; }
.convo-empty{ text-align:center; color:var(--text-mute); font-size:13px; padding:30px 20px; }
.convo-item{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center;
  padding:11px 12px; border-radius:16px; cursor:pointer; position:relative; transition:background var(--dur);
  animation:fadeIn .25s var(--ease) both; }
.convo-item:hover{ background:var(--hover); }
.convo-item.active{ background:var(--active); }
.convo-item.active .ci-name{ color:var(--text); }
.ci-main{ min-width:0; }
.ci-top{ display:flex; align-items:center; gap:6px; justify-content:space-between; }
.ci-name{ font-weight:700; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ci-time{ font-size:11px; color:var(--text-mute); flex:none; }
.ci-bottom{ display:flex; align-items:center; gap:6px; justify-content:space-between; margin-top:2px; }
.ci-preview{ font-size:13px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:5px; min-width:0; }
.ci-preview .ic{ width:14px; height:14px; color:var(--text-mute); flex:none; }  /* sent/delivered ticks: grey */
.ci-preview .ci-read{ color:var(--accent); }                                   /* read: accent (blue) */
.ci-right{ display:flex; align-items:center; gap:6px; flex:none; }
.ci-badge{ min-width:20px; height:20px; padding:0 6px; border-radius:11px; background:var(--accent);
  color:var(--accent-contrast); font-size:11px; font-weight:800; display:grid; place-items:center; }
.ci-pin{ color:var(--text-mute); display:inline-flex; }
.ci-pin .ic{ width:13px; height:13px; }
.ci-mute{ color:var(--text-mute); display:inline-flex; }
.ci-mute .ic{ width:14px; height:14px; }
.ci-badge.muted{ background:var(--text-mute); }   /* muted chats: grey (not accent) count */
.ci-call-badge{ display:flex; align-items:center; gap:4px; padding:3px 8px; border-radius:11px; border:none;
  background:#1ea952; color:#fff; font-size:11px; font-weight:700; cursor:pointer; animation:ci-call-pulse 1.6s ease-in-out infinite; }
.ci-call-badge .ic{ width:12px; height:12px; }
.ci-call-badge:hover{ background:#178a41; }
@keyframes ci-call-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(30,169,82,.5); } 50%{ box-shadow:0 0 0 4px rgba(30,169,82,0); } }

/* avatars */
.avatar{ width:46px; height:46px; border-radius:15px; background:var(--accent-grad); color:#fff; flex:none;
  display:grid; place-items:center; font-weight:700; font-size:16px; position:relative; }
.avatar img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.avatar.previewable{ cursor:zoom-in; }
.avatar.previewable img{ transition:filter var(--dur); }
.avatar.previewable:hover img{ filter:brightness(.85); }
.avatar.online::after{ content:""; position:absolute; right:-1px; bottom:-1px; width:13px; height:13px; border-radius:50%;
  background:#22c55e; box-shadow:0 0 0 2.5px var(--sidebar-bg); animation:pulseDot 2s infinite; }
.avatar-sm{ width:34px; height:34px; border-radius:11px; font-size:13px; }
.avatar-xl{ width:96px; height:96px; border-radius:28px; font-size:34px; }

/* ---------- Chat ---------- */
.chat{ background:var(--chat-bg); display:flex; flex-direction:column; min-width:0; min-height:0; position:relative; }
.chat-empty{ margin:auto; text-align:center; color:var(--text-mute); padding:40px; }
.chat-empty-back{ position:absolute; top:12px; left:12px; }
.empty-illustration{ font-size:56px; margin-bottom:10px; filter:grayscale(.2); }
.chat-empty h2{ margin:0 0 6px; color:var(--text); font-weight:700; }
.chat-active{ display:flex; flex-direction:column; height:100%; min-height:0; position:relative; }

.chat-head{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); }
.chat-head-id{ display:flex; align-items:center; gap:12px; min-width:0; cursor:pointer; flex:1; border-radius:12px; padding:4px; transition:background var(--dur); }
.chat-head-id:hover{ background:var(--hover); }
.chat-head-text{ min-width:0; flex:1; }
.chat-head-title{ font-weight:800; font-size:17px; letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-head-sub{ font-size:12.5px; color:var(--text-mute); display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; }
.chat-head-sub > *{ flex:none; }
.chat-head-sub .on-dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; }
.chat-head-actions{ display:flex; gap:2px; }
.only-mobile{ display:none; }

.win-controls{ display:inline-flex; align-items:center; gap:2px; }
.hdr-search-bar{ display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid var(--border); color:var(--text-mute); }
.hdr-search-bar input{ flex:1; border:none; background:none; outline:none; color:var(--text); font-size:14px; }
.msg-search-count{ font-size:12px; color:var(--text-mute); white-space:nowrap; }
.bubble.search-hit{ box-shadow:0 0 0 2px var(--accent); }
/* link preview card */
.link-preview{ display:flex; flex-direction:column; margin-top:6px; border-radius:12px; overflow:hidden; text-decoration:none; color:inherit;
  background:color-mix(in srgb,currentColor 7%, transparent); border:1px solid color-mix(in srgb,currentColor 13%, transparent); max-width:300px; }
.link-preview .lp-img{ width:100%; max-height:160px; object-fit:cover; display:block; }
.link-preview .lp-body{ padding:8px 10px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.link-preview .lp-site{ font-size:11px; opacity:.7; text-transform:uppercase; letter-spacing:.3px; }
.link-preview .lp-title{ font-weight:700; font-size:13.5px; line-height:1.3; }
.link-preview .lp-desc{ font-size:12px; opacity:.82; line-height:1.35; max-height:34px; overflow:hidden; }

/* pinned bar */
.pinned-bar{ display:flex; align-items:center; gap:10px; padding:9px 16px; background:var(--accent-softer);
  border-bottom:1px solid var(--border); cursor:pointer; }
.pinned-bar > .ic{ color:var(--accent); width:16px; height:16px; flex:none; }
.pinned-text{ min-width:0; font-size:13px; flex:1; }
.pinned-text b{ color:var(--accent); font-size:12px; display:block; }
.pinned-text span{ color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.pinned-count{ margin-left:auto; font-size:12px; color:var(--text-mute); font-weight:700; flex:none; }

/* messages */
.messages{ flex:1; min-height:0; overflow-y:auto; padding:20px 22px 6px; display:flex; flex-direction:column; gap:var(--msg-gap); background-color:var(--chat-bg); }
.sidebar-head-actions{ display:flex; align-items:center; gap:2px; }

/* ---------- chat wallpapers (fixed within the messages pane) ---------- */
:root[data-chatbg="glow"] .messages{ background-image:
  radial-gradient(60% 45% at 12% 0%, var(--accent-soft), transparent 70%),
  radial-gradient(55% 42% at 100% 100%, var(--accent-softer), transparent 72%); }
:root[data-chatbg="dots"] .messages{ background-image: radial-gradient(var(--wall) 1.6px, transparent 1.6px); background-size:22px 22px; }
:root[data-chatbg="accent"] .messages{ background-image: radial-gradient(var(--accent-soft) 2.2px, transparent 2.2px); background-size:24px 24px; }
:root[data-chatbg="grid"] .messages{ background-image: linear-gradient(var(--wall) 1px, transparent 1px), linear-gradient(90deg, var(--wall) 1px, transparent 1px); background-size:26px 26px; }
:root[data-chatbg="graph"] .messages{ background-image:
  linear-gradient(var(--wall2) 1px, transparent 1px), linear-gradient(90deg, var(--wall2) 1px, transparent 1px),
  linear-gradient(var(--wall) 1px, transparent 1px), linear-gradient(90deg, var(--wall) 1px, transparent 1px);
  background-size:13px 13px,13px 13px,65px 65px,65px 65px; }
:root[data-chatbg="diagonal"] .messages{ background-image: repeating-linear-gradient(45deg, var(--wall) 0 1px, transparent 1px 15px); }
:root[data-chatbg="cross"] .messages{ background-image: radial-gradient(var(--wall) 1.5px, transparent 0), radial-gradient(var(--wall) 1.5px, transparent 0); background-size:34px 34px; background-position:0 0,17px 17px; }
.messages .empty-state{ margin:auto; color:var(--text-mute); font-size:14px; }
/* empty-state hero */
.chat-empty-hero{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.chat-empty-hero .ceh-emoji{ font-size:40px; margin-bottom:4px; animation:floatY 3s ease-in-out infinite; }
.chat-empty-hero .ceh-title{ font-weight:800; font-size:17px; color:var(--text); }
.chat-empty-hero .ceh-sub{ font-size:13px; color:var(--text-mute); max-width:260px; }
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
/* "N unread messages" divider */
.unread-sep{ align-self:center; margin:10px 0; }
.unread-sep span{ font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--accent-2);
  background:var(--accent-soft); padding:4px 14px; border-radius:20px; }
/* loading skeleton (shimmer) */
.msg-skeleton{ display:flex; flex-direction:column; gap:14px; padding:14px 4px; }
.sk-row{ display:flex; } .sk-row.right{ justify-content:flex-end; }
.sk-bubble{ height:38px; border-radius:16px; background:linear-gradient(90deg, var(--panel-2) 25%, var(--hover) 37%, var(--panel-2) 63%);
  background-size:400% 100%; animation:shimmer 1.4s ease infinite; }
.sk-row.right .sk-bubble{ border-top-right-radius:6px; } .sk-row.left .sk-bubble{ border-top-left-radius:6px; }
@keyframes shimmer{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
.day-sep{ align-self:center; margin:6px 0; font-size:11.5px; font-weight:700; color:var(--text-mute);
  background:var(--panel-2); padding:4px 12px; border-radius:20px; position:sticky; top:4px; z-index:2; }
/* inline call / screen-share / control event logs */
.event-msg{ align-self:center; display:flex; justify-content:center; margin:9px 0; max-width:92%; animation:pop .2s var(--ease); }
.event-msg .ev-pill{ display:inline-flex; align-items:center; gap:10px; padding:5px 15px 5px 5px; border-radius:24px;
  background:var(--sidebar-bg); border:1px solid var(--border); color:var(--text-dim); font-size:13px; font-weight:600; box-shadow:var(--shadow-sm); }
.event-msg .ev-ic{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--panel-2); color:var(--text-mute); }
.event-msg .ev-ic .ic{ width:16px; height:16px; }
.event-msg .ev-text{ white-space:nowrap; color:var(--text); }
.event-msg .ev-time{ color:var(--text-mute); font-weight:500; font-size:11px; margin-left:1px; }
/* colour-coded variants */
.event-msg.answered .ev-ic{ background:color-mix(in srgb,#22c55e 20%, transparent); color:#16a34a; }
.event-msg.missed .ev-ic{ background:color-mix(in srgb,#ef4444 18%, transparent); color:#ef4444; }
.event-msg.missed .ev-pill{ color:#ef4444; border-color:color-mix(in srgb,#ef4444 32%, transparent); }
.event-msg.missed .ev-text{ color:#ef4444; }
.event-msg.neutral .ev-ic{ background:var(--accent-soft); color:var(--accent-2); }
.ci-preview.missed, .ci-preview.missed span, .ci-preview.missed .ic{ color:#ef4444; }
.msg-row{ display:flex; gap:10px; max-width:74%; animation:msgIn .32s var(--ease) both; }
.msg-row.mine{ align-self:flex-end; flex-direction:row-reverse; }
.msg-avatar{ align-self:flex-end; }
.msg-col{ display:flex; flex-direction:column; min-width:0; position:relative; }
.msg-row.mine .msg-col{ align-items:flex-end; }
.msg-sender{ font-size:12px; font-weight:700; color:var(--accent); margin:0 4px 3px; }
.bubble{ position:relative; padding:var(--bubble-pad); border-radius:18px; font-size:var(--bubble-font); line-height:1.45;
  background:var(--bubble-in); color:var(--bubble-in-fg); border-top-left-radius:6px; word-wrap:break-word; overflow-wrap:anywhere; box-shadow:var(--shadow-sm); }
.msg-row.mine .bubble{ background:var(--accent-grad); color:var(--accent-contrast); border-top-left-radius:18px; border-top-right-radius:6px; }
/* Grouped messages (same sender, <5 min apart) hug closer with tighter corners. */
.msg-row.grouped{ margin-top:-8px; }
.msg-row.grouped .bubble{ border-top-left-radius:6px; }
.msg-row.mine.grouped .bubble{ border-top-left-radius:18px; border-top-right-radius:6px; }
.bubble.media-only{ padding:4px; background:transparent !important; box-shadow:none; }
.bubble.highlight{ animation:flashHi 1.6s var(--ease); }
.bubble.dim{ opacity:.3; }
.bubble-text a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.msg-meta{ display:flex; align-items:center; gap:4px; font-size:11px; margin:3px 5px 0; color:var(--text-mute); }
.msg-row.mine .msg-meta{ justify-content:flex-end; }
.msg-meta .ic{ width:15px; height:15px; }
.msg-meta .read{ color:var(--accent); }
.edited-tag{ font-style:italic; opacity:.7; }

/* reply quote inside a bubble */
.reply-quote{ display:flex; gap:8px; padding:6px 10px; margin:0 0 7px; border-radius:10px;
  background:color-mix(in srgb, currentColor 12%, transparent); cursor:pointer; align-items:stretch; }
.reply-quote .bar{ width:3px; border-radius:3px; background:currentColor; opacity:.7; flex:none; }
.reply-quote .rq-body{ min-width:0; }
.reply-quote .rq-name{ font-size:12px; font-weight:700; opacity:.9; }
.reply-quote .rq-text{ font-size:12.5px; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34ch; }

/* attachments */
.attachments{ display:flex; flex-wrap:wrap; gap:8px; }
.bubble-text + .attachments{ margin-top:7px; }
/* Single photo/video — WhatsApp-style capped bubble (whole image visible). */
.att-media{ position:relative; border-radius:14px; overflow:hidden; max-width:300px; cursor:pointer; display:block; background:var(--panel-2); line-height:0; }
.att-media img,.att-media video{ display:block; max-width:300px; max-height:340px; width:auto; height:auto; object-fit:contain; }
/* Multi-photo/video album (grouped grid). */
.album{ display:grid; gap:3px; border-radius:14px; overflow:hidden; max-width:300px; }
.album-2{ grid-template-columns:1fr 1fr; }
.album-3{ grid-template-columns:1fr 1fr; }
.album-3 .album-cell:first-child{ grid-column:1 / 3; aspect-ratio:16 / 9; }
.album-4{ grid-template-columns:1fr 1fr; }
.album-cell{ position:relative; overflow:hidden; cursor:pointer; background:var(--panel-2); aspect-ratio:1 / 1; }
.album-cell img,.album-cell video{ width:100%; height:100%; object-fit:cover; display:block; }
.album-more{ position:absolute; inset:0; background:rgba(0,0,0,.5); color:#fff; display:grid; place-items:center; font-size:24px; font-weight:800; }
.att-play{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.15); }
.att-play span{ width:52px; height:52px; border-radius:50%; background:rgba(0,0,0,.55); display:grid; place-items:center; color:#fff; }
.att-play .ic{ width:24px; height:24px; }
/* download button overlay on image/video attachments */
.att-dl{ position:absolute; top:8px; right:8px; width:34px; height:34px; border-radius:10px; background:rgba(0,0,0,.55);
  color:#fff; display:grid; place-items:center; opacity:0; transition:opacity var(--dur), background var(--dur); z-index:2; }
.att-dl:hover{ background:rgba(0,0,0,.75); }
.att-media:hover .att-dl{ opacity:1; }
.att-dl .ic{ width:17px; height:17px; }
@media (hover:none){ .att-dl{ opacity:1; } }   /* touch: always show */
.att-file{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:14px; background:color-mix(in srgb,currentColor 8%,transparent);
  text-decoration:none; color:inherit; min-width:210px; cursor:pointer; }
.att-file .fic{ width:40px; height:40px; border-radius:11px; background:color-mix(in srgb,currentColor 14%,transparent); display:grid; place-items:center; flex:none; }
.att-file .fic .ic{ width:20px; height:20px; }
.att-file .fmeta{ min-width:0; flex:1; }
.att-file .fname{ font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.att-file .fsize{ font-size:11.5px; opacity:.7; }
.att-file .att-dl-btn{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  color:inherit; background:color-mix(in srgb,currentColor 12%,transparent); transition:background var(--dur); }
.att-file .att-dl-btn:hover{ background:color-mix(in srgb,currentColor 22%,transparent); }
.att-file .att-dl-btn .ic{ width:17px; height:17px; }

/* voice message */
.voice{ display:flex; align-items:center; gap:12px; min-width:230px; padding:6px 4px; }
.voice-play{ width:40px; height:40px; border-radius:50%; background:color-mix(in srgb,currentColor 16%,transparent);
  display:grid; place-items:center; flex:none; transition:transform var(--dur); } .voice-play:active{ transform:scale(.9); }
.voice-play .ic{ width:20px; height:20px; }
.voice-wave{ display:flex; align-items:center; gap:2px; height:30px; flex:1; }
.voice-bar{ width:3px; border-radius:3px; background:color-mix(in srgb,currentColor 35%,transparent); transition:background .1s; }
.voice-bar.on{ background:currentColor; }
.voice-time{ font-size:11.5px; opacity:.8; flex:none; font-variant-numeric:tabular-nums; }

/* reactions */
.reactions{ display:flex; flex-wrap:wrap; gap:5px; margin:5px 4px 0; }
.reactions:empty{ display:none; }
.reaction{ display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:20px; font-size:12.5px;
  background:var(--panel-2); border:1px solid var(--border); cursor:pointer; transition:transform var(--dur), background var(--dur);
  animation:pop .25s var(--ease); }
.reaction:hover{ transform:translateY(-1px); }
.reaction.mine{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-2); font-weight:700; }
.reaction .cnt{ font-weight:700; font-size:11.5px; }

/* hover action toolbar */
.msg-actions{ position:absolute; top:-15px; display:flex; gap:2px; padding:3px; border-radius:12px; background:var(--sidebar-bg);
  box-shadow:var(--shadow-md); border:1px solid var(--border); opacity:0; pointer-events:none; transition:opacity var(--dur), transform var(--dur); transform:translateY(4px); z-index:5; }
.msg-row:hover .msg-actions{ opacity:1; pointer-events:auto; transform:translateY(0); }
.msg-row.mine .msg-actions{ right:0; } .msg-row:not(.mine) .msg-actions{ left:0; }
.msg-actions button{ width:30px; height:30px; border-radius:9px; color:var(--text-dim); display:grid; place-items:center; transition:background var(--dur),color var(--dur); }
.msg-actions button:hover{ background:var(--hover); color:var(--text); }
.msg-actions .ic{ width:16px; height:16px; }

/* scroll-to-bottom fab */
.scroll-bottom{ position:absolute; right:22px; bottom:120px; width:42px; height:42px; border-radius:50%; background:var(--sidebar-bg);
  box-shadow:var(--shadow-md); border:1px solid var(--border); display:grid; place-items:center; color:var(--text-dim); z-index:6; animation:pop .2s var(--ease); cursor:pointer; }
.scroll-bottom:hover{ color:var(--accent); }

/* typing */
.typing-indicator{ min-height:0; padding:0 24px; font-size:12.5px; color:var(--text-mute); display:flex; align-items:center; gap:8px; }
.typing-dots{ display:inline-flex; gap:3px; }
.typing-dots i{ width:6px; height:6px; border-radius:50%; background:var(--text-mute); animation:typing 1.2s infinite; }
.typing-dots i:nth-child(2){ animation-delay:.15s; } .typing-dots i:nth-child(3){ animation-delay:.3s; }

/* composer */
.composer-wrap{ padding:8px 16px 16px; position:relative; }
/* @mention highlight in messages */
.mention{ color:var(--accent-2); font-weight:700; background:var(--accent-soft); border-radius:5px; padding:0 3px; }
.msg-row.mine .mention{ color:#fff; background:rgba(255,255,255,.22); }
/* @mention autocomplete */
.mention-pop{ position:absolute; left:16px; right:16px; bottom:calc(100% - 4px); z-index:20; max-height:220px; overflow-y:auto;
  background:var(--sidebar-bg); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); padding:6px; animation:pop .14s var(--ease); }
.mention-item{ display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:10px; cursor:pointer; }
.mention-item:hover,.mention-item.active{ background:var(--hover); }
.mention-item .mp-name{ font-weight:600; font-size:14px; }
/* drag-and-drop overlay */
.chat-active.drag-over::after{ content:"Drop to send"; position:absolute; inset:0; z-index:40; display:grid; place-items:center;
  background:color-mix(in srgb,var(--accent) 14%, transparent); border:3px dashed var(--accent); border-radius:14px;
  color:var(--accent-2); font-weight:800; font-size:18px; pointer-events:none; backdrop-filter:blur(2px); }
.reply-preview{ display:flex; align-items:center; gap:10px; padding:8px 12px; margin-bottom:8px; border-radius:12px;
  background:var(--panel-2); border-left:3px solid var(--accent); animation:slideUp .2s var(--ease); }
.reply-preview-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.reply-preview-name{ font-size:12px; font-weight:700; color:var(--accent); }
.reply-preview-text{ font-size:13px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reply-preview.editing{ border-left-color:#f59e0b; }
.reply-preview.editing .reply-preview-name{ color:#f59e0b; }
.pending-attachments{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.pending-attachments:empty{ display:none; }
.chip{ display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:12px; background:var(--panel-2); font-size:12.5px; border:1px solid var(--border); }
.chip.uploading{ opacity:.7; }
.chip .thumb{ width:34px; height:34px; border-radius:8px; object-fit:cover; }
.chip .cname{ max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chip .x{ cursor:pointer; color:var(--text-mute); display:inline-flex; } .chip .x:hover{ color:#ef4444; }
.chip .x .ic{ width:14px; height:14px; }
.chip .spin{ width:16px; height:16px; border:2px solid var(--border-strong); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }

.composer{ display:flex; align-items:flex-end; gap:6px; background:var(--panel-2); border:1.5px solid var(--border); border-radius:20px; padding:6px; transition:border-color var(--dur), box-shadow var(--dur); }
.composer:focus-within{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-ring); }
.composer .icon-btn{ width:38px; height:38px; }
.composer-input{ flex:1; display:flex; align-items:center; }
.composer textarea{ width:100%; border:none; background:none; outline:none; resize:none; color:var(--text);
  font-size:14.5px; line-height:1.4; max-height:140px; padding:9px 4px; }
.send-btn{ width:42px; height:42px; border-radius:14px; background:var(--accent-grad); color:var(--accent-contrast);
  display:grid; place-items:center; box-shadow:0 6px 16px var(--accent-ring); transition:transform var(--dur), filter var(--dur); flex:none; }
.send-btn:hover{ filter:brightness(1.06); } .send-btn:active{ transform:scale(.9); }
.send-btn .ic{ width:19px; height:19px; }

/* recorder */
.recorder{ display:flex; align-items:center; gap:12px; background:var(--panel-2); border:1.5px solid var(--accent); border-radius:20px; padding:8px 10px; }
.rec-dot{ width:12px; height:12px; border-radius:50%; background:#ef4444; animation:blink 1s infinite; flex:none; }
.rec-time{ font-variant-numeric:tabular-nums; font-weight:700; font-size:14px; flex:none; }
.rec-wave{ flex:1; display:flex; align-items:center; gap:2px; height:26px; overflow:hidden; }
.rec-wave i{ width:3px; border-radius:3px; background:var(--accent); }

/* ---------- Info panel ---------- */
.info{ width:var(--info-w); background:var(--info-bg); border-left:1px solid var(--border); display:flex; flex-direction:column; min-height:0; animation:slideLeft .28s var(--ease); }
.info-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border); }
.info-head h2{ font-size:16px; font-weight:800; margin:0; }
.info-scroll{ overflow-y:auto; flex:1; }
.info-hero{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:26px 18px 18px; text-align:center; }
.info-name{ font-size:19px; font-weight:800; margin-top:8px; }
.info-sub{ font-size:13px; color:var(--text-mute); }
.info-actions{ display:flex; gap:8px; margin-top:16px; }
.info-action{ display:flex; flex-direction:column; align-items:center; gap:5px; width:64px; padding:10px 4px; border-radius:14px;
  background:var(--panel-2); color:var(--text-dim); font-size:11px; font-weight:600; transition:all var(--dur); }
.info-action:hover{ background:var(--accent-soft); color:var(--accent-2); } .info-action .ic{ width:19px; height:19px; }
.info-action.active{ background:var(--accent-soft); color:var(--accent-2); }
.info-section{ padding:16px 18px; border-top:1px solid var(--border); }
.info-section-title{ font-size:12px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--text-mute); margin-bottom:12px; }
.media-tabs{ display:flex; flex-direction:column; gap:2px; }
.media-tab{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px; transition:background var(--dur); cursor:pointer; }
.media-tab:hover{ background:var(--hover); }
.media-tab .ic{ width:19px; height:19px; color:var(--accent); }
.media-tab .mt-name{ font-weight:600; font-size:14px; flex:1; text-align:left; }
.media-tab .mt-count{ color:var(--text-mute); font-size:13px; }
.media-tab.active{ background:var(--accent-soft); }
.media-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:12px; }
.media-grid:empty{ display:none; }
.media-cell{ position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--panel-2); cursor:pointer; }
.media-cell img,.media-cell video{ width:100%; height:100%; object-fit:cover; }
.media-cell .badge{ position:absolute; right:5px; bottom:5px; background:rgba(0,0,0,.6); color:#fff; font-size:10px; padding:1px 6px; border-radius:8px; }
.media-empty{ grid-column:1/-1; color:var(--text-mute); font-size:13px; padding:14px 0; text-align:center; }
.member-list{ list-style:none; margin:0; padding:0; }
.member-row{ display:flex; align-items:center; gap:12px; padding:8px 4px; }
.member-row .m-body{ flex:1; min-width:0; }
.member-row .m-name{ font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; }
.member-row .m-role{ font-size:11px; color:var(--text-mute); }
.member-row .m-admin{ font-size:11px; color:var(--accent-2); font-weight:700; background:var(--accent-soft); padding:2px 8px; border-radius:8px; flex:none; }
.member-row .m-remove{ opacity:0; } .member-row:hover .m-remove{ opacity:1; }
.add-member-btn{ display:flex; align-items:center; gap:8px; width:100%; padding:11px; border-radius:12px; margin-top:8px;
  background:var(--accent-soft); color:var(--accent-2); font-weight:700; font-size:14px; justify-content:center; transition:filter var(--dur); }
.add-member-btn:hover{ filter:brightness(1.03); } .add-member-btn .ic{ width:17px; height:17px; }
.group-actions{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.group-action{ display:flex; align-items:center; gap:8px; width:100%; padding:11px; border-radius:12px;
  background:var(--panel-2); color:var(--text-dim); font-weight:600; font-size:14px; justify-content:center; transition:background var(--dur); }
.group-action:hover{ background:var(--hover); } .group-action .ic{ width:17px; height:17px; }
.group-action.danger{ color:#ef4444; } .group-action.danger .ic{ color:#ef4444; }

/* ============================================================ CALL */
.call-panel{ position:absolute; inset:0; z-index:30; background:linear-gradient(160deg,#12131a,#0a0b10);
  display:flex; flex-direction:column; padding:16px; animation:fadeIn .25s var(--ease); }
@media(min-width:1100px){ .app > .call-panel{ border-radius:var(--r-lg); } }
.call-topbar{ display:flex; align-items:center; gap:14px; color:#fff; padding:4px 8px 12px; }
.call-meta{ display:flex; flex-direction:column; }
.call-title{ font-weight:800; font-size:16px; }
.call-status{ font-size:12px; color:#9aa3b2; }
.call-timer{ margin-left:auto; font-variant-numeric:tabular-nums; font-weight:700; color:#cdd3de; background:rgba(255,255,255,.08); padding:6px 12px; border-radius:20px; }
.call-panel .icon-btn.light{ color:#cdd3de; } .call-panel .icon-btn.light:hover{ background:rgba(255,255,255,.1); color:#fff; }
/* video area + optional in-call chat side panel */
.call-body{ flex:1; min-height:0; display:flex; gap:0; }
.call-main{ flex:1; min-width:0; display:flex; flex-direction:column; min-height:0; }
.call-chat{ width:300px; flex:none; display:flex; flex-direction:column; min-height:0;
  background:rgba(20,22,30,.96); border-left:1px solid rgba(255,255,255,.1); border-radius:14px; margin-left:10px; overflow:hidden; animation:slideInRight .2s var(--ease); }
.call-chat.hidden{ display:none; }
.cc-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; color:#fff; font-weight:700; font-size:14px; border-bottom:1px solid rgba(255,255,255,.08); }
.cc-messages{ flex:1; min-height:0; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:7px; }
.cc-empty{ color:#8b93a3; font-size:12.5px; text-align:center; margin:auto; padding:16px; }
.cc-msg{ max-width:88%; align-self:flex-start; display:flex; flex-direction:column; }
.cc-msg.mine{ align-self:flex-end; align-items:flex-end; }
.cc-name{ font-size:11px; color:#9aa3b2; margin:0 0 2px 4px; }
.cc-bubble{ padding:7px 11px; border-radius:14px; border-top-left-radius:5px; background:#2a2e3a; color:#fff; font-size:13.5px; word-break:break-word; }
.cc-msg.mine .cc-bubble{ background:var(--accent-grad); color:var(--accent-contrast); border-top-left-radius:14px; border-top-right-radius:5px; }
.cc-time{ font-size:10px; color:#7a8290; margin:2px 6px 0; }
.cc-composer{ display:flex; gap:6px; padding:10px; border-top:1px solid rgba(255,255,255,.08); }
.cc-composer input{ flex:1; border:none; border-radius:12px; padding:9px 12px; background:#20242e; color:#fff; outline:none; font-size:13.5px; }
.cc-composer input:focus{ box-shadow:0 0 0 2px var(--accent-ring); }
#call-chat-btn{ position:relative; }
.cc-dot{ position:absolute; top:5px; right:5px; width:9px; height:9px; border-radius:50%; background:#ef4444; box-shadow:0 0 0 2px #14161d; }
@keyframes slideInRight{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:none; } }
/* Narrow popup: the in-call chat overlays the video instead of squeezing beside it. */
@container widget (max-width:680px){ .call-chat:not(.hidden){ position:absolute; inset:0; width:auto; margin:0; border-radius:0; z-index:6; } }
/* call-thread modal (from the Calls log) */
.ct-head{ padding-bottom:12px; border-bottom:1px solid var(--border); margin-bottom:12px; }
.ct-title{ font-weight:800; font-size:16px; }
.ct-meta{ font-size:13px; color:var(--text-dim); margin-top:2px; }
.ct-parts{ font-size:12px; color:var(--text-mute); margin-top:5px; }
.ct-messages{ display:flex; flex-direction:column; gap:7px; max-height:52vh; overflow-y:auto; }
.ct-messages .cc-bubble{ background:var(--panel-2); color:var(--text); }
.ct-messages .cc-msg.mine .cc-bubble{ background:var(--accent-grad); color:var(--accent-contrast); }
.ct-messages .cc-name{ color:var(--text-mute); }
.ct-messages .cc-time{ color:var(--text-mute); }
.call-stage{ flex:1; min-height:0; display:grid; place-items:center; gap:12px; padding:6px; }
.call-stage.grid{ display:grid; grid-auto-rows:1fr; align-items:stretch; justify-items:stretch; }
.call-strip{ display:flex; gap:10px; padding:12px 4px 6px; overflow-x:auto; justify-content:center; }
.call-strip:empty{ display:none; }
.tile{ position:relative; border-radius:18px; overflow:hidden; background:#1a1c25; border:2px solid transparent; min-height:0; }
.call-stage > .tile{ width:100%; height:100%; max-width:min(100%,1100px); }
.call-strip > .tile{ width:180px; height:120px; flex:none; cursor:pointer; }
.tile.spotlight{ border-color:var(--accent); }
.tile video{ width:100%; height:100%; object-fit:cover; background:#000; }
/* A shared screen must be shown WHOLE (never cropped) — contain on black. */
.tile.screen video{ object-fit:contain; background:#000; }
.tile.screen{ background:#000; }
.tile .no-video{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#8b93a3; background:#15171f; }
.tile .no-video .nv-avatar{ width:76px; height:76px; border-radius:50%; background:var(--accent-grad); color:#fff; display:grid; place-items:center; font-size:30px; font-weight:700; }
.tile .no-video .nv-avatar .ic{ width:34px; height:34px; }
.tile .no-video .nv-sub{ font-size:12px; color:#5f6672; }
.call-strip .no-video .nv-avatar{ width:42px; height:42px; font-size:16px; }
.call-strip .no-video span:not(.nv-avatar){ display:none; }
.tile .label{ position:absolute; left:10px; bottom:10px; background:rgba(0,0,0,.5); color:#fff; font-size:12px; font-weight:600; padding:4px 10px; border-radius:10px; backdrop-filter:blur(6px); display:flex; align-items:center; gap:6px; }
.tile .tile-fs{ position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:9px; background:rgba(0,0,0,.4); color:#fff; display:grid; place-items:center; opacity:0; transition:opacity var(--dur); }
.tile:hover .tile-fs{ opacity:1; } .tile .tile-fs .ic{ width:16px; height:16px; }
/* "Control" button on a remote screen-share tile — always visible (also tappable on mobile). */
.tile .tile-control{ position:absolute; top:10px; left:10px; height:30px; padding:0 11px; border-radius:9px; background:rgba(0,0,0,.55); color:#fff; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; cursor:pointer; backdrop-filter:blur(6px); transition:background var(--dur); }
.tile .tile-control:hover{ background:var(--accent); }
.tile .tile-control .ic{ width:15px; height:15px; }
/* Remote-control / agent prompt modal copy. */
.agent-modal p{ margin:0 0 10px; line-height:1.5; }
.agent-modal p:last-child{ margin-bottom:0; }
.agent-modal .muted{ color:var(--text-mute); font-size:13px; }
.call-controls{ display:flex; align-items:center; justify-content:center; gap:12px; padding:14px 0 6px; }
.call-btn{ width:56px; height:56px; border-radius:18px; background:rgba(255,255,255,.1); color:#fff; display:grid; place-items:center; transition:transform var(--dur), background var(--dur); }
.call-btn:hover{ background:rgba(255,255,255,.18); } .call-btn:active{ transform:scale(.9); }
.call-btn .ic{ width:23px; height:23px; }
.call-btn.off{ background:#fff; color:#12131a; }
/* Busy while a mic/cam/screen toggle is acquiring the device — show a spinner and
   block further taps so the (sometimes slow) getUserMedia can't be raced. */
.call-btn.pending{ pointer-events:none; position:relative; }
.call-btn.pending .ic{ opacity:.25; }
.call-btn.pending::after{ content:""; position:absolute; width:22px; height:22px; border-radius:50%;
  border:2.5px solid currentColor; border-top-color:transparent; opacity:.9; animation:spin .7s linear infinite; }
.call-btn.hangup{ background:#ef4444; width:66px; } .call-btn.hangup:hover{ background:#dc2626; }
.call-debug{ color:#7a8194; font-size:11px; margin-top:6px; }
.call-debug summary{ cursor:pointer; }
.call-log{ max-height:120px; overflow:auto; font-family:ui-monospace,monospace; background:rgba(0,0,0,.3); border-radius:10px; padding:8px; margin-top:6px; color:#c3c9d4; }
.call-log .err{ color:#ff8a8a; }
.call-panel.minimized{ inset:auto; right:20px; bottom:20px; width:320px; height:240px; border-radius:20px; padding:12px; box-shadow:var(--shadow-lg); }
.call-panel.minimized .call-strip,.call-panel.minimized .call-debug{ display:none; }
.call-panel.minimized .call-controls{ gap:6px; padding:8px 0 0; }
.call-panel.minimized .call-btn{ width:38px; height:38px; border-radius:12px; } .call-panel.minimized .call-btn.hangup{ width:44px; }

/* incoming call */
.incoming-call{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:var(--overlay); backdrop-filter:blur(6px); animation:fadeIn .2s var(--ease); }
.ic-card{ background:var(--sidebar-bg); border-radius:26px; padding:34px 40px; text-align:center; box-shadow:var(--shadow-lg); animation:pop .3s var(--ease); }
.ic-avatar{ width:96px; height:96px; border-radius:50%; background:var(--accent-grad); color:#fff; display:grid; place-items:center;
  font-size:36px; font-weight:700; margin:0 auto 16px; animation:ring 1.6s infinite; }
.ic-title{ font-size:13px; color:var(--text-mute); text-transform:uppercase; letter-spacing:.5px; font-weight:700; }
.ic-from{ font-size:22px; font-weight:800; margin:4px 0 4px; }
.ic-group{ font-size:14px; color:var(--text-mute); margin:0 0 18px; }
.ic-actions{ display:flex; gap:40px; justify-content:center; }
.ic-round{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; color:#fff; transition:transform var(--dur); }
.ic-round:active{ transform:scale(.9); } .ic-round .ic{ width:26px; height:26px; }
.ic-round.accept{ background:#22c55e; animation:pulseGreen 1.6s infinite; } .ic-round.decline{ background:#ef4444; }

/* ============================================================ popovers (JS-built) */
.popover{ position:fixed; z-index:70; background:var(--sidebar-bg); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow-lg); animation:pop .16s var(--ease); }
.menu{ min-width:190px; padding:6px; }
.menu-item{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border-radius:10px; font-size:14px; color:var(--text); transition:background var(--dur); text-align:left; }
.menu-item:hover{ background:var(--hover); } .menu-item .ic{ width:17px; height:17px; color:var(--text-dim); }
.menu-item.danger{ color:#ef4444; } .menu-item.danger .ic{ color:#ef4444; }
.menu-sep{ height:1px; background:var(--border); margin:5px 4px; }

/* emoji picker */
.emoji-pop{ width:322px; overflow:hidden; }
.emoji-quick{ display:flex; gap:4px; padding:8px; border-bottom:1px solid var(--border); }
.emoji-quick button{ font-size:20px; padding:6px; border-radius:10px; transition:transform var(--dur), background var(--dur); }
.emoji-quick button:hover{ background:var(--hover); transform:scale(1.15); }
.emoji-cats{ display:flex; gap:2px; padding:6px 8px 0; }
.emoji-cat{ padding:5px 8px; border-radius:8px; font-size:16px; opacity:.6; }
.emoji-cat.active{ opacity:1; background:var(--accent-soft); }
.emoji-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:2px; padding:8px; max-height:220px; overflow-y:auto; }
.emoji-grid button{ font-size:20px; padding:5px; border-radius:9px; transition:transform var(--dur), background var(--dur); }
.emoji-grid button:hover{ background:var(--hover); transform:scale(1.2); }

/* theme menu */
.theme-pop{ width:290px; padding:16px; }
.theme-pop h3{ margin:0 0 14px; font-size:15px; font-weight:800; }
.theme-row{ margin-bottom:16px; }
.theme-row > .lbl{ font-size:12px; font-weight:700; color:var(--text-mute); text-transform:uppercase; letter-spacing:.3px; margin-bottom:8px; }
.seg{ display:flex; background:var(--panel-2); border-radius:12px; padding:4px; gap:4px; }
.seg button{ flex:1; padding:8px; border-radius:9px; font-size:13px; font-weight:600; color:var(--text-dim); display:flex; align-items:center; justify-content:center; gap:6px; transition:all var(--dur); }
.seg button.active{ background:var(--sidebar-bg); color:var(--text); box-shadow:var(--shadow-sm); }
.seg button .ic{ width:16px; height:16px; }
.swatches{ display:flex; flex-wrap:wrap; gap:11px; }
.swatch{ width:32px; height:32px; border-radius:50%; position:relative; transition:transform var(--dur); box-shadow:var(--shadow-sm); }
.swatch:hover{ transform:scale(1.12); }
.swatch.active::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:2.5px solid var(--text); }
.walls{ display:flex; flex-wrap:wrap; gap:8px; }
.bg-swatch{ width:48px; height:34px; border-radius:10px; border:1px solid var(--border-strong); background-color:var(--chat-bg); cursor:pointer; transition:transform var(--dur); }
.bg-swatch:hover{ transform:scale(1.06); }
.bg-swatch.active{ outline:2.5px solid var(--accent); outline-offset:1px; border-color:transparent; }
.bg-swatch[data-bg="glow"]{ background-image: radial-gradient(70% 60% at 20% 10%, var(--accent-soft), transparent 70%), radial-gradient(60% 60% at 100% 100%, var(--accent-softer), transparent 72%); }
.bg-swatch[data-bg="dots"]{ background-image: radial-gradient(var(--wall) 1.4px, transparent 1.4px); background-size:9px 9px; }
.bg-swatch[data-bg="accent"]{ background-image: radial-gradient(var(--accent-soft) 1.8px, transparent 1.8px); background-size:10px 10px; }
.bg-swatch[data-bg="grid"]{ background-image: linear-gradient(var(--wall) 1px, transparent 1px), linear-gradient(90deg, var(--wall) 1px, transparent 1px); background-size:10px 10px; }
.bg-swatch[data-bg="graph"]{ background-image: linear-gradient(var(--wall) 1px, transparent 1px), linear-gradient(90deg, var(--wall) 1px, transparent 1px); background-size:6px 6px; }
.bg-swatch[data-bg="diagonal"]{ background-image: repeating-linear-gradient(45deg, var(--wall) 0 1px, transparent 1px 7px); }
.bg-swatch[data-bg="cross"]{ background-image: radial-gradient(var(--wall) 1.3px, transparent 0), radial-gradient(var(--wall) 1.3px, transparent 0); background-size:14px 14px; background-position:0 0,7px 7px; }

/* lightbox / gallery viewer */
.lightbox{ position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.9); animation:fadeIn .2s var(--ease); }
/* Confined to the widget popup when hosted there (widget is position:fixed, so
   an absolute lightbox fills it). Full-screen only when maximized / OS fullscreen. */
.widget > .lightbox{ position:absolute; }
.lightbox .lb-stage{ position:absolute; inset:0; display:grid; place-items:center; padding:24px; box-sizing:border-box; }
.lightbox img,.lightbox video{ max-width:100%; max-height:100%; border-radius:12px; box-shadow:var(--shadow-lg); }
.lightbox .lb-actions{ position:absolute; top:20px; right:20px; display:flex; gap:10px; }
.lightbox .lb-actions button{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center; }
.lightbox .lb-actions button:hover{ background:rgba(255,255,255,.22); }
.lightbox .lb-actions .ic{ width:20px; height:20px; }
.lightbox .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center; z-index:2; }
.lightbox .lb-nav:hover{ background:rgba(255,255,255,.22); }
.lightbox .lb-nav .ic{ width:22px; height:22px; }
.lightbox .lb-prev{ left:16px; } .lightbox .lb-next{ right:16px; } .lightbox .lb-next .ic{ transform:rotate(180deg); }
.lightbox .lb-counter{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:#fff; font-size:13px;
  font-weight:600; background:rgba(0,0,0,.45); padding:5px 13px; border-radius:12px; }

/* new conversation modal */
.modal-scrim{ position:fixed; inset:0; z-index:75; background:var(--overlay); backdrop-filter:blur(4px); display:grid; place-items:center; padding:20px; animation:fadeIn .2s var(--ease); }
/* When a modal is hosted inside the floating popup, confine it to the popup:
   the widget is position:fixed, so an absolutely-positioned scrim fills it
   (and its overflow:hidden clips it). On body/fullscreen it stays fixed. */
.widget > .modal-scrim{ position:absolute; }
/* max-height relative to the scrim (100%) so the modal fits INSIDE the widget
   popup; capped at 86vh on large/fullscreen scrims. Width likewise stays within
   the popup. */
.modal{ width:min(460px,100%); max-height:min(86vh, 100%); background:var(--sidebar-bg); border-radius:22px; box-shadow:var(--shadow-lg); overflow:hidden; display:flex; flex-direction:column; animation:pop .25s var(--ease); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px 14px; }
.modal-head h2{ margin:0; font-size:19px; font-weight:800; }
.modal-body{ padding:0 22px 8px; overflow-y:auto; }
.modal-body .field{ margin-bottom:14px; }
.modal-foot{ padding:16px 22px 20px; display:flex; gap:10px; justify-content:flex-end; }
.type-seg{ display:flex; background:var(--panel-2); border-radius:12px; padding:4px; gap:4px; margin-bottom:14px; }
.type-seg button{ flex:1; padding:10px; border-radius:9px; font-weight:600; font-size:14px; color:var(--text-dim); transition:all var(--dur); }
.type-seg button.active{ background:var(--sidebar-bg); color:var(--text); box-shadow:var(--shadow-sm); }
.picker-wrap{ display:flex; flex-direction:column; gap:8px; }
.picker-search{ display:flex; align-items:center; gap:9px; padding:0 12px; height:40px; background:var(--panel-2);
  border-radius:12px; color:var(--text-mute); transition:box-shadow var(--dur); }
.picker-search:focus-within{ box-shadow:0 0 0 3px var(--accent-ring); }
.picker-search .ic{ width:16px; height:16px; flex:none; }
.picker-search-input{ border:none; background:none; outline:none; color:var(--text); font-size:14px; width:100%; }
.staff-picker{ list-style:none; margin:0; padding:0; max-height:300px; overflow-y:auto; }
.staff-pick{ display:flex; align-items:center; gap:12px; padding:9px 8px; border-radius:12px; cursor:pointer; transition:background var(--dur); }
.staff-pick:hover{ background:var(--hover); }
.staff-pick input{ margin-left:auto; width:20px; height:20px; accent-color:var(--accent); flex:none; }
.staff-pick .sp-body{ min-width:0; }
.staff-pick .sp-name{ font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.staff-pick .sp-email{ font-size:12px; color:var(--text-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.staff-pick .sp-role{ font-size:11px; color:var(--text-mute); }
.picker-empty{ text-align:center; color:var(--text-mute); font-size:13px; padding:24px 12px; }
/* message info (read/delivered receipts) */
.msg-info{ display:flex; flex-direction:column; }
.mi-preview{ display:flex; justify-content:flex-end; margin-bottom:6px; }
.mi-bubble{ background:var(--accent-soft); border-radius:14px 14px 4px 14px; padding:8px 12px; max-width:82%; }
.mi-text{ font-size:14px; color:var(--text); white-space:pre-wrap; word-break:break-word; }
.mi-time{ font-size:11px; color:var(--text-mute); text-align:right; margin-top:2px; }
.mi-row{ display:flex; align-items:center; gap:12px; padding:13px 2px; border-top:1px solid var(--border); }
.mi-row .ic{ width:20px; height:20px; color:var(--text-mute); flex:none; }
.mi-row.read .ic{ color:#53bdeb; }
.mi-rlabel{ font-weight:600; font-size:14px; color:var(--text); }
.mi-rvalue{ margin-left:auto; color:var(--text-dim); font-size:13px; }
.mi-section{ border-top:1px solid var(--border); padding-top:12px; margin-top:10px; }
.mi-head{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--text-mute); margin-bottom:6px; }
.mi-head .ic{ width:16px; height:16px; color:var(--text-mute); }
.mi-head.read .ic{ color:#53bdeb; }
.mi-person{ display:flex; align-items:center; gap:10px; padding:7px 2px; }
.mi-person .mi-pname{ font-size:14px; font-weight:600; color:var(--text); }
.mi-person .mi-ptime{ margin-left:auto; font-size:12px; color:var(--text-mute); }
.mi-empty{ text-align:center; color:var(--text-mute); font-size:13px; padding:16px; }
/* Calls & activity log */
.call-logs{ display:flex; flex-direction:column; }
.cl-row{ display:flex; align-items:center; gap:12px; padding:10px 6px; border-top:1px solid var(--border); cursor:pointer; border-radius:10px; }
.cl-row:first-child{ border-top:none; }
.cl-row:hover{ background:var(--hover); }
.cl-body{ flex:1; min-width:0; }
.cl-title{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-sub{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-dim); margin-top:2px; }
.cl-sub .cl-ic{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--panel-2); color:var(--text-mute); }
.cl-sub .cl-ic .ic{ width:13px; height:13px; }
.cl-sub .cl-ic.answered{ background:color-mix(in srgb,#22c55e 20%, transparent); color:#16a34a; }
.cl-sub .cl-ic.missed{ background:color-mix(in srgb,#ef4444 18%, transparent); color:#ef4444; }
.cl-sub .cl-ic.neutral{ background:var(--accent-soft); color:var(--accent-2); }
.cl-row.missed .cl-title{ color:#ef4444; }
.cl-time{ font-size:11.5px; color:var(--text-mute); white-space:nowrap; align-self:flex-start; margin-top:4px; }
.cl-empty{ text-align:center; color:var(--text-mute); font-size:13px; padding:26px 12px; }

/* Report Issues screen */
.issues-group-title{ font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--text-mute); padding:14px 10px 6px; }
.cl-row.active{ background:var(--hover); }
.issue-status-badge{ display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:700; margin-bottom:12px; background:var(--accent-soft); color:var(--accent-2); }
.issue-status-badge.answered{ background:color-mix(in srgb,#22c55e 20%, transparent); color:#16a34a; }
.issue-status-badge.missed{ background:color-mix(in srgb,#ef4444 18%, transparent); color:#ef4444; }
.event-msg.issue-event{ cursor:pointer; }
.issue-audit-log{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.issue-audit-log li{ display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:10px; background:var(--hover); }
.issue-audit-log .ial-label{ font-weight:700; font-size:13px; color:var(--text); }
.issue-audit-log .ial-meta{ font-size:12px; color:var(--text-mute); }
.event-msg.issue-event:hover .ev-pill{ filter:brightness(0.97); }
.btn-ghost{ padding:11px 18px; border-radius:12px; font-weight:700; color:var(--text-dim); background:var(--panel-2); }
.btn-ghost:hover{ background:var(--hover); }
.btn-solid{ padding:11px 20px; border-radius:12px; font-weight:700; background:var(--accent-grad); color:var(--accent-contrast); box-shadow:0 6px 16px var(--accent-ring); }
.btn-solid:disabled{ opacity:.5; box-shadow:none; cursor:not-allowed; }

/* toasts */
.toasts{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{ background:var(--sidebar-bg); border:1px solid var(--border); box-shadow:var(--shadow-md); padding:11px 18px; border-radius:14px; font-size:13.5px; font-weight:600; animation:slideUp .25s var(--ease); }
.toast.err{ border-color:#ef4444; color:#ef4444; }

/* profile menu extras */
.menu-head{ padding:8px 12px 4px; font-weight:800; font-size:14px; }
.menu-note{ padding:4px 12px 8px; font-size:11.5px; color:var(--text-mute); line-height:1.4; }

/* remote-control viewer */
.rc-overlay{ position:fixed; inset:0; z-index:95; background:#0b0c10; display:flex; flex-direction:column; animation:fadeIn .2s var(--ease); }
.rc-bar{ display:flex; align-items:center; gap:14px; padding:12px 16px; color:#fff; background:#15171f; border-bottom:1px solid #262a33; }
.rc-title{ display:flex; align-items:center; gap:8px; font-weight:800; }
.rc-title .ic{ width:18px; height:18px; }
.rc-hint{ font-size:12px; color:#9aa3b2; margin-left:auto; }
.rc-stage{ flex:1; min-height:0; display:grid; place-items:center; padding:12px; outline:none; }
/* Red targeting-reticle cursor over the remote screen (white halo so it reads on
   any background). Hotspot is the centre (16,16); crosshair is the fallback. */
.rc-screen{ max-width:100%; max-height:100%; border-radius:10px; box-shadow:var(--shadow-lg); background:#000; user-select:none;
  cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%3E%3Cg%20fill='none'%20stroke='white'%20stroke-width='4'%20stroke-linecap='round'%20opacity='.85'%3E%3Cline%20x1='16'%20y1='2'%20x2='16'%20y2='11'/%3E%3Cline%20x1='16'%20y1='21'%20x2='16'%20y2='30'/%3E%3Cline%20x1='2'%20y1='16'%20x2='11'%20y2='16'/%3E%3Cline%20x1='21'%20y1='16'%20x2='30'%20y2='16'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='%23ff2323'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cline%20x1='16'%20y1='2'%20x2='16'%20y2='11'/%3E%3Cline%20x1='16'%20y1='21'%20x2='16'%20y2='30'/%3E%3Cline%20x1='2'%20y1='16'%20x2='11'%20y2='16'/%3E%3Cline%20x1='21'%20y1='16'%20x2='30'%20y2='16'/%3E%3C/g%3E%3Ccircle%20cx='16'%20cy='16'%20r='2.5'%20fill='%23ff2323'/%3E%3C/svg%3E") 16 16,crosshair; }

/* call reaction floaters */
.float-emoji{ position:fixed; z-index:85; font-size:34px; pointer-events:none; animation:floatUp 2.2s var(--ease) forwards; }

/* ============================================================ animations */
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pop{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:scale(1); } }
@keyframes slideUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
@keyframes slideLeft{ from{ opacity:0; transform:translateX(20px); } to{ opacity:1; transform:translateX(0); } }
@keyframes msgIn{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes typing{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-5px); opacity:1; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes blink{ 50%{ opacity:.25; } }
@keyframes pulseDot{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.5),0 0 0 2.5px var(--sidebar-bg); } 70%{ box-shadow:0 0 0 6px rgba(34,197,94,0),0 0 0 2.5px var(--sidebar-bg); } }
@keyframes pulseGreen{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.5); } 70%{ box-shadow:0 0 0 16px rgba(34,197,94,0); } }
@keyframes ring{ 0%,100%{ transform:rotate(0); } 20%{ transform:rotate(-12deg); } 40%{ transform:rotate(12deg); } 60%{ transform:rotate(-8deg); } 80%{ transform:rotate(8deg); } }
@keyframes flashHi{ 0%,100%{ background:var(--bubble-in); } 30%{ background:var(--accent-soft); } }
@keyframes floatUp{ 0%{ opacity:0; transform:translateY(0) scale(.5); } 15%{ opacity:1; transform:translateY(-10px) scale(1.2); } 100%{ opacity:0; transform:translateY(-260px) scale(1); } }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ============================================================ FLOATING WIDGET */
/* Host page backdrop — the "site/CRM" the chat popup floats over. */
.host-bg{ position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--page); }
.host-top{ position:absolute; top:0; left:0; right:0; height:58px; display:flex; align-items:center; padding:0 26px;
  font-weight:800; letter-spacing:-.2px; color:var(--text-dim); background:color-mix(in srgb,var(--sidebar-bg) 72%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.host-cards{ position:absolute; left:26px; right:26px; top:92px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.host-cards span{ height:160px; border-radius:20px; background:color-mix(in srgb,var(--sidebar-bg) 55%, transparent); border:1px solid var(--border); }

/* Launcher bubble */
.launcher{ position:fixed; right:24px; bottom:24px; z-index:50; width:60px; height:60px; border-radius:20px;
  background:var(--accent-grad); color:var(--accent-contrast); display:grid; place-items:center;
  box-shadow:0 14px 34px var(--accent-ring); transition:transform var(--dur); }
.launcher:hover{ transform:translateY(-2px) scale(1.03); } .launcher:active{ transform:scale(.93); }
.launcher .ic{ width:26px; height:26px; grid-area:1/1; transition:opacity var(--dur), transform var(--dur); }
.launcher .ic-close{ opacity:0; transform:rotate(-90deg) scale(.6); }
.launcher.active .ic-open{ opacity:0; transform:rotate(90deg) scale(.6); }
.launcher.active .ic-close{ opacity:1; transform:none; }
.launcher-badge{ position:absolute; top:-4px; right:-4px; min-width:22px; height:22px; padding:0 6px; border-radius:11px;
  background:#ef4444; color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; box-shadow:0 0 0 3px var(--page); }

/* Popup window */
.widget{ position:fixed; right:24px; bottom:96px; z-index:48;
  width:min(420px, calc(100vw - 32px)); height:min(660px, calc(100vh - 128px));
  background:var(--chat-bg); border:1px solid var(--border); border-radius:24px; overflow:hidden;
  box-shadow:var(--shadow-lg); container-type:inline-size; container-name:widget;
  transform-origin:bottom right; transition:opacity .22s var(--ease), transform .22s var(--ease);
  opacity:0; transform:translateY(16px) scale(.96); pointer-events:none; }
.widget.open{ opacity:1; transform:none; pointer-events:auto; }
.widget.max{ inset:16px; width:auto; height:auto; border-radius:18px; }
/* true (OS) full screen — fill the whole screen with the full desktop layout */
.widget:fullscreen, .widget:-webkit-full-screen{ width:100vw; height:100vh; inset:0; border-radius:0; border:none; opacity:1; transform:none; }

/* Layout adapts to the WIDGET width (container queries), not the screen. */
@container widget (max-width:1040px){ :root{ --info-w:300px; } .info{ position:absolute; inset:0; z-index:25; width:auto; } }
@container widget (max-width:760px){
  .app{ grid-template-columns:var(--rail-w) 1fr; }
  .rail-label{ display:none; }
  .rail-item{ width:48px; height:48px; }
  /* Fade the chat pane in/out instead of sliding — a slide could be caught
     mid-animation while the widget itself opens/closes, revealing the list behind. */
  .chat{ position:absolute; inset:0; z-index:20; opacity:0; pointer-events:none; transition:opacity .16s var(--ease); }
  .app.show-chat .chat{ opacity:1; pointer-events:auto; }
  .only-mobile{ display:inline-flex; }
  .msg-row{ max-width:90%; }
  /* Give the name room in the narrow popup: drop the least-critical header actions
     (search lives in the info panel; expand lives in the list header + rail). */
  #hdr-search, .chat-head-actions .widget-max-btn{ display:none; }
  .chat-head{ padding:10px 12px; gap:6px; }
  .chat-head-actions .icon-btn{ width:36px; height:36px; }
  .chat-head-title{ font-size:16px; }
}

/* Calls fit inside the popup — compact controls + tiles. */
@container widget (max-width:560px){
  .call-controls{ gap:8px; padding:10px 0 4px; }
  .call-btn{ width:44px; height:44px; border-radius:14px; }
  .call-btn .ic{ width:19px; height:19px; }
  .call-btn.hangup{ width:52px; }
  .call-strip > .tile{ width:118px; height:80px; }
  .call-topbar{ padding:2px 4px 8px; }
  .call-timer{ display:none; }
}
@container widget (max-width:420px){ .rail{ padding:12px 6px; } .rail-item{ width:44px; height:44px; } .messages{ padding:16px 14px 6px; } }

/* Phone screens: the popup takes the whole viewport. */
@media (max-width:600px){
  .widget{ width:100vw; height:100dvh; right:0; bottom:0; border-radius:0; border:none; transform:translateY(100%); }
  .widget.open{ transform:none; }
  .widget.max{ inset:0; border-radius:0; }
  .launcher{ right:16px; bottom:16px; }
  /* When the popup fills the phone screen, the fixed launcher bubble sits right
     on top of the composer's send button (same bottom-right corner, higher
     z-index) — so taps hit "close chat" (its ⌄ icon) instead of "send". Hide it
     while the chat is open; it reappears when closed so you can reopen. */
  body:has(.widget.open) .launcher{ display:none; }
}

/* ============================================================ POLISH / MOTION
   Purely visual — no layout or behaviour change. */
/* Refined scrollbars */
*{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--text-mute) 40%,transparent) transparent; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--text-mute) 38%,transparent); border-radius:8px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb,var(--text-mute) 62%,transparent); background-clip:content-box; }
::-webkit-scrollbar-track{ background:transparent; }

/* Deeper, softer popup elevation */
.widget{ box-shadow:0 26px 64px -14px rgba(2,6,23,.5), 0 10px 26px -10px rgba(2,6,23,.34); }

/* Launcher bubble: hover lift + press */
.launcher{ transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .2s var(--ease); }
.launcher:hover{ transform:translateY(-2px) scale(1.05); filter:brightness(1.05); }
.launcher:active{ transform:scale(.93); }

/* Conversation list: hover lift + accent rail on the active item */
.convo-item{ transition:background var(--dur), transform .13s var(--ease); }
.convo-item:hover{ transform:translateX(2px); }
.convo-item:active{ transform:translateX(2px) scale(.996); }
.convo-item.active{ box-shadow:inset 3px 0 0 var(--accent); }
.convo-item:hover .avatar,.member-row:hover .avatar{ transform:scale(1.06); }
.avatar{ transition:transform .16s var(--ease); }

/* Icon buttons + rail items: gentle hover, snappy press */
.icon-btn{ transition:background var(--dur), color var(--dur), transform .12s var(--ease); }
.icon-btn:hover{ transform:translateY(-1px); }
.icon-btn:active{ transform:scale(.9); }
.rail-item{ transition:background var(--dur), color var(--dur), transform .12s var(--ease); }
.rail-item:hover{ transform:translateY(-1px); }

/* Message bubbles: elevate on hover */
.bubble{ transition:box-shadow var(--dur); }
.msg-row:hover .bubble{ box-shadow:var(--shadow-md); }

/* ============================================================ MODERN REFRESH
   Accent gradients + glow + depth. Token-driven, purely visual. */
/* Dark nav: subtle vertical depth so it reads as a raised surface */
.rail{ background:linear-gradient(180deg, var(--rail-bg), color-mix(in srgb,var(--rail-bg) 82%, #000)); }
/* Active nav pill glows in the accent colour */
.rail-item.active::before{ box-shadow:0 0 12px 1px color-mix(in srgb,var(--accent) 70%, transparent); }
/* Avatars/logo: soft top sheen so the gradient reads as a rounded chip */
.avatar,.rail-avatar,.rail-logo,.brand-mark{ box-shadow:inset 0 1px 0 rgba(255,255,255,.22); }
/* Primary actions carry an accent glow + gentle lift */
.send-btn,.btn-primary{ box-shadow:var(--accent-glow); }
.send-btn:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.btn-primary:hover{ transform:translateY(-1px); }
/* My messages float with a soft accent glow (stronger on hover) */
.msg-row.mine .bubble{ box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 20%, transparent); }
.msg-row.mine:hover .bubble{ box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 30%, transparent); }
/* Composer rests on a soft shadow; active conversation gets an accent glow too */
.composer{ box-shadow:var(--shadow-sm); }
.convo-item.active{ box-shadow:inset 3px 0 0 var(--accent), 0 6px 18px color-mix(in srgb,var(--accent) 12%, transparent); }
/* Event pills: fully rounded with a subtle accent-tinted icon */
.event-msg .ev-pill{ border-radius:999px; }
.event-msg.neutral .ev-ic{ background:linear-gradient(135deg, var(--accent-soft), var(--accent-softer)); }
/* Online dot: crisper ring */
.avatar.online::after{ box-shadow:0 0 0 2.5px var(--sidebar-bg), 0 0 8px color-mix(in srgb,#22c55e 70%, transparent); }

/* ============================================================ UI v2 — bolder type, roomier layout, tailed bubbles */
/* Roomier rhythm (cozy default; compact keeps its own tighter values) */
:root[data-density="cozy"]{ --msg-gap:16px; --bubble-pad:11px 15px; }
/* Bolder type scale + more breathing room */
.sidebar-head{ padding:22px 20px 12px; }
.sidebar-head h1{ font-size:26px; letter-spacing:-.6px; }
.search{ height:44px; margin:6px 16px 12px; border-radius:15px; }
.convo-list{ padding:6px 12px 16px; }
.convo-item{ padding:12px 14px; gap:13px; border-radius:18px; }
.ci-name{ font-size:15px; letter-spacing:-.1px; }
.ci-preview{ font-size:13.5px; }
/* Cleaner, roomier chat header */
.chat-head{ padding:14px 20px; gap:12px; }
.chat-head-title{ font-size:19.5px; letter-spacing:-.35px; }
.chat-head-sub{ font-size:13px; }
.messages{ padding:26px 26px 8px; }
/* Roomier, rounder composer */
.composer-wrap{ padding:10px 18px 18px; }
.composer{ border-radius:22px; padding:7px; }
/* Tailed bubbles: a soft beak extending the bubble's top-outer corner, on the first
   bubble of a group (grouped follow-ups stay clean, media has none). The beak is flat
   along the top (continuing the bubble's top edge), tapers to a soft tip at the outer
   corner, and its OUTER-bottom corner is rounded so it curves smoothly back into the
   body — a real beak instead of a square tab. */
.msg-row:not(.grouped) .bubble::after{ content:''; position:absolute; top:0; width:10px; height:14px; pointer-events:none; }
.msg-row:not(.grouped):not(.mine) .bubble::after{ left:-5px; background:var(--bubble-in);
  border-top-left-radius:3px; border-bottom-left-radius:16px; }
/* Mine is a gradient bubble; the top-right corner sits ~mid-gradient, so fill the beak
   with a 50/50 accent mix (not the dark accent-2) to avoid a mismatched patch. */
.msg-row:not(.grouped).mine .bubble::after{ right:-5px; background:color-mix(in srgb, var(--accent) 50%, var(--accent-2));
  border-top-right-radius:3px; border-bottom-right-radius:16px; }
.bubble.media-only::after{ display:none !important; }

/* Send button: springy press */
.send-btn{ transition:transform .14s var(--ease), filter var(--dur); }
.send-btn:active{ transform:scale(.88); }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}