/* Purple styling reference: layered gradients, rounded edges, luminous accents. */
:root {
  --bg: #f1e9fb;
  --panel: #fdfaff;
  --raised: #f5eefc;
  --line: #e3d0f2;
  --text: #352344;
  --muted: #79648b;
  --blue: #8820ba;
  --blue-soft: #efdcfc;
  --shadow: 0 14px 38px rgba(129, 34, 176, .14);
  --purple-glow: 0 0 14px rgba(185, 49, 252, .32), 0 0 32px rgba(185, 49, 252, .18);
  --purple-glow-hover: 0 0 18px rgba(185, 49, 252, .5), 0 0 42px rgba(185, 49, 252, .28);
}

body {
  background-image: radial-gradient(ellipse at top, rgba(220, 152, 253, .24), transparent 65%);
}

.chat {
  background-image:
    radial-gradient(ellipse at 85% 0%, rgba(220, 152, 253, .22), transparent 55%),
    linear-gradient(rgba(129, 34, 176, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129, 34, 176, .045) 1px, transparent 1px);
  background-size: auto, 22px 22px, 22px 22px;
}

button {
  transition: box-shadow .18s ease, border-color .18s ease, background-color .18s ease, opacity .18s ease, transform .18s ease;
}

button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid #a62ce2;
  outline-offset: 3px;
}

/* Two background layers reproduce the reference's bright outer rim. */
.actions button:not(.secondary),
.primary-wide,
.assignment-controls button,
.workspace-picker button,
.chat-workspace-controls button:not(.secondary),
.chat-mode-switch button.active,
.agent-tab.active,
.artifact-add button,
.pin-plan,
.task-actions .approve-plan,
.task-actions .resume-task,
.interaction-card form > button,
.interaction-actions button,
.subtask-guidance-form button,
.task-editor-actions button[type="submit"],
#terminal-run,
#preview-configure,
#preview-toggle,
#running-sessions-toggle,
.running-session button,
.mobile-chat-toggle {
  color: #fff;
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(to top, #a62ce2, #c045fc) padding-box,
    linear-gradient(to top, #8122b0, #dc98fd) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), var(--purple-glow);
}

:is(.actions button:not(.secondary), .primary-wide, .assignment-controls button, .workspace-picker button,
  .chat-workspace-controls button:not(.secondary), .chat-mode-switch button.active,
  .agent-tab.active, .artifact-add button, .pin-plan, .task-actions .approve-plan,
  .task-actions .resume-task, .interaction-card form > button, .interaction-actions button,
  .subtask-guidance-form button, .task-editor-actions button[type="submit"],
  #terminal-run, #preview-configure, #preview-toggle, #running-sessions-toggle, .running-session button, .mobile-chat-toggle):hover:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), var(--purple-glow-hover);
}

button:active:not(:disabled) { transform: scale(.95); }
button:disabled { box-shadow: none; }

.view-tab.active {
  color: var(--blue);
  border-color: #d293f4;
  background: linear-gradient(to top, #efdcfc, #faf0ff);
  box-shadow: 0 0 16px rgba(185, 49, 252, .2), inset 0 1px 0 #fff;
}

.view-tab:hover:not(.active), .agent-tab:hover:not(.active) {
  border-color: #d293f4;
  box-shadow: 0 0 12px rgba(185, 49, 252, .16);
}

h1 span { box-shadow: 0 0 14px rgba(185, 49, 252, .55); }
.selected-agent-card { box-shadow: 0 0 0 1px var(--blue), var(--purple-glow); }
.planning-welcome, .plan-artifact { border-color: var(--line); box-shadow: var(--shadow); }

.session-activity { display: flex; align-items: center; gap: 8px; color: var(--blue); font-weight: 700; }
.session-activity::before { content: ""; width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--muted); }
[data-state="working"] .session-activity::before { background: #b931fc; animation: session-working 1.25s ease-in-out infinite; }
.session-activity[data-state="working"]::before { background: #b931fc; animation: session-working 1.25s ease-in-out infinite; }
[data-state="working"] { border-color: #d293f4; }
[data-state="approval"] .session-activity::before, [data-state="input"] .session-activity::before { background: var(--yellow); box-shadow: 0 0 12px rgba(217, 160, 79, .5); }
.session-activity[data-state="approval"]::before, .session-activity[data-state="input"]::before { background: var(--yellow); }
.session-latest { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow-y: auto; line-height: 1.6; color: var(--text); }
.session-approval:empty { display: none; }
@keyframes session-working {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185, 49, 252, .5), 0 0 8px rgba(185, 49, 252, .35); }
  50% { box-shadow: 0 0 0 6px rgba(185, 49, 252, 0), 0 0 20px rgba(185, 49, 252, .65); }
}

.app > header { flex-wrap: wrap; gap: 8px; }
#running-sessions-toggle { min-height: 36px; padding: 6px 10px; font-size: 11px; font-weight: 700; white-space: nowrap; }
#running-sessions-count { display: inline-grid; place-items: center; min-width: 20px; margin-left: 4px; padding: 2px 4px; border-radius: 8px; background: rgba(255, 255, 255, .2); }
#running-sessions-dialog { width: min(520px, calc(100vw - 24px)); max-height: 80dvh; padding: 20px; border: 1px solid #d293f4; border-radius: 20px; color: var(--text); background: var(--panel); box-shadow: var(--shadow), var(--purple-glow); }
#running-sessions-dialog::backdrop { background: rgba(35, 15, 50, .4); }
.running-sessions-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#running-sessions-close { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; color: var(--blue); background: var(--raised); }
#running-sessions-status { color: var(--muted); font-size: 12px; }
.live-session-group { min-width: 0; margin-top: 10px; border-left: 3px solid var(--session-group-color); padding-left: 10px; }
.live-session-group > summary { cursor: pointer; padding: 8px 0; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.live-session-run { display: grid; gap: 8px; min-width: 0; }
.live-session-run-label, .session-project-context { margin: 0; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.session-project-context { display: block; }
.live-session-filter { display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.live-session-filter select { min-width: 0; max-width: 100%; flex: 1; padding: 6px; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.running-session { display: grid; gap: 10px; min-width: 0; padding: 16px; margin-top: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); }
.running-session > strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; line-height: 1.4; }
.running-session > p { min-width: 0; margin: 0; }
.running-session > .session-activity { font-size: 12px; }
.running-session > .session-latest { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; max-height: none; white-space: normal; font-size: 12px; line-height: 1.5; color: var(--muted); }
.running-session button { padding: 9px 16px; }
.mobile-chat-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; position: fixed; z-index: 15; right: 16px; bottom: 18px; }
.mobile-chat-toggle { width: 50px; height: 50px; display: grid; place-items: center; padding: 0; }
.mobile-chat-tools svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mobile-chat-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 8px; width: min(340px, calc(100vw - 32px)); max-height: min(70dvh, calc(100dvh - var(--composer-height, 64px) - 90px)); min-height: 0; overflow: hidden; padding: 8px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); }
.mobile-chat-actions[hidden] { display: none; }
.mobile-chat-actions button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: var(--raised); font-size: 12px; text-align: left; }
#mobile-chat-actions > #running-sessions-toggle { grid-column: 1 / -1; }
#quick-session-buttons { display: grid; grid-column: 1 / -1; gap: 8px; max-height: 30dvh; overflow-y: auto; padding: 2px; overscroll-behavior: contain; }
#quick-session-buttons:empty { display: none; }
#quick-session-status:empty { display: none; }
#quick-session-status { grid-column: 1 / -1; margin: 4px; color: var(--red); font-size: 12px; }
.quick-session-button { min-width: 0; overflow-wrap: anywhere; text-align: left; line-height: 1.4; }
.quick-session-button[data-state="working"] { color: var(--blue); border-color: #d293f4; box-shadow: var(--purple-glow); }
.quick-session-button[data-state="approval"], .quick-session-button[data-state="input"] { border-color: var(--yellow); }
.running-session, .quick-session-button { --session-color: #625a70; }
.running-session[data-state="working"], .quick-session-button[data-state="working"] { --session-color: #7140ae; }
.running-session[data-state="idle"], .quick-session-button[data-state="idle"] { --session-color: #20704b; }
.running-session[data-state="approval"], .quick-session-button[data-state="approval"] { --session-color: #925900; }
.running-session[data-state="input"], .quick-session-button[data-state="input"] { --session-color: #246ba5; }
.running-session[data-state="failed"], .quick-session-button[data-state="failed"] { --session-color: #b33142; }
.running-session { border-left: 4px solid var(--session-color); }
.running-session > .session-activity, .quick-session-button .session-activity { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--session-color); font-size: 12px; font-weight: 700; }
.session-state-icon { display: inline-grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; font-size: 16px; line-height: 1; }
.mobile-chat-actions .quick-session-button { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; height: auto; min-height: min-content; border-left: 4px solid var(--session-color); }
.mobile-chat-actions .quick-session-button > * { flex-shrink: 0; }
#quick-session-buttons { grid-auto-rows: max-content; align-content: start; }
.quick-session-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; flex-shrink: 0; width: 100%; overflow: hidden; color: var(--text); font-weight: 600; }
.session-root-folder { display: inline-block; align-self: flex-start; width: fit-content; min-width: 0; max-width: 100%; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); overflow-wrap: anywhere; color: var(--blue); font-size: 11px; text-align: left; }
.session-harness { display: inline-flex; align-items: center; gap: 6px; width: fit-content; color: var(--muted); font-size: 11px; font-weight: 600; }
.session-harness-icon { display: inline-grid; place-items: center; width: 26px; height: 22px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font: 700 11px monospace; }
.quick-session-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; min-width: 0; padding: 5px; border: 1px solid var(--line); border-left: 3px solid var(--session-color, var(--blue)); border-radius: 10px; background: var(--raised); }
.mobile-chat-actions .quick-session-card .quick-session-button { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 6px; padding: 4px 6px; border: 0; border-radius: 6px; box-shadow: none; background: transparent; }
.quick-session-card .quick-session-title { grid-column: 1 / -1; font-size: 12px; -webkit-line-clamp: 1; text-align: left; }
.quick-session-card .session-root-folder { padding: 0; border: 0; font-size: 10px; background: none; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-session-card .session-project-context { grid-column: 1 / -1; grid-row: 2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 10px; }
.quick-session-card .session-root-folder { grid-column: 1 / -1; grid-row: 3; }
.quick-session-card .session-harness { grid-column: 1; grid-row: 4; font-size: 0; }
.quick-session-card .session-harness-icon { width: 22px; height: 18px; font-size: 10px; }
.quick-session-card .session-activity { grid-column: 2; grid-row: 4; font-size: 10px; gap: 4px; }
.quick-session-card .session-activity::before { display: none; }
.quick-session-card .session-state-icon { width: 16px; height: 16px; flex-basis: 16px; font-size: 12px; }
.quick-session-controls { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.mobile-chat-actions .session-icon-action { display: grid; place-items: center; width: 32px; min-height: 40px; padding: 5px; border: 0; border-radius: 7px; box-shadow: none; background: transparent; color: var(--blue); }
.mobile-chat-actions .session-icon-action svg { width: 17px; height: 17px; }
.mobile-chat-actions .session-icon-action:hover { background: var(--blue-soft); }
.mobile-chat-actions .session-icon-action.session-close { display: flex; justify-content: center; width: auto; gap: 5px; padding: 5px 10px; border: 1px solid currentColor; color: var(--red); font-size: 12px; }
.quick-session-error { grid-column: 1 / -1; margin: 0; font-size: 11px; color: var(--red); overflow-wrap: anywhere; }
.quick-session-error:empty { display: none; }
.quick-session-card form { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.quick-session-card form[hidden] { display: none; }
.quick-session-card form input { width: 100%; min-width: 0; min-height: 40px; font-size: 16px; }
#quick-session-buttons { grid-row: 4; min-height: 0; gap: 4px; max-height: 40dvh; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#quick-session-status { grid-row: 5; }
#quick-session-buttons:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
@media (min-width: 900px) {
  .app > header { align-content: center; }
}
@media (min-width: 601px) {
  .mobile-chat-actions [data-mobile-action] { display: flex; }
}
@media (max-width: 600px) {
  .mobile-chat-identity { flex: 1; }
  .app:has(#chat-view.active) > header .live { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
  [data-state="working"] .session-activity::before { animation: none; box-shadow: var(--purple-glow); }
  .session-activity[data-state="working"]::before { animation: none; box-shadow: var(--purple-glow); }
  button:active:not(:disabled) { transform: none; }
}