/* Virago XV250 manual assistant — styled to match jamieede.com */
:root {
  --color-bg: #0e1117;
  --color-bg-elevated: #1a2030;
  --color-text: #e8ecf0;
  --color-text-muted: rgba(232, 236, 240, 0.65);
  --color-accent: #5eb8c8;
  --color-accent-hover: #7ec8d6;
  --color-accent-muted: rgb(94 184 200 / 35%);
  --color-code-bg: #0a0d10;
  --color-border: rgba(232, 236, 240, 0.12);
  --radius-sm: 6px;
  --font-sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "Source Code Pro", ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin:0; font-family: var(--font-sans); background:var(--color-bg); color:var(--color-text); height:100vh; display:flex; flex-direction:column; }

.topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1rem; border-bottom:1px solid var(--color-border); }
.topbar h1 { font-family:var(--font-serif); font-weight:600; font-size:1.1rem; margin:0; }
.actions { display:flex; gap:.45rem; align-items:center; }
.actions button, .actions a { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:34px; background:var(--color-bg-elevated); color:var(--color-text); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:0 .8rem; text-decoration:none; cursor:pointer; font:inherit; font-size:.85rem; font-weight:500; white-space:nowrap; transition:border-color .15s ease, color .15s ease, background-color .15s ease; }
.actions button:hover, .actions a:hover { border-color:var(--color-accent-muted); color:var(--color-accent-hover); background:#212a3a; }
.actions button:active, .actions a:active { transform:translateY(1px); }
.actions button:focus-visible, .actions a:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
.actions button svg { flex-shrink:0; }
/* "Read the manual" is the primary action — give it an accent-tinted fill */
#toggle-pdf { background:rgb(94 184 200 / 14%); border-color:var(--color-accent-muted); color:var(--color-accent-hover); }
#toggle-pdf:hover { background:rgb(94 184 200 / 22%); border-color:var(--color-accent); color:var(--color-accent-hover); }
.site-link { color:var(--color-accent); background:transparent !important; border-color:transparent !important; min-height:0 !important; padding-inline:.3rem !important; }
.site-link:hover { color:var(--color-accent-hover); }

#chat { flex:1; display:flex; flex-direction:column; max-width:820px; width:100%; margin:0 auto; padding:1rem; overflow:hidden; }
#transcript { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:1rem; padding-bottom:1rem; scrollbar-width:thin; scrollbar-color:rgb(232 236 240 / 22%) transparent; }
.msg { padding:.75rem 1rem; border-radius:var(--radius-sm); line-height:1.55; }
.msg.user { background:var(--color-accent); color:var(--color-bg); align-self:flex-end; max-width:80%; }
.msg.assistant { background:var(--color-bg-elevated); border:1px solid var(--color-border); align-self:flex-start; max-width:90%; }
.msg.user .content { white-space:pre-wrap; }
/* rendered markdown in assistant replies */
.msg.assistant .content > :first-child { margin-top:0; }
.msg.assistant .content > :last-child { margin-bottom:0; }
.msg.assistant .content p { margin:.5rem 0; }
.msg.assistant .content h1,
.msg.assistant .content h2,
.msg.assistant .content h3,
.msg.assistant .content h4 { font-family:var(--font-sans); font-weight:600; margin:.8rem 0 .4rem; line-height:1.3; }
.msg.assistant .content ul,
.msg.assistant .content ol { margin:.5rem 0; padding-left:1.4rem; }
.msg.assistant .content li { margin:.15rem 0; }
.msg.assistant .content a { color:var(--color-accent); }
.msg.assistant .content code { font-family:var(--font-mono); background:var(--color-code-bg); border:1px solid var(--color-border); border-radius:4px; padding:.05rem .3rem; font-size:.9em; }
.msg.assistant .content pre { background:var(--color-code-bg); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:.6rem .8rem; overflow-x:auto; font-family:var(--font-mono); }
.msg.assistant .content pre code { background:none; border:0; padding:0; }
.msg.assistant .content table { border-collapse:collapse; margin:.6rem 0; width:100%; font-size:.92em; }
.msg.assistant .content th,
.msg.assistant .content td { border:1px solid var(--color-border); padding:.35rem .55rem; text-align:left; }
.msg.assistant .content thead th { background:var(--color-code-bg); }
.msg.assistant .content .manual-figure { display:block; max-width:100%; height:auto; margin:.6rem 0; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:#fff; }
.sources { font-size:.78rem; color:var(--color-text-muted); margin-top:.5rem; }

/* empty state */
.welcome { margin:auto; max-width:560px; text-align:center; color:var(--color-text-muted); padding:2rem 1rem; }
.welcome h2 { font-family:var(--font-serif); color:var(--color-text); font-size:1.3rem; font-weight:600; margin:0 0 .4rem; }
.welcome p { margin:0 0 1.2rem; line-height:1.55; }
.welcome .manual-callout { font-size:.9rem; background:var(--color-bg-elevated); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:.7rem .9rem; margin:0 0 1.4rem; text-align:left; }
.welcome .manual-callout strong { color:var(--color-text); }
.chips { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.chip { background:transparent; color:var(--color-text-muted); border:1px solid var(--color-border); border-radius:999px; padding:.4rem .85rem; font:inherit; font-size:.85rem; cursor:pointer; transition:border-color .2s ease, color .2s ease, background-color .2s ease; }
.chip:hover { border-color:var(--color-accent-muted); color:var(--color-text); background:var(--color-bg-elevated); }

/* typing indicator */
.typing { display:inline-flex; gap:.3rem; align-items:center; padding:.15rem 0; }
.typing span { width:.45rem; height:.45rem; border-radius:50%; background:var(--color-text-muted); animation:typing 1.2s infinite ease-in-out; }
.typing span:nth-child(2){ animation-delay:.2s; }
.typing span:nth-child(3){ animation-delay:.4s; }
@keyframes typing { 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-.25rem); opacity:1; } }

#composer { border-top:1px solid var(--color-border); padding-top:.75rem; display:flex; flex-direction:column; gap:.5rem; }
.composer-status { font-size:.8rem; color:var(--color-text-muted); min-height:1rem; }
.composer-status:empty { display:none; }
.composer-row { display:flex; gap:.5rem; align-items:flex-end; }
#input { flex:1; resize:none; background:var(--color-bg-elevated); color:var(--color-text); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:.6rem; font:inherit; line-height:1.4; max-height:160px; overflow-y:auto; }
#input:focus { outline:none; border-color:var(--color-accent); }
#send { background:var(--color-accent); color:var(--color-bg); border:1px solid transparent; border-radius:var(--radius-sm); padding:.6rem 1.25rem; font:inherit; font-weight:600; line-height:1.4; cursor:pointer; flex-shrink:0; }
#send:hover { background:var(--color-accent-hover); }
#send:disabled { opacity:.5; cursor:default; }

.site-footer { flex-shrink:0; text-align:center; padding:.6rem 1rem; border-top:1px solid var(--color-border); font-size:.8rem; color:var(--color-text-muted); }
.site-footer a { color:var(--color-accent); text-decoration:none; }
.site-footer a:hover { color:var(--color-accent-hover); }

#pdf-panel { position:fixed; top:0; right:0; height:100vh; width:min(70vw,900px); background:var(--color-bg-elevated); border-left:1px solid var(--color-border); display:flex; flex-direction:column; transform:translateX(0); transition:transform .25s ease; z-index:20; }
#pdf-panel.hidden { transform:translateX(100%); }
.pdf-panel-head { display:flex; justify-content:space-between; align-items:center; padding:.6rem .8rem; border-bottom:1px solid var(--color-border); }
.pdf-panel-head button { background:transparent; color:var(--color-text); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:.3rem .6rem; cursor:pointer; }
.pdf-panel-head button:hover { border-color:var(--color-accent-muted); }
#pdf-frame { flex:1; border:0; width:100%; }
#scrim { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:10; }
#scrim.hidden, #pdf-panel.hidden ~ #scrim { display:none; }
@media (max-width:640px){ #pdf-panel{ width:100vw; } }

/* mobile header: title on its own row, actions wrap neatly below */
@media (max-width:640px){
  .topbar { flex-wrap:wrap; gap:.55rem; padding:.65rem .8rem; }
  .topbar h1 { flex-basis:100%; font-size:1.05rem; line-height:1.25; }
  .actions { width:100%; flex-wrap:wrap; gap:.4rem; }
  .actions button, .actions a { font-size:.8rem; padding:0 .65rem; min-height:32px; }
  .actions .site-link { margin-left:auto; }
}

.new-chat-inline { background:transparent; color:var(--color-text-muted); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:.6rem 1rem; font:inherit; line-height:1.4; cursor:pointer; flex-shrink:0; }
.new-chat-inline:hover { border-color:var(--color-accent-muted); color:var(--color-text); }
.new-chat-inline[hidden] { display:none; }
.site-footer .disclaimer { display:block; margin-bottom:.2rem; }
.manual-link { background:none; border:0; padding:0; font:inherit; color:var(--color-accent); text-decoration:underline; cursor:pointer; }
.manual-link:hover { color:var(--color-accent-hover); }

/* onboarding spotlight tour */
.tour-overlay { position:fixed; inset:0; z-index:1000; }
.tour-highlight { position:fixed; border-radius:var(--radius-sm); box-shadow:0 0 0 9999px rgba(0,0,0,.6); pointer-events:none; transition:top .2s ease, left .2s ease, width .2s ease, height .2s ease; }
.tour-tip { position:fixed; max-width:300px; background:var(--color-bg-elevated); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:.9rem 1rem; box-shadow:0 8px 30px rgba(0,0,0,.45); }
.tour-counter { font-size:.75rem; color:var(--color-text-muted); margin-bottom:.3rem; }
.tour-body { margin:0 0 .8rem; line-height:1.5; font-size:.92rem; }
.tour-controls { display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.tour-nav { display:flex; gap:.5rem; }
.tour-tip button { font:inherit; font-size:.85rem; border-radius:var(--radius-sm); padding:.35rem .8rem; cursor:pointer; border:1px solid var(--color-border); }
.tour-skip { background:transparent; color:var(--color-text-muted); }
.tour-skip:hover { color:var(--color-text); }
.tour-back { background:transparent; color:var(--color-text); }
.tour-next { background:var(--color-accent); color:var(--color-bg); border-color:transparent; font-weight:600; }
.tour-next:hover { background:var(--color-accent-hover); }