/* Voice2Claim — shell topbar tím + sidebar trắng + trang nền tảng (light).
   Chuẩn motion theo emil-design-eng: ease-out custom, <300ms, chỉ animate
   transform/opacity, :active scale, @starting-style, reduced-motion. */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --side-w:238px; --topbar-h:58px;
}

/* ---------- topbar tím (nhận diện Voice2Claim) ---------- */
.topbar{position:sticky;top:0;z-index:60;display:flex;gap:14px;align-items:center;
  padding:9px 20px;min-height:var(--topbar-h);
  background:linear-gradient(95deg,#6252d8,#7c63ea 55%,#9a79f2);color:#fff;
  box-shadow:0 2px 16px rgba(90,74,201,.30)}
.tb-logo{display:flex;gap:11px;align-items:center;font-weight:800;font-size:17px;
  color:#fff;text-decoration:none}
.tb-logo .mic{width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.94);display:grid;place-items:center;font-size:18px}
.tb-logo small{display:block;font-weight:500;font-size:11px;
  color:rgba(255,255,255,.78)}
.tb-right{margin-left:auto;position:relative}

.tb-video{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);
  color:#fff;font-weight:700;font-size:12px;border-radius:999px;padding:6px 13px;
  transition:transform 160ms var(--ease-out),background 150ms var(--ease-out)}
.tb-video:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.tb-video:hover{background:rgba(255,255,255,.24)}}

/* ---------- popup video hướng dẫn ---------- */
.intro-ov{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:rgba(24,20,58,.55);backdrop-filter:blur(3px);
  transition:opacity 200ms var(--ease-out);
  @starting-style{opacity:0}
}
.intro-card{width:min(940px,94vw);background:var(--panel);border-radius:18px;
  overflow:hidden;box-shadow:0 24px 70px rgba(24,20,58,.35);
  transition:transform 240ms var(--ease-out),opacity 240ms var(--ease-out);
  @starting-style{opacity:0;transform:scale(.96) translateY(8px)}
}
.intro-head{display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--line)}
.intro-head .tb-logo{color:var(--txt)}
.intro-head .tb-logo small{color:var(--dim)}
.intro-head .mic{background:var(--acc-bg)}
.intro-x{margin-left:auto;border:1px solid var(--line);background:var(--bg2);
  color:var(--dim);width:32px;height:32px;border-radius:9px;font-size:13px;
  transition:transform 160ms var(--ease-out),color 150ms var(--ease-out)}
.intro-x:active{transform:scale(.92)}
@media(hover:hover) and (pointer:fine){.intro-x:hover{color:var(--txt)}}
.intro-card video{display:block;width:100%;max-height:62vh;background:#0e0c22}
.lang-pick{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:26px 22px}
@media(max-width:640px){.lang-pick{grid-template-columns:1fr}}
.lang-btn{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:26px 16px;border:1.5px solid var(--line);border-radius:14px;
  background:var(--bg2);text-align:center;
  transition:transform 160ms var(--ease-out),border-color 150ms var(--ease-out),
             background 150ms var(--ease-out)}
.lang-btn .flag{font-size:40px;line-height:1}
.lang-btn b{font-size:16px}
.lang-btn small{color:var(--dim);font-size:11.5px}
.lang-btn:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){
  .lang-btn:hover{border-color:var(--acc);background:var(--acc-bg)}}
@media(prefers-reduced-motion:reduce){.lang-btn:active{transform:none}}
.intro-foot{display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:12px 18px;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){
  .intro-ov{transition:opacity 180ms ease}
  .intro-card{transition:opacity 180ms ease;transform:none;
    @starting-style{opacity:0;transform:none}}
  .tb-video:active,.intro-x:active{transform:none}
}

/* ---------- shell ---------- */
.shell{display:flex;min-height:calc(100vh - var(--topbar-h))}
.side{width:var(--side-w);flex-shrink:0;position:sticky;top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h));
  display:flex;flex-direction:column;gap:4px;padding:14px 10px 12px;
  background:var(--panel);border-right:1px solid var(--line)}
.main{flex:1;min-width:0;padding:18px 22px 60px;max-width:1380px}
.main .wrap{max-width:none;padding:0}

.snav{flex:1;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.sgroup{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--dim2);padding:14px 10px 5px}
.sitem{display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-radius:9px;color:var(--dim);font-weight:600;font-size:13px;
  text-decoration:none;border:0;background:transparent;cursor:pointer;
  transition:background 150ms var(--ease-out),color 150ms var(--ease-out),
             transform 160ms var(--ease-out)}
.sitem .ic{width:20px;text-align:center;font-size:14px}
.sitem:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){
  .sitem:hover{background:rgba(109,90,232,.08);color:var(--txt)}
}
.sitem.on{background:var(--acc-bg);color:#4f43b5;box-shadow:inset 3px 0 0 var(--acc)}

/* role switcher (trên topbar — mở xuống) */
.rolebtn{display:flex;align-items:center;gap:9px;padding:6px 10px;
  border:1px solid rgba(255,255,255,.35);border-radius:11px;
  background:rgba(255,255,255,.14);color:#fff;text-align:left;min-width:190px;
  transition:transform 160ms var(--ease-out),background 150ms var(--ease-out)}
.rolebtn:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.rolebtn:hover{background:rgba(255,255,255,.22)}}
.rolebtn .who{flex:1;min-width:0}
.rolebtn b{display:block;font-size:12.5px}
.rolebtn small{display:block;color:rgba(255,255,255,.75);font-size:10.5px}
.ritem small{display:block;color:var(--dim);font-size:10.5px}
.rolebtn .car{color:rgba(255,255,255,.8);transition:transform 180ms var(--ease-out)}
.rolebtn .car.up{transform:rotate(180deg)}
.av{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.9);
  color:var(--txt);flex-shrink:0;display:grid;place-items:center;font-size:14px}
.rolepick{position:absolute;top:calc(100% + 8px);right:0;left:auto;width:250px;
  z-index:70;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:5px;box-shadow:0 14px 34px rgba(51,48,116,.20);
  transform-origin:top right;
  transition:transform 160ms var(--ease-out),opacity 160ms var(--ease-out);
  @starting-style{opacity:0;transform:scale(.95) translateY(-4px)}
}
.ritem{display:flex;align-items:center;gap:9px;width:100%;padding:7px 8px;
  border:0;border-radius:9px;background:transparent;text-align:left;
  color:var(--txt);
  transition:background 130ms var(--ease-out),transform 160ms var(--ease-out)}
.ritem .av{background:var(--acc-bg)}
.ritem:active{transform:scale(.98)}
@media(hover:hover) and (pointer:fine){.ritem:hover{background:var(--bg2)}}
.ritem.on{background:var(--acc-bg)}
.ritem b{font-size:12.5px}

/* ---------- nút bấm phản hồi ---------- */
.btn,.tag,nav button,.switcher button{
  transition:transform 160ms var(--ease-out),background 150ms var(--ease-out),
             border-color 150ms var(--ease-out),color 150ms var(--ease-out)}
.btn:active,.tag:active,nav button:active,.switcher button:active{transform:scale(.97)}

/* ---------- vào trang: stagger nhẹ ---------- */
.stag{opacity:1;transform:translateY(0);
  transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out);
  transition-delay:calc(var(--d,0)*45ms);
  @starting-style{opacity:0;transform:translateY(8px)}
}

/* ---------- trang: tiêu đề ---------- */
.ptitle{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.ptitle h1{font-size:19px;font-weight:800}
.ptitle small{color:var(--dim);font-size:12px;display:block;font-weight:500}
.ptitle .right{margin-left:auto;display:flex;gap:8px;align-items:center}

/* ---------- dashboard ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin-bottom:14px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:13px 15px;box-shadow:var(--shadow)}
.kpi b{font-size:26px;font-family:var(--mono);line-height:1.15;display:block}
.kpi label{color:var(--dim);font-size:11.5px;font-weight:700}
.kpi small{color:var(--dim2);font-size:10.5px;display:block;margin-top:2px}
.kpi.accent b{color:var(--acc)}
.kpi.ok b{color:var(--ok)}
.kpi.warn b{color:var(--warn)}

.feed{display:flex;flex-direction:column;max-height:430px;overflow-y:auto}
.fitem{display:flex;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);
  font-size:12.5px;align-items:flex-start}
.fitem:last-child{border-bottom:0}
.fitem .fav{width:26px;height:26px;border-radius:8px;background:var(--bg2);
  display:grid;place-items:center;font-size:13px;flex-shrink:0}
.fitem.ai .fav{background:var(--acc-bg)}
.fitem .ft{color:var(--dim2);font-family:var(--mono);font-size:10.5px;
  white-space:nowrap;padding-top:2px}
.fitem .fmsg{min-width:0}
.fitem .fmsg b{font-size:11px;color:#5b4fd0;font-weight:700}
.fitem .fmsg span{display:block;color:var(--txt)}

/* ---------- CRM ---------- */
.crm-cols{display:grid;grid-template-columns:minmax(420px,7fr) minmax(340px,5fr);
  gap:14px;align-items:start}
@media(max-width:1100px){.crm-cols{grid-template-columns:1fr}}
.subtabs{display:flex;gap:6px;margin-bottom:12px}
.subtabs button{padding:8px 15px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel);color:var(--dim);font-weight:700;font-size:12.5px;
  transition:background 150ms var(--ease-out),color 150ms var(--ease-out),
             border-color 150ms var(--ease-out),transform 160ms var(--ease-out)}
.subtabs button:active{transform:scale(.97)}
.subtabs button.on{background:var(--acc-bg);color:#4f43b5;border-color:var(--acc)}
.rowlink{cursor:pointer;transition:background 130ms var(--ease-out)}
@media(hover:hover) and (pointer:fine){.rowlink:hover{background:rgba(109,90,232,.06)}}
.rowlink.sel{background:rgba(109,90,232,.11)}
.rowlink:active{background:rgba(109,90,232,.15)}  /* press cue — không transform trên <tr> */

.stp{font-size:10px;font-weight:800;border-radius:6px;padding:2px 8px;
  white-space:nowrap;border:1px solid transparent}
.stp.s-received,.stp.s-pending_assignment{background:var(--acc-bg);color:#5b4fd0}
.stp.s-investigating,.stp.s-pending_review,.stp.s-pending_approval,.stp.s-pending_sign,.stp.s-draft{background:var(--warn-bg);color:#b97e0b}
.stp.s-approved,.stp.s-paid,.stp.s-active,.stp.s-done{background:var(--ok-bg);color:#178a55}
.stp.s-rejected,.stp.s-cancelled,.stp.s-failed{background:var(--dan-bg);color:#c74560}
.stp.s-expired,.stp.s-open{background:#eef0f9;color:var(--dim)}

.d360 .who{display:flex;gap:12px;align-items:center;padding:14px}
.d360 .who .bigav{width:46px;height:46px;border-radius:13px;background:var(--acc-bg);
  display:grid;place-items:center;font-size:22px}
.d360 .who b{font-size:16px;display:block}
.d360 .who small{color:var(--dim);font-family:var(--mono);font-size:11px}
.d360 .meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 12px}
.d360 .meta div{background:var(--bg2);border:1px solid var(--line);
  border-radius:9px;padding:7px 10px;font-size:12px;min-width:0;word-break:break-word}
.d360 .meta label{display:block;color:var(--dim2);font-size:10px}
.mini{padding:6px 14px 12px;display:flex;flex-direction:column;gap:7px}
.mini .mrow{display:flex;gap:9px;align-items:center;background:var(--bg2);
  border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:12.5px}
a.mrow{transition:transform 160ms var(--ease-out),border-color 150ms var(--ease-out)}
a.mrow:active{transform:scale(.98)}
@media(hover:hover) and (pointer:fine){a.mrow:hover{border-color:var(--acc)}}
.starbtn{background:none;border:0;font-size:18px;padding:0 1px;
  transition:transform 140ms var(--ease-out),opacity 130ms var(--ease-out)}
.starbtn:active{transform:scale(.9)}
.mini .mrow .grow{flex:1;min-width:0}
.mini .mrow small{color:var(--dim2);font-size:10.5px;display:block}
.tl{padding:4px 14px 14px}
.tl .titem{display:flex;gap:10px;font-size:12px;padding:6px 0;
  border-left:2px solid var(--line);padding-left:12px;margin-left:6px;position:relative}
.tl .titem::before{content:"";position:absolute;left:-4.5px;top:11px;width:7px;
  height:7px;border-radius:50%;background:var(--acc)}
.tl .titem .tt{color:var(--dim2);font-family:var(--mono);font-size:10px;
  white-space:nowrap;padding-top:1px}
.detail-swap{transition:opacity 180ms var(--ease-out)}
.detail-swap.loading{opacity:.35}

/* ---------- wfviz: đồ thị workflow ---------- */
.wfviz{overflow-x:auto;overflow-y:hidden;background:var(--bg2);
  border-radius:12px;border:1px solid var(--line)}
.wfviz-inner{position:relative}
.wfviz svg{position:absolute;inset:0;pointer-events:none}
.wfedge{fill:none;stroke:#d3d7ec;stroke-width:2}
.wfedge.else{stroke-dasharray:5 4}
.wfedge.walked{stroke:var(--acc2)}
.wfpill{position:absolute;transform:translate(-50%,-50%);z-index:2;
  font-family:var(--mono);font-size:9.5px;color:#b97e0b;
  background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:999px;
  padding:1px 8px;white-space:nowrap;max-width:150px;overflow:hidden;
  text-overflow:ellipsis}
.wfpill.else{color:var(--dim);background:var(--panel);border-color:var(--line)}
.wfnode{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;
  padding:8px 10px;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--low);border-radius:11px;box-shadow:var(--shadow);
  transition:transform 160ms var(--ease-out),border-color 150ms var(--ease-out),
             box-shadow 150ms var(--ease-out)}
.wfnode.clickable{cursor:pointer}
@media(hover:hover) and (pointer:fine){
  .wfnode.clickable:hover{border-color:var(--acc);
    box-shadow:0 4px 16px rgba(109,90,232,.20)}}
.wfnode:active{transform:scale(.97)}
.wfnode .wic{font-size:17px}
.wfnode .wtxt{min-width:0}
.wfnode .wtxt b{display:block;font-size:11.5px;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:112px}
.wfnode .wtxt small{color:var(--dim2);font-size:9px;font-family:var(--mono)}
.wfnode .wst{margin-left:auto;font-size:12px;font-weight:900}
.wfnode.t-branch{border-left-color:var(--warn)}
.wfnode.t-end{border-left-color:var(--acc2)}
.wfnode.st-done{border-color:var(--ok-line);border-left-color:var(--ok)}
.wfnode.st-done .wst{color:var(--ok)}
.wfnode.st-current{border-color:var(--acc);border-left-color:var(--acc);
  animation:wfpulse 1.6s infinite}
.wfnode.st-current .wst{color:var(--acc)}
.wfnode.st-waiting{border-color:var(--warn-line);border-left-color:var(--warn)}
.wfnode.st-waiting .wst{color:var(--warn)}
.wfnode.st-failed{border-color:var(--dan-line);border-left-color:var(--danger)}
.wfnode.st-failed .wst{color:var(--danger)}
.wfnode.st-skipped{opacity:.38}
@keyframes wfpulse{50%{box-shadow:0 0 22px rgba(109,90,232,.32)}}

/* trang workflow */
.wfcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:12px}
.wfcard{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:13px;padding:15px 16px;text-decoration:none;color:inherit;
  box-shadow:var(--shadow);
  transition:transform 160ms var(--ease-out),border-color 150ms var(--ease-out)}
.wfcard:active{transform:scale(.98)}
@media(hover:hover) and (pointer:fine){.wfcard:hover{border-color:var(--acc)}}
.wfcard .big{font-size:24px}
.wfcard b{display:block;font-size:14.5px;margin:6px 0 3px}
.wfcard small{color:var(--dim);font-size:11.5px;line-height:1.5;display:block}
.wfcard .meta{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.vchip{font-size:10px;font-weight:800;font-family:var(--mono);
  border:1px solid var(--acc-line);color:#5b4fd0;border-radius:6px;
  padding:2px 7px;background:var(--acc-bg)}
.formrow{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(max-width:700px){.formrow{grid-template-columns:1fr}}
.fin{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--dim)}
.fin input,.fin textarea,.fin select{background:var(--panel);border:1px solid var(--line);
  color:var(--txt);border-radius:8px;padding:8px 10px;font:inherit;
  transition:border-color 140ms var(--ease-out)}
.fin input:focus,.fin textarea:focus{outline:none;border-color:var(--acc)}
.steplog{font-family:var(--mono);font-size:11px;line-height:1.9;
  padding:10px 14px;max-height:300px;overflow-y:auto}
.steplog .ok{color:#178a55}.steplog .warn{color:#b97e0b}
.steplog .err{color:#c74560}.steplog .dim{color:var(--dim2)}

/* ---------- reduced motion: giữ opacity, bỏ chuyển động ---------- */
@media(prefers-reduced-motion:reduce){
  .stag{transition:opacity 200ms ease;transform:none;
    @starting-style{opacity:0;transform:none}}
  .rolepick{transition:opacity 150ms ease;
    @starting-style{opacity:0;transform:none}}
  .sitem:active,.btn:active,.tag:active,.rolebtn:active,.ritem:active,
  nav button:active,.switcher button:active,.wfnode:active,.wfcard:active,
  a.mrow:active,.starbtn:active,.subtabs button:active{transform:none}
  .rolebtn .car{transition:none}
  .wfnode.st-current{animation:none;box-shadow:0 0 0 1px var(--acc)}
}

/* ---------- responsive: sidebar thành thanh ngang ---------- */
@media(max-width:960px){
  .shell{flex-direction:column}
  .side{width:100%;height:auto;position:static;flex-direction:column;
    border-right:0;border-bottom:1px solid var(--line)}
  .snav{flex-direction:row;flex-wrap:wrap;gap:4px}
  .sgroup{display:none}
  .topbar{flex-wrap:wrap}
  .rolebtn{min-width:0}
}