:root {
      --bg: #F5F4F1; --bg2: #EEF2F7;
      --brand: #1B3A5C; --teal: #4DA8BB;
      --text1: #1A2332; --text2: #5A6B7D; --border: #D4DCE6;
      --rail-w: 52px; --panel-w: 450px; --header-h: 56px; --mob-tabbar-h: 56px;
    }
    html { background: var(--brand); }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Inter','Segoe UI',sans-serif; background: var(--bg); color: var(--text1); font-size: 16px; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: auto; }

    /* ── Header ── */
    header { background: var(--brand); color: white; padding: 0 16px; padding-top: env(safe-area-inset-top); height: calc(var(--header-h) + env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--teal); flex-shrink: 0; }
    .header-left { display: flex; align-items: center; gap: 10px; }
    .header-logo { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #FAFAFA; border: 2.5px solid var(--gold); flex-shrink: 0; }
    .header-logo img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
    .header-title-wrap { display: flex; flex-direction: column; gap: 1px; }
    .header-brand-name { font-family: 'DM Serif Display',Georgia,serif; font-size: 20px; font-weight: 400; letter-spacing: -0.3px; color: white; line-height: 1.2; }
    .header-tagline { font-size: 12px; color: rgba(255,255,255,0.7); font-weight: 400; line-height: 1; }

    /* ── Settings Dropdown ── */
    @keyframes popIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

    /* ── App Body ── */
    .app-body { flex: 1; display: flex; flex-direction: row; min-height: 0; overflow: hidden; }

    /* ── Right Rail ── */
    .right-rail { width: var(--rail-w); flex-shrink: 0; background: var(--brand); display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-left: 1px solid rgba(255,255,255,0.08); z-index: 10; }
    .rail-top { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 6px; }
    .rail-icon { position: relative; width: 40px; height: 48px; background: none; border: none; cursor: pointer; border-radius: 8px; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transition: color 0.15s, background 0.15s; flex-shrink: 0; }
    .rail-icon:hover { color: white; background: rgba(255,255,255,0.08); }
    .rail-icon.active { color: #4DA8BB; }
    .rail-icon.active::before { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; background: #4DA8BB; border-radius: 2px 0 0 2px; }
    .rail-icon svg { display: block; flex-shrink: 0; width: 22px; height: 22px; }
    .rail-icon-lbl { display: none; }
    .rail-tooltip { position: absolute; right: calc(100% + 10px); left: auto; top: 50%; transform: translateY(-50%); background: #1a2332; color: white; font-size: 0.72rem; white-space: nowrap; padding: 4px 10px; border-radius: 5px; pointer-events: none; opacity: 0; transition: opacity 0.12s 0s; z-index: 500; font-family: 'Inter',inherit; }
    .rail-icon:hover .rail-tooltip { opacity: 1; transition: opacity 0.12s 0.3s; }

    /* ── Right Panel (permanent, 500px) ── */
    .right-panel { width: var(--panel-w); flex-shrink: 0; background: var(--bg2); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
    .panel-inner { width: 100%; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    .mob-page-backbar { display: none; }
    .panel-content { display: none; flex: 1; flex-direction: column; overflow: hidden; }
    .panel-content.active { display: flex; }
    .panel-header { padding: 10px 14px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text2); display: flex; align-items: center; justify-content: space-between; }


    /* ── Theory card inline accordion ── */
    .theory-accordion { overflow: hidden; max-height: 0; transition: max-height 0.32s ease; }
    .theory-accordion-inner { border-top: 1px solid var(--bg2); margin-top: 9px; padding-top: 10px; }
    .theory-card.expanded .theory-accordion { max-height: 900px; }
    .ta-ask-link { display: block; width: 100%; text-align: left; background: rgba(77,168,187,0.06); border: 1px solid rgba(77,168,187,0.2); border-radius: 6px; cursor: pointer; color: var(--teal); font-size: 0.75rem; font-family: 'Inter',inherit; padding: 6px 10px; margin-bottom: 4px; transition: background 0.13s, border-color 0.13s; line-height: 1.4; }
    .ta-ask-link:hover { background: rgba(77,168,187,0.12); border-color: rgba(77,168,187,0.4); }
    .ta-ask-link::before { content: '→ '; opacity: 0.4; }
    .ta-action-item { display: flex; align-items: flex-start; gap: 7px; padding: 5px 0; border-top: 1px solid var(--bg2); }
    .ta-action-item:first-child { border-top: none; }
    .ta-action-check { flex-shrink: 0; margin-top: 2px; accent-color: var(--teal); cursor: pointer; }
    .ta-action-text { font-size: 0.77rem; line-height: 1.4; color: var(--text1); flex: 1; }
    .ta-action-item.done .ta-action-text { text-decoration: line-through; opacity: 0.4; }
    .ta-action-undo { font-size: 0.68rem; color: var(--teal); cursor: pointer; background: none; border: none; padding: 0 0 0 2px; font-family: inherit; text-decoration: underline; flex-shrink: 0; }
    .ta-bodymap-btn { display: flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--teal); border-radius: 7px; padding: 5px 10px; font-size: 0.75rem; color: var(--teal); cursor: pointer; font-family: 'Inter',inherit; transition: all 0.13s; width: 100%; text-align: left; }
    .ta-bodymap-btn:hover { background: var(--teal); color: white; }

    /* ── My Genetics section (in Markers panel) ── */

    /* ── Inline action bar ── */
    /* Markers — action rows sit between data rows */
    /* Regimen table — same pattern */
    .regimen-table .regimen-row > td { border-bottom: none; }
    /* Purpose truncation */
    /* Bullet list items — column for action bar */
    .regimen-bullet-list li { flex-direction: column !important; align-items: stretch !important; }
    .bullet-item-row { display: flex; align-items: flex-start; gap: 7px; }
    /* ── Learn modal ── */
    #learn-modal { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; }
    #learn-modal.open { display: flex; }
    .learn-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.38); }
    .learn-modal-box { position: relative; background: #FAFAF9; border-radius: 14px; max-width: 460px; width: calc(100% - 40px); max-height: 78dvh; overflow-y: auto; padding: 26px 24px 22px; box-shadow: 0 12px 40px rgba(0,0,0,0.18); }
    .learn-modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text2); line-height: 1; padding: 0; }
    .learn-modal-close:hover { color: var(--text1); }
    .learn-modal-title { font-family: 'DM Serif Display', serif; font-size: 1.15rem; color: var(--brand); margin: 0 0 12px; line-height: 1.3; padding-right: 24px; }
    .learn-modal-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
    .learn-modal-body { font-size: 0.86rem; color: var(--text1); line-height: 1.65; }
    .learn-modal-body p { margin: 0 0 10px; }
    .learn-modal-body p:last-child { margin-bottom: 0; }

    /* ── Onboarding carousel ── */
    #ob-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.72); z-index: 9000; display: none; }
    #ob-backdrop.ob-show { display: block; }
    #onboarding-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 560px; min-height: 480px; height: auto; max-height: 90dvh; width: 90%; background: #FAFAF9; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.24); border: 1px solid #E5E7EB; z-index: 9001; padding: 0; overflow: visible; display: none; flex-direction: column; }
    #onboarding-modal.ob-show { display: flex; }
    /* ── .ob-box removed — #onboarding-modal IS the box ── */
    .ob-arrow { position: absolute; top: calc(48px + 72px / 2); transform: translateY(-50%); background: rgba(255,255,255,0.18); border: 1.5px solid rgba(255,255,255,0.4); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; transition: background 0.15s; z-index: 10; }
    .ob-arrow:hover { background: rgba(255,255,255,0.30); }
    .ob-arrow-prev { left: 12px; }
    .ob-arrow-next { right: 12px; }
    .ob-arrow.ob-hidden { opacity: 0; pointer-events: none; }
    .ob-slides-viewport { overflow: hidden; border-radius: 16px 16px 0 0; width: 100%; flex: 1; display: flex; flex-direction: column; }
    .ob-hero-badge-float { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 5; background: white; border-radius: 50%; width: 192px; height: 192px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 28px rgba(0,0,0,0.22); opacity: 1; transition: opacity 0.2s; pointer-events: none; }
    .ob-hero-badge-float img { width: 160px; height: auto; object-fit: contain; }
    .ob-slide-hdr-hero { min-height: 212px; }
    .ob-slides-track { display: flex; transition: transform 0.3s ease; user-select: none; flex: 1; }
    .ob-slide { min-width: 100%; display: flex; flex-direction: column; }
    .ob-slide-hdr { background: #4DA8BB; padding: 32px 40px 28px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
    .ob-gnome-badge-sm { background: white; border-radius: 50%; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.18); }
    .ob-gnome-badge-sm img { width: 100px; height: auto; object-fit: contain; }
    .ob-slide-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px 40px 12px; overflow-y: auto; }
    .ob-headline { font-size: 1.6rem; font-weight: 600; color: #1A2332; margin: 0 0 16px; line-height: 1.3; }
    .ob-body { font-size: 1.05rem; color: var(--text2); line-height: 1.7; max-width: 380px; margin: 0 auto; }
    .ob-cta { margin-top: 24px; background: var(--teal); color: white; border: none; border-radius: 8px; padding: 16px 32px; font-size: 1.05rem; font-weight: 600; cursor: pointer; font-family: 'Inter',inherit; transition: background 0.15s; }
    .ob-cta:hover:not(:disabled) { background: #3A8FA0; }
    .ob-agree-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:16px; width:100%; }
    .ob-agree-label { display:flex; align-items:flex-start; gap:10px; font-size:0.82rem; color:#4A5E64; line-height:1.4; text-align:left; cursor:pointer; max-width:340px; }
    .ob-agree-checkbox { margin-top:2px; flex-shrink:0; width:18px; height:18px; accent-color:#4DA8BB; cursor:pointer; }
    .ob-cta-disabled { opacity:0.4; cursor:not-allowed !important; }
    .ob-cta-secondary { margin-top: 2px; background: none; border: none; color: var(--teal); font-size: 0.92rem; font-weight: 500; cursor: pointer; font-family: 'Inter',inherit; padding: 6px 12px; transition: color 0.15s; }
    .ob-cta-secondary:hover:not(:disabled) { color: #3A8FA0; text-decoration: underline; }
    .ob-dots { display: flex; justify-content: center; gap: 10px; padding: 16px 0 20px; flex-shrink: 0; }
    .ob-dot { width: 10px; height: 10px; border-radius: 50%; background: #D1D5DB; transition: background 0.2s; cursor: pointer; flex-shrink: 0; }
    .ob-dot.active { background: var(--teal); }
    @media (max-width: 767px) {
      .ob-slide-hdr { padding: 36px 24px 32px; }
      .ob-slide-content { padding: 24px 24px 8px; }
      .ob-headline { font-size: 1.3rem; }
      .ob-body { font-size: 0.95rem; }
      .ob-arrow { display: none; }
      .ob-dots { padding: 18px 0 22px; }
    }

    /* ── Symptoms panel ── */
    .symptoms-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 14px 28px; }
    .symptoms-scroll::-webkit-scrollbar { width: 3px; }
    .symptoms-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .symptoms-header-row { margin-bottom: 6px; }
    .symptoms-empty { font-size: 0.77rem; color: var(--text2); font-style: italic; margin: 0; opacity: 0.8; line-height: 1.55; }
    .symptom-status-pill { font-size: 9.5px; font-weight: 600; padding: 0; white-space: nowrap; flex-shrink: 0; letter-spacing: 0.05em; text-transform: uppercase; background: none; border: none; }
    .status-noted     { color: #5B9BD5; }
    .status-resolved  { color: #52b788; }
    .status-ongoing { color: var(--gold); }
    /* Symptoms view toggle */
    /* Severity pills */
    .sx-sev-pill { font-size: 9.5px; font-weight: 600; padding: 0; white-space: nowrap; letter-spacing: 0.05em; text-transform: uppercase; background: none; border: none; }
    .sev-mild     { color: #52b788; }
    .sev-moderate { color: var(--gold); }
    .sev-severe   { color: #e07070; }
    /* Symptom table view */
    .sx-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
    .sx-th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text2); padding: 5px 6px 6px; border-bottom: 1.5px solid var(--border); cursor: pointer; white-space: nowrap; user-select: none; }
    .sx-th:hover { color: var(--teal); }
    .sx-sort-icon { font-size: 9px; opacity: 0.6; margin-left: 2px; }
    .sx-row { cursor: pointer; transition: background 0.1s; }
    .sx-row:hover { background: rgba(77,168,187,0.05); }
    .sx-row td { padding: 7px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .sx-row:last-child td { border-bottom: none; }
    .sx-td-name { font-size: 12.5px; color: var(--text1); font-weight: 500; transition: color 0.1s; }
    .sx-row:hover .sx-td-name { color: var(--teal); }
    .sx-td-date { font-size: 11px; color: var(--text2); white-space: nowrap; }
    .sx-no-data { font-size: 11px; color: var(--text2); }
    /* Theory grouped view */
    .theory-col-hdr { display: flex; align-items: center; padding: 5px 4px 6px; border-bottom: 1.5px solid var(--border); margin-bottom: 0; }
    .theory-col-hdr-name { flex: 1; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text2); }
    .theory-col-hdr-right { display: flex; gap: 0; flex-shrink: 0; }
    .theory-col-hdr-cell { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text2); white-space: nowrap; min-width: 80px; text-align: right; }
    .sx-theory-group { margin-bottom: 16px; }
    .sx-theory-hdr { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 4px 6px; border-bottom: 1.5px solid var(--border); margin-bottom: 4px; margin-top: 8px; }
    .sx-theory-name { font-size: 13px; font-weight: 700; color: var(--brand); min-width: 0; word-break: break-word; white-space: normal; letter-spacing: 0.03em; }
    .sx-theory-badge { font-size: 9px; font-weight: 600; padding: 0; white-space: nowrap; letter-spacing: 0.05em; text-transform: uppercase; background: none; border: none; flex-shrink: 0; margin-top: 2px; }
    .theory-badge-active     { background: none; color: #52b788; font-weight: 600; letter-spacing: 0.05em; }
    .theory-badge-monitoring { background: none; color: #5B9BD5; font-weight: 600; letter-spacing: 0.05em; }
    .theory-badge-resolved { background: #d1fae5; color: #065f46; }
    .theory-badge-ruled { background: var(--bg2); color: var(--text2); }
    /* ── Procedures list ── */
    .proc-list { padding: 4px 0; }
    .proc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.13s; }
    .proc-row:hover { background: var(--hover); }
    .proc-row:hover .proc-row-name { color: var(--teal); }
    .proc-row-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
    .proc-row-name { font-size: 0.83rem; font-weight: 600; color: var(--text1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.13s; }
    .proc-cat-badge { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; background: var(--bg2); color: var(--text2); border-radius: 4px; padding: 1px 6px; flex-shrink: 0; }
    .proc-row-date { font-size: 0.75rem; color: var(--text2); flex-shrink: 0; }
    /* ── Family History list ── */
    .fam-list { padding: 4px 0; }
    .fam-group { margin-bottom: 4px; }
    .fam-group-hdr { font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text2); opacity: 0.7; padding: 8px 12px 3px; border-top: 1px solid var(--border); }
    .fam-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.13s; }
    .fam-row:hover { background: var(--hover); }
    .fam-row:hover .fam-row-condition { color: var(--teal); }
    .fam-row-condition { font-size: 0.83rem; font-weight: 500; color: var(--text1); transition: color 0.13s; }
    .fam-row-meta { font-size: 0.75rem; color: var(--text2); flex-shrink: 0; }
    .theory-badge-observing { background: #e5e7eb; color: #4b5563; }
    .theory-badge-forming { background: none; color: #52b788; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 9px; }
    .theory-badge-emerging  { background: none; color: #5B9BD5; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 9px; }
    .theory-badge-strong    { background: none; color: var(--gold); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 9px; }
    .theory-badge-merged    { background: #f3f4f6; color: #9ca3af; text-decoration: line-through; opacity: 0.6; }
    .theory-clickable-hdr { cursor: pointer; transition: background 0.1s; border-radius: 4px; }
    .theory-clickable-hdr:hover { background: rgba(77,168,187,0.06); }
    .theory-clickable-hdr:hover .mkr-theory-name,
    .theory-clickable-hdr:hover .sx-theory-name,
    .theory-clickable-hdr:hover .rg-theory-name { color: var(--teal); }
    .sx-badge-unlinked { background: var(--bg2); color: var(--text2); }
    .sx-theory-symptom { display: flex; align-items: center; justify-content: space-between; padding: 9px 4px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s; border-radius: 3px; }
    .sx-theory-symptom:last-child { border-bottom: none; }
    .sx-theory-symptom:hover { background: rgba(77,168,187,0.05); }
    .sx-theory-sx-name { font-size: 12.5px; font-weight: 500; color: var(--text1); flex: 1; transition: color 0.1s; }
    .sx-theory-symptom:hover .sx-theory-sx-name { color: var(--teal); }
    .sx-theory-sx-badges { display: flex; gap: 16px; align-items: center; flex-shrink: 0; min-width: 160px; justify-content: flex-end; }

    /* ── Item detail modal (Markers / Regimen / Actions / Genetic) ── */
    #item-modal { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; }
    #item-modal.open { display: flex; }
    .item-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.38); }
    .item-modal-box { position: relative; background: #FAFAF9; border-radius: 14px; max-width: 440px; width: calc(100% - 40px); max-height: 82dvh; overflow-y: auto; padding: 26px 24px 22px; box-shadow: 0 12px 40px rgba(0,0,0,0.18); }
    .item-modal-title { font-family: 'DM Serif Display', serif; font-size: 1.1rem; color: var(--brand); margin: 0 0 10px; line-height: 1.35; padding-right: 28px; }
    .item-modal-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
    .item-modal-chip { font-size: 11px; color: var(--text2); background: var(--bg2); border-radius: 5px; padding: 3px 9px; border: 1px solid var(--border); }
    .item-modal-fields { display: flex; flex-direction: column; gap: 9px; }
    .item-modal-field { display: flex; gap: 10px; }
    .item-modal-field-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text2); width: 80px; flex-shrink: 0; padding-top: 1px; }
    .item-modal-field-value { font-size: 13px; color: var(--text1); line-height: 1.4; flex: 1; }
    .item-modal-edu { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
    .item-modal-edu-hdr { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text2); margin-bottom: 8px; }
    .item-modal-edu-body { font-size: 0.84rem; color: var(--text1); line-height: 1.65; }
    .item-modal-edu-body p { margin: 0 0 8px; }
    .item-modal-edu-body p:last-child { margin-bottom: 0; }
    .item-modal-actions { display: flex; gap: 8px; border-top: 1px solid var(--border); padding-top: 16px; margin-top: 18px; }
    .im-edit-btn { flex: 1; padding: 8px; border: 1.5px solid var(--teal); border-radius: 8px; background: none; color: var(--teal); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: background 0.12s; }
    .im-edit-btn:hover { background: rgba(77,168,187,0.08); }
    .im-delete-btn { flex: 1; padding: 8px; border: 1.5px solid #dc2626; border-radius: 8px; background: none; color: #dc2626; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: background 0.12s; }
    .im-delete-btn:hover { background: #fef2f2; }
    #confirm-modal { position: fixed; inset: 0; z-index: 10001; display: none; align-items: center; justify-content: center; }
    #confirm-modal.open { display: flex; }
    .confirm-modal-box { position: relative; background: #FAFAF9; border-radius: 14px; max-width: 380px; width: calc(100% - 40px); padding: 22px 24px 18px; box-shadow: 0 12px 40px rgba(0,0,0,0.18); }
    .confirm-modal-message { font-size: 14px; color: var(--text1); line-height: 1.55; margin-bottom: 18px; }
    .confirm-modal-actions { display: flex; gap: 8px; }
    .confirm-cancel-btn { flex: 1; padding: 8px; border: 1.5px solid var(--border); border-radius: 8px; background: none; color: var(--text2); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: background 0.12s; }
    .confirm-cancel-btn:hover { background: var(--bg2); }
    .confirm-ok-btn { flex: 1; padding: 8px; border: 1.5px solid #dc2626; border-radius: 8px; background: none; color: #dc2626; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: background 0.12s; }
    .confirm-ok-btn:hover { background: #fef2f2; }

    /* ── Daily Regimen panel ── */
    .protocols-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 0 28px; }
    .protocols-scroll::-webkit-scrollbar { width: 3px; }
    .protocols-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    /* section structure */
    .rg-tab-row { display: flex; gap: 0; margin: 0 0 10px; flex-wrap: nowrap; border-bottom: none; overflow-x: auto; scrollbar-width: none; }
    .rg-tab-row::-webkit-scrollbar { display: none; }
    .rg-tab-btn { flex: 1; padding: 7px 4px; font-size: 0.72rem; font-weight: 500; border: none; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #FAFAF9; color: var(--text2); cursor: pointer; transition: color 0.15s, background 0.15s; font-family: inherit; white-space: nowrap; text-align: center; }
    .rg-tab-btn:last-child { border-right: none; }
    .rg-tab-btn:hover { color: var(--teal); background: rgba(77,168,187,0.04); }
    .rg-tab-btn.active { font-weight: 700; color: white; background: var(--teal); border-bottom-color: var(--teal); border-right-color: var(--teal); }
    .rg-theory-group { margin-bottom: 16px; }
    .rg-theory-hdr { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-bottom: 6px; border-bottom: 1.5px solid var(--border); margin-bottom: 4px; }
    .rg-theory-name { font-size: 12px; font-weight: 600; color: var(--brand); }
    .rg-theory-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 4px; }
    .rg-theory-item:last-child { border-bottom: none; }
    .rg-theory-item:hover { background: var(--bg2); }
    .rg-theory-item-name { font-size: 12px; font-weight: 500; color: var(--text1); flex: 1; transition: color 0.12s; }
    .rg-theory-item:hover .rg-theory-item-name { color: var(--teal); }
    .rg-theory-item-sub { font-size: 11px; color: var(--text2); white-space: nowrap; }
    .regimen-empty { font-size: 0.77rem; color: var(--text2); font-style: italic; margin: 0 0 4px; opacity: 0.8; }
    /* table (medications, supplements) */
    .regimen-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .regimen-table th { text-align: left; padding: 5px 7px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text2); border-bottom: 2px solid var(--border); white-space: nowrap; }
    .regimen-table td { padding: 7px 7px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text1); line-height: 1.4; }
    .regimen-table tr:last-child td { border-bottom: none; }
    .regimen-table tr.regimen-row { cursor: pointer; transition: background 0.1s; }
    .regimen-table tr.regimen-row:hover td { background: rgba(77,168,187,0.06); }
    .regimen-table tr.regimen-row:hover .rt-name { color: var(--teal); }
    .rt-name { font-weight: 500; font-size: 12px; }
    .rt-dose { white-space: nowrap; font-size: 12px; color: var(--text1); }
    .rt-freq { font-size: 11px; color: var(--text2); white-space: nowrap; }
    /* bullet list (nutrition, practices) */
    .regimen-bullet-list { list-style: none; margin: 0; padding: 0; }
    .regimen-bullet-list li { display: flex; align-items: flex-start; gap: 7px; padding: 6px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s; border-radius: 3px; }
    .regimen-bullet-list li:last-child { border-bottom: none; }
    .regimen-bullet-list li:hover { background: rgba(77,168,187,0.05); }
    .regimen-bullet-list li:hover .regimen-bullet-text { color: var(--teal); }
    .regimen-bullet-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); flex-shrink: 0; margin-top: 6px; }
    .regimen-bullet-text { font-size: 12px; color: var(--text1); line-height: 1.5; flex: 1; }
    .regimen-bullet-sub { font-size: 11px; color: var(--text2); margin-top: 1px; }
    /* collapsible (protocols) */
    .regimen-collapsible-list { display: flex; flex-direction: column; gap: 4px; }
    .regimen-collapsible { border: 1px solid var(--border); border-radius: 7px; overflow: hidden; cursor: pointer; transition: border-color 0.12s; }
    .regimen-collapsible:hover { border-color: var(--teal); }
    .regimen-collapsible-hdr { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: var(--bg2); font-size: 12px; font-weight: 500; color: var(--text1); gap: 8px; transition: background 0.1s; }
    .regimen-collapsible-hdr:hover { background: rgba(77,168,187,0.07); color: var(--teal); }
    /* compat keep old proto-item CSS */

    /* ── Body map inline (in right panel) ── */

    /* ── Conversations Panel ── */
    .history-search-input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 0.8rem; color: var(--text1); background: #FAFAF9; font-family: 'Inter',inherit; outline: none; transition: border-color 0.15s; }
    .history-search-input:focus { border-color: var(--teal); }
    .history-search-input::placeholder { color: var(--text2); }
    .history-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 0; }
    .history-list::-webkit-scrollbar { width: 3px; }
    .history-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    /* ── Theory Navigator ── */
    .theory-new-btn { display: block; width: 100%; background: var(--teal); color: white; border: none; border-radius: 10px; padding: 11px 14px; font-size: 0.85rem; font-family: 'Inter',sans-serif; font-weight: 500; cursor: pointer; text-align: center; margin-bottom: 10px; transition: background 0.15s; }
    .theory-new-btn:hover { background: #3A8FA0; }
    .theory-search-input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 0.8rem; color: var(--text1); background: #FAFAF9; font-family: 'Inter',sans-serif; outline: none; transition: border-color 0.15s; margin-bottom: 10px; }
    .theory-search-input:focus { border-color: var(--teal); }
    .theory-section-label { font-size: 0.63rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text2); padding: 0 2px 7px; opacity: 0.7; }
    .theory-cards-list { flex: 1; overflow-y: auto; overflow-x: hidden; }
    .theory-cards-list::-webkit-scrollbar { width: 3px; }
    .theory-cards-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .theory-card { background: #FAFAF9; border: 1.5px solid var(--border); border-radius: 0; padding: 12px; margin-bottom: 8px; cursor: default; transition: border-color 0.15s, box-shadow 0.15s; position: relative; }
    .theory-card:hover { border-color: var(--teal); box-shadow: 0 2px 10px rgba(77,168,187,0.12); }
    .theory-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 0; cursor: pointer; flex-wrap: nowrap; }
    .theory-card-top:hover .theory-card-title { color: var(--teal); transition: color 0.12s; }
    .theory-card-title-wrap { display: flex; align-items: flex-start; gap: 4px; flex: 1; min-width: 0; }
    .theory-card-title { font-size: 0.84rem; font-weight: 500; color: #1B3A5C; line-height: 1.3; flex: 1; min-width: 0; word-break: break-word; white-space: normal; overflow: visible; text-overflow: clip; }
    .theory-title-edit-btn { opacity: 0; flex-shrink: 0; background: none; border: none; cursor: pointer; padding: 2px; color: var(--teal); transition: opacity 0.15s; line-height: 1; }
    .theory-card:hover .theory-title-edit-btn { opacity: 0.6; }
    .theory-title-edit-btn:hover { opacity: 1 !important; }
    .theory-title-input { font-size: 0.84rem; font-weight: 500; color: #1B3A5C; border: 1px solid var(--teal); border-radius: 4px; padding: 1px 5px; width: 100%; font-family: inherit; outline: none; background: #fff; }
    .theory-status-pill { flex-shrink: 0; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; background: none; border: none; padding: 0; white-space: nowrap; color: var(--gold); margin-top: 2px; }
    .theory-status-observing { color: #6b7280; font-weight: 500; }
    .theory-status-forming { color: #52b788; }
    .theory-status-emerging  { color: #5B9BD5; font-weight: 500; }
    .theory-status-strong    { color: var(--gold); font-weight: 700; }
    @keyframes statusPulse { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
    .theory-status-pulse { animation: statusPulse 1.2s ease 2; }
    .theory-dismiss-x { flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--text2); font-size: 0.9rem; line-height: 1; padding: 0 0 0 2px; opacity: 0.45; transition: opacity 0.15s; font-family: inherit; position: relative; }
    .theory-dismiss-x:hover { opacity: 1; }
    .theory-dismiss-x[title]:hover::after { content: attr(title); position: absolute; bottom: calc(100% + 5px); right: 0; background: #1a1a2e; color: white; font-size: 0.68rem; white-space: nowrap; padding: 3px 8px; border-radius: 5px; pointer-events: none; font-family: 'Inter',sans-serif; z-index: 200; }
    .theory-card-synthesis { font-size: 13px; color: var(--text2); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: 5px; }
    .theory-card-meta { font-size: 0.69rem; color: var(--text2); opacity: 0.7; }
    .theory-empty-msg { padding: 16px 4px 10px; font-size: 0.78rem; color: var(--text2); line-height: 1.55; font-style: italic; }
    .theory-archive-link { display: block; text-align: center; padding: 10px 0 4px; font-size: 0.75rem; color: var(--text2); cursor: pointer; text-decoration: none; border-top: 1px solid var(--border); margin-top: 6px; }
    .theory-archive-link:hover { color: var(--teal); }
    @keyframes theoryPulse { 0%{border-color:var(--border); box-shadow:none;} 30%{border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);} 100%{border-color:var(--border); box-shadow:none;} }
    .theory-card-pulse { animation: theoryPulse 2s ease forwards; }
    /* ── Dismissed theories section ── */
    .dismissed-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
    .dismissed-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text2); opacity: 0.5; padding: 0 2px 8px; }
    .dismissed-card { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); margin-bottom: 6px; }
    .dismissed-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .dismissed-card-title { font-size: 0.78rem; color: var(--text2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dismissed-restore-link { background: none; border: none; cursor: pointer; color: var(--teal); font-size: 0.74rem; font-family: inherit; padding: 0; white-space: nowrap; flex-shrink: 0; }
    .dismissed-restore-link:hover { text-decoration: underline; }
    .dismissed-delete-row { margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .dismissed-delete-link { background: none; border: none; cursor: pointer; color: #b0404a; font-size: 0.7rem; font-family: inherit; padding: 0; opacity: 0.7; }
    .dismissed-delete-link:hover { opacity: 1; text-decoration: underline; }
    .dismissed-confirm-text { font-size: 0.7rem; color: var(--text2); }
    .dismissed-yes-link { background: none; border: none; cursor: pointer; color: #b0404a; font-size: 0.7rem; font-family: inherit; padding: 0; font-weight: 600; }
    .dismissed-yes-link:hover { text-decoration: underline; }
    .dismissed-cancel-link { background: none; border: none; cursor: pointer; color: var(--text2); font-size: 0.7rem; font-family: inherit; padding: 0; }
    .dismissed-cancel-link:hover { text-decoration: underline; }

    /* ── Theory Detail View ── */
    .theory-view { position: absolute; inset: 0; background: #FAFAF9; display: flex; flex-direction: column; z-index: 10; opacity: 0; pointer-events: none; transition: opacity 0.2s; overflow: hidden; }
    .theory-view.active { opacity: 1; pointer-events: all; }
    .theory-view-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 10px; background: #FAFAF9; }
    .theory-view-back { background: none; border: none; cursor: pointer; color: var(--teal); font-size: 0.82rem; font-family: 'Inter',sans-serif; display: flex; align-items: center; gap: 4px; padding: 0; }
    .theory-view-back:hover { text-decoration: underline; }
    .theory-view-bar-actions { display: flex; gap: 8px; }
    .theory-view-bar-btn { background: none; border: 1px solid var(--border); border-radius: 7px; padding: 5px 12px; font-size: 0.78rem; font-family: 'Inter',sans-serif; cursor: pointer; color: var(--text1); transition: all 0.13s; }
    .theory-view-bar-btn:hover { border-color: var(--teal); color: var(--teal); }
    .theory-view-scroll { flex: 1; overflow-y: auto; padding: 22px 26px 24px; }
    .theory-view-scroll::-webkit-scrollbar { width: 4px; }
    .theory-view-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .tv-title { font-family: 'DM Serif Display',Georgia,serif; font-size: 1.35rem; font-weight: 400; color: #1B3A5C; margin: 0 0 16px; line-height: 1.3; }
    .tv-section { margin-bottom: 24px; }
    .tv-section-heading { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #1B3A5C; margin: 0 0 10px; opacity: 0.7; }
    .tv-synthesis { font-size: 15px; color: #1A2332; line-height: 1.75; }
    .tv-ts { font-size: 0.73rem; color: var(--text2); margin-top: 8px; }
    .tv-evidence-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .tv-chip { font-size: 0.76rem; background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px; color: var(--text1); cursor: pointer; transition: all 0.12s; }
    .tv-chip:hover { border-color: var(--teal); color: var(--teal); background: rgba(77,168,187,0.06); }
    .tv-thread-cards { display: flex; flex-direction: column; gap: 8px; }
    .tv-thread-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .tv-thread-q { font-size: 0.84rem; color: var(--text1); line-height: 1.45; flex: 1; }
    .tv-explore-btn { flex-shrink: 0; background: none; border: 1px solid var(--teal); border-radius: 7px; padding: 4px 10px; font-size: 0.74rem; color: var(--teal); cursor: pointer; font-family: 'Inter',sans-serif; transition: all 0.13s; white-space: nowrap; }
    .tv-explore-btn:hover { background: var(--teal); color: white; }
    .tv-action-cards { display: flex; flex-direction: column; gap: 8px; }
    .tv-action-card { background: #FAFAF9; border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 14px; display: flex; align-items: flex-start; gap: 10px; }
    .tv-action-card.done { opacity: 0.5; }
    .tv-action-check { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; cursor: pointer; accent-color: var(--teal); }
    .tv-action-text { font-size: 0.84rem; color: var(--text1); line-height: 1.45; flex: 1; }
    .tv-action-card.done .tv-action-text { text-decoration: line-through; }
    .tv-confidence { font-size: 0.8rem; color: var(--text2); font-style: italic; line-height: 1.5; background: var(--bg2); border-radius: 8px; padding: 10px 14px; }
    .tv-empty { font-size: 0.82rem; color: var(--text2); font-style: italic; }

    /* ── Theory Update Banner ── */
    .theory-update-banner { display: flex; align-items: center; gap: 8px; background: rgba(77,168,187,0.08); border: 1px solid rgba(77,168,187,0.25); border-radius: 8px; padding: 7px 12px; margin: 6px 0 2px; font-size: 0.79rem; color: var(--teal); cursor: pointer; transition: all 0.15s; animation: fadeIn 0.25s ease; }
    .theory-update-banner:hover { background: rgba(77,168,187,0.14); }
    .theory-update-banner-label { font-weight: 600; }

    /* ── Theory archive view ── */
    .archive-conv-item { border-bottom: 1px solid var(--border); padding: 12px 0; }
    .archive-conv-title { font-size: 0.88rem; font-weight: 500; color: #1B3A5C; margin-bottom: 4px; }
    .archive-conv-date { font-size: 0.75rem; color: var(--text2); margin-bottom: 8px; }
    .archive-conv-msgs { font-size: 0.82rem; color: var(--text1); line-height: 1.55; max-height: 120px; overflow: hidden; }
    .archive-load-btn { background: none; border: 1px solid var(--border); border-radius: 7px; padding: 4px 12px; font-size: 0.77rem; cursor: pointer; color: var(--text2); margin-top: 8px; font-family: 'Inter',sans-serif; }
    .archive-load-btn:hover { border-color: var(--teal); color: var(--teal); }
    .history-empty-msg { padding: 20px 14px 10px; font-size: 0.75rem; color: var(--text2); line-height: 1.55; font-style: italic; }
    .history-date-group { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.85px; color: var(--text2); padding: 10px 12px 3px; opacity: 0.6; }
    .history-item { padding: 8px 12px; cursor: pointer; transition: background 0.13s; display: flex; align-items: flex-start; position: relative; border-left: 3px solid transparent; }
    .history-item:hover { background: rgba(0,0,0,0.04); }
    .history-item.active { background: rgba(77,168,187,0.08); border-left-color: var(--teal); }
    .history-item-body { flex: 1; min-width: 0; }
    .history-item-title { font-size: 0.8rem; color: var(--text1); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; margin-bottom: 2px; font-family: 'Inter',inherit; }
    .history-item.active .history-item-title { color: var(--brand); font-weight: 500; }
    .history-item-date { font-size: 0.68rem; color: var(--text2); }
    .history-item-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.13s; align-items: center; flex-shrink: 0; padding-left: 4px; }
    .history-item:hover .history-item-actions { opacity: 1; }
    .history-action-btn { background: none; border: none; cursor: pointer; color: var(--text2); font-size: 0.7rem; padding: 3px 5px; border-radius: 4px; transition: color 0.12s, background 0.12s; line-height: 1; font-family: inherit; }
    .history-action-btn:hover { color: var(--text1); background: var(--border); }
    .history-action-btn.delete:hover { color: #d94040; }

    /* ── My Health Panel ── */
    .mh-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 0 24px; }
    .mh-scroll::-webkit-scrollbar { width: 3px; }
    .mh-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    #markers-symptoms-list { display: flex; flex-direction: column; gap: 5px; }
    /* ── Markers panel toggles ── */
    /* Level 1: underlined text tabs */
    .mkr-type-toggle { display: flex; gap: 0; margin: 0 0 10px; border-bottom: none; overflow-x: auto; scrollbar-width: none; }
    .mkr-type-toggle::-webkit-scrollbar { display: none; }
    .mkr-type-btn { flex: 1; padding: 7px 10px; font-size: 0.8rem; font-weight: 500; border: none; border-bottom: 1px solid var(--border); background: #FAFAF9; color: var(--text2); cursor: pointer; transition: color 0.15s, background 0.15s; letter-spacing: 0.02em; text-align: center; }
    .mkr-type-btn:first-child, .mkr-type-btn:nth-child(2), .mkr-type-btn:nth-child(3) { border-right: 1px solid var(--border); }
    .mkr-type-btn:hover { color: var(--teal); background: rgba(77,168,187,0.04); }
    .mkr-type-btn.active { font-weight: 700; color: white; background: var(--teal); border-bottom-color: var(--teal); }
    /* ── Pill view-toggle buttons (Markers, Symptoms, Regimen) ── */
    .view-toggle-btns { display: flex; gap: 0; margin-bottom: 6px; }
    .view-btn { padding: 5px 13px; font-size: 0.75rem; font-weight: 500; border: 1px solid var(--border); background: #FAFAF9; color: var(--text2); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; font-family: 'Inter',inherit; line-height: 1.4; }
    .view-btn:first-child { border-radius: 6px 0 0 6px; }
    .view-btn:last-child { border-radius: 0 6px 6px 0; border-left: none; }
    .view-btn.active { background: var(--brand); color: white; border-color: var(--brand); }
    .view-btn:hover:not(.active) { background: #EFEFED; }
    /* ── Markers sortable table ── */
    .mkr-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 2px; }
    .mkr-th { text-align: left; padding: 6px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text2); border-bottom: 2px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none; }
    .mkr-th:hover { color: var(--teal); }
    .mkr-sort-icon { display: inline-block; margin-left: 3px; opacity: 0.5; font-size: 9px; }
    .mkr-th:hover .mkr-sort-icon, .mkr-th[data-active] .mkr-sort-icon { opacity: 1; color: var(--teal); }
    .mkr-row { cursor: pointer; }
    .mkr-row td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text1); line-height: 1.4; }
    .mkr-row:last-child td { border-bottom: none; }
    .mkr-row:hover td { background: var(--bg2); }
    .mkr-row:hover .mkr-td-name { color: var(--teal); }
    .mkr-td-name { font-weight: 500; }
    .mkr-td-result { font-variant-numeric: tabular-nums; white-space: nowrap; }
    .mkr-td-date { font-size: 11px; color: var(--text2); white-space: nowrap; }
    .mkr-no-data { color: var(--text2); opacity: 0.5; }
    /* ── Markers by-theory view ── */
    .mkr-theory-group { margin-bottom: 18px; }
    .mkr-theory-hdr { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
    .mkr-theory-name { font-size: 12px; font-weight: 600; color: var(--brand); }
    .mkr-theory-badge { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 20px; letter-spacing: 0.05em; }
    .mkr-badge-unlinked { background: var(--bg2); color: var(--text2); }
    .mkr-theory-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 4px; }
    .mkr-theory-row:last-child { border-bottom: none; }
    .mkr-theory-row:hover { background: var(--bg2); }
    .mkr-theory-row:hover .mkr-theory-row-name { color: var(--teal); }
    .mkr-theory-row-name { font-size: 12px; font-weight: 500; flex: 1; }
    .mkr-theory-row-result { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text2); margin-right: 4px; }
    /* ── Genetics table ── */
    /* ── Genetics by-theory view ── */
    .gen-theory-group { margin-bottom: 18px; }
    .gen-theme-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 4px; }
    .gen-theme-row:last-child { border-bottom: none; }
    .gen-theme-row:hover { background: var(--bg2); }
    .gen-theme-row:hover .gen-theme-row-name { color: var(--teal); }
    .gen-theme-row-name { font-size: 12px; font-weight: 500; flex: 1; }
    .gen-empty-italic { font-size: 12px; color: var(--text2); font-style: italic; padding: 12px 4px; }
    .zone-pill { font-size: 10px; font-weight: 600; padding: 0; white-space: nowrap; background: none; border: none; letter-spacing: 0.05em; text-transform: uppercase; }
    .zone-optimal    { color: #52b788; }
    .zone-normal     { color: #8a9bac; }
    .zone-attention  { color: var(--gold); }
    .zone-action     { color: #e07070; }
    .mh-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text2); margin-bottom: 9px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
    .profile-empty-italic { font-style: italic; color: var(--text2); font-size: 0.82rem; line-height: 1.5; margin: 0; opacity: 0.8; }
    .picture-para { font-size: 0.84rem; color: var(--text1); line-height: 1.65; margin: 0; }
    .profile-check-item { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; font-size: 14px; color: var(--text1); }
    .profile-check-item input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--teal); cursor: pointer; }
    .profile-check-label { flex: 1; line-height: 1.4; cursor: pointer; }
    .profile-check-item input:checked + .profile-check-label { text-decoration: line-through; opacity: 0.45; }
    .profile-report-item { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 6px; transition: background 0.12s; }
    .profile-report-item:last-child { border-bottom: none; }
    .profile-report-item:hover { background: var(--bg2); }
    .profile-report-info { flex: 1; min-width: 0; }
    .profile-report-label { font-size: 13px; color: var(--text1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .profile-report-meta { font-size: 11px; color: var(--text2); margin-top: 1px; }
    .profile-report-actions { display: flex; gap: 3px; }
    .profile-report-btn { background: none; border: none; cursor: pointer; color: var(--text2); font-size: 0.65rem; padding: 2px 6px; border-radius: 3px; font-family: inherit; transition: background 0.12s, color 0.12s; }
    .profile-report-btn:hover { background: var(--border); color: var(--text1); }

    /* ── Understanding Panel ── */
    .understanding-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; padding: 8px 14px 0; }
    .understanding-scroll::-webkit-scrollbar { width: 3px; }
    .understanding-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .theory-controls { padding: 10px 10px 6px; flex-shrink: 0; display: flex; flex-direction: column; }
    /* Genetic Foundation */
    .gen-foundation-section { border-top: 1px solid var(--border); padding: 12px 12px 10px; flex-shrink: 0; }
    .gen-foundation-empty { font-size: 0.77rem; color: var(--text2); font-style: italic; line-height: 1.55; margin: 0; }
    .gen-theme-block { margin-bottom: 11px; padding: 5px 4px; border-radius: 5px; cursor: pointer; transition: background 0.1s; }
    .gen-theme-block:hover { background: var(--bg2); }
    .gen-theme-name { font-size: 0.74rem; font-weight: 600; color: #1B3A5C; margin-bottom: 4px; transition: color 0.1s; }
    .gen-theme-summary { font-size: 0.78rem; color: var(--text2); line-height: 1.6; }
    .gene-category-block { margin-bottom: 12px; }
    .gene-category-hdr { font-size: 0.63rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text2); opacity: 0.7; padding: 6px 12px 3px; border-top: 1px solid var(--border); }
    .gene-row { display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.15s; }
    .gene-row:hover { background: var(--hover); }
    .gene-row:hover .gene-row-name { color: var(--teal); }
    .gen-theme-row:hover .gen-theme-row-name { color: var(--teal); }
    .gen-theme-block:hover .gen-theme-name { color: var(--teal); }
    .gene-row-name { font-size: 0.82rem; font-weight: 600; color: var(--text1); flex: 1; }
    .gene-row-variant { font-weight: 400; color: var(--text2); font-size: 0.78rem; }
    .gene-row-gt { font-size: 0.78rem; color: var(--text2); min-width: 110px; }
    .gene-row-zyg { font-size: 0.72rem; color: var(--text2); opacity: 0.8; }
    .gene-row-sig { font-size: 0.68rem; font-weight: 600; border-radius: 4px; padding: 2px 7px; text-transform: uppercase; letter-spacing: 0.05em; }
    .dig-deeper-btn { background: var(--brand); color: white; border: none; border-radius: 6px; padding: 8px 16px; font-size: 0.82rem; font-weight: 600; cursor: pointer; margin-top: 8px; width: 100%; }
    /* Collapsible Learn */

    /* ── Markers Panel ── */
    /* Dashboard category groups */
    /* Marker item card */

    /* ── Education Panel (legacy, now only used in Learn scroll) ── */
    .learn-scroll { flex: 1; overflow-y: auto; padding: 8px 14px 28px; display: flex; flex-direction: column; }
    .learn-scroll::-webkit-scrollbar { width: 3px; }
    .learn-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .learn-tab-pane { padding: 14px 0 28px; }
    .learn-sources-text { font-size: 0.84rem; color: var(--text2); font-style: italic; line-height: 1.6; margin: 0 0 8px; }
    .learn-edu-item { padding: 10px 0; font-size: 0.84rem; color: var(--text1); cursor: pointer; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; transition: color 0.13s; }
    .learn-edu-item:first-child { border-top: 1px solid var(--border); }
    .learn-edu-item:hover:not(.learn-edu-coming) { color: var(--teal); }
    .learn-edu-item.learn-edu-coming { opacity: 0.38; cursor: default; }
    .learn-edu-more { font-size: 0.78rem; color: var(--text2); font-style: italic; margin-top: 10px; }
    .learn-coming-soon { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 12px; gap: 6px; }
    .learn-cs-title { font-weight: 600; color: var(--text2); font-size: 0.88rem; margin: 0 0 4px; }
    .learn-coming-soon p { font-size: 0.82rem; color: var(--text2); margin: 0; line-height: 1.55; opacity: 0.7; }

    /* Education nav items in panel */

    /* Panel header close button */
    .panel-header { display: flex !important; align-items: center; justify-content: space-between; }
    .panel-close-btn { background: none; border: none; cursor: pointer; color: #4DA8BB; font-size: 18px; padding: 0; border-radius: 4px; line-height: 1; min-width: 32px; min-height: 32px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background 0.15s; flex-shrink: 0; }
    .panel-close-btn:hover { color: #3A8FA0; background: rgba(77,168,187,0.07); }

    /* Article reading view in main area */
    .article-view { display: none; flex: 1; flex-direction: column; min-height: 0; }
    .article-view.active { display: flex; }
    .chat-in-article-mode .thread-title-bar,
    .chat-in-article-mode .chat-window-wrap,
    .chat-in-article-mode .pending-strip,
    .chat-in-article-mode .input-area { display: none !important; }
    .article-view-bar { padding: 8px 0 6px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
    .article-back-btn { background: none; border: 1px solid var(--border); border-radius: 20px; color: var(--text2); font-size: 0.8rem; font-weight: 500; padding: 5px 14px 5px 10px; cursor: pointer; display: flex; align-items: center; gap: 5px; font-family: inherit; transition: all 0.15s; }
    .article-back-btn:hover { background: var(--bg2); border-color: var(--teal); color: var(--teal); }
    .article-view-scroll { flex: 1; overflow-y: auto; background: #FAFAF9; border-radius: 12px; border: 1px solid var(--border); padding: 32px 40px 40px; }
    @media (max-width: 600px) { .article-view-scroll { padding: 20px 18px 28px; } }
    .article-view-scroll::-webkit-scrollbar { width: 4px; }
    .article-view-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .article-view-title { font-family: 'DM Serif Display',Georgia,serif; font-size: 1.7rem; font-weight: 400; color: var(--brand); margin-bottom: 24px; line-height: 1.2; }
    .article-view-h { font-size: 1rem; font-weight: 600; color: var(--brand); margin: 22px 0 7px; }
    .article-view-p { font-size: 1rem; color: var(--text1); line-height: 1.8; }
    .article-view-opener { font-size: 1rem; color: var(--text1); line-height: 1.8; font-style: italic; margin-bottom: 20px; }
    .article-view-print-btn { margin-top: 28px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 18px; font-size: 0.85rem; font-weight: 500; cursor: pointer; color: var(--brand); font-family: inherit; transition: background 0.15s; }
    .article-view-print-btn:hover { background: var(--border); }

    /* Marker cards */
    .marker-section-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
    .marker-print-btn { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; font-size: 0.72rem; font-weight: 500; cursor: pointer; color: var(--brand); font-family: inherit; transition: background 0.12s; display: inline-flex; align-items: center; gap: 4px; }
    .marker-print-btn:hover { background: var(--border); }
    .marker-card { border: 1px solid var(--border); border-radius: 9px; background: #FAFAF9; margin-bottom: 7px; overflow: hidden; cursor: pointer; }
    .marker-card-main { display: flex; align-items: center; gap: 8px; padding: 9px 11px; }
    .marker-card-name { flex: 1; font-size: 0.82rem; font-weight: 500; color: var(--text1); }
    .marker-card-value { font-size: 0.8rem; color: var(--text2); margin-right: 4px; }
    .marker-card-expand { color: var(--text2); font-size: 0.65rem; transition: transform 0.2s; flex-shrink: 0; }
    .marker-card.open .marker-card-expand { transform: rotate(180deg); }
    .marker-card-detail { display: none; padding: 0 11px 10px 11px; font-size: 0.79rem; color: var(--text2); line-height: 1.6; border-top: 1px solid var(--border); padding-top: 9px; }
    .marker-card.open .marker-card-detail { display: block; }

    /* Upload cards */
    .upload-category-hdr { font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text2); margin: 10px 0 6px; opacity: 0.65; }
    .upload-card { border: 1px solid var(--border); border-radius: 9px; background: #FAFAF9; margin-bottom: 8px; padding: 10px 12px; }
    .upload-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .upload-card-icon { font-size: 1.25rem; flex-shrink: 0; }
    .upload-card-info { flex: 1; min-width: 0; }
    .upload-card-name { font-size: 0.81rem; font-weight: 600; color: var(--text1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .upload-card-date { font-size: 0.68rem; color: var(--text2); margin-top: 1px; }
    .upload-card-btns { display: flex; gap: 5px; }
    .upload-card-btn { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; font-size: 0.72rem; font-weight: 500; padding: 4px 10px; cursor: pointer; color: var(--text1); font-family: inherit; transition: background 0.12s, border-color 0.12s, color 0.12s; }
    .upload-card-btn:hover { background: var(--teal); color: white; border-color: var(--teal); }

    /* File view overlay inside chat window-wrap */
    .file-view-overlay { position: absolute; inset: 0; background: #FAFAF9; border: 1px solid var(--border); border-radius: 12px; z-index: 50; display: flex; flex-direction: column; transform: translateX(110%); transition: transform 0.26s cubic-bezier(0.4,0,0.2,1); }
    .file-view-overlay.open { transform: translateX(0); }
    .file-view-header { padding: 11px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .file-view-title { flex: 1; font-size: 0.92rem; font-weight: 600; color: var(--brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .file-view-close { background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--text2); padding: 4px 8px; border-radius: 5px; }
    .file-view-close:hover { background: var(--bg2); color: var(--text1); }
    .file-view-body { flex: 1; overflow-y: auto; padding: 16px 18px; font-size: 0.82rem; color: var(--text1); line-height: 1.7; white-space: pre-wrap; word-break: break-word; }

    /* Action print button */
    .actions-print-btn { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; font-size: 0.72rem; font-weight: 500; cursor: pointer; color: var(--brand); font-family: inherit; transition: background 0.12s; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; }
    .actions-print-btn:hover { background: var(--border); }

    /* Enhanced test card */
    .test-card { border: 1px solid var(--border); border-radius: 8px; background: #FAFAF9; padding: 9px 11px; margin-bottom: 7px; cursor: pointer; transition: background 0.12s; }
    .test-card:hover { background: var(--bg2); }
    .test-card-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
    .test-card-name { font-size: 0.82rem; font-weight: 600; color: var(--text1); margin-bottom: 3px; }
    .test-card-chevron { color: var(--text2); font-size: 0.62rem; transition: transform 0.2s; flex-shrink: 0; }
    .test-card.open .test-card-chevron { transform: rotate(180deg); }
    .test-card-detail { display: none; margin-top: 7px; border-top: 1px solid var(--border); padding-top: 7px; }
    .test-card.open .test-card-detail { display: block; }
    .test-card-reason { font-size: 0.76rem; color: var(--text2); line-height: 1.45; margin-bottom: 6px; }
    .test-card-doctor { display: inline-block; font-size: 0.63rem; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 20px; padding: 2px 8px; color: #1d4ed8; font-weight: 500; }
    .content-view-pre { white-space: pre-wrap; font-family: 'Inter', inherit; font-size: 13px; line-height: 1.7; color: var(--text1); background: var(--bg2); border-radius: 8px; padding: 14px; border: 1px solid var(--border); margin-top: 12px; }

    /* ── Sidebar overlay — disabled; click-outside JS handles close ── */
    .sidebar-overlay { display: none !important; }

    /* ── Animations ── */
    @keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
    @keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
    @keyframes fadeInDown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

    /* ── First-run tooltips ── */
    .fr-tooltip { position: fixed; right: 60px; background: #FAFAF9; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.14); padding: 12px 14px; width: 220px; z-index: 500; font-size: 13px; color: var(--text1); line-height: 1.5; animation: fadeIn 0.22s ease; display: none; }
    @media (max-width: 768px) { .fr-tooltip { display: none !important; } }
    .fr-tooltip.visible { display: block; }
    .fr-tooltip::before { content: ''; position: absolute; right: -8px; left: auto; top: 50%; transform: translateY(-50%); border: 8px solid transparent; border-left-color: var(--border); border-right: none; }
    .fr-tooltip::after { content: ''; position: absolute; right: -7px; left: auto; top: 50%; transform: translateY(-50%); border: 8px solid transparent; border-left-color: white; border-right: none; }

    /* ── Education panel ── */

    /* ── Master Summary Card & Lens System (Theories panel) ── */
    .full-summary-section { border-bottom: 1px solid var(--border); margin-bottom: 4px; padding: 4px 12px 6px; }
    .full-summary-trigger { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: #FAFAF9; border: 1.5px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color 0.15s; }
    .full-summary-trigger:hover { border-color: var(--teal); }
    /* ── Unified Report Modal ── */
    .rm-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; }
    .rm-box { background: #FAFAF9; border-radius: 14px; width: 92%; max-width: 780px; height: 88dvh; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,0.28); overflow: hidden; }
    .rm-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .rm-title { font-size: 1rem; font-weight: 700; color: var(--brand); font-family: 'DM Serif Display',Georgia,serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; }
    .rm-close { background: none; border: none; font-size: 1.1rem; color: var(--text2); cursor: pointer; padding: 4px 8px; border-radius: 6px; line-height: 1; transition: background 0.15s; flex-shrink: 0; }
    .rm-close:hover { background: var(--bg2); color: var(--text1); }
    .rm-content { outline: none; min-height: 80px; caret-color: #4DA8BB; font-size: 13px; }
    .rm-content:focus { outline: 1.5px dashed rgba(77,168,187,0.3); outline-offset: 4px; border-radius: 4px; }
    .rm-btn { flex: 1; padding: 9px 16px; font-size: 0.8rem; border: 1px solid var(--border); border-radius: 7px; background: #FAFAF9; cursor: pointer; font-family: inherit; color: var(--text1); transition: border-color 0.15s, background 0.15s; font-weight: 500; }
    .rm-btn:hover { border-color: var(--teal); background: rgba(77,168,187,0.04); }
    .rm-btn-primary { background: var(--teal); color: white; border-color: var(--teal); }
    .rm-btn-primary:hover { background: #3A8FA0; border-color: #3A8FA0; }
    /* prose inside report modal */
    .rm-content h2 { font-size: 1rem; font-weight: 600; color: var(--brand); margin: 20px 0 8px; border-bottom: 1px solid var(--border); padding-bottom: 5px; font-family: 'DM Serif Display',Georgia,serif; }
    .rm-content h2:first-child { margin-top: 0; }
    .rm-content h3 { font-size: 0.9rem; font-weight: 600; color: var(--brand); margin: 14px 0 5px; }
    .rm-content p { margin: 6px 0; line-height: 1.68; }
    .rm-content ul, .rm-content ol { padding-left: 22px; margin: 8px 0; }
    .rm-content li { margin-bottom: 4px; line-height: 1.55; }
    .rm-wizard { display: flex; flex-direction: column; gap: 0; flex: 1; overflow: hidden; }
    .rm-wizard-step { display: none; flex-direction: column; flex: 1; overflow: hidden; }
    .rm-wizard-step.active { display: flex; }
    .rm-wizard-progress { display: flex; gap: 4px; padding: 14px 20px 10px; flex-shrink: 0; }
    .rm-wizard-seg { flex: 1; height: 3px; border-radius: 2px; background: var(--border); transition: background 0.25s; }
    .rm-wizard-seg.done { background: var(--teal); }
    .rm-wizard-seg.active { background: var(--brand); }
    .rm-wizard-body { flex: 1; overflow-y: auto; padding: 16px 24px 20px; }
    .rm-wizard-q { font-family: 'DM Serif Display',Georgia,serif; font-size: 1.05rem; color: var(--brand); margin: 0 0 6px; line-height: 1.3; }
    .rm-wizard-sub { font-size: 0.8rem; color: var(--text2); margin: 0 0 14px; line-height: 1.45; }
    .rm-wizard-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
    .rm-wizard-chip { font-size: 0.75rem; background: rgba(77,168,187,0.08); border: 1px solid rgba(77,168,187,0.25); border-radius: 20px; padding: 4px 12px; color: var(--teal); cursor: pointer; transition: background 0.13s; font-family: inherit; }
    .rm-wizard-chip:hover { background: rgba(77,168,187,0.16); }
    .rm-wizard-chip.selected { background: var(--teal); color: white; border-color: var(--teal); }
    .rm-wizard-input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 0.875rem; font-family: 'Inter',sans-serif; color: var(--text1); outline: none; transition: border-color 0.15s; box-sizing: border-box; }
    .rm-wizard-input:focus { border-color: var(--teal); }
    .rm-wizard-textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 0.875rem; font-family: 'Inter',sans-serif; color: var(--text1); outline: none; transition: border-color 0.15s; box-sizing: border-box; resize: none; height: 80px; }
    .rm-wizard-textarea:focus { border-color: var(--teal); }
    .rm-wizard-options { display: flex; flex-direction: column; gap: 6px; }
    .rm-wizard-option { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s; background: #FAFAF9; }
    .rm-wizard-option:hover { border-color: var(--teal); background: rgba(77,168,187,0.04); }
    .rm-wizard-option.selected { border-color: var(--teal); background: rgba(77,168,187,0.08); }
    .rm-wizard-option-label { font-size: 0.85rem; font-weight: 500; color: var(--text1); }
    .rm-wizard-option-sub { font-size: 0.75rem; color: var(--text2); margin-top: 2px; }
    .rm-wizard-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; border-top: 1px solid var(--border); flex-shrink: 0; gap: 10px; }
    .rm-wizard-back { background: none; border: none; color: var(--text2); font-size: 0.82rem; cursor: pointer; font-family: inherit; padding: 0; transition: color 0.13s; }
    .rm-wizard-back:hover { color: var(--brand); }
    .rm-wizard-next { background: var(--teal); color: white; border: none; border-radius: 8px; padding: 9px 24px; font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s; }
    .rm-wizard-next:hover { background: #3A8FA0; }
    .rm-wizard-next:disabled { background: var(--border); color: var(--text2); cursor: not-allowed; }
    .rm-report-preview { flex: 1; overflow-y: auto; padding: 20px 24px; }
    .rm-report-generating { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 12px; color: var(--text2); font-size: 0.85rem; padding: 40px; }
    .rm-report-spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--teal); border-radius: 50%; animation: spin 0.8s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    /* Full Summary Modal — kept for the separate summary generation area */
    /* Theory card lens row (inside accordion) */

    /* ── AI Disclaimer ── */
    .ai-disclaimer { flex-shrink: 0; text-align: center; padding: 4px 16px 5px; font-size: 12px; color: var(--text2); font-family: 'Inter',sans-serif; line-height: 1.45; max-width: 800px; width: 100%; margin-left: auto; margin-right: auto; }

    /* ── Health Assessment Entry (welcome screen only) ── */
    .assessment-entry { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 16px 10px; }
    .assessment-or-divider { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 360px; margin-bottom: 2px; }
    .assessment-or-line { flex: 1; height: 1px; background: var(--border); }
    .assessment-or-text { font-size: 0.75rem; color: var(--text2); flex-shrink: 0; }
    .assessment-btn { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--teal); border-radius: 10px; background: rgba(77,168,187,0.06); padding: 14px 24px; font-size: 0.9rem; color: var(--text2); cursor: pointer; font-family: 'Inter',sans-serif; font-weight: 400; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; box-shadow: 0 0 0 0 rgba(77,168,187,0); width: 100%; max-width: 360px; justify-content: center; }
    .assessment-btn:hover { background: rgba(77,168,187,0.12); box-shadow: 0 2px 12px rgba(77,168,187,0.2); }
    .assessment-btn svg { flex-shrink: 0; color: rgba(201,168,76,0.6); }

    /* ── Mini-Assessment Modal ── */
    .ma-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 650; display: flex; align-items: center; justify-content: center; padding: 20px; }
    .ma-modal { background: #FAFAF9; border-radius: 16px; width: 100%; max-width: 500px; max-height: 88dvh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.25); overflow: hidden; }
    .ma-header { background: var(--brand); color: white; padding: 14px 20px; display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0; }
    .ma-header-text { display: flex; flex-direction: column; gap: 3px; }
    .ma-title { font-size: 1rem; font-weight: 600; font-family: 'Inter',sans-serif; }
    .ma-subtitle { font-size: 0.75rem; color: rgba(255,255,255,0.7); }
    .ma-close { background: none; border: none; color: rgba(255,255,255,0.75); font-size: 1.4rem; cursor: pointer; padding: 0; line-height: 1; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: color 0.15s, background 0.15s; flex-shrink: 0; }
    .ma-close:hover { color: white; background: rgba(255,255,255,0.15); }
    .ma-body { flex: 1; overflow-y: auto; padding: 20px 22px; }
    .ma-section-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text2); margin: 18px 0 10px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
    .ma-section-title:first-child { margin-top: 0; }
    .ma-rating-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--bg2); gap: 8px; }
    .ma-rating-row:last-child { border-bottom: none; }
    .ma-rating-label { font-size: 0.82rem; color: var(--text1); flex: 1; }
    .ma-rating-btns { display: flex; gap: 3px; flex-shrink: 0; }
    .ma-r-btn { width: 30px; height: 28px; border: 1px solid var(--border); border-radius: 5px; background: #FAFAF9; font-size: 0.72rem; font-weight: 600; cursor: pointer; color: var(--text2); font-family: 'Inter',sans-serif; transition: all 0.12s; }
    .ma-r-btn:hover { border-color: var(--teal); color: var(--teal); }
    .ma-r-btn.sel { border-color: var(--teal); background: rgba(77,168,187,0.12); color: var(--teal); }
    .ma-r-btn.sel-4 { background: var(--teal); border-color: var(--teal); color: white; }
    .ma-pills-section { margin-bottom: 12px; }
    .ma-pills-label { font-size: 0.78rem; font-weight: 600; color: var(--text2); margin-bottom: 7px; }
    .ma-pills-row { display: flex; flex-wrap: wrap; gap: 7px; }
    .ma-pill { border: 1px solid var(--border); background: #FAFAF9; color: var(--text2); border-radius: 20px; padding: 5px 13px; font-size: 0.74rem; cursor: pointer; font-family: 'Inter',sans-serif; transition: all 0.13s; }
    .ma-pill:hover { border-color: var(--teal); color: var(--teal); }
    .ma-pill.active { border-color: var(--teal); background: rgba(77,168,187,0.1); color: var(--teal); font-weight: 500; }
    .ma-text-input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 0.82rem; font-family: 'Inter',sans-serif; color: var(--text1); outline: none; transition: border-color 0.15s; box-sizing: border-box; }
    .ma-text-input:focus { border-color: var(--teal); }
    .ma-slider-wrap { display: flex; align-items: center; gap: 10px; }
    .ma-slider { flex: 1; -webkit-appearance: none; height: 5px; border-radius: 3px; background: linear-gradient(to right,#4DA8BB,#6B8E7E,#e74c3c); outline: none; cursor: pointer; }
    .ma-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #FAFAF9; border: 2.5px solid var(--teal); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
    .ma-slider-val { font-size: 0.85rem; font-weight: 600; color: var(--brand); min-width: 20px; text-align: center; }
    .ma-footer { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; border-top: 1px solid var(--border); flex-shrink: 0; }
    .ma-trigger-link { display: inline; color: var(--teal); font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; background: none; border: none; font-family: inherit; font-size: inherit; padding: 0; transition: color 0.15s; }
    .ma-trigger-link:hover { color: #3A8FA0; }
    .ma-toggle-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 0.82rem; color: var(--text2); cursor: pointer; }
    .ma-toggle-switch { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
    .ma-toggle-switch input { opacity: 0; width: 0; height: 0; }
    .ma-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--border); border-radius: 20px; transition: background 0.2s; }
    .ma-toggle-slider::before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: transform 0.2s; }
    .ma-toggle-switch input:checked + .ma-toggle-slider { background: var(--teal); }
    .ma-toggle-switch input:checked + .ma-toggle-slider::before { transform: translateX(16px); }
    .ma-bm-wrap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
    .ma-bm-toggle { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; align-self: flex-start; }
    .ma-bm-view-btn { background: #FAFAF9; border: none; padding: 5px 16px; font-size: 0.78rem; font-weight: 500; cursor: pointer; font-family: 'Inter',sans-serif; color: var(--text2); transition: background 0.13s, color 0.13s; }
    .ma-bm-view-btn.active { background: var(--brand); color: white; }
    .ma-bm-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 20px; }
    .ma-bm-tag { display: flex; align-items: center; gap: 5px; background: rgba(77,168,187,0.1); border: 1px solid rgba(77,168,187,0.3); color: var(--teal); font-size: 0.73rem; border-radius: 20px; padding: 3px 10px; font-family: 'Inter',sans-serif; }
    .ma-bm-tag-x { background: none; border: none; cursor: pointer; color: var(--teal); font-size: 0.9rem; padding: 0; line-height: 1; }
    .ma-bm-hint { font-size: 0.75rem; color: var(--text2); font-style: italic; }
    .ma-checkbox-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
    .ma-checkbox-row { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--text1); cursor: pointer; }
    .ma-checkbox-row input { accent-color: var(--teal); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }

    /* ── Health Assessment Modal ── */
    .assessment-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 600; display: flex; align-items: center; justify-content: center; padding: 20px; }
    .assessment-modal { background: #FAFAF9; border-radius: 16px; width: 100%; max-width: 600px; max-height: 90dvh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.25); overflow: hidden; position: relative; }
    .az-modal-header { background: var(--brand); color: white; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .az-modal-title { font-size: 1.05rem; font-weight: 600; font-family: 'Inter',sans-serif; letter-spacing: 0.01em; }
    .az-modal-close { background: none; border: none; color: rgba(255,255,255,0.75); font-size: 1.4rem; cursor: pointer; padding: 0; line-height: 1; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: color 0.15s, background 0.15s; }
    .az-modal-close:hover { color: white; background: rgba(255,255,255,0.15); }
    .az-modal-body { flex: 1; overflow-y: auto; padding: 22px 24px 20px; }
    /* Progress bar */
    .az-progress-bar { display: flex; gap: 5px; margin-bottom: 20px; }
    .az-progress-seg { flex: 1; height: 4px; border-radius: 2px; background: var(--border); transition: background 0.25s; }
    .az-progress-seg.done { background: var(--teal); }
    .az-progress-seg.active { background: var(--brand); }
    .az-step-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text2); margin-bottom: 6px; }
    /* Question */
    .az-step-q { font-family: 'DM Serif Display',Georgia,serif; font-size: 1.2rem; color: var(--brand); margin-bottom: 4px; line-height: 1.35; }
    .az-step-sub { font-size: 0.8rem; color: var(--text2); margin-bottom: 18px; }
    /* Checkbox options (step 1) */
    .az-check-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
    .az-check-option { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; cursor: pointer; transition: border-color 0.15s, background 0.15s; font-size: 0.875rem; color: var(--text1); font-family: 'Inter',sans-serif; background: #FAFAF9; text-align: left; width: 100%; }
    .az-check-option:hover { border-color: #b0c0cc; background: #fafbfc; }
    .az-check-option.checked { border-color: var(--teal); background: rgba(77,168,187,0.08); }
    .az-check-option input[type=checkbox] { accent-color: var(--teal); width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
    .az-check-other-input { width: 100%; border: 1px solid var(--border); border-radius: 7px; padding: 9px 12px; font-size: 0.85rem; font-family: 'Inter',sans-serif; color: var(--text1); outline: none; transition: border-color 0.15s; margin-top: 6px; margin-bottom: 6px; box-sizing: border-box; display: none; }
    .az-check-other-input:focus { border-color: var(--teal); }
    /* Symptom Body (step 2) */
    .az-bm-svg { display: block; }
    .az-body-bg { fill: #e8eef4; pointer-events: none; }
    .az-region { fill: #d8e4ee; stroke: #8faabf; stroke-width: 1.2; cursor: pointer; transition: fill 0.14s, stroke 0.14s; }
    .az-region:hover { fill: #b8d4e8; stroke: var(--teal); }
    .az-region.logged { fill: rgba(77,168,187,0.42); stroke: var(--teal); stroke-width: 1.6; }
    .az-bm-wrap { display: flex; flex-direction: column; gap: 10px; }
    .az-bm-toggle { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; align-self: flex-start; margin-bottom: 2px; }
    .az-bm-view-btn { background: #FAFAF9; border: none; padding: 6px 18px; font-size: 0.8rem; font-weight: 500; cursor: pointer; font-family: 'Inter',sans-serif; color: var(--text2); transition: background 0.13s, color 0.13s; }
    .az-bm-view-btn.active { background: var(--brand); color: white; }
    .az-bm-figure { display: flex; justify-content: center; }
    .az-bm-logged-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text2); margin-top: 2px; }
    .az-bm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .az-bm-tag { display: flex; align-items: center; gap: 5px; background: rgba(77,168,187,0.1); border: 1px solid rgba(77,168,187,0.3); color: var(--teal); font-size: 0.75rem; border-radius: 20px; padding: 3px 10px; font-family: 'Inter',sans-serif; cursor: pointer; transition: background 0.12s; }
    .az-bm-tag:hover { background: rgba(77,168,187,0.18); }
    .az-bm-tag-detail { color: var(--text2); font-size: 0.7rem; }
    .az-bm-tag-x { background: none; border: none; cursor: pointer; color: var(--teal); font-size: 0.9rem; padding: 0; line-height: 1; opacity: 0.7; }
    .az-bm-tag-x:hover { opacity: 1; }
    .az-bm-hint { font-size: 0.78rem; color: var(--text2); font-style: italic; margin-top: 4px; }
    /* Pills (used in steps 3-5) */
    .az-pills-row { display: flex; flex-wrap: wrap; gap: 7px; }
    .az-pill { border: 1px solid var(--border); background: #FAFAF9; color: var(--text2); border-radius: 20px; padding: 6px 14px; font-size: 0.75rem; cursor: pointer; font-family: 'Inter',sans-serif; transition: all 0.13s; }
    .az-pill:hover { border-color: var(--teal); color: var(--teal); }
    .az-pill.active { border-color: var(--teal); background: rgba(77,168,187,0.1); color: var(--teal); font-weight: 500; }
    /* Region popup modal */
    .az-region-popup { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 20px; }
    .az-region-popup-bg { position: absolute; inset: 0; background: rgba(10,20,35,0.45); }
    .az-rp-box { position: relative; background: #FAFAF9; border-radius: 14px; width: 310px; box-shadow: 0 16px 48px rgba(0,0,0,0.28); overflow: hidden; animation: popIn 0.15s ease; }
    .az-rp-header { background: var(--brand); color: white; padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; }
    .az-rp-title { font-family: 'DM Serif Display',Georgia,serif; font-size: 0.98rem; }
    .az-rp-close { background: none; border: none; color: rgba(255,255,255,0.7); font-size: 1.25rem; cursor: pointer; padding: 2px 6px; line-height: 1; border-radius: 4px; transition: color 0.12s, background 0.12s; }
    .az-rp-close:hover { background: rgba(255,255,255,0.15); color: white; }
    .az-rp-body { padding: 14px 16px 8px; }
    .az-rp-section-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text2); margin-bottom: 8px; }
    .az-rp-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
    .az-rp-pill { border: 1px solid var(--border); background: #FAFAF9; color: var(--text2); border-radius: 20px; padding: 5px 12px; font-size: 0.74rem; cursor: pointer; font-family: 'Inter',sans-serif; transition: all 0.12s; }
    .az-rp-pill:hover { border-color: var(--teal); color: var(--teal); }
    .az-rp-pill.active { background: rgba(77,168,187,0.12); border-color: var(--teal); color: var(--teal); font-weight: 500; }
    .az-rp-pill.sev-active { background: var(--brand); border-color: var(--brand); color: white; font-weight: 500; }
    .az-rp-footer { padding: 10px 16px 14px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
    .az-rp-remove { background: none; border: none; font-size: 0.8rem; color: #e53e3e; cursor: pointer; font-family: 'Inter',sans-serif; padding: 0; }
    .az-rp-remove:hover { text-decoration: underline; }
    .az-rp-add { background: var(--teal); color: white; border: none; border-radius: 8px; padding: 8px 22px; font-size: 0.85rem; font-weight: 500; cursor: pointer; font-family: 'Inter',sans-serif; transition: background 0.15s; }
    .az-rp-add:hover { background: #3A8FA0; }
    /* Old-style az-options (kept for steps 3-5) */
    /* Footer */
    .az-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 4px; }
    .az-btn-primary { background: var(--teal); color: white; border: none; border-radius: 8px; padding: 10px 22px; font-size: 0.875rem; font-weight: 500; cursor: pointer; font-family: 'Inter',sans-serif; transition: background 0.15s; }
    .az-btn-primary:hover { background: #3A8FA0; }
    .az-btn-primary:disabled { background: var(--border); color: var(--text2); cursor: not-allowed; }

    /* ── Onboarding rework: light symptom tags, textarea, upload zones ── */
    .az-sx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; }
    .az-sx-tag { border: 1px solid var(--border); background: #FAFAF9; color: var(--text1); border-radius: 999px; padding: 8px 14px; font-size: 0.8rem; font-family: 'Inter',sans-serif; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
    .az-sx-tag:hover { border-color: #b0c0cc; }
    .az-sx-tag.on { border-color: var(--teal); background: rgba(77,168,187,0.12); color: var(--brand); font-weight: 500; }
    .az-textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-size: 0.875rem; font-family: 'Inter',sans-serif; color: var(--text1); background: #FAFAF9; resize: vertical; line-height: 1.5; box-sizing: border-box; margin-top: 6px; }
    .az-textarea:focus { outline: none; border-color: var(--teal); background: #fff; }
    .az-upload-zone { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1.5px dashed var(--border); border-radius: 12px; padding: 26px 20px; margin: 16px 0 12px; cursor: pointer; transition: border-color 0.15s, background 0.15s; background: #FAFAF9; }
    .az-upload-zone:hover { border-color: var(--teal); background: rgba(77,168,187,0.05); }
    .az-upload-icon { color: var(--teal); margin-bottom: 4px; }
    .az-upload-main { font-size: 0.95rem; font-weight: 500; color: var(--brand); font-family: 'Inter',sans-serif; }
    .az-upload-hint { font-size: 0.78rem; color: var(--text2); }
    .az-upload-done { font-size: 0.82rem; color: #2E7D5B; background: rgba(82,183,136,0.1); border-radius: 8px; padding: 9px 14px; margin-bottom: 10px; }
    .az-privacy-note { font-size: 0.76rem; color: var(--text2); text-align: center; margin: 4px 0 2px; }
    .az-btn-ghost { background: none; border: none; color: var(--text2); font-size: 0.85rem; cursor: pointer; font-family: 'Inter',sans-serif; padding: 0; transition: color 0.15s; }
    .az-btn-ghost:hover { color: var(--text1); }
    /* ── Step 3: Symptom Scan ── */
    .az-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; background: #f5f8fb; border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; margin-bottom: 14px; font-size: 0.72rem; color: var(--text2); }
    .az-legend span { white-space: nowrap; }
    .az-legend strong { color: var(--brand); }
    .az-accordion { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
    .az-acc-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer; font-weight: 600; font-size: 0.85rem; color: var(--text1); font-family: 'Inter',sans-serif; background: #FAFAF9; border: none; width: 100%; text-align: left; border-bottom: 1px solid transparent; transition: background 0.13s; }
    .az-acc-header:hover { background: rgba(77,168,187,0.04); }
    .az-acc-header.open { background: rgba(77,168,187,0.05); border-bottom-color: var(--border); }
    .az-acc-chevron { font-size: 0.7rem; color: var(--text2); transition: transform 0.18s; display: inline-block; }
    .az-acc-header.open .az-acc-chevron { transform: rotate(90deg); }
    .az-acc-badge { background: rgba(77,168,187,0.12); color: var(--teal); font-size: 0.7rem; font-weight: 600; border-radius: 20px; padding: 1px 8px; margin-left: 8px; }
    .az-acc-body { display: none; background: #FAFAF9; padding: 0 0 4px; }
    .az-acc-body.open { display: block; }
    .az-symptom-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-top: 1px solid #f0f3f6; gap: 8px; }
    .az-symptom-row:first-child { border-top: none; }
    .az-symptom-row:hover { background: #fafbfc; }
    .az-symptom-name { font-size: 0.82rem; color: var(--text1); flex: 1; min-width: 0; }
    .az-rating-btns { display: flex; gap: 4px; flex-shrink: 0; }
    .az-rating-btn { width: 30px; height: 30px; border: 1px solid var(--border); background: #FAFAF9; color: var(--text2); border-radius: 6px; font-size: 0.78rem; font-weight: 500; cursor: pointer; font-family: 'Inter',sans-serif; display: flex; align-items: center; justify-content: center; transition: all 0.12s; }
    .az-rating-btn:hover { border-color: var(--teal); color: var(--teal); }
    .az-rating-btn.active { background: var(--teal); color: white; border-color: var(--teal); }
    /* ── Step 4: Your Story ── */
    .az-story-fields { display: flex; flex-direction: column; gap: 18px; margin-bottom: 16px; }
    .az-story-field label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text1); margin-bottom: 6px; }
    .az-story-select { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 0.875rem; font-family: 'Inter',sans-serif; color: var(--text1); outline: none; transition: border-color 0.15s, box-shadow 0.15s; background: #FAFAF9; cursor: pointer; }
    .az-story-select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(77,168,187,0.1); }
    .az-story-textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 0.875rem; font-family: 'Inter',sans-serif; color: var(--text1); outline: none; resize: none; transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; }
    .az-story-textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(77,168,187,0.1); }
    .az-char-count { font-size: 0.7rem; color: var(--text2); text-align: right; margin-top: 3px; }
    /* ── Step 5: Lifestyle Snapshot ── */
    .az-ls-section { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
    .az-ls-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .az-ls-label { font-size: 0.85rem; font-weight: 600; color: var(--text1); margin-bottom: 10px; }
    .az-ls-hint { font-size: 0.7rem; color: var(--text2); font-style: italic; margin-top: 6px; line-height: 1.4; }
    .az-ls-diet-input { width: 100%; border: 1px solid var(--border); border-radius: 7px; padding: 9px 12px; font-size: 0.85rem; font-family: 'Inter',sans-serif; color: var(--text1); outline: none; transition: border-color 0.15s; margin-top: 8px; box-sizing: border-box; display: none; }
    .az-ls-diet-input:focus { border-color: var(--teal); }
    /* Stress slider */
    .az-range-wrap { padding: 4px 0 0; }
    .az-range-labels { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text2); margin-bottom: 6px; }
    .az-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; outline: none; cursor: pointer; background: linear-gradient(to right, #52b788, #f4a261, #e63946); }
    .az-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); border: 2px solid white; box-shadow: 0 1px 4px rgba(0,0,0,0.2); cursor: pointer; }
    .az-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--brand); border: 2px solid white; box-shadow: 0 1px 4px rgba(0,0,0,0.2); cursor: pointer; }
    .az-range-value { text-align: center; font-size: 1.1rem; font-weight: 700; color: var(--brand); margin-bottom: 6px; }
    /* ── Completion screen ── */
    .az-complete { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; min-height: 300px; }
    .az-complete-check { font-size: 56px; color: var(--teal); line-height: 1; margin-bottom: 20px; }
    .az-complete-title { font-size: 1.25rem; font-weight: 600; color: var(--text1); margin-bottom: 12px; }
    .az-complete-sub { font-size: 0.9rem; color: var(--text2); max-width: 340px; line-height: 1.6; margin-bottom: 28px; }
    .az-complete-btn { background: var(--teal); color: white; border: none; border-radius: 8px; padding: 14px 32px; font-size: 0.9rem; font-weight: 500; cursor: pointer; font-family: 'Inter',sans-serif; transition: background 0.15s; }
    .az-complete-btn:hover { background: #3A8FA0; }
    /* ── Assessment summary card (in chat) ── */
    .az-card { background: rgba(77,168,187,0.08); border-left: 3px solid var(--teal); border-radius: 0 8px 8px 0; padding: 14px 16px; font-size: 0.8rem; color: var(--text1); margin-bottom: 4px; }
    .az-card-title { font-weight: 600; font-size: 0.85rem; color: var(--brand); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
    .az-card-row { margin-bottom: 4px; color: var(--text2); line-height: 1.5; }
    .az-card-row strong { color: var(--text1); }
    .az-card-score { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(77,168,187,0.2); font-weight: 600; }
    /* Exit confirmation overlay */
    .az-exit-confirm { position: absolute; inset: 0; background: rgba(255,255,255,0.96); display: flex; align-items: center; justify-content: center; padding: 32px; border-radius: 16px; z-index: 10; }
    .az-exit-box { text-align: center; max-width: 320px; }
    .az-exit-title { font-family: 'DM Serif Display',Georgia,serif; font-size: 1.3rem; color: var(--brand); margin-bottom: 10px; }
    .az-exit-sub { font-size: 0.875rem; color: var(--text2); margin-bottom: 24px; line-height: 1.5; }
    .az-exit-btns { display: flex; flex-direction: column; gap: 10px; align-items: center; }
    .az-exit-btns .az-btn-primary { width: 100%; max-width: 260px; text-align: center; }
    .az-exit-btns .az-btn-ghost { color: #e05252; font-size: 0.875rem; }

    /* ── Footer ── */
    .app-footer { flex-shrink: 0; text-align: center; padding: 3px 0 6px; font-size: 11px; color: var(--text2); }
    .app-footer a { color: var(--text2); text-decoration: none; cursor: pointer; }
    .app-footer a:hover { text-decoration: underline; }
    /* ── Legal pages overlay ── */
    .legal-overlay { display: none; position: fixed; inset: 0; z-index: 600; background: #FAFAF9; flex-direction: column; overflow: hidden; }
    .legal-overlay.open { display: flex; }
    .legal-overlay-hdr { background: var(--brand); color: white; padding: 14px 20px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
    .legal-overlay-back { background: none; border: none; color: white; font-size: 1.1rem; cursor: pointer; padding: 0 4px 0 0; line-height: 1; opacity: 0.88; }
    .legal-overlay-back:hover { opacity: 1; }
    .legal-overlay-title { font-size: 1rem; font-weight: 500; flex: 1; }
    .legal-overlay-body { flex: 1; overflow-y: auto; }
    .legal-overlay-doc { max-width: 740px; margin: 0 auto; padding: 36px 28px 72px; font-size: 0.88rem; line-height: 1.8; color: var(--text1); }
    .legal-overlay-doc h1 { font-family: 'DM Serif Display', serif; font-size: 1.7rem; color: var(--brand); margin: 0 0 6px; font-weight: 400; }
    .legal-overlay-doc h2 { font-size: 0.85rem; font-weight: 700; color: var(--brand); margin: 32px 0 10px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
    .legal-overlay-doc h3 { font-size: 0.9rem; font-weight: 600; color: var(--text1); margin: 20px 0 6px; }
    .legal-overlay-doc p { margin: 8px 0; }
    .legal-overlay-doc ul, .legal-overlay-doc ol { padding-left: 22px; margin: 8px 0 12px; }
    .legal-overlay-doc li { margin-bottom: 5px; }
    .legal-overlay-doc strong { color: var(--brand); }
    .legal-overlay-doc hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
    .legal-overlay-doc em { color: var(--text2); font-size: 0.85rem; }
    .legal-cross-link-bar { border-top: 1px solid var(--border); margin-top: 36px; padding-top: 16px; font-size: 0.82rem; color: var(--text2); }
    .legal-cross-link-bar a { color: var(--teal); text-decoration: none; cursor: pointer; }
    .legal-cross-link-bar a:hover { text-decoration: underline; }

    /* ── Profile Management Modal ── */
    .pm-overlay { display:none; position:fixed; inset:0; z-index:700; background:rgba(0,0,0,0.42); align-items:center; justify-content:center; padding:20px; }
    .pm-box { background:#fff; border-radius:14px; width:100%; max-width:360px; max-height:82dvh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.28); }
    .pm-header { display:flex; align-items:center; gap:8px; padding:15px 18px 13px; border-bottom:1px solid var(--border); flex-shrink:0; }
    .pm-back-btn { background:none; border:none; color:var(--text2); font-size:0.8rem; cursor:pointer; padding:0; font-family:inherit; flex-shrink:0; }
    .pm-back-btn:hover { color:var(--brand); }
    .pm-title { font-size:0.95rem; font-weight:600; color:var(--brand); flex:1; }
    .pm-close-btn { background:none; border:none; color:var(--text2); font-size:1rem; cursor:pointer; padding:0 2px; line-height:1; flex-shrink:0; }
    .pm-close-btn:hover { color:var(--brand); }
    .pm-body { flex:1; overflow-y:auto; }
    .pm-profile-list { padding:6px 0; }
    .pm-profile-item { display:flex; align-items:center; gap:12px; padding:10px 18px; cursor:pointer; transition:background 0.12s; }
    .pm-profile-item:hover { background:#f4f7fb; }
    .pm-profile-active { background:#eef6f9; }
    .pm-profile-name { font-size:0.88rem; font-weight:500; color:var(--text1); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .pm-active-badge { font-size:0.7rem; background:var(--teal); color:white; border-radius:10px; padding:2px 9px; font-weight:500; flex-shrink:0; }
    .pm-edit-btn { background:none; border:none; color:var(--text2); cursor:pointer; padding:5px; border-radius:6px; display:flex; align-items:center; justify-content:center; transition:background 0.12s, color 0.12s; flex-shrink:0; }
    .pm-edit-btn:hover { background:#e2e8f0; color:var(--brand); }
    .pm-footer { padding:12px 18px 14px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; gap:8px; }
    .pm-add-btn { display:inline-flex; align-items:center; gap:7px; background:var(--brand); color:white; border:none; border-radius:8px; padding:8px 14px; font-size:0.82rem; font-weight:500; cursor:pointer; font-family:inherit; transition:background 0.14s; }
    .pm-add-btn:hover { background:#254d7a; }
    .pm-export-btn { display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--text2); font-size:0.78rem; cursor:pointer; font-family:inherit; padding:6px 8px; border-radius:6px; transition:color 0.12s, background 0.12s; }
    .pm-export-btn:hover { color:var(--brand); background:#f0f4f8; }
    .pm-form { padding:18px; }
    .pm-form-group { margin-bottom:16px; }
    .pm-form-label { font-size:0.75rem; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:0.04em; display:block; margin-bottom:7px; }
    .pm-form-input { width:100%; padding:9px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:0.88rem; font-family:'Inter',sans-serif; color:var(--text1); outline:none; box-sizing:border-box; transition:border-color 0.15s; }
    .pm-form-input:focus { border-color:var(--teal); }
    .pm-color-swatches { display:flex; gap:8px; flex-wrap:wrap; }
    .pm-color-swatch { width:28px; height:28px; border-radius:50%; border:2.5px solid transparent; cursor:pointer; transition:transform 0.12s, border-color 0.12s; outline:none; padding:0; }
    .pm-color-swatch:hover { transform:scale(1.14); }
    .pm-color-selected { border-color:var(--text1) !important; transform:scale(1.14); }
    .pm-upload-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:0.8rem; color:var(--text2); cursor:pointer; font-family:'Inter',sans-serif; transition:border-color 0.14s, color 0.14s; }
    .pm-upload-btn:hover { border-color:var(--teal); color:var(--teal); }
    .pm-remove-avatar { background:none; border:none; color:#e05252; font-size:0.78rem; cursor:pointer; font-family:inherit; padding:4px 6px; }
    .pm-form-actions { display:flex; align-items:center; justify-content:space-between; margin-top:20px; gap:8px; }
    .pm-btn-primary { background:var(--brand); color:white; border:none; border-radius:8px; padding:9px 18px; font-size:0.85rem; font-weight:500; cursor:pointer; font-family:inherit; transition:background 0.14s; }
    .pm-btn-primary:hover:not(:disabled) { background:#254d7a; }
    .pm-btn-primary:disabled { background:#b0bec5; cursor:default; }
    .pm-btn-ghost { background:none; border:1.5px solid var(--border); color:var(--text2); border-radius:8px; padding:8px 14px; font-size:0.85rem; cursor:pointer; font-family:inherit; transition:border-color 0.14s, color 0.14s; }
    .pm-btn-ghost:hover { border-color:var(--text2); color:var(--text1); }
    .pm-btn-danger { background:none; border:none; color:#dc2626; font-size:0.85rem; cursor:pointer; font-family:inherit; padding:8px 2px; }
    .pm-btn-danger:hover:not(:disabled) { text-decoration:underline; }
    .pm-btn-danger:disabled { color:#b0bec5; cursor:default; }
    /* Mobile profile dot in header */
    .mob-profile-dot { display:none; align-items:center; justify-content:center; width:32px; height:32px; background:none; border:none; padding:0; cursor:pointer; flex-shrink:0; margin-left:auto; }
    @media (max-width: 767px) { .mob-profile-dot { display:flex; } }

    /* ── Master Summary Card ── */

    /* ── Report HTML viewer ── */
    .report-html-body { padding: 6px 2px; font-family: 'Inter',sans-serif; font-size: 15px; color: #1A2332; line-height: 1.7; }
    .report-html-body h1, .report-html-body h2, .report-html-body h3 { font-family: 'DM Serif Display',Georgia,serif; font-weight: 500; color: #1B3A5C; margin: 18px 0 8px; font-size: 1rem; }
    .report-html-body h1 { font-size: 1.15rem; }
    .report-html-body h2 { font-size: 1rem; }
    .report-html-body h3 { font-size: 0.95rem; color: #1B3A5C; }
    .report-html-body hr { border: none; border-top: 1px solid #E0E7EF; margin: 16px 0; }
    .report-html-body p { margin: 0 0 10px; }
    .report-html-body ul, .report-html-body ol { padding-left: 20px; margin: 0 0 10px; }
    .report-html-body li { margin-bottom: 4px; }
    .report-html-body strong { font-weight: 600; }
    .report-html-body table { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 0.9rem; }
    .report-html-body th { background: #EEF3F8; color: #1B3A5C; padding: 7px 10px; text-align: left; font-size: 0.82rem; font-weight: 600; }
    .report-html-body td { padding: 6px 10px; border-bottom: 1px solid #E8EDF4; }

    /* ── Specialist selector overlay ── */
    .specialist-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 900; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
    .specialist-overlay.active { opacity: 1; pointer-events: all; }
    .specialist-modal { background: #FAFAF9; border-radius: 16px; width: 380px; max-width: 92vw; box-shadow: 0 20px 60px rgba(0,0,0,0.2); overflow: hidden; }
    .specialist-modal-hdr { background: var(--brand); color: white; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; }
    .specialist-modal-hdr h3 { font-family: 'DM Serif Display',Georgia,serif; font-weight: 400; font-size: 1.1rem; margin: 0; }
    .specialist-modal-close { background: none; border: none; color: white; font-size: 1.3rem; cursor: pointer; opacity: 0.7; }
    .specialist-modal-close:hover { opacity: 1; }
    .specialist-modal-body { padding: 16px 18px 8px; }
    .specialist-modal-body p { font-size: 0.86rem; color: var(--text2); margin: 0 0 12px; }
    .specialist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
    .specialist-btn { background: var(--bg2); border: 1.5px solid var(--border); border-radius: 8px; padding: 9px 10px; font-size: 0.82rem; font-family: 'Inter',sans-serif; color: var(--text1); cursor: pointer; text-align: left; transition: all 0.14s; font-weight: 500; }
    .specialist-btn:hover, .specialist-btn.selected { background: rgba(13,148,136,0.07); border-color: var(--teal); color: var(--teal); }
    .specialist-btn.selected { background: rgba(13,148,136,0.12); }
    .specialist-custom-wrap { margin-bottom: 12px; display: none; }
    .specialist-custom-wrap input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 0.85rem; font-family: 'Inter',sans-serif; }
    .specialist-modal-footer { padding: 10px 18px 16px; display: flex; justify-content: flex-end; gap: 8px; }
    .specialist-cancel-btn { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 8px 16px; font-size: 0.83rem; font-family: 'Inter',sans-serif; cursor: pointer; }
    .specialist-generate-btn { background: var(--teal); color: white; border: none; border-radius: 8px; padding: 8px 18px; font-size: 0.83rem; font-family: 'Inter',sans-serif; cursor: pointer; font-weight: 600; transition: background 0.15s; }
    .specialist-generate-btn:hover { background: #3A8FA0; }
    .specialist-generate-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ── Chat area ── */
    .chat-container { flex: 1; display: flex; flex-direction: column; background: var(--bg); padding: 0 16px 12px; box-sizing: border-box; min-height: 0; min-width: 0; position: relative; }

/* ── Perennial split layout (desktop ≥ 768px) ──────────────────
   Chat and panel are always visible. A drag handle lets the user
   resize. Neither side can collapse. Ratio persists via
   localStorage key 'knome_split_ratio'.
─────────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .app-body {
    --split-ratio: 0.65;
  }

  .chat-container {
    flex: var(--split-ratio) 1 0;
    min-width: 0;
    display: flex;
    overflow: visible;
  }

  .right-panel {
    flex: calc(1 - var(--split-ratio)) 1 0;
    min-width: 320px;
    width: auto;
    display: flex;
    flex-direction: column;
  }

  .split-resize-handle {
    width: 6px;
    flex: 0 0 6px;
    background: transparent;
    cursor: col-resize;
    position: relative;
    z-index: 5;
    transition: background 0.15s;
  }

  .split-resize-handle:hover,
  .split-resize-handle.dragging {
    background: rgba(77, 168, 187, 0.18);
  }

  .split-resize-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 32px;
    background: var(--border);
    border-radius: 1px;
    opacity: 0.5;
    transition: opacity 0.15s, background 0.15s;
  }

  .split-resize-handle:hover::after,
  .split-resize-handle.dragging::after {
    background: var(--teal);
    opacity: 1;
  }

  .input-area {
    display: flex !important;
  }
}

@media (max-width: 767px) {
  .split-resize-handle {
    display: none;
  }
}

    .chat-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; flex: 1; padding: 32px 20px 16px; gap: 12px; text-align: center; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .empty-welcome-heading { font-family: 'DM Serif Display',Georgia,serif; font-size: 28px; font-weight: 400; color: var(--brand); line-height: 1.3; max-width: 380px; }
    .empty-welcome-sub { font-size: 1rem; color: var(--text2); max-width: 380px; line-height: 1.55; }

    /* ── Thread title bar ── */
    .thread-title-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0 6px; flex-shrink: 0; min-height: 38px; }
    .thread-name-wrap { display: none; }
    .thread-name-display { font-size: 0.82rem; font-weight: 500; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; padding: 3px 6px; border-radius: 5px; border: 1.5px solid transparent; transition: border-color 0.15s, background 0.15s; max-width: 280px; font-family: 'Inter',inherit; }
    .thread-name-display:hover { border-color: var(--border); background: var(--bg2); }
    .thread-name-display:empty::before { content: attr(data-placeholder); color: var(--text2); font-style: italic; opacity: 0.55; }
    .thread-name-input { font-size: 0.82rem; font-weight: 500; color: var(--text1); border: 1.5px solid var(--teal); border-radius: 5px; padding: 3px 7px; background: #FAFAF9; outline: none; width: 240px; font-family: 'Inter',inherit; display: none; }
    .title-bar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }

    /* ── Chat window ── */
    .chat-window-wrap { flex: 1; position: relative; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
    .chat-window { flex: 1; overflow-y: auto; background: transparent; border: none; border-radius: 0; padding: 4px 0; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
    .chat-window::-webkit-scrollbar { width: 4px; }
    .chat-window::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    /* ── Messages ── */
    .message { display: flex; gap: 10px; animation: fadeIn 0.25s ease; max-width: 680px; width: 100%; margin-left: auto; margin-right: auto; }
    .message.user { justify-content: flex-end; }
    .bubble { max-width: 72%; padding: 10px 14px; font-size: 15px; line-height: 1.6; }
    .message.assistant .bubble { background: transparent; border: none; border-radius: 0; color: var(--text1); padding-left: 2px; max-width: 92%; }

    /* Markdown content inside assistant bubbles */
    .message.assistant .bubble p {
      margin: 0 0 14px 0;
      line-height: 1.6;
    }
    .message.assistant .bubble p:last-child {
      margin-bottom: 0;
    }

    .message.assistant .bubble h1,
    .message.assistant .bubble h2,
    .message.assistant .bubble h3,
    .message.assistant .bubble h4 {
      font-weight: 600;
      line-height: 1.3;
      color: var(--text1);
      margin: 22px 0 10px 0;
    }
    .message.assistant .bubble h1 { font-size: 20px; }
    .message.assistant .bubble h2 { font-size: 18px; }
    .message.assistant .bubble h3 { font-size: 16px; }
    .message.assistant .bubble h4 { font-size: 15px; }
    .message.assistant .bubble h1:first-child,
    .message.assistant .bubble h2:first-child,
    .message.assistant .bubble h3:first-child,
    .message.assistant .bubble h4:first-child {
      margin-top: 0;
    }

    .message.assistant .bubble ul,
    .message.assistant .bubble ol {
      margin: 0 0 14px 0;
      padding-left: 22px;
    }
    .message.assistant .bubble li {
      margin-bottom: 6px;
      line-height: 1.55;
    }
    .message.assistant .bubble li:last-child {
      margin-bottom: 0;
    }
    .message.assistant .bubble ul ul,
    .message.assistant .bubble ol ol,
    .message.assistant .bubble ul ol,
    .message.assistant .bubble ol ul {
      margin: 6px 0 0 0;
    }

    .message.assistant .bubble strong {
      font-weight: 600;
      color: var(--text1);
    }

    .message.assistant .bubble em {
      font-style: italic;
    }

    .message.assistant .bubble blockquote {
      margin: 0 0 14px 0;
      padding: 8px 14px;
      border-left: 3px solid var(--teal);
      background: var(--bg2);
      border-radius: 0 6px 6px 0;
      color: var(--text1);
    }
    .message.assistant .bubble blockquote p:last-child {
      margin-bottom: 0;
    }

    .message.assistant .bubble code {
      font-family: 'SF Mono', Monaco, 'Courier New', monospace;
      font-size: 13px;
      background: var(--bg2);
      padding: 2px 6px;
      border-radius: 4px;
      color: var(--text1);
    }
    .message.assistant .bubble pre {
      margin: 0 0 14px 0;
      padding: 12px 14px;
      background: var(--bg2);
      border-radius: 6px;
      overflow-x: auto;
    }
    .message.assistant .bubble pre code {
      background: transparent;
      padding: 0;
      font-size: 13px;
      line-height: 1.5;
    }

    .message.assistant .bubble table {
      border-collapse: collapse;
      margin: 0 0 14px 0;
      width: 100%;
      font-size: 14px;
    }
    .message.assistant .bubble th,
    .message.assistant .bubble td {
      border: 1px solid var(--border);
      padding: 8px 12px;
      text-align: left;
    }
    .message.assistant .bubble th {
      background: var(--bg2);
      font-weight: 600;
    }

    .message.assistant .bubble hr {
      border: none;
      border-top: 1px solid var(--border);
      margin: 18px 0;
    }

    .message.assistant .bubble a {
      color: var(--teal);
      text-decoration: underline;
    }
    .message.assistant .bubble a:hover {
      text-decoration: none;
    }

    .message.user .bubble { background: var(--brand); color: white; border-radius: 18px 18px 4px 18px; }

/* ── Session wrap-up message treatment ──────────────────────────── */
.wrap-up-message {
  border-left: 3px solid var(--teal);
  padding-left: 14px;
  /* no margin-left — alignment is handled inside the bubble box */
}

.wrap-up-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  margin-bottom: 8px;
  opacity: 0.85;
}

.wrap-up-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.wrap-up-btn {
  font-family: 'Inter', inherit;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 9px 20px;
  cursor: pointer;
  border: 1.5px solid var(--teal);
  transition: background 0.15s, color 0.15s, opacity 0.15s;
  white-space: nowrap;
}

.wrap-up-btn-primary {
  background: var(--teal);
  color: white;
}

.wrap-up-btn-primary:hover:not(:disabled) {
  background: #3A8FA0;
  border-color: #3A8FA0;
}

.wrap-up-btn-secondary {
  background: transparent;
  color: var(--teal);
}

.wrap-up-btn-secondary:hover:not(:disabled) {
  background: rgba(77, 168, 187, 0.08);
}

.wrap-up-btn.chosen {
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
}

.wrap-up-btn.not-chosen {
  opacity: 0.18;
  cursor: default;
  pointer-events: none;
}
/* ────────────────────────────────────────────────────────────────── */

    .bubble.file-upload { background: var(--bg2); border: 1px dashed var(--border); border-radius: 18px 18px 4px 18px; color: var(--text1); }
    .file-label { font-size: 0.75rem; color: var(--teal); font-weight: 600; margin-bottom: 4px; }

    /* ── Drop overlay ── */
    .drop-overlay { position: absolute; inset: 0; background: rgba(77,168,187,0.08); border: 2px dashed #4DA8BB; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.14s; }
    .drop-overlay.active { opacity: 1; }
    .drop-overlay-icon { color: #4DA8BB; opacity: 0.8; }
    .drop-overlay-text { font-size: 1.1rem; font-weight: 500; color: #4DA8BB; }

    /* ── Typing indicator ── */
    .bubble-print-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 14px; font-size: 0.75rem; font-weight: 500; color: var(--text2); border: 1px solid var(--border); border-radius: 6px; background: #FAFAF9; cursor: pointer; font-family: 'Inter',inherit; transition: border-color 0.15s, color 0.15s; }
    .bubble-print-btn:hover { border-color: var(--teal); color: var(--teal); }
    .stream-cursor { display: inline-block; width: 48px; height: 48px; vertical-align: middle; margin-bottom: 2px; animation: gnomePulse 1s ease-in-out infinite; }
    .stream-cursor img { width: 48px; height: 48px; object-fit: contain; display: block; border-radius: 50%; }
    .stream-status { margin-top: 6px; font-size: 0.82rem; color: var(--text2); font-style: italic; opacity: 0; transition: opacity 0.35s ease; }
    .stream-status.visible { opacity: 0.85; }
    @keyframes gnomePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.88); } }
    .typing { display: flex; align-items: center; gap: 5px; padding: 4px 0; }
    .typing span { width: 7px; height: 7px; background: var(--teal); border-radius: 50%; animation: bounce 1.2s infinite; }
    .typing span:nth-child(2) { animation-delay: 0.2s; }
    .typing span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes bounce { 0%,80%,100% { transform:translateY(0); } 40% { transform:translateY(-6px); } }

    /* ── Body Map ── */
    .body-map-overlay { display: none; position: fixed; inset: 0; background: rgba(10,20,35,0.65); z-index: 800; align-items: center; justify-content: center; }
    .body-map-overlay.open { display: flex; }
    .bm-panel { background: #FAFAF9; border-radius: 16px; width: 490px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,0.4); overflow: hidden; animation: popIn 0.15s ease; }
    .bm-header { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .bm-title { font-family: 'DM Serif Display', Georgia, serif; font-size: 1.08rem; color: var(--brand); }
    .bm-close { background: none; border: none; cursor: pointer; color: var(--text2); font-size: 1.25rem; line-height: 1; padding: 3px 7px; border-radius: 6px; transition: background 0.12s; }
    .bm-close:hover { background: var(--bg2); color: var(--text1); }
    .bm-body { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; gap: 14px; min-height: 0; }
    .bm-figure-col { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
    .bm-view-toggle { display: flex; gap: 3px; }
    .bm-view-btn { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 13px; font-size: 0.72rem; font-weight: 600; cursor: pointer; color: var(--text2); font-family: inherit; transition: all 0.15s; letter-spacing: 0.02em; }
    .bm-view-btn.active { background: var(--brand); color: white; border-color: var(--brand); }
    .bm-svg { display: block; }
    .body-region { fill: #EDF2F7; stroke: #94AABB; stroke-width: 0.8; cursor: pointer; transition: fill 0.14s; }
    .body-region:hover { fill: #BEE3F8; stroke: #4299e1; }
    .body-region.selected { fill: #4DA8BB; stroke: #3A8FA0; stroke-width: 1.2; }
    .bm-right-col { flex: 1; display: flex; flex-direction: column; gap: 13px; min-width: 0; }
    .bm-loc-section { }
    .bm-section-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--text2); margin-bottom: 7px; }
    .bm-selected-tags { display: flex; flex-wrap: wrap; gap: 5px; min-height: 28px; }
    .bm-tag { font-size: 0.72rem; background: #FEF3C7; border: 1px solid #D4A017; border-radius: 20px; padding: 3px 8px 3px 10px; color: #78350F; display: inline-flex; align-items: center; gap: 4px; }
    .bm-tag-x { background: none; border: none; cursor: pointer; color: #78350F; font-size: 0.85rem; line-height: 1; padding: 0; opacity: 0.7; }
    .bm-tag-x:hover { opacity: 1; }
    .bm-empty-hint { font-size: 0.76rem; color: var(--text2); font-style: italic; padding: 4px 0; line-height: 1.5; }
    .bm-descriptor { }
    .bm-pills { display: flex; flex-wrap: wrap; gap: 5px; }
    .bm-pill { background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 4px 11px; font-size: 0.74rem; cursor: pointer; color: var(--text2); font-family: inherit; transition: all 0.14s; white-space: nowrap; }
    .bm-pill:hover { border-color: var(--teal); color: var(--teal); }
    .bm-feeling-pill.active { background: var(--teal); border-color: var(--teal); color: white; }
    .bm-intensity-pill.active { background: var(--brand); border-color: var(--brand); color: white; }
    .bm-footer { display: flex; align-items: center; justify-content: flex-end; padding: 10px 16px 13px; border-top: 1px solid var(--border); gap: 8px; flex-shrink: 0; }
    .bm-reset-btn { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 7px 15px; font-size: 0.8rem; cursor: pointer; color: var(--text2); font-family: inherit; transition: all 0.15s; }
    .bm-reset-btn:hover { background: var(--bg2); }
    .bm-done-btn { background: var(--teal); color: white; border: none; border-radius: 8px; padding: 8px 22px; font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s; }
    .bm-done-btn:hover { background: #3A8FA0; }

    /* ── Catch me up ── */
    #catch-me-up-bar { flex-shrink: 0; }
    #catch-me-up-banner { display: flex; align-items: center; gap: 10px; padding: 5px 0 3px; animation: fadeInDown 0.2s ease; }
    .catch-me-up-btn { background: none; border: none; padding: 0; color: var(--teal); font-size: 0.78rem; font-weight: 500; cursor: pointer; font-family: 'Inter',inherit; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
    .catch-me-up-btn:hover { text-decoration: underline; }
    .catch-me-up-btn svg { flex-shrink: 0; }
    .catch-me-up-hint { font-size: 0.73rem; color: var(--text2); margin: 0; transition: opacity 0.25s; }
    .catch-me-up-hint em { font-style: italic; }

    /* ── Pending strip (removed from UI — keep CSS as noop) ── */
    /* ── Staged attachment chips (above textarea) ── */
    .input-attach-row { display: none; flex-wrap: wrap; gap: 6px; padding: 10px 12px 2px 12px; }
    .input-attach-row.visible { display: flex; }
    .attach-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 240px; padding: 6px 8px 6px 10px; background: #F0F5F9; border: 1px solid #D4DCE6; border-radius: 10px; font-size: 0.82rem; color: var(--text1); line-height: 1.2; transition: border-color 0.15s, background 0.15s; }
    .attach-chip.error { border-color: #E07A6B; background: #FBEDEA; color: #9B3A2A; }
    .attach-chip.processing { opacity: 0.75; }
    .attach-chip-icon { flex-shrink: 0; color: var(--teal); display: flex; align-items: center; }
    .attach-chip.error .attach-chip-icon { color: #C2553F; }
    .attach-chip-thumb { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex-shrink: 0; display: block; background: #E5ECF2; }
    .attach-chip-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
    .attach-chip-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
    .attach-chip-meta { font-size: 0.7rem; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .attach-chip-remove { background: none; border: none; color: var(--text2); cursor: pointer; padding: 2px; border-radius: 4px; display: flex; align-items: center; margin-left: 2px; flex-shrink: 0; transition: color 0.12s, background 0.12s; }
    .attach-chip-remove:hover { color: #C2553F; background: rgba(194,85,63,0.1); }
    .attach-spinner { width: 12px; height: 12px; border: 2px solid #D4DCE6; border-top-color: var(--teal); border-radius: 50%; animation: attachSpin 0.7s linear infinite; flex-shrink: 0; }
    @keyframes attachSpin { to { transform: rotate(360deg); } }
    .input-center-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    /* Error bubble styling */
    .bubble.error-bubble { background: #FBEDEA; color: #9B3A2A; border: 1px solid #E07A6B; }
    /* ── Input area ── */
    .input-area { display: flex; align-items: flex-end; gap: 0; margin-top: 6px; flex-shrink: 0; max-width: 680px; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; min-width: 0; padding: 0 18px; }
    .input-upload-label { display: none; }
    .plus-icon-wrap { position: relative; flex-shrink: 0; }
    .plus-icon-btn { background: none; border: none; cursor: pointer; color: var(--teal); padding: 4px; transition: color 0.15s; line-height: 1; display: flex; align-items: center; justify-content: center; }
    .plus-icon-btn:hover { color: #3A8FA0; }
    .plus-popup { position: absolute; bottom: calc(100% + 8px); left: 0; background: #FAFAF9; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); padding: 4px 0; min-width: 152px; z-index: 300; display: none; animation: fadeIn 0.12s ease; }
    .plus-popup.open { display: block; }
    .plus-popup-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; padding: 9px 14px; font-size: 0.875rem; color: var(--text1); cursor: pointer; font-family: 'Inter',inherit; transition: background 0.12s; }
    .plus-popup-item:hover { background: var(--bg2); }
    .plus-popup-icon { flex-shrink: 0; color: var(--text2); display: flex; align-items: center; }
    .plus-popup-help { font-size: 11px; font-style: italic; color: var(--text2); padding: 2px 14px 8px; line-height: 1.45; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
    .input-wrap { flex: 1; min-width: 0; position: relative; border: 1px solid #D4DCE6; border-radius: 12px; background: #FAFAF9; transition: border-color 0.2s; overflow: visible; padding: 12px 12px 52px 12px; box-sizing: border-box; }
    .input-wrap:focus-within { border-color: var(--teal); }
    textarea { display: block; width: 100%; min-width: 0; padding: 0; border: none; font-size: 15px; font-family: 'Inter',sans-serif; font-weight: 400; resize: none; outline: none; min-height: 24px; max-height: 180px; background: transparent; color: var(--text1); line-height: 1.55; overflow-y: auto; box-sizing: border-box; }
    textarea::placeholder { color: var(--text2); font-size: 15px; font-family: 'Inter',sans-serif; }
    .input-row { position: absolute; bottom: 10px; left: 12px; right: 12px; display: flex; align-items: center; justify-content: space-between; }
    .input-right-group { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
    .input-btn-stack { position: relative; width: 36px; height: 36px; flex-shrink: 0; }
    #send-btn { background: var(--teal); color: white; border: none; border-radius: 8px; width: 36px; height: 36px; font-size: 18px; font-weight: 400; cursor: pointer; transition: background 0.18s, opacity 0.15s ease; font-family: 'Inter',inherit; display: flex; align-items: center; justify-content: center; padding: 0; position: absolute; inset: 0; opacity: 0; pointer-events: none; }
    #send-btn.visible { opacity: 1; pointer-events: auto; }
    #send-btn:hover { background: #3A8FA0; }
    #send-btn:disabled { background: var(--border); color: var(--text2); cursor: not-allowed; }
    .mic-btn { background: none; border: none; color: var(--teal); cursor: pointer; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; transition: opacity 0.15s ease, background 0.15s ease; opacity: 1; pointer-events: auto; }
    .mic-btn:hover { background: rgba(77,168,187,0.1); }
    .mic-btn.hidden { opacity: 0; pointer-events: none; }
    .mic-btn.listening { color: #E63946; animation: micPulse 1.5s infinite; }
    #stop-btn { background: var(--brand); color: white; border: none; border-radius: 8px; width: 36px; height: 36px; font-size: 14px; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0; position: absolute; inset: 0; z-index: 2; transition: background 0.15s; }
    #stop-btn.visible { display: flex; }
    #stop-btn:hover { background: #152d47; }
    @keyframes micPulse { 0%,100% { opacity:1; } 50% { opacity:0.45; } }
    .bm-input-btn { background: none; border: none; cursor: pointer; color: var(--teal); padding: 4px; transition: color 0.15s, opacity 0.15s; line-height: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .bm-input-btn:hover { opacity: 0.75; }
    .bm-input-btn svg { display: block; }

    /* ── Thread dot ── */
    .thread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex-shrink: 0; margin-top: 4px; display: inline-block; margin-right: 4px; animation: pulse 2s infinite; }
    @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.25; } }

    /* ── DNA status ── */
    .dna-status { display: none; background: #FAFAF9; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 0.8rem; color: var(--brand); margin-bottom: 8px; line-height: 1.5; }
    .dna-status.visible { display: block; }

    /* ── Lab viewer ── */
    .lab-viewer { position: fixed; inset: 0; background: #FAFAF9; z-index: 120; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); }
    .lab-viewer.open { transform: translateX(0); }
    .lab-viewer-header { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .lab-viewer-title { flex: 1; font-size: 1rem; font-weight: 600; color: var(--brand); }
    .lab-viewer-close { background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--text2); padding: 4px 8px; border-radius: 5px; }
    .lab-viewer-close:hover { background: var(--bg2); }
    .lab-viewer-actions { display: flex; gap: 8px; }
    .lab-viewer-btn { border: none; border-radius: 7px; font-size: 0.8rem; font-weight: 500; padding: 6px 14px; cursor: pointer; font-family: inherit; transition: opacity 0.15s; }
    .lab-viewer-btn.primary { background: var(--teal); color: white; }
    .lab-viewer-btn.secondary { background: var(--bg2); color: var(--text1); border: 1px solid var(--border); }
    .lab-viewer-btn:hover { opacity: 0.88; }
    .lab-viewer-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
    .lab-viewer-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
    .lab-viewer-table th { text-align: left; padding: 7px 10px; background: var(--bg2); color: var(--text2); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 2px solid var(--border); }
    .lab-viewer-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text1); vertical-align: top; }
    .lab-viewer-table tr:last-child td { border-bottom: none; }
    .lab-routing-section { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 14px; }
    .lab-routing-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text2); margin-bottom: 8px; }
    .lab-routing-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .lab-routing-chip { background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; font-size: 0.75rem; padding: 3px 11px; color: var(--text1); }
    .lab-viewer-footer { border-top: 1px solid var(--border); padding: 10px 18px; display: flex; justify-content: flex-end; flex-shrink: 0; }

    /* ── Report dialog ── */
    .report-dialog-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200; align-items: center; justify-content: center; padding: 20px; }
    .report-dialog-overlay.active { display: flex; }
    .report-dialog { background: #FAFAF9; border-radius: 16px; max-width: 520px; width: 100%; max-height: 80dvh; overflow-y: auto; box-shadow: 0 8px 40px rgba(0,0,0,0.15); }
    .report-dialog-header { background: var(--brand); color: white; padding: 14px 18px; border-radius: 16px 16px 0 0; display: flex; align-items: center; justify-content: space-between; }
    .report-dialog-header h3 { font-size: 0.95rem; font-weight: 500; font-family: 'Inter',inherit; }
    .report-dialog-close { background: none; border: none; color: white; font-size: 1.2rem; cursor: pointer; opacity: 0.8; line-height: 1; }
    .report-dialog-close:hover { opacity: 1; }
    .report-dialog-body { padding: 16px 18px; }
    .report-dialog-label { font-size: 0.78rem; font-weight: 600; color: var(--brand); margin-bottom: 8px; margin-top: 14px; }
    .report-dialog-label:first-child { margin-top: 0; }
    .report-thread-list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
    .report-specialist-select { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 0.83rem; color: var(--text1); background: #FAFAF9; font-family: 'Inter',inherit; outline: none; }
    .report-custom-input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 0.83rem; color: var(--text1); font-family: 'Inter',inherit; outline: none; margin-top: 8px; display: none; }
    .report-dialog-footer { padding: 12px 18px 16px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--border); }
    .report-cancel-btn { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 18px; font-size: 0.85rem; cursor: pointer; font-family: inherit; color: var(--text1); }
    .report-generate-btn { background: var(--teal); border: none; border-radius: 8px; padding: 7px 18px; font-size: 0.85rem; cursor: pointer; font-family: inherit; color: white; font-weight: 500; }
    .report-generate-btn:hover { background: #3A8FA0; }

    /* ── Summary modal ── */
    .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 100; align-items: center; justify-content: center; padding: 20px; }
    .modal-overlay.open { display: flex; }
    .modal { background: #FAFAF9; border-radius: 16px; max-width: 680px; width: 100%; max-height: 90dvh; display: flex; flex-direction: column; box-shadow: 0 8px 40px rgba(0,0,0,0.15); overflow: hidden; }
    .modal-header { background: var(--brand); color: white; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .modal-header h2 { font-size: 1.1rem; font-weight: 500; font-family: 'Inter',inherit; }
    .modal-close { background: none; border: none; color: white; font-size: 1.4rem; cursor: pointer; opacity: 0.8; line-height: 1; }
    .modal-close:hover { opacity: 1; }
    .modal-controls { padding: 12px 20px; background: var(--bg2); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .toggle-wrap { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; font-weight: 500; color: var(--brand); }
    .toggle-label { min-width: 90px; }
    .toggle { position: relative; width: 48px; height: 26px; }
    .toggle input { opacity: 0; width: 0; height: 0; }
    .toggle-slider { position: absolute; inset: 0; background: var(--border); border-radius: 26px; cursor: pointer; transition: background 0.2s; }
    .toggle-slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: transform 0.2s; }
    .toggle input:checked + .toggle-slider { background: var(--teal); }
    .toggle input:checked + .toggle-slider::before { transform: translateX(22px); }
    #print-btn { background: var(--bg2); border: 1px solid var(--border); color: var(--brand); border-radius: 8px; padding: 7px 16px; font-size: 0.85rem; font-weight: 500; cursor: pointer; font-family: 'Inter',inherit; transition: background 0.2s; }
    #print-btn:hover { background: var(--border); }
    .modal-body { padding: 20px; overflow-y: auto; flex: 1; }
    .summary-loading { text-align: center; padding: 40px; color: var(--text2); font-style: italic; }
    .summary-content { display: none; }
    .summary-content.visible { display: block; }

    /* ── DNA upload modal ── */
    .dna-upload-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 700; align-items: center; justify-content: center; padding: 20px; }
    .dna-upload-overlay.active { display: flex; }
    .dna-upload-modal { background: #FAFAF9; border-radius: 16px; max-width: 520px; width: 100%; max-height: 90dvh; overflow-y: auto; box-shadow: 0 12px 44px rgba(0,0,0,0.2); animation: slideUp 0.28s ease; }
    .dna-upload-header { background: var(--brand); color: white; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-radius: 16px 16px 0 0; flex-shrink: 0; }
    .dna-upload-header h3 { font-size: 1rem; font-weight: 500; font-family: 'Inter',inherit; }
    .dna-upload-close { background: none; border: none; color: white; font-size: 1.3rem; cursor: pointer; opacity: 0.8; line-height: 1; padding: 2px 4px; }
    .dna-upload-close:hover { opacity: 1; }
    .dna-upload-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
    .dna-upload-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px 15px; }
    .dna-upload-card-title { font-size: 0.84rem; font-weight: 600; color: var(--brand); margin-bottom: 3px; }
    .dna-upload-card-desc { font-size: 0.75rem; color: var(--text2); line-height: 1.5; margin-bottom: 8px; }
    .dna-upload-platforms { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
    .dna-upload-platform-tag { font-size: 0.68rem; color: var(--text2); background: var(--bg2); border-radius: 4px; padding: 2px 8px; font-weight: 500; }
    .dna-upload-file-btn { background: var(--teal); color: white; border: none; border-radius: 8px; padding: 8px 16px; font-size: 0.82rem; font-weight: 500; cursor: pointer; font-family: 'Inter',inherit; transition: background 0.15s; }
    .dna-upload-file-btn:hover { background: #3A8FA0; }
    .dna-paste-area { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-size: 0.82rem; font-family: 'Inter',inherit; color: var(--text1); resize: vertical; min-height: 90px; outline: none; transition: border-color 0.15s; }
    .dna-paste-area:focus { border-color: var(--teal); }
    .dna-paste-submit { background: var(--teal); color: white; border: none; border-radius: 8px; padding: 8px 16px; font-size: 0.82rem; font-weight: 500; cursor: pointer; font-family: 'Inter',inherit; transition: background 0.15s; margin-top: 8px; }
    .dna-paste-submit:hover { background: #3A8FA0; }
    /* ── SNP summary card (inside DNA modal) ── */
    .snp-scanning { padding: 24px 4px; text-align: center; color: var(--brand); }
    .snp-scanning-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 5px; }
    .snp-scanning-sub { font-size: 0.78rem; color: var(--text2); line-height: 1.5; }
    .snp-scanning-bar { height: 4px; background: var(--bg2); border-radius: 2px; margin: 14px 0 0; overflow: hidden; }
    .snp-scanning-bar-fill { height: 100%; background: var(--teal); border-radius: 2px; animation: snpScan 1.8s ease-in-out infinite; }
    @keyframes snpScan { 0%{width:4%} 50%{width:78%} 100%{width:96%} }
    .snp-result-card { padding: 4px 0 6px; }
    .snp-result-headline { font-size: 1.05rem; font-weight: 700; color: var(--brand); margin-bottom: 3px; }
    .snp-result-sub { font-size: 0.76rem; color: var(--text2); margin-bottom: 14px; }
    .snp-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 16px; }
    .snp-cat-chip { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
    .snp-cat-chip-count { font-size: 1.15rem; font-weight: 700; color: var(--brand); line-height: 1.2; }
    .snp-cat-chip-name { font-size: 0.68rem; color: var(--text2); font-weight: 500; margin-top: 1px; }
    .snp-begin-btn { width: 100%; background: var(--brand); color: white; border: none; border-radius: 10px; padding: 13px; font-size: 0.9rem; font-weight: 600; cursor: pointer; font-family: 'Inter',inherit; transition: background 0.15s; }
    .snp-begin-btn:hover { background: #162f4a; }
    .snp-scan-error { padding: 20px 4px; text-align: center; }
    .snp-scan-error strong { display: block; color: #b94a48; margin-bottom: 8px; font-size: 0.88rem; }
    .snp-scan-error p { font-size: 0.76rem; color: var(--text2); line-height: 1.6; margin-bottom: 14px; }

    /* ── Refs panel ── */


    /* ── Right-panel backdrop (tablet overlay mode) ── */
    .rp-overlay { display: none; position: fixed; top: 56px; left: 52px; bottom: 0; right: 52px; background: rgba(0,0,0,0.3); z-index: 149; }
    .rp-overlay.active { display: block; }
    /* Panel close button — hidden on desktop, shown in overlay mode */
    .panel-close-btn { display: none !important; }

    /* ── Medium desktop (901-1200px): right panel still inline, chat column is narrow ── */
    @media (min-width: 901px) and (max-width: 1200px) {
      .input-area { max-width: none; width: 100%; box-sizing: border-box; }
      .message { max-width: none; width: 100%; }
    }

    /* ── Tablet overlay mode (768-900px): right panel slides in as overlay ── */
    @media (min-width: 768px) and (max-width: 900px) {
      .right-panel {
        position: fixed; top: 56px; bottom: 0; right: 52px;
        width: var(--panel-w);
        transform: translateX(100%);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        z-index: 150;
      }
      .right-panel.rp-open { transform: translateX(0); box-shadow: -4px 0 12px rgba(0,0,0,0.15); }
      .panel-close-btn { display: flex !important; }
      /* Chat input: respect available width between rails, no fixed max-width */
      .input-area { max-width: none; width: 100%; box-sizing: border-box; padding: 0 16px; }
      .message { max-width: none; width: 100%; }
    }

    /* ── Mobile button defaults (hidden on desktop) ── */
    .mob-ham-btn { display: none; }
    .mob-drawer-backdrop { display: none; }
    .mobile-tab-bar { display: none; }

    /* ── Mobile layout (< 768px) ── */
    @media (max-width: 767px) {
      body { padding-bottom: 0; background: var(--brand); }

      /* Taller header on mobile so the logo/title clear the camera and sit balanced */
      :root { --header-h: 76px; --mob-tabbar-h: 58px; --mob-disc-h: 40px; }
      header { padding-top: calc(env(safe-area-inset-top) + 6px); padding-bottom: 8px; align-items: flex-end; }
      .mob-ham-btn svg { width: 27px; height: 27px; }
      .mob-profile-dot { display: none !important; }

      /* Remove desktop min-width forcing */
      .app-body { min-width: 0; overflow: hidden; }

      /* Hide desktop-only chrome */
      .sb-rail-placeholder { display: none !important; }
      /* Mobile: panels become full-screen PAGES (the real DOM — no clone/rewire) */
      .right-panel {
        display: flex !important;
        position: fixed;
        top: calc(var(--header-h) + env(safe-area-inset-top));
        left: 0; right: 0;
        bottom: var(--mob-tabbar-h);
        width: auto;
        background: var(--bg);
        border-left: none;
        z-index: 95;
        transform: translateY(100%);
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
        pointer-events: none;
      }
      .right-panel.mob-page-open { transform: translateY(0); pointer-events: auto; }
      .right-rail { display: none !important; }

      /* Back-to-chat bar (mobile pages only) */
      .mob-page-backbar { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 9px 14px; border-bottom: 1px solid var(--border); background: var(--bg); box-shadow: inset 3px 0 0 var(--teal); }
      .mob-page-back { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--brand); font-family: 'Inter',inherit; font-size: 15px; font-weight: 600; cursor: pointer; padding: 4px 6px; margin: -4px -6px; border-radius: 8px; }
      .mob-page-back:active { background: rgba(27,58,92,0.08); }
      .mob-page-back svg { width: 20px; height: 20px; }
      .mob-page-title { margin-left: auto; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text2); }

      /* Per-panel identity colors on the back-bar (match desktop header colors) */
      #mob-page-backbar[data-panel="myhealth"]  { box-shadow: inset 3px 0 0 var(--mkr); }
      #mob-page-backbar[data-panel="myhealth"]  .mob-page-title { color: var(--mkr); }
      #mob-page-backbar[data-panel="symptoms"]  { box-shadow: inset 3px 0 0 var(--sx); }
      #mob-page-backbar[data-panel="symptoms"]  .mob-page-title { color: var(--sx); }
      #mob-page-backbar[data-panel="protocols"] { box-shadow: inset 3px 0 0 var(--rg); }
      #mob-page-backbar[data-panel="protocols"] .mob-page-title { color: var(--rg); }
      #mob-page-backbar[data-panel="conversations"] { box-shadow: inset 3px 0 0 var(--brand); }
      #mob-page-backbar[data-panel="conversations"] .mob-page-title { color: var(--brand); }
      #mob-page-backbar[data-panel="explore"]   { box-shadow: inset 3px 0 0 var(--brand); }
      #mob-page-backbar[data-panel="explore"]   .mob-page-title { color: var(--brand); }
      .ai-disclaimer { display: flex; align-items: center; justify-content: center; text-align: center; position: fixed; left: 0; right: 0; bottom: var(--mob-tabbar-h); height: var(--mob-disc-h); margin: 0; max-width: none; padding: 4px 18px; background: var(--bg); z-index: 90; font-size: 10.5px; line-height: 1.3; color: var(--text2); }
      .app-footer { display: none !important; }
      .thread-title-bar { display: none !important; }

      /* Chat container: full-width, pad for fixed bottom chrome */
      .chat-container { min-width: 0; padding: 0 12px calc(var(--mob-tabbar-h) + var(--mob-disc-h) + 130px); }
      .chat-window { -webkit-overflow-scrolling: touch; overflow-y: auto; }
      .chat-window-wrap { overflow: visible; }
      .message { max-width: none; width: 100%; }

      /* Empty state: don't let content hide behind fixed chrome */
      .chat-empty-state { padding-top: calc(env(safe-area-inset-top) + 60px); padding-bottom: calc(80px + env(safe-area-inset-bottom)); padding-left: 24px; padding-right: 24px; }
      .empty-welcome-heading { font-size: 28px; }

      /* Header: show mobile buttons */
      .mob-ham-btn { display: flex; align-items: center; justify-content: center; background: none; border: none; color: white; cursor: pointer; padding: 10px; border-radius: 8px; transition: background 0.12s; flex-shrink: 0; }
      .sb-footer { display: block; }
      .mob-ham-btn:hover { background: rgba(255,255,255,0.1); }

      /* Mobile header: keep it a single clean row (tagline + wrapping caused overflow) */
      .header-logo { width: 54px; height: 54px; border-width: 2.5px; }
      .header-brand-name { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .header-tagline { display: none; }
      .header-title-wrap { min-width: 0; gap: 0; overflow: hidden; }
      header .header-left { justify-content: flex-start; min-width: 0; }
      .prepare-btn { flex-shrink: 0; }

      /* Fill the iOS home-indicator safe area so no white strip shows below the tab bar */
      body::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: env(safe-area-inset-bottom); background: var(--brand); z-index: 99; pointer-events: none; }

      /* Left sidebar: transform-based slide-in drawer */
      .left-sidebar { display: flex !important; transform: translateX(-100%); position: fixed; z-index: 200; top: 0; left: 0; bottom: 0; width: 280px !important; max-width: 85vw !important; padding-top: env(safe-area-inset-top); transition: transform 0.25s ease; border-right: none; overflow-y: auto !important; overflow-x: hidden; }
      .left-sidebar.mob-open { transform: translateX(0); }
      .left-sidebar.expanded { width: 280px !important; max-width: 85vw !important; box-shadow: none; }
      .left-sidebar.mob-open .sb-history-section { flex: 0 0 auto !important; max-height: 34dvh; overflow-y: auto; }
      .left-sidebar.mob-open .sb-spacer { flex: 1 !important; min-height: 0; }
      .left-sidebar.mob-open .sb-feedback-link { display: flex !important; }
      .left-sidebar.mob-open .sb-item-label { display: block; }
      .sb-toggle { display: none !important; }
      .mob-drawer-backdrop { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 280px; background: rgba(0,0,0,0.5); z-index: 199; opacity: 0; transition: opacity 0.25s ease; pointer-events: auto; }
      .mob-drawer-backdrop.visible { display: block; }
      .mob-drawer-backdrop.faded { opacity: 1; }
      .sidebar-overlay { display: none !important; }

      /* Input: fixed just above health bar */
      .input-area { position: fixed; bottom: calc(var(--mob-tabbar-h) + var(--mob-disc-h)); left: 0; right: 0; max-width: none; margin: 0; padding: 8px 12px; background: var(--bg); border-top: none; z-index: 90; box-sizing: border-box; }

      /* Health bar */
      .mobile-tab-bar { display: flex; background: var(--brand); border-top: 1px solid rgba(255,255,255,0.1); position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; height: var(--mob-tabbar-h); padding-bottom: 5px; justify-content: space-around; align-items: flex-end; }
      .mobile-tab-btn { background: none; border: none; color: white; cursor: pointer; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; font-family: 'Inter',inherit; transition: color 0.15s; padding: 0; height: auto; }
      .mobile-tab-btn svg { width: 23px; height: 23px; }
      .mobile-tab-btn.active { color: #4DA8BB; }
      .mobile-tab-btn svg { display: block; }
      .mobile-tab-lbl { display: block; font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 0.2px; }

      /* ── Mobile panel readability ── */

      /* Hide per-panel header on mobile (the back-bar provides the title) */
      .panel-close-btn { display: none !important; }
      .panel-header { display: none !important; }

      /* 2. Tab rows — horizontal scroll, no wrap, larger tabs */
      .rg-tab-row { flex-wrap: nowrap !important; overflow-x: hidden; gap: 0; padding-bottom: 0; }
      .rg-tab-btn { font-size: 0.72rem !important; padding: 8px 4px !important; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; flex: 1; }
      .mkr-type-btn { font-size: 0.78rem !important; padding: 7px 10px !important; }
      .view-btn { font-size: 0.72rem !important; padding: 5px 10px !important; }

      /* 3. Pill view-toggle buttons on mobile */
      .view-toggle-btns { margin-bottom: 10px; }
      .view-btn { font-size: 0.875rem !important; padding: 10px 18px !important; min-height: 44px; }

      /* 4. Table headers */
      .mkr-th { font-size: 0.85rem !important; padding: 12px 8px !important; }

      /* 5. Table rows */
      .mkr-table { font-size: 1rem; }
      .mkr-row td { padding: 14px 8px !important; font-size: 1rem; }
      .mkr-td-date { font-size: 0.85rem !important; }
      .mkr-theory-name { font-size: 1rem !important; }
      .mkr-theory-row { padding: 12px 4px !important; min-height: 48px; }
      .mkr-theory-row-name { font-size: 1rem !important; }
      .mkr-theory-row-result { font-size: 0.9rem !important; }

      /* 6. Theory cards */
      .theory-card { padding: 16px !important; margin-bottom: 12px !important; }
      .theory-card-title { font-size: 1.05rem !important; }
      .theory-card-synthesis { font-size: 0.95rem !important; }
      .theory-card-meta { font-size: 0.78rem !important; }

      /* 7. Action items */

      /* 8. Symptom items — generic list rows inside synced panels */

      /* 9. Learn panel */
      .learn-sources-text { font-size: 0.95rem !important; line-height: 1.65; }
      .learn-tab-pane { padding: 14px 0 40px; }

      /* 10. General: interactive elements in panels get min 44px tap target */
      .right-panel button, .right-panel [role="button"] { min-height: 44px; }
    }

    /* ── Print ── */
    @media print {
      body > *:not(#print-area) { display: none !important; }

      #print-area {
        display: block !important;
        position: static !important;
        font-family: Georgia, serif;
        font-size: 13px;
        line-height: 1.75;
        color: #1A2332;
        max-width: 720px;
        margin: 0 auto;
        padding: 40px 48px 60px;
      }

      #print-area h1 {
        font-size: 1.3rem;
        font-weight: 700;
        color: #1B3A5C;
        border-bottom: 3px solid #4DA8BB;
        padding-bottom: 8px;
        margin: 0 0 8px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
      #print-area h2 {
        font-size: 0.78rem;
        font-weight: 700;
        color: #1B3A5C;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 1px solid #dde3ea;
        padding-bottom: 4px;
        margin: 28px 0 10px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
      #print-area h3 {
        font-size: 0.95rem;
        font-weight: 700;
        color: #1B3A5C;
        margin: 18px 0 7px;
      }
      #print-area p { margin: 8px 0; }
      #print-area ul, #print-area ol { padding-left: 22px; margin: 8px 0 12px; }
      #print-area li { margin-bottom: 5px; line-height: 1.6; }
      #print-area strong { color: #1B3A5C; }
      #print-area hr { border: none; border-top: 1px solid #dde3ea; margin: 24px 0; }

      #print-area blockquote {
        background: #f0f7fa !important;
        border-left: 4px solid #4DA8BB !important;
        margin: 16px 0;
        padding: 12px 18px;
        border-radius: 0 6px 6px 0;
        font-style: normal;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      #print-area table {
        width: 100%;
        border-collapse: collapse;
        margin: 14px 0 20px;
        font-size: 12px;
        border: 1px solid #dde3ea;
        page-break-inside: avoid;
      }
      #print-area thead tr {
        background: #1B3A5C !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
      #print-area thead th {
        padding: 8px 12px;
        text-align: left;
        font-weight: 600;
        font-size: 0.72rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        border: none;
        color: white !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
      #print-area tbody tr:nth-child(even) {
        background: #f7f9fc !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
      #print-area tbody tr:nth-child(odd) {
        background: #ffffff;
      }
      #print-area tbody td {
        padding: 7px 12px;
        border-bottom: 1px solid #eef0f3;
        vertical-align: top;
        color: #1A2332;
      }
      #print-area tbody tr:last-child td { border-bottom: none; }
      #print-area tbody td strong { color: var(--gold) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    }
    /* ── FIX 4: Evidence as plain text lines ── */
    .ta-ask-link { background: none; border: none; color: var(--teal); font-size: 13px; cursor: pointer; padding: 0; font-family: inherit; white-space: nowrap; flex-shrink: 0; line-height: 1.5; }
    .ta-ask-link:hover { text-decoration: underline; }
    .ta-action-item { display: none; }

    /* ── FIX 8: Border-radius audit — structural elements ── */
    .theory-new-btn, .theory-search-input, .history-search-input, .bm-panel,
    .bm-view-btn, .bm-reset-btn, .bm-done-btn, .report-dialog,
    .report-dialog-header, .report-thread-list, .report-specialist-select, .report-custom-input,
    .modal, .dna-upload-modal, .archive-load-btn, .article-view-scroll,
    .article-back-btn, .marker-card, .tv-thread-card, .tv-action-card,
    .tv-confidence, .theory-update-banner, .theory-view-bar-btn, .lab-viewer-btn,
    .thread-name-display, .thread-name-input, .plus-popup, .dna-status,
    .dismissed-card { border-radius: 0; }

    /* ── FIX 10: Hamburger menu ── */
    .ham-history-scroll { overflow-y: auto; overflow-x: hidden; max-height: 40dvh; }
    .ham-history-scroll::-webkit-scrollbar { width: 3px; }
    .ham-history-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }
    .ham-history-item { padding: 9px 20px; cursor: pointer; font-size: 0.82rem; color: rgba(255,255,255,0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid transparent; transition: background 0.12s; }
    .ham-history-item:hover { background: rgba(255,255,255,0.06); color: white; }
    .ham-history-item.active { border-left-color: var(--teal); color: white; background: rgba(77,168,187,0.1); }
    .ham-history-empty { padding: 10px 20px; font-size: 0.78rem; color: rgba(255,255,255,0.32); font-style: italic; }
    .ham-history-item { position: relative; display: flex; align-items: center; padding: 9px 16px; font-size: 0.82rem; color: rgba(255,255,255,0.78); cursor: pointer; transition: background 0.12s; border-radius: 6px; margin: 0 8px; gap: 6px; }
    .ham-history-item:hover { background: rgba(255,255,255,0.1); }
    .ham-history-item.active { background: rgba(255,255,255,0.14); color: white; }
    .ham-history-item-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ham-item-menu-btn { flex-shrink: 0; background: none; border: none; color: rgba(255,255,255,0); font-size: 1rem; cursor: pointer; padding: 2px 4px; border-radius: 4px; line-height: 1; transition: color 0.12s, background 0.12s; font-family: inherit; }
    .ham-history-item:hover .ham-item-menu-btn { color: rgba(255,255,255,0.55); }
    .ham-item-menu-btn:hover { color: white !important; background: rgba(255,255,255,0.12); }
    .ham-global-dd { display: none; position: fixed; background: #FAFAF9; border: 1px solid #e2e8f0; border-radius: 8px; z-index: 9999; min-width: 160px; box-shadow: 0 4px 16px rgba(0,0,0,0.13); overflow: visible; }
    .ham-global-dd.open { display: block; }
    .ham-item-option { padding: 9px 14px; font-size: 0.82rem; color: #1B3A5C; cursor: pointer; transition: background 0.1s; white-space: nowrap; font-family: 'Inter',sans-serif; }
    .ham-item-option:hover { background: #f4f7fb; }
    .ham-item-option.danger { color: #c0392b; }
    .ham-item-confirm { padding: 10px 14px; font-size: 0.8rem; color: #3a4a5c; display: flex; flex-direction: column; gap: 7px; }
    .ham-item-confirm-actions { display: flex; gap: 10px; }
    .ham-item-confirm-yes { background: none; border: none; color: #c0392b; font-size: 0.8rem; font-weight: 600; cursor: pointer; padding: 0; font-family: inherit; }
    .ham-item-confirm-yes:hover { text-decoration: underline; }

    /* ── Sidebar rail placeholder (holds 52px in flex flow always) ── */
    .sb-rail-placeholder { width: 52px; flex-shrink: 0; }
    /* ── Left Sidebar (fixed overlay drawer) ── */
    .left-sidebar { position: fixed; top: 56px; bottom: 0; left: 0; width: 52px; background: var(--brand); display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,0.12); overflow: hidden; z-index: 150; padding-top: 6px; transition: width 0.2s ease, box-shadow 0.2s ease, background 0.12s; }
    .left-sidebar.expanded { width: 240px; box-shadow: 4px 0 12px rgba(0,0,0,0.15); }
    /* Collapsed rail: whole surface is clickable — signal it visually */
    .left-sidebar:not(.expanded) { cursor: pointer; }
    .left-sidebar:not(.expanded):hover { background: #1e4168; }
    .sb-toggle { display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; border: none; background: none; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; transition: background 0.12s; padding: 0; margin-bottom: 4px; }
    .sb-toggle:hover { background: rgba(255,255,255,0.1); }
    .left-sidebar.expanded .sb-toggle { justify-content: flex-end; padding: 0 12px; }
    .sb-toggle svg { color: #4DA8BB; transition: transform 0.22s cubic-bezier(0.4,0,0.2,1); transform: rotate(180deg); flex-shrink: 0; }
    .left-sidebar.expanded .sb-toggle svg { transform: rotate(0deg); }
    .sb-new-chat { display: flex; align-items: center; gap: 11px; padding: 9px 0; cursor: pointer; margin: 1px 4px; border-radius: 8px; transition: background 0.12s; flex-shrink: 0; justify-content: center; }
    .left-sidebar.expanded .sb-new-chat { padding: 9px 13px; margin: 0 8px 2px; justify-content: flex-start; }
    .sb-new-chat:hover { background: rgba(255,255,255,0.1); }
    .sb-new-icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; color: white; font-size: 1.2rem; font-weight: 300; line-height: 1; }
    .sb-new-label { font-size: 0.87rem; font-weight: 500; color: rgba(255,255,255,0.82); white-space: nowrap; display: none; }
    .left-sidebar.expanded .sb-new-label { display: block; }
    .sb-nav-item { display: flex; align-items: center; gap: 11px; padding: 12px 0; cursor: pointer; margin: 2px 4px; border-radius: 8px; transition: background 0.12s; flex-shrink: 0; justify-content: center; }
    .left-sidebar.expanded .sb-nav-item { padding: 9px 13px; margin: 1px 8px; justify-content: flex-start; }
    .sb-nav-item:hover:not(.sb-disabled) { background: rgba(255,255,255,0.08); }
    .sb-nav-item.sb-disabled { opacity: 0.4; cursor: default; }
    .sb-nav-icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; color: white; }
    .sb-item-label { font-size: 0.85rem; color: rgba(255,255,255,0.82); white-space: nowrap; overflow: hidden; display: none; }
    .left-sidebar.expanded .sb-item-label { display: block; }
    .sb-history-section { display: flex; flex-direction: column; overflow: hidden; flex: 0; min-height: 44px; margin: 1px 0; }
    .left-sidebar.expanded:not(.mob-open) .sb-history-section { flex: 1; }
    .sb-history-toggle { display: flex; align-items: center; gap: 11px; padding: 9px 0; cursor: pointer; margin: 0 4px; border-radius: 8px; transition: background 0.12s; flex-shrink: 0; justify-content: center; }
    .left-sidebar.expanded .sb-history-toggle { padding: 9px 13px; margin: 0 8px; justify-content: flex-start; }
    .sb-history-toggle:hover { background: rgba(255,255,255,0.08); }
    .sb-chevron { margin-left: auto; flex-shrink: 0; transition: transform 0.2s; color: rgba(255,255,255,0.4); display: none; }
    .left-sidebar.expanded .sb-chevron { display: block; }
    .sb-history-open .sb-chevron { transform: rotate(180deg); }
    .sb-history-collapse { overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; padding-bottom: 4px; }
    .sb-history-collapse::-webkit-scrollbar { width: 3px; }
    .sb-history-collapse::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }
    .sb-spacer { flex: 1; min-height: 8px; }
    .sb-footer { display: none; flex-shrink: 0; padding: 12px 20px 16px; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 4px; }
    .sb-footer-disclaimer { font-size: 10.5px; color: rgba(255,255,255,0.4); line-height: 1.5; margin-bottom: 10px; }
    .sb-footer-links { display: flex; gap: 12px; flex-wrap: wrap; }
    .sb-footer-link { font-size: 11px; color: rgba(255,255,255,0.5); background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; transition: color 0.13s; }
    .sb-footer-link:hover { color: white; }
    .sb-footer-sep { font-size: 11px; color: rgba(255,255,255,0.2); }
    a.sb-feedback-link { text-decoration: none; color: inherit; display: flex; }
    .sb-profile-box { display: flex; align-items: center; gap: 11px; padding: 9px 0; margin: 8px 4px; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; flex-shrink: 0; justify-content: center; transition: padding 0.22s, margin 0.22s, background 0.14s; }
    .left-sidebar.expanded .sb-profile-box { padding: 11px 13px; margin: 8px; justify-content: flex-start; }
    .sb-profile-box:hover { background: rgba(255,255,255,0.11); }
    .sb-profile-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; color: rgba(255,255,255,0.55); }
    .sb-profile-text { overflow: hidden; min-width: 0; display: none; flex: 1; }
    .left-sidebar.expanded .sb-profile-text { display: block; }
    .sb-profile-label { font-size: 0.85rem; color: rgba(255,255,255,0.7); white-space: nowrap; display: block; }
    .sb-profile-chevron { display: none; color: rgba(255,255,255,0.38); flex-shrink: 0; line-height: 1; font-size: 0.7rem; }
    .left-sidebar.expanded .sb-profile-chevron { display: block; }
    @media (max-width: 767px) { .sb-rail-placeholder { display: none !important; } }
    .ham-item-confirm-cancel { background: none; border: none; color: #8a9bac; font-size: 0.8rem; cursor: pointer; padding: 0; font-family: inherit; }
    .ham-item-confirm-cancel:hover { color: #1B3A5C; }
    .ham-group-submenu { border-top: 1px solid #e2e8f0; }
    .ham-group-option { padding: 8px 14px 8px 22px; font-size: 0.8rem; color: #4DA8BB; cursor: pointer; white-space: nowrap; font-family: 'Inter',sans-serif; transition: background 0.1s; }
    .ham-group-option:hover { background: #f4f7fb; }
    .ham-group-new { padding: 8px 14px 8px 22px; font-size: 0.8rem; color: #1B3A5C; cursor: pointer; white-space: nowrap; font-family: 'Inter',sans-serif; font-weight: 500; transition: background 0.1s; }
    .ham-group-new:hover { background: #f4f7fb; }
    .ta-footer-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 2px; gap: 8px; }
    .ta-next-steps { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bg2); }
    .ta-next-steps-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text2); margin-bottom: 6px; }
    .ta-action-item { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); }
    .ta-action-item:last-child { border-bottom: none; }
    .ta-action-check { flex-shrink: 0; margin-top: 3px; accent-color: var(--teal); cursor: pointer; }
    .ta-action-text { font-size: 12px; color: var(--text1); line-height: 1.45; flex: 1; transition: color 0.12s; }
    .ta-action-item.completed .ta-action-text { text-decoration: line-through; color: var(--text2); opacity: 0.6; }
    .ta-dismiss-link { background: none; border: none; cursor: pointer; color: var(--text2); font-size: 0.72rem; font-family: 'Inter',inherit; padding: 0; opacity: 0.45; transition: opacity 0.15s, color 0.15s; }
    .ta-dismiss-link:hover { opacity: 1; color: #dc2626; }
    /* ── Theory card chevron ── */
    .theory-card-report-row { display: none; }
    .theory-card-print-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; color: var(--text2); padding: 5px 12px; font-size: 0.78rem; font-family: inherit; font-weight: 500; transition: border-color 0.15s, color 0.15s, background 0.15s; }
    .theory-card-print-btn:hover { border-color: var(--teal); color: var(--teal); background: rgba(77,168,187,0.05); }
    .theory-card-chevron { background: none; border: none; color: #4DA8BB; cursor: pointer; flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; transition: transform 0.22s, color 0.15s; padding: 0; border-radius: 4px; }
    .theory-card-chevron:hover { color: #3A8FA0; }
    .theory-card.expanded .theory-card-chevron { transform: rotate(180deg); }
    /* ── Question as teal link ── */
    .ta-ask-link { display: block; background: none; border: none; color: var(--teal); font-size: 13px; cursor: pointer; padding: 0; font-family: inherit; line-height: 1.5; margin-bottom: 6px; text-align: left; width: 100%; white-space: normal; }
    .ta-ask-link:hover { text-decoration: underline; }
    .ta-ask-link:last-child { margin-bottom: 0; }
    .ta-questions { margin-bottom: 8px; }
    .ta-questions-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text2); margin-bottom: 6px; opacity: 0.7; }
    /* ── Synthesis inside accordion ── */
    .ta-synthesis { font-size: 13px; color: var(--text2); line-height: 1.5; margin-bottom: 10px; }
    .ta-evidence { margin-bottom: 10px; }
    .ta-evidence-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text2); margin-bottom: 6px; opacity: 0.7; }
    .ta-evidence-list { list-style: none; padding: 0; margin: 0; }
    .ta-evidence-item { font-size: 12px; color: var(--text1); line-height: 1.5; padding: 3px 0 3px 14px; position: relative; }
    .ta-evidence-item::before { content: '·'; position: absolute; left: 4px; color: var(--teal); font-weight: 700; }
    .ta-confidence { font-size: 11px; color: var(--text2); font-style: italic; line-height: 1.5; background: var(--bg2); border-radius: 6px; padding: 8px 12px; margin-top: 10px; }
    .ta-updated { font-size: 10px; color: var(--text2); opacity: 0.6; margin-right: auto; }

.gene-theory-row {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.8rem;
}
.gene-theory-row:hover {
  background: var(--hover);
}

.gene-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.gene-row-desc {
  font-size: 0.72rem;
  color: var(--text2);
  line-height: 1.4;
  white-space: normal;
}

/* Genetics sortable table */
.gen-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}
.gen-table td,
.gen-table th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gen-table .gen-td-gene {
  white-space: normal;
  word-break: break-word;
}
.gen-th {
  text-align: left;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text2);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.gen-th:hover { color: var(--teal); }
.gen-th:hover .gen-sort-icon,
.gen-th[data-active] .gen-sort-icon { opacity: 1; color: var(--teal); }
.gen-sort-icon {
  display: inline-block;
  margin-left: 3px;
  opacity: 0.5;
  font-size: 9px;
}
.gen-th-gene     { width: 22%; }
.gen-th-genotype { width: 56px; }
.gen-th-conf     { width: 18%; }
.gen-th-impact   { width: auto; }
.gen-row {
  cursor: pointer;
}
.gen-row td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text1);
  line-height: 1.4;
}
.gen-row:last-child td { border-bottom: none; }
.gen-row:hover td { background: var(--bg2); }
.gen-row:hover .gen-td-gene { color: var(--teal); }
.gen-td-gene {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}
.gen-td-genotype {
  width: 56px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text2);
}
.gen-td-impact {
  font-size: 11.5px;
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
}
.gen-theory-impact {
  font-size: 11px;
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Genetics Full List category blocks */
.gene-category-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}
.gene-category-hdr {
  font-size: 0.63rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--text2) !important;
  opacity: 1 !important;
  padding: 7px 10px 6px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg2) !important;
  border-top: none !important;
}
.gen-cat-th {
  font-size: 9px !important;
  padding: 4px 8px !important;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  cursor: default;
}
.gen-row td {
  padding: 7px 10px !important;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: top !important;
}
.gen-row:last-child td { border-bottom: none !important; }

/* Genetics By Theory view rows */
.gen-theory-group {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
}
.gene-theory-row {
  border-bottom: 1px solid var(--border) !important;
  padding: 8px 10px !important;
}
.gene-theory-row:last-child { border-bottom: none !important; }
.mkr-theory-hdr {
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg2) !important;
  padding: 7px 10px 6px !important;
  margin-bottom: 0 !important;
}
.theory-col-hdr {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  font-size: 9px;
  padding: 4px 10px;
}
.gen-impact-cell {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11px;
  color: var(--text2);
  line-height: 1.4;
  word-break: break-word;
  max-width: 100%;
}

.ma-trigger-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  padding: 8px 16px;
  background: var(--teal);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: opacity 0.15s;
}
.ma-trigger-chip:hover {
  opacity: 0.85;
}


/* ── Prepare button ── */
.prepare-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #4DA8BB;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.prepare-btn:hover {
  background: #3d96a8;
}

.prepare-btn svg {
  flex-shrink: 0;
}

/* ── Home Panel ── */
.home-scroll {
  padding: 16px 14px;
  overflow-y: auto;
  flex: 1;
}

.home-greeting {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.3rem;
  color: var(--brand);
  margin-bottom: 4px;
}

.home-subheading {
  font-size: 0.8rem;
  color: var(--text2);
  margin-bottom: 20px;
}

.home-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.home-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.home-card-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 20px;
  margin-bottom: 6px;
}

.home-card-tag.tag-tests     { background: var(--mkr-tint); color: var(--mkr); }
.home-card-tag.tag-symptoms  { background: var(--sx-tint);  color: var(--sx); }
.home-card-tag.tag-regimen   { background: var(--rg-tint);  color: var(--rg); }
.home-card-tag.tag-theories  { background: #e7eef5; color: var(--brand); }
.home-card-tag.tag-action    { background: #e7eef5; color: var(--brand); }

.home-card-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text1);
  margin-bottom: 3px;
}

.home-card-meta {
  font-size: 0.76rem;
  color: var(--text2);
}

.home-tracking-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text2);
  margin: 20px 0 10px;
}

.home-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.76rem;
  color: var(--text2);
  cursor: pointer;
  transition: border-color 0.15s;
}

.home-chip:hover {
  border-color: var(--teal);
  color: var(--teal);
}

      @media (max-width: 768px) {
        html, body { height: 100%; overflow: hidden; position: fixed; width: 100%; }
      }

@media (max-width: 900px) {
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    gap: 8px;
  }

  .header-left {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .prepare-btn {
    padding: 10px 11px;
    font-size: 0.75rem;
    flex-shrink: 0;
  }

  .mob-profile-dot {
    flex-shrink: 0;
  }

  .mob-ham-btn {
    flex-shrink: 0;
  }
}

.ta-reasoning { margin: 10px 0 14px; }
.ta-reasoning-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #6b7a8a; margin-bottom: 6px; }
.ta-mc-item { padding: 8px 0; border-top: 1px solid #eef2f5; }
.ta-mc-item:first-child { border-top: none; }
.ta-mc-claim { font-size: 14px; line-height: 1.5; color: #1B3A5C; }
.ta-mc-pill { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 7px; margin-left: 6px; border-radius: 10px; background: #eef2f5; color: #4a5a6a; vertical-align: middle; letter-spacing: 0.02em; }
.ta-mc-pill[data-quality="well_established"] { background: #d8efe1; color: #1b5e3a; }
.ta-mc-pill[data-quality="user_data_only"] { background: #e0e8f0; color: #1B3A5C; }
.ta-mc-pill[data-quality="frontier"], .ta-mc-pill[data-quality="emerging"] { background: #fbeed2; color: #7a5a1a; }
.ta-mc-pill[data-quality="patient_reported_pattern"] { background: #f0e0e8; color: #6a3a5a; }
.ta-mc-anchors, .ta-mc-sources { font-size: 12px; color: #6b7a8a; margin-top: 4px; }
.ta-mc-sources a { color: #2a7a7a; text-decoration: none; }
.ta-mc-sources a:hover { text-decoration: underline; }

.panel-texture { margin: 10px 0 12px; padding: 8px 0 0; border-top: 1px solid #eef2f5; }
.panel-texture-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #6b7a8a; margin-bottom: 6px; }
.panel-texture-row { font-size: 13px; line-height: 1.5; color: #1B3A5C; margin-bottom: 3px; }
.panel-texture-key { font-weight: 600; color: #4a5a6a; }
.panel-texture-val { color: #1B3A5C; }

/* ── Phase 3 session sidebar ─────────────────────────────── */
.sess-sub-section { margin-top: 4px; }

.sess-sub-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 4px;
  user-select: none;
}
.sess-sub-header--collapsible { cursor: pointer; }
.sess-sub-header--collapsible:hover .sess-sub-label { color: var(--brand); }

.sess-sub-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #9FB3C8; }
.sess-sub-label--muted { color: #9FB3C8; }
.sess-active-count, .sess-archive-count { font-size: 11px; color: #9FB3C8; }
.sess-chevron { margin-left: auto; transition: transform .2s; flex-shrink: 0; }

.sess-active-item,
.sess-archive-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 14px;
  cursor: pointer;
  border-radius: 6px;
  margin: 1px 6px;
  transition: background .15s;
  position: relative;
  color: #E6EEF3;
}
.sess-active-item:hover  { background: var(--panel-hover, rgba(255,255,255,.06)); }
.sess-archive-item:hover { background: var(--panel-hover, rgba(255,255,255,.04)); }

.sess-item--current {
  border-left: 3px solid var(--teal);
  padding-left: 11px;
  background: rgba(20,184,166,.15);
  color: #fff;
}

.sess-item-name {
  flex: 1;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sess-item-name--muted { color: var(--text-secondary, #888); font-size: 12px; }

.sess-item-age { font-size: 11px; color: #9FB3C8; flex-shrink: 0; }

.sess-item-delete {
  background: none;
  border: none;
  color: var(--text-secondary, #888);
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
  flex-shrink: 0;
}
.sess-active-item:hover .sess-item-delete,
.sess-archive-item:hover .sess-item-delete { opacity: 1; }
.sess-item-delete:hover { color: #ef4444; background: rgba(239,68,68,.1); }
/* ──────────────────────────────────────────────────────────── */

/* ── Phase 3: session limit modal ────────────────────────── */
.session-limit-desc { font-size: 14px; color: var(--text-secondary, #aaa); margin-bottom: 16px; line-height: 1.5; }

.sess-limit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border, rgba(255,255,255,.08));
}
.sess-limit-row:last-child { border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); }
.sess-limit-row-info { flex: 1; min-width: 0; }
.sess-limit-name { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sess-limit-age  { display: block; font-size: 12px; color: var(--text-secondary, #888); margin-top: 2px; }
.sess-limit-row-btns { display: flex; gap: 8px; flex-shrink: 0; }
/* ──────────────────────────────────────────────────────────── */

/* ── Phase 3: theory card session line ───────────────────── */
.theory-sess-line {
  font-size: 11px;
  color: var(--text-secondary, #888);
  margin-top: 3px;
  line-height: 1.4;
}
.theory-sess-link {
  color: var(--teal);
  cursor: pointer;
  text-decoration: none;
  opacity: .8;
}
.theory-sess-link:hover { opacity: 1; text-decoration: underline; }
.theory-sess-sep { color: var(--text-secondary, #888); }
/* ──────────────────────────────────────────────────────────── */

/* ── Phase 3: archived session viewer modal ──────────────── */
.archive-viewer-modal-inner { max-width: 560px; max-height: 80dvh; display: flex; flex-direction: column; }
.archive-viewer-modal-inner .modal-body { overflow-y: auto; flex: 1; }

.wv-meta { font-size: 12px; color: var(--text-secondary, #888); margin-bottom: 14px; }

.wv-summary { font-size: 14px; line-height: 1.7; color: var(--text-primary, #e8e8e8); }
.wv-summary h2, .wv-summary h3 { font-size: 15px; font-weight: 600; margin: 16px 0 6px; color: var(--teal); }
.wv-summary p { margin: 0 0 12px; }

.wv-theories-block { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border, rgba(255,255,255,.08)); }
.wv-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary, #888); margin-bottom: 8px; }
.wv-theory-links { display: flex; flex-wrap: wrap; gap: 8px; }
.wv-theory-link {
  font-size: 13px;
  color: var(--teal);
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid var(--teal);
  border-radius: 20px;
  opacity: .8;
  transition: opacity .15s, background .15s;
}
.wv-theory-link:hover { opacity: 1; background: rgba(20,184,166,.1); }
/* ──────────────────────────────────────────────────────────── */

/* ── Profile dropdown ── */
.profile-dropdown {
  position: fixed;
  bottom: 64px;
  left: 8px;
  width: 240px;
  background: var(--surface, #fff);
  color: var(--text, #1A2332);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 6px 0;
  z-index: 1000;
  font-size: 0.92rem;
}
.profile-dropdown.visible { display: block !important; }
.pd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
}
.pd-row:hover { background: rgba(0,0,0,0.04); }
.pd-row-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
}
.pd-row-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-active-badge {
  font-size: 0.7rem;
  color: var(--text2, #6b7a8a);
  font-style: italic;
}
.pd-divider {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 6px 0;
}
.pd-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text, #1A2332);
}
.pd-action:hover { background: rgba(0,0,0,0.04); }
.pd-action-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text2, #6b7a8a);
}

/* ============================================================
   EXPLORE PANEL — Investigation Board aesthetic
   Active surface treatment (shared language target: Theories)
   Appended block — safe to iterate. Scoped to explore-* classes.
   ============================================================ */

/* Panel base: a deeper "working surface" built from the app's navy,
   so it reads as further into the same world, not a different app. */
#panel-explore {
  background: #0f2740;
}
#panel-explore .panel-header {
  color: #eaf2fa;
  background: #0c2036;
  border-bottom: 1px solid rgba(120, 170, 210, 0.18);
  letter-spacing: 0.04em;
}
#panel-explore .panel-close-btn {
  color: #c6dcf0;
}

.explore-scroll {
  padding: 0;
  background: #0f2740;
  min-height: 100%;
}

/* Region structure */
.explore-region {
  padding: 18px 18px 22px 18px;
}
#explore-active-region {
  background: linear-gradient(180deg, #12304f 0%, #0f2740 100%);
  border-bottom: 1px solid rgba(120, 170, 210, 0.16);
}
#explore-brainstorm-region {
  background: #0c2036;
}

/* Region headers — clearly headers, not body text */
.explore-region-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #c6dcf0;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(120, 170, 210, 0.14);
}
/* The Active Experiment header reads as the masthead — slightly brighter */
#explore-active-region .explore-region-header {
  color: #aecbe6;
}

/* Empty states — quiet, in-world */
.explore-empty {
  font-size: 13.5px;
  line-height: 1.5;
  color: #c6dcf0;
  margin: 0;
  max-width: 52ch;
}

/* ---- Active Experiment element cards: "lit" and present ---- */
.ae-card {
  background: #173a5e;
  border: 1px solid rgba(140, 190, 230, 0.22);
  border-left: 3px solid #4fb3a6;
  border-radius: 8px;
  padding: 13px 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}
.ae-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.ae-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #f0f6fc;
  line-height: 1.3;
}
.ae-card-duration {
  font-size: 11px;
  font-weight: 600;
  color: #6fd0c2;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ae-card-target {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.45;
  color: #b9d2e8;
}
.ae-card-target-lbl {
  color: #c6dcf0;
  font-weight: 600;
}

/* ---- Brainstorm cards: quieter, cooler, "being weighed" ---- */
.bs-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(120, 170, 210, 0.16);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 9px;
}
.bs-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.bs-card-title {
  font-size: 14.5px;
  font-weight: 600;
  color: #d6e6f5;
  line-height: 1.3;
}
.bs-card-line {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: #c6dcf0;
}

/* State badges on brainstorm cards — small, stamp-like */
.bs-card-state {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
}
.bs-state-proposed {
  color: #c6dcf0;
  background: rgba(120, 170, 210, 0.14);
}
.bs-state-weighing {
  color: #e3c98a;
  background: rgba(200, 165, 90, 0.16);
}
.bs-state-parked {
  color: #c6dcf0;
  background: rgba(140, 160, 180, 0.14);
}

/* Explore card actions */
.bs-card-actions, .ae-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 11px;
}
.bs-action, .ae-action {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(120, 170, 210, 0.22);
  background: transparent;
  color: #c6dcf0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bs-action:hover, .ae-action:hover {
  background: rgba(120, 170, 210, 0.12);
}
.bs-action-commit {
  color: #6fd0c2;
  border-color: rgba(79, 179, 166, 0.4);
}
.bs-action-commit:hover {
  background: rgba(79, 179, 166, 0.16);
}
.bs-action-dismiss {
  color: #c6dcf0;
}
.ae-action-conclude {
  color: #6fd0c2;
  border-color: rgba(79, 179, 166, 0.4);
}
.ae-action-conclude:hover {
  background: rgba(79, 179, 166, 0.16);
}

/* ============================================================
   RECORD SURFACE COLOR SYSTEM — category hues
   Appended block — additive, scoped by panel ID. Safe to iterate.
   Markers = steel blue · Symptoms = terracotta · Regimen = pine
   ============================================================ */
:root {
  --mkr: #3E78A8;  --mkr-tint: #ECF2F8;
  --sx:  #C2705A;  --sx-tint:  #F8EDE9;
  --rg:  #4A8C72;  --rg-tint:  #E6F1EC;
  --gold: #C9A84C;
}

/* ---- Markers = steel blue ---- */
#panel-myhealth .panel-header { color: var(--mkr); border-bottom-color: var(--mkr); }
#panel-myhealth .panel-close-btn { color: var(--text2); }
#panel-myhealth .mkr-type-btn:hover { color: var(--mkr); background: var(--mkr-tint); }
#panel-myhealth .mkr-type-btn.active { background: var(--mkr); border-bottom-color: var(--mkr); }
#panel-myhealth .mkr-th:hover,
#panel-myhealth .mkr-th:hover .mkr-sort-icon,
#panel-myhealth .mkr-th[data-active] .mkr-sort-icon { color: var(--mkr); }
#panel-myhealth .mkr-row:hover .mkr-td-name,
#panel-myhealth .mkr-theory-row:hover .mkr-theory-row-name,
#panel-myhealth .theory-clickable-hdr:hover .mkr-theory-name { color: var(--mkr); }

/* ---- Symptoms = terracotta ---- */
#panel-symptoms .panel-header { color: var(--sx); border-bottom-color: var(--sx); }
#panel-symptoms .panel-close-btn { color: var(--text2); }
#panel-symptoms .sx-row:hover,
#panel-symptoms .sx-theory-symptom:hover { background: var(--sx-tint); }
#panel-symptoms .sx-th:hover,
#panel-symptoms .sx-row:hover .sx-td-name,
#panel-symptoms .sx-theory-symptom:hover .sx-theory-sx-name,
#panel-symptoms .proc-row:hover .proc-row-name,
#panel-symptoms .fam-row:hover .fam-row-condition { color: var(--sx); }

/* ---- Regimen = pine green ---- */
#panel-protocols .panel-header { color: var(--rg); border-bottom-color: var(--rg); }
#panel-protocols .panel-close-btn { color: var(--text2); }
#panel-protocols .rg-tab-btn:hover { color: var(--rg); background: var(--rg-tint); }
#panel-protocols .rg-tab-btn.active { background: var(--rg); border-bottom-color: var(--rg); border-right-color: var(--rg); }
#panel-protocols .regimen-bullet-dot { background: var(--rg); }
#panel-protocols .regimen-bullet-list li:hover,
#panel-protocols .regimen-table tr.regimen-row:hover td,
#panel-protocols .rg-theory-item:hover,
#panel-protocols .regimen-collapsible-hdr:hover { background: var(--rg-tint); }
#panel-protocols .regimen-bullet-list li:hover .regimen-bullet-text,
#panel-protocols .regimen-table tr.regimen-row:hover .rt-name,
#panel-protocols .rg-theory-item:hover .rg-theory-item-name,
#panel-protocols .regimen-collapsible-hdr:hover,
#panel-protocols .theory-clickable-hdr:hover .rg-theory-name { color: var(--rg); }
#panel-protocols .regimen-collapsible:hover { border-color: var(--rg); }

#panel-symptoms .mkr-type-btn:hover { color: var(--sx); background: var(--sx-tint); }
#panel-symptoms .mkr-type-btn.active { background: var(--sx); border-bottom-color: var(--sx); }

/* ── Symptom body map: front-view silhouette model ── */
#bm-front-svg .body-silhouette { fill: #DCE1E9; stroke: #C3CAD6; stroke-width: 1.5; stroke-linejoin: round; pointer-events: none; }
#bm-front-svg .body-region { fill: transparent; stroke: none; cursor: pointer; transition: fill 0.14s; }
#bm-front-svg .body-region:hover { fill: rgba(77,168,187,0.22); stroke: none; }
#bm-front-svg .body-region.selected { fill: rgba(77,168,187,0.5); stroke: none; }

/* ════════════════════════════════════════════════════════════════
   COHESION PASS — Theories joins the investigation register
   Theories is the "why" to Action's "what"; they are siblings and
   must share one register. Values mirror #panel-explore exactly so
   the two surfaces are visually identical in chrome. Theory cards
   stay light — they read as lit content floating on the deep field.
   ════════════════════════════════════════════════════════════════ */
#panel-conversations {
  background: #0f2740;
}
#panel-conversations .panel-header {
  color: #eaf2fa;
  background: #0c2036;
  border-bottom: 1px solid rgba(120, 170, 210, 0.18);
  letter-spacing: 0.04em;
}
#panel-conversations .panel-close-btn {
  color: #c6dcf0;
}
/* Panel-level chrome that sits directly on the deep field → light it up */
#panel-conversations .understanding-scroll { background: transparent; }
#panel-conversations .theory-empty-msg { color: #c6dcf0; }
#panel-conversations .theory-section-label { color: #9db4cc; opacity: 1; }
#panel-conversations .theory-archive-link {
  color: #c6dcf0;
  border-top-color: rgba(120, 170, 210, 0.18);
}
#panel-conversations .theory-archive-link:hover { color: var(--teal); }
#panel-conversations .theory-search-input {
  background: #143049;
  border-color: rgba(120, 170, 210, 0.28);
  color: #eaf2fa;
}
#panel-conversations .theory-search-input:focus { border-color: var(--teal); }
#panel-conversations .theory-search-input::placeholder { color: #7d97b3; }


/* Salvaged from Learn: 'genes are not destiny' note, shown in the Genetics tab */
.gen-destiny-note {
  background: var(--mkr-tint);
  border-left: 3px solid var(--mkr);
  border-radius: 6px;
  padding: 11px 13px;
  margin: 0 0 14px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text1);
}
.gen-destiny-note strong { color: var(--mkr); }


/* ════════════════════════════════════════════════════════════════
   HOME SYNTHESIS — state-aware landing in the center column.
   Light register (the open thinking space). Read-only; every card
   links into the workspace panels that own the data.
   ════════════════════════════════════════════════════════════════ */
#home-synthesis { width: 100%; max-width: 560px; margin: 0 auto; }
.hs-wrap { display: flex; flex-direction: column; gap: 18px; text-align: left; padding: 8px 4px; }
.hs-eyebrow {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text2); opacity: 0.8;
}
.hs-orient {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.4rem; line-height: 1.35; color: var(--brand); margin-top: -8px;
}
.hs-section { display: flex; flex-direction: column; gap: 7px; }
.hs-label {
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text2); opacity: 0.65;
}
.hs-card {
  background: #FAFAF9; border: 1.5px solid var(--border); border-radius: 8px;
  padding: 12px 14px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.hs-card:hover { border-color: var(--teal); box-shadow: 0 2px 12px rgba(77,168,187,0.12); }
.hs-card:active { transform: scale(0.995); }
.hs-card-row { display: flex; align-items: center; gap: 10px; }
.hs-card-title { font-size: 0.9rem; font-weight: 600; color: var(--brand); flex: 1; min-width: 0; }
.hs-card-sub { font-size: 0.74rem; color: var(--text2); margin-top: 3px; }
.hs-card-active { border-left: 3px solid var(--teal); }
.hs-mkr-name { font-size: 0.86rem; font-weight: 500; color: var(--text1); flex: 1; min-width: 0; }
.hs-mkr-val { font-size: 0.82rem; color: var(--text2); white-space: nowrap; }
.hs-foot { font-size: 0.78rem; color: var(--text2); font-style: italic; padding-top: 2px; }