:root {
  --xc-sidebar-width: 15rem;
  --xc-reading-width: 48rem;
  --xc-face-size: 1.75rem;
  --xc-face-large: 2.75rem;
  --xc-body-size: .8125rem;
  --xc-label-size: .6875rem;
  --xc-panel-pad: 1.25rem;
  --xc-mint: #83d7a1;
  --xc-blue: #81b9ed;
  --xc-peach: #edab8c;
  --xc-lilac: #b5a0e5;
  --xc-gold: #deca83;
  --xc-eye: #192721;
  --xc-user-bg: #252628;
  --xc-subtle: #858d98;
  --xc-control-bg: #25272a;
}

.xd-shell[data-mode="agent"], .xd-shell[data-mode="chat"] { grid-template-columns: var(--xc-sidebar-width) minmax(0, 1fr); }
.xc-sidebar { min-height: 0; padding: 0; gap: 0; background: var(--xd-panel); }
.xc-sidebar-scroll { flex: 1; min-height: 0; overflow: auto; padding: var(--xd-size-12) var(--xd-size-8); scrollbar-width: thin; scrollbar-color: var(--xd-border) transparent; }
.xc-side-heading { display: flex; justify-content: space-between; align-items: center; color: var(--xd-muted); font-size: var(--xc-label-size); margin: var(--xd-size-4) var(--xd-size-6) var(--xd-size-12); }
.xc-side-heading > span:last-child { color: var(--xc-subtle); font: var(--xd-size-10) var(--wt-font-mono); }
.xc-face { display: block; width: var(--xc-face-size); height: var(--xc-face-size); flex: 0 0 var(--xc-face-size); color: var(--xc-mint); }
.xc-face svg { width: 100%; height: 100%; fill: currentColor; }
.xc-face svg .xc-eye { fill: var(--xc-eye); }
.xc-face-large { width: var(--xc-face-large); height: var(--xc-face-large); }
.xc-mint { color: var(--xc-mint); }.xc-blue { color: var(--xc-blue); }.xc-peach { color: var(--xc-peach); }.xc-lilac { color: var(--xc-lilac); }.xc-gold { color: var(--xc-gold); }
.xc-agent-selected { display: flex; flex-direction: column; align-items: center; gap: var(--xd-size-4); border: var(--xd-size-1) solid var(--xd-border); border-radius: var(--xd-size-8); padding: var(--xd-size-12); margin-bottom: var(--xd-size-10); background: var(--xd-raised); }
.xc-agent-selected > strong { font-size: var(--xc-body-size); margin-top: var(--xd-size-3); }
.xc-agent-selected > span:not(.xc-face) { font-size: var(--xc-label-size); color: var(--xd-muted); }
.xc-agent-selected > small { font-size: var(--xd-size-9); color: var(--xd-muted); display: flex; align-items: center; gap: var(--xd-size-5); margin-top: var(--xd-size-3); }
.xc-agent-selected i, .xc-ready i, .xc-account > i { width: var(--xd-size-5); height: var(--xd-size-5); background: var(--xd-green); border-radius: 50%; display: inline-block; }
.xc-agent-list { display: grid; gap: var(--xd-size-3); }
.xc-agent-row { display: flex; align-items: center; gap: var(--xd-size-8); min-height: var(--xd-size-58); padding: var(--xd-size-8); border: 0; border-radius: var(--xd-size-6); background: transparent; color: var(--xd-text); text-align: left; cursor: pointer; }
.xc-agent-row:hover, .xc-agent-row[aria-pressed="true"] { background: var(--xd-raised); }
.xc-agent-row > span:last-child { display: grid; gap: var(--xd-size-2); min-width: 0; flex: 1; }
.xc-agent-row strong { display: flex; align-items: center; justify-content: space-between; font-size: var(--xd-size-12); }
.xc-agent-row strong small { color: var(--xc-gold); font-size: var(--xd-size-8); font-weight: 400; }
.xc-agent-row > span > span { font-size: var(--xd-size-10); color: var(--xd-muted); }
.xc-agent-row em { color: var(--xc-subtle); font-size: var(--xd-size-9); font-style: normal; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.xc-account { display: flex; align-items: center; gap: var(--xd-size-8); padding: var(--xd-size-12); border-top: var(--xd-size-1) solid var(--xd-border); flex-shrink: 0; }
.xc-account-mark { display: grid; place-items: center; width: var(--xd-size-25); height: var(--xd-size-25); border-radius: 50%; background: var(--xd-accent); color: var(--xd-text); font-size: var(--xd-size-11); font-weight: 700; }
.xc-account > span:nth-child(2) { display: grid; gap: var(--xd-size-3); flex: 1; }
.xc-account strong { font-size: var(--xd-size-10); }.xc-account small { color: var(--xd-muted); font-size: var(--xd-size-9); }
.xc-new-chat { display: flex; align-items: center; gap: var(--xd-size-8); width: 100%; min-height: var(--xd-size-36); padding: var(--xd-size-8); border: var(--xd-size-1) solid var(--xd-border); border-radius: var(--xd-size-6); background: var(--xd-raised); color: var(--xd-text); font-size: var(--xd-size-11); cursor: pointer; }
.xc-new-chat svg, .xc-thread-group svg, .xc-chat-head svg { width: var(--xd-size-13); height: var(--xd-size-13); flex-shrink: 0; }
.xc-thread-group { margin-top: var(--xd-size-20); }
.xc-thread-group > p { display: flex; gap: var(--xd-size-6); align-items: center; margin: 0 0 var(--xd-size-6); padding-inline: var(--xd-size-6); color: var(--xd-muted); font-size: var(--xd-size-10); }
.xc-thread-group > p > span { margin-left: auto; font-size: var(--xd-size-9); }
.xc-thread-row { display: flex; align-items: center; gap: var(--xd-size-7); min-height: var(--xd-size-36); width: 100%; padding: var(--xd-size-7) var(--xd-size-8); border: 0; border-radius: var(--xd-size-5); background: transparent; color: var(--xd-muted); text-align: left; cursor: pointer; }
.xc-thread-row > span:first-child { height: var(--xd-size-4); width: var(--xd-size-4); border-radius: 50%; background: var(--xc-subtle); flex-shrink: 0; }
.xc-thread-row > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--xd-size-11); }
.xc-thread-row:hover, .xc-thread-row[aria-pressed="true"] { background: var(--xd-selected); color: var(--xd-text); }
.xc-thread-row[aria-pressed="true"] > span:first-child { background: var(--xd-accent); }

.xc-conversation { background: var(--xd-panel); min-height: 0; }
.xc-conversation-head { display: flex; align-items: center; gap: var(--xd-size-10); min-height: var(--xd-size-58); padding: var(--xd-size-10) var(--xd-size-16); border-bottom: var(--xd-size-1) solid var(--xd-border); flex-shrink: 0; }
.xc-conversation-head > div { display: grid; gap: var(--xd-size-3); min-width: 0; }
.xc-conversation-head strong { font-size: var(--xd-size-12); }.xc-conversation-head strong > span { font-weight: 400; color: var(--xd-muted); }
.xc-conversation-head small { font-size: var(--xd-size-10); color: var(--xd-muted); }
.xc-ready { margin-left: auto; display: flex; align-items: center; gap: var(--xd-size-6); color: var(--xd-muted); font-size: var(--xd-size-10); padding: var(--xd-size-4) var(--xd-size-8); border: var(--xd-size-1) solid var(--xd-border); border-radius: var(--xd-size-20); white-space: nowrap; }
.xc-thread-tabs { display: flex; flex-shrink: 0; gap: var(--xd-size-4); padding: 0 var(--xd-size-12); min-height: var(--xd-size-36); border-bottom: var(--xd-size-1) solid var(--xd-border); overflow-x: auto; }
.xc-thread-tabs button { position: relative; border: 0; background: transparent; color: var(--xd-muted); padding: var(--xd-size-8) var(--xd-size-10); font-size: var(--xd-size-10); white-space: nowrap; cursor: pointer; }
.xc-thread-tabs button[aria-pressed="true"] { color: var(--xd-text); box-shadow: inset 0 calc(-1 * var(--xd-size-2)) var(--xd-accent); }
.xc-thread-tabs button:hover { background: var(--xd-raised); }.xc-thread-tabs svg { width: var(--xd-size-12); height: var(--xd-size-12); }
.xc-chat-head { display: flex; align-items: center; gap: var(--xd-size-12); flex-wrap: wrap; padding: var(--xd-size-10) var(--xd-size-16); min-height: var(--xd-size-48); border-bottom: var(--xd-size-1) solid var(--xd-border); flex-shrink: 0; }
.xc-chat-head > div { display: flex; align-items: center; gap: var(--xd-size-6); font-size: var(--xd-size-11); }
.xc-chat-head > span { flex: 1; min-width: 0; color: var(--xd-muted); font-size: var(--xd-size-11); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xc-chat-head small { color: var(--xc-peach); font-size: var(--xd-size-9); }
.xc-branch { display: flex; align-items: center; gap: var(--xd-size-3); padding: var(--xd-size-2) var(--xd-size-5); border-radius: var(--xd-size-4); background: var(--xd-raised); color: var(--xd-muted); font-size: var(--xd-size-9); }
.xc-branch svg { width: var(--xd-size-10); height: var(--xd-size-10); }

.xc-transcript { padding: var(--xc-panel-pad); display: block; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--xd-border) transparent; }
.xc-transcript-inner { max-width: var(--xc-reading-width); margin-inline: auto; }
.xc-user-message { width: fit-content; max-width: 92%; margin: 0 0 var(--xd-size-12) auto; padding: var(--xd-size-10) var(--xd-size-14); border-radius: var(--xd-size-8); background: var(--xc-user-bg); color: var(--xd-text); font-size: var(--xc-body-size); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.xc-thought { margin: 0 0 var(--xd-size-10); color: var(--xc-subtle); font-size: var(--xd-size-10); }
.xc-thought summary { cursor: pointer; }.xc-thought summary > span { margin-left: var(--xd-size-6); }
.xc-thought > p { padding-left: var(--xd-size-12); line-height: 1.7; }
.xc-tool-group { display: grid; gap: var(--xd-size-3); margin-bottom: var(--xd-size-12); }
.xc-tool summary { display: flex; align-items: center; gap: var(--xd-size-6); min-height: var(--xd-size-28); font: var(--xd-size-10)/1.5 var(--wt-font-mono); color: var(--xd-muted); cursor: pointer; border-radius: var(--xd-size-4); padding: var(--xd-size-3) var(--xd-size-6); }
.xc-tool summary::before { content: "›"; color: var(--xc-subtle); }.xc-tool[open] summary::before { transform: rotate(90deg); }
.xc-tool summary:hover { background: var(--xd-raised); }.xc-tool summary b { color: var(--xd-text); font-weight: 500; }
.xc-tool summary > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.xc-tool summary i { margin-left: auto; color: var(--xd-green); }
.xc-tool summary svg, .xc-answer-label svg, .xc-context-note svg, .xc-result-note svg { width: var(--xd-size-12); height: var(--xd-size-12); flex-shrink: 0; }
.xc-tool > div { margin: 0 var(--xd-size-6) var(--xd-size-6) var(--xd-size-20); padding: var(--xd-size-10); background: var(--xd-bg); border-left: var(--xd-size-1) solid var(--xd-border); display: grid; gap: var(--xd-size-5); }
.xc-tool code { font: var(--xd-size-10)/1.6 var(--wt-font-mono); color: var(--xd-muted); white-space: normal; }.xc-tool small { font-size: var(--xd-size-9); color: var(--xc-subtle); }
.xc-answer { color: var(--xd-text); font-size: var(--xc-body-size); line-height: 1.75; margin-bottom: var(--xd-size-14); }
.xc-answer p { margin: 0 0 var(--xd-size-8); }.xc-answer ul { margin: 0; padding-left: var(--xd-size-20); }.xc-answer li { margin: var(--xd-size-5) 0; }.xc-answer li strong { font-weight: 600; }
.xc-answer-label { display: flex; align-items: center; gap: var(--xd-size-6); margin-bottom: var(--xd-size-8); color: var(--xc-mint); font-size: var(--xd-size-11); }.xc-answer-label small { color: var(--xc-subtle); margin-left: var(--xd-size-4); font-size: var(--xd-size-9); }
.xc-artifact { border: var(--xd-size-1) solid var(--xd-border); border-radius: var(--xd-size-8); background: var(--xd-card); margin: var(--xd-size-14) 0 var(--xd-size-20); }
.xc-artifact summary { display: flex; gap: var(--xd-size-10); align-items: center; padding: var(--xd-size-12); cursor: pointer; }.xc-artifact summary > svg { width: var(--xd-size-20); height: var(--xd-size-20); color: var(--xc-mint); }.xc-artifact summary > span { display: grid; gap: var(--xd-size-3); flex: 1; min-width: 0; }.xc-artifact strong { font-size: var(--xd-size-11); }.xc-artifact small { font-size: var(--xd-size-10); color: var(--xd-muted); }.xc-artifact summary > b { font-size: var(--xd-size-10); font-weight: 500; color: var(--xd-muted); }
.xc-artifact > div { border-top: var(--xd-size-1) solid var(--xd-border); padding: var(--xd-size-12); }.xc-artifact > div p { display: grid; grid-template-columns: var(--xd-size-25) 1fr; gap: var(--xd-size-5); font-size: var(--xd-size-11); line-height: 1.7; color: var(--xd-muted); margin: var(--xd-size-5) 0; }.xc-artifact > div p > span { grid-row: span 2; color: var(--xc-subtle); font: var(--xd-size-10) var(--wt-font-mono); }
.xc-context-note, .xc-result-note { display: flex; gap: var(--xd-size-6); align-items: center; font-size: var(--xd-size-10); color: var(--xd-muted); }
.xc-empty { padding: var(--xd-size-40) var(--xd-size-16); text-align: center; }.xc-empty > svg { width: var(--xd-size-28); height: var(--xd-size-28); margin: 0 auto var(--xd-size-16); color: var(--xc-mint); }.xc-empty h3 { font-size: var(--xd-size-20); font-weight: 500; letter-spacing: -.03em; }.xc-empty p { color: var(--xd-muted); font-size: var(--xd-size-12); }.xc-empty > span { display: block; color: var(--xc-subtle); font: var(--xd-size-10) var(--wt-font-mono); margin-top: var(--xd-size-20); }

.xc-composer-wrap { flex-shrink: 0; width: calc(100% - 2 * var(--xc-panel-pad)); max-width: var(--xc-reading-width); margin: 0 auto; }
.xc-suggestions { display: flex; gap: var(--xd-size-6); padding: var(--xd-size-4) 0 var(--xd-size-8); overflow-x: auto; scrollbar-width: thin; }
.xc-suggestions button { flex-shrink: 0; border: var(--xd-size-1) solid var(--xd-border); border-radius: var(--xd-size-5); padding: var(--xd-size-5) var(--xd-size-8); background: transparent; color: var(--xd-muted); font-size: var(--xd-size-10); cursor: pointer; }.xc-suggestions button:hover { background: var(--xd-raised); color: var(--xd-text); }
.xd-composer.xc-composer { display: block; margin: 0; padding: var(--xd-size-12); border-radius: var(--xd-size-12); background: var(--xd-card); border: var(--xd-size-1) solid var(--xd-border); }
.xc-composer:focus-within { border-color: var(--xc-subtle); }
.xc-composer textarea { display: block; min-height: var(--xd-size-48); font-size: var(--xc-body-size); line-height: 1.6; padding: var(--xd-size-3); }
.xc-composer textarea::placeholder { color: var(--xc-subtle); }
.xc-composer-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xd-size-4); margin-top: var(--xd-size-8); }
.xc-composer-toolbar select { max-width: 100%; min-height: var(--xd-size-30); border: 0; border-radius: var(--xd-size-4); padding: var(--xd-size-3) var(--xd-size-5); background: transparent; color: var(--xd-muted); font-size: var(--xd-size-10); cursor: pointer; }
.xc-composer-toolbar select:hover, .xc-plan:hover, .xc-attach:hover { background: var(--xc-control-bg); }
.xc-composer-toolbar option { background: var(--xd-panel); color: var(--xd-text); }
.xc-select { display: inline-flex; min-width: 0; }
.xc-attach, .xc-plan { border: 0; border-radius: var(--xd-size-4); min-height: var(--xd-size-30); min-width: var(--xd-size-28); background: transparent; color: var(--xd-muted); padding: var(--xd-size-4); cursor: pointer; font-size: var(--xd-size-10); }
.xc-attach svg, .xc-send svg { width: var(--xd-size-16); height: var(--xd-size-16); margin: auto; }
.xc-plan[aria-pressed="true"], .xc-attach[aria-pressed="true"] { color: var(--xc-mint); background: var(--xc-control-bg); }
.xd-send.xc-send { margin-left: auto; display: grid; place-items: center; width: var(--xd-size-30); min-height: var(--xd-size-30); border-radius: 50%; background: var(--xd-text); color: var(--xd-bg); padding: 0; }
.xc-attachment { display: inline-flex; align-items: center; gap: var(--xd-size-6); margin-bottom: var(--xd-size-8); padding: var(--xd-size-5) var(--xd-size-8); border: var(--xd-size-1) solid var(--xd-border); border-radius: var(--xd-size-5); font-size: var(--xd-size-10); color: var(--xd-muted); }.xc-attachment > svg { width: var(--xd-size-12); height: var(--xd-size-12); }.xc-attachment button { border: 0; background: transparent; color: var(--xd-muted); cursor: pointer; font-size: var(--xd-size-14); }
.xc-composer-note { margin: var(--xd-size-6) 0 var(--xd-size-8); text-align: center; color: var(--xc-subtle); font-size: var(--xd-size-9); }
.xc-conversation summary:focus-visible { outline: var(--xd-size-2) solid var(--xd-accent); outline-offset: var(--xd-size-2); }

@media (max-width: 1100px) { :root { --xc-sidebar-width: 12rem; --xc-panel-pad: 1rem; } .xc-chat-head > span { flex-basis: 100%; order: 2; } }
@media (max-width: 800px) and (min-width: 641px) { :root { --xc-sidebar-width: 10.5rem; } .xc-conversation-head strong > span { display: none; } .xc-agent-row em { font-size: var(--xd-size-8); } }
@media (max-width: 640px) {
  :root { --xc-panel-pad: .75rem; }
  .xd-shell[data-mode="agent"], .xd-shell[data-mode="chat"] { grid-template-columns: 1fr; }
  .xc-sidebar { display: none; }
  .xc-conversation .xd-mobile-select { display: flex; align-items: center; gap: var(--xd-size-6); }
  .xc-conversation .xd-mobile-picker { display: flex; align-items: center; justify-content: space-between; }
  .xc-conversation .xd-mobile-picker { flex: 1; min-width: 0; }
  .xc-mobile-new { display: grid; place-items: center; border: var(--xd-size-1) solid var(--xd-border); border-radius: var(--xd-size-5); background: var(--xd-raised); color: var(--xd-text); min-width: var(--xd-size-36); min-height: var(--xd-size-36); }
  .xc-mobile-new svg { width: var(--xd-size-16); height: var(--xd-size-16); }
  .xc-conversation .xd-mobile-picker select { max-width: 80%; min-height: var(--xd-size-32); }
  .xc-conversation-head { min-height: var(--xd-size-48); padding: var(--xd-size-7) var(--xd-size-10); }
  .xc-conversation-head strong > span { display: none; }
  .xc-ready { border: 0; padding: 0; }
  .xc-thread-tabs { padding-inline: var(--xd-size-4); }
  .xc-thread-tabs button { min-height: var(--xd-size-36); padding-inline: var(--xd-size-8); }
  .xc-chat-head { padding: var(--xd-size-8); gap: var(--xd-size-6); }
  .xc-chat-head > span { display: none; }
  .xc-chat-head small { margin-left: auto; }
  .xc-transcript { padding-top: var(--xd-size-12); }
  .xc-user-message { max-width: 100%; padding: var(--xd-size-8) var(--xd-size-10); font-size: var(--xd-size-12); }
  .xc-answer { font-size: var(--xd-size-12); }
  .xc-composer-toolbar select, .xc-plan, .xc-attach { min-height: var(--xd-size-32); }
  .xc-composer-toolbar select { font-size: var(--xd-size-9); padding-inline: var(--xd-size-3); }
  .xc-composer textarea { min-height: var(--xd-size-40); font-size: var(--xd-size-12); }
  .xc-suggestions button { min-height: var(--xd-size-32); }
  .xd-send.xc-send { width: var(--xd-size-32); min-height: var(--xd-size-32); }
  .xc-composer-note { font-size: var(--xd-size-8); }
}