body { background:var(--bg); font-size:14px; }
body [hidden] { display:none !important; }
.workspace-shell { min-height:calc(100dvh - 68px); width:min(1440px,100%); margin-inline:auto; }
.workspace-main { display:grid; grid-template-columns:minmax(0,1fr) 260px; column-gap:28px; padding:28px 32px 56px; min-width:0; align-content:start; }
.workspace-main > :not(.workspace-context) { grid-column:1; min-width:0; }
.workspace-context { grid-column:2; grid-row:1 / span 8; border-left:1px solid var(--line); padding-left:20px; min-width:0; overflow-wrap:anywhere; }
.workspace-context h2 { margin-top:0; font-size:18px; }
.workspace-context p { line-height:1.6; }
.workspace-context a,.next-steps a { color:var(--color-signal-blue-soft); text-decoration:underline; text-underline-offset:3px; }
html[data-theme="light"] .workspace-context a,html[data-theme="light"] .next-steps a { color:#245dcc; }
#deviceContextStatus { font-weight:600; }
#permissionContext { margin-block:20px; }
#permissionContext > div { padding-block:10px; border-bottom:1px solid var(--line); }
#permissionContext dt { color:var(--muted); font-size:12px; margin-bottom:5px; }
#permissionContext dd { margin:0; }
.context-toggle,.nav-toggle { display:none; }
.work-heading { display:flex; flex-direction:column; gap:16px; }
.work-heading h1 { font-size:clamp(28px,3vw,40px); letter-spacing:-.035em; margin:7px 0; }
.work-heading p,.help,.next-steps p { color:var(--muted); line-height:1.6; font-size:14px; }
.eyebrow { font-size:12px; }
.device-picker { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; width:100%; }
.device-picker label { grid-column:1 / -1; font-size:14px; color:var(--muted); }
.work-status { min-height:24px; color:var(--text); line-height:1.6; overflow-wrap:anywhere; }
.execution-summary { margin-bottom:16px; overflow-wrap:anywhere; }
.execution-state { display:inline-block; border:1px solid var(--line); border-radius:6px; padding:6px 8px; font-size:14px; }
.execution-state[data-state="complete"] { border-color:var(--color-verified); }
.execution-state:is([data-state="failed"],[data-state="denied"],[data-state="offline"]) { border-style:dashed; }
#executionContext { font-size:12px; line-height:1.6; color:var(--muted); }
.workspace-shell button:disabled,dialog button:disabled { opacity:.65; cursor:wait; }
.work-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.work-panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:20px; min-width:0; }
.work-panel-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.work-panel h2 { margin:0; font-size:21px; }
.work-badge { color:var(--muted); border:1px solid var(--line); padding:6px 8px; border-radius:6px; font-size:12px; overflow-wrap:anywhere; max-width:100%; }
.work-panel label { display:grid; gap:7px; color:var(--muted); font-size:14px; margin:13px 0; }
.work-panel input,.work-panel textarea,.work-panel select,.device-picker select { width:100%; min-width:0; max-width:100%; border:1px solid var(--line); background:var(--panel2); color:var(--text); border-radius:8px; padding:11px; font:inherit; }
.work-panel textarea { resize:vertical; }
.workspace-shell button { min-height:44px; min-width:44px; font:inherit; }
.workspace-shell .btn { border-radius:15px; white-space:normal; overflow-wrap:anywhere; }
.chat-panel { display:flex; flex-direction:column; min-height:440px; }
.chat-messages { flex:1; max-height:530px; overflow:auto; display:flex; flex-direction:column; gap:10px; padding:10px 0; }
.chat-item { align-self:flex-start; max-width:95%; white-space:pre-wrap; overflow-wrap:anywhere; background:var(--panel2); padding:11px 13px; border-radius:8px; font-size:14px; line-height:1.55; }
.chat-item.user { align-self:flex-end; background:color-mix(in srgb,var(--blue) 19%,var(--panel2)); }
.chat-form { display:grid; gap:9px; }
.chat-form button { justify-self:end; }
.work-tabs { display:flex; gap:4px; margin:16px 0; }
.work-tabs button { flex:1; min-width:0; border:1px solid var(--line); border-radius:6px; background:var(--panel2); color:var(--muted); padding:8px 4px; cursor:pointer; }
.work-tabs button[aria-selected="true"] { background:var(--bg); color:var(--text); border-color:var(--color-signal-blue-soft); }
.button-row { display:flex; gap:8px; flex-wrap:wrap; }
.result-label { margin-top:22px !important; }
.workspace-main :is(pre,code),dialog pre { min-width:0; max-width:100%; overflow:auto; white-space:pre; font:12px/1.55 var(--font-mono); }
.direct-panel pre,.semantic-panel pre { max-height:380px; background:var(--bg); border:1px solid var(--line); padding:13px; border-radius:8px; }
.next-steps,.semantic-panel { margin-top:16px; }
.next-steps ol { padding-left:22px; line-height:1.8; }
.semantic-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:14px; }
.semantic-grid > div { min-width:0; padding:15px; border:1px solid var(--line); border-radius:8px; background:var(--panel2); }
.semantic-panel pre { margin:14px 0 0; max-height:320px; white-space:pre-wrap; overflow-wrap:anywhere; }
dialog { width:min(620px,calc(100% - 24px)); border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--text); padding:24px; }
dialog::backdrop { background:rgba(0,0,0,.75); }
dialog p { color:var(--muted); font-size:14px; line-height:1.6; }
dialog pre { max-height:300px; background:var(--bg); padding:12px; border-radius:8px; }
dialog { max-height:calc(100dvh - 24px); overflow:auto; }
dialog dd { margin:6px 0 16px; overflow-wrap:anywhere; }
dialog dt { color:var(--muted); font-size:12px; }
dialog button { min-height:44px; min-width:44px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.tool-drawer { padding:0; overflow:clip; }
.tool-drawer > summary {
  list-style:none; min-height:62px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer;
}
.tool-drawer > summary::-webkit-details-marker { display:none; }
.tool-drawer > summary::after { content:"+"; color:var(--blue); font-size:22px; line-height:1; order:3; }
.tool-drawer[open] > summary::after { content:"−"; }
.tool-drawer > summary > span:first-child { min-width:0; }
.tool-drawer > summary b { display:block; font-size:18px; }
.tool-drawer > summary small { display:block; margin-top:3px; color:var(--muted); font-size:13px; }
.tool-drawer-body { padding:0 18px 18px; border-top:1px solid var(--line); }
.tool-drawer-body > .help:first-child { margin-top:16px; }
.chat-panel[open] { min-height:420px; }
.direct-panel { order:1; }
.chat-panel { order:2; }
@media (max-width: 1023px) {
  .workspace-main { display:block; padding:24px 20px 48px; }
  .context-toggle { display:inline-flex; margin-top:16px; }
  .workspace-context { border:1px solid var(--line); border-radius:8px; padding:18px; margin-top:12px; background:var(--panel); }
}
@media (max-width: 767px) {
  body { font-size:16px; }
  .workspace-main { padding:20px 12px 40px; }
  .work-grid,.semantic-grid { grid-template-columns:minmax(0,1fr); }
  .work-panel { padding:14px; }
  .work-heading p,.help,.next-steps p { font-size:16px; }
  .work-panel input,.work-panel textarea,.work-panel select,.device-picker select { font-size:16px; }
  .work-tabs button { font-size:14px; }
  .device-picker { grid-template-columns:minmax(0,1fr); }
  .device-picker button { justify-self:start; }
}