/* Mimi (mimi.e18.us): the full-page chat and the widget. Built on e18-core's suite.css (tokens, rail, buttons, sign-in
   screen); Mimi's own accent is the studio blue (#2457D6) for selection, focus and sending. Red stays for errors. */
:root{
  --accent:#2457D6; --accent-hi:#1F4CBF; --accent-soft:rgba(36,87,214,.10); --accent-ink:#1B3F9E;
  --ux-accent:var(--accent); --ux-accent-soft:var(--accent-soft);
  --bubble:#E9EEFB;
}
html{scrollbar-gutter:auto}
body.is-full,body.is-embed{height:100vh;height:100dvh;overflow:hidden}
.mimi-mark{flex:none;display:block}

/* slim scrollbars on every scrolling box */
.scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(22,25,31,.2) transparent}
.scroll::-webkit-scrollbar{width:10px;height:10px}
.scroll::-webkit-scrollbar-track{background:transparent}
.scroll::-webkit-scrollbar-thumb{background:rgba(22,25,31,.16);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
.scroll::-webkit-scrollbar-thumb:hover{background-color:rgba(22,25,31,.3)}

/* focus and buttons in blue */
:where(input,textarea):where(:focus){box-shadow:inset 0 0 0 2px var(--accent),0 0 0 4px var(--accent-soft)}
.btn.primary{background:var(--accent);box-shadow:0 8px 20px -12px rgba(36,87,214,.8)}
.btn.primary:hover{background:var(--accent-hi)}

/* signed out */
.mimi-auth .muted{max-width:360px}
.is-embed .auth{min-height:100dvh;padding:24px 18px;gap:18px}
.is-embed .auth-brand h1{font-size:26px}

/* layout */
.mimi{display:grid;grid-template-columns:272px minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:100%}
.is-embed .mimi{grid-template-columns:minmax(0,1fr)}
.convs{display:flex;flex-direction:column;gap:14px;min-height:0;padding:18px 12px 14px;background:#F6F7F9;border-right:1px solid var(--hair)}
.convs-top{display:flex;align-items:center;justify-content:space-between}
.convs-toggle{display:none}
.new-chat{justify-content:flex-start;width:100%;background:var(--surface);box-shadow:var(--shadow)}
.new-chat:hover{background:var(--surface);box-shadow:inset 0 0 0 1px var(--accent),var(--shadow)}
.conv-list{flex:1;min-height:0;display:flex;flex-direction:column;gap:2px;margin:0 -4px;padding:0 4px}
.conv-empty{font-size:13px;padding:6px 10px;margin:0}
.conv{position:relative;display:flex;align-items:center;border-radius:var(--r-s)}
.conv>a{flex:1;min-width:0;display:block;padding:8px 10px;border-radius:var(--r-s);text-decoration:none;color:var(--ink-2);font-size:13.5px;font-weight:500}
.conv>a span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.conv>a small{display:block;font-size:11.5px;color:var(--ink-4)}
.conv:hover{background:rgba(22,25,31,.05)}
.conv[aria-current="true"]{background:var(--accent-soft)}
.conv[aria-current="true"]>a{color:var(--accent-ink);font-weight:600}
.conv .del{position:absolute;right:4px;opacity:0;width:30px;height:30px;transition:opacity .15s,background-color .2s,color .2s}
.conv:hover .del,.conv .del:focus-visible,.conv .del.confirm{opacity:1}
.conv .del.confirm{width:auto;padding:0 10px;background:var(--marker-soft);color:var(--marker-ink);font:600 12px var(--font)}
.convs .rail-foot{margin-top:0}

.talk{display:flex;flex-direction:column;min-width:0;min-height:0}
.talk-head{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-bottom:1px solid var(--hair);background:var(--surface)}
.talk-title{display:flex;align-items:center;gap:8px;font:800 16px/1 var(--display)}
.talk-tools{margin-left:auto;display:flex;gap:2px}
.ctx{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-size:12px;font-weight:600}

.log{flex:1;min-height:0;padding:28px max(20px,calc((100% - 780px)/2)) 12px}
.is-embed .log{padding:16px 14px 8px}
.hello{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:8vh 0 24px}
.is-embed .hello{padding:12px 0 8px}
.hello h2{margin:6px 0 0;font-size:24px}
.is-embed .hello h2{font-size:18px}
.hello p{margin:0;max-width:56ch}

.msg{display:flex;margin:0 0 18px}
.msg.me{justify-content:flex-end}
.msg.me .body{max-width:min(78%,620px);padding:10px 14px;border-radius:16px 16px 4px 16px;background:var(--bubble);white-space:pre-wrap;overflow-wrap:anywhere}
.msg.bot{gap:10px}
.msg.bot .mimi-mark{margin-top:2px}
.msg.bot .body{min-width:0;flex:1;overflow-wrap:anywhere}
.is-embed .msg.bot .mimi-mark{display:none}

/* answer markdown */
.md>:first-child{margin-top:0}
.md>:last-child{margin-bottom:0}
.md p,.md ul,.md ol,.md pre,.md blockquote,.md .table{margin:0 0 10px}
.md ul,.md ol{padding-left:22px}
.md li{margin:2px 0}
.md h1,.md h2,.md h3,.md h4{margin:16px 0 8px;font-family:var(--font);font-weight:700;letter-spacing:0}
.md h1{font-size:19px} .md h2{font-size:17px} .md h3,.md h4{font-size:15px}
.md a{color:var(--accent);text-decoration-color:rgba(36,87,214,.35)}
.md code{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-3);padding:1px 5px;border-radius:5px}
.md pre{padding:12px 14px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow);overflow-x:auto}
.md pre code{background:none;padding:0}
.md blockquote{padding:8px 12px;border-radius:var(--r-s);background:var(--surface-2);color:var(--ink-2)}
.md hr{border:0;height:1px;background:var(--hair-2);margin:14px 0}
.md .table{overflow-x:auto}
.md table{border-collapse:collapse;font-size:13.5px;min-width:60%}
.md th,.md td{padding:6px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--hair)}
.md th{font-weight:700;color:var(--ink-2);background:var(--surface-2)}

/* actions */
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.act-img{display:block;max-width:min(100%,420px);border-radius:var(--r-m);box-shadow:var(--shadow)}
.act-file{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:10px;background:var(--surface);box-shadow:var(--shadow);text-decoration:none;font-size:13.5px;font-weight:600;color:var(--accent-ink)}
.act-file:hover{box-shadow:inset 0 0 0 1px var(--accent),var(--shadow)}
.act-note{font-size:13px;color:var(--ink-3)}
.cites{margin-top:8px;font-size:12.5px;color:var(--ink-3)}
.cites b{font-weight:600}

/* thinking */
.thinking{display:inline-flex;align-items:center;gap:10px;color:var(--ink-3);font-size:14px}
.dots{display:inline-flex;gap:4px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.35;animation:mimi-dot 1.2s infinite var(--ease)}
.dots i:nth-child(2){animation-delay:.15s} .dots i:nth-child(3){animation-delay:.3s}
@keyframes mimi-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.dots i{animation:none;opacity:.7}}

.err{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-m);background:var(--marker-soft);color:var(--marker-ink);font-size:14px}
.err .btn{height:32px;font-size:13px;background:var(--surface)}

/* composer */
.composer{display:flex;align-items:flex-end;gap:8px;margin:0 max(20px,calc((100% - 780px)/2)) 6px;padding:8px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow-lift)}
.is-embed .composer{margin:4px 10px 10px;border-radius:14px}
.composer textarea{flex:1;min-height:40px;max-height:200px;padding:9px 10px;border-radius:12px;background:transparent;resize:none;line-height:1.45}
.composer textarea:hover{box-shadow:none}
.composer textarea:focus{background:transparent;box-shadow:none}
.composer:focus-within{box-shadow:0 0 0 2px var(--accent),0 0 0 6px var(--accent-soft)}
.send{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:12px;background:var(--accent);color:#fff;cursor:pointer;transition:background-color .2s,transform .15s}
.send:hover{background:var(--accent-hi)} .send:active{transform:scale(.94)}
.send[disabled]{background:var(--surface-3);color:var(--ink-4);cursor:default}
.hint{margin:0 0 12px;text-align:center;font-size:12px}

@media (max-width:820px){
  .mimi{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .convs{flex-direction:column;gap:10px;padding:10px 12px;border-right:0;border-bottom:1px solid var(--hair)}
  .convs-toggle{display:inline-flex}
  .convs .new-chat,.conv-list,.convs .rail-foot{display:none}
  .convs.open .new-chat,.convs.open .conv-list,.convs.open .rail-foot{display:flex}
  .convs.open .conv-list{max-height:50vh}
  .brand small{display:none}
  .msg.me .body{max-width:88%}
  .hello{padding-top:3vh}
}