/* Cockpit: orbe + chat ao centro, módulos nos flancos. */

body[data-route="cockpit"] .view { padding: 0; }

.cockpit {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "center";
  height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top));
  padding: 0 var(--gutter);
}
/* Halo do orbe vazando para os flancos. */
.cockpit::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(45% 38% at 50% 26%, var(--accent-soft), transparent 70%);
  opacity: 0.8;
  transition: opacity var(--t-slow) var(--ease);
}
.cockpit.has-messages::before { opacity: 0.35; }

.cockpit-core {
  grid-area: center;
  position: relative; z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0; min-height: 0;
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
}

/* Palco do orbe: anel orbital com marcas de escala, o orbe e o rótulo. */
.orb-stage {
  display: grid; place-items: center; gap: 10px;
  padding: var(--s-5) 0 var(--s-3);
  transition: padding var(--t-slow) var(--ease), gap var(--t-slow) var(--ease);
}
.orb-wrap { position: relative; display: inline-grid; place-items: center; }
.orb-wrap .orb--hero { --orb-size: clamp(240px, 36vmin, 390px); }
.orb-dial {
  position: absolute;
  width: 134%; height: 134%;
  fill: none;
  pointer-events: none;
  opacity: 0.9;
  transition: opacity var(--t-slow) var(--ease);
}
.dial-ring { stroke: var(--border); stroke-width: 0.4; }
.dial-ticks { stroke: var(--border-strong); stroke-width: 1.2; stroke-dasharray: 0.5 4.527; }
.dial-arc { stroke: var(--accent-2); stroke-width: 0.8; stroke-dasharray: 46 255.6; stroke-linecap: round;
  transform-origin: 50% 50%; animation: dial-spin 40s linear infinite; opacity: 0.8; }
@keyframes dial-spin { to { transform: rotate(360deg); } }
.cockpit[data-state="thinking"] .dial-arc { animation-duration: 3s; stroke: var(--accent-3); }
.cockpit[data-state="listening"] .dial-arc { animation-duration: 12s; stroke: var(--accent-4); }
.cockpit[data-state="speaking"] .dial-arc { animation-duration: 8s; }
.cockpit[data-state="error"] .dial-arc { stroke: var(--danger); }

/* Com mensagens o orbe encolhe e cola no topo da coluna; nunca some. */
.cockpit.has-messages .orb-stage { padding: var(--s-2) 0 var(--s-1); gap: 4px; }
.cockpit.has-messages .orb-wrap .orb--hero { --orb-size: clamp(160px, 24vmin, 260px); }
.cockpit.has-messages .orb-dial { opacity: 0.5; }
.cockpit.has-messages .orb-label { min-height: 14px; }

.cockpit-chat { min-height: 0; display: flex; flex-direction: column; }

/* Flancos: escondidos até ter espaço para as três colunas (o painel lateral
   e a folha inferior cuidam dos tamanhos menores). */
.cockpit-flank { display: none; }

@media (min-width: 1100px) {
  .cockpit {
    grid-template-columns: minmax(280px, var(--flank-w)) minmax(var(--center-min), 1fr) minmax(280px, var(--flank-w));
    grid-template-areas: "left center right";
    gap: var(--s-4);
  }
  .cockpit-core { max-width: none; }
  .cockpit-flank {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: var(--s-3);
    min-height: 0;
    overflow: auto;
    scrollbar-gutter: stable;
    padding-block: var(--s-3) var(--s-6);
  }
  /* Os dois flancos começam na mesma linha. */
  .cockpit-flank.left { grid-area: left; }
  .cockpit-flank.right { grid-area: right; }
  /* Linhas-guia ligando o centro aos flancos. */
  .cockpit-flank::before {
    content: "";
    position: absolute; top: var(--s-3); bottom: var(--s-6);
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--border-strong) 20%, var(--border-strong) 80%, transparent);
    opacity: 0.6;
  }
  .cockpit-flank.left::before { right: calc(var(--s-4) * -0.5); }
  .cockpit-flank.right::before { left: calc(var(--s-4) * -0.5); }
}
@media (min-width: 1700px) {
  :root { --flank-w: 380px; --center-min: 620px; }
}

/* Celular: o rodapé do chat fica acima do dock. */
@media (max-width: 719px) {
  .cockpit { padding: 0 var(--s-3); }
  .cockpit .chat-foot { padding-bottom: calc(var(--dock-h) + var(--s-4) + env(safe-area-inset-bottom)); }
  .orb-stage { padding-top: var(--s-4); }
}

@media (prefers-reduced-motion: reduce) {
  .dial-arc { animation: none; }
}

/* ---- Módulos ------------------------------------------------------------- */
.module {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1), var(--glow-inset);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  padding: var(--s-3);
  transition: border-color var(--t-base), transform var(--t-base) var(--ease-hud);
}
.module:hover { border-color: var(--border-strong); transform: translateY(-1px); }
/* Traço do chanfro. */
.module::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: var(--notch); height: var(--notch);
  background: linear-gradient(45deg, transparent 47%, var(--border-strong) 47%, var(--border-strong) 53%, transparent 53%);
  pointer-events: none;
}
.module-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); padding-right: var(--notch); }
.module-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px currentColor; color: var(--accent); flex: none; }
.module[data-tone="ok"] .module-dot { background: var(--ok); color: var(--ok); }
.module[data-tone="warn"] .module-dot { background: var(--warn); color: var(--warn); }
.module[data-tone="error"] .module-dot { background: var(--danger); color: var(--danger); }
.module[data-tone="idle"] .module-dot { background: var(--faint); box-shadow: none; }
.module-label { font: 600 var(--fs-xs)/1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); margin: 0; }
.module-count { margin-left: auto; color: var(--accent-2); font-size: var(--fs-xs); }
.module-open { color: var(--muted); opacity: 0.55; font-size: 14px; line-height: 1; transition: opacity var(--t-fast), color var(--t-fast); }
.module-open:hover { opacity: 1; color: var(--accent-3); text-decoration: none; }
.module-body { font-size: var(--fs-sm); }

.module-item { display: flex; gap: var(--s-2); align-items: baseline; padding: 6px 0; border-top: 1px solid var(--border); min-width: 0; }
.module-item:first-child { border-top: 0; }
.module-item .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-item .when { font-family: var(--font-mono); color: var(--accent-4); font-size: var(--fs-xs); white-space: nowrap; flex: none; }
.module-item .tag { flex: none; }
.module-link { color: var(--text); display: flex; flex-direction: column; gap: 1px; }
.module-link:hover { text-decoration: none; color: var(--accent-2); }
.module-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-sub { color: var(--faint); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-group { font: 600 10px/1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--faint); margin: 8px 0 2px; }
.module-group:first-child { margin-top: 0; }
.module-block { font: 600 var(--fs-xs)/1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-2); margin: 12px 0 2px; padding-bottom: 4px; border-bottom: 1px solid var(--border-strong); }
.module-block:first-child { margin-top: 0; }
.module-block + .module-group { margin-top: 6px; }
.module-note { font: 500 var(--fs-xs)/1.4 var(--font-mono); color: var(--faint); margin-bottom: 4px; }
.module-text { color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
.module-clip { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.module-empty, .module-error { font: 500 var(--fs-xs)/1.5 var(--font-mono); color: var(--faint); padding: 4px 0; }
.module-error { color: var(--danger); display: flex; align-items: center; gap: 8px; }
.module-retry { background: transparent; border: 1px solid var(--danger); color: var(--danger); border-radius: var(--radius-sm); padding: 0 6px; cursor: pointer; }

.module-action { flex-direction: column; align-items: stretch; gap: 6px; }
.module-preview { color: var(--muted); font: 12px/1.4 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.module-buttons { display: flex; gap: 6px; }

.module-stats { display: flex; gap: var(--s-4); margin-top: 6px; }
.module-stats b { display: block; font: 600 var(--fs-h2)/1.1 var(--font-display); letter-spacing: var(--ls-tight); color: var(--accent-2); }
.module-stats span { font: 500 10px/1.3 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--faint); }
.spark { width: 100%; height: 44px; display: block; }
.spark-area { fill: var(--accent-soft); }
.spark-line { fill: none; stroke: var(--accent-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.spark-dot { fill: var(--accent-3); }

/* Carregando: três barras que cintilam. */
.module-skeleton { display: grid; gap: 8px; padding: 2px 0; }
.module-skeleton i { display: block; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.module-skeleton i:nth-child(2) { width: 70%; }
.module-skeleton i:nth-child(3) { width: 45%; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .module-skeleton i { animation: none; } }

/* ---- Tablet: painel deslizante ------------------------------------------ */
.drawer-tab, .cockpit-drawer, .sheet-scrim, .cockpit-sheet { display: none; }

@media (min-width: 720px) and (max-width: 1099px) {
  .cockpit { overflow: hidden; }
  .cockpit-drawer {
    display: block;
    position: absolute; top: 0; right: 0; bottom: 0;
    z-index: 4;
    width: min(360px, 80vw);
    overflow: auto;
    padding: var(--s-3) var(--s-3) var(--s-6);
    background: var(--glass-strong);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-left: 1px solid var(--border-strong);
    box-shadow: var(--shadow-2);
    transform: translateX(100%);
    transition: transform var(--t-slow) var(--ease-hud);
  }
  .drawer-modules { display: flex; flex-direction: column; gap: var(--s-3); }
  .cockpit.drawer-open .cockpit-drawer { transform: translateX(0); }
  .drawer-tab {
    display: grid; place-items: center;
    position: absolute; right: 0; top: 50%;
    z-index: 5;
    width: 28px; height: 108px;
    transform: translateY(-50%);
    border: 1px solid var(--border-strong); border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--glass-strong);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    color: var(--muted);
    cursor: pointer;
    transition: right var(--t-slow) var(--ease-hud), color var(--t-fast);
  }
  .drawer-tab span { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 10px/1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; }
  .drawer-tab:hover { color: var(--plasma-core); }
  .cockpit.drawer-open .drawer-tab { right: min(360px, 80vw); color: var(--accent-2); }
}

/* ---- Celular: folha inferior --------------------------------------------- */
@media (max-width: 719px) {
  .sheet-scrim {
    display: block;
    position: fixed; inset: 0;
    z-index: 6;
    background: rgba(2, 3, 10, 0.55);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-slow) var(--ease);
  }
  .cockpit.sheet-open .sheet-scrim { opacity: 1; pointer-events: auto; }
  .cockpit-sheet {
    --sheet: 0;
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 7;
    height: 92dvh;
    transform: translateY(calc(100% - var(--sheet) * 100dvh));
    transition: transform var(--t-slow) var(--ease-hud);
    background: var(--glass-strong);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-top: 1px solid var(--border-strong);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-2);
    overscroll-behavior: contain;
    touch-action: none;
  }
  .cockpit-sheet.no-anim { transition: none; }
  .cockpit-sheet[aria-hidden="true"] { pointer-events: none; }
  .sheet-grip {
    flex: none;
    display: grid; place-items: center; gap: 4px;
    padding: 10px 0 6px;
    background: transparent; border: 0; color: var(--faint);
    cursor: grab; touch-action: none;
    pointer-events: auto;
  }
  .sheet-grip i { display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--border-strong); }
  .sheet-grip span { font: 600 10px/1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; }
  .sheet-modules { flex: 1; min-height: 0; overflow: auto; padding: var(--s-2) var(--s-3) calc(var(--dock-h) + var(--s-6) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--s-3); touch-action: pan-y; }
  /* O puxador fica sempre visível acima do dock, mesmo com a folha fechada. */
  .cockpit-sheet[aria-hidden="true"] { transform: translateY(calc(100% - var(--dock-h) - var(--s-4) - env(safe-area-inset-bottom) - 44px)); }
  .cockpit-sheet[aria-hidden="true"] .sheet-modules { visibility: hidden; }
  .cockpit .chat-foot { padding-bottom: calc(var(--dock-h) + var(--s-4) + env(safe-area-inset-bottom) + 40px); }
}