:root {
  --purple: #A12885;
  --purple-dark: #5E1850;
  --purple-tint: #F6E9F2;
  --ink: #1A0A16;
  --body: #3D2F38;
  --bg: #F4F1F3;
  --line: #E6DFE4;
  --muted: #7A6F76;
  --yellow: #FFD200;
  --green: #15803D;
  --red: #B91C1C;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--ink); height: 100vh;
  display: flex; flex-direction: column;
}

.top {
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  color: #fff; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between;
}
.brand { font-weight: 800; font-size: 1.15rem; }
.brand small { font-weight: 600; opacity: .85; font-size: .8rem; margin-left: 4px; padding: 2px 8px;
  background: rgba(255,255,255,.18); border-radius: 999px; }
.brand .bot { font-size: 1.2rem; margin-right: 6px; }
.meta { display: flex; align-items: center; gap: 10px; }
.pill {
  background: rgba(255,255,255,.16); padding: 4px 10px; border-radius: 999px;
  font-size: .76rem; font-weight: 700;
}
.conn-off { background: #C2410C; }
.conn-on { background: var(--green); }
.ghost {
  background: transparent; border: 1.5px solid rgba(255,255,255,.5); color: #fff;
  border-radius: 999px; padding: 5px 14px; font-weight: 700; cursor: pointer; font-size: .8rem;
}
.ghost:hover { background: rgba(255,255,255,.15); }

main {
  /* Resizable three-column grid with two drag handles between the columns.
   * Each column width is held in a CSS custom property so the drag JS can
   * mutate it without touching the grid definition. The trailing column
   * (1fr) absorbs whatever space is left so the page is always full-width.
   *
   *   chat ── handle ── middle ── handle ── right
   *   [--col-1]  6px   [--col-2]   6px     1fr
   *
   * Defaults are wider than 50/25/25 so the chat is the dominant panel out
   * of the box; user drags + localStorage override these at runtime. */
  --col-1: 1.5fr;
  --col-2: 1fr;
  flex: 1; display: grid;
  grid-template-columns: var(--col-1) 6px var(--col-2) 6px 1fr;
  gap: 6px; padding: 12px; min-height: 0; overflow: hidden;
}

/* Column drag handle — sits between two grid columns, full-height vertical bar. */
.col-resizer {
  background: transparent; cursor: col-resize; position: relative;
  transition: background-color .15s;
}
.col-resizer::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 2px; height: 28px; border-radius: 2px;
  background: var(--line); transition: background-color .15s;
}
.col-resizer:hover { background: rgba(161,40,133,.06); }
.col-resizer:hover::after { background: var(--purple); }
.col-resizer.dragging::after { background: var(--purple); }

/* Row drag handle — full-width horizontal bar between two stacked panels. */
.row-resizer {
  height: 6px; cursor: row-resize; background: transparent; position: relative;
  flex: 0 0 6px; transition: background-color .15s;
}
.row-resizer::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  height: 2px; width: 28px; border-radius: 2px;
  background: var(--line); transition: background-color .15s;
}
.row-resizer:hover { background: rgba(161,40,133,.06); }
.row-resizer:hover::after { background: var(--purple); }
.row-resizer.dragging::after { background: var(--purple); }

/* While a resize is in progress, force the cursor on every element and disable
 * text selection. We intentionally do NOT set `pointer-events: none` here —
 * window-level pointer listeners need the natural event flow to keep firing. */
body.resizing-col { cursor: col-resize !important; user-select: none; }
body.resizing-row { cursor: row-resize !important; user-select: none; }
body.resizing-col *, body.resizing-row * { user-select: none !important; }

/* Hint badge inside the welcome message. */
.hint {
  margin-top: 10px; padding: 7px 10px;
  background: var(--bg); border-radius: 8px;
  font-size: .76rem; color: var(--muted); font-style: italic;
}

/* ============ chat ============ */
.chat {
  display: flex; flex-direction: column; background: #fff; border-radius: 14px;
  box-shadow: 0 4px 18px rgba(26,10,22,.08); overflow: hidden; min-height: 0;
}
.messages {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.msg {
  padding: 11px 14px; border-radius: 14px; font-size: .92rem; line-height: 1.5;
  max-width: 92%; word-wrap: break-word; white-space: pre-wrap;
  animation: msgIn .2s ease both;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }
.msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--purple), var(--purple-dark)); color: #fff;
  border-bottom-right-radius: 4px;
}
.msg.agent {
  align-self: flex-start; background: var(--purple-tint);
  border-bottom-left-radius: 4px; white-space: normal;
}
.msg.agent b { color: var(--purple-dark); }
.msg.agent ul { margin: 6px 0 0 18px; }
.msg.agent li { margin: 2px 0; }
.msg.agent i { color: var(--ink); font-style: italic; }
.msg.agent a {
  color: var(--purple-dark); text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 2px; word-break: break-word;
}
.msg.agent a:hover { color: var(--purple); }
.msg-img {
  display: inline-block; vertical-align: middle;
  width: 120px; height: 80px; object-fit: cover;
  border-radius: 8px; margin: 4px 8px 4px 0;
  box-shadow: 0 2px 6px rgba(26,10,22,.18);
  background: #eee;
}

/* Download card — generated PDFs and similar artifacts the user can save. */
.msg.download-card { padding: 0; background: transparent; max-width: 92%; }
.download-link {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1.6px solid var(--line); border-radius: 14px;
  background: #fff; color: var(--ink); text-decoration: none;
  box-shadow: 0 2px 6px rgba(26,10,22,.05);
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.download-link:hover {
  border-color: var(--purple); box-shadow: 0 4px 14px rgba(161,40,133,.16);
}
.download-link:active { transform: scale(.99); }
.dl-icon { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
.dl-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dl-label { font-weight: 800; color: var(--ink); }
.dl-meta { font-size: .76rem; color: var(--muted); font-family: 'SF Mono', Menlo, Consolas, monospace; }
.dl-action {
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  color: #fff; font-weight: 800; font-size: .82rem;
  padding: 6px 14px; border-radius: 999px; flex-shrink: 0;
}
.msg.system, .msg.error {
  align-self: center; font-size: .82rem; font-weight: 700; padding: 6px 14px;
  border-radius: 999px;
}
.msg.system { background: #FFF6DD; color: #6B5300; }
.msg.error { background: #FDECEC; color: var(--red); }

.composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); align-items: center; }
.composer input { flex: 1; padding: 12px 14px; border: 1.6px solid var(--line); border-radius: 999px; font-size: .92rem; }
.composer input:focus { outline: none; border-color: var(--purple); }
.composer #send {
  background: linear-gradient(135deg, var(--purple), var(--purple-dark)); color: #fff;
  border: none; border-radius: 999px; padding: 0 22px; height: 44px; font-weight: 800; cursor: pointer;
}
.composer #send:disabled { opacity: .5; cursor: not-allowed; }

/* Mic button — square, purple ghost-border; states applied by JS:
 *   .listening  → pulsing red dot
 *   .thinking   → spinning ring
 *   .speaking   → orange wave animation
 *   .unsupported → muted (browser doesn't support Web Speech) */
.composer .mic {
  position: relative;
  width: 44px; height: 44px; flex: 0 0 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--purple);
  border: 1.6px solid var(--line); border-radius: 50%;
  cursor: pointer; padding: 0;
  font-size: 1.25rem; line-height: 1;
  transition: border-color .15s, background-color .15s, transform .12s;
}
.composer .mic:hover { border-color: var(--purple); }
.composer .mic:active { transform: scale(.94); }
.composer .mic.unsupported { opacity: .45; cursor: not-allowed; }
.composer .mic.listening {
  background: #FEE2E2; border-color: #DC2626; color: #B91C1C;
}
.composer .mic.listening::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid #DC2626; animation: micPulse 1.2s ease-out infinite;
}
.composer .mic.thinking {
  background: var(--purple-tint); border-color: var(--purple);
}
.composer .mic.thinking::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--purple); border-right-color: transparent;
  animation: micSpin 0.9s linear infinite;
}
.composer .mic.speaking {
  background: #FFEDD5; border-color: #C2410C; color: #9A3412;
}
.composer .mic.speaking::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid #C2410C; opacity: .5;
  animation: micPulse 0.7s ease-out infinite;
}
@keyframes micPulse {
  0%   { transform: scale(0.95); opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes micSpin { to { transform: rotate(360deg); } }

/* Voice bar — sits just under the composer with the hands-free toggle. */
.voice-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 12px 10px; border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(161,40,133,.04), transparent);
}
.voice-switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.voice-switch input { position: absolute; opacity: 0; pointer-events: none; }
.voice-switch .slider {
  width: 30px; height: 16px; background: var(--line); border-radius: 999px;
  position: relative; transition: background-color .15s;
}
.voice-switch .slider::after {
  content: ''; position: absolute; left: 2px; top: 2px;
  width: 12px; height: 12px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s;
}
.voice-switch input:checked + .slider { background: var(--purple); }
.voice-switch input:checked + .slider::after { transform: translateX(14px); }
.voice-switch .label { font-size: .78rem; font-weight: 700; color: var(--ink); }
.voice-state {
  flex: 1; text-align: right; font-size: .76rem; color: var(--muted);
  font-style: italic; min-height: 1.2em;
}

/* ============ side panels ============ */
/* Each side column is a flex column with a drag handle between its two panels.
 * The top panel's height is held in a per-side CSS variable, so the row-resizer
 * JS can mutate just that side's value. The bottom panel takes the rest. */
.side {
  display: flex; flex-direction: column; gap: 6px; min-height: 0;
  --top-height: 50%;
}
.side[data-side='middle'] { --top-height: 38%; } /* default split: services smaller, task bigger */
.side[data-side='right']  { --top-height: 65%; } /* default split: screen-cap dominant */
.side > .panel:first-child { flex: 0 0 var(--top-height); min-height: 60px; }
.side > .panel:last-child  { flex: 1; min-height: 60px; }
.panel {
  background: #fff; border-radius: 14px; box-shadow: 0 4px 18px rgba(26,10,22,.08);
  display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}
.panel-head {
  padding: 9px 14px; font-weight: 800; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .6px; color: var(--muted); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.mini {
  background: var(--purple); color: #fff; border: none; border-radius: 999px;
  font-size: .68rem; font-weight: 800; padding: 3px 10px; cursor: pointer;
}
.mini:hover { background: var(--purple-dark); }

/* services panel — sizing comes from the parent .side > :first-child rule
 * (drag-controlled). The body inside scrolls when content exceeds the box. */
.services-body { padding: 8px 10px; font-size: .82rem; color: var(--body); overflow-y: auto; min-height: 0; }
.services-head {
  font-weight: 800; color: var(--ink); font-size: .78rem; margin-bottom: 6px;
  display: flex; align-items: baseline; gap: 6px;
}
.services-hint {
  font-weight: 600; color: var(--muted); font-size: .68rem; font-style: italic;
}
.services-body .server-row {
  border-bottom: 1px solid var(--line); padding: 0;
}
.services-body .server-row:last-child { border-bottom: none; }
.services-body .server-row > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px; cursor: pointer; user-select: none;
  list-style: none;
  transition: background-color .12s;
}
.services-body .server-row > summary::-webkit-details-marker { display: none; }
.services-body .server-row > summary::before {
  content: '▸'; color: var(--muted); font-size: .7rem; margin-right: 2px;
  transition: transform .15s;
}
.services-body .server-row[open] > summary::before { transform: rotate(90deg); }
.services-body .server-row > summary:hover { background: var(--bg); border-radius: 6px; }
.services-body .tag {
  background: var(--purple-tint); color: var(--purple); font-weight: 800;
  font-size: .7rem; padding: 2px 8px; border-radius: 999px;
}
.services-body .ks { color: var(--muted); font-size: .76rem; margin-left: auto; }
.services-body .err { color: var(--red); padding: 6px 4px; display: block; }
.services-body .protocol {
  font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: .7rem;
  background: var(--ink); color: var(--yellow); padding: 1px 6px; border-radius: 4px;
}
.services-body .server-error { padding: 6px 4px; }
.services-body .tool-list {
  list-style: none; margin: 0 0 6px 0; padding: 2px 0 4px 24px;
}
.services-body .tool-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 0; border-top: 1px dashed var(--line);
}
.services-body .tool-item:first-child { border-top: none; }
.services-body .tool-name {
  background: var(--purple-tint); color: var(--purple-dark);
  padding: 1px 7px; border-radius: 4px; font-weight: 700;
  font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: .72rem;
  white-space: nowrap; flex-shrink: 0;
}
.services-body .tool-desc {
  color: var(--body); font-size: .74rem; line-height: 1.4;
}
.services-body .tool-empty {
  padding: 4px 24px; color: var(--muted); font-style: italic; font-size: .76rem;
}

/* a2a task panel — sizing comes from .side > :last-child (drag-controlled). */
.task-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 12px 14px; font-size: .84rem; color: var(--body);
}
.task-body.empty { color: var(--muted); font-style: italic; }
.task-body .tstate {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: .75rem; padding: 3px 10px;
  border-radius: 999px; text-transform: uppercase; letter-spacing: .5px;
}
.task-body .tstate.submitted { background: #FEF3C7; color: #92400E; }
.task-body .tstate.working { background: var(--purple-tint); color: var(--purple-dark); }
.task-body .tstate.input-required { background: #FFEDD5; color: #9A3412; }
.task-body .tstate.completed { background: #DCFCE7; color: #14532D; }
.task-body .tstate.canceled { background: var(--line); color: var(--muted); }
.task-body .tstate.failed { background: #FECACA; color: var(--red); }
.task-body .tstate i {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: blip 1.2s infinite;
}
.task-body .tstate:not(.working) i { animation: none; opacity: .6; }
/* keep the dot pulsing while we're waiting on the user too */
.task-body .tstate.input-required i { animation: blip 1.2s infinite; opacity: 1; }
@keyframes blip { 0%, 100% { transform: scale(.7); } 50% { transform: scale(1.1); } }
.task-body h4 { font-size: .85rem; margin: 14px 0 4px; color: var(--ink); }
.task-body .meta { font-size: .76rem; color: var(--muted); margin-top: 2px; }
.task-body .agent-msg {
  background: var(--bg); padding: 8px 10px; border-radius: 8px;
  margin: 4px 0; font-size: .82rem; line-height: 1.5;
}
.task-body .agent-msg.tool-call { border-left: 3px solid var(--purple); }
.task-body .agent-msg.tool-result { border-left: 3px solid var(--green); }
.task-body .agent-msg.status { color: var(--muted); font-style: italic; }
.task-body .agent-msg.error { border-left: 3px solid var(--red); color: var(--red); }

/* screen capture panel — sizing comes from .side > :first-child (drag-controlled). */
.screen-body {
  flex: 1; min-height: 0; overflow: hidden; padding: 0; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.screen-body.empty {
  background: #fff; color: var(--muted); font-style: italic;
  padding: 16px; font-size: .9rem;
}
.screen-body img {
  display: block; max-width: 100%; max-height: 100%; object-fit: contain;
}

/* The JSON-LD artifact panel was removed — reservations are summarised in chat
 * and persisted by the MCP/A2A servers. The screen-capture panel above shows
 * the agent's live browser frames; the activity log below shows tool calls. */

/* activity log — sizing from .side > :last-child (drag-controlled).
 * The body scrolls internally when rows exceed the box. */
.log {
  flex: 1; min-height: 0; overflow-y: auto; padding: 8px 14px; font-size: .78rem; line-height: 1.55;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.log .row { padding: 2px 0; border-bottom: 1px solid var(--bg); }
.log .row:last-child { border-bottom: none; }
.log .ok { color: var(--green); }
.log .err { color: var(--red); }
.log .tool { color: var(--purple); font-weight: 700; }
.log .a2a { color: #C2410C; font-weight: 700; }
.log .info { color: var(--muted); }

/* The old <1200px breakpoint reflowed the right side to wrap below — that
 * stacked layout fought the user's manual resize. With drag handles the user
 * controls widths directly, so we drop the medium-width breakpoint and only
 * keep the small-viewport one (single column on phones). */
@media (max-width: 820px) {
  main { grid-template-columns: 1fr; grid-auto-rows: minmax(260px, auto); }
  .side, .side:nth-of-type(3) { flex-direction: column; }
}