/* AppShell layout. Requires .design-system/tokens.css and controls.css. Panels take real space beside the
   canvas; on narrow screens one panel replaces the canvas and slides with transform only. */
.AppShell{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;grid-template-rows:minmax(0,1fr);width:100%;height:100%;min-height:0;overflow:hidden;line-height:1.4;background:var(--ds-canvas)}
.AppShell *{box-sizing:border-box}
.AppShell :where(button,input,select,textarea){font:inherit}
.AppShell :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:var(--ds-focus-width) solid var(--ds-focus);outline-offset:var(--ds-space-optical)}
.AppShell [hidden]{display:none!important}

.AppShellPanel{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--ds-surface);color:var(--ds-ink)}
.AppShellPanel-left{grid-column:1;width:var(--shell-left-width);border-inline-end:var(--ds-border-width) solid var(--ds-line)}
.AppShellPanel-right{grid-column:5;width:var(--shell-right-width);border-inline-start:var(--ds-border-width) solid var(--ds-line)}
.AppShell[data-left=closed] .AppShellPanel-left,.AppShell[data-right=closed] .AppShellPanel-right{display:none}
.AppShellPanelHead{display:flex;align-items:center;gap:var(--ds-space-1);min-height:56px;padding:var(--ds-space-1) var(--ds-space-2);border-bottom:var(--ds-border-width) solid var(--ds-line);flex:none}
.AppShellPanelTitle{flex:1;min-width:0;margin:0;font-size:var(--ds-text-body);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.AppShellPanelHead .AppShellBack{display:none}
.AppShellPanelBody{flex:1;min-height:0;padding:var(--ds-space-2)}

.AppShellSeparator{width:8px;margin-inline:-4px;z-index:3;cursor:col-resize;touch-action:none;background:transparent}
.AppShellSeparator-left{grid-column:2}
.AppShellSeparator-right{grid-column:4}
.AppShellSeparator:hover,.AppShellSeparator:focus-visible{background:var(--ds-line)}

.AppShellStage{grid-column:3;display:flex;flex-direction:column;min-width:0;min-height:0}
.AppShellCanvas{position:relative;flex:1 1 0;min-width:0;min-height:0}
.AppShellToolbar{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:var(--ds-space-1) var(--ds-space-2);padding:var(--ds-space-1) var(--ds-space-2);background:var(--ds-surface);border-top:var(--ds-border-width) solid var(--ds-line);flex:none}
.AppShellToolbarGroup{display:flex;align-items:center;gap:var(--ds-space-1)}
.AppShellToolbarGroup:empty,.AppShellToolbarGroup:not(:has(>:not([hidden]))){display:none}

.AppShellButton{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-1);flex:none}
.AppShellButton.icon-only{width:var(--ds-control-height);padding:var(--ds-space-1)}
.AppShellButton.secondary:not(:disabled):hover{background:var(--ds-soft)}
.AppShellButton[aria-pressed=true]{background:var(--ds-accent-soft);border-color:var(--ds-focus)}

.AppShellRunControls{position:absolute;top:var(--ds-space-2);inset-inline-end:var(--ds-space-2);z-index:6;display:flex;gap:var(--ds-space-1);opacity:0;pointer-events:none;transition:opacity var(--ds-motion-duration) ease}
.AppShellRunControls.is-visible,.AppShellRunControls:focus-within{opacity:1;pointer-events:auto}
.AppShell[data-mode=design] .AppShellRunControls{display:none}
.AppShell[data-mode=run] .AppShellPanel,.AppShell[data-mode=run] .AppShellSeparator{display:none}

.AppShellTooltip{position:absolute;top:0;left:0;z-index:30;pointer-events:none;max-width:320px;line-height:20px}
.AppShellLive{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media(max-width:700px){
  .AppShell{grid-template-columns:minmax(0,1fr)}
  .AppShellStage{grid-column:1;grid-row:1}
  .AppShell[data-mode=design] .AppShellPanel{display:flex;grid-column:1;grid-row:1;width:100%;z-index:4;border:0;transition:transform var(--ds-motion-duration) ease}
  .AppShell[data-mode=design][data-left=closed] .AppShellPanel-left{transform:translateX(-100%)}
  .AppShell[data-mode=design][data-right=closed] .AppShellPanel-right{transform:translateX(100%)}
  .AppShellPanelHead .AppShellBack{display:inline-flex}
  .AppShellPanelHead .AppShellClose{display:none}
  .AppShellButtonLabel{display:none}
  .AppShellButton[data-label=wide]{width:var(--ds-control-height);padding:var(--ds-space-1)}
  .AppShellButton[data-label=visible] .AppShellButtonLabel{display:inline}
}
@media(prefers-reduced-motion:reduce){.AppShellPanel,.AppShellRunControls{transition:none!important}}
.AppShellPopover{position:absolute;top:0;left:0;z-index:12;width:min(360px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;scrollbar-width:none;padding:var(--ds-space-2);display:flex;flex-direction:column;gap:var(--ds-space-2)}

/* Panel content: vertical sections, declared settings, chat slot. */
.ShellSection{display:flex;flex-direction:column;gap:var(--ds-space-2);min-width:0;padding-block:var(--ds-space-3);border-top:var(--ds-border-width) solid var(--ds-line)}
.ShellSection:first-of-type{border-top:0;padding-top:var(--ds-space-2)}
.ShellSectionTitle{margin:0;font-size:var(--ds-text-ui);font-weight:600;white-space:nowrap}
.ShellSectionNote{margin:0}
.ShellSetting{display:flex;flex-direction:column;gap:var(--ds-space-1);min-width:0}
.ShellSettingHead{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-1);white-space:nowrap}
.ShellSettingHead output{color:var(--ds-muted);font-variant-numeric:tabular-nums}
.ShellSetting[data-mixed=true] .ShellSettingHead output{color:var(--ds-ink);font-weight:500}
.ShellRange{width:100%;min-width:0;min-height:var(--ds-control-height);margin:0;accent-color:var(--ds-control-fill)}
.ShellRangeEnds{display:flex;justify-content:space-between;color:var(--ds-muted);white-space:nowrap}
.ShellSettingHelp{margin:0}
.ShellChoice{flex-wrap:wrap}
.ShellColors{display:flex;flex-wrap:wrap;gap:var(--ds-space-1) var(--ds-space-2)}
.ShellColorOption{display:inline-flex;align-items:center;gap:var(--ds-space-1);min-height:var(--ds-control-height);white-space:nowrap;cursor:pointer}
.ShellColorOption input{width:16px;height:16px;margin:0;accent-color:var(--ds-control-fill)}
.ShellSwatch{width:8px;height:8px;flex:none}
.ShellChat{display:flex;flex-direction:column;gap:var(--ds-space-3)}
.ShellChatStatus,.ShellChatContext{display:flex;flex-direction:column;gap:var(--ds-space-1)}
.ShellChatStatus .ds-help{margin:0}
.ShellContextList{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ds-space-1);margin:0}
.ShellContextList dt{color:var(--ds-muted)}
.ShellContextList dd{margin:0 0 var(--ds-space-1);white-space:normal}
.ShellChatUnlock{margin-top:var(--ds-space-2)}
/* Connected: Chatty brings its own header (conversations, new chat, close), so the panel head steps aside. */
.ShellChatConnected .AppShellPanelHead{display:none}
.ShellChatConnected .AppShellPanelBody{padding:0;overflow:hidden}
.ShellChatFrame{display:block;width:100%;height:100%;border:0;background:var(--ds-surface)}