﻿@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 { grid-template-columns:1fr; padding-bottom:78px; }
  .app-sidebar { display:none; }
  .app-main { padding:22px 18px 28px; }
  .app-rail {
    position:fixed;
    left:12px;
    right:12px;
    bottom:10px;
    top:auto;
    width:auto;
    height:64px;
    z-index:60;
    flex-direction:row;
    padding:8px 10px;
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:var(--shadow);
  }
  .rail-nav { margin:0; flex-direction:row; justify-content:space-around; width:100%; }
  .archive-btn { display:none; }
  .app-top-actions .hide-mobile { display:none; }
  .dashboard-grid { grid-template-columns:1fr; }
  .dashboard-header-card { grid-template-columns:1fr; }
  .metric-block { padding:14px 0 0; border-left:0; border-top:1px solid var(--line); }
  .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:44px; }
  .app-top-actions .btn { min-width:44px; padding:0 12px; }
  .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:760px; }
  .lock-card { padding:26px 22px; }
  .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; }
}

@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 { min-height:calc(100vh - 185px); }
  .conversation-scroll { max-height:none; }
  .conversation-runtime { grid-template-columns:auto minmax(0,1fr) auto; }
  .runtime-state-actions { display:none; }
  .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 { min-height:calc(100vh - 150px); 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; }
  .runtime-orb-button { width:48px; height:48px; }
  .runtime-orb-mini { width:44px; height:44px; }
  .runtime-title-row { display:block; }
  .runtime-title-row strong { font-size:16px; }
  .runtime-title-row > span { margin-top:2px; font-size:10px; }
  .runtime-activity { margin-left:auto; }
  .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; }
  .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; }
}

/* 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; }
}

