/* =========================================================
   HEAL AI — style.css
   Design tokens match HealCarto Landing Page + Marketplace exactly.
   ========================================================= */

:root{
  --navy:#10233F;
  --navy-2:#1A3358;
  --teal:#1FA394;
  --teal-deep:#178275;
  --teal-tint:#E7F6F3;
  --gold:#C8A64B;
  --gold-deep:#AD8B3B;
  --gold-tint:#F7F0DF;
  --silver:#8FA098;
  --silver-line:#DCE3DF;
  --silver-bg:#F1F4F2;
  --deep-bg:#081C18;
  --deep-card:#10312B;
  --deep-line:rgba(200,166,75,0.35);
  --deep-ink:#FFFFFF;
  --deep-ink-soft:#AEB8B5;
  --success:#22A06B;
  --warning:#F5A524;
  --danger:#E5484D;

  --bg:#FFFFFF;
  --bg-soft:#F6F9F7;
  --bg-elevated:#FFFFFF;
  --ink:#10233F;
  --ink-soft:#5B6B7C;
  --ink-faint:#8B98A6;
  --line:#EBEEF1;

  --r-btn:16px;
  --r-card:24px;
  --r-bubble:20px;
  --maxw:1280px;
  --pad:80px;
  --header-h:76px;

  --shadow:0 2px 4px rgba(16,35,63,0.04), 0 20px 48px -18px rgba(16,35,63,0.14);
  --shadow-lg:0 4px 10px rgba(16,35,63,0.05), 0 36px 80px -24px rgba(16,35,63,0.22);
  --glow-gold:0 0 0 1px rgba(200,166,75,0.35), 0 30px 70px -22px rgba(8,28,24,0.55);
}

/* ---------------- DARK MODE ---------------- */
html[data-theme="dark"]{
  --bg:#081C18;
  --bg-soft:#0C2521;
  --bg-elevated:#10312B;
  --ink:#FFFFFF;
  --ink-soft:#AEB8B5;
  --ink-faint:#7C8B86;
  --line:rgba(200,166,75,0.18);
  --shadow:0 2px 4px rgba(0,0,0,0.25), 0 20px 48px -18px rgba(0,0,0,0.5);
  --shadow-lg:0 4px 10px rgba(0,0,0,0.3), 0 36px 80px -24px rgba(0,0,0,0.6);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .35s ease, color .35s ease;
}
::selection{background:var(--teal); color:#fff;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
button{font-family:inherit;}
.serif{font-family:'DM Serif Display',serif; font-weight:400;}
.mono{font-family:'JetBrains Mono',monospace;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;}
h1,h2,h3,h4{color:var(--ink);}
h1{font-size:clamp(38px,6vw,64px); line-height:1.04; letter-spacing:-0.02em;}
h2{font-size:clamp(24px,3.4vw,36px); line-height:1.15; letter-spacing:-0.015em;}
.cap{font-size:13.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--teal-deep);}
.cap.gold{color:var(--gold-deep);}

/* magnetic cursor glow */
#cursorGlow{
  position:fixed; top:0; left:0; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,166,75,0.14), transparent 68%);
  transform:translate(-50%,-50%); pointer-events:none; z-index:998;
  transition:opacity .3s ease; opacity:0; will-change:transform;
}
#cursorGlow.show{opacity:1;}
@media (hover:none){ #cursorGlow{display:none;} }

/* ---------------- BUTTONS ---------------- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:var(--r-btn); font-weight:700; font-size:15px; cursor:pointer; border:1.5px solid transparent; transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, background .22s ease, color .22s ease; position:relative; overflow:hidden;}
.btn:active{transform:scale(.96);}
.btn-primary{background:linear-gradient(135deg,#DCC080,var(--gold) 55%,var(--gold-deep)); color:#10231D; box-shadow:0 10px 24px -10px rgba(200,166,75,.5);}
.btn-primary:hover{background:linear-gradient(135deg,#E6CB8F,var(--gold-deep) 60%,#93752F); transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(200,166,75,.6);}
.btn-ghost{background:var(--bg-elevated); border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--gold); transform:translateY(-2px);}
.btn-icon{width:44px; height:44px; padding:0; border-radius:50%; background:var(--bg-elevated); border:1.5px solid var(--line); color:var(--ink-soft); justify-content:center;}
.btn-icon:hover{border-color:var(--gold); color:var(--gold-deep);}
.btn-sm{padding:10px 18px; font-size:13.5px;}

/* ---------------- GLASS DARK CARD (brand-consistent premium accent) ---------------- */
.glass-dark{
  background:linear-gradient(155deg, rgba(16,49,43,.94), rgba(8,28,24,.94));
  border:1px solid var(--deep-line); border-radius:var(--r-card); color:var(--deep-ink);
  box-shadow:var(--glow-gold); position:relative; overflow:hidden;
}
.glass-dark::before{content:""; position:absolute; top:-40%; left:-20%; width:70%; height:70%; background:radial-gradient(circle, rgba(200,166,75,.14), transparent 70%); pointer-events:none;}

/* ---------------- HEADER / NAV ---------------- */
header{position:sticky; top:0; z-index:200; background:rgba(255,255,255,.78); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border-bottom:1px solid var(--line); transition:background .35s ease, border-color .35s ease;}
html[data-theme="dark"] header{background:rgba(8,28,24,.82);}
header nav{display:flex; align-items:center; justify-content:space-between; max-width:var(--maxw); margin:0 auto; padding:16px var(--pad); height:var(--header-h);}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; color:var(--ink);}
.brand-badge{font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:var(--gold-tint); color:var(--gold-deep); padding:3px 8px; border-radius:999px; margin-left:2px;}
.nav-links{display:flex; gap:28px; font-size:14.5px; font-weight:600; color:var(--ink-soft);}
.nav-links a{position:relative; padding:4px 0;}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--gold); transition:right .28s cubic-bezier(.2,.8,.2,1);}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after,
.nav-links a.active::after{right:0;}
.nav-links a.active{color:var(--gold-deep);}
.nav-right{display:flex; align-items:center; gap:12px;}
.theme-toggle{width:44px; height:44px; border-radius:50%; background:var(--bg-elevated); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft); transition:border-color .2s ease, transform .2s ease;}
.theme-toggle:hover{border-color:var(--gold); transform:rotate(14deg);}
.theme-toggle .sun{display:none;}
html[data-theme="dark"] .theme-toggle .moon{display:none;}
html[data-theme="dark"] .theme-toggle .sun{display:block;}
.burger{display:none; width:42px; height:42px; border-radius:12px; border:1.5px solid var(--line); background:var(--bg-elevated); align-items:center; justify-content:center; cursor:pointer;}
@media (max-width:980px){ .nav-links{display:none;} .burger{display:flex;} }

.drawer{position:fixed; inset:0; z-index:300; visibility:hidden; pointer-events:none;}
.drawer.open{visibility:visible; pointer-events:auto;}
.drawer-bg{position:absolute; inset:0; background:rgba(16,35,63,.4); opacity:0; transition:opacity .3s ease;}
.drawer.open .drawer-bg{opacity:1;}
.drawer-panel{position:absolute; top:0; right:0; bottom:0; width:min(310px,86vw); background:var(--bg-elevated); padding:26px 24px; transform:translateX(100%); transition:transform .38s cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column; gap:4px;}
.drawer.open .drawer-panel{transform:translateX(0);}
.drawer-panel a{padding:13px 4px; font-weight:700; font-size:16px; border-bottom:1px solid var(--line); color:var(--ink);}
.drawer-close{align-self:flex-end; width:36px; height:36px; border-radius:10px; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; margin-bottom:8px; cursor:pointer; background:var(--bg-elevated);}

/* ---------------- HERO ---------------- */
.hai-hero{position:relative; padding:64px 0 46px; overflow:hidden; text-align:center;}
.hai-hero-bg{position:absolute; inset:0; z-index:-1; overflow:hidden;}
.hai-blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.55;}
.hai-blob-1{width:480px; height:480px; background:radial-gradient(circle, var(--teal-tint), transparent 70%); top:-200px; left:-140px; animation:hai-float 15s ease-in-out infinite;}
.hai-blob-2{width:420px; height:420px; background:radial-gradient(circle, var(--gold-tint), transparent 70%); top:-80px; right:-140px; animation:hai-float 18s ease-in-out infinite reverse;}
.hai-eyebrow{display:inline-flex; align-items:center; gap:8px; background:var(--teal-tint); color:var(--teal-deep); padding:8px 16px; border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:.03em; margin-bottom:22px;}
.hai-eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--teal); animation:hai-pulse-dot 1.8s ease-in-out infinite;}
.hai-hero h1{max-width:760px; margin:0 auto;}
.hai-hero h1 .accent{color:var(--gold-deep);}
.hai-hero-sub{margin:20px auto 0; max-width:480px; font-size:16.5px; color:var(--ink-soft); display:flex; flex-direction:column; gap:2px;}

/* ---------------- MODE SELECTION ---------------- */
.mode-section{padding:14px 0 40px;}
.mode-section .shead{text-align:center; max-width:560px; margin:0 auto 30px;}
.mode-section .shead p{color:var(--ink-soft); margin-top:8px; font-size:15px;}
.mode-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
.mode-card{
  background:var(--bg-elevated); border:1.5px solid var(--line); border-radius:18px;
  padding:20px 16px; text-align:center; cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
  position:relative;
}
.mode-card:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--silver-line);}
.mode-card.selected{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), var(--shadow); background:linear-gradient(165deg,var(--gold-tint),var(--bg-elevated) 70%);}
.mode-card.selected::after{content:"✓"; position:absolute; top:8px; right:10px; width:18px; height:18px; border-radius:50%; background:var(--gold); color:#10231D; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;}
.mode-icon{font-size:28px; margin-bottom:10px; display:inline-block;}
.mode-card h4{font-size:14.5px; font-weight:800; color:var(--ink); margin-bottom:6px;}
.mode-card .mode-tags{font-size:11px; color:var(--ink-faint); line-height:1.5;}

/* ---------------- MAIN CHAT LAYOUT ---------------- */
.hai-main{display:grid; grid-template-columns:1fr 300px; gap:26px; align-items:start; padding-bottom:60px;}

/* chat panel */
.chat-panel{background:var(--bg-elevated); border:1.5px solid var(--line); border-radius:28px; box-shadow:var(--shadow-lg); overflow:hidden; display:flex; flex-direction:column; height:640px;}
.chat-topbar{display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--line); background:var(--bg-soft);}
.chat-topbar-left{display:flex; align-items:center; gap:10px;}
.chat-avatar{width:34px; height:34px; border-radius:10px; background:linear-gradient(155deg,var(--teal),var(--teal-deep)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:13px;}
.chat-topbar-title{font-weight:800; font-size:14.5px; color:var(--ink);}
.chat-topbar-mode{font-size:11.5px; color:var(--ink-faint);}
.chat-topbar-actions{display:flex; gap:8px;}
.chat-topbar-actions button{width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--bg-elevated); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.chat-topbar-actions button:hover{border-color:var(--gold); color:var(--gold-deep);}

.chat-scroll{flex:1; overflow-y:auto; padding:26px 24px; display:flex; flex-direction:column; gap:20px;}
.chat-scroll::-webkit-scrollbar{width:6px;}
.chat-scroll::-webkit-scrollbar-thumb{background:var(--silver-line); border-radius:99px;}

.chat-empty{margin:auto; text-align:center; max-width:400px;}
.chat-empty .ic{width:64px; height:64px; border-radius:20px; background:linear-gradient(155deg,var(--teal-tint),var(--gold-tint)); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:28px;}
.chat-empty h3{font-size:19px; margin-bottom:8px; color:var(--ink);}
.chat-empty p{font-size:14px; color:var(--ink-soft);}

.msg-row{display:flex; gap:12px; max-width:86%;}
.msg-row.user{align-self:flex-end; flex-direction:row-reverse;}
.msg-avatar{width:30px; height:30px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff;}
.msg-row.ai .msg-avatar{background:linear-gradient(155deg,var(--teal),var(--teal-deep));}
.msg-row.user .msg-avatar{background:linear-gradient(155deg,var(--navy),var(--navy-2));}
.msg-body{display:flex; flex-direction:column; gap:6px;}
.msg-bubble{padding:13px 17px; border-radius:var(--r-bubble); font-size:15px; line-height:1.6;}
.msg-row.ai .msg-bubble{background:var(--bg-soft); color:var(--ink); border-bottom-left-radius:6px;}
.msg-row.user .msg-bubble{background:linear-gradient(155deg,var(--navy),var(--navy-2)); color:#fff; border-bottom-right-radius:6px;}
.msg-bubble p{margin-bottom:8px;}
.msg-bubble p:last-child{margin-bottom:0;}
.msg-bubble ul{margin:6px 0 6px 18px;}
.msg-bubble li{margin-bottom:4px;}
.msg-bubble strong{color:var(--gold-deep);}
.msg-row.user .msg-bubble strong{color:#F4E3B6;}
.msg-bubble code{background:rgba(0,0,0,.06); padding:1px 6px; border-radius:6px; font-family:'JetBrains Mono',monospace; font-size:13px;}
.msg-meta{display:flex; align-items:center; gap:10px; font-size:11px; color:var(--ink-faint); padding:0 3px;}
.msg-row.user .msg-meta{justify-content:flex-end;}
.msg-actions{display:flex; gap:6px;}
.msg-actions button{background:none; border:none; color:var(--ink-faint); cursor:pointer; display:flex; align-items:center; gap:4px; font-size:11px; padding:2px 4px; border-radius:6px; transition:color .2s ease;}
.msg-actions button:hover{color:var(--gold-deep);}
.msg-actions button.copied{color:var(--success);}

.typing-row{display:flex; gap:12px; max-width:86%;}
.typing-bubble{background:var(--bg-soft); padding:15px 18px; border-radius:var(--r-bubble); border-bottom-left-radius:6px; display:flex; gap:5px; align-items:center;}
.typing-bubble span{width:7px; height:7px; border-radius:50%; background:var(--teal); animation:hai-bounce 1.2s ease-in-out infinite;}
.typing-bubble span:nth-child(2){animation-delay:.15s;}
.typing-bubble span:nth-child(3){animation-delay:.3s;}

/* quick chips */
.quick-chips{display:flex; gap:9px; flex-wrap:wrap; padding:14px 24px; border-top:1px solid var(--line); background:var(--bg-soft);}
.chip{background:var(--bg-elevated); border:1.5px solid var(--line); color:var(--ink-soft); font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:999px; cursor:pointer; transition:border-color .2s ease, color .2s ease, transform .2s ease;}
.chip:hover{border-color:var(--gold); color:var(--gold-deep); transform:translateY(-2px);}

/* input area */
.chat-input-wrap{padding:16px 20px 20px;}
.chat-input-bar{
  display:flex; align-items:flex-end; gap:8px; background:rgba(255,255,255,.6);
  border:1.5px solid var(--line); border-radius:22px; padding:8px 8px 8px 18px;
  backdrop-filter:blur(10px); box-shadow:var(--shadow); transition:border-color .2s ease, box-shadow .2s ease;
}
html[data-theme="dark"] .chat-input-bar{background:rgba(16,49,43,.5);}
.chat-input-bar:focus-within{border-color:var(--gold); box-shadow:0 0 0 4px rgba(200,166,75,.12), var(--shadow);}
.chat-input-bar textarea{
  flex:1; border:none; outline:none; background:transparent; resize:none; font-family:inherit;
  font-size:15px; color:var(--ink); max-height:120px; padding:9px 0; line-height:1.5;
}
.chat-input-bar textarea::placeholder{color:var(--ink-faint);}
.input-actions{display:flex; align-items:center; gap:4px;}
.input-icon-btn{width:38px; height:38px; border-radius:50%; border:none; background:transparent; color:var(--ink-faint); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease, color .2s ease;}
.input-icon-btn:hover{background:var(--bg-soft); color:var(--ink-soft);}
.send-btn{width:42px; height:42px; border-radius:50%; border:none; background:linear-gradient(135deg,#DCC080,var(--gold) 55%,var(--gold-deep)); color:#10231D; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; box-shadow:0 8px 18px -8px rgba(200,166,75,.55); transition:transform .2s ease;}
.send-btn:hover{transform:scale(1.07);}
.send-btn:disabled{opacity:.45; cursor:not-allowed; transform:none;}
.input-hint{text-align:center; font-size:11px; color:var(--ink-faint); margin-top:10px;}

/* ---------------- SIDEBAR ---------------- */
.hai-sidebar{display:flex; flex-direction:column; gap:16px; position:sticky; top:calc(var(--header-h) + 20px);}
.side-card{background:var(--bg-elevated); border:1.5px solid var(--line); border-radius:20px; padding:20px;}
.side-card h5{font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:14px; display:flex; align-items:center; gap:7px;}
.tip-text{font-size:14.5px; color:var(--ink); line-height:1.55;}
.tip-text .tip-icon{margin-bottom:8px; font-size:20px; display:block;}
.emg-list{display:flex; flex-direction:column; gap:9px;}
.emg-row{display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:8px 10px; border-radius:10px; background:var(--bg-soft);}
.emg-row .lbl{color:var(--ink-soft);}
.emg-row .num{font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--danger);}
.saved-list, .bookmark-list{display:flex; flex-direction:column; gap:8px;}
.saved-item, .bookmark-item{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-soft); padding:8px 9px; border-radius:10px; cursor:pointer; transition:background .2s ease;}
.saved-item:hover, .bookmark-item:hover{background:var(--bg-soft); color:var(--ink);}
.empty-mini{font-size:12.5px; color:var(--ink-faint); font-style:italic;}
.calc-shortcut{display:flex; flex-direction:column; gap:10px;}
.calc-row{display:flex; gap:8px;}
.calc-row input{flex:1; min-width:0; padding:9px 10px; border-radius:10px; border:1.5px solid var(--line); background:var(--bg-soft); color:var(--ink); font-size:13px; font-family:inherit;}
.calc-result{font-size:13px; color:var(--ink-soft); background:var(--bg-soft); border-radius:10px; padding:10px 12px; min-height:38px; display:flex; align-items:center; justify-content:space-between;}
.calc-result b{color:var(--gold-deep); font-family:'JetBrains Mono',monospace;}

/* ---------------- DISCLAIMER ---------------- */
.hai-disclaimer{padding:0 0 60px;}
.disclaimer-box{display:flex; gap:14px; align-items:flex-start; background:var(--teal-tint); border:1px solid rgba(31,163,148,.25); border-radius:18px; padding:20px 24px; max-width:900px; margin:0 auto;}
.disclaimer-box svg{flex-shrink:0; color:var(--teal-deep); margin-top:2px;}
.disclaimer-box p{font-size:13.5px; color:#0e4c44; line-height:1.6;}
.disclaimer-box strong{color:var(--teal-deep);}

/* ---------------- FOOTER ---------------- */
footer{border-top:1px solid var(--line); padding:36px 0;}
.foot-bottom{text-align:center; font-size:13px; color:var(--ink-faint);}

/* skeleton loader */
.skeleton-row{display:flex; gap:12px; max-width:86%;}
.skeleton-bubble{width:220px; height:44px; border-radius:var(--r-bubble); border-bottom-left-radius:6px; background:linear-gradient(90deg, var(--bg-soft) 0%, var(--line) 50%, var(--bg-soft) 100%); background-size:200% 100%; animation:hai-shimmer 1.4s ease-in-out infinite;}

/* page transition overlay */
.page-transition{position:fixed; inset:0; background:var(--bg); z-index:9999; display:flex; align-items:center; justify-content:center; transition:opacity .5s ease, visibility .5s ease;}
.page-transition.hide{opacity:0; visibility:hidden;}
.page-transition .mark{width:52px; height:52px; animation:hai-pulse-scale 1.1s ease-in-out infinite;}