/* =====================================================================
   SelFin — Site chatbot widget ("Fin")
   Menu-driven assistant panel: gradient header, New Loan / Help & Support
   tabs, icon-card grid, consent gate, chat transcript, composer.
   ===================================================================== */
.cb-launch{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;
  display:flex;align-items:center;gap:10px;background:var(--brand);color:#fff;border:0;border-radius:999px;
  padding:0 20px 0 14px;height:56px;box-shadow:0 10px 26px rgba(14,40,80,.28);cursor:pointer;font:700 .95rem var(--body)}
.cb-launch:hover{background:var(--brand-dark)}
.cb-launch .cb-ic{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--brand);display:grid;place-items:center;flex:none}
.cb-launch[hidden]{display:none}

.cb-panel{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:61;
  width:min(400px,calc(100vw - 24px));height:min(660px,calc(100vh - 90px));
  background:var(--paper);border-radius:20px;box-shadow:0 20px 60px rgba(10,20,40,.35);
  display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);
  transition:width .2s ease,height .2s ease}
.cb-panel[hidden]{display:none}
.cb-panel.cb-max{width:min(460px,calc(100vw - 24px));height:min(80vh,760px)}

/* ---------- Header ---------- */
.cb-head{position:relative;flex:none;padding:16px 16px 20px;overflow:hidden;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 62%,var(--accent-dark) 140%);color:#fff;text-align:center}
.cb-head::before{content:"";position:absolute;inset:-20% -10% auto auto;width:70%;height:140%;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,0) 60%);transform:rotate(12deg);pointer-events:none}
.cb-ctrls{position:absolute;top:10px;right:10px;display:flex;gap:4px;z-index:2}
.cb-ctrls button{background:rgba(255,255,255,.16);border:0;color:#fff;width:28px;height:28px;border-radius:50%;
  cursor:pointer;display:grid;place-items:center;font-size:13px}
.cb-ctrls button:hover{background:rgba(255,255,255,.3)}
.cb-avatar-lg{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;background:#fff;margin:2px auto 10px;
  display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.cb-avatar-lg svg{width:38px;height:38px}
.cb-head h2{position:relative;z-index:1;margin:0 0 4px;font:700 1.15rem var(--display);color:#fff}
.cb-head p{position:relative;z-index:1;margin:0;font-size:.82rem;line-height:1.45;color:#DCE7F5;padding:0 12px}

/* ---------- Scrollable body ---------- */
.cb-body{flex:1;overflow-y:auto;background:var(--band)}
.cb-menu{padding:16px 16px 4px}
.cb-hint{margin:0 0 12px;text-align:center;font-size:.82rem;color:var(--muted);font-weight:600}

.cb-tabs{display:flex;background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:4px;gap:4px;margin-bottom:14px}
.cb-tab{flex:1;border:0;background:transparent;border-radius:999px;min-height:38px;font:700 .84rem var(--body);color:var(--ink);cursor:pointer}
.cb-tab[aria-selected="true"]{background:var(--brand);color:#fff}

.cb-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.cb-card{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--paper);border:1.5px solid var(--line);
  border-radius:14px;padding:14px 8px;cursor:pointer;text-align:center;min-height:86px}
.cb-card:hover{border-color:var(--brand);background:var(--brand-soft)}
.cb-card .ic{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent-dark);display:grid;place-items:center;flex:none}
.cb-card span{font:600 .78rem/1.25 var(--body);color:var(--ink)}

.cb-consent{display:flex;gap:9px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:11px 12px;margin:0 0 14px;font-size:.78rem;line-height:1.4;color:var(--text)}
.cb-consent input{width:16px;height:16px;margin-top:2px;flex:none;accent-color:var(--brand)}
.cb-consent a{font-weight:700}
.cb-gate-msg{display:none;text-align:center;font-size:.78rem;color:#B3261E;font-weight:600;margin:-8px 0 14px}
.cb-gate-msg.show{display:block}

/* ---------- Chat transcript (appears once the conversation starts) ---------- */
.cb-thread{padding:4px 16px 14px;display:flex;flex-direction:column;gap:10px}
.cb-thread:empty{display:none}
.cb-row{display:flex;gap:8px;max-width:100%}
.cb-row.bot{align-self:flex-start}
.cb-row.user{align-self:flex-end;flex-direction:row-reverse}
.cb-row .cb-av{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:.7rem;font-weight:800;font-family:var(--display)}
.cb-row.bot .cb-av{background:var(--brand);color:#fff}
.cb-row.user .cb-av{background:var(--line);color:var(--ink)}
.cb-bubble{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:10px 13px;font-size:.87rem;line-height:1.5;color:var(--text);max-width:250px}
.cb-row.bot .cb-bubble{border-top-left-radius:4px}
.cb-row.user .cb-bubble{background:var(--brand);color:#fff;border-color:var(--brand);border-top-right-radius:4px}
.cb-bubble p{margin:0 0 6px}
.cb-bubble p:last-child{margin-bottom:0}
.cb-bubble ul{margin:4px 0;padding-left:1.1em}
.cb-bubble a{color:inherit;font-weight:700;text-decoration:underline}
.cb-row.user .cb-bubble a{color:#fff}
.cb-typing{display:inline-flex;gap:4px;padding:4px 2px}
.cb-typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.5;animation:cb-bounce 1s infinite}
.cb-typing span:nth-child(2){animation-delay:.15s}
.cb-typing span:nth-child(3){animation-delay:.3s}
@keyframes cb-bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
@media (prefers-reduced-motion:reduce){.cb-typing span{animation:none}}

.cb-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 14px}
.cb-chip{background:var(--paper);border:1.5px solid var(--line);color:var(--ink);border-radius:999px;
  padding:7px 13px;font:600 .78rem var(--body);cursor:pointer;min-height:32px}
.cb-chip:hover{border-color:var(--brand);color:var(--brand)}

/* ---------- Composer ---------- */
.cb-form{flex:none;display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--paper)}
.cb-form input{flex:1;font:inherit;border:1.5px solid var(--line);border-radius:999px;padding:10px 16px;min-height:42px;background:var(--band);color:var(--ink)}
.cb-form input:focus{outline:none;border-color:var(--brand)}
.cb-mic{flex:none;width:38px;height:38px;border-radius:50%;background:var(--band);color:var(--muted);border:1px solid var(--line);cursor:pointer;display:grid;place-items:center}
.cb-mic:disabled{opacity:.45;cursor:not-allowed}
.cb-mic.listening{background:#FBE3DE;color:#B3261E;border-color:#B3261E}
.cb-send{flex:none;width:40px;height:40px;border-radius:50%;background:var(--accent-dark);color:#fff;border:0;cursor:pointer;display:grid;place-items:center}
.cb-send:disabled{opacity:.5;cursor:not-allowed}
.cb-form[data-locked="true"] input{background:var(--line);color:var(--muted)}

@media (max-width:480px){
  .cb-panel{right:8px;left:8px;width:auto;bottom:8px;height:min(84vh,660px)}
  .cb-panel.cb-max{width:auto;height:min(88vh,760px)}
  .cb-launch{right:14px}
}