/* ─────────────────────────────────────────────────────────────
   AI answer demo, generic assistant chat interface.
   Deliberately NOT a clone of any vendor's branded UI: platform
   names are plain text labels, the chrome is RankingBite's own.
   Progressive enhancement: all copy server-rendered in the DOM.
   ───────────────────────────────────────────────────────────── */

.ade{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--sh-lg);overflow:hidden;position:relative;display:flex;flex-direction:column}

/* ── Platform tabs ── */
.ade-tabs{display:flex;gap:2px;padding:var(--s-3) var(--s-3) 0;background:var(--paper);border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none}
.ade-tabs::-webkit-scrollbar{display:none}
.ade-tab{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;padding:.55rem .8rem;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;font-family:var(--font-sans);font-size:var(--t-meta);font-weight:var(--w-medium);color:var(--ink-500);letter-spacing:var(--tr-body);white-space:nowrap;transition:color var(--dur) var(--ease)}
.ade-tab:hover{color:var(--ink-900)}
.ade-tab[aria-selected="true"]{color:var(--ink-900);border-bottom-color:var(--eng,var(--signal-600))}

/* ── Engine marks, original geometric glyphs, one per engine ── */
.ade-glyph{width:14px;height:14px;flex-shrink:0;display:block;position:relative;color:var(--ink-300);transition:color var(--dur) var(--ease)}
.ade-tab[aria-selected="true"] .ade-glyph,.ade-tab:hover .ade-glyph{color:var(--eng,var(--signal-600))}
.g-ring{border:1.5px solid currentColor;border-radius:50%}
.g-ring::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:currentColor}
.g-orbit{border:1.5px solid currentColor;border-radius:50%}
.g-orbit::after{content:"";position:absolute;inset:-1.5px;border:1.5px solid currentColor;border-radius:50%;transform:scale(.5);opacity:.55}
.g-diamond{border:1.5px solid currentColor;transform:rotate(45deg);border-radius:2px}
.g-diamond::after{content:"";position:absolute;inset:3.5px;background:currentColor;border-radius:1px}
.g-quad{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px}
.g-quad i{display:block;background:currentColor;border-radius:50%}
.g-quad i:nth-child(2),.g-quad i:nth-child(3){opacity:.45}
.g-half{border:1.5px solid currentColor;border-radius:50%;overflow:hidden}
.g-half::after{content:"";position:absolute;inset:0;background:currentColor;clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%)}

/* ── Per-engine accent ── */
[data-engine="e1"]{--eng:oklch(.58 .11 168)}
[data-engine="e2"]{--eng:oklch(.58 .11 215)}
[data-engine="e3"]{--eng:oklch(.58 .11 52)}
[data-engine="e4"]{--eng:oklch(.58 .11 268)}
[data-engine="e5"]{--eng:oklch(.58 .11 320)}

/* ── Screen ── */
.ade-screen{position:relative;flex:1}
.ade-panel{display:none;padding:var(--s-5) var(--s-5) var(--s-4)}
.ade-panel[data-active]{display:block}

/* ── Conversation ── */
.ade-thread{display:grid;gap:var(--s-5)}
.ade-turn{display:grid;grid-template-columns:28px 1fr;gap:var(--s-3);align-items:start}
.ade-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-family:var(--font-mono);font-size:11px;font-weight:var(--w-medium);letter-spacing:.04em;text-transform:uppercase}
.ade-av.you{background:var(--paper-sunk);border:1px solid var(--rule-strong);color:var(--ink-500)}
.ade-av.bot{background:var(--ink-900);color:var(--cite-400);font-size:11px}
.ade-av.bot .ade-glyph{color:var(--eng,var(--cite-400))}

/* ── Shell variants: each engine frames its answer differently ── */
.ade-panel[data-shell="answer"] .ade-turn{grid-template-columns:1fr}
.ade-panel[data-shell="answer"] .ade-av{display:none}
.ade-panel[data-shell="answer"] .ade-prompt{background:none;padding:0 0 var(--s-3);border-bottom:1px solid var(--rule);border-radius:0;font-size:var(--t-body);font-weight:var(--w-semibold);letter-spacing:var(--tr-head)}
.ade-panel[data-shell="answer"] .ade-name{display:inline-flex;align-items:center;gap:6px;color:var(--eng)}
.ade-panel[data-shell="answer"] .ade-src{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--rule)}
.ade-panel[data-shell="answer"] .ade-cards{flex-direction:column;align-items:stretch}
.ade-panel[data-shell="answer"] .ade-card{border-radius:var(--r-md);justify-content:flex-start}
.ade-panel[data-shell="answer"] .ade-card .tag{margin-left:auto}
.ade-panel[data-shell="answer"] .ade-input{border-radius:var(--r-md)}

.ade-panel[data-shell="overview"]{background:var(--paper)}
.ade-panel[data-shell="overview"] .ade-prompt{border:1px solid var(--rule);background:var(--surface);border-radius:var(--r-pill);padding:.6rem 1rem}
.ade-panel[data-shell="overview"] .ade-av.you{display:none}
.ade-panel[data-shell="overview"] .ade-turn:first-child{grid-template-columns:1fr}
.ade-panel[data-shell="overview"] .ade-msg{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--s-4)}
.ade-panel[data-shell="overview"] .ade-input{display:none}

.ade-panel[data-shell="chat"] .ade-prompt{margin-left:auto;max-width:34ch}
.ade-panel[data-shell="chat"] .ade-turn:first-child{grid-template-columns:1fr 28px}
.ade-panel[data-shell="chat"] .ade-turn:first-child .ade-av{order:2}

/* user turn */
.ade-prompt{margin:0;font-size:var(--t-small);line-height:1.5;color:var(--ink-900);font-weight:var(--w-medium);background:var(--paper-sunk);border-radius:var(--r-md);padding:.6rem .8rem;min-height:2.4em;align-self:start}
.ade-prompt .txt{position:relative}
.is-anim .ade-prompt .txt::after{content:"";display:inline-block;width:2px;height:1em;background:var(--signal-600);vertical-align:-.15em;margin-left:2px;animation:ade-blink 1s step-end infinite}
.is-anim .ade-prompt.done .txt::after{display:none}
@keyframes ade-blink{50%{opacity:0}}

/* assistant turn */
.ade-msg{min-width:0}
.ade-name{display:block;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400);margin-bottom:var(--s-2)}

/* typing indicator */
.ade-status{display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-3);font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-400);min-height:1.2em}
.ade-status .dots{display:inline-flex;gap:3px}
.ade-status .dots i{width:5px;height:5px;border-radius:50%;background:var(--ink-300);display:block}
.is-anim .ade-status .dots i{animation:ade-bounce 1.1s ease-in-out infinite}
.is-anim .ade-status .dots i:nth-child(2){animation-delay:.14s}
.is-anim .ade-status .dots i:nth-child(3){animation-delay:.28s}
@keyframes ade-bounce{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ade-status[hidden]{display:none}

/* answer */
.ade-answer{margin:0;font-size:var(--t-small);line-height:1.68;color:var(--ink-700);min-height:5.5em}
.is-anim .ade-answer .w{opacity:0;transition:opacity .18s var(--ease)}
.is-anim .ade-answer .w.on{opacity:1}

/* the marker sweep, the payload beat */
.ade-answer .cited{background:linear-gradient(180deg,transparent 54%,var(--cite-400) 54%);background-repeat:no-repeat;padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.is-anim .ade-answer .cited{background-size:0% 100%;transition:background-size .55s var(--ease)}
.is-anim .ade-answer .cited.on{background-size:100% 100%}
.is-anim .ade-answer .cite-mark{opacity:0;transition:opacity .3s var(--ease) .25s}
.is-anim .ade-answer .cite-mark.on{opacity:1}

/* sources, inline chips under the reply */
.ade-src{margin-top:var(--s-4)}
.ade-src > .meta{display:block;margin-bottom:var(--s-3)}
.ade-cards{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.ade-card{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:1px solid var(--rule);border-radius:var(--r-pill);font-size:var(--t-micro);color:var(--ink-500);background:var(--paper);max-width:100%}
.ade-card.is-us{border-color:var(--cite-400);background:var(--cite-100);color:var(--ink-900);box-shadow:var(--sh-sm)}
.ade-card .n{font-family:var(--font-mono);color:var(--ink-400);flex-shrink:0}
.ade-card.is-us .n{color:var(--signal-600)}
.ade-card strong{font-weight:var(--w-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ade-card .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--ink-400);border-left:1px solid var(--rule-strong);padding-left:7px}
.ade-card.is-us .tag{color:var(--signal-700);border-left-color:var(--cite-500)}
.is-anim .ade-card{opacity:0;transform:translateY(5px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.is-anim .ade-card.on{opacity:1;transform:none}

/* composer, decorative affordance, not interactive */
.ade-input{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-5);padding:.6rem .6rem .6rem 1rem;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--paper);color:var(--ink-400);font-size:var(--t-small)}
.ade-send{margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--ink-900);color:#fff;display:grid;place-items:center;font-size:13px;flex-shrink:0}

/* ── Footer: progress + honesty label ── */
.ade-foot{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-3) var(--s-5) var(--s-4);border-top:1px solid var(--rule);background:var(--paper)}
.ade-bar{flex:1;height:2px;background:var(--rule);border-radius:2px;overflow:hidden}
.ade-bar i{display:block;height:100%;width:0;background:var(--signal-600);border-radius:2px}
.is-anim .ade-bar i.run{transition:width linear}
.ade-note{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-400);white-space:nowrap}
.ade-pause{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule-strong);background:var(--surface);border-radius:var(--r-pill);padding:3px 10px;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-500);cursor:pointer}
.ade-pause:hover{color:var(--ink-900);border-color:var(--ink-900)}

@media (prefers-reduced-motion:reduce){.ade-bar{display:none}}
@media (max-width:520px){
  .ade-foot{flex-wrap:wrap}
  .ade-note{order:3;width:100%}
  .ade-card .tag{display:none}
}

/* Scroll affordance for the platform tab strip on narrow viewports.
   The strip scrolls; a right-edge fade signals there is more, and a
   scroll-snap keeps tabs aligned. No tab is ever removed from the DOM. */
.ade-tabwrap{position:relative}
.ade-tabwrap::after{content:"";position:absolute;top:0;right:0;bottom:1px;width:36px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--paper));opacity:0;transition:opacity var(--dur) var(--ease)}
.ade-tabwrap[data-scrollable]::after{opacity:1}
.ade-tabs{scroll-snap-type:x proximity;scroll-padding-left:var(--s-3);overscroll-behavior-x:contain}
.ade-tab{scroll-snap-align:start}