/* ATTEST liquid glass layer.
   Loaded after app.css. Remove the <link> in base.html (and login/onboarding/message) to revert to the flat UI. */

:root{
  --glass:linear-gradient(145deg,rgba(255,255,255,.74),rgba(255,255,255,.46));
  --glass-soft:linear-gradient(145deg,rgba(255,255,255,.62),rgba(255,255,255,.34));
  --glass-solid:rgba(255,255,255,.9);
  --glass-edge:rgba(255,255,255,.75);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.28),inset 1px 0 0 rgba(255,255,255,.4);
  --glass-drop:0 1px 1px rgba(25,50,110,.05),0 10px 28px -10px rgba(35,70,160,.22);
  --blur:blur(22px) saturate(180%);
  --blur-s:blur(12px) saturate(160%);
  --spring:cubic-bezier(.34,1.45,.5,1);
  --ease:cubic-bezier(.2,.7,.2,1);
  --line:rgba(120,140,180,.22);
  --line-soft:rgba(120,140,180,.14);
  --grey-line:rgba(120,140,180,.32);
}

/* ---- backdrop: slow-lit colour field the glass refracts ---- */
body{
  background:
    radial-gradient(900px 600px at 8% -5%,rgba(111,152,255,.55),transparent 60%),
    radial-gradient(800px 560px at 96% 4%,rgba(150,120,255,.38),transparent 62%),
    radial-gradient(900px 700px at 78% 108%,rgba(70,205,190,.40),transparent 60%),
    radial-gradient(700px 500px at 0% 100%,rgba(255,186,140,.30),transparent 62%),
    #EAF0FB;
  background-attachment:fixed;
  min-height:100vh;
}

/* ---- shell: floating sidebar ---- */
.side{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-edge);
  border-radius:26px;
  box-shadow:var(--glass-hi),var(--glass-drop);
  margin:12px 0 12px 12px;
  top:12px;height:calc(100vh - 24px);
  flex-basis:244px;
}
.brand .mark,.bot .mark{
  background:linear-gradient(160deg,#5B8CFF,#1F46B8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 10px -3px rgba(31,70,184,.55);
}
.ws{background:rgba(255,255,255,.45);border-color:rgba(255,255,255,.7);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}

.nav a{border-radius:14px;transition:background .25s var(--ease),color .2s,transform .25s var(--spring)}
.nav a:hover{background:rgba(255,255,255,.55)}
.nav a:active{transform:scale(.97)}
.nav a.on{
  background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.6));
  color:var(--accent-dark);
  box-shadow:var(--glass-hi),0 6px 16px -6px rgba(36,87,214,.35),0 0 0 1px rgba(36,87,214,.10);
  view-transition-name:navpill;   /* the highlight glides between pages */
}
.chats a:hover{background:rgba(255,255,255,.5)}
.me{border-top-color:var(--line)}
.avatar{background:linear-gradient(160deg,#fff,#DCE6FB);box-shadow:inset 0 1px 0 #fff,0 2px 6px -2px rgba(36,87,214,.35)}

/* ---- surfaces ---- */
.card,.stat,.tl article,.rec,.box,.empty,.verdict,.job{
  -webkit-backdrop-filter:var(--blur-s);backdrop-filter:var(--blur-s);
}
.card,.box{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-edge);border-radius:22px;
  box-shadow:var(--glass-hi),var(--glass-drop);
}
.stat{background:var(--glass-soft);border:1px solid var(--glass-edge);border-radius:18px;box-shadow:var(--glass-hi),0 6px 16px -10px rgba(35,70,160,.25)}
.rec,.tl article{
  background:var(--glass-soft);border:1px solid var(--glass-edge);border-radius:18px;
  box-shadow:var(--glass-hi),0 6px 18px -10px rgba(35,70,160,.22);
}
.tl .dot{box-shadow:0 0 0 3px rgba(255,255,255,.75),0 2px 6px rgba(35,70,160,.25)}
.tl .line{background:linear-gradient(rgba(120,140,180,.35),rgba(120,140,180,.08))}
.empty{background:rgba(255,255,255,.4);border:1px dashed rgba(100,120,170,.4);border-radius:18px}
.flash{border-radius:14px;-webkit-backdrop-filter:var(--blur-s);backdrop-filter:var(--blur-s)}
.flash.ok{background:color-mix(in srgb,var(--ok-bg) 78%,transparent)}
.flash.error{background:color-mix(in srgb,var(--bad-bg) 78%,transparent)}
.listlink:hover{background:rgba(255,255,255,.45);border-radius:10px}
th{color:var(--muted)}

/* ---- job tiles: lift + sheen ---- */
.job{
  position:relative;overflow:hidden;
  background:var(--glass-soft);border:1px solid var(--glass-edge);border-radius:18px;
  box-shadow:var(--glass-hi),0 6px 16px -10px rgba(35,70,160,.25);
  transition:transform .35s var(--spring),box-shadow .3s var(--ease),background .3s;
}
.job::after{ /* light sweep on hover */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.7) 48%,transparent 66%);
  transform:translateX(-120%);transition:transform .7s var(--ease);
}
.job:hover{
  background:var(--glass);border-color:rgba(255,255,255,.95);
  transform:translateY(-3px);
  box-shadow:var(--glass-hi),0 16px 30px -12px rgba(36,87,214,.38);
}
.job:hover::after{transform:translateX(120%)}
.job:active{transform:translateY(-1px) scale(.98)}

/* ---- pills, chips, badges ---- */
.pill{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.pill.bad{background:color-mix(in srgb,var(--bad-bg) 70%,transparent)}
.pill.warn{background:color-mix(in srgb,var(--warn-bg) 70%,transparent)}
.pill.ok{background:color-mix(in srgb,var(--ok-bg) 70%,transparent)}
.pill.info{background:color-mix(in srgb,var(--accent-soft) 70%,transparent)}
.pill.teal{background:color-mix(in srgb,var(--teal-bg) 70%,transparent)}
.pill.violet{background:color-mix(in srgb,var(--violet-bg) 70%,transparent)}
.pill.amber{background:color-mix(in srgb,var(--amber-bg) 70%,transparent)}
.pill.grey{background:color-mix(in srgb,var(--grey-bg) 60%,transparent)}
.pill.plain{background:rgba(255,255,255,.6)}
.chip,.suggest button{
  background:linear-gradient(160deg,rgba(255,255,255,.8),rgba(255,255,255,.45));
  border:1px solid var(--glass-edge);box-shadow:var(--glass-hi),0 2px 6px -3px rgba(35,70,160,.2);
  -webkit-backdrop-filter:var(--blur-s);backdrop-filter:var(--blur-s);
  transition:transform .3s var(--spring),box-shadow .25s,background .25s;
}
.chip:hover,.suggest button:hover{background:linear-gradient(160deg,#fff,rgba(255,255,255,.65));transform:translateY(-1px)}
.chip:active,.suggest button:active{transform:scale(.96)}
.chip.on{
  background:linear-gradient(160deg,rgba(232,238,251,.95),rgba(190,208,248,.6));
  border-color:rgba(36,87,214,.45);
  box-shadow:var(--glass-hi),0 4px 12px -4px rgba(36,87,214,.4);
}
.badge{background:linear-gradient(160deg,#F0604F,#B3261A);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 6px -1px rgba(179,38,26,.5)}

/* ---- buttons: glossy ---- */
.btn{
  background:linear-gradient(180deg,#4F83F5 0%,#2457D6 55%,#1E4CBF 100%);
  border:1px solid rgba(23,63,163,.6);border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.12),0 6px 14px -6px rgba(36,87,214,.65);
  transition:transform .3s var(--spring),box-shadow .25s,filter .2s;
}
.btn:hover{background:linear-gradient(180deg,#5D8FFA 0%,#2A5FE0 55%,#2250C8 100%);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.12),0 10px 20px -8px rgba(36,87,214,.7)}
.btn:active{transform:scale(.97);filter:brightness(.96)}
.btn.ghost,.btn.danger,.gbtn{
  background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(255,255,255,.5));
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-hi),0 3px 8px -4px rgba(35,70,160,.25);
  -webkit-backdrop-filter:var(--blur-s);backdrop-filter:var(--blur-s);
}
.btn.ghost:hover,.gbtn:hover{background:linear-gradient(160deg,#fff,rgba(255,255,255,.7))}
.btn.danger:hover{background:linear-gradient(160deg,#fff,rgba(253,232,230,.8))}
.linkbtn{transition:color .2s}

/* ---- inputs ---- */
input[type=text],input[type=email],select,textarea{
  background:rgba(255,255,255,.55);border:1px solid var(--grey-line);border-radius:12px;
  box-shadow:inset 0 1px 2px rgba(25,50,110,.08);
  transition:background .25s,border-color .25s,box-shadow .25s;
}
input[type=text]:focus,input[type=email]:focus,select:focus,textarea:focus{
  background:rgba(255,255,255,.85);border-color:var(--accent);outline:0;
  box-shadow:inset 0 1px 2px rgba(25,50,110,.06),0 0 0 4px rgba(36,87,214,.16);
}
.choice{background:rgba(255,255,255,.55);border-radius:14px;border-color:var(--grey-line);transition:transform .3s var(--spring),background .25s,border-color .25s}
.choice:hover{background:rgba(255,255,255,.85)}
.choice:has(input:checked){background:linear-gradient(160deg,rgba(232,238,251,.95),rgba(190,208,248,.6));box-shadow:var(--glass-hi),0 4px 12px -4px rgba(36,87,214,.35)}

/* ---- the one hero moment: the ask capsule ---- */
.ask{
  position:relative;
  background:linear-gradient(150deg,rgba(255,255,255,.85),rgba(255,255,255,.52));
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.9);border-radius:26px;
  padding:14px 14px 14px 22px;
  box-shadow:var(--glass-hi),0 2px 2px rgba(25,50,110,.04),0 18px 40px -16px rgba(36,87,214,.35);
  transition:box-shadow .35s var(--ease),transform .35s var(--spring);
}
.ask::before{ /* specular rim that brightens on focus */
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from 210deg,rgba(255,255,255,0),rgba(111,152,255,.0),rgba(111,152,255,.9),rgba(150,120,255,.8),rgba(70,205,190,.8),rgba(255,255,255,0));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity .4s var(--ease);
}
.ask:focus-within{border-color:rgba(255,255,255,.95);box-shadow:var(--glass-hi),0 0 0 5px rgba(36,87,214,.10),0 22px 46px -16px rgba(36,87,214,.5);transform:translateY(-1px)}
.ask:focus-within::before{opacity:1}
.ask textarea{background:transparent;box-shadow:none;border:0}
.ask textarea:focus{background:transparent;box-shadow:none}
.ask button{
  border-radius:50%;
  background:linear-gradient(180deg,#5B8CFF,#2457D6 60%,#1E4CBF);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 14px -4px rgba(36,87,214,.7);
  transition:transform .3s var(--spring),filter .2s;
}
.ask button:hover{background:linear-gradient(180deg,#6C98FF,#2A5FE0 60%,#2250C8);transform:scale(1.07)}
.ask button:active{transform:scale(.93)}
.ask button[disabled]{background:linear-gradient(180deg,#B5C6F0,#9FB3E6)}

/* ---- chat ---- */
.bubble-user{
  background:linear-gradient(160deg,#4F83F5,#2457D6 60%,#1E4CBF);
  border-radius:22px 22px 6px 22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 20px -10px rgba(36,87,214,.7);
}
.typing i{background:#7F93BE}
.thread > .msg:last-child{animation:glass-in .45s var(--spring) both}
@keyframes glass-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* ---- verdict banners: tinted glass ---- */
.verdict{border-radius:16px;border-color:var(--glass-edge);box-shadow:var(--glass-hi)}
.verdict.ok{background:color-mix(in srgb,var(--ok-bg) 75%,transparent)}
.verdict.warn{background:color-mix(in srgb,var(--warn-bg) 75%,transparent)}
.verdict.bad{background:color-mix(in srgb,var(--bad-bg) 75%,transparent)}
.verdict.info{background:color-mix(in srgb,var(--accent-soft) 75%,transparent)}

/* ---- sub navigation: segmented glass ---- */
.subnav{display:inline-flex;gap:2px;padding:4px;border:1px solid var(--glass-edge);border-radius:999px;background:var(--glass-soft);box-shadow:var(--glass-hi);-webkit-backdrop-filter:var(--blur-s);backdrop-filter:var(--blur-s);flex-wrap:wrap}
.subnav a{border-bottom:0;margin:0;padding:6px 16px;border-radius:999px;transition:background .25s,color .2s}
.subnav a:hover{background:rgba(255,255,255,.55)}
.subnav a.on{background:linear-gradient(160deg,#fff,rgba(255,255,255,.65));box-shadow:var(--glass-hi),0 3px 10px -3px rgba(36,87,214,.35)}

/* ---- focus ---- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}

/* ---- page-to-page fluidity (Chrome / Edge / Safari; ignored elsewhere) ---- */
@view-transition{navigation:auto}
.side{view-transition-name:side}
::view-transition-group(side){animation-duration:0s}
::view-transition-group(navpill){animation-duration:.45s;animation-timing-function:var(--spring)}
::view-transition-old(root){animation:vt-out .18s ease both}
::view-transition-new(root){animation:vt-in .32s var(--ease) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}

/* ---- small screens ---- */
@media (max-width:820px){
  .side{margin:10px;top:auto;height:auto;flex:1 1 100%;border-radius:22px;position:static}
  .subnav{display:flex}
  .ask{border-radius:24px}
}

/* ---- fallbacks ---- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass:rgba(255,255,255,.94);--glass-soft:rgba(255,255,255,.92)}
  .ask{background:rgba(255,255,255,.96)}
}
@media (prefers-reduced-transparency:reduce){
  :root{--glass:rgba(255,255,255,.97);--glass-soft:rgba(255,255,255,.95)}
  *{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
}
@media (prefers-contrast:more){
  :root{--glass:rgba(255,255,255,.98);--glass-soft:rgba(255,255,255,.98);--glass-edge:rgba(60,80,120,.5)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  .job:hover,.chip:hover,.btn:hover,.ask:focus-within{transform:none}
}
@media print{
  body{background:#fff}
  .card,.rec,.tl article,.stat,.verdict{background:#fff;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
}

.info{background:rgba(255,255,255,.7);box-shadow:var(--glass-hi)}
.suggest button{min-height:30px;font-size:11.5px}