:root {
  color-scheme: dark;
  --ink: #e8eee9;
  --muted: #829087;
  --dim: #4e5b53;
  --green: #9dff7a;
  --green-strong: #bdff97;
  --green-glow: rgba(157, 255, 122, 0.16);
  --bg: #060907;
  --panel: #0a0f0b;
  --panel-2: #0e1510;
  --line: #202b23;
  --line-hot: #3b6942;
  --sidebar: 17.5rem;
  --space-1: 0.4rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  font-family: "DM Mono", Consolas, monospace;
}

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

html, body { min-height: 100%; }

body {
  margin: 0;
  min-width: 20rem;
  color: var(--ink);
  background:
    radial-gradient(circle at 48% 10%, rgba(75, 129, 73, 0.09), transparent 34rem),
    var(--bg);
  line-height: 1.5;
  overflow: hidden;
}

button, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

button:focus-visible, a:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.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;
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0.22;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(255,255,255,0.022) 4px);
  mix-blend-mode: screen;
}

.app-shell { height: 100dvh; display: grid; }

.sidebar { display: none; }

.app-nav { display: grid; gap: .35rem; margin: 0 0 1.25rem; }
.app-nav-group { display: grid; gap: .25rem; min-width: 0; }
.app-nav-item { display: flex; align-items: center; gap: .65rem; min-height: 2.9rem; padding: .55rem .6rem; border: 1px solid transparent; border-radius: .2rem; color: var(--muted); background: transparent; text-align: left; cursor: pointer; }
.app-nav-item > span:first-child { width: 1.25rem; color: var(--dim); text-align: center; }
.app-nav-item > span:last-child { display: grid; min-width: 0; }
.app-nav-item strong { color: #aab5ad; font: 500 .65rem "Space Mono", monospace; }
.app-nav-item small { color: var(--dim); font-size: .48rem; }
.app-nav-item:hover, .app-nav-item.is-active { color: var(--green); border-color: var(--line-hot); background: var(--green-glow); }
.app-nav-item.is-active > span:first-child, .app-nav-item.is-active strong { color: var(--green); }
.app-nav-caret { margin-left: auto; color: var(--dim); font-size: .8rem; font-weight: 400; transition: transform 160ms ease; }
.app-nav-item[aria-expanded="false"] .app-nav-caret { transform: rotate(-90deg); }
.app-subnav { display: grid; gap: .18rem; max-height: 19rem; overflow-y: auto; padding: .15rem .15rem .2rem 1.9rem; scrollbar-color: var(--line-hot) transparent; scrollbar-width: thin; }
.app-subnav[hidden] { display: none; }
.app-subnav-item { display: flex; align-items: center; gap: .45rem; min-width: 0; padding: .42rem .45rem; border: 1px solid transparent; border-radius: .15rem; color: var(--muted); background: transparent; text-align: left; cursor: pointer; font-size: .52rem; }
.app-subnav-item::before { content: "·"; color: var(--dim); }
.app-subnav-item:hover, .app-subnav-item.is-active { color: var(--green); border-color: var(--line); background: rgba(157,255,122,.06); }
.app-subnav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-subnav-loading { padding: .5rem; color: var(--dim); font-size: .48rem; letter-spacing: .06em; }

.menu-toggle { display: grid; place-items: center; font-size: 1.05rem; }

.images-panel { min-width: 0; height: 100dvh; grid-template-rows: auto minmax(0, 1fr); background-image: linear-gradient(rgba(106, 144, 111, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(106, 144, 111, .025) 1px, transparent 1px); background-size: 2rem 2rem; }
.images-panel:not([hidden]) { display: grid; }
.images-content { overflow-y: auto; padding: 1.5rem var(--space-3) 3rem; }
.images-hero, .image-feature-toolbar, .image-feature-grid { width: min(100%, 70rem); margin-inline: auto; }
.images-hero { margin-bottom: 1.25rem; }
.images-hero h1 { margin: 0; color: var(--ink); font: 700 clamp(1.25rem, 4vw, 2.1rem) "Space Mono", monospace; letter-spacing: -.04em; }
.images-hero p:not(.eyebrow) { max-width: 52ch; margin: .55rem 0 0; color: var(--muted); font-size: .7rem; }
.image-feature-toolbar { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; }
.image-search { position: relative; flex: 1 1 14rem; }
.image-search input { width: 100%; min-height: 2.5rem; padding: .65rem 2rem .65rem .75rem; border: 1px solid var(--line); border-radius: .25rem; background: #0b110d; color: var(--ink); font: 500 .65rem "Space Mono", monospace; }
.image-search input:focus { outline: none; border-color: var(--line-hot); box-shadow: 0 0 0 2px var(--green-glow); }
.image-search > span { position: absolute; top: 50%; right: .75rem; color: var(--dim); transform: translateY(-50%); }
.image-feature-count { flex: 0 0 auto; color: var(--green); font-size: .52rem; letter-spacing: .08em; }
.image-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .7rem; }
.image-feature-card { display: grid; gap: .55rem; min-height: 8.2rem; padding: .9rem; border: 1px solid var(--line); border-radius: .35rem; color: var(--ink); background: linear-gradient(145deg, rgba(19, 30, 21, .92), rgba(9, 14, 10, .96)); text-align: left; cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.image-feature-card:hover, .image-feature-card:focus-visible { border-color: var(--line-hot); box-shadow: 0 0 1.5rem rgba(157,255,122,.08); transform: translateY(-2px); }
.image-feature-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.image-feature-card strong { font: 700 .7rem "Space Mono", monospace; letter-spacing: .02em; }
.image-feature-card .feature-index { color: var(--green); font-size: .5rem; }
.image-feature-card p { margin: 0; color: var(--muted); font-size: .59rem; line-height: 1.45; }
.image-feature-card footer { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-top: auto; color: var(--dim); font-size: .48rem; }
.image-feature-card footer span:last-child { color: var(--green); }
.image-feature-loading { grid-column: 1 / -1; padding: 2rem; border: 1px dashed var(--line); color: var(--dim); text-align: center; font-size: .58rem; letter-spacing: .08em; }
.image-feature-sheet { position: fixed; inset: 0; z-index: 30; display: grid; place-items: end center; }
.image-feature-sheet[hidden] { display: none; }
.image-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.68); backdrop-filter: blur(3px); }
.image-sheet-card { position: relative; display: flex; width: min(100%, 42rem); max-height: min(90dvh, 52rem); min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line-hot); border-radius: .6rem .6rem 0 0; background: #0a100c; box-shadow: 0 -1rem 3rem rgba(0,0,0,.35); animation: message-in 220ms ease both; }
.image-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.image-sheet-head h2 { margin: 0; color: var(--green); font: 700 .95rem "Space Mono", monospace; }
.image-sheet-head p:last-child { max-width: 46ch; margin: .35rem 0 0; color: var(--muted); font-size: .58rem; }
.image-sheet-body { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 1rem; scrollbar-color: var(--line-hot) transparent; scrollbar-width: thin; }
.image-sheet-body .image-requirements { margin: 0; }
.image-sheet-body .image-plan-actions { margin-top: 1rem; }
.image-sheet-assets { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: 1rem; padding: .65rem; border: 1px dashed var(--line); color: var(--muted); font-size: .55rem; }
.image-upload-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.image-sheet-assets button { padding: .5rem .65rem; border: 1px solid var(--line-hot); border-radius: .2rem; color: var(--green); background: var(--green-glow); cursor: pointer; font: 700 .52rem "Space Mono", monospace; }
.image-camera-action { display: none; }

@media (max-width: 55.99rem) {
  .camera-button, .image-camera-action { display: grid; }
  .image-camera-action { display: inline-flex; align-items: center; justify-content: center; }
  .sidebar.is-open { position: fixed; inset: 0 auto 0 0; z-index: 50; display: flex; width: min(var(--sidebar), 86vw); min-height: 100dvh; padding: 1.25rem 1rem; flex-direction: column; background: #080c09; border-right: 1px solid var(--line-hot); box-shadow: 1rem 0 3rem rgba(0,0,0,.35); }
  .sidebar.is-open .brand, .sidebar.is-open .new-chat, .sidebar.is-open .app-nav, .sidebar.is-open .history, .sidebar.is-open .sidebar-footer { display: grid; }
  .sidebar.is-open .brand { display: flex; align-items: center; gap: .75rem; padding: 0 .45rem; color: inherit; text-decoration: none; }
  .sidebar.is-open .brand > span:last-child { display: grid; }
  .sidebar.is-open .brand strong { font: 700 .95rem "Space Mono", monospace; letter-spacing: .11em; }
  .sidebar.is-open .brand small { color: var(--muted); font-size: .5rem; letter-spacing: .15em; }
  .sidebar.is-open .new-chat { min-height: 2.8rem; margin: 1.6rem 0 1rem; color: var(--green); background: rgba(157,255,122,.05); border: 1px dashed var(--line-hot); border-radius: .2rem; text-align: left; cursor: pointer; }
  .sidebar.is-open .new-chat span { margin: 0 .6rem 0 .35rem; }
  .sidebar.is-open .history { display: none; }
  .sidebar.is-open .sidebar-footer { margin-top: auto; }
  .images-content { padding-top: 1.25rem; }
}

.chat-panel {
  min-width: 0;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background-image:
    linear-gradient(rgba(106, 144, 111, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106, 144, 111, 0.025) 1px, transparent 1px);
  background-size: 2rem 2rem;
}

.topbar {
  position: relative;
  z-index: 2;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.7rem var(--space-3);
  border-bottom: 1px solid var(--line);
  background: rgba(7, 11, 8, 0.9);
  backdrop-filter: blur(12px);
}

.mobile-brand { color: inherit; text-decoration: none; }

.brand-mark {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #0b110d;
  background: var(--green);
  border-radius: 0.2rem;
  font: 700 1.05rem/1 "Space Mono", monospace;
  box-shadow: 0 0 1.25rem var(--green-glow);
  transform: skew(-3deg);
}

.brand-mark span { opacity: 0.55; }

.chat-identity { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.chat-identity > span:last-child { display: grid; min-width: 0; }
.chat-identity strong { font: 700 0.82rem/1.3 "Space Mono", monospace; letter-spacing: 0.05em; }
.chat-identity small { color: var(--muted); font-size: 0.63rem; white-space: nowrap; }

.status-orb {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0.25rem rgba(157, 255, 122, 0.08), 0 0 0.8rem var(--green);
  animation: pulse 2.4s ease-in-out infinite;
}

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 0.55rem; }
.latency { display: none; color: var(--green); font-size: 0.62rem; }

.icon-button, .attach-button, .camera-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.icon-button { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 0.25rem; }
.icon-button:hover { color: var(--green); border-color: var(--line-hot); background: var(--green-glow); }
.icon-button svg, .attach-button svg, .camera-button svg, .send-button svg { width: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.messages {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem var(--space-3) 2rem;
  scrollbar-color: var(--line-hot) transparent;
  scrollbar-width: thin;
}

.messages > * { width: min(100%, 47rem); margin-inline: auto; }

.date-divider { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; color: var(--dim); font-size: 0.58rem; letter-spacing: 0.14em; }
.date-divider::before, .date-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }

.message { margin-bottom: 1.35rem; animation: message-in 320ms ease both; }
.message-meta { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.5rem; color: var(--muted); font-size: 0.62rem; }
.message-meta strong { color: var(--green); letter-spacing: 0.08em; font: 700 0.65rem "Space Mono", monospace; }
.message-meta time { margin-left: auto; color: var(--dim); }
.message-copy {
  min-width: 3rem;
  padding: .26rem .4rem;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: .15rem;
  cursor: pointer;
  font-size: .48rem;
  letter-spacing: .08em;
}
.message-copy:hover { color: var(--green); border-color: var(--line-hot); background: var(--green-glow); }

.mini-avatar {
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  color: var(--green);
  background: var(--green-glow);
  border: 1px solid var(--line-hot);
  border-radius: 0.15rem;
  font-weight: 700;
}

.bubble {
  position: relative;
  padding: 0.95rem 1rem;
  color: #ced8d0;
  background: linear-gradient(145deg, rgba(15, 23, 17, 0.96), rgba(10, 15, 11, 0.96));
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-hot);
  border-radius: 0 0.35rem 0.35rem 0.35rem;
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.bubble p { margin: 0; }
.bubble p + p { margin-top: 0.7rem; }
.bubble strong { color: var(--green-strong); font-weight: 500; }
.rich-content { line-height: 1.7; }
.code-block { margin: .8rem 0; border: 1px solid #344039; border-radius: .25rem; background: #050806; overflow: hidden; }
.code-block:first-child { margin-top: 0; }
.code-block:last-child { margin-bottom: 0; }
.code-block header { display: flex; align-items: center; justify-content: space-between; padding: .45rem .6rem; color: var(--dim); border-bottom: 1px solid var(--line); background: #0d130f; font-size: .52rem; letter-spacing: .08em; }
.code-block button { padding: .25rem .45rem; color: var(--green); border: 1px solid #315938; background: transparent; cursor: pointer; font-size: .48rem; }
.code-block button:hover { background: var(--green-glow); }
.code-block pre { max-width: 100%; margin: 0; padding: .8rem; overflow: auto; color: #d6e1d8; font: .76rem/1.65 "DM Mono", Consolas, monospace; tab-size: 2; }
.chat-image { margin: .8rem 0; border: 1px solid var(--line); background: #080c09; overflow: hidden; }
.chat-image img { display: block; width: 100%; max-height: 32rem; object-fit: contain; background: #030503; }
.chat-image figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .65rem; color: var(--muted); font-size: .56rem; }
.chat-image figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-download { flex: 0 0 auto; padding: .35rem .5rem; color: var(--green); border: 1px solid #315938; text-decoration: none; letter-spacing: .07em; }
.image-download:hover { background: var(--green-glow); }

.user-message .message-meta { flex-direction: row-reverse; }
.user-message .message-meta time { margin: 0 auto 0 0; }
.user-message .message-meta strong { color: #d9e1db; }
.user-message .mini-avatar { color: #d9e1db; border-color: #344039; background: #151c17; }
.user-message .bubble { width: fit-content; max-width: 92%; margin-left: auto; border-left: 1px solid var(--line); border-right: 2px solid #75887a; border-radius: 0.35rem 0 0.35rem 0.35rem; background: #151b17; }

.suggestions { display: grid; gap: 0.55rem; padding-left: 2.15rem; }
.suggestions button {
  width: 100%;
  min-height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  color: #aab7ad;
  background: rgba(10, 15, 11, 0.76);
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  font-size: 0.72rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.suggestions button span { color: var(--green); }
.suggestions button:hover { color: var(--green-strong); border-color: var(--line-hot); transform: translateX(0.2rem); }

.typing .bubble { display: flex; gap: 0.3rem; width: 4.25rem; }
.typing .bubble i { width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--green); opacity: 0.28; animation: typing 1s infinite; }
.typing .bubble i:nth-child(2) { animation-delay: 150ms; }
.typing .bubble i:nth-child(3) { animation-delay: 300ms; }
.loading-bubble { border-left-color: var(--green); }
.image-progress-head { display: flex; align-items: center; gap: .55rem; color: var(--green); font-size: .58rem; letter-spacing: .06em; }
.image-progress-head strong { color: var(--green); font-size: .58rem; }
.image-progress-percent { margin-left: auto; color: var(--muted); font-size: .55rem; }
.image-spinner { width: .55rem; height: .55rem; border: 1px solid var(--green); border-top-color: transparent; border-radius: 50%; animation: spin 800ms linear infinite; }
.image-progress-track { height: 3px; margin: .9rem 0 .65rem; overflow: hidden; background: #172019; }
.image-progress-track i { display: block; width: 0; height: 100%; background: var(--green); box-shadow: 0 0 .55rem var(--green); transition: width 300ms ease; }
.image-progress-steps { display: flex; justify-content: space-between; color: var(--dim); font-size: .48rem; letter-spacing: .06em; }
.image-progress-steps .active { color: var(--green); }
.image-progress-status { margin: .75rem 0 0; color: var(--muted); font-size: .68rem; }
.image-failure .bubble { border-left-color: #a94c43; }
.image-plan-bubble { border-left-color: var(--green); }
.image-plan-head { display: flex; justify-content: space-between; gap: .8rem; color: var(--green); font-size: .58rem; letter-spacing: .08em; }
.image-plan-head span { color: var(--muted); font-size: .48rem; }
.image-plan-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: .9rem 0; }
.image-plan-details div { padding: .5rem; border: 1px solid var(--line); background: rgba(255,255,255,.015); }
.image-plan-details dt { color: var(--dim); font-size: .46rem; letter-spacing: .08em; }
.image-plan-details dd { margin: .25rem 0 0; overflow-wrap: anywhere; color: var(--text); font-size: .62rem; }
.image-plan-assets { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .7rem 0; padding: .5rem; border: 1px dashed var(--line); color: var(--dim); font-size: .5rem; letter-spacing: .05em; }
.image-plan-assets .image-upload-actions { flex: 0 0 auto; }
.image-plan-assets button { padding: .4rem .55rem; border: 1px solid #315938; color: var(--green); background: transparent; cursor: pointer; font: 700 .5rem "Space Mono", monospace; }
.image-plan-assets button:hover { border-color: var(--green); background: var(--green-glow); }
.image-plan-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.image-plan-actions button { padding: .5rem .65rem; border: 1px solid #315938; color: var(--green); background: transparent; cursor: pointer; font: 700 .52rem "Space Mono", monospace; letter-spacing: .05em; }
.image-plan-actions button:first-child { background: var(--green-glow); }
.image-plan-actions button:hover { border-color: var(--green); }
.image-plan-actions button:disabled { opacity: .45; cursor: wait; }
.image-plan-error { color: #ff9b91; font-size: .62rem; }
.image-requirements { display: grid; gap: .6rem; margin: .8rem 0; }
.image-requirement-field { display: grid; gap: .28rem; color: var(--dim); font-size: .5rem; letter-spacing: .04em; }
.image-field-help { color: var(--muted); font-size: .48rem; line-height: 1.45; letter-spacing: 0; }
.image-requirement-field input,
.image-requirement-field select,
.image-requirement-field textarea { width: 100%; border: 1px solid var(--line); border-radius: .2rem; background: #101510; color: var(--text); padding: .5rem; font: 500 .6rem "Space Mono", monospace; }
.image-requirement-field select { min-height: 2rem; }
.image-requirement-field textarea { min-height: 3rem; resize: vertical; }
.image-requirement-field input:focus,
.image-requirement-field select:focus,
.image-requirement-field textarea:focus { outline: none; border-color: var(--line-hot); box-shadow: 0 0 0 2px rgba(157,255,122,.08); }
.image-requirement-field input.invalid,
.image-requirement-field select.invalid,
.image-requirement-field textarea.invalid { border-color: #ff7066; box-shadow: 0 0 0 1px #ff7066; }
.image-requirement-error { color: #ff9b91; font-size: .58rem; margin: .2rem 0 0; }
.image-asset-slots { display: grid; gap: .45rem; margin: .65rem 0 .85rem; padding: .55rem; border: 1px solid var(--line); background: rgba(255,255,255,.012); }
.image-asset-slots > header { display: grid; gap: .18rem; padding-bottom: .35rem; border-bottom: 1px dashed var(--line); }
.image-asset-slots > header strong { color: var(--green); font-size: .54rem; letter-spacing: .08em; }
.image-asset-slots > header small { color: var(--muted); font-size: .48rem; line-height: 1.4; }
.image-asset-slot { display: grid; grid-template-columns: 1.5rem minmax(0,1fr) auto; gap: .45rem; align-items: start; padding: .4rem .2rem; border-bottom: 1px solid rgba(126,151,132,.14); }
.image-asset-slot:last-child { border-bottom: 0; }
.image-asset-slot-index { color: var(--green); font: 700 .55rem "Space Mono", monospace; }
.image-asset-slot div { display: grid; gap: .12rem; min-width: 0; }
.image-asset-slot strong { color: var(--text); font-size: .52rem; letter-spacing: .05em; }
.image-asset-slot span { color: var(--dim); font-size: .48rem; overflow-wrap: anywhere; }
.image-asset-slot small { color: var(--muted); font-size: .46rem; line-height: 1.4; }
.image-asset-slot em { color: var(--dim); font: 700 .42rem "Space Mono", monospace; font-style: normal; white-space: nowrap; }
.image-slot-upload { justify-self: start; margin-top: .22rem; padding: .28rem .42rem; border: 1px solid #315938; color: var(--green); background: transparent; cursor: pointer; font: 700 .44rem "Space Mono", monospace; }
.image-slot-upload:hover { border-color: var(--green); background: var(--green-glow); }
.image-asset-slots-empty small { color: var(--muted); font-size: .48rem; line-height: 1.4; }

.composer-wrap { padding: 0.75rem var(--space-3) max(0.65rem, env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 18%); }
.composer-wrap > * { width: min(100%, 47rem); margin-inline: auto; }

.composer {
  min-height: 3.65rem;
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  padding: 0.4rem;
  background: rgba(13, 20, 15, 0.97);
  border: 1px solid #344039;
  border-radius: 0.35rem;
  box-shadow: 0 0.85rem 3rem rgba(0,0,0,0.35), inset 0 1px rgba(255,255,255,0.025);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.composer:focus-within { border-color: var(--line-hot); box-shadow: 0 0 0 3px rgba(157,255,122,0.04), 0 0.85rem 3rem rgba(0,0,0,0.35); }

.attach-button, .camera-button { width: 2.65rem; height: 2.65rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: 0.2rem; }
.camera-button { display: none; }
@media (max-width: 55.99rem) { .camera-button { display: grid; } }
.attach-button:hover, .camera-button:hover { color: var(--green); background: var(--green-glow); }
.attachment-tray { display: flex; flex-wrap: wrap; gap: .35rem; padding: .45rem 0 0; }
.attachment-tray[hidden] { display: none; }
.attachment-chip { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .3rem .42rem; border: 1px solid var(--line); color: var(--muted); font-size: .55rem; }
.attachment-chip-name { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-chip button { width: 1.1rem; height: 1.1rem; padding: 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; }
.attachment-chip button:hover { color: #ff9b91; }

.composer textarea {
  width: 100%;
  max-height: 8rem;
  min-height: 2.65rem;
  resize: none;
  padding: 0.65rem 0.25rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  line-height: 1.35;
  font-size: 0.82rem;
}
.composer textarea::placeholder { color: #59665d; }

.send-button {
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #0a0e0b;
  background: var(--green);
  border: 0;
  border-radius: 0.2rem;
  cursor: pointer;
  box-shadow: 0 0 1.2rem var(--green-glow);
  transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}
.send-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 1.7rem rgba(157,255,122,0.28); }
.send-button:active:not(:disabled) { transform: translateY(0); }
.send-button:disabled { opacity: 0.25; cursor: not-allowed; }

.composer-meta { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.45rem; color: var(--dim); font-size: 0.52rem; }
.composer-meta kbd { font: inherit; color: #78857c; }
.disclaimer { margin-top: 0.25rem; color: #455047; text-align: center; font-size: 0.5rem; }

@keyframes pulse { 50% { opacity: 0.62; box-shadow: 0 0 0 0.4rem rgba(157, 255, 122, 0.03), 0 0 0.5rem var(--green); } }
@keyframes message-in { from { opacity: 0; transform: translateY(0.6rem); } }
@keyframes typing { 40% { opacity: 1; transform: translateY(-0.16rem); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 30rem) {
  .latency { display: inline; }
  .messages { padding-inline: var(--space-4); padding-top: 1.75rem; }
  .composer-wrap { padding-inline: var(--space-4); }
  .suggestions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .suggestions button { align-items: flex-start; min-height: 5rem; }
}

@media (min-width: 56rem) {
  .app-shell { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .menu-toggle { display: none; }
  .sidebar {
    display: flex;
    min-height: 0;
    flex-direction: column;
    padding: 1.25rem 1rem;
    background: #080c09;
    border-right: 1px solid var(--line);
  }
  .brand { display: flex; align-items: center; gap: 0.75rem; padding: 0 0.45rem; color: inherit; text-decoration: none; }
  .brand > span:last-child { display: grid; }
  .brand strong { font: 700 0.95rem "Space Mono", monospace; letter-spacing: 0.11em; }
  .brand small { color: var(--muted); font-size: 0.5rem; letter-spacing: 0.15em; }
  .new-chat { min-height: 2.8rem; margin: 1.6rem 0 1.75rem; color: var(--green); background: rgba(157,255,122,0.05); border: 1px dashed var(--line-hot); border-radius: 0.2rem; text-align: left; cursor: pointer; }
  .new-chat:hover { background: rgba(157,255,122,0.1); }
  .new-chat span { margin: 0 0.6rem 0 0.35rem; }
  .eyebrow { margin: 0 0.45rem 0.6rem; color: var(--dim); font-size: 0.54rem; letter-spacing: 0.11em; }
  .history { display: grid; gap: 0.3rem; }
  .history-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.68rem 0.55rem; border: 0; border-radius: 0.2rem; color: var(--muted); background: transparent; text-align: left; cursor: pointer; }
  .history-item > span:last-child { display: grid; min-width: 0; }
  .history-item strong { overflow: hidden; color: #aab5ad; font-size: 0.65rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
  .history-item small { color: var(--dim); font-size: 0.5rem; }
  .history-item:hover, .history-item.is-active { background: #101611; }
  .history-item.is-active { box-shadow: inset 2px 0 var(--green); }
  .history-item.is-active .history-icon { color: var(--green); }
  .sidebar-footer { margin-top: auto; }
  .meter { padding: 0.8rem 0.55rem; color: var(--dim); font-size: 0.5rem; }
  .meter > div { display: flex; justify-content: space-between; margin-bottom: 0.45rem; }
  .meter-track { display: block; height: 2px; background: #172019; }
  .meter-track i { display: block; width: 12%; height: 100%; background: var(--green); box-shadow: 0 0 0.5rem var(--green); }
  .user-card { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 0.55rem 0; border-top: 1px solid var(--line); }
  .avatar { width: 2rem; height: 2rem; display: grid; place-items: center; color: #aab6ac; border: 1px solid #37413a; border-radius: 50%; font-size: 0.6rem; }
  .user-card > span:nth-child(2) { display: grid; }
  .user-card strong { font-size: 0.62rem; font-weight: 500; }
  .user-card small { color: var(--dim); font-size: 0.5rem; }
  .user-card .settings-link { margin-left: auto; padding: .25rem; color: var(--dim); text-decoration: none; }
  .user-card .settings-link:hover { color: var(--green); }
  .mobile-brand { display: none; }
  .topbar { padding-inline: 1.5rem; }
  .images-content { padding-inline: 1.5rem; padding-top: 2rem; }
  .chat-identity { margin-left: max(0rem, calc((100% - 47rem) / 2)); }
  .bubble { font-size: 0.88rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}