:root {

  --bg0: #0c1210;

  --bg1: #121a17;

  --bg2: #18231e;

  --line: rgba(180, 210, 190, 0.12);

  --text: #e7efe9;

  --muted: #8fa398;

  --accent: #c4a35a;

  --accent-dim: rgba(196, 163, 90, 0.18);

  --green: #6f9b7a;

  --danger: #c76b6b;

  --ok: #7eb89a;

  --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);

  --font-sans: "Source Sans 3", "Segoe UI", sans-serif;

  --font-display: "Fraunces", "Georgia", serif;

  --radius: 10px;

  --max: 920px;

}



* { box-sizing: border-box; }



html, body {

  margin: 0;

  min-height: 100%;

  color: var(--text);

  font-family: var(--font-sans);

  background:

    radial-gradient(1200px 600px at 10% -10%, rgba(111, 155, 122, 0.16), transparent 55%),

    radial-gradient(900px 500px at 100% 0%, rgba(196, 163, 90, 0.1), transparent 50%),

    linear-gradient(180deg, var(--bg0), var(--bg1) 40%, #0a100e);

  background-attachment: fixed;

}



body {

  line-height: 1.5;

}



a { color: var(--accent); text-decoration: none; }

a:hover { text-decoration: underline; }



.shell {

  width: min(var(--max), calc(100% - 2rem));

  margin: 0 auto;

  padding: 1.5rem 0 3rem;

}



.topbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  margin-bottom: 2rem;

  animation: rise 0.55s ease both;

}



.brand {

  display: flex;

  flex-direction: column;

  gap: 0.15rem;

}



.brand-mark {

  font-family: var(--font-display);

  font-weight: 560;

  font-size: clamp(1.55rem, 3vw, 2.15rem);

  letter-spacing: -0.02em;

  color: var(--text);

}



.brand-mark span {

  color: var(--accent);

}



.brand-sub {

  color: var(--muted);

  font-size: 0.92rem;

}



.actions {

  display: flex;

  gap: 0.6rem;

  flex-wrap: wrap;

}



button, .btn {

  appearance: none;

  border: 1px solid var(--line);

  background: var(--bg2);

  color: var(--text);

  border-radius: 999px;

  padding: 0.62rem 1.05rem;

  font: inherit;

  cursor: pointer;

  transition: border-color 0.2s, background 0.2s, transform 0.15s;

}



button:hover, .btn:hover {

  border-color: rgba(196, 163, 90, 0.45);

  background: #1d2a23;

}



button:active, .btn:active { transform: translateY(1px); }



button.primary, .btn.primary {

  background: linear-gradient(180deg, #d2b36a, #b8923f);

  color: #1a1408;

  border-color: transparent;

  font-weight: 600;

}



button.ghost {

  background: transparent;

}



button.danger {

  color: #f0c4c4;

  border-color: rgba(199, 107, 107, 0.35);

}



button:disabled {

  opacity: 0.55;

  cursor: not-allowed;

}



.hero-line {

  margin: 0 0 1.4rem;

  color: var(--muted);

  max-width: 40rem;

  animation: rise 0.7s ease both;

}



/* Lobby / title page */

.lobby-page {

  overflow-x: hidden;

}



.botanical-bg {

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 0;

  overflow: hidden;

}



.botanical-bg .leaf {

  position: absolute;

  color: rgba(111, 155, 122, 0.22);

  opacity: 0.7;

}



.botanical-bg .leaf-a {

  width: min(38vw, 340px);

  right: -2%;

  top: 8%;

  animation: leaf-a 14s ease-in-out infinite alternate;

}



.botanical-bg .leaf-b {

  width: min(28vw, 240px);

  left: -4%;

  bottom: 12%;

  color: rgba(196, 163, 90, 0.14);

  animation: leaf-b 18s ease-in-out infinite alternate;

}



.botanical-bg .mist {

  position: absolute;

  border-radius: 50%;

  filter: blur(60px);

}



.mist-1 {

  width: 50vw;

  height: 40vh;

  top: -8%;

  right: 10%;

  background: rgba(111, 155, 122, 0.12);

  animation: mist-shift 16s ease-in-out infinite alternate;

}



.mist-2 {

  width: 40vw;

  height: 35vh;

  bottom: 5%;

  left: -5%;

  background: rgba(196, 163, 90, 0.08);

  animation: mist-shift 20s ease-in-out infinite alternate-reverse;

}



.lobby-nav {

  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  width: min(1100px, calc(100% - 2rem));

  margin: 0 auto;

  padding: 1.1rem 0 0.4rem;

  animation: rise 0.5s ease both;

}



.brand-inline {

  display: flex;

  align-items: center;

  gap: 0.55rem;

}



.brand-inline .brand-mark {

  font-size: 1.15rem;

}



.brand-glyph {

  width: 0.7rem;

  height: 0.7rem;

  border-radius: 50% 50% 50% 0;

  background: linear-gradient(145deg, #d2b36a, #6f9b7a);

  transform: rotate(-45deg);

  box-shadow: 0 0 18px rgba(111, 155, 122, 0.35);

}



.lobby-hero {

  position: relative;

  z-index: 1;

  min-height: calc(100vh - 4.5rem);

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  align-items: center;

  gap: 2.5rem;

  width: min(1100px, calc(100% - 2rem));

  margin: 0 auto;

  padding: 2rem 0 3rem;

}



.lobby-hero-copy {

  animation: rise 0.7s ease both;

}



.lobby-brand {

  font-family: var(--font-display);

  font-weight: 650;

  font-size: clamp(3.2rem, 8vw, 5.4rem);

  letter-spacing: -0.035em;

  line-height: 0.95;

  margin: 0 0 1.1rem;

  color: var(--text);

}



.lobby-brand span,

.brand-mark span {

  color: var(--accent);

}



.login-brand {

  font-size: clamp(2.4rem, 6vw, 3.2rem);

  margin-bottom: 0.5rem;

}



.lobby-headline {

  font-family: var(--font-display);

  font-weight: 500;

  font-size: clamp(1.25rem, 2.4vw, 1.65rem);

  color: #c9d8ce;

  margin: 0 0 0.85rem;

  max-width: 18ch;

  animation: rise 0.85s ease both;

}



.lobby-lead {

  margin: 0 0 1.6rem;

  color: var(--muted);

  max-width: 36rem;

  font-size: 1.05rem;

  line-height: 1.55;

  animation: rise 1s ease both;

}



.lobby-cta {

  animation: rise 1.1s ease both;

}



.lobby-cta .primary {

  padding: 0.8rem 1.4rem;

  font-size: 1.02rem;

}



.lobby-hero-visual {

  display: flex;

  justify-content: flex-end;

  animation: rise 1s ease 0.1s both;

}



.lab-panel {

  width: min(100%, 340px);

  padding: 1.6rem 1.5rem;

  border: 1px solid rgba(180, 210, 190, 0.16);

  background:

    linear-gradient(160deg, rgba(24, 35, 30, 0.92), rgba(12, 18, 16, 0.75));

  box-shadow: var(--shadow);

  position: relative;

  overflow: hidden;

}



.lab-panel::before {

  content: "";

  position: absolute;

  inset: 0;

  background:

    repeating-linear-gradient(

      -12deg,

      transparent,

      transparent 14px,

      rgba(111, 155, 122, 0.03) 14px,

      rgba(111, 155, 122, 0.03) 15px

    );

  pointer-events: none;

}



.lab-line {

  position: relative;

  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;

  font-size: 0.86rem;

  letter-spacing: 0.02em;

  margin: 0.45rem 0;

  color: #d5e2d8;

}



.lab-line.dim { color: var(--muted); }

.lab-line.accent { color: var(--accent); }



.lab-rule {

  height: 1px;

  margin: 1rem 0;

  background: linear-gradient(90deg, transparent, rgba(196, 163, 90, 0.55), transparent);

}



.lobby-body {

  position: relative;

  z-index: 1;

  padding-top: 0.5rem;

  animation: rise 0.9s ease both;

}



.section-label {

  font-family: var(--font-display);

  font-weight: 560;

  font-size: 1.15rem;

  margin: 0 0 0.75rem;

  color: #c9d8ce;

}



.chat-list {

  display: flex;

  flex-direction: column;

  gap: 0.55rem;

  animation: rise 0.8s ease both;

}



@keyframes leaf-a {

  from { transform: translateY(0) rotate(18deg); }

  to { transform: translateY(14px) rotate(24deg); }

}



@keyframes leaf-b {

  from { transform: translateY(0) rotate(-28deg); }

  to { transform: translateY(-10px) rotate(-22deg); }

}



@keyframes mist-shift {

  from { transform: translate(0, 0) scale(1); }

  to { transform: translate(-3%, 4%) scale(1.06); }

}



@media (max-width: 860px) {

  .lobby-hero {

    grid-template-columns: 1fr;

    min-height: auto;

    padding: 1.5rem 0 2rem;

    gap: 1.75rem;

  }



  .lobby-hero-visual {

    justify-content: flex-start;

  }



  .lab-panel {

    width: 100%;

  }



  .lobby-headline {

    max-width: none;

  }

}



.chat-row {

  display: grid;

  grid-template-columns: 1fr auto;

  gap: 0.75rem;

  align-items: center;

  padding: 0.95rem 1rem;

  border-top: 1px solid var(--line);

  transition: background 0.2s;

}



.chat-row:first-child { border-top: none; }



.chat-row:hover { background: rgba(255, 255, 255, 0.02); }



.chat-row a.title {

  color: var(--text);

  font-weight: 560;

  text-decoration: none;

}



.chat-row a.title:hover { color: var(--accent); }



.meta {

  color: var(--muted);

  font-size: 0.85rem;

  margin-top: 0.2rem;

}



.empty {

  color: var(--muted);

  padding: 2rem 0;

  border-top: 1px solid var(--line);

}



/* Chat window */

.chat-page {

  min-height: 100vh;

  display: grid;

  grid-template-rows: auto 1fr auto;

}



.chat-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  padding: 0.9rem 1.2rem;

  border-bottom: 1px solid var(--line);

  background: rgba(12, 18, 16, 0.85);

  backdrop-filter: blur(10px);

  position: sticky;

  top: 0;

  z-index: 5;

}



.chat-header .brand-mark { font-size: 1.2rem; }



.mode-toggle {

  display: inline-flex;

  padding: 0.2rem;

  border: 1px solid var(--line);

  border-radius: 999px;

  background: var(--bg1);

}



.mode-toggle button {

  border: none;

  background: transparent;

  padding: 0.4rem 0.85rem;

  border-radius: 999px;

  color: var(--muted);

}



.mode-toggle button.active {

  background: var(--accent-dim);

  color: var(--accent);

}



.messages {

  width: min(780px, calc(100% - 1.5rem));

  margin: 0 auto;

  padding: 1.25rem 0 1.5rem;

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.msg {

  animation: rise 0.35s ease both;

}



.msg.user .bubble {

  margin-left: auto;

  max-width: 85%;

  background: #203028;

  border: 1px solid var(--line);

  border-radius: 16px 16px 4px 16px;

  padding: 0.85rem 1rem;

  white-space: pre-wrap;

}



.msg.assistant .bubble {

  max-width: 100%;

  padding: 0.2rem 0;

}



.msg .role {

  font-size: 0.75rem;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: var(--muted);

  margin-bottom: 0.35rem;

}



.thinking-pill {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  color: var(--muted);

  font-size: 0.95rem;

  padding: 0.55rem 0.85rem;

  border-radius: 999px;

  background: rgba(111, 155, 122, 0.1);

  border: 1px solid rgba(111, 155, 122, 0.2);

}



.thinking-pill .dot {

  width: 0.45rem;

  height: 0.45rem;

  border-radius: 50%;

  background: var(--green);

  animation: pulse 1.1s ease-in-out infinite;

}



.composer-wrap {

  border-top: 1px solid var(--line);

  background: rgba(12, 18, 16, 0.92);

  backdrop-filter: blur(10px);

  padding: 0.9rem 1rem 1.1rem;

}



.composer {

  width: min(780px, 100%);

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr auto;

  gap: 0.65rem;

  align-items: end;

}



.composer textarea {

  width: 100%;

  resize: none;

  min-height: 52px;

  max-height: 180px;

  border-radius: 14px;

  border: 1px solid var(--line);

  background: var(--bg2);

  color: var(--text);

  padding: 0.85rem 1rem;

  font: inherit;

  outline: none;

}



.composer textarea:focus {

  border-color: rgba(196, 163, 90, 0.55);

  box-shadow: 0 0 0 3px var(--accent-dim);

}



.next-steps {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  margin-top: 0.85rem;

}



.next-steps button {

  border-radius: 999px;

  background: transparent;

  border: 1px dashed rgba(196, 163, 90, 0.45);

  color: var(--accent);

  font-size: 0.9rem;

}



.next-steps button:hover {

  background: var(--accent-dim);

}



.error-box {

  color: #f0c4c4;

  background: rgba(199, 107, 107, 0.12);

  border: 1px solid rgba(199, 107, 107, 0.35);

  border-radius: var(--radius);

  padding: 0.75rem 0.9rem;

}



/* Markdown */

.md h1, .md h2, .md h3, .md h4 {

  font-family: var(--font-display);

  font-weight: 560;

  line-height: 1.25;

  margin: 1.1rem 0 0.55rem;

}



.md h1 { font-size: 1.45rem; }

.md h2 { font-size: 1.25rem; }

.md h3 { font-size: 1.1rem; }



.md p { margin: 0.55rem 0; }



.md ul, .md ol {

  margin: 0.45rem 0;

  padding-left: 1.35rem;

}



.md li { margin: 0.25rem 0; }



.md code {

  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;

  font-size: 0.9em;

  background: rgba(255, 255, 255, 0.06);

  padding: 0.1em 0.35em;

  border-radius: 4px;

}



.md pre {

  overflow: auto;

  background: #0a100e;

  border: 1px solid var(--line);

  border-radius: 8px;

  padding: 0.85rem 1rem;

}



.md pre code {

  background: none;

  padding: 0;

}



.md table {

  width: 100%;

  border-collapse: collapse;

  margin: 0.75rem 0;

  font-size: 0.95rem;

}



.md th, .md td {

  border: 1px solid var(--line);

  padding: 0.45rem 0.6rem;

  text-align: left;

  vertical-align: top;

}



.md th {

  background: rgba(255, 255, 255, 0.04);

  color: var(--accent);

}



.md blockquote {

  margin: 0.7rem 0;

  padding: 0.2rem 0 0.2rem 0.9rem;

  border-left: 3px solid var(--accent);

  color: var(--muted);

}



.md a { word-break: break-word; }



.md hr {

  border: none;

  border-top: 1px solid var(--line);

  margin: 1rem 0;

}



/* Login */

.login-shell {

  min-height: 100vh;

  display: grid;

  place-items: center;

  padding: 1.5rem;

}



.login-panel {

  width: min(420px, 100%);

  animation: rise 0.55s ease both;

}



.login-panel h1 {

  font-family: var(--font-display);

  font-size: 2rem;

  margin: 0 0 0.35rem;

}



.login-panel p {

  color: var(--muted);

  margin: 0 0 1.4rem;

}



.field {

  display: flex;

  flex-direction: column;

  gap: 0.35rem;

  margin-bottom: 0.9rem;

}



.field label {

  color: var(--muted);

  font-size: 0.9rem;

}



.field input {

  border: 1px solid var(--line);

  background: var(--bg2);

  color: var(--text);

  border-radius: 10px;

  padding: 0.75rem 0.9rem;

  font: inherit;

  outline: none;

}



.field input:focus {

  border-color: rgba(196, 163, 90, 0.55);

  box-shadow: 0 0 0 3px var(--accent-dim);

}



.login-panel .primary {

  width: 100%;

  margin-top: 0.4rem;

}



@keyframes rise {

  from { opacity: 0; transform: translateY(8px); }

  to { opacity: 1; transform: none; }

}



@keyframes pulse {

  0%, 100% { opacity: 0.35; transform: scale(0.9); }

  50% { opacity: 1; transform: scale(1.1); }

}



@media (max-width: 640px) {

  .topbar { flex-direction: column; align-items: flex-start; }

  .chat-header { flex-wrap: wrap; }

  .msg.user .bubble { max-width: 100%; }

  .chat-header .actions {
    width: 100%;
    justify-content: flex-start;
  }

  .chat-header .actions .primary {
    flex: 1 1 auto;
  }

  .chats-drawer {
    width: min(100vw - 1.5rem, 360px);
  }
}

/* Chat switcher drawer */
.chat-header .brand-mark {
  color: inherit;
  text-decoration: none;
}

.chat-header .brand-mark:hover {
  text-decoration: none;
  color: var(--text);
}

.chat-header .brand-mark span {
  color: var(--accent);
}

body.drawer-open {
  overflow: hidden;
}

.chats-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(4, 8, 6, 0.55);
  backdrop-filter: blur(2px);
  animation: rise 0.2s ease both;
}

.chats-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  width: min(360px, 92vw);
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1rem 1.25rem;
  background:
    linear-gradient(180deg, rgba(24, 35, 30, 0.98), rgba(12, 18, 16, 0.98));
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35);
  animation: drawer-in 0.25s ease both;
}

.chats-drawer[hidden],
.chats-drawer-backdrop[hidden] {
  display: none !important;
}

.chats-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.chats-drawer-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 1.25rem;
  color: var(--text);
}

.chats-drawer-new {
  width: 100%;
}

.chats-drawer-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  overflow: auto;
  flex: 1;
  padding-right: 0.15rem;
}

.chats-drawer-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.chats-drawer-item:hover {
  border-color: rgba(196, 163, 90, 0.45);
  background: var(--accent-dim);
}

.chats-drawer-item.is-active {
  border-color: rgba(196, 163, 90, 0.7);
  background: rgba(196, 163, 90, 0.14);
}

.chats-drawer-item-title {
  font-weight: 560;
  font-size: 0.98rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chats-drawer-item-meta {
  font-size: 0.82rem;
  color: var(--muted);
}

.chats-drawer-empty {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

@keyframes drawer-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}