@font-face {
    font-family: 'DellaRespira';
    src: url('/DellaRespira-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

  :root{
    --bg:#F4F7F7;
    --ink:#063432;
    --ink-soft:#28504E;
    --muted:#5A7979;
    --line:#DDE6E6;
    --paper:#FFFFFF;

    --pine:#28504E;
    --pine-light:#E1ECEC;
    --pine-dark:#063432;

    --gold:#C4A882;
    --gold-light:#EDE4D2;

    --periwinkle:#4E7A8A;
    --periwinkle-light:#DDE9EE;

    --coral:#C4785A;
    --coral-light:#F4E2D7;

    --radius-lg:26px;
    --radius-md:16px;
    --radius-sm:10px;
  }

  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{height:100%;}
  body{
    margin:0;
    background:
      radial-gradient(circle at 20% 0%, #DDE9E9 0%, transparent 45%),
      radial-gradient(circle at 90% 10%, #E5EEEE 0%, transparent 40%),
      var(--bg);
    font-family:'Inter', sans-serif;
    color:var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:28px 10px;
  }

  .stage{display:flex; flex-direction:column; align-items:center; gap:14px;}
  .stage-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--muted);
  }

  /* ---------- Phone frame ---------- */
  .phone{
    width:390px;
    height:820px;
    background:var(--paper);
    border-radius:46px;
    border:1px solid #E2DFD3;
    box-shadow:0 40px 80px -30px rgba(31,43,42,0.35), 0 2px 8px rgba(31,43,42,0.08);
    overflow:hidden;
    position:relative;
    display:flex;
    flex-direction:column;
  }
  .notch{
    position:absolute; top:10px; left:50%; transform:translateX(-50%);
    width:120px; height:26px; background:#0D1210; border-radius:20px; z-index:50;
  }
  .statusbar{
    height:52px; flex:0 0 auto; display:flex; align-items:flex-end; justify-content:space-between;
    padding:0 26px 8px 26px; font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:500;
  }

  .screen{ flex:1; position:relative; overflow:hidden; display:flex; flex-direction:column;}
  .view{ position:absolute; inset:0; display:none; flex-direction:column; }
  .view.active{ display:flex; }

  /* ---------- ASK VIEW ---------- */
  #view-ask{ background:var(--bg); }

  .ask-header{
    padding:6px 22px 14px 22px;
    flex:0 0 auto;
  }
  .ask-eyebrow{
    font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--muted); margin-bottom:4px;
  }
  .ask-title{
    font-family:'DellaRespira', serif; font-size:26px; font-weight:500; color:var(--ink);
    margin:0;
  }

  .glance{
    display:flex; gap:8px; padding:14px 22px 6px 22px; flex:0 0 auto;
    overflow-x:auto; scrollbar-width:none;
  }
  .glance::-webkit-scrollbar{display:none;}
  .glance-pill{
    flex:0 0 auto; display:flex; align-items:center; gap:7px;
    background:var(--paper); border:1px solid var(--line); border-radius:100px;
    padding:8px 13px; font-size:12.5px; font-weight:500; color:var(--ink-soft);
    cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
  }
  .glance-pill:active{ transform:scale(0.96); }
  .glance-pill.pulse{ animation:pillPulse .6s ease; }
  @keyframes pillPulse{
    0%{ box-shadow:0 0 0 0 rgba(59,107,94,0.35); }
    60%{ box-shadow:0 0 0 8px rgba(59,107,94,0); }
    100%{ box-shadow:0 0 0 0 rgba(59,107,94,0); }
  }
  .dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
  .dot.pine{ background:var(--pine); }
  .dot.periwinkle{ background:var(--periwinkle); }
  .dot.gold{ background:var(--gold); }
  .dot.coral{ background:var(--coral); }
  .glance-count{ font-family:'IBM Plex Mono', monospace; color:var(--ink); }

  .thread{
    flex:1; overflow-y:auto; padding:14px 20px 10px 20px;
    display:flex; flex-direction:column; gap:14px;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
  }
  .chat-history-sentinel{ flex:0 0 1px; height:1px; width:100%; }
  .chat-history-status{
    flex:0 0 auto; align-self:center; color:var(--muted); font-size:11px;
    text-align:center; min-height:0; padding:0 8px;
  }
  .chat-history-status:empty{ display:none; }
  .history-citations{ display:flex; flex-wrap:wrap; gap:5px; padding:0 2px; }
  .history-citation{
    max-width:100%; border:1px solid var(--line); border-radius:10px;
    background:var(--pine-light); color:var(--pine-dark); padding:5px 8px;
    font:inherit; font-size:10px; line-height:1.35; text-align:left; cursor:pointer;
  }
  .history-citation:hover{ border-color:var(--pine); }
  .history-retry,.chat-retry{
    border:0; border-radius:100px; background:var(--pine-light); color:var(--pine-dark);
    padding:4px 9px; font:inherit; font-size:10px; cursor:pointer;
  }
  .chat-retry{ align-self:flex-start; margin-left:3px; }
  .msg.history-highlight .bubble{ outline:2px solid var(--gold); outline-offset:2px; }
  @keyframes historyHighlight{ 0%,100%{ background:transparent; } 25%,75%{ background:var(--gold-light); } }
  .msg.history-highlight{ animation:historyHighlight 1.5s ease; }
  .msg{ max-width:82%; display:flex; flex-direction:column; gap:6px; }
  .msg.user{ align-self:flex-end; align-items:flex-end; }
  .msg.elari{ align-self:flex-start; align-items:flex-start; }

  .bubble{
    padding:12px 14px; border-radius:18px; font-size:14px; line-height:1.48;
  }
  .msg.user .bubble{
    background:var(--pine); color:#fff; border-bottom-right-radius:5px;
  }
  .msg.elari .bubble{
    background:var(--paper); color:var(--ink); border:1px solid var(--line);
    border-bottom-left-radius:5px;
  }
  .msg-time{
    font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--muted); padding:0 4px;
  }

  .chip-row{ display:flex; flex-wrap:wrap; gap:6px; padding:0 2px; }
  .tag-chip{
    font-size:11px; font-weight:600; padding:5px 10px; border-radius:100px;
    display:flex; align-items:center; gap:5px; opacity:0; transform:translateY(4px) scale(0.9);
    animation:chipIn .35s ease forwards;
  }
  @keyframes chipIn{ to{ opacity:1; transform:translateY(0) scale(1); } }
  .tag-chip.pine{ background:var(--pine-light); color:var(--pine-dark); }
  .tag-chip.periwinkle{ background:var(--periwinkle-light); color:var(--periwinkle); }
  .tag-chip.gold{ background:var(--gold-light); color:var(--gold); }
  .tag-chip.coral{ background:var(--coral-light); color:var(--coral); }

  .typing{ display:flex; gap:4px; padding:14px 16px; }
  .typing span{
    width:6px; height:6px; border-radius:50%; background:var(--muted);
    animation:typingBounce 1.1s infinite ease-in-out;
  }
  .typing span:nth-child(2){ animation-delay:0.15s; }
  .typing span:nth-child(3){ animation-delay:0.3s; }
  @keyframes typingBounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5;} 30%{ transform:translateY(-4px); opacity:1;} }

  .suggestions{
    display:flex; gap:7px; padding:2px 20px 10px 20px; overflow-x:auto; scrollbar-width:none; flex:0 0 auto;
  }
  .suggestions::-webkit-scrollbar{ display:none; }
  .suggestion{
    flex:0 0 auto; font-size:12px; color:var(--pine-dark); background:var(--pine-light);
    border:none; border-radius:100px; padding:7px 12px; cursor:pointer; font-family:inherit;
  }

  .composer{
    flex:0 0 auto; display:flex; align-items:center; gap:8px;
    padding:10px 16px 18px 16px; background:var(--bg); border-top:1px solid var(--line);
    /* Lift composer above home indicator when voice mode is active (no tab bar) */
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  .ai-quota-status{
    flex:0 0 auto; padding:6px 16px; background:var(--bg); border-top:1px solid var(--line);
    color:var(--muted); font-size:11px; text-align:center; min-height:27px;
  }
  .ai-quota-status.at-limit{ color:var(--coral); font-weight:600; }
  .ai-quota-status + .composer{ border-top:none; }
  .composer-field{
    flex:1; background:var(--paper); border:1px solid var(--line); border-radius:22px;
    padding:11px 16px; font-size:14px; font-family:inherit; color:var(--ink); resize:none;
    max-height:90px; min-height:44px; line-height:1.4;
  }
  .composer-field:focus{ outline:none; border-color:var(--pine); }
  .send-btn{
    width:42px; height:42px; border-radius:50%; background:var(--pine); border:none;
    color:#fff; font-size:16px; cursor:pointer; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    transition:transform .15s ease;
  }
  .send-btn:active{ transform:scale(0.92); }

  /* -- Voice-first composer -- */
  .mode-toggle{
    width:42px; height:42px; border-radius:50%; background:var(--paper); border:1px solid var(--line);
    color:var(--ink-soft); font-size:15px; cursor:pointer; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    transition:transform .15s ease;
  }
  .mode-toggle:active{ transform:scale(0.92); }

  .voice-bar{
    flex:1; height:48px; border-radius:24px; background:var(--pine); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:9px; position:relative; overflow:hidden;
    -webkit-user-select:none; user-select:none; touch-action:none;
    transition:background .2s ease;
  }
  .voice-bar.recording{ background:var(--coral); }
  .voice-bar .mic-icon{ font-size:16px; flex:0 0 auto; z-index:2; }
  .voice-label{ color:#fff; font-size:13.5px; font-weight:500; z-index:2; font-family:inherit; }

  .waveform{ display:none; align-items:center; gap:3px; height:20px; z-index:2; }
  .voice-bar.recording .waveform{ display:flex; }
  .voice-bar.recording .voice-label{ display:none; }
  .waveform span{
    width:3px; border-radius:2px; background:rgba(255,255,255,0.9);
    animation:wave 0.9s ease-in-out infinite;
  }
  .waveform span:nth-child(1){ height:8px; animation-delay:0s; }
  .waveform span:nth-child(2){ height:16px; animation-delay:0.1s; }
  .waveform span:nth-child(3){ height:22px; animation-delay:0.2s; }
  .waveform span:nth-child(4){ height:14px; animation-delay:0.3s; }
  .waveform span:nth-child(5){ height:19px; animation-delay:0.4s; }
  .waveform span:nth-child(6){ height:9px; animation-delay:0.5s; }
  @keyframes wave{
    0%,100%{ transform:scaleY(0.5); }
    50%{ transform:scaleY(1.15); }
  }
  .rec-timer{
    font-family:'IBM Plex Mono', monospace; font-size:12px; color:#fff; z-index:2; margin-left:2px;
  }
  .rec-ring{
    position:absolute; inset:0; border-radius:24px; border:2px solid rgba(255,255,255,0.6);
    animation:ringPulse 1.4s ease-out infinite; z-index:1;
  }
  @keyframes ringPulse{
    0%{ opacity:0.7; transform:scale(1); }
    100%{ opacity:0; transform:scale(1.04); }
  }
  .transcribing .voice-label{ display:block; font-style:italic; opacity:0.9; }
  .transcribing .waveform{ display:none; }

  /* ---------- OVERVIEW VIEW ---------- */
  #view-overview{ background:var(--bg); }
  .ov-header{ padding:6px 22px 10px 22px; flex:0 0 auto; }
  .ov-title{ font-family:'DellaRespira', serif; font-size:24px; font-weight:500; margin:0 0 2px 0; }
  .ov-sub{ font-size:12.5px; color:var(--muted); }

  .segmented{
    display:flex; gap:6px; padding:10px 20px; flex:0 0 auto;
  }
  .seg-btn{
    flex:1; text-align:center; padding:9px 2px; border-radius:100px; border:1px solid var(--line);
    background:var(--paper); font-size:11.5px; font-weight:600; color:var(--ink-soft); cursor:pointer;
    font-family:inherit; white-space:nowrap;
  }
  .seg-btn.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

  .ov-body{ flex:1; overflow-y:auto; padding:6px 20px 26px 20px; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; }
  .ov-panel{ display:none; flex-direction:column; gap:10px; }
  .ov-panel.active{ display:flex; }

  .section-label{
    font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--muted); margin:10px 2px 2px 2px;
  }

  .card{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md);
    padding:13px 14px;
  }

  .priority-item{ display:flex; align-items:flex-start; gap:11px; }
  .priority-item + .priority-item{ margin-top:2px; }
  .check{
    width:20px; height:20px; border-radius:7px; border:1.6px solid var(--pine); flex:0 0 auto; margin-top:1px;
    cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s ease;
  }
  .check.done{ background:var(--pine); }
  .check.done::after{ content:'✓'; color:#fff; font-size:12px; }
  .priority-text{ flex:1; }
  .priority-title{ font-size:13.5px; font-weight:500; line-height:1.4; }
  .priority-title.done{ text-decoration:line-through; color:var(--muted); }
  .priority-meta{ font-size:11px; color:var(--muted); margin-top:3px; }

  /* ── Inline edit / delete controls ─────────────────────────────────────── */
  .item-actions{
    display:flex; gap:1px; flex:0 0 auto; opacity:0;
    transition:opacity .15s ease; align-self:flex-start; margin-top:-1px;
  }
  /* Show on hover (desktop) */
  .card:hover .item-actions,
  .timeline-row:hover .item-actions { opacity:1; }
  /* Always visible on touch devices */
  @media (hover:none){ .item-actions{ opacity:1; } }

  .item-act-btn{
    width:26px; height:26px; border-radius:7px; border:none; background:transparent;
    color:var(--muted); cursor:pointer; font-size:13px; display:flex; align-items:center;
    justify-content:center; transition:background .12s, color .12s; flex:0 0 auto;
    font-family:inherit; line-height:1;
  }
  .item-act-btn:hover{ background:var(--line); color:var(--ink); }
  .item-act-btn.del:hover{ background:#fee2e2; color:var(--coral); }

  /* Inline edit form embedded in a card or tl-card */
  .inline-edit{ padding:2px 0 4px; }
  .inline-edit-row{ display:flex; gap:6px; margin-bottom:7px; flex-wrap:wrap; }
  .inline-edit-input{
    flex:1; min-width:0; font-size:13px; font-family:inherit; padding:6px 10px;
    border:1.5px solid var(--pine); border-radius:8px; outline:none;
    background:var(--paper); color:var(--ink);
  }
  .inline-edit-input.secondary{
    flex:0 0 130px; border-color:var(--line); color:var(--muted); font-size:12px;
  }
  .inline-edit-input.secondary:focus{ border-color:var(--pine); color:var(--ink); }
  .inline-edit-btns{ display:flex; gap:6px; }
  .ie-save{
    padding:5px 16px; border-radius:20px; border:none; background:var(--pine); color:#fff;
    font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; transition:opacity .12s;
  }
  .ie-save:active{ opacity:.8; }
  .ie-cancel{
    padding:5px 14px; border-radius:20px; border:none; background:var(--line);
    color:var(--ink-soft); font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
  }

  .flag{
    font-size:10px; font-weight:700; color:var(--coral); background:var(--coral-light);
    padding:2px 7px; border-radius:100px; margin-left:8px;
  }
  .origin{
    font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--muted);
  }

  .timeline-row{ display:flex; gap:12px; }
  .tl-time{
    width:52px; flex:0 0 auto; font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted); padding-top:13px;
  }
  .tl-line{ width:2px; background:var(--line); flex:0 0 auto; position:relative; }
  .tl-dot{
    width:9px; height:9px; border-radius:50%; background:var(--periwinkle); position:absolute; left:-3.5px; top:15px;
  }
  .tl-card{ flex:1; padding-bottom:16px; }
  .tl-title{ font-size:13.5px; font-weight:600; }
  .tl-note{ font-size:11.5px; color:var(--muted); margin-top:3px; }

  /* ── Status check variants ────────────────────────────────────────────── */
  .check.completed{ background:var(--pine); }
  .check.completed::after{ content:'✓'; color:#fff; font-size:12px; }

  /* ── History panel ────────────────────────────────────────────────────── */
  .history-empty{
    color:var(--muted); font-size:13px; text-align:center; padding:28px 16px;
  }
  .hist-item{
    display:flex; align-items:flex-start; gap:10px; padding:9px 0;
    border-bottom:1px solid var(--line);
  }
  .hist-item:last-child{ border-bottom:none; }
  .hist-icon{ flex:0 0 auto; font-size:14px; margin-top:1px; color:var(--muted); width:18px; text-align:center; }
  .hist-body{ flex:1; min-width:0; }
  .hist-title{ font-size:13px; font-weight:500; color:var(--muted); text-decoration:line-through; line-height:1.4; }
  .hist-title.cancelled{ color:var(--coral); }
  .hist-meta{ font-size:11px; color:var(--muted); margin-top:2px; }
  .hist-badge{
    font-size:10px; font-weight:600; padding:1px 6px; border-radius:100px; flex:0 0 auto;
    margin-top:2px; align-self:flex-start;
  }
  .hist-badge.completed{ background:var(--pine-light); color:var(--pine); }
  .hist-badge.cancelled{ background:var(--coral-light); color:var(--coral); }
  .hist-group{ margin-bottom:10px; }

  .day-strip{ display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
  .day-strip::-webkit-scrollbar{ display:none; }
  .day-chip{
    flex:0 0 auto; width:44px; text-align:center; padding:8px 0; border-radius:12px;
    border:1px solid var(--line); background:var(--paper); cursor:pointer; font-family:inherit;
  }
  .day-chip .dname{ font-size:10px; color:var(--muted); }
  .day-chip .dnum{ font-size:13px; font-weight:600; margin-top:2px; }
  .day-chip.active{ background:var(--gold); border-color:var(--gold); }
  .day-chip.active .dname, .day-chip.active .dnum{ color:#fff; }
  .day-chip.locked{ opacity:.45; cursor:not-allowed; position:relative; }
  .day-chip.locked::after{ content:'🔒'; position:absolute; top:1px; right:3px; font-size:8px; }

  /* ── Subscription tier UI ───────────────────────────────────────────────── */
  .plan-badge{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:20px; margin-top:4px; }
  .plan-badge.free{ background:#f0f0f0; color:#666; }
  .plan-badge.premium{ background:var(--gold); color:#fff; }
  .plan-limits-text{ font-size:11.5px; color:var(--muted); margin-top:8px; line-height:1.5; }
  .plan-action-btn{ padding:7px 14px; border-radius:20px; border:none; cursor:pointer;
    font-size:12px; font-weight:600; letter-spacing:.03em; transition:background .15s,transform .1s; }
  .plan-action-btn:active{ transform:scale(.97); }
  .plan-action-btn.upgrade{ background:var(--gold); color:#fff; }
  .plan-action-btn.downgrade{ background:#f0f0f0; color:#888; }
  .plan-gate-toast{ font-size:12px; color:var(--coral); font-weight:500; margin-top:6px;
    min-height:18px; transition:opacity .3s; }
  .voice-bar.tier-locked{ position:relative; }
  .voice-bar.tier-locked::before{ content:''; position:absolute; inset:0; border-radius:inherit;
    background:rgba(255,255,255,.6); z-index:3; }
  .voice-bar.tier-locked::after{ content:'🔒 Premium feature'; position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600;
    color:var(--ink-soft); z-index:4; }
  .voice-bar.tier-locked .mic-icon,
  .voice-bar.tier-locked .voice-label{ opacity:0; }

  .meal-card{ display:flex; gap:12px; align-items:center; }
  .swap-btn{
    width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--paper);
    color:var(--ink-soft); font-size:16px; cursor:pointer; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    transition:transform .2s ease, background .2s ease, color .2s ease;
  }
  .swap-btn:active{ transform:scale(0.9) rotate(80deg); }
  .swap-btn.spin{ animation:swapSpin .5s ease; }
  @keyframes swapSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(180deg); } }
  .meal-emoji{
    width:44px; height:44px; border-radius:12px; background:var(--gold-light);
    display:flex; align-items:center; justify-content:center; font-size:20px; flex:0 0 auto;
  }
  .meal-slot{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); }
  .meal-name{ font-size:14px; font-weight:600; margin-top:2px; }
  .meal-tag{ font-size:11px; color:var(--pine-dark); margin-top:3px; }

  .ghost-btn{
    width:100%; text-align:center; padding:11px; border-radius:var(--radius-sm); border:1px dashed var(--line);
    background:transparent; color:var(--ink-soft); font-size:12.5px; font-family:inherit; cursor:pointer; margin-top:4px;
  }

  .shop-category{ font-size:11px; font-weight:700; color:var(--ink-soft); margin:2px 2px 0 2px; }
  .shop-item{ display:flex; align-items:center; gap:11px; padding:9px 0; }
  .shop-item + .shop-item{ border-top:1px solid var(--line); }
  .shop-check{
    width:20px; height:20px; border-radius:7px; border:1.6px solid var(--gold); flex:0 0 auto;
    cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s ease;
  }
  .shop-check.done{ background:var(--gold); }
  .shop-check.done::after{ content:'✓'; color:#fff; font-size:12px; }
  .shop-name{ flex:1; font-size:13.5px; font-weight:500; }
  .shop-name.done{ text-decoration:line-through; color:var(--muted); }
  .shop-qty{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted); flex:0 0 auto; }
  .shop-summary{ display:flex; align-items:center; justify-content:space-between; margin:2px 2px 4px 2px; }
  .shop-summary .origin{ font-size:11px; }
  .shop-empty{
    text-align:center; padding:28px 16px; color:var(--muted); font-size:12.5px; border:1px dashed var(--line);
    border-radius:var(--radius-md); line-height:1.5;
  }
  .shop-synced-flash{ animation:syncedFlash 0.9s ease; }

  /* ── Memory View ─────────────────────────────────────────────────────────── */
  .mem-content{ font-size:13.5px; font-weight:500; line-height:1.4; color:var(--ink); }
  .mem-meta{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:5px; }
  .mem-type-pill{
    font-size:10px; font-weight:700; padding:2px 7px; border-radius:100px; letter-spacing:.04em; text-transform:uppercase;
  }
  .mem-type-pill.temporary{ background:var(--coral-light); color:var(--coral); }
  .mem-type-pill.recurring{ background:var(--periwinkle-light); color:var(--periwinkle); }
  .mem-expiry{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); }
  /* Planning Patterns */
  .pp-confidence{ font-size:10px; font-weight:700; padding:2px 7px; border-radius:100px; letter-spacing:.04em; text-transform:uppercase; }
  .pp-confidence.high{ background:#d1fae5; color:#065f46; }
  .pp-confidence.medium{ background:#fef3c7; color:#92400e; }
  .pp-confidence.low{ background:#f1f5f9; color:#64748b; }
  .pp-source{ font-size:10.5px; color:var(--muted); font-style:italic; }
  .pp-archive-btn{ font-size:11px; color:var(--muted); background:none; border:1px solid var(--border); border-radius:6px; padding:2px 8px; cursor:pointer; line-height:1.6; }
  .pp-archive-btn:hover{ background:var(--surface); }
  .pp-archived .mem-content{ color:var(--muted); text-decoration:line-through; opacity:.7; }
  .pp-archived{ opacity:.75; }

  /* ── Auth modal ──────────────────────────────────────────────────────────── */
  .auth-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.45);
    display:flex; align-items:center; justify-content:center;
    z-index:9999; padding:20px;
  }
  .auth-card{
    background:var(--paper); border-radius:var(--radius-md);
    padding:28px 24px; width:100%; max-width:360px; position:relative;
    box-shadow:0 8px 32px rgba(0,0,0,.12);
  }
  .auth-close{
    position:absolute; top:14px; right:16px;
    background:none; border:none; font-size:20px; color:var(--muted);
    cursor:pointer; padding:4px 6px; line-height:1;
  }
  .auth-tabs{ display:flex; border-bottom:1px solid var(--line); margin-bottom:22px; }
  .auth-tab-btn{
    flex:1; background:none; border:none; border-bottom:2px solid transparent;
    padding:9px 4px; font-size:14px; font-weight:500; color:var(--muted);
    cursor:pointer; margin-bottom:-1px; transition:color .15s,border-color .15s;
  }
  .auth-tab-btn.active{ color:var(--ink); border-bottom-color:var(--pine); }
  .auth-error-box{
    background:#fff0f0; color:#b91c1c; border-radius:8px;
    padding:10px 12px; font-size:13px; margin-bottom:14px;
  }
  .auth-field{ margin-bottom:14px; }
  .auth-submit{ width:100%; margin-top:6px; }
  .auth-hint{ font-size:12px; color:var(--muted); margin-top:4px; }
  .mem-confirm{ padding:4px 0 2px; }
  .mem-confirm-msg{ font-size:13px; font-weight:500; color:var(--ink); }
  .mem-char-count{ font-size:10px; color:var(--muted); text-align:right; margin:-4px 0 6px; font-family:'IBM Plex Mono',monospace; }
  .mem-textarea{ resize:vertical; min-height:52px; }
  .mem-forget-btn{ background:var(--coral) !important; }
  .mem-hint{ font-size:11.5px; color:var(--muted); text-align:center; padding:14px 8px 2px; line-height:1.6; }
  .mem-upcoming-date{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--periwinkle); font-weight:600; margin:6px 2px 2px 2px; }
  .mem-based-on{ font-size:11px; color:var(--muted); margin:2px 12px 4px; font-style:italic; line-height:1.5; }
  @keyframes syncedFlash{
    0%{ background:var(--gold-light); }
    100%{ background:transparent; }
  }

  /* ---------- Tab bar ---------- */
  .tabbar{
    flex:0 0 auto; display:flex; padding:8px 26px 22px 26px; gap:6px; background:var(--bg);
    border-top:1px solid var(--line);
    /* Home-indicator clearance on notch / Dynamic Island iPhones */
    padding-bottom: max(22px, env(safe-area-inset-bottom));
  }
  .tab{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 0;
    cursor:pointer; color:var(--muted); font-size:10.5px; font-weight:600; font-family:inherit; background:none; border:none;
  }
  .tab.active{ color:var(--pine); }
  .tab-icon{ font-size:18px; line-height:1; }

  @media (max-width:430px){
    body{ padding:0; overscroll-behavior:none; }
    .phone{
      width:100vw;
      height:100vh;    /* fallback for older browsers */
      height:100dvh;   /* keyboard-aware: iOS 15.4+, Chrome 108+ */
      border-radius:0; border:none; box-shadow:none;
    }
    .stage-label{ display:none; }

    /* ── Prevent iOS auto-zoom on input focus (requires font-size ≥ 16px) ── */
    .composer-field{ font-size:16px; }
    .inline-edit-input,
    .inline-edit-input.secondary{ font-size:16px; }

    /* ── Larger tap targets ──────────────────────────────────────────────── */
    .send-btn, .mode-toggle{ width:44px; height:44px; }
    .swap-btn{ width:44px; height:44px; }
    .item-act-btn{ width:36px; height:36px; font-size:15px; }
    .check{ width:24px; height:24px; border-radius:8px; }
    .shop-check{ width:24px; height:24px; border-radius:8px; }
    .ghost-btn{ min-height:44px; display:flex; align-items:center; justify-content:center; }
    .suggestion{ min-height:36px; display:inline-flex; align-items:center; }
    .seg-btn{ padding:10px 4px; font-size:11px; }
    .tab{ padding:8px 0; }
    .day-chip{ padding:10px 0; }

    /* ── Chat thread: no rubber-band over-scroll past the composer ───────── */
    .thread{ overscroll-behavior-y:contain; }
  }

  /* ── Email Draft Card in Chat ───────────────────────────────────────────── */
  .email-draft-card {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin: 8px 0;
    font-size: 13px;
  }
  .email-draft-header {
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .email-draft-field {
    margin-bottom: 4px;
    color: var(--muted);
  }
  .email-draft-field strong {
    color: var(--ink);
  }
  .email-draft-body {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 10px;
    margin: 8px 0;
    white-space: pre-wrap;
    font-family: inherit;
    color: #334155;
  }
  .email-draft-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
  }
  .btn-send-email {
    background: var(--pine);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-weight: 500;
    cursor: pointer;
    font-size: 12px;
  }
  .btn-send-email:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  .btn-cancel-email {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
  }
  .email-sent-badge {
    color: var(--pine);
    font-weight: 600;
    padding: 4px 0;
  }

  /* ========== SETTINGS ========== */
  #view-settings{ background:var(--bg); }
  .st-header{ padding:6px 22px 10px 22px; flex:0 0 auto; }
  .st-title{ font-family:'DellaRespira', serif; font-size:24px; font-weight:500; margin:0 0 2px 0; }
  .st-sub{ font-size:12.5px; color:var(--muted); }
  .st-body{ flex:1; overflow-y:auto; padding:6px 20px 26px 20px; display:flex; flex-direction:column; gap:10px; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; }
  .st-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .st-label{ font-size:13.5px; font-weight:500; }
  .st-value{ font-size:13px; color:var(--ink-soft); margin-top:2px; }
  .st-edit-btn{
    background:var(--pine-light); border:none; color:var(--pine-dark);
    font-size:12px; font-weight:600; font-family:inherit; padding:6px 13px;
    border-radius:100px; cursor:pointer; flex:0 0 auto;
    transition:transform .15s ease;
  }
  .st-edit-btn:active{ transform:scale(0.95); }
  .st-input-label{
    font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--muted); display:block; margin-bottom:4px;
  }
  .st-input{
    width:100%; border:none; border-bottom:2px solid var(--pine);
    background:transparent; font-family:'Inter', sans-serif;
    font-size:18px; font-weight:500; color:var(--ink);
    padding:10px 0; outline:none;
  }
  .st-input::placeholder{ color:var(--line); }
  .st-char-hint{
    font-family:'IBM Plex Mono', monospace; font-size:11px;
    color:var(--muted); text-align:right; margin-top:4px;
  }
  .st-error{
    font-size:12px; color:var(--coral); margin-top:6px; display:none; font-weight:500;
  }
  .st-btn-row{ display:flex; gap:8px; margin-top:16px; }
  .st-save-btn{
    flex:1; padding:13px; background:var(--pine); color:#fff;
    border:none; border-radius:var(--radius-sm); font-size:14px; font-weight:600;
    font-family:inherit; cursor:pointer; transition:transform .15s ease;
  }
  .st-save-btn:active{ transform:scale(0.97); }
  .st-reset-btn{
    padding:13px 14px; background:var(--paper); color:var(--ink-soft);
    border:1px solid var(--line); border-radius:var(--radius-sm); font-size:13px;
    font-weight:500; font-family:inherit; cursor:pointer; white-space:nowrap;
    transition:transform .15s ease;
  }
  .st-reset-btn:active{ transform:scale(0.97); }
  .st-cancel-link{
    background:none; border:none; font-size:13px; color:var(--muted);
    font-family:inherit; cursor:pointer; width:100%; text-align:center;
    padding:8px; margin-top:2px;
  }
  .st-saved-toast{
    font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--pine);
    text-align:center; padding:6px 0 0 0; opacity:0;
    transition:opacity .35s ease;
  }

  /* ── Companion Personalization chips ── */
  .cp-pref-label{
    font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:3px;
  }
  .cp-pref-desc{
    font-size:12px; color:var(--muted); margin-bottom:12px; line-height:1.5;
  }
  .cp-chip-grid{ display:flex; flex-wrap:wrap; gap:8px; }
  .cp-chip{
    padding:8px 15px; border-radius:100px; font-size:13px; font-weight:500;
    border:1.5px solid var(--line); background:var(--paper); color:var(--ink-soft);
    cursor:pointer; font-family:inherit; transition:all .15s ease;
    user-select:none; line-height:1;
  }
  .cp-chip:active{ transform:scale(0.93); }
  .cp-chip.cp-sel{
    border-color:var(--pine); background:var(--pine-light); color:var(--pine-dark);
    font-weight:600;
  }
  .cp-chip.cp-multi{
    border-color:var(--periwinkle); background:var(--periwinkle-light); color:var(--periwinkle);
    font-weight:600;
  }
  .cp-pref-toast{
    font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--pine);
    text-align:right; margin-top:10px; opacity:0; transition:opacity .3s ease;
    min-height:14px;
  }
  .cp-card-divider{ height:1px; background:var(--line); margin:10px 0; }
  .cp-max-hint{
    font-size:11.5px; color:var(--muted); margin-bottom:10px;
    font-family:'IBM Plex Mono',monospace;
  }

  /* RTL (Arabic) */
  .phone[dir="rtl"] .st-row{ flex-direction:row-reverse; }
  .phone[dir="rtl"] .st-char-hint{ text-align:left; }
  .phone[dir="rtl"] .cp-pref-toast{ text-align:left; }
  .phone[dir="rtl"] .st-btn-row{ flex-direction:row-reverse; }
  .phone[dir="rtl"] .tabbar{ flex-direction:row-reverse; }

  /* ========== ONBOARDING ========== */

  /* Welcome */
  #view-onboard-welcome{
    background:
      radial-gradient(circle at 30% 18%, #E8F0ED 0%, transparent 55%),
      radial-gradient(circle at 80% 75%, #F4ECDA 0%, transparent 50%),
      var(--bg);
    justify-content:space-between;
  }
  .ob-welcome-body{
    flex:1; display:flex; flex-direction:column; align-items:center;
    justify-content:center; padding:40px 36px 0 36px; gap:22px;
  }
  .ob-logo-mark{
    width:76px; height:76px; border-radius:24px; overflow:hidden;
    box-shadow:0 12px 32px -8px rgba(59,107,94,0.45);
  }
  .ob-logo-mark img{ width:76px; height:76px; display:block; }
  .ob-tagline{
    font-size:15.5px; color:var(--ink-soft); text-align:center;
    line-height:1.6; max-width:268px; margin:0;
  }
  .ob-welcome-footer{
    padding:32px 28px 44px 28px; width:100%;
    display:flex; flex-direction:column; gap:10px;
  }
  .ob-skip-onboarding{
    position:absolute;
    top:calc(12px + env(safe-area-inset-top));
    right:20px;
    z-index:2;
    min-height:44px;
    padding:0 8px;
    border:0;
    background:transparent;
    color:var(--muted);
    font-family:inherit;
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
  }
  .ob-returning-user{
    margin:3px 0 0;
    color:var(--muted);
    font-size:13px;
    text-align:center;
  }
  .ob-signin-link{
    min-height:44px;
    margin:-12px -10px;
    padding:10px;
    border:0;
    background:transparent;
    color:var(--pine);
    font-family:inherit;
    font-size:13px;
    font-weight:700;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    cursor:pointer;
  }

  /* Shared CTA styles */
  .ob-primary-btn{
    width:100%; padding:16px; background:var(--pine); color:#fff;
    border:none; border-radius:var(--radius-md); font-size:15.5px;
    font-weight:600; font-family:inherit; cursor:pointer;
    transition:transform .15s ease, opacity .15s ease;
  }
  .ob-primary-btn:active{ transform:scale(0.97); opacity:0.9; }
  .ob-ghost-link{
    background:none; border:none; font-size:13px; color:var(--muted);
    font-family:inherit; cursor:pointer; text-align:center; padding:4px;
  }

  /* Features */
  #view-onboard-features{ background:var(--bg); }
  .ob-slides-wrap{ flex:1; overflow:hidden; position:relative; }
  .ob-slide{
    position:absolute; inset:0; display:none; flex-direction:column;
    align-items:center; justify-content:center; padding:32px 36px 0 36px; gap:20px;
    animation:obSlideIn .3s ease;
  }
  .ob-slide.active{ display:flex; }
  @keyframes obSlideIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
  .ob-slide-icon{
    width:104px; height:104px; border-radius:30px;
    display:flex; align-items:center; justify-content:center; font-size:48px;
  }
  .ob-slide-title{
    font-family:'DellaRespira', serif; font-size:28px; font-weight:500;
    color:var(--ink); text-align:center; line-height:1.2; margin:0;
  }
  .ob-slide-body{
    font-size:14.5px; color:var(--ink-soft); text-align:center;
    line-height:1.62; max-width:282px; margin:0;
  }
  .ob-dots{
    display:flex; gap:6px; justify-content:center; padding:18px 0 0 0;
  }
  .ob-dot{
    width:6px; height:6px; border-radius:3px; background:var(--line);
    transition:background .25s ease, width .25s ease;
  }
  .ob-dot.active{ background:var(--pine); width:20px; }
  .ob-features-footer{
    padding:18px 28px 44px 28px; display:flex; flex-direction:column; gap:10px;
  }

  /* Name */
  #view-onboard-name{ background:var(--bg); justify-content:space-between; }
  .ob-name-body{
    flex:1; display:flex; flex-direction:column;
    padding:52px 32px 0 32px; gap:14px;
  }
  .ob-name-eyebrow{
    font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--muted);
  }
  .ob-name-title{
    font-family:'DellaRespira', serif; font-size:30px; font-weight:500;
    color:var(--ink); margin:0; line-height:1.22;
  }
  .ob-name-input{
    width:100%; border:none; border-bottom:2px solid var(--pine);
    background:transparent; font-family:'Inter', sans-serif;
    font-size:22px; font-weight:500; color:var(--ink);
    padding:12px 0; outline:none; margin-top:10px;
  }
  .ob-name-input::placeholder{ color:var(--line); }
  .ob-name-hint{ font-size:12px; color:var(--muted); margin:0; }
  .ob-name-footer{
    padding:32px 28px 44px 28px; display:flex; flex-direction:column; gap:10px;
  }

  /* Ready */
  #view-onboard-ready{
    background:
      radial-gradient(circle at 20% 15%, #E8F0ED 0%, transparent 50%),
      radial-gradient(circle at 85% 78%, #F4ECDA 0%, transparent 50%),
      var(--bg);
    justify-content:space-between;
  }
  .ob-ready-body{
    flex:1; display:flex; flex-direction:column; align-items:center;
    justify-content:center; padding:32px 36px 0 36px; gap:18px; text-align:center;
  }
  .ob-ready-ring{
    width:90px; height:90px; border-radius:24px; overflow:hidden;
    animation:obPopIn .45s cubic-bezier(.34,1.56,.64,1);
  }
  .ob-ready-ring img{ width:90px; height:90px; display:block; }
  @keyframes obPopIn{ from{ transform:scale(0.6); opacity:0; } to{ transform:scale(1); opacity:1; } }
  .ob-ready-title{
    font-family:'DellaRespira', serif; font-size:30px; font-weight:500;
    color:var(--ink); margin:0; line-height:1.22;
  }
  .ob-ready-sub{
    font-size:14.5px; color:var(--ink-soft); line-height:1.62;
    max-width:268px; margin:0;
  }
  .ob-ready-chips{
    display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:6px;
  }
  .ob-ready-chip{
    font-size:12px; font-weight:600; padding:6px 13px; border-radius:100px;
  }
  .ob-ready-footer{ padding:32px 28px 44px 28px; }

  /* ── App loading overlay ── */
  #appLoadingOverlay{
    position:fixed; inset:0; background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    z-index:9999; flex-direction:column; gap:14px;
    transition:opacity .25s ease;
  }
  #appLoadingOverlay.fade-out{ opacity:0; pointer-events:none; }
  .al-logo{
    width:72px; height:72px; border-radius:20px; overflow:hidden;
    animation:alPulse 1.6s ease-in-out infinite;
  }
  @keyframes alPulse{ 0%,100%{ opacity:0.8; transform:scale(0.96); } 50%{ opacity:1; transform:scale(1); } }
  .al-name{
    font-family:'DellaRespira',serif; font-size:26px; font-weight:600;
    color:var(--ink); letter-spacing:-0.01em; line-height:1;
  }
  .al-sub{ font-size:12px; color:var(--muted); }

  /* ── Feedback form ── */
  .feedback-cat{
    width:100%; padding:9px 10px; border:1px solid var(--line);
    border-radius:var(--radius-sm); background:var(--bg);
    font-family:inherit; font-size:13px; color:var(--ink);
    margin-bottom:8px; outline:none; cursor:pointer;
  }
  .feedback-area{
    width:100%; padding:10px 12px; border:1px solid var(--line);
    border-radius:var(--radius-sm); background:var(--bg);
    font-family:inherit; font-size:14px; color:var(--ink);
    resize:none; height:90px; outline:none; line-height:1.5;
    box-sizing:border-box; display:block;
  }
  .feedback-area:focus, .feedback-cat:focus{ border-color:var(--pine); }
  .feedback-char{ font-size:11px; color:var(--muted); text-align:right; margin-top:3px; }
  .fb-result{
    font-size:12.5px; font-weight:500; min-height:18px; margin-top:10px;
  }
  .fb-result.ok{ color:var(--pine-dark); }
  .fb-result.err{ color:var(--coral); }
  .reset-btn{
    width:100%; margin-top:14px; padding:11px 0;
    border:1.5px solid var(--coral); border-radius:var(--radius-md);
    background:transparent; color:var(--coral); font-family:inherit;
    font-size:13.5px; font-weight:600; cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .reset-btn:hover{ background:var(--coral); color:#fff; }

  .ob-ready-plan-note{
    font-size:11.5px; color:var(--muted); margin:10px 0 0 0;
    line-height:1.55; max-width:268px;
  }
  .ob-ready-plan-note strong{ color:var(--ink-soft); }

  /* Suggestion chips — fade edges to hint at horizontal scroll */
  .suggestions{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 28px),transparent 100%);
  }

  /* Premium badge on Voice Tone card label */
  .vt-premium-badge{
    font-size:9px; font-weight:700; letter-spacing:0.06em;
    color:var(--periwinkle); background:var(--periwinkle-light);
    padding:2px 6px; border-radius:100px; margin-left:6px;
    vertical-align:middle; display:inline-block;
  }

  /* Clickable tag chips */
  .tag-chip[data-nav]{ cursor:pointer; }
  .tag-chip[data-nav]:active{ opacity:0.75; }

  /* ── Notification toggle switches ─────────────────────────── */
  .notif-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:10px 0; border-bottom:1px solid var(--line);
  }
  .notif-row:last-child{ border-bottom:none; }
  .notif-row-disabled{ opacity:0.5; }
  .notif-row-text{ flex:1; min-width:0; }
  .notif-row-label{ font-size:14px; font-weight:500; color:var(--ink); }
  .notif-row-desc{  font-size:12px; color:var(--ink-soft); margin-top:2px; line-height:1.45; }
  .notif-soon{
    font-size:10px; font-weight:700; letter-spacing:0.05em;
    color:var(--periwinkle); background:var(--periwinkle-light);
    padding:1px 5px; border-radius:100px; margin-left:4px; vertical-align:middle;
  }
  /* Toggle knob */
  .notif-toggle{ position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0; }
  .notif-toggle input{ opacity:0; width:0; height:0; }
  .notif-slider{
    position:absolute; inset:0; cursor:pointer;
    background:var(--line); border-radius:100px;
    transition:background .2s ease;
  }
  .notif-slider::before{
    content:''; position:absolute;
    height:16px; width:16px; left:3px; bottom:3px;
    background:#fff; border-radius:50%;
    transition:transform .2s ease;
    box-shadow:0 1px 3px rgba(0,0,0,.15);
  }
  .notif-toggle input:checked + .notif-slider{ background:var(--pine); }
  .notif-toggle input:checked + .notif-slider::before{ transform:translateX(18px); }
  .notif-slider-disabled{ cursor:default; }

  /* ── Reminder list items (Schedule panel) ─────────────────── */
  .reminder-item{
    display:flex; align-items:flex-start; gap:8px;
    padding:10px 0; border-bottom:1px solid var(--line);
  }
  .reminder-item:last-child{ border-bottom:none; }
  .reminder-item-icon{ font-size:16px; margin-top:1px; flex-shrink:0; }
  .reminder-item-body{ flex:1; min-width:0; }
  .reminder-item-title{ font-size:13.5px; font-weight:500; color:var(--ink); word-break:break-word; }
  .reminder-item-time{  font-size:12px; color:var(--ink-soft); margin-top:2px; }
  .reminder-item-cancel{
    background:none; border:none; font-size:15px; color:var(--ink-soft);
    cursor:pointer; padding:2px 4px; flex-shrink:0; line-height:1;
    border-radius:4px; transition:color .15s;
  }
  .reminder-item-cancel:hover{ color:var(--ink); }
  .reminder-section-label{
    font-size:11px; font-weight:700; letter-spacing:0.06em;
    color:var(--ink-soft); text-transform:uppercase; margin:16px 0 6px;
  }

  /* ========================================================================
     RESPONSIVE APP SHELL — replaces the prototype phone frame
     ======================================================================== */
  html, body{ min-height:100%; }
  body{
    min-height:100svh;
    min-height:100dvh;
    padding:0;
    display:block;
    overflow:hidden;
    background:var(--bg);
  }
  .stage{
    width:100%;
    min-height:100svh;
    min-height:100dvh;
    display:block;
  }
  .phone{
    width:100%;
    height:100svh;
    height:100dvh;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:var(--paper);
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    overflow:hidden;
  }
  .screen{ min-height:0; overflow:hidden; }
  .view{ min-height:0; }

  .app-topbar{
    flex:0 0 auto;
    min-height:60px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:calc(10px + env(safe-area-inset-top)) clamp(20px,5vw,42px) 10px;
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    z-index:4;
  }
  .app-brand{
    display:flex;
    align-items:center;
    gap:9px;
    font-family:'DellaRespira',serif;
    font-size:21px;
    color:var(--ink);
  }
  .app-brand-mark{
    width:30px;
    height:30px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:var(--pine);
    color:#fff;
    font-family:'DellaRespira',serif;
    font-size:15px;
  }
  .topbar-icon-btn{
    width:42px;
    height:42px;
    border:1px solid var(--line);
    border-radius:50%;
    background:var(--paper);
    color:var(--pine);
    display:grid;
    place-items:center;
    position:relative;
  }
  .topbar-icon-btn::after{
    content:'';
    position:absolute;
    top:7px;
    right:7px;
    width:6px;
    height:6px;
    border-radius:50%;
    border:2px solid var(--paper);
    background:var(--coral);
  }
  .ui-icon{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .ask-header{ padding:24px clamp(20px,5vw,42px) 12px; }
  .ask-title{ font-size:clamp(29px,5vw,39px); line-height:1.08; }
  .glance{ padding:10px clamp(20px,5vw,42px) 7px; }
  .thread{ padding:16px clamp(20px,5vw,42px); }
  .suggestions{ padding:4px clamp(20px,5vw,42px) 10px; }

  /* One unified WhatsApp-style composer. */
  .composer{
    padding:8px clamp(16px,4vw,38px) max(12px,env(safe-area-inset-bottom));
    align-items:flex-end;
    justify-content:center;
    background:rgba(244,247,247,.94);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .composer-input-shell{
    min-width:0;
    width:auto;
    max-width:710px;
    flex:1;
    min-height:50px;
    display:flex;
    align-items:flex-end;
    gap:4px;
    padding:5px 7px 5px 15px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--paper);
    transition:border-color .15s ease,box-shadow .15s ease;
  }
  .composer-input-shell:focus-within{
    border-color:var(--pine);
    box-shadow:0 0 0 3px rgba(40,80,78,.08);
  }
  .composer-input{
    min-width:0;
    flex:1;
    min-height:38px;
    max-height:90px;
    padding:9px 0;
    border:0;
    outline:0;
    resize:none;
    background:transparent;
    color:var(--ink);
    font-family:inherit;
    font-size:16px;
    line-height:1.35;
  }
  .composer-input::placeholder{ color:var(--muted); }
  .composer-actions{ display:flex; align-items:center; gap:1px; flex:0 0 auto; }
  .composer-option{
    width:34px;
    height:38px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--muted);
    display:grid;
    place-items:center;
  }
  .composer-main{
    width:50px;
    height:50px;
    flex:0 0 50px;
    border:0;
    border-radius:16px;
    background:var(--pine);
    color:#fff;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
    transition:background .15s ease,transform .15s ease;
  }
  .composer-main:active{ transform:scale(.95); }
  .composer-main.recording{ background:var(--coral); }
  .composer-main .send-icon{ display:none; }
  .composer-main.has-text .mic-icon{ display:none; }
  .composer-main.has-text .send-icon{ display:grid; }
  .composer-main.recording .mic-icon,
  .composer-main.recording .send-icon{ display:none; }
  .composer-main.transcribing .mic-icon,
  .composer-main.transcribing .send-icon{ display:none; }
  .composer-main.transcribing .waveform{ display:flex; }
  .composer-main .mic-icon,
  .composer-main .send-icon{ place-items:center; }
  .composer-main .waveform{ gap:2px; height:18px; }
  .composer-main .waveform span{ width:2px; }
  .composer-main .rec-timer{ position:absolute; bottom:2px; margin:0; font-size:8px; }
  .composer-main .rec-ring{ border-radius:16px; }
  .composer-main.tier-locked::before,
  .composer-main.tier-locked::after{ display:none; content:none; }
  .sr-only{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
  }

  .ov-header,.st-header{ padding:24px clamp(20px,5vw,42px) 12px; }
  .ov-title,.st-title{ font-size:32px; }
  .segmented{ padding:8px clamp(20px,5vw,42px) 12px; overflow-x:auto; scrollbar-width:none; }
  .segmented::-webkit-scrollbar{ display:none; }
  .seg-btn{ min-width:88px; }
  .ov-body,.st-body{ padding-left:clamp(20px,5vw,42px); padding-right:clamp(20px,5vw,42px); }

  .tabbar{
    z-index:5;
    padding:8px 16px max(9px,env(safe-area-inset-bottom));
    justify-content:center;
    gap:4px;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .tab{
    max-width:150px;
    min-height:52px;
    border-radius:15px;
    gap:3px;
    padding:5px 0;
    font-size:10px;
    font-weight:700;
  }
  .tab.active{ background:var(--pine-light); }
  .tab-icon{ width:20px; height:20px; display:grid; place-items:center; }
  .tab-icon .ui-icon{ width:20px; height:20px; }

  @media (min-width:431px){ .ask-glance-toggle{ display:none; } }
  @media (max-width:430px){
    .ask-glance-toggle{ display:grid; }
    #view-ask .glance{ display:none; padding-top:10px; }
    #view-ask .glance.is-open{ display:flex; }
    .ask-header{ padding-top:18px; }
  }
  @media (min-width:760px){
    body{
      padding:58px 24px 24px;
      background:radial-gradient(circle at 18% 0%,#e4eeee 0,transparent 38%),var(--bg);
    }
    .stage{ min-height:0; }
    .phone{
      width:min(960px,100%);
      height:calc(100svh - 82px);
      height:calc(100dvh - 82px);
      min-height:600px;
      margin:auto;
      border:1px solid var(--line);
      border-radius:28px;
      box-shadow:0 22px 60px rgba(22,55,51,.10);
    }
    .ask-header,.glance,.thread,.suggestions,.ov-header,.st-header,.segmented,.ov-body,.st-body{
      padding-left:clamp(28px,7vw,100px);
      padding-right:clamp(28px,7vw,100px);
    }
    .composer{ padding-left:clamp(28px,7vw,100px); padding-right:clamp(28px,7vw,100px); }
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  }