/* ============================================================
   E9 — Responsive, Accessibility & Performance
   ============================================================ */

body { padding-bottom: env(safe-area-inset-bottom, 0px); }

@media (min-width: 1920px) { :root { --max-content-w: 900px; --task-sidebar-w: 280px; } }
@media (min-width: 1280px) and (max-width: 1439px) { .app-shell.inspector-visible { --inspector-w: 360px; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --task-sidebar-w: 220px; }
  .app-shell.inspector-visible { --inspector-w: 340px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .app-shell { grid-template-columns: 64px 0px minmax(0, 1fr) 0px; }
  .task-sidebar { position: fixed !important; left: 64px; top: 0; bottom: 0; z-index: 200; transform: translateX(-100%); box-shadow: 4px 0 24px rgba(0,0,0,0.2); }
  .task-sidebar.show { transform: translateX(0); }
  .inspector-root { position: fixed !important; right: 0; top: 0; bottom: 0; width: min(80vw, 380px) !important; z-index: 200; transform: translateX(100%); box-shadow: -4px 0 24px rgba(0,0,0,0.2); }
  .app-shell.inspector-visible .inspector-root { transform: translateX(0); }
}

@media (max-width: 430px) {
  .quick-cards { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .quick-card { min-height: 44px; padding: var(--space-2) var(--space-3); }
  .msg.user .msg-body { max-width: 92%; }
}

@media (max-width: 390px) {
  .gn-item { width: 40px; height: 40px; padding: 0; }
  .gn-item svg { width: 18px; height: 18px; }
  .ts-workspace-name { max-width: 100px; }
  .conv-dropdown { right: 0; left: auto; min-width: 140px; }
}

@media (max-width: 360px) {
  .msg-header { gap: var(--space-1); }
  .msg-avatar { width: 24px; height: 24px; }
  .video-params { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .global-nav { padding-bottom: env(safe-area-inset-bottom, 0px); height: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .main-workspace { height: calc(100dvh - 56px - env(safe-area-inset-bottom, 0px)); }
  .composer-root { padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }
  .modal-content { max-width: 100%; max-height: calc(90dvh - env(safe-area-inset-bottom, 0px)); border-radius: var(--radius-xl) var(--radius-xl) 0 0; margin-top: auto; }
  .modal { align-items: flex-end; }
  ::-webkit-scrollbar { width: 3px; }
}

@media (hover: none) and (pointer: coarse) {
  .gn-item, .gn-logo-btn, .ts-action-btn, .conv-item, .ts-footer-btn,
  .insp-close, .insp-tab, .icon-button-sm, .composer-send-btn,
  .composer-tool-btn, .video-mode-tab, .video-generate-btn,
  .video-action-btn, .conv-menu-btn, .msg-action-btn, .code-copy-btn {
    min-width: 44px; min-height: 44px;
  }
  .conv-actions { opacity: 1; }
}

*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus:not(:focus-visible), input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; top: -100px; left: var(--space-3); z-index: 9999;
  padding: var(--space-2) var(--space-4); background: var(--accent); color: #fff;
  border-radius: var(--radius-sm); font-size: var(--text-sm); text-decoration: none;
  transition: top var(--duration-fast) ease;
}
.skip-link:focus { top: var(--space-3); }

@media (forced-colors: active) {
  .gn-item.active::before, .conv-item.active { forced-color-adjust: none; }
}

.video-player-wrap video { max-height: 60vh; }
@media (max-width: 640px) { .video-player-wrap video { max-height: 40vh; } }

.conv-dropdown { max-height: calc(100vh - 100px); overflow-y: auto; }

@media print {
  .global-nav, .task-sidebar, .inspector-root, .composer-root,
  .welcome-screen, .bg-mesh, .bg-noise, .bg-glow { display: none !important; }
  .main-workspace { height: auto; overflow: visible; }
}