@vibe80/vibe80 0.1.1

package/client/src/index.css

@@ -0,0 +1,5147 @@
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap");
+
+:root {
+  color-scheme: light;
+  font-family: "Space Grotesk", system-ui, sans-serif;
+  --diff-font-family: "Space Mono";
+  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
+    Consolas, "Liberation Mono", "Courier New", monospace;
+  --bg: #f5f2ea;
+  --bg-strong: #efe9dc;
+  --ink: #141311;
+  --ink-muted: #4b463f;
+  --accent: #ee5d3b;
+  --accent-dark: #b43c24;
+  --surface: #ffffff;
+  --shadow: 0 20px 60px rgba(20, 19, 17, 0.12);
+  --app-bg: radial-gradient(circle at top left, #fff6df, transparent 60%),
+    radial-gradient(circle at 20% 20%, #f6dbc7, transparent 55%),
+    linear-gradient(160deg, #f4efe6, #efe5d3);
+  --radius: 20px;
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #0e0f0e;
+  --bg-strong: #171a18;
+  --ink: #f2ede3;
+  --ink-muted: #b7ada1;
+  --accent: #ee5d3b;
+  --accent-dark: #d9573c;
+  --surface: #171a19;
+  --surface-elevated: #1f2321;
+  --surface-ghost: rgba(20, 24, 22, 0.8);
+  --border-soft: rgba(255, 255, 255, 0.12);
+  --shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
+  --shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
+  --app-bg: radial-gradient(circle at top left, #1b211f, transparent 60%),
+    radial-gradient(circle at 20% 20%, #261a16, transparent 55%),
+    linear-gradient(160deg, #0f1110, #141816);
+}
+
+:root {
+  --surface-elevated: #ffffff;
+  --surface-ghost: rgba(255, 255, 255, 0.92);
+  --border-soft: rgba(20, 19, 17, 0.12);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  height: 100vh;
+  min-height: 100vh;
+  height: 100dvh;
+  min-height: 100dvh;
+  background: var(--app-bg);
+  color: var(--ink);
+  overflow: hidden;
+}
+
+button,
+input,
+select,
+textarea {
+  font-family: "Space Grotesk", system-ui, sans-serif;
+}
+
+#root {
+  height: 100vh;
+  min-height: 100vh;
+  height: 100dvh;
+  min-height: 100dvh;
+}
+
+.session-gate {
+  min-height: 100vh;
+  min-height: 100dvh;
+  height: 100vh;
+  height: 100dvh;
+  padding: 24px;
+}
+
+.session-gate.session-fullscreen {
+  padding: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.session-layout {
+  width: min(980px, 100%);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 280px;
+  gap: 24px;
+  align-items: start;
+}
+
+.session-layout--fullscreen {
+  width: 100%;
+  height: 100%;
+  padding: 32px 40px;
+  grid-template-columns: minmax(0, 1fr) 320px;
+  align-items: stretch;
+  box-sizing: border-box;
+  max-width: 1120px;
+  margin: 0 auto;
+}
+
+.session-shell {
+  width: 100%;
+  height: 100%;
+  background: var(--surface);
+  border-radius: 24px;
+  padding: 24px 32px;
+  box-shadow: var(--shadow);
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: 16px;
+  position: relative;
+  min-height: calc(100vh - 64px);
+}
+
+.session-shell h1 {
+  margin: 0;
+  font-size: clamp(28px, 3vw, 30px);
+}
+
+.session-header {
+  display: grid;
+  gap: 8px;
+}
+
+.session-gate .session-header {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: auto auto;
+  grid-template-areas:
+    "action title logo"
+    "hint hint hint";
+  align-items: center;
+  gap: 8px;
+}
+
+.session-gate .session-header .session-card-action {
+  grid-area: action;
+}
+
+.session-gate .session-header h1 {
+  grid-area: title;
+  margin-left: -10px;
+}
+
+.session-gate .session-header .brand-logo {
+  grid-area: logo;
+  justify-self: end;
+  height: 24px;
+}
+
+.session-gate .session-header .session-hint {
+  grid-area: hint;
+}
+
+.session-body {
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.session-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding-top: 8px;
+  background: var(--surface);
+}
+
+.session-footer-full {
+  width: 100%;
+}
+
+.session-hint {
+  margin: 0;
+  color: var(--ink-muted);
+  font-size: 15px;
+}
+
+.session-info {
+  display: none;
+}
+
+.session-info-card {
+  background: var(--surface);
+  border-radius: 20px;
+  padding: 18px;
+  box-shadow: var(--shadow);
+  display: grid;
+  gap: 10px;
+  font-size: 14px;
+  color: var(--ink-muted);
+  position: sticky;
+  top: 24px;
+}
+
+.session-info-title {
+  font-weight: 600;
+  color: var(--ink);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+}
+
+.session-info-icon {
+  font-size: 16px;
+}
+
+.session-info-link {
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.session-info-link:hover {
+  text-decoration: underline;
+}
+
+.session-form {
+  display: grid;
+  gap: 18px;
+}
+
+.session-form--compact {
+  gap: 14px;
+}
+
+.session-form-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.session-form-row.is-compact-grid {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+}
+
+.session-form-row.is-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.session-form-row--sticky {
+  position: sticky;
+  bottom: 0;
+  background: var(--surface);
+  padding: 10px 0 0;
+  z-index: 2;
+}
+
+.session-form-row.is-actions .session-button {
+  width: auto;
+}
+.session-form-row > div:empty {
+  display: none;
+}
+
+.session-form input,
+.session-form textarea,
+.session-form select {
+  border: 1px solid rgba(20, 19, 17, 0.14);
+  border-radius: 14px;
+  padding: 12px 14px;
+  font-size: 15px;
+  outline: none;
+  color: var(--ink);
+  width: 100%;
+}
+
+.session-form input[type="checkbox"],
+.session-form input[type="radio"] {
+  width: auto;
+}
+
+.session-form select {
+  background: var(--surface);
+  cursor: pointer;
+}
+
+.session-form textarea {
+  resize: vertical;
+  min-height: 140px;
+  line-height: 1.4;
+}
+
+.session-form-row.single {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.session-button {
+  border: none;
+  border-radius: 999px;
+  background: var(--accent);
+  color: white;
+  font-weight: 600;
+  padding: 12px 18px;
+  cursor: pointer;
+  width: 100%;
+}
+
+.session-button.secondary {
+  background: rgba(20, 19, 17, 0.08);
+  color: var(--ink);
+}
+
+.session-button:disabled {
+  background: #d6c6b8;
+  cursor: not-allowed;
+}
+
+.session-auth {
+  display: grid;
+  gap: 12px;
+  padding: 12px;
+  border-radius: 16px;
+  background: rgba(20, 19, 17, 0.04);
+}
+
+.session-auth-compact {
+  gap: 8px;
+}
+
+.session-auth-title {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.session-auth-options {
+  display: grid;
+  gap: 10px;
+  justify-items: start;
+}
+
+.session-auth-options--inline-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px 18px;
+  width: 100%;
+}
+
+.session-auth-options--compact {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  width: 100%;
+}
+
+.session-auth-options--compact .session-auth-option {
+  width: 100%;
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.session-auth-info {
+  font-size: 12px;
+  margin-left: 6px;
+  color: var(--ink-muted);
+  cursor: help;
+}
+
+.session-auth-hint-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.session-auth-options.is-inline {
+  grid-auto-flow: column;
+  justify-content: start;
+}
+
+.session-auth-accordion {
+  width: 100%;
+}
+
+.session-auth-card {
+  border-radius: 14px;
+  border: 1px solid rgba(20, 19, 17, 0.08);
+  background: rgba(20, 19, 17, 0.02);
+  padding: 10px 12px;
+  display: grid;
+  gap: 10px;
+  width: 100%;
+}
+
+.session-auth-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+}
+
+.session-auth-file {
+  display: grid;
+  gap: 6px;
+}
+
+.session-auth-file-name {
+  font-size: 12px;
+  color: var(--ink-muted);
+  word-break: break-word;
+}
+
+.session-auth-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: var(--ink);
+  width: auto;
+  justify-content: flex-start;
+}
+
+.session-auth-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+  width: 100%;
+}
+
+.session-auth-hint {
+  font-size: 13px;
+  color: var(--ink-muted);
+}
+
+.session-workspace-options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  margin-bottom: 14px;
+}
+
+.session-workspace-toggle {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  margin-bottom: 30px;
+}
+
+.session-workspace-option {
+  border: 1px solid rgba(20, 19, 17, 0.08);
+  border-radius: 16px;
+  padding: 16px;
+  background: #f9fbff;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 12px;
+  text-align: left;
+  cursor: pointer;
+  font-family: "Space Grotesk", system-ui, sans-serif;
+  box-shadow: 0 6px 18px rgba(20, 19, 17, 0.08);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+}
+
+.session-workspace-option.is-compact {
+  padding: 10px 12px;
+  grid-template-columns: auto auto;
+  align-items: center;
+  gap: 10px;
+}
+
+.session-workspace-option:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.session-workspace-option.is-selected {
+  border-color: rgba(243, 166, 107, 0.7);
+  box-shadow: 0 10px 24px rgba(243, 166, 107, 0.22);
+  background: rgba(243, 166, 107, 0.15);
+}
+
+.session-workspace-icon {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 16px;
+}
+
+.session-workspace-icon.is-join {
+  background: #7cc1df;
+}
+
+.session-workspace-icon.is-create {
+  background: #f3a66b;
+}
+
+.session-workspace-icon.is-leave {
+  background: #9aa4b2;
+}
+
+.session-workspace-option-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.session-workspace-option-title {
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--ink);
+}
+
+.session-workspace-option-subtitle {
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+.session-workspace-form {
+  background: rgba(20, 19, 17, 0.05);
+  border-radius: 18px;
+  padding: 16px;
+  display: grid;
+  gap: 10px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+
+.session-workspace-form-labels {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--ink);
+}
+
+.session-workspace-form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+}
+
+.session-step {
+  position: relative;
+}
+
+.session-card-action {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+}
+
+.session-panel {
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  transform: translateY(-6px);
+  transition: max-height 0.3s ease, opacity 0.25s ease, transform 0.25s ease;
+  pointer-events: none;
+}
+
+.session-panel.is-visible {
+  max-height: 800px;
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.workspace-created-card {
+  background: rgba(20, 19, 17, 0.04);
+  border-radius: 18px;
+  padding: 16px;
+  display: grid;
+  gap: 12px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+
+.workspace-created-row {
+  display: grid;
+  grid-template-columns: minmax(0, 140px) minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+}
+
+.workspace-created-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.workspace-created-value {
+  background: var(--surface);
+  border-radius: 12px;
+  padding: 8px 12px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 260px;
+}
+
+.workspace-created-copy {
+  border: none;
+  background: rgba(238, 93, 59, 0.12);
+  color: var(--accent-dark);
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.workspace-created-copy:hover:not(:disabled) {
+  background: rgba(238, 93, 59, 0.2);
+}
+
+.session-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.session-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: rgba(20, 19, 17, 0.05);
+}
+
+.session-item-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.session-item-title {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.session-item-sub {
+  font-size: 12px;
+  color: var(--ink-muted);
+  word-break: break-word;
+}
+
+.session-list-button {
+  border: none;
+  border-radius: 12px;
+  background: var(--accent);
+  color: white;
+  font-weight: 600;
+  padding: 8px 14px;
+  cursor: pointer;
+}
+
+.session-list-button.is-danger {
+  background: #e05a4f;
+}
+
+.session-list-button:disabled {
+  background: #d6c6b8;
+  cursor: not-allowed;
+}
+
+.session-item-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.toast-container {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.toast {
+  background: var(--surface);
+  border: 1px solid rgba(20, 19, 17, 0.12);
+  border-radius: 12px;
+  padding: 10px 14px;
+  box-shadow: 0 12px 24px rgba(20, 19, 17, 0.16);
+  font-weight: 600;
+  color: var(--ink);
+  max-width: 320px;
+}
+
+.toast.is-success {
+  border-color: rgba(46, 125, 50, 0.4);
+  color: #2e7d32;
+  background: rgba(46, 125, 50, 0.12);
+}
+
+.app {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 16px;
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 16px 18px calc(20px + env(safe-area-inset-bottom));
+  height: 100vh;
+  min-height: 100vh;
+  height: 100dvh;
+  min-height: 100dvh;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+}
+
+.topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  flex: 1;
+}
+
+.topbar-brand {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.topbar-subtitle {
+  font-size: 12px;
+  color: var(--ink-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 320px;
+}
+
+.topbar-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.topbar-tabs {
+  flex: 1;
+  min-width: 0;
+}
+
+.status-pill {
+  padding: 8px 14px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 600;
+  background: var(--bg-strong);
+  color: var(--ink-muted);
+  white-space: nowrap;
+}
+
+.status-pill.ok {
+  background: rgba(238, 93, 59, 0.15);
+  color: var(--accent-dark);
+}
+
+.status-pill.down {
+  background: rgba(20, 19, 17, 0.08);
+  color: var(--ink-muted);
+}
+
+.status-pill.busy {
+  background: rgba(20, 19, 17, 0.06);
+  color: var(--ink);
+}
+
+.icon-button {
+  border: 1px solid rgba(20, 19, 17, 0.16);
+  background: var(--surface);
+  color: var(--ink);
+  border-radius: 12px;
+  width: 38px;
+  height: 38px;
+  display: grid;
+  place-items: center;
+  font-weight: 800;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  flex: 0 0 auto;
+}
+
+.icon-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.icon-button:not(:disabled):hover {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 16px rgba(20, 19, 17, 0.08);
+}
+
+.dropdown {
+  position: relative;
+}
+
+.pill-button {
+  border-radius: 999px;
+  border: 1px solid rgba(20, 19, 17, 0.16);
+  background: var(--surface);
+  color: var(--ink);
+  font-weight: 600;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  white-space: nowrap;
+}
+
+.pill-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.pill-button:not(:disabled):hover {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 16px rgba(20, 19, 17, 0.08);
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + 10px);
+  right: 0;
+  width: min(320px, calc(100vw - 48px));
+  background: var(--surface);
+  border: 1px solid rgba(20, 19, 17, 0.12);
+  border-radius: 16px;
+  box-shadow: 0 18px 40px rgba(20, 19, 17, 0.14);
+  padding: 12px;
+  display: grid;
+  gap: 10px;
+  z-index: 80;
+  max-height: calc(100dvh - 140px);
+  overflow: auto;
+}
+
+.dropdown-title {
+  font-weight: 800;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+
+.dropdown-divider {
+  height: 1px;
+  background: rgba(20, 19, 17, 0.12);
+}
+
+.menu-item {
+  border-radius: 12px;
+  border: 1px solid rgba(20, 19, 17, 0.12);
+  background: rgba(20, 19, 17, 0.03);
+  color: var(--ink);
+  padding: 10px 12px;
+  font-weight: 700;
+  font-size: 13px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.menu-item.is-active {
+  background: rgba(238, 93, 59, 0.12);
+  border-color: rgba(238, 93, 59, 0.22);
+}
+
+.menu-item.danger {
+  background: rgba(238, 93, 59, 0.1);
+  border-color: rgba(238, 93, 59, 0.22);
+  color: var(--accent-dark);
+}
+
+.menu-label {
+  display: grid;
+  gap: 6px;
+  font-weight: 700;
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+.model-control {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.model-button {
+  border-radius: 999px;
+  border: 1px solid rgba(20, 19, 17, 0.16);
+  background: transparent;
+  color: var(--ink);
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.model-button:disabled {
+  cursor: not-allowed;
+  color: var(--ink-muted);
+}
+
+.model-select {
+  border-radius: 12px;
+  border: 1px solid rgba(20, 19, 17, 0.16);
+  padding: 6px 10px;
+  font-size: 13px;
+  background: var(--surface);
+  color: var(--ink);
+}
+
+.model-select:disabled {
+  color: var(--ink-muted);
+}
+
+.clear-chat {
+  border-radius: 999px;
+  border: 1px solid rgba(20, 19, 17, 0.2);
+  background: transparent;
+  color: var(--ink-muted);
+  font-weight: 600;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 8px 14px;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease,
+    border-color 0.2s ease, color 0.2s ease;
+}
+
+.clear-chat:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  box-shadow: none;
+}
+
+.clear-chat:not(:disabled):hover {
+  transform: translateY(-1px);
+  border-color: rgba(20, 19, 17, 0.35);
+  color: var(--ink);
+  box-shadow: 0 8px 16px rgba(20, 19, 17, 0.08);
+}
+
+.status-wrap {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.eyebrow {
+  margin: 0;
+  font-weight: 600;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+  font-size: 12px;
+}
+
+.brand-logo {
+  display: block;
+  height: 34px;
+  width: auto;
+  object-fit: contain;
+  opacity: 0.7;
+}
+
+.header h1 {
+  margin: 8px 0 0;
+  font-size: clamp(28px, 3vw, 40px);
+}
+
+.status {
+  padding: 8px 14px;
+  border-radius: 999px;
+  font-size: 14px;
+  font-weight: 600;
+  background: var(--bg-strong);
+  color: var(--ink-muted);
+}
+
+.status.ok {
+  background: rgba(238, 93, 59, 0.15);
+  color: var(--accent-dark);
+}
+
+.status.down {
+  background: rgba(20, 19, 17, 0.12);
+  color: var(--ink-muted);
+}
+
+.loader {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: rgba(238, 93, 59, 0.12);
+}
+
+.loader .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  animation: bounce 0.8s infinite ease-in-out;
+}
+
+.loader .dot:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.loader .dot:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+@keyframes bounce {
+  0%,
+  80%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.5;
+  }
+  40% {
+    transform: translateY(-6px);
+    opacity: 1;
+  }
+}
+
+@keyframes chat-meta-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.activity {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 10px 16px;
+  border-radius: 12px;
+  background: var(--bg-strong);
+  color: var(--ink-muted);
+  font-size: 14px;
+}
+
+.activity-label {
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.chat {
+  background: var(--surface);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 18px;
+  padding-left: calc(18px + var(--chat-toolbar-offset));
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+  flex: 1;
+  height: 100%;
+  font-size: 14px;
+}
+
+main.chat {
+  padding-bottom: 12px;
+}
+
+.chat-scroll {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-height: 0;
+  flex: 1;
+  padding-bottom: var(--composer-space, 160px);
+}
+
+.chat-scroll-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
+.chat-scroll-inner.has-meta {
+  max-width: none;
+  margin: 0;
+}
+
+.chat-history-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+  gap: 12px;
+}
+
+.chat-history-grid.has-meta {
+  grid-template-columns: minmax(0, 1fr) minmax(0, var(--chat-max-width))
+    minmax(0, 1fr);
+  column-gap: 24px;
+}
+
+.chat-history-grid.has-annotations {
+  grid-template-columns: minmax(0, 1fr) minmax(0, var(--chat-max-width))
+    minmax(0, 1fr);
+  column-gap: 24px;
+}
+
+.chat-history {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+
+.chat-history-reveal {
+  align-self: center;
+  border: 1px solid rgba(20, 19, 17, 0.18);
+  background: var(--surface);
+  color: var(--ink);
+  padding: 6px 14px;
+  border-radius: 999px;
+  font-family: "Space Grotesk", system-ui, sans-serif;
+  font-size: 12px;
+  letter-spacing: 0.01em;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.chat-history-reveal:hover {
+  transform: translateY(-1px);
+  border-color: rgba(20, 19, 17, 0.32);
+  box-shadow: 0 6px 16px rgba(20, 19, 17, 0.12);
+}
+
+.chat-history-reveal:focus-visible {
+  outline: 2px solid rgba(20, 19, 17, 0.55);
+  outline-offset: 2px;
+}
+
+.chat-history-grid.has-meta .chat-history {
+  grid-column: 2;
+}
+
+.chat-history-grid.has-annotations .chat-history {
+  grid-column: 2;
+}
+
+.chat-meta-rail {
+  grid-column: 1;
+  justify-self: end;
+  align-self: start;
+  min-width: 0;
+  position: sticky;
+  top: 12px;
+  margin-right: 10px;
+  border-right: 1px solid #ccc;
+  padding-right: 10px;
+  min-height: 230px;
+}
+
+.chat-annotation-rail {
+  grid-column: 3;
+  justify-self: start;
+  width: min(100%, 320px);
+  align-self: start;
+  position: sticky;
+  top: 12px;
+  min-width: 0;
+}
+
+.chat-annotation-card {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--surface);
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 70vh;
+  overflow: auto;
+}
+
+.chat-annotation-title {
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.chat-annotation-subtitle,
+.chat-annotation-empty {
+  font-size: 11px;
+  opacity: 0.75;
+}
+
+.chat-annotation-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.chat-annotation-item {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.chat-annotation-quote {
+  font-size: 11px;
+  color: var(--ink-muted, #666);
+  white-space: pre-wrap;
+}
+
+.chat-annotation-input {
+  width: 100%;
+  min-height: 56px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+  color: var(--ink);
+  font-family: "Space Grotesk", system-ui, sans-serif;
+  font-size: 12px;
+  padding: 6px 8px;
+}
+
+.chat-annotation-remove {
+  align-self: flex-end;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--ink);
+  font-size: 11px;
+  padding: 2px 8px;
+  cursor: pointer;
+}
+
+.annotation-line-source-list {
+  margin-top: 8px;
+  border-top: 1px dashed var(--border);
+  padding-top: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.annotation-line-source-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 6px;
+  align-items: start;
+  border-radius: 6px;
+  padding: 2px 2px;
+}
+
+.annotation-line-source-row:hover {
+  background: rgba(238, 93, 59, 0.08);
+}
+
+.annotation-line-source-text {
+  overflow-wrap: anywhere;
+  font-size:  13px;
+  opacity: 0.7;
+}
+
+.annotation-line-source-text > * {
+  margin: 0;
+}
+
+.annotation-line-source-text :is(p, ul, ol, li, blockquote, pre) {
+  margin: 0;
+}
+
+.annotation-line-source-button {
+  opacity: 0;
+  pointer-events: none;
+  border: none;
+  background: transparent;
+  color: var(--accent);
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.annotation-line-source-row:hover .annotation-line-source-button {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.chat-meta-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 2px 0;
+  border: none;
+  background: transparent;
+  color: var(--ink);
+  font-family: "Space Grotesk", system-ui, sans-serif;
+  font-size: 12px;
+  box-shadow: none;
+  max-width: 200px;
+  text-align: right;
+}
+
+.chat-meta-section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 6px 0;
+}
+
+.chat-meta-section:last-child {
+  padding-bottom: 0;
+}
+
+.chat-meta-repo-title {
+  display: block;
+  font-size: 14px;
+}
+
+.chat-meta-repo-name {
+  font-weight: 500;
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+.chat-meta-repo-branch {
+  font-weight: 700;
+}
+
+.chat-meta-repo-icon {
+  display: inline-block;
+  font-size: 12px;
+  margin: 0 4px 0 0;
+}
+
+.chat-meta-repo-branch-line {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  font-size: 14px;
+  margin-bottom: 4px;
+}
+
+.chat-meta-repo-commit {
+  display: inline;
+}
+
+.chat-meta-message {
+  margin-left: 8px;
+}
+
+.chat-meta-hash {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  border-radius: 6px;
+  background: rgba(20, 19, 17, 0.08);
+  color: var(--ink);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.chat-meta-provider {
+  display: inline;
+  color: var(--ink-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.chat-meta-provider-icon {
+  display: inline-block;
+  font-size: 12px;
+  color: var(--ink-muted);
+  margin-right: 4px;
+}
+
+.chat-meta-provider-label {
+  color: var(--ink);
+}
+
+.chat-meta-provider-sep {
+  opacity: 0.6;
+}
+
+.chat-meta-permissions {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: flex-end;
+}
+
+.chat-meta-permission {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  justify-content: flex-end;
+  color: var(--ink-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.chat-meta-permission-icon {
+  display: inline-flex;
+  align-items: center;
+  font-size: 11px;
+  color: var(--ink-muted);
+}
+
+.chat-meta-permission-icon.is-internet {
+  color: #2f9e44;
+}
+
+.chat-meta-permission-icon.is-credentials {
+  color: var(--accent, #ee5d3b);
+}
+
+.chat-meta-task {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  justify-content: flex-end;
+  color: var(--ink-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.chat-meta-task-text {
+  display: inline;
+  align-items: center;
+  gap: 4px;
+}
+
+.chat-meta-task-text p {
+  margin: 0;
+}
+
+.chat-meta-task-loader {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid rgba(20, 19, 17, 0.18);
+  border-top-color: var(--accent, #ee5d3b);
+  animation: chat-meta-spin 0.9s linear infinite;
+  flex: 0 0 auto;
+}
+
+.chat-meta-message {
+  color: var(--ink-muted);
+  line-height: 1.3;
+  word-break: break-word;
+}
+
+.chat-toolbar {
+  position: absolute;
+  top: var(--chat-toolbar-inset);
+  left: var(--chat-toolbar-inset);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(14px * var(--chat-toolbar-scale, 1));
+  padding: calc(16px * var(--chat-toolbar-scale, 1))
+    calc(12px * var(--chat-toolbar-scale, 1));
+  background: transparent;
+  border: none;
+  border-radius: calc(28px * var(--chat-toolbar-scale, 1));
+  box-shadow: none;
+  z-index: 5;
+}
+
+.chat-toolbar-group {
+  display: flex;
+  flex-direction: column;
+  gap: calc(12px * var(--chat-toolbar-scale, 1));
+  align-items: center;
+}
+
+.chat-toolbar-item {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.chat-toolbar-button {
+  width: calc(84px * var(--chat-toolbar-scale, 1));
+  border-radius: calc(18px * var(--chat-toolbar-scale, 1));
+  border: none;
+  background: transparent;
+  color: var(--ink);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(8px * var(--chat-toolbar-scale, 1));
+  padding: calc(6px * var(--chat-toolbar-scale, 1))
+    calc(4px * var(--chat-toolbar-scale, 1));
+  font-size: calc(12px * var(--chat-toolbar-scale, 1));
+  font-weight: 600;
+  font-family: "Space Grotesk", system-ui, sans-serif;
+  cursor: pointer;
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+
+.chat-toolbar-icon-wrap {
+  width: calc(40px * var(--chat-toolbar-scale, 1));
+  height: calc(40px * var(--chat-toolbar-scale, 1));
+  border-radius: calc(14px * var(--chat-toolbar-scale, 1));
+  border: 1px solid rgba(20, 19, 17, 0.12);
+  background: var(--surface);
+  color: var(--ink);
+  display: grid;
+  place-items: center;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease,
+    background 0.2s ease;
+}
+
+.chat-toolbar-label {
+  text-align: center;
+  line-height: 1.1;
+  font-family: "Space Grotesk", system-ui, sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.chat-toolbar-button.is-active,
+.chat-toolbar-button.is-open {
+  color: var(--accent-dark);
+}
+
+.chat-toolbar-button.is-active .chat-toolbar-icon-wrap,
+.chat-toolbar-button.is-open .chat-toolbar-icon-wrap {
+  border-color: rgba(238, 93, 59, 0.5);
+  background: rgba(238, 93, 59, 0.12);
+}
+
+.chat-toolbar-button.is-danger {
+  color: var(--accent-dark);
+}
+
+.chat-toolbar-button.is-danger .chat-toolbar-icon-wrap {
+  background: rgba(238, 93, 59, 0.12);
+  border-color: rgba(238, 93, 59, 0.35);
+}
+
+.chat-toolbar-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.chat-toolbar-button:not(:disabled):hover {
+  transform: translateY(-1px);
+}
+
+.chat-toolbar-button:not(:disabled):hover .chat-toolbar-icon-wrap {
+  box-shadow: 0 10px 18px rgba(20, 19, 17, 0.12);
+  transform: translateY(-1px);
+}
+
+.chat-toolbar-icon {
+  font-size: calc(16px * var(--chat-toolbar-scale, 1));
+  line-height: 1;
+}
+
+.chat-toolbar-divider {
+  height: 1px;
+  width: calc(56px * var(--chat-toolbar-scale, 1));
+  background: rgba(20, 19, 17, 0.12);
+}
+
+.chat-toolbar-menu {
+  position: absolute;
+  left: calc(100% + calc(12px * var(--chat-toolbar-scale, 1)));
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--surface);
+  border: 1px solid rgba(20, 19, 17, 0.12);
+  border-radius: calc(14px * var(--chat-toolbar-scale, 1));
+  box-shadow: 0 18px 36px rgba(20, 19, 17, 0.16);
+  padding: calc(8px * var(--chat-toolbar-scale, 1));
+  display: grid;
+  gap: calc(6px * var(--chat-toolbar-scale, 1));
+  min-width: calc(140px * var(--chat-toolbar-scale, 1));
+  z-index: 12;
+}
+
+.chat-toolbar-menu-item {
+  border: none;
+  background: rgba(20, 19, 17, 0.04);
+  color: var(--ink);
+  padding: calc(8px * var(--chat-toolbar-scale, 1)) calc(10px * var(--chat-toolbar-scale, 1));
+  border-radius: calc(10px * var(--chat-toolbar-scale, 1));
+  font-weight: 600;
+  font-size: calc(13px * var(--chat-toolbar-scale, 1));
+  text-align: left;
+  cursor: pointer;
+}
+
+.chat-toolbar-menu-item:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.chat-toolbar-menu-item:not(:disabled):hover {
+  background: rgba(20, 19, 17, 0.1);
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
+  gap: 16px;
+  align-items: stretch;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.side {
+  background: var(--surface);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+}
+
+.conversation {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-height: 0;
+  height: 100%;
+  position: relative;
+  --composer-space: 160px;
+  --chat-max-width: 72ch;
+}
+
+.conversation.is-chat-narrow .chat-scroll-inner,
+.conversation.is-chat-narrow .composer-inner {
+  max-width: var(--chat-max-width);
+  width: 100%;
+  margin: 0 auto;
+}
+
+.conversation.is-chat-narrow .chat-scroll-inner.has-meta {
+  max-width: none;
+  margin: 0;
+}
+
+.pane-stack {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  position: relative;
+  --chat-toolbar-scale: 0.8;
+  --chat-toolbar-width: calc(108px * var(--chat-toolbar-scale));
+  --chat-toolbar-gap: calc(18px * var(--chat-toolbar-scale));
+  --chat-toolbar-offset: calc(var(--chat-toolbar-width) + var(--chat-toolbar-gap));
+  --chat-toolbar-inset: calc(18px * var(--chat-toolbar-scale));
+}
+
+.layout:not(.is-mobile).is-side-collapsed {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.layout:not(.is-mobile).is-side-collapsed .side {
+  display: none;
+}
+
+.side-backdrop {
+  position: fixed;
+  inset: 0;
+  border: none;
+  padding: 0;
+  background: rgba(20, 19, 17, 0.35);
+  z-index: 50;
+}
+
+.side-tabs {
+  display: flex;
+  gap: 8px;
+}
+
+.side-tab {
+  flex: 1;
+  border-radius: 999px;
+  border: 1px solid rgba(20, 19, 17, 0.12);
+  background: rgba(20, 19, 17, 0.03);
+  color: var(--ink-muted);
+  font-weight: 700;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 8px 10px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.side-tab.is-active {
+  background: var(--bg-strong);
+  color: var(--ink);
+  border-color: rgba(20, 19, 17, 0.22);
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 18px;
+  padding: 0 8px;
+  border-radius: 999px;
+  background: rgba(20, 19, 17, 0.08);
+  color: var(--ink);
+  font-weight: 800;
+  font-size: 11px;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.side-body {
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.side-footer {
+  margin-top: auto;
+  display: flex;
+}
+
+.side-footer-button {
+  width: 100%;
+  border-radius: 14px;
+  border: 1px solid rgba(20, 19, 17, 0.12);
+  background: rgba(20, 19, 17, 0.04);
+  color: var(--ink);
+  font-weight: 700;
+  font-size: 13px;
+  padding: 12px 14px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease,
+    border-color 0.2s ease, background 0.2s ease;
+}
+
+.side-footer-icon {
+  font-size: 15px;
+}
+
+.side-footer-button:hover {
+  transform: translateY(-1px);
+  border-color: rgba(20, 19, 17, 0.24);
+  box-shadow: 0 10px 20px rgba(20, 19, 17, 0.08);
+}
+
+.side-footer-button.is-active {
+  background: var(--bg-strong);
+  border-color: rgba(20, 19, 17, 0.28);
+}
+
+.panel-header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.panel-title {
+  font-weight: 800;
+  font-size: 14px;
+}
+
+.panel-subtitle {
+  font-size: 12px;
+  color: var(--ink-muted);
+  word-break: break-all;
+}
+
+.conversation-tabs {
+  display: flex;
+  gap: 10px;
+}
+
+.tab-button {
+  border-radius: 999px;
+  border: 1px solid rgba(20, 19, 17, 0.12);
+  background: transparent;
+  color: var(--ink-muted);
+  font-weight: 600;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 8px 14px;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease,
+    border-color 0.2s ease, color 0.2s ease;
+}
+
+.tab-button.is-active {
+  background: var(--bg-strong);
+  color: var(--ink);
+  border-color: rgba(20, 19, 17, 0.24);
+}
+
+.tab-button:not(.is-active):hover {
+  transform: translateY(-1px);
+  border-color: rgba(20, 19, 17, 0.3);
+  color: var(--ink);
+  box-shadow: 0 8px 16px rgba(20, 19, 17, 0.08);
+}
+
+.diff-panel {
+  background: var(--surface);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 20px;
+  padding-left: calc(20px + var(--chat-toolbar-offset));
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  overflow: auto;
+  min-height: 0;
+  height: 100%;
+}
+
+:root[data-theme="dark"] .diff-panel .diff-view {
+  color: var(--ink);
+}
+
+
+:root[data-theme="dark"] .diff-panel .diff-gutter {
+  background: #0f1211;
+  color: rgba(242, 237, 227, 0.6);
+}
+
+:root[data-theme="dark"] .diff-panel .diff-line:hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+:root[data-theme="dark"] .diff-panel .diff-code-added {
+  background: rgba(54, 86, 58, 0.6);
+}
+
+:root[data-theme="dark"] .diff-panel .diff-code-deleted {
+  background: rgba(99, 52, 49, 0.6);
+}
+
+:root[data-theme="dark"] .diff-panel .diff-gutter-added {
+  background: rgba(54, 86, 58, 0.85);
+  color: #e7f3ea;
+}
+
+:root[data-theme="dark"] .diff-panel .diff-gutter-deleted {
+  background: rgba(99, 52, 49, 0.85);
+  color: #fdeceb;
+}
+
+:root[data-theme="dark"] .diff-panel .diff-line::selection,
+:root[data-theme="dark"] .diff-panel .diff-line ::selection {
+  background: rgba(120, 180, 255, 0.35);
+  color: #ffffff;
+}
+
+:root[data-theme="dark"] .diff-panel .diff-gutter::selection,
+:root[data-theme="dark"] .diff-panel .diff-gutter ::selection {
+  background: rgba(120, 180, 255, 0.35);
+  color: #ffffff;
+}
+
+.explorer-panel {
+  background: var(--surface);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 18px;
+  padding-left: calc(18px + var(--chat-toolbar-offset));
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow: hidden;
+  min-height: 0;
+  height: 100%;
+}
+
+.explorer-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.explorer-title {
+  font-weight: 700;
+  font-size: 14px;
+}
+
+.explorer-subtitle {
+  color: var(--ink-muted);
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.explorer-refresh {
+  border: 1px solid rgba(20, 19, 17, 0.16);
+  background: rgba(20, 19, 17, 0.04);
+  color: var(--ink);
+  padding: 6px 10px;
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.explorer-refresh:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.explorer-body {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
+  gap: 12px;
+}
+
+.explorer-tree-wrap {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.explorer-tree-header {
+  padding: 8px 10px;
+  margin-bottom: 8px;
+  border: 1px solid rgba(20, 19, 17, 0.1);
+  border-radius: 14px;
+  background: rgba(250, 248, 244, 0.8);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.explorer-tree-icon-btn {
+  border: 1px solid rgba(20, 19, 17, 0.16);
+  background: rgba(20, 19, 17, 0.04);
+  color: var(--ink);
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.explorer-tree-icon-btn:hover {
+  background: rgba(20, 19, 17, 0.08);
+}
+
+.explorer-tree-icon-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.explorer-tree,
+.explorer-editor {
+  border: 1px solid rgba(20, 19, 17, 0.1);
+  border-radius: 14px;
+  background: rgba(250, 248, 244, 0.8);
+  min-height: 0;
+}
+
+.explorer-tree {
+  padding: 10px 8px;
+  overflow: auto;
+  flex: 1;
+}
+
+.explorer-tree-entry {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.explorer-tree-caret-button {
+  border: none;
+  background: transparent;
+  color: var(--ink-muted);
+  width: 22px;
+  min-width: 22px;
+  height: 24px;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.explorer-tree-caret-button:hover {
+  background: rgba(20, 19, 17, 0.06);
+}
+
+.explorer-editor {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.explorer-editor-tabs {
+  display: flex;
+  align-items: center;
+  padding: 6px 8px;
+  border-bottom: 1px solid rgba(20, 19, 17, 0.08);
+  background: rgba(20, 19, 17, 0.03);
+  overflow: hidden;
+  min-height: 41px;
+}
+
+.explorer-editor-tabs-list {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+}
+
+.explorer-editor-tabs-actions {
+  margin-left: 8px;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.explorer-editor-tab {
+  display: inline-flex;
+  align-items: center;
+  max-width: 220px;
+  border: 1px solid rgba(20, 19, 17, 0.14);
+  border-radius: 8px;
+  background: rgba(20, 19, 17, 0.03);
+}
+
+.explorer-editor-tab.is-active {
+  border-color: rgba(238, 93, 59, 0.45);
+  background: rgba(238, 93, 59, 0.12);
+}
+
+.explorer-editor-tab-open,
+.explorer-editor-tab-close {
+  border: none;
+  background: transparent;
+  color: var(--ink);
+  font-size: 11px;
+  line-height: 1;
+}
+
+.explorer-editor-tab-open {
+  max-width: 180px;
+  padding: 6px 8px;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.explorer-editor-tab-close {
+  padding: 6px 6px 6px 2px;
+  cursor: pointer;
+  opacity: 0.75;
+}
+
+.explorer-editor-tab-close:hover {
+  opacity: 1;
+}
+
+.explorer-editor-header {
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  border-bottom: 1px solid rgba(20, 19, 17, 0.08);
+  color: var(--ink-muted);
+  background: rgba(20, 19, 17, 0.03);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.explorer-editor-path {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.explorer-editor-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.explorer-action {
+  border: 1px solid rgba(20, 19, 17, 0.16);
+  background: rgba(20, 19, 17, 0.04);
+  color: var(--ink);
+  padding: 4px 8px;
+  border-radius: 8px;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.explorer-action.primary {
+  background: rgba(238, 93, 59, 0.14);
+  color: var(--accent-dark);
+  border-color: rgba(238, 93, 59, 0.4);
+}
+
+.explorer-action:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.explorer-editor-content {
+  flex: 1;
+  margin: 0;
+  padding: 12px;
+  overflow: auto;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.6;
+  white-space: pre;
+}
+
+.explorer-editor-input {
+  flex: 1;
+  min-height: 0;
+  background: transparent;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+.explorer-tree-list {
+  list-style: none;
+  margin: 0;
+  padding-left: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.explorer-tree > .explorer-tree-list {
+  padding-left: 0;
+}
+
+.explorer-tree-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.explorer-tree-toggle,
+.explorer-tree-file {
+  border: none;
+  background: transparent;
+  color: var(--ink);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px;
+  border-radius: 8px;
+  cursor: pointer;
+  text-align: left;
+  font-size: 13px;
+  min-width: 0;
+}
+
+.explorer-tree-entry .explorer-tree-toggle {
+  flex: 1;
+  min-width: 0;
+}
+
+.explorer-tree-toggle:hover,
+.explorer-tree-file:hover {
+  background: rgba(20, 19, 17, 0.06);
+}
+
+.explorer-tree-item.is-file.is-selected > .explorer-tree-file {
+  background: rgba(238, 93, 59, 0.12);
+  color: var(--accent-dark);
+}
+
+.explorer-tree-item.is-dir.is-selected .explorer-tree-toggle {
+  background: rgba(238, 93, 59, 0.12);
+  color: var(--accent-dark);
+}
+
+.explorer-tree-item.is-modified:not(.is-selected) > .explorer-tree-toggle,
+.explorer-tree-item.is-modified:not(.is-selected) > .explorer-tree-file,
+.explorer-tree-item.is-modified:not(.is-selected) > .explorer-tree-toggle .explorer-tree-name,
+.explorer-tree-item.is-modified:not(.is-selected) > .explorer-tree-toggle .explorer-tree-icon,
+.explorer-tree-item.is-modified:not(.is-selected) > .explorer-tree-file .explorer-tree-name,
+.explorer-tree-item.is-modified:not(.is-selected) > .explorer-tree-file .explorer-tree-icon {
+  color: #1d5fd3;
+}
+
+.explorer-tree-item.is-untracked:not(.is-selected) > .explorer-tree-toggle,
+.explorer-tree-item.is-untracked:not(.is-selected) > .explorer-tree-file,
+.explorer-tree-item.is-untracked:not(.is-selected) > .explorer-tree-toggle .explorer-tree-name,
+.explorer-tree-item.is-untracked:not(.is-selected) > .explorer-tree-toggle .explorer-tree-icon,
+.explorer-tree-item.is-untracked:not(.is-selected) > .explorer-tree-file .explorer-tree-name,
+.explorer-tree-item.is-untracked:not(.is-selected) > .explorer-tree-file .explorer-tree-icon {
+  color: #1f8c4a;
+}
+
+.explorer-tree-caret {
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+.explorer-tree-icon {
+  font-size: 12px;
+}
+
+.explorer-tree-name {
+  font-family: "Space Grotesk", system-ui, sans-serif !important;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  flex: 1;
+}
+
+.explorer-tree-rename-input {
+  border: 1px solid rgba(20, 19, 17, 0.2);
+  border-radius: 6px;
+  padding: 2px 6px;
+  font-size: 12px;
+  line-height: 1.2;
+  width: auto;
+  flex: 1;
+  min-width: 0;
+  background: rgba(255, 255, 255, 0.9);
+  color: var(--ink);
+  margin-left: 4px;
+}
+
+.explorer-tree-rename-input:focus {
+  outline: none;
+  border-color: rgba(238, 93, 59, 0.5);
+  box-shadow: 0 0 0 2px rgba(238, 93, 59, 0.15);
+}
+
+.explorer-file-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(10, 12, 12, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 80;
+  padding: 20px;
+}
+
+.explorer-file-dialog {
+  width: min(420px, 100%);
+  border-radius: 14px;
+  background: var(--surface);
+  border: 1px solid rgba(20, 19, 17, 0.14);
+  box-shadow: 0 20px 60px rgba(20, 19, 17, 0.28);
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.explorer-file-dialog h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.explorer-file-dialog-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.explorer-file-dialog-field label {
+  font-size: 12px;
+  color: var(--ink-muted);
+  font-weight: 600;
+}
+
+.explorer-file-dialog-field input {
+  border: 1px solid rgba(20, 19, 17, 0.18);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.85);
+  color: var(--ink);
+  padding: 8px 10px;
+}
+
+.explorer-file-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.explorer-empty,
+.explorer-editor-empty,
+.explorer-truncated {
+  color: var(--ink-muted);
+  font-size: 12px;
+  padding: 8px 10px;
+}
+
+.terminal-panel {
+  background: var(--surface);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 20px;
+  padding-left: calc(20px + var(--chat-toolbar-offset));
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow: hidden;
+  min-height: 0;
+  height: 100%;
+}
+
+.terminal-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.terminal-title {
+  font-weight: 700;
+  font-size: 14px;
+}
+
+.terminal-meta {
+  color: var(--ink-muted);
+  font-size: 12px;
+}
+
+.terminal-body {
+  flex: 1;
+  min-height: 0;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid rgba(20, 19, 17, 0.1);
+  background: #fbf6ee;
+}
+
+.terminal-body .xterm {
+  height: 100%;
+}
+
+.terminal-empty {
+  color: var(--ink-muted);
+  font-size: 12px;
+}
+
+:root[data-theme="dark"] .tab-button {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.18);
+  color: #e6edf3;
+}
+
+:root[data-theme="dark"] .tab-button.is-active {
+  background: rgba(255, 255, 255, 0.18);
+  border-color: rgba(255, 255, 255, 0.35);
+  color: #ffffff;
+}
+
+:root[data-theme="dark"] .tab-button:not(.is-active):hover {
+  border-color: rgba(255, 255, 255, 0.35);
+  color: #ffffff;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
+}
+
+:root[data-theme="dark"] .explorer-tree,
+:root[data-theme="dark"] .explorer-editor {
+  border-color: rgba(255, 255, 255, 0.12);
+  background: rgba(22, 24, 23, 0.85);
+}
+
+:root[data-theme="dark"] .explorer-tree-header {
+  border-color: rgba(255, 255, 255, 0.12);
+  background: rgba(22, 24, 23, 0.85);
+}
+
+:root[data-theme="dark"] .explorer-tree-icon-btn {
+  border-color: rgba(255, 255, 255, 0.24);
+  background: rgba(255, 255, 255, 0.06);
+  color: #e6edf3;
+}
+
+:root[data-theme="dark"] .explorer-tree-icon-btn:hover {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+:root[data-theme="dark"] .explorer-editor-header {
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--ink-muted);
+}
+
+:root[data-theme="dark"] .explorer-editor-tabs {
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+:root[data-theme="dark"] .explorer-editor-tab {
+  border-color: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+:root[data-theme="dark"] .explorer-editor-tab.is-active {
+  border-color: rgba(238, 93, 59, 0.5);
+  background: rgba(238, 93, 59, 0.22);
+}
+
+:root[data-theme="dark"] .explorer-editor-tab-open,
+:root[data-theme="dark"] .explorer-editor-tab-close {
+  color: #e6edf3;
+}
+
+:root[data-theme="dark"] .explorer-tree-toggle:hover,
+:root[data-theme="dark"] .explorer-tree-file:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+:root[data-theme="dark"] .explorer-tree-item.is-file.is-selected > .explorer-tree-file {
+  background: rgba(238, 93, 59, 0.22);
+  color: #ffd2c7;
+}
+
+:root[data-theme="dark"] .explorer-tree-item.is-dir.is-selected .explorer-tree-toggle {
+  background: rgba(238, 93, 59, 0.22);
+  color: #ffd2c7;
+}
+
+:root[data-theme="dark"] .explorer-tree-item.is-modified:not(.is-selected) > .explorer-tree-toggle,
+:root[data-theme="dark"] .explorer-tree-item.is-modified:not(.is-selected) > .explorer-tree-file,
+:root[data-theme="dark"] .explorer-tree-item.is-modified:not(.is-selected) > .explorer-tree-toggle .explorer-tree-name,
+:root[data-theme="dark"] .explorer-tree-item.is-modified:not(.is-selected) > .explorer-tree-toggle .explorer-tree-icon,
+:root[data-theme="dark"] .explorer-tree-item.is-modified:not(.is-selected) > .explorer-tree-file .explorer-tree-name,
+:root[data-theme="dark"] .explorer-tree-item.is-modified:not(.is-selected) > .explorer-tree-file .explorer-tree-icon {
+  color: #8ab4ff;
+}
+
+:root[data-theme="dark"] .explorer-tree-item.is-untracked:not(.is-selected) > .explorer-tree-toggle,
+:root[data-theme="dark"] .explorer-tree-item.is-untracked:not(.is-selected) > .explorer-tree-file,
+:root[data-theme="dark"] .explorer-tree-item.is-untracked:not(.is-selected) > .explorer-tree-toggle .explorer-tree-name,
+:root[data-theme="dark"] .explorer-tree-item.is-untracked:not(.is-selected) > .explorer-tree-toggle .explorer-tree-icon,
+:root[data-theme="dark"] .explorer-tree-item.is-untracked:not(.is-selected) > .explorer-tree-file .explorer-tree-name,
+:root[data-theme="dark"] .explorer-tree-item.is-untracked:not(.is-selected) > .explorer-tree-file .explorer-tree-icon {
+  color: #7ee6a8;
+}
+
+:root[data-theme="dark"] .explorer-tree-caret-button:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.explorer-tree-toggle.is-renaming,
+.explorer-tree-file.is-renaming {
+  cursor: default;
+}
+
+:root[data-theme="dark"] .explorer-tree-rename-input {
+  border-color: rgba(255, 255, 255, 0.22);
+  background: rgba(255, 255, 255, 0.06);
+  color: #e6edf3;
+}
+
+:root[data-theme="dark"] .explorer-file-dialog {
+  background: rgba(19, 21, 20, 0.96);
+  border-color: rgba(255, 255, 255, 0.14);
+}
+
+:root[data-theme="dark"] .explorer-file-dialog-field input {
+  border-color: rgba(255, 255, 255, 0.24);
+  background: rgba(255, 255, 255, 0.06);
+  color: #e6edf3;
+}
+
+:root[data-theme="dark"] .diff-file {
+  border-color: rgba(255, 255, 255, 0.1);
+  background: rgba(20, 22, 21, 0.9);
+}
+
+:root[data-theme="dark"] .diff-file-header {
+  background: rgba(255, 255, 255, 0.05);
+  border-bottom-color: rgba(255, 255, 255, 0.12);
+  color: #e6edf3;
+}
+
+:root[data-theme="dark"] .diff-status {
+  background: rgba(255, 255, 255, 0.05);
+  color: #c9d1d9;
+}
+
+:root[data-theme="dark"] .diff-fallback {
+  color: #e6edf3;
+}
+
+:root[data-theme="dark"] .diff-file-note {
+  color: #c9d1d9;
+}
+
+:root[data-theme="dark"] .diff-line,
+:root[data-theme="dark"] .diff-code,
+:root[data-theme="dark"] .diff-gutter {
+  color: #e6edf3;
+}
+
+:root[data-theme="dark"] .diff-line-add,
+:root[data-theme="dark"] .diff-line-added,
+:root[data-theme="dark"] .diff-line-insert,
+:root[data-theme="dark"] .diff-added {
+  background: rgba(54, 86, 58, 0.45);
+  color: #e6edf3;
+}
+
+:root[data-theme="dark"] .diff-line-add .diff-code,
+:root[data-theme="dark"] .diff-line-added .diff-code,
+:root[data-theme="dark"] .diff-line-insert .diff-code,
+:root[data-theme="dark"] .diff-added .diff-code,
+:root[data-theme="dark"] .diff-code-insert {
+  background: rgba(54, 86, 58, 0.6);
+}
+
+:root[data-theme="dark"] .diff-line-add .diff-gutter,
+:root[data-theme="dark"] .diff-line-added .diff-gutter,
+:root[data-theme="dark"] .diff-line-insert .diff-gutter,
+:root[data-theme="dark"] .diff-added .diff-gutter,
+:root[data-theme="dark"] .diff-gutter-insert {
+  background: rgba(54, 86, 58, 0.85);
+  color: #e7f3ea;
+}
+
+:root[data-theme="dark"] .diff-line-del,
+:root[data-theme="dark"] .diff-line-removed,
+:root[data-theme="dark"] .diff-line-delete,
+:root[data-theme="dark"] .diff-removed {
+  background: rgba(99, 52, 49, 0.5);
+  color: #e6edf3;
+}
+
+:root[data-theme="dark"] .diff-line-del .diff-code,
+:root[data-theme="dark"] .diff-line-removed .diff-code,
+:root[data-theme="dark"] .diff-line-delete .diff-code,
+:root[data-theme="dark"] .diff-removed .diff-code,
+:root[data-theme="dark"] .diff-code-delete {
+  background: rgba(99, 52, 49, 0.6);
+}
+
+:root[data-theme="dark"] .diff-line-del .diff-gutter,
+:root[data-theme="dark"] .diff-line-removed .diff-gutter,
+:root[data-theme="dark"] .diff-line-delete .diff-gutter,
+:root[data-theme="dark"] .diff-removed .diff-gutter,
+:root[data-theme="dark"] .diff-gutter-delete {
+  background: rgba(99, 52, 49, 0.85);
+  color: #fdeceb;
+}
+
+:root[data-theme="dark"] .diff-hunk {
+  background: rgba(255, 255, 255, 0.06);
+  color: #c9d1d9;
+}
+
+:root[data-theme="dark"] .terminal-body {
+  border-color: rgba(255, 255, 255, 0.12);
+  background: #0f1110;
+}
+
+.logs-panel {
+  background: var(--surface);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 20px;
+  padding-left: calc(20px + var(--chat-toolbar-offset));
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow: hidden;
+  min-height: 0;
+  height: 100%;
+}
+
+.settings-panel {
+  background: var(--surface);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 20px;
+  padding-left: calc(20px + var(--chat-toolbar-offset));
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  overflow: auto;
+  min-height: 0;
+  height: 100%;
+}
+
+.settings-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.settings-heading {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.settings-back {
+  border-radius: 999px;
+  width: 34px;
+  height: 34px;
+  font-size: 16px;
+}
+
+.settings-title {
+  font-weight: 800;
+  font-size: 16px;
+}
+
+.settings-subtitle {
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+.settings-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.settings-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  border: 1px solid rgba(20, 19, 17, 0.1);
+  background: rgba(20, 19, 17, 0.03);
+}
+
+.settings-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.settings-name {
+  font-weight: 700;
+  font-size: 13px;
+}
+
+.settings-hint {
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+.settings-toggle {
+  width: 18px;
+  height: 18px;
+  accent-color: #1f2a44;
+}
+
+.settings-select {
+  border: 1px solid rgba(20, 19, 17, 0.12);
+  border-radius: 12px;
+  padding: 8px 10px;
+  background: var(--surface);
+  color: var(--ink);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.settings-item--stacked {
+  align-items: stretch;
+  flex-direction: column;
+}
+
+.settings-fields {
+  display: grid;
+  gap: 12px;
+  width: 100%;
+}
+
+.settings-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+}
+
+.settings-field-label {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--ink-muted);
+}
+
+.settings-input {
+  border: 1px solid rgba(20, 19, 17, 0.12);
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: var(--surface);
+  color: var(--ink);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.settings-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+}
+
+.settings-button {
+  border-radius: 999px;
+  padding: 8px 16px;
+  background: #1f2a44;
+  color: #f6f4f0;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.settings-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.settings-status {
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+.settings-status.is-error {
+  color: #b42318;
+}
+
+.is-hidden {
+  display: none;
+}
+
+.logs-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.logs-controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.logs-title {
+  font-weight: 700;
+  font-size: 14px;
+}
+
+.logs-count {
+  color: var(--ink-muted);
+  font-size: 12px;
+}
+
+.logs-filters {
+  display: flex;
+  gap: 6px;
+}
+
+.logs-filter {
+  border: 1px solid rgba(20, 19, 17, 0.16);
+  background: transparent;
+  color: var(--ink-muted);
+  border-radius: 999px;
+  padding: 4px 10px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  cursor: pointer;
+}
+
+.logs-filter.is-active {
+  background: var(--bg-strong);
+  color: var(--ink);
+  border-color: rgba(20, 19, 17, 0.28);
+}
+
+.logs-clear {
+  border: 1px solid rgba(20, 19, 17, 0.16);
+  background: transparent;
+  color: var(--ink);
+  border-radius: 999px;
+  padding: 4px 10px;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.logs-clear:disabled {
+  color: var(--ink-muted);
+  cursor: not-allowed;
+}
+
+.logs-empty {
+  color: var(--ink-muted);
+  font-size: 12px;
+}
+
+.logs-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow: auto;
+  min-height: 0;
+}
+
+.logs-item {
+  border-radius: 12px;
+  border: 1px solid rgba(20, 19, 17, 0.12);
+  padding: 10px 12px;
+  background: rgba(20, 19, 17, 0.02);
+}
+
+.logs-stdin {
+  border-left: 4px solid rgba(238, 93, 59, 0.6);
+}
+
+.logs-stdout {
+  border-left: 4px solid rgba(31, 96, 117, 0.6);
+}
+
+.logs-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ink-muted);
+}
+
+.logs-method {
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.logs-payload {
+  margin: 8px 0 0;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.diff-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.diff-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.diff-action-button {
+  border-radius: 999px;
+  border: 1px solid rgba(20, 19, 17, 0.16);
+  background: var(--surface);
+  padding: 5px 10px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--ink);
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.diff-action-button.primary {
+  background: #2f5b4c;
+  color: white;
+  border-color: transparent;
+  box-shadow: 0 6px 14px rgba(47, 91, 76, 0.2);
+}
+
+.diff-action-button:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.diff-action-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.diff-title {
+  font-weight: 700;
+  font-size: 14px;
+}
+
+.diff-count {
+  color: var(--ink-muted);
+  font-size: 12px;
+}
+
+.diff-status {
+  background: rgba(20, 19, 17, 0.04);
+  border-radius: 12px;
+  padding: 10px 12px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+.diff-body {
+  display: grid;
+  gap: 18px;
+}
+
+.diff-line {
+  font-size: 13px;
+}
+
+.diff-file {
+  border: 1px solid rgba(20, 19, 17, 0.08);
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--surface);
+}
+
+.diff-file-header {
+  padding: 10px 14px;
+  font-weight: 600;
+  font-size: 13px;
+  background: rgba(20, 19, 17, 0.04);
+  border-bottom: 1px solid rgba(20, 19, 17, 0.08);
+}
+
+.diff-fallback {
+  padding: 0px 12px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  white-space: pre-wrap;
+}
+
+.diff-file-note {
+  padding: 8px 12px 12px;
+  color: var(--ink-muted);
+  font-size: 12px;
+}
+
+.untracked-diff-view {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.untracked-diff-view .diff-gutter {
+  width: 56px;
+  min-width: 56px;
+  text-align: right;
+  user-select: none;
+}
+
+.untracked-diff-view .diff-code {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.diff-empty {
+  color: var(--ink-muted);
+  font-size: 13px;
+}
+
+.attachments {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 0;
+}
+
+.attachments h2 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.attachments-subtitle {
+  margin: 6px 0 0;
+  font-size: 12px;
+  color: var(--ink-muted);
+  word-break: break-all;
+}
+
+.upload {
+  border: 1px dashed rgba(20, 19, 17, 0.2);
+  border-radius: 14px;
+  padding: 14px;
+  text-align: center;
+  font-weight: 600;
+  color: var(--ink);
+  cursor: pointer;
+  background: rgba(238, 93, 59, 0.08);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.upload input {
+  display: none;
+}
+
+.upload:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 18px rgba(20, 19, 17, 0.12);
+}
+
+.upload.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.attachments-meta {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+.attachments-error {
+  background: rgba(238, 93, 59, 0.12);
+  color: var(--accent-dark);
+  padding: 10px 12px;
+  border-radius: 12px;
+  font-size: 13px;
+}
+
+.attachments-empty {
+  border: 1px dashed rgba(20, 19, 17, 0.18);
+  border-radius: 12px;
+  padding: 16px;
+  text-align: center;
+  color: var(--ink-muted);
+  font-size: 13px;
+}
+
+.attachments-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 360px;
+  overflow-y: auto;
+}
+
+.attachments-item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 10px;
+  align-items: center;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: var(--bg-strong);
+  cursor: pointer;
+}
+
+.attachments-item input {
+  accent-color: var(--accent);
+  width: 16px;
+  height: 16px;
+}
+
+.attachments-name {
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.empty {
+  padding: 32px;
+  text-align: center;
+  color: var(--ink-muted);
+  border: 1px dashed rgba(20, 19, 17, 0.2);
+  border-radius: 16px;
+}
+
+.bubble {
+  padding: 14px 16px;
+  border-radius: 18px;
+  line-height: 1.45;
+  font-size: 14px;
+  white-space: normal;
+}
+
+.bubble .plain-text {
+  white-space: pre-wrap;
+}
+
+.bubble :where(p, ul, ol, pre, blockquote, h1, h2, h3, h4, h5, h6) {
+  margin: 0px 0 10px;
+}
+
+.bubble :where(p:last-child, ul:last-child, ol:last-child, pre:last-child, blockquote:last-child) {
+  margin-bottom: 0;
+}
+
+.bubble hr {
+  border: none;
+  border-top: 1px #eee dashed;
+  margin: 15px 0;
+}
+
+.bubble code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background: rgba(20, 19, 17, 0.08);
+  padding: 2px 6px;
+  border-radius: 8px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.bubble .inline-code {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  max-width: 100%;
+  flex-wrap: wrap;
+}
+
+.bubble .inline-code--link {
+  cursor: pointer;
+}
+
+.bubble .inline-code-link {
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+}
+
+.bubble .inline-code-link:hover code {
+  text-decoration: underline;
+}
+
+.bubble .inline-code code {
+  padding-right: 22px;
+  max-width: 100%;
+}
+
+.bubble .inline-code .code-copy {
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%) scale(0.95);
+  width: 16px;
+  height: 16px;
+  border-radius: 6px;
+  border: none;
+  background: rgba(20, 19, 17, 0.12);
+  color: var(--ink);
+  font-size: 10px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.bubble .inline-code:hover .code-copy,
+.bubble .inline-code:focus-within .code-copy {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(-50%) scale(1);
+}
+
+.bubble pre {
+  padding: 12px 14px;
+  background: rgba(20, 19, 17, 0.08);
+  border-radius: 12px;
+  overflow-x: hidden;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.bubble .fileref-list {
+  margin: 12px 0;
+  padding-left: 18px;
+  list-style: disc;
+  display: grid;
+  gap: 6px;
+}
+
+.bubble .fileref-item {
+  margin: 0;
+}
+
+.bubble .fileref-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  text-align: left;
+  padding: 4px 8px;
+  border-radius: 8px;
+  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+  color: var(--ink);
+  font-family: var(--font-mono);
+  font-size: 0.92em;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
+  max-width: 100%;
+  box-sizing: border-box;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  flex-wrap: wrap;
+}
+
+.bubble .fileref-link:hover {
+  background: color-mix(in srgb, var(--accent) 28%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
+  transform: translateY(-1px);
+}
+
+.bubble .fileref-link:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
+  outline-offset: 2px;
+}
+
+.bubble .backlog-view {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 6px;
+}
+
+.bubble .backlog-title {
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.bubble .backlog-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.bubble .backlog-row {
+  display: grid;
+  grid-template-columns: 18px 1fr;
+  gap: 8px;
+  align-items: center;
+}
+
+.bubble .backlog-checkbox {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+
+.bubble .backlog-text {
+  border: none;
+  background: transparent;
+  padding: 0;
+  text-align: left;
+  font-size: 12px;
+  color: var(--ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.bubble .backlog-text:hover {
+  color: var(--accent);
+}
+
+.bubble .backlog-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+.bubble .backlog-page-button {
+  border: 1px solid rgba(20, 19, 17, 0.16);
+  background: rgba(20, 19, 17, 0.05);
+  border-radius: 999px;
+  padding: 4px 10px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--ink);
+}
+
+.bubble .backlog-page-button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.bubble .backlog-empty {
+  color: var(--ink-muted);
+  font-size: 13px;
+}
+
+.bubble .backlog-panel {
+  background: transparent;
+}
+
+.bubble :where(table) {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  border-radius: 14px;
+  overflow: hidden;
+  background: var(--surface);
+  box-shadow: 0 12px 26px rgba(20, 19, 17, 0.12);
+  margin: 8px 0;
+}
+
+.bubble :where(table) thead {
+  background: var(--accent);
+  color: white;
+}
+
+.bubble :where(table) th,
+.bubble :where(table) td {
+  padding: 10px 12px;
+  text-align: left;
+  border-bottom: 1px solid rgba(20, 19, 17, 0.08);
+  font-size: 13px;
+}
+
+.bubble :where(table) th {
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.bubble :where(table) tbody tr {
+  background: rgba(20, 19, 17, 0.02);
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
+}
+
+.bubble :where(table) tbody tr:nth-child(even) {
+  background: rgba(20, 19, 17, 0.04);
+}
+
+.bubble :where(table) tbody tr:hover {
+  background: rgba(20, 19, 17, 0.08);
+  box-shadow: inset 0 0 0 1px rgba(20, 19, 17, 0.08);
+}
+
+.bubble :where(table) tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.bubble-attachments {
+  margin-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.attachment-card {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 12px;
+  border: 1px solid rgba(20, 19, 17, 0.1);
+  background: rgba(20, 19, 17, 0.04);
+  text-decoration: none;
+  color: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.attachment-card:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.attachment-card--image {
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: left;
+  gap: 6px;
+  max-width: 100%;
+}
+
+.attachment-thumb {
+  width: min(160px, 100%);
+  height: 110px;
+  object-fit: cover;
+  border-radius: 12px;
+  background: rgba(20, 19, 17, 0.06);
+}
+
+.attachment-thumb--empty {
+  display: block;
+  width: min(160px, 100%);
+  height: 110px;
+  border-radius: 12px;
+  background: rgba(20, 19, 17, 0.08);
+}
+
+.attachment-icon {
+  font-size: 16px;
+}
+
+.attachment-name {
+  font-weight: 600;
+  word-break: break-word;
+}
+
+.bubble.user .attachment-card {
+  color: var(--ink);
+}
+
+.bubble.user .attachment-name {
+  color: var(--ink);
+}
+
+.attachment-modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(20, 19, 17, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 40;
+  padding: 24px;
+}
+
+.attachment-modal-body {
+  background: var(--surface);
+  border-radius: 16px;
+  padding: 14px;
+  max-width: 92vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  box-shadow: 0 20px 50px rgba(20, 19, 17, 0.3);
+}
+
+.attachment-modal-body img {
+  max-width: 86vw;
+  max-height: 72vh;
+  object-fit: contain;
+  border-radius: 12px;
+}
+
+.attachment-modal-name {
+  font-size: 12px;
+  color: var(--ink-muted);
+  word-break: break-word;
+}
+
+.attachment-modal-close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  border: none;
+  background: var(--surface);
+  color: var(--ink);
+  border-radius: 999px;
+  width: 36px;
+  height: 36px;
+  font-size: 20px;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 0 10px 20px rgba(20, 19, 17, 0.2);
+}
+
+:root[data-theme="dark"] .attachment-modal {
+  background: rgba(7, 8, 7, 0.7);
+}
+
+:root[data-theme="dark"] .attachment-modal-body {
+  background: var(--surface-elevated);
+  border: 1px solid var(--border-soft);
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
+}
+
+:root[data-theme="dark"] .attachment-modal-name {
+  color: rgba(242, 237, 227, 0.6);
+}
+
+:root[data-theme="dark"] .attachment-modal-close {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--ink);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45);
+}
+
+:root[data-theme="dark"] .bubble code,
+:root[data-theme="dark"] .bubble pre,
+:root[data-theme="dark"] .chat-meta-hash {
+  background: #222;
+}
+
+:root[data-theme="dark"] .session-workspace-option {
+  background: var(--border-soft);
+}
+
+.bubble pre code {
+  background: none;
+  padding: 0;
+}
+
+.bubble blockquote {
+  border-left: 3px solid rgba(20, 19, 17, 0.2);
+  padding-left: 12px;
+  color: var(--ink-muted);
+}
+
+.warning-message {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+}
+
+.warning-icon {
+  color: #f59e0b;
+  margin-top: 2px;
+}
+
+.warning-body {
+  flex: 1;
+  min-width: 0;
+}
+
+:root[data-theme="dark"] .warning-icon {
+  color: #f6c453;
+}
+
+.bubble ul,
+.bubble ol {
+  padding-left: 20px;
+}
+
+.choices {
+  margin-top: 10px;
+  display: grid;
+  gap: 8px;
+}
+
+.choices.is-inline {
+  align-items: center;
+}
+
+.choices-question {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ink-muted);
+}
+
+.choices-list {
+  display: grid;
+  gap: 8px;
+}
+
+.choices-list.is-inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.choices.is-inline .choice-button {
+  width: auto;
+  min-width: 84px;
+  text-align: center;
+}
+
+.choice-button {
+  width: 100%;
+  text-align: left;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(20, 19, 17, 0.12);
+  background: var(--surface);
+  color: var(--ink);
+  font-family: "Space Grotesk", system-ui, sans-serif;
+  font-size: 14px;
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease,
+    background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+:root[data-theme="dark"] .choice-button {
+  border-color: var(--accent, #ee5d3b);
+}
+
+.choice-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 16px rgba(20, 19, 17, 0.08);
+}
+
+.choice-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+  box-shadow: none;
+  transform: none;
+}
+
+.choice-button:disabled:hover {
+  box-shadow: none;
+  transform: none;
+}
+
+.choice-button.is-selected {
+  border-color: rgba(20, 19, 17, 0.45);
+  background: rgba(20, 19, 17, 0.08);
+  box-shadow: 0 12px 22px rgba(20, 19, 17, 0.16);
+  transform: translateY(-1px);
+}
+
+.choice-button.is-muted {
+  color: var(--ink-muted);
+  border-color: rgba(20, 19, 17, 0.08);
+  background: rgba(20, 19, 17, 0.03);
+  font-size: 12.5px;
+  transform: translateX(10px);
+}
+
+.bubble.user .choice-button {
+  border-color: rgba(255, 255, 255, 0.4);
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+}
+
+.bubble.user .choice-button.is-selected {
+  border-color: rgba(255, 255, 255, 0.75);
+  background: rgba(255, 255, 255, 0.22);
+  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.22);
+}
+
+.bubble.user .choice-button.is-muted {
+  color: rgba(255, 255, 255, 0.65);
+  border-color: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.bubble.user .choices-question {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.vibe80-form {
+  margin-top: 10px;
+}
+
+.vibe80-form-button {
+  width: 100%;
+  text-align: left;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(20, 19, 17, 0.12);
+  background: rgba(20, 19, 17, 0.04);
+  color: var(--ink);
+  font-family: "Space Grotesk", system-ui, sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease,
+    background 0.2s ease, border-color 0.2s ease;
+}
+
+.vibe80-form-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 16px rgba(20, 19, 17, 0.08);
+  background: rgba(20, 19, 17, 0.08);
+}
+
+.bubble.user .vibe80-form-button {
+  border-color: rgba(255, 255, 255, 0.4);
+  background: rgba(255, 255, 255, 0.12);
+  color: white;
+}
+
+.vibe80-form-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 15, 15, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  z-index: 60;
+}
+
+.vibe80-form-dialog {
+  width: min(540px, 92vw);
+  background: var(--surface);
+  border-radius: 18px;
+  border: 1px solid var(--border-soft);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+  padding: 18px 20px 20px;
+  display: grid;
+  gap: 16px;
+  max-height: 85vh;
+  overflow: hidden;
+  grid-template-rows: auto 1fr;
+}
+
+.vibe80-form-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.vibe80-form-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--ink);
+}
+
+.vibe80-form-close {
+  border: none;
+  background: rgba(20, 19, 17, 0.08);
+  color: var(--ink);
+  width: 30px;
+  height: 30px;
+  border-radius: 999px;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.vibe80-form-body {
+  display: grid;
+  gap: 16px;
+  overflow: auto;
+  padding-right: 4px;
+  min-height: 0;
+}
+
+.vibe80-form-field {
+  display: grid;
+  gap: 8px;
+}
+
+.vibe80-form-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ink-muted);
+}
+
+.vibe80-form-input {
+  width: 100%;
+  border: 1px solid var(--border-soft);
+  border-radius: 10px;
+  padding: 10px 12px;
+  font-size: 14px;
+  font-family: "Space Grotesk", system-ui, sans-serif;
+  background: var(--surface-elevated);
+  color: var(--ink);
+}
+
+.vibe80-form-input:focus {
+  outline: none;
+  border-color: rgba(238, 93, 59, 0.6);
+  box-shadow: 0 0 0 3px rgba(238, 93, 59, 0.12);
+}
+
+.vibe80-form-options {
+  display: grid;
+  gap: 8px;
+}
+
+.vibe80-form-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: var(--ink);
+}
+
+.vibe80-form-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: var(--ink);
+}
+
+.vibe80-form-empty {
+  font-size: 13px;
+  color: var(--ink-muted);
+}
+
+.vibe80-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding-top: 4px;
+}
+
+.vibe80-form-cancel,
+.vibe80-form-submit {
+  border: none;
+  border-radius: 999px;
+  padding: 8px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.vibe80-form-cancel {
+  background: rgba(20, 19, 17, 0.08);
+  color: var(--ink);
+}
+
+.vibe80-form-submit {
+  background: var(--accent);
+  color: white;
+}
+
+.vibe80-form-submit:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  filter: grayscale(0.2);
+}
+
+.worktree-close-confirm-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 15, 15, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  z-index: 62;
+}
+
+.worktree-close-confirm-dialog {
+  width: min(520px, 92vw);
+  background: var(--surface);
+  border-radius: 18px;
+  border: 1px solid rgba(20, 19, 17, 0.1);
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
+  padding: 18px 20px 20px;
+  display: grid;
+  gap: 12px;
+}
+
+.worktree-close-confirm-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.worktree-close-confirm-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--ink);
+}
+
+.worktree-close-confirm-close {
+  border: none;
+  background: rgba(20, 19, 17, 0.08);
+  color: var(--ink);
+  width: 30px;
+  height: 30px;
+  border-radius: 999px;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.worktree-close-confirm-body {
+  font-size: 14px;
+  color: var(--ink-muted);
+  line-height: 1.45;
+}
+
+.worktree-close-confirm-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: flex-end;
+  padding-top: 4px;
+}
+
+.worktree-close-confirm-cancel,
+.worktree-close-confirm-merge,
+.worktree-close-confirm-delete {
+  border: none;
+  border-radius: 999px;
+  padding: 8px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.worktree-close-confirm-cancel {
+  background: rgba(20, 19, 17, 0.08);
+  color: var(--ink);
+}
+
+.worktree-close-confirm-merge {
+  background: rgba(20, 19, 17, 0.9);
+  color: white;
+}
+
+.worktree-close-confirm-delete {
+  background: rgba(214, 62, 36, 0.12);
+  color: #d63e24;
+  border: 1px solid rgba(214, 62, 36, 0.3);
+}
+
+.handoff-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 15, 15, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  z-index: 63;
+}
+
+.handoff-modal {
+  width: min(420px, 92vw);
+  background: var(--surface);
+  border-radius: 18px;
+  border: 1px solid rgba(20, 19, 17, 0.1);
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
+  padding: 18px 20px 20px;
+  display: grid;
+  gap: 12px;
+}
+
+.handoff-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.handoff-modal-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--ink);
+}
+
+.handoff-modal-close {
+  border: none;
+  background: rgba(20, 19, 17, 0.08);
+  color: var(--ink);
+  width: 30px;
+  height: 30px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.handoff-modal-body {
+  display: grid;
+  gap: 12px;
+}
+
+.handoff-modal-text {
+  margin: 0;
+  color: var(--ink-muted);
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.handoff-modal-qr {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  border-radius: 12px;
+  background: rgba(20, 19, 17, 0.04);
+}
+
+.handoff-modal-qr img {
+  width: 260px;
+  height: 260px;
+  object-fit: contain;
+}
+
+.handoff-modal-placeholder {
+  text-align: center;
+  color: var(--ink-muted);
+  font-size: 13px;
+  padding: 24px 12px;
+  background: rgba(20, 19, 17, 0.04);
+  border-radius: 12px;
+}
+
+.handoff-modal-meta {
+  font-size: 12px;
+  color: var(--ink-muted);
+  text-align: center;
+}
+
+.handoff-modal-error {
+  background: rgba(239, 68, 68, 0.12);
+  color: #b91c1c;
+  padding: 8px 10px;
+  border-radius: 10px;
+  font-size: 12px;
+}
+
+.handoff-modal-actions {
+  display: flex;
+  justify-content: center;
+}
+
+.handoff-modal-actions .session-button {
+  width: 100%;
+}
+
+:root[data-theme="dark"] .worktree-close-confirm-overlay {
+  background: rgba(7, 8, 7, 0.7);
+}
+
+:root[data-theme="dark"] .worktree-close-confirm-dialog {
+  background: var(--surface-elevated);
+  border-color: var(--border-soft);
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
+}
+
+:root[data-theme="dark"] .worktree-close-confirm-title {
+  color: var(--ink);
+}
+
+:root[data-theme="dark"] .handoff-modal-overlay {
+  background: rgba(7, 8, 7, 0.7);
+}
+
+:root[data-theme="dark"] .handoff-modal {
+  background: var(--surface-elevated);
+  border-color: var(--border-soft);
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
+}
+
+:root[data-theme="dark"] .handoff-modal-qr,
+:root[data-theme="dark"] .handoff-modal-placeholder {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+:root[data-theme="dark"] .handoff-modal-error {
+  background: rgba(239, 68, 68, 0.2);
+  color: #fca5a5;
+}
+
+:root[data-theme="dark"] .worktree-close-confirm-close {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--ink);
+}
+
+:root[data-theme="dark"] .worktree-close-confirm-body {
+  color: rgba(242, 237, 227, 0.65);
+}
+
+:root[data-theme="dark"] .worktree-close-confirm-cancel {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--ink);
+}
+
+:root[data-theme="dark"] .worktree-close-confirm-merge {
+  background: rgba(255, 255, 255, 0.92);
+  color: #121412;
+}
+
+:root[data-theme="dark"] .worktree-close-confirm-delete {
+  background: rgba(214, 62, 36, 0.2);
+  color: #ff8a6b;
+  border-color: rgba(214, 62, 36, 0.4);
+}
+
+.bubble.user {
+  align-self: flex-end;
+  background: var(--accent);
+  color: white;
+  border-bottom-right-radius: 6px;
+  max-width: 100%;
+}
+
+.bubble.assistant {
+  align-self: flex-start;
+  background: transparent;
+  color: var(--ink);
+  border-radius: 0;
+  padding: 0;
+}
+
+.bubble.command-execution,
+.bubble.backlog {
+  align-self: stretch;
+  background: var(--bg);
+  border-radius: 16px;
+  padding: 8px 12px;
+  border: 1px solid rgba(20, 19, 17, 0.08);
+}
+
+.command-execution-panel {
+  display: grid;
+  gap: 0;
+}
+
+.command-execution-panel > summary {
+  list-style: none;
+}
+
+.command-execution-panel > summary::-webkit-details-marker {
+  display: none;
+}
+
+.command-execution-summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 600;
+  color: var(--ink);
+  cursor: pointer;
+}
+
+.command-execution-summary.is-static {
+  cursor: default;
+}
+
+.command-execution-title {
+  display: inline-flex;
+  align-items: start;
+  gap: 8px;
+  font-size: 11px;
+}
+
+.command-execution-tool-icon {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 2px;
+  color: var(--accent);
+}
+
+.command-execution-loader {
+  padding: 0;
+  background: transparent;
+  gap: 4px;
+}
+
+.command-execution-loader .dot {
+  width: 5px;
+  height: 5px;
+}
+
+.command-execution-output {
+  margin: 8px 0 0;
+  padding: 12px;
+  border-radius: 12px;
+  background: rgba(20, 19, 17, 0.08);
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  line-height: 1.45;
+  white-space: pre-wrap;
+  color: var(--ink);
+  overflow-x: hidden;
+  word-break: break-word;
+}
+
+.bubble.assistant :where(p, ul, ol, pre, blockquote) {
+  margin: 8px 0 8px;
+}
+
+.bubble.assistant :where(ul, ol) {
+  margin: 2px 0;
+  padding-left: 18px;
+}
+
+.bubble.assistant :where(li) {
+  margin: 0;
+}
+
+.bubble.assistant :where(li:last-child) {
+  margin-bottom: 0;
+}
+
+.bubble.assistant :where(ul, ol) > li + li {
+  margin-top: 2px;
+}
+
+.bubble.assistant.typing {
+  margin-top: 2px;
+  padding: 10px 0 0;
+  border-top: 1px dashed rgba(20, 19, 17, 0.05);
+  align-self: stretch;
+  background: var(--surface);
+}
+
+.typing-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--ink-muted);
+  font-size: 13px;
+  font-style: italic;
+  animation: fade-in 0.25s ease-out;
+  max-width: 100%;
+  width: 100%;
+}
+
+.typing-indicator .loader {
+  padding: 0;
+  background: transparent;
+}
+
+.typing-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.typing-indicator .dot {
+  width: 5px;
+  height: 5px;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.composer {
+  --composer-control-height: 44px;
+  --composer-icon-size: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  border-radius: var(--radius);
+  background: var(--surface);
+  box-shadow: var(--shadow);
+  align-items: stretch;
+  position: relative;
+  width: max-content;
+  max-width: calc(100% - 24px);
+}
+
+.composer.is-dragging {
+  outline: 2px dashed var(--accent);
+  outline-offset: 4px;
+  box-shadow: 0 0 0 3px rgba(255, 123, 31, 0.2);
+}
+
+.composer-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: auto;
+}
+
+.composer-attach-button {
+  position: relative;
+  width: var(--composer-control-height);
+  height: var(--composer-control-height);
+  padding: 0;
+}
+
+.attachment-badge {
+  position: absolute;
+  top: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  min-width: 18px;
+  height: 18px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: white;
+  font-size: 10px;
+  font-weight: 800;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--surface);
+  z-index: 1;
+}
+
+.composer--sticky {
+  position: absolute;
+  left: 50%;
+  bottom: 12px;
+  z-index: 20;
+  transform: translateX(-50%);
+  margin: 0;
+  margin-left: 42px;
+}
+
+.composer-input {
+  width: 100%;
+  min-width: 0;
+  min-height: var(--composer-control-height);
+  border-radius: 16px;
+  border: none;
+  padding: 12px 8px;
+  font-family: "Space Grotesk", system-ui, sans-serif;
+  font-size: 15px;
+  color: var(--ink);
+  background: transparent;
+  resize: none;
+  outline: none;
+}
+
+.composer-input:focus {
+  border: none;
+  box-shadow: none;
+  outline: none;
+}
+
+.composer-main {
+  display: grid;
+  grid-template-columns: auto minmax(240px, clamp(240px, 36vw, 520px)) auto auto;
+  gap: 10px;
+  align-items: flex-end;
+}
+
+.composer-model-select {
+  height: var(--composer-control-height);
+  min-width: 120px;
+  max-width: 180px;
+  padding: 0 12px 0 6px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--ink);
+  font-family: "Space Grotesk", system-ui, sans-serif;
+  font-size: 12px;
+  text-align: right;
+  text-align-last: right;
+}
+
+.composer-model-select:disabled {
+  opacity: 0.55;
+}
+
+.composer-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: flex-end;
+}
+
+.composer-meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.send-icon {
+  display: none;
+  font-size: var(--composer-icon-size);
+  line-height: 1;
+  width: var(--composer-icon-size);
+  height: var(--composer-icon-size);
+}
+
+.stop-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--composer-icon-size);
+  line-height: 1;
+  width: var(--composer-icon-size);
+  height: var(--composer-icon-size);
+}
+
+.composer button.primary.stop-button {
+  padding: 0;
+  width: var(--composer-control-height);
+  min-width: var(--composer-control-height);
+  min-height: var(--composer-control-height);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.composer button.primary.send-button {
+  padding: 0;
+  width: var(--composer-control-height);
+  min-width: var(--composer-control-height);
+  min-height: var(--composer-control-height);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.composer button.primary.send-button .send-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.link-button {
+  border: none;
+  background: transparent;
+  color: var(--ink-muted);
+  font-weight: 700;
+  font-size: 12px;
+  cursor: pointer;
+  padding: 6px 8px;
+  border-radius: 10px;
+}
+
+.link-button:hover {
+  background: rgba(20, 19, 17, 0.05);
+  color: var(--ink);
+}
+
+.composer-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.composer-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.composer-command-menu {
+  position: absolute;
+  left: 58px;
+  bottom: calc(100% - 8px);
+  z-index: 30;
+  width: min(320px, calc(100vw - 48px));
+}
+
+.command-menu {
+  background: var(--surface);
+  border-radius: 12px;
+  box-shadow: var(--shadow);
+  border: 1px solid var(--border);
+  padding: 6px;
+}
+
+.command-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  cursor: pointer;
+  color: var(--ink);
+}
+
+.command-item.is-selected,
+.command-item:hover {
+  background: rgba(255, 123, 31, 0.12);
+}
+
+.command-item-label {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.command-item-desc {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.command-empty {
+  padding: 10px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.composer-attachments .attachment-card-body {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.composer-attachments .attachment-card-title {
+  max-width: 100%;
+}
+
+.attachment-card {
+  border: 1px solid var(--border-soft);
+  border-radius: 16px;
+  background: var(--surface-ghost);
+  padding: 12px 14px;
+  min-width: 150px;
+  max-width: 200px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-shadow: 0 12px 24px rgba(20, 19, 17, 0.08);
+}
+
+.attachment-card-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.attachment-card-meta {
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+.attachment-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.attachment-card-type {
+  border-radius: 999px;
+  padding: 4px 8px;
+  background: rgba(20, 19, 17, 0.06);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: var(--ink-muted);
+}
+
+:root[data-theme="dark"] .attachment-card-type,
+:root[data-theme="dark"] .attachment-card-remove,
+:root[data-theme="dark"] .vibe80-form-cancel,
+:root[data-theme="dark"] .vibe80-form-close {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+:root[data-theme="dark"] .vibe80-form-overlay {
+  background: rgba(7, 8, 7, 0.7);
+}
+
+:root[data-theme="dark"] .vibe80-form-dialog {
+  background: var(--surface-elevated);
+  border-color: var(--border-soft);
+}
+
+:root[data-theme="dark"] .vibe80-form-select,
+:root[data-theme="dark"] .vibe80-form-input {
+  background: #111413;
+  color: var(--ink);
+  border-color: rgba(255, 255, 255, 0.14);
+}
+
+:root[data-theme="dark"] .vibe80-form-input {
+  background: #111413;
+  border-color: rgba(255, 255, 255, 0.14);
+  color: var(--ink);
+}
+
+:root[data-theme="dark"] .vibe80-form-input::placeholder {
+  color: rgba(242, 237, 227, 0.5);
+}
+
+:root[data-theme="dark"] .attachment-card {
+  background: #1c201e;
+  border-color: rgba(255, 255, 255, 0.12);
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
+}
+
+:root[data-theme="dark"] .attachment-card-title {
+  color: #f5efe4;
+}
+
+:root[data-theme="dark"] .attachment-card-meta {
+  color: rgba(242, 237, 227, 0.6);
+}
+
+:root[data-theme="dark"] .attachment-card-remove:hover {
+  background: rgba(255, 255, 255, 0.16);
+}
+
+:root[data-theme="dark"] .composer-input::placeholder {
+  color: rgba(242, 237, 227, 0.5);
+}
+.attachment-card-remove {
+  border: none;
+  background: rgba(20, 19, 17, 0.08);
+  color: var(--ink);
+  font-weight: 700;
+  font-size: 14px;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.attachment-card-remove:hover {
+  background: rgba(20, 19, 17, 0.16);
+}
+
+.composer-attachments-count {
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+:root[data-theme="dark"] .composer-input {
+  color: var(--ink);
+}
+
+:root[data-theme="dark"] .composer-attachments-count {
+  color: rgba(242, 237, 227, 0.6);
+}
+
+.chip {
+  background: rgba(20, 19, 17, 0.06);
+  border: 1px solid rgba(20, 19, 17, 0.1);
+  border-radius: 999px;
+  padding: 6px 10px;
+  font-weight: 700;
+  font-size: 12px;
+  color: var(--ink);
+}
+
+.chip--removable {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.chip--removable:hover {
+  background: rgba(20, 19, 17, 0.12);
+}
+
+.chip-remove {
+  font-weight: 800;
+  color: var(--ink-muted);
+}
+
+.chip-muted {
+  color: var(--ink-muted);
+}
+
+.composer-attachments-error {
+  margin-top: 8px;
+}
+
+.composer button.primary,
+.composer button.secondary,
+.composer button.ghost {
+  border-radius: 999px;
+  font-weight: 700;
+  padding: 10px 16px;
+  min-height: var(--composer-control-height);
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.composer button.primary {
+  border: none;
+  background: var(--accent);
+  color: white;
+}
+
+.composer .secondary {
+  background: transparent;
+  color: var(--accent);
+  border: 1px solid rgba(238, 93, 59, 0.4);
+  box-shadow: none;
+}
+
+.composer .ghost {
+  background: transparent;
+  color: var(--ink);
+  border: 1px solid rgba(20, 19, 17, 0.2);
+  box-shadow: none;
+}
+
+.composer .ghost:not(:disabled):hover {
+  box-shadow: none;
+  background: rgba(20, 19, 17, 0.06);
+}
+
+.composer .secondary:not(:disabled):hover {
+  box-shadow: none;
+  background: rgba(238, 93, 59, 0.08);
+}
+
+.composer button:disabled {
+  background: #d6c6b8;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.composer .secondary:disabled,
+.composer .ghost:disabled {
+  background: transparent;
+  color: var(--ink-muted);
+  border-color: rgba(20, 19, 17, 0.12);
+}
+
+.composer button.primary:not(:disabled):hover {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 16px rgba(238, 93, 59, 0.3);
+}
+
+.backlog {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+}
+
+.backlog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.backlog-header h2 {
+  margin: 0;
+  font-size: 14px;
+}
+
+.backlog-count {
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 12px;
+  background: rgba(20, 19, 17, 0.08);
+  color: var(--ink-muted);
+}
+
+.backlog-empty {
+  color: var(--ink-muted);
+  font-size: 12px;
+}
+
+.backlog-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-height: 240px;
+  overflow: auto;
+}
+
+.backlog-item {
+  border: 1px solid rgba(20, 19, 17, 0.1);
+  border-radius: 12px;
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background: rgba(20, 19, 17, 0.02);
+}
+
+.backlog-text {
+  font-size: 13px;
+  color: var(--ink);
+}
+
+.backlog-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.backlog-actions button {
+  border: 1px solid rgba(20, 19, 17, 0.12);
+  border-radius: 999px;
+  background: var(--bg-strong);
+  color: var(--ink);
+  font-size: 12px;
+  font-weight: 600;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+
+.backlog-actions button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.backlog-actions .ghost {
+  background: transparent;
+}
+
+.backlog-meta {
+  font-size: 11px;
+  color: var(--ink-muted);
+}
+
+@media (max-width: 1024px) {
+  .app {
+    padding: 12px 12px calc(14px + env(safe-area-inset-bottom));
+    gap: 10px;
+  }
+
+  .header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+    position: relative;
+  }
+
+  .topbar-left {
+    gap: 10px;
+    padding-right: calc(56px + env(safe-area-inset-right));
+    flex-wrap: wrap;
+  }
+
+  .topbar-tabs {
+    width: 100%;
+    order: 3;
+  }
+
+  .topbar-brand {
+    gap: 2px;
+  }
+
+  .header .icon-button {
+    width: 34px;
+    height: 34px;
+    border-radius: 10px;
+  }
+
+  .topbar-right {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .more-menu {
+    position: absolute;
+    top: 0;
+    right: calc(0px + env(safe-area-inset-right));
+  }
+
+  .layout {
+    display: block;
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .layout.is-mobile .conversation {
+    gap: 8px;
+  }
+
+  .layout.is-mobile .pane-stack {
+    --chat-toolbar-offset: 0px;
+    --chat-toolbar-inset: 0px;
+  }
+
+  .layout.is-mobile .chat-toolbar {
+    display: none;
+  }
+
+  .layout.is-mobile .chat {
+    padding: 12px;
+  }
+
+  .layout.is-mobile .explorer-body {
+    grid-template-columns: 1fr;
+  }
+
+  .layout.is-mobile .composer {
+    --composer-control-height: 42px;
+    padding: 8px;
+    gap: 6px;
+  }
+
+  .layout.is-mobile .composer--sticky {
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: calc(8px + env(safe-area-inset-bottom));
+    margin: 0;
+  }
+
+  .layout.is-mobile .side {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: min(360px, 88vw);
+    transform: translateX(-110%);
+    transition: transform 0.2s ease;
+    z-index: 60;
+    border-radius: 0 20px 20px 0;
+  }
+
+  .layout.is-mobile.is-side-open .side {
+    transform: translateX(0);
+  }
+
+  .layout.is-mobile .composer-main {
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .layout.is-mobile .composer-attach-button,
+  .layout.is-mobile .composer button.primary {
+    width: var(--composer-control-height);
+    height: var(--composer-control-height);
+    padding: 0;
+    border-radius: 12px;
+  }
+
+  .layout.is-mobile .composer-input {
+    min-height: var(--composer-control-height);
+    width: 100%;
+    padding: 10px 12px;
+    overflow: auto;
+  }
+
+  .layout.is-mobile .composer-model-select {
+    min-width: 96px;
+    max-width: 120px;
+    font-size: 12px;
+    padding-right: 24px;
+  }
+
+  .layout.is-mobile .composer-meta {
+    justify-content: flex-end;
+  }
+
+  .layout.is-mobile .composer-meta .link-button,
+  .layout.is-mobile .composer-chips {
+    display: none;
+  }
+
+  .layout.is-mobile .send-text {
+    display: none;
+  }
+
+  .layout.is-mobile .send-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .session-form {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .session-gate {
+    padding: 16px;
+  }
+
+  .session-workspace-options {
+    grid-template-columns: 1fr;
+  }
+
+  .session-workspace-toggle {
+    grid-template-columns: 1fr;
+  }
+
+  .session-layout--fullscreen {
+    padding: 20px 16px;
+    grid-template-columns: 1fr;
+  }
+
+  .session-panel {
+    padding: 20px;
+    min-height: auto;
+  }
+
+  .session-form-row {
+    grid-template-columns: 1fr;
+  }
+
+  .session-form-row.is-compact-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .session-form-row.is-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .session-form-row.is-actions .session-button {
+    width: 100%;
+  }
+
+  .session-form-row > div:empty {
+    display: none;
+  }
+
+  .session-form-row > button {
+    width: 100%;
+    justify-self: center;
+  }
+}
+
+@media (max-width: 1279px) {
+  .chat-history-grid.has-annotations {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .chat-history-grid.has-annotations .chat-history {
+    grid-column: 1 / -1;
+  }
+
+  .chat-annotation-rail {
+    display: none;
+  }
+}
+
+@media (min-width: 980px) {
+  .session-info {
+    display: block;
+  }
+}
+
+/* Worktree start button */
+.worktree-start-btn {
+  margin-top: 16px;
+  padding: 12px 24px;
+  background: var(--accent);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.worktree-start-btn:hover {
+  background: var(--accent-dark);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(238, 93, 59, 0.3);
+}
+
+/* Conversation section with worktree tabs */
+.conversation {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}