/* JAI 2026 LOOK
 *
 * One layer on top of index.html's own styles. It changes how things look,
 * never what they do: every button, panel and feature is the one index.html
 * builds. To go back to the previous look, remove the two jai-skin lines in
 * index.html. jai-skin.js adds the icons, explainer bubbles, the "Hide my
 * chats" privacy screen and the "Powered by" line.
 *
 * Accessibility comes first:
 *   - Color Vision Accessibility palettes (body[data-cvd]) replace the
 *     pink-violet gradient with the palette's own accent everywhere.
 *   - prefers-reduced-motion and Cognitive Justice "stim-safe" switch every
 *     animation off; text still appears, just without motion.
 *   - Explainer bubbles only appear where a mouse can hover.
 */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&family=Poppins:wght@400;500;600;700&display=swap');

body.jai-skin{
  --grad:linear-gradient(120deg,#d42a66 0%,#6243e8 100%);
  --glow:rgba(123,92,255,.35);
  --glass:rgba(17,13,32,.06);
  --glass-2:rgba(17,13,32,.10);
  font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
}
body.jai-skin.dark{
  --bg:#05040a;
  --panel:#0d0a1a;
  --panel-2:#110d20;
  --text:#f4f1fa;
  --muted:#a9a2bd;
  --line:rgba(244,241,250,.10);
  --line-2:rgba(244,241,250,.07);
  --glass:rgba(244,241,250,.05);
  --glass-2:rgba(244,241,250,.09);
  --shadow:0 18px 50px rgba(0,0,0,.5);
}
/* Accessibility palettes keep their own, tested accent. */
body.jai-skin[data-cvd]{--grad:var(--accent);--glow:var(--accent-soft)}

/* ---------- surfaces ---------- */
body.jai-skin.dark .main{
  background:
    radial-gradient(70% 55% at 60% 40%, rgba(123,92,255,.14), transparent 62%),
    radial-gradient(45% 40% at 35% 65%, rgba(212,42,102,.08), transparent 60%),
    linear-gradient(rgba(123,92,255,.045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(123,92,255,.045) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--bg);
}
body.jai-skin[data-cvd].dark .main{background:var(--bg)}
body.jai-skin.dark .sidebar{background:rgba(13,10,26,.96)}
body.jai-skin .sidebar{position:relative}
@media (max-width:860px){
  body.jai-skin .sidebar{position:fixed}
  /* The phone drawer is solid, and its buttons scroll so the chat list keeps room. */
  body.jai-skin.dark .sidebar{background:#0d0a1a}
  body.jai-skin .sb-footer{max-height:52vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
}
/* Let the explainer bubbles leave the sidebar on desktop. */
@media (min-width:861px){
  body.jai-skin .sidebar{overflow:visible}
  /* Clean collapse: only the expand button stays. Everything else returns when expanded. */
  body.jai-skin .sidebar.collapsed > :not(.sb-head){display:none !important}
  body.jai-skin .sidebar.collapsed .sb-head{border-bottom:0;justify-content:center;padding:12px 0}
}
body.jai-skin .topbar-right.jai-tools{border-top:0 !important}
body.jai-skin .topbar{background:transparent;border-bottom:1px solid var(--line)}
body.jai-skin.dark .topbar{background:rgba(5,4,10,.55)}
body.jai-skin .chat-area{background:transparent}
body.jai-skin .sb-name{font-family:Manrope,Poppins,sans-serif;font-weight:800;font-size:16px;letter-spacing:-.01em}

/* ---------- every button fades, never snaps ---------- */
body.jai-skin button{
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,opacity .16s ease,box-shadow .22s ease,transform .14s ease;
}
body.jai-skin button:active{transform:scale(.98)}
body.jai-skin button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px #9b84ff}
body.jai-skin[data-cvd] button:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}

body.jai-skin .action-btn,
body.jai-skin .pill-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:12px !important;font-weight:600;
}
body.jai-skin.dark .action-btn,
body.jai-skin.dark .pill-btn{
  background:var(--glass) !important;border:1px solid var(--line) !important;color:var(--text) !important;
}
body.jai-skin .action-btn:hover,
body.jai-skin .pill-btn:hover{background:var(--glass-2) !important}
body.jai-skin .action-btn.primary,
body.jai-skin .action-btn.primary:hover{
  background:var(--grad) !important;color:#fff !important;border:0 !important;
  box-shadow:0 6px 22px var(--glow);
}
body.jai-skin .action-btn.primary:hover{opacity:.94}
body.jai-skin .action-btn svg,
body.jai-skin .pill-btn svg,
body.jai-skin .send-btn svg{flex:none}

/* sidebar */
body.jai-skin .sb-footer .action-btn{min-height:40px}
body.jai-skin .sb-footer [data-jai="import"]{
  background:rgba(123,92,255,.14) !important;border:1px solid rgba(155,132,255,.35) !important;
  color:var(--text) !important;box-shadow:none;
}
body.jai-skin[data-cvd] .sb-footer [data-jai="import"]{background:var(--accent-soft) !important;border-color:var(--accent) !important}
body.jai-skin .sb-search input{border-radius:12px !important;border:1px solid var(--line) !important;background:var(--glass) !important;padding:10px 12px !important}
body.jai-skin .thread-item{border-radius:12px;border:1px solid transparent;position:relative}
body.jai-skin .thread-item:hover{background:var(--glass)}
body.jai-skin .thread-item.active{background:var(--glass-2);border-color:var(--line)}
body.jai-skin .thread-item.active::before{
  content:"";width:3px;height:18px;border-radius:3px;background:var(--grad);flex:none;margin-left:-2px
}
body.jai-skin [data-jai="del"]{
  display:inline-flex;align-items:center;justify-content:center;border-radius:8px !important;
  color:var(--muted) !important;width:28px !important;height:28px !important
}
body.jai-skin [data-jai="del"]:hover{background:var(--glass-2) !important;color:var(--text) !important}
@media (hover:hover){
  body.jai-skin .thread-item [data-jai="del"]{opacity:0}
  body.jai-skin .thread-item:hover [data-jai="del"],
  body.jai-skin .thread-item [data-jai="del"]:focus-visible{opacity:1}
}

/* Hide my chats */
.jai-hide{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:calc(100% - 16px);
  margin:0 8px 8px;min-height:40px;padding:0 10px;border-radius:12px;border:1px solid var(--line);
  background:transparent;color:inherit;font-size:13px;font-weight:500;cursor:pointer
}
.jai-hide:hover{background:var(--glass)}
.jai-hide-label{display:inline-flex;align-items:center;gap:8px}
.jai-sw{width:38px;height:22px;border-radius:999px;background:rgba(127,127,140,.35);position:relative;flex:none;transition:background .25s ease}
.jai-sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.jai-sw.on{background:var(--grad)}
.jai-sw.on::after{transform:translateX(16px)}
.jai-pv{
  position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:20px;text-align:center;border:0;color:#f4f1fa;cursor:pointer;
  background:linear-gradient(180deg,rgba(13,10,26,.78),rgba(5,4,10,.92));
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;
  transition:clip-path .55s cubic-bezier(.2,.8,.2,1),opacity .35s ease;
}
.jai-pv.on{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}
.jai-pv-lock{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(244,241,250,.09);border:1px solid rgba(244,241,250,.16)}
.jai-pv-title{font:800 18px/1.2 Manrope,Poppins,sans-serif}
.jai-pv-sub{font-size:13px;line-height:1.5;color:#cdc8dc;max-width:210px}
.sidebar.collapsed .jai-pv-title,.sidebar.collapsed .jai-pv-sub{display:none}

/* ---------- top bar ---------- */
body.jai-skin .cjm-topbar-btn,
body.jai-skin .bias-audit-btn{
  min-height:38px;padding:0 13px;border-radius:999px;font-size:12.5px;font-weight:600;gap:7px;
}
body.jai-skin.dark .cjm-topbar-btn,
body.jai-skin.dark .bias-audit-btn{background:rgba(17,13,32,.72);color:#cdc8dc;border-color:var(--line)}
body.jai-skin .cjm-topbar-btn:hover,
body.jai-skin .bias-audit-btn:hover{background:var(--glass-2);color:var(--text);border-color:var(--line)}
body.jai-skin .cjm-topbar-btn.active,
body.jai-skin .bias-audit-btn.active,
body.jai-skin .bias-audit-btn.open{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
body.jai-skin .jai-sep{width:1px;height:22px;background:var(--line);flex:none;align-self:center;margin:0 4px}
body.jai-skin [data-jai="menu"]{
  width:40px;height:40px;border-radius:12px !important;display:inline-flex !important;align-items:center;justify-content:center;padding:0 !important
}
body.jai-skin [data-jai="menu"]:hover{background:var(--glass-2) !important}
body.jai-skin .topbar-title-wrap > div:first-child{font-family:Manrope,Poppins,sans-serif}

@media (min-width:861px){
  body.jai-skin .topbar{flex-wrap:wrap;row-gap:10px;padding:12px 18px}
  body.jai-skin .topbar-title-wrap{flex:1 1 0 !important;min-width:0}
  body.jai-skin .topbar-right.jai-tools{
    order:3;flex-basis:100%;justify-content:center;flex-wrap:wrap;gap:2px;
  }
  body.jai-skin .topbar-right.jai-tools{border-top:0 !important;padding-top:0 !important;margin-top:0 !important}
  body.jai-skin .jai-tools-inner{
    display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;width:100%
  }
  body.jai-skin .jai-tools-inner .cjm-topbar-btn,
  body.jai-skin .jai-tools-inner .bias-audit-btn{padding:0 12px}
  /* The Bias Audit panel now opens from the left of its button. */
  body.jai-skin .jai-tools-inner .bias-dropdown{left:0;right:auto}
  body.jai-skin .jai-settings{
    display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;
    background:rgba(17,13,32,.06);border:1px solid var(--line);flex-shrink:0
  }
  body.jai-skin.dark .jai-settings{background:rgba(17,13,32,.7)}
  body.jai-skin .jai-settings .cjm-topbar-btn{border-color:transparent;background:transparent}
  body.jai-skin .jai-settings [data-jai="dark"]{
    border-radius:999px !important;min-height:38px;padding:0 14px;background:var(--grad) !important;color:#fff !important;border:0 !important
  }
}

/* ---------- explainer bubbles (mouse only) ---------- */
@media (hover:hover) and (min-width:861px){
  body.jai-skin .jai-tip{position:relative}
  body.jai-skin .jai-tip::after{
    content:attr(data-tip);position:absolute;z-index:4000;left:50%;top:calc(100% + 8px);transform:translate(-50%,4px);
    width:max-content;max-width:min(250px,70vw);white-space:normal;text-align:left;
    background:#17122b;color:#f4f1fa;border:1px solid rgba(244,241,250,.16);border-radius:10px;padding:7px 10px;
    font:500 12px/1.4 Poppins,system-ui,sans-serif;letter-spacing:0;text-transform:none;
    box-shadow:0 12px 30px rgba(0,0,0,.45);opacity:0;pointer-events:none;
    transition:opacity .12s ease,transform .12s ease;
  }
  body.jai-skin .jai-tip:hover::after,
  body.jai-skin .jai-tip:focus-visible::after{opacity:1;transform:translate(-50%,0)}
  body.jai-skin .jai-tip[data-pos="right"]::after{left:calc(100% + 10px);top:50%;transform:translate(4px,-50%)}
  body.jai-skin .jai-tip[data-pos="right"]:hover::after,
  body.jai-skin .jai-tip[data-pos="right"]:focus-visible::after{transform:translate(0,-50%)}
  body.jai-skin .jai-tip[data-pos="top"]::after{top:auto;bottom:calc(100% + 8px);transform:translate(-50%,-4px)}
  body.jai-skin .jai-tip[data-pos="top"]:hover::after,
  body.jai-skin .jai-tip[data-pos="top"]:focus-visible::after{transform:translate(-50%,0)}
  body.jai-skin .jai-tip[data-pos="top-start"]::after{top:auto;bottom:calc(100% + 8px);left:0;transform:translate(0,-4px)}
  body.jai-skin .jai-tip[data-pos="top-start"]:hover::after,
  body.jai-skin .jai-tip[data-pos="top-start"]:focus-visible::after{transform:translate(0,0)}
  body.jai-skin .jai-tip[data-pos="bottom-end"]::after{left:auto;right:0;transform:translate(0,4px)}
  body.jai-skin .jai-tip[data-pos="bottom-end"]:hover::after,
  body.jai-skin .jai-tip[data-pos="bottom-end"]:focus-visible::after{transform:translate(0,0)}
  body.jai-skin .jai-tip[data-pos="bottom-start"]::after{left:0;transform:translate(0,4px)}
  body.jai-skin .jai-tip[data-pos="bottom-start"]:hover::after,
  body.jai-skin .jai-tip[data-pos="bottom-start"]:focus-visible::after{transform:translate(0,0)}
}

/* ---------- welcome ---------- */
body.jai-skin .welcome-logo{
  filter:var(--logo-tint) drop-shadow(0 0 34px rgba(123,92,255,.40)) drop-shadow(0 0 18px rgba(212,42,102,.18));
  animation:jai-float 7s ease-in-out infinite;
}
body.jai-skin[data-cvd] .welcome-logo{filter:var(--logo-tint) drop-shadow(0 10px 24px rgba(0,0,0,.25))}
@keyframes jai-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
body.jai-skin .welcome-title{font-family:Manrope,Poppins,sans-serif;font-weight:800;letter-spacing:-.02em}

/* ---------- messages ---------- */
body.jai-skin.dark .bubble{background:rgba(13,10,26,.72);border-color:var(--line)}
body.jai-skin .bubble.user{
  background:rgba(123,92,255,.16) !important;color:var(--text) !important;border:1px solid rgba(123,92,255,.30) !important
}
body.jai-skin.dark .bubble.user{background:rgba(123,92,255,.22) !important}
body.jai-skin[data-cvd] .bubble.user{background:var(--accent-soft) !important;border-color:var(--accent) !important}

/* Replies arrive a paragraph at a time, each fading in, never word by word. */
.jai-line-in{animation:jai-line-in .6s ease both}
@keyframes jai-line-in{
  from{opacity:0;transform:translateY(6px);filter:blur(3px)}
  to{opacity:1;transform:none;filter:none}
}
.jai-streaming > .jai-tail{display:none}
/* Status notes ("Searching the web…") stay visible while JAI works. */
.jai-streaming > p.jai-tail:has(> em:only-child){display:block}
.jai-streaming:has(> .jai-tail)::after{
  content:"";display:block;width:38px;height:8px;margin-top:6px;opacity:.55;
  background:radial-gradient(circle,currentColor 3px,transparent 3.5px) 0 50% / 12px 8px repeat-x;
  animation:jai-writing 1.2s ease-in-out infinite;
}
@keyframes jai-writing{0%,100%{opacity:.25}50%{opacity:.75}}

/* ---------- composer ---------- */
body.jai-skin .composer{background:transparent;border-top:0;padding-top:6px}
body.jai-skin .composer-row{
  align-items:center;gap:6px;padding:6px;border-radius:24px;max-width:900px;margin:0 auto;
  background:var(--panel);border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.12);
  transition:border-color .25s ease,box-shadow .25s ease;
}
body.jai-skin.dark .composer-row{background:rgba(17,13,32,.88);box-shadow:0 18px 50px rgba(0,0,0,.45)}
body.jai-skin .composer-row:focus-within{border-color:rgba(155,132,255,.55);box-shadow:0 0 0 4px rgba(123,92,255,.14),0 18px 50px rgba(0,0,0,.25)}
body.jai-skin[data-cvd] .composer-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
body.jai-skin .msg-input{border:0 !important;background:transparent !important;padding:10px 6px !important;font-size:15px}
body.jai-skin [data-jai="attach"]{background:transparent !important;border-radius:50% !important;color:var(--muted) !important;width:42px;height:42px}
body.jai-skin [data-jai="attach"]:hover{background:var(--glass-2) !important;color:var(--text) !important}
body.jai-skin .send-btn{
  display:inline-flex;align-items:center;gap:8px;border-radius:999px !important;padding:0 18px !important;height:42px;
  background:var(--grad) !important;color:#fff !important;font-weight:600;box-shadow:0 6px 22px var(--glow)
}
body.jai-skin .send-btn:disabled{background:var(--glass-2) !important;color:var(--muted) !important;box-shadow:none}
.jai-powered{max-width:900px;margin:8px auto 0;text-align:center;font-size:11px;color:var(--muted)}

/* ---------- sidebar footer sections ---------- */
body.jai-skin .sb-import{
  background:var(--glass);border:1px solid var(--line);border-radius:14px;
  padding:12px 8px 6px;margin-bottom:10px;
}
body.jai-skin .sb-import [data-jai="import"]{white-space:nowrap;font-size:13px;padding-left:6px;padding-right:6px}
body.jai-skin .sb-import-title{font:800 13px/1.3 Manrope,Poppins,sans-serif !important;margin:0 2px 10px !important;letter-spacing:.01em}
body.jai-skin .sb-import .action-btn{width:100%;margin-top:0 !important;margin-bottom:6px}
body.jai-skin .sb-import-how{margin-top:2px !important;font-size:12px}
body.jai-skin .sb-import-how > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:6px 4px 4px;color:var(--muted);font-weight:600;border-radius:8px;transition:color .15s ease;
}
body.jai-skin .sb-import-how > summary::-webkit-details-marker{display:none}
body.jai-skin .sb-import-how > summary::after{
  content:'';width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;margin-right:4px;
}
body.jai-skin .sb-import-how[open] > summary::after{transform:rotate(225deg) translateY(-2px)}
body.jai-skin .sb-import-how > summary:hover{color:var(--text)}
body.jai-skin .sb-import-how ol{margin:6px 4px 4px 20px !important;max-height:190px;overflow-y:auto;font-size:12px !important}
body.jai-skin .sb-user-detail.jai-account{
  display:grid;grid-template-columns:34px 1fr;column-gap:10px;align-items:center;
  margin:10px 0 8px !important;padding:10px 2px 2px;border-top:1px solid var(--line);
}
body.jai-skin .jai-avatar{
  grid-row:span 2;width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font:800 14px/1 Manrope,Poppins,sans-serif;
}
body.jai-skin .jai-account .sb-user-name{line-height:1.25}
body.jai-skin .jai-account .sb-user-email{line-height:1.3}

/* ---------- windows open smoothly ---------- */
/* Uses translate/scale (not transform) so panels that already position
   themselves with transform keep their place. */
@keyframes jaiBackIn{from{opacity:0}to{opacity:1}}
@keyframes jaiCardIn{from{opacity:0;translate:0 16px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes jaiDropIn{from{opacity:0;translate:0 -8px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@keyframes jaiFadeIn{from{opacity:0}to{opacity:1}}
body.jai-skin .jai-modal{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.jai-modal-in{animation:jaiBackIn .22s ease both}
.jai-card-in{animation:jaiCardIn .34s cubic-bezier(.2,.8,.2,1) both}
.jai-drop-in{animation:jaiDropIn .24s cubic-bezier(.2,.8,.2,1) both;transform-origin:top center}
.jai-fade-in{animation:jaiFadeIn .28s ease .06s both}

/* ---------- motion off when asked ---------- */
@media (prefers-reduced-motion: reduce){
  .jai-line-in,body.jai-skin .welcome-logo,.jai-streaming::after,.jai-modal-in,.jai-card-in,.jai-drop-in,.jai-fade-in{animation:none !important}
  .jai-pv,.jai-sw,.jai-sw::after,body.jai-skin button,body.jai-skin .jai-tip::after{transition:none !important}
}
body.cjm-stim-safe .jai-line-in,body.cjm-stim-safe .welcome-logo,body.cjm-stim-safe .jai-modal-in,body.cjm-stim-safe .jai-card-in,body.cjm-stim-safe .jai-drop-in,body.cjm-stim-safe .jai-fade-in{animation:none !important}