/* SolaimanLipi for every Bangla letter in the admin panel and teacher dashboard.
   unicode-range limits it to the Bengali block, so English text keeps the normal interface font.
   Put the font file in backend/admin/ui/fonts/ (see the README.txt there). Until then Bangla falls back to Noto Sans Bengali. */
@font-face{
  font-family:'SolaimanLipi';
  src:local('SolaimanLipi'),local('Solaiman Lipi'),local('SolaimanLipi Regular'),
      url('fonts/SolaimanLipi.woff2') format('woff2'),
      url('fonts/SolaimanLipi.woff') format('woff'),
      url('fonts/SolaimanLipi.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0980-09FF,U+200C-200D,U+0964-0965,U+25CC;
}
:root{
  --accent:#4f46e5;--accent-hover:#4338ca;--accent-soft:rgba(79,70,229,.10);
  --text:#0f172a;--text-2:#475569;--text-3:#94a3b8;
  --glass:rgba(255,255,255,.76);--glass-soft:rgba(255,255,255,.52);--glass-border:rgba(255,255,255,.65);
  --hair:rgba(15,23,42,.08);--shadow:0 8px 30px rgba(30,41,59,.10);--shadow-lg:0 20px 45px rgba(30,41,59,.14);
  --ok:#15803d;--ok-soft:rgba(21,128,61,.11);--warn:#b45309;--warn-soft:rgba(180,83,9,.12);
  --bad:#b91c1c;--bad-soft:rgba(185,28,28,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;padding:5.5rem 1.25rem 3rem;max-width:1220px;margin-inline:auto;min-height:100vh;
  font-family:'SolaimanLipi','Noto Sans Bengali',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);
  -webkit-font-smoothing:antialiased;
  background:radial-gradient(circle at 12% 8%,rgba(99,102,241,.16),transparent 42%),
    radial-gradient(circle at 88% 0%,rgba(56,189,248,.14),transparent 40%),
    linear-gradient(160deg,#eef1fb,#e7ecf7 45%,#eef2fb);background-attachment:fixed;
}
.boot{text-align:center;color:var(--text-2);margin-top:30vh}
a{color:var(--accent)}
h2{margin:0 0 .25rem;font-size:1.6rem;letter-spacing:-.02em}
h3{margin:0 0 1rem;font-size:1.05rem}
.muted{color:var(--text-2)}.tiny{font-size:.8rem}.tabular{font-variant-numeric:tabular-nums}

/* top bar */
.topbar{position:fixed;inset:0 0 auto 0;height:4rem;z-index:50;background:var(--glass);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--glass-border);box-shadow:0 4px 24px rgba(30,41,59,.06)}
.topbar .inner{max-width:1220px;margin:0 auto;height:100%;padding:0 1.25rem;display:flex;align-items:center;gap:1rem}
.brand{font-weight:700;font-size:1.05rem;display:flex;align-items:center;gap:.5rem;white-space:nowrap;color:var(--text);text-decoration:none}
.brand::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.nav{display:flex;gap:.25rem;overflow-x:auto;flex:1;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:.45rem .8rem;border-radius:999px;text-decoration:none;color:var(--text-2);font-weight:600;font-size:.85rem;white-space:nowrap}
.nav a:hover{background:var(--glass-soft)}
.nav a.active{background:var(--accent-soft);color:var(--accent)}
.logout{color:var(--bad);background:var(--bad-soft);border:1px solid rgba(185,28,28,.2);padding:.45rem 1rem;border-radius:999px;font-weight:600;font-size:.85rem;cursor:pointer}

/* layout pieces */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.page-head p{margin:0;color:var(--text-2);font-size:.9rem}
.card{background:var(--glass);backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--shadow);padding:1.3rem;margin-bottom:1.1rem}
.grid{display:grid;gap:1.1rem}
.two{grid-template-columns:minmax(300px,380px) 1fr;align-items:start}
@media(max-width:900px){.two{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.6rem}
.stat{text-align:center;padding:1.2rem}.stat .num{font-size:2rem;font-weight:800;color:var(--accent)}
.stat .label{font-size:.75rem;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem}
.tile{display:block;text-align:center;padding:1.4rem 1rem;text-decoration:none;color:var(--text);font-weight:600;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--shadow);transition:transform .15s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.tile i{display:block;font-size:1.6rem;color:var(--accent);margin-bottom:.6rem}

/* forms */
label{display:block;font-size:.78rem;font-weight:700;color:var(--text-2);margin:0 0 .3rem;text-transform:uppercase;letter-spacing:.04em}
input[type=text],input[type=number],input[type=password],input[type=datetime-local],select,textarea{
  width:100%;padding:.65rem .8rem;font:inherit;font-size:.92rem;color:var(--text);background:rgba(255,255,255,.85);
  border:1px solid var(--hair);border-radius:10px;outline:none}
textarea{resize:vertical;min-height:70px}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field{margin-bottom:.9rem}
.opt{display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem}
.opt input[type=radio]{accent-color:var(--ok);width:18px;height:18px;flex:none}
.opt .letter{font-weight:800;color:var(--text-3);width:1.2rem}
.opt.is-correct input[type=text]{border-color:rgba(21,128,61,.5);background:var(--ok-soft)}
.hint{font-size:.78rem;color:var(--text-2);margin:.2rem 0 .9rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.4rem;border:1px solid transparent;border-radius:10px;padding:.6rem 1.05rem;
  font:inherit;font-weight:700;font-size:.85rem;cursor:pointer;text-decoration:none;background:var(--glass-soft);color:var(--text);border-color:var(--hair)}
.btn:hover{filter:brightness(.97)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.primary{background:var(--accent);color:#fff}.btn.primary:hover{background:var(--accent-hover)}
.btn.danger{background:var(--bad-soft);color:var(--bad);border-color:rgba(185,28,28,.25)}
.btn.ok{background:var(--ok-soft);color:var(--ok);border-color:rgba(21,128,61,.25)}
.btn.warn{background:var(--warn-soft);color:var(--warn);border-color:rgba(180,83,9,.25)}
.btn.sm{padding:.32rem .65rem;font-size:.76rem;border-radius:8px}
.btn.block{width:100%;justify-content:center}
.row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* tables */
.table-wrap{overflow-x:auto;border-radius:14px}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);padding:.7rem .8rem;border-bottom:1px solid var(--hair);white-space:nowrap}
td{padding:.7rem .8rem;border-bottom:1px solid var(--hair);vertical-align:top}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.4)}
.badge{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.72rem;font-weight:700}
.badge.ok{background:var(--ok-soft);color:var(--ok)}.badge.bad{background:var(--bad-soft);color:var(--bad)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}.badge.neutral{background:var(--accent-soft);color:var(--accent)}
.opts-list{margin:0;padding:0;list-style:none;font-size:.82rem;color:var(--text-2);line-height:1.5}
.opts-list li.correct{color:var(--ok);font-weight:700}
.empty{text-align:center;color:var(--text-2);padding:2.2rem 1rem}
.empty i{font-size:2rem;color:var(--accent);display:block;margin-bottom:.6rem}
.toolbar{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem;align-items:center}
.toolbar input{max-width:340px}
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.tab{padding:.4rem .9rem;border-radius:999px;border:1px solid var(--hair);background:var(--glass-soft);font-weight:600;font-size:.82rem;cursor:pointer;color:var(--text-2)}
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.55rem 0;border-bottom:1px solid var(--hair)}
.list li:last-child{border-bottom:none}

/* alerts / toasts / modal */
.alert{padding:.8rem 1rem;border-radius:10px;font-size:.88rem;margin-bottom:1rem}
.alert.bad{background:var(--bad-soft);color:var(--bad)}.alert.ok{background:var(--ok-soft);color:var(--ok)}.alert.warn{background:var(--warn-soft);color:var(--warn)}
#toasts{position:fixed;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:200;max-width:min(380px,92vw)}
.toast{padding:.8rem 1rem;border-radius:12px;color:#fff;font-weight:600;font-size:.88rem;box-shadow:var(--shadow-lg);animation:in .2s ease}
.toast.ok{background:#15803d}.toast.bad{background:#b91c1c}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}
.modal{background:#fff;border-radius:16px;max-width:680px;width:100%;max-height:88vh;overflow:auto;padding:1.4rem;box-shadow:var(--shadow-lg)}
.modal header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.modal header h3{margin:0}
.x{background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--text-2)}

/* login */
.login{max-width:380px;margin:12vh auto 0;text-align:center}
.login .logo{font-size:2.4rem}
.login form{text-align:left;margin-top:1rem}

/* OMR */
.bar{height:8px;border-radius:999px;background:var(--hair);overflow:hidden;margin-top:.4rem}
.bar .fill{height:100%;width:0;background:var(--accent);border-radius:999px;transition:width .25s ease}
.omr-preview canvas{display:block;width:100%;max-width:560px;height:auto;margin:0 auto;border:1px solid var(--hair);border-radius:6px;background:#fff;box-shadow:var(--shadow)}
input[type=color]{cursor:pointer;border-radius:10px}

/* answers review, paper, slides */
.qcard{margin-bottom:1rem}
.qcard .qt{font-weight:700;margin-bottom:.6rem}
.qcard ul{list-style:none;margin:0;padding:0}
.qcard li{padding:.45rem .7rem;border-radius:8px;margin-bottom:.3rem;background:rgba(255,255,255,.6);border:1px solid var(--hair)}
.qcard li.correct{background:var(--ok-soft);border-color:rgba(21,128,61,.35)}
.qcard li.wrong{background:var(--bad-soft);border-color:rgba(185,28,28,.35)}
.qcard li.skipped{background:var(--warn-soft);border-color:rgba(180,83,9,.35)}
.paper{background:#fff;border-radius:6px;padding:2.2rem;max-width:850px;margin:0 auto}
.paper .q{margin-bottom:1.3rem;break-inside:avoid}
.paper .q b{display:block;margin-bottom:.35rem}
.paper ol{list-style:none;margin:0;padding-left:1rem}
.slide-wrap{max-width:900px;margin:0 auto}
.slide{min-height:340px;padding:2rem}
.slide .qt{font-size:1.45rem;font-weight:700;margin-bottom:1.4rem;line-height:1.35}
.slide .num{color:var(--accent);font-weight:800;font-size:.85rem;margin-bottom:.5rem}
.sopt{display:flex;gap:.8rem;align-items:center;width:100%;text-align:left;padding:.9rem 1.1rem;margin-bottom:.6rem;font:inherit;font-size:1.05rem;
  background:rgba(255,255,255,.75);border:1.5px solid var(--hair);border-radius:12px;cursor:pointer}
.sopt:hover{border-color:var(--accent)}
.sopt b{color:var(--text-3)}
.sopt.correct{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.sopt.wrong{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.rank-1 td{background:rgba(250,204,21,.16)}
@media print{
  body{background:#fff;padding:0}.topbar,#toasts,.noprint{display:none!important}
  .paper{box-shadow:none;padding:0}.card{box-shadow:none;border:none;background:none;backdrop-filter:none}
}

/* face attendance */
.face-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:760px){.face-grid{grid-template-columns:1fr}}
.face-video{width:100%;border-radius:12px;background:#000;aspect-ratio:4/3;object-fit:cover}
.face-status{margin:.7rem 0 0;color:var(--text-2);font-size:.88rem}
.face-card{display:flex;gap:1rem;align-items:flex-start}
.face-card img{width:130px;height:130px;object-fit:cover;border-radius:12px}
.face-card h3{margin:.1rem 0 .4rem}.face-card p{margin:.25rem 0;font-size:.9rem}
.face-thumb{width:48px;height:48px;border-radius:50%;object-fit:cover}

/* Question Bank */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.split2>*{min-width:0}
@media(max-width:520px){.split2{grid-template-columns:1fr}}
.toolbar select{width:auto;min-width:140px;flex:1 1 140px;max-width:220px}

/* Question Bank: sets browser */
.stabs{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.stab{border:1px solid var(--border,#dbe0ee);background:#fff;border-radius:999px;padding:.32rem .8rem;font:inherit;font-size:.8rem;font-weight:600;color:var(--text-2);cursor:pointer;display:inline-flex;gap:.45rem;align-items:center}
.stab:hover{border-color:var(--accent);color:var(--accent)}
.stab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.stab .n{font-size:.7rem;background:rgba(100,116,139,.15);border-radius:999px;padding:0 .45rem;min-width:1.2rem;text-align:center}
.stab.on .n{background:rgba(255,255,255,.25)}
.stabs .sep{width:1px;height:1.4rem;background:rgba(100,116,139,.3);margin:0 .2rem}
.setgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem}
.setcard{display:flex;flex-direction:column;gap:.25rem;text-align:left;padding:.65rem .8rem;border-radius:12px;border:1px solid var(--border,#dbe0ee);background:#fff;font:inherit;cursor:pointer;min-width:0;transition:border-color .15s,box-shadow .15s}
.setcard:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(79,70,229,.12)}
.setcard.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-soft)}
.setcard .t{font-weight:700;font-size:.9rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.setcard .m{font-size:.74rem;color:var(--text-2);display:flex;align-items:center;gap:.35rem}
.dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:#cbd5e1;flex:none}
.dot.pub{background:#16a34a}
.sbar{display:flex;gap:.7rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 .8rem}
.sbar-t{min-width:200px;flex:1}
.screate{gap:.5rem;flex-wrap:wrap;margin:.2rem 0 .8rem;padding:.7rem;border:1px dashed var(--accent);border-radius:12px;background:var(--accent-soft)}

.crumbs{display:flex;gap:.25rem;align-items:center;flex-wrap:wrap;margin-bottom:.7rem}
.crumb{border:0;background:none;font:inherit;font-size:.82rem;font-weight:600;color:var(--accent);cursor:pointer;padding:.15rem .35rem;border-radius:6px}
.crumb:hover{background:var(--accent-soft)}
.crumb.on{color:var(--text);cursor:default}
.sepc{color:var(--text-2);font-size:.8rem}


/* ===== Question paper designer ===== */
.pd-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:1rem;align-items:start}
.pd-panel{position:sticky;top:64px;max-height:calc(100vh - 80px);overflow:auto;padding-right:2px}
.pd-sec{background:rgba(255,255,255,.78);border:1px solid var(--hair);border-radius:12px;margin-bottom:.6rem}
.pd-sec summary{cursor:pointer;font-weight:700;padding:.7rem .9rem;list-style:none}
.pd-sec summary::-webkit-details-marker{display:none}
.pd-sec summary::after{content:'+';float:right;color:var(--text-3)}
.pd-sec[open] summary::after{content:'\2013'}
.pd-sec-body{padding:0 .9rem .5rem}
.pd-sec-body .field{margin-bottom:.7rem}
.pd-sec-body textarea{width:100%;font:inherit;padding:.5rem .6rem;border:1.5px solid var(--hair);border-radius:10px;background:rgba(255,255,255,.85)}
.pd-chk{display:flex;align-items:center;gap:.5rem;margin:.4rem 0;text-transform:none;letter-spacing:0;font-weight:500;cursor:pointer}
.pd-chk input{width:auto}
.pd-chk.sub{margin-left:1.5rem;font-weight:400}
.pd-bar{display:flex;gap:.8rem;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.pd-preview{background:#cbd5e1;border-radius:12px;padding:1.2rem;overflow:auto;max-height:calc(100vh - 160px)}
.pd-logo-prev{max-height:48px;max-width:120px;border:1px solid var(--hair);border-radius:6px;background:#fff;padding:2px}
@media(max-width:980px){.pd-layout{grid-template-columns:1fr}.pd-panel{position:static;max-height:none}.pd-preview{max-height:none}}

/* the paper itself: used for the on-screen preview AND for printing */
.pd-sheet{position:relative;box-sizing:border-box;width:var(--pd-w);min-height:var(--pd-h);padding:var(--pd-m);margin:0 auto;background:#fff;color:#111;
  font-size:var(--pd-fs);line-height:var(--pd-lh);box-shadow:0 8px 30px rgba(15,23,42,.28);-webkit-print-color-adjust:exact;print-color-adjust:exact;overflow:hidden}
.pd-sheet>*:not(.pd-wm):not(.pd-foot){position:relative}
.pd-head{display:flex;gap:4mm;align-items:center;margin-bottom:2.5mm;padding-bottom:2.5mm}
.pd-head.a-center{justify-content:center;text-align:center}
.pd-head.a-left{text-align:left}
.pd-head.lg-center{flex-direction:column}
.pd-head.lg-right .pd-logo{order:2}
.pd-ht{flex:0 1 auto;min-width:0}
.pd-logo{max-height:20mm;max-width:38mm;object-fit:contain}
.pd-inst{font-size:1.35em;font-weight:800;line-height:1.25}
.pd-title{font-size:1.12em;font-weight:700}
.pd-sub{font-size:.95em;color:#333}
.pd-head.h-underline{border-bottom:2px solid var(--pd-accent)}
.pd-head.h-boxed{border:1.5px solid var(--pd-accent);padding:3mm;border-radius:1.5mm}
.pd-head.h-band{background:var(--pd-accent);color:#fff;padding:3mm;border-radius:1.5mm}
.pd-head.h-band .pd-sub{color:rgba(255,255,255,.88)}
.pd-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1mm 6mm;margin:0 0 3mm;font-size:.95em}
.pd-sb{display:flex;flex-wrap:wrap;gap:3mm 6mm;margin:0 0 3.5mm}
.pd-sbw{display:flex;align-items:flex-end;gap:1.5mm;flex:1 1 40mm}
.pd-sbw em{font-style:normal;white-space:nowrap}
.pd-sbw i{flex:1;border-bottom:1px solid #444;min-width:15mm;height:1.1em}
.pd-ins{border:1px solid #999;border-left:3px solid var(--pd-accent);padding:2mm 3mm;margin:0 0 3.5mm;font-size:.92em;white-space:pre-line}
.pd-ins b{display:block;margin-bottom:.5mm}
.pd-qs{column-count:var(--pd-cols);column-gap:10mm;column-rule:1px solid #d4d4d8}
.pd-q{break-inside:avoid;page-break-inside:avoid;margin:0 0 3.5mm}
.pd-qt{display:flex;gap:1.5mm;font-weight:600}
.pd-n{flex:none;min-width:5mm}
.pd-qx{flex:1;white-space:pre-line;overflow-wrap:anywhere}
.pd-m{flex:none;font-weight:600;color:#444}
.pd-opts{margin:1mm 0 0 6.5mm}
.pd-opts.o-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.6mm 5mm}
.pd-opts.o-row{display:flex;flex-wrap:wrap;gap:.6mm 7mm}
.pd-o{display:flex;gap:1.5mm;overflow-wrap:anywhere}
.pd-ol{flex:none}
.pd-o.is-ans{font-weight:700;background:rgba(0,0,0,.08);border-radius:1mm;padding:0 1mm}
.pd-empty{color:#777;text-align:center;padding:10mm 0}
.pd-key{break-before:page;page-break-before:always;margin-top:6mm}
.pd-key h3{margin:0 0 3mm;font-size:1.1em;border-bottom:1.5px solid var(--pd-accent);padding-bottom:1.5mm}
.pd-keygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(24mm,1fr));gap:1.5mm 4mm}
.pd-wm{position:absolute;inset:0;display:grid;place-items:center;font-size:60pt;font-weight:800;color:rgba(0,0,0,.07);transform:rotate(-30deg);text-transform:uppercase;white-space:nowrap;pointer-events:none;z-index:0}
.pd-foot{position:absolute;left:0;right:0;bottom:4mm;text-align:center;font-size:8.5pt;color:#555}

@media print{
  .page-head,.pd-panel,.pd-bar{display:none!important}
  .pd-layout{display:block}
  .pd-preview{background:none;padding:0;max-height:none;overflow:visible;border-radius:0}
  .pd-sheet{width:auto!important;min-height:0!important;padding:0!important;margin:0!important;box-shadow:none!important;overflow:visible!important;zoom:1!important}
  .pd-wm{position:fixed}
  .pd-foot{position:fixed;left:0;right:0;bottom:calc(var(--pd-m) * -1 + 4mm)}
}

/* AI basic explanation under a question (Exam Questions + Question Bank) */
.expl-box{margin-top:.55rem;padding:.5rem .65rem;border-radius:10px;background:var(--bg-soft,rgba(99,102,241,.08));border:1px dashed rgba(99,102,241,.35);font-weight:400}

/* =====================================================================
   Live Chat inbox (admin only) - see chat-admin.js
   ===================================================================== */
.lc{
  --lc-spring:cubic-bezier(.2,.9,.3,1.15);--lc-ease:cubic-bezier(.22,.8,.3,1);
  display:grid;grid-template-columns:minmax(290px,350px) 1fr;height:calc(100vh - 8rem);min-height:520px;
  background:var(--glass);backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-border);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;
  animation:lc-rise .5s var(--lc-ease) both;
}
@keyframes lc-rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.lc [hidden]{display:none!important}
.lc button{font-family:inherit}

/* ---- left: conversation list ---- */
.lc-side{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--hair);background:rgba(255,255,255,.35)}
.lc-side-head{display:flex;align-items:center;gap:.6rem;padding:1rem 1rem .5rem}
.lc-side-head h3{margin:0;font-size:1.15rem;flex:1}
.lc-conn{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:600;color:var(--text-2)}
.lc-live{width:9px;height:9px;border-radius:50%;background:var(--text-3);transition:background .3s}
.lc-live.on{background:#22c55e;animation:lc-pulse 2s infinite}
@keyframes lc-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.lc-icon-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--hair);background:var(--glass-soft);color:var(--text-2);cursor:pointer;
  display:grid;place-items:center;transition:transform .2s var(--lc-spring),background .2s,color .2s}
.lc-icon-btn:hover{background:var(--accent-soft);color:var(--accent);transform:translateY(-1px)}
.lc-icon-btn:active{transform:scale(.92)}
.lc-search{margin:.35rem 1rem .6rem;padding:.6rem .85rem;border-radius:12px;border:1px solid var(--hair);background:rgba(255,255,255,.7);font:inherit;font-size:.9rem;outline:none;
  transition:border-color .2s,box-shadow .2s}
.lc-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.lc-filters{display:flex;gap:.4rem;padding:0 1rem .7rem;flex-wrap:wrap}
.lc-chip{border:1px solid var(--hair);background:var(--glass-soft);color:var(--text-2);padding:.3rem .75rem;border-radius:999px;font-size:.78rem;font-weight:600;cursor:pointer;
  transition:background .2s,color .2s,transform .2s var(--lc-spring),border-color .2s}
.lc-chip:hover{border-color:var(--accent);color:var(--accent)}
.lc-chip:active{transform:scale(.94)}
.lc-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.lc-list{flex:1;overflow-y:auto;padding:0 .5rem .6rem;scrollbar-width:thin}
.lc-none{padding:2rem 1rem;text-align:center;font-size:.9rem}
.lc-item{display:flex;gap:.7rem;width:100%;text-align:left;border:0;background:transparent;padding:.7rem .65rem;border-radius:14px;cursor:pointer;color:inherit;
  transition:background .2s,transform .25s var(--lc-ease)}
.lc-item:hover{background:rgba(255,255,255,.75);transform:translateX(2px)}
.lc-item.active{background:var(--accent-soft)}
.lc-item.lc-new{animation:lc-slide .45s var(--lc-ease) both}
@keyframes lc-slide{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.lc-avatar{position:relative;flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;
  background:linear-gradient(135deg,hsl(var(--h,235) 70% 55%),hsl(calc(var(--h,235) + 40) 75% 62%));box-shadow:0 4px 12px rgba(30,41,59,.18)}
.lc-dot{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:var(--text-3);border:2px solid #fff;transition:background .3s}
.lc-dot.on{background:#22c55e}
.lc-item-body{flex:1;min-width:0}
.lc-item-top,.lc-item-bot{display:flex;align-items:center;gap:.5rem}
.lc-item-top b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}
.lc-time{font-size:.72rem;color:var(--text-3);flex:none}
.lc-prev{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;color:var(--text-2)}
.lc-item.unread .lc-prev{color:var(--text);font-weight:600}
.lc-item.unread .lc-time{color:var(--accent);font-weight:700}
.lc-tag{font-size:.66rem;font-weight:700;padding:.1rem .45rem;border-radius:999px;background:var(--ok-soft);color:var(--ok);flex:none}
.lc-count{flex:none;min-width:20px;height:20px;padding:0 .4rem;border-radius:999px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center;
  animation:lc-pop .4s var(--lc-spring)}

/* ---- right: thread ---- */
.lc-main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.lc-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;padding:2rem}
.lc-empty-ic{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:2rem;color:var(--accent);background:var(--accent-soft);margin-bottom:.4rem;
  animation:lc-float 3.4s ease-in-out infinite}
@keyframes lc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.lc-thread{flex:1;display:flex;flex-direction:column;min-height:0;animation:lc-fade .3s ease both}
@keyframes lc-fade{from{opacity:0}to{opacity:1}}
.lc-thead{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;border-bottom:1px solid var(--hair);background:rgba(255,255,255,.5)}
.lc-back{display:none}
.lc-who{flex:1;min-width:0;display:flex;flex-direction:column}
.lc-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-sub{font-size:.78rem;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-pill{font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;background:var(--hair);color:var(--text-2);transition:background .3s,color .3s}
.lc-pill.on{background:var(--ok-soft);color:var(--ok)}
.lc-btn{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--hair);background:var(--glass-soft);color:var(--text);padding:.45rem .8rem;border-radius:10px;
  font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s,transform .2s var(--lc-spring)}
.lc-btn:hover{background:var(--accent-soft);color:var(--accent)}
.lc-btn:active{transform:scale(.95)}
.lc-btn.danger{color:var(--bad)}.lc-btn.danger:hover{background:var(--bad-soft);color:var(--bad)}

.lc-msgs{flex:1;overflow-y:auto;padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:3px;scrollbar-width:thin;
  background:radial-gradient(circle at 85% 10%,rgba(99,102,241,.07),transparent 45%),radial-gradient(circle at 10% 90%,rgba(56,189,248,.07),transparent 45%)}
.lc-day{align-self:center;margin:.8rem 0 .5rem;padding:.2rem .75rem;border-radius:999px;background:rgba(255,255,255,.8);font-size:.72rem;font-weight:600;color:var(--text-2);box-shadow:0 1px 4px rgba(30,41,59,.08)}
.lc-row{display:flex;animation:lc-in .38s var(--lc-spring) both}
.lc-row.gap{margin-top:.55rem}
.lc-row.me{justify-content:flex-end;transform-origin:100% 100%}
.lc-row.them{justify-content:flex-start;transform-origin:0 100%}
@keyframes lc-in{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}
.lc-msgs.noanim .lc-row{animation:none}
.lc-bubble{max-width:min(76%,540px);padding:.55rem .8rem .35rem;border-radius:18px;font-size:.93rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;
  box-shadow:0 2px 8px rgba(30,41,59,.08)}
.lc-row.them .lc-bubble{background:#fff;border-bottom-left-radius:6px}
.lc-row.me .lc-bubble{background:linear-gradient(135deg,var(--accent),#6366f1 55%,#0ea5e9);color:#fff;border-bottom-right-radius:6px}
.lc-meta{display:flex;justify-content:flex-end;align-items:center;gap:.3rem;font-size:.68rem;opacity:.7;margin-top:.15rem}
.lc-tick{display:inline-flex;font-size:.65rem;transition:color .3s,opacity .3s}
.lc-row.seen .lc-tick{color:#7dd3fc;opacity:1}
.lc-row.sending .lc-bubble{opacity:.65}
.lc-row.failed .lc-bubble{background:var(--bad);animation:lc-shake .4s}
@keyframes lc-shake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}

.lc-typing{display:flex;align-items:center;gap:.5rem;padding:0 1.3rem;font-size:.78rem;color:var(--text-2);height:0;overflow:hidden;opacity:0;
  transition:height .25s var(--lc-ease),opacity .25s}
.lc-typing.on{height:26px;opacity:1}
.lc-dots{display:inline-flex;gap:3px}
.lc-dots i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:lc-bounce 1.2s infinite ease-in-out}
.lc-dots i:nth-child(2){animation-delay:.15s}.lc-dots i:nth-child(3){animation-delay:.3s}
@keyframes lc-bounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}

.lc-quick{display:flex;gap:.4rem;padding:.4rem 1rem 0;overflow-x:auto;scrollbar-width:none}
.lc-quick::-webkit-scrollbar{display:none}
.lc-quick .lc-chip{white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.lc-compose{display:flex;align-items:flex-end;gap:.6rem;padding:.7rem 1rem 1rem}
.lc-input{flex:1;resize:none;max-height:130px;padding:.7rem .95rem;border-radius:16px;border:1px solid var(--hair);background:rgba(255,255,255,.85);font:inherit;font-size:.93rem;line-height:1.4;outline:none;
  transition:border-color .2s,box-shadow .2s}
.lc-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.lc-input:disabled{opacity:.6}
.lc-send{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--accent),#0ea5e9);color:#fff;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 6px 16px rgba(79,70,229,.35);transition:transform .25s var(--lc-spring),opacity .2s,box-shadow .2s}
.lc-send:hover:not(:disabled){transform:scale(1.08) rotate(-8deg)}
.lc-send:active:not(:disabled){transform:scale(.9)}
.lc-send:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}

/* nav badge + shared pop */
.lc-nav-badge{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 .35rem;margin-left:.4rem;border-radius:999px;background:var(--bad);color:#fff;font-size:.7rem;font-weight:700;
  vertical-align:middle;animation:lc-pop .4s cubic-bezier(.2,.9,.3,1.15)}
.lc-nav-badge.pop{animation:lc-pop .4s cubic-bezier(.2,.9,.3,1.15)}
@keyframes lc-pop{0%{transform:scale(.4)}60%{transform:scale(1.3)}100%{transform:scale(1)}}

/* phones: one pane at a time */
@media(max-width:760px){
  .lc{grid-template-columns:1fr;height:calc(100vh - 7rem);border-radius:14px}
  .lc .lc-main{display:none}
  .lc.show-thread .lc-side{display:none}
  .lc.show-thread .lc-main{display:flex}
  .lc-back{display:grid}
  .lc-thead{flex-wrap:wrap}
  .lc-pill{display:none}
  .lc-bubble{max-width:86%}
}
@media(prefers-reduced-motion:reduce){
  .lc *,.lc-nav-badge{animation:none!important;transition:none!important}
}

/* AI support in the Live Chat inbox */
.lc-tag.human{background:var(--bad-soft,#fee2e2);color:var(--bad,#b91c1c)}
.lc-handoff{margin:0;padding:.55rem .9rem;background:#fff7ed;border-bottom:1px solid #fed7aa;color:#9a3412;font-size:.85rem;line-height:1.4}
.lc-handoff[hidden]{display:none}
.lc-aitag{font-size:.68rem;font-weight:700;color:rgba(255,255,255,.85);margin-bottom:.15rem}
.lc-row.ai .lc-bubble{background:linear-gradient(135deg,#4f46e5,#7c3aed)}
.lc-action{align-self:center;max-width:92%;margin:.35rem 0;padding:.3rem .75rem;border-radius:12px;background:#eef2ff;color:#3730a3;font-size:.78rem;line-height:1.4;text-align:center;overflow-wrap:anywhere}
.lc-action.bad{background:#fef2f2;color:#991b1b}
.lc-action.esc{background:#fff7ed;color:#9a3412}
.lc-action-tag{font-weight:700}
.lc-action-time{margin-left:.5rem;opacity:.6}