/* ═════════════════════════════════════════════════════════════════
   MELT — its own design system (melt-app.js)   melt.appmocca.com
   The chat, drawn like Budget and Content: frosted liquid glass floating over
   a drifting aurora — but in the logo's own colours, blue (#2563c9) melting
   into violet (#7c3aed), with pearl for what you read and that gradient for
   what you send. Sora, matte (no gloss), class-only selectors near icons
   (the icon-font rule): nothing here styles a bare span/i inside a container
   that holds a .mi.
   ═════════════════════════════════════════════════════════════════ */

/* ── which chrome shows ─────────────────────────────────────────── */
html:not([data-app="melt"]) #mltShell{ display:none !important; }
html[data-app="melt"] #shell{ display:block; height:auto; min-height:100dvh; overflow:visible; background:transparent; }
html[data-app="melt"] #shell > .nav,
html[data-app="melt"] #shell > .sb,
html[data-app="melt"] #shell > #scrim,
html[data-app="melt"] #shell > .tb,
html[data-app="melt"] #shell > #pageFab,
html[data-app="melt"] #shell > main.body,
html[data-app="melt"] .route-fab{ display:none !important; }
html[data-app="melt"] body{ background:#eceaff; }
html[data-app="melt"][data-theme="dark"] body{ background:#0a0a1f; }

/* ── tokens ─────────────────────────────────────────────────────── */
.mlt{
  --ink:#14123a; --ink2:#454074; --ink3:#6b6699;
  --blue:#2563c9; --blue-l:#5b8def; --violet:#7c3aed; --violet-l:#a78bfa; --pink:#d946ef; --sky:#7fb4ff;
  --glass:rgba(255,255,255,.5); --glass2:rgba(255,255,255,.68); --glass3:rgba(255,255,255,.88); --edge:rgba(255,255,255,.82); --edge2:rgba(20,18,58,.09);
  --shadow:0 20px 50px -26px rgba(60,40,160,.4); --pop:rgba(250,249,255,.97);
  --neg:#c93d5f; --grad:linear-gradient(135deg,#2563c9,#7c3aed); --on-grad:#fff;
  --in-bg:rgba(255,255,255,.78); --bar-h:64px;
  --font:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased;
}
html[data-app="melt"][data-theme="dark"] .mlt{
  --ink:#eeecff; --ink2:#c2bde8; --ink3:#8f89bf;
  --glass:rgba(24,22,68,.5); --glass2:rgba(40,36,100,.66); --glass3:rgba(58,52,132,.86); --edge:rgba(170,160,255,.2); --edge2:rgba(170,160,255,.1);
  --shadow:0 24px 60px -28px rgba(0,0,0,.8); --pop:rgba(16,15,48,.97);
  --neg:#ff9bb0; --in-bg:rgba(40,36,100,.72);
}
:where(.mlt) :where(button){ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:where(.mlt) :where(input, textarea){ font:inherit; color:inherit; }
.mlt button:focus-visible, .mlt input:focus-visible, .mlt textarea:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }
.mlt .mi.mlt-f{ font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24; }
.mlt-glass{ background:var(--glass); border:1px solid var(--edge); box-shadow:var(--shadow); backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5); }

/* the aurora the glass floats over (flat colour blobs — no sheen) */
.mlt-aurora{ position:fixed; inset:-20%; z-index:0; filter:blur(64px) saturate(1.15); opacity:.85; pointer-events:none; }
html[data-app="melt"][data-theme="dark"] .mlt-aurora{ opacity:.5; }
.mlt-aurora > i{ position:absolute; border-radius:50%; animation:mlt-drift 24s ease-in-out infinite alternate; }
.mlt-aurora > i:nth-child(1){ width:55vw; height:55vw; left:2%; top:0; background:radial-gradient(circle, #3b6ff0 0, transparent 65%); }
.mlt-aurora > i:nth-child(2){ width:48vw; height:48vw; right:0; top:12%; background:radial-gradient(circle, #8b5cf6 0, transparent 62%); animation-duration:30s; }
.mlt-aurora > i:nth-child(3){ width:42vw; height:42vw; left:32%; bottom:-10%; background:radial-gradient(circle, #d946ef 0, transparent 60%); opacity:.7; animation-duration:36s; }
@keyframes mlt-drift{ to{ transform:translate(8%, 6%) scale(1.12); } }
@media (prefers-reduced-motion:reduce){ .mlt-aurora > i{ animation:none; } .mlt *{ transition:none !important; animation:none !important; } }

/* signed-out ⇄ signed-in */
#shell.signed-out .mlt-bar, #shell.signed-out .mlt-main, #shell.signed-out .mlt-tabs, #shell.signed-out .mlt-pop, #shell.signed-out .mlt-sheet{ display:none !important; }
#shell.signed-in .mlt-out{ display:none; }

/* ── the bar + "by Mocca" ───────────────────────────────────────── */
.mlt-bar{ position:fixed; top:12px; inset-inline:max(16px, calc((100vw - 1200px) / 2 + 16px)); z-index:30; display:flex; align-items:center; gap:10px; padding:8px 10px 8px 8px; border-radius:999px; }
.mlt-brand{ display:flex; align-items:center; gap:10px; padding:0 8px 0 0; border-radius:999px; text-align:start; flex:none; }
.mlt-dot{ width:40px; height:40px; border-radius:22.4%; object-fit:cover; flex:none; display:block; }
.mlt-dot.is-lg{ width:72px; height:72px; }
.mlt-brand-t{ display:flex; flex-direction:column; line-height:1.05; }
.mlt-brand-t > b{ font:800 18px/1.05 var(--font); letter-spacing:-.02em; }
.mlt-nav{ display:flex; gap:2px; margin-inline-start:6px; padding:4px; border-radius:999px; background:rgba(255,255,255,.26); border:1px solid var(--edge); }
html[data-theme="dark"] .mlt-nav{ background:rgba(0,0,0,.18); }
.mlt-nav .mlt-tab{ position:relative; height:40px; padding:0 14px; border-radius:999px; display:inline-flex; align-items:center; gap:7px; font:600 13.5px/1 var(--font); color:var(--ink2); white-space:nowrap; }
.mlt-nav .mlt-tab > .mi{ font-size:20px; }
.mlt-nav .mlt-tab.on{ background:var(--glass3); color:var(--ink); box-shadow:0 6px 16px -10px rgba(60,40,160,.5); }
.mlt-tab-n{ min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--grad); color:#fff; font:700 10.5px/18px var(--font); text-align:center; font-style:normal; }
.mlt-tab-n[hidden]{ display:none; }
.mlt-sp{ flex:1; }
.mlt-orb{ width:42px; height:42px; border-radius:50% !important; border:1px solid var(--edge) !important; background:var(--glass2) !important; display:grid; place-items:center; flex:none; }
.mlt-orb > .mi{ font-size:20px; }
.mlt-orb:hover{ background:var(--glass3) !important; }
.mlt-orb.is-pri{ background:var(--grad) !important; color:#fff; border-color:transparent !important; }
.mlt-bar .ast-sub-launch{ width:auto; padding:0 14px 0 10px !important; border-radius:999px !important; gap:6px; display:inline-flex; align-items:center; font:600 13px var(--font); }
.mlt-me{ width:42px; height:42px; border-radius:50%; background:#c4b5fd center/cover no-repeat; border:2px solid var(--edge) !important; flex:none; }
.mlt-me.is-sm{ width:40px; height:40px; }

/* "by Mocca" lockup — the art is swapped by theme and script (budget-app.css .mk-by) */
.mlt .mk-by{ color:var(--ink3); }

/* popovers */
.mlt-pop{ position:fixed; z-index:45; border-radius:24px; padding:8px; display:flex; flex-direction:column; gap:2px; background:var(--pop) !important; }
.mlt-pop[hidden]{ display:none; }
.mlt-menu{ top:84px; inset-inline-end:max(16px, calc((100vw - 1200px) / 2 + 16px)); width:min(300px, calc(100vw - 32px)); }
.mlt-pop > button{ display:flex; align-items:center; gap:12px; min-height:44px; padding:8px 10px; border-radius:16px; text-align:start; font:600 14px/1.3 var(--font); }
.mlt-pop > button:hover{ background:var(--glass2); }
.mlt-pop > button > .mi{ font-size:20px; color:var(--violet); flex:none; }
html[data-theme="dark"] .mlt-pop > button > .mi{ color:var(--violet-l); }
.mlt-pop > button.is-danger, .mlt-pop > button.is-danger > .mi{ color:var(--neg); }
.mlt-menu-h{ display:flex; gap:12px; align-items:center; padding:8px 8px 12px; border-bottom:1px solid var(--edge2); margin-bottom:6px; min-width:0; }
.mlt-menu-h b{ display:block; font:800 15px/1.2 var(--font); }
.mlt-menu-h small{ display:block; color:var(--ink3); font:500 12px/1.3 var(--font); overflow:hidden; text-overflow:ellipsis; }
.mlt-menu-l{ padding:6px 10px 4px; font:700 11px var(--font); letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); }
.mlt-langs{ display:flex; gap:4px; padding:0 6px 6px; }
.mlt-langs > button{ flex:1; min-height:38px; border-radius:14px; border:1px solid var(--edge) !important; font:700 12.5px var(--font) !important; color:var(--ink2) !important; }
.mlt-langs > button[aria-pressed="true"]{ background:var(--grad) !important; color:#fff !important; border-color:transparent !important; }

/* ── the page ───────────────────────────────────────────────────── */
.mlt-main{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:calc(var(--bar-h) + 28px) 20px 24px; }
.mlt-none{ padding:22px 18px; color:var(--ink3); font:600 13.5px/1.45 var(--font); text-align:center; }
.mlt-bt{ height:38px; padding:0 16px !important; border-radius:999px !important; border:1px solid var(--edge) !important; background:var(--glass2) !important; font:700 13px var(--font) !important; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.mlt-bt > .mi{ font-size:18px; }
.mlt-bt:hover{ background:var(--glass3) !important; }
.mlt-bt.is-pri{ background:var(--grad) !important; color:#fff !important; border-color:transparent !important; }
.mlt-bt.is-pri:hover{ filter:brightness(1.08); }
.mlt-bt.is-danger{ color:var(--neg) !important; }
.mlt-bt.is-lg{ height:48px; padding:0 24px !important; font-size:14.5px !important; }
.mlt-bt.is-wide{ width:100%; }
.mlt-bt[disabled]{ opacity:.45; cursor:default; filter:none; }

/* avatars: a hue on the logo's blue → violet band, or the contact's photo */
.mlt-av{ width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center; font:700 15px/1 var(--font); color:#fff; background:linear-gradient(135deg, hsl(var(--h,250) 70% 52%), hsl(calc(var(--h,250) + 35) 70% 42%)) center/cover no-repeat; }
.mlt-av.is-xs{ width:30px; height:30px; font-size:11px; }
.mlt-av.is-lg{ width:72px; height:72px; font-size:24px; }
.mlt-av.is-grp{ background:var(--grad); }
.mlt-av.is-grp > .mi{ font-size:22px; }
.mlt-av.is-xs.is-grp > .mi{ font-size:16px; }
.mlt-av-sp{ width:30px; flex:none; }
.mlt-avw{ position:relative; flex:none; display:block; }
.mlt-on-dot{ position:absolute; inset-inline-end:0; bottom:0; width:13px; height:13px; border-radius:50%; background:#34d399; border:2px solid var(--pop); }

/* ── Chats: the list + the thread ───────────────────────────────── */
.mlt-chats{ display:grid; grid-template-columns:minmax(300px, 380px) minmax(0, 1fr); gap:16px; height:calc(100dvh - var(--bar-h) - 28px - 20px - 24px); min-height:420px; }
.mlt-list, .mlt-thread{ border-radius:30px; min-height:0; overflow:hidden; display:flex; flex-direction:column; position:relative; }
.mlt-list-h{ display:flex; align-items:center; justify-content:space-between; padding:18px 18px 10px 22px; }
.mlt-list-h h2{ margin:0; font:800 22px/1.2 var(--font); letter-spacing:-.025em; }
.mlt-srch{ display:flex; align-items:center; gap:8px; margin:0 16px 10px; padding:0 14px; height:42px; border-radius:999px; background:var(--in-bg); border:1px solid var(--edge); color:var(--ink3); }
.mlt-srch > .mi{ font-size:19px; flex:none; }
.mlt-srch input{ flex:1; min-width:0; height:100%; border:0; background:transparent; outline:0; font:500 14px var(--font); color:var(--ink); }
.mlt-srch input::placeholder{ color:var(--ink3); }
.mlt-convs{ flex:1; min-height:0; overflow:auto; padding:2px 10px 12px; display:flex; flex-direction:column; gap:2px; }
.mlt-conv{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:22px; text-align:start; width:100%; }
.mlt-conv:hover{ background:var(--glass2); }
.mlt-conv.on{ background:var(--glass3); box-shadow:0 8px 20px -14px rgba(60,40,160,.55); }
.mlt-conv-m{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.mlt-conv-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.mlt-conv-top > b{ font:700 14.5px/1.25 var(--font); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mlt-conv-top > small{ font:600 11.5px/1 var(--font); color:var(--ink3); flex:none; }
.mlt-conv-pv{ font:500 13px/1.3 var(--font); color:var(--ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.mlt-conv-pv.is-un{ color:var(--ink); font-weight:700; }
.mlt-badge{ min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--grad); color:#fff; font:700 11px/20px var(--font); text-align:center; flex:none; }

.mlt-th{ display:flex; align-items:center; gap:12px; padding:14px 16px 14px 18px; border-bottom:1px solid var(--edge2); flex:none; }
.mlt-th-t{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.mlt-th-t > b{ font:800 16px/1.2 var(--font); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mlt-th-t > small{ font:500 12.5px/1.2 var(--font); color:var(--ink3); }
.mlt-back{ display:none !important; }
.mlt-th-menu{ position:absolute; top:62px; inset-inline-end:14px; width:min(250px, calc(100% - 28px)); z-index:5; }
.mlt-body{ flex:1; min-height:0; overflow:auto; padding:16px 20px 8px; display:flex; flex-direction:column; gap:2px; scroll-behavior:smooth; }
.mlt-day{ align-self:center; margin:14px 0 8px; }
.mlt-day > span{ display:inline-block; padding:5px 12px; border-radius:999px; background:var(--glass2); border:1px solid var(--edge); font:700 11px/1 var(--font); letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); }
.mlt-msg{ display:flex; align-items:flex-end; gap:8px; max-width:78%; margin-top:2px; }
.mlt-msg.is-first{ margin-top:10px; }
.mlt-msg.is-me{ align-self:flex-end; flex-direction:row-reverse; }
.mlt-msg-w{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.mlt-msg.is-me .mlt-msg-w{ align-items:flex-end; }
.mlt-msg-n{ padding:0 12px; font:700 11.5px/1.2 var(--font); color:var(--violet); }
html[data-theme="dark"] .mlt-msg-n{ color:var(--violet-l); }
.mlt-b{ position:relative; display:flex; flex-direction:column; gap:4px; padding:10px 14px 8px; border-radius:22px; background:var(--glass3); border:1px solid var(--edge); font:500 14.5px/1.45 var(--font); overflow-wrap:anywhere; white-space:pre-wrap; }
.mlt-msg:not(.is-me).is-first .mlt-b{ border-start-start-radius:8px; }
.mlt-msg.is-me .mlt-b{ background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 12px 26px -16px rgba(91,50,220,.75); }
.mlt-msg.is-me.is-first .mlt-b{ border-start-end-radius:8px; }
.mlt-b-t{ display:block; }
.mlt-tm{ align-self:flex-end; display:inline-flex; align-items:center; gap:3px; font:600 10.5px/1 var(--font); color:var(--ink3); white-space:nowrap; }
.mlt-tm > .mi{ font-size:15px; }
.mlt-msg.is-me .mlt-tm{ color:rgba(255,255,255,.82); }
.mlt-att{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:14px; background:rgba(255,255,255,.22); font:600 13px/1.2 var(--font); }
.mlt-msg:not(.is-me) .mlt-att{ background:var(--glass); }
.mlt-att > .mi{ font-size:20px; }
.mlt-typing .mlt-b{ flex-direction:row; gap:4px; padding:14px 16px; }
.mlt-typing .mlt-b > i{ width:7px; height:7px; border-radius:50%; background:var(--ink3); animation:mlt-dots 1.2s infinite ease-in-out; }
.mlt-typing .mlt-b > i:nth-child(2){ animation-delay:.15s; } .mlt-typing .mlt-b > i:nth-child(3){ animation-delay:.3s; }
@keyframes mlt-dots{ 0%,60%,100%{ transform:translateY(0); opacity:.45; } 30%{ transform:translateY(-4px); opacity:1; } }

.mlt-comp{ position:relative; display:flex; align-items:flex-end; gap:10px; padding:10px 16px 16px; flex:none; }
.mlt-cin{ flex:1; min-width:0; display:flex; align-items:flex-end; gap:2px; padding:5px 6px; border-radius:26px; background:var(--in-bg); border:1px solid var(--edge); }
.mlt-cin textarea{ flex:1; min-width:0; box-sizing:border-box; min-height:42px; resize:none; border:0; background:transparent; outline:0; padding:10px 6px; font:500 14.5px/1.4 var(--font); color:var(--ink); max-height:140px; }
.mlt-cin textarea::placeholder{ color:var(--ink3); }
.mlt-ib{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:var(--ink3); flex:none; }
.mlt-ib:hover{ background:var(--glass2); color:var(--ink); }
.mlt-ib > .mi{ font-size:22px; }
.mlt-send{ width:48px; height:48px; border-radius:50% !important; background:var(--grad) !important; color:#fff !important; display:grid; place-items:center; flex:none; box-shadow:0 12px 24px -12px rgba(91,50,220,.8); }
.mlt-send > .mi{ font-size:22px; }
[dir="rtl"] .mlt-send > .mi{ transform:scaleX(-1); }
.mlt-emojis{ position:absolute; inset-inline-start:16px; bottom:72px; display:grid; grid-template-columns:repeat(6, 1fr); gap:2px; padding:8px; border-radius:22px; background:var(--pop); border:1px solid var(--edge); box-shadow:var(--shadow); z-index:4; }
.mlt-emojis[hidden]{ display:none; }
.mlt-emojis > button{ width:40px; height:40px; border-radius:12px; font-size:22px; line-height:1; }
.mlt-emojis > button:hover{ background:var(--glass2); }

.mlt-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:32px; text-align:center; }
.mlt-empty-ic{ width:84px; height:84px; border-radius:28px; background:var(--grad); color:#fff; display:grid; place-items:center; box-shadow:0 20px 40px -22px rgba(91,50,220,.8); }
.mlt-empty-ic > .mi{ font-size:40px; }
.mlt-empty h2{ margin:10px 0 0; font:800 22px/1.2 var(--font); letter-spacing:-.025em; }
.mlt-empty p{ margin:0; max-width:320px; color:var(--ink3); font:500 14px/1.5 var(--font); }
.mlt-empty-m{ display:none; }

/* ── People ─────────────────────────────────────────────────────── */
.mlt-people-h{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 6px 16px; flex-wrap:wrap; }
.mlt-people-h h2{ margin:0; font:800 26px/1.2 var(--font); letter-spacing:-.03em; }
.mlt-people-h .mlt-srch{ margin:0; width:min(340px, 100%); }
.mlt-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:14px; }
.mlt-card{ border-radius:28px; padding:22px 16px 18px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.mlt-card > b{ font:700 15px/1.25 var(--font); }

/* ── new-chat sheet ─────────────────────────────────────────────── */
.mlt-sh-bg{ position:fixed; inset:0; z-index:50; background:rgba(10,8,40,.28); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); opacity:0; pointer-events:none; transition:opacity .25s; }
.mlt-sh-bg.open{ opacity:1; pointer-events:auto; }
.mlt-sheet{ position:fixed; z-index:51; top:50%; inset-inline-start:50%; width:min(460px, calc(100vw - 32px)); max-height:min(640px, calc(100dvh - 48px)); display:flex; flex-direction:column; border-radius:32px; background:var(--pop) !important; transform:translate(-50%, -46%) scale(.96); opacity:0; pointer-events:none; transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s; }
[dir="rtl"] .mlt-sheet{ transform:translate(50%, -46%) scale(.96); }
.mlt-sheet.open{ transform:translate(-50%, -50%); opacity:1; pointer-events:auto; }
[dir="rtl"] .mlt-sheet.open{ transform:translate(50%, -50%); }
.mlt-grab{ display:none; width:44px; height:5px; border-radius:3px; background:var(--edge2); margin:10px auto 0; }
.mlt-sh-hd{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:20px 20px 6px 24px; }
.mlt-sh-hd h3{ margin:0; font:800 20px/1.2 var(--font); letter-spacing:-.02em; }
.mlt-sh-vp{ flex:1; min-height:0; overflow:auto; padding:0 16px; }
.mlt-sh-s{ margin:0 8px 12px; color:var(--ink3); font:500 13px/1.45 var(--font); }
.mlt-pick{ display:flex; flex-direction:column; gap:2px; }
.mlt-pk{ display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:20px; text-align:start; width:100%; }
.mlt-pk:hover{ background:var(--glass2); }
.mlt-pk > b{ flex:1; min-width:0; font:600 14.5px/1.25 var(--font); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mlt-ck{ width:26px; height:26px; border-radius:50%; border:2px solid var(--edge2); display:grid; place-items:center; color:transparent; flex:none; }
.mlt-ck > .mi{ font-size:16px; }
.mlt-pk.on .mlt-ck{ background:var(--grad); border-color:transparent; color:#fff; }
.mlt-pk.on{ background:var(--glass2); }
.mlt-fld{ display:flex; flex-direction:column; gap:6px; margin:14px 8px 4px; }
.mlt-fld > span{ font:700 11px var(--font); letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); }
.mlt-fld input{ height:46px; padding:0 16px; border-radius:16px; background:var(--in-bg); border:1px solid var(--edge); font:500 14.5px var(--font); outline:0; }
.mlt-sh-ft{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px 20px 24px; border-top:1px solid var(--edge2); margin-top:10px; }
.mlt-sh-n{ font:600 13px var(--font); color:var(--ink3); }

.mlt-confirm{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px; background:rgba(10,8,40,.34); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.mlt-confirm[hidden]{ display:none; }
.mlt-confirm-card{ width:min(360px, 100%); padding:24px; border-radius:28px; background:var(--pop) !important; }
.mlt-confirm-card h3{ margin:0 0 6px; font:800 18px/1.25 var(--font); }
.mlt-confirm-card p{ margin:0 0 18px; color:var(--ink3); font:500 14px/1.5 var(--font); }
.mlt-confirm-a{ display:flex; justify-content:flex-end; gap:8px; }
.mlt-toast{ position:fixed; z-index:70; bottom:28px; inset-inline-start:50%; transform:translate(-50%, 20px); opacity:0; pointer-events:none; display:flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px; font:600 13.5px var(--font); transition:transform .25s, opacity .25s; background:var(--pop) !important; }
[dir="rtl"] .mlt-toast{ transform:translate(50%, 20px); }
.mlt-toast.show{ opacity:1; transform:translate(-50%, 0); }
[dir="rtl"] .mlt-toast.show{ transform:translate(50%, 0); }
.mlt-toast > .mi{ font-size:19px; color:var(--violet); }

/* ── signed out ─────────────────────────────────────────────────── */
.mlt-out{ position:relative; z-index:1; min-height:100dvh; display:grid; place-items:center; padding:24px; }
.mlt-out-card{ width:min(420px, 100%); border-radius:34px; padding:34px 26px 26px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.mlt-out-card h1{ margin:8px 0 0; font:800 40px/1 var(--font); letter-spacing:-.035em; }
.mlt-out-card .mk-by{ font-size:12px; }
.mlt-out-card p{ margin:6px 0 10px; color:var(--ink2); font:500 15px/1.5 var(--font); }
.mlt-out-card .mlt-langs{ width:100%; padding:10px 0 0; }

/* ── the phone tabs ─────────────────────────────────────────────── */
.mlt-tabs{ display:none; }

@media (max-width:1024px){
  .mlt-nav .mlt-tab{ padding:0 12px; }
  .mlt-nav .mlt-tab > span:not(.mi):not(.mlt-tab-n){ display:none; }
  .mlt-chats{ grid-template-columns:minmax(260px, 320px) minmax(0, 1fr); }
}
/* ≤860: one pane at a time — the list, or the thread with a back arrow */
@media (max-width:860px){
  .mlt-chats{ grid-template-columns:minmax(0, 1fr); }
  .mlt-chats .mlt-thread{ display:none; }
  .mlt-chats.is-thread .mlt-list{ display:none; }
  .mlt-chats.is-thread .mlt-thread{ display:flex; }
  .mlt-back{ display:grid !important; }
  .mlt-empty-d{ display:none; } .mlt-empty-m{ display:block; }
}
@media (max-width:720px) and (orientation:portrait){
  .mlt{ --bar-h:58px; }
  .mlt-bar{ top:10px; inset-inline:10px; padding:6px 8px 6px 6px; }
  .mlt-nav{ display:none; }
  .mlt-bar .ast-sub-launch .ast-sub-lbl{ display:none; }
  .mlt-bar .ast-sub-launch{ width:42px; padding:0 !important; justify-content:center; }
  .mlt-main{ padding:calc(var(--bar-h) + 22px) 12px 96px; }
  .mlt-chats{ height:calc(100dvh - var(--bar-h) - 22px - 96px); min-height:380px; }
  .mlt-chats.is-thread{ height:calc(100dvh - var(--bar-h) - 22px - 14px); }
  .mlt.in-thread .mlt-main{ padding-bottom:14px; }
  .mlt.in-thread .mlt-tabs{ display:none; }
  .mlt-tabs{ display:flex; position:fixed; inset-inline:10px; bottom:10px; z-index:30; justify-content:space-around; padding:6px; border-radius:30px; }
  .mlt-tabs .mlt-tab{ position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px; border-radius:22px; color:var(--ink3); font:600 10.5px/1.15 var(--font); }
  .mlt-tabs .mlt-tab > .mi{ font-size:22px; }
  .mlt-tabs .mlt-tab.on{ color:var(--ink); background:var(--glass3); }
  .mlt-tabs .mlt-tab-n{ position:absolute; top:2px; inset-inline-start:calc(50% + 6px); }
  .mlt-menu{ top:74px; inset-inline-end:10px; }
  .mlt-msg{ max-width:88%; }
  .mlt-body{ padding:12px 12px 6px; }
  .mlt-comp{ padding:8px 10px 12px; }
  .mlt-th{ padding:10px 12px; }
  .mlt-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .mlt-sheet{ top:auto; bottom:0; inset-inline-start:0; width:100%; max-height:88dvh; border-radius:30px 30px 0 0; transform:translateY(105%); }
  [dir="rtl"] .mlt-sheet{ transform:translateY(105%); }
  .mlt-sheet.open, [dir="rtl"] .mlt-sheet.open{ transform:none; }
  .mlt-grab{ display:block; }
}
@media (orientation:landscape) and (max-height:560px){
  .mlt{ --bar-h:54px; }
  .mlt-bar{ top:6px; padding:4px 8px 4px 6px; }
  .mlt-main{ padding:calc(var(--bar-h) + 14px) 16px 12px; }
  .mlt-chats{ height:calc(100dvh - var(--bar-h) - 14px - 12px); min-height:0; }
  .mlt-menu{ top:66px; }
}

/* ── B66 W11 — the hub ───────────────────────────────────────────── */
/* full width, tighter (066-112): the bar spans the window; the hub fills the rest */
.mlt-bar{ inset-inline:12px; }
.mlt-main{ max-width:none; padding:calc(var(--bar-h) + 22px) 12px 12px; }
.mlt-bar-srch{ flex:1 1 auto; min-width:0; max-width:620px; margin:0 0 0 8px; height:42px; border:1.5px solid var(--edge); }
[dir="rtl"] .mlt-bar-srch{ margin:0 8px 0 0; }
.mlt-bar-srch:focus-within{ border-color:var(--violet); }
.mlt-bar > .mlt-sp{ display:none; }
.mlt-bar .mlt-newd{ margin-inline-start:auto; }
.mlt-fab{ display:none; }
.mlt-hub{ --lw:360px; display:grid; grid-template-columns:84px var(--lw) 10px minmax(0, 1fr); gap:0 8px; height:calc(100dvh - var(--bar-h) - 22px - 12px); min-height:420px; }
.mlt-hub > .mlt-div{ margin:0 -4px; }
/* the rail */
.mlt-rail{ display:flex; flex-direction:column; gap:2px; padding:8px 6px; border-radius:26px; overflow:auto; scrollbar-width:none; }
.mlt-ri{ position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 2px; border-radius:16px; font:600 10.5px/1.15 var(--font); color:var(--ink2); text-align:center; }
.mlt-ri > span:not(.mi){ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mlt-ri > .mi{ font-size:22px; }
.mlt-ri:hover{ background:var(--glass2); }
.mlt-ri.on{ background:var(--glass3); color:var(--ink); box-shadow:0 6px 16px -10px rgba(60,40,160,.5); }
.mlt-ri.on > .mi{ color:var(--violet); }
html[data-theme="dark"] .mlt-ri.on > .mi{ color:var(--violet-l); }
.mlt-ri > .mlt-tab-n{ position:absolute; top:4px; inset-inline-end:8px; }
/* the list: tighter rows, groups, things that expand into their conversations */
.mlt-hub .mlt-list, .mlt-hub .mlt-thread{ border-radius:26px; }
.mlt-hub .mlt-list-h{ padding:14px 14px 6px 18px; }
.mlt-hub .mlt-list-h h2{ font-size:19px; }
.mlt-hub .mlt-convs{ padding:2px 6px 10px; gap:1px; }
.mlt-grp{ padding:12px 12px 4px; font:700 10.5px/1 var(--font); letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); }
.mlt-hub .mlt-conv{ position:relative; gap:10px; padding:7px 10px; border-radius:16px; cursor:pointer; min-height:56px; }
.mlt-hub .mlt-conv .mlt-av{ width:40px; height:40px; font-size:14px; }
.mlt-conv.is-sm{ min-height:46px; }
.mlt-av.is-sm, .mlt-hub .mlt-conv.is-sm .mlt-av{ width:32px; height:32px; font-size:12px; }
.mlt-av.is-sm > .mi{ font-size:17px; }
.mlt-av.is-mail{ background:linear-gradient(135deg,#64748b,#475569); }
.mlt-av.is-ai{ background:linear-gradient(135deg,#7c3aed,#d946ef); }
.mlt-av.is-ent{ background:var(--glass3); color:var(--violet); border:1px solid var(--edge); }
html[data-theme="dark"] .mlt-av.is-ent{ color:var(--violet-l); }
.mlt-conv-top > b{ display:flex; align-items:center; gap:6px; min-width:0; }
.mlt-src{ display:inline-flex; align-items:center; gap:3px; height:18px; padding:0 6px 0 3px; border-radius:999px; background:var(--glass2); border:1px solid var(--edge); font:700 9.5px/1 var(--font); color:var(--ink2); flex:none; }
.mlt-src > img{ width:12px; height:12px; border-radius:50%; object-fit:cover; }
.mlt-th-t > small .mlt-src{ margin-inline-end:6px; vertical-align:middle; }
.mlt-conv-more{ position:absolute; inset-inline-end:8px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--glass3) !important; border:1px solid var(--edge) !important; opacity:0; transition:opacity .12s; }
.mlt-conv-more > .mi{ font-size:19px; }
.mlt-conv:hover .mlt-conv-more, .mlt-conv:focus-within .mlt-conv-more{ opacity:1; }
@media (hover:none){ .mlt-conv-more{ opacity:.85; } }
/* B67 R67-018 · R67-011 — on touch the ⋯ is always there: the row keeps its space so the date and the subject don't run under it */
@media (hover:none){ .mlt-hub .mlt-conv:has(.mlt-conv-more){ padding-inline-end:48px; } }
.mlt-row-menu{ position:fixed; width:240px; }
.mlt-ent-h{ display:flex; align-items:center; gap:8px; width:100%; min-height:52px; padding:6px 8px; border-radius:16px; text-align:start; }
.mlt-ent-h:hover{ background:var(--glass2); }
.mlt-ent-h > .mi{ font-size:20px; color:var(--ink3); transition:transform .18s; flex:none; }
.mlt-ent.open > .mlt-ent-h > .mi{ transform:rotate(90deg); }
[dir="rtl"] .mlt-ent-h > .mi{ transform:scaleX(-1); } [dir="rtl"] .mlt-ent.open > .mlt-ent-h > .mi{ transform:rotate(90deg); }
.mlt-ent-h .mlt-conv-m > b{ font:700 14px/1.25 var(--font); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mlt-ent-h .mlt-conv-m > small{ font:500 12px/1.3 var(--font); color:var(--ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mlt-ent-in{ display:flex; flex-direction:column; gap:1px; padding-inline-start:26px; padding-bottom:4px; }
.mlt-none.is-sm{ padding:8px 12px; text-align:start; font-size:12.5px; }
.mlt-dm .mlt-conv-m > b{ font:700 13px var(--font); color:var(--violet); }
html[data-theme="dark"] .mlt-dm .mlt-conv-m > b{ color:var(--violet-l); }
/* the divider */
.mlt-div{ cursor:col-resize; display:flex; align-items:center; justify-content:center; touch-action:none; border-radius:8px; }
.mlt-div::after{ content:""; width:4px; height:46px; border-radius:4px; background:var(--edge2); transition:background .15s; }
.mlt-div:hover::after, .mlt-div.on::after, .mlt-div:focus-visible::after{ background:var(--violet); }
/* the thread: search in the conversation (114) */
.mlt-orb.on{ background:var(--glass3) !important; border-color:var(--violet) !important; }
.mlt-orb.is-sm{ width:34px; height:34px; } .mlt-orb.is-sm > .mi{ font-size:18px; }
.mlt-sqrow{ display:flex; align-items:center; gap:6px; padding:8px 14px; border-bottom:1px solid var(--edge2); flex:none; }
.mlt-sqrow .mlt-srch{ flex:1; margin:0; height:38px; border:1.5px solid var(--violet); }
.mlt-sq-n{ font:600 12px var(--font); color:var(--ink3); white-space:nowrap; }
.mlt-msg.is-hit .mlt-b{ outline:2px solid rgba(217,70,239,.45); outline-offset:1px; }
.mlt-msg.is-cur .mlt-b{ outline:2px solid #d946ef; }
/* cards in the thread — a message from the person who sent it (R2-21) */
.mlt-msg.is-card{ max-width:min(460px, 88%); }
.mlt-card2{ width:min(440px, 72vw); border-radius:20px; background:var(--glass3); border:1px solid var(--edge); overflow:hidden; box-shadow:0 14px 30px -22px rgba(60,40,160,.5); }
.mlt-ch{ display:flex; align-items:center; gap:10px; padding:12px 14px; }
.mlt-ch-ic{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff; flex:none; }
.mlt-ch-ic > .mi{ font-size:20px; }
.mlt-ch-t{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.mlt-ch-t > b{ font:700 14px/1.25 var(--font); }
.mlt-ch-t > small{ font:500 12px/1.3 var(--font); color:var(--ink3); }
.mlt-cb{ padding:0 14px 12px; display:flex; flex-direction:column; gap:8px; font:500 13px/1.45 var(--font); color:var(--ink2); }
.mlt-ca{ display:flex; gap:8px; padding:0 14px 14px; }
.mlt-ca > .mlt-bt{ flex:1; height:38px; padding:0 10px !important; }
.mlt-cdone{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-top:1px solid var(--edge2); font:600 13px var(--font); color:#16a34a; }
.mlt-cdone.is-no{ color:var(--ink3); }
.mlt-cdone > .mi{ font-size:19px; }
.mlt-cposters{ display:flex; gap:8px; padding:0 14px 12px; overflow:hidden; }
.mlt-cposters > span{ width:64px; height:88px; border-radius:10px; flex:none; background:linear-gradient(160deg, hsl(var(--h) 60% 30%), hsl(calc(var(--h) + 40) 70% 55%)); }
.mlt-poll{ position:relative; display:flex; align-items:center; gap:8px; width:100%; height:40px; padding:0 12px !important; border-radius:12px !important; border:1px solid var(--edge2) !important; background:var(--glass2) !important; overflow:hidden; text-align:start; }
.mlt-poll > i{ position:absolute; inset-block:0; inset-inline-start:0; background:rgba(124,58,237,.16); transition:width .4s; }
.mlt-poll > span{ position:relative; flex:1; min-width:0; font:600 13px var(--font); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mlt-poll > em{ position:relative; font:700 12px var(--font); font-style:normal; color:var(--ink3); }
.mlt-poll.on{ border-color:var(--violet) !important; }
.mlt-poll[disabled]{ cursor:default; }
/* an email */
.mlt-mail{ border-radius:20px; padding:16px 18px; margin:8px 0; }
.mlt-mail-h{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.mlt-mail-h b{ display:block; font:700 14px var(--font); } .mlt-mail-h small{ display:block; font:500 12px var(--font); color:var(--ink3); }
.mlt-mail h3{ margin:0 0 8px; font:800 16px/1.3 var(--font); }
.mlt-mail p{ margin:0 0 8px; font:500 14px/1.55 var(--font); color:var(--ink2); }
/* More on phones: a grid of the other sections (R2-25) */
.mlt-more-bg{ position:fixed; inset:0; z-index:44; background:rgba(20,18,58,.18); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.mlt-more{ position:fixed; z-index:45; inset-inline:10px; bottom:86px; display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; padding:12px; border-radius:26px; background:var(--pop) !important; }
.mlt-more[hidden], .mlt-more-bg[hidden]{ display:none; }
.mlt-more > button{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px; border-radius:18px; background:var(--glass2) !important; border:1px solid var(--edge) !important; font:700 12.5px var(--font); }
.mlt-more > button > .mi{ width:46px; height:46px; border-radius:15px; display:grid; place-items:center; background:var(--glass3); color:var(--violet); font-size:23px; }
@media (max-width:1024px){
  .mlt-hub{ grid-template-columns:76px var(--lw) 10px minmax(0, 1fr); --lw:300px; }
  .mlt-bar .mlt-newd{ display:none; }
  .mlt-fab{ display:grid; place-items:center; position:absolute; z-index:3; inset-inline-end:14px; bottom:14px; width:56px; height:56px; border-radius:20px !important; background:var(--grad) !important; color:#fff !important; box-shadow:0 16px 32px -12px rgba(91,50,220,.75); }
  .mlt-fab > .mi{ font-size:26px; }
  .mlt-hub .mlt-convs{ padding-bottom:80px; }
}
/* ≤860: the list fills the page and a conversation slides over it */
@media (max-width:860px){
  .mlt-hub{ grid-template-columns:76px minmax(0, 1fr); }
  .mlt-hub > .mlt-div{ display:none; }
  .mlt-hub .mlt-thread{ display:flex !important; position:fixed; z-index:34; top:calc(var(--bar-h) + 18px); bottom:10px; inset-inline:10px; transform:translateX(106%); transition:transform .3s cubic-bezier(.2,.8,.2,1); background:var(--pop); }
  [dir="rtl"] .mlt-hub .mlt-thread{ transform:translateX(-106%); }
  .mlt-hub.is-thread .mlt-thread, [dir="rtl"] .mlt-hub.is-thread .mlt-thread{ transform:none; }
  .mlt-hub .mlt-list{ display:flex !important; }
}
@media (max-width:860px) and (min-height:561px){
  .mlt-hub{ grid-template-columns:minmax(0, 1fr); height:calc(100dvh - var(--bar-h) - 22px - 92px); }
  .mlt-hub > .mlt-rail{ display:none; }
  .mlt-main{ padding-bottom:92px; }
  .mlt-tabs{ display:flex; position:fixed; inset-inline:10px; bottom:10px; z-index:30; justify-content:space-around; padding:6px; border-radius:30px; }
  .mlt-tabs .mlt-tab{ position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px; border-radius:22px; color:var(--ink3); font:600 10.5px/1.15 var(--font); }
  .mlt-tabs .mlt-tab > .mi{ font-size:22px; }
  .mlt-tabs .mlt-tab.on{ color:var(--ink); background:var(--glass3); }
  .mlt-tabs .mlt-tab-n{ position:absolute; top:2px; inset-inline-start:calc(50% + 6px); }
  .mlt.in-thread .mlt-tabs{ display:none; }
  .mlt-hub .mlt-thread{ top:calc(var(--bar-h) + 18px); }
}
@media (max-width:720px) and (orientation:portrait){
  .mlt-bar-srch{ margin:0; height:40px; }
  .mlt-bar-srch input{ font-size:13.5px; }
  .mlt-brand-t{ display:none; }
  .mlt-main{ padding:calc(var(--bar-h) + 18px) 10px 92px; }
  .mlt-hub .mlt-thread{ bottom:8px; inset-inline:8px; }
}
@media (orientation:landscape) and (max-height:560px){
  .mlt-hub{ height:calc(100dvh - var(--bar-h) - 14px - 12px); grid-template-columns:68px minmax(0, 1fr); }
  .mlt-ri{ padding:6px 2px; font-size:9.5px; } .mlt-ri > .mi{ font-size:20px; }
  .mlt-fab{ width:50px; height:50px; }
  .mlt-hub .mlt-thread{ top:calc(var(--bar-h) + 12px); bottom:6px; }
}

/* B67 R67-014 — in Arabic a Latin name truncated at its START ("…s-Cola Company"): the box takes its direction from
   its own text, so Latin truncates at its end and Arabic still at its start; alignment stays on the right. */
html[dir="rtl"] .mlt-conv-pv, html[dir="rtl"] .mlt-conv-top b, html[dir="rtl"] .mlt-conv-m > b{ unicode-bidi:plaintext; text-align:right; }

/* B67 R67-053 — the hub's 420px floor made it taller than a phone held sideways: the rail's last items (Viajes, Hogar, Eventos)
   sat below the screen. Held sideways, the hub fits the screen and its rail and lists scroll inside it. */
@media (orientation:landscape) and (max-height:560px){ .mlt-hub{ min-height:0; } }

/* B67 R21 (R67-084) — closed / parked layers leave the Tab order (as R67-031 · 034): each only slid or faded away, so Tab
   walked into its controls unseen. Hidden once its own exit motion ends, visible at once when it opens. */
.mlt-sheet{ visibility:hidden; transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s, visibility 0s linear .28s; }
.mlt-sheet.open{ visibility:visible; transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s, visibility 0s; }
@media (max-width:860px){
  .mlt-hub .mlt-thread{ visibility:hidden; transition:transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s; }
  .mlt-hub.is-thread .mlt-thread{ visibility:visible; transition:transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s; }
}