body[data-screen=board] {
  --assistant-width: clamp(348px, 31vw, 428px);
  --agent-ink: #19152b;
  --agent-accent: #6545da;
  --agent-line: #e8e5ee;
  --agent-ease: cubic-bezier(.2,.7,.15,1);
}
.assistant-panel {
  inset: 10px 10px 10px auto;
  width: calc(var(--assistant-width) - 12px);
  color: var(--agent-ink);
  border: 1px solid var(--agent-line);
  border-radius: 24px;
  box-shadow: 0 10px 38px #2f235019, 0 1px 3px #241b370d;
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.assistant-panel .assistant-header {
  padding: 12px;
  gap: 8px;
  border-bottom: 1px solid #f1eff5;
}
.assistant-identity,.assistant-header-actions {
  display: flex;
  align-items: center;
  min-width: 0;
}
.assistant-identity {gap: 9px; flex: 1}
.assistant-panel .assistant-identity strong {
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assistant-avatar,.assistant-welcome-mark {
  flex: none;
  display: grid;
  place-items: center;
  color: #5535bc;
  background: linear-gradient(145deg,#f2ecff,#e6ddff);
  border: 1px solid #e8e0f9;
}
.assistant-avatar {width: 36px; height: 36px; border-radius: 13px}
.assistant-avatar svg {width: 21px; height: 21px}
.assistant-header-actions {
  gap: 2px;
  background: #faf9fc;
  border: 1px solid #f0edf5;
  border-radius: 13px;
  padding: 2px;
}
.assistant-header-actions .square {border-radius: 10px; color: #58526b}
.assistant-header-actions .square:hover {background: #efedf5; color: var(--agent-ink)}
.assistant-header-actions .assistant-follow[aria-pressed=true] {background: #ede7fc; color: #603ccf}

.assistant-transcript {
  gap: 16px;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: #ded9ea transparent;
  overscroll-behavior: contain;
}
.assistant-suggestions {gap: 5px; padding: 4px 0 8px}
.assistant-welcome {display: grid; gap: 12px; padding: 0 4px 12px}
.assistant-welcome-mark {width: 43px; height: 43px; border-radius: 15px}
.assistant-welcome-mark svg {width: 25px; height: 25px}
.assistant-suggestions .assistant-welcome strong {
  padding: 0;
  font-size: clamp(19px,2vw,23px);
  letter-spacing: -.035em;
  line-height: 1.2;
}
.assistant-starter {
  display: flex;
  gap: 9px;
  align-items: center;
  width: 100%;
  padding: 6px 9px 6px 6px;
  border: 1px solid transparent;
  border-radius: 13px;
  text-align: start;
  color: #2e293e;
  background: #fff;
  font-size: 13px;
  min-height: 42px;
}
.assistant-starter:hover {background: #faf9fc; border-color: #f0edf5}
.assistant-starter-icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  flex: none;
  border-radius: 10px;
  background: #eee7fc;
  color: #6341cf;
}
.assistant-starter-icon svg,.assistant-starter-arrow svg {width: 16px; height: 16px}
.assistant-starter-arrow {display: flex; margin-inline-start: auto; color: #8b849e}
.assistant-starter[data-tone=amber] .assistant-starter-icon {background: #ffefd8; color: #96531a}
.assistant-starter[data-tone=blue] .assistant-starter-icon {background: #e8efff; color: #3759bd}
.assistant-starter[data-tone=mint] .assistant-starter-icon {background: #dcf5ee; color: #17775f}

.assistant-panel .assistant-chat-form {
  position: relative;
  gap: 3px;
  margin: 0 12px 12px;
  padding: 8px;
  border: 1px solid #e4deed;
  border-radius: 19px;
  background: white;
  box-shadow: 0 2px 7px #3324520d;
}
.assistant-panel .assistant-chat-form:focus-within {border-color: #bfaeed; box-shadow: 0 0 0 3px #eee8fb}
.assistant-chat-form textarea {
  resize: none;
  min-height: 48px;
  padding: 7px 8px;
  line-height: 1.45;
  color: var(--agent-ink);
  background: transparent;
  outline: 0;
}
.assistant-chat-form textarea:focus-visible {outline: 0}
.assistant-chat-form textarea::placeholder {color: #746d83}
.assistant-chat-actions {gap: 6px}
.assistant-panel .assistant-chat-actions .square {border-radius: 11px}
.assistant-panel .assistant-chat-actions .assistant-add {background: #f5f2fa; color: #6546aa}
.assistant-panel .assistant-chat-actions .assistant-add:hover:not(:disabled) {background: #ece5f8; color: #5535bc}
.assistant-panel .assistant-chat-actions .assistant-send,.assistant-panel .assistant-chat-actions .assistant-stop {
  background: var(--agent-accent);
  color: white;
}
.assistant-panel .assistant-chat-actions :is(.assistant-send,.assistant-stop):hover:not(:disabled) {background: #5130be}
.assistant-chat-chips,.assistant-result-actions {display: flex; flex-wrap: wrap; gap: 6px}
.assistant-chat-chips:not(:has(> :not([hidden]))) {display: none}
.assistant-chat-form :is(.assistant-chip,.assistant-context) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 5px 8px;
  border: 1px solid #eae2f8;
  border-radius: 8px;
  background: #f7f2fe;
  color: #5c3db8;
  font-size: 11px;
}
.assistant-chat-form .assistant-context[aria-pressed=false] {background: white; color: var(--muted)}
.assistant-commands {
  position: absolute;
  z-index: 1;
  inset: auto 0 calc(100% + 8px);
  max-height: min(46dvh, 390px);
  overflow: auto;
  padding: 5px;
  background: white;
  border: 1px solid var(--agent-line);
  border-radius: 15px;
  box-shadow: 0 10px 34px #33245222;
  transform-origin: bottom left;
}
.assistant-commands strong,.assistant-commands p {display: block; padding: 8px; color: var(--muted); font-size: 12px}
.assistant-commands .menu-row {border-radius: 9px}

.assistant-transcript .assistant-turn {padding: 8px 0; font-size: 14px; color: #30293e}
.assistant-transcript .assistant-turn p {white-space: pre-wrap; line-height: 1.56; margin: 0}
.assistant-transcript .user-turn {
  max-width: 90%;
  padding: 9px 13px;
  border-radius: 15px 15px 5px 15px;
  background: #f1eafa;
}
.assistant-turn .assistant-result-actions {margin-top: 9px}
.assistant-turn .assistant-change-status,.assistant-result-details {color: #706680; font-size: 12px}
.assistant-turn .assistant-change-status {margin-top: 8px; display: flex; align-items: center; gap: 5px}
.assistant-change-status span {display: flex; color: #228062}
.assistant-change-status svg {width: 14px; height: 14px}
.assistant-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 9px;
  background: #f2edf9;
  color: #5938be;
  font-size: 12px;
  font-weight: 600;
}
.assistant-action:hover {background: #eae0f8}
.assistant-action svg {width: 15px; height: 15px}
.assistant-result-details {margin-top: 8px}
.assistant-result-details summary {cursor: pointer}
.assistant-transcript .assistant-pending {display: flex; align-items: center; gap: 8px; color: #726784; font-size: 13px}
.assistant-progress-mark {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  flex: none;
  border-radius: 10px;
  background: #eee7fc;
  color: #6545da;
}
.assistant-progress-mark svg {width: 17px; height: 17px}
.assistant-drawing {
  display: block;
  width: 100%;
  margin-top: 8px;
  border: 1px solid var(--agent-line);
  border-radius: 11px;
  background: white;
}
.assistant-dock .assistant-card {border-radius: 16px}
.assistant-dock .assistant-composer {border-radius: 17px}
.assistant-dock .assistant-dock-launch {background: #eee7fc; color: #603ccf; border-radius: 10px}
.assistant-dock .assistant-input input {min-width: 0; padding-inline-start: 8px}

.assistant-expand-chat,.assistant-panel .assistant-close-compact {display: none}
.assistant-panel[data-layout=compact] {
  inset: auto auto 24px 50%;
  translate: -50% 0;
  width: min(550px,calc(100vw - 144px));
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: 8px;
}
.assistant-panel[data-layout=compact] .assistant-header,
.assistant-panel[data-layout=compact] :is(.assistant-suggestions,.user-turn),
.assistant-panel[data-layout=compact] .assistant-turn:not(:last-child),
.assistant-panel[data-layout=compact] .assistant-transcript:not(:has(.assistant-turn:not(.user-turn))) {display: none}
.assistant-panel[data-layout=compact] .assistant-transcript {
  flex: none;
  padding: 9px 12px;
  background: white;
  border: 1px solid var(--agent-line);
  border-radius: 16px;
  box-shadow: 0 4px 18px #2f23501a;
  max-height: 152px;
}
.assistant-panel[data-layout=compact] .assistant-turn {padding: 0}
.assistant-panel[data-layout=compact] .assistant-turn > p:first-child {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.assistant-panel[data-layout=compact] .assistant-chat-form {
  margin: 0;
  box-shadow: 0 5px 18px #2f23501c;
}
.assistant-panel[data-layout=compact] .assistant-chat-form:focus-within {box-shadow: 0 0 0 3px #eee8fb,0 5px 18px #2f23501c}
.assistant-panel[data-layout=compact] .assistant-expand-chat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 9px;
  color: #635a75;
  font-size: 12px;
}
.assistant-panel[data-layout=compact] .assistant-expand-chat:hover {background: #f5f1fc; color: #5938be}
.assistant-expand-chat svg {width: 15px; height: 15px}
.assistant-panel[data-layout=compact] .assistant-close-compact {
  display: grid;
  background: transparent;
  color: #766c85;
}
.assistant-panel[data-layout=compact] .assistant-close-compact:hover:not(:disabled) {background: #f5f1fc; color: #30253f}

.assistant-board-activity {
  position: absolute;
  inset: 68px auto auto 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 96px);
  padding: 5px;
  border: 1px solid var(--agent-line);
  border-radius: 13px;
  background: white;
  color: var(--agent-ink);
  box-shadow: 0 6px 20px #33245220;
  cursor: default;
}
.assistant-open .assistant-board-activity {display: none}
.assistant-board-activity .square {flex: none; width: 30px; height: 30px; border-radius: 9px}
.assistant-board-activity .square svg {width: 16px; height: 16px}
.assistant-board-progress {font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.agent-scene {pointer-events: none}
.agent-highlight {fill: #e7762714; stroke: #da6228; stroke-width: 1.6; vector-effect: non-scaling-stroke}
.agent-highlight[data-phase=drag] {fill: none; stroke-dasharray: 6 4}
.agent-tap-ring {fill: none; stroke: #ec7533; stroke-width: 2}
.agent-dragging {filter: drop-shadow(0 4px 7px #45302729)}
.agent-source {opacity: 0}
.agent-pointer {fill: #ec7533; stroke: #fff; stroke-width: 1.65; stroke-linejoin: round; filter: drop-shadow(0 2px 3px #82301355)}
.agent-cursor-label {fill: #b64720; filter: drop-shadow(0 2px 4px #82301339)}
.agent-cursor text {font-size: 12px; font-weight: 650; fill: white}

@media (701px <= width <= 1000px) {
  .assistant-panel[data-layout=compact] {bottom: 64px}
}
@media (max-width: 700px) {
  body[data-screen=board] {--assistant-width: 100%}
  body[data-screen=board] .assistant-panel {width: 100%; border-radius: 0; border: 0; box-shadow: none}
  .assistant-panel .assistant-collapse-chat {display: none}
  body[data-screen=board] .assistant-panel .assistant-header {padding: 3px 1px 7px}
  body[data-screen=board] .assistant-panel .assistant-chat-form {margin: 0}
  .assistant-transcript {padding: 8px 3px}
}
@media (prefers-reduced-motion: no-preference) {
  body[data-screen=board] .assistant-panel:not([hidden]) {animation: agent-panel-in 260ms var(--agent-ease)}
  body[data-screen=board] .assistant-panel[data-layout=compact]:not([hidden]) {animation: agent-composer-in 230ms var(--agent-ease)}
  .assistant-transcript .assistant-turn,.assistant-commands:not([hidden]) {animation: agent-item-in 190ms var(--agent-ease)}
  .assistant-progress-mark {animation: agent-working 1100ms ease-in-out infinite}
  .assistant-starter,.assistant-panel .assistant-chat-form {transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease}
  .assistant-starter-arrow {transition: transform 120ms var(--agent-ease)}
  .assistant-starter:hover .assistant-starter-arrow {transform: translateX(2px)}
}
@keyframes agent-panel-in {from {opacity: 0; transform: translateX(16px) scale(.99)}}
@keyframes agent-composer-in {from {opacity: 0; transform: translateY(9px) scale(.99)}}
@keyframes agent-item-in {from {opacity: 0; transform: translateY(6px)}}
@keyframes agent-working {50% {transform: scale(1.08); background: #e3d6fb}}

.assistant-markdown {display: flex; flex-direction: column; gap: 9px; min-width: 0; line-height: 1.55}
.assistant-result-details > .assistant-markdown {margin-top: 8px}
.assistant-transcript .assistant-markdown p {white-space: pre-line}
.assistant-markdown :is(h3,h4,h5,h6) {margin: 2px 0 0; font-size: 1em; font-weight: 690; line-height: 1.35; color: var(--agent-ink)}
.assistant-markdown h3 {font-size: 1.12em; letter-spacing: -.012em}
.assistant-markdown :is(ol,ul) {margin: 0; padding-inline-start: 1.4em}
.assistant-markdown li + li {margin-top: 4px}
.assistant-markdown li > :is(ol,ul) {margin-top: 4px}
.assistant-markdown li::marker {color: #75659e}
.assistant-markdown a {color: #5633bb; text-decoration: underline; text-underline-offset: 2px}
.assistant-markdown a:focus-visible {outline: 2px solid #ad94ee; outline-offset: 2px; border-radius: 3px}
.assistant-markdown code {font: .9em/1.6 "IBM Plex Mono", Consolas, monospace}
.assistant-markdown :not(pre) > code {padding: .1em .32em; border-radius: 4px; background: #f2edf8; color: #492f77}
.assistant-markdown pre {
  min-width: 0; margin: 0; padding: 9px 11px; overflow-x: auto; border: 1px solid #ede8f4;
  border-radius: 10px; background: #f8f6fb; color: #3a2a50; white-space: pre;
}
.assistant-markdown blockquote {margin: 0; padding: 5px 9px; border-inline-start: 2px solid #c9b9ee; color: #615674}
.assistant-markdown blockquote > * + * {margin-top: 6px}
.assistant-markdown hr {align-self: stretch; margin: 0; border: 0; border-top: 1px solid var(--agent-line)}
.assistant-markdown-table {max-width: 100%; overflow-x: auto; border: 1px solid var(--agent-line); border-radius: 10px}
.assistant-markdown table {width: 100%; border-collapse: collapse; text-align: start; font-size: .92em}
.assistant-markdown :is(th,td) {padding: 6px 8px; text-align: start; vertical-align: top}
.assistant-markdown th {background: #f6f3fa; font-weight: 650; color: #4a3b65}
.assistant-markdown td {border-top: 1px solid #efebf3}
.assistant-markdown .assistant-formula {font-variant-numeric: lining-nums; color: #30234a}
.assistant-markdown .assistant-formula-block {
  min-width: 0; max-width: 100%; overflow-x: auto; white-space: pre-wrap; padding: 6px 9px;
  border-radius: 8px; background: #f7f4fb; text-align: center;
}
