﻿@media (max-width: 1320px) {
  :root { --sidebar: 248px; }
  .workspace.has-panel { grid-template-columns:minmax(360px,1fr) minmax(340px,400px); }
  .workspace.panel-coding { grid-template-columns:minmax(360px,1fr) minmax(500px,1fr); }
  .quick-grid { grid-template-columns:1fr 1fr; }
  .dashboard-grid { grid-template-columns:1fr 1fr; }
  .dashboard-card:nth-of-type(4) { grid-column:1/-1; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .hero-float-card { width:205px; }
  .hero-float-card.left.one, .hero-float-card.left.two { left:-4%; }
  .hero-float-card.right.one, .hero-float-card.right.two { right:-4%; }
}

@media (max-width: 1080px) {
  .workspace.has-panel,
  .workspace.panel-coding { grid-template-columns:1fr; }
  .workspace-panel { max-height:none; }
  .chat-pane { min-width:0; }
  .panel-coding .workspace-panel { min-height:720px; }
  .feature-window-content { grid-template-columns:1fr; }
  .feature-window-preview { min-height:320px; }
  .product-grid { grid-template-columns:1fr; }
  .hero-float-card { display:none; }
  .hero-stage { min-height:720px; }
  .hero-orb-wrap { top:23%; width:min(520px,90vw); }
  .hero-copy { bottom:20px; }
  .process-grid, .stats-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --rail: 0px; --sidebar: 0px; }
  .app-shell { width:100%; max-width:100%; min-width:0; grid-template-columns:minmax(0,1fr); padding-bottom:0; min-height:100dvh; overflow-x:hidden; }
  .app-sidebar { display:none; }
  .app-main { width:100%; max-width:100%; min-width:0; padding:calc(env(safe-area-inset-top, 0px) + 12px) 14px calc(env(safe-area-inset-bottom, 0px) + 14px); min-height:100dvh; overflow-x:hidden; }
  .app-topbar {
    align-items:center;
    gap:12px;
    margin-bottom:10px;
  }
  .app-title h1 { font-size:28px; letter-spacing:-.04em; }
  .app-title .kicker,
  .app-title p { display:none; }
  .app-top-actions {
    margin-left:auto;
    gap:7px;
  }
  .app-top-actions [data-action="logout"] {
    min-width:44px;
    width:44px;
    padding:0;
    overflow:hidden;
    color:transparent;
    gap:0;
  }
  .app-top-actions [data-action="logout"] svg { color:var(--text); }
  .mobile-top-action { display:inline-grid; }
  .workspace-main .app-topbar { display:none; }
  .dashboard-main .app-topbar { display:flex; }
  .app-rail { display:none; }
  .rail-nav { display:none; }
  .mobile-rail-btn { display:none; }
  .archive-btn { display:none; }
  .mobile-layer,
  .mobile-layer-backdrop { display:block; }
  .mobile-tools-layer {
    top:auto;
    height:auto;
    max-height:min(72dvh, 560px);
    padding:18px 18px calc(env(safe-area-inset-bottom, 0px) + 18px);
    border-radius:28px 28px 0 0;
    box-shadow:0 -18px 48px rgba(31,38,55,.16);
    transform:translateY(100%);
  }
  .mobile-tools-layer .mobile-layer-header { margin-bottom:12px; }
  .mobile-tools-layer .mobile-layer-header h2 { font-size:28px; }
  .mobile-tools-layer .mobile-layer-scroll {
    max-height:calc(min(72dvh, 560px) - 104px - env(safe-area-inset-bottom, 0px));
  }
  .mobile-chats-open .mobile-layer-backdrop,
  .mobile-tools-open .mobile-layer-backdrop {
    opacity:1;
    pointer-events:auto;
  }
  .mobile-chats-open .mobile-chat-layer,
  .mobile-tools-open .mobile-tools-layer {
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  body.mobile-layer-open { overflow:hidden; }
  .workspace.has-panel,
  .workspace.panel-coding {
    display:block;
  }
  .workspace.has-panel .chat-pane {
    min-height:calc(100dvh - 110px);
  }
  .workspace.has-panel .workspace-panel {
    position:fixed;
    inset:0;
    z-index:90;
    height:100dvh;
    max-height:none;
    border-radius:0;
    border:0;
    box-shadow:none;
  }
  .workspace-panel-header {
    padding:calc(env(safe-area-inset-top, 0px) + 18px) 18px 14px;
    background:var(--surface-strong);
    backdrop-filter:blur(22px) saturate(150%);
    -webkit-backdrop-filter:blur(22px) saturate(150%);
  }
  .workspace-panel-body {
    padding:16px 14px calc(env(safe-area-inset-bottom, 0px) + 26px);
  }
  .app-top-actions .hide-mobile { display:none; }
  .dashboard-content,
  .dashboard-grid { width:100%; max-width:100%; min-width:0; }
  .dashboard-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .dashboard-card,
  .self-dev-card,
  .native-model-card,
  .dashboard-header-card { width:100%; max-width:100%; min-width:0; grid-column:1/-1; border-radius:20px; padding:16px; }
  .dashboard-header-card { grid-template-columns:1fr; gap:12px; }
  .dashboard-title { font-size:30px; margin:6px 0 4px; }
  .metric-block { padding:14px 0 0; border-left:0; border-top:1px solid var(--line); }
  .native-model-head,
  .native-model-layout,
  .native-operations-grid { grid-template-columns:1fr; }
  .grand-master-card { grid-column:auto; }
  .native-model-status { align-items:flex-start; min-width:0; }
  .native-visual-toolbar { align-items:flex-start; }
  .native-control-bar .btn { flex:1 1 190px; }
  .landing-nav-links { display:none; }
  .feature-window { width:calc(100vw - 20px); max-height:calc(100vh - 20px); }
  .feature-window-content { padding:28px 22px; }
}

@media (max-width: 640px) {
  .landing-nav { height:66px; padding:0 16px; }
  .landing-nav-actions .btn-ghost { display:none; }
  .brand { font-size:18px; }
  .hero { min-height:calc(100vh - 66px); padding:24px 14px 50px; }
  .hero-wordmark { top:78px; font-size:26vw; }
  .hero-stage { min-height:660px; }
  .hero-runtime { top:2px; }
  .hero-orb-wrap { top:24%; width:98vw; }
  .hero-copy { width:96%; bottom:10px; }
  .hero-copy h1 { font-size:38px; }
  .hero-copy p { font-size:15px; }
  .landing-section { width:min(100% - 28px,1340px); padding:78px 0; }
  .feature-grid, .process-grid, .stats-grid { grid-template-columns:1fr; }
  .feature-card { min-height:230px; }
  .product-card { min-height:520px; padding:26px; }
  .product-preview { width:78%; right:20px; }
  .product-mini-orb { left:15%; }
  .cta-banner { grid-template-columns:1fr; padding:34px 26px; text-align:center; }
  .cta-orb { margin-top:20px; }
  .landing-footer { flex-direction:column; gap:14px; }

  .app-topbar { align-items:center; }
  .app-title h1 { font-size:28px; }
  .app-top-actions .btn { min-width:44px; padding:0 12px; }
  .app-top-actions button[data-action="logout"] { min-width:44px; width:44px; padding:0; }
  .session-banner { align-items:flex-start; }
  .session-live { display:none; }
  .runtime-strip { grid-template-columns:auto minmax(0,1fr); }
  .runtime-state-actions { grid-column:1/-1; width:100%; justify-content:space-around; }
  .runtime-activity { position:absolute; right:18px; top:18px; }
  .quick-grid { grid-template-columns:1fr 1fr; }
  .message { max-width:90%; }
  .workspace-panel-header h2 { font-size:30px; }
  .coding-overview { grid-template-columns:1fr; }
  .coding-overview > div + div { border-left:0; border-top:1px solid var(--line); padding-top:10px; }
  .confidence-card { grid-template-columns:1fr; }
  .task-summary, .learning-summary { grid-template-columns:1fr 1fr 1fr; }
  .data-table { min-width:0; }
  .lock-screen { padding:12px; }
  .lock-card { padding:18px 22px 20px; border-radius:24px; }
  .lock-orb { width:78px; height:78px; margin-bottom:8px; }
  .lock-card h2 { margin-bottom:6px; font-size:34px; }
  .auth-mode-switch { margin:12px 0; }
  .auth-availability-notice { margin-bottom:12px; padding:10px 12px; }
  .lock-field { margin:12px 0; }
  .lock-error { min-height:16px; margin-bottom:4px; }
  .feature-window-bar { grid-template-columns:1fr auto; }
  .feature-window-bar > span { display:none; }
  .feature-window-content { padding:24px 18px; }
  .feature-window-copy h2 { font-size:46px; }
  .feature-window-preview { padding:18px; min-height:300px; }
}

/* Interactive v2 responsive refinements */
@media (max-width: 1320px) {
  .conversation-runtime { grid-template-columns:auto minmax(0,1fr) auto auto; }
  .runtime-context-pill { display:none; }
  .coding-task-context { grid-template-columns:1fr; }
  .coding-operator-surfaces,
  .coding-review-columns { grid-template-columns:1fr; }
}

@media (max-width: 1080px) {
  .conversation-shell { height:auto; min-height:680px; max-height:none; }
  .conversation-scroll { max-height:720px; }
  .feature-system-window { overflow:auto; }
  .feature-system-layout { grid-template-columns:1fr; }
  .feature-system-copy { border-right:0; border-bottom:1px solid var(--line); }
  .feature-system-copy { display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; }
  .feature-system-copy > .icon-wrap,
  .feature-system-copy > .kicker,
  .feature-system-copy > h2,
  .feature-system-copy > p { grid-column:1/-1; }
  .feature-system-actions,
  .feature-preview-note { grid-column:1/-1; }
  .trace-pipeline { grid-template-columns:1fr 1fr; }
  .trace-connector { display:none; }
}

@media (max-width: 900px) {
  .conversation-shell {
    height:calc(100dvh - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    min-height:0;
    max-height:none;
  }
  .conversation-scroll {
    max-height:none;
    overflow-y:auto;
    scroll-padding-top:92px;
  }
  .conversation-runtime { grid-template-columns:auto minmax(0,1fr) auto; }
  .runtime-state-actions { display:none; }
  .runtime-mobile-actions { display:flex; }
  .new-chat-grid { grid-template-columns:1fr 1fr; }
  .coding-studio-summary { grid-template-columns:1fr 1fr; }
  .coding-studio-summary .btn { grid-column:1/-1; }
  .coding-task-strip { grid-template-columns:1fr; }
  .coding-task-strip > div + div { border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:10px; }
  .feature-system-copy { display:block; }
  .feature-system-copy > * + * { margin-top:14px; }
  .trace-console-grid { grid-template-columns:1fr; }
  .trace-pipeline { grid-template-columns:1fr; }
  .trace-output { grid-template-columns:1fr; }
}

@media (max-width: 640px) {
  .conversation-shell {
    height:calc(100dvh - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    min-height:0;
    border-radius:22px;
  }
  .conversation-scroll { padding:0 12px 20px; }
  .conversation-runtime { margin:0 -12px 7px; grid-template-columns:auto minmax(0,1fr) auto; padding:11px 12px; min-height:74px; top:0; }
  .runtime-orb-button { width:48px; height:48px; }
  .runtime-orb-mini { width:44px; height:44px; }
  .runtime-mobile-actions { align-self:center; }
  .runtime-title-row { display:block; }
  .runtime-title-row strong { font-size:16px; }
  .runtime-title-row > span { margin-top:2px; font-size:10px; white-space:normal; }
  .runtime-activity { display:none !important; }
  .conversation-meta { padding:10px 2px 12px; }
  .conversation-online { display:none; }
  .conversation-messages { padding:15px 2px 10px; }
  .new-chat-start { padding:18px; border-radius:20px; }
  .new-chat-grid { grid-template-columns:1fr; }
  .conversation-composer { padding:9px 8px 9px 12px; }
  .coding-task-card { grid-template-columns:auto minmax(0,1fr); }
  .coding-task-meta { grid-column:2; flex-direction:row; align-items:center; justify-content:space-between; }
  .coding-studio-summary { grid-template-columns:1fr; }
  .coding-studio-summary > div + div { border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:10px; }
  .coding-studio-summary .btn { grid-column:auto; }
  .coding-task-context { grid-template-columns:1fr; }
  .coding-operator-card-head,
  .coding-timeline-event,
  .coding-approval-row,
  .coding-profile-row,
  .coding-admin-events span { grid-template-columns:1fr; }
  .coding-operator-metrics,
  .coding-approval-grid,
  .coding-budget-grid { grid-template-columns:1fr; }
  .dashboard-main .app-topbar {
    align-items:flex-start;
    margin-bottom:12px;
  }
  .dashboard-main .app-title h1 { font-size:30px; }
  .dashboard-card h3 { font-size:18px; }
  .dashboard-card p { font-size:12px; }
  .account-toolbar { grid-template-columns:1fr 1fr; }
  .account-toolbar .btn { min-width:0; padding:0 14px; white-space:nowrap; }
  .account-search { grid-column:1/-1; width:100%; padding:0 11px; justify-content:flex-start; }
  .account-search input { width:100%; opacity:1; pointer-events:auto; }
  .account-search:focus-within {
    width:100%;
    grid-column:1/-1;
    padding:0 11px;
    justify-content:flex-start;
  }
  .invitation-create-form { grid-template-columns:1fr; }
  .invitation-create-form .btn { width:100%; }
  .account-invitation-dialog { padding:20px; }
  .account-search:focus-within input { width:100%; opacity:1; pointer-events:auto; }
  .account-row { grid-template-columns:1fr; align-items:stretch; }
  .account-controls { justify-content:flex-start; flex-wrap:nowrap; }
  .account-role-trigger { flex:0 1 auto; min-width:0; max-width:142px; }
  .account-icon-action { margin-left:auto; }
  .health-ring { width:116px; height:116px; margin:14px auto; }
  .health-ring-content strong { font-size:24px; }
  .self-dev-head { display:block; }
  .self-dev-head .btn { width:100%; margin-top:12px; }
  .native-model-head { display:block; }
  .native-model-head h3 { font-size:23px; }
  .native-model-status { margin-top:12px; }
  .native-mode-toggle { margin-top:10px; }
  .native-visual-toolbar { display:block; }
  .native-canvas-actions { margin-top:9px; }
  .native-brain-stage { height:clamp(300px,78vw,430px); }
  .native-brain-development { top:auto; right:10px; bottom:10px; left:10px; max-width:none; }
  .native-kpi-grid { grid-template-columns:1fr; }
  .native-control-bar { display:grid; grid-template-columns:1fr; }
  .native-control-bar .btn { width:100%; }
  .native-metric-row { grid-template-columns:1fr; gap:4px; }
  .native-metric-row strong { text-align:left; }
  .native-layer-row { grid-template-columns:1fr; gap:4px; }
  .native-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .native-disclosure > summary,
  .native-review-example > summary { grid-template-columns:auto minmax(0,1fr) auto; gap:8px; padding:12px; }
  .native-disclosure > summary > .badge,
  .native-review-example > summary > .badge { grid-column:2; justify-self:start; }
  .native-disclosure > summary > .native-disclosure-chevron,
  .native-review-example > summary > .native-disclosure-chevron { grid-column:3; grid-row:1; }
  .native-disclosure-copy small { white-space:normal; }
  .native-disclosure-body { padding:11px; }
  .native-review-summary > span { padding:8px 6px; }
  .native-review-meta { grid-template-columns:1fr; }
  .native-review-actions { display:grid; grid-template-columns:1fr 1fr; }
  .native-review-actions .btn { width:100%; min-width:0; padding:0 9px; }
  .native-primary-controls { position:static; }
  .self-dev-card .table-scroll { overflow:visible; }
  .self-dev-card .data-table,
  .self-dev-card .data-table tbody,
  .self-dev-card .data-table tr,
  .self-dev-card .data-table td { display:block; width:100%; }
  .self-dev-card .data-table thead { display:none; }
  .self-dev-card .data-table tr {
    margin-bottom:10px;
    padding:13px;
    border:1px solid var(--line);
    border-radius:17px;
    background:var(--surface);
  }
  .self-dev-card .data-table td {
    display:grid;
    grid-template-columns:96px minmax(0,1fr);
    gap:10px;
    align-items:center;
    border:0;
    padding:7px 0;
  }
  .self-dev-card .data-table td::before {
    content:attr(data-label);
    color:var(--muted);
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .self-dev-card .data-table td:first-child {
    grid-template-columns:1fr;
    padding-top:0;
  }
  .self-dev-card .data-table td:first-child::before { display:none; }
  .self-dev-card .data-table td:last-child { padding-bottom:0; }
  .progress-cell > div { min-width:0; }
  .feature-system-window { width:calc(100vw - 12px); max-height:calc(100vh - 12px); border-radius:24px; }
  .feature-system-copy, .feature-system-console { padding:20px 16px; }
  .feature-system-copy h2 { font-size:40px; }
  .feature-system-metrics { grid-template-columns:1fr 1fr 1fr; }
  .feature-system-actions { flex-direction:column; }
  .trace-console-head { align-items:flex-start; }
  .trace-console-head > div:last-child { display:none; }
  .trace-stage { min-height:92px; }
}

@media (max-width: 400px) {
  .app-main { padding-left:10px; padding-right:10px; }
  .native-model-card { padding:12px; }
  .native-quick-grid { grid-template-columns:1fr; }
  .native-review-actions { grid-template-columns:1fr; }
}

/* v3 feature-story responsiveness */
@media (max-width: 980px) {
  .feature-story-window { width:min(900px, calc(100vw - 24px)); max-height:calc(100vh - 24px); }
  .feature-story-layout { grid-template-columns:1fr; }
  .feature-story-copy { padding:30px; border-right:0; border-bottom:1px solid var(--line); }
  .feature-story-copy h2 { font-size:48px; }
  .feature-story-copy > p { max-width:720px; }
  .feature-example-card,.feature-result-card { display:inline-grid; width:calc(50% - 7px); vertical-align:top; }
  .feature-example-card { margin-right:10px; }
  .feature-story-main { padding:22px; }
  .story-step-explanation { grid-template-columns:150px 1fr; }
  .story-details-toggle { grid-column:1 / -1; justify-self:start; }
}

@media (max-width: 680px) {
  .feature-story-window { width:100vw; max-height:100vh; height:100vh; border-radius:0; }
  .feature-window-bar { position:sticky; top:0; z-index:20; background:var(--surface-strong); backdrop-filter:blur(20px); }
  .feature-story-copy { padding:24px 18px 18px; }
  .feature-story-copy h2 { font-size:42px; }
  .feature-story-copy > p { font-size:13px; }
  .feature-example-card,.feature-result-card { width:100%; margin:14px 0 0; }
  .feature-story-main { padding:14px; }
  .feature-story-stage,.story-scene { min-height:410px; }
  .feature-story-controls { align-items:flex-start; flex-direction:column; }
  .story-play-button { width:100%; }
  .story-step-explanation { grid-template-columns:1fr; gap:10px; }
  .chat-story-scene { grid-template-columns:1fr; grid-template-rows:auto 110px auto; gap:12px; }
  .story-chat-bubble { max-width:86%; }
  .story-chat-bubble.user { justify-self:end; }
  .story-chat-bubble.assistant { justify-self:start; }
  .story-context-fan { width:180px; top:50%; }
  .story-context-fan article { min-width:105px; padding:8px; }
  .story-context-fan article:nth-child(1) { left:-70px; top:-92px; }
  .story-context-fan article:nth-child(2) { right:-70px; top:-86px; }
  .story-context-fan article:nth-child(3) { left:40px; top:66px; }
  .task-story-scene { grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  .task-plan-card { grid-row:auto; grid-column:auto; }
  .knowledge-map { height:230px; }
  .knowledge-map .source { width:100px; }
  .learning-story-scene { grid-template-columns:1fr; grid-template-rows:auto; }
  .learning-proposal { grid-column:auto; }
}

