:root {
  --bg: #101010;
  --bg-soft: #151515;
  --bg-elevated: #181818;
  --bg-sidebar: #131313;
  --surface: rgba(255, 255, 255, 0.03);
  --surface-strong: rgba(255, 255, 255, 0.05);
  --surface-hover: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #f5f3ef;
  --text-strong: #ffffff;
  --muted: rgba(255, 255, 255, 0.58);
  --muted-strong: rgba(255, 255, 255, 0.76);
  --accent: #f3ede2;
  --accent-ink: #111111;
  --attention: #f4d58d;
  --success: #9dd3b7;
  --radius-2xl: 28px;
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-lg: 0 26px 70px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.18);
  --sidebar-width: 264px;
  --panel-width: 380px;
  --font-body: "Avenir Next", "SF Pro Display", "Segoe UI Variable", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", "Menlo", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top center, rgba(255, 255, 255, 0.045), transparent 22%),
    linear-gradient(180deg, #0d0d0d 0%, #101010 48%, #0f0f0f 100%);
  color: var(--text);
  font-family: var(--font-body);
}

button,
input,
textarea {
  font: inherit;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.shell {
  min-height: 100vh;
  padding: 16px;
}

.shell[data-access="gated"] {
  display: grid;
  place-items: center;
}

.shell[data-access="gated"] .app-frame {
  display: none;
}

.shell[data-access="granted"] .gate-screen {
  display: none;
}

.gate-screen {
  width: min(720px, 100%);
  display: grid;
  gap: 24px;
}

.gate-screen__copy {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}

.gate-screen__eyebrow,
.sidebar__eyebrow,
.workspace-topbar__eyebrow,
.landing-panel__eyebrow,
.thread-panel__eyebrow,
.composer__lead-label,
.side-panel__eyebrow,
.side-panel__section-eyebrow,
.message__author,
.artifact-card__kind,
.panel-card__kind {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gate-screen h1,
.workspace-topbar h1,
.landing-panel h2,
.thread-panel h2,
.message h3,
.side-panel h2,
.artifact-card h3,
.panel-card h3,
.sidebar h2 {
  margin: 0;
  color: var(--text-strong);
  letter-spacing: -0.04em;
}

.gate-screen h1 {
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1.02;
}

.gate-screen__summary,
.workspace-topbar__subtitle,
.landing-panel__summary,
.access-banner__copy p,
.access-banner__note,
.composer__example,
.message__body,
.artifact-card__body,
.panel-card__body,
.side-panel__summary {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.access-banner,
.sidebar,
.workspace,
.side-panel,
.thread-panel,
.composer,
.message,
.artifact-card,
.panel-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: rgba(20, 20, 20, 0.9);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(16px);
}

.access-banner {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.access-banner__copy {
  display: grid;
  gap: 4px;
}

.access-banner__copy strong {
  color: var(--text-strong);
  font-size: 1.05rem;
}

.access-banner__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 0;
}

.access-banner__submit {
  min-height: 42px;
  padding: 0 16px;
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-strong);
}

.access-banner__note[data-tone="neutral"],
.access-banner__note[data-tone="info"] {
  color: var(--muted);
}

.access-banner__note[data-tone="success"] {
  color: var(--success);
}

.access-banner__note[data-tone="error"] {
  color: #f7b4b4;
}

.access-banner input,
.composer textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(10, 10, 10, 0.9);
  color: var(--text);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.access-banner input {
  min-height: 58px;
  padding: 0 18px;
}

.access-banner input::placeholder,
.composer textarea::placeholder {
  color: rgba(255, 255, 255, 0.34);
}

.access-banner input:focus,
.composer textarea:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 4px rgba(243, 237, 226, 0.05);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease, opacity 0.14s ease;
}

.button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.button--primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.button--ghost {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.button--compact {
  min-height: 38px;
  padding: 0 14px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}

.chip:hover {
  background: rgba(255, 255, 255, 0.06);
}

.chip--example {
  justify-content: flex-start;
}

.app-frame {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: 18px;
  min-height: calc(100vh - 32px);
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 18px 14px;
  background: rgba(18, 18, 18, 0.92);
}

.sidebar__brand {
  display: grid;
  gap: 4px;
}

.sidebar h2 {
  font-size: 1.02rem;
}

.sidebar__new {
  width: 100%;
}

.project-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
}

.project-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 4px;
  border-radius: 18px;
  border: 1px solid transparent;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.project-card.is-active,
.project-card:hover {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.035);
}

.project-card__main,
.project-card__menu {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.project-card__main {
  min-width: 0;
  padding: 10px 10px 10px 12px;
  text-align: left;
}

.project-card__title {
  display: block;
  color: var(--text-strong);
  font-size: 0.96rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-card__menu {
  min-width: 38px;
  min-height: 38px;
  border-radius: 999px;
}

.project-card__menu:hover {
  background: rgba(255, 255, 255, 0.06);
}

.project-actions-menu {
  position: fixed;
  z-index: 40;
  min-width: 190px;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: rgba(20, 20, 20, 0.98);
  box-shadow: var(--shadow-md);
}

.project-actions-menu button {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.project-actions-menu button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.project-actions-menu [data-role="project-actions-delete"] {
  color: #f7b4b4;
}

.workspace-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  min-height: calc(100vh - 32px);
}

.workspace-shell[data-panel-open="true"] {
  grid-template-columns: minmax(0, 1fr) minmax(300px, var(--panel-width));
}

.workspace {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 20px;
  background: rgba(17, 17, 17, 0.84);
}

.workspace-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.workspace-topbar__main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.workspace-topbar__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.workspace-topbar h1 {
  font-size: clamp(1.5rem, 2vw, 1.95rem);
  line-height: 1.08;
}

.workspace-topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.landing-panel {
  display: grid;
  gap: 18px;
  justify-items: center;
  padding: 20px 0 10px;
  text-align: center;
}

.landing-panel__copy {
  display: grid;
  gap: 10px;
  max-width: 760px;
}

.landing-panel h2 {
  font-size: clamp(1.8rem, 3.8vw, 3rem);
  line-height: 1.02;
}

.home-examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 820px;
}

.thread-panel {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-content: start;
  min-height: 0;
  max-height: min(52vh, 760px);
  overflow-y: auto;
  padding: 6px 0 12px;
}

.chat-log::-webkit-scrollbar {
  width: 10px;
}

.chat-log::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  background-clip: padding-box;
}

.message {
  display: grid;
  gap: 8px;
  align-self: flex-start;
  width: fit-content;
  max-width: min(70ch, 82%);
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
}

.message__meta {
  display: none;
}

.message__kind {
  color: var(--muted);
  font-size: 0.84rem;
}

.message__attachments,
.message__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.message__title {
  margin: 0;
  color: var(--text-strong);
  font-size: 0.95rem;
  line-height: 1.35;
}

.message__body {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
  line-height: 1.55;
}

.message--user {
  align-self: flex-end;
  border-color: rgba(151, 177, 255, 0.16);
  background: rgba(121, 150, 255, 0.14);
}

.message--system {
  display: none;
}

.message--artifact {
  border-color: rgba(157, 211, 183, 0.16);
  background: rgba(157, 211, 183, 0.08);
}

.composer-dock {
  position: sticky;
  bottom: 0;
  z-index: 3;
  padding-bottom: 6px;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 0.88) 18%, rgba(17, 17, 17, 1) 100%);
}

.composer {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: rgba(22, 22, 22, 0.95);
}

.composer__lead {
  display: grid;
  gap: 4px;
}

.composer__question {
  color: var(--text-strong);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
}

.composer textarea {
  min-height: 52px;
  max-height: 220px;
  padding: 14px 18px;
  line-height: 1.4;
  resize: none;
  overflow-y: hidden;
}

.composer__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.composer__tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.attach-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1;
}

.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.attachment-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}

.attachment-pill__label {
  color: var(--text-strong);
  font-size: 0.92rem;
}

.attachment-pill__meta {
  color: var(--muted);
  font-size: 0.82rem;
}

.attachment-pill__remove {
  border: 0;
  background: transparent;
  color: var(--muted-strong);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.composer-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.14s ease, opacity 0.14s ease;
}

.composer-send:hover:not(:disabled) {
  transform: translateY(-1px);
}

.composer-send:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.composer-send[data-mode="stop"] {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-strong);
  font-size: 1.25rem;
  border-color: var(--border-strong);
}

.composer__notice {
  min-height: 1.2rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.composer__notice[data-tone="warning"] {
  color: var(--attention);
}

.composer__notice[data-tone="error"] {
  color: #f6a5a5;
}

.composer__notice[data-tone="info"] {
  color: var(--muted-strong);
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding: 18px;
  background: rgba(18, 18, 18, 0.92);
}

.side-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.side-panel__header > div {
  display: grid;
  gap: 4px;
}

.panel-card-list,
.artifact-list {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
}

.panel-card,
.artifact-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
}

.panel-card__meta,
.artifact-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.panel-card__actions,
.artifact-card__button {
  margin-top: 4px;
}

.panel-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.side-panel__section {
  display: grid;
  gap: 12px;
}

.side-panel__section-head {
  display: grid;
  gap: 4px;
}

.artifact-empty {
  color: var(--muted);
}

.debug-surface {
  display: none;
}

.message__body,
.panel-card__body,
.artifact-card__body {
  white-space: pre-wrap;
}

@media (max-width: 1180px) {
  .workspace-shell[data-panel-open="true"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .side-panel {
    order: 3;
  }
}

@media (max-width: 920px) {
  .shell {
    padding: 10px;
  }

  .app-frame {
    grid-template-columns: 1fr;
  }

  .sidebar {
    order: 2;
  }

  .workspace {
    order: 1;
  }

  .workspace-topbar,
  .composer__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .composer-send {
    width: 52px;
    border-radius: 50%;
    min-height: 46px;
  }

  .landing-panel {
    padding-top: 10px;
  }

  .landing-panel h2 {
    font-size: clamp(1.8rem, 9vw, 2.7rem);
  }

  .chat-log {
    max-height: none;
  }

  .access-banner__controls {
    grid-template-columns: 1fr;
  }
}