/* Post Studio: a dark studio around the slides. The slides are the colour; the UI recedes.
   Type: Bebas Neue (the account's hook face) for the mark and the titles, Allura for the one
   script flourish (as on the hook slides), Proxima Nova for labels, the system sans for reading. */

@font-face { font-family: 'Bebas Neue'; src: url('/fonts/BebasNeue-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Allura'; src: url('/fonts/Allura-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Proxima Nova'; src: url('/fonts/proxima-semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }

:root {
  --bg: #1c1a17;
  --panel: #23201b;
  --raised: #2b2822;
  --raised-2: #34302a;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);
  --ink: #efe9df;
  --ink-2: #b9b1a4;
  --ink-3: #7d766b;
  --pink: #DA6596;
  --pink-ink: #1c1a17;
  --pink-dim: #8a4a64;
  --amber: #d8a34a;
  --slide-bg: #111;
  --radius: 10px;
  --sans: -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --label: 'Proxima Nova', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --display: 'Bebas Neue', 'Oswald', Impact, sans-serif;
  --script: 'Allura', 'Snell Roundhand', cursive;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- frame ---------- */
.app {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  height: 100vh;
}
.rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 18px 18px;
  border-right: 1px solid var(--line);
  background: var(--panel);
  min-height: 0;
}
.main { display: grid; grid-template-columns: minmax(0, 1fr) 400px; min-height: 0; }
.main-collection { display: block; overflow: auto; padding: 34px 40px 60px; }

/* ---------- mark ---------- */
.mark { display: block; text-decoration: none; position: relative; padding-top: 14px; }
.mark-script {
  position: absolute; top: 0; left: 4px;
  font: 400 24px/1 var(--script);
  color: var(--ink);
}
.mark-word {
  display: block;
  font: 400 40px/0.9 var(--display);
  letter-spacing: 0.03em;
  color: var(--pink);
  text-transform: uppercase;
}

/* ---------- nav ---------- */
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  font: 600 14px/1.3 var(--label);
}
.nav-item:hover { color: var(--ink-2); background: var(--raised); }
.nav-item.is-active { color: var(--ink); }
.nav-count { color: var(--ink-3); font-weight: 600; margin-left: 4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border: 0; border-radius: 6px;
  font: 600 13.5px/1 var(--label);
  transition: background-color 120ms ease, color 120ms ease;
}
.btn-raised { background: var(--raised); color: var(--ink); }
.btn-raised:hover { background: var(--raised-2); }
.btn-raised.is-on { background: var(--pink); color: var(--pink-ink); }
.btn-raised.is-on:hover { background: #e87aa8; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-new { width: 100%; }

.conv-list { display: flex; flex-direction: column; gap: 2px; overflow: auto; min-height: 0; flex: 1; margin: 0 -6px; padding: 0 6px; }
.conv {
  display: block; width: 100%; text-align: left;
  padding: 9px 10px; border: 0; border-radius: 6px; background: transparent;
  color: var(--ink-2);
}
.conv:hover { background: var(--raised); color: var(--ink); }
.conv.is-active { background: var(--raised); color: var(--ink); }
.conv-title { display: block; font-size: 13.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-date { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.rail-foot { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }

/* ---------- thread ---------- */
.thread-wrap { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.thread { flex: 1; overflow: auto; padding: 34px 40px 20px; }
.thread-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }

.turn-user { align-self: flex-end; max-width: 72%; padding: 10px 14px; border-radius: var(--radius); background: var(--raised); white-space: pre-wrap; }
.turn-assistant { display: flex; flex-direction: column; gap: 12px; max-width: 100%; }
.assistant-text { white-space: pre-wrap; line-height: 1.55; }
.assistant-text:empty { display: none; }

.tool-line { display: flex; align-items: baseline; gap: 10px; font: 600 12.5px/1.4 var(--label); color: var(--ink-3); }
.tool-line .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); transform: translateY(-1px); }
.tool-line.is-running .dot { background: var(--pink); }
.tool-line.is-error { color: var(--amber); }
.tool-line.is-error .dot { background: var(--amber); }
.progress { font: 600 12.5px/1.4 var(--label); color: var(--ink-3); padding-left: 17px; }
.progress::after { content: '…'; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.2s steps(4, end) infinite; }
@keyframes dots { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }

.error-line { color: var(--amber); font-size: 13.5px; }

/* post block inside the thread */
.post-block { display: flex; flex-direction: column; gap: 8px; }
.post-block-head { display: flex; align-items: baseline; gap: 10px; font: 600 12.5px/1.4 var(--label); color: var(--ink-3); }
.post-block-head b { color: var(--ink-2); font-weight: 600; }
.strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.strip .slide { flex: none; width: 118px; }
.slide { position: relative; border-radius: 8px; overflow: hidden; background: var(--slide-bg); border: 0; padding: 0; text-align: left; }
.slide img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.slide .n {
  position: absolute; left: 8px; top: 6px;
  font: 400 18px/1 var(--display); color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.slide .warn { position: absolute; right: 8px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.slide:hover img { filter: brightness(1.06); }
.slide:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }

/* candidates */
.cands { display: flex; flex-direction: column; gap: 8px; }
.cands-head { font: 600 12.5px/1.4 var(--label); color: var(--ink-3); }
.cand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.cand { position: relative; border: 0; padding: 0; border-radius: 8px; overflow: hidden; background: #fff; }
.cand img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #fff; }
.cand .n { position: absolute; left: 6px; top: 4px; font: 400 20px/1 var(--display); color: #111; }
.cand:hover img { filter: brightness(0.94); }
.cand-label { display: block; padding: 4px 6px; font-size: 11px; color: var(--ink-3); background: var(--panel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.zip-line { display: flex; align-items: center; gap: 10px; }
.zip-link {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border-radius: 6px; background: var(--raised); color: var(--ink);
  font: 600 13.5px/1 var(--label); text-decoration: none;
}
.zip-link:hover { background: var(--raised-2); }

.empty { color: var(--ink-2); max-width: 520px; }
.empty h1 { font: 400 46px/0.95 var(--display); letter-spacing: 0.02em; color: var(--ink); margin: 0 0 12px; }
.empty p { margin: 0 0 18px; }
.examples { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.examples button {
  text-align: left; border: 0; background: transparent; padding: 6px 0;
  color: var(--ink-2); font-size: 14.5px;
}
.examples button::before { content: '»'; color: var(--pink); margin-right: 10px; }
.examples button:hover { color: var(--ink); }

/* ---------- composer ---------- */
.composer {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 14px 40px 22px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.composer textarea {
  flex: 1; resize: none; max-height: 200px;
  padding: 11px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--panel); color: var(--ink);
  font: 15px/1.45 var(--sans);
  outline: none;
}
.composer textarea:focus { border-color: var(--ink-3); }
.composer textarea::placeholder { color: var(--ink-3); }
.btn-send {
  flex: none; width: 44px; height: 44px;
  border: 0; border-radius: var(--radius);
  background: var(--pink); color: var(--pink-ink);
  font: 400 30px/1 var(--display);
  padding-bottom: 3px;
}
.btn-send:hover { background: #e87aa8; }
.btn-send:disabled { background: var(--pink-dim); color: var(--bg); cursor: default; }

/* ---------- panel ---------- */
.panel { overflow: auto; padding: 30px 26px; background: var(--panel); }
.panel-empty { color: var(--ink-3); font-size: 13.5px; }
.panel-title { margin: 0; font: 400 30px/1 var(--display); letter-spacing: 0.02em; }
.panel-meta { margin: 6px 0 0; color: var(--ink-3); font: 600 12.5px/1.4 var(--label); }
.panel-actions { display: flex; gap: 8px; margin: 16px 0 18px; flex-wrap: wrap; }
.filmstrip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.panel-qa { margin: 14px 0 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
.panel-qa.is-warn { color: var(--amber); }

/* ---------- collection ---------- */
.collection-head { max-width: 1200px; margin: 0 auto 22px; }
.page-title { margin: 0; font: 400 54px/0.95 var(--display); letter-spacing: 0.02em; }
.page-sub { margin: 6px 0 0; color: var(--ink-3); font: 600 13px/1.4 var(--label); }
.collection { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.card { display: flex; flex-direction: column; gap: 10px; }
.card .slide { width: 100%; }
.card-title { margin: 0; font-size: 14.5px; line-height: 1.3; }
.card-meta { margin: 0; color: var(--ink-3); font: 600 12px/1.4 var(--label); }
.card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.card-actions .btn { height: 32px; padding: 0 11px; font-size: 12.5px; }
.card-actions .btn-quiet { background: transparent; color: var(--ink-3); }
.card-actions .btn-quiet:hover { color: var(--ink); background: var(--raised); }
.collection-empty { color: var(--ink-2); max-width: 480px; }

/* ---------- viewer ---------- */
.viewer {
  position: fixed; inset: 0; z-index: 50;
  display: grid; grid-template-columns: 80px 1fr 80px; align-items: center;
  background: rgba(20, 18, 15, 0.94);
}
.viewer-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; height: 100vh; justify-content: center; }
.viewer-figure img { height: calc(100vh - 90px); width: auto; max-width: calc(100vw - 180px); object-fit: contain; border-radius: 8px; background: var(--slide-bg); }
.viewer-figure figcaption { font: 400 20px/1 var(--display); letter-spacing: 0.04em; color: var(--ink-2); }
.viewer-nav, .viewer-close {
  border: 0; background: transparent; color: var(--ink-2);
  font: 400 54px/1 var(--display);
  width: 80px; height: 80px; justify-self: center;
}
.viewer-nav:hover, .viewer-close:hover { color: var(--ink); }
.viewer-close { position: fixed; right: 8px; top: 8px; font-size: 40px; width: 56px; height: 56px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .thread-wrap { border-right: 0; }
  .panel { border-top: 1px solid var(--line); max-height: 44vh; }
  .filmstrip { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .rail { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .conv-list { display: none; }
  .rail-foot { display: none; }
  .btn-new { width: auto; }
  .mark-word { font-size: 30px; }
  .thread { padding: 22px 18px 12px; }
  .composer { padding: 12px 18px 16px; }
  .main-collection { padding: 24px 18px 40px; }
}

/* ---------- composer tools, attachments, voice ---------- */
.composer { flex-direction: column; align-items: stretch; gap: 8px; }
.composer-row { display: flex; align-items: flex-end; gap: 10px; }
.composer.is-drop textarea { border-color: var(--pink); }
.btn-tool {
  flex: none; width: 44px; height: 44px;
  border: 0; border-radius: var(--radius);
  background: var(--raised); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  font: 400 30px/1 var(--display);
  transition: background-color 120ms ease, color 120ms ease;
}
.btn-tool:hover { background: var(--raised-2); color: var(--ink); }
.btn-tool.is-rec { background: var(--pink); color: var(--pink-ink); font: 600 13px/1 var(--label); }
.btn-tool.is-busy { color: var(--ink-3); }
.btn-send.is-busy { background: var(--pink-dim); color: var(--bg); }
.composer-note { font: 600 12.5px/1.4 var(--label); color: var(--ink-3); padding-left: 2px; }
.attach-row { display: flex; flex-wrap: wrap; gap: 8px; }
.attach {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 4px; border-radius: 8px; background: var(--raised);
  font: 600 12.5px/1.3 var(--label); color: var(--ink-2);
}
.attach img { width: 40px; height: 40px; object-fit: contain; border-radius: 5px; background: #fff; }
.attach.is-busy .attach-label { color: var(--ink-3); }
.attach.is-error { color: var(--amber); }
.attach-x { border: 0; background: transparent; color: var(--ink-3); font: 400 20px/1 var(--display); padding: 0 4px; }
.attach-x:hover { color: var(--ink); }
.link-quiet { border: 0; background: transparent; padding: 0; color: var(--ink-3); font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.link-quiet:hover { color: var(--ink-2); }

.bubble-attachments { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.bubble-attachments img { width: 64px; height: 64px; object-fit: contain; border-radius: 6px; background: #fff; }
.bubble-text { white-space: pre-wrap; }

.typing { display: inline-flex; gap: 5px; padding: 6px 0; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: typing 1.2s ease-in-out infinite; }
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- assets view ---------- */
.assets-tools { max-width: 1200px; margin: 0 auto 22px; display: flex; flex-direction: column; gap: 14px; }
.drop {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
  cursor: pointer; color: var(--ink-2);
}
.drop:hover, .drop.is-drop { border-color: var(--ink-3); color: var(--ink); }
.drop-glyph { font: 400 44px/1 var(--display); color: var(--pink); }
.drop-text { font-size: 14px; line-height: 1.45; }
.drop-text b { color: var(--ink); font-weight: 600; }
.assets-progress { display: flex; flex-direction: column; gap: 4px; }
.assets-progress:empty { display: none; }
.ingest-ok { font: 600 12.5px/1.4 var(--label); color: var(--ink-2); padding-left: 17px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters select, .filters input[type="search"] {
  height: 36px; padding: 0 12px; border-radius: 6px;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink);
  font: 600 13px/1 var(--label);
}
.filters input[type="search"] { min-width: 260px; font-weight: 400; font-family: var(--sans); font-size: 14px; }
.filters select:focus, .filters input:focus { outline: none; border-color: var(--ink-3); }
.check { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--label); color: var(--ink-2); }
.check input { accent-color: var(--pink); }
.asset-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.asset { display: flex; flex-direction: column; gap: 6px; }
.asset img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-radius: 8px; }
.asset-meta { display: flex; flex-direction: column; gap: 1px; }
.asset-label { font: 600 12.5px/1.3 var(--label); color: var(--ink-2); }
.asset-tags { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.asset-actions .btn { height: 30px; padding: 0 10px; font-size: 12px; }
.assets-more { max-width: 1200px; margin: 22px auto 0; }

/* ---------- gate (gift + password) ---------- */
.gate { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: grid; place-items: center; }
.gate-inner { width: min(520px, 92vw); }
.gate-scene { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.gift { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 16px; cursor: pointer; }
.gift svg { overflow: visible; }
.gift-lid { transform-origin: 120px 118px; transition: transform 800ms cubic-bezier(.2,.8,.2,1); }
.gift:hover .gift-lid { transform: translateY(-6px); }
.gift.is-open .gift-lid { transform: translate(60px, -140px) rotate(28deg); opacity: 0; transition: transform 800ms cubic-bezier(.2,.8,.2,1), opacity 500ms ease 500ms; }
.gift.is-open .gift-box { transition: transform 700ms ease 500ms, opacity 700ms ease 500ms; transform: translateY(70px); opacity: 0; }
.gift.is-open svg { transition: transform 900ms ease 500ms; transform: scale(.7); }
.gift-hint { font: 600 13.5px/1.4 var(--label); color: var(--ink-2); }
.gate-form { width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gate-form.is-in { animation: rise 600ms ease both; }
@keyframes rise { from { transform: translateY(14px); } to { transform: translateY(0); } }
.gate-script { margin: 0; font: 400 30px/1 var(--script); color: var(--ink); }
.gate-title { margin: -4px 0 0; font: 400 58px/.95 var(--display); letter-spacing: .02em; color: var(--pink); text-transform: uppercase; }
.gate-text { margin: 4px 0 8px; color: var(--ink-2); max-width: 380px; }
#gate-pw { display: flex; flex-direction: column; gap: 10px; width: min(360px, 90vw); align-items: center; }
#gate-pw input {
  width: 100%; height: 46px; padding: 0 14px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink);
  font: 16px/1 var(--sans); text-align: center; letter-spacing: .12em;
}
#gate-pw input:focus { outline: none; border-color: var(--ink-3); }
.gate-error { margin: 0; color: var(--amber); font-size: 13.5px; }
.btn-gate { width: 56px; height: 46px; margin-top: 4px; }

/* ---------- tour ---------- */
.tour { position: fixed; inset: 0; z-index: 55; background: rgba(20, 18, 15, .78); display: grid; place-items: center; }
.tour-card { width: min(520px, 92vw); padding: 26px 26px 20px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.tour-step { margin: 0; font: 600 12.5px/1.4 var(--label); color: var(--pink); }
.tour-title { margin: 0; font: 400 40px/.95 var(--display); letter-spacing: .02em; }
.tour-text { margin: 0; color: var(--ink-2); line-height: 1.55; }
.tour-demo { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; margin: 6px 0; }
.tour-demo:empty { display: none; }
.tour-bubble { padding: 8px 12px; border-radius: 8px; background: var(--raised); font-size: 14px; }
.tour-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.btn-quiet { background: transparent; color: var(--ink-3); }
.btn-quiet:hover { color: var(--ink); background: var(--raised); }