/* THE CONSULTING ROOM — bixso.ai/portal (update Version 1, mockup-approved 30/07/2026).
   BIXSO design language: Heritage Teal, squared, editorial. Chat is the centre;
   two symmetric wings (Hồ sơ trái · Advisor Dock phải) open by default. */

.room{height:calc(100vh - 74px);min-height:540px;display:flex;flex-direction:column;background:#fff;color:var(--tint);}
.room *{box-sizing:border-box;}

/* ── journey bar — 5 stations ── */
.journey{display:flex;align-items:stretch;border-bottom:1px solid var(--hair);background:linear-gradient(180deg,#FCFDFD,var(--paper-2));padding:0 8px;flex:0 0 auto;}
.jst{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 8px;position:relative;transition:all .5s var(--ease);min-width:0;}
.jst + .jst::before{content:'';position:absolute;left:-13px;top:50%;width:26px;height:1.5px;background:var(--hair);transition:background .5s;}
.jst.done + .jst::before,.jst.now::before{background:var(--teal);}
.jst__n{width:29px;height:29px;flex:0 0 auto;display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:700;border:1.5px solid var(--hair);color:var(--faint);background:#fff;transition:all .5s var(--ease);}
.jst.done .jst__n{background:var(--teal);border-color:var(--teal);color:#fff;}
.jst.now .jst__n{border-color:var(--teal-deep);color:var(--teal-deep);box-shadow:0 0 0 4px rgba(0,166,166,.16);animation:jpulse 2s infinite;font-weight:800;}
@keyframes jpulse{50%{box-shadow:0 0 0 7px rgba(0,166,166,.06)}}
.jst__x{min-width:0;overflow:hidden;}
.jst__t{font-size:12.5px;font-weight:800;letter-spacing:-.01em;color:var(--faint);white-space:nowrap;transition:color .4s;}
.jst__d{font-family:var(--mono);font-size:8.5px;letter-spacing:.04em;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85;}
.jst.done .jst__t{color:var(--tint);}
.jst.now .jst__t,.jst.now .jst__d{color:var(--teal-deep);}
.jst .tip{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--tint);color:#fff;font-size:11.5px;padding:8px 12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s;z-index:40;}
.jst:hover .tip{opacity:1;}

/* ceremony toast */
.cere{position:absolute;left:50%;top:130px;transform:translateX(-50%) translateY(-10px);background:var(--tint);color:#fff;padding:11px 20px;font-size:13.5px;display:flex;gap:10px;align-items:center;opacity:0;pointer-events:none;transition:all .5s var(--ease);z-index:45;box-shadow:0 18px 40px -12px rgba(0,0,0,.4);}
.cere.go{opacity:1;transform:translateX(-50%) translateY(0);}
.cere i{color:#7fd4d4;font-style:normal;}

/* ── zones ── */
.rzone{flex:1;display:flex;min-height:0;position:relative;}

/* left wing — Hồ sơ (open by default, symmetric with dock) */
.wing{width:242px;flex:0 0 auto;border-right:1px solid var(--hair);background:var(--paper-2);padding:14px 12px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;}
.wing h4,.dock h4{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:2px 2px;margin:0;}
.wrow{border:1px solid var(--hair);background:#fff;padding:10px 12px;font-size:12.5px;cursor:pointer;color:var(--tint);transition:border-color .2s;}
.wrow:hover{border-color:var(--teal);}
.wrow.cur{border-left:3px solid var(--teal);background:var(--teal-tint);}
.wrow span{display:block;font-family:var(--mono);font-size:9px;color:var(--faint);margin-top:3px;}
.wrow .wact{float:right;color:var(--faint);font-size:12px;border:0;background:none;cursor:pointer;padding:0 2px;}
.wrow .wact:hover{color:var(--teal-deep);}
.wnew{border:1px dashed var(--teal);color:var(--teal-deep);padding:10px;text-align:center;font-size:12.5px;font-weight:650;cursor:pointer;background:none;}
.wnew:hover{background:var(--teal-tint);}
.wdrop{border:1px dashed var(--hair);color:var(--faint);padding:12px;text-align:center;font-family:var(--mono);font-size:10px;cursor:pointer;transition:all .2s;}
.wdrop:hover,.wdrop.over{border-color:var(--teal);color:var(--teal-deep);background:var(--teal-tint);}

/* chat centre — the hero */
.cchat{flex:1;display:flex;flex-direction:column;min-width:0;background:#fff;}
.cthread{flex:1;overflow-y:auto;padding:24px 30px;display:flex;flex-direction:column;gap:13px;scroll-behavior:smooth;}
.cm{max-width:74%;padding:12px 16px;font-size:14.5px;line-height:1.62;white-space:pre-wrap;word-wrap:break-word;}
.cm--u{align-self:flex-end;background:var(--paper-2);border-right:3px solid var(--ink-700);}
.cm--a{align-self:flex-start;background:var(--teal-tint);border-left:3px solid var(--teal);}
.cm--pend{opacity:.55;}
.cmeta{font-family:var(--mono);font-size:9.5px;color:var(--faint);margin-top:6px;letter-spacing:.04em;}

/* inline artifacts — documents on the desk */
.art{align-self:stretch;max-width:660px;margin-right:auto;border:1px solid var(--hair);background:#fff;box-shadow:0 10px 30px -18px rgba(10,40,44,.25);}
.art__head{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--hair);background:var(--paper-2);font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep);}
.art__body{padding:13px 16px;font-size:12.5px;color:var(--soft);line-height:1.65;}
.art__body b{color:var(--tint);}
.art--receipt .tick{color:var(--teal-deep);font-weight:700;margin-right:4px;}
.art--doc{border-left:4px solid var(--teal-deep);}
.art--doc .art__body{white-space:pre-wrap;color:var(--tint);font-size:13.5px;}
.art--doc .seal{float:right;font-family:var(--mono);font-size:8.5px;border:1.5px solid var(--teal-deep);color:var(--teal-deep);padding:4px 8px;letter-spacing:.08em;transform:rotate(3deg);margin:0 0 6px 10px;}
.art--dia .art__body{padding:10px;}
.art--dia svg{display:block;width:100%;height:auto;}
.art--team .art__body{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;}
.art--team .tstate{font-family:var(--mono);font-size:10px;padding:5px 10px;border:1px solid var(--teal);color:var(--teal-deep);background:var(--teal-tint);}

.ctyping{align-self:flex-start;display:flex;gap:5px;padding:13px 15px;background:var(--teal-tint);border-left:3px solid var(--teal);}
.ctyping i{width:6px;height:6px;background:var(--teal-deep);animation:tk 1.2s infinite;}
.ctyping i:nth-child(2){animation-delay:.2s}.ctyping i:nth-child(3){animation-delay:.4s}
@keyframes tk{0%,80%,100%{opacity:.25}40%{opacity:1}}
.cnotice{align-self:center;font-family:var(--mono);font-size:11px;color:var(--faint);text-align:center;padding:7px 13px;border:1px dashed var(--hair);max-width:88%;}
.cnotice a{color:var(--teal-deep);}

.cquick{display:flex;gap:8px;padding:0 30px 10px;flex-wrap:wrap;}
.qk{font-size:13px;padding:8px 14px;border:1px solid var(--teal);color:var(--teal-deep);background:#fff;cursor:pointer;font-family:var(--sans);}
.qk:hover{background:var(--teal-tint);}
.catts{display:flex;gap:6px;padding:0 30px 8px;flex-wrap:wrap;}
.catt{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;padding:5px 9px;border:1px solid var(--hair);background:var(--paper-2);color:var(--tint);}
.catt button{border:0;background:none;cursor:pointer;color:var(--faint);font-size:12px;padding:0;}

.cform{display:flex;border-top:1px solid var(--hair);flex:0 0 auto;}
.cform .clip{flex:0 0 auto;width:48px;border:0;border-right:1px solid var(--hair);background:#fff;font-size:17px;cursor:pointer;color:var(--ink-700);}
.cform .clip:hover{background:var(--teal-tint);}
.cform textarea{flex:1;border:0;resize:none;padding:15px 16px;font-family:var(--sans);font-size:14.5px;line-height:1.5;max-height:120px;color:var(--tint);outline:none;}
.cform textarea:focus{background:#FAFDFD;}
.cform button[type=submit]{flex:0 0 auto;padding:0 26px;border:0;background:var(--tint);color:#fff;font-family:var(--sans);font-weight:700;font-size:14px;cursor:pointer;}
.cform button[type=submit]:hover{background:var(--teal-deep);}
.cfoot{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--faint);padding:7px 30px;border-top:1px solid var(--hair);background:var(--paper-2);flex:0 0 auto;}

/* right wing — Advisor Dock */
.dock{width:242px;flex:0 0 auto;border-left:1px solid var(--hair);background:var(--paper-2);padding:14px 12px;display:flex;flex-direction:column;gap:9px;overflow-y:auto;position:relative;}
.dt{border:1px solid var(--hair);background:#fff;padding:11px 12px;cursor:pointer;transition:all .25s var(--ease);position:relative;}
.dt:hover{border-color:var(--teal);transform:translateX(-2px);}
.dt__l{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--tint);}
.dt__s{font-family:var(--mono);font-size:9.5px;color:var(--soft);margin-top:4px;letter-spacing:.02em;line-height:1.5;}
.dt--hot{border-color:var(--teal);background:var(--teal-tint);}
.dt .bump{position:absolute;top:-6px;right:-6px;background:var(--teal-deep);color:#fff;font-family:var(--mono);font-size:9px;padding:2px 6px;opacity:0;transform:scale(.6);}
.dt .bump.go{animation:bump 1.8s var(--ease) forwards;}
@keyframes bump{10%{opacity:1;transform:scale(1.15)}30%{transform:scale(1)}80%{opacity:1}100%{opacity:0}}

/* dock expand panel (overlay — never squeezes the chat) */
.dpanel{position:absolute;right:242px;top:0;bottom:0;width:320px;background:#fff;border-left:1px solid var(--hair);box-shadow:-18px 0 44px -22px rgba(10,40,44,.3);padding:18px;display:none;flex-direction:column;gap:10px;overflow-y:auto;z-index:30;}
.dpanel.open{display:flex;}
.dpanel h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);margin:0;}
.dpanel .dclose{position:absolute;top:10px;right:12px;border:0;background:none;font-size:14px;color:var(--faint);cursor:pointer;}
.maprow{border-bottom:1px solid var(--hair);padding:9px 0;font-size:12.5px;color:var(--tint);}
.maprow b{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:3px;}
.maprow .tick{color:var(--teal-deep);font-weight:700;margin-right:4px;}
.maprow .dim{color:var(--faint);}
.dpanel .art--dia{margin:0;max-width:100%;}

/* BSC modal */
.bscmodal{position:fixed;inset:0;background:rgba(12,41,45,.55);display:none;place-items:center;z-index:80;backdrop-filter:blur(3px);padding:20px;}
.bscmodal.open{display:grid;}
.bsc{width:min(780px,100%);max-height:92vh;overflow-y:auto;background:#fff;border:1px solid var(--hair);box-shadow:0 40px 90px -20px rgba(0,0,0,.5);padding:24px;position:relative;color:var(--tint);}
.bsc h3{font-size:19px;font-weight:800;letter-spacing:-.015em;margin:0;}
.bsc h3 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--teal-deep);}
.bsc .sub{font-family:var(--mono);font-size:9.5px;color:var(--soft);letter-spacing:.06em;margin:5px 0 16px;}
.bsc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.bsc__wing{display:flex;flex-direction:column;gap:8px;}
.bsc__wt{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:var(--teal-deep);padding:4px 0;}
.cell{border:1px solid var(--hair);padding:9px 10px;min-height:60px;font-size:11px;line-height:1.5;color:var(--faint);background:var(--paper-2);}
.cell b{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px;color:var(--faint);}
.cell.lit{background:var(--teal-tint);border-color:var(--teal);color:var(--tint);}
.cell.lit b{color:var(--teal-deep);}
.bsc__heart{grid-column:1/-1;border:2px solid var(--teal-deep);background:linear-gradient(135deg,var(--teal-tint),#fff);padding:12px 16px;text-align:center;font-size:12.5px;color:var(--tint);}
.bsc__heart b{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--teal-deep);font-size:15px;}
.bsc .bclose{position:absolute;top:12px;right:14px;border:0;background:none;font-size:15px;color:var(--faint);cursor:pointer;}

/* signed-out gate */
.rgate{flex:1;display:grid;place-items:center;padding:30px;}
.rgatecard{width:min(430px,100%);border:1px solid var(--hair);background:#fff;box-shadow:0 30px 70px -30px rgba(10,40,44,.3);padding:34px;display:flex;flex-direction:column;gap:13px;}
.rgatecard h3{font-family:var(--serif);font-size:27px;font-weight:500;letter-spacing:-.01em;color:var(--tint);margin:0;}
.rgatecard h3 em{color:var(--teal-deep);font-style:italic;}
.rgatecard p{margin:0;color:var(--soft);font-size:14.5px;line-height:1.65;}
.rgoogle{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 18px;border:1px solid var(--hair);background:#fff;font-size:15px;font-weight:650;color:var(--tint);cursor:pointer;font-family:var(--sans);}
.rgoogle:hover{border-color:var(--teal);}
.ror{font-family:var(--mono);font-size:10.5px;color:var(--faint);text-align:center;letter-spacing:.08em;}
.rgatecard input{font-family:var(--sans);font-size:15px;padding:12px 14px;border:1px solid var(--hair);color:var(--tint);}
.rgatecard input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,166,166,.12);}
.rsub{padding:13px 18px;border:0;background:var(--tint);color:#fff;font-weight:700;font-size:15px;cursor:pointer;font-family:var(--sans);}
.rsub:hover{background:var(--teal-deep);}
.rswitch{border:0;background:none;font-size:13px;color:var(--teal-deep);cursor:pointer;text-decoration:underline;text-align:left;padding:0;font-family:var(--sans);}
.rerr{color:#B42318;font-size:13.5px;margin:0;}
.rnote{font-family:var(--mono);font-size:9.5px;color:var(--faint);letter-spacing:.03em;}

/* mobile */
.pbar{display:none;border-top:1px solid var(--hair);background:var(--paper-2);flex:0 0 auto;}
.pb{flex:1;text-align:center;padding:11px 4px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);cursor:pointer;border:0;background:none;border-top:2px solid transparent;}
.pb.on{color:var(--teal-deep);border-top-color:var(--teal);font-weight:700;}
.sheet{display:none;position:fixed;left:0;right:0;bottom:0;top:auto;max-height:70vh;background:#fff;border-top:1px solid var(--hair);box-shadow:0 -24px 60px -20px rgba(10,40,44,.4);padding:14px 16px 22px;z-index:70;overflow-y:auto;flex-direction:column;gap:9px;}
.sheet.open{display:flex;}
.sheet .grab{width:40px;height:4px;background:var(--hair);margin:0 auto 8px;flex:0 0 auto;}

@media (max-width:960px){
  .room{height:calc(100dvh - 74px);}
  .wing,.dock{display:none;}
  .pbar{display:flex;}
  .cm{max-width:88%;}
  .cthread{padding:16px;}
  .cquick,.catts{padding-left:16px;padding-right:16px;}
  .cfoot{display:none;}
  .jst__d{display:none;}
  .jst{gap:7px;padding:10px 4px;}
  .jst__n{width:24px;height:24px;font-size:9.5px;}
  .jst__t{font-size:10.5px;}
  .dpanel{position:fixed;inset:auto 0 0 0;width:auto;max-height:70vh;border-left:0;border-top:1px solid var(--hair);}
  .bsc__grid{grid-template-columns:1fr;}
  .bsc{padding:18px;}
}
@media (prefers-reduced-motion:reduce){.room *{animation:none!important;transition:none!important;}}