/* Prøv Vivian chat widget — loads on top of vivian-chrome.css / landing.css. */

.tv-chat { background:var(--paper); border:1px solid var(--rule); box-shadow:0 36px 80px -48px rgba(26,20,16,0.35),0 2px 0 var(--rule-soft); display:flex; flex-direction:column; max-width:860px; margin:0 auto; }

.tv-chat .tv-head { display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--rule); }
.tv-chat .tv-head .glyph { width:32px; height:32px; background:var(--ink); color:var(--gold-pale); display:flex; align-items:center; justify-content:center; font-family:var(--font-headline); font-style:italic; font-weight:700; font-size:15px; flex-shrink:0; }
.tv-chat .tv-head .meta { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.tv-chat .tv-head .ttl { font-family:var(--font-headline); font-weight:600; font-size:16px; color:var(--ink); letter-spacing:-0.005em; line-height:1.2; }
.tv-chat .tv-head .sub { font-size:11.5px; color:var(--ink-muted); letter-spacing:0.02em; }
.tv-chat .tv-head .pill { font-size:9.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--paper); background:var(--gold); padding:5px 9px; white-space:nowrap; }

.tv-chat .tv-scroll { height:420px; overflow-y:auto; padding:24px 20px; display:flex; flex-direction:column; gap:14px; background:var(--cream); scroll-behavior:smooth; }

.tv-chat .tv-empty { margin:auto 0; text-align:center; }
.tv-chat .tv-empty .hint { font-family:var(--font-headline); font-style:italic; font-weight:400; font-size:16px; color:var(--gold); margin:0 0 14px; }
.tv-chat .tv-empty .starters { display:flex; flex-direction:column; gap:8px; align-items:center; }
.tv-chat .tv-empty .starter { font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--ink); background:var(--paper); border:1px solid var(--rule); padding:10px 16px; cursor:pointer; transition:border-color .15s ease, background .15s ease; max-width:100%; }
.tv-chat .tv-empty .starter:hover:not(:disabled) { border-color:var(--gold); background:var(--gold-bg); }
.tv-chat .tv-empty .starter:disabled { opacity:0.5; cursor:default; }

.tv-chat .tv-row { display:flex; }
.tv-chat .tv-row.user { justify-content:flex-end; }
.tv-chat .tv-row .bubble { max-width:85%; padding:12px 16px; font-size:14px; line-height:1.6; }
.tv-chat .tv-row.user .bubble { background:var(--ink); color:var(--paper); white-space:pre-wrap; overflow-wrap:break-word; }
.tv-chat .tv-row.assistant .bubble { background:var(--paper); border:1px solid var(--rule); color:var(--ink); border-left:3px solid var(--gold-pale); }
.tv-chat .tv-row.assistant .bubble.error { border-left-color:var(--red); color:var(--ink-soft); font-style:italic; }

.tv-chat .md p { margin:0 0 10px; }
.tv-chat .md p:last-child { margin-bottom:0; }
.tv-chat .md ul, .tv-chat .md ol { margin:0 0 10px; padding-left:20px; }
.tv-chat .md ul { list-style:disc; }
.tv-chat .md ol { list-style:decimal; }
.tv-chat .md li { margin-bottom:4px; }
.tv-chat .md h1, .tv-chat .md h2, .tv-chat .md h3, .tv-chat .md h4 { font-family:var(--font-headline); font-weight:600; font-size:16px; margin:14px 0 6px; color:var(--ink); }
.tv-chat .md blockquote { margin:0 0 10px; padding:8px 14px; border-left:3px solid var(--gold-pale); background:var(--gold-bg); }
.tv-chat .md code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; background:var(--cream-dim); padding:1px 5px; }
.tv-chat .md a { color:var(--gold); text-decoration:underline; text-underline-offset:2px; }

.tv-chat .typing { display:inline-flex; gap:5px; padding:4px 0; }
.tv-chat .typing i { width:6px; height:6px; border-radius:9999px; background:var(--gold); animation:tv-blink 1.2s infinite ease-in-out; }
.tv-chat .typing i:nth-child(2) { animation-delay:0.2s; }
.tv-chat .typing i:nth-child(3) { animation-delay:0.4s; }
@keyframes tv-blink { 0%,80%,100% { opacity:0.25; transform:translateY(0); } 40% { opacity:1; transform:translateY(-3px); } }

.tv-chat .cites { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--rule); }
.tv-chat .cite { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:11.5px; font-weight:700; letter-spacing:0.02em; padding:6px 11px; border:1px solid var(--rule); background:var(--cream); color:var(--ink); cursor:pointer; max-width:100%; transition:border-color .15s ease, background .15s ease; }
.tv-chat .cite .ico { font-family:var(--font-icon); font-size:14px; color:var(--gold); font-style:normal; font-weight:400; }
.tv-chat .cite .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tv-chat .cite:hover { border-color:var(--gold); background:var(--gold-bg); }
.tv-chat .cite.unverified { opacity:0.55; }
.tv-chat .cite.unverified .ico { color:var(--ink-muted); }

.tv-chat .tv-input { display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--rule); background:var(--paper); }
.tv-chat .tv-input input { flex:1; min-width:0; font-family:var(--font-body); font-size:14px; color:var(--ink); background:var(--cream); border:1px solid var(--rule); padding:12px 14px; outline-offset:0; }
.tv-chat .tv-input input:focus { border-color:var(--gold); }
.tv-chat .tv-input input:disabled { opacity:0.6; }
.tv-chat .tv-input .send { width:46px; display:flex; align-items:center; justify-content:center; background:var(--ink); color:var(--gold-pale); border:1px solid var(--ink); cursor:pointer; transition:opacity .15s ease; }
.tv-chat .tv-input .send .ico { font-family:var(--font-icon); font-size:20px; font-style:normal; }
.tv-chat .tv-input .send:disabled { opacity:0.35; cursor:default; }

.tv-chat .tv-foot { margin:0; padding:10px 16px 14px; font-size:11px; color:var(--ink-muted); letter-spacing:0.02em; text-align:center; background:var(--paper); }

/* ── Source drawer ───────────────────────────────────── */
.tv-overlay { position:fixed; inset:0; background:rgba(14,23,41,0.45); z-index:98; }
.tv-drawer { position:fixed; top:0; right:0; bottom:0; width:min(560px,100vw); background:var(--paper); border-left:1px solid var(--rule); z-index:99; display:flex; flex-direction:column; box-shadow:-24px 0 60px -30px rgba(26,20,16,0.4); animation:tv-slide .2s ease; }
@keyframes tv-slide { from { transform:translateX(24px); opacity:0; } to { transform:translateX(0); opacity:1; } }

.tv-drawer .dr-head { display:flex; align-items:flex-start; gap:14px; padding:20px 24px; border-bottom:1px solid var(--rule); }
.tv-drawer .dr-head .meta { flex:1; min-width:0; }
.tv-drawer .dr-head .kind { display:block; font-size:10px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.tv-drawer .dr-head h3 { font-family:var(--font-headline); font-weight:600; font-size:22px; line-height:1.15; color:var(--ink); letter-spacing:-0.01em; margin:0; overflow-wrap:break-word; }
.tv-drawer .dr-head .x { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--rule); background:var(--paper); color:var(--ink-soft); cursor:pointer; flex-shrink:0; }
.tv-drawer .dr-head .x .ico { font-family:var(--font-icon); font-size:16px; font-style:normal; }

.tv-drawer .dr-body { flex:1; overflow-y:auto; padding:24px; font-size:14px; line-height:1.65; color:var(--ink); }
.tv-drawer .dr-body .state { color:var(--ink-soft); font-style:italic; }
.tv-drawer .dr-body .retry { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:11.5px; font-weight:700; letter-spacing:0.04em; padding:9px 14px; border:1px solid var(--ink); background:var(--paper); color:var(--ink); cursor:pointer; margin-top:8px; }
.tv-drawer .dr-body .quote { margin:0 0 20px; padding:12px 16px; border-left:3px solid var(--gold-pale); background:rgba(233,193,118,0.16); font-family:var(--font-headline); font-size:15px; line-height:1.55; }
.tv-drawer .dr-body .md h1, .tv-drawer .dr-body .md h2, .tv-drawer .dr-body .md h3 { font-family:var(--font-headline); font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
.tv-drawer .dr-body .md p { margin:0 0 12px; }
.tv-drawer .dr-body .md ul { list-style:disc; margin:0 0 12px; padding-left:22px; }
.tv-drawer .dr-body .md ol { list-style:decimal; margin:0 0 12px; padding-left:22px; }
.tv-drawer .dr-body .md li { margin-bottom:6px; }
.tv-drawer .dr-body .ext { display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-size:12px; font-weight:700; letter-spacing:0.04em; color:var(--ink); border:1px solid var(--rule); padding:9px 14px; text-decoration:none; }
.tv-drawer .dr-body .ext .ico { font-family:var(--font-icon); font-size:14px; color:var(--gold); font-style:normal; }
.tv-drawer .dr-body .ext:hover { border-color:var(--gold); background:var(--gold-bg); }

@media (max-width:720px) {
    .tv-chat .tv-scroll { height:380px; }
    .tv-chat .tv-row .bubble { max-width:92%; }
}

.product-demo-invite .tv-empty { padding:32px 20px; }
.product-demo-invite .tv-head .meta .sub,
.product-demo-invite .tv-foot { color:var(--ink-soft); font-size:13px; line-height:1.65; }
.product-demo-invite .tv-empty .hint { color:var(--ink-soft); font-family:var(--font-body); font-size:15px; font-style:normal; line-height:1.7; }
.tv-demo-page .tv-main { max-width:900px; margin:0 auto; padding:48px 24px; }
.tv-demo-page h1 { font-size:clamp(28px, 5vw, 44px); line-height:1.15; margin-bottom:28px; }
.tv-demo-page .tv-main > div > p { margin-top:24px; }
.tv-demo-page .tv-main > div > p a { text-decoration:underline; }

/* ── Full-screen page (/proev-vivian) ────────────────── */
/* The nav stays in flow; the chat takes the rest of the viewport and only
   the message region scrolls. */
.tv-fs { display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden; }
.tv-fs nav.lp { flex-shrink:0; }
.tv-fs .tv-main { flex:1; min-height:0; display:flex; width:100%; max-width:1040px; margin:0 auto; padding:24px 32px 28px; }
.tv-fs .tv-chat { flex:1; min-height:0; max-width:none; margin:0; }
.tv-fs .tv-chat .tv-scroll { flex:1; height:auto; }

@media (max-width:720px) {
    .tv-fs .tv-main { padding:0; }
    .tv-fs .tv-chat { border-left:0; border-right:0; }
    .tv-fs .tv-chat .tv-scroll { height:auto; }
}