/* The console host (agents/console-host.js): the ConsoleApp structure from the base system, with the orb
   region on the right. Tokens only: --rc-* colours and fonts, --sp-* spacing, --r-sm radius. The token
   values (light and dark) come from assets/base.css; nothing here names a colour. All of them are base.css tokens (#890, held equal to scripts/ds-tokens.json by console-host.test.mjs) except
   --r-sm, which console.css defines: it keeps a plain 6px fallback for the demo page, which does not load console.css. */

.ch-shell{
  position:relative;display:grid;height:100%;min-height:0;overflow:hidden;
  grid-template-columns:var(--ch-nav-w,56px) minmax(0,1fr) var(--ch-side-w,0px);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"nav main orb" "nav main apps";
  background:var(--rc-bg);color:var(--rc-ink);
  font-family:var(--rc-font-sans);font-size:14px;line-height:20px;
}
.ch-shell [hidden]{display:none!important}
.ch-shell *,.ch-shell *::before,.ch-shell *::after{box-sizing:border-box}
.ch-shell.is-resizing{user-select:none;cursor:col-resize}

/* buttons: 32 square, a 44 hit area behind them */
.ch-btn{position:relative;flex:none;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--r-sm,6px);background:transparent;color:var(--rc-line);cursor:pointer;padding:0}
.ch-btn::before{content:"";position:absolute;inset:-6px}
.ch-btn:hover{background:var(--rc-hover);color:var(--rc-ink)}
.ch-btn:focus-visible,.ch-item:focus-visible,.ch-foot-btn:focus-visible,.ch-menuitem:focus-visible{outline:var(--rc-focus-outline,2px solid var(--rc-focus));outline-offset:var(--rc-focus-offset,2px);box-shadow:none}
.ch-resize:focus-visible{outline:var(--rc-focus-outline,2px solid var(--rc-focus));outline-offset:-2px;box-shadow:none}
.ch-btn[aria-pressed="true"]{background:var(--rc-selected);color:var(--rc-ink)}

/* sidebar: rail or expanded, one landmark */
.ch-nav{grid-area:nav;position:relative;min-height:0;background:var(--rc-bg-sub);border-right:1px solid var(--rc-hair)}
.ch-rail,.ch-navfull{height:100%;min-height:0;flex-direction:column}
.ch-rail{display:none;width:56px;align-items:center;padding:var(--sp-2) 0 var(--sp-3)}
.ch-navfull{display:none;width:240px;padding:var(--sp-2) var(--sp-2) var(--sp-3)}
.ch-shell[data-nav="rail"] .ch-rail{display:flex}
.ch-shell[data-nav="expanded"] .ch-navfull,.ch-shell[data-nav="drawer"] .ch-navfull{display:flex}
.ch-mark{display:block;width:24px;height:24px;flex:none}
[data-theme="dark"] .ch-mark{filter:invert(1)}
.ch-rail-mark{width:36px;height:36px;color:var(--rc-text-2)}
.ch-list{flex:1;min-height:0;width:100%;overflow:auto;display:flex;flex-direction:column;gap:var(--sp-1);padding-top:var(--sp-4);scrollbar-width:thin}
.ch-rail .ch-list{align-items:center;scrollbar-width:none}
.ch-navfull .ch-list{margin:0 calc(var(--sp-2) * -1);padding:var(--sp-4) var(--sp-2) 0;width:auto}
.ch-rule{width:24px;height:1px;flex:none;background:var(--rc-hair);margin:var(--sp-2) 0}
.ch-section{padding:20px var(--sp-3) var(--sp-2);font-size:12px;line-height:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--rc-line)}
.ch-item{display:flex;align-items:center;gap:var(--sp-3);height:36px;flex:none;border:0;border-radius:var(--r-sm,6px);background:transparent;color:var(--rc-ink);font:inherit;text-align:left;cursor:pointer;padding:0 var(--sp-3)}
.ch-rail .ch-item{width:36px;justify-content:center;padding:0}
.ch-item:hover{background:var(--rc-hover)}
.ch-item.is-on{background:var(--rc-selected)}
.ch-item svg{flex:none}
.ch-item-img{display:block;width:24px;height:24px;flex:none;border-radius:50%;object-fit:contain}
.ch-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-navhead{height:48px;flex:none;display:flex;align-items:center;gap:var(--sp-1);padding-left:var(--sp-2)}
.ch-brand{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;margin-left:var(--sp-2);font-size:16px;line-height:24px;white-space:nowrap;overflow:hidden}
.ch-brand-sub{color:var(--rc-line)}
.ch-collapse{width:36px;height:36px;color:var(--rc-text-2)}
.ch-foot{flex:none;display:flex;align-items:center;gap:var(--sp-1);margin-top:var(--sp-2)}
.ch-rail .ch-foot{flex-direction:column;margin-top:0}
.ch-foot-btn{flex:none;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--r-sm,6px);background:transparent;color:var(--rc-text-2);cursor:pointer;padding:0}
.ch-foot-btn:hover{background:var(--rc-hover)}
.ch-acct{flex:1;width:auto;min-width:0;justify-content:flex-start;gap:var(--sp-3);padding:var(--sp-2);color:var(--rc-ink);font:inherit;text-align:left}
.ch-rail .ch-acct{flex:none;width:36px;justify-content:center;padding:0}
.ch-avatar{width:24px;height:24px;flex:none;border-radius:50%;background:var(--rc-bg);color:var(--rc-ink);box-shadow:inset 0 0 0 1px var(--rc-rule);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.ch-avatar img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.ch-avatar svg{color:var(--rc-line)}

/* phone: the sidebar is a drawer over the page, closed at load */
.ch-shell[data-nav="drawer"] .ch-nav{position:absolute;top:0;bottom:0;left:0;z-index:34;width:240px;background:var(--rc-bg);box-shadow:var(--rc-shadow-float);transform:translateX(-100%);visibility:hidden}
.ch-shell[data-nav="drawer"][data-drawer="open"] .ch-nav{transform:none;visibility:visible}
.ch-scrim{position:absolute;inset:0;z-index:26;background:var(--rc-scrim)}
/* the open phone drawer and its scrim sit above the apps sheet and the orb panel: Esc and the scrim close the drawer first */
.ch-shell[data-drawer="open"] .ch-scrim{z-index:33}
/* phone: the apps sheet and its scrim start under the 56px header, so the drawer button stays reachable with the sheet open */
.ch-shell[data-nav="drawer"][data-side="overlay"] .ch-apps{top:56px}
.ch-shell[data-nav="drawer"][data-side="overlay"]:not([data-drawer="open"]) .ch-scrim{top:56px}

/* main: header, then the running app */
.ch-main{grid-area:main;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--rc-bg)}
.ch-header{height:56px;flex:none;display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-2) 0 var(--sp-5);border-bottom:1px solid var(--rc-hair)}
.ch-title{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-main-body{position:relative;flex:1;min-height:0;overflow:auto}

/* the orb region: right, small; the whole right column; or main */
.ch-side-bg{display:none}
.ch-shell[data-side="docked"] .ch-side-bg{display:block;grid-area:1 / 3 / 3 / 4;background:var(--rc-bg);border-left:1px solid var(--rc-rule)}
.ch-orb{grid-area:orb;position:relative;overflow-x:clip;z-index:2;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--rc-bg);border-bottom:1px solid var(--rc-rule)}
.ch-orb-bar{height:32px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp-1) 0 var(--sp-3)}
.ch-orb-label{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--rc-line)}
.ch-orb-body{position:relative;flex:none;min-width:0}
.ch-orb-empty{padding:var(--sp-4) var(--sp-3);color:var(--rc-line);font-size:12px;line-height:16px}
.ch-shell[data-orb="panel"][data-side="docked"] .ch-orb{grid-area:1 / 3 / 3 / 4;border-bottom:0;border-left:1px solid var(--rc-hair)}
.ch-shell[data-orb="main"] .ch-orb{grid-area:main;z-index:25;border-bottom:0}
.ch-shell[data-orb="panel"] .ch-orb-body,.ch-shell[data-orb="main"] .ch-orb-body{flex:1;min-height:0;overflow:auto}
.ch-shell[data-orb="panel"] .ch-apps{visibility:hidden}

/* the app window region (ConsoleAppHost / AppWindow) */
.ch-apps{grid-area:apps;position:relative;z-index:2;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--rc-bg);border-left:1px solid var(--rc-rule)}
.ch-apps-bar{height:56px;flex:none;display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-1);padding:0 var(--sp-2);border-bottom:1px solid var(--rc-hair)}
.ch-resize{position:absolute;top:0;bottom:0;left:-4px;width:8px;z-index:3;cursor:col-resize;background:transparent}
.ch-resize:hover{background:var(--rc-selected)}
.ch-resize:focus-visible{background:var(--rc-hair)}
.ch-windows{flex:1;min-height:0;overflow:auto;overflow-x:clip;display:flex;flex-direction:column;gap:1px;background:var(--rc-hair);scrollbar-width:thin}
.ch-win{flex:1 1 0;min-height:160px;display:flex;flex-direction:column;background:var(--rc-bg);font-size:12px;line-height:16px;border-top:1px solid var(--rc-rule)}
.ch-win.is-min{flex:none;min-height:0;height:32px}
.ch-win.is-full{position:fixed;z-index:35;flex:none;min-height:0;margin:0;box-sizing:border-box;border-top:0}
.ch-win-bar{height:32px;flex:none;display:flex;align-items:center;gap:2px;padding:0 var(--sp-1) 0 var(--sp-3);background:var(--rc-bg-sub);border-bottom:1px solid var(--rc-hair)}
.ch-win-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--rc-text-2)}
.ch-win-btn{width:28px;height:28px}
.ch-win-btn::before{inset:-8px}
.ch-win-btn.is-on{background:var(--rc-selected);color:var(--rc-ink)}
.ch-win-body{position:relative;flex:1;min-height:0;display:flex;overflow:auto}
.ch-win-placeholder{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);text-align:center;color:var(--rc-line);font-family:var(--rc-font-mono)}

/* narrow: the right column overlays main. The apps panel is a sheet, the small orb a tile in the corner. */
.ch-shell[data-side="overlay"] .ch-apps{grid-area:main;position:absolute;top:var(--sp-2);right:var(--sp-2);bottom:var(--sp-2);z-index:30;width:min(360px,calc(100% - 16px));border:1px solid var(--rc-rule);border-radius:var(--r-sm,6px);overflow:hidden;box-shadow:var(--rc-shadow-float)}
.ch-shell[data-side="overlay"] .ch-orb{grid-area:main;position:absolute;align-self:end;justify-self:end;right:var(--sp-3);bottom:var(--sp-3);z-index:20;width:min(320px,calc(100% - 24px));border:1px solid var(--rc-rule);border-radius:var(--r-sm,6px);overflow:hidden;box-shadow:var(--rc-shadow-float)}
/* host fix (F3): main keeps clear of the corner tile, its height plus the tile's own offset, so a composer stays usable */
.ch-shell[data-side="overlay"][data-orb="small"] .ch-main{padding-bottom:calc(var(--ch-orb-inset,0px) + var(--sp-3))}
.ch-shell[data-side="overlay"][data-orb="panel"] .ch-orb{top:var(--sp-2);right:var(--sp-2);bottom:var(--sp-2);width:min(360px,calc(100% - 16px));z-index:32}
.ch-shell[data-side="overlay"][data-orb="main"] .ch-orb{position:relative;right:auto;bottom:auto;width:auto;align-self:stretch;justify-self:stretch;border:0;border-radius:0;box-shadow:none;z-index:25}

/* menus */
.ch-menu-layer{position:absolute;inset:0;z-index:60;pointer-events:none}
.ch-menu-layer>*{pointer-events:auto}
.ch-menu-back{position:absolute;inset:0}
.ch-menu{position:absolute;width:240px;max-width:calc(100% - 16px);padding:var(--sp-1);background:var(--rc-bg);border:1px solid var(--rc-rule);border-radius:var(--r-sm,6px);box-shadow:var(--rc-shadow-float);display:flex;flex-direction:column;font-size:14px;line-height:20px}
.ch-menu-apps{top:48px;right:var(--sp-2)}
.ch-menu-account,.ch-menu-settings{left:var(--sp-2);bottom:60px}
.ch-shell[data-nav="rail"] .ch-menu-account,.ch-shell[data-nav="rail"] .ch-menu-settings{left:calc(var(--ch-nav-w) + var(--sp-2))}
.ch-menuitem{display:flex;align-items:center;gap:var(--sp-2);height:36px;padding:0 var(--sp-3);border:0;border-radius:var(--r-sm,6px);background:transparent;color:var(--rc-ink);font:inherit;text-align:left;cursor:pointer}
.ch-menuitem:hover{background:var(--rc-hover)}
.ch-menuitem-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-menuitem-hint,.ch-menu-mail{font-size:12px;line-height:16px;color:var(--rc-line)}
.ch-menu-empty{height:36px;display:flex;align-items:center;padding:0 var(--sp-3);color:var(--rc-line)}
/* a line the host says when a request leaves nothing else to see (an app the agent does not offer, a window that could not open, an app still opening): notice() in console-host.js */
.ch-notice{position:absolute;left:50%;bottom:var(--sp-5);transform:translateX(-50%);z-index:70;width:max-content;max-width:calc(100% - var(--sp-5));padding:var(--sp-2) var(--sp-4);background:var(--rc-bg);border:1px solid var(--rc-rule);border-radius:var(--r-sm,6px);box-shadow:var(--rc-shadow-float);font-size:14px;line-height:20px;color:var(--rc-ink)}
.ch-win-error{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);text-align:center;color:var(--rc-line)}
.ch-win:focus{outline:none}
.ch-win:focus-visible{outline:var(--rc-focus-outline,2px solid var(--rc-focus));outline-offset:-2px;box-shadow:none}
.ch-menu-id{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3)}
.ch-menu-who{display:flex;flex-direction:column;min-width:0}
.ch-menu-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (prefers-reduced-motion:reduce){.ch-shell *{animation:none!important;transition:none!important}}
/* an expanded orb holds main; on a phone its bar carries the drawer button so the sidebar stays reachable */
.ch-orb-drawer{display:none}
.ch-shell[data-nav="drawer"][data-orb="main"] .ch-orb-drawer{display:inline-flex}