/* Walkthrough Studio. A quiet chat: neutral greys, the Truvio logo, and a little Truvio purple and green where
   something is yours to do or is done. Conversations on the left, one conversation in the middle, the message box
   at the bottom. Light and dark follow the device. */
:root {
  --bg: #faf9f6; --side: #f2f1ec; --surface: #ffffff; --sunk: #efeee8; --bubble: #ecebe4;
  --fg: #1f1e1c; --muted: #6f6c64; --faint: #9a968c; --line: #e2e0d8;
  --purple: #400685; --purple-fg: #ffffff; --purple-ink: #4a0f96; --green: #2DB34A;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --shadow: 0 1px 2px rgba(31,30,28,.04), 0 8px 24px rgba(31,30,28,.05);
  --col: 760px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #1a1918; --side: #141312; --surface: #232220; --sunk: #2a2927; --bubble: #302e2b;
  --fg: #ecebe6; --muted: #a29f96; --faint: #76736b; --line: #363431;
  --purple: #5a2cb3; --purple-fg: #ffffff; --purple-ink: #b9a2ee; --green: #45c466;
  --shadow: 0 1px 2px rgba(0,0,0,.35); color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #1a1918; --side: #141312; --surface: #232220; --sunk: #2a2927; --bubble: #302e2b;
  --fg: #ecebe6; --muted: #a29f96; --faint: #76736b; --line: #363431;
  --purple: #5a2cb3; --purple-fg: #ffffff; --purple-ink: #b9a2ee; --green: #45c466;
  --shadow: 0 1px 2px rgba(0,0,0,.35); color-scheme: dark }

* { box-sizing: border-box }
html, body { height: 100%; margin: 0 }
body { background: var(--bg); color: var(--fg); font: 15px/1.55 var(--sans); overflow: hidden; -webkit-font-smoothing: antialiased }
#app { height: 100vh; height: 100dvh; display: grid; grid-template-columns: 272px minmax(0, 1fr) }
h1 { font: 400 32px/1.2 var(--serif); margin: 0; letter-spacing: -.01em; text-wrap: balance }
h2 { font: 600 17px/1.3 var(--sans); margin: 0 }
h3 { font: 600 14px var(--sans); margin: 0 }
p { margin: 0; max-width: 68ch }
a { color: var(--purple-ink) }
.muted { color: var(--muted) } .small { font-size: 13px } .grow { flex: 1; min-width: 0 }
.label { font: 500 12px var(--sans); color: var(--faint) }
.center { height: 100%; display: grid; place-items: center; padding: 24px; text-align: center; grid-column: 1 / -1 }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
:focus-visible { outline: 2px solid var(--purple-ink); outline-offset: 2px }
.on-dark { display: none }
@media (prefers-color-scheme: dark) { .on-light { display: none } .on-dark { display: inline-block } }

button, .btn { font: 500 14px var(--sans); border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); padding: 7px 13px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px }
button:hover:not(:disabled), .btn:hover { border-color: var(--faint) }
button.primary { background: var(--purple); border-color: var(--purple); color: var(--purple-fg) }
button.quiet { border-color: transparent; background: transparent; color: var(--muted); padding: 6px 8px }
button.quiet:hover:not(:disabled) { background: var(--sunk); color: var(--fg); border-color: transparent }
button:disabled { opacity: .45; cursor: default }
button svg, .btn svg { width: 16px; height: 16px; flex: none }
input, textarea, select { font: 400 15px/1.45 var(--sans); color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; width: 100%; min-width: 0 }
textarea { resize: vertical; line-height: 1.45 }
label { display: grid; gap: 5px; font: 500 12px var(--sans); color: var(--muted) }
.pill { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--sans); padding: 3px 10px; border-radius: 999px; background: var(--sunk); color: var(--muted); white-space: nowrap }
.fn { font: 500 12px var(--mono); background: var(--sunk); color: var(--muted); border-radius: 6px; padding: 2px 6px; white-space: nowrap }
.th { display: block; width: 100%; aspect-ratio: 16/9; background-color: var(--sunk); background-repeat: no-repeat }
/* the one place colour says something: green is done, purple is yours or in the making */
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; display: inline-block }
.dot.ok { background: var(--green) } .dot.turn, .dot.info, .dot.warn { background: var(--purple-ink) }
.dot.bad { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted) }
.dot.live { animation: pulse 1.6s ease-in-out infinite }
@keyframes pulse { 50% { opacity: .3 } }

/* ---------- the list of conversations */
.side { background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0 }
.side-head { display: flex; align-items: center; gap: 10px; padding: 18px 16px 12px; padding-top: calc(18px + env(safe-area-inset-top, 0px)); color: inherit; text-decoration: none }
.side-head img { height: 24px; width: auto }
.side-head span { font: 500 13px var(--sans); color: var(--muted); border-left: 1px solid var(--line); padding-left: 10px }
.side .new { margin: 0 8px 4px; padding: 8px 10px; justify-content: flex-start; gap: 10px; border-color: transparent; background: transparent; border-radius: 9px; font-weight: 500 }
.side .new:hover { background: var(--sunk); border-color: transparent }
.side .new svg { width: 18px; height: 18px; color: var(--purple-ink) }
.side-label { padding: 14px 18px 6px }
.side-list { flex: 1; overflow-y: auto; padding: 0 8px 12px; display: flex; flex-direction: column; gap: 1px }
.item { display: grid; grid-template-columns: 7px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px 10px; border-radius: 9px; color: inherit; text-decoration: none }
.item .dot { margin-top: 7px }
.item:hover { background: var(--sunk) }
.item[aria-current="true"] { background: var(--line) }
.item-text { display: grid; min-width: 0 }
.item-text strong { font: 500 14px/1.35 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.item-text .sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.side-foot { border-top: 1px solid var(--line); padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px }
.side-foot .links { display: flex; gap: 14px; padding: 0 6px }
.side-foot a, .side-foot button.link { color: var(--muted); text-decoration: none; background: none; border: 0; padding: 0; font: 400 13px var(--sans) }
.side-foot a:hover, .side-foot button.link:hover { color: var(--fg) }
.side-foot a[aria-current="page"] { color: var(--fg) }
.who { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-size: 13px }
.me-chip { width: 26px; height: 26px; border-radius: 50%; background: var(--line); display: inline-grid; place-items: center; font: 600 11px var(--sans); color: var(--muted); flex: none }
.scrim { display: none }

/* ---------- one conversation */
.main { display: flex; flex-direction: column; min-height: 0; min-width: 0 }
.top { display: flex; align-items: center; gap: 10px; padding: 10px 20px; min-height: 54px; padding-top: calc(10px + env(safe-area-inset-top, 0px)) }
.top .title { font: 600 15px/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.top .sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.top .state { display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--sans); color: var(--muted); white-space: nowrap }
.icon { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); padding: 0; flex: none; display: inline-grid; place-items: center }
.icon:hover:not(:disabled) { background: var(--sunk); color: var(--fg) }
.icon svg { width: 20px; height: 20px }
.top .only-small { display: none }
.thread { flex: 1; overflow-y: auto; padding: 4px 16px 10px; position: relative }
.col { max-width: var(--col); margin: 0 auto; display: flex; flex-direction: column; gap: 18px; padding-block: 8px 12px }
.page { flex: 1; overflow-y: auto; padding: 8px 20px 60px }
.page .col { gap: 20px; max-width: 1080px }

.msg { display: flex }
.msg.me { justify-content: flex-end }
.msg-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0 }
.msg.me .msg-body { justify-items: end; max-width: min(84%, 600px) }
.msg.studio .msg-body { flex: 1; justify-items: start }
.who-said { font: 500 12px var(--sans); color: var(--muted) }
.bubble { background: var(--bubble); padding: 10px 15px; border-radius: 20px; border-bottom-right-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5 }
.bubble.clamp { max-height: 14em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 68%, transparent); mask-image: linear-gradient(#000 68%, transparent) }
.say { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; max-width: 68ch; font-size: 15.5px }
.more { font: 500 12px var(--sans); color: var(--muted); background: none; border: 0; padding: 0; text-decoration: underline }
.stamp { align-self: center; font-size: 12px; color: var(--faint) }
.action { font: 500 13px var(--sans); color: var(--muted); background: var(--sunk); border-radius: 999px; padding: 6px 12px; display: inline-flex; gap: 6px; align-items: center }
.action svg { width: 14px; height: 14px; color: var(--green) }
.tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end }
.working { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 2px 0 }
.working img { width: 22px; height: auto; animation: breathe 1.7s ease-in-out infinite }
@keyframes breathe { 0%, 100% { transform: scale(.84); opacity: .5 } 50% { transform: scale(1); opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .working img, .dot.live { animation: none } }
.sysnote { align-self: center; max-width: 64ch; text-align: center; font-size: 13px; color: var(--muted) }

/* files on a message, and files waiting in the message box */
.files { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: flex-end }
.file { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 6px 10px; font-size: 13px; color: inherit; text-decoration: none; max-width: 280px; min-width: 0 }
a.file:hover { border-color: var(--faint) }
.file .ext { font: 600 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; background: var(--sunk); color: var(--muted); border-radius: 5px; padding: 3px 5px; flex: none }
.file .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.file .sz { color: var(--faint); white-space: nowrap; flex: none }
.file .x { border: 0; background: none; padding: 2px 4px; color: var(--muted); border-radius: 6px }
.file.up { opacity: .6 }
.pic { width: 132px; height: 96px; padding: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: var(--sunk) }
.pic img { width: 100%; height: 100%; object-fit: cover; display: block }

/* a block inside a studio turn: the screen flow, a video */
.block { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0 }
.block-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline }
.two { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) }
.scenes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px }
.scene { display: grid; grid-template-columns: 22px 164px minmax(0, 1fr); gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); align-items: start }
.scene .n { font: 500 13px var(--sans); color: var(--faint); padding-top: 5px; font-variant-numeric: tabular-nums; text-align: center }
.shotbtn { padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: zoom-in; background: var(--sunk); display: block; width: 100% }
.shotbtn .th { background-size: cover; background-position: top }
.scene .fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0 }
.cap-row { display: flex; gap: 6px; align-items: center }
.cap-row input { flex: 1 }
.scene .fields input { font-weight: 600 }
.scene .fields input, .scene .fields textarea { padding: 6px 10px; font-size: 14px }
.scene .fields textarea { resize: none; overflow: hidden }
.scene .fields input:disabled, .scene .fields textarea:disabled { background: transparent; border-color: transparent; padding-left: 0; color: var(--fg); opacity: 1 }
.scene .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted) }
.scene .tools { display: flex; gap: 0; flex: none }
.scene .tools button { padding: 6px; border-radius: 8px }
.scene .meta .more { margin-left: auto; text-decoration: none }
.gaps { border-left: 2px solid var(--purple-ink); background: var(--sunk); padding: 10px 14px; border-radius: 0 10px 10px 0; font-size: 14px }
.gaps ul { margin: 4px 0 0; padding-left: 18px }
details.matched summary { cursor: pointer; font: 500 13px var(--sans); color: var(--muted) }
details.matched table { margin-top: 8px }
table { border-collapse: collapse; width: 100%; font-size: 14px } th, td { text-align: left; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top }
th { font: 500 12px var(--sans); color: var(--faint) }
.scroll { overflow-x: auto }
video { width: 100%; border-radius: 12px; background: #000; aspect-ratio: 16/9; display: block }

/* ---------- the message box */
.dock { padding: 4px 16px calc(12px + env(safe-area-inset-bottom, 0px)) }
.quick { max-width: var(--col); margin: 0 auto 8px; display: flex; flex-wrap: wrap; gap: 6px }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 500 13px var(--sans); padding: 5px 12px; border-radius: 999px; cursor: pointer; text-decoration: none }
.chip:hover { color: var(--fg); border-color: var(--faint) }
.chip[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg) }
.composer { max-width: var(--col); margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px }
.composer:focus-within { border-color: var(--faint) }
.composer.drop { border-style: dashed; border-color: var(--purple-ink) }
.composer.off { background: var(--sunk); box-shadow: none }
.staged { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 4px 2px }
.staged .file { padding-right: 4px }
.composer-row { display: flex; align-items: flex-end; gap: 6px }
.composer textarea { flex: 1; border: 0; background: transparent; resize: none; outline: none; padding: 7px 6px; max-height: 220px; line-height: 1.5; border-radius: 0 }
.round { width: 36px; height: 36px; border-radius: 50%; padding: 0; flex: none }
.round svg { width: 18px; height: 18px }
.plus { background: transparent; color: var(--muted) }
.send { border: 0; background: var(--purple); color: var(--purple-fg) }
.send:disabled { background: var(--sunk); color: var(--faint); opacity: 1 }
.composer.off .send:disabled { background: var(--line) }
.dock-hint { max-width: var(--col); margin: 8px auto 0; text-align: center; font-size: 12px; color: var(--faint) }

/* ---------- the welcome */
.col.welcome { min-height: 100%; justify-content: center; align-items: center; text-align: center; gap: 14px; padding-bottom: 6vh }
.welcome .mark { width: 54px; height: auto; margin-bottom: 6px }
.welcome p { color: var(--muted); font-size: 16px; max-width: 40ch }

/* ---------- screen library and how it works */
.lib { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)) }
.shot { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); display: grid; text-align: left; padding: 0; font: inherit; color: inherit; cursor: zoom-in; align-content: start; justify-content: stretch; gap: 0 }
.shot.pick { cursor: pointer }
.shot .th { background-size: cover; background-position: top }
.shot .info { padding: 8px 10px; display: grid; gap: 4px; font-size: 13px; min-width: 0; font-weight: 400 }
.shot .fns { display: flex; flex-wrap: wrap; gap: 4px }
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; gap: 12px; min-width: 0 }
.panel ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; max-width: 72ch }

/* ---------- overlays: a screen at full size, the screen picker */
.overlay { position: fixed; inset: 0; background: rgba(12, 11, 10, .93); z-index: 30; display: grid; place-items: center; padding: 16px }
.zoom { width: min(1280px, 100%); display: grid; gap: 10px; color: #f1efe9 }
.zoom-bar { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #b5b1a7 }
.zoom img, .zoom .th { width: 100%; max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); aspect-ratio: 16/9; object-fit: contain; border-radius: 10px; background-color: #0c0b0a; background-size: cover; display: block }
.zoom-cap { display: flex; gap: 12px; align-items: center }
.zoom-cap strong { font: 600 16px var(--sans); display: block }
.zoom button { background: rgba(255,255,255,.1); border: 0; color: #f1efe9 }
.zoom button.round { font-size: 20px; width: 40px; height: 40px }
.sheet { background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 16px; width: min(1100px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line) }
.sheet-body { padding: 16px 18px; overflow-y: auto }

.signin { width: min(380px, 100%); display: grid; gap: 14px; text-align: left }
.signin .logo { height: 30px; width: auto; justify-self: start; margin-bottom: 6px }
.signin .err { color: var(--fg); min-height: 1.3em; font-size: 13px; font-weight: 500 }
.toast { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 9px 16px; border-radius: 999px; font: 500 13px var(--sans); z-index: 40; max-width: calc(100vw - 32px) }

/* ---------- small screens: the list slides in over the conversation */
@media (max-width: 860px) {
  #app { grid-template-columns: minmax(0, 1fr) }
  .side { position: fixed; inset: 0 auto 0 0; width: min(86vw, 320px); z-index: 20; transform: translateX(-104%); transition: transform .18s ease }
  .side.open { transform: none }
  .side.open + .scrim { display: block; position: fixed; inset: 0; z-index: 19; background: rgba(12, 11, 10, .5); border: 0; border-radius: 0; padding: 0 }
  .top { padding-inline: 8px }
  .top .only-small { display: inline-grid }
  .top .heading { text-align: center }
  .top .state span { display: none }
  .thread { padding-inline: 14px }
  .dock { padding-inline: 10px }
  .msg.me .msg-body { max-width: 90% }
  .block { padding: 12px; border-radius: 14px }
  .scene { grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 8px }
  .scene .fields { grid-column: 1 / -1 }
  h1 { font-size: 28px }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none } }