body[data-motion="reduced"] *,
    .reduced-motion * {
      animation: none !important;
      transition: none !important;
    }
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
      }
    }

    .auth {
      position: fixed;
      inset: 0;
      z-index: 20;
      display: grid;
      place-items: center;
      padding: 16px;
      background: rgba(5, 8, 12, .72);
    }
    .auth-box {
      width: min(430px, 100%);
      display: grid;
      gap: 12px;
      padding: 18px;
    }
    .auth-box h1 { margin: 0; font-size: 22px; }
    .auth-option {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }
    .auth-option input {
      width: 16px;
      height: 16px;
      margin-top: 1px;
    }
    .muted { color: var(--muted); }

    html, body { max-width: 100%; }
    body { overflow-x: hidden; }
    img, svg, canvas, video, iframe { max-width: 100%; }
    pre, code, .codex-output, .bridge-transcript, .assistant-chat, .chatgpt-message {
      max-width: 100%;
      overflow-wrap: anywhere;
    }
    table {
      max-width: 100%;
      display: block;
      overflow-x: auto;
    }
    button,
    input,
    select,
    textarea {
      touch-action: manipulation;
    }
    input,
    select,
    textarea {
      max-width: 100%;
    }
    .workspace,
    .workspace-body,
    .panel,
    .panel-body,
    .page-shell,
    .mode-grid,
    .grid,
    .record-strip,
    .notice-list,
    .tag-row,
    .room-card,
    .next-action-card,
    .workflow-card,
    .record-card,
    .object-card {
      min-width: 0;
    }

    @media (max-width: 1080px) {
      body { overflow: auto; }
      .topbar { grid-template-columns: 1fr; height: auto; padding: 10px; }
      .command { width: 100%; margin: 0; max-width: none; }
      .shell {
        height: auto;
        min-height: calc(100dvh - 56px);
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
          "dock"
          "workspace"
          "inspector"
          "activity";
      }
      .dock {
        display: flex;
        flex-direction: row;
        align-items: stretch;
      }
      .dock button { min-width: 126px; }
      .dock-room-tile { flex: 0 0 126px; }
      .dock-room { flex: 0 0 178px; }
      .dock.nav-compact .dock-room { flex-basis: 58px; }
      .inspector {
        min-height: 320px;
        border-left: 1px solid rgba(255,255,255,.08);
        border-top: 1px solid rgba(212,147,53,.16);
      }
      .split, .session-grid, .governance-grid, .mission-layout, .signal-board, .dashboard-panel-grid, .bridge-grid, .meeting-room-grid, .focus-grid, .studio-layout { grid-template-columns: 1fr; }
      .dashboard-panel.wide { grid-column: auto; }
      .activity-queue { flex-wrap: wrap; height: auto; }
    }
    @media (max-width: 720px) {
      :root { --gap: 8px; }
      .topbar,
      .shell,
      .shell > *,
      .workspace,
      .workspace-head,
      .workspace-title,
      .workspace-actions,
      .workspace-body,
      .dock,
      .inspector,
      .activity-queue {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }
      .topbar {
        overflow: hidden;
      }
      .topbar .status-strip {
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
      }
      .topbar .status-chip,
      .topbar .role-badge {
        max-width: calc(100vw - 40px);
        white-space: normal;
      }
      .inspector-toggle {
        display: inline-flex;
      }
      .workspace,
      .workspace-body {
        overflow-x: hidden;
        overscroll-behavior-x: none;
      }
      .workspace-title,
      .workspace-title h1,
      .workspace-title p,
      .room-header,
      .room-header h2,
      .room-header p,
      .workflow-header,
      .workflow-header h2,
      .workflow-header p,
      .hero-panel,
      .hero-panel h2,
      .hero-panel p,
      .notice,
      .record-chip,
      .os-status-chip,
      .panel {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: normal;
      }
      .workspace-title p,
      .room-header p,
      .workflow-header p,
      .hero-panel p,
      .notice span,
      .record-chip span,
      .muted {
        max-width: calc(100vw - 40px);
      }
      button,
      input,
      select,
      .primary,
      .toolbar button,
      .workspace-actions button,
      .command-ribbon button {
        min-height: 44px;
      }
      .status-strip { flex-wrap: wrap; justify-content: flex-start; }
      .role-badge, .status-chip { min-height: 34px; max-width: 100%; font-size: 12px; }
      .shell {
        grid-template-areas:
          "workspace"
          "inspector"
          "activity"
          "dock";
        padding:
          8px
          max(8px, env(safe-area-inset-right))
          max(8px, env(safe-area-inset-bottom))
          max(8px, env(safe-area-inset-left));
      }
      .dock {
        position: sticky;
        top: auto;
        bottom: env(safe-area-inset-bottom);
        z-index: 10;
        gap: 6px;
        padding: 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        max-height: 96px;
        border-radius: 12px;
      }
      .dock-header { display: none; }
      .dock-group-label { display: none; }
      .dock button {
        min-width: 86px;
        min-height: 54px;
        grid-template-columns: 1fr;
        place-items: center;
        text-align: center;
        font-size: 11px;
      }
      .dock-room { flex: 0 0 118px; max-height: 80px; overflow: hidden; }
      .dock .dock-room-toggle,
      .dock .dock-app-button {
        min-width: 0;
        grid-template-columns: 1fr;
        place-items: center;
        text-align: center;
      }
      .dock-room.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--room-accent) 22%, transparent); }
      .dock-room-apps { display: none; }
      .dock .dock-app-status,
      .dock-room-label span { display: none; }
      .dock-room-label strong { white-space: normal; }
      .dock-room-apps { grid-template-columns: 1fr; }
      .dock .app-icon { width: 30px; height: 30px; }
      .workspace-head {
        align-items: flex-start;
        grid-template-columns: 1fr;
        padding: 12px;
      }
      .workspace-title {
        width: 100%;
      }
      .workspace-actions {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
      }
      .workspace-actions button { flex: 0 0 auto; }
      .toolbar,
      .inline-form,
      .tab-row {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
      }
      .inline-form input,
      .inline-form select,
      .inline-form button {
        min-width: 160px;
      }
      .room-app-tray {
        grid-template-columns: 1fr;
        width: 100%;
      }
      .room-app-tray-label { display: none; }
      .room-app-tray-scroll { width: 100%; }
      .workspace-body { padding: 10px; }
      .mode-grid, .module-grid, .dashboard-panel-grid, .grid, .meeting-toolbar-grid, .workflow-mini-grid, .next-action-grid { grid-template-columns: 1fr !important; }
      .hero-panel h2 { font-size: 19px; }
      .command-ribbon { overflow-x: auto; flex-wrap: nowrap; }
      .command-ribbon button { flex: 0 0 auto; }
      .os-status-strip { grid-template-columns: 1fr; }
      .meeting-stage-list { overflow-x: auto; grid-auto-flow: column; grid-auto-columns: minmax(130px, 1fr); }
      .activity-queue { align-items: stretch; }
      .queue-card { min-width: 160px; flex: 1 0 160px; }
      .inspector-scrim {
        position: fixed;
        inset: 0;
        z-index: 58;
        display: block;
        border: 0;
        padding: 0;
        opacity: 0;
        pointer-events: none;
        background: rgba(3, 7, 11, .58);
        backdrop-filter: blur(2px);
        transition: opacity var(--transition-shell);
      }
      .inspector-scrim[hidden] {
        display: none;
      }
      body.inspector-drawer-open .inspector-scrim {
        opacity: 1;
        pointer-events: auto;
      }
      body.inspector-scroll-locked {
        overflow: hidden;
        touch-action: none;
      }
      .inspector {
        position: fixed;
        z-index: 68;
        left: max(8px, env(safe-area-inset-left));
        right: max(8px, env(safe-area-inset-right));
        top: auto;
        bottom: max(8px, env(safe-area-inset-bottom));
        width: auto;
        min-height: 0;
        max-height: min(78dvh, 720px);
        border-radius: 18px 18px 12px 12px;
        overflow: auto;
        overscroll-behavior: contain;
        box-shadow: 0 -18px 48px rgba(0,0,0,.28);
        transform: translateY(calc(100% + 24px));
        transition:
          transform var(--transition-shell),
          visibility var(--transition-shell);
        visibility: hidden;
        pointer-events: none;
        touch-action: pan-y;
        will-change: transform;
      }
      body.inspector-closed .inspector {
        display: block;
      }
      body.inspector-drawer-open .inspector {
        visibility: visible;
        pointer-events: auto;
        transform: translateY(var(--inspector-drag-y, 0px));
      }
      body.inspector-dragging .inspector {
        transition: none;
      }
      .inspector::before {
        content: "";
        position: sticky;
        top: 0;
        z-index: 1;
        display: block;
        width: 52px;
        height: 5px;
        margin: 10px auto 2px;
        border-radius: 999px;
        background: rgba(255,255,255,.22);
      }
      .inspector-section { padding: 12px; }
      input,
      select,
      textarea {
        font-size: 16px;
      }
      .receipt-preview-card {
        position: static;
        min-height: 0;
      }
      .receipt-preview-card dl { grid-template-columns: 1fr; }
      .receipt-preview-card .receipt-no { float: none; display: inline-block; margin-bottom: 8px; }
    }
    @media (max-width: 480px) {
      .topbar { gap: 10px; }
      .brand { min-width: 0; }
      .brand span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .command { min-width: 0; }
      .workspace-body { padding: 8px; }
      .hero-panel h2,
      .room-header h2,
      .workflow-header h2 { font-size: 18px; }
      .chatgpt-message { max-width: 100%; }
      .queue-card { flex-basis: 100%; }
      .inspector { max-height: 66vh; }
    }
    @media (min-width: 721px) {
      .inspector-scrim {
        display: none !important;
      }
      body.inspector-scroll-locked {
        overflow: auto;
        touch-action: auto;
      }
    }
    @media (display-mode: standalone), (display-mode: fullscreen) {
      .topbar {
        padding-top: max(10px, env(safe-area-inset-top));
      }
      .shell {
        min-height: calc(100dvh - 56px - env(safe-area-inset-top));
      }
    }