/* Studio Pro AI Agent — shared styles */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0e1120;
  --panel: #171b2e;
  --panel-2: #1e2340;
  --border: #2a3154;
  --text: #eef0ff;
  --muted: #9aa3c7;
  --brand: #7c5cff;
  --brand-2: #4ea8ff;
  --ok: #35d07f;
}
html, body { height: 100%; }
body {
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(1200px 600px at 70% -10%, #241a4a 0%, var(--bg) 55%);
  color: var(--text);
  display: flex; flex-direction: column;
}
.app { display: flex; flex: 1; min-height: 0; }
.sidebar {
  width: 230px; background: var(--panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 18px 14px; flex-shrink: 0;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; margin-bottom: 22px; }
.brand .logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); display: grid; place-items: center; font-size: 17px; }
.brand small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; }
.chip { font-size: 12px; color: var(--muted); }
.spacer { flex: 1; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.chat { flex: 1; overflow-y: auto; padding: 22px 26px; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 78%; padding: 11px 15px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: break-word; }
.msg.user { align-self: flex-end; background: var(--brand); border-bottom-right-radius: 4px; }
.msg.agent { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.msg.err { align-self: flex-start; background: #3a1d28; border: 1px solid #6b2c3d; color: #ffc2cd; }
.msg .who { display:block; font-size: 10.5px; color: var(--muted); margin-bottom: 4px; letter-spacing: .04em; text-transform: uppercase; }
.msg.typing { color: var(--muted); }
.typing::after { content: ''; animation: dots 1.2s steps(4, end) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.msg code { background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 5px; font-size: 12px; }
.msg b { color: #fff; }

.composer { border-top: 1px solid var(--border); background: var(--panel); padding: 14px 26px; display: flex; gap: 10px; align-items: flex-end; }
.composer textarea {
  flex: 1; resize: none; background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 12px; padding: 12px 14px; font: inherit; min-height: 48px; max-height: 160px; outline: none;
}
.composer textarea:focus { border-color: var(--brand); }
.composer button {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border: 0; border-radius: 12px;
  padding: 12px 20px; font-weight: 600; cursor: pointer; height: 48px;
}
.composer button:disabled { opacity: .5; cursor: not-allowed; }
.hint { font-size: 11px; color: var(--muted); padding: 0 26px 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }