/* ============================================================================
   BOB HQ — page-level styles
   ========================================================================= */

/* ============================================================================
   HOME — "Bob's living room"
   The brief's hardest instruction: this must not read as a dashboard. The
   difference is almost entirely in the first screen. A dashboard opens with
   YOUR metrics. A living room opens with the person who lives there.

   So the hero is Bob, at a size no dashboard would ever give a mascot, and he
   speaks first. Stats exist — but they are below him, smaller, and framed as
   things he noticed rather than KPIs.
   ========================================================================= */
.hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center;
  padding: 34px 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 130% at 12% 0%, rgba(255,206,58,.10), transparent 58%),
    radial-gradient(70% 120% at 95% 100%, rgba(44,212,232,.08), transparent 60%),
    linear-gradient(160deg, var(--surface-2), var(--surface) 70%);
  margin-bottom: 34px;
}
/* A slow gold sweep across the panel. 14s, very low contrast — at this speed
   it is never the thing you are looking at, it just stops the panel from
   being static in peripheral vision. */
.hero::after {
  content: ''; position: absolute; inset: -40% -10%;
  background: linear-gradient(74deg, transparent 42%, rgba(255,206,58,.055) 50%, transparent 58%);
  animation: sweep 14s linear infinite; pointer-events: none;
}
@keyframes sweep { from { transform: translateX(-30%); } to { transform: translateX(30%); } }
@media (prefers-reduced-motion: reduce) { .hero::after { animation: none; } }

.hero-face { position: relative; flex: none; }
.hero-face canvas {
  width: 132px; height: 132px; border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255,206,58,.12), transparent);
  box-shadow: var(--e-2), 0 0 0 1px rgba(255,206,58,.16);
  padding: 10px;
}
/* Bob's status light. This is a small thing that does a lot: a green "here"
   dot is the visual grammar of a person being online, borrowed straight from
   chat apps, and it makes him a presence rather than an illustration. */
.hero-live {
  position: absolute; bottom: 6px; right: 6px;
  display: flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 6px; border-radius: var(--r-pill);
  background: rgba(7,8,13,.86); border: 1px solid var(--line-2);
  font: var(--t-xs); font-weight: 600; color: var(--text-2);
}
.hero-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.hero-txt { min-width: 0; }
.hero-hi { font: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--gold); margin-bottom: 9px; }
.hero-line { font: var(--t-display); max-width: 22ch; }
.hero-sub { font: var(--t-body); color: var(--text-2); margin-top: 11px; max-width: 52ch; }
.hero-cta { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* The typed greeting. A caret that blinks only while typing — a permanently
   blinking caret next to finished text reads as a stuck terminal. */
.hero-line .caret {
  display: inline-block; width: 3px; height: .85em; margin-left: 3px;
  background: var(--gold); vertical-align: -.06em;
  animation: caret .9s steps(2) infinite;
}
.hero-line.is-done .caret { display: none; }
@keyframes caret { 50% { opacity: 0; } }

.home-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 34px; }

/* Hero on a phone. Two changes, both necessary:

   1. ONE column. `auto 1fr` keeps working at 375px in the sense that it does
      not overflow the page — but "auto" is Bob's 132px face, which leaves the
      headline about 190px to live in and wraps it to five lines. Stacking puts
      him above the text at full width, which is also the better order: you see
      who is talking, then what he said.

   2. The CTAs go full width. `.btn` sets white-space: nowrap so labels never
      break mid-phrase, which means a long label like "Continue: Portal keep
      gatehouse" is simply wider than the screen and gets clipped. Full-width
      block buttons with the label allowed to ellipsis is the fix; nowrap stays
      so the text never fragments. */
@media (max-width: 620px) {
  .hero { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 28px 20px; gap: 20px; }
  .hero-txt { width: 100%; }
  .hero-line, .hero-sub { max-width: none; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; overflow: hidden; text-overflow: ellipsis; display: flex; }
  .hero-cta .btn span { overflow: hidden; text-overflow: ellipsis; }
}

/* Bob's Picks — his voice attached to a build. The quote is what makes it a
   recommendation from someone rather than an algorithmic row. */
.pick { display: flex; flex-direction: column; }
.pick-why {
  display: flex; gap: 8px; padding: 11px 13px; margin-top: auto;
  background: color-mix(in srgb, var(--gold) 7%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
  font: var(--t-sm); color: var(--text-2); font-style: italic;
}
.pick-why canvas { width: 22px; height: 22px; border-radius: 5px; flex: none; }

/* Activity feed row */
.act { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--r); transition: background var(--d-1) var(--ease); }
.act:hover { background: var(--surface); }
.act-t { flex: 1; min-width: 0; font: var(--t-sm); color: var(--text-2); }
.act-t b { color: var(--text); font-weight: 600; }
.act-t a { color: var(--cyan); }
.act-w { font: var(--t-xs); color: var(--text-4); white-space: nowrap; }

/* ============================================================================
   CHAT — the most important page in the product
   Three columns on desktop: conversations · thread · Bob.
   The right rail is what separates this from a generic AI chat clone. It keeps
   Bob VISIBLE the whole time you are talking to him, at a size where you can
   see him blink and react, instead of reducing him to a 28px avatar repeated
   down the left margin.
   ========================================================================= */
/* Chat is an app pane, not a document: the composer is pinned and only the
   message list scrolls. That needs a DEFINITE height, and `height: 100%` does
   not give one here — it resolves against #outlet, which is auto-height, so it
   silently fell back to content height. The pane then grew to fit every
   message (3284px on a long thread), the composer scrolled off the bottom of
   the screen, and the whole page scrolled instead of the thread.

   calc() against the viewport is immune to that: it does not care what any
   ancestor's height is, so no future layout change upstream can quietly break
   it the way a percentage chain does. */
.chat {
  display: grid; grid-template-columns: 264px 1fr 232px;
  height: calc(100dvh - var(--topbar-h));
  min-height: 0; overflow: hidden;
}

.cv-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--bg-1); }
.cv-head { padding: 14px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line); }
.cv-scroll { flex: 1; overflow-y: auto; padding: 8px; }
.cv {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: var(--r); border: 1px solid transparent;
  background: none; margin-bottom: 3px;
  transition: background var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}
.cv:hover { background: var(--surface); }
.cv.is-on { background: var(--surface-2); border-color: var(--line-2); }
.cv-t { font: var(--t-h3); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cv.is-on .cv-t { color: var(--cyan-l); }
.cv-p { font: var(--t-xs); color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-top: 3px; }
.cv-row { display: flex; align-items: center; gap: 6px; }
.cv-row .icobtn { width: 26px; height: 26px; opacity: 0; flex: none; }
.cv:hover .icobtn, .cv.is-on .icobtn { opacity: 1; }

.thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.thread-head { flex: none; display: flex; align-items: center; gap: 11px; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.thread-head canvas { width: 30px; height: 30px; border-radius: 7px; }
.thread-head b { font: var(--t-h3); }
.thread-head span { font: var(--t-xs); color: var(--ok); display: flex; align-items: center; gap: 5px; }
.thread-head span i { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }

.msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 24px clamp(16px, 4vw, 46px); scroll-behavior: smooth; }
.msgs-in { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

/* Message rows. Bob gets an avatar and a surface; the user gets neither.
   Giving both sides a bubble makes a conversation look like a transcript
   between two strangers — this asymmetry is what makes Bob feel like the one
   you came to see and you feel like yourself. */
.m { display: flex; gap: 13px; animation: msgIn var(--d-2) var(--ease); }
@keyframes msgIn { from { opacity: 0; transform: translateY(9px); } }
.m canvas { width: 32px; height: 32px; border-radius: 7px; flex: none; margin-top: 2px; }
.m-b { min-width: 0; flex: 1; }
.m-who { font: var(--t-xs); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; margin-bottom: 6px; }
.m--bob .m-who { color: var(--gold); }
.m--user { flex-direction: row-reverse; }
.m--user .m-b { display: flex; flex-direction: column; align-items: flex-end; }
.m-txt {
  font: var(--t-body); color: var(--text);
  white-space: pre-wrap; word-wrap: break-word;
}
.m--bob .m-txt {
  background: var(--surface); border: 1px solid var(--line);
  padding: 13px 16px; border-radius: 4px var(--r-lg) var(--r-lg) var(--r-lg);
}
.m--user .m-txt {
  background: linear-gradient(160deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--line-2);
  padding: 11px 15px; border-radius: var(--r-lg) 4px var(--r-lg) var(--r-lg);
  max-width: 78%;
}
.m-time { font: var(--t-xs); color: var(--text-4); margin-top: 6px; }

/* Typing indicator — three dots on staggered delays. */
.typing { display: inline-flex; gap: 4px; padding: 15px 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px var(--r-lg) var(--r-lg) var(--r-lg); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: dot 1.3s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes dot { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

/* Composer */
.comp { flex: none; padding: 14px clamp(16px, 4vw, 46px) 20px; border-top: 1px solid var(--line); background: var(--bg-1); }
.comp-in { max-width: 760px; margin: 0 auto; }
.comp-box {
  display: flex; align-items: flex-end; gap: 9px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 8px 8px 8px 15px;
  transition: border-color var(--d-1) var(--ease), box-shadow var(--d-1) var(--ease);
}
.comp-box:focus-within { border-color: var(--cyan-d); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 12%, transparent); }
.comp-ta {
  flex: 1; background: none; border: 0; resize: none; padding: 9px 0;
  max-height: 168px; line-height: 1.55; font: var(--t-body);
}
.comp-ta::placeholder { color: var(--text-4); }
.comp-send { width: 38px; height: 38px; border-radius: var(--r); flex: none; }
.comp-hint { font: var(--t-xs); color: var(--text-4); text-align: center; margin-top: 9px; }
.comp-hint kbd { background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; font: var(--t-xs); font-family: var(--font-mono); }

/* Welcome state — shown when a conversation has no messages yet. */
.chat-welcome { display: grid; place-items: center; text-align: center; height: 100%; padding: 30px; }
.chat-welcome canvas { width: 92px; height: 92px; border-radius: var(--r-lg); margin: 0 auto 20px; padding: 8px; background: linear-gradient(160deg, rgba(255,206,58,.12), transparent); box-shadow: 0 0 0 1px rgba(255,206,58,.15); }
.chat-welcome h2 { font: var(--t-h1); margin-bottom: 9px; }
.chat-welcome p { font: var(--t-body); color: var(--text-2); max-width: 44ch; margin: 0 auto 24px; }
.prompts { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; max-width: 620px; margin: 0 auto; }
.prompt {
  text-align: left; padding: 13px 15px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); color: var(--text-2); font: var(--t-sm);
  transition: all var(--d-1) var(--ease);
}
.prompt:hover { border-color: var(--cyan-d); color: var(--text); background: var(--surface-2); transform: translateY(-2px); }
.prompt b { display: block; color: var(--text); font: var(--t-h3); margin-bottom: 3px; }

/* Right rail — Bob, present. */
.chat-bob { border-left: 1px solid var(--line); background: var(--bg-1); padding: 22px 18px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.chat-bob-face { text-align: center; }
.chat-bob-face canvas { width: 108px; height: 108px; border-radius: var(--r-lg); padding: 9px; background: linear-gradient(160deg, rgba(255,206,58,.13), transparent); box-shadow: 0 0 0 1px rgba(255,206,58,.16); }
.chat-bob-face b { display: block; font: var(--t-h2); margin-top: 12px; }
.chat-bob-face span { display: block; font: var(--t-xs); color: var(--text-3); margin-top: 3px; }
.bob-note { font: var(--t-sm); color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 13px; font-style: italic; }
.bob-facts { display: flex; flex-direction: column; gap: 8px; }
.bob-fact { display: flex; align-items: center; gap: 9px; font: var(--t-xs); color: var(--text-3); }
.bob-fact .ic { color: var(--text-4); }

@media (max-width: 1240px) { .chat { grid-template-columns: 240px 1fr; } .chat-bob { display: none; } }
@media (max-width: 860px) {
  /* The bottom tab bar (58px) eats into the pane here, so it comes out of the
     same calc — otherwise the composer sits underneath the tab bar. */
  .chat { grid-template-columns: 1fr; height: calc(100dvh - var(--topbar-h) - 58px); }
  .cv-list { position: absolute; inset: 0 auto 0 0; width: 264px; z-index: 60; transform: translateX(-100%); transition: transform var(--d-2) var(--ease); }
  .chat.is-list .cv-list { transform: none; }
}

/* ============================================================================
   WORKSHOP / MARKETPLACE — browse surfaces
   ========================================================================= */
.toolbar { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar .sf { flex: 1; min-width: 220px; }

.featured {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); margin-bottom: 30px;
}
.featured-art { position: relative; min-height: 280px; }
.featured-art .cover { height: 100%; aspect-ratio: auto; border: 0; }
.featured-b { padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; gap: 13px; }
.featured-b h2 { font: var(--t-display); font-size: clamp(24px, 2.6vw, 34px); }
.featured-b p { font: var(--t-body); color: var(--text-2); max-width: 46ch; }
.featured-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
@media (max-width: 860px) { .featured { grid-template-columns: 1fr; } .featured-art { min-height: 180px; } .featured-b { padding: 22px; } }

.item-head { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; }
.item-head .cover { width: min(420px, 100%); border-radius: var(--r-lg); border: 1px solid var(--line); }
.item-info { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 12px; }
.item-info h1 { font: var(--t-display); font-size: clamp(24px, 2.4vw, 32px); }

/* ============================================================================
   CREATORS
   ========================================================================= */
.creator-banner {
  height: 190px; border-radius: var(--r-xl); position: relative; overflow: hidden;
  border: 1px solid var(--line); margin-bottom: -52px;
}
.creator-head { display: flex; align-items: flex-end; gap: 18px; padding: 0 26px; position: relative; z-index: 1; margin-bottom: 26px; flex-wrap: wrap; }
.creator-head .av { box-shadow: 0 0 0 4px var(--bg), var(--e-2); }
.creator-id { flex: 1; min-width: 200px; padding-bottom: 4px; }
.creator-id h1 { font: var(--t-display); font-size: clamp(22px, 2.2vw, 30px); display: flex; align-items: center; gap: 9px; }
.creator-id p { font: var(--t-sm); color: var(--text-3); margin-top: 4px; }
.creator-bio { font: var(--t-body); color: var(--text-2); max-width: 62ch; margin-bottom: 22px; }
.creator-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 28px; }

.creator-row {
  display: flex; align-items: center; gap: 13px; padding: 13px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); cursor: pointer;
  transition: transform var(--d-2) var(--ease), border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.creator-row:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--e-2); }
.creator-row-b { flex: 1; min-width: 0; }
.creator-row-b b { display: flex; align-items: center; gap: 6px; font: var(--t-h3); }
.creator-row-b span { display: block; font: var(--t-xs); color: var(--text-3); margin-top: 3px; }

/* ============================================================================
   COMMUNITY
   ========================================================================= */
.feed { display: grid; grid-template-columns: 1fr 300px; gap: 26px; align-items: start; }
@media (max-width: 1080px) { .feed { grid-template-columns: 1fr; } }

.post { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 14px; }
.post-h { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.post-h b { font: var(--t-h3); display: flex; align-items: center; gap: 5px; }
.post-h span { font: var(--t-xs); color: var(--text-4); }
.post-t { font: var(--t-body); color: var(--text-2); margin-bottom: 13px; }
.post-media { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); margin-bottom: 13px; }
.post-a { display: flex; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.post-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border-radius: var(--r-sm); border: 0; background: none; cursor: pointer;
  color: var(--text-3); font: var(--t-xs); font-weight: 600;
  transition: background var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.post-btn:hover { background: var(--surface-2); color: var(--text); }
.post-btn.is-on { color: var(--gold); }
.post-btn.is-on .ic { fill: color-mix(in srgb, var(--gold) 30%, transparent); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; margin-bottom: 14px; }
.panel h3 { font: var(--t-h3); margin-bottom: 12px; display: flex; align-items: center; gap: 7px; }
.panel h3 .ic { color: var(--gold); }

/* ============================================================================
   EVENTS
   ========================================================================= */
.event {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--surface-2), var(--surface) 72%);
  padding: 26px 28px; margin-bottom: 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  transition: border-color var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.event:hover { border-color: var(--line-2); transform: translateY(-2px); }
.event--live { border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.event--live::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--ok); box-shadow: 0 0 16px var(--ok);
}
.event--ann { background: linear-gradient(150deg, color-mix(in srgb, var(--gold) 8%, var(--surface-2)), var(--surface) 72%); border-color: color-mix(in srgb, var(--gold) 22%, transparent); }
.event-b { min-width: 0; }
.event-b h2 { font: var(--t-h1); font-size: 22px; margin: 9px 0 8px; }
.event-b p { font: var(--t-body); color: var(--text-2); max-width: 58ch; }
.event-meta { display: flex; gap: 18px; margin-top: 15px; flex-wrap: wrap; }
.event-side { display: flex; flex-direction: column; gap: 13px; align-items: flex-end; }
.event-prize { font: var(--t-xs); color: var(--text-3); text-align: right; }
.event-prize b { display: block; color: var(--gold); font: var(--t-h3); margin-top: 3px; }
@media (max-width: 720px) { .event { grid-template-columns: 1fr; } .event-side { align-items: flex-start; } .event-prize { text-align: left; } }

/* ============================================================================
   PROFILE / SETTINGS
   ========================================================================= */
.set-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 16px; overflow: hidden; }
.set-group > h3 { font: var(--t-h3); padding: 15px 18px; border-bottom: 1px solid var(--line); background: var(--bg-1); }
.set-row { display: flex; align-items: center; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-row-b { flex: 1; min-width: 0; }
.set-row-b b { display: block; font: var(--t-h3); }
.set-row-b span { display: block; font: var(--t-sm); color: var(--text-3); margin-top: 3px; }

/* Switch. A real checkbox under it, so it is keyboard-operable and announces
   its state — a div-based toggle would need four ARIA attributes to match. */
.sw { position: relative; width: 42px; height: 24px; flex: none; }
.sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.sw i {
  position: absolute; inset: 0; border-radius: 99px; pointer-events: none;
  background: var(--surface-3); border: 1px solid var(--line-2);
  transition: background var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}
.sw i::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--text-3);
  transition: transform var(--d-2) var(--ease), background var(--d-1) var(--ease);
}
.sw input:checked + i { background: color-mix(in srgb, var(--cyan) 26%, transparent); border-color: var(--cyan-d); }
.sw input:checked + i::after { transform: translateX(18px); background: var(--cyan); }
.sw input:focus-visible + i { outline: 2px solid var(--cyan); outline-offset: 2px; }

.err { font: var(--t-xs); font-family: var(--font-mono); color: var(--danger); background: var(--surface); padding: 10px; border-radius: var(--r-sm); overflow-x: auto; text-align: left; }