/* IO Core: Ask a Historic Personality — chat drawer (shadcn chat-component design language) */

:root {
  --ioc-bg: #ffffff;
  --ioc-fg: #0a0a0a;
  --ioc-muted: #71717a;
  --ioc-border: #e4e4e7;
  --ioc-surface: #f4f4f5;
  --ioc-accent: #18181b;
  --ioc-accent-fg: #fafafa;
  --ioc-chip: #f4f4f5;
  --ioc-shadow: 0 20px 60px rgba(0,0,0,.18);
  --ioc-radius: 14px;
}
html[data-site-skin="dark"] {
  --ioc-bg: #101014;
  --ioc-fg: #f4f4f5;
  --ioc-muted: #a1a1aa;
  --ioc-border: #27272a;
  --ioc-surface: #1b1b21;
  --ioc-accent: #e4e4e7;
  --ioc-accent-fg: #101014;
  --ioc-chip: #1f1f26;
  --ioc-shadow: 0 20px 60px rgba(0,0,0,.55);
}

/* ---------- launcher row under articles ---------- */
.io-ask-history{margin:30px 0 8px;padding:20px;border:1px solid var(--ioc-border);border-radius:var(--ioc-radius);background:var(--ioc-bg)}
.io-ask-title{font-weight:700;margin-bottom:4px;font-size:17px;color:var(--ioc-fg)}
.io-ask-sub{font-size:13px;color:var(--ioc-muted);margin-bottom:14px}
.io-ask-row{display:flex;flex-wrap:wrap;gap:16px}
.io-ask-persona{background:none;border:none;cursor:pointer;text-align:center;width:78px;padding:0}
.io-ask-persona img,.io-ask-noimg{width:64px;height:64px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 6px;box-shadow:0 2px 10px rgba(0,0,0,.22);background:#91a29b;transition:transform .16s ease, box-shadow .16s ease}
.io-ask-persona:hover img{transform:scale(1.1);box-shadow:0 4px 16px rgba(0,0,0,.3)}
.io-ask-name{font-size:11px;line-height:1.25;display:block;color:var(--ioc-fg);opacity:.85}
.io-ask-note{margin-top:14px;font-size:11px;color:var(--ioc-muted);font-style:italic}

/* ---------- drawer ---------- */
.ioc-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:99998;opacity:0;transition:opacity .22s ease;backdrop-filter:blur(2px)}
.ioc-backdrop.open{opacity:1}
.ioc-drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);z-index:99999;background:var(--ioc-bg);color:var(--ioc-fg);
  box-shadow:var(--ioc-shadow);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .26s cubic-bezier(.32,.72,0,1);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:14.5px;line-height:1.55}
.ioc-drawer.open{transform:translateX(0)}
@media (max-width:640px){
  .ioc-drawer{top:auto;height:92dvh;width:100vw;border-radius:18px 18px 0 0;transform:translateY(103%)}
  .ioc-drawer.open{transform:translateY(0)}
}
.ioc-drawer *{box-sizing:border-box}

/* header */
.ioc-header{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--ioc-border);flex:0 0 auto}
.ioc-header img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.ioc-h-name{font-weight:700;font-size:15px}
.ioc-h-role{font-size:12px;color:var(--ioc-muted)}
.ioc-close{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--ioc-muted);font-size:22px;line-height:1;padding:6px;border-radius:8px}
.ioc-close:hover{background:var(--ioc-surface);color:var(--ioc-fg)}

/* persona switcher strip */
.ioc-personas{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--ioc-border);overflow-x:auto;flex:0 0 auto;scrollbar-width:none}
.ioc-personas::-webkit-scrollbar{display:none}
.ioc-p{background:none;border:none;cursor:pointer;text-align:center;width:52px;flex:0 0 auto;padding:0;opacity:.55;transition:opacity .15s}
.ioc-p img{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 3px;border:2px solid transparent}
.ioc-p span{font-size:9.5px;color:var(--ioc-muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ioc-p.active{opacity:1}
.ioc-p.active img{border-color:var(--ioc-accent)}
.ioc-p:hover{opacity:1}

/* MessageScroller with edge fades */
.ioc-scroller{flex:1 1 auto;overflow-y:auto;padding:18px 16px 8px;scroll-behavior:smooth;
  mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 6px),transparent 100%)}
.ioc-scroller::-webkit-scrollbar{width:8px}
.ioc-scroller::-webkit-scrollbar-thumb{background:var(--ioc-border);border-radius:4px}

/* messages */
.ioc-msg{display:flex;gap:10px;margin-bottom:14px;max-width:100%}
.ioc-msg .ioc-av{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto;margin-top:2px}
.ioc-msg.user{flex-direction:row-reverse}
.ioc-bubble{padding:10px 14px;border-radius:16px;max-width:82%;overflow-wrap:break-word}
.ioc-msg.ai .ioc-bubble{background:var(--ioc-surface);border-bottom-left-radius:6px}
.ioc-msg.user .ioc-bubble{background:var(--ioc-accent);color:var(--ioc-accent-fg);border-bottom-right-radius:6px}
.ioc-bubble p{margin:0 0 .7em}
.ioc-bubble p:last-child{margin-bottom:0}
.ioc-bubble a{color:inherit;text-decoration:underline}
.ioc-msg-name{font-size:11px;color:var(--ioc-muted);margin:0 0 3px 2px}

/* markers: status / shimmer */
.ioc-marker{display:flex;align-items:center;gap:8px;margin:6px 0 14px 40px;font-size:12.5px;color:var(--ioc-muted)}
.ioc-shimmer{background:linear-gradient(90deg,var(--ioc-muted) 25%,var(--ioc-fg) 50%,var(--ioc-muted) 75%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ioc-shimmer 1.6s linear infinite}
@keyframes ioc-shimmer{to{background-position:-200% 0}}
.ioc-dots::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:ioc-dots 1.4s steps(4,end) infinite}
@keyframes ioc-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* citations under a reply */
.ioc-cites{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 14px 40px}
.ioc-cite{font-size:11px;color:var(--ioc-muted);border:1px solid var(--ioc-border);border-radius:999px;padding:3px 10px;text-decoration:none;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--ioc-chip)}
.ioc-cite:hover{color:var(--ioc-fg)}

/* suggestion chips */
.ioc-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 16px 10px;flex:0 0 auto}
.ioc-chip{background:var(--ioc-chip);border:1px solid var(--ioc-border);color:var(--ioc-fg);border-radius:999px;
  padding:7px 14px;font-size:12.5px;cursor:pointer;transition:background .12s;text-align:left}
.ioc-chip:hover{background:var(--ioc-border)}

/* composer */
.ioc-composer{display:flex;align-items:flex-end;gap:8px;padding:12px 14px;border-top:1px solid var(--ioc-border);flex:0 0 auto}
.ioc-input{flex:1;border:1px solid var(--ioc-border);background:var(--ioc-bg);color:var(--ioc-fg);border-radius:12px;
  padding:10px 13px;font:inherit;resize:none;max-height:120px;min-height:42px;outline:none}
.ioc-input:focus{border-color:var(--ioc-muted)}
.ioc-send{width:42px;height:42px;flex:0 0 auto;border:none;border-radius:12px;background:var(--ioc-accent);color:var(--ioc-accent-fg);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .12s}
.ioc-send:disabled{opacity:.4;cursor:default}
.ioc-send svg{width:18px;height:18px}
.ioc-foot{padding:0 16px 10px;font-size:10.5px;color:var(--ioc-muted);text-align:center;flex:0 0 auto}