/* assets/style.css — Dark theme UI for BlackKiteAI (PHP version) */
:root{
  --bg-1:#0b1220; --bg-2:#0a0f1a; --bg-3:#05070b;
  --text:#e5e7eb; --muted:#94a3b8;
  --card:rgba(15,23,42,0.85); --border:#222; --shadow:0 10px 30px rgba(0,0,0,0.35);
  --primary:#0ea5e9; --accent:#f43f5e;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; height:100vh; color:var(--text);
  background: radial-gradient(ellipse at top, var(--bg-1) 0%, var(--bg-3) 100%);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  display:flex; align-items:stretch; justify-content:center; overflow:hidden;
}
.hidden{ display:none !important; }

/* Welcome landing */
.welcome{ position:absolute; inset:0; overflow:auto; padding:48px 24px; display:flex; flex-direction:column; align-items:center; gap:28px; }
.welcome-title{ font-size:64px; line-height:1; margin:12px 0 8px; background:linear-gradient(90deg,#22d3ee,#60a5fa); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; text-align:center; }
.cards{ width:100%; max-width:1280px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); padding:24px; display:flex; flex-direction:column; gap:14px; }
.card h3{ margin:0; font-size:22px; }
.card p{ margin:0 0 8px; color:var(--muted); }
.cta{ display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:12px; font-weight:700; color:white; background:linear-gradient(90deg,#06b6d4,#3b82f6); text-decoration:none; border:none; cursor:pointer; }
@media (max-width: 900px){ .cards{ grid-template-columns:1fr; } .welcome-title{ font-size:44px; } }
.container{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  width:100vw; height:100vh; max-width:1400px; padding:18px;
}
.panel{ background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; height:100%; padding:18px; min-width:0; }
.panel-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.video{ flex:1 1 auto; min-height:140px; border-radius:12px; background:linear-gradient(135deg,#0b1220,#0f172a);
  display:grid; place-items:center; color:#94a3b8; margin-bottom:12px; border:1px solid var(--border); font-size:1.1rem; }
.controls{ display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.transcript{ flex:1 1 auto; min-height:0; overflow:auto; background:#0b1220; color:var(--text);
  border:1px solid var(--border); border-radius:12px; padding:12px; font-size:15px; }
.chat{ flex:1 1 auto; min-height:0; overflow:auto; background:#0b1220; color:var(--text);
  border:1px solid var(--border); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:10px; }
.msg{ display:flex; gap:10px; align-items:flex-start; }
.msg.me{ justify-content:flex-end; }
.bubble{ max-width:70%; padding:10px 12px; border-radius:12px; background:#111827; color:var(--text); border:1px solid var(--border); }
.bubble.me{ background:#1f2937; }
.avatar{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#111827; color:white; font-size:14px; }
.inputbar{ display:flex; gap:10px; align-items:center; margin-top:12px; }
.textbox{ flex:1; border:1px solid var(--border); border-radius:12px; padding:10px 12px; outline:none; font-size:14px; background:#0b1220; color:var(--text); }
.btn{ appearance:none; border:none; padding:10px 14px; border-radius:10px; font-weight:600; cursor:pointer; background:var(--primary); color:white; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
@media (max-width: 900px){ .container{ grid-template-columns:1fr; grid-template-rows:1fr 1fr; } }

/* Split layout inside left panel: video + controls on the left, transcript on the right */
.split{ display:flex; gap:12px; flex:1 1 auto; min-height:0; }
.split-left{ display:flex; flex-direction:column; flex:3 1 0; min-width:0; }
.split-right{ display:flex; flex-direction:column; flex:2 1 0; min-width:0; }
.split-right .transcript{ margin-top:0; }