/* HIVE AI — styles for the Profile entry card and the full-screen chat. Loaded after hive.css, so it uses the same
   navy / teal / amber palette and the same --head / --font families. Everything here is scoped to .ai-* classes. */
:root{--ai-hex:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);}
body.ai-on{overscroll-behavior:none;}

@keyframes aiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes aiBreathe{0%,100%{transform:scale(1);filter:drop-shadow(0 0 8px rgba(251,191,36,.32))}50%{transform:scale(1.09);filter:drop-shadow(0 0 16px rgba(45,212,191,.6))}}
@keyframes aiDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes aiFade{from{opacity:0}to{opacity:1}}
@keyframes aiUp{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}

/* ---------- the hexagon "orb": HIVE AI's face ---------- */
.ai-orb{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;flex-shrink:0;filter:drop-shadow(0 0 10px rgba(251,191,36,.35))}
.ai-orb svg{display:block;width:100%;height:100%}
.ai-orb.sm{width:34px;height:34px}
.ai-orb.xs{width:26px;height:26px;margin-top:2px;filter:drop-shadow(0 0 6px rgba(251,191,36,.3))}
body.ai-busy .ai-brand .ai-orb{animation:aiBreathe 1.8s ease-in-out infinite}

/* ---------- Profile entry card (same gold glow Hive uses for AI heads-ups) ---------- */
.ai-entry{display:flex;align-items:center;gap:14px;cursor:pointer;border-color:var(--gold);box-shadow:0 0 22px rgba(251,191,36,.12);transition:transform .12s,box-shadow .2s}
.ai-entry:hover{box-shadow:0 0 30px rgba(251,191,36,.22)}
.ai-entry:active{transform:scale(.985)}
.ai-entry-t{flex:1;min-width:0}
.ai-entry-t b{font-family:var(--head);font-size:15px}
.ai-entry-t .hsub{margin-top:2px}
.ai-pill{margin-left:8px;padding:2px 8px;border-radius:999px;background:rgba(251,191,36,.15);color:var(--gold);font-size:10.5px;font-weight:800;vertical-align:1px}
.ai-go{flex-shrink:0;font-size:26px;line-height:1;color:var(--gold)}

/* ---------- top bar ---------- */
.top.ai-top{justify-content:flex-start;gap:10px;padding:max(12px,env(safe-area-inset-top,0px)) 16px 10px;background:var(--bg);border-bottom:1px solid var(--line)}
.ai-top .back-btn{flex-shrink:0;padding:0;font-family:inherit}
.ai-brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.ai-brand>div{min-width:0}
.ai-brand b{display:block;font-family:var(--head);font-size:16px;line-height:1.2}
.ai-brand small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11.5px;color:var(--muted);transition:color .2s}
body.ai-busy .ai-brand small{color:var(--primary)}
.ai-tools{display:flex;gap:8px;flex-shrink:0}
.ai-ib{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--text);font-family:inherit;cursor:pointer;transition:transform .12s,border-color .2s}
.ai-ib:hover{border-color:var(--primary)}
.ai-ib:active{transform:scale(.92)}

/* ---------- thread ---------- */
.ai-body{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;padding:14px 18px 12px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ai-body::-webkit-scrollbar{width:6px}
.ai-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.ai-col{width:100%;max-width:720px;margin:0 auto}

/* welcome */
.ai-welcome{display:flex;flex-direction:column;min-height:100%;padding:4px 0 6px}
.ai-hero{max-width:460px;margin:auto auto 16px;text-align:center}
.ai-hero h2{margin:12px 0 6px;font-family:var(--head);font-size:25px;line-height:1.2}
.ai-hero p{max-width:400px;margin:0 auto;color:var(--muted);font-size:14px;line-height:1.5}
.ai-cluster{position:relative;width:132px;height:84px;margin:0 auto;filter:drop-shadow(0 10px 22px rgba(251,191,36,.26))}
.ai-cluster i{position:absolute;display:block;clip-path:var(--ai-hex)}
.ai-cluster i:nth-child(1){left:0;top:32px;width:38px;height:42px;background:linear-gradient(160deg,#5eead4,#2dd4bf 60%,#0ea5a4);animation:aiFloat 3.6s -1.1s ease-in-out infinite}
.ai-cluster i:nth-child(2){left:34px;top:0;width:60px;height:68px;background:linear-gradient(160deg,#fde68a,#fbbf24 55%,#f97316);animation:aiFloat 4.2s ease-in-out infinite}
.ai-cluster i:nth-child(2)::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--bg)}
.ai-cluster i:nth-child(3){left:92px;top:40px;width:30px;height:34px;background:linear-gradient(160deg,#fbbf24,#f97316);animation:aiFloat 3.2s -2s ease-in-out infinite}

.ai-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ai-sug{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:11px;padding:11px 13px;text-align:left;color:var(--text);font-family:inherit;background:var(--card);border:1px solid var(--line);border-radius:16px;cursor:pointer;
  animation:hvPop .4s cubic-bezier(.2,1.25,.4,1) backwards;animation-delay:calc(var(--i)*45ms + 120ms);transition:border-color .2s,background .2s,transform .12s}
.ai-sug span{grid-row:1 / span 2;display:grid;place-items:center;width:34px;height:38px;font-size:17px;background:rgba(45,212,191,.14);clip-path:var(--ai-hex)}
.ai-sug b{align-self:end;font-size:14px;font-weight:700;line-height:1.25}
.ai-sug small{align-self:start;font-size:12px;line-height:1.3;color:var(--muted)}
.ai-sug:hover{border-color:var(--primary);background:#16233f}
.ai-sug:active{transform:scale(.97)}
.ai-privacy{display:flex;align-items:flex-start;justify-content:center;gap:8px;width:100%;margin:14px 0 auto;padding:10px 12px;background:none;border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-family:inherit;font-size:12.5px;line-height:1.45;text-align:left;cursor:pointer}
.ai-privacy u{color:var(--primary);text-underline-offset:2px}

/* messages */
.ai-msg{display:flex;gap:10px;margin:12px 0;animation:hvPop .28s cubic-bezier(.2,1.1,.4,1) backwards}
.ai-msg.user{flex-direction:column;align-items:flex-end;gap:3px}
.ai-bub{padding:10px 14px;font-size:15px;line-height:1.55;word-break:break-word;overflow-wrap:anywhere}
.ai-msg.user .ai-bub{max-width:min(86%,560px);background:var(--primary);color:#0b1220;font-weight:500;border-radius:18px 18px 4px 18px}
.ai-msg.assistant .ai-wrap,.ai-msg.error .ai-wrap{min-width:0;max-width:calc(100% - 38px)}
.ai-msg.assistant .ai-bub{background:var(--card);border:1px solid var(--line);border-radius:4px 18px 18px 18px}
.ai-bub p{margin:0 0 8px}
.ai-bub p:last-child,.ai-bub ul:last-child,.ai-bub ol:last-child{margin-bottom:0}
.ai-bub ul,.ai-bub ol{margin:4px 0 8px;padding-left:20px}
.ai-bub li{margin:3px 0}
.ai-bub li::marker{color:var(--gold)}
.ai-bub b{color:#fff;font-weight:700}
.ai-bub code{padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.08);font-size:.9em}
.ai-h{margin:10px 0 4px;font-family:var(--head);font-size:15px;font-weight:700;color:var(--gold)}
.ai-code{margin:6px 0;padding:10px 12px;overflow-x:auto;background:var(--bg);border:1px solid var(--line);border-radius:12px;font-size:12.5px;line-height:1.5}
.ai-code code{padding:0;background:none}
.ai-foot{display:flex;align-items:center;gap:10px;margin:4px 4px 0;font-size:11px;color:var(--muted)}
.ai-foot span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ai-tm{margin-right:4px;font-size:10.5px;color:var(--muted)}
.ai-link{padding:2px 0;background:none;border:0;color:var(--primary);font:inherit;font-weight:700;cursor:pointer}
.ai-note{margin:10px 0;text-align:center;font-size:12px;color:var(--muted)}
.ai-typing .ai-bub{display:inline-flex;align-items:center;gap:5px;padding:14px 16px}
.ai-typing .ai-bub i{width:7px;height:7px;border-radius:50%;background:var(--primary);animation:aiDot 1.2s ease-in-out infinite}
.ai-typing .ai-bub i:nth-child(2){animation-delay:.15s}
.ai-typing .ai-bub i:nth-child(3){animation-delay:.3s}
.ai-ico{flex-shrink:0;width:26px;font-size:18px;line-height:26px;text-align:center}
.ai-msg.error .ai-bub{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.45);border-radius:4px 18px 18px 18px;color:#fca5a5;font-size:14px}
.ai-retry{margin-top:8px;padding:6px 14px;background:none;border:1px solid var(--primary);border-radius:10px;color:var(--primary);font:inherit;font-weight:700;cursor:pointer}

/* ---------- bottom dock ---------- */
.ai-dock{flex-shrink:0;padding:8px 14px calc(10px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line)}
.ai-dock-in{width:100%;max-width:720px;margin:0 auto}
.ai-chips{margin:0 0 8px;padding-bottom:2px;scrollbar-width:none}
.ai-chips::-webkit-scrollbar{display:none}
.ai-chips[hidden]{display:none}
.ai-composer{display:flex;align-items:flex-end;gap:8px;padding:6px 6px 6px 16px;background:var(--card);border:1px solid var(--line);border-radius:24px;transition:border-color .2s,box-shadow .2s}
.ai-composer:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(45,212,191,.14)}
.ai-composer textarea{flex:1;min-width:0;min-height:0;max-height:120px;padding:9px 0;resize:none;background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--text);font-size:15px;line-height:1.4}
.ai-composer textarea:focus,.ai-composer textarea:focus-visible{border:0;box-shadow:none;outline:none}
.ai-composer textarea::placeholder{color:var(--muted)}
.ai-composer textarea:disabled{opacity:.6}
.ai-send{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border:0;border-radius:50%;background:var(--line);color:var(--muted);cursor:pointer;transition:background .2s,color .2s,transform .12s}
.ai-send.ready{background:linear-gradient(135deg,#2dd4bf,#14b8a6);color:#0b1220}
.ai-send.stop{background:linear-gradient(135deg,#fde68a,#fbbf24);color:#0b1220}
.ai-send:active{transform:scale(.92)}
.ai-fine{margin-top:7px;text-align:center;font-size:11px;color:var(--muted)}
body.ai-kb .ai-chips,body.ai-kb .ai-fine{display:none}

/* the app's pop-up messages normally sit at the bottom, where the message box is: lift them to the top on this screen */
body.ai-on .toast{bottom:auto;top:calc(74px + env(safe-area-inset-top,0px));width:max-content;max-width:min(88vw,420px);animation:aiFade .2s both}

/* ---------- privacy / new-chat sheet ---------- */
.ai-sheet{position:absolute;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(3,7,18,.66);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:aiFade .2s both}
.ai-sheet-in{display:flex;flex-direction:column;width:100%;max-width:560px;max-height:90%;overflow:hidden;padding:0;background:var(--card);border:1px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0;color:var(--text);animation:aiUp .3s cubic-bezier(.2,.9,.3,1) both}
.ai-sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 22px 8px}
.ai-grab{width:40px;height:4px;margin:0 auto 14px;border-radius:2px;background:var(--line)}
.ai-sheet-in h3{margin:0 0 6px;font-family:var(--head);font-size:20px}
.ai-lead{margin:0 0 4px;font-size:14.5px;line-height:1.55;opacity:.88}
.ai-sec{margin:16px 0 8px;font-size:13px;font-weight:700;color:var(--muted)}
.ai-tags{display:flex;flex-wrap:wrap;gap:7px}
.ai-tag{padding:6px 11px;border:1px solid transparent;border-radius:999px;font-size:12.5px;font-weight:600}
.ai-tag.ok{background:rgba(45,212,191,.1);border-color:rgba(45,212,191,.3);color:#5eead4}
.ai-tag.no{background:rgba(248,113,113,.09);border-color:rgba(248,113,113,.3);color:#fca5a5}
.ai-small{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.ai-linkbtn{display:block;margin:14px 0 0;padding:6px 0;background:none;border:0;color:var(--primary);font:inherit;font-size:13.5px;font-weight:700;text-align:left;cursor:pointer}
.ai-actions{flex:0 0 auto;display:flex;gap:10px;margin:0;padding:12px 22px calc(16px + env(safe-area-inset-bottom,0px));background:var(--card);border-top:1px solid var(--line)}
.ai-actions .btn{flex:1.4;width:auto}
.ai-ghost{flex:1;padding:14px;background:none;border:1px solid var(--line);border-radius:12px;color:var(--text);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.ai-pre{max-height:none;margin:10px 0 0;padding:12px;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:12px;color:#cbd5e1;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}

/* ---------- wider screens ---------- */
@media (min-width:900px){
  .ai-body{padding:22px 32px 14px}
  .ai-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .ai-sug{padding:13px 15px}
  .ai-hero h2{font-size:29px}
  .ai-chips{flex-wrap:wrap;overflow:visible}
  .ai-sheet{align-items:center}
  .ai-sheet-in{max-height:84%;border-bottom:1px solid var(--line);border-radius:24px}
  .ai-sheet-body{padding-top:24px}
  .ai-grab{display:none}
}
@media (max-width:360px){
  .ai-hero h2{font-size:22px}
  .ai-sug{column-gap:9px;padding:10px 10px}
  .ai-sug span{width:30px;height:34px;font-size:15px}
  .ai-sug b{font-size:13px}
  .ai-sug small{font-size:11.5px}
  .ai-sheet-body,.ai-actions{padding-left:18px;padding-right:18px}
}
