/* CHANGE LOG
 * 1 | maintainer@emeraldcoastsystemsgroup.com | Extract the native shell asset without changing its ordered runtime or styles.
 * 2 | maintainer@emeraldcoastsystemsgroup.com | On narrow screens (<=760px) the docked application takes the full width and its concierge stacks under it with its own bounded scroll, the viewer's Open Tab / Close wrap inside the viewport, and the header indicators wrap, so a 412px phone no longer squeezes every application to ~176px or scrolls sideways.
 * 3 | maintainer@emeraldcoastsystemsgroup.com | Phones (<=600px): the Jarvis orb docks into the header's top-right corner (the page scrolls inside main, so it never floats over a concierge Send button, a modal footer or an application frame), the header reserves its corner, and the Jarvis drawer spans the screen instead of running 32px off the left edge. Catalog notes (next step, rejected count) are styled and the count spans the grid.
 * 4 | maintainer@emeraldcoastsystemsgroup.com | Pages built on this stylesheet (cockpit, Jobs, Application access): a grid child of main never grows to a wide table's width (Jobs was 705px on a 412px phone), and a table marked stack-on-phone shows each row as labelled lines at <=600px. The application access dialog wraps long emails and fits a phone screen.
 * 5 | maintainer@emeraldcoastsystemsgroup.com | The focused application view (shell_focus.js): an open application fills the window under one small bar, without the cockpit header, ribbon or catalog; the Jarvis orb sits in that bar's corner; on a phone the bar's buttons fold to icons, the screen tabs scroll on one line and the concierge opens as a sheet over the lower part of the screen. While a requested application opens, only "Opening <app>…" shows.
 * 6 | maintainer@emeraldcoastsystemsgroup.com | Phones (<=480px): Reload, Open tab and Sign out fold into the bar's "More" menu so the application's name is not cut to a few letters; the phone concierge stacks under the application's screen instead of covering its lower 62% (Bake-off's Delete was unreachable); a refused screen's line under the bar; the Running build disclosure uses the theme's link colour; worker results' rendered markdown (.ticket-markdown).
 * 7 | maintainer@emeraldcoastsystemsgroup.com | The concierge's screenless sizing follows the hidden application frame as any earlier sibling (`~`), not only the adjacent one: switching an application's screen tabs now keeps each loaded tab in its own frame (shell_focus.js focusScreenFrame), so the frame shown is not always the one just before the concierge.
 * 8 | maintainer@emeraldcoastsystemsgroup.com | Keep the Jarvis drawer readable with a compact multiline composer and scoped message styling.
 * 9 | maintainer@emeraldcoastsystemsgroup.com | Kernel screen standard (docs/ux/screen-standard.md): the shell paints with the portal theme tokens (every shell colour name derives from a framework token, the old fixed palette only as fallback; the colliding token names become --shell-card/--shell-text aliases), its header, cards, stat tiles, modals, bot cards and the Jarvis drawer are glass over the theme's accent glow, and tables marked data-sortable get the kit's sort controls.
 * 10 | maintainer@emeraldcoastsystemsgroup.com | Jarvis user messages use the theme foreground with their neutral surface, keeping prompts readable in dark and light themes.
 */
    /* The shell paints with the portal theme (surface-themes.css, <html data-theme>): every shell name
       below derives from a framework token, with the old fixed palette only as the fallback. */
    :root {
      --bg-base: var(--bg-primary, #07090e);
      --bg-surface: var(--bg-secondary, #0e131d);
      --shell-card: var(--bg-card, #151b27);
      --shell-card-hover: var(--bg-card-hover, #1c2434);
      --bg-glass: color-mix(in srgb, var(--bg-secondary, #0e131d) 82%, transparent);
      --border: var(--glass-border, var(--border-color, #212c3f));
      --border-bright: var(--border-color-hover, #32435e);
      --border-accent: color-mix(in srgb, var(--accent-primary, #38bdf8) 35%, transparent);
      --shell-text: var(--text-primary, #f8fafc);
      --shell-text-2: var(--text-secondary, #94a3b8);
      --shell-text-3: var(--text-muted, #64748b);
      --cyan: var(--accent-primary, #38bdf8);
      --cyan-glow: var(--accent-glow, rgba(56, 189, 248, 0.28));
      --indigo: var(--accent-primary, #6366f1);
      --purple: var(--accent-primary-hover, #a855f7);
      --emerald: var(--status-success, #10b981);
      --emerald-glow: color-mix(in srgb, var(--status-success, #10b981) 28%, transparent);
      --amber: var(--status-warning, #f59e0b);
      --rose: var(--status-error, #f43f5e);
      --shell-glass: linear-gradient(145deg,
        color-mix(in srgb, var(--shell-card) 94%, transparent),
        color-mix(in srgb, var(--shell-card) 62%, transparent));
      --shell-glass-strong: linear-gradient(145deg,
        color-mix(in srgb, var(--shell-card-hover) 96%, transparent),
        color-mix(in srgb, var(--shell-card) 70%, transparent));
      --shell-highlight: inset 0 1px 0 color-mix(in srgb, var(--text-primary, #f8fafc) 9%, transparent);
      --shell-blur: var(--glass-blur, 18px);
      --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 16px;
      --radius-xl: 24px;
      --shadow-card: var(--card-shadow, 0 8px 30px rgba(0, 0, 0, 0.45));
      --shadow-glow: 0 0 25px -4px var(--cyan-glow);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    [hidden] { display: none !important; }
    body {
      font-family: var(--font-sans);
      background: var(--bg-base);
      color: var(--shell-text);
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background-image:
        radial-gradient(1100px 560px at 8% -8%, var(--cyan-glow), transparent 62%),
        radial-gradient(900px 520px at 104% 104%, color-mix(in srgb, var(--indigo) 16%, transparent), transparent 60%);
      background-attachment: fixed;
    }
    
    /* TOP NAVBAR */
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.65rem 1.5rem;
      background: var(--bg-glass);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      border-bottom: 1px solid var(--border);
      box-shadow: var(--shell-highlight);
      z-index: 50;
    }
    .brand-group {
      display: flex;
      align-items: center;
      gap: 0.85rem;
    }
    .brand-logo {
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      background: linear-gradient(135deg, #fff 30%, var(--cyan) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .brand-badge {
      font-size: 0.7rem;
      font-family: var(--font-mono);
      padding: 0.15rem 0.5rem;
      border-radius: 999px;
      background: color-mix(in srgb, var(--cyan) 12%, transparent);
      color: var(--cyan);
      border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
      font-weight: 600;
    }
    .header-indicators {
      display: flex;
      align-items: center;
      gap: 1.25rem;
    }
    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.78rem;
      font-family: var(--font-mono);
      color: var(--shell-text-2);
      background: var(--bg-surface);
      padding: 0.3rem 0.65rem;
      border-radius: 6px;
      border: 1px solid var(--border);
    }
    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--emerald);
      box-shadow: 0 0 8px var(--emerald);
      animation: pulse-dot 2.5s infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(0.9); }
    }
    .btn {
      background: var(--shell-glass-strong);
      box-shadow: var(--shell-highlight);
      border: 1px solid var(--border);
      color: var(--shell-text);
      padding: 0.45rem 0.9rem;
      border-radius: var(--radius-sm);
      font-size: 0.85rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      text-decoration: none;
    }
    .btn:hover {
      background: var(--shell-card-hover);
      border-color: var(--cyan);
      transform: translateY(-1px);
    }
    .btn-primary {
      background: var(--accent-gradient, linear-gradient(135deg, #0284c7, #2563eb));
      border-color: var(--border-accent);
      color: var(--text-on-accent, #fff);
      font-weight: 600;
      box-shadow: 0 4px 15px var(--cyan-glow);
    }
    .btn-primary:hover {
      filter: brightness(1.08);
      box-shadow: 0 6px 20px var(--cyan-glow);
    }
    .btn-sm { padding: 0.3rem 0.6rem; font-size: 0.78rem; }
    .btn-emerald {
      background: linear-gradient(135deg, var(--emerald), color-mix(in srgb, var(--emerald) 78%, black));
      border-color: color-mix(in srgb, var(--emerald) 40%, transparent);
      color: #fff;
    }

    /* WORKSPACE COMMAND RIBBON */
    .ribbon-nav {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.4rem 1.5rem;
      background: var(--bg-surface);
      border-bottom: 1px solid var(--border);
      overflow-x: auto;
      scrollbar-width: none;
    }
    .ribbon-nav::-webkit-scrollbar { display: none; }
    .ribbon-item {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.4rem 0.8rem;
      border-radius: var(--radius-sm);
      font-size: 0.82rem;
      font-weight: 500;
      color: var(--shell-text-2);
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap;
      user-select: none;
      border: 1px solid transparent;
    }
    .ribbon-item:hover {
      color: var(--shell-text);
      background: var(--shell-card);
    }
    .ribbon-item.active {
      color: var(--cyan);
      background: color-mix(in srgb, var(--cyan) 12%, transparent);
      border-color: color-mix(in srgb, var(--cyan) 35%, transparent);
      font-weight: 600;
    }
    .ribbon-badge {
      font-size: 0.7rem;
      background: var(--shell-card);
      padding: 0.1rem 0.4rem;
      border-radius: 999px;
      color: var(--shell-text-3);
    }
    .ribbon-item.active .ribbon-badge {
      background: var(--cyan);
      color: var(--text-on-accent, #030712);
      font-weight: 700;
    }

    /* MAIN VIEWPORT */
    main {
      flex: 1;
      overflow-y: auto;
      padding: 1.5rem;
      position: relative;
    }
    .view-panel {
      display: none;
      max-width: 1380px;
      margin: 0 auto;
      animation: fadeIn 0.25s ease-out;
    }
    .view-panel.active { display: block; }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* CARDS & GRIDS */
    .grid-4 {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 1.25rem;
      margin-bottom: 1.5rem;
    }
    .stat-card {
      background: var(--shell-glass);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 1.25rem;
      box-shadow: var(--shadow-card), var(--shell-highlight);
      transition: transform 0.2s ease, border-color 0.2s ease;
      position: relative;
      overflow: hidden;
    }
    .stat-card:hover {
      transform: translateY(-2px);
      border-color: var(--border-bright);
    }
    .stat-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, var(--cyan), transparent);
      opacity: 0.3;
    }
    .stat-label {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--shell-text-3);
      font-weight: 600;
      margin-bottom: 0.5rem;
    }
    .stat-value {
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--shell-text);
      font-feature-settings: "tnum";
    }
    .stat-sub {
      font-size: 0.78rem;
      color: var(--shell-text-2);
      margin-top: 0.4rem;
      display: flex;
      align-items: center;
      gap: 0.3rem;
    }

    .card {
      background: var(--shell-glass);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 1.25rem;
      box-shadow: var(--shadow-card), var(--shell-highlight);
      margin-bottom: 1.5rem;
    }
    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      .card, .stat-card, .modal, .jarvis-panel, .swarm-bot-card, #application-access-dialog {
        backdrop-filter: blur(var(--shell-blur)) saturate(140%);
        -webkit-backdrop-filter: blur(var(--shell-blur)) saturate(140%);
      }
    }
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.25rem;
      border-bottom: 1px solid var(--border);
      padding-bottom: 0.85rem;
    }
    .card-title {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--shell-text);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    /* TABLES */
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.85rem;
    }
    th {
      text-align: left;
      padding: 0.65rem 0.85rem;
      color: var(--shell-text-3);
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-bottom: 1px solid var(--border);
      font-weight: 600;
    }
    td {
      padding: 0.75rem 0.85rem;
      border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
      color: var(--shell-text);
    }
    tr:hover td { background: color-mix(in srgb, var(--shell-card-hover) 45%, transparent); }
    /* Sort controls written by /ui/kernel/table.js on tables marked data-sortable. */
    th .ks-sort { all: unset; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; width: 100%; }
    th .ks-sort::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor; opacity: 0.28; flex: none; }
    th[aria-sort="ascending"] .ks-sort::after { opacity: 1; color: var(--cyan); }
    th[aria-sort="descending"] .ks-sort::after { opacity: 1; color: var(--cyan); transform: rotate(180deg); }
    th[aria-sort] { color: var(--shell-text); }
    th .ks-sort:hover { color: var(--shell-text); }
    th .ks-sort:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; border-radius: 4px; }
    .ks-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    th.ks-num .ks-sort { justify-content: flex-end; }
    code {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      background: color-mix(in srgb, var(--bg-base) 50%, transparent);
      padding: 0.15rem 0.4rem;
      border-radius: 4px;
      color: var(--cyan);
      border: 1px solid color-mix(in srgb, var(--cyan) 22%, transparent);
    }
    .badge {
      display: inline-flex;
      align-items: center;
      padding: 0.15rem 0.55rem;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 600;
      text-transform: capitalize;
    }
    .badge-success { background: color-mix(in srgb, var(--emerald) 15%, transparent); color: var(--emerald); border: 1px solid color-mix(in srgb, var(--emerald) 30%, transparent); }
    .badge-warning { background: color-mix(in srgb, var(--amber) 15%, transparent); color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent); }
    .badge-info { background: color-mix(in srgb, var(--cyan) 15%, transparent); color: var(--cyan); border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); }
    .badge-purple { background: color-mix(in srgb, var(--purple) 15%, transparent); color: var(--purple); border: 1px solid color-mix(in srgb, var(--purple) 30%, transparent); }

    /* HOLOGRAPHIC JARVIS ORB */
    .jarvis-fab {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, var(--purple), var(--indigo) 55%, var(--bg-surface) 100%);
      box-shadow: 0 0 30px var(--cyan-glow), inset 0 0 16px rgba(255, 255, 255, 0.4);
      cursor: pointer;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
      animation: orb-breathe 4s infinite ease-in-out;
      user-select: none;
    }
    .jarvis-fab:hover {
      transform: scale(1.12);
      box-shadow: 0 0 40px rgba(99, 102, 241, 0.7), inset 0 0 20px rgba(255, 255, 255, 0.6);
    }
    .jarvis-fab.listening {
      background: radial-gradient(circle at 35% 35%, #10b981, #059669 55%, #064e3b 100%);
      box-shadow: 0 0 35px rgba(16, 185, 129, 0.65), inset 0 0 16px rgba(255, 255, 255, 0.4);
      animation: orb-ambient 1.2s infinite ease-in-out;
    }
    @keyframes orb-breathe {
      0%, 100% { transform: scale(1); filter: drop-shadow(0 0 12px var(--cyan-glow)); }
      50% { transform: scale(1.06); filter: drop-shadow(0 0 24px color-mix(in srgb, var(--indigo) 65%, transparent)); }
    }
    @keyframes orb-ambient {
      0%, 100% { transform: scale(1); box-shadow: 0 0 20px color-mix(in srgb, var(--emerald) 50%, transparent); }
      50% { transform: scale(1.1); box-shadow: 0 0 40px color-mix(in srgb, var(--emerald) 85%, transparent); }
    }
    .jarvis-orb-inner {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.9);
      border-top-color: transparent;
      animation: orb-spin 3s linear infinite;
    }
    @keyframes orb-spin { to { transform: rotate(360deg); } }

    /* JARVIS CYBERNETIC DRAWER */
    .jarvis-panel {
      position: fixed;
      bottom: 98px;
      right: 24px;
      width: 410px;
      max-height: 580px;
      background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
      backdrop-filter: blur(24px) saturate(140%);
      border: 1px solid var(--border-bright);
      border-radius: var(--radius-lg);
      box-shadow: 0 16px 50px rgba(0, 0, 0, 0.7);
      z-index: 99;
      display: none;
      flex-direction: column;
      overflow: hidden;
      animation: panelSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .jarvis-panel.open { display: flex; }
    @keyframes panelSlideUp {
      from { opacity: 0; transform: translateY(16px) scale(0.96); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .jarvis-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.85rem 1.15rem;
      background: var(--bg-surface);
      border-bottom: 1px solid var(--border);
    }
    .jarvis-chat-stream {
      flex: 1;
      overflow-y: auto;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      min-height: 250px;
      max-height: 380px;
      scroll-behavior: smooth;
    }
    .chat-msg {
      padding: 0.65rem 0.85rem;
      border-radius: var(--radius-md);
      font-size: 0.85rem;
      line-height: 1.45;
      max-width: 88%;
      word-break: break-word;
    }
    .chat-msg.user {
      align-self: flex-end;
      background: var(--accent-gradient, linear-gradient(135deg, #0284c7, #2563eb));
      color: var(--text-on-accent, #fff);
      font-weight: 500;
      border-bottom-right-radius: 2px;
    }
    .chat-msg.jarvis {
      align-self: flex-start;
      background: var(--shell-card);
      border: 1px solid var(--border);
      color: var(--shell-text);
      border-bottom-left-radius: 2px;
    }
    .chat-msg.jarvis pre {
      background: color-mix(in srgb, var(--bg-base) 50%, transparent);
      padding: 0.5rem;
      border-radius: 4px;
      margin-top: 0.4rem;
      font-family: var(--font-mono);
      font-size: 0.78rem;
      overflow-x: auto;
    }
    .jarvis-chat-input-bar {
      display: flex;
      gap: 0.5rem;
      padding: 0.75rem 1rem;
      background: var(--bg-surface);
      border-top: 1px solid var(--border);
    }
    .input-control {
      background: var(--shell-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 0.55rem 0.85rem;
      color: var(--shell-text);
      font-family: inherit;
      font-size: 0.88rem;
      width: 100%;
      outline: none;
      transition: border-color 0.15s ease;
    }
    .input-control:focus { border-color: var(--cyan); }

    /* AUDIO EQUALIZER BARS */
    .audio-visualizer {
      display: flex;
      gap: 3px;
      align-items: center;
      height: 18px;
    }
    .audio-bar {
      width: 3px;
      background: var(--emerald);
      border-radius: 1px;
      animation: bar-wave 0.8s ease-in-out infinite alternate;
    }
    .audio-bar:nth-child(2) { animation-delay: 0.15s; }
    .audio-bar:nth-child(3) { animation-delay: 0.3s; }
    .audio-bar:nth-child(4) { animation-delay: 0.45s; }
    .audio-bar:nth-child(5) { animation-delay: 0.6s; }
    @keyframes bar-wave {
      0% { height: 4px; }
      100% { height: 16px; }
    }

    /* MODAL */
    .modal-backdrop {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(8px);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
    }
    .modal-backdrop.open { display: flex; }
    .modal {
      background: var(--shell-glass-strong);
      box-shadow: var(--shell-highlight);
      border: 1px solid var(--border-bright);
      border-radius: var(--radius-lg);
      padding: 1.5rem;
      width: 480px;
      max-width: 90vw;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    }
    .input-group {
      margin-bottom: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }
    .input-group label {
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--shell-text-2);
    }

    /* SWARM FLEET GRID */
    .swarm-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
      gap: 1.25rem;
    }
    .swarm-bot-card {
      background: var(--shell-glass);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 1.25rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: all 0.2s ease;
      position: relative;
    }
    .swarm-bot-card:hover {
      border-color: var(--border-accent);
      transform: translateY(-2px);
      box-shadow: var(--shadow-glow);
    }
    .bot-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
    }
    .bot-avatar {
      width: 40px;
      height: 40px;
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 20%, transparent), color-mix(in srgb, var(--indigo) 20%, transparent));
      border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
    }
    .bot-name {
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--shell-text);
    }
    .bot-role {
      font-size: 0.75rem;
      color: var(--cyan);
      font-weight: 500;
    }
    .bot-desc {
      font-size: 0.82rem;
      color: var(--shell-text-2);
      line-height: 1.45;
      margin-bottom: 1rem;
    }
    .ticket-board-layout { display:grid; grid-template-columns:180px minmax(0,1fr); gap:20px; }
    #ticket-queue-list { display:flex; flex-direction:column; gap:6px; max-height:70vh; overflow:auto; }
    .ticket-queue { text-align:left; overflow-wrap:anywhere; flex-shrink:0; }
    .ticket-queue[aria-pressed="true"] { border-color:var(--cyan); background:color-mix(in srgb, var(--indigo) 18%, transparent); }
    .ticket-filters, .ticket-detail-actions { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
    #ticket-detail { border-top:1px solid var(--glass-border); padding:20px 0; margin-top:20px; }
    .ticket-phase { padding:10px; border-left:3px solid var(--glass-border); }
    .ticket-phase.active { border-color:var(--emerald); }
    .ticket-history { line-height:1.8; padding-left:22px; }
    @media(max-width:760px) { .ticket-board-layout { grid-template-columns:1fr; } #ticket-queue-list { max-height:180px; } }
    .bot-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid var(--border);
      padding-top: 0.75rem;
    }

    /* Application concierge: the focused application's own declared bots, beside its surface. */
    .concierge-panel { width: 360px; max-width: 45%; display: flex; flex-direction: column; border-left: 1px solid var(--border); background: var(--bg-surface); }
    .concierge-panel[hidden] { display: none; }
    .concierge-header { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.4rem; }
    .concierge-bots { display: flex; flex-wrap: wrap; gap: 0.3rem; }
    .concierge-bots .chip { font-size: 0.75rem; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--shell-text-3); cursor: pointer; }
    .concierge-bots .chip.active { border-color: var(--cyan); color: var(--cyan); }
    .concierge-panel .jarvis-chat-stream { flex: 1 1 auto; min-height: 0; }

    /* Phones: the docked application is one column. The frame takes the full width, the concierge
       stacks beneath it with its own bounded scroll, and nothing pushes the page wider than the
       screen. The viewer's layout is inline-styled in shell.html, hence the !important overrides. */
    @media (max-width: 760px) {
      html, body { overflow-x: clip; max-width: 100%; }
      header { flex-wrap: wrap; gap: 0.4rem 0.75rem; padding: 0.5rem 0.75rem; }
      .header-indicators { flex-wrap: wrap; min-width: 0; gap: 0.4rem 0.6rem; justify-content: flex-end; }
      .ribbon-nav { padding: 0.4rem 0.75rem; }
      main { padding: 0.75rem 0.5rem; }
      .view-panel > .card { padding: 0.75rem; }
      #surface-viewer-card { margin-left: -0.75rem; margin-right: -0.75rem; }
      #surface-viewer-card > div:first-child { flex-wrap: wrap; gap: 0.4rem; padding: 0.5rem !important; }
      #surface-viewer-card > div:first-child > div { flex-wrap: wrap; min-width: 0; }
      #surface-frame-container { flex-direction: column; height: auto !important; }
      #active-app-frame { flex: none !important; width: 100%; height: 70vh !important; }
      .concierge-panel { width: 100%; max-width: none; height: 45vh; min-height: 260px; border-left: none; border-top: 1px solid var(--border); overflow: hidden; }
      #active-app-frame[hidden] ~ .concierge-panel { height: 70vh; }
      .concierge-panel .jarvis-chat-stream { max-height: none; }
      .concierge-panel .jarvis-chat-input-bar { padding: 0.5rem; }
      .concierge-panel .input-control { min-width: 0; flex: 1 1 auto; }
    }

    /* Catalog notes: a turned-off card's next step, and the administrator's rejected-package count. */
    .app-next-step { font-size: 0.82rem; color: var(--shell-text-2); overflow-wrap: anywhere; }
    .app-rejected-note { grid-column: 1 / -1; font-size: 0.85rem; color: var(--shell-text-2); }
    .app-rejected-note a { color: var(--cyan); }

    /* The application access dialog (cockpit and /access): long emails and subjects wrap inside it,
       and on a phone it fits the screen with its padding included. */
    #application-access-dialog { overflow-wrap: anywhere; box-sizing: border-box; }
    #application-access-dialog input:not([type=checkbox]):not([type=radio]), #application-access-dialog select { max-width: 100%; min-width: 0; }
    @media (max-width: 600px) {
      #application-access-dialog { width: calc(100vw - 1rem) !important; max-width: none !important; padding: 14px !important; margin: 0.5rem auto !important; }
    }

    /* A wide table scrolls or stacks inside its card; it never widens main's grid track. */
    main > * { min-width: 0; }
    @media (max-width: 600px) {
      table.stack-on-phone thead { display: none; }
      table.stack-on-phone, table.stack-on-phone tbody, table.stack-on-phone tr { display: block; width: 100%; }
      table.stack-on-phone tr { border-bottom: 1px solid var(--border); padding: 0.5rem 0; }
      table.stack-on-phone td { display: block; max-width: none; border: 0; padding: 0.3rem 0.25rem;
        overflow-wrap: break-word; word-break: normal; }
      table.stack-on-phone td.actions { display: flex; }
      table.stack-on-phone td::before { content: attr(data-label); display: block; color: var(--shell-text-2);
        font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
      table.stack-on-phone td.actions::before { flex-basis: 100%; }
      table.stack-on-phone td[colspan]::before { content: none; }
    }

    /* Phones: no free corner exists over a scrolling page, so the orb leaves the content area.
       body never scrolls (main does), so an absolutely placed orb stays in the header's corner,
       which the header keeps free; modals (z-index 1000) stay above it. */
    @media (max-width: 600px) {
      header { padding-right: 3.6rem; }
      .jarvis-fab { position: absolute; top: 0.4rem; right: 0.6rem; bottom: auto; width: 40px; height: 40px; z-index: 60; }
      .jarvis-fab .jarvis-orb-inner { width: 18px; height: 18px; }
      .jarvis-panel { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; width: auto; max-height: calc(100dvh - 1rem); }
    }

    /* The focused application view (shell_focus.js). The viewer bar is the only chrome an open
       application has; the rules apply while the Applications view is the active one, so a ticket
       queue opened from a concierge shows the ordinary cockpit. The viewer's display is inline-styled
       by shell_applications.js, hence the !important overrides. */
    .app-focus-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.75rem; background: var(--bg-surface); border-bottom: 1px solid var(--border); min-width: 0; }
    .app-focus-identity, .app-focus-actions { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
    .app-focus-actions { flex: none; }
    .app-focus-identity strong { font-size: 0.95rem; color: var(--shell-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    #app-focus-back { text-decoration: none; flex: none; }
    #active-app-icon { font-size: 1.05rem; flex: none; }
    #app-focus-pending { padding: 3rem 1rem; text-align: center; color: var(--shell-text-2); font-size: 0.95rem; }
    body.app-focus-pending #ribbon, body.app-focus-pending #surfaces-tab .card-header,
    body.app-focus-pending #suite-filters, body.app-focus-pending #apps-grid { display: none; }
    body.app-focused:has(#surfaces-tab.active) > header,
    body.app-focused:has(#surfaces-tab.active) #ribbon,
    body.app-focused:has(#surfaces-tab.active) #surfaces-tab .card-header,
    body.app-focused:has(#surfaces-tab.active) #suite-filters,
    body.app-focused:has(#surfaces-tab.active) #apps-grid,
    body.app-focused:has(#surfaces-tab.active) #app-focus-pending { display: none !important; }
    body.app-focused:has(#surfaces-tab.active) main { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
    body.app-focused #surfaces-tab.active { max-width: none; width: 100%; margin: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; animation: none; }
    body.app-focused #surfaces-tab.active > .card { flex: 1 1 auto; min-height: 0; margin: 0 !important; padding: 0; border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; }
    body.app-focused #surfaces-tab.active #surface-viewer-card { display: flex !important; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
    body.app-focused #surfaces-tab.active #surface-frame-container { flex: 1 1 auto; min-height: 0; height: auto !important; }
    body.app-focused #surfaces-tab.active #active-app-tools { flex: none; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding: 0.35rem 0.5rem !important; background: var(--bg-surface); border-bottom: 1px solid var(--border); }
    body.app-focused #surfaces-tab.active #active-app-tools:empty { display: none !important; }
    body.app-focused #surfaces-tab.active .concierge-panel .jarvis-chat-stream { max-height: none; }
    body.app-focused #surfaces-tab.active #active-app-tools .btn { flex: none; white-space: nowrap; }
    body.app-focused:has(#surfaces-tab.active) .app-focus-bar { padding-right: 3.4rem; }
    body.app-focused:has(#surfaces-tab.active) .jarvis-fab { position: fixed; top: 0.3rem; right: 0.6rem; bottom: auto; width: 36px; height: 36px; z-index: 60; }
    body.app-focused:has(#surfaces-tab.active) .jarvis-fab .jarvis-orb-inner { width: 16px; height: 16px; }
    body.app-focused:has(#surfaces-tab.active) .jarvis-panel { top: 3rem; bottom: auto; max-height: calc(100dvh - 3.5rem); }
    @media (max-width: 760px) {
      body.app-focused #surfaces-tab.active > .card { padding: 0; }
      body.app-focused:has(#surfaces-tab.active) .app-focus-bar { flex-wrap: nowrap !important; padding: 0.35rem 3.2rem 0.35rem 0.5rem !important; }
      body.app-focused:has(#surfaces-tab.active) .btn-label { display: none; }
      body.app-focused:has(#surfaces-tab.active) .app-focus-bar > div { flex-wrap: nowrap !important; }
      body.app-focused:has(#surfaces-tab.active) .app-focus-actions .btn, body.app-focused:has(#surfaces-tab.active) #app-focus-back { min-width: 2.25rem; justify-content: center; }
      body.app-focused #surfaces-tab.active #surface-frame-container { position: relative; flex-direction: column; }
      body.app-focused #surfaces-tab.active #active-app-frame { flex: 1 1 auto !important; height: auto !important; min-height: 0; }
      body.app-focused #surfaces-tab.active .concierge-panel { position: static; flex: 0 0 55%; height: auto; min-height: 0; border-top: 1px solid var(--border-bright); }
      body.app-focused #surfaces-tab.active #active-app-frame[hidden] ~ .concierge-panel { position: static; height: auto; flex: 1 1 auto; box-shadow: none; }
      body.app-focused:has(#surfaces-tab.active) .jarvis-panel { top: auto; bottom: 0.5rem; max-height: calc(100dvh - 3.5rem); }
    }

    /* The bar's secondary actions: inline beside Concierge, behind "More" on a phone (shell_focus.js). */
    .app-focus-bar { position: relative; }
    .app-focus-menu { display: flex; align-items: center; gap: 0.4rem; }
    #app-focus-more { display: none; }
    #app-frame-refusal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--bg-surface); border-bottom: 1px solid var(--rose); color: var(--shell-text); font-size: 0.85rem; }
    #app-frame-refusal[hidden] { display: none; }
    #app-frame-refusal .app-activation { display: flex; align-items: center; gap: 0.5rem; }
    #app-frame-refusal .app-activation-status { margin: 0; color: var(--shell-text-2); }
    .ticket-markdown { line-height: 1.55; color: var(--shell-text); padding: 0.4rem 0; overflow-wrap: anywhere; }
    .ticket-markdown :is(p, ul, ol, pre, h4, h5, h6) { margin: 0 0 0.6rem; }
    .ticket-markdown :is(ul, ol) { padding-left: 1.4rem; }
    .ticket-markdown pre { white-space: pre-wrap; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.5rem; }
    .ticket-markdown code { font-family: 'JetBrains Mono', monospace; font-size: 0.85em; }
    .kernel-version summary { color: var(--cyan); cursor: pointer; }
    .kernel-version summary:hover { text-decoration: underline; }
    .kernel-version p { margin: 0.4rem 0 0; color: var(--shell-text-2); }
    @media (max-width: 480px) {
      #app-focus-more { display: inline-flex; }
      .app-focus-menu { display: none; position: absolute; top: calc(100% + 2px); right: 0.5rem; z-index: 70; flex-direction: column; align-items: stretch; gap: 0.3rem; min-width: 10rem; padding: 0.4rem; background: var(--shell-card); border: 1px solid var(--border-bright); border-radius: var(--radius-sm); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); }
      .app-focus-menu.open { display: flex; }
      .app-focus-menu .btn { justify-content: flex-start; }
      body .app-focus-menu .btn-label, body.app-focused:has(#surfaces-tab.active) .app-focus-menu .btn-label { display: inline; }
    }

/* Jarvis keeps a quiet conversation and a composer while the existing orb and app concierge retain their own controls. */
#jarvis-panel { width:min(460px,calc(100vw - 24px)); height:min(640px,calc(100dvh - 100px)); border:1px solid var(--border); box-shadow:0 12px 44px #0003; }
#jarvis-panel .jarvis-panel-header { padding:12px 16px; background:var(--bg-surface); }
#jarvis-panel .jarvis-chat-stream { flex:1; min-height:0; max-height:none; padding:20px 18px; }
#jarvis-panel .chat-msg.jarvis { background:transparent; border:0; box-shadow:none; padding:0; line-height:1.6; }
#jarvis-panel .chat-msg.user { background:var(--shell-card-hover); color:var(--shell-text); border:1px solid var(--border); box-shadow:none; padding:10px 14px; border-radius:14px; line-height:1.5; white-space:pre-wrap; }
#jarvis-panel .jarvis-chat-input-bar { align-items:flex-end; padding:12px; }
#jarvis-drawer-input { flex:1; min-width:0; min-height:44px; max-height:140px; resize:vertical; font:inherit; line-height:1.5; }
#jarvis-panel .jarvis-chat-input-bar button { min-height:40px; min-width:40px; border-radius:12px; font-size:20px; }