/* Selected UI from Aileet web/index.html and web/styles.css.
   Composer, user bubble, full-width assistant, structured extras and thinking dots
   retain their source structure. Palette/spacing are scoped to this exhibit. */
[data-aileet-ui] {
  --border:#d5d8e3; --border-strong:#9ba8d0; --card:#fbfbfe;
  --surface-soft:#eff1f8; --text:var(--ink); --text-1:#363646;
  --text-2:#565a70; --text-dim:#6c7085; --accent:var(--blue);
  --user-bubble:#e9edff; --user-bubble-border:#d3dcff; --user-bubble-text:#262d50;
  --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --r-md:10px; --r-xl:18px; --ease:cubic-bezier(.2,.6,.3,1);
  display:flex; flex-direction:column; height:510px; position:relative;
  background:var(--card); color:var(--text); border:1px solid var(--border);
  border-radius:7px 22px 7px 7px; box-shadow:6px 8px 0 #bfc4d238;
  font:14px/1.6 var(--sans); transform:rotate(-1.2deg);
}
[data-aileet-ui] [hidden] { display:none!important; }
[data-aileet-ui]:focus-visible,[data-aileet-ui] button:focus-visible,[data-aileet-ui] textarea:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
[data-aileet-ui] .topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
[data-aileet-ui] .topbar-title { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; }
[data-aileet-ui] .demo-badge { font-size:9px; font-weight:400; color:var(--text-dim); }
[data-aileet-ui] .ui-spark { color:var(--blue); font-size:22px; line-height:1; }
[data-aileet-ui] .content-col { padding:16px 20px 10px; min-height:0; flex:1; }
[data-aileet-ui] .deal-summary { color:var(--text-2); font-size:12px; line-height:1.55; margin:0 0 var(--s-4); padding-left:10px; border-left:2px solid var(--pink); }
[data-aileet-ui] .messages { display:flex; flex-direction:column; gap:var(--s-3); }
[data-aileet-ui] .msg { font-size:13px; line-height:1.6; letter-spacing:-.005em; white-space:pre-wrap; overflow-wrap:break-word; }
[data-aileet-ui] .msg.user { align-self:flex-end; max-width:85%; background:var(--user-bubble); color:var(--user-bubble-text); border:1px solid var(--user-bubble-border); padding:8px var(--s-3); border-radius:var(--r-xl); }
[data-aileet-ui] .msg.assistant { align-self:stretch; max-width:none; white-space:normal; }
[data-aileet-ui] .msg-body p { margin:0 0 10px; }
[data-aileet-ui] .msg-extras { display:flex; flex-direction:column; gap:var(--s-2); margin-top:var(--s-3); }
[data-aileet-ui] .extra-block { border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-soft); padding:var(--s-3); }
[data-aileet-ui] .extra-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); font-size:10px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--text-2); margin-bottom:6px; }
[data-aileet-ui] .extra-block ul { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:4px; }
[data-aileet-ui] .extra-block li { font-size:12px; color:var(--text-1); }
[data-aileet-ui] .extra-block p { font-size:12px; line-height:1.6; }
[data-aileet-ui] .risk-block { border-color:#e5c1d7; background:#f8edf4; }
[data-aileet-ui] .risk-block .extra-head { color:#814b70; }
[data-aileet-ui] .composer-wrap { flex-shrink:0; padding:10px 16px 0; }
[data-aileet-ui] .composer { margin:0 auto; display:flex; align-items:flex-end; gap:var(--s-2); border:1px solid var(--border); border-radius:var(--r-xl); padding:var(--s-2) var(--s-2) var(--s-2) var(--s-3); background:var(--card); transition:border-color .16s var(--ease); }
[data-aileet-ui] .composer:focus-within { border-color:var(--border-strong); }
[data-aileet-ui] .composer textarea { flex:1; width:0; min-width:0; height:34px; border:0; resize:none; font:12px/1.5 var(--sans); background:transparent; color:var(--text); padding:7px 2px; overflow:hidden; border-radius:4px; }
[data-aileet-ui] .composer textarea::placeholder { color:var(--text-dim); }
[data-aileet-ui] .composer-send { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; flex-shrink:0; border:0; background:var(--ink); color:var(--card); cursor:pointer; padding:0; }
[data-aileet-ui] .composer-send .ico { width:17px; height:17px; }
[data-aileet-ui][data-state="submitting"] .composer-send { background:var(--blue); transform:scale(.94); }
[data-aileet-ui] .demo-foot { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 20px 13px; color:var(--text-dim); font-size:8px; }
[data-aileet-ui] .demo-idle { padding:25px 0 0; }
[data-aileet-ui] .hero-title { font-size:25px; letter-spacing:-.05em; font-weight:500; }
[data-aileet-ui] .demo-idle>p+p { margin-top:8px; color:var(--text-2); font-size:12px; }
[data-aileet-ui] .chip { display:inline-block; padding:6px 12px; border:1px solid var(--border); border-radius:24px; font-size:11px; margin-top:20px; color:var(--text-2); }
[data-aileet-ui] .ai-thinking { display:flex; align-items:center; gap:7px; min-height:20px; margin:6px 0 2px; color:var(--text-dim); font-size:11px; }
[data-aileet-ui] .think-dots { display:inline-flex; align-items:center; gap:5px; }
[data-aileet-ui] .think-dots i { width:5px; height:5px; border-radius:50%; background:var(--text-dim); animation:showcase-pulse 1.2s var(--ease) infinite; }
[data-aileet-ui] .think-dots i:nth-child(2) { animation-delay:.15s; }
[data-aileet-ui] .think-dots i:nth-child(3) { animation-delay:.3s; }
[data-aileet-ui][data-paused="true"] .think-dots i { animation-play-state:paused; }
@keyframes showcase-pulse { 0%,100% { opacity:.25; transform:translateY(0); } 50% { opacity:1; transform:translateY(-2px); } }
.composition--retrieval .project-visual { grid-column:1/8; margin:20px 30px 45px 0; }
@media(max-width:1100px) and (min-width:901px) {
  [data-aileet-ui] { height:555px; }
  [data-aileet-ui] .topbar-title { flex-wrap:wrap; gap:0 10px; }
}
@media(max-width:900px) {
  .composition--retrieval .project-visual { grid-column:1/7; margin:20px 3px 35px; }
  [data-aileet-ui] { height:550px; transform:rotate(-.65deg); }
  [data-aileet-ui] .content-col { padding:14px 14px 10px; }
  [data-aileet-ui] .topbar { padding:12px 14px; }
  [data-aileet-ui] .topbar-title { font-size:12px; flex-wrap:wrap; gap:0 7px; }
  [data-aileet-ui] .demo-badge { font-size:8px; }
  [data-aileet-ui] .composer-wrap { padding:10px 10px 0; }
  [data-aileet-ui] .composer textarea { height:48px; padding-top:5px; }
  [data-aileet-ui] .demo-foot { padding:9px 14px 13px; font-size:7px; }
}
@media(prefers-reduced-motion:reduce) { [data-aileet-ui] *,[data-aileet-ui] *::after { animation:none!important; transition:none!important; } }