:root{
  --bg:#0b1220;
  --white:#ffffff;
  --card:#0f172a;
  --muted:#64748b;
  --primary:#2563eb;
  --primary-2:#1d4ed8;
  --border:#1e293b;
}
.benhanai{max-width:960px;margin:12px auto;background:#0c111b;color:#e5e7eb;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.35);}
.benhanai a{color:#9ec1ff;text-decoration:none;}
/* Header */
.ba-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#0a0f18;border-bottom:1px solid var(--border);}
.ba-brand{display:flex;gap:10px;align-items:center;}
.ba-brand .logo{font-size:22px}
.ba-brand small{display:block;color:#94a3b8;line-height:1.1}
.ba-actions .btn{margin-left:6px}
/* Tabs for mobile */
.ba-tabs{display:none;border-bottom:1px solid var(--border);}
.ba-tabs .tab{flex:1;padding:10px;border:0;background:transparent;color:#cbd5e1;cursor:pointer}
.ba-tabs .tab.active{border-bottom:2px solid var(--primary);color:#fff}
/* Grid */
.ba-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:10px;padding:10px}
.panel{display:none}
.panel.show{display:block}
/* Chat */
.chat{height:460px;overflow:auto;background:#0b1220;border:1px solid var(--border);border-radius:10px;padding:10px}
.msg{display:flex;align-items:flex-start;gap:8px;margin:8px 0}
.msg .bubble{max-width:90%;padding:10px 12px;border-radius:12px;line-height:1.45;font-size:15px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.msg.me{justify-content:flex-end}
.msg.me .bubble{background:#0e1a34;color:#cde1ff;border:1px solid #1b2b4a}
.msg.ai .bubble{background:#0e141f;color:#e5e7eb;border:1px solid var(--border)}
.msg .copy{align-self:center;border:0;background:#111827;color:#cbd5e1;border-radius:10px;padding:6px 8px;cursor:pointer}
.msg .copy:hover{background:#1f2937}
/* Checklist */
#panel-checklist{background:#0b1220;border:1px solid var(--border);border-radius:10px;padding:10px}
.hpi-head h4{margin:0 0 2px 0}
.hpi-head small{color:#94a3b8}
.hpi-form{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.hpi-row{display:flex;flex-direction:column;gap:6px}
.hpi-row label{color:#cbd5e1;font-size:13px}
.hpi-row input[type=text]{padding:10px;border-radius:10px;border:1px solid var(--border);background:#0a0f18;color:#e5e7eb}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{display:flex;gap:6px;align-items:center;background:#0a0f18;border:1px solid var(--border);padding:6px 8px;border-radius:10px}
.hpi-actions{display:flex;gap:8px;margin-top:6px}
.hpi-output{width:100%;margin-top:6px;padding:10px;border-radius:10px;border:1px solid var(--border);background:#0a0f18;color:#e5e7eb}
/* Composer */
.composer{position:sticky;bottom:0;display:flex;gap:8px;padding:10px;border-top:1px solid var(--border);background:#0a0f18}
.composer textarea{flex:1;resize:none;min-height:42px;max-height:150px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#0b1220;color:#e5e7eb}
/* Buttons */
.btn{border:0;background:var(--primary);color:#fff;padding:9px 14px;border-radius:12px;cursor:pointer}
.btn:hover{background:var(--primary-2)}
.btn.ghost{background:#0b1220;color:#cbd5e1;border:1px solid var(--border)}
.btn.sm{padding:7px 10px;border-radius:10px}
/* Toast */
.ba-toast{position:fixed;bottom:16px;right:16px;background:#111827;color:#fff;padding:10px 12px;border-radius:10px;opacity:0;transform:translateY(8px);transition:all .25s ease;z-index:9999}
.ba-toast.show{opacity:1;transform:translateY(0)}
/* Responsive */
@media (max-width: 900px){
  .ba-grid{grid-template-columns:1fr}
  .ba-tabs{display:flex}
  #panel-checklist{margin-top:0}
  .chat{height:56vh}
}
/* High-contrast focus */
button:focus,textarea:focus,input:focus{outline:2px solid #60a5fa;outline-offset:2px}
/* Screen-reader only */
.sr-only{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Templates */
.ba-templates{display:flex;flex-wrap:wrap;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border);background:#0a0f18}
.chip{border:1px solid var(--border);background:#0b1220;color:#cbd5e1;padding:6px 10px;border-radius:999px;cursor:pointer}
.chip:hover{background:#111827;color:#fff}
@media (max-width: 900px){
  .ba-templates{position:sticky;top:48px;z-index:10;overflow-x:auto}
}
