/* ──────────────────────────────────────────────────────────────
   Women in Food — voice agent
   Palette and type per "Women in Food brand and identity
   guidelines" (updated Sept 25). WIF colours sit inside the
   Newton highlight range: Sky Blue +2, Neon Lime -2 and
   Ultraviolet -2. Signal Orange is deliberately unused — it
   jarred against the teal, so lime carries the brand instead.
   ────────────────────────────────────────────────────────────── */

:root {
    /* WIF palette — brand guide p.06 */
    --wif-teal:   #136581;  /* Sky Blue +2   — dominant canvas  */
    --wif-lime:   #EDFFB2;  /* Neon Lime -2  — CTAs, headings   */
    --wif-violet: #D4C3F0;  /* Ultraviolet -2— silhouettes,     */
                            /*                 notices, caution */
    --wif-white:  #FFFFFF;

    /* Neon Lime -1, for hover only — Newton extended palette */
    --wif-lime-dark: #E0FF8E;

    /* Futura is the primary typeface; Aptos is the designated
       websafe fallback. Century Gothic stands in as the nearest
       geometric sans present on most machines. */
    --wif-display: 'Futura', 'Futura PT', 'Century Gothic', 'Aptos', system-ui, -apple-system, sans-serif;
    --wif-body:    'Aptos', 'Futura', 'Century Gothic', system-ui, -apple-system, sans-serif;
    --wif-mono:    'Aptos Mono', ui-monospace, 'Courier New', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }

html { background: var(--wif-teal); }

body {
    font-family: var(--wif-body);
    background: var(--wif-teal);
    display: grid;
    grid-template-columns: 400px 1fr;
    height: 100vh;
    max-width: 1400px;
}

.hidden { display: none !important; }

/* ── Loading overlay ── */
#page-loading {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--wif-teal);
    z-index: 200;
}
#page-loading span {
    color: rgba(255,255,255,0.72);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
}

/* ── Left panel ── */
.left-panel {
    background: var(--wif-teal);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 28px 28px;
    gap: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid rgba(237,255,178,0.20);
    min-width: 0;
}
.left-panel::-webkit-scrollbar { width: 4px; }
.left-panel::-webkit-scrollbar-track { background: transparent; }
.left-panel::-webkit-scrollbar-thumb { background: rgba(237,255,178,0.25); }
.left-panel::-webkit-scrollbar-thumb:hover { background: rgba(237,255,178,0.40); }

/* ── Newton | womeninfood lockup (brand guide p.09) ── */
.panel-header {
    display: flex;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
}
.brand-lockup {
    display: flex;
    align-items: center;
    gap: 12px;
}
.logo img {
    height: 20px;
    display: block;
}
.logo a:focus-visible { outline: 2px solid var(--wif-lime); outline-offset: 3px; }

.lockup-divider {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.45);
    flex-shrink: 0;
}

/* Wordmark set as type. Replace with the supplied WIF logo asset
   when it is available — this is a geometric stand-in, not the
   drawn mark. */
.wordmark {
    font-family: var(--wif-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.025em;
    color: var(--wif-white);
    white-space: nowrap;
    line-height: 1;
}
.wordmark--lime { color: var(--wif-lime); }

/* ── Form section (pre-call) ── */
.form-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.form-intro { padding-bottom: 4px; }

.strapline {
    font-family: var(--wif-display);
    font-size: 21px;
    font-weight: 700;
    color: var(--wif-lime);
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.form-subtitle {
    font-size: 13px;
    color: rgba(255,255,255,0.78);
    margin-top: 10px;
    line-height: 1.6;
}

/* ── Orb section (during call) ── */
.orb-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex: 1;
    justify-content: center;
}

.call-timer {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.06em;
    font-family: var(--wif-mono);
}

/* ── Orb — flat fills, no gradients or glows ── */
.orb-wrapper {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 4px 0;
}

.orb-ring {
    position: absolute;
    border-radius: 50%;
    background: var(--wif-lime);
    will-change: transform, opacity;
}
.orb-ring-3 { width: 200px; height: 200px; opacity: 0.10; }
.orb-ring-2 { width: 160px; height: 160px; opacity: 0.16; }
.orb-ring-1 { width: 128px; height: 128px; opacity: 0.26; }

.orb-core {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--wif-lime);
    position: relative;
    z-index: 4;
    will-change: transform;
}

#waveform-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    border-radius: 50%;
}

.orb-ripple {
    position: absolute;
    width: 90px; height: 90px;
    border-radius: 50%;
    border: 2px solid var(--wif-lime);
    pointer-events: none;
    z-index: 2;
    animation: ripple-out 0.9s ease-out forwards;
}
@keyframes ripple-out {
    0%   { transform: scale(1);   opacity: 0.75; }
    100% { transform: scale(2.6); opacity: 0;    }
}

.orb-wrapper.idle .orb-core    { animation: breathe 4s ease-in-out infinite; }
.orb-wrapper.idle .orb-ring-1  { animation: breathe 4s ease-in-out infinite 0.15s; }
.orb-wrapper.idle .orb-ring-2  { animation: breathe 4s ease-in-out infinite 0.3s; }
.orb-wrapper.idle .orb-ring-3  { animation: breathe 4s ease-in-out infinite 0.45s; }
@keyframes breathe {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.05); }
}

.orb-wrapper.connecting .orb-core   { animation: breathe 1.4s ease-in-out infinite; }
.orb-wrapper.connecting .orb-ring-1 { animation: breathe 1.4s ease-in-out infinite 0.15s; }
.orb-wrapper.connecting .orb-ring-2 { animation: breathe 1.4s ease-in-out infinite 0.3s; }
.orb-wrapper.connecting .orb-ring-3 { animation: breathe 1.4s ease-in-out infinite 0.45s; }

.orb-wrapper.listening .orb-core   { animation: listen 2.8s ease-in-out infinite; }
.orb-wrapper.listening .orb-ring-1 { animation: listen 2.8s ease-in-out infinite 0.12s; }
.orb-wrapper.listening .orb-ring-2 { animation: listen 2.8s ease-in-out infinite 0.24s; }
.orb-wrapper.listening .orb-ring-3 { animation: listen 2.8s ease-in-out infinite 0.36s; }
@keyframes listen {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.07); }
}

.orb-wrapper.thinking .orb-core   { animation: think 1.1s ease-in-out infinite; }
.orb-wrapper.thinking .orb-ring-1 { animation: think 1.1s ease-in-out infinite 0.18s; }
.orb-wrapper.thinking .orb-ring-2 { animation: think 1.1s ease-in-out infinite 0.36s; }
.orb-wrapper.thinking .orb-ring-3 { animation: think 1.1s ease-in-out infinite 0.54s; }
@keyframes think {
    0%,100% { transform: scale(1); }
    35%     { transform: scale(1.06); }
    65%     { transform: scale(0.97); }
}

.orb-wrapper.speaking .orb-core   { animation: speak 0.65s ease-in-out infinite; }
.orb-wrapper.speaking .orb-ring-1 { animation: speak 0.65s ease-in-out infinite 0.1s; }
.orb-wrapper.speaking .orb-ring-2 { animation: speak 0.65s ease-in-out infinite 0.2s; }
.orb-wrapper.speaking .orb-ring-3 { animation: speak 0.65s ease-in-out infinite 0.3s; }
@keyframes speak {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.12); }
}

.orb-wrapper.mic-active .orb-core,
.orb-wrapper.mic-active .orb-ring { animation: none; }

.status-label {
    font-size: 13px;
    color: rgba(255,255,255,0.82);
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.02em;
    min-height: 18px;
    transition: opacity 0.4s ease;
}

.controls {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Disclaimer ── */
.disclaimer {
    width: 100%;
    font-size: 11px;
    color: rgba(255,255,255,0.78);
    line-height: 1.6;
    border-top: 1px solid rgba(237,255,178,0.22);
    padding-top: 12px;
    margin-top: 4px;
}
.disclaimer-intro { margin-bottom: 6px; }
.disclaimer ul {
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.disclaimer li::marker { color: var(--wif-lime); }
.disclaimer strong { color: var(--wif-lime); font-weight: 700; }

/* Ultraviolet -2, not lime, so a problem still reads as different
   from the rest of the page now that lime carries the brand. */
.error-message {
    background: rgba(212,195,240,0.20);
    color: var(--wif-white);
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 3px solid var(--wif-violet);
    font-size: 12px;
    line-height: 1.5;
}

/* ── Buttons — 4px radius per Newton spec ── */
/* Lime is light, so the label must go dark to stay legible
   (teal on lime ≈ 6.1:1). */
.btn-start {
    width: 100%;
    padding: 15px;
    background: var(--wif-lime);
    color: var(--wif-teal);
    border: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--wif-display);
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.btn-start:hover:not(:disabled)  { background: var(--wif-lime-dark); }
.btn-start:active:not(:disabled) { transform: scale(0.98); }
.btn-start:focus-visible { outline: 2px solid var(--wif-lime); outline-offset: 2px; }
.btn-start:disabled {
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.35);
    cursor: not-allowed;
}

.btn-end {
    width: 100%;
    padding: 15px;
    background: transparent;
    color: var(--wif-lime);
    border: 1px solid rgba(237,255,178,0.45);
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--wif-display);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.btn-end:hover { background: rgba(237,255,178,0.10); border-color: var(--wif-lime); }
.btn-end:active { transform: scale(0.98); }
.btn-end:focus-visible { outline: 2px solid var(--wif-lime); outline-offset: 2px; }

/* ── Post-call panel ── */
.analysis-panel {
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 12px;
}
.analysis-panel.visible { display: flex; }

.conv-id-box {
    background: rgba(255,255,255,0.09);
    border-left: 3px solid var(--wif-lime);
    border-radius: 8px;
    padding: 14px;
}
.conv-id-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--wif-lime);
    margin-bottom: 6px;
}
.conv-id-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.conv-id-value {
    font-family: var(--wif-mono);
    font-size: 12px;
    color: var(--wif-white);
    word-break: break-all;
    flex: 1;
}
.conv-id-copy {
    background: none;
    border: 1px solid rgba(237,255,178,0.35);
    border-radius: 4px;
    color: var(--wif-lime);
    cursor: pointer;
    padding: 5px 6px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.conv-id-copy:hover { background: rgba(237,255,178,0.12); }
.conv-id-copy:focus-visible { outline: 2px solid var(--wif-lime); outline-offset: 2px; }
.conv-id-note {
    font-size: 11px;
    color: rgba(255,255,255,0.72);
    line-height: 1.55;
    margin-top: 8px;
}

.correction-notice {
    width: 100%;
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    padding-top: 12px;
    border-top: 1px solid rgba(237,255,178,0.22);
}
.correction-link { color: var(--wif-lime); text-decoration: underline; }
.correction-link:hover { color: var(--wif-white); }

/* Ultraviolet -2 rather than lime — this is destructive and should
   not look like the primary action. */
.btn-delete-conv {
    width: 100%;
    margin-top: 10px;
    padding: 11px;
    background: transparent;
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(212,195,240,0.60);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--wif-display);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.btn-delete-conv:hover:not(:disabled) { background: rgba(212,195,240,0.20); border-color: var(--wif-violet); }
.btn-delete-conv:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-delete-conv:focus-visible { outline: 2px solid var(--wif-lime); outline-offset: 2px; }

/* ── Footer links ── */
.footer-links {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: auto;
    align-self: flex-start;
    flex-wrap: wrap;
}
.cookie-link, .privacy-link {
    background: none;
    border: none;
    color: rgba(255,255,255,0.75);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.cookie-link:hover, .privacy-link:hover { color: var(--wif-lime); }
.cookie-link:focus-visible, .privacy-link:focus-visible { outline: 2px solid var(--wif-lime); outline-offset: 2px; }

/* ── Right panel ── */
.right-panel {
    display: flex;
    flex-direction: column;
    background: var(--wif-teal);
    position: relative;
    overflow: hidden;
}

/* Food silhouette — big, bold, cut off right (brand guide p.08/p.10) */
/* Anchored to the bottom and oversized, so the handle runs off the
   top edge and the bowl sits low — as the brand guide cover. */
.food-silhouette {
    position: absolute;
    right: -78px;
    bottom: 6%;
    height: 122%;
    width: auto;
    z-index: 0;
    pointer-events: none;
    opacity: 0.18;
}
.food-silhouette path,
.food-silhouette ellipse,
.food-silhouette rect { fill: var(--wif-violet); }

#ambient-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.7s ease;
}
body.state-listening #ambient-bg { opacity: 1; background: rgba(237,255,178,0.045); }
body.state-speaking  #ambient-bg { opacity: 1; background: rgba(237,255,178,0.085); }
body.state-thinking  #ambient-bg { opacity: 1; background: rgba(212,195,240,0.05); }

/* ── Transcript ── */
.transcript {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    scroll-behavior: smooth;
    position: relative;
    z-index: 1;
}
.transcript::-webkit-scrollbar { width: 4px; }
.transcript::-webkit-scrollbar-track { background: transparent; }
.transcript::-webkit-scrollbar-thumb { background: rgba(237,255,178,0.25); }

.transcript-empty {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 32px 40px;
}

/* auto block margins centre the block vertically but, unlike
   align-items:center, let it scroll instead of clipping the top
   once the copy is taller than the panel. */
.welcome-block {
    max-width: 560px;
    margin-block: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: left;
}

/* Title: big, bold, left aligned (brand guide p.10) */
.welcome-heading {
    font-family: var(--wif-display);
    font-size: 42px;
    font-weight: 700;
    color: var(--wif-white);
    letter-spacing: -0.02em;
    line-height: 1.08;
}

.welcome-block p {
    font-size: 15px;
    color: rgba(255,255,255,0.86);
    line-height: 1.7;
}
.welcome-block strong { color: var(--wif-lime); font-weight: 700; }

.welcome-rule {
    width: 84px;
    height: 3px;
    background: var(--wif-lime);
    border: none;
}

.welcome-tips {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 16px 18px;
}
.welcome-tips li {
    font-size: 14px;
    color: rgba(255,255,255,0.86);
    line-height: 1.6;
    padding-left: 18px;
    position: relative;
}
/* Square bullets per Newton typography protocol */
.welcome-tips li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.55em;
    width: 7px; height: 7px;
    background: var(--wif-lime);
}
.welcome-tips em { font-style: italic; color: var(--wif-white); }

.welcome-start-hint {
    font-size: 13px !important;
    color: rgba(255,255,255,0.65) !important;
    padding-top: 12px;
    border-top: 1px solid rgba(237,255,178,0.22);
}

/* ── Scroll-to-latest ── */
#scroll-to-latest {
    position: absolute;
    bottom: 76px; right: 28px;
    background: var(--wif-lime);
    color: var(--wif-teal);
    border: none;
    border-radius: 4px;
    padding: 7px 14px;
    font-size: 12px; font-weight: 700;
    font-family: var(--wif-display);
    cursor: pointer;
    opacity: 0; pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
    white-space: nowrap;
}
#scroll-to-latest.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
#scroll-to-latest:focus-visible { outline: 2px solid var(--wif-white); outline-offset: 2px; }

/* ── Messages ── */
.message {
    display: flex;
    flex-direction: column;
    max-width: 78%;
    gap: 5px;
    opacity: 0;
    transform: translateY(10px);
    animation: msg-enter 0.3s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes msg-enter { to { opacity: 1; transform: translateY(0); } }
.message.agent { align-self: flex-start; }
.message.user  { align-self: flex-end; align-items: flex-end; }

.message-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
}
.message-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--wif-lime);
}
.message-time { font-size: 10px; color: rgba(255,255,255,0.65); }

.message-bubble {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.65;
    word-break: break-word;
    border: 1px solid transparent;
    transition: background 1.4s ease, border-color 1.4s ease;
}
.message.agent .message-bubble {
    background: rgba(255,255,255,0.09);
    color: var(--wif-white);
}
.message.user .message-bubble {
    background: var(--wif-lime);
    color: var(--wif-teal);
}
.message.first-agent .message-bubble {
    background: rgba(237,255,178,0.14);
    border-color: rgba(237,255,178,0.40);
}

/* ── Thinking ── */
.thinking-msg {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-self: flex-start;
    opacity: 0;
    transform: translateY(10px);
    animation: msg-enter 0.3s cubic-bezier(0.22,1,0.36,1) forwards;
}
.thinking-bubble {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 13px 18px;
    background: rgba(255,255,255,0.09);
    border-radius: 8px;
}
.thinking-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--wif-lime);
    animation: dot-bounce 1.3s ease-in-out infinite;
}
.thinking-dot:nth-child(2) { animation-delay: 0.18s; }
.thinking-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes dot-bounce {
    0%,80%,100% { transform: translateY(0); }
    40%         { transform: translateY(-5px); }
}

/* ── Transcript footer ── */
.transcript-footer {
    padding: 16px 32px;
    border-top: 1px solid rgba(237,255,178,0.20);
    flex-shrink: 0;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}
.btn-download, .btn-copy {
    flex: 1;
    padding: 11px;
    background: transparent;
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(237,255,178,0.35);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--wif-display);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.btn-download:hover, .btn-copy:hover { background: rgba(237,255,178,0.10); border-color: var(--wif-lime); }
.btn-download:active, .btn-copy:active { transform: scale(0.98); }
.btn-download:focus-visible, .btn-copy:focus-visible { outline: 2px solid var(--wif-lime); outline-offset: 2px; }

/* ── Modals ── */
.cookie-overlay {
    position: fixed; inset: 0;
    background: rgba(19,101,129,0.86);
    display: flex; align-items: center; justify-content: center;
    z-index: 300;
    padding: 20px;
}
.cookie-overlay.hidden { display: none !important; }

.cookie-modal {
    background: var(--wif-teal);
    border: 1px solid rgba(237,255,178,0.35);
    border-radius: 8px;
    padding: 28px;
    max-width: 460px;
    width: 100%;
    max-height: 82vh;
    overflow-y: auto;
}
.cookie-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.cookie-modal-header h2 {
    font-family: var(--wif-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--wif-lime);
    letter-spacing: -0.01em;
}
.cookie-modal-close {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.7); font-size: 16px; padding: 4px 8px;
    font-family: inherit; border-radius: 4px;
    flex-shrink: 0;
}
.cookie-modal-close:hover { color: var(--wif-lime); }
.cookie-modal-close:focus-visible { outline: 2px solid var(--wif-lime); outline-offset: 2px; }

.cookie-modal-intro { font-size: 13px; color: rgba(255,255,255,0.85); line-height: 1.6; margin-bottom: 14px; }
.cookie-item {
    background: rgba(255,255,255,0.08);
    border-radius: 8px; padding: 14px;
    border-left: 3px solid var(--wif-lime);
    margin-bottom: 14px;
}
.cookie-name {
    font-family: var(--wif-mono);
    font-size: 12px; font-weight: 700; color: var(--wif-white); margin-bottom: 5px;
}
.cookie-desc { font-size: 12px; color: rgba(255,255,255,0.82); line-height: 1.55; }
.cookie-note { font-size: 11px; color: rgba(255,255,255,0.78); line-height: 1.55; }
.cookie-policy-link { color: var(--wif-lime); text-decoration: underline; }
.cookie-policy-link:hover { color: var(--wif-white); }

.privacy-modal {
    max-width: 640px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.privacy-modal-body { overflow-y: auto; flex: 1; }

.privacy-section {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(237,255,178,0.18);
}
.privacy-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.privacy-section h3 {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wif-lime);
    margin: 0 0 8px;
}
.privacy-section p,
.privacy-section ul {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    line-height: 1.65;
    margin: 0 0 6px;
}
.privacy-section ul { padding-left: 1.25rem; }
.privacy-section li { margin-bottom: 4px; }
.privacy-section li::marker { color: var(--wif-lime); }
.privacy-section strong { color: var(--wif-white); font-weight: 700; }

/* ── Toast ── */
.toast {
    position: fixed;
    bottom: 24px; right: 24px;
    background: var(--wif-lime);
    color: var(--wif-teal);
    padding: 11px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    transform: translateY(12px);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    z-index: 400;
    white-space: nowrap;
}
.toast.visible { opacity: 1; transform: translateY(0); }

@keyframes pulse {
    0%,100% { opacity: 1; }
    50%     { opacity: 0.3; }
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .welcome-heading { font-size: 34px; }
}

@media (max-width: 768px) {
    html, body { overflow: auto; height: auto; }
    body {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto;
        height: auto; min-height: 100svh;
    }
    .left-panel {
        height: auto; overflow: visible;
        border-right: none;
        border-bottom: 1px solid rgba(237,255,178,0.20);
    }
    .orb-section { justify-content: flex-start; }
    .right-panel { min-height: 60vh; }
    .transcript { overflow-y: auto; min-height: 200px; }
    .transcript-empty { padding: 24px 20px; }
    .welcome-heading { font-size: 28px; }
    .food-silhouette { opacity: 0.10; right: -110px; }
    .transcript-footer { padding: 12px 16px; }
    #scroll-to-latest { bottom: 68px; right: 16px; }
    .toast { bottom: 16px; right: 16px; left: 16px; white-space: normal; text-align: center; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .message, .thinking-msg { opacity: 1; transform: none; }
    #ambient-bg { display: none; }
    .orb-ripple { display: none; }
    #scroll-to-latest { transition: none; }
    .message.first-agent .message-bubble {
        background: rgba(237,255,178,0.14);
        border-color: rgba(237,255,178,0.40);
        transition: none;
    }
}