/* Lina Pocket, the workshop in your pocket.
   Atelier design language, lifted 1:1 from the lina4.ai site (web/app/static/style.css,
   D-058): warm ember on near-black, Hanken Grotesk, fluid type via clamp() so it stays
   calm at 100% and unbroken at 125% (the iPhone default). No fixed pixel text sizes,
   rem/ch everywhere, controlled wrapping. The signature ember "lamp" dot carries the
   workshop light through. No terminal green. */

@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap");

:root {
  --bg: #0C0B0A;
  --surface: #161310;
  --surface2: #1D1914;
  --border: #272019;
  --border2: #39301f33;
  --text: #F1ECE3;
  --muted: #9D9486;
  --faint: #6B6256;
  --ember: #EFA24A;
  --ember-deep: #E07B3C;
  --grad: linear-gradient(120deg, #F3B05C, #E07B3C);

  /* fluid type scale, clamped to the viewport (D-058) */
  --step--1: clamp(0.84rem, 0.80rem + 0.20vw, 0.95rem);
  --step-0: clamp(1rem, 0.95rem + 0.28vw, 1.12rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.6vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem);
  --step-3: clamp(1.9rem, 1.4rem + 2.6vw, 2.9rem);
  --gutter: clamp(1.1rem, 0.6rem + 2.6vw, 1.6rem);

  --radius: 1rem;
  --radius-sm: 0.6rem;
}

* { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* faint warm grain, the one real workshop-material detail (kept premium/subtle) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }

/* ---- top bar -------------------------------------------------------------------------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  padding: 0.85rem var(--gutter);
  padding-top: max(0.85rem, env(safe-area-inset-top));
  background: rgba(12, 11, 10, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

/* the brand mark: ember lamp dot + wordmark, carries the workshop light */
.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
}
.lamp {
  position: relative;
  width: 0.66rem;
  height: 0.66rem;
  flex: none;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0.9rem var(--ember), 0 0 0.2rem #fff6;
}
.lamp::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 0.7rem;
  background: linear-gradient(var(--faint), transparent);
}
.mark .tld { color: var(--muted); font-weight: 500; }

.bar-spacer { margin-left: auto; }

/* the conversation theme: a small line under the bar so you always know where you are */
.convo-theme {
  flex-basis: 100%;
  min-width: 0;
  margin-top: 0.1rem;
  font-size: var(--step--1);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.back {
  color: var(--muted);
  font-size: var(--step--1);
  padding: 0.4rem 0.2rem;
}
.back:hover { color: var(--text); }

/* stage pills, allowed to wrap as a group below the title rather than overflow */
.stages {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
  flex-wrap: wrap;
}
.stage-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 2rem;
  padding: 0.4rem 0.95rem;
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}
.stage-btn:hover { color: var(--text); }
.stage-btn.on {
  color: #1b1206;
  background: var(--grad);
  border-color: transparent;
}

/* ---- page shell ----------------------------------------------------------------------- */
.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.4rem, 0.8rem + 2vw, 2.2rem) var(--gutter)
           calc(env(safe-area-inset-bottom) + 2rem);
}
.wrap.has-composer { padding-bottom: calc(env(safe-area-inset-bottom) + 9.5rem); }

.section {
  margin: clamp(2rem, 1rem + 3vw, 2.8rem) 0 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
  font-weight: 700;
}
.section:first-of-type { margin-top: 0.5rem; }

.note { color: var(--muted); font-size: var(--step--1); margin-bottom: 0.6rem; }
.empty {
  color: var(--faint);
  font-size: var(--step-0);
  padding: 1.1rem 0;
}

/* ---- work list (overview cards) ------------------------------------------------------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }

.card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color 0.2s, transform 0.2s;
}
.card:hover { border-color: var(--ember-deep); transform: translateY(-1px); }

.card-body { min-width: 0; flex: 1 1 auto; }
.card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.card-sub {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: var(--step--1);
}

/* state dot on a live card, same ember-lamp vocabulary */
.dot {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--faint);
  box-shadow: 0 0 0.5rem transparent;
}
.dot.working { background: var(--ember); box-shadow: 0 0 0.6rem var(--ember); }
.dot.waiting,
.dot.needs_you { background: #7CC4F2; box-shadow: 0 0 0.6rem #7cc4f2aa; }
.dot.error { background: var(--ember-deep); box-shadow: 0 0 0.6rem var(--ember-deep); }
.card-chevron { flex: none; color: var(--faint); }

/* ---- start-new form ------------------------------------------------------------------- */
.starter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.field-label {
  flex: 1 1 100%;
  font-size: var(--step--1);
  color: var(--faint);
  margin: 0.2rem 0 -0.2rem;
}
.starter input,
.starter select {
  flex: 1 1 9rem;
  min-width: 0;
  min-height: 3rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  font: inherit;
  font-size: var(--step-0);
}
.starter input:focus,
.starter select:focus,
.login input:focus,
.composer textarea:focus {
  outline: none;
  border-color: var(--ember-deep);
  box-shadow: 0 0 0 2px rgba(224, 123, 60, 0.18);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  background: var(--grad);
  color: #1b1206;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0 1.4rem;
  font-family: inherit;
  font-size: var(--step-0);
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
}
.btn:disabled { opacity: 0.5; cursor: default; }
.starter .btn { flex: 0 0 auto; }

/* ---- login ---------------------------------------------------------------------------- */
.login-shell {
  max-width: 26rem;
  margin: clamp(2.5rem, 1.5rem + 5vw, 5rem) auto 0;
}
.login-shell h1 { font-size: var(--step-2); }
.login-shell .lead {
  color: var(--muted);
  font-size: var(--step-1);
  margin: 0.8rem 0 1.8rem;
  max-width: 34ch;
}
.login {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.login input {
  min-height: 3.2rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  font: inherit;
  font-size: var(--step-0);
}
.login .btn { min-height: 3.2rem; }
.form-error {
  border: 1px solid var(--border2);
  background: rgba(224, 123, 60, 0.12);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  margin-bottom: 1.1rem;
  color: var(--text);
  font-size: var(--step--1);
}

/* ---- session: stage views ------------------------------------------------------------- */
.loading { color: var(--muted); font-size: var(--step-0); padding: 1rem 0; }

/* Glance: a sticky status line, replaced in place, never appended */
.statusline {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  margin-bottom: 1.2rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--step-0);
}
.statusline .pulse {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0.6rem var(--ember);
  animation: breathe 2.4s ease-in-out infinite;
}
.statusline.is-waiting .pulse { background: #7CC4F2; box-shadow: 0 0 0.6rem #7cc4f2aa; animation: none; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .statusline .pulse { animation: none; } }

/* Quiet/Glance: calm event cards, only shown when you are actually needed */
.events { display: grid; gap: 0.9rem; }
.event {
  padding: 1.1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ember-deep);
  border-radius: var(--radius);
}
.event.kind-question { border-left-color: var(--ember); }
.event.kind-error { border-left-color: var(--ember-deep); }
.event-lead {
  display: block;
  color: var(--ember);
  font-size: var(--step--1);
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.event-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* the "all quiet" resting state, warm not empty */
.quiet-rest {
  text-align: center;
  color: var(--muted);
  font-size: var(--step-1);
  max-width: 30ch;
  margin: clamp(2.5rem, 1.5rem + 6vw, 5rem) auto;
  text-wrap: balance;
}
.quiet-rest .lamp { margin: 0 auto 1.1rem; display: block; }

/* Full: the flowing conversation (kept, restyled) */
.thread { display: grid; gap: 1rem; }
.msg {
  padding: 1.1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.msg.user { background: var(--surface2); }
.who {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}
.msg.assistant .who { color: var(--ember); }
.msg.user .who { color: #7CC4F2; }
.msg-text { overflow-wrap: anywhere; }

/* rich text (markdown), shared by messages and the reader */
.rt p { margin: 0 0 0.7rem; }
.rt p:last-child { margin-bottom: 0; }
.rt a { color: var(--ember); text-decoration: underline; text-underline-offset: 2px; }
.rt a:hover { color: var(--ember-deep); }
.rt strong { color: var(--text); font-weight: 700; }
.rt code {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  padding: 0.05rem 0.35rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  overflow-wrap: anywhere;
}
.rt .code {
  display: block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  margin: 0.7rem 0;
  overflow-x: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.86em;
  line-height: 1.55;
  white-space: pre;
}
.rt .md-h { font-weight: 700; color: var(--text); margin: 0.8rem 0 0.3rem; }
.rt ul { margin: 0.5rem 0; padding-left: 1.3rem; }
.rt li { margin: 0.25rem 0; }

.tools { display: flex; gap: 0.6rem; margin-top: 0.8rem; flex-wrap: wrap; }
.tool-btn {
  background: transparent;
  color: var(--ember);
  border: 1px solid var(--border2);
  border-radius: 2rem;
  padding: 0.4rem 0.95rem;
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}
.tool-btn:hover { border-color: var(--ember-deep); }

/* ---- composer ------------------------------------------------------------------------- */
.composer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  padding: 0.7rem var(--gutter);
  padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
  background: rgba(12, 11, 10, 0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
}
.composer textarea {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: var(--step-0);
  line-height: 1.5;
  min-height: 4.6rem;   /* about three lines: room to write and to see it */
  max-height: 30vh;     /* beyond that it scrolls inside, never eats the chat */
}
.composer textarea:disabled { opacity: 0.55; }

/* small round ember send, tucked in the corner, never a wide slab over the field */
.send {
  flex: none;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 0;
  background: var(--grad);
  color: #1b1206;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.send:disabled { opacity: 0.45; cursor: default; }

/* ---- reader (big, comfortable reading view) ------------------------------------------- */
.reader {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.reader[hidden] { display: none; }
.reader-bar {
  display: flex;
  padding: 0.85rem var(--gutter);
  padding-top: max(0.85rem, env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
}
.reader-body {
  flex: 1 1 auto;
  overflow-y: auto;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(1.6rem, 1rem + 3vw, 2.6rem) var(--gutter)
           calc(env(safe-area-inset-bottom) + 3rem);
  font-size: var(--step-1);
  line-height: 1.7;
}

/* the reply field inside the reading view flows at the bottom (not viewport-fixed) */
.reader-composer { position: static; }

/* ---- project page (project-first navigation) ------------------------------------------ */
.mark { min-width: 0; overflow-wrap: anywhere; }

/* start a fresh chat: one clear button, naming tucked behind a quiet "more" */
.starter.solo { flex-direction: column; align-items: stretch; gap: 0.6rem; margin-bottom: 0.4rem; }
.btn.block { width: 100%; }
.more-toggle {
  align-self: center;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: var(--step--1);
  padding: 0.2rem 0.4rem;
  cursor: pointer;
}
.more-toggle:hover { color: var(--text); }

/* earlier conversations: folded away so they never flood the project */
.earlier { margin-top: clamp(2rem, 1rem + 3vw, 2.8rem); }
.earlier > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
  font-weight: 700;
  padding: 0.4rem 0;
}
.earlier > summary::-webkit-details-marker { display: none; }
.earlier > summary::before {
  content: "\203A";
  color: var(--faint);
  font-size: 1.1em;
  transition: transform 0.2s;
}
.earlier[open] > summary::before { transform: rotate(90deg); }
.earlier .count {
  color: var(--faint);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
.earlier .cards { margin-top: 0.9rem; }