/* Guy HQ — Lloyd's look: lavender glass, violet gradient accent, RTL. (Design pass 2026-09 —
   the liquid-bead menu / chrome chat language, applied app-wide; see "LLOYD LOOK" at the end.) */

:root {
  --bg: #EFEBFC;
  --surface: #ffffff;
  --surface-2: #F3F0FB;
  --text: #1D1733;
  --text-2: #625B7E;
  --text-3: #9A94B3;
  --hairline: rgba(74, 56, 150, 0.10);
  --hairline-strong: rgba(74, 56, 150, 0.18);
  --accent: #7C5CFF;
  --accent-soft: #EEE9FF;
  --on-accent: #ffffff;
  --green: #1f9d55;
  --green-soft: #e5f5ec;
  --amber: #b8860b;
  --amber-soft: #fdf3d8;
  --red: #d64545;
  --red-soft: #fdecec;
  --sheet-shadow: 0 -10px 44px rgba(46, 26, 96, 0.18);
  --card-shadow: 0 1px 2px rgba(46, 26, 96, 0.04), 0 8px 26px rgba(90, 70, 160, 0.08);
  --r: 20px;
  --r-sm: 14px;
  --r-lg: 26px;
  --biz: #5B7CFA;
  --health: #1f9d55;
  --home: #e08a1e;
  --life: #17a2b8;
}
:root { color-scheme: light; }
/* Dark tokens: applied by system preference UNLESS the user forced light,
   and always when the user forces dark ([data-theme="dark"]). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F0B1A;
    --surface: #1B1629;
    --surface-2: #241D36;
    --text: #F3F0FF;
    --text-2: #A59CC8;
    --text-3: #6F6790;
    --hairline: rgba(255, 255, 255, 0.08);
    --hairline-strong: rgba(255, 255, 255, 0.16);
    --accent: #A78BFA;
    --accent-soft: #2A2145;
    --on-accent: #ffffff;
    --green: #4cc47f;
    --green-soft: #12291c;
    --amber: #e0b34c;
    --amber-soft: #2e2610;
    --red: #ef6a6a;
    --red-soft: #341717;
    --sheet-shadow: 0 -10px 44px rgba(0, 0, 0, 0.55);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.35);
    --biz: #93A8FF;
    --health: #4cc47f;
    --home: #e0b34c;
    --life: #46c6db;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F0B1A;
  --surface: #1B1629;
  --surface-2: #241D36;
  --text: #F3F0FF;
  --text-2: #A59CC8;
  --text-3: #6F6790;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --accent: #A78BFA;
  --accent-soft: #2A2145;
  --on-accent: #ffffff;
  --green: #4cc47f;
  --green-soft: #12291c;
  --amber: #e0b34c;
  --amber-soft: #2e2610;
  --red: #ef6a6a;
  --red-soft: #341717;
  --sheet-shadow: 0 -10px 44px rgba(0, 0, 0, 0.55);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.35);
  --biz: #93A8FF;
  --health: #4cc47f;
  --home: #e0b34c;
  --life: #46c6db;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { height: 100%; }
body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  overscroll-behavior-y: none;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
button:active { transform: scale(0.97); }
a { color: var(--accent); text-decoration: none; }
.num { font-variant-numeric: tabular-nums; }

#app {
  max-width: 560px;
  margin-inline: auto;
  /* generous clearance so the fixed tab bar never rides over the last items */
  padding: max(14px, env(safe-area-inset-top)) 18px calc(104px + env(safe-area-inset-bottom));
  min-height: 100%;
  overscroll-behavior-y: contain;
}
.view { animation: pop-in 0.18s ease; }
@keyframes pop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Header ---------- */
.hq-head { margin: 8px 0 16px; display: flex; align-items: flex-start; gap: 10px; }
.hq-head .grow { flex: 1; min-width: 0; }
.hq-greet { font-size: 24px; font-weight: 650; letter-spacing: -0.02em; }
.hq-date { font-size: 13.5px; color: var(--text-2); margin-top: 2px; }
.hq-mood { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 13px; color: var(--text-2); }
.hq-mood-face { font-size: 18px; line-height: 1; flex: none; }
.hq-mood-note { flex: 1; min-width: 0; }
.hq-streak { flex: none; font-size: 12px; font-weight: 650; color: #e0a52b; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2); background: var(--surface); border: 1px solid var(--hairline);
  font-size: 18px; flex: none;
}
.page-title { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin: 8px 0 4px; }

/* ---------- Segments ---------- */
.seg { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; gap: 2px; margin: 8px 0 14px; }
.seg button { padding: 6px 16px; border-radius: 999px; font-size: 13.5px; color: var(--text-2); font-weight: 550; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(10,14,22,0.10); }

/* ---------- Cards & rows ---------- */
.card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r); padding: 14px 16px; margin-bottom: 12px; }
.card.accent { background: var(--accent-soft); border-color: transparent; }
.eyebrow { font-size: 12px; font-weight: 600; color: var(--text-3); letter-spacing: 0.04em; margin: 18px 2px 8px; display: flex; align-items: baseline; gap: 6px; }
.eyebrow .hint { font-weight: 400; color: var(--text-3); }
.rows { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r); overflow: hidden; margin-bottom: 12px; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 54px; }
.row + .row { border-top: 1px solid var(--hairline); }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.row .sub { font-size: 12.5px; color: var(--text-2); margin-top: 1px; }
.sheet .sub { font-size: 12.5px; color: var(--text-2); } /* helper lines in a sheet, outside a row */
.row.muted .title { color: var(--text-3); text-decoration: line-through; }
.row .time { font-size: 14px; font-weight: 600; min-width: 44px; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--hairline-strong); }
.dot.red { background: var(--red); }
.dot.accent { background: var(--accent); }

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.pill.green { background: var(--green-soft); color: var(--green); }
.pill.amber { background: var(--amber-soft); color: var(--amber); }
.pill.red { background: var(--red-soft); color: var(--red); }
.pill.plain { border: 1px solid var(--hairline); color: var(--text-2); }

.chip { font-size: 12px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--text-2); white-space: nowrap; }

/* check circle */
.ck {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--hairline-strong);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; font-size: 15px; transition: all 0.15s ease;
}
.ck.done, .ck:active { border-color: var(--green); color: var(--green); background: var(--green-soft); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 6px; }
.stat { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 10px 6px; text-align: center; }
.stat b { display: block; font-size: 20px; font-weight: 650; }
.stat span { font-size: 11px; color: var(--text-2); }
.stat.warn b { color: var(--amber); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; padding: 9px 18px; font-size: 14.5px; font-weight: 570; border: 1px solid var(--hairline-strong); color: var(--text); background: var(--surface); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn.danger { color: var(--red); border-color: var(--red); }
.btn.small { padding: 6px 13px; font-size: 13px; }
.btn[disabled] { opacity: 0.55; pointer-events: none; }
.btn .spin { width: 14px; height: 14px; border: 2px solid currentColor; border-inline-start-color: transparent; border-radius: 50%; animation: rot 0.7s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }

.fab {
  position: fixed;
  bottom: calc(84px + env(safe-area-inset-bottom));
  inset-inline-end: max(20px, calc(50% - 260px));
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  box-shadow: 0 6px 18px rgba(52, 120, 246, 0.4); z-index: 30;
}
.fab:active { transform: scale(0.94); }

/* ---------- Tab bar ---------- */
#tabbar {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 40;
  display: flex; justify-content: center; gap: 2px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
#tabbar a {
  flex: 1; max-width: 104px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 0 2px; color: var(--text-3); border-radius: 12px; font-size: 10.5px; font-weight: 550;
}
#tabbar a i { font-size: 22px; }
#tabbar a.on { color: var(--accent); }
#tabbar a .bdg { position: absolute; display: none; }

/* ---------- Chat ---------- */
.chat-wrap { display: flex; flex-direction: column; min-height: calc(100dvh - 210px); padding-bottom: 76px; }
.chat-thread { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; }
.day-sep { align-self: center; font-size: 11.5px; color: var(--text-3); background: var(--surface-2); border-radius: 999px; padding: 2px 12px; margin: 10px 0 4px; }
.bub { max-width: 82%; padding: 9px 14px; border-radius: 18px; font-size: 15px; white-space: pre-wrap; word-break: break-word; }
.bub.user { align-self: flex-start; background: var(--accent); color: var(--on-accent); border-end-start-radius: 6px; }
.bub.bot { align-self: flex-end; background: var(--surface); border: 1px solid var(--hairline); border-end-end-radius: 6px; }
.bub.friend { align-self: flex-end; background: var(--surface-2, var(--surface)); border: 1px solid var(--hairline-strong); border-end-end-radius: 6px; }
.bub.media { padding: 5px; max-width: 78%; }
.bub.media .t { padding: 0 6px 2px; }
.chat-media-img { display: block; max-width: 240px; width: 100%; border-radius: 13px; cursor: pointer; }
.chat-media-vid { display: block; max-width: 260px; width: 100%; border-radius: 13px; }
.chat-media-aud { max-width: 230px; height: 40px; }
.chat-transcript { font-size: 12.5px; opacity: 0.8; padding: 5px 8px 2px; white-space: pre-wrap; }
.chat-cap { font-size: 14px; padding: 5px 8px 2px; white-space: pre-wrap; }
.chat-file { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; color: inherit; text-decoration: none; font-size: 14.5px; }
.chat-file i { font-size: 20px; }
.chat-quote { border-inline-start: 3px solid currentColor; padding: 3px 8px; margin-bottom: 5px; font-size: 12.5px; opacity: 0.85; background: rgba(127, 127, 127, 0.14); border-radius: 7px; }
.chat-quote b { display: block; font-size: 11px; opacity: 0.9; }
.msg-deleted { opacity: 0.75; font-style: italic; display: inline-flex; align-items: center; gap: 4px; }
.bub.deleted { opacity: 0.75; }
.msg-edited { font-size: 10px; opacity: 0.6; }
.compose-hint { display: flex; align-items: center; gap: 9px; padding: 8px 16px; border-top: 1px solid var(--hairline); background: var(--surface); font-size: 13px; }
.compose-hint > i { color: var(--accent); font-size: 18px; flex: none; }
.compose-hint .grow { min-width: 0; }
.compose-hint b { display: block; color: var(--accent); font-size: 11.5px; }
.compose-hint span { display: block; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.gallery-cell { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; cursor: pointer; background: var(--surface-2, var(--surface)); }
.bub .t { display: block; font-size: 10.5px; opacity: 0.65; margin-top: 3px; }
.typing { display: inline-flex; gap: 4px; padding: 12px 16px; }
.typing[hidden] { display: none; }
.rcpt { opacity: 0.55; font-size: 11px; margin-inline-start: 2px; }
.rcpt.seen { opacity: 1; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); animation: ty 1s infinite; font-size: 0; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ty { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.composer {
  position: fixed; bottom: calc(62px + env(safe-area-inset-bottom)); inset-inline: 0; z-index: 35;
  display: flex; justify-content: center; padding: 8px 14px;
}
.composer .inner {
  width: 100%; max-width: 524px; display: flex; align-items: flex-end; gap: 8px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 26px;
  padding: 7px 8px 7px 8px; box-shadow: 0 4px 24px rgba(10, 14, 22, 0.10);
}
.composer textarea {
  flex: 1; border: none; outline: none; background: none; resize: none;
  max-height: 120px; padding: 7px 8px; font-size: 16px; line-height: 1.4;
}
.mic-btn, .send-btn {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.send-btn { background: var(--accent); color: var(--on-accent); }
.send-btn i { transform: scaleX(-1); }
.mic-btn { background: var(--surface-2); color: var(--text-2); }
.mic-btn.rec { background: var(--red); color: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(214, 69, 69, 0.45); } 100% { box-shadow: 0 0 0 14px rgba(214, 69, 69, 0); } }
.rec-hint { position: fixed; bottom: calc(122px + env(safe-area-inset-bottom)); inset-inline: 0; text-align: center; font-size: 13px; color: var(--red); z-index: 36; }

/* ---------- Sheets ---------- */
.backdrop { position: fixed; inset: 0; background: rgba(8, 10, 14, 0.44); z-index: 60; animation: fade 0.16s ease; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 61;
  max-width: 560px; margin-inline: auto;
  background: var(--surface); border-radius: 22px 22px 0 0;
  box-shadow: var(--sheet-shadow);
  padding: 8px 20px calc(20px + env(safe-area-inset-bottom));
  animation: rise 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
  max-height: 88dvh; overflow-y: auto;
}
@keyframes rise { from { transform: translateY(40px); opacity: 0.5; } }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--hairline-strong); margin: 4px auto 14px; }
.sheet h3 { font-size: 18px; font-weight: 650; margin-bottom: 14px; }
.field { margin-bottom: 13px; }
.field label { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 5px; }
.field input, .field textarea, .field select {
  width: 100%; border: 1px solid var(--hairline-strong); border-radius: var(--r-sm);
  background: var(--bg); padding: 11px 12px; font-size: 16px; outline: none;
}
.field input:focus, .field textarea:focus { border-color: var(--accent); }
.chips3 { display: flex; gap: 8px; }
.chips3 button { flex: 1; padding: 9px 0; border-radius: var(--r-sm); border: 1px solid var(--hairline-strong); font-size: 14px; color: var(--text-2); }
.chips3 button.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.sheet .actions { display: flex; gap: 10px; margin-top: 18px; }
.sheet .actions .btn { flex: 1; padding: 12px; }

/* ---------- Routines (שגרות) quick-add templates ---------- */
.routine-templates { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.routine-templates::-webkit-scrollbar { display: none; }
.routine-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--text); font-size: 14px; white-space: nowrap; }
.routine-chip:active { background: var(--accent-soft); border-color: var(--accent); }
.rc-emoji { font-size: 17px; line-height: 1; }
.chip-done { flex: none; font-size: 12.5px; font-weight: 650; color: var(--accent); background: var(--accent-soft); padding: 5px 11px; border-radius: 999px; }

/* ---------- Toast / skeleton / empty ---------- */
#toast-root { position: fixed; top: max(14px, env(safe-area-inset-top)); inset-inline: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 95; pointer-events: none; } /* above .duo-full (80) */
.toast { background: var(--text); color: var(--bg); font-size: 13.5px; padding: 9px 18px; border-radius: 999px; animation: pop-in 0.2s ease; max-width: 88%; }
.skel { border-radius: var(--r); background: var(--surface); border: 1px solid var(--hairline); height: 58px; margin-bottom: 10px; position: relative; overflow: hidden; }
.skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--surface-2) 50%, transparent 70%); animation: shimmer 1.3s infinite; }
@keyframes shimmer { from { transform: translateX(60%); } to { transform: translateX(-60%); } }
.empty { text-align: center; color: var(--text-2); padding: 42px 20px; font-size: 15px; }
.empty i { display: block; font-size: 34px; color: var(--text-3); margin-bottom: 10px; }

/* ---------- Login ---------- */
.login { min-height: 90dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 24px; }
.login img { width: 84px; height: 84px; border-radius: 22px; }
.login h1 { font-size: 26px; letter-spacing: -0.02em; }
.login p { color: var(--text-2); max-width: 300px; font-size: 15px; }
.login code { background: var(--surface-2); border-radius: 8px; padding: 2px 8px; font-size: 14px; }

/* ---------- PIN login ---------- */
.pin-form { display: flex; flex-direction: column; gap: 10px; width: min(260px, 80vw); }
.pin-input {
  width: 100%; text-align: center; font-size: 26px; letter-spacing: 0.35em;
  padding: 12px 8px; border: 1.5px solid var(--hairline-strong); border-radius: var(--r-sm);
  background: var(--surface); outline: none;
}
.pin-input:focus { border-color: var(--accent); }
.pin-err { min-height: 18px; font-size: 13px; color: var(--red); }
.login-alt { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); }
.login-alt a { display: inline-flex; align-items: center; gap: 5px; justify-content: center; }

/* ---------- home record FAB + rec bar + Lloyd reply sheet ---------- */
.fab-mic {
  position: fixed;
  bottom: calc(84px + env(safe-area-inset-bottom));
  inset-inline-end: 18px;
  width: 58px; height: 58px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--accent); color: #fff;
  font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 45%, transparent);
  z-index: 40;
  transition: transform 0.15s ease;
}
.fab-mic:active { transform: scale(0.94); }
.fab-mic.rec { background: var(--red); animation: pulse 1.2s infinite; box-shadow: 0 6px 20px color-mix(in srgb, var(--red) 45%, transparent); }

.rec-bar {
  position: fixed;
  bottom: calc(84px + env(safe-area-inset-bottom));
  inset-inline-start: 18px;
  inset-inline-end: 88px;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  z-index: 41;
}
.rec-bar .grow { flex: 1; min-width: 0; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: pulse 1.2s infinite; flex: none; }
.rec-bar .spin { width: 16px; height: 16px; border: 2px solid var(--accent); border-inline-start-color: transparent; border-radius: 50%; animation: rot 0.7s linear infinite; flex: none; }

.lloyd-reply-head { display: flex; align-items: center; gap: 6px; font-weight: 650; color: var(--accent); margin-bottom: 8px; }
.lloyd-reply { white-space: pre-wrap; font-size: 15px; line-height: 1.55; max-height: 50vh; overflow-y: auto; }

/* ==================== DESKTOP (≥900px) — persistent side-nav shell ====================
   Everything in these desktop blocks is gated on min-width:900px; the phone layout above
   is left byte-identical. The bottom tab bar becomes a labeled left rail (RTL → the rail
   lives on the inline-start / right edge), views sit in a comfortable centered column, and
   the dashboard fans its priority feed into a two-column masonry. Chat has its own block
   further down (kept next to the .chat-view styles it overrides). */
@media (min-width: 900px) {
  /* Reserve the rail's width only while it's actually shown (it's [hidden] on login /
     onboarding), so those full-screen states stay centered in the viewport. */
  body:has(#tabbar:not([hidden])) { padding-inline-start: 248px; }

  #app { max-width: 1080px; padding: 30px 34px 52px; }
  .view { max-width: 800px; margin-inline: auto; }   /* comfortable reading column for lists/forms */
  .view.dash { max-width: none; }                    /* the dashboard fills the board for its 2-col grid */

  /* ---- side rail (was the bottom tab bar) ---- */
  #tabbar {
    inset-inline-start: 0; inset-inline-end: auto; top: 0; bottom: 0;
    width: 248px;
    flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 3px;
    padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: none; border-inline-end: 1px solid var(--hairline);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    overflow-y: auto;
  }
  /* Brand = logo mark + wordmark. It stays a pseudo-element on purpose: a real element
     before the tabs would shift the #tabbar a:nth-child() indices the product tour targets.
     RTL → the icon is pinned to the start (right) edge, the wordmark flows after it. */
  #tabbar::before {
    content: "לויד";
    display: flex; align-items: center;
    height: 42px; margin: 4px 6px 16px; padding-inline-start: 48px;
    background: url('/icon.svg') right center / 34px 34px no-repeat;
    font-size: 21px; font-weight: 750; letter-spacing: -0.02em; color: var(--text);
  }
  #tabbar a {
    flex: none; width: 100%; max-width: none;
    flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px;
    padding: 11px 14px; border-radius: 12px;
    font-size: 14.5px; font-weight: 560; color: var(--text-2);
  }
  #tabbar a i { font-size: 22px; width: 26px; text-align: center; flex: none; }
  #tabbar a.on { background: var(--accent-soft); color: var(--accent); font-weight: 650; }

  /* ---- content: a touch more air ---- */
  .row { padding: 13px 18px; }
  .card { padding: 16px 20px; }
  .hq-greet { font-size: 27px; }
  .page-title { font-size: 25px; }
  /* keep toasts centered over the content, not the rail */
  body:has(#tabbar:not([hidden])) #toast-root { inset-inline-start: 248px; }

  /* the dashboard ("בית") lays out its own two columns — see HOME at the end of this file */

  /* ---- floating add / mic buttons: bottom trailing corner (RTL → left) ---- */
  .fab, .fab-mic { bottom: 32px; inset-inline-end: 32px; }
  .rec-bar {
    bottom: 36px; inset-inline-start: auto; inset-inline-end: 104px;
    width: min(520px, calc(100vw - 420px)); max-width: 520px; margin-inline: 0;
  }

  /* ---- bottom sheets → centered floating cards ---- */
  .sheet {
    bottom: auto; top: 50%; transform: translateY(-50%);
    max-width: 520px; border-radius: 22px;
    padding: 12px 24px 24px;
    max-height: 86dvh;
    animation: sheet-pop 0.18s ease;
  }
  .sheet .grab { display: none; }

  /* ---- mouse + keyboard ergonomics ---- */
  #tabbar a, .row.tap, .card.tap, .quick, .tile, .ring-item, .goal-card, .note-card,
  .conv-ava, .switch, .seg button, .chips3 button, .tag-chip { cursor: pointer; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
}

/* Hover feedback — only where a real pointer hovers, so it never sticks on touch. */
@media (hover: hover) and (min-width: 900px) {
  #tabbar a:hover { background: var(--surface-2); color: var(--text); }
  #tabbar a.on:hover { background: var(--accent-soft); color: var(--accent); }
  .quick:hover, .tile:hover, .ring-item:hover, .card.tap:hover, .row.tap:hover,
  .goal-card:hover, .note-card:hover { border-color: var(--hairline-strong); background: var(--surface-2); }
  .icon-btn:hover { background: var(--surface-2); color: var(--text); }
  .btn:hover { filter: brightness(0.97); }
  .btn.primary:hover { filter: brightness(1.06); }
  .send-btn:hover, .mic-btn:hover { filter: brightness(1.05); }
  .fab:hover, .fab-mic:hover { transform: translateY(-1px); }
}
@keyframes sheet-pop { from { opacity: 0; transform: translateY(calc(-50% + 14px)); } to { opacity: 1; transform: translateY(-50%); } }

/* ---------- keyboard open (mobile): give the screen back to the content ---------- */
@media (max-width: 899px) {
  body.kb-open #tabbar { display: none; }
  body.kb-open .composer { bottom: 6px; }
  body.kb-open .rec-hint { bottom: 66px; }
  body.kb-open .fab-mic, body.kb-open .fab { display: none; }
  body.kb-open .chat-wrap { padding-bottom: 66px; }
}

/* ---------- note document editor ---------- */
.doc-top { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.doc-saved { font-size: 12px; color: var(--text-3); }
/* a newer version of the open note arrived from elsewhere while you were typing */
.doc-live { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 10px 8px 12px; border-radius: 14px; font-size: 13.5px; color: var(--text); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.doc-live[hidden] { display: none; }
.doc-live > i { flex: none; font-size: 17px; color: var(--accent); }
.doc-title {
  width: 100%; border: none; outline: none; background: none;
  font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
  padding: 4px 2px 10px; color: var(--text);
}
.doc-title::placeholder { color: var(--text-3); }
.doc-toolbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 4px; padding: 6px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--hairline); border-radius: 14px; margin-bottom: 10px;
}
.doc-toolbar button {
  width: 40px; height: 36px; border-radius: 10px; font-size: 17px;
  display: flex; align-items: center; justify-content: center; color: var(--text-2);
}
.doc-toolbar button:active { background: var(--surface-2); }
.doc-body {
  min-height: 55vh; outline: none;
  font-size: 16.5px; line-height: 1.65; padding: 2px 2px 40vh;
  caret-color: var(--accent);
}
.doc-body h2 { font-size: 19px; margin: 14px 0 6px; letter-spacing: -0.01em; }
.doc-body p { margin: 0 0 6px; }
.doc-body ul, .doc-body ol { padding-inline-start: 22px; margin: 6px 0; }
.doc-body li { margin-bottom: 3px; }
.doc-body img { max-width: 100%; border-radius: 14px; margin: 10px 0; display: block; }
.doc-body b, .doc-body strong { font-weight: 700; }
.note-card { padding: 13px 16px; }

/* ---------- recordings + cost ---------- */
.rec-cta { display: flex; gap: 10px; margin-bottom: 8px; }
.rec-cta .btn { flex: 1; padding: 12px; }
/* a meeting: ask about it + search its transcript */
.rec-ask, .rec-find { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.rec-ask .field, .rec-find .field { flex: 1; min-width: 0; margin: 0; }
.rec-ask .btn { flex: none; }
.rec-hits { flex: none; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.rec-qa { margin-bottom: 12px; }
.rec-qa-q { font-weight: 650; font-size: 14.5px; margin-bottom: 6px; }
.rec-qa-a { font-size: 14.5px; line-height: 1.55; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--hairline); }
.rec-qa-wait { color: var(--text-2); }
/* a timestamp in a long meeting's transcript — quiet, not a seam */
.rec-time { display: inline-block; direction: ltr; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--text-2); padding: 0 6px; border-radius: 6px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.rec-transcript mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.rec-transcript mark.on { background: color-mix(in srgb, var(--accent) 55%, transparent); }
/* upload / transcription progress (the upload bar + a recording on its way) */
.rec-progress { height: 6px; margin-top: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rec-progress span { display: block; height: 100%; min-width: 4px; border-radius: 999px; background: var(--accent); transition: width 0.3s ease; }
.rec-note-legal { font-size: 12px; color: var(--text-3); margin-bottom: 16px; line-height: 1.5; }
.rec-ul { margin: 4px 0 10px; padding-inline-start: 20px; }
.rec-ul li { margin-bottom: 5px; font-size: 14.5px; line-height: 1.5; }
.rec-transcript { margin-bottom: 10px; }
.rec-transcript summary { cursor: pointer; color: var(--accent); font-size: 14px; padding: 6px 0; }
/* meetings: all / folders / people, a meeting's people + folder, the details sheet, the email line */
.rec-seg { margin: 0 0 12px; }
.rec-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; font-size: 12.5px; color: var(--text-2); min-width: 0; }
.rec-meta span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.rec-meta i { font-size: 13px; color: var(--text-3); flex: none; }
.rec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rec-chips:empty { display: none; }
.rec-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  font-size: 13px; padding: 5px 11px; border-radius: 999px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--hairline); text-decoration: none; cursor: pointer;
}
.rec-chip i { font-size: 14px; color: var(--text-2); }
.rec-chip.add { background: transparent; color: var(--accent); border-style: dashed; border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.rec-chip.add i { color: var(--accent); }
.rec-chip .x { display: inline-flex; padding: 0; margin-inline-start: 1px; color: var(--text-3); background: none; border: 0; cursor: pointer; }
.rec-chip .x i { font-size: 13px; }
.rec-sugg { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.rec-sugg:empty { display: none; }
.rec-sugg-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; padding: 9px 10px;
  border-radius: 10px; font-size: 14.5px; color: var(--text); background: var(--surface-2);
}
.rec-sugg-row i { color: var(--text-2); font-size: 16px; }
.rec-sugg-row.add { color: var(--accent); background: var(--accent-soft); }
.rec-sugg-row.add i { color: var(--accent); }
.rec-brief { position: relative; }
.rec-brief textarea { padding-inline-end: 50px; }
.rec-brief .icon-btn { position: absolute; inset-inline-end: 6px; bottom: 6px; width: 36px; height: 36px; }
.rec-brief .icon-btn.rec { color: #fff; background: var(--red); border-color: var(--red); animation: pulse 1.2s infinite; }
.rec-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; min-width: 0; }
.rec-head .title { font-size: 17px; font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-ava { width: 38px; height: 38px; font-size: 16px; }
.rec-person { margin-bottom: 12px; }
.rec-tip { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin: 12px 4px 0; }
.rec-add-row { color: var(--accent); cursor: pointer; }
.rec-add-row .title { color: var(--accent); }
.rec-brief-view { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--text-2); line-height: 1.5; margin: 0 2px 12px; white-space: pre-wrap; }
.rec-brief-view i { color: var(--accent); font-size: 16px; margin-top: 2px; flex: none; }
.rec-focus { margin-bottom: 12px; }
.rec-focus .rec-ul { margin: 0; }
.rec-link-sugg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 6px; font-size: 13px; color: var(--text-2); }
.rec-mailed { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin: 4px 2px 0; word-break: break-word; }
.rec-mailed i { font-size: 15px; margin-top: 1px; flex: none; }
.rec-mailed.bad { color: var(--red); }
.rec-guide-link { color: var(--accent); text-decoration: none; font-weight: 600; white-space: nowrap; }
/* "מה חדש" — the guide after an update (web/whatsnew.js), Apple's what's-new layout: icon rows + one button */
.wn { text-align: center; }
.wn-hero {
  width: 54px; height: 54px; margin: 2px auto 10px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #9b6bff));
}
.wn-title { margin: 0 0 4px; font-size: 21px; }
.wn-sub { font-size: 13.5px; color: var(--text-2); margin-bottom: 16px; }
.wn-list { display: flex; flex-direction: column; gap: 16px; text-align: start; margin-bottom: 6px; }
.wn-item { display: flex; gap: 12px; align-items: flex-start; }
.wn-ic {
  flex: none; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--accent); background: var(--accent-soft);
}
.wn-item .grow { flex: 1; min-width: 0; }
.wn-h { font-weight: 650; font-size: 15px; margin-bottom: 2px; }
.wn-t { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.wn-act {
  margin-top: 7px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft); border: 0; cursor: pointer;
}
.wn-act.on { color: var(--green); background: var(--green-soft); }
.wn-act .spin { width: 14px; height: 14px; }
.cost-bar { height: 6px; border-radius: 3px; background: var(--surface-2); margin-top: 6px; overflow: hidden; max-width: 180px; }
.cost-bar span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

/* ---------- dashboard quick actions ---------- */
.quick-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 14px; }
.quick {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 4px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--hairline);
  color: var(--text); font-size: 12px; font-weight: 550; text-decoration: none;
}
.quick i { font-size: 21px; color: var(--accent); }
.quick:active { transform: scale(0.96); background: var(--surface-2); }

/* ---------- note editor: dictation mic active ---------- */
.doc-toolbar button.rec { color: var(--red); animation: pulse 1.2s infinite; }

/* ---------- rich chat content (Lloyd's markdown) ---------- */
.bub.rich { max-width: 94%; width: 100%; }
.bub .rt-h { font-weight: 680; letter-spacing: -0.01em; margin: 10px 0 5px; line-height: 1.3; }
.bub h3.rt-h { font-size: 17px; } .bub h4.rt-h { font-size: 15.5px; } .bub h5.rt-h { font-size: 14.5px; color: var(--text-2); }
.bub .rt-h:first-child { margin-top: 0; }
.bub .rt-p { margin: 0 0 8px; }
.bub .rt-p:last-child { margin-bottom: 0; }
.bub .rt-ul, .bub .rt-ol { margin: 4px 0 9px; padding-inline-start: 20px; }
.bub .rt-ul li, .bub .rt-ol li { margin-bottom: 4px; line-height: 1.5; }
.bub .rt-ul { list-style: none; padding-inline-start: 6px; }
.bub .rt-ul li { position: relative; padding-inline-start: 16px; }
.bub .rt-ul li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.bub code { background: var(--surface-2); border-radius: 6px; padding: 1px 5px; font-size: 0.9em; font-family: ui-monospace, monospace; }
.bub .rt-pre { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; overflow-x: auto; font-family: ui-monospace, monospace; font-size: 12.5px; margin: 6px 0 9px; }
.bub hr { border: none; border-top: 1px solid var(--hairline); margin: 12px 0; }
.bub .rt-callout {
  background: var(--accent-soft); border-inline-start: 3px solid var(--accent);
  border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-size: 14.5px; line-height: 1.55;
}
.bub .rt-table-wrap { overflow-x: auto; margin: 8px 0 10px; }
.bub .rt-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.bub .rt-table th, .bub .rt-table td { border: 1px solid var(--hairline); padding: 7px 10px; text-align: start; }
.bub .rt-table th { background: var(--surface-2); font-weight: 650; }
.bub a { text-decoration: underline; }
/* mini bar chart */
.rt-chart { margin: 10px 0; }
.rt-chart-title { font-size: 13px; font-weight: 650; color: var(--text-2); margin-bottom: 8px; }
.rt-bars { display: flex; flex-direction: column; gap: 7px; }
.rt-bar-row { display: flex; align-items: center; gap: 8px; }
.rt-bar-label { flex: 0 0 74px; font-size: 12.5px; color: var(--text-2); text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-bar-track { flex: 1; height: 20px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.rt-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #8ab4ff)); border-radius: 6px; min-width: 3px; }
.rt-bar-val { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; }

/* ==================== CHAT — viewport-pinned, futuristic ==================== */
.chat-view {
  /* Full-screen conversation ABOVE the tab bar (z 45 > tabbar 40) so nothing
     overlaps it. Height is 100dvh; the visualViewport JS keeps it exact when the
     keyboard opens (top + height only — never a transform, which caused floating). */
  position: fixed; top: 0; inset-inline: 0; z-index: 45;
  height: 100dvh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    radial-gradient(90% 50% at 0% 100%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%),
    var(--bg);
  overflow: hidden;
}

.chat-head {
  display: flex; align-items: center; gap: 11px;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  flex: none;
}
.lloyd-ava {
  position: relative; width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 21px; color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #9b6bff));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 40%, transparent);
}
.lloyd-ava .dot { position: absolute; bottom: 1px; inset-inline-end: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--green); border: 2px solid var(--surface); }
.lloyd-name { font-size: 18px; font-weight: 680; letter-spacing: -0.01em; }
.lloyd-status { font-size: 12.5px; color: var(--text-2); margin-top: 1px; }

.chat-view .chat-thread {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 9px;
  padding: 16px 14px 8px;
  -webkit-overflow-scrolling: touch;
}

.composer-in {
  flex: none;
  display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.composer-in textarea {
  flex: 1; border: 1px solid var(--hairline-strong); outline: none; resize: none;
  background: var(--surface); border-radius: 22px;
  max-height: 120px; padding: 10px 14px; font-size: 16px; line-height: 1.4;
  transition: border-color 0.15s ease;
}
.composer-in textarea:focus { border-color: var(--accent); }
.composer-in .send-btn {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #9b6bff));
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* futuristic bubbles */
.chat-view .bub.bot {
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 3px rgba(10, 14, 22, 0.05);
}
.chat-view .bub.user {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #7d5cff));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* in-chat recording bar (cancel / send) sits above the composer (and the chat-view) */
.chat-rec {
  position: fixed; z-index: 46;
  inset-inline: 12px; bottom: calc(74px + env(safe-area-inset-bottom));
}

@media (min-width: 900px) {
  /* Chat sits inside the content area (clear of the rail). The scroller spans the WHOLE area, so
     its scrollbar sits at the screen edge instead of floating mid-screen; the messages, header and
     composer share one wide centered column (--chat-col) via --chat-pad. */
  .chat-view {
    inset-inline-start: 248px; padding-bottom: 0;
    --chat-col: 1160px; --chat-pad: max(28px, calc((100% - var(--chat-col)) / 2));
  }
  .chat-view .chat-thread { width: 100%; }
  .chat-view .bub { max-width: min(70%, 720px); }
  .chat-view .bub.rich { max-width: min(88%, 860px); }
  .composer-in {
    width: 100%; max-width: 840px; margin-inline: auto;
    border: 1px solid var(--hairline); border-radius: 24px;
    margin-bottom: 18px; padding: 8px 10px;
    box-shadow: 0 6px 24px rgba(10, 14, 22, 0.08);
  }
  .chat-rec {
    inset-inline-start: 248px; inset-inline-end: 0;
    width: min(820px, calc(100vw - 300px)); margin-inline: auto; bottom: 96px;
  }
}

body.chat-open { overflow: hidden; }
body.chat-open #app { overflow: hidden; height: 100%; }

/* ---------- chat thread switcher + archive tags ---------- */
.chat-title-btn { background: none; border: none; padding: 0; cursor: pointer; min-width: 0; }
.chat-title-btn .lloyd-name { display: flex; align-items: center; gap: 4px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 2px; }
.tag-chip {
  font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); cursor: pointer; white-space: nowrap;
}
.tag-chip:active { opacity: 0.7; }

/* ---------- conversations list ---------- */
.conv-ava {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #9b6bff));
}
.conv-ava.quick { background: linear-gradient(135deg, #f0a92b, #e5731f); }

/* ---------- calendar ---------- */
.cal-head { display: flex; align-items: center; gap: 6px; margin: 6px 0 12px; }
.cal-title { font-size: 18px; font-weight: 680; letter-spacing: -0.01em; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.cal-dow span { text-align: center; font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 8px; }
.cal-cell {
  aspect-ratio: 1 / 1; border: 1px solid transparent; border-radius: 12px;
  background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 6px 0 0; cursor: pointer; position: relative; min-height: 0;
}
.cal-cell.out { opacity: 0.4; }
.cal-cell.today { background: var(--accent-soft); }
.cal-cell.sel { border-color: var(--accent); }
.cal-num { font-size: 13.5px; font-weight: 550; }
.cal-cell.today .cal-num { color: var(--accent); font-weight: 700; }
.cal-dots { display: flex; gap: 2px; margin-top: 3px; flex-wrap: wrap; justify-content: center; max-width: 90%; }
.cal-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.cal-dot.m { background: var(--accent); }
.cal-dot.g { background: #4285f4; }
.cal-dot.r { background: var(--amber); }
.gcal-hint { font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 5px; margin: -4px 0 8px; }
.gcal-hint i { color: #4285f4; }

/* ---------- goals ---------- */
.goal-bar, .goal-col { }
.goal-bar { height: 8px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.goal-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #4ccf8e)); border-radius: 5px; transition: width 0.3s ease; }
.goal-col { margin-bottom: 16px; }
.goal-col-head { font-size: 13px; font-weight: 650; color: var(--text-2); margin: 0 2px 7px; display: flex; align-items: center; gap: 6px; }
.goal-col-head .num { color: var(--text-3); font-weight: 500; }
.goal-card:active { transform: scale(0.99); }

/* ---------- goals v2: journey ---------- */
.ring { display: block; margin: 0 auto; }
.ring-bg { fill: none; stroke: var(--surface-2); stroke-width: 9; }
.ring-fg { fill: none; stroke: url(#g); stroke: var(--accent); stroke-width: 9; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 0.6s cubic-bezier(0.3,0.9,0.3,1); }
.ring-txt { fill: var(--text); font-size: 22px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.goal-hero { text-align: center; padding: 8px 0 16px; }
.goal-hero-title { font-size: 21px; font-weight: 720; letter-spacing: -0.02em; margin-top: 10px; }
.goal-why { font-size: 14px; color: var(--text-2); max-width: 300px; margin: 6px auto 0; line-height: 1.5; }
.goal-empty { text-align: center; padding: 30px 20px; }
.goal-empty-ring { opacity: 0.5; }

.coach { display: flex; align-items: center; gap: 8px; border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; font-size: 14.5px; line-height: 1.5; }
.coach.behind { background: var(--red-soft); color: var(--red); }
.coach.good { background: var(--green-soft); color: var(--green); }
.coach i { font-size: 18px; flex: none; }
/* Lloyd's research on a goal: offer · researching… (you can leave) · the plan is ready */
.goal-research { display: flex; align-items: center; gap: 11px; padding: 12px 14px; }
.goal-research .grow { min-width: 0; }
.goal-research .gr-t { font-size: 14.5px; font-weight: 620; }
.goal-research .sub { margin-top: 2px; white-space: normal; }
.goal-research .gr-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.goal-research .gr-ic i { font-size: 19px; }
.goal-research.running { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.goal-research.running .spin { flex: none; width: 22px; height: 22px; margin: 0 7px; border: 2.5px solid var(--accent); border-inline-start-color: transparent; border-radius: 50%; animation: rot 0.7s linear infinite; }
.goal-research.ready { border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.goal-research.ready .gr-ic { color: var(--green); background: var(--green-soft); }
.gr-sources { display: flex; flex-direction: column; gap: 7px; }
.gr-sources a { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-sources a i { flex: none; font-size: 14px; }

.focus-card {
  background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 40%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 18px; padding: 16px 18px; margin-bottom: 16px; text-align: center;
}
.focus-label { font-size: 12.5px; font-weight: 650; color: var(--accent); display: flex; align-items: center; justify-content: center; gap: 5px; }
.focus-title { font-size: 18px; font-weight: 680; margin: 8px 0 4px; line-height: 1.35; }
.focus-due { font-size: 13px; color: var(--text-2); }
.focus-btn { width: 100%; padding: 13px; margin-top: 12px; font-size: 15.5px; }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: cfall 2.4s cubic-bezier(0.2,0.6,0.4,1) forwards; }
@keyframes cfall { to { transform: translateY(105vh) rotate(540deg); opacity: 0.9; } }

/* ---------- goal building overlay ---------- */
.goal-building { position: fixed; inset: 0; z-index: 62; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.spin.big { width: 34px; height: 34px; border: 3px solid var(--accent); border-inline-start-color: transparent; border-radius: 50%; animation: rot 0.7s linear infinite; }

/* ==================== Wave 1 — refined dashboard ==================== */
/* Hero "now" — the single next thing, one action. */
.hero {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 18px 18px 16px; margin-bottom: 14px;
  box-shadow: var(--card-shadow);
}
.hero .eyebrow { margin: 0 0 7px; color: var(--accent); letter-spacing: 0; font-size: 12.5px; }
.hero .live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; animation: pulseDot 1.7s ease-in-out infinite; }
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.hero-title { font-size: 22px; font-weight: 720; letter-spacing: -0.02em; line-height: 1.22; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 11px; color: var(--text-2); font-size: 13.5px; }
.hero-meta span { display: inline-flex; align-items: center; gap: 5px; }
.hero-meta .num { font-weight: 600; }
.hero-meta i { font-size: 16px; opacity: 0.85; }
.hero-act { width: 100%; margin-top: 14px; padding: 13px; font-size: 15.5px; }
.hero-foot { font-size: 12.5px; color: var(--text-3); margin-top: 11px; }

/* Goal rings strip — Apple-Fitness feel. */
.rings-strip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 4px; margin-bottom: 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.rings-strip::-webkit-scrollbar { display: none; }
.ring-item {
  flex: none; width: 108px; scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r);
  padding: 13px 8px 11px; text-align: center; cursor: pointer; transition: transform 0.12s ease;
}
.ring-item:active { transform: scale(0.96); }
.ring-item .rt { font-size: 12.5px; font-weight: 600; margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ring-item .rs { font-size: 11px; margin-top: 2px; color: var(--text-3); }

/* Daily spark (idea) — Wave-3-ready, hidden until there's an idea. */
.spark {
  background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 45%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 14px;
}
.spark-head { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--accent); }
.spark-title { font-size: 16px; font-weight: 650; margin: 7px 0 4px; line-height: 1.35; }
.spark-body { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.spark-acts { display: flex; gap: 8px; margin-top: 13px; }
.spark-acts .btn { flex: 1; }
/* the stuck guard, answered in the app: six reasons in a 2-up grid, then Lloyd's follow-up in the same place */
.stuck-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.stuck-acts .btn { padding: 9px 6px; font-size: 14px; }
.stuck-msg { grid-column: 1 / -1; white-space: pre-wrap; line-height: 1.5; font-size: 14.5px; margin: 2px 0 4px; }
.stuck-write { grid-column: 1 / -1; display: flex; gap: 6px; }
.stuck-write input { flex: 1; min-width: 0; border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); background: var(--glass, var(--bg)); padding: 10px 12px; font-size: 16px; outline: none; color: inherit; }
.stuck-write input:focus { border-color: var(--accent); }
.nd-item.tap { cursor: pointer; }
.nd-item .nd-go { color: var(--text-3); align-self: center; }

/* Activation checklist ("בוא נתחיל") — first-actions for a new user */
.activation { padding: 14px 16px 6px; }
.act-head { display: flex; align-items: flex-start; gap: 8px; }
.act-title { display: flex; align-items: center; gap: 6px; font-size: 15.5px; font-weight: 700; }
.act-title .ti { color: var(--accent); }
.act-prog { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.act-prog .num { font-weight: 700; color: var(--text); }
.act-x { width: 30px; height: 30px; flex: none; margin-inline-start: auto; }
.act-track { height: 5px; border-radius: 999px; background: var(--surface-2); margin: 11px 0 2px; overflow: hidden; }
.act-track-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.45s ease; }
.act-step { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--hairline); }
.act-step:first-child { border-top: 0; }
.act-step.tap { cursor: pointer; }
.act-step.tap:active { opacity: 0.6; }
.act-ck { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); font-size: 16px; }
.act-step.done .act-ck { background: var(--green-soft); color: var(--green); }
.act-step.done .act-st { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--hairline-strong); }
.act-step.locked { opacity: 0.55; }
.act-st { font-size: 14.5px; font-weight: 570; }
.act-ss { font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.act-go { flex: none; }

/* First-run product tour (#7) — coach marks */
.tour-layer { position: fixed; inset: 0; z-index: 300; }
.tour-hole { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(8, 10, 14, 0.66); transition: left 0.28s ease, top 0.28s ease, width 0.28s ease, height 0.28s ease; pointer-events: none; }
.tour-pop { position: fixed; z-index: 301; width: min(300px, calc(100vw - 28px)); background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 14px 16px; box-shadow: 0 18px 44px rgba(6, 10, 20, 0.34); }
.tour-title { font-size: 16px; font-weight: 700; }
.tour-text { font-size: 13.5px; color: var(--text-2); line-height: 1.5; margin-top: 4px; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; gap: 10px; }
.tour-dots { display: flex; gap: 5px; }
.tour-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hairline-strong); }
.tour-dot.on { background: var(--accent); }
.tour-btns { display: flex; gap: 8px; }

/* iOS-style settings controls */
.switch { position: relative; width: 46px; height: 28px; border-radius: 999px; background: var(--hairline-strong); flex: none; transition: background 0.2s ease; cursor: pointer; }
.switch.on { background: var(--green); }
.switch::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease; }
.switch.on::after { transform: translateX(-18px); }
.row .val { color: var(--text-2); font-size: 14px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex: none; }
.row .val i { font-size: 17px; color: var(--text-3); }
.row.tap { cursor: pointer; }
.row.tap:active { background: var(--surface-2); }

/* Domain tiles — Wave-2-ready. */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 8px; }
.tile { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r); padding: 13px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: transform 0.12s ease; }
.tile:active { transform: scale(0.98); }
.tile-top { display: flex; align-items: center; justify-content: space-between; }
.tile-ic { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 19px; color: #fff; }
.tile-n { font-size: 20px; font-weight: 700; }
.tile-l { font-size: 13px; font-weight: 600; }
.tile-s { font-size: 12px; color: var(--text-2); }

/* ---------- Gamification: tier chip ---------- */
.tier-chip { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; color: var(--tc, #8a94a6); background: color-mix(in srgb, var(--tc, #8a94a6) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tc, #8a94a6) 30%, transparent); vertical-align: middle; }
.tier-chip i { font-size: 13px; }

/* ---------- Passive Lloyd — suggestions my OWN Lloyd noticed in a friend chat (private to me) ---------- */
.passive-card { border: 1.5px solid color-mix(in srgb, var(--accent) 55%, var(--hairline)); }
.passive-head { display: flex; align-items: center; gap: 6px; font-weight: 660; font-size: 14.5px; }
.passive-head[data-thread] { cursor: pointer; }
.passive-head .ti { margin-inline-start: auto; color: var(--text-3); font-size: 16px; }
.passive-private { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); margin: 3px 0 6px; }
.passive-private .ti { font-size: 13px; }
.passive-quote { white-space: normal; font-style: italic; }
.passive-strip {
  flex: none; display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 16px; border: none; border-bottom: 1px solid var(--hairline);
  background: var(--accent-soft); color: var(--accent);
  font: inherit; font-size: 13px; font-weight: 600; text-align: start; cursor: pointer;
}
.passive-strip[hidden] { display: none; }
.passive-strip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.passive-strip .ti { flex: none; font-size: 15px; }

/* ==================== LLOYD LOOK (2026-09) — liquid-bead menu + chrome chat ====================
   Guy approved this look from the design canvas. Tokens first (light, then dark under the
   same two selectors the rest of this file uses), then the bar, Lloyd's home, and the chat. */
:root {
  --lh-bg1: #F3EEFD; --lh-bg2: #EDEBFB; --lh-bg3: #E2E7FB;
  --lh-glow1: #F6D6F1; --lh-glow2: #DDD6FF;
  --lh-ink: #1D1733; --lh-ink2: #6B6485; --lh-ink3: #8E88A8;
  --lh-glass: rgba(255, 255, 255, 0.8); --lh-glass-b: rgba(255, 255, 255, 0.98);
  --lh-shadow: rgba(90, 70, 160, 0.11);
  --lh-violet: #7C5CFF;
  --lh-grad: linear-gradient(135deg, #8E6BFF, #5A7CFF);
  /* my own bubbles: ONE solid violet — white text on the old gradient was ~3.4:1 and Guy found it
     hard to read; this is ~5.2:1 (dark: ~6:1) */
  --lh-user: #6C4EF5;
  --lh-hl: linear-gradient(90deg, #7C5CFF, #B45EEA);
  --bb-f1: #241E30; --bb-f2: #15111C; --bb-stroke: rgba(255, 255, 255, 0.13); --bb-shadow: rgba(46, 26, 96, 0.32);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lh-bg1: #171126; --lh-bg2: #100C1C; --lh-bg3: #0C0A15;
    --lh-glow1: rgba(176, 96, 230, 0.32); --lh-glow2: rgba(92, 104, 255, 0.24);
    --lh-ink: #F3F0FF; --lh-ink2: #A59CC8; --lh-ink3: #8F87AE;
    --lh-glass: rgba(255, 255, 255, 0.065); --lh-glass-b: rgba(255, 255, 255, 0.11);
    --lh-shadow: rgba(0, 0, 0, 0.35);
    --lh-violet: #B9A4FF;
    --lh-user: #6246E0;
    --lh-hl: linear-gradient(90deg, #B9A4FF, #F0A6F7);
    --bb-f1: #2A2338; --bb-f2: #1B1626; --bb-stroke: rgba(255, 255, 255, 0.12); --bb-shadow: rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --lh-bg1: #171126; --lh-bg2: #100C1C; --lh-bg3: #0C0A15;
  --lh-glow1: rgba(176, 96, 230, 0.32); --lh-glow2: rgba(92, 104, 255, 0.24);
  --lh-ink: #F3F0FF; --lh-ink2: #A59CC8; --lh-ink3: #8F87AE;
  --lh-glass: rgba(255, 255, 255, 0.065); --lh-glass-b: rgba(255, 255, 255, 0.11);
  --lh-shadow: rgba(0, 0, 0, 0.35);
  --lh-violet: #B9A4FF;
  --lh-user: #6246E0;
  --lh-hl: linear-gradient(90deg, #B9A4FF, #F0A6F7);
  --bb-f1: #2A2338; --bb-f2: #1B1626; --bb-stroke: rgba(255, 255, 255, 0.12); --bb-shadow: rgba(0, 0, 0, 0.5);
}

/* ---------- the liquid-bead tab bar (phone) ---------- */
@media (max-width: 899px) {
  #tabbar.bead-bar {
    inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    height: 64px; max-width: 520px; margin-inline: auto;
    display: flex; gap: 0; padding: 0 16px;
    background: none; border: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    touch-action: none; -webkit-user-select: none; user-select: none;
  }
  #tabbar.bead-bar a {
    position: relative; z-index: 1; flex: 1; max-width: none; height: 64px; padding: 0;
    display: flex; align-items: center; justify-content: center; gap: 0;
    color: rgba(255, 255, 255, 0.66); font-size: 11px; border-radius: 16px;
  }
  #tabbar.bead-bar a i { font-size: 23px; }
  #tabbar.bead-bar .bb-lbl {
    position: absolute; bottom: 5px; inset-inline: 0; text-align: center;
    font-size: 11px; font-weight: 600; color: var(--c); white-space: nowrap; pointer-events: none;
    opacity: 0; transform: translateY(3px); transition: opacity 0.18s ease, transform 0.18s ease;
  }
  #tabbar.bead-bar.bb-settled a.on .bb-lbl { opacity: 1; transform: none; }
  #tabbar.bead-bar .bb-bdg {
    position: absolute; top: 11px; left: calc(50% - 21px); min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: #FFA24D; color: #1B1624; box-shadow: 0 0 0 2px var(--bb-f2);
    font: 700 10px/17px Rubik, system-ui, sans-serif; text-align: center;
  }
  #tabbar.bead-bar a.on .bb-bdg { visibility: hidden; }
  #tabbar.bead-bar .bb-svg {
    position: absolute; left: 0; top: -40px; width: 100%; height: calc(100% + 84px);
    overflow: visible; pointer-events: none; z-index: 0;
    filter: drop-shadow(0 14px 22px var(--bb-shadow));
  }
  #tabbar.bead-bar .bb-shape { stroke: var(--bb-stroke); stroke-width: 1; }
  #tabbar.bead-bar .bb-f1 { stop-color: var(--bb-f1); }
  #tabbar.bead-bar .bb-f2 { stop-color: var(--bb-f2); }
  #tabbar.bead-bar .bb-bi {
    position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 2;
    display: grid; place-items: center; color: #17121F; pointer-events: none; will-change: transform;
  }
  #tabbar.bead-bar .bb-bi i { font-size: 21px; }
  #tabbar.bead-bar.bb-none .bb-bead, #tabbar.bead-bar.bb-none .bb-gloss,
  #tabbar.bead-bar.bb-none .bb-glow, #tabbar.bead-bar.bb-none .bb-bi { display: none; }

  /* the floating bar + its bead take ~110px — keep content and floating buttons clear of it */
  #app { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }
  .fab, .fab-mic, .rec-bar { bottom: calc(116px + env(safe-area-inset-bottom)); }
  .rec-hint { bottom: calc(176px + env(safe-area-inset-bottom)); }
}
/* desktop rail: the bead becomes a glowing dot beside the active item */
@media (min-width: 900px) {
  #tabbar.bead-bar .bb-svg, #tabbar.bead-bar .bb-bi { display: none; }
  #tabbar.bead-bar a i { opacity: 1 !important; }
  #tabbar.bead-bar .bb-lbl { font-size: 14.5px; }
  #tabbar.bead-bar a.on { background: var(--surface-2); color: var(--text); }
  #tabbar.bead-bar a.on i { color: var(--text); }
  #tabbar.bead-bar a::after { content: ""; margin-inline-start: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--c); opacity: 0; transform: scale(0.4); transition: opacity 0.2s, transform 0.2s; }
  #tabbar.bead-bar a.on::after { opacity: 1; transform: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 45%, #1D1733), 0 0 10px var(--c); }
  #tabbar.bead-bar .bb-bdg { position: static; margin-inline-start: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #FFA24D; color: #1B1624; font: 700 11px/20px Rubik, system-ui, sans-serif; text-align: center; }
  #tabbar.bead-bar a:has(.bb-bdg:not([hidden]))::after { margin-inline-start: 8px; }
  #tabbar.bead-bar { background: var(--glass); border-inline-end: 1px solid var(--glass-b); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
}

/* ---------- the whole app speaks it: font, backdrop, glass surfaces, violet gradient actions ---------- */
/* --lh-top = the phone's status-bar colour (index.html theme-color): every screen fades INTO it at
   the top, so there's no seam between the status bar and the page. */
:root { --glass: rgba(255, 255, 255, 0.74); --glass-b: rgba(255, 255, 255, 0.95); --sheet-bg: #FBFAFF; --lh-top: #F2EDFD; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --glass: rgba(255, 255, 255, 0.05); --glass-b: rgba(255, 255, 255, 0.08); --sheet-bg: #1B1629; --lh-top: #171126; }
}
:root[data-theme="dark"] { --glass: rgba(255, 255, 255, 0.05); --glass-b: rgba(255, 255, 255, 0.08); --sheet-bg: #1B1629; --lh-top: #171126; }
body { font-family: Rubik, -apple-system, "Segoe UI", system-ui, "Helvetica Neue", sans-serif; }
/* No rubber-band on the page itself: on iOS the bounce drags every fixed element (the menu, the
   mic) with it and opens an empty gap under them. Inner scrollers keep their own momentum. */
html, body { overscroll-behavior-y: none; }
/* the lavender backdrop behind every screen (a fixed layer — background-attachment:fixed is broken on iOS) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, var(--lh-top) 0, transparent calc(env(safe-area-inset-top) + 70px)),
    radial-gradient(120% 55% at 88% -4%, var(--lh-glow1) 0%, transparent 62%),
    radial-gradient(90% 45% at 8% 6%, var(--lh-glow2) 0%, transparent 70%),
    linear-gradient(180deg, var(--lh-bg1) 0%, var(--lh-bg2) 48%, var(--lh-bg3) 100%);
}
.card, .rows, .tile, .quick, .ring-item, .cal-cell, .skel {
  background: var(--glass); border: 1px solid var(--glass-b); box-shadow: var(--card-shadow);
}
.cal-cell { box-shadow: none; }
.cal-cell.today { background: var(--accent-soft); }
.cal-cell.sel { border-color: var(--accent); }
.card.accent { background: color-mix(in srgb, var(--accent) 12%, var(--glass)); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.hero {
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, #B06AF0 13%, transparent), transparent 60%), var(--glass);
  border: 1px solid var(--glass-b);
}
.spark {
  background: linear-gradient(135deg, color-mix(in srgb, #8E6BFF 15%, var(--glass)), color-mix(in srgb, #5A7CFF 9%, var(--glass)));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); box-shadow: var(--card-shadow);
}
.skel::after { background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--accent) 10%, transparent) 50%, transparent 70%); }
.btn { background: var(--glass); border: 1px solid var(--glass-b); box-shadow: 0 2px 8px var(--lh-shadow); }
.btn.primary { background: var(--lh-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(110, 90, 255, 0.35); }
.btn.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.fab, .fab-mic { background: var(--lh-grad); color: #fff; box-shadow: 0 10px 26px rgba(110, 90, 255, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.35); }
.fab-mic.rec { background: var(--red); box-shadow: 0 6px 20px color-mix(in srgb, var(--red) 45%, transparent); }
.icon-btn { background: var(--glass); border: 1px solid var(--glass-b); box-shadow: 0 4px 12px var(--lh-shadow); color: var(--text); }
.seg { background: var(--glass); border: 1px solid var(--glass-b); }
.seg button.on { background: var(--lh-grad); color: #fff; box-shadow: 0 4px 12px rgba(110, 90, 255, 0.3); }
.switch.on { background: var(--lh-grad); }
.field input, .field textarea, .field select { background: var(--glass); border-color: var(--hairline-strong); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.sheet { background: var(--sheet-bg); border-radius: 26px 26px 0 0; }
.backdrop { background: rgba(20, 12, 40, 0.42); }
.eyebrow { color: var(--text-2); font-weight: 650; }
.page-title { font-size: 25px; font-weight: 700; }
.hq-greet { font-size: 27px; font-weight: 700; }
.empty i { color: color-mix(in srgb, var(--accent) 55%, var(--text-3)); }
.quick { gap: 7px; padding: 12px 4px 10px; border-radius: 18px; }
.quick i {
  width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 20px;
  color: var(--qc, var(--accent)); background: color-mix(in srgb, var(--qc, var(--accent)) 14%, transparent);
}
.quick:nth-child(1) { --qc: #7C5CFF; } .quick:nth-child(2) { --qc: #EC4899; }
.quick:nth-child(3) { --qc: #0EA5B7; } .quick:nth-child(4) { --qc: #E08A0B; }
.act-track-fill, .goal-bar span, .cost-bar span { background: var(--lh-grad); }
.conv-ava, .lloyd-ava { background: conic-gradient(from 210deg, #7B5CFF, #5B8CFF, #C06CF0, #7B5CFF); box-shadow: 0 4px 12px rgba(120, 90, 255, 0.35); }
.conv-ava.quick { background: linear-gradient(135deg, #f0a92b, #e5731f); box-shadow: none; }
.compose-hint[hidden] { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .quick i, :root:not([data-theme="light"]) .lh-chip .ci { color: color-mix(in srgb, var(--qc, var(--ci, var(--accent))) 60%, #fff); }
}
:root[data-theme="dark"] .quick i, :root[data-theme="dark"] .lh-chip .ci { color: color-mix(in srgb, var(--qc, var(--ci, var(--accent))) 60%, #fff); }
@media (min-width: 900px) { .sheet { border-radius: 22px; } }

/* ---------- Lloyd's home (the לויד tab) ---------- */
.lh {
  position: fixed; inset: 0; z-index: 20; overflow: hidden;
  display: flex; flex-direction: column;
  padding: max(8px, env(safe-area-inset-top)) 0 calc(118px + env(safe-area-inset-bottom));
  color: var(--lh-ink);
  background:
    radial-gradient(120% 55% at 88% -4%, var(--lh-glow1) 0%, transparent 62%),
    radial-gradient(90% 45% at 8% 6%, var(--lh-glow2) 0%, transparent 70%),
    linear-gradient(180deg, var(--lh-bg1) 0%, var(--lh-bg2) 48%, var(--lh-bg3) 100%);
  animation: pop-in 0.22s ease;
}
/* the sculpture rises under the status bar and dissolves into it — no hard top edge */
.lh::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; pointer-events: none;
  height: calc(env(safe-area-inset-top) + 84px);
  background: linear-gradient(180deg, var(--lh-top) 0%, color-mix(in srgb, var(--lh-top) 55%, transparent) 42%, transparent 100%);
}
.lh-top { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 6px 16px 0; }
.lh-top .grow { flex: 1; }
.lh-brand {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 6px 0 16px; border-radius: 999px;
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  background: var(--lh-glass); border: 1px solid var(--lh-glass-b); box-shadow: 0 6px 18px var(--lh-shadow);
}
.lh-orb {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; overflow: hidden;
  background: conic-gradient(from 210deg, #7B5CFF, #5B8CFF, #C06CF0, #7B5CFF);
  box-shadow: 0 4px 12px rgba(120, 90, 255, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}
.lh-orb i { font-size: 17px; }
.lh-orb img { width: 100%; height: 100%; object-fit: cover; }
.lh-round {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--lh-ink);
  background: var(--lh-glass); border: 1px solid var(--lh-glass-b); box-shadow: 0 6px 18px var(--lh-shadow);
}
.lh-round i { font-size: 21px; }
.lh-me {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden;
  font-weight: 700; font-size: 16px; color: #fff; background: linear-gradient(135deg, #FF9A8B, #FF6FA0 50%, #A98BFF);
  border: 2px solid var(--lh-glass-b); box-shadow: 0 6px 16px rgba(255, 111, 160, 0.3);
}
.lh-me img { width: 100%; height: 100%; object-fit: cover; }
/* pulled up under the top bar AND the status-bar area, so the ribbons run off the top of the screen */
.lh-hero {
  position: relative; flex: 1 1 auto;
  margin-top: calc(-48px - max(8px, env(safe-area-inset-top)));
  min-height: calc(200px + env(safe-area-inset-top)); max-height: calc(390px + env(safe-area-inset-top));
}
.lh-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lh-hero .lh-fallback {
  position: absolute; left: 50%; top: 18%; width: 64%; height: 70%; transform: translateX(-50%); border-radius: 50%;
  filter: blur(26px); opacity: 0.85;
  background: radial-gradient(circle at 35% 40%, #CDB8FF 0%, #9FD7FF 40%, #F3C1F0 70%, transparent 72%);
}
.lh-hero.fx-on .lh-fallback { display: none; }
.lh-mid { position: relative; z-index: 2; margin-top: -22px; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 0 16px; text-align: center; }
.lh-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; color: var(--lh-ink2);
  background: var(--lh-glass); border: 1px solid var(--lh-glass-b); box-shadow: 0 4px 14px var(--lh-shadow);
}
.lh-pill i { color: #8B6CFF; font-size: 14px; }
.lh-pill { font-family: inherit; cursor: default; max-width: 100%; }
.lh-pill:not(.act) { pointer-events: none; } /* just a tagline until it has something to open */
/* when something waits for you, the tagline pill becomes that thing (and a button) */
.lh-pill.act {
  cursor: pointer; height: 32px; padding: 0 14px; font-size: 13px; font-weight: 600; color: var(--lh-ink);
  background: color-mix(in srgb, #8B6CFF 14%, var(--lh-glass)); border-color: color-mix(in srgb, #8B6CFF 35%, transparent);
  box-shadow: 0 6px 18px rgba(124, 92, 255, 0.18);
}
.lh-pill.act span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lh-greet { margin: 2px 0 0; font-size: clamp(24px, 7.4vw, 30px); line-height: 1.16; font-weight: 700; letter-spacing: -0.015em; }
.lh-hl { background: var(--lh-hl); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lh-notice {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 36px; padding: 0 8px 0 12px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--lh-ink); cursor: pointer;
  background: var(--lh-glass); border: 1px solid var(--lh-glass-b); box-shadow: 0 6px 18px rgba(124, 92, 255, 0.14);
}
.lh-notice .ic { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; background: var(--lh-grad); }
.lh-notice .ic i { font-size: 15px; }
.lh-notice .tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lh-notice > .ti-chevron-left { opacity: 0.5; font-size: 16px; flex: none; }
.lh-notice[hidden] { display: none; }
.lh-space { flex: 0 1 28px; min-height: 10px; }
.lh-chips {
  display: flex; flex-direction: column; gap: 9px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.lh-row { overflow: hidden; }
.lh-trk { display: flex; gap: 8px; width: max-content; animation: lh-marq 46s linear infinite; }
.lh-row:nth-child(2) .lh-trk { animation-direction: reverse; animation-duration: 52s; }
.lh-row:nth-child(3) .lh-trk { animation-duration: 58s; }
.lh-chips:active .lh-trk, .lh-chips:hover .lh-trk { animation-play-state: paused; }
@keyframes lh-marq { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .lh-trk { animation: none; } }
.lh-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 6px 0 14px; border-radius: 15px;
  font-size: 13.5px; font-weight: 500; white-space: nowrap; color: var(--lh-ink); cursor: pointer;
  background: var(--lh-glass); border: 1px solid var(--lh-glass-b); box-shadow: 0 4px 14px var(--lh-shadow);
}
.lh-chip:active { transform: scale(0.96); }
.lh-chip .ci { width: 30px; height: 30px; border-radius: 10px; flex: none; display: grid; place-items: center; color: var(--ci); background: color-mix(in srgb, var(--ci) 13%, transparent); }
.lh-chip .ci i { font-size: 17px; }
.lh-compose {
  margin: 14px 16px 0; height: 56px; border-radius: 999px; display: flex; align-items: center; gap: 4px; padding: 0 6px;
  background: var(--lh-glass); border: 1px solid var(--lh-glass-b); box-shadow: 0 12px 30px var(--lh-shadow);
}
.lh-compose:focus-within { border-color: color-mix(in srgb, #8B6CFF 42%, transparent); }
/* a real input now — 16px so iOS doesn't zoom the page when it takes focus */
.lh-compose .lh-type {
  flex: 1; min-width: 0; height: 44px; padding: 0 6px; text-align: start;
  font: inherit; font-size: 16px; color: var(--lh-ink); background: transparent; border: none; outline: none; border-radius: 0;
}
.lh-compose .lh-type::placeholder { color: var(--lh-ink3); }
.lh-ghost { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--lh-ink2); }
.lh-ghost i { font-size: 21px; }
.lh-go {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff;
  background: var(--lh-grad); box-shadow: 0 6px 16px rgba(110, 90, 255, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}
.lh-go i { font-size: 21px; }
@media (max-height: 700px) {
  .lh-hero { min-height: calc(150px + env(safe-area-inset-top)); }
  .lh-row:nth-child(3) { display: none; }
}
/* typing on Lloyd's home (phone, keyboard up): the sculpture steps aside and the asks + composer sit
   right above the keys (pinToKeyboard sizes .lh to the visible area) */
@media (max-width: 899px) {
  body.kb-open .lh { padding-bottom: 10px; overflow-y: auto; } /* small phones: scroll rather than clip */
  body.kb-open .lh-hero, body.kb-open .lh-notice { display: none; }
  body.kb-open .lh-mid { margin-top: 14px; }
  body.kb-open .lh-space { flex: 1 1 auto; }
  body.kb-open .lh-row:nth-child(3) { display: none; }
}
@media (min-width: 900px) {
  .lh { inset-inline-start: 248px; padding-bottom: 36px; }
  .lh-mid, .lh-chips, .lh-compose { width: 100%; max-width: 720px; margin-inline: auto; }
  .lh-compose { margin-top: 16px; }
  .lh-hero {
    max-height: 380px; max-width: 980px; width: 100%; margin-inline: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
}

/* ---------- the chat (Lloyd + friends): lavender glass ---------- */
.chat-view {
  color: var(--lh-ink);
  background:
    linear-gradient(180deg, var(--lh-top) 0, transparent calc(env(safe-area-inset-top) + 60px)),
    radial-gradient(90% 40% at 82% 0%, var(--lh-glow1), transparent 70%),
    radial-gradient(70% 35% at 10% 0%, var(--lh-glow2), transparent 70%),
    linear-gradient(180deg, var(--lh-bg1) 0%, var(--lh-bg2) 50%, var(--lh-bg3) 100%);
}
.chat-view .chat-head {
  background: transparent; border-bottom: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: max(10px, env(safe-area-inset-top)) 14px 8px;
}
.chat-view .chat-head .icon-btn {
  width: 42px; height: 42px; flex: none; color: var(--lh-ink);
  background: var(--lh-glass); border: 1px solid var(--lh-glass-b); box-shadow: 0 6px 18px var(--lh-shadow);
}
.chat-view .chat-head .lloyd-status { color: var(--lh-ink2); }
.chat-view .chat-head .grow { flex: 1; min-width: 0; }
.ch-center { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.ch-center .lloyd-name { font-size: 15.5px; font-weight: 700; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--lh-violet); }
.ch-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8B6CFF; animation: ch-pulse 1.4s ease-in-out infinite; }
@keyframes ch-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.chat-view .chat-thread { gap: 10px; padding: 8px 16px 14px; overscroll-behavior: contain; }
.chat-view .day-sep { color: var(--lh-ink2); background: var(--lh-glass); border: 1px solid var(--lh-glass-b); padding: 3px 12px; }
.chat-view .bub { font-size: 15px; line-height: 1.45; padding: 10px 15px; border-radius: 20px; }
.chat-view .bub.user {
  background: var(--lh-user); color: #fff; border: none; border-end-start-radius: 6px;
  box-shadow: 0 6px 16px rgba(108, 78, 245, 0.22);
}
.chat-view .bub.user .t { opacity: 0.85; }
.chat-view .bub.user .chat-quote { background: rgba(255, 255, 255, 0.16); opacity: 1; }
.chat-view .bub.bot, .chat-view .bub.friend {
  background: var(--lh-glass); color: var(--lh-ink); border: 1px solid var(--lh-glass-b); border-end-end-radius: 6px;
  box-shadow: 0 8px 24px var(--lh-shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.chat-view .bub.bot.typing { padding: 13px 16px; }
.chat-view .typing i { background: #8B6CFF; }
.lloyd-tag { align-self: flex-end; display: flex; align-items: center; gap: 7px; margin: 6px 0 -4px; font-size: 12.5px; font-weight: 700; color: var(--lh-violet); }
.lloyd-tag .lh-orb { width: 26px; height: 26px; }
.lloyd-tag .lh-orb i { font-size: 14px; }
.chat-view .spark-acts .btn { border-radius: 999px; }
.chat-view .spark-acts .btn.primary { background: var(--lh-grad); border: none; color: #fff; box-shadow: 0 6px 14px rgba(110, 90, 255, 0.35); }
.chat-view .composer-in {
  margin: 0 12px calc(10px + env(safe-area-inset-bottom)); padding: 6px; gap: 4px; align-items: flex-end;
  border: 1px solid var(--lh-glass-b); border-top: 1px solid var(--lh-glass-b); border-radius: 28px;
  background: var(--lh-glass); box-shadow: 0 12px 30px var(--lh-shadow);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.chat-view .composer-in textarea { border: none; background: transparent; color: var(--lh-ink); padding: 11px 6px; border-radius: 0; }
.chat-view .composer-in textarea::placeholder { color: var(--lh-ink3); }
.chat-view .composer-in textarea:focus { border: none; }
.chat-view .composer-in .mic-btn { width: 44px; height: 44px; border-radius: 50%; background: none; color: var(--lh-ink2); }
.chat-view .composer-in .send-btn {
  width: 44px; height: 44px; border-radius: 50%; color: #fff; background: var(--lh-grad);
  box-shadow: 0 6px 16px rgba(110, 90, 255, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}
.chat-view .composer-in .send-btn.rec, .chat-view .composer-in .mic-btn.rec { background: var(--red); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--red) 45%, transparent); animation: pulse 1.2s infinite; }
.chat-view .composer-in [hidden] { display: none; }
.chat-view .compose-hint { margin: 0 12px 6px; border: 1px solid var(--lh-glass-b); border-radius: 16px; background: var(--lh-glass); }
.chat-view .bub.media { padding: 5px; }
.chat-rec { bottom: calc(92px + env(safe-area-inset-bottom)); }
html:has(body.chat-open), body.chat-open { overscroll-behavior: none; }
/* the bar is hidden on login/onboarding — its own display:flex rules must not win over [hidden] */
#tabbar[hidden] { display: none !important; }
@media (min-width: 900px) {
  .chat-view .chat-thread { padding: 24px var(--chat-pad) 12px; }
  .chat-view .chat-head, .chat-view .passive-strip { padding-inline: var(--chat-pad); }
  .chat-view .composer-in, .chat-view .compose-hint { width: min(var(--chat-col), 100% - 56px); max-width: none; margin-inline: auto; }
  .chat-view .composer-in { margin-bottom: 18px; }
}

/* ---------- scrollbars with a mouse: thin, rounded, quiet ----------
   The platform default (a grey bar with arrow buttons) looked broken, especially mid-screen.
   Chromium/Safari get the ::-webkit-scrollbar parts — they're ignored as soon as scrollbar-width or
   scrollbar-color is set, so the standard properties are only for browsers without them (Firefox). */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: padding-box color-mix(in srgb, var(--accent) 36%, transparent); }
  ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--accent) 62%, transparent); }
  /* in a conversation the bar only shows while the pointer is over it */
  .chat-view .chat-thread::-webkit-scrollbar-thumb { background-color: transparent; }
  .chat-view .chat-thread:hover::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--accent) 36%, transparent); }
  .chat-view .chat-thread::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--accent) 62%, transparent); }
}
@supports not selector(::-webkit-scrollbar) {
  @media (hover: hover) and (pointer: fine) {
    html, body, .chat-view .chat-thread, .sheet, #tabbar { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 35%, transparent) transparent; }
  }
}
/* phone held sideways: the sculpture steps aside and Lloyd's home scrolls */
@media (max-height: 520px) and (max-width: 899px) {
  .lh { overflow-y: auto; }
  .lh-hero { display: none; }
  .lh-mid { margin-top: 8px; }
}

/* ---------- Lloyd typing his reply out (typeOut in app.js) ---------- */
.tw-h { display: none !important; } /* a block he hasn't reached yet */
.bub.typing-out { cursor: pointer; } /* tap = finish now */
.bub.typing-out .t { visibility: hidden; }
.type-caret {
  display: inline-block; width: 8px; height: 8px; margin-inline-start: 5px; border-radius: 50%; vertical-align: middle;
  background: linear-gradient(135deg, #8E6BFF, #5A7CFF); box-shadow: 0 0 8px rgba(124, 92, 255, 0.6);
  animation: caret-pulse 0.9s ease-in-out infinite;
}
@keyframes caret-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.75); } 50% { opacity: 1; transform: scale(1); } }

/* ---------- Lloyd's conversations list ---------- */
.cl-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; }
.cl-head .grow { flex: 1; min-width: 0; }
.cl-title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.cl-sub { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.cl-new {
  width: 100%; display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 16px 0 9px; margin-bottom: 18px;
  border-radius: 20px; color: #fff; font-family: inherit; font-size: 16px; font-weight: 650; text-align: start;
  background: var(--lh-grad); box-shadow: 0 12px 26px rgba(110, 90, 255, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.35);
}
.cl-new .grow { flex: 1; }
.cl-new-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.22); flex: none; }
.cl-new-ic i { font-size: 21px; }
.cl-new > .ti-sparkles { font-size: 19px; opacity: 0.85; }
.cl-list {
  border-radius: var(--r); overflow: hidden; margin-bottom: 14px;
  background: var(--glass); border: 1px solid var(--glass-b); box-shadow: var(--card-shadow);
}
.cl-list.pinned { margin-bottom: 6px; background: color-mix(in srgb, #8B6CFF 9%, var(--glass)); border-color: color-mix(in srgb, #8B6CFF 22%, transparent); }
.cl-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; min-height: 70px; }
.cl-row + .cl-row { border-top: 1px solid var(--hairline); }
.cl-row:active { background: var(--surface-2); }
.cl-ava {
  width: 46px; height: 46px; border-radius: 15px; flex: none; display: grid; place-items: center;
  color: var(--h); background: color-mix(in srgb, var(--h) 14%, transparent);
}
.cl-ava i { font-size: 22px; }
.cl-ava.main {
  border-radius: 50%; width: 46px; height: 46px; color: #fff;
  background: conic-gradient(from 210deg, #7B5CFF, #5B8CFF, #C06CF0, #7B5CFF);
  box-shadow: 0 4px 12px rgba(120, 90, 255, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}
.cl-ava.main i { font-size: 22px; }
.cl-row-top { display: flex; align-items: baseline; gap: 8px; }
.cl-name { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-tag { flex: none; font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 1px 8px; border-radius: 999px; }
.cl-time { flex: none; font-size: 12px; color: var(--text-3); }
.cl-prev { font-size: 13.5px; color: var(--text-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-del { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--text-3); }
.cl-del i { font-size: 18px; }
.cl-del:active { color: var(--red); background: var(--red-soft); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cl-ava:not(.main) { color: color-mix(in srgb, var(--h) 60%, #fff); background: color-mix(in srgb, var(--h) 22%, transparent); }
}
:root[data-theme="dark"] .cl-ava:not(.main) { color: color-mix(in srgb, var(--h) 60%, #fff); background: color-mix(in srgb, var(--h) 22%, transparent); }
@media (hover: hover) {
  .cl-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
  .cl-del { opacity: 0.55; }
  .cl-row:hover .cl-del { opacity: 1; }
  .cl-del:hover { color: var(--red); background: var(--red-soft); }
}

/* ---------- the weekly ritual: the home card + the in-app ritual (ritual.js) ---------- */
.ritual-card { border-color: color-mix(in srgb, var(--accent) 26%, transparent); background: linear-gradient(135deg, color-mix(in srgb, #8E6BFF 11%, var(--glass)), color-mix(in srgb, #5A7CFF 6%, var(--glass))); }
.ritual-top { display: flex; align-items: center; gap: 12px; }
.ritual-top .grow { flex: 1; min-width: 0; }
.ritual-ic { width: 42px; height: 42px; border-radius: 14px; flex: none; display: grid; place-items: center; color: #fff; background: var(--lh-grad); box-shadow: 0 6px 16px rgba(110, 90, 255, 0.3); }
.ritual-ic i { font-size: 21px; }
.ritual-t { font-size: 15.5px; font-weight: 680; }
.ritual-card .actions { display: flex; gap: 10px; margin-top: 12px; }
.ritual-card .actions .btn.primary { flex: 1; justify-content: center; text-decoration: none; }

.view.wr { padding-bottom: 24px; }
.wr-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; }
.wr-head .grow { flex: 1; min-width: 0; }
.wr-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.wr-sub { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.wr-skip { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--glass); border: 1px solid var(--glass-b); cursor: pointer; }
.wr-dots { display: flex; gap: 6px; margin: 0 2px 20px; }
.wr-dots i { flex: 1; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); transition: background 0.25s ease; }
.wr-dots i.on { background: var(--lh-grad); }
.wr-step.wr-in { animation: wr-in 0.28s ease; }
@keyframes wr-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wr-card { background: var(--glass); border: 1px solid var(--glass-b); box-shadow: var(--card-shadow); border-radius: var(--r); padding: 12px 16px; margin-bottom: 18px; }
.wr-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--accent); margin: 2px 0 6px; }
.wr-drow, .wr-frow { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.wr-drow + .wr-drow, .wr-frow + .wr-frow { border-top: 1px solid var(--hairline); }
.wr-drow .grow, .wr-frow .grow { flex: 1; min-width: 0; }
.wr-frow { cursor: pointer; }
.wr-frow > .ti-pencil { color: var(--text-3); font-size: 17px; flex: none; }
.wr-dic { width: 36px; height: 36px; border-radius: 12px; flex: none; display: grid; place-items: center; color: var(--dc); background: color-mix(in srgb, var(--dc) 14%, transparent); }
.wr-dic i { font-size: 19px; }
.wr-dic.big { width: 50px; height: 50px; border-radius: 17px; }
.wr-dic.big i { font-size: 26px; }
.wr-dname { font-size: 14.5px; font-weight: 650; }
.wr-dline { font-size: 13px; color: var(--text-2); margin-top: 2px; line-height: 1.45; }
.wr-ftext { font-size: 14.5px; line-height: 1.5; margin-top: 2px; }
.wr-count { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--green); background: var(--green-soft); padding: 3px 9px; border-radius: 999px; }
.wr-sparks { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); border-top: 1px solid var(--hairline); padding: 10px 0 2px; }
.wr-q { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; margin: 4px 2px 12px; }
.wr-domain { display: flex; align-items: center; gap: 12px; margin: 0 2px 8px; }
.wr-dlabel { font-size: 15px; font-weight: 700; color: var(--dc); }
.wr-ctx { display: flex; flex-direction: column; gap: 7px; margin: -2px 2px 14px; }
.wr-ctx div { display: flex; align-items: flex-start; gap: 7px; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.wr-ctx i { font-size: 16px; flex: none; margin-top: 1px; }
.wr-input {
  display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px;
  font: inherit; font-size: 16px; line-height: 1.5; color: var(--text);
  padding: 13px 15px; border-radius: 18px; outline: none;
  background: var(--glass); border: 1px solid var(--glass-b); box-shadow: 0 6px 18px var(--lh-shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wr-input::placeholder { color: var(--text-3); }
.wr-input:focus { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.wr-input.wr-flash { animation: wr-flash 0.9s ease; }
@keyframes wr-flash { 0% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.wr-suggest {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; height: 38px; padding: 0 15px;
  border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer;
  color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.wr-suggest .spin { width: 14px; height: 14px; }
.wr-acts { display: flex; gap: 10px; margin-top: 22px; }
.wr-acts .btn { height: 52px; border-radius: 999px; font-size: 15.5px; font-weight: 650; justify-content: center; }
.wr-acts .wr-next { flex: 1; }
.wr-acts .wr-prev { width: 52px; padding: 0; flex: none; }
.wr-acts .wr-prev i { font-size: 20px; }
.wr-note { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-2); line-height: 1.5; margin: -4px 4px 0; }
.wr-note i { font-size: 16px; flex: none; margin-top: 2px; color: var(--accent); }
.wr-done-ic { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; color: #fff; background: var(--lh-grad); box-shadow: 0 12px 26px rgba(110, 90, 255, 0.35); margin: 4px 2px 12px; }
.wr-done-ic i { font-size: 30px; }
.wr-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 64px 16px; }
.wr-empty .wr-q { margin-bottom: 4px; }
.wr-empty .btn { margin-top: 18px; text-decoration: none; }
@media (min-width: 900px) {
  .view.wr { max-width: 640px; }
}
@media (hover: hover) {
  .wr-frow:hover .ti-pencil { color: var(--accent); }
  .wr-skip:hover { color: var(--text); }
  .wr-suggest:hover { filter: brightness(0.97); }
}

/* ==================== HOME ("בית") — now · waiting for you · your day · progress ====================
   renderDashboard() in app.js. Phone: one column in that order. Desktop: the day (now + agenda) on the
   start side, what's waiting + progress beside it. */
.hm [hidden] { display: none !important; }
.hm .hq-head { margin-bottom: 12px; }
.hm .hq-mood-note { flex: 0 1 auto; } /* the streak sits right after the line, not at the far edge */
.hm-ask { margin: 0 0 18px; }
.hm-ask-bar {
  display: flex; align-items: center; gap: 8px; height: 54px; padding-inline: 16px 6px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-b); box-shadow: 0 10px 28px var(--lh-shadow);
}
.hm-ask-bar:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.hm-ask-bar > .ti-sparkles { color: var(--accent); font-size: 19px; flex: none; }
/* 16px so iOS doesn't zoom the page when it takes focus */
.hm-ask-bar input { flex: 1; min-width: 0; height: 44px; border: none; outline: none; background: transparent; font: inherit; font-size: 16px; color: var(--text); padding: 0; }
.hm-ask-bar input::placeholder { color: var(--text-3); }
.hm-ask-go {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; cursor: pointer;
  color: #fff; background: var(--lh-grad); border: none; box-shadow: 0 6px 16px rgba(110, 90, 255, 0.4);
}
.hm-ask-go[hidden] { display: none; }
.hm-ask-go i { font-size: 20px; }
.hm-quick { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.hm-quick::-webkit-scrollbar { display: none; }
.hm-quick > * {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); text-decoration: none; cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-b);
}
.hm-quick i { font-size: 16px; color: var(--accent); }

.hm [data-body].hm-grid { column-count: auto; display: flex; flex-direction: column; gap: 22px; }
.hm-side { display: contents; }
.hm-now { order: 1; } .hm-needs { order: 2; } .hm-day { order: 3; } .hm-prog { order: 4; }
.hm-grid section > .eyebrow:first-child { margin-top: 0; }

/* hero */
.hm-hero .eyebrow { display: flex; align-items: center; gap: 6px; }
.hm-hero .hm-of { margin-inline-start: auto; font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.hm-hero .hero-meta:empty { display: none; }
.hm-acts { display: flex; gap: 10px; margin-top: 14px; }
.hm-acts .btn { height: 46px; border-radius: 999px; font-size: 15px; font-weight: 650; justify-content: center; }
.hm-acts .btn.primary { flex: 1; }
.hm-acts .btn:not(.primary) { padding: 0 18px; }
.hm-eve-top { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.hm-eve-top .grow { flex: 1; min-width: 0; }
.hm-eve-sub { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.hm-ring { flex: none; }
.hm-eve .hero-foot { display: flex; align-items: center; gap: 6px; }
.hm-spin { animation: rot 1.1s linear infinite; }

/* waiting for you */
.card.nd { padding: 12px 14px; margin-bottom: 10px; }
.card.nd.tap { cursor: pointer; }
.nd-head { display: flex; align-items: center; gap: 11px; }
.nd-head .grow { flex: 1; min-width: 0; }
.nd-passive { cursor: pointer; }
.nd-ic { width: 36px; height: 36px; border-radius: 12px; flex: none; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); }
.nd-ic i { font-size: 19px; }
.nd-ic.grad { color: #fff; background: var(--lh-grad); box-shadow: 0 5px 12px rgba(110, 90, 255, 0.28); }
.nd-ic.orange { color: #D9730D; background: color-mix(in srgb, #FFA24D 20%, transparent); }
.nd-ic.red { color: var(--red); background: var(--red-soft); }
.nd-ic.amber { color: #B7791F; background: color-mix(in srgb, #F5B82E 20%, transparent); }
/* a pasted URL as a title must wrap, never push the page sideways */
.nd-t, .nd-it, .nd-s, .ag-title, .hm-goal-t, .hm .hero-title { overflow-wrap: anywhere; }
.nd-t { font-size: 14.5px; font-weight: 650; line-height: 1.35; }
.nd-s { font-size: 12.5px; color: var(--text-2); margin-top: 2px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nd-s i { font-size: 12px; }
.nd-n { display: inline-block; min-width: 20px; height: 20px; line-height: 20px; padding: 0 6px; margin-inline-start: 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; text-align: center; vertical-align: 1px; }
.nd-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.nd-acts:empty { display: none; }
.nd-acts .btn { text-decoration: none; }
.nd-item { display: flex; align-items: center; gap: 8px; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--hairline); }
.nd-item .grow { flex: 1; min-width: 0; }
.nd-it { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.hm-more { width: 100%; height: 38px; border-radius: 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); background: transparent; border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; }
.hm-calm { display: flex; align-items: center; gap: 8px; padding: 13px 15px; border-radius: var(--r); font-size: 13.5px; color: var(--text-2); background: color-mix(in srgb, var(--glass) 55%, transparent); border: 1px dashed color-mix(in srgb, var(--accent) 18%, transparent); }
.hm-calm i { color: var(--green); font-size: 18px; flex: none; }

/* your day */
.hm-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 10px; }
.hm-sec-head .eyebrow { margin: 0; }
.hm-sec-head .seg { margin: 0; }
.hm-sec-head .seg button { padding: 5px 13px; font-size: 12.5px; }
.hm-agenda { padding: 4px 14px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--glass-b); box-shadow: var(--card-shadow); }
.hm-agenda > .hm-calm { border: none; background: none; padding: 14px 0; }
.ag-row { display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 9px 0; }
.ag-row + .ag-row { border-top: 1px solid var(--hairline); }
.ag-row .grow { flex: 1; min-width: 0; }
.ag-time { flex: none; width: 44px; font-size: 13px; font-weight: 650; color: var(--text-2); }
.ag-ic { width: 30px; height: 30px; border-radius: 10px; flex: none; display: grid; place-items: center; }
.ag-ic i { font-size: 16px; }
.k-meet .ag-ic { color: #1C8DBF; background: color-mix(in srgb, #5FCBFF 20%, transparent); }
.k-rem .ag-ic { color: #B7791F; background: color-mix(in srgb, #FFD166 26%, transparent); }
.k-task .ag-ic { color: var(--accent); background: var(--accent-soft); }
.ag-title { font-size: 14.5px; font-weight: 560; line-height: 1.35; }
.ag-row.high .ag-title::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-inline-start: 7px; vertical-align: 2px; }
.ag-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.ag-sub i { font-size: 13px; }
.ag-late { color: var(--red); font-weight: 600; }
.ag-row.past { opacity: 0.55; }
.ag-row.past .ag-title, .ag-row.ticked .ag-title { text-decoration: line-through; color: var(--text-3); }
.ag-done { color: var(--green); font-size: 19px; flex: none; }
.ag-join { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; background: var(--lh-grad); text-decoration: none; }
.ag-group { display: flex; align-items: center; gap: 6px; width: 100%; padding: 12px 0 4px; font: inherit; font-size: 12px; font-weight: 700; color: var(--text-3); background: none; border: none; text-align: start; }
.ag-group.over { color: var(--red); }
button.ag-group { cursor: pointer; color: var(--green); }
button.ag-group .ti-chevron-down { margin-inline-start: auto; color: var(--text-3); transition: transform 0.2s ease; }
button.ag-group.open .ti-chevron-down { transform: rotate(180deg); }
.ag-day { padding: 12px 0 2px; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.ag-group + .ag-row, .ag-day + .ag-row { border-top: none; }

/* progress */
.hm-goals { padding: 4px 16px; }
.hm-goal { padding: 12px 0; cursor: pointer; }
.hm-goal + .hm-goal { border-top: 1px solid var(--hairline); }
.hm-goal-top { display: flex; align-items: baseline; gap: 10px; }
.hm-goal-t { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.hm-goal-p { flex: none; font-size: 13px; font-weight: 700; }
.hm-bar { height: 7px; margin-top: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.hm-bar span { display: block; height: 100%; min-width: 4px; border-radius: 999px; }
.hm-pace { font-size: 11.5px; font-weight: 650; margin-top: 6px; }
.hm-spark { margin-top: 14px; }
.hm-spark .spark-acts .btn { flex: none; }
.hm-spark .spark-acts .btn.primary { flex: 1; }

@media (min-width: 900px) {
  .hm [data-body].hm-grid {
    display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    /* the hero row hugs its content; a taller side column stretches the DAY row, never a gap under the hero */
    grid-template-rows: auto 1fr;
    grid-template-areas: "now side" "day side"; align-items: start; gap: 22px 28px;
  }
  .hm-now { grid-area: now; } .hm-day { grid-area: day; }
  .hm-side { grid-area: side; display: flex; flex-direction: column; gap: 22px; }
}
@media (hover: hover) {
  .card.nd.tap:hover, .hm-goal:hover { background: color-mix(in srgb, var(--accent) 4%, var(--glass)); }
  .hm-quick > *:hover { color: var(--text); }
  button.ag-group:hover { filter: brightness(0.95); }
}

/* ==================== ONBOARDING — a conversation with Lloyd (onboarding.js) ==================== */
.ob {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; overflow: hidden; color: var(--lh-ink);
  background:
    radial-gradient(120% 55% at 88% -4%, var(--lh-glow1) 0%, transparent 62%),
    radial-gradient(90% 45% at 8% 6%, var(--lh-glow2) 0%, transparent 70%),
    linear-gradient(180deg, var(--lh-bg1) 0%, var(--lh-bg2) 48%, var(--lh-bg3) 100%);
  animation: pop-in 0.3s ease; transition: opacity 0.28s ease, transform 0.28s ease;
}
.ob.out { opacity: 0; transform: scale(0.985); }
.ob > * { width: 100%; max-width: 680px; margin-inline: auto; }
.ob-top { position: relative; z-index: 3; flex: none; display: flex; align-items: center; gap: 9px; padding: max(10px, env(safe-area-inset-top)) 16px 8px; font-size: 15.5px; }
.ob-top .lh-orb { width: 30px; height: 30px; }
.ob-prog { flex: 1; height: 4px; margin-inline: 6px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ob-prog i { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--lh-grad); transition: width 0.45s ease; }
.ob-later { flex: none; height: 32px; padding: 0 13px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--lh-ink2); cursor: pointer; background: var(--lh-glass); border: 1px solid var(--lh-glass-b); }
.ob-hero { position: relative; z-index: 1; flex: none; height: min(38vh, 330px); max-width: 980px; margin-top: -44px; transition: height 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease; }
.ob-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ob-hero .lh-fallback { position: absolute; left: 50%; top: 18%; width: 64%; height: 70%; transform: translateX(-50%); border-radius: 50%; filter: blur(26px); opacity: 0.85; background: radial-gradient(circle at 35% 40%, #CDB8FF 0%, #9FD7FF 40%, #F3C1F0 70%, transparent 72%); }
.ob-hero.fx-on .lh-fallback { display: none; }
.ob.chat .ob-hero { height: 0; margin-top: 0; opacity: 0; } /* collapsed: nothing may pull the thread up under the top bar */
.ob-hero { transition-property: height, margin-top, opacity; }
.ob-thread { position: relative; z-index: 2; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 9px; padding: 8px 16px 14px; }
.ob-msg { max-width: 86%; padding: 11px 15px; border-radius: 20px; font-size: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; animation: ob-in 0.22s ease; }
.ob-msg.bot { align-self: flex-end; background: var(--lh-glass); border: 1px solid var(--lh-glass-b); border-end-end-radius: 6px; box-shadow: 0 8px 24px var(--lh-shadow); }
.ob-msg.user { align-self: flex-start; color: #fff; background: var(--lh-user); border-end-start-radius: 6px; box-shadow: 0 6px 16px rgba(108, 78, 245, 0.22); }
.ob-msg.user.skipped { color: var(--lh-ink3); background: var(--lh-glass); border: 1px dashed color-mix(in srgb, var(--accent) 32%, transparent); box-shadow: none; }
.ob-msg.typing { display: inline-flex; gap: 4px; padding: 15px 16px; }
.ob-msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: #8B6CFF; animation: ob-dot 1s infinite ease-in-out; }
.ob-msg.typing i:nth-child(2) { animation-delay: 0.15s; } .ob-msg.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ob-dot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes ob-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ob-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ob-dock { position: relative; z-index: 2; flex: none; padding: 6px 16px calc(14px + env(safe-area-inset-bottom)); }
.ob-dock.in .ob-ask { animation: ob-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ob-ask { display: flex; flex-direction: column; gap: 10px; }
.ob-cards { display: grid; gap: 9px; }
.ob-cards.two { grid-template-columns: 1fr 1fr; }
.ob-card {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 13px; border-radius: 18px; text-align: start;
  font: inherit; color: var(--lh-ink); cursor: pointer; background: var(--lh-glass); border: 1.5px solid var(--lh-glass-b);
  box-shadow: 0 6px 18px var(--lh-shadow); transition: transform 0.12s, border-color 0.15s, background 0.15s, opacity 0.2s;
}
.ob-card:active { transform: scale(0.98); }
.ob-card .ic { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.ob-card .ic i { font-size: 20px; }
.ob-card .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ob-card .t { font-size: 15px; font-weight: 650; }
.ob-card .s { font-size: 12.5px; line-height: 1.35; color: var(--lh-ink2); }
.ob-card.toggle .ck { flex: none; font-size: 20px; color: var(--c); opacity: 0; transform: scale(0.6); transition: 0.15s; }
.ob-card.toggle.on { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 8%, var(--lh-glass)); }
.ob-card.toggle.on .ck { opacity: 1; transform: none; }
.ob-card.locked { cursor: default; }
.ob-card.static { cursor: default; }
.ob-card.static.gone { opacity: 0; transform: translateY(6px); }
.ob-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ob-pill {
  display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--lh-ink); background: var(--lh-glass); border: 1.5px solid var(--lh-glass-b); box-shadow: 0 4px 14px var(--lh-shadow);
}
.ob-pill.primary { height: 50px; padding: 0 26px; font-size: 16px; color: #fff; border-color: transparent; background: var(--lh-grad); box-shadow: 0 8px 20px rgba(110, 90, 255, 0.35); }
.ob-pill.toggle.on { color: #fff; border-color: transparent; background: var(--lh-user); }
.ob-pills.small .ob-pill { height: 36px; padding: 0 14px; font-size: 13.5px; }
.ob-input { display: flex; align-items: center; gap: 6px; height: 54px; padding-inline: 16px 6px; border-radius: 999px; background: var(--lh-glass); border: 1px solid var(--lh-glass-b); box-shadow: 0 10px 26px var(--lh-shadow); }
.ob-input:focus-within { border-color: color-mix(in srgb, #8B6CFF 42%, transparent); }
.ob-input.plain { padding-inline: 16px; }
.ob-input input { flex: 1; min-width: 0; height: 44px; padding: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 16px; color: var(--lh-ink); }
.ob-input input::placeholder { color: var(--lh-ink3); }
.ob-send { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; border: none; cursor: pointer; color: #fff; background: var(--lh-grad); }
.ob-send i { font-size: 20px; }
.ob-go { display: flex; align-items: center; justify-content: center; gap: 7px; height: 52px; border-radius: 999px; border: none; cursor: pointer; font: inherit; font-size: 16px; font-weight: 650; color: #fff; background: var(--lh-grad); box-shadow: 0 8px 20px rgba(110, 90, 255, 0.35); }
.ob-go.ghost { color: var(--lh-ink); background: var(--lh-glass); border: 1px solid var(--lh-glass-b); box-shadow: none; }
.ob-skip { align-self: center; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 14px; border: none; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--lh-ink2); background: none; }
.ob-mini { flex: none; height: 34px; padding: 0 14px; border: none; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 650; color: #fff; background: var(--lh-grad); }
.ob-x { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: none; border-radius: 50%; cursor: pointer; color: var(--lh-ink3); background: none; }
.ob-recap { align-self: stretch; margin: 2px 0 4px; padding: 4px 14px; border-radius: 20px; background: var(--lh-glass); border: 1px solid var(--lh-glass-b); box-shadow: 0 10px 28px var(--lh-shadow); animation: ob-in 0.3s ease; }
.ob-recap .rc { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 14.5px; line-height: 1.4; }
.ob-recap .rc + .rc { border-top: 1px solid var(--hairline); }
.ob-recap .e { flex: none; font-size: 18px; }

/* "put me on your home screen" — a looping 8s demo: the button, the menu/sheet, the icon landing */
.ob-demo { align-self: stretch; display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 22px; background: var(--lh-glass); border: 1px solid var(--lh-glass-b); box-shadow: 0 10px 28px var(--lh-shadow); animation: ob-in 0.3s ease; }
.ob-demo.small { padding: 12px 14px; }
.dm-note { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.dm-note i { font-size: 20px; color: var(--accent); }
.dm-phone { flex: none; width: 116px; height: 232px; padding: 6px; border-radius: 26px; background: #15111C; box-shadow: inset 0 0 0 2px #2C2538, 0 12px 24px rgba(20, 12, 40, 0.25); }
.dm-phone.wide { width: 176px; height: 116px; border-radius: 12px; }
.dm-screen { position: relative; width: 100%; height: 100%; overflow: hidden; direction: ltr; border-radius: 20px; background: #F4F1FC; }
.dm-phone.wide .dm-screen { border-radius: 8px; }
.dm-page { position: absolute; inset: 12px 10px 42px; display: flex; flex-direction: column; gap: 7px; }
.ob-demo.android .dm-page, .ob-demo.desktop .dm-page { inset: 38px 10px 10px; }
.dm-page span { height: 9px; border-radius: 5px; background: #DCD4F5; }
.dm-page span.s { width: 60%; }
.dm-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; display: flex; align-items: center; justify-content: space-around; font-size: 14px; color: #6B6485; background: #fff; border-top: 1px solid #E7E2F5; }
.ob-demo.android .dm-bar, .ob-demo.desktop .dm-bar { top: 0; bottom: auto; justify-content: flex-end; gap: 8px; padding: 0 8px; border-top: none; border-bottom: 1px solid #E7E2F5; }
.ob-demo.android .dm-url, .ob-demo.desktop .dm-url { flex: 1; }
.dm-url { padding: 2px 10px; border-radius: 6px; font-size: 9px; color: #8E88A8; background: #EFEBFB; }
.dm-share { position: relative; color: #7C5CFF; }
.dm-share::after, .dm-row.hit::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid rgba(124, 92, 255, 0.85); background: rgba(124, 92, 255, 0.25); opacity: 0; pointer-events: none; }
.dm-share::after { animation: dm-ring-a 8s infinite; }
.dm-sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 6px 10px; border-radius: 14px 14px 0 0; background: #fff; box-shadow: 0 -8px 20px rgba(20, 12, 40, 0.15); transform: translateY(105%); animation: dm-sheet 8s infinite; }
.ob-demo.android .dm-sheet, .ob-demo.desktop .dm-sheet { top: 30px; bottom: auto; left: auto; right: 4px; width: 80%; padding: 5px; border-radius: 10px; box-shadow: 0 8px 20px rgba(20, 12, 40, 0.2); transform: scale(0); transform-origin: top right; animation-name: dm-menu; }
.dm-row { position: relative; display: flex; align-items: center; gap: 5px; padding: 6px; border-radius: 7px; font-size: 9.5px; color: #1D1733; direction: rtl; }
.dm-row.hit { animation: dm-hit 8s infinite; }
.dm-row.hit::after { left: 20%; animation: dm-ring-b 8s infinite; }
.dm-home { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: 8px; padding: 18px 10px; opacity: 0; background: linear-gradient(160deg, #8E6BFF, #5A7CFF 60%, #C06CF0); animation: dm-home 8s infinite; }
.dm-phone.wide .dm-home { grid-template-columns: repeat(7, 1fr); padding: 12px 10px; }
.dm-home span { aspect-ratio: 1; border-radius: 7px; background: rgba(255, 255, 255, 0.35); }
.dm-home .lloyd { display: grid; place-items: center; font-size: 12px; color: #fff; background: conic-gradient(from 210deg, #7B5CFF, #5B8CFF, #C06CF0, #7B5CFF); box-shadow: 0 0 0 2px #fff; transform: scale(0); animation: dm-pop 8s infinite; }
.dm-steps { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.dm-steps li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.4; opacity: 0.45; }
.dm-steps li:nth-child(1) { animation: dm-s1 8s infinite; }
.dm-steps li:nth-child(2) { animation: dm-s2 8s infinite; }
.dm-steps li:nth-child(3) { animation: dm-s3 8s infinite; }
.dm-steps .n { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff; background: var(--lh-grad); }
.dm-steps li > i { flex: none; margin-top: 2px; font-size: 17px; color: var(--accent); }
@keyframes dm-ring-a { 0%, 4% { opacity: 0; transform: scale(0.6); } 12% { opacity: 1; transform: scale(1); } 22%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes dm-ring-b { 0%, 38% { opacity: 0; transform: scale(0.6); } 46% { opacity: 1; transform: scale(1); } 56%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes dm-sheet { 0%, 26% { transform: translateY(105%); } 32%, 60% { transform: translateY(0); } 64%, 100% { transform: translateY(105%); } }
@keyframes dm-menu { 0%, 26% { transform: scale(0); } 32%, 60% { transform: scale(1); } 64%, 100% { transform: scale(0); } }
@keyframes dm-hit { 0%, 42% { background: transparent; } 46%, 60% { background: #EEE9FF; } 64%, 100% { background: transparent; } }
@keyframes dm-home { 0%, 62% { opacity: 0; } 66%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dm-pop { 0%, 68% { transform: scale(0); } 74% { transform: scale(1.2); } 78%, 100% { transform: scale(1); } }
@keyframes dm-s1 { 0%, 28% { opacity: 1; } 32%, 100% { opacity: 0.45; } }
@keyframes dm-s2 { 0%, 28% { opacity: 0.45; } 32%, 60% { opacity: 1; } 64%, 100% { opacity: 0.45; } }
@keyframes dm-s3 { 0%, 62% { opacity: 0.45; } 66%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dm-share::after, .dm-row.hit::after, .dm-home, .dm-home .lloyd, .dm-steps li { animation: none; }
  .dm-sheet { animation: none; transform: none; }
  .dm-steps li { opacity: 1; }
}
@media (max-width: 380px) {
  .dm-phone { width: 96px; height: 192px; }
  .ob-cards.two { grid-template-columns: 1fr; }
}
@media (hover: hover) {
  .ob-card:not(.static):not(.locked):hover, .ob-pill:not(.primary):hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
  .ob-skip:hover, .ob-later:hover, .ob-x:hover { color: var(--lh-ink); }
}
/* the notifications demo: bell → the system asks → "אפשר" → a reminder on the lock screen (same 8s rhythm) */
.dm-app { position: absolute; inset: 0; background: #F4F1FC; }
.dm-apptop { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 6px; }
.dm-orb { flex: none; width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(from 210deg, #7B5CFF, #5B8CFF, #C06CF0, #7B5CFF); }
.dm-bell { position: relative; font-size: 15px; color: #7C5CFF; }
.dm-bell::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid rgba(124, 92, 255, 0.85); background: rgba(124, 92, 255, 0.25); opacity: 0; animation: dm-ring-a 8s infinite; }
.ob-demo.notif .dm-page { inset: 34px 10px 10px; }
.dm-alert { position: absolute; left: 10%; right: 10%; top: 32%; padding: 10px 6px 0; border-radius: 12px; direction: rtl; text-align: center; background: rgba(250, 250, 252, 0.97); box-shadow: 0 10px 26px rgba(20, 12, 40, 0.3); opacity: 0; transform: scale(0.92); animation: dm-alert 8s infinite; }
.ob-demo.notif.desktop .dm-alert { left: 5px; right: auto; width: 62%; top: 5px; }
.dm-at { padding: 0 2px 8px; font-size: 9px; font-weight: 700; line-height: 1.35; color: #1D1733; }
.dm-ab { display: flex; border-top: 1px solid #E4E0EE; }
.dm-ab span { flex: 1; padding: 7px 0; font-size: 9.5px; color: #3478F6; }
.dm-ab span + span { border-inline-start: 1px solid #E4E0EE; }
.dm-ab .hit { position: relative; font-weight: 700; animation: dm-hit 8s infinite; }
.dm-ab .hit::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid rgba(124, 92, 255, 0.85); background: rgba(124, 92, 255, 0.25); opacity: 0; animation: dm-ring-b 8s infinite; }
.dm-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 22px; opacity: 0; background: linear-gradient(160deg, #2E2560, #6246E0 70%, #9A6BFF); animation: dm-home 8s infinite; }
.dm-phone.wide .dm-lock { justify-content: flex-end; align-items: flex-end; padding: 8px; background: #EDE9F8; }
.dm-clock { font-size: 26px; font-weight: 300; letter-spacing: -0.02em; color: #fff; }
.dm-phone.wide .dm-clock { display: none; }
.dm-banner { width: 88%; margin-top: 14px; display: flex; align-items: center; gap: 6px; padding: 7px; border-radius: 10px; direction: rtl; font-size: 8.5px; line-height: 1.3; color: #1D1733; background: rgba(255, 255, 255, 0.9); box-shadow: 0 6px 16px rgba(20, 12, 40, 0.2); opacity: 0; transform: translateY(-24px); animation: dm-banner 8s infinite; }
.dm-phone.wide .dm-banner { width: 70%; margin: 0; transform: translateY(20px); }
@keyframes dm-alert { 0%, 26% { opacity: 0; transform: scale(0.92); } 32%, 60% { opacity: 1; transform: none; } 64%, 100% { opacity: 0; transform: scale(0.96); } }
@keyframes dm-banner { 0%, 68% { opacity: 0; transform: translateY(-24px); } 74%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.dm-steps.static li { opacity: 1; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .dm-bell::after, .dm-ab .hit, .dm-ab .hit::after, .dm-lock, .dm-banner { animation: none; }
  .dm-alert { animation: none; opacity: 1; transform: none; }
}

/* ==================== where in the world + which money (places.js — onboarding + Settings) ==================== */
.ob-pills { align-items: center; }
.pl { display: flex; flex-direction: column; gap: 10px; }
.pl-search { display: flex; align-items: center; gap: 8px; height: 46px; padding-inline: 14px; border-radius: 999px; cursor: text; background: var(--lh-glass); border: 1px solid var(--lh-glass-b); box-shadow: 0 6px 18px var(--lh-shadow); }
.pl-search:focus-within { border-color: color-mix(in srgb, #8B6CFF 42%, transparent); }
.pl-search i { font-size: 18px; color: var(--lh-ink3); }
.pl-search input { flex: 1; min-width: 0; height: 40px; padding: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 16px; color: var(--lh-ink); }
.pl-search input::placeholder { color: var(--lh-ink3); }
.pl-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.pl-chips[hidden] { display: none; }
.pl-chip { height: 36px; padding: 0 11px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--lh-ink2); background: var(--lh-glass); border: 1px solid var(--lh-glass-b); }
.pl-chip.on { color: #fff; border-color: transparent; background: var(--lh-user); }
.pl-list { position: relative; max-height: min(40vh, 340px); overflow-y: auto; overscroll-behavior: contain; border-radius: 20px; background: var(--lh-glass); border: 1px solid var(--lh-glass-b); box-shadow: 0 10px 26px var(--lh-shadow); }
.pl-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: none; border-bottom: 1px solid var(--hairline); background: none; cursor: pointer; font: inherit; text-align: start; color: var(--lh-ink); }
.pl-row:last-child { border-bottom: none; }
.pl-row:active { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pl-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pl-row .t { font-size: 15px; font-weight: 600; }
.pl-row .s { font-size: 12.5px; line-height: 1.35; color: var(--lh-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-row .tm { flex: none; font-size: 14px; font-weight: 600; color: var(--lh-ink2); direction: ltr; }
.pl-row .ck { flex: none; font-size: 18px; color: var(--accent); visibility: hidden; }
.pl-row.on .ck { visibility: visible; }
.pl-row.on .t { color: var(--accent); }
.pl-sym { flex: none; min-width: 38px; height: 38px; padding: 0 6px; border-radius: 12px; display: grid; place-items: center; font-size: 17px; font-weight: 700; direction: ltr; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pl-empty { padding: 18px 14px; text-align: center; font-size: 13.5px; color: var(--lh-ink2); }
.ob-ask .pl-list { max-height: min(34vh, 300px); }
.sheet .pl-list { max-height: max(200px, calc(88dvh - 340px)); } /* the whole sheet fits — no scroll inside a scroll */
/* phones: typing in the search = the keyboard is up — drop the region chips and shorten the list so both fit above it */
@media (pointer: coarse) {
  .pl-search:focus-within + .pl-chips { display: none; }
  .ob-ask .pl:focus-within .pl-list { max-height: min(26vh, 220px); }
  .sheet .pl:focus-within .pl-list { max-height: 200px; }
}
/* keyboard up in the onboarding: the answer area may shrink and scroll instead of being clipped */
body.kb-open .ob-dock { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
/* bigger tap areas for the small controls, without changing how they look */
.ob-later, .ob-skip, .ob-x { position: relative; }
.ob-later::after, .ob-skip::after, .ob-x::after { content: ""; position: absolute; inset: -6px; }
.pl-dev { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border-radius: 16px; cursor: pointer; font: inherit; text-align: start; color: var(--lh-ink); background: color-mix(in srgb, var(--accent) 8%, var(--lh-glass)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.pl-dev > i { flex: none; font-size: 20px; color: var(--accent); }
.pl-dev .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pl-dev .t { font-size: 14.5px; font-weight: 650; }
.pl-dev .s { font-size: 12.5px; color: var(--lh-ink2); }
@media (hover: hover) {
  .pl-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
  .pl-chip:hover { color: var(--lh-ink); }
}

/* the place the device reports — "זיהיתי לפי המכשיר", with a locating ping */
.ob-place { align-self: stretch; display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 22px; background: var(--lh-glass); border: 1px solid var(--lh-glass-b); box-shadow: 0 10px 28px var(--lh-shadow); animation: ob-in 0.3s ease; }
.ob-place .ic { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--lh-grad); box-shadow: 0 6px 16px rgba(110, 90, 255, 0.35); }
.ob-place .ic i { font-size: 22px; }
.ob-place .ic::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #8B6CFF; opacity: 0; animation: pl-ping 1.6s ease-out 0.2s 3; }
.ob-place .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ob-place .k { font-size: 11.5px; font-weight: 600; color: var(--lh-ink3); }
.ob-place .t { font-size: 17px; font-weight: 700; }
.ob-place .s { font-size: 12.5px; line-height: 1.35; color: var(--lh-ink2); }
.ob-place .tm { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 10px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ob-place .tm b { font-size: 18px; font-weight: 700; direction: ltr; color: var(--accent); }
.ob-place .tm span { font-size: 10.5px; color: var(--lh-ink2); }
@keyframes pl-ping { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }

/* the currency cards: the one that fits where they are is lit */
.ob-card .ic.glyph { width: auto; min-width: 38px; padding: 0 7px; font-size: 20px; font-weight: 700; direction: ltr; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ob-card .ic.glyph.long { font-size: 14px; } /* "CHF", "zł", "R$" — grow the tile, not spill out of it */
.ob-card.cur.on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--lh-glass)); }
.ob-card.cur.on .s { font-weight: 600; color: var(--accent); }
.ob-card.wide { grid-column: 1 / -1; }
.ob-cards.curs { grid-template-columns: 1fr 1fr; } /* short cards — stay 2×2 even on the narrowest phones */
@media (prefers-reduced-motion: reduce) { .ob-place .ic::after { animation: none; } }

/* ==================== LLOYD ALIVE (2026-10) — the character + the Duolingo layer ====================
   The character engine is web/critter.js (stacked SVG layers); this is its frame, the home's game bar,
   Lloyd + his line, the daily goal, the full-screen moments (streak / sick / health / yay / focus) and the
   look picker. Chunky buttons with a bottom "lip", 2px lavender outlines, Rubik 800/900. */
:root {
  --duo-ground: #F3EEFE; --duo-card: #FFFFFF; --duo-line: #E3DCF5; --duo-dash: #CFC6E8;
  --duo-ink: #1D1832; --duo-sub: #5A5373; --duo-sub-strong: #4E4766;
  --duo-violet: #6A45F5; --duo-violet-lip: #4A2BC2; --duo-violet-text: #5B3DE0;
  --duo-green: #168457; --duo-green-lip: #0F6340; --duo-goal: #1FB36F;
  --duo-orange: #FF8A00; --duo-orange-text: #B85200; --duo-orange-big: #D35F00;
  --duo-blue-text: #2C6FD0; --duo-heart: #F0445F; --duo-heart-off: #E3DCF5;
  --duo-tint: #ECE6FF; --duo-tint-soft: #F4F0FF; --duo-freeze-bg: #E3EFFD; --duo-freeze-text: #1F5FB0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --duo-ground: #120D20; --duo-card: #1B1629; --duo-line: rgba(255, 255, 255, 0.12); --duo-dash: rgba(255, 255, 255, 0.22);
    --duo-ink: #F3F0FF; --duo-sub: #A59CC8; --duo-sub-strong: #C9C2E8;
    --duo-violet: #7C5CFF; --duo-violet-lip: #4A2BC2; --duo-violet-text: #C9B8FF;
    --duo-green: #1E9E66; --duo-green-lip: #0F6340; --duo-goal: #2BC77F;
    --duo-orange-text: #FFB25C; --duo-orange-big: #FF9A3D; --duo-blue-text: #8DBBFF; --duo-heart-off: rgba(255, 255, 255, 0.16);
    --duo-tint: #2A2145; --duo-tint-soft: #241D36; --duo-freeze-bg: #13253D; --duo-freeze-text: #9CC8FF;
  }
}
:root[data-theme="dark"] {
  --duo-ground: #120D20; --duo-card: #1B1629; --duo-line: rgba(255, 255, 255, 0.12); --duo-dash: rgba(255, 255, 255, 0.22);
  --duo-ink: #F3F0FF; --duo-sub: #A59CC8; --duo-sub-strong: #C9C2E8;
  --duo-violet: #7C5CFF; --duo-violet-lip: #4A2BC2; --duo-violet-text: #C9B8FF;
  --duo-green: #1E9E66; --duo-green-lip: #0F6340; --duo-goal: #2BC77F;
  --duo-orange-text: #FFB25C; --duo-orange-big: #FF9A3D; --duo-blue-text: #8DBBFF; --duo-heart-off: rgba(255, 255, 255, 0.16);
  --duo-tint: #2A2145; --duo-tint-soft: #241D36; --duo-freeze-bg: #13253D; --duo-freeze-text: #9CC8FF;
}

/* the character frame */
.critter { position: relative; flex: none; display: inline-block; }
.critter > .cr-l { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.critter svg.cr-l { display: block; }

/* home: the game bar · Lloyd + his line · the daily goal */
.duo-top { margin: 4px 0 12px; }
.duo-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: nowrap; }
.duo-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 11px 0 9px; border-radius: 999px;
  background: var(--duo-card); border: 2px solid var(--duo-line); font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
}
.duo-chip svg { width: 20px; height: 20px; flex: none; }
.duo-streak { color: var(--duo-orange-text); }
.duo-streak.cold svg path { fill: var(--duo-dash); }
.duo-gems { color: var(--duo-blue-text); }
.duo-hearts { gap: 1px; padding: 0 9px; }
.duo-hearts svg { width: 14px; height: 14px; }
.h-on { fill: var(--duo-heart); }
.h-off { fill: var(--duo-heart-off); }
.skel-chip { width: 62px; padding: 0; background: var(--duo-line); border: 0; opacity: 0.6; animation: pulseDot 1.6s ease-in-out infinite; }
.duo-head { margin: 0 0 8px; align-items: center; }
.duo-lloyd { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.duo-me { flex: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.duo-me .critter { transition: transform 0.12s; }
.duo-me:active .critter { transform: scale(0.96); }
.duo-say {
  flex: 1; min-width: 0; background: var(--duo-card); border: 2px solid var(--duo-line); border-radius: 20px;
  padding: 12px 14px; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--duo-ink);
}
.skel-me { display: block; width: 128px; height: 128px; border-radius: 50%; background: var(--duo-line); opacity: 0.45; }
.skel-say { min-height: 52px; opacity: 0.5; }
.duo-card { background: var(--duo-card); border: 2px solid var(--duo-line); border-radius: 22px; }
.duo-goal { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 0 0 16px; }
.duo-ring { width: 64px; height: 64px; flex: none; }
.duo-ring .r-bg { fill: none; stroke: var(--duo-line); stroke-width: 8; }
.duo-ring .r-fg { fill: none; stroke: var(--duo-goal); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.duo-ring text { font-family: Rubik, sans-serif; font-size: 17px; font-weight: 800; fill: var(--duo-ink); }
.duo-goal .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.duo-goal-t { font-size: 17px; font-weight: 800; color: var(--duo-ink); }
.duo-goal-s { font-size: 13.5px; color: var(--duo-sub); }
.duo-bars { display: flex; gap: 6px; margin-top: 4px; }
.duo-bars span { height: 10px; flex: 1; border-radius: 99px; background: var(--duo-line); transition: background 0.3s; }
.duo-bars span.on { background: var(--duo-goal); }

/* chunky buttons with a lip */
.duo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 16px;
  padding: 14px 18px; font: inherit; font-size: 16px; font-weight: 800; color: #fff; cursor: pointer; text-decoration: none;
  transition: transform 0.08s, box-shadow 0.08s; -webkit-tap-highlight-color: transparent;
}
.duo-btn svg { width: 18px; height: 18px; flex: none; }
.duo-btn.violet { background: var(--duo-violet); box-shadow: 0 4px 0 var(--duo-violet-lip); }
.duo-btn.green { background: var(--duo-green); box-shadow: 0 4px 0 var(--duo-green-lip); }
.duo-btn.ghost { background: var(--duo-card); color: var(--duo-violet-text); border: 2px solid var(--duo-line); box-shadow: 0 4px 0 var(--duo-line); }
.duo-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--duo-violet-lip); }
.duo-btn.green:active { box-shadow: 0 1px 0 var(--duo-green-lip); }
.duo-btn.ghost:active { box-shadow: 0 1px 0 var(--duo-line); }
.duo-btn[disabled] { opacity: 0.45; pointer-events: none; }
.duo-btn.grow { flex: 1; }
.duo-btn .spin { width: 16px; height: 16px; border: 2px solid currentColor; border-inline-start-color: transparent; border-radius: 50%; animation: rot 0.7s linear infinite; }
.duo-acts { display: flex; gap: 10px; margin-top: 14px; }
/* the home's "now" card in the Duolingo look */
.duo .hm-hero { background: var(--duo-card); border: 2px solid var(--duo-line); box-shadow: none; border-radius: 22px; }
.duo .hm-hero .eyebrow { color: var(--duo-violet-text); font-weight: 800; }
.duo .hm-hero .btn.primary { background: var(--duo-violet); border-radius: 16px; font-weight: 800; box-shadow: 0 4px 0 var(--duo-violet-lip); border: 0; }
.duo .hm-hero .btn.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--duo-violet-lip); }
.hm-skip { margin-top: 10px; background: none; border: 0; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--duo-sub); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; }

/* full-screen moments */
.duo-full {
  position: fixed; inset: 0; z-index: 80; background: var(--duo-ground); color: var(--duo-ink); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: calc(env(safe-area-inset-top) + 22px) 22px calc(env(safe-area-inset-bottom) + 22px); animation: duo-in 0.22s ease;
}
.duo-full > * { width: 100%; max-width: 420px; box-sizing: border-box; }
.duo-full.out { animation: duo-out 0.18s ease forwards; }
@keyframes duo-in { from { opacity: 0; transform: scale(0.97); } }
@keyframes duo-out { to { opacity: 0; transform: scale(0.98); } }
.duo-full > .ss-glow { position: absolute; top: 34px; left: 50%; width: 320px; height: 320px; margin-left: -160px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 170, 60, 0.42), rgba(255, 170, 60, 0) 70%); }
.duo-full > .ss-art { position: relative; width: 200px; height: 224px; margin-top: 10px; flex: none; }
.ss-flame { width: 200px; height: 220px; display: block; overflow: visible; }
.ss-lloyd { position: absolute; bottom: -8px; left: -34px; }
.ss-num { position: relative; font-size: 92px; font-weight: 900; line-height: 1; color: var(--duo-orange-big); letter-spacing: -0.02em; }
.ss-title { position: relative; font-size: 28px; font-weight: 900; color: var(--duo-ink); }
.duo-full > .ss-sub, .ss-sub { position: relative; font-size: 16px; color: var(--duo-sub); max-width: 320px; line-height: 1.45; }
.ss-weekcard { position: relative; padding: 16px 12px 14px; display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.duo-week { display: flex; justify-content: space-between; }
.wk { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--duo-sub); min-width: 36px; }
.wk.today { color: var(--duo-ink); font-weight: 800; }
.wk-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box; }
.wk-dot svg { width: 18px; height: 18px; }
.wk-dot.won { background: var(--duo-orange); }
.wk-dot.won.now { box-shadow: 0 0 0 4px #FFD9B0; }
.wk-dot.frozen { background: var(--duo-freeze-bg); }
.wk-dot.todo { border: 2px dashed var(--duo-dash); }
.wk-dot.todo.now { border: 2px solid var(--duo-orange); }
.wk-dot.miss { background: var(--duo-line); }
.ss-freeze { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--duo-freeze-bg); color: var(--duo-freeze-text); border-radius: 12px; padding: 8px 12px; font-size: 14px; font-weight: 700; text-align: start; }
.ss-freeze svg { width: 18px; height: 18px; flex: none; }
.ss-best { font-size: 13.5px; font-weight: 700; color: var(--duo-sub); }
.ss-go { margin-top: auto; padding: 17px 16px; font-size: 18px; border-radius: 18px; }
.duo-full .duo-btn.violet.ss-go, .duo-pick .pk-go { box-shadow: 0 5px 0 var(--duo-violet-lip); }
.yay-me { margin-top: 48px; display: grid; place-items: center; }
.sk-top { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--duo-sub); }
.sk-hearts { display: flex; gap: 3px; margin-inline-start: auto; }
.sk-hearts svg { width: 20px; height: 20px; }
.sk-x { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--duo-line); background: var(--duo-card); color: var(--duo-ink); display: grid; place-items: center; cursor: pointer; flex: none; font-size: 18px; padding: 0; }
.sk-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 4px; }
.sk-heal { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; text-align: start; }
.sk-heal-top { display: flex; align-items: center; justify-content: space-between; font-size: 17px; }
.sk-of { font-size: 14px; font-weight: 800; color: var(--duo-green); }
.sk-note { font-size: 13.5px; color: var(--duo-sub); }
.sk-list-h { font-size: 13px; font-weight: 800; color: var(--duo-violet-text); text-align: start; }
.sk-list { display: flex; flex-direction: column; gap: 8px; }
.sk-row { display: flex; align-items: center; gap: 10px; background: var(--duo-card); border: 2px solid var(--duo-line); border-radius: 16px; padding: 9px 12px; text-align: start; font-size: 15px; font-weight: 600; }
.sk-row .grow { flex: 1; min-width: 0; }
.sk-row.done { opacity: 0.6; }
.duo-ck { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--duo-line); background: var(--duo-card); color: var(--duo-green); display: grid; place-items: center; cursor: pointer; flex: none; font-size: 18px; padding: 0; }
.sk-row.done .duo-ck { background: var(--duo-green); color: #fff; border-color: var(--duo-green); }
.sk-empty { font-size: 14px; color: var(--duo-sub); line-height: 1.5; background: var(--duo-card); border: 2px dashed var(--duo-line); border-radius: 16px; padding: 12px; text-align: start; }
.hl-rules { padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; text-align: start; font-size: 14px; line-height: 1.5; color: var(--duo-sub); }
.hl-rules b { color: var(--duo-ink); }

/* focus mode — always a calm dark room */
.duo-full.duo-focus { background: radial-gradient(120% 70% at 50% 0%, #2A1E5C 0%, #120C24 70%); color: #fff; }
.duo-focus > .fo-x { position: absolute; top: calc(env(safe-area-inset-top) + 14px); left: 16px; width: 36px; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); color: #fff; }
.fo-label { margin-top: 18px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; color: #C9B8FF; }
.fo-title { font-size: 22px; font-weight: 800; line-height: 1.3; }
.duo-full > .fo-ring { position: relative; width: 220px; height: 220px; margin: 8px auto 0; flex: none; }
.fo-ring > svg { width: 220px; height: 220px; display: block; }
.fo-ring .r-bg { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 10; }
.fo-ring .r-fg { fill: none; stroke: #8E6BFF; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.fo-me { position: absolute; inset: 0; display: grid; place-items: center; }
.fo-time { font-size: 56px; font-weight: 900; letter-spacing: 0.02em; }
.fo-note { font-size: 15px; color: #C9C2E8; }
.fo-acts { display: flex; gap: 10px; margin-top: auto; }
.fo-acts .duo-btn { flex: 1; }
.duo-focus .duo-btn.ghost { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 4px 0 rgba(255, 255, 255, 0.08); }
.duo-ask .fo-acts { margin-top: 18px; }

/* the look picker */
.duo-pick { display: flex; flex-direction: column; gap: 10px; color: var(--duo-ink); }
.pk-head { display: flex; flex-direction: column; gap: 2px; }
.pk-t { font-size: 24px; font-weight: 900; }
.pk-s { font-size: 13.5px; color: var(--duo-sub); }
.pk-preview { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 24px; }
.pk-big { width: 140px; height: 140px; border-radius: 50%; background: var(--duo-tint); display: grid; place-items: center; flex: none; }
.pk-info { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.pk-name { font-size: 20px; font-weight: 900; }
.pk-react { font-size: 12.5px; color: var(--duo-sub); }
.pk-moods { display: flex; gap: 0; flex-wrap: nowrap; margin-inline-start: -4px; }
.pk-hues { display: flex; align-items: center; gap: 10px; }
.pk-hues span { font-size: 13px; font-weight: 800; color: var(--duo-violet-text); }
.pk-hues button { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--duo-card); box-shadow: 0 0 0 1px var(--duo-line); padding: 0; cursor: pointer; }
.pk-hues button[aria-checked="true"] { box-shadow: 0 0 0 2px var(--duo-violet); }
.pk-groups { display: flex; gap: 5px; flex-wrap: wrap; }
.pk-groups button { border: 2px solid var(--duo-line); border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 13px; font-weight: 700; color: var(--duo-sub-strong); background: var(--duo-card); cursor: pointer; }
.pk-groups button.on { background: var(--duo-violet); border-color: var(--duo-violet); color: #fff; }
.pk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.pk-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; background: var(--duo-card); border: 2px solid var(--duo-line); border-radius: 14px; padding: 3px 2px 5px; font: inherit; color: var(--duo-ink); cursor: pointer; min-width: 0; }
.pk-cell span { font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pk-cell.on { border: 3px solid var(--duo-violet); background: var(--duo-tint-soft); padding: 2px 1px 4px; }
.pk-cell.soon { border: 2px dashed var(--duo-dash); cursor: default; }
.pk-go { width: 100%; margin-top: 6px; padding: 15px; font-size: 18px; border-radius: 18px; }
.duo-pick-view .duo-pick { margin-top: 6px; }
.set-lloyd { width: 34px; height: 34px; flex: none; display: grid; place-items: center; }
@media (max-width: 360px) {
  .duo-chip { height: 34px; padding: 0 8px 0 7px; font-size: 14.5px; }
  .duo-hearts svg { width: 12px; height: 12px; }
  .pk-big { width: 120px; height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .duo-full, .duo-full.out { animation: none; } }

.duo-pickfull { text-align: start; }
.duo-pickfull > .pk-x { position: absolute; top: calc(env(safe-area-inset-top) + 14px); left: 16px; width: 36px; z-index: 2; }
.ob-look { display: inline-flex; vertical-align: middle; margin-inline-end: 4px; }
/* Lloyd's character standing in for the brand orb (chat header, conversation list, the "לויד" tag) */
.lh-orb:has(.critter) { background: none; box-shadow: none; overflow: visible; }
.lh-orb .critter { width: 100% !important; height: 100% !important; }

/* ---------- the SHARED PET (Pact.dc.html / PetPick.dc.html) ---------- */
:root { --pet-ground: #E3F6F0; --pet-ink: #1D5A4C; --warn-bg: #FDF0DC; --warn-ink: #6B3F00; --av-me: #6A45F5; --av-them: #C2501E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pet-ground: #132A25; --pet-ink: #9EE3CF; --warn-bg: #2E2410; --warn-ink: #F3C77A; } }
:root[data-theme="dark"] { --pet-ground: #132A25; --pet-ink: #9EE3CF; --warn-bg: #2E2410; --warn-ink: #F3C77A; }
.pet-box { display: inline-grid; place-items: center; flex: none; }
/* home card */
.pet-home { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; margin: 0 0 16px; font: inherit; color: var(--duo-ink); text-align: start; cursor: pointer; }
.pet-home-av { width: 60px; height: 60px; border-radius: 50%; background: var(--pet-ground); display: grid; place-items: center; flex: none; overflow: visible; }
.pet-home .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pet-home-t { font-size: 16px; font-weight: 800; }
.pet-home-s { font-size: 13.5px; color: var(--duo-sub); }
.pet-home-streak { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 800; color: var(--duo-orange-text); flex: none; }
.pet-home-streak svg { width: 18px; height: 18px; }
.pet-home.invite { border-style: dashed; }
/* the pact screen */
.duo-pact { color: var(--duo-ink); }
.duo-pact > [data-body] { display: flex; flex-direction: column; gap: 12px; }
.pact-head { display: flex; align-items: center; gap: 10px; }
.pact-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pact-name { font-size: 22px; font-weight: 900; }
.pact-sub { font-size: 13.5px; color: var(--duo-sub); }
.pact-avs { display: flex; flex: none; }
.av { width: 36px; height: 36px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 800; border: 2px solid var(--duo-ground); box-sizing: border-box; }
.av.me { background: var(--av-me); }
.av.them { background: var(--av-them); margin-inline-start: -10px; }
.av.sm { width: 32px; height: 32px; font-size: 14px; margin: 0; border: 0; flex: none; }
.pet-stage { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--pet-ground); border-radius: 26px; padding: 12px 12px 14px; }
.pet-stage.gone { opacity: 0.75; }
.pet-pill { background: var(--duo-card); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 700; color: var(--pet-ink); text-align: center; }
.pet-note { font-size: 13.5px; color: var(--pet-ink); }
.pet-hearts { display: flex; gap: 4px; }
.pet-hearts svg { width: 22px; height: 22px; }
.pact-today { padding: 14px; display: flex; flex-direction: column; gap: 11px; }
.pact-today-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pact-today-h b { font-size: 16px; font-weight: 800; }
.pact-today-h span { font-size: 13px; color: var(--duo-sub); flex: none; }
.pact-row { display: flex; align-items: center; gap: 10px; }
.pact-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pr-n { font-size: 15px; font-weight: 700; }
.pr-s { font-size: 13px; color: var(--duo-sub); }
.pr-ok { width: 30px; height: 30px; border-radius: 50%; background: var(--duo-green); display: grid; place-items: center; flex: none; }
.pr-ok svg { width: 16px; height: 16px; }
.pr-wait { font-size: 12.5px; font-weight: 700; color: var(--duo-sub); }
.duo-btn.sm { padding: 10px 14px; font-size: 14.5px; border-radius: 14px; box-shadow: 0 3px 0 var(--duo-violet-lip); }
.duo-btn.green.sm { box-shadow: 0 3px 0 var(--duo-green-lip); }
.duo-btn.sm i { font-size: 16px; }
.pact-warn { display: flex; flex-direction: column; gap: 3px; background: var(--warn-bg); border-radius: 18px; padding: 12px 14px; font-size: 14px; line-height: 1.45; color: var(--warn-ink); }
.pact-warn.calm { background: var(--pet-ground); color: var(--pet-ink); }
.pact-warn-t { font-weight: 800; }
.pact-life { display: flex; flex-direction: column; gap: 8px; }
.life-strip { display: flex; align-items: flex-end; justify-content: space-between; padding: 10px 10px 8px; border-radius: 18px; }
.life { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 700; color: var(--duo-sub); opacity: 0.75; }
.life.cur { color: var(--pet-ink); font-weight: 800; opacity: 1; }
.life-sep { width: 2px; height: 46px; background: var(--duo-line); border-radius: 2px; align-self: center; }
.pact-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 16px; text-align: center; }
.pact-empty .duo-btn { width: 100%; }
.pk-lab { font-size: 13px; font-weight: 800; color: var(--duo-violet-text); text-align: start; }
/* the partners list */
.pact-li-pet { width: 46px; height: 46px; border-radius: 50%; background: var(--pet-ground); display: grid; place-items: center; flex: none; }
/* pick a pet together */
.duo-petpick { text-align: start; }
.duo-petpick > .pk-x { position: absolute; top: calc(env(safe-area-inset-top) + 14px); left: 16px; width: 36px; z-index: 2; }
.pp-head { display: flex; align-items: center; gap: 10px; padding-inline-end: 44px; }
.pp-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pp-t { font-size: 21px; font-weight: 900; }
.pp-s { font-size: 13.5px; color: var(--duo-sub); }
.pp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pp-cell { display: flex; align-items: center; gap: 8px; background: var(--duo-card); border: 2px solid var(--duo-line); border-radius: 16px; padding: 4px 8px; font: inherit; color: var(--duo-ink); text-align: start; cursor: pointer; min-width: 0; }
.pp-cell .grow { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pp-n { font-size: 14.5px; font-weight: 800; }
.pp-tr { font-size: 11.5px; color: var(--duo-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-cell.on { background: var(--duo-tint-soft); border: 3px solid var(--duo-violet); padding: 3px 7px; }
.pp-cell.on .pp-tr { color: var(--duo-violet-text); font-weight: 700; }
.pp-cell.surprise { border-style: dashed; border-color: var(--duo-dash); }
.pp-cell.surprise.on { border-style: solid; border-color: var(--duo-violet); }
.pp-name { box-sizing: border-box; width: 100%; border: 2px solid var(--duo-line); border-radius: 14px; background: var(--duo-card); padding: 11px 14px; font: inherit; font-size: 16px; color: var(--duo-ink); }
.pp-name:focus { outline: none; border-color: var(--duo-violet); }

/* ---------- Lloyd thinks on every task (Tasks.dc.html) ---------- */
:root { --th-bg: #ECE6FF; --th-ink: #4A2BC2; --th-only-bg: #F1EFF6; --th-only-ink: #4E4766; --th-box: #F7F4FE; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --th-bg: #2A2145; --th-ink: #C9B8FF; --th-only-bg: #241D36; --th-only-ink: #C9C2E8; --th-box: #241D36; } }
:root[data-theme="dark"] { --th-bg: #2A2145; --th-ink: #C9B8FF; --th-only-bg: #241D36; --th-only-ink: #C9C2E8; --th-box: #241D36; }
.th-chip {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; margin-top: 8px; border: 0; border-radius: 12px;
  padding: 8px 10px; background: var(--th-bg); color: var(--th-ink); font: inherit; font-size: 13.5px; font-weight: 600; text-align: start; cursor: pointer;
}
.th-chip svg { width: 18px; height: 18px; flex: none; }
.th-chip .grow { flex: 1; min-width: 0; }
.th-chip b { font-weight: 800; flex: none; }
.th-chip.only { background: var(--th-only-bg); color: var(--th-only-ink); }
.th-chip.fresh { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--th-ink) 30%, transparent); }
.th-chip.thinking { cursor: default; opacity: 0.85; }
.th-chip.thinking svg { animation: th-pulse 1.2s ease-in-out infinite; }
@keyframes th-pulse { 50% { transform: scale(0.75); opacity: 0.5; } }
.th-banner { display: flex; align-items: center; gap: 8px; background: var(--th-bg); color: var(--th-ink); border-radius: 14px; padding: 9px 12px; font-size: 14px; font-weight: 700; margin: 0 0 12px; }
.th-banner svg { width: 18px; height: 18px; flex: none; }
.hm-hero .th-chip { margin-top: 12px; }
/* the sheet */
.th-sheet { display: flex; flex-direction: column; gap: 12px; color: var(--duo-ink); }
.th-head { display: flex; align-items: center; gap: 10px; }
.th-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.th-title { font-size: 18px; font-weight: 900; }
.th-sub { font-size: 13px; color: var(--duo-sub); }
.th-body { background: var(--th-box); border: 2px solid var(--duo-line); border-radius: 16px; padding: 12px 14px; font-size: 15px; line-height: 1.55; white-space: pre-line; max-height: 46vh; overflow-y: auto; overflow-wrap: anywhere; }
.th-steps { margin: 0; padding: 0 22px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.45; }
.th-src { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12.5px; color: var(--duo-sub); }
.th-src a { color: var(--th-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-acts { display: flex; gap: 8px; flex-wrap: nowrap; }
.th-acts .duo-btn { padding: 12px 10px; font-size: 14.5px; white-space: nowrap; }
.th-acts .duo-btn.grow { flex: 1; min-width: 0; }
@media (max-width: 340px) { .th-acts { flex-wrap: wrap; } }
.th-acts .duo-btn i { font-size: 18px; }
.th-note { font-size: 12.5px; color: var(--duo-sub); text-align: center; }

/* ---------- "זימנו אותך למשחק" — Rush Hour (Game.dc.html) ---------- */
:root { --rh-cover: rgba(243, 238, 254, 0.62); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rh-cover: rgba(18, 13, 32, 0.66); } }
:root[data-theme="dark"] { --rh-cover: rgba(18, 13, 32, 0.66); }
.rh-view [data-body] { display: flex; flex-direction: column; gap: 12px; color: var(--duo-ink); user-select: none; -webkit-user-select: none; }
.rh-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rh-title { font-size: 23px; font-weight: 900; }
.rh-sub { font-size: 14px; color: var(--duo-sub); }
.rh-chip { font-size: 12.5px; font-weight: 800; color: #8A4B00; background: #FDF0DC; border-radius: 999px; padding: 4px 11px; flex: none; }
.rh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rh-stats .duo-card { border-radius: 14px; padding: 7px 8px; text-align: center; display: flex; flex-direction: column; }
.rh-stats b { font-size: 20px; font-weight: 900; }
.rh-stats span { font-size: 12px; color: var(--duo-sub); }
.rh-wrap { position: relative; align-self: center; display: flex; justify-content: center; }
/* the lot: asphalt, faint bays, the exit on the right of Lloyd's row */
.rh-frame { position: relative; display: inline-block; background: #2B2546; border-radius: 22px; padding: 10px; box-shadow: 0 6px 0 #1B1730; }
.rh-lot { position: relative; background: #3A3360; border-radius: 12px; touch-action: none; }
.rh-cell { position: absolute; border-radius: 7px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.rh-exit { position: absolute; right: -7px; width: 14px; background: #C8F250; border-radius: 0 8px 8px 0; box-shadow: 0 0 14px rgba(200, 242, 80, 0.55); }
.rh-car { position: absolute; left: 0; top: 0; touch-action: none; cursor: grab; transition: transform 0.14s ease; will-change: transform; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.rh-car svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rh-car.drag { transition: none; cursor: grabbing; z-index: 3; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35)); }
.rh-car.out { transition: transform 0.75s cubic-bezier(0.55, 0, 0.6, 1); z-index: 3; }
.rh-car.stuck { animation: rh-shake 0.26s; }
@keyframes rh-shake { 25% { margin-left: -2px; } 75% { margin-left: 2px; } }
.rh-driver { position: absolute; pointer-events: none; display: grid; place-items: center; }
.rh-frame.locked .rh-car { cursor: default; }
.rh-cover { position: absolute; inset: 0; display: grid; place-items: center; background: var(--rh-cover); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); border-radius: 22px; z-index: 5; }
.rh-cover-in { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 16px; max-width: 240px; }
.rh-cover-t { font-size: 24px; font-weight: 900; color: var(--duo-ink); }
.rh-cover-s { font-size: 14px; color: var(--duo-sub); line-height: 1.4; }
.rh-cover-in .duo-btn { margin-top: 8px; min-width: 150px; box-shadow: 0 5px 0 var(--duo-violet-lip); font-size: 18px; }
.rh-cover-n { font-size: 12px; color: var(--duo-sub); margin-top: 4px; }
.rh-ctrls { display: flex; gap: 8px; }
.rh-ctrls .duo-btn { flex: 1; padding: 11px 10px; font-size: 15px; }
/* the friends' board */
.rh-board { padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.rh-board-h { display: flex; align-items: center; justify-content: space-between; }
.rh-board-h b { font-size: 16px; font-weight: 800; }
.rh-board-h span { font-size: 12.5px; color: var(--duo-sub); }
.rh-board-empty { font-size: 13.5px; color: var(--duo-sub); line-height: 1.45; }
.rh-row { display: flex; align-items: center; gap: 10px; }
.rh-row.me { background: var(--duo-tint-soft); border-radius: 12px; padding: 4px 6px; margin: 0 -6px; }
.rh-rank { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; flex: none; background: #E9E6F2; color: #4E4766; }
.rh-rank.r1 { background: #FFC93D; color: #5C3B00; }
.rh-rank.r2 { background: #E3E6EE; color: #474B57; }
.rh-rank.r3 { background: #F4C7A1; color: #6B3A12; }
.rh-rank.r0 { background: var(--duo-line); color: var(--duo-violet-text); }
.rh-av { width: 30px; height: 30px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; flex: none; }
.rh-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-row.me .rh-name { font-weight: 800; }
.rh-time { font-size: 14px; font-weight: 800; }
.rh-moves { font-size: 12.5px; color: var(--duo-sub); min-width: 64px; text-align: left; }
.rh-now { font-size: 13px; font-weight: 700; color: var(--duo-violet-text); }
.rh-invite { border: 2px solid var(--duo-line); background: var(--duo-card); color: var(--duo-violet-text); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; flex: none; }
.rh-invite[disabled] { opacity: 0.6; cursor: default; }
.rh-tip { display: flex; align-items: center; gap: 10px; background: var(--th-bg, #ECE6FF); border-radius: 16px; padding: 10px 12px; font-size: 14px; font-weight: 700; color: var(--th-ink, #4A2BC2); line-height: 1.4; }
.rh-done { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.rh-done-t { font-size: 22px; font-weight: 900; }
.rh-done-s { font-size: 14.5px; color: var(--duo-sub); }
.rh-done-acts { display: flex; justify-content: center; margin-top: 6px; }
.rh-levels { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.rh-lv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rh-lv .duo-btn { padding: 11px 8px; font-size: 15px; }
/* the home card */
.rh-home { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; margin: 0 0 16px; font: inherit; color: var(--duo-ink); text-align: start; cursor: pointer; }
.rh-home-ic { width: 64px; height: 32px; flex: none; display: grid; place-items: center; }
.rh-home-ic svg { width: 64px; height: 32px; }
.rh-home .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rh-home-t { font-size: 15.5px; font-weight: 800; }
.rh-home-s { font-size: 13.5px; color: var(--duo-sub); }
.rh-home i { color: var(--duo-sub); }
.rh-home.done .rh-home-t::after { content: " ✓"; color: var(--duo-green); }

/* ---------- correspondence chess ---------- */
.ch-view [data-body] { display: flex; flex-direction: column; gap: 12px; color: var(--duo-ink); }
.ch-lead { font-size: 14px; color: var(--duo-sub); margin: -4px 2px 12px; line-height: 1.45; }
.ch-new { width: 100%; margin-bottom: 14px; }
.ch-note { font-size: 13px; color: var(--duo-sub); margin: 4px 2px 0; }
.ch-li-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: var(--duo-tint); border-radius: 10px; }
.ch-li-ic svg { width: 28px; height: 28px; }
.ch-li.turn .title { font-weight: 800; }
.ch-li.turn .sub { color: var(--duo-violet-text); font-weight: 700; }
.ch-li-acts { display: flex; gap: 6px; flex: none; }
.ch-head { display: flex; align-items: center; gap: 10px; }
.ch-head .grow { flex: 1; min-width: 0; }
.ch-title { font-size: 22px; font-weight: 900; }
.ch-sub { font-size: 13.5px; color: var(--duo-sub); }
.ch-status { flex: none; font-size: 13px; font-weight: 800; border-radius: 999px; padding: 5px 12px; background: var(--duo-line); color: var(--duo-sub-strong); }
.ch-status.turn { background: var(--duo-violet); color: #fff; }
.ch-status.done { background: #FDF0DC; color: #8A4B00; }
.ch-clock { font-size: 14px; color: var(--duo-sub-strong); background: var(--duo-card); border: 2px solid var(--duo-line); border-radius: 14px; padding: 8px 12px; text-align: center; }
.ch-clock.low { border-color: #F3C77A; background: #FDF0DC; color: #6B3F00; }
.ch-board { align-self: center; display: grid; grid-template-columns: repeat(8, 1fr); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 0 #1B1730, 0 0 0 6px #2B2546; margin: 6px 0 10px; }
.ch-sq { position: relative; border: 0; padding: 0; margin: 0; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ch-sq.l { background: #EEE8FF; }
.ch-sq.d { background: #9C8CE0; }
.ch-sq.last.l { background: #F7E9A6; }
.ch-sq.last.d { background: #D9C26A; }
.ch-sq.sel { box-shadow: inset 0 0 0 3px #6A45F5; }
.ch-sq.check { background: radial-gradient(circle, #FF6B6B 0%, #E5484D 45%, transparent 75%) !important; }
.ch-sq .pc { width: 86%; height: 86%; pointer-events: none; }
.pc.pw { fill: #FFFFFF; stroke: #2B2546; stroke-width: 4; stroke-linejoin: round; }
.pc.pb { fill: #2E2A44; stroke: #F3EEFE; stroke-width: 3; stroke-linejoin: round; }
.pc .eye { fill: currentColor; stroke: none; }
.pc.pw .eye { fill: #2B2546; }
.pc.pb .eye { fill: #F3EEFE; }
.pc .cut { fill: none; }
.ch-dot { position: absolute; width: 28%; height: 28%; border-radius: 50%; background: rgba(43, 37, 70, 0.32); pointer-events: none; }
.ch-cap { position: absolute; inset: 6%; border-radius: 50%; box-shadow: inset 0 0 0 4px rgba(43, 37, 70, 0.4); pointer-events: none; }
.ch-coord { position: absolute; font-size: 10px; font-weight: 800; pointer-events: none; opacity: 0.75; }
.ch-coord.r { top: 2px; left: 3px; }
.ch-coord.f { bottom: 1px; right: 4px; }
.ch-sq.l .ch-coord { color: #7A68C9; }
.ch-sq.d .ch-coord { color: #F1ECFF; }
.ch-moves { display: flex; gap: 10px; overflow-x: auto; font-size: 14px; padding: 8px 12px; background: var(--duo-card); border: 2px solid var(--duo-line); border-radius: 14px; white-space: nowrap; scrollbar-width: none; }
.ch-moves.empty { color: var(--duo-sub); justify-content: center; }
.ch-mv b { color: var(--duo-sub); font-weight: 700; }
.ch-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ch-acts .duo-btn { padding: 12px 14px; font-size: 15px; }
.ch-offer { width: 100%; text-align: center; font-weight: 800; color: var(--duo-violet-text); }
.ch-promo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ch-promo button { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--duo-tint); border: 2px solid var(--duo-line); border-radius: 14px; padding: 8px 4px; font: inherit; font-size: 13px; font-weight: 700; color: var(--duo-ink); cursor: pointer; }
.ch-promo svg { width: 48px; height: 48px; }
.ch-home { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; margin: 0 0 16px; font: inherit; color: var(--duo-ink); text-align: start; cursor: pointer; border-color: var(--duo-violet); }
.ch-home-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: #9C8CE0; border-radius: 12px; }
.ch-home-ic svg { width: 36px; height: 36px; }
.ch-home .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-home-t { font-size: 15.5px; font-weight: 800; }
.ch-home-s { font-size: 13.5px; color: var(--duo-sub); }
.ch-home i { color: var(--duo-sub); }

.th-mailhead { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--duo-ink); background: var(--duo-card); border: 2px solid var(--duo-line); border-radius: 14px; padding: 10px 12px; }
.th-mailhead span { color: var(--duo-sub); }
.th-mailhead b { font-weight: 700; unicode-bidi: plaintext; }

/* the fun corner (the shared pets, chess, the day's puzzle) — after the day: it never outranks the tasks */
.hm-fun { margin-top: 26px; }
.hm-fun > .eyebrow { margin-top: 0; }
.hm-fun-cards > div:empty { display: none; }
@media (max-width: 899px) { .hm-fun { margin-bottom: 64px; } } /* the last card clears the mic button */
@media (min-width: 900px) {
  .hm-fun-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 16px; }
}

/* the Rush "send again" bar (Lloyd is out but the solve didn't reach the server) */
.rh-retry { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 10px 0; font-size: 14.5px; font-weight: 700; color: var(--duo-ink); }
.rh-retry .duo-btn { flex: none; padding: 10px 14px; font-size: 15px; }

/* friend chat: WhatsApp ticks (✓ sent · ✓✓ delivered · blue ✓✓ read) and reply quotes that show the photo + jump to it */
.rcpt.delivered { opacity: 0.85; }
.rcpt.seen { opacity: 1; color: #1E88E5; font-weight: 700; }
.bub.user .rcpt.seen, .chat-view .bub.user .rcpt.seen { color: #6FD3FF; }
.chat-quote { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.chat-quote .grow { flex: 1; min-width: 0; }
.chat-quote span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.chat-quote-img { width: 44px; height: 44px; flex: none; object-fit: cover; border-radius: 7px; }
.compose-hint .chat-quote-img { width: 40px; height: 40px; }
.bub.flash { animation: bub-flash 1.6s ease; }
@keyframes bub-flash { 0%, 45% { box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.95); } 100% { box-shadow: 0 0 0 3px rgba(255, 193, 7, 0); } }
.load-older { align-self: center; display: inline-flex; align-items: center; gap: 6px; margin: 4px auto 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--hairline-strong, rgba(127,127,127,.3)); background: var(--surface, transparent); color: var(--text-2, inherit); font: inherit; font-size: 13px; cursor: pointer; }
.load-older[hidden] { display: none; }

/* ---------- 📞 calls (web/calls-core.js) — a full-screen stage over everything, the same in the app and the guest page:
   the top line, the people (a "waiting" hero until someone is in, then a grid of tiles), my own camera in a corner,
   and the buttons ---------- */
.call-screen { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 14px) 12px calc(env(safe-area-inset-bottom) + 22px);
  background: radial-gradient(120% 80% at 50% 0%, #3a2a7a 0%, #1a1233 55%, #0f0b1a 100%); color: #fff; }
body.in-call { overflow: hidden; }
.call-top { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.call-top-line { font-size: 14px; color: rgba(255, 255, 255, 0.78); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-screen:not(.has-people) .call-top-line { visibility: hidden; } /* the hero says it bigger */
.call-rec { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 70, 70, 0.16);
  border: 1px solid rgba(255, 90, 90, 0.35); font-size: 13.5px; font-weight: 550; max-width: 100%; text-align: center; align-self: center; }
.call-rec-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #ff4d4d; animation: call-pulse 1.4s ease-in-out infinite; }
@keyframes call-pulse { 50% { opacity: 0.3; } }
.call-who { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; min-height: 0; }
.call-who[hidden] { display: none; }
.call-ava { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: 48px;
  background: rgba(255, 255, 255, 0.10); box-shadow: 0 0 0 10px rgba(167, 139, 250, 0.10), 0 0 0 22px rgba(167, 139, 250, 0.05); }
.call-ava img { width: 100%; height: 100%; object-fit: cover; }
.call-initial { font-weight: 700; color: #fff; }
.call-name { font-size: 26px; font-weight: 700; max-width: 100%; }
.call-status { font-size: 15px; color: rgba(255, 255, 255, 0.72); }
.call-screen.incoming { justify-content: space-between; }
.call-screen.incoming .call-ava { animation: call-breathe 1.6s ease-in-out infinite; }
@keyframes call-breathe { 50% { box-shadow: 0 0 0 16px rgba(167, 139, 250, 0.16), 0 0 0 32px rgba(167, 139, 250, 0.06); } }
.call-extra { width: 100%; max-width: 420px; margin-top: 10px; }
.call-link { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r); padding: 14px; }
.call-link-url { font-size: 13px; word-break: break-all; color: rgba(255, 255, 255, 0.85); margin-bottom: 10px; }
.call-link-btns { display: flex; gap: 8px; }
.call-link-btns .btn { flex: 1; }

/* the grid: 1 = the whole stage, 2 = stacked (side by side on a wide screen), 3-4 = 2x2, 5-6 = 2x3 */
.call-grid { flex: 1; min-height: 0; display: grid; gap: 8px; grid-template-columns: 1fr; grid-auto-rows: 1fr; }
.call-grid.n0 { display: none; }
.call-grid.n3, .call-grid.n4, .call-grid.n5, .call-grid.n6 { grid-template-columns: 1fr 1fr; }
@media (min-aspect-ratio: 1/1) {
  .call-grid.n2 { grid-template-columns: 1fr 1fr; }
  .call-grid.n5, .call-grid.n6 { grid-template-columns: 1fr 1fr 1fr; }
}
.call-tile { position: relative; min-height: 0; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, 0.07); }
/* who's talking: a green ring drawn OVER the video (an outline would sit under it) */
.call-tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 0 3px transparent; transition: box-shadow 0.15s; }
.call-tile.speaking::after { box-shadow: inset 0 0 0 3px #34c759; }
.call-tile-name { z-index: 2; }
.call-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.call-tile .call-tile-ava { position: absolute; inset: 0; display: none; place-items: center; }
.call-tile.cam-off .call-tile-ava { display: grid; }
.call-tile.cam-off video { visibility: hidden; }
.call-tile-ava .call-initial { width: min(96px, 40%); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  font-size: clamp(22px, 6vw, 40px); background: rgba(167, 139, 250, 0.28); }
.call-tile-name { position: absolute; inset-inline-start: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; font-size: 12.5px;
  background: rgba(0, 0, 0, 0.45); max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* my own camera — a small window in the corner, above the buttons */
.call-self { position: absolute; inset-inline-end: 14px; bottom: calc(env(safe-area-inset-bottom) + 112px); width: 96px; aspect-ratio: 3 / 4;
  border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); z-index: 2; }
.call-self[hidden] { display: none; }
.call-self video { width: 100%; height: 100%; object-fit: cover; }
.call-self video.mirror { transform: scaleX(-1); }
@media (min-width: 700px) { .call-self { width: 150px; } }
.call-screen:has(.call-grid.has-screen) .call-self { width: 64px; } /* a shared screen is on: stay out of its way */

/* one row always — up to 6 buttons on a phone: they share the width, the circles shrink a little */
.call-actions { display: flex; gap: 6px; justify-content: center; }
.call-btn { flex: 1 1 0; min-width: 0; max-width: 76px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff;
  font-size: 11.5px; background: none; border: 0; padding: 0; }
.call-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.call-btn[hidden] { display: none; }
.call-btn i { width: clamp(46px, 13vw, 58px); height: clamp(46px, 13vw, 58px); border-radius: 50%; display: grid; place-items: center;
  font-size: clamp(21px, 6vw, 25px); background: rgba(255, 255, 255, 0.14); }
.call-btn.on i { background: #fff; color: #1a1233; }
.call-btn.end i { background: #ff3b30; }
.call-btn.answer i { background: #34c759; }
.call-screen.incoming .call-actions { gap: 36px; }
.call-screen.incoming .call-btn { flex: 0 0 auto; max-width: none; }
.call-screen.incoming .call-btn i { width: 66px; height: 66px; font-size: 28px; }

/* the new-call sheet */
.call-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.call-kind label { position: relative; }
.call-kind input { position: absolute; opacity: 0; pointer-events: none; }
.call-kind span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px; border-radius: var(--r-sm);
  border: 1px solid var(--hairline-strong); font-weight: 600; cursor: pointer; }
.call-kind input:checked + span { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.call-kind input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.call-friends { display: flex; flex-direction: column; gap: 2px; max-height: 34vh; overflow-y: auto; margin: 0 -4px; }
.call-friend { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: var(--r-sm); cursor: pointer; }
.call-friend:hover { background: var(--surface-2); }
.call-friend.dim { opacity: 0.5; cursor: default; }
.call-friend input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.call-friend-ava { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden;
  background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.call-friend-ava img { width: 100%; height: 100%; object-fit: cover; }
.call-none { color: var(--text-2); font-size: 14px; padding: 6px 2px; }
.call-count { color: var(--text-2); font-weight: 500; }
.call-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px; margin-top: 12px; border-radius: var(--r-sm); background: var(--surface-2); cursor: pointer; }
.call-opt input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.call-opt small { color: var(--text-2); font-size: 12.5px; }
.call-link-cta { width: 100%; margin-bottom: 14px; }

/* group chats */
.friends-ctas { display: flex; flex-direction: column; gap: 0; }
.friends-ctas [data-newgroup] { width: 100%; margin-bottom: 10px; }
.conv-ava.group { font-size: 18px; color: #fff; }
.bub-from { font-size: 12.5px; font-weight: 700; margin-bottom: 2px; color: hsl(var(--h, 250) 55% 45%); }
.bub.bot .bub-from { color: var(--accent); }
.chat-system { align-self: center; max-width: 86%; margin: 6px auto; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; text-align: center; color: var(--text-2); background: color-mix(in srgb, var(--text) 6%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bub-from { color: hsl(var(--h, 250) 70% 72%); } }
:root[data-theme="dark"] .bub-from { color: hsl(var(--h, 250) 70% 72%); }

/* a shared screen: it takes the stage, whole (contain — never cropped), everyone else a strip of small tiles under it */
.call-grid.has-screen { grid-template-columns: repeat(3, 1fr); grid-template-rows: minmax(0, 1fr); grid-auto-rows: 92px; }
.call-grid.has-screen .call-tile.screen { grid-column: 1 / -1; }
.call-tile.screen { background: #000; }
.call-tile.screen video { object-fit: contain; }
.call-tile.screen .call-tile-ava { display: none; }
@media (min-aspect-ratio: 1/1) {
  .call-grid.has-screen { grid-template-columns: minmax(0, 1fr) 180px; grid-auto-rows: minmax(0, 1fr); }
  .call-grid.has-screen .call-tile.screen { grid-column: 1; grid-row: 1 / span 6; }
}
/* I'm sharing: a quiet reminder on top (my own screen isn't drawn back to me — no mirror tunnel) */
.call-screen.i-share .call-top::after { content: 'אתה משתף את המסך'; font-size: 12.5px; padding: 4px 12px; border-radius: 999px; background: rgba(52, 199, 89, 0.22); border: 1px solid rgba(52, 199, 89, 0.5); }

/* 📚 the company library (web/library.js) — on "מה לויד יודע" */
.lib-card { padding: 14px 14px 6px; }
.lib-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lib-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--surface-2); font-size: 22px; color: var(--text); }
.lib-title { font-size: 16px; font-weight: 680; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-head .sub { font-size: 12.5px; color: var(--text-2); margin-top: 1px; }
.lib-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); padding: 9px 11px; margin-bottom: 10px; border-radius: var(--r-sm); background: var(--accent-soft); line-height: 1.45; }
.lib-status.quiet { background: none; padding: 0 2px; }
.lib-status.bad { background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); }
.lib-status .spin { width: 14px; height: 14px; border: 2px solid var(--accent); border-inline-start-color: transparent; border-radius: 50%; animation: rot 0.7s linear infinite; flex: none; }
.lib-brief { display: block; width: 100%; text-align: start; font: inherit; color: inherit; cursor: pointer; border: none; border-radius: var(--r-sm); background: var(--accent-soft); padding: 10px 12px; margin-bottom: 10px; }
.lib-brief-h { font-size: 12.5px; font-weight: 650; color: var(--accent); display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.lib-brief-t { font-size: 13.5px; line-height: 1.5; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lib-docs { margin: 0 -14px 0; border-radius: 0; border-inline: none; border-bottom: none; background: transparent; }
.lib-docs .row, .sheet .rows > button.row { width: 100%; background: none; border-inline: none; border-bottom: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.lib-docs .row { border-top: 1px solid var(--hairline); }
.lib-docs .row .title { white-space: nowrap; font-size: 14.5px; }
.lib-docs .row .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-doc-ic { font-size: 19px; color: var(--text-2); flex: none; }
.lib-chev { color: var(--text-3); flex: none; }
.lib-all { justify-content: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: 13.5px; min-height: 46px; }
.sheet .rows > button.row:first-child { border-top: none; }
.sheet .rows > button.row .ti { font-size: 19px; color: var(--text-2); }
.sheet .rows > button.row.danger, .sheet .rows > button.row.danger .ti { color: var(--red); }
.lib-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.lib-empty-t { font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.lib-reader h3 { overflow-wrap: anywhere; }
.lib-path { font-size: 12px; overflow-wrap: anywhere; }
.lib-parts { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; }
.lib-text { font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; max-height: 62vh; overflow-y: auto; }
.lib-text .rt-h { font-weight: 680; letter-spacing: -0.01em; margin: 14px 0 6px; line-height: 1.3; }
.lib-text h3.rt-h { font-size: 17px; } .lib-text h4.rt-h { font-size: 15.5px; } .lib-text h5.rt-h { font-size: 14.5px; color: var(--text-2); }
.lib-text .rt-h:first-child { margin-top: 0; }
.lib-text .rt-p { margin: 0 0 8px; }
/* Hebrew lines carrying English quotes (and English docs): each paragraph takes its own direction */
.lib-text .rt-p, .lib-text li, .lib-text .rt-h, .lib-text .rt-callout, .lib-brief-t div { unicode-bidi: plaintext; text-align: start; }
.lib-text .rt-ul, .lib-text .rt-ol { margin: 4px 0 10px; padding-inline-start: 20px; }
.lib-text .rt-ul li, .lib-text .rt-ol li { margin-bottom: 4px; }
.lib-text .rt-callout { background: var(--accent-soft); border-inline-start: 3px solid var(--accent); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.lib-text .rt-pre { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; overflow-x: auto; font-family: ui-monospace, monospace; font-size: 12.5px; margin: 6px 0 10px; white-space: pre-wrap; }
.lib-text .rt-table-wrap { overflow-x: auto; margin: 8px 0 10px; }
.lib-text .rt-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.lib-text .rt-table th, .lib-text .rt-table td { border: 1px solid var(--hairline); padding: 6px 9px; text-align: start; vertical-align: top; }
.lib-text .rt-table th { background: var(--surface-2); font-weight: 650; }
.lib-text hr { border: none; border-top: 1px solid var(--hairline); margin: 12px 0; }
.lib-text a { color: var(--accent); }

/* 🃏 the decision deck (web/deck.js) — Tinder for decisions: a face and colour per kind, the card follows the finger,
   the next one grows into place. Lively, not a game: no points, no sounds. */
html.deck-open, html.deck-open body { overflow-x: hidden; overflow-x: clip; }
.deck-view {
  display: flex; flex-direction: column; max-width: 480px; margin-inline: auto;
  min-height: calc(100dvh - max(14px, env(safe-area-inset-top)) - 18px - env(safe-area-inset-bottom));
}
/* a focused screen: on a phone the menu steps aside while it's up (the ✕ closes it) — the room goes to the card, and
   nothing under the buttons can be tapped by mistake */
@media (max-width: 899px) {
  html.deck-open #tabbar { display: none !important; }
  html.deck-open #app { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}
@media (min-width: 900px) { .deck-view { min-height: calc(100dvh - 96px); } }
.deck-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.deck-x {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; cursor: pointer; color: var(--text);
  background: var(--lh-glass); border: 1px solid var(--lh-glass-b); box-shadow: 0 4px 14px var(--lh-shadow);
}
.deck-x i { font-size: 19px; }
.deck-prog { flex: 1; height: 6px; border-radius: 6px; background: var(--hairline-strong); overflow: hidden; }
.deck-prog i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--lh-grad); transition: width 0.35s ease; }
.deck-count { flex: none; min-width: 58px; text-align: end; font-size: 13px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.deck-stage { position: relative; flex: 1; min-height: 250px; margin-bottom: 30px; }
.deck-skel { position: absolute; inset: 0; border-radius: 26px; }

.deck-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--glass-b); border-radius: 26px;
  box-shadow: 0 18px 40px rgba(60, 40, 140, 0.16), 0 2px 6px rgba(60, 40, 140, 0.06);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; will-change: transform;
  transition: transform 0.32s cubic-bezier(.2, .8, .2, 1), opacity 0.32s ease;
  --yes: 0; --no: 0; --later: 0; --lift: 0;
  container-type: size; /* its parts fit themselves to the card's height (short phones) */
}
.deck-card.dragging { transition: none; cursor: grabbing; }
.deck-card.flying { transition: transform 0.32s cubic-bezier(.5, 0, .9, .5), opacity 0.32s ease; opacity: 0; pointer-events: none; }
.deck-card.behind {
  pointer-events: none; transform-origin: 50% 100%; box-shadow: 0 10px 26px rgba(60, 40, 140, 0.10);
  transform: translateY(calc((var(--i) - var(--lift)) * 12px)) scale(calc(1 - (var(--i) - var(--lift)) * 0.05));
}
/* the swipe colours the card: green right, red left, violet up */
.deck-card::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(rgba(31, 164, 99, calc(var(--yes) * 0.2)), rgba(31, 164, 99, calc(var(--yes) * 0.2))),
    linear-gradient(rgba(229, 72, 77, calc(var(--no) * 0.2)), rgba(229, 72, 77, calc(var(--no) * 0.2))),
    linear-gradient(rgba(124, 92, 255, calc(var(--later) * 0.2)), rgba(124, 92, 255, calc(var(--later) * 0.2)));
}
/* the next card waits a little faded, and comes up to full colour as the top one leaves */
.deck-card.behind::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: var(--bg); opacity: calc(0.45 - var(--lift) * 0.45); }
.deck-card.enter { animation: deck-in 0.3s ease; }
@keyframes deck-in { from { opacity: 0; } to { opacity: 1; } }

/* the picture area: each kind its own colour */
.th-people { --hero: linear-gradient(140deg, #FFA38F 0%, #FF6FA0 48%, #A98BFF 100%); --hero-shadow: rgba(200, 60, 120, 0.3); }
.th-lloyd { --hero: linear-gradient(140deg, #A07EFF 0%, #6C5CFF 52%, #4F86FF 100%); --hero-shadow: rgba(60, 40, 170, 0.32); }
.th-meeting { --hero: linear-gradient(140deg, #2CD4C0 0%, #2BA8E8 55%, #5A7CFF 100%); --hero-shadow: rgba(20, 110, 170, 0.3); }
.th-spark { --hero: linear-gradient(140deg, #FFCB52 0%, #FF8A5B 52%, #FF5E9C 100%); --hero-shadow: rgba(220, 90, 40, 0.3); }
.th-plan { --hero: linear-gradient(140deg, #4ADE95 0%, #1FB5A0 50%, #2E8FE0 100%); --hero-shadow: rgba(10, 130, 110, 0.3); }
.th-stale { --hero: linear-gradient(140deg, #FFCD4F 0%, #FF9F40 52%, #F26B3A 100%); --hero-shadow: rgba(200, 80, 20, 0.3); }
.deck-hero { position: relative; flex: 1 1 auto; min-height: 136px; display: grid; place-items: center; overflow: hidden; color: #fff; background: var(--hero); }
.deck-hero::before { content: ""; position: absolute; width: 72%; aspect-ratio: 1; top: -38%; inset-inline-end: -20%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.34), transparent 68%); }
.deck-hero::after { content: ""; position: absolute; width: 58%; aspect-ratio: 1; bottom: -34%; inset-inline-start: -14%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%); }
.deck-chip {
  position: absolute; top: 14px; inset-inline-start: 14px; z-index: 1; max-width: calc(100% - 28px);
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.deck-chip i { font-size: 14px; flex: none; }
.deck-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-ava, .deck-ic {
  position: relative; z-index: 1; width: 112px; height: 112px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; font-size: 50px; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 255, 255, 0.6); box-shadow: 0 14px 30px var(--hero-shadow);
}
.deck-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.deck-ic i { font-size: 54px; }
.deck-face { position: relative; z-index: 1; display: grid; place-items: center; filter: drop-shadow(0 12px 20px var(--hero-shadow)); }
.deck-lloyd-pic { display: block; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.6); }
.deck-lloyd-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deck-days { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; line-height: 1; text-shadow: 0 6px 20px var(--hero-shadow); }
.deck-days b { font-size: 68px; font-weight: 800; letter-spacing: -0.03em; }
.deck-days small { font-size: 14px; font-weight: 600; margin-top: 6px; }
.deck-private {
  position: absolute; bottom: 12px; inset-inline-start: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: #fff; background: rgba(20, 10, 50, 0.3); padding: 4px 10px; border-radius: 999px;
}
@media (max-height: 720px) {
  .deck-ava, .deck-ic { width: 88px; height: 88px; font-size: 40px; }
  .deck-ic i { font-size: 40px; }
  .deck-days b { font-size: 54px; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .deck-hero { filter: brightness(0.9) saturate(0.95); } }
:root[data-theme="dark"] .deck-hero { filter: brightness(0.9) saturate(0.95); }

/* the words */
.deck-text { flex: 0 0 auto; max-height: 64%; display: flex; flex-direction: column; gap: 9px; padding: 18px 20px 20px; overflow: hidden; }
.deck-title {
  font-size: 21px; font-weight: 700; line-height: 1.32; letter-spacing: -0.01em; color: var(--text); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.deck-when { font-size: 13.5px; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 5px; }
.deck-body {
  font-size: 14.5px; line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.deck-text > * { flex-shrink: 0; } /* the title and the day never get sliced — the quote gives way first */
.deck-text > .deck-quote { flex-shrink: 1; min-height: 0; overflow: hidden; }
.deck-quote[hidden] { display: none; }
.deck-slots { display: flex; gap: 8px; }
.deck-slot {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; padding: 0 12px;
  border-radius: 12px; border: 1px solid var(--hairline-strong); background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
}
.deck-slot span { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.deck-slot.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.deck-slot.on span { color: var(--accent); }
.deck-quote { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--text-2); background: var(--surface-2); border-radius: 14px; padding: 9px 12px; }
.deck-quote i { flex: none; font-size: 16px; color: var(--text-3); margin-top: 2px; }
.deck-quote span { overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* the stamps that come up with the swipe (on the side the card is leaving from) */
.deck-stamp {
  position: absolute; z-index: 5; top: 62px; display: inline-flex; align-items: center; gap: 6px; max-width: 70%;
  padding: 8px 16px; border-radius: 14px; font-size: 19px; font-weight: 800; color: #fff; white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); pointer-events: none; opacity: 0;
}
.deck-stamp span { overflow: hidden; text-overflow: ellipsis; }
.deck-stamp i { font-size: 22px; flex: none; }
.deck-stamp.yes { left: 18px; background: #1FA463; opacity: var(--yes); transform: rotate(-12deg) scale(calc(0.8 + var(--yes) * 0.2)); }
.deck-stamp.no { right: 18px; background: #E5484D; opacity: var(--no); transform: rotate(12deg) scale(calc(0.8 + var(--no) * 0.2)); }
.deck-stamp.later { top: 30%; left: 50%; background: #7C5CFF; opacity: var(--later); transform: translateX(-50%) scale(calc(0.8 + var(--later) * 0.2)); }

/* the three round buttons — they swell with the swipe that matches them */
.deck-btns { display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 6vw, 30px); }
.deck-btn {
  display: flex; flex-direction: column; align-items: center; gap: 7px; width: 96px; padding: 0; border: 0; background: none;
  font: inherit; color: var(--text-2); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.deck-btn-c {
  width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--glass-b); box-shadow: 0 10px 24px var(--lh-shadow); transition: transform 0.15s ease;
}
.deck-btn-c i { font-size: 30px; }
.deck-btn.yes .deck-btn-c { color: #fff; background: linear-gradient(140deg, #3DDC97, #1F9D55); border-color: transparent; box-shadow: 0 12px 26px rgba(31, 157, 85, 0.35); transform: scale(calc(1 + var(--yes, 0) * 0.14)); }
.deck-btn.no .deck-btn-c { color: #E5484D; transform: scale(calc(1 + var(--no, 0) * 0.14)); }
.deck-btn.later { width: 64px; padding-top: 9px; }
.deck-btn.later .deck-btn-c { width: 48px; height: 48px; color: var(--accent); transform: scale(calc(1 + var(--later, 0) * 0.18)); }
.deck-btn.later .deck-btn-c i { font-size: 22px; }
.deck-btn:active .deck-btn-c { transform: scale(0.9); }
.deck-btn-l { max-width: 100%; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-btn.yes .deck-btn-l { color: var(--green); }
.deck-btn.no .deck-btn-l { color: var(--red); }
.deck-btns[hidden], .deck-hint[hidden], .deck-undo[hidden] { display: none; }

.deck-foot { min-height: 50px; margin-top: 12px; display: flex; flex-direction: column; justify-content: center; }
.deck-hint { display: flex; justify-content: center; gap: 18px; font-size: 12px; color: var(--text-3); }
.deck-hint span { display: inline-flex; align-items: center; gap: 4px; }
.deck-undo { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--text); color: var(--surface); padding: 11px 16px; border-radius: 14px; font-size: 14px; animation: pop-in 0.18s ease; }
.deck-undo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-undo button { flex: none; background: none; border: none; color: var(--accent-soft); font: inherit; font-weight: 700; cursor: pointer; padding: 4px 6px; }

/* all done — Lloyd, pleased */
.deck-done { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; animation: pop-in 0.3s ease; }
.deck-done-face { margin-bottom: 6px; }
.deck-done-t { font-size: 25px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.deck-done-s { font-size: 14.5px; color: var(--text-2); margin-bottom: 14px; max-width: 280px; }
.deck-done-btn { min-width: 180px; padding: 12px 22px; }
/* a short card (small phones): a smaller picture, tighter words; on the shortest the quote steps out */
@container (max-height: 440px) {
  .deck-hero { min-height: 100px; }
  .deck-ava, .deck-ic { width: 76px; height: 76px; font-size: 34px; }
  .deck-ic i { font-size: 38px; }
  .deck-face .critter, .deck-face .deck-lloyd-pic { width: 76px !important; height: 76px !important; }
  .deck-days b { font-size: 48px; }
  .deck-text { padding: 14px 18px 16px; gap: 7px; max-height: 72%; }
  .deck-title { font-size: 19px; -webkit-line-clamp: 3; }
  .deck-body { -webkit-line-clamp: 2; }
  .deck-quote span { -webkit-line-clamp: 2; }
  .deck-slot { min-height: 36px; }
}
@container (max-height: 360px) {
  .deck-quote { display: none; }
  .deck-body { -webkit-line-clamp: 1; }
  .deck-title { -webkit-line-clamp: 2; }
}
@container (max-height: 300px) {
  .deck-hero { min-height: 72px; }
  .deck-ava, .deck-ic { width: 54px; height: 54px; font-size: 24px; border-width: 1.5px; }
  .deck-ic i { font-size: 27px; }
  .deck-face .critter, .deck-face .deck-lloyd-pic { width: 54px !important; height: 54px !important; }
  .deck-days b { font-size: 34px; }
  .deck-days small { font-size: 12px; margin-top: 3px; }
  .deck-chip { top: 10px; }
  .deck-private { bottom: 8px; }
  .deck-body { display: none; }
  .deck-stamp { top: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .deck-card, .deck-card.flying { transition: none; }
  .deck-card.enter, .deck-done { animation: none; }
}

/* 🌐 English — left to right (web/i18n.js sets <html dir>). The layout is written with logical properties
   (inline-start / inline-end), so it mirrors by itself; these are the few things that point a WAY. */
/* "forward" / "back" arrows turn with the page (an arrow that points somewhere physical carries .phys) */
[dir="ltr"] .ti-chevron-left:not(.phys)::before, [dir="ltr"] .ti-chevron-right:not(.phys)::before,
[dir="ltr"] .ti-arrow-left:not(.phys)::before, [dir="ltr"] .ti-arrow-right:not(.phys)::before { display: inline-block; transform: scaleX(-1); }
[dir="ltr"] .send-btn i { transform: none; } /* the paper plane flies right */
[dir="ltr"] .switch.on::after { transform: translateX(18px); }
[dir="ltr"] .rh-moves { text-align: right; }
[dir="ltr"] .dm-alert { direction: ltr; }
@media (max-width: 899px) { [dir="ltr"] #tabbar.bead-bar .bb-bdg { left: auto; right: calc(50% - 21px); } }
/* the deck: ✓ stays on the right and ✕ on the left — where the swipe goes, in both languages */
[dir="ltr"] .deck-btns, [dir="ltr"] .deck-hint { flex-direction: row-reverse; }
/* the language, before anyone is signed in */
.login-lang {
  position: fixed; top: max(14px, env(safe-area-inset-top)); inset-inline-end: 16px; z-index: 5;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--glass-b); background: var(--glass); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px var(--lh-shadow);
}
[dir="ltr"] .ag-time { width: 62px; } /* "10:30 AM" — the English clock is longer */
/* the onboarding demo's share sheet + lock-screen banner read left to right in English */
[dir="ltr"] .dm-row, [dir="ltr"] .dm-banner { direction: ltr; }
/* chat: in English your own messages sit on the RIGHT (Lloyd's and friends' on the left), tail on the outer corner */
[dir="ltr"] .bub.user, [dir="ltr"] .ob-msg.user { align-self: flex-end; }
[dir="ltr"] .bub.bot, [dir="ltr"] .bub.friend, [dir="ltr"] .ob-msg.bot { align-self: flex-start; }
[dir="ltr"] .bub.user { border-end-start-radius: 18px; border-end-end-radius: 6px; }
[dir="ltr"] .bub.bot, [dir="ltr"] .bub.friend { border-end-end-radius: 18px; border-end-start-radius: 6px; }
[dir="ltr"] .chat-view .bub.user { border-end-start-radius: 20px; border-end-end-radius: 6px; }
[dir="ltr"] .chat-view .bub.bot, [dir="ltr"] .chat-view .bub.friend { border-end-end-radius: 20px; border-end-start-radius: 6px; }
[dir="ltr"] .ob-msg.user { border-end-start-radius: 20px; border-end-end-radius: 6px; }
[dir="ltr"] .ob-msg.bot { border-end-end-radius: 20px; border-end-start-radius: 6px; }
/* Lloyd's home chips: the tracks run the other way in English (otherwise they drift off and leave the rows empty) */
@keyframes lh-marq-ltr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) { [dir="ltr"] .lh-trk { animation-name: lh-marq-ltr; } }
/* the desktop rail's wordmark */
@media (min-width: 900px) { [dir="ltr"] #tabbar::before { content: "Lloyd"; background-position: left center; } }
/* Lloyd's name tag sits over his messages (the left side in English), his orb on the outer edge */
[dir="ltr"] .lloyd-tag { align-self: flex-start; flex-direction: row-reverse; }
/* Hebrew messages / names inside the English layout keep their own direction (punctuation on the right side) */
[dir="ltr"] .bub, [dir="ltr"] .cl-prev { unicode-bidi: plaintext; }
/* a new account's first question: the language */
.lang-pick .lang-btns { display: flex; gap: 10px; width: min(280px, 82vw); }
.lang-pick .lang-btns .btn { flex: 1; padding: 13px; font-size: 16px; }
/* the game clock with hundredths ("0:07.43", "10:00.00") fits its card on every phone width */
.rh-stats b[data-time] { font-size: clamp(15px, 4.6vw, 20px); }