/* AI module redesign. Loaded by the five AI modules so unrelated pages stay untouched. */
:root {
  --ai-panel: rgba(10, 19, 21, .82);
  --ai-panel-strong: rgba(9, 15, 17, .94);
  --ai-edge: rgba(158, 225, 210, .16);
  --ai-line: rgba(99, 179, 237, .26);
  --ai-mint: #42d9ab;
  --ai-ice: #86d7ff;
  --ai-coral: #ff806b;
}

body[data-active-module^="ai-"] #module-content {
  max-width: 1480px;
  margin: 0 auto;
}

body[data-active-module^="ai-"] #module-content :is(button, select, textarea, input) {
  border-radius: 5px;
}

body[data-active-module^="ai-"] #module-content :is(.ai-image-container, .ai-video-container, .ai-tts-container, .vision-container, .ai-chat-container) {
  position: relative;
  isolation: isolate;
}

body[data-active-module^="ai-"] #module-content :is(.ai-image-container, .ai-video-container, .ai-tts-container, .vision-container)::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 400px;
  height: 220px;
  top: 54px;
  right: 2%;
  opacity: .4;
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(134, 215, 255, .14) 23px 24px), linear-gradient(120deg, transparent 0 49%, rgba(66, 217, 171, .34) 50%, transparent 51%);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 80%, transparent);
  pointer-events: none;
}

/* Shared command materials */
body[data-active-module^="ai-"] #module-content :is(.image-form, .video-form, .tts-form, .vision-header, .upload-area, .image-results, .video-results, .tts-results, .vision-results, .chat-messages, .chat-input-area) {
  border: 1px solid var(--ai-edge);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(255,255,255,.055), transparent 35%), var(--ai-panel);
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 20px 52px rgba(0,0,0,.2);
  backdrop-filter: blur(18px) saturate(120%);
}

body[data-active-module^="ai-"] #module-content :is(.image-form, .video-form, .tts-form) :is(textarea, select),
body[data-active-module^="ai-"] #module-content .vision-input-area textarea,
body[data-active-module="ai-chat"] #module-content #chat-input {
  background: rgba(2, 8, 10, .66);
  border-color: rgba(134, 215, 255, .18);
  color: var(--text-primary);
}

body[data-active-module^="ai-"] #module-content :is(.image-form, .video-form, .tts-form) :is(textarea, select):focus,
body[data-active-module^="ai-"] #module-content .vision-input-area textarea:focus,
body[data-active-module="ai-chat"] #module-content #chat-input:focus {
  border-color: var(--ai-mint);
  box-shadow: 0 0 0 3px rgba(66,217,171,.11);
}

body[data-active-module^="ai-"] #module-content .generate-btn,
body[data-active-module^="ai-"] #module-content .upload-btn,
body[data-active-module^="ai-"] #module-content .btn-primary {
  border: 1px solid rgba(173,245,227,.42);
  background: linear-gradient(105deg, #127a65, #31cfa2 50%, #61b4de);
  color: #03110e;
  font-weight: 750;
  box-shadow: 0 8px 25px rgba(45,212,163,.2);
}

body[data-active-module^="ai-"] #module-content .generate-btn:hover,
body[data-active-module^="ai-"] #module-content .upload-btn:hover,
body[data-active-module^="ai-"] #module-content .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }

body[data-active-module^="ai-"] #module-content :is(.prompt-templates, .quick-prompts) {
  padding: 10px 0;
  margin: 0;
  background: transparent;
  border: 0;
}

body[data-active-module^="ai-"] #module-content :is(.template-btn, .quick-btn) {
  border: 1px solid rgba(134,215,255,.22);
  border-radius: 4px;
  background: rgba(99,179,237,.07);
  color: var(--ai-ice);
}

body[data-active-module^="ai-"] #module-content :is(.template-btn, .quick-btn):hover { background: rgba(66,217,171,.12); border-color: var(--ai-mint); color: #c5fff0; transform: none; }

/* Conversation deck: a persistent terminal, not a generic card. */
body[data-active-module="ai-chat"] .ai-chat-container {
  max-width: 1260px;
  min-height: calc(100vh - 138px);
  height: calc(100vh - 118px);
  padding: 22px 30px 18px;
  display: grid;
  grid-template-columns: 240px minmax(0,1fr);
  grid-template-rows: auto 1fr auto;
  gap: 12px 18px;
}
body[data-active-module="ai-chat"] .chat-header {
  grid-column: 1 / -1;
  padding: 0 0 16px;
  margin: 0;
  border-bottom-color: var(--ai-edge);
}
body[data-active-module="ai-chat"] .chat-header::before { content: "NEURAL LINK / 02"; color: var(--ai-mint); font: 11px/1.2 ui-monospace, monospace; letter-spacing: .08em; }
body[data-active-module="ai-chat"] .header-left h2 { color: var(--text-primary); -webkit-text-fill-color: currentColor; background: none; font-size: 24px; margin: 6px 0 2px; }
body[data-active-module="ai-chat"] .quick-prompts { grid-column: 1; grid-row: 2; align-content: start; display: grid; gap: 8px; padding: 15px; border: 1px solid var(--ai-edge); border-radius: 7px; background: var(--ai-panel); }
body[data-active-module="ai-chat"] .quick-label { color: var(--ai-mint); margin-bottom: 5px; }
body[data-active-module="ai-chat"] .quick-btn { width: 100%; text-align: left; padding: 9px 10px; }
body[data-active-module="ai-chat"] .chat-main { grid-column: 2; grid-row: 2; min-height: 0; }
body[data-active-module="ai-chat"] .chat-messages { height: 100%; min-height: 0; margin: 0; padding: 28px clamp(18px,4vw,58px); background-image: linear-gradient(rgba(134,215,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(134,215,255,.025) 1px, transparent 1px); background-size: 28px 28px; }
body[data-active-module="ai-chat"] .chat-input-area { grid-column: 2; grid-row: 3; padding: 10px 12px; margin: 0; }
body[data-active-module="ai-chat"] .input-wrapper { gap: 8px; }
body[data-active-module="ai-chat"] #chat-input { min-height: 46px; padding: 12px 14px; resize: none; }
body[data-active-module="ai-chat"] .send-btn { width: 46px; height: 46px; border: 1px solid var(--ai-mint); border-radius: 5px; background: var(--ai-mint); color: #04231b; }
body[data-active-module="ai-chat"] .chat-welcome .welcome-icon { font-size: 52px; filter: drop-shadow(0 0 22px rgba(134,215,255,.4)); }
body[data-active-module="ai-chat"] .welcome-models .model-tag { border-radius: 4px; color: var(--ai-ice); background: rgba(99,179,237,.08); border-color: var(--ai-line); }
body[data-active-module="ai-chat"] .chat-message .message-avatar { border-radius: 5px; background: rgba(99,179,237,.12); box-shadow: none; font-size: 17px; }
body[data-active-module="ai-chat"] .chat-message.user .message-body { background: rgba(22,119,97,.14); border-radius: 5px; }
body[data-active-module="ai-chat"] .chat-message.assistant .message-body { background: rgba(12,24,29,.84); border-radius: 5px; }

/* Image workbench: control bay on the left, proof wall on the right. */
body[data-active-module="ai-image"] .ai-image-container { max-width: 1340px; padding: 24px 30px; display: grid; grid-template-columns: minmax(0,1.12fr) minmax(330px,.88fr); gap: 16px 24px; align-items: start; }
body[data-active-module="ai-image"] .image-header { grid-column: 1/-1; text-align: left; padding: 5px 0 12px; margin: 0; border-bottom: 1px solid var(--ai-edge); }
body[data-active-module="ai-image"] .image-header h2, body[data-active-module="ai-video"] .video-header h2, body[data-active-module="ai-tts"] .tts-header h2 { -webkit-text-fill-color: currentColor; background: none; color: var(--text-primary); letter-spacing: 0; }
body[data-active-module="ai-image"] .image-header::before { content:"IMAGE FORGE / PROMPT MATRIX"; color:var(--ai-coral); font:11px ui-monospace,monospace; letter-spacing:.08em; }
body[data-active-module="ai-image"] .prompt-templates { grid-column: 1/-1; }
body[data-active-module="ai-image"] .image-form { grid-column: 1; margin:0; padding: 22px; border-top: 2px solid var(--ai-mint); }
body[data-active-module="ai-image"] .image-results { grid-column: 2; margin:0; min-height: 490px; padding: 22px; border-top: 2px solid var(--ai-coral); position: sticky; top: 76px; }
body[data-active-module="ai-image"] .image-results .results-header { margin: 0 0 18px; }
body[data-active-module="ai-image"] .image-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
body[data-active-module="ai-image"] .image-empty { min-height: 400px; display:grid; place-content:center; background: linear-gradient(135deg,rgba(255,128,107,.09),transparent 55%); border:1px dashed rgba(255,128,107,.32); border-radius:5px; text-align:center; }
body[data-active-module="ai-image"] .style-option { border-radius: 4px; }
body[data-active-module="ai-image"] .style-option:has(input:checked) { background:rgba(66,217,171,.12); border-color:var(--ai-mint); color:#bffff0; }

/* Video control room: timeline controls and a cinematic output viewport. */
body[data-active-module="ai-video"] .ai-video-container { max-width: 1340px; padding: 24px 30px; display: grid; grid-template-columns: minmax(340px,.88fr) minmax(0,1.12fr); gap: 16px 24px; align-items:start; }
body[data-active-module="ai-video"] .video-header { grid-column:1/-1; text-align:left; margin:0; padding:5px 0 12px; border-bottom:1px solid var(--ai-edge); }
body[data-active-module="ai-video"] .video-header::before { content:"MOTION BAY / SEQUENCE CONTROL"; color:var(--ai-ice); font:11px ui-monospace,monospace; letter-spacing:.08em; }
body[data-active-module="ai-video"] .video-type-tabs { grid-column:1/-1; margin:0; padding:0; background:transparent; border-radius:0; justify-content:flex-start; }
body[data-active-module="ai-video"] .type-tab { flex:0 1 190px; border-radius:4px; justify-content:flex-start; background:rgba(99,179,237,.045); border-color:var(--ai-edge); }
body[data-active-module="ai-video"] .type-tab.active { background:rgba(99,179,237,.13); border-color:var(--ai-ice); color:#d5f3ff; }
body[data-active-module="ai-video"] .prompt-templates { grid-column:1/-1; }
body[data-active-module="ai-video"] .video-form { grid-column:1; margin:0; padding:22px; border-top:2px solid var(--ai-ice); }
body[data-active-module="ai-video"] .video-results { grid-column:2; grid-row:3 / span 2; margin:0; padding:22px; min-height:486px; border-top:2px solid var(--ai-coral); }
body[data-active-module="ai-video"] .video-results .results-header { margin:0 0 18px; }
body[data-active-module="ai-video"] .video-grid { grid-template-columns:1fr; }
body[data-active-module="ai-video"] .video-empty { min-height:390px; display:grid; place-content:center; text-align:center; border:1px dashed rgba(134,215,255,.32); background:linear-gradient(145deg,rgba(99,179,237,.12),transparent 54%); border-radius:5px; }
body[data-active-module="ai-video"] .generation-progress { grid-column:1; margin:0; padding:16px; border:1px solid var(--ai-edge); border-radius:5px; background:var(--ai-panel); }

/* Voice station: a compact control surface with an oscillograph archive. */
body[data-active-module="ai-tts"] .ai-tts-container { max-width:1320px; padding:24px 30px; display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,.8fr); gap:16px 24px; align-items:start; }
body[data-active-module="ai-tts"] .tts-header { grid-column:1/-1; text-align:left; margin:0; padding:5px 0 12px; border-bottom:1px solid var(--ai-edge); }
body[data-active-module="ai-tts"] .tts-header::before { content:"VOICE DECK / SYNTHESIS NODE"; color:var(--ai-coral); font:11px ui-monospace,monospace; letter-spacing:.08em; }
body[data-active-module="ai-tts"] .prompt-templates { grid-column:1/-1; }
body[data-active-module="ai-tts"] .tts-form { grid-column:1; margin:0; padding:22px; border-top:2px solid var(--ai-coral); }
body[data-active-module="ai-tts"] .tts-results { grid-column:2; grid-row:3 / span 2; margin:0; min-height:485px; padding:22px; border-top:2px solid var(--ai-mint); }
body[data-active-module="ai-tts"] .results-header { margin:0 0 18px; }
body[data-active-module="ai-tts"] .tts-empty { min-height:390px; display:grid; place-content:center; text-align:center; border:1px dashed rgba(66,217,171,.3); border-radius:5px; background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(66,217,171,.035) 23px 24px); }
body[data-active-module="ai-tts"] .tts-player { grid-column:1; margin:0; border-radius:5px; border-color:var(--ai-mint); background:var(--ai-panel); }
body[data-active-module="ai-tts"] .audio-play-btn { border-radius:5px; background:var(--ai-mint); color:#06251d; }
body[data-active-module="ai-tts"] .audio-waveform .bar { border-radius:1px; background:linear-gradient(to top,var(--ai-mint),var(--ai-ice)); }

/* Vision lab: large ingest surface with live analysis ledger. */
body[data-active-module="ai-vision"] .vision-container { max-width:1340px; padding:24px 30px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr); gap:16px 24px; align-items:start; }
body[data-active-module="ai-vision"] .vision-header { grid-column:1/-1; padding:15px 0; margin:0; background:transparent; border:0; border-bottom:1px solid var(--ai-edge); border-radius:0; box-shadow:none; }
body[data-active-module="ai-vision"] .vision-header::before { content:"SPECTRUM LAB / VISUAL INTAKE"; position:absolute; top:-1px; left:0; color:var(--ai-ice); font:11px ui-monospace,monospace; letter-spacing:.08em; transform:translateY(-18px); }
body[data-active-module="ai-vision"] .header-left h2 { margin-top:5px; background:none; -webkit-text-fill-color:currentColor; color:var(--text-primary); }
body[data-active-module="ai-vision"] .scenario-tabs { grid-column:1/-1; margin:0; }
body[data-active-module="ai-vision"] .scenario-tab { min-width:0; flex:1 1 150px; border-radius:4px; background:rgba(99,179,237,.045); border-color:var(--ai-edge); }
body[data-active-module="ai-vision"] .scenario-tab.active { border-color:var(--ai-ice); background:rgba(99,179,237,.12); }
body[data-active-module="ai-vision"] .upload-area { grid-column:1; margin:0; min-height:330px; display:grid; place-content:center; border:1px dashed var(--ai-ice); border-radius:5px; background:linear-gradient(135deg,rgba(99,179,237,.13),transparent 55%),var(--ai-panel); }
body[data-active-module="ai-vision"] .upload-area::before { content:"DROP ZONE  /  IMAGE SIGNAL INTAKE"; color:var(--ai-ice); font:11px ui-monospace,monospace; letter-spacing:.09em; }
body[data-active-module="ai-vision"] .vision-results { grid-column:2; grid-row:3 / span 3; min-height:500px; margin:0; padding:22px; border-top:2px solid var(--ai-ice); }
body[data-active-module="ai-vision"] .vision-results h3 { margin-top:0; color:var(--text-primary); }
body[data-active-module="ai-vision"] .vision-input-area { grid-column:1; margin:0; padding:10px; }
body[data-active-module="ai-vision"] .send-btn { width:46px; border-radius:5px; background:var(--ai-mint); color:#06251d; }
body[data-active-module="ai-vision"] .image-preview, body[data-active-module="ai-vision"] .analyzing-progress { grid-column:1; }

@media (max-width: 920px) {
  body[data-active-module="ai-chat"] .ai-chat-container { height:auto; min-height:calc(100vh - 90px); grid-template-columns:1fr; grid-template-rows:auto auto minmax(380px,1fr) auto; padding:16px; }
  body[data-active-module="ai-chat"] .quick-prompts { grid-column:1; grid-row:2; grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-active-module="ai-chat"] .quick-label { grid-column:1/-1; }
  body[data-active-module="ai-chat"] .chat-main { grid-column:1; grid-row:3; min-height:380px; }
  body[data-active-module="ai-chat"] .chat-input-area { grid-column:1; grid-row:4; }
  body[data-active-module="ai-image"] .ai-image-container, body[data-active-module="ai-video"] .ai-video-container, body[data-active-module="ai-tts"] .ai-tts-container, body[data-active-module="ai-vision"] .vision-container { grid-template-columns:1fr; padding:18px; }
  body[data-active-module="ai-image"] .image-form, body[data-active-module="ai-image"] .image-results, body[data-active-module="ai-video"] .video-form, body[data-active-module="ai-video"] .video-results, body[data-active-module="ai-tts"] .tts-form, body[data-active-module="ai-tts"] .tts-results, body[data-active-module="ai-vision"] .upload-area, body[data-active-module="ai-vision"] .vision-results, body[data-active-module="ai-vision"] .vision-input-area { grid-column:1; grid-row:auto; position:static; min-height:0; }
}

@media (max-width: 600px) {
  body[data-active-module^="ai-"] #module-content :is(.ai-image-container,.ai-video-container,.ai-tts-container,.vision-container) { padding:14px; gap:12px; }
  body[data-active-module="ai-chat"] .header-actions { gap:6px; max-width:55%; flex-wrap:wrap; justify-content:flex-end; }
  body[data-active-module="ai-chat"] .model-select, body[data-active-module="ai-chat"] .persona-select { min-width:0; max-width:132px; padding:8px; }
  body[data-active-module="ai-chat"] .quick-prompts { grid-template-columns:1fr 1fr; padding:10px; }
  body[data-active-module="ai-chat"] .chat-messages { padding:18px 12px; }
  body[data-active-module="ai-image"] .image-grid { grid-template-columns:1fr; }
  body[data-active-module="ai-video"] .type-tab { flex:1 1 42%; padding:10px; }
  body[data-active-module="ai-video"] .type-name { font-size:12px; }
  body[data-active-module="ai-vision"] .vision-header { align-items:flex-start; gap:10px; }
  body[data-active-module="ai-vision"] .header-actions { max-width:50%; flex-wrap:wrap; justify-content:flex-end; }
}