/* MolGate unified AI sidebar — match Module 3 (stop / clear / stream) */
.mg-ai-sidebar {
  flex: 1;
  min-width: 300px;
  max-width: min(480px, 38vw);
  width: 34%;
  border-left: 1px solid var(--border);
  background: #0a0c12;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
html[data-theme="light"] .mg-ai-sidebar { background: var(--surface); }

.mg-ai-head {
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mg-ai-head h2 {
  font-size: 14px;
  font-weight: 500;
  font-family: var(--mono);
  color: var(--blue);
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}
.mg-ai-opts {
  margin-top: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  font-size: 13px;
  color: var(--text2);
}
.mg-ai-opts label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.mg-ai-opts input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blue); }

.mg-ai-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 120px;
}
.mg-ai-static { display: flex; flex-direction: column; gap: 0.75rem; flex-shrink: 0; }
.mg-ai-static .mg-ai-hint-box {
  font-size: 14px;
  color: var(--text3);
  background: var(--surface2);
  border-radius: 6px;
  padding: 0.75rem;
  line-height: 1.65;
}
.mg-ai-static .mg-ai-hint-box b { color: var(--text2); }
.mg-ai-static .mg-ai-ctx {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text3);
  line-height: 1.5;
}

.mg-ai-messages {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 40px;
}
.mg-ai-msg { display: flex; flex-direction: column; gap: 0.35rem; max-width: 100%; }
.mg-ai-msg.user { align-items: flex-end; }
.mg-ai-msg.assistant { align-items: flex-start; }
.mg-ai-msg.system { align-items: stretch; }
.mg-ai-bubble {
  max-width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.mg-ai-msg.user .mg-ai-bubble { background: var(--blue-dim); border: 1px solid var(--blue); color: var(--text); }
.mg-ai-msg.assistant .mg-ai-bubble { background: var(--surface2); border: 1px solid var(--border2); color: var(--text); }
.mg-ai-msg.system .mg-ai-bubble { background: var(--surface2); border: 1px solid var(--border); color: var(--text2); font-size: 13px; }
.mg-ai-raw {
  margin-top: 0.35rem;
  padding: 0.55rem 0.65rem;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  background: #06080c;
  border: 1px solid var(--border);
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}
.mg-ai-msg .role-lbl {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mg-ai-foot {
  padding: 1rem 1.15rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.mg-ai-input-row { display: flex; gap: 0.5rem; align-items: flex-end; }
#mgAiInput {
  flex: 1;
  min-height: 52px;
  max-height: 160px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--sans);
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text);
  resize: vertical;
}
.mg-ai-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.6rem; }
.mg-ai-actions .btn { min-height: 40px; padding: 8px 14px; font-size: 13px; }
.btn-mg-ai-send {
  background: var(--green);
  color: #000;
  border: 1px solid var(--green);
  font-weight: 600;
  font-family: var(--mono);
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-mg-ai-send:hover:not(:disabled) { filter: brightness(1.08); }
.btn-mg-ai-send:disabled { opacity: 0.35; cursor: not-allowed; }
.mg-ai-foot .mg-ai-foot-hint { font-size: 11px; color: var(--text3); margin-top: 0.45rem; line-height: 1.45; }

/* app-shell layout helper (Module 1–5) */
body[data-molgate-module] .app-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  width: 100%;
  align-items: stretch;
}
.app-shell > .main-col,
.app-shell > .left {
  flex: 2;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.app-shell > .main-col > .main,
.app-shell > .left > .main {
  flex: 1;
  min-height: 0;
}