/* The homepage demo: crew.bot's board, drawn with the board's own dark tokens (web/src/styles.css on the
   redesign) and its bot faces. Everything is scoped under .demo or .dphone so it can't touch the page. */
.demo, .dphone {
  --d-neutral: #777777;
  --d-bg: #000000; --d-sidebar: #111111; --d-panel: #111111;
  --d-panel-2: color-mix(in oklab, var(--d-neutral) 20%, transparent);
  --d-hover: color-mix(in oklab, var(--d-neutral) 14%, transparent);
  --d-active: color-mix(in oklab, var(--d-neutral) 32%, transparent);
  --d-line: color-mix(in oklab, var(--d-neutral) 14%, transparent);
  --d-line-strong: color-mix(in oklab, var(--d-neutral) 32%, transparent);
  --d-text: #f3f3f3; --d-muted: #959595; --d-faint: #777777;
  --d-quaternary: color-mix(in oklab, var(--d-neutral) 51%, transparent);
  --d-ink: #f3f3f3; --d-ink-fg: #000000;
  --d-accent: #13b5d1; --d-accent-soft: color-mix(in oklab, var(--d-accent) 16%, transparent);
  --d-green: #4cc98a; --d-amber: #e9a94b; --d-red: #ff6d64;
  font: 400 13px/18px "Geist", -apple-system, BlinkMacSystemFont, sans-serif; color: var(--d-text); text-align: left;
  -webkit-font-smoothing: antialiased;
}
.demo *, .dphone * { box-sizing: border-box; }
:where(.demo, .dphone) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
.demo svg.i, .dphone svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---- The window ---- */
.demo { position: relative; width: 1200px; height: 720px; border-radius: 14px; border: 1px solid #262626; background: var(--d-bg); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 0 0 1px #000, 0 40px 120px rgb(0 0 0 / 0.75); }
.d-title { height: 34px; flex: none; display: flex; align-items: center; padding: 0 14px; background: var(--d-sidebar); border-bottom: 1px solid var(--d-line); position: relative; }
.d-title .lights { display: flex; gap: 8px; } .d-title .lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.d-title .lights i:nth-child(2) { background: #febc2e; } .d-title .lights i:nth-child(3) { background: #28c840; }
.d-title .t { position: absolute; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--d-faint); }
/* Windows' title bar: the app's name on the left, minimise, maximise and close on the right. */
.d-title.win { padding: 0 0 0 12px; }
.d-title.win .t { position: static; transform: none; display: flex; align-items: center; gap: 8px; color: var(--d-muted, var(--d-faint)); }
.d-title.win .ctl { display: flex; margin-left: auto; height: 100%; }
.d-title.win .ctl i { width: 44px; display: grid; place-items: center; font-style: normal; font-size: 11px; color: var(--d-faint); }
.d-body { flex: 1; min-height: 0; display: flex; }

/* ---- Sidebar ---- */
.d-side { width: 236px; flex: none; background: var(--d-sidebar); display: flex; flex-direction: column; padding: 10px 8px; gap: 1px; }
.d-brand { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.d-brand .tools { margin-left: auto; display: flex; gap: 2px; color: var(--d-muted); }
.d-brand .tools button { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; }
.d-brand .tools button:hover { background: var(--d-hover); color: var(--d-text); }
.d-nav { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 8px; color: var(--d-text); width: 100%; }
.d-nav svg.i { color: var(--d-muted); }
.d-nav:hover { background: var(--d-hover); }
.d-nav.on { background: var(--d-active); }
.d-sec { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 4px; padding: 0 10px; font-size: 12px; color: var(--d-muted); }
.d-sec button { color: var(--d-muted); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; }
.d-sec button:hover { background: var(--d-hover); color: var(--d-text); }
.d-mate { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 8px; width: 100%; white-space: nowrap; overflow: hidden; }
.d-mate:hover { background: var(--d-hover); }
.d-mate.on { background: var(--d-active); }
.d-mate .r { color: var(--d-muted); overflow: hidden; text-overflow: ellipsis; }
.d-mate .dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--d-accent); flex: none; }
.d-mate .busy { margin-left: auto; font-size: 11px; color: var(--d-muted); }
.d-proj { padding: 2px 10px; font-size: 12px; color: var(--d-faint); }
.d-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 8px 10px 4px; border-top: 1px solid var(--d-line); }
.d-me .y { width: 26px; height: 26px; border-radius: 50%; background: #333; display: grid; place-items: center; font-size: 12px; font-weight: 500; flex: none; }
.d-me b { display: block; font-weight: 400; } .d-me small { display: block; font-size: 11.5px; color: var(--d-muted); white-space: nowrap; }

/* ---- Main ---- */
.d-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.d-head { height: 54px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--d-line); }
.d-head b { display: block; font-weight: 500; } .d-head small { display: block; font-size: 12px; color: var(--d-muted); }
.d-head .acts { margin-left: auto; display: flex; gap: 6px; align-items: center; color: var(--d-muted); }
.d-head .acts button { height: 28px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; }
.d-head .acts button:hover { background: var(--d-hover); color: var(--d-text); }
.d-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.d-col { max-width: 600px; margin: 0 auto; padding: 22px 24px 16px; }
.d-day { text-align: center; font-size: 12px; color: var(--d-muted); margin: 4px 0 18px; }
.d-msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; margin-top: 16px; }
.d-msg.cont { margin-top: 8px; }
.d-msg .who { display: flex; align-items: baseline; gap: 7px; margin-bottom: 3px; }
.d-msg .who b { font-weight: 500; }
.d-msg .who span { color: var(--d-muted); } .d-msg .who time { color: var(--d-faint); font-size: 12px; }
.d-msg .tx { line-height: 1.6; color: var(--d-text); }
.d-msg .tx p { margin: 0 0 6px; } .d-msg .tx p:last-child { margin: 0; }
.d-msg .tx ul { margin: 4px 0 0; padding-left: 18px; } .d-msg .tx li { margin: 2px 0; }
.d-msg .tx a { color: var(--d-accent); text-decoration: none; } .d-msg .tx a:hover { text-decoration: underline; }
.d-you { display: flex; flex-direction: column; align-items: flex-end; margin-top: 16px; }
.d-you .b { max-width: 78%; padding: 9px 14px; border-radius: 16px; background: var(--d-panel-2); line-height: 1.55; }
.d-you time { margin-top: 4px; font-size: 11.5px; color: var(--d-faint); }
.d-typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.d-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--d-muted); animation: d-type 1.2s infinite ease-in-out; }
.d-typing i:nth-child(2) { animation-delay: 0.15s; } .d-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes d-type { 0%, 60%, 100% { opacity: 0.25; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.d-new { animation: d-in 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes d-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Cards: flat panels, like the board's */
.d-card { margin-top: 8px; padding: 14px 16px; border-radius: 16px; background: var(--d-panel); display: flex; flex-direction: column; gap: 9px; }
.d-card .d-ctop { display: flex; align-items: center; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.d-card .d-ctop b { font-weight: 500; }
.d-card .d-ctop .ttl { flex: 1 1 180px; min-width: 0; }
.d-card .d-ctop svg.i { align-self: flex-start; margin-top: 1px; }
.d-card .d-ctop .m { margin-left: auto; color: var(--d-faint); font-variant-numeric: tabular-nums; }
.d-card .brief { color: var(--d-muted); line-height: 1.55; }
.d-card .links { display: flex; gap: 14px; font-size: 12px; }
.d-card .links button { color: var(--d-accent); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.d-card .links button:hover { text-decoration: underline; }
.d-card .links .plain { color: var(--d-faint); font-weight: 400; }
.d-badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: var(--d-panel-2); color: var(--d-muted); }
.d-badge.accent { background: var(--d-accent-soft); color: var(--d-accent); }
.d-badge.green { background: color-mix(in oklab, var(--d-green) 16%, transparent); color: var(--d-green); }
.d-badge.amber { background: color-mix(in oklab, var(--d-amber) 16%, transparent); color: var(--d-amber); }
.d-badge.red { background: color-mix(in oklab, var(--d-red) 16%, transparent); color: var(--d-red); }
.d-badge .s { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.d-kv { margin: 0; display: grid; grid-template-columns: 64px 1fr; gap: 4px 12px; padding: 9px 12px; border-radius: 10px; background: var(--d-panel-2); font-size: 12.5px; }
.d-kv dt { color: var(--d-muted); } .d-kv dd { margin: 0; }
.d-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.d-btn { height: 30px; padding: 0 13px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 12.5px; background: var(--d-panel-2); color: var(--d-text); }
.d-btn:hover { background: var(--d-active); }
.d-btn.pri { background: var(--d-ink); color: var(--d-ink-fg); }
.d-btn.pri:hover { background: #d4d4d4; }
.d-btn svg.i { width: 14px; height: 14px; }
.d-res h4 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.d-res ul { margin: 0; padding-left: 18px; line-height: 1.6; } .d-res li { margin: 3px 0; }
.d-res p { margin: 0 0 6px; line-height: 1.6; }
.d-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 4px 0 2px; }
.d-tbl th { text-align: left; font-weight: 500; color: var(--d-muted); padding: 6px 8px; border-bottom: 1px solid var(--d-line); }
.d-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--d-line); }
.d-file { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 11px; border-radius: 8px; background: var(--d-panel-2); font-size: 12.5px; }
.d-code { font: 12px/1.65 "Geist Mono", ui-monospace, monospace; background: var(--d-panel-2); border-radius: 10px; padding: 9px 12px; white-space: pre; overflow: hidden; }
.d-code .a { color: var(--d-green); } .d-code .d { color: var(--d-red); }

/* Composer */
.d-chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 600px; margin: 0 auto; padding: 0 24px 8px; }
.d-chip { height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--d-line-strong); color: var(--d-muted); font-size: 12.5px; display: inline-flex; align-items: center; }
.d-chip:hover { color: var(--d-text); background: var(--d-hover); }
.d-comp { max-width: 600px; width: calc(100% - 48px); margin: 0 auto 16px; border: 1px solid var(--d-line-strong); border-radius: 16px; padding: 10px 10px 8px 14px; display: flex; flex-direction: column; gap: 6px; background: var(--d-bg); }
.d-comp:focus-within { border-color: color-mix(in oklab, var(--d-neutral) 55%, transparent); }
.d-comp input { width: 100%; background: none; border: 0; outline: 0; color: var(--d-text); font: inherit; padding: 2px 0; }
.d-comp input::placeholder { color: var(--d-faint); }
.d-comp .row { display: flex; align-items: center; gap: 4px; color: var(--d-muted); }
.d-comp .row .hint { font-size: 11.5px; color: var(--d-faint); margin-right: auto; }
.d-comp .row button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.d-comp .row button:hover { background: var(--d-hover); color: var(--d-text); }
.d-comp .row .send { background: var(--d-active); color: var(--d-muted); }
.d-comp.has .row .send { background: var(--d-ink); color: var(--d-ink-fg); }

/* ---- The job panel ---- */
.d-job { width: 372px; flex: none; border-left: 1px solid var(--d-line); display: flex; flex-direction: column; background: var(--d-bg); }
.d-job[hidden] { display: none; }
.d-job .jh { height: 54px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--d-line); }
.d-job .jh b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.d-job .jh .x { margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: var(--d-muted); }
.d-job .jh .x:hover { background: var(--d-hover); color: var(--d-text); }
.d-tabs { display: flex; gap: 2px; padding: 10px 12px 0; }
.d-tab { height: 28px; padding: 0 11px; border-radius: 999px; color: var(--d-muted); }
.d-tab.on { background: var(--d-active); color: var(--d-text); }
.d-screen { position: relative; margin: 10px 12px 0; height: 216px; flex: none; border-radius: 10px; border: 1px solid var(--d-line-strong); background: #141414; overflow: hidden; }
.d-capt { position: absolute; left: 8px; bottom: 8px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: rgb(0 0 0 / 0.72); font-size: 11px; color: #ddd; }
.d-scene { position: absolute; inset: 0; display: flex; flex-direction: column; animation: d-fade 0.4s ease; }
@keyframes d-fade { from { opacity: 0; } to { opacity: 1; } }
.d-ptr { position: absolute; z-index: 4; width: 16px; height: 16px; transition: left 0.85s cubic-bezier(0.65, 0, 0.35, 1), top 0.85s cubic-bezier(0.65, 0, 0.35, 1); filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.6)); }
.d-ptr::after { content: ""; position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; opacity: 0; }
.d-ptr.click::after { animation: d-ripple 0.55s ease-out; }
@keyframes d-ripple { from { opacity: 0.8; transform: scale(0.4); } to { opacity: 0; transform: scale(1.8); } }
.d-acts { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px 12px; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.d-act { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 9px; align-items: start; padding: 8px 4px; border-bottom: 1px solid var(--d-line); }
.d-act .w { font-size: 12.5px; line-height: 1.45; } .d-act .w em { font-style: normal; color: var(--d-faint); }
.d-act .t { font: 11px/16px "Geist Mono", ui-monospace, monospace; color: var(--d-faint); }
.d-act .t.wait { color: var(--d-amber); } .d-act .t.ok { color: var(--d-green); }
.d-empty { padding: 40px 24px; text-align: center; color: var(--d-muted); line-height: 1.55; }
.d-empty b { display: block; color: var(--d-text); font-weight: 500; margin-bottom: 4px; }

/* Scenes: the apps on the Mac the crew is using */
.sc-bar { height: 22px; flex: none; display: flex; align-items: center; gap: 5px; padding: 0 8px; background: #1e1e1e; border-bottom: 1px solid #2a2a2a; font-size: 10.5px; color: #9a9a9a; }
.sc-bar i { width: 7px; height: 7px; border-radius: 50%; background: #3c3c3c; }
.sc-bar .u { margin-left: 6px; flex: 1; height: 14px; border-radius: 4px; background: #2a2a2a; display: flex; align-items: center; padding: 0 7px; font-size: 10px; color: #8a8a8a; }
.sc-bar .n { margin-left: 6px; }
.sc { flex: 1; min-height: 0; font-size: 10.5px; color: #c4c4c4; }
.sc-wa { display: grid; grid-template-columns: 104px 1fr; }
.sc-wa .l { background: #171717; border-right: 1px solid #262626; padding: 4px 0; }
.sc-wa .l div { display: flex; align-items: center; gap: 6px; padding: 5px 7px; color: #a8a8a8; white-space: nowrap; }
.sc-wa .l div.on { background: #252525; color: #eee; }
.sc-wa .l i { width: 15px; height: 15px; border-radius: 50%; background: #2f3b35; flex: none; }
.sc-wa .c { display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; padding: 8px; padding-bottom: 36px; background: #0f1412; }
.sc-wa .m { max-width: 86%; padding: 5px 8px; border-radius: 8px; background: #1f2a25; color: #e6e6e6; line-height: 1.4; }
.sc-wa .m small { display: block; font-size: 9px; color: #8fa89c; }
.sc-wa .m.o { align-self: flex-end; background: #1d4a3a; }
.sc-tb { padding: 8px 10px; }
.sc-tb h5 { margin: 0 0 6px; font-size: 11px; font-weight: 500; color: #ddd; }
.sc-tb table { width: 100%; border-collapse: collapse; }
.sc-tb th { text-align: left; font-weight: 500; color: #777; padding: 4px 5px; border-bottom: 1px solid #2a2a2a; }
.sc-tb td { padding: 5px; border-bottom: 1px solid #202020; white-space: nowrap; }
.sc-tb tr.hit td { background: rgb(157 143 250 / 0.13); color: #fff; }
.sc .g, .sc .r { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--d-green); margin-right: 4px; }
.sc .r { background: var(--d-red); }
.sc-wb { display: grid; grid-template-columns: 78px 1fr; }
.sc-wb .menu { background: #1d1d1d; border-right: 1px solid #2a2a2a; padding: 4px 0; color: #999; }
.sc-wb .menu div { padding: 3px 8px; } .sc-wb .menu .on { background: #2c2c2c; color: #eee; }
.sc-wb .tools { display: flex; gap: 4px; margin-bottom: 6px; }
.sc-wb .tools span { height: 16px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 3px; background: #2a2a2a; font-size: 9.5px; }
.sc-wb .tools .en { background: #1f3d2f; color: #a7e8c6; }
.sc-mail .row { display: grid; grid-template-columns: 92px 1fr auto; gap: 8px; padding: 5px 10px; border-bottom: 1px solid #222; }
.sc-mail .row b { font-weight: 500; color: #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-mail .row span { color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-mail .row em { font-style: normal; font-size: 9.5px; padding: 0 5px; border-radius: 3px; background: #2a2a2a; color: #bbb; }
.sc-mail .row em.dr { background: #1f3d2f; color: #a7e8c6; }
.sc-mail .row.dim { opacity: 0.45; }
.sc-search { padding: 8px 12px; }
.sc-search .q { height: 20px; border-radius: 10px; border: 1px solid #333; display: flex; align-items: center; padding: 0 9px; margin-bottom: 8px; color: #ddd; }
.sc-search .res { margin-bottom: 7px; } .sc-search .res b { display: block; color: #a8b8ff; font-weight: 500; } .sc-search .res span { color: #999; }
.sc-code { font: 10px/1.6 "Geist Mono", ui-monospace, monospace; padding: 6px 10px; background: #111; white-space: pre; }
.sc-code .ln { color: #555; } .sc-code .a { color: var(--d-green); } .sc-code .d { color: var(--d-red); } .sc-code .k { color: #c39bff; }

/* Pages (New, Work, Library…) */
.d-page { max-width: 720px; margin: 0 auto; padding: 28px 28px 32px; }
.d-page h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; }
.d-page .sub { margin: 4px 0 0; color: var(--d-muted); line-height: 1.55; font-size: 13px; max-width: none; }
.d-home { text-align: center; padding-top: 70px; }
.d-home h2 { font-size: 26px; line-height: 34px; }
.d-home .d-comp { width: 100%; margin: 22px 0 0; text-align: left; }
.d-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; text-align: left; }
.d-tile { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--d-panel); }
.d-tile:hover { background: color-mix(in oklab, var(--d-neutral) 18%, var(--d-panel)); }
.d-tile .ic { width: 32px; height: 32px; border-radius: 8px; background: var(--d-panel-2); display: grid; place-items: center; color: var(--d-muted); flex: none; }
.d-tile b { display: block; font-weight: 500; } .d-tile small { display: block; color: var(--d-muted); font-size: 12px; }
.d-ptabs { display: flex; gap: 2px; margin: 18px 0 14px; }
.d-list { border-radius: 14px; background: var(--d-panel); overflow: hidden; }
.d-li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; width: 100%; }
.d-li + .d-li { border-top: 1px solid var(--d-line); }
button.d-li:hover { background: var(--d-hover); }
.d-li b { display: block; font-weight: 400; } .d-li small { display: block; color: var(--d-muted); font-size: 12px; margin-top: 1px; }
.d-li .m { color: var(--d-faint); font-size: 12px; text-align: right; white-space: nowrap; }
.d-li .ic { width: 26px; height: 26px; display: grid; place-items: center; color: var(--d-muted); }
.d-tog { width: 28px; height: 16px; border-radius: 999px; background: var(--d-accent); position: relative; display: inline-block; vertical-align: middle; margin-left: 10px; }
.d-tog::after { content: ""; position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.d-goal .bar { height: 4px; border-radius: 4px; background: var(--d-panel-2); margin-top: 7px; overflow: hidden; }
.d-goal .bar i { display: block; height: 100%; background: var(--d-text); border-radius: 4px; }

/* A note that slides up when something is read-only in the demo */
.d-toast { position: absolute; left: 50%; bottom: 18px; z-index: 20; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; padding: 9px 14px; border-radius: 12px; background: #1d1d1d; border: 1px solid var(--d-line-strong); font-size: 12.5px; color: var(--d-text); transition: opacity 0.2s, transform 0.25s; white-space: nowrap; }
.d-toast.on { opacity: 1; transform: translate(-50%, 0); }
.d-toast a { color: var(--d-accent); margin-left: 6px; }

/* ---- The phone ---- */
.dphone { position: relative; width: 300px; height: 620px; border-radius: 50px; padding: 11px; background: #0f0f0f; border: 1px solid #2a2a2a; box-shadow: 0 0 0 1px #000, 0 40px 100px rgb(0 0 0 / 0.7); }
.dphone .scr { position: relative; height: 100%; border-radius: 40px; background: #000; overflow: hidden; display: flex; flex-direction: column; }
.dphone .isl { position: absolute; left: 50%; top: 10px; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #000; z-index: 6; box-shadow: 0 0 0 1px #161616; }
.dphone .sb { height: 48px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 28px 0; font-size: 13px; font-weight: 600; }
.dphone .bat { width: 24px; height: 12px; border-radius: 3px; border: 1px solid #888; position: relative; }
.dphone .bat::after { content: ""; position: absolute; inset: 1.5px 6px 1.5px 1.5px; border-radius: 1px; background: #eee; }
.dphone .ph { display: flex; align-items: center; gap: 10px; padding: 6px 14px 10px; border-bottom: 1px solid var(--d-line); }
.dphone .ph svg.i { color: var(--d-muted); }
.dphone .ph b { display: block; font-weight: 500; font-size: 14px; line-height: 1.2; } .dphone .ph small { font-size: 11.5px; color: var(--d-muted); }
.dphone .pm { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 14px 10px; }
.dphone .d-msg { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.dphone .d-msg.cont { margin-top: 6px; }
.dphone .d-you { margin-top: 12px; } .dphone .d-you .b { max-width: 88%; }
.dphone .d-card { padding: 12px 13px; border-radius: 14px; }
.dphone .pc { margin: 0 12px 24px; height: 40px; flex: none; border-radius: 999px; border: 1px solid var(--d-line-strong); display: flex; align-items: center; padding: 0 6px 0 15px; color: var(--d-faint); }
.dphone .pc .send { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; background: var(--d-active); display: grid; place-items: center; color: var(--d-muted); }
.dphone .nt { position: absolute; left: 10px; right: 10px; top: 48px; z-index: 7; padding: 10px 12px; border-radius: 20px; background: rgb(40 40 40 / 0.95); backdrop-filter: blur(14px); display: flex; gap: 10px; align-items: center; font-size: 12.5px; line-height: 1.35; transform: translateY(-140px); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.dphone .nt.on { transform: none; }
.dphone .nt .ic { width: 34px; height: 34px; border-radius: 9px; background: #000; display: grid; place-items: center; flex: none; }
.dphone .nt b { display: block; font-weight: 600; } .dphone .nt span { color: #c8c8c8; }

.av { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; transform-origin: 50% 92%; }
.av > svg { display: block; overflow: visible; transform-origin: 50% 92%; }
.av-lid { transform-box: fill-box; transform-origin: center; animation: av-blink var(--blink) linear var(--blink-at) infinite; }
.av-look { animation: av-glance var(--glance) ease-in-out var(--glance-at) infinite; }
.av[data-mood="working"] > svg { animation: av-bounce 1.1s ease-in-out var(--bounce-at) infinite; }
.av[data-mood="working"] .av-look { animation: av-busy 2.6s ease-in-out var(--glance-at) infinite; }
.av[data-mood="thinking"] .av-look { animation: av-think 3.2s ease-in-out var(--glance-at) infinite; }
/* Helmets: while working, the eyes sweep the visor. Bauhaus: the second shape bobs. */
.av[data-style="helmet"][data-mood="working"] .av-look { animation: av-scan 0.9s ease-in-out var(--glance-at) infinite alternate; }
.av-accent { transform-box: fill-box; transform-origin: 50% 100%; }
.av[data-style="bauhaus"][data-mood="working"] .av-accent { animation: av-bob 1.1s ease-in-out var(--bounce-at) infinite; }
/* Pixel sprites move a whole cell at a time (1px is one cell in their grid), never in between. */
.av[data-style="pixel"] .av-lid { animation-timing-function: step-end; }
.av[data-style="pixel"] .av-look { animation: av-px-glance var(--glance) step-end var(--glance-at) infinite; }
.av[data-style="pixel"][data-mood="working"] > svg { animation: av-px-hop 0.7s step-end var(--bounce-at) infinite; }
.av[data-style="pixel"][data-mood="working"] .av-look { animation: av-px-busy 1.8s step-end var(--glance-at) infinite; }
.av[data-style="pixel"][data-mood="thinking"] .av-look { animation: av-px-think 3s step-end infinite; }
.av[data-small] .av-look { animation: none; }
.av[data-still] .av-look, .av[data-still] .av-lid, .av[data-still] .av-accent, .av[data-still] > svg { animation: none; }
/* A blink, and later a quick double blink. */
@keyframes av-blink {
  0%, 29%, 31.6%, 71%, 73.6%, 75.2%, 77.8%, 100% { transform: scaleY(1); }
  30.2%, 72.2%, 76.4% { transform: scaleY(0.1); }
}
/* Now and then a look to one side, later a shorter one the other way. */
@keyframes av-glance {
  0%, 40%, 58%, 76%, 88%, 100% { transform: translate(0, 0); }
  43%, 55% { transform: translate(calc(var(--gx) * var(--reach)), 0); }
  79%, 85% { transform: translate(calc(var(--gx) * var(--reach) * -0.7), calc(var(--reach) * -0.3)); }
}
@keyframes av-busy {
  0%, 100% { transform: translate(0, 0); }
  12%, 30% { transform: translate(calc(var(--reach) * -1), calc(var(--reach) * 0.2)); }
  40%, 58% { transform: translate(var(--reach), calc(var(--reach) * 0.2)); }
  68%, 86% { transform: translate(calc(var(--reach) * 0.2), calc(var(--reach) * 0.5)); }
}
@keyframes av-think {
  0%, 100% { transform: translate(calc(var(--reach) * -0.5), calc(var(--reach) * -1.3)); }
  50% { transform: translate(calc(var(--reach) * 0.6), calc(var(--reach) * -1.4)); }
}
@keyframes av-scan {
  from { transform: translateX(calc(var(--reach) * -1.8)); }
  to { transform: translateX(calc(var(--reach) * 1.8)); }
}
@keyframes av-bob {
  0%, 100% { transform: none; }
  50% { transform: translateY(calc(-7px * var(--k))) rotate(calc(var(--gx) * 8deg * var(--k))); }
}
@keyframes av-px-glance {
  0%, 44%, 58%, 80%, 87% { transform: none; }
  50% { transform: translate(calc(var(--gx) * 1px), 0); }
  83% { transform: translate(calc(var(--gx) * -1px), 0); }
}
@keyframes av-px-busy {
  0%, 50% { transform: translate(-1px, 0); }
  25%, 75% { transform: translate(1px, 0); }
}
@keyframes av-px-think {
  0% { transform: translate(0, -1px); }
  50% { transform: translate(calc(var(--gx) * 1px), -1px); }
}
@keyframes av-px-hop {
  0% { transform: none; }
  50% { transform: translateY(-10%); }
}
@keyframes av-bounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(0) scale(calc(1 + 0.06 * var(--k)), calc(1 - 0.08 * var(--k))); }
  48% { transform: translateY(calc(-9% * var(--k))) scale(calc(1 - 0.04 * var(--k)), calc(1 + 0.05 * var(--k))); }
  76% { transform: translateY(0) scale(calc(1 + 0.03 * var(--k)), calc(1 - 0.04 * var(--k))); }
}