/* ============================================================================
   chrome.css — the panel's bespoke CHROME (top bar, device pill + dropdowns,
   desktop, dock, windows, toasts, responsive rules, call & install extras).
   Ported verbatim from styles.css as the Tailwind COMPONENT LAYER. material.css
   owns tokens/glass/login; dashboard.css / apps2.css / theme.css / account.css /
   i18n.css complete the chrome.
   ============================================================================ */

/* ===== DESKTOP ===== */
.desktop{position:fixed;inset:0;z-index:1;}
.desk-area{position:absolute;top:var(--topbar-h);bottom:var(--dock-h);left:0;right:0;padding:18px 24px;overflow:hidden;}
/* .desk-grid / .desk-app / .desk-ico / .desk-label are defined in dashboard.css */
/* .desk-label defined in dashboard.css */


/* ===== TOP BAR ===== */
.topbar{position:absolute;top:0;left:0;right:0;height:var(--topbar-h);z-index:50;display:flex;align-items:center;
  gap:16px;padding:0 16px;border-radius:0;border-inline:none;border-top:none;box-shadow:0 2px 18px -6px rgba(20,24,45,.4);}
.tb-brand{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ink);}
.tb-logo{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--warm),var(--warm-deep));box-shadow:0 4px 12px -4px rgba(217,119,87,.45);}
.tb-search{flex:1;max-width:520px;height:32px;display:flex;align-items:center;gap:9px;padding:0 12px;border-radius:11px;color:var(--ink-faint);}
.tb-search input{flex:1;border:none;background:none;outline:none;font-size:13px;color:var(--ink);}
.tb-right{display:flex;align-items:center;gap:4px;margin-inline-start:auto;}
.tb-lang{display:flex;align-items:center;gap:5px;height:32px;padding:0 11px;border-radius:10px;color:var(--ink-soft);font-size:12px;font-weight:600;transition:.15s;}
.tb-lang:hover{background:rgba(255,255,255,.5);}
.tb-ic{position:relative;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--ink-soft);transition:.15s;}
.tb-ic:hover{background:rgba(255,255,255,.55);color:var(--ink);}
.tb-power:hover{background:rgba(226,87,76,.16);color:#E2574C;}
.tb-badge{position:absolute;top:7px;inset-inline-end:8px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--glass-strong);}


/* ===== DOCK ===== */
.dock{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);height:60px;z-index:60;display:flex;align-items:center;
  gap:8px;padding:0 12px;border-radius:20px;max-width:calc(100vw - 24px);
  background:rgba(20,22,40,.46);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 34px -14px rgba(6,8,22,.7);}
.dock-app{position:relative;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;transition:.16s;}
.dock-app:hover{transform:translateY(-7px) scale(1.06);}
.dock-ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;
  box-shadow:0 8px 16px -6px rgba(20,24,45,.5), inset 0 1px 0 rgba(255,255,255,.35);}
.run-dot{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.85);}
.dock-sep{width:1px;height:34px;background:rgba(255,255,255,.18);margin:0 2px;}


/* ===== WINDOW ===== */
.win{position:absolute;display:flex;flex-direction:column;border-radius:var(--radius-win);overflow:hidden;
  box-shadow:var(--shadow-win);transition:box-shadow .2s;}
.win-open{animation:winOpen .26s cubic-bezier(.2,.9,.3,1) both;}
@keyframes winOpen{from{opacity:0;transform:scale(.95) translateY(8px);}to{opacity:1;transform:none;}}
.win-active{box-shadow:var(--shadow-win), 0 0 0 1px rgba(217,119,87,.25);}
.win-bar{height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;cursor:default;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.2));border-bottom:1px solid var(--glass-line);user-select:none;}
.win-app{display:flex;align-items:center;gap:9px;}
.win-ico{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;color:#fff;}
.win-title{font-size:13.5px;font-weight:600;color:var(--ink);}
.win-ctrls{display:flex;align-items:center;gap:6px;}
.wc{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:var(--ink-soft);transition:.14s;}
.wc:hover{background:rgba(255,255,255,.6);color:var(--ink);}
.wc-close:hover{background:#E2574C;color:#fff;}
.wc-max:hover{background:#34C759;color:#fff;}
.wc-min:hover{background:#FFB23E;color:#fff;}
.win-body{flex:1;min-height:0;background:rgba(255,255,255,.5);position:relative;}
.wc-help:hover{background:var(--accent,#2BA6F0);color:#fff;}
.wc-help.on{background:var(--accent,#2BA6F0);color:#fff;}
/* mobile-only back button in the window title bar (shown via the 760px query) */
.wc-back{display:none;flex:none;width:38px;height:38px;border-radius:11px;place-items:center;
  color:var(--ink);background:rgba(31,36,51,.06);transition:.14s;margin-inline-end:8px;}
.wc-back:hover,.wc-back:active{background:rgba(31,36,51,.12);}
.wc-back:active{transform:scale(.94);}

/* standardized help sheet */
.help-sheet{position:absolute;inset:0;z-index:25;display:flex;align-items:flex-start;justify-content:center;
  padding:18px;background:rgba(15,17,38,.32);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fadeIn .16s both;}

/* ============================================================
   MODAL / DIALOG base — ported from the original styles.css so confirm,
   logout, reset, delete, onboarding and account dialogs are centered,
   rounded and responsive (material.css/chrome.css are the only loaded layers).
   ============================================================ */
.modal-overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:18px;
  background:rgba(20,22,45,.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fadeIn .25s both;}
.modal{width:520px;max-width:100%;padding:32px;border-radius:24px;text-align:center;
  box-shadow:var(--shadow-win);position:relative;animation:winOpen .22s both;}
.modal-x{position:absolute;top:14px;inset-inline-end:14px;width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;color:var(--ink-faint);background:rgba(31,36,51,.05);transition:.14s;z-index:2;}
.modal-x:hover{background:rgba(226,87,76,.14);color:#E2574C;}
.modal-logo{width:54px;height:54px;border-radius:16px;margin:0 auto 14px;display:block;}
.modal h2{margin:0 0 8px;font-size:21px;}
.modal p{margin:0 auto 22px;max-width:380px;color:var(--ink-soft);font-size:13.5px;line-height:1.7;}
.steps{display:flex;gap:12px;justify-content:center;margin-bottom:24px;}
.step{flex:1;max-width:140px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px;
  border-radius:16px;background:rgba(255,255,255,.5);border:1px solid var(--hairline);}
.step-n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-deep);font-weight:800;margin-bottom:4px;}
.step b{font-size:13.5px;}
.step span{font-size:11.5px;color:var(--ink-faint);}
.modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.modal-actions button{min-width:120px;}

.help-card{width:min(440px,100%);background:#fff;border-radius:18px;padding:18px 18px 16px;
  box-shadow:var(--shadow-win);border:1px solid var(--hairline);animation:winOpen .2s both;}
.help-h{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.help-h b{font-size:15px;color:var(--ink);}
.help-ic{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--accent),var(--accent-deep));}
.help-x{margin-inline-start:auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  color:var(--ink-faint);transition:.14s;flex:none;}
.help-x:hover{background:rgba(31,36,51,.07);color:var(--ink);}
.help-d{margin:0 0 12px;font-size:13px;line-height:1.7;color:var(--ink-soft);}
.help-p{margin:0 0 12px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
.help-p li{position:relative;padding-inline-start:22px;font-size:12.5px;line-height:1.6;color:var(--ink);}
.help-p li::before{content:"";position:absolute;inset-inline-start:6px;top:8px;width:7px;height:7px;border-radius:50%;
  background:var(--accent);}
.help-foot{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-faint);
  padding-top:11px;border-top:1px solid var(--hairline);}
.rz{position:absolute;z-index:5;}
.rz-e{top:0;inset-inline-start:auto;inset-inline-end:0;width:7px;height:100%;cursor:ew-resize;}
.rz-w{top:0;inset-inline-start:0;width:7px;height:100%;cursor:ew-resize;}
.rz-s{bottom:0;left:0;width:100%;height:7px;cursor:ns-resize;}
.rz-se{bottom:0;inset-inline-end:0;width:16px;height:16px;cursor:nwse-resize;}
.rz-sw{bottom:0;inset-inline-start:0;width:16px;height:16px;cursor:nesw-resize;}


/* ===== GENERIC APP ===== */
.app{height:100%;display:flex;flex-direction:column;}
.seg-head{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--hairline);flex-wrap:wrap;}
.seg-head.solo{padding:14px 16px;}
.app-title{display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:700;color:var(--ink);}
.app-title b{font-weight:700;}
.seg{display:flex;background:rgba(31,36,51,.06);border-radius:11px;padding:3px;}
.seg button{display:flex;align-items:center;gap:6px;padding:7px 15px;border-radius:9px;font-size:13px;font-weight:600;color:var(--ink-soft);transition:.16s;}
.seg button.on{background:#fff;color:var(--accent-deep);box-shadow:0 2px 8px -3px rgba(20,24,45,.25);}
.app-search{flex:1;max-width:320px;height:34px;display:flex;align-items:center;gap:8px;padding:0 11px;border-radius:11px;color:var(--ink-faint);}
.app-search input{flex:1;border:none;background:none;outline:none;font-size:13px;color:var(--ink);}
.scroll{overflow-y:auto;}
.pane-full{flex:1;display:flex;flex-direction:column;min-height:0;}
.pane-split{flex:1;display:flex;min-height:0;}

/* chips + list rows */
.chips{display:flex;gap:8px;padding:12px 16px 6px;flex-wrap:wrap;}
.chip{padding:6px 14px;border-radius:20px;font-size:12.5px;font-weight:600;color:var(--ink-soft);background:rgba(31,36,51,.06);transition:.15s;}
.chip-on{background:var(--accent);color:#fff;box-shadow:0 4px 12px -4px var(--accent-glow);}
.list{flex:1;padding:6px 10px 14px;}
.row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:14px;transition:.13s;}
.row:hover{background:rgba(255,255,255,.6);}
.row:hover .row-actions{opacity:1;}
.avatar{border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:700;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.3);}
.row-main{flex:1;min-width:0;}
.row-top{display:flex;align-items:center;gap:7px;}
.row-name{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row-sub{font-size:12px;color:var(--ink-faint);margin-top:2px;}
.dir-ico{display:inline-flex;}
.row-actions{display:flex;gap:4px;opacity:0;transition:.15s;}
.ic-btn{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--ink-soft);transition:.14s;}
.ic-btn:hover{background:rgba(31,36,51,.08);color:var(--ink);}
.ic-btn.danger:hover{background:rgba(226,87,76,.14);color:#E2574C;}
/* compact inline delete sitting beside a row title (calls/web) */
.row-top .row-name{min-width:0;}
.row-del{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  color:var(--ink-faint);transition:.14s;}
.row-del:hover{background:rgba(226,87,76,.14);color:#E2574C;}
.row-del:active{transform:scale(.92);}

/* threads / sms */
.thread-list{width:42%;max-width:300px;min-width:200px;border-inline-end:1px solid var(--hairline);padding:8px;}
.th-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border-radius:14px;transition:.13s;text-align:start;}
.th-item:hover{background:rgba(255,255,255,.55);}
.th-on{background:rgba(217,119,87,.12)!important;}
.th-main{flex:1;min-width:0;}
.th-time{font-size:11px;color:var(--ink-faint);margin-inline-start:auto;}
.th-last{font-size:12.5px;color:var(--ink-faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.badge{min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;}

/* conversation */
.convo{flex:1;display:flex;flex-direction:column;min-width:0;background:linear-gradient(180deg, rgba(245,243,250,.5), rgba(238,236,247,.4));}
.convo-head{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--hairline);background:rgba(255,255,255,.4);}
.convo-head b{font-size:14px;}
.convo-status{font-size:11px;color:#27AE83;}
.convo-actions{display:flex;gap:2px;margin-inline-start:auto;}
/* Chat alignment is PHYSICAL, not direction-relative: sent (w-me/b-me) always on
   the right, received always on the left — in every locale (fa/ar RTL included).
   Forcing the flow LTR makes flex-end == physical right; per-bubble text keeps
   its own direction via unicode-bidi:plaintext so Persian/Arabic still reads RTL. */
.bubbles{flex:1;display:flex;flex-direction:column;gap:8px;padding:16px;direction:ltr;}
.bubble-wrap{display:flex;flex-direction:column;max-width:74%;align-self:flex-start;align-items:flex-start;}
.bubble-wrap.w-me{align-self:flex-end;align-items:flex-end;}
.sender{font-size:11px;font-weight:700;color:var(--accent-deep);margin:0 4px 2px;}
.bubble{max-width:74%;align-self:flex-start;padding:8px 12px 6px;border-radius:16px;background:#fff;
  box-shadow:0 2px 8px -4px rgba(20,24,45,.2);font-size:13.5px;line-height:1.5;display:flex;flex-direction:column;}
.bubble.b-me{align-self:flex-end;background:linear-gradient(150deg,var(--accent),var(--accent-deep));color:#fff;}
.bubble-wrap .bubble{max-width:100%;}
.b-text{word-break:break-word;unicode-bidi:plaintext;text-align:start;}
.b-time{font-size:10px;opacity:.6;margin-top:3px;align-self:flex-end;display:flex;align-items:center;gap:3px;}
.composer{margin:10px;height:46px;display:flex;align-items:center;gap:6px;padding:0 8px 0 14px;border-radius:14px;}
.composer input{flex:1;border:none;background:none;outline:none;font-size:13.5px;color:var(--ink);}
.send-btn{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(150deg,var(--accent),var(--accent-deep));box-shadow:0 4px 12px -5px var(--accent-glow);flex:none;}
.send-btn.ghost{background:none;color:var(--ink-faint);box-shadow:none;}
.send-btn.ghost:hover{background:rgba(31,36,51,.07);color:var(--ink);}

/* voice + media */
.voice{display:flex;align-items:center;gap:9px;padding:8px 13px;border-radius:16px;background:#fff;box-shadow:0 2px 8px -4px rgba(20,24,45,.2);cursor:pointer;}
.voice.v-me{background:linear-gradient(150deg,var(--accent),var(--accent-deep));color:#fff;}
.voice-play{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-deep);flex:none;}
.voice.v-me .voice-play{background:rgba(255,255,255,.25);color:#fff;}
.wave{display:flex;align-items:center;gap:2px;height:24px;}
.wave span{width:2.5px;border-radius:2px;background:currentColor;}
.voice-dur{font-size:11px;opacity:.7;}
.media-dl{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;margin-inline-start:2px;
  color:var(--accent-deep);background:var(--accent-soft);transition:.14s;}
.media-dl:hover{filter:brightness(1.04);transform:translateY(-1px);}
.voice.v-me .media-dl{background:rgba(255,255,255,.25);color:#fff;}
.img-bubble{padding:4px;border-radius:16px;background:#fff;box-shadow:0 2px 8px -4px rgba(20,24,45,.2);}
.img-thumb{position:relative;width:150px;height:110px;border-radius:12px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#9BB4D8,#6E86B0);overflow:hidden;}
.img-dl{position:absolute;bottom:7px;inset-inline-start:7px;width:30px;height:30px;border-radius:10px;flex:none;
  display:grid;place-items:center;color:#fff;background:rgba(16,18,34,.52);
  backdrop-filter:blur(6px) saturate(140%);-webkit-backdrop-filter:blur(6px) saturate(140%);
  border:1px solid rgba(255,255,255,.2);opacity:.9;transition:.16s;}
.img-bubble:hover .img-dl{opacity:1;}
.img-dl:hover{background:rgba(16,18,34,.72);}
.file-bubble{display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:16px;background:#fff;box-shadow:0 2px 8px -4px rgba(20,24,45,.2);font-size:13px;font-weight:500;color:var(--ink);}
.file-bubble.f-me{background:linear-gradient(150deg,var(--accent),var(--accent-deep));color:#fff;}
.empty{margin:auto;color:var(--ink-faint);font-size:13.5px;}

/* messengers rail */
.msg-app{flex-direction:row!important;}
.msg-rail{width:62px;flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0;
  background:rgba(255,255,255,.3);border-inline-end:1px solid var(--hairline);}
.rail-app{position:relative;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;transition:.14s;}
.rail-app:hover{background:rgba(255,255,255,.5);}
.rail-on{background:rgba(217,119,87,.14)!important;box-shadow:inset 2px 0 0 var(--accent);}
.rail-ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;box-shadow:0 4px 10px -4px rgba(20,24,45,.4);}
.rail-dot{position:absolute;top:6px;inset-inline-end:6px;width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid #fff;}
.msg-list{width:34%;max-width:290px;min-width:210px;display:flex;flex-direction:column;border-inline-end:1px solid var(--hairline);background:rgba(255,255,255,.25);}
.msg-list-head{display:flex;align-items:center;gap:9px;padding:13px 14px 6px;font-size:15px;}
.ml-ico{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;}
.msg-list .app-search{flex:none;height:38px;margin:8px 12px;max-width:none;}
.chat-list{flex:1;padding:4px 8px 12px;}

/* placeholder */
.placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:40px;}
.ph-ico{width:78px;height:78px;border-radius:22px;display:grid;place-items:center;color:#fff;box-shadow:0 14px 30px -10px rgba(20,24,45,.5);}
.placeholder h3{margin:0;font-size:18px;}
.placeholder p{margin:0;max-width:320px;color:var(--ink-faint);font-size:13.5px;line-height:1.7;}


/* ===== TOAST ===== */
.toast-stack{position:fixed;top:58px;left:50%;right:auto;transform:translateX(-50%);z-index:320;display:flex;flex-direction:column;align-items:center;gap:10px;}
.toast{display:flex;align-items:flex-start;gap:12px;width:380px;max-width:calc(100vw - 36px);padding:13px 15px;border-radius:16px;box-shadow:var(--shadow-soft);animation:toastIn .4s cubic-bezier(.2,.9,.3,1) both;}
@keyframes toastIn{from{opacity:0;transform:translateX(26px) scale(.96);}to{opacity:1;transform:none;}}
.toast-ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none;}
.toast-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.toast-body b{font-size:13.5px;}
.toast-body span{font-size:12px;color:var(--ink-faint);line-height:1.5;overflow-wrap:anywhere;word-break:break-word;}
.toast-time{font-size:11px;color:var(--ink-faint);align-self:flex-start;}


/* ===== TABLET ===== */
@media (min-width:761px) and (max-width:1024px){
  .desk-area{gap:12px;}
  .dash{width:286px;}
  .desk-grid{column-width:88px;}
  .topbar{gap:10px;}
  .tb-search{max-width:220px;}
}


/* ===== MOBILE (phone environment) ===== */
@media (max-width:760px){
  /* --- top bar: centered logo · device+language on the right · actions on the left --- */
  .topbar{height:50px;gap:4px;padding:0 8px;position:relative;justify-content:flex-start;z-index:150;}
  .tb-search{display:none;}
  /* logo hidden on mobile — the two side clusters use the full width */
  .tb-brand{display:none;}
  /* device pill + switcher → physical right edge (compact) */
  .tb-device{display:flex;}
  .tb-device .tbd-pair{display:none;}        /* drop the "connected" label, keep the model */
  .tb-device .tbd-btn{padding:0 9px;gap:6px;}
  .tb-device .tbd-btn b{display:inline-block;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}  /* show device model — there's room beside the logo */
  /* right cluster: language sits next to the device switcher (physical right) … */
  .tb-right{flex:1;min-width:0;width:auto;margin:0;gap:2px;}
  .tb-right .tb-ic{width:29px;height:29px;}   /* tight + even spacing so the left cluster clears the centred logo */
  .tb-right .tb-lang{padding:0 7px;gap:4px;}  /* flag · code (FA/EN/…) · chevron — clearly a picker */
  /* … the rest (theme · bell · settings · profile · power) pushed to the physical left, as on desktop */
  .tb-right .tb-theme{margin-inline-start:auto;}
  .tb-right .tb-settings{display:inline-flex;}

  .desk-area{padding:14px 12px;top:50px;bottom:0;}
  .dock{display:none;}
  .win{border-radius:0!important;left:0!important;top:50px!important;width:100vw!important;
    height:calc(100dvh - 50px)!important;z-index:120!important;}
  .win-bar{height:52px;}
  .wc{width:30px;height:30px;}
  .rz{display:none;}
  .wc-max{display:none;}
  /* mobile: a clear Back button replaces the minimize/close controls */
  .wc-back{display:grid;}
  .win-ctrls .wc-min,.win-ctrls .wc-close{display:none;}
  /* touch has no hover — keep per-row actions visible so they stay tappable */
  .row-actions{opacity:1;}
  /* mobile: window title lives in the bar — hide the duplicate header title inside the app body */
  .seg-head .app-title{display:none;}
  .seg-head:has(.app-title:only-child){display:none;}
  .seg-head{padding:10px 14px;}
  .pane-split{flex-direction:column;}
  .thread-list,.msg-list{width:100%!important;max-width:none!important;border-inline-end:none;border-bottom:1px solid var(--hairline);max-height:38%;}
  .msg-app{flex-direction:row!important;}
  .msg-rail{width:54px;}
  .msg-list{max-height:none;}
  .toast-stack{top:8px;bottom:auto;left:auto;right:auto;transform:none;inset-inline:10px;}
  .toast{width:auto;animation:toastTop .4s cubic-bezier(.2,.9,.3,1) both;}
  .login-card{padding:28px 22px;}
  .modal{padding:24px 18px;}
  .steps{flex-direction:column;}
  .step{max-width:none;flex-direction:row;justify-content:flex-start;gap:12px;text-align:start;}
  .step-n{margin:0;}
}

/* mobile edge-swipe-back affordance */
.win-swiping{transition:none!important;box-shadow:var(--shadow-win);}
.win-back-hint{position:absolute;top:50%;inset-inline-start:14px;transform:translateY(-50%);z-index:130;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(20,22,40,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;}
@keyframes toastTop{from{opacity:0;transform:translateY(-26px) scale(.96);}to{opacity:1;transform:none;}}


/* ===== PNG app icons ===== */
img.desk-ico,img.dock-ico,img.win-ico,img.rail-ico,img.ml-ico,img.toast-ico,img.notif-ico,img.ph-ico,img.call-via,img.flag,
img.tb-logo,img.login-logo,img.modal-logo{
  background:none!important;box-shadow:none!important;border-radius:0!important;object-fit:contain;display:block;}
img.login-logo,img.modal-logo{filter:drop-shadow(0 10px 22px rgba(217,119,87,.4));}
img.tb-logo{filter:drop-shadow(0 3px 8px rgba(217,119,87,.4));}
img.desk-ico,img.dock-ico{filter:drop-shadow(0 8px 14px rgba(20,24,45,.45));}
img.ph-ico{filter:drop-shadow(0 14px 26px rgba(20,24,45,.45));}
img.win-ico,img.ml-ico,img.toast-ico,img.rail-ico{filter:drop-shadow(0 3px 7px rgba(20,24,45,.3));}


/* ===== call list extras ===== */
.dir-badge{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;flex:none;color:#fff;}
.dir-badge.in{background:#27AE83;}
.dir-badge.out{background:#3B9BF0;}
.dir-badge.missed{background:#E2574C;}
.call-meta{display:flex;align-items:center;gap:6px;}
.dir-type{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;}
.dir-type svg{flex:none;}
.dir-type.in{color:#1c8a64;}
.dir-type.out{color:#2a82d6;}
.dir-type.missed{color:#c43b30;}
.call-dot{color:var(--ink-faint);}
.call-source{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:rgba(31,36,51,.05);color:var(--ink-soft);}
.call-source img.call-via{width:21px;height:21px;border-radius:7px;}
.monitor-note{display:flex;align-items:center;gap:7px;justify-content:center;padding:11px;font-size:12px;
  font-weight:600;color:var(--ink-faint);border-top:1px solid var(--hairline);background:rgba(255,255,255,.28);}
.monitor-note svg{flex:none;}
.call-via{width:18px;height:18px;border-radius:6px;}
.via-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--ink-faint);}
.rec-btn{display:flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:9px;background:var(--accent-soft);color:var(--accent-deep);font-size:11.5px;font-weight:600;transition:.14s;}
.rec-btn:hover{background:var(--accent);color:#fff;}
.rec-btn.playing{background:var(--accent);color:#fff;}
.rec-wave{display:flex;align-items:center;gap:1.5px;height:14px;}
.rec-wave span{width:2px;border-radius:2px;background:currentColor;}


/* ===== install dialog images ===== */
.install-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:6px 0 22px;}
.install-shot{display:flex;flex-direction:column;gap:8px;align-items:center;}
.shot-frame{width:100%;aspect-ratio:9/16;border-radius:16px;border:1px solid var(--hairline);
  background:linear-gradient(160deg,rgba(43,166,240,.1),rgba(255,255,255,.5));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ink-faint);position:relative;overflow:hidden;}
.shot-frame .shot-num{position:absolute;top:8px;inset-inline-start:8px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;}
.shot-frame .shot-i{opacity:.4;}
.shot-cap{font-size:12px;font-weight:600;color:var(--ink-soft);text-align:center;}
@media (max-width:760px){.install-grid{grid-template-columns:repeat(2,1fr);}}

/* flag */
.tb-lang .flag{font-size:15px;line-height:1;}