/* The assistant's tray, drawn as on screen: one dark sheet, the conversation above, the state row at the
   bottom. Used by the homepage, /claude/ and /codex/. Always dark, like the app's pills. */
.tray-scene { position: relative; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 90% at 18% 8%, #a9bce6 0%, #c7b8e4 48%, #f1d3bf 100%); box-shadow: 0 30px 60px -28px rgba(0,0,0,.35); padding: 28px 18px 18px; display: flex; justify-content: center; }
.tray { width: 100%; max-width: 420px; background: rgba(0,0,0,.86); border: 1px solid rgba(255,255,255,.14); border-radius: 19px; color: #f5f5f7; box-shadow: 0 16px 36px -14px rgba(0,0,0,.6); overflow: hidden; font: 13px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; text-align: left; }
.tray .hd { display: flex; align-items: center; gap: 7px; padding: 7px 13px 6px; font-size: 11px; color: rgba(255,255,255,.55); border-bottom: 1px solid rgba(255,255,255,.08); }
.tray .hd .sp { flex: 1; }
.tray .src { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: rgba(255,255,255,.85); }
.tray .src i { width: 7px; height: 7px; border-radius: 50%; background: #6fb4ff; }
.tray .src.claude i { background: #b9a6f0; } .tray .src.codex i { background: #9fd3c7; }
.tray .tag { font-size: 10.5px; padding: 0 6px; border-radius: 4px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.75); }
.tray .sec { padding: 7px 13px; }
.tray .sec + .sec { border-top: 1px solid rgba(255,255,255,.06); }
.tray .lb { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; opacity: .55; display: block; margin-bottom: 1px; }
.tray .at { float: right; font-size: 10.5px; opacity: .4; font-variant-numeric: tabular-nums; margin-left: 8px; }
.tray .line { color: rgba(255,255,255,.72); } .tray .line b { font-weight: 600; color: rgba(255,255,255,.5); margin-right: 4px; }
.tray .you { background: rgba(255,138,130,.07); } .tray .you .lb { color: #ff8a82; opacity: 1; }
.tray .steps ul { list-style: none; margin: 0; padding: 0; font: 11px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; color: #c9ccd3; }
.tray .steps li { margin: 0; color: inherit; } .tray .steps li::before { content: "✓"; display: inline-block; width: 15px; color: #7ee2a8; }
.tray .ans, .tray .reply { box-shadow: inset 3px 0 0 #6fb4ff; background: rgba(111,180,255,.08); }
.tray .ans.claude, .tray .reply.claude { box-shadow: inset 3px 0 0 #b9a6f0; background: rgba(185,166,240,.09); }
.tray .ans.codex, .tray .reply.codex { box-shadow: inset 3px 0 0 #9fd3c7; background: rgba(159,211,199,.08); }
.tray .ans .q { font-weight: 650; } .tray .ans .meta { font-size: 10.5px; opacity: .55; }
.tray .file { display: inline-block; margin: 4px 4px 0 0; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.12); }
.tray .div { text-align: center; font-size: 10.5px; opacity: .4; padding: 4px; }
.tray .row { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px 0 10px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; }
.tray .row .sp { flex: 1; } .tray .row .dim { opacity: .55; font-variant-numeric: tabular-nums; }
.tray .btn { font-size: 11px; font-weight: 600; background: rgba(255,255,255,.14); border-radius: 6px; padding: 2px 8px; }
.tray .rec { width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; flex: none; }
.tray .vdot { width: 8px; height: 8px; border-radius: 50%; background: #0a84ff; flex: none; }
.tray .bars { display: inline-flex; gap: 3px; align-items: center; height: 18px; color: #6fb4ff; }
.tray .bars i { width: 3px; height: 30%; border-radius: 2px; background: currentColor; animation: tray-lvl .8s ease-in-out infinite alternate; }
.tray .bars i:nth-child(3n) { animation-duration: .55s; } .tray .bars i:nth-child(3n+1) { animation-duration: .95s; animation-delay: -.3s; }
.tray .key { width: 24px; height: 20px; border-radius: 6px; background: linear-gradient(#fff, #e6e6e8); box-shadow: 0 2px 0 #b9b9c0; display: grid; place-items: center; color: #1c1c1e; font-size: 11.5px; flex: none; }
@keyframes tray-lvl { from { height: 18%; } to { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .tray .bars i { animation: none; height: 60%; } }