.wqa-view { color: #f7f4ff; background: radial-gradient(circle at 85% 5%, rgba(119,79,222,.22), transparent 38%), #080b1b; }
.wqa-view * { box-sizing: border-box; }
.wqa-header { padding: 24px clamp(18px,4vw,38px) 22px; background: linear-gradient(130deg,rgba(57,34,120,.78),rgba(12,18,48,.9)); border-bottom: 1px solid rgba(188,163,255,.2); }
.wqa-header .back { margin: 0 0 23px; }
.wqa-identity { display:flex; align-items:center; gap:17px; }
.wqa-identity img { width:68px; height:68px; object-fit:cover; object-position:center 25%; border-radius:19px; border:1px solid rgba(220,197,255,.55); box-shadow:0 12px 28px rgba(0,0,0,.35); }
.wqa-identity span,.wqa-title span { color:#bfaaff; font-size:10px; letter-spacing:.18em; }
.wqa-identity h1 { margin:5px 0; font-size:clamp(24px,4vw,35px); }
.wqa-identity p { margin:0; font-size:12px; color:#d0cce1; }
.wqa-status { margin:18px 0 0; color:#c9e3df; font-size:11px; }
.wqa-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:8px clamp(12px,3vw,30px); position:sticky; top:0; z-index:5; background:rgba(9,12,29,.96); border-bottom:1px solid rgba(168,137,255,.17); }
.wqa-tabs button { border:0; border-radius:12px; background:transparent; color:#aeb2cf; padding:12px 6px; font-size:12px; cursor:pointer; }
.wqa-tabs button.active { color:#fff; background:linear-gradient(115deg,#633fc6,#303a86); box-shadow:0 6px 20px rgba(88,54,176,.34); }
.wqa-tabs span { display:inline-grid; place-items:center; min-width:17px; height:17px; padding:0 3px; border-radius:20px; background:#d5b3ff; color:#170f2d; font-size:10px; }
.wqa-content { padding:27px clamp(17px,4vw,38px) 22px; }
.wqa-panel { display:none; }
.wqa-panel.active { display:block; }
.wqa-title { display:flex; justify-content:space-between; align-items:end; gap:12px; margin-bottom:18px; }
.wqa-title h2 { font-size:clamp(21px,3vw,29px); margin:7px 0 0; line-height:1.35; }
.wqa-title > button { flex:none; border:1px solid rgba(176,152,255,.33); border-radius:10px; padding:9px 12px; background:rgba(66,48,129,.32); color:#e4ddff; cursor:pointer; }
.wqa-card { border:1px solid rgba(162,141,229,.25); border-radius:19px; background:linear-gradient(140deg,rgba(27,29,67,.88),rgba(12,17,42,.93)); box-shadow:0 14px 40px rgba(0,0,0,.13); }
.wqa-conversation { padding:18px; }
.wqa-messages { display:flex; flex-direction:column; gap:13px; min-height:230px; max-height:400px; overflow-y:auto; padding:5px 2px 15px; }
.wqa-message { max-width:91%; display:flex; flex-direction:column; gap:6px; }
.wqa-message.user { align-self:flex-end; }
.wqa-bubble { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; padding:12px 15px; border-radius:15px; background:rgba(91,72,151,.38); font-size:13px; }
.wqa-message.user .wqa-bubble { background:linear-gradient(120deg,#6542c4,#384d9a); }
.wqa-source { font-size:10px; color:#b6b8d6; line-height:1.5; }
.wqa-source a { color:#c9b4ff; margin-right:7px; }
.wqa-prompts { display:flex; flex-wrap:wrap; gap:7px; margin:8px 0 15px; }
.wqa-prompts button { border:1px solid rgba(159,141,218,.3); border-radius:100px; background:rgba(74,63,125,.22); color:#d9d6ed; font-size:11px; padding:8px 11px; cursor:pointer; }
#wqaChatForm { display:flex; align-items:end; gap:8px; }
#wqaChatForm textarea { flex:1; min-width:0; }
#wqaChatForm button,.wqa-primary { border:0; border-radius:11px; padding:12px 17px; color:#fff; background:linear-gradient(120deg,#8053df,#425db8); font-weight:700; cursor:pointer; }
.wqa-note,.wqa-boundary { color:#a5a9c2; font-size:11px; line-height:1.7; }
.wqa-note { margin:10px 0 0; }
.wqa-metrics { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.wqa-metrics div { padding:14px 16px; background:rgba(32,39,79,.8); border:1px solid rgba(160,145,220,.17); border-radius:13px; display:flex; align-items:center; gap:10px; }
.wqa-metrics strong { color:#d5bbff; font-size:22px; }
.wqa-metrics span { color:#aeb3ce; font-size:11px; }
.wqa-two-col { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.wqa-form,.wqa-capture,.wqa-output,.wqa-queue { padding:21px; }
.wqa-view label { display:block; color:#d3d4e6; font-size:12px; margin-bottom:14px; line-height:1.6; }
.wqa-view input,.wqa-view textarea,.wqa-view select { display:block; width:100%; margin-top:7px; padding:11px 12px; border-radius:10px; border:1px solid rgba(162,153,217,.31); outline:0; color:#fff; background:#101630; font:inherit; font-size:13px; resize:vertical; }
.wqa-view input:focus,.wqa-view textarea:focus,.wqa-view select:focus { border-color:#af94ff; box-shadow:0 0 0 3px rgba(130,95,220,.16); }
.wqa-view button:disabled { opacity:.55; cursor:wait; }
.wqa-output { color:#bfc2d9; font-size:13px; line-height:1.7; }
.wqa-output h3 { color:#fff; font-size:20px; margin:0 0 12px; }
.wqa-output h4 { color:#d6c5ff; margin:18px 0 5px; }
.wqa-output p,.wqa-output ul { margin:0; }
.wqa-output p { white-space: pre-wrap; }
.wqa-output ul { padding-left:20px; }
.wqa-output .wqa-primary { margin-top:18px; }
.wqa-capture-tabs { display:flex; gap:8px; margin-bottom:18px; }
.wqa-capture-tabs button { flex:1; border:1px solid rgba(158,144,215,.25); border-radius:10px; padding:9px; background:transparent; color:#bfc2d9; cursor:pointer; }
.wqa-capture-tabs button.active { color:#fff; background:rgba(111,78,211,.55); }
.wqa-capture-panel { display:none; }
.wqa-capture-panel.active { display:block; }
.wqa-record-time { font-size:45px; color:#d5bbff; text-align:center; padding:27px 0; }
.wqa-capture-panel p { color:#b6bad1; font-size:12px; line-height:1.7; }
.wqa-queue h3 { display:flex; justify-content:space-between; margin:0 0 15px; }
.wqa-queue h3 span { color:#cfb8ff; }
.wqa-queue-item { padding:12px 0; border-top:1px solid rgba(151,137,202,.2); }
.wqa-queue-item strong { color:#f3efff; display:block; font-size:13px; }
.wqa-queue-item p { color:#b2b6ce; font-size:11px; margin:5px 0; overflow-wrap:anywhere; }
.wqa-queue-item small { color:#8f95b4; font-size:10px; }
.wqa-boundary { margin:12px clamp(17px,4vw,38px) 40px; text-align:center; }
.wqa-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media(max-width:650px) { .wqa-header { padding-top:18px; }.wqa-two-col { grid-template-columns:1fr; }.wqa-title { align-items:start; }.wqa-title h2 { font-size:21px; }.wqa-metrics div { flex-direction:column; align-items:start; gap:2px; }.wqa-tabs button { font-size:11px; }.wqa-identity img { width:58px; height:58px; } }