/* research.css — Ask/Research flagship page styles */

/* ===== persistent compact search bar — pinned to the bottom (browser-like) ===== */
.askbar{flex-shrink:0;padding:12px 22px;border-top:1px solid var(--border);background:color-mix(in oklch,var(--surface),transparent 6%);backdrop-filter:blur(8px)}
.askbar-box{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--border-2);border-radius:var(--r-md);padding:6px 6px 6px 14px;box-shadow:var(--sh-1);transition:var(--tr)}
.askbar-box:focus-within{border-color:var(--brand);box-shadow:var(--sh-1),0 0 0 4px var(--brand-soft)}
.askbar-box>svg{color:var(--ink-3);flex-shrink:0}
.askbar-in{flex:1;min-width:0;border:none;outline:none;background:none;font-size:14.5px;color:var(--ink)}
.askbar-in::placeholder{color:var(--ink-3)}
.askbar-box .btn{flex-shrink:0}

/* ===== session search tabs ===== */
.qtabs{display:flex;align-items:flex-end;gap:5px;padding:8px 14px 0;border-bottom:1px solid var(--border);background:var(--bg);overflow-x:auto;flex-shrink:0;scrollbar-width:none;-ms-overflow-style:none}
.qtabs::-webkit-scrollbar{width:0;height:0;display:none}

/* Clean, modern scrollbars across the Ask workspace — thin overlay bars with
   NO chunky up/down arrow buttons (the default on Windows). Applies to the tab
   area, the answer pane and the right panel; scrolling still works. */
.ask-layout ::-webkit-scrollbar{width:9px;height:9px}
.ask-layout ::-webkit-scrollbar-track{background:transparent}
.ask-layout ::-webkit-scrollbar-thumb{background:color-mix(in oklch,var(--ink-3),transparent 62%);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
.ask-layout ::-webkit-scrollbar-thumb:hover{background:color-mix(in oklch,var(--ink-3),transparent 42%);background-clip:padding-box}
.ask-layout ::-webkit-scrollbar-button{display:none;width:0;height:0}
.ask-layout ::-webkit-scrollbar-corner{background:transparent}
.ask-layout{scrollbar-width:thin}
.qtab{display:flex;align-items:center;gap:8px;max-width:230px;flex-shrink:0;padding:8px 9px 8px 13px;border:1px solid var(--border);border-bottom:none;border-radius:var(--r-sm) var(--r-sm) 0 0;background:var(--surface-2);color:var(--ink-2);font-size:12.5px;font-weight:500;cursor:pointer;transition:var(--tr);position:relative;top:1px}
.qtab:hover{background:var(--surface);color:var(--ink)}
.qtab.on{background:var(--surface);color:var(--ink);font-weight:600;border-color:var(--border);box-shadow:0 -2px 6px rgba(30,28,40,.04)}
.qtab-spin{width:11px;height:11px;flex-shrink:0;border-radius:50%;border:2px solid var(--brand-soft);border-top-color:var(--brand);animation:rot .7s linear infinite}
.qtab-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qtab-x{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);flex-shrink:0;transition:var(--tr)}
.qtab-x:hover{background:var(--surface-3);color:var(--ink)}
.qtab-new{flex-shrink:0;width:30px;height:30px;border-radius:var(--r-sm);color:var(--ink-2);display:flex;align-items:center;justify-content:center;transition:var(--tr)}
.qtab-new:hover{background:var(--surface-2);color:var(--brand)}

/* ===== ask / empty state ===== */
.ask-wrap{flex:1;overflow-y:auto;min-height:0;display:flex;justify-content:center}
.ask-hero{width:100%;max-width:760px;padding:clamp(36px,7vh,84px) 28px 80px;animation:fadeUp .5s both}
.ask-h1{font-size:clamp(2rem,3.4vw,2.9rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.ask-h1 span{color:var(--ink-3)}
.ask-lede{margin:16px 0 28px;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:580px}

.ask-box{background:var(--surface);border:1.5px solid var(--border-2);border-radius:var(--r-lg);box-shadow:var(--sh-2);transition:var(--tr)}
.ask-box:focus-within{border-color:var(--brand);box-shadow:var(--sh-2),0 0 0 4px var(--brand-soft)}
.ask-input{width:100%;border:none;outline:none;background:none;resize:none;font-size:17px;line-height:1.5;color:var(--ink);padding:18px 20px 6px}
.ask-input::placeholder{color:var(--ink-3)}
.ask-box-foot{display:flex;align-items:center;gap:12px;padding:10px 12px 12px 14px}
.ask-tools{display:flex;align-items:center;gap:10px;flex:1}
.ask-scope{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);font-weight:500}
.ask-hint{font-size:11px;color:var(--ink-3);text-align:right;margin:8px 4px 0}
.btn:disabled{opacity:.45;cursor:not-allowed}

.sugg-head{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:38px 0 12px}
.sugg-grid{display:flex;flex-direction:column;gap:9px}
.sugg{display:flex;align-items:center;gap:14px;text-align:left;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;transition:var(--tr)}
.sugg:hover{border-color:var(--brand-line);background:var(--brand-soft);transform:translateX(3px)}
.sugg-area{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);width:118px;flex-shrink:0}
.sugg-q{flex:1;font-size:14.5px;color:var(--ink);font-weight:500}
.sugg>svg{color:var(--ink-3);flex-shrink:0;transition:var(--tr)}
.sugg:hover>svg{color:var(--brand);transform:translateX(3px)}

.trust-row{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:1px solid var(--border)}
.trust{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);font-weight:500}
.trust svg{width:15px;height:15px;color:var(--ok)}

/* ===== language picker ===== */
.langpick{position:relative}
.lang-btn{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:7px 12px;transition:var(--tr)}
.lang-btn.sm{padding:6px 11px;font-size:12.5px}
.lang-btn:hover{border-color:var(--border-2);color:var(--ink)}
.lang-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:50;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-md);box-shadow:var(--sh-pop);padding:6px;min-width:208px;animation:pop .14s both}
.lang-search{width:100%;box-sizing:border-box;margin-bottom:6px;padding:8px 10px;font-size:12.5px;color:var(--ink);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-xs);outline:none;transition:var(--tr)}
.lang-search:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.lang-search::placeholder{color:var(--ink-3)}
.lang-list{max-height:288px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:1px}
.lang-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border-radius:var(--r-xs);font-size:13.5px;color:var(--ink);transition:var(--tr)}
.lang-opt .mono{font-size:11px;color:var(--ink-3)}
.lang-opt:hover{background:var(--surface-2)}
.lang-opt.on{color:var(--brand-ink);background:var(--brand-soft)}
.lang-empty{padding:14px 10px;text-align:center;font-size:12px;color:var(--ink-3)}
/* right-to-left scripts (Urdu, Kashmiri, Sindhi) render correctly via dir="auto" */
[dir="rtl"],[dir="auto"]:dir(rtl){text-align:start}

/* ===== pipeline ===== */
.pipe-wrap{flex:1;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:clamp(28px,6vh,64px) 28px}
.pipe-card{width:100%;max-width:560px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:26px 26px 22px;animation:fadeUp .35s both}
.pipe-title{display:flex;align-items:center;gap:11px;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:14px}
.pipe-pct{margin-left:auto;font-size:15px;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}
.pipe-bar{height:7px;border-radius:99px;background:var(--brand-soft);overflow:hidden;margin-bottom:20px}
.pipe-bar>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-ink));transition:width .5s ease}
.pipe-steps{display:flex;flex-direction:column;gap:3px}
.pstep{display:flex;align-items:center;gap:13px;padding:9px 0;transition:var(--tr)}
.pstep.wait{opacity:.4}
.pstep-ico{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--border-2);background:var(--surface-2);color:var(--ink-3)}
.pstep.done .pstep-ico{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.pstep.now .pstep-ico{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand)}
.pstep-l{font-size:14px;font-weight:500;color:var(--ink)}
.pstep.done .pstep-l{color:var(--ink-2)}
.pstep-d{font-size:11px;color:var(--ink-3);margin-top:1px}
.pdot{width:5px;height:5px;border-radius:50%;background:var(--ink-3)}
.spin,.mini-spin{border-radius:50%;border:2px solid var(--brand-soft);border-top-color:var(--brand);animation:rot .7s linear infinite}
.spin{width:16px;height:16px}.mini-spin{width:12px;height:12px;border-width:2px}
@keyframes rot{to{transform:rotate(360deg)}}

/* ===== result bar ===== */
.result-bar{position:relative;z-index:40;flex-shrink:0;display:flex;align-items:center;gap:10px;padding:11px 22px;border-bottom:1px solid var(--border);background:color-mix(in oklch,var(--surface),transparent 18%);backdrop-filter:blur(8px)}
.rb-back{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px;font-weight:600;color:var(--ink-2);padding:7px 11px;border-radius:var(--r-sm);transition:var(--tr)}
.rb-back:hover{background:var(--surface-2);color:var(--ink)}
.rb-back svg{transform:rotate(45deg)}
.rb-spacer{flex:1}

/* ===== result layout ===== */
/* Two columns on wide screens: the IRAC analysis on the left and the
   Authorities cards in a sticky right rail, so cases are reachable without
   scrolling past the whole analysis. Collapses to one column when narrow. */
.result-grid{max-width:1200px;margin:0 auto;padding:22px 32px 20px;display:grid;grid-template-columns:minmax(0,1fr) 364px;gap:30px 36px;align-items:start}
.result-grid .auth{position:sticky;top:18px;align-self:start;max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain;padding-right:3px}
.result-grid .auth .case-grid{grid-template-columns:1fr}
.result-grid .followups{grid-column:1}
.auth::-webkit-scrollbar{width:8px}
.auth::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px;border:2px solid var(--bg)}
@media(max-width:1024px){
  .result-grid{grid-template-columns:1fr;max-width:1080px}
  .result-grid .auth{position:static;max-height:none;overflow:visible;padding-right:0}
  .result-grid .auth .case-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}
.result-foot{max-width:1200px;margin:0 auto;padding:16px 32px 48px;font-size:11px;color:var(--ink-3);border-top:1px solid var(--border);line-height:1.6}

/* follow-up questions */
.followups{border-top:1px solid var(--border);padding-top:6px}
.fu-list{display:flex;flex-direction:column;gap:8px}
.fu-item{display:flex;align-items:center;gap:12px;text-align:left;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 15px;transition:var(--tr)}
.fu-item:hover{border-color:var(--brand-line);background:var(--brand-soft);transform:translateX(3px)}
.fu-q{flex:1;font-size:14px;color:var(--ink);font-weight:500}
.fu-item>svg{color:var(--ink-3);flex-shrink:0;transition:var(--tr)}
.fu-item:hover>svg{color:var(--brand);transform:translateX(3px)}

/* ===== answer / IRAC ===== */
.answer{animation:fadeUp .4s both}
.ans-qhead{margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.ans-qmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.ans-area{font-size:11px;color:var(--ink-3)}
/* query: a compact single-line-ish heading (smaller than the old display size) */
.ans-q{font-size:clamp(1.15rem,1.7vw,1.45rem);font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.ans-qfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--ink-2)}
.conf{display:flex;align-items:center;gap:6px;white-space:nowrap;color:var(--ok);font-weight:600}
.conf-sep{color:var(--border-2)}
.mt-note{color:var(--warn);font-size:11px}
.tx-spin{display:inline-block;width:9px;height:9px;vertical-align:-1px;border-radius:50%;border:2px solid var(--brand-soft);border-top-color:var(--brand);animation:rot .7s linear infinite}

.irac{display:grid;grid-template-columns:44px 1fr;gap:4px;animation:fadeUp .5s both}
.irac-rail{display:flex;flex-direction:column;align-items:center}
.irac-k{width:30px;height:30px;border-radius:9px;background:var(--brand-soft);color:var(--brand);border:1px solid var(--brand-line);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.irac-line{flex:1;width:1.5px;background:var(--border);margin:6px 0 -4px}
.irac:last-of-type .irac-line{display:none}
.irac-body{padding-bottom:26px}
.irac-h{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.irac-h b{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.irac-hint{font-size:10.5px;color:var(--ink-3)}
.irac-p{font-size:15.5px;line-height:1.72;color:var(--ink-2);text-wrap:pretty}
.irac-p strong{color:var(--ink);font-weight:600}
/* Conclusion — the bottom line — gets a tinted panel + bold text to stand out. */
.irac.concl .irac-body{background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:var(--r-md);padding:15px 17px;margin-top:-2px}
.irac.concl .irac-hint{color:var(--brand-ink);opacity:.75}
.irac.concl .irac-p{font-weight:700;color:var(--ink)}

.citelink{display:inline;font-style:italic;font-weight:600;color:var(--brand-ink);border-bottom:1.5px solid var(--brand-line);transition:var(--tr);padding:0 1px}
.citelink:hover,.citelink.hot{background:var(--brand-soft);border-bottom-color:var(--brand)}

/* synthesis blocks — test / weight of authority / counter-position */
.syn{border-radius:var(--r-md);padding:14px 16px;margin-top:6px;border:1px solid var(--border);background:var(--surface-2)}
.syn-h{display:flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--ink-2);margin-bottom:9px}
.syn-h svg{flex-shrink:0}
.syn p{font-size:14.5px;line-height:1.66;color:var(--ink-2);text-wrap:pretty}
.syn p strong{color:var(--ink);font-weight:600}
.syn-test-list{margin:0;padding-left:0;list-style:none;counter-reset:syn;display:flex;flex-direction:column;gap:8px}
.syn-test-list li{position:relative;padding-left:30px;font-size:14.5px;line-height:1.6;color:var(--ink-2);counter-increment:syn}
.syn-test-list li::before{content:counter(syn);position:absolute;left:0;top:0;width:21px;height:21px;border-radius:6px;background:var(--brand-soft);color:var(--brand);border:1px solid var(--brand-line);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.syn-test .syn-h{color:var(--brand-ink)}
.syn-counter{background:var(--warn-soft);border-color:var(--warn-line)}
.syn-counter .syn-h{color:var(--warn)}
.syn-counter p{color:var(--ink)}

/* drawer verbatim quote */
.dr-quote{margin:0;padding:11px 14px;border-left:3px solid var(--brand-line);background:var(--brand-soft);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:14px;line-height:1.6;color:var(--ink);font-style:italic}

/* verify banner */
.verify-banner{display:flex;align-items:center;gap:14px;background:var(--ok-soft);border:1px solid var(--ok-line);border-radius:var(--r-md);padding:14px 16px;margin-top:6px}
.vb-ico{width:30px;height:30px;border-radius:8px;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vb-tx{display:flex;flex-direction:column;gap:1px;flex:1}
.vb-tx b{font-size:14px;color:var(--ink)}
.vb-tx span{font-size:12.5px;color:var(--ink-2);line-height:1.45}

/* ===== authorities ===== */
.auth-head{margin-bottom:16px}
.auth-head h3{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;gap:8px}
.auth-head h3 .mono{font-size:12px;color:var(--ink-3);background:var(--surface-3);padding:2px 8px;border-radius:99px;font-weight:500}
.auth-sub{font-size:13px;color:var(--ink-2);margin-top:3px}
/* court groups (collapsible) */
.auth-groups{display:flex;flex-direction:column;gap:20px}
.auth-group-head{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:6px 2px 9px;margin-bottom:13px;border-bottom:1px solid var(--border);color:var(--ink-2);transition:var(--tr)}
.auth-group-head:hover{color:var(--ink)}
.auth-group-head svg{color:var(--ink-3)}
.agh-label{font-size:13px;font-weight:600;color:var(--ink)}
.agh-count{margin-left:auto;font-size:11px;font-weight:500;color:var(--ink-3);background:var(--surface-3);padding:1px 8px;border-radius:99px}
.case-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.case{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 17px 14px;transition:var(--tr);display:flex;flex-direction:column;gap:0;position:relative;overflow:hidden;cursor:pointer;width:100%}
.case:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* sequential number badge */
.case-num{flex-shrink:0;min-width:20px;height:20px;padding:0 5px;border-radius:6px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
/* case title is a link to the full judgment on Indian Kanoon */
.case-title-link{display:inline-flex;align-items:flex-start;gap:5px}
.case-title-link svg{flex-shrink:0;margin-top:3px;color:var(--ink-3);transition:var(--tr)}
.case-title-link:hover{color:var(--brand-ink)}
.case-title-link:hover svg{color:var(--brand)}
.case::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand);transform:scaleY(0);transform-origin:top;transition:var(--tr)}
.case:hover{border-color:var(--border-2);box-shadow:var(--sh-2);transform:translateY(-2px)}
.case:hover::before,.case.hot::before{transform:scaleY(1)}
.case.hot{border-color:var(--brand-line);box-shadow:var(--sh-2),0 0 0 3px var(--brand-soft)}
.case-top{display:flex;align-items:center;gap:7px;margin-bottom:10px;flex-wrap:wrap}
.case-bench{font-size:9.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border-2);padding:2px 7px;border-radius:5px}
.case-cited{margin-left:auto;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);background:var(--brand-soft);padding:2px 7px;border-radius:99px}
.case-title{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3;letter-spacing:-.01em}
.case-cite{font-size:11.5px;color:var(--ink-3);margin:4px 0 0}
.case-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:9px 0 0}
.case-disp{font-size:10px;font-weight:600;letter-spacing:.03em;color:var(--ok);background:var(--ok-soft);border:1px solid var(--ok-line);padding:2px 8px;border-radius:99px}
.case-sec{font-size:10px;color:var(--ink-2);background:var(--surface-3);padding:2px 7px;border-radius:5px}
.case-found{color:var(--warn);font-size:13px;line-height:1;margin-left:-2px}
.case-auth{font-size:10px;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:99px;border:1px solid}
.case-auth.binding{color:var(--brand-ink);background:var(--brand-soft);border-color:var(--brand-line)}
.case-auth.persuasive{color:var(--ink-2);background:var(--surface-2);border-color:var(--border-2)}
.case-reltype{font-size:10px;font-weight:600;color:var(--ink-2);background:var(--surface-3);padding:2px 8px;border-radius:99px}
.case-reltype.rt-contradictory{color:var(--bad);background:var(--bad-soft)}
.case-reltype.rt-distinguishable{color:var(--warn);background:var(--warn-soft)}
.case-reltype.rt-on-point{color:var(--ok);background:var(--ok-soft)}
/* drawer authority row */
.authrow{display:flex;align-items:center;gap:10px;border-radius:var(--r-md);padding:11px 14px;margin:14px 0;border:1px solid var(--border)}
.authrow.binding{background:var(--brand-soft);border-color:var(--brand-line)}
.authrow-lvl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;flex-shrink:0;color:var(--ink)}
.authrow.binding .authrow-lvl{color:var(--brand-ink)}
.authrow-why{font-size:12.5px;color:var(--ink-2);line-height:1.4}
.case-hold{font-size:12.5px;color:var(--ink-2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1;margin-top:9px}
.case-rel{display:flex;align-items:flex-start;gap:6px;margin-top:9px;font-size:12px;line-height:1.55;color:var(--brand-ink)}
.case-rel svg{flex-shrink:0;margin-top:2px;color:var(--brand)}
.case-rel span{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
.case-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;padding-top:11px;border-top:1px solid var(--border)}
.case-foot .mono{font-size:10.5px;color:var(--ink-3)}
.case-cb{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--ink-2);font-weight:500;white-space:nowrap}

/* ===== drawer ===== */
/* case detail opens as a CENTERED COMPACT MODAL popup (not a side drawer) */
.drawer-scrim{position:fixed;inset:0;background:rgba(20,18,30,.5);backdrop-filter:blur(3px);z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn .18s both}
.drawer{width:min(880px,100%);max-height:90vh;min-height:min(420px,80vh);background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg);box-shadow:var(--sh-pop);overflow-y:auto;overscroll-behavior:contain;padding:30px 36px 34px;animation:popIn .24s cubic-bezier(.4,0,.2,1) both}
@keyframes popIn{from{transform:scale(.96) translateY(8px);opacity:0}to{transform:none;opacity:1}}
.dr-top{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.dr-court{font-size:12.5px;color:var(--ink-2);font-weight:500}
.dr-x{margin-left:auto;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:var(--tr)}
.dr-x:hover{background:var(--surface-2);color:var(--ink)}
.dr-title{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.22;color:var(--ink)}
.dr-cite{font-size:13px;color:var(--ink-2);margin-top:6px}
.goodlaw{display:flex;align-items:center;gap:12px;border-radius:var(--r-md);padding:13px 15px;margin:18px 0;border:1px solid}
.goodlaw.ok{background:var(--ok-soft);border-color:var(--ok-line)}
.goodlaw.warn{background:var(--warn-soft);border-color:var(--warn-line)}
.goodlaw.bad{background:var(--bad-soft);border-color:var(--bad-line)}
.gl-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.goodlaw.ok .gl-ico{background:var(--ok)}
.goodlaw.warn .gl-ico{background:var(--warn)}
.goodlaw.bad .gl-ico{background:var(--bad)}
.gl-tx{display:flex;flex-direction:column;gap:1px}
.gl-tx b{font-size:14.5px;color:var(--ink)}
.gl-tx span{font-size:12px;color:var(--ink-2);line-height:1.4}
.dr-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;padding:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.dr-f{display:flex;flex-direction:column;gap:3px}
.dr-fl{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.dr-f span:last-child{font-size:13.5px;color:var(--ink);font-weight:500}
.dr-sec{margin-top:18px}
/* popup section headings — highlighted (accent tick + brass label) */
.dr-sl{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-ink);margin-bottom:9px}
.dr-sl::before{content:"";width:4px;height:13px;border-radius:2px;background:var(--brand);flex-shrink:0}
.dr-sec p{font-size:14px;line-height:1.6;color:var(--ink-2)}
.dr-sec blockquote{font-size:14px;line-height:1.62;color:var(--ink);border-left:2.5px solid var(--brand-line);padding:2px 0 2px 15px;font-style:italic}
.dr-chips{display:flex;flex-wrap:wrap;gap:7px}
.dr-chip{font-size:11.5px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border);padding:3px 9px;border-radius:99px}
.dr-chip.mono{color:var(--brand-ink);background:var(--brand-soft);border-color:var(--brand-line)}
.dr-actions{display:flex;gap:10px;margin-top:24px}
.dr-actions .btn{flex:1}
.dr-verified{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;color:var(--ok);margin-top:16px}

/* ── Legal-document text formatting ───────────────────────────────────────
   The analysis is rendered as justified body copy with automatic hyphenation,
   the long-standing convention for legal writing. Hyphenation is what keeps
   justified text professional — without it, justification opens loose "rivers"
   of whitespace. Headings, citations, labels and list markers stay left-aligned;
   only running prose is justified. The short Conclusion panel reads cleaner
   flush-left, so it opts out. */
.irac-p,
.syn p,
.dr-quote,
.dr-sec p,
.dr-sec blockquote{
  text-align:justify;text-justify:inter-word;
  hyphens:auto;-webkit-hyphens:auto;
}
.irac.concl .irac-p{text-align:left;hyphens:manual;-webkit-hyphens:manual}

@media(max-width:680px){.result-grid{padding:22px 18px 56px}.sugg-area{width:auto}.sugg{flex-wrap:wrap}}

/* ===== responsive hardening (Ask page) ===== */
.ask-wrap,.pipe-wrap{overscroll-behavior:contain}
.result-bar{flex-wrap:wrap}                       /* toolbar buttons wrap instead of overflowing */
.case-cite,.dr-cite,.case-title{overflow-wrap:anywhere}   /* long citations/titles never overflow */
.ans-q,.dr-title{overflow-wrap:break-word}
.askbar-box{flex-wrap:wrap}                        /* search input + button wrap on very narrow screens */
.askbar-in{min-width:120px}
@media(max-width:680px){
  .result-grid{padding:22px 16px 16px}
  .result-foot{padding:14px 16px 40px}
  .ask-hero{padding:32px 18px 70px}
  .pipe-wrap{padding:36px 16px}
  .askbar{padding:10px 14px}
  .ans-q{max-width:none}
}
@media(max-width:420px){
  .result-bar{padding:10px 12px;gap:7px}
  .result-bar .btn{padding:8px 11px}
  .qtab{max-width:150px}
}

/* ===== research layout: center canvas + persistent right authorities panel =====
   The Ask page splits the main area into a center column (tabs · canvas ·
   bottom composer) and a persistent right panel ("Case Laws / View Doc /
   Insights"), mirroring the reference legal-research workspace. */
.ask-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 364px}
.ask-col{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border-right:1px solid var(--border)}

.rpanel{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:var(--surface)}
.rpanel-tabs{flex-shrink:0;display:flex;gap:2px;padding:0 12px;border-bottom:1px solid var(--border);background:var(--bg)}
.rpt{padding:15px 12px 13px;font-size:13px;font-weight:600;color:var(--ink-3);border-bottom:2px solid transparent;display:flex;align-items:center;gap:7px;transition:var(--tr)}
.rpt:hover{color:var(--ink-2)}
.rpt.on{color:var(--brand-ink);border-bottom-color:var(--brand)}
.rpt-count{font-size:10px;font-weight:700;color:var(--brand-ink);background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:99px;padding:0 6px;min-width:18px;text-align:center}
.rpanel-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px}
.rpanel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:13px;min-height:260px;height:100%;color:var(--ink-3);padding:30px 18px}
.rpanel-empty svg{width:30px;height:30px;color:var(--border-2)}
.rpanel-empty p{font-size:13px;line-height:1.5;max-width:230px}
.rpanel-foot{flex-shrink:0;border-top:1px solid var(--border);padding:12px 16px;background:var(--bg)}
.vf-h{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.vf-srcs{display:flex;flex-wrap:wrap;gap:7px}
.vf-src{font-size:11px;font-weight:500;color:var(--ok);background:var(--ok-soft);border:1px solid var(--ok-line);border-radius:var(--r-sm);padding:4px 9px}

/* centered empty-state hero (emblem · serif title · lede · chips) */
.ask-hero-center{max-width:680px;text-align:center;display:flex;flex-direction:column;align-items:center;padding-top:clamp(36px,8vh,104px)}
.hero-emblem{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--brand-ink);margin-bottom:22px}
.hero-emblem svg{width:32px;height:32px}
.ask-hero-center .ask-h1{font-size:clamp(1.9rem,3vw,2.6rem)}
.ask-hero-center .ask-lede{margin:14px auto 30px;max-width:560px}
.hero-chips{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:6px}
.hero-chip{font-size:13px;font-weight:500;color:var(--ink-2);background:var(--surface);border:1px solid var(--border-2);border-radius:99px;padding:9px 16px;transition:var(--tr)}
.hero-chip:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-soft)}
.hero-trust{justify-content:center}

/* the answer canvas is single-column now (authorities moved to the right panel) */
.result-grid-single{grid-template-columns:1fr;max-width:980px;gap:18px}

/* ===== answer prose (no IRAC rail): flowing paragraphs + highlighted headings ===== */
.ans-sec{margin:0 0 16px;animation:fadeUp .5s both}
/* section + side headings — clearly highlighted: accent tick, brass label, tinted underline */
.ans-h{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-ink);margin:0 0 13px;padding-bottom:9px;border-bottom:2px solid var(--brand-line)}
.ans-h::before{content:"";width:5px;height:17px;border-radius:2px;background:var(--brand);flex-shrink:0}
/* collapsible section heading (chevron replaces the accent tick) */
.ans-h-btn{width:100%;cursor:pointer;background:none}
.ans-h-btn::before{display:none}
.ans-h-btn:hover{color:var(--brand)}
/* the legal position is one short paragraph, capped at ~5 lines */
.ans-position{max-height:8em;overflow:hidden;position:relative}
.ans-position.open{max-height:none;overflow:visible}
/* soft fade at the clamp edge to cue there's more (only when it overflows) */
.ans-position.has-more:not(.open)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.4em;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none}
.ans-more{display:inline-flex;align-items:center;gap:4px;margin-top:7px;padding:2px 0;background:none;border:none;color:var(--brand);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer}
.ans-more:hover{text-decoration:underline}

/* middle-pane case-law browser (grouped by court, collapsed; inline expand) */
.cl-sec{margin-top:0}
.cl-total{font-size:11px;font-weight:600;color:var(--ink-3);background:var(--surface-3);padding:1px 8px;border-radius:99px;margin-left:2px}
.cl-groups{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.cl-group{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.cl-ghead{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 14px;color:var(--ink-2);transition:var(--tr)}
.cl-ghead:hover{background:var(--surface-2)}
.cl-glabel{font-size:13.5px;font-weight:600;color:var(--ink)}
.cl-gcount{margin-left:auto;font-size:11px;color:var(--ink-3);background:var(--surface-3);padding:1px 8px;border-radius:99px}
.cl-list{border-top:1px solid var(--border)}
.cl-case{border-bottom:1px solid var(--border)}
.cl-case:last-child{border-bottom:none}
.cl-row{display:flex;align-items:center;gap:9px;padding:11px 14px;cursor:pointer;transition:var(--tr)}
.cl-row:hover{background:var(--surface-2)}
.cl-badge{flex-shrink:0}
.cl-title{flex:1;min-width:0;display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.cl-title svg{flex-shrink:0;color:var(--ink-3);transition:var(--tr)}
.cl-title:hover{color:var(--brand-ink)} .cl-title:hover svg{color:var(--brand)}
/* collapsed preview: one-line ratio ("what it's about") + expand hint */
.cl-preview{padding:0 16px 12px 41px;cursor:pointer}
.cl-psum{font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.cl-plabel{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-ink);margin-right:7px}
.cl-ptext{font-style:italic;color:var(--ink-2)}
.cl-hint{font-size:10.5px;color:var(--ink-3);margin-top:6px}
.cl-detail{padding:2px 16px 16px 41px;animation:fadeUp .25s both}
.cl-chips{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 14px}
.cl-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--brand-ink);background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:99px;padding:3px 9px;transition:var(--tr)}
.cl-chip:hover{background:var(--brand);color:#fff} .cl-chip:hover svg{color:#fff}
.cl-chip.ghost{color:var(--ink-2);background:var(--surface-2);border-color:var(--border-2);cursor:default}
.cl-d{margin-bottom:13px}
.cl-dl{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-ink);margin-bottom:6px}
.cl-dl::before{content:"";width:3px;height:11px;border-radius:2px;background:var(--brand);flex-shrink:0}
.cl-d p{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.cl-d blockquote{font-size:13.5px;line-height:1.6;color:var(--ink);font-style:italic;border-left:2.5px solid var(--brand-line);padding-left:13px}
/* query-term highlight inside case text */
mark.hl{background:color-mix(in oklch,var(--brand-soft),var(--brand) 18%);color:inherit;border-radius:3px;padding:0 2px}

/* case popup can be expanded (maximise toggle) */
.dr-max{margin-left:auto;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:var(--tr)}
.dr-max:hover{background:var(--surface-2);color:var(--ink)}
.dr-top .dr-max + .dr-x{margin-left:6px}
.drawer-max{width:min(1100px,100%);max-height:94vh}
.ans-p{font-size:14.5px;line-height:1.62;color:var(--ink-2);margin:0 0 10px;text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
.ans-p:last-child{margin-bottom:0}
.ans-p strong{color:var(--ink);font-weight:600}
/* the bottom line stands out in a tinted panel */
.ans-concl{background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:var(--r-md);padding:18px 20px;margin-top:30px}
.ans-concl .ans-h{color:var(--brand-ink);border-bottom-color:var(--brand-line)}
.ans-concl .ans-p{color:var(--ink);font-weight:500;text-align:left;hyphens:manual}
/* "What must be established" — clean checklist (replaces the numbered test list) */
/* requirements now sit inside the legal-position section (collapsible) */
.lp-req{margin-top:14px;padding-top:14px;border-top:1px dashed var(--border-2)}
.lp-req-label{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-ink)}
.lp-req-btn{width:100%;cursor:pointer;background:none;transition:var(--tr)}
.lp-req-btn:hover{color:var(--brand)}
.lp-req .req-list{margin-top:11px}
.req-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.req-list li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.req-list li strong{color:var(--ink);font-weight:600}
.req-ic{flex-shrink:0;width:22px;height:22px;margin-top:1px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--brand-ink);background:var(--brand-soft);border:1px solid var(--brand-line)}

/* result actions row, docked just above the composer */
.composer-actions{flex-shrink:0;display:flex;align-items:center;gap:8px;width:100%;max-width:1080px;margin:0 auto;padding:9px 22px 0}
.ca-spacer{flex:1}
.btn-sm{padding:6px 11px;font-size:12.5px}

/* indeterminate processing bar — continuous "working" cue while researching */
.procbar{flex-shrink:0;height:4px;background:var(--brand-soft);overflow:hidden;position:relative;z-index:20}
.procbar>span{position:absolute;top:0;left:0;height:100%;width:40%;border-radius:0 3px 3px 0;background:linear-gradient(90deg,var(--brand-line),var(--brand),var(--brand-ink));box-shadow:0 0 8px color-mix(in oklch,var(--brand),transparent 40%);animation:procslide 1.1s ease-in-out infinite}
@keyframes procslide{0%{left:-42%}60%{left:72%}100%{left:104%}}
@media(prefers-reduced-motion:reduce){.procbar>span{animation-duration:2.4s}}

/* per-query processing timer (top of the result pane) */
.qtimer{display:inline-flex;align-items:center;gap:7px;margin:10px 14px 2px;padding:5px 12px;border:1px solid var(--border);border-radius:99px;background:var(--surface-2);color:var(--ink-2);font-size:12.5px;font-weight:600;width:fit-content}
.qtimer-ico{flex:none;opacity:.7}
.qtimer .qtimer-v{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.qtimer.run{color:var(--brand);border-color:var(--brand-soft);background:var(--brand-soft)}
.qtimer.run .qtimer-ico{animation:rot 1.4s linear infinite}
@media(prefers-reduced-motion:reduce){.qtimer.run .qtimer-ico{animation:none}}

/* verified badge (replaces the "Good law" status label) */
.vbadge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--ok);background:var(--ok-soft);border:1px solid var(--ok-line);border-radius:99px;padding:2px 9px 2px 7px;white-space:nowrap}
.vbadge svg{flex-shrink:0}
.dr-verified-row{margin:4px 0 18px}
.dr-verified-row .vbadge{font-size:12px;padding:5px 13px 5px 10px}

/* View Doc — inline case reader */
.docview{animation:fadeUp .3s both}
.dv-top{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.dv-court{font-size:12px;color:var(--ink-3)}
.dv-title{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.dv-cite{font-size:12px;color:var(--ink-3);margin:5px 0 16px}
.dv-sec{margin-bottom:16px}
.dv-sl{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-ink);margin-bottom:7px}
.dv-sl::before{content:"";width:4px;height:12px;border-radius:2px;background:var(--brand);flex-shrink:0}
.dv-sec p{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.dv-actions{display:flex;gap:9px;margin-top:18px}
.dv-actions .btn{flex:1}

/* Insights — search-level analysis */
.insights{animation:fadeUp .3s both}
.ins-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.ins-stat{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:13px 10px;text-align:center}
.ins-stat b{display:block;font-size:22px;font-weight:700;color:var(--brand-ink);line-height:1}
.ins-stat span{display:block;font-size:11px;color:var(--ink-3);margin-top:5px}
.ins-sec{margin-top:6px}
.ins-h{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-ink);margin-bottom:9px}
.ins-h::before{content:"";width:4px;height:13px;border-radius:2px;background:var(--brand);flex-shrink:0}
.ins-sec p{font-size:13.5px;line-height:1.62;color:var(--ink-2)}

/* View Doc — title link, copy bar, propositions, citation graph */
.dv-title-link{display:inline-flex;align-items:flex-start;gap:5px}
.dv-title-link svg{flex-shrink:0;margin-top:3px;color:var(--ink-3);transition:var(--tr)}
.dv-title-link:hover{color:var(--brand-ink)} .dv-title-link:hover svg{color:var(--brand)}
.dv-copy{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
/* prominent shortcut that replaces the holding in View Doc */
.dv-fulllink{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 18px;padding:10px 14px;font-size:13px;font-weight:600;color:var(--brand-ink);background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:var(--r-md);text-decoration:none;transition:var(--tr)}
.dv-fulllink:hover{background:var(--brand);color:#fff}
.dv-fulllink svg{flex-shrink:0}
.dv-cbtn{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:5px 11px;cursor:pointer;transition:var(--tr)}
.dv-cbtn:hover{border-color:var(--brand-line);color:var(--brand-ink);background:var(--brand-soft)}
.dv-pin{font-size:10.5px;font-weight:600;color:var(--brand-ink);letter-spacing:0;text-transform:none}
.dv-pin:hover{text-decoration:underline}
.dv-props{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.dv-prop-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.dv-ptype{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-ink)}
.dv-pin-copy{color:var(--ink-3);padding:3px;border-radius:5px;cursor:pointer;transition:var(--tr);flex-shrink:0}
.dv-pin-copy:hover{color:var(--brand);background:var(--brand-soft)}
.dv-cgraph{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.dv-cgraph a{display:inline-flex;align-items:flex-start;gap:6px;font-size:12.5px;color:var(--ink-2);line-height:1.4;transition:var(--tr)}
.dv-cgraph a svg{flex-shrink:0;margin-top:2px;color:var(--ink-3)}
.dv-cgraph a:hover{color:var(--brand-ink)} .dv-cgraph a:hover svg{color:var(--brand)}
.dv-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;padding:14px 0 2px;border-top:1px solid var(--border);margin-top:4px}

/* Insights — doctrine timeline + split/conflict detector */
.ins-tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ins-tli{display:flex;gap:11px;padding:7px 6px;border-radius:var(--r-sm);cursor:pointer;transition:var(--tr)}
.ins-tli:hover{background:var(--surface-2)}
.ins-tl-yr{font-size:11px;font-weight:700;color:var(--brand-ink);flex-shrink:0;width:34px;padding-top:2px}
.ins-tl-body{display:flex;flex-direction:column;gap:2px;min-width:0;border-left:2px solid var(--border);padding-left:13px;position:relative}
.ins-tl-body::before{content:"";position:absolute;left:-5px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--brand);border:2px solid var(--surface)}
.ins-tl-title{font-size:13px;font-weight:500;color:var(--ink);line-height:1.35}
.ins-tl-meta{font-size:10.5px;color:var(--ink-3)}
.ins-conf{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ins-confli{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:var(--tr)}
.ins-confli:hover{border-color:var(--border-2);box-shadow:var(--sh-1)}
.ins-conf-tag{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:99px;flex-shrink:0}
.ins-conf-tag.warn{color:var(--warn);background:var(--warn-soft);border:1px solid var(--warn-line)}
.ins-conf-tag.bad{color:var(--bad);background:var(--bad-soft);border:1px solid var(--bad-line)}
.ins-conf-title{font-size:12.5px;color:var(--ink);line-height:1.35}
.btn-block{width:100%;justify-content:center}

/* narrow viewports: drop the right panel; the answer keeps its own flow */
@media(max-width:1024px){
  .ask-layout{grid-template-columns:1fr}
  .rpanel{display:none}
  .ask-col{border-right:none}
}