/* VEEHIVE HQ v2 look: living hive, floating dock, HUD cards. Loaded after app.css. Design source: Figma "VEEHIVE HQ". */
:root { --dock: 56px; --spring: cubic-bezier(0.2, 1.35, 0.4, 1); --ease: cubic-bezier(0.2, 0.8, 0.2, 1); }
html { background: #070707; }

/* ---------- backdrop: honeycomb + glow, drifts against the stage ---------- */
#backdrop { position: fixed; inset: -24px; z-index: 0; pointer-events: none; will-change: transform;
  background:
    radial-gradient(ellipse 46% 52% at 50% 48%, rgba(255, 250, 0, 0.13), rgba(255, 250, 0, 0.04) 45%, transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='166.3' viewBox='0 0 96 166.3'%3E%3Cpath d='M48 0L96 27.7V83.1L48 110.9L0 83.1V27.7ZM0 83.1V138.6L48 166.3M96 83.1V138.6L48 166.3' fill='none' stroke='%23fff' stroke-opacity='.04'/%3E%3C/svg%3E") center / 96px 166.3px; }
#backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 50% 50%, transparent 40%, #070707 100%); }
body.calm #backdrop { opacity: 0.5; }
main { position: relative; }
main { z-index: 1; }

/* ---------- top bar ---------- */
.top { position: fixed !important; background: linear-gradient(#070707 30%, rgba(7, 7, 7, 0)); backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; padding: var(--sat) 18px 0; pointer-events: none; }
.top > * { pointer-events: auto; }
body.calm .top { background: rgba(7, 7, 7, 0.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.clock { margin-left: auto; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--mute); text-transform: uppercase; white-space: nowrap; }
.pill { margin-left: 0; display: inline-flex; align-items: center; gap: 7px; background: rgba(11, 11, 11, 0.6); border-width: 1.5px; font-weight: 900; padding: 6px 12px; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); animation: live 2.4s ease-in-out infinite; }
@keyframes live { 50% { opacity: 0.25; } }
@media (max-width: 520px) { .clock { display: none; } .pill { margin-left: auto; } }

/* ---------- dock ---------- */
.tabs { position: fixed !important; inset: auto auto calc(14px + var(--sab)) 50% !important; transform: translateX(-50%) !important; z-index: 30; width: auto !important; height: auto !important;
  display: flex !important; align-items: stretch; gap: 2px; padding: 5px !important;
  background: rgba(18, 18, 18, 0.86) !important; backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7); }
.tabs .ind { position: absolute; left: 0; top: 5px; bottom: 5px; width: 100px; transform-origin: 0 50%; background: var(--yellow); transition: transform 0.5s var(--spring); pointer-events: none; }
.tabs button { position: relative; z-index: 1; padding: 11px 15px; font-weight: 900; font-size: 0.8rem; letter-spacing: 0.12em; color: #BBB; white-space: nowrap; transition: color 0.2s, transform 0.15s var(--ease); }
.tabs button::before { display: none; }
.tabs button.on { color: var(--black); }
.tabs button:active { transform: scale(0.94); color: var(--yellow); }
.tabs button.on:active { color: var(--black); }
.tabs i { transition: background 0.2s, color 0.2s; }
.tabs button.on i { background: var(--black); color: var(--yellow); }
.tabs .find { display: flex; align-items: center; gap: 28px; margin-left: 4px; padding: 0 9px 0 13px; background: #000; border: 1px solid var(--line); color: #8A8A8A; font-weight: 400; font-size: 0.86rem; letter-spacing: 0; text-transform: none; }
.tabs .find kbd { font: 900 0.7rem "Roboto Condensed", sans-serif; background: #222; color: var(--yellow); padding: 1px 6px; }
.tabs .find:hover { border-color: var(--yellow); color: #fff; }
@media (max-width: 760px) { .tabs .find span { display: none; } .tabs .find { gap: 0; padding: 0 11px; } .tabs button { padding: 12px 12px; font-size: 0.76rem; } }
@media (max-width: 380px) { .tabs button { padding: 12px 9px; letter-spacing: 0.08em; } }
main { padding: calc(var(--top) + var(--sat)) 0 calc(var(--dock) + 44px + var(--sab)) !important; }
.nag { position: fixed; bottom: calc(var(--dock) + 28px + var(--sab)) !important; }

/* ---------- hive stage ---------- */
#v-hive { animation: none; }
#hive { position: relative; margin: 0 auto; width: min(100%, 560px); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.hx { display: block; width: 100%; height: auto; overflow: visible; will-change: transform; font-family: "Roboto Condensed", "Arial Narrow", sans-serif; }
.hx text { text-anchor: middle; font-weight: 900; pointer-events: none; }
.hx :focus { outline: none; }
.hx .trace { stroke: var(--yellow); stroke-opacity: 0.26; stroke-width: 1.5; transition: stroke-opacity 0.3s, stroke-width 0.3s; }
.hx .pulse { pointer-events: none; }
.hx .cell, .hx .bot { cursor: pointer; }
.hx .cell .lift { transition: transform 0.45s var(--spring); }
.hx .cell .face { fill: url(#hx-cell); stroke: #343434; stroke-width: 1.2; transition: stroke 0.25s, stroke-width 0.25s, filter 0.3s; }
.hx .cell .halo { fill: var(--yellow); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.hx .cell .num { fill: var(--yellow); letter-spacing: 0.08em; }
.hx .cell .nm { fill: #fff; letter-spacing: 0.01em; }
.hx .cell .st { fill: #6E6E6E; letter-spacing: 0.1em; font-weight: 700; }
.hx .cell.busy .st { fill: var(--yellow); }
.hx .cell.busy .face { stroke: rgba(255, 250, 0, 0.5); }
.hx .cell.sel .face, .hx .cell:focus-visible .face { stroke: var(--yellow); stroke-width: 2; }
.hx .cell.sel .halo { opacity: 0.1; }
.hx .cell:active .lift { transform: scale(0.96); transition-duration: 0.12s; }
.hx .cell .flash { fill: none; stroke: var(--yellow); stroke-width: 3; opacity: 0; pointer-events: none; }
@media (hover: hover) {
  .hx .cell:hover .lift { transform: scale(1.055); }
  .hx .cell:not(.chief):hover .face { stroke: var(--yellow); stroke-width: 2; }
  .hx .cell:hover .halo { opacity: 0.1; }
  .hx .bot:hover .pop { transform: scale(1.28); }
  .hx .bot:hover .tag { opacity: 1; }
}
/* core */
.hx .chief .face { fill: url(#hx-core); stroke: none; }
.hx .chief .halo { opacity: 0.1; animation: breathe 4.2s ease-in-out infinite; }
.hx .chief .halo.two { animation: ring 4.2s ease-out infinite; }
@keyframes breathe { 50% { opacity: 0.2; transform: scale(1.03); } }
@keyframes ring { 0% { opacity: 0.22; transform: scale(0.86); } 100% { opacity: 0; transform: scale(1.5); } }
.hx .chief .c1 { fill: var(--black); letter-spacing: 0.12em; }
.hx .chief .c2 { fill: var(--black); letter-spacing: -0.02em; }
.hx .chief .c3 { fill: var(--red); letter-spacing: 0.12em; }
/* bots */
.hx .bot .hit { fill: transparent; }
.hx .bot .pop { transition: transform 0.35s var(--spring); }
.hx .bot .bob { animation: bob 3.4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes bob { 50% { transform: translateY(-2.2px); } }
.hx .bot .eye { transform-box: fill-box; transform-origin: center; animation: blink 6.2s infinite; animation-delay: var(--b); }
@keyframes blink { 0%, 95.5%, 100% { transform: scaleY(1); } 97.5% { transform: scaleY(0.12); } }
.hx .bot .ant { animation: ant 2.8s ease-in-out infinite; animation-delay: var(--d); }
@keyframes ant { 50% { opacity: 0.35; } }
.hx .bot.moving .bob { animation-duration: 0.42s; }
.hx .bot:active .pop { transform: scale(0.88); }
.hx .bot:focus-visible .head { stroke: #fff; stroke-width: 2.5; }
.hx .bot .tag { opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.hx .bot .tag rect { fill: var(--black); stroke: var(--yellow); stroke-width: 1; }
.hx .bot .tag text { fill: var(--yellow); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.hx .bot.away .tag, .hx .bot.talk .tag { opacity: 1; }
.hx .bot.talk .pop { transform: scale(1.3); }
/* spotlight while a desk or chat is open */
.hx .cell, .hx .bot, .hx .trace { transition: opacity 0.35s var(--ease); }
.hx.focus .cell:not(.sel), .hx.focus .bot:not(.sel) { opacity: 0.22; }
.hx.focus .trace:not(.sel), .hx.focus .pulses { opacity: 0.08; }
.hx.focus .trace.sel { stroke-opacity: 0.9; stroke-width: 2.5; }
/* intro: core lands, traces shoot out, cells pop, the team clocks in */
.hx.intro .cell .lift { animation: pop 0.8s var(--spring) backwards; animation-delay: calc(var(--i) * 70ms + 420ms); }
.hx.intro .trace { stroke-dasharray: 1; animation: draw 0.7s var(--ease) backwards 0.35s; }
.hx.intro .bot { animation: clockin 0.5s var(--ease) backwards; animation-delay: calc(var(--i) * 22ms + 1150ms); }
@keyframes pop { from { transform: scale(0); opacity: 0; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes clockin { from { opacity: 0; } }

/* ---------- HUD ---------- */
.hud { background: rgba(18, 18, 18, 0.9); border: 1px solid var(--line); border-top: 3px solid var(--line); padding: 16px 18px; }
.hud .k { font-weight: 900; font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--yellow); display: flex; align-items: center; gap: 7px; }
.hud .k .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: live 1.8s ease-in-out infinite; }
#hud-brief h2 { font-size: 2.5rem; letter-spacing: -0.02em; margin-top: 8px; }
#hud-brief h2 .n { display: inline-block; }
#hud-brief .punch { color: var(--red); font-weight: 900; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 4px; }
#hud-brief ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 2px; }
#hud-brief li { display: grid; grid-template-columns: 30px 1fr; align-items: start; transition: opacity 0.3s, transform 0.3s var(--ease); }
#hud-brief li.going { opacity: 0; transform: translateX(14px); }
#hud-brief .tk { width: 30px; height: 34px; display: grid; place-items: center start; }
#hud-brief .tk span { width: 17px; height: 19.6px; clip-path: var(--hex); background: var(--yellow); display: grid; place-items: center; transition: transform 0.25s var(--spring); }
#hud-brief .tk span::before { content: ""; width: 13.6px; height: 15.7px; clip-path: var(--hex); background: #121212; transition: background 0.15s; }
#hud-brief .tk:hover span { transform: scale(1.2); }
#hud-brief .tk:hover span::before, #hud-brief li.going .tk span::before { background: var(--yellow); }
#hud-brief .t { font-weight: 700; font-size: 0.86rem; line-height: 1.2; padding-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#hud-brief .m { font-weight: 700; font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
#hud-brief li.late .m { color: var(--red); }
#hud-brief .more { margin-top: 12px; font-weight: 900; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--black); background: var(--yellow); padding: 8px 12px; transition: transform 0.15s var(--ease); }
#hud-brief .more:active { transform: scale(0.95); }
#hud-feed .rows { display: grid; gap: 9px; margin-top: 10px; }
#hud-feed .r { font-size: 0.86rem; line-height: 1.25; color: #DDD; animation: feedin 0.5s var(--ease) backwards; text-align: left; display: block; width: 100%; }
#hud-feed .r b { font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 0.02em; }
#hud-feed .r small { display: block; font-weight: 700; font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: #6E6E6E; }
#hud-feed button.r:hover { color: var(--yellow); }
@keyframes feedin { from { opacity: 0; transform: translateY(6px); } }
#hud-snap .two { display: flex; gap: 20px; margin-top: 8px; }
#hud-snap b { display: block; font-weight: 900; font-size: 1.8rem; line-height: 1; letter-spacing: -0.01em; }
#hud-snap span { font-weight: 700; font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }

/* phones and small windows: headline, hive, ticker */
#v-hive { padding: 6px 0 0; }
#hud-brief { background: none; border: 0; padding: 6px 18px 0; }
#hud-brief .k, #hud-brief ul, #hud-brief .more { display: none; }
#hud-brief h2 { font-size: clamp(2.2rem, 10.5vw, 3rem); margin-top: 0; }
#hud-feed { width: max-content; max-width: calc(100% - 28px); margin: 6px auto 0; padding: 8px 12px; border-top-width: 1px; display: flex; gap: 8px; align-items: center; }
#hud-feed .k span:last-child { display: none; }
#hud-feed .rows { margin: 0; }
#hud-feed .r:nth-child(n+2) { display: none; }
#hud-feed .r small { display: inline; margin-left: 6px; }
#hud-snap { display: none; }

/* wide: full-screen stage with the HUD at the corners */
@media (min-width: 900px) and (min-height: 560px) {
  body.on-hive { overflow: hidden; }
  #v-hive { position: fixed; inset: 0; padding: 0; }
  #hive { position: absolute; inset: 64px 16px calc(var(--dock) + 30px) 16px; width: auto; transition: transform 0.6s var(--spring); }
  .hx { height: 100%; }
  body.sheet-open #hive { transform: translateX(-210px); }
  #hud-brief, #hud-feed, #hud-snap { display: none; }
}
@media (min-width: 1240px) and (min-height: 640px) {
  #hive { inset: 64px 296px calc(var(--dock) + 30px) 296px; }
  .hud { position: absolute; width: 262px; z-index: 2; animation: hudin 0.7s var(--ease) backwards 1.5s; }
  @keyframes hudin { from { opacity: 0; transform: translateY(14px); } }
  #hud-brief { display: block; left: 28px; bottom: calc(var(--dock) + 34px); background: rgba(18, 18, 18, 0.9); border: 1px solid var(--line); border-top: 3px solid var(--yellow); padding: 16px 18px; }
  #hud-brief .k { display: flex; } #hud-brief ul { display: grid; } #hud-brief .more { display: inline-block; }
  #hud-brief h2 { font-size: 2.5rem; margin-top: 8px; }
  #hud-feed { display: block; right: 28px; top: 96px; width: 262px; max-width: none; margin: 0; padding: 16px 18px; border-top-width: 3px; }
  #hud-feed .k span:last-child { display: inline; }
  #hud-feed .rows { margin-top: 10px; }
  #hud-feed .r:nth-child(n+2) { display: block; }
  #hud-feed .r small { display: block; margin: 0; }
  #hud-snap { display: block; right: 28px; bottom: calc(var(--dock) + 34px); }
  body.sheet-open .hud { opacity: 0.25; transition: opacity 0.3s; }
}

/* ---------- sheet / chat upgrades ---------- */
#sheet { background: rgba(14, 14, 14, 0.96); }
.sh-head { background: #141414; padding-bottom: 14px; }
.sh-head .who h2 { font-size: 2.2rem; letter-spacing: -0.02em; }
.sh-head .who .dp { font-weight: 900; letter-spacing: 0.12em; }
.face { display: block; flex: none; overflow: visible; }
.face .bob { animation: bob 3.4s ease-in-out infinite; }
.face .eye { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
.sh-head .face { animation: facein 0.6s var(--spring) backwards 0.1s; }
@keyframes facein { from { transform: scale(0.3) rotate(-25deg); opacity: 0; } }
.strip { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.strip button { background: #191919; text-align: left; padding: 6px 9px; line-height: 1.15; transition: background 0.2s, transform 0.15s var(--ease); min-width: 0; }
.strip button:active { transform: scale(0.95); }
.strip b { display: block; font-weight: 900; font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.03em; }
.strip span { display: block; font-weight: 700; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8A8A8A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip button.on { background: var(--yellow); color: var(--black); }
.strip button.on span { color: var(--black); }
.member .face { margin: -4px 0; }
.member { transition: background 0.15s, transform 0.3s var(--spring), border-color 0.2s; animation: feedin 0.45s var(--ease) backwards; }
.member:nth-child(3) { animation-delay: 0.05s; } .member:nth-child(4) { animation-delay: 0.1s; } .member:nth-child(5) { animation-delay: 0.15s; }
@media (hover: hover) { .member:hover { transform: translateX(4px); border-left-color: var(--yellow); background: var(--coal2); } }
.msg { animation: msgin 0.45s var(--spring) backwards; transform-origin: 0 100%; }
.msg.sham { transform-origin: 100% 100%; }
@keyframes msgin { from { opacity: 0; transform: scale(0.8) translateY(10px); } }
.msg .bub { padding: 10px 14px; font-size: 1rem; }
.msg.sham .bub { font-weight: 700; }
.msg .act { border: 1px solid #3A3A3A; padding: 4px 8px; margin-top: 6px; font-weight: 900; letter-spacing: 0.1em; color: #BBB; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.msg .act:hover { border-color: var(--yellow); color: var(--yellow); }
.msg .act.ok { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
.msg.sham .act { margin-left: auto; display: block; }
.msg.wait .bub { display: flex; gap: 5px; padding: 14px; }
.msg.wait .bub i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); animation: dots 1s ease-in-out infinite; }
.msg.wait .bub i:nth-child(2) { animation-delay: 0.15s; } .msg.wait .bub i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dots { 0%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.msg.wait .act { display: none; }
.chat-form { background: #141414; padding: 12px 16px; }
.chat-form textarea { background: #000; border: 1.5px solid var(--line); }
.chat-form textarea:focus { border-color: var(--yellow); }
@media (min-width: 900px) { #scrim { background: rgba(0, 0, 0, 0.55); } }

/* ---------- find anyone ---------- */
#palette { position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center; padding: min(16vh, 140px) 14px 0; background: rgba(0, 0, 0, 0.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade 0.18s ease-out; }
@keyframes fade { from { opacity: 0; } }
#palette .box { width: min(560px, 100%); background: #101010; border: 1px solid var(--line); border-top: 3px solid var(--yellow); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8); animation: boxin 0.4s var(--spring); }
@keyframes boxin { from { transform: scale(0.94) translateY(-10px); opacity: 0; } }
#palette input { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 16px 18px; font-size: 1.15rem; font-weight: 700; }
#palette .list { max-height: min(52vh, 420px); overflow-y: auto; padding: 6px; }
#palette .it { width: 100%; display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 5px 10px; }
#palette .it.cur { background: var(--yellow); color: var(--black); }
#palette .it b { font-weight: 900; text-transform: uppercase; }
#palette .it span { display: block; font-size: 0.8rem; color: var(--mute); }
#palette .it.cur span { color: var(--black); }
#palette .it em { font-style: normal; font-weight: 900; font-size: 0.66rem; letter-spacing: 0.1em; color: var(--yellow); text-transform: uppercase; }
#palette .it.cur em { color: var(--black); }
#palette .none { padding: 18px; color: var(--mute); }

/* ---------- small polish on the other views ---------- */
.todo, .card, .conn { transition: transform 0.3s var(--spring), border-color 0.2s; animation: feedin 0.4s var(--ease) backwards; }
.todo:nth-child(2), .card:nth-child(2) { animation-delay: 0.04s; } .todo:nth-child(3), .card:nth-child(3) { animation-delay: 0.08s; }
.todo:nth-child(4) { animation-delay: 0.12s; } .todo:nth-child(5) { animation-delay: 0.16s; } .todo:nth-child(n+6) { animation-delay: 0.2s; }
.todo .tick span { transition: transform 0.3s var(--spring); }
@media (hover: hover) { .todo:hover { transform: translateX(4px); border-left-color: var(--yellow); } .todo .tick:hover span { transform: scale(1.2); } }

@media (prefers-reduced-motion: reduce) {
  .hx *, .face *, .hud, .msg, .member, .todo, .card, .conn, #palette, #palette .box, .pill::before, .hud .k .dot { animation: none !important; }
  #hive { transition: none; }
}
@media (prefers-reduced-transparency: reduce) { .tabs { background: var(--coal) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } }

/* ================= RUN B3: motion layer (GSAP 3.12.5, transform and opacity only) ================= */
/* while the hive assembles GSAP owns these transforms, so the CSS springs stand down */
.hx.assembling .lift, .hx.assembling .pop { transition: none; }
.hx .trails { pointer-events: none; }
.hx .trails circle { will-change: transform, opacity; }

/* department cells breathe when work is waiting, harder while one of the team is writing */
.hx .cell.busy .halo { opacity: 0.07; animation: busy 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.45s); }
.hx .cell.working .halo { animation: busy 1.1s ease-in-out infinite; }
.hx .cell.working .face { stroke: var(--yellow); stroke-width: 2; }
@keyframes busy { 0%, 100% { opacity: 0.05; transform: scale(0.97); } 50% { opacity: 0.2; transform: scale(1.05); } }
/* spring into a department: the chosen cell steps forward */
.hx .cell.sel .lift { transform: scale(1.09); }
.hx .cell.chief.sel .lift { transform: scale(1.05); }

/* typing bubble over a bot that is writing a reply right now */
.hx .bot .typing { opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.hx .bot .typing rect { fill: var(--black); stroke: var(--yellow); stroke-width: 1.2; }
.hx .bot .typing circle { fill: var(--yellow); animation: dots 1s ease-in-out infinite; }
.hx .bot .typing circle:nth-of-type(2) { animation-delay: 0.15s; } .hx .bot .typing circle:nth-of-type(3) { animation-delay: 0.3s; }
.hx .bot.think .typing { opacity: 1; }
.hx .bot.think .tag { opacity: 1; }
.hx .bot.think .pop { transform: scale(1.3); }
.hx .bot.think .bob { animation-duration: 0.6s; }
.hx.focus .bot.think { opacity: 1; }

/* rolling counters (rules are forced so tile and card styles for b/span cannot leak in) */
.roll { display: inline-flex !important; }
.roll .col { all: unset !important; position: relative !important; display: inline-block !important; clip-path: inset(0 -2px) !important; }
.roll .col > b { all: unset !important; visibility: hidden !important; }
#brief .stat .roll, #hud-snap .roll { display: flex !important; }
.roll .rs { font: inherit !important; color: inherit !important; letter-spacing: inherit !important; text-transform: none !important; margin: 0 !important; padding: 0 !important; background: none !important; position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 1000% !important; display: block !important; will-change: transform; }
.roll .rs .d { all: unset !important; display: block !important; height: 10% !important; width: 100% !important; text-align: center !important; }

/* to-do burst */
#fx { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
#fx i { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
#fx .spark { width: 11px; height: 12.7px; clip-path: var(--hex); background: var(--yellow); }
#fx .spark.w { background: #fff; }
#fx .ring { width: 26px; height: 30px; clip-path: var(--hex); background: var(--yellow); }
.todo, .todo:nth-child(n) { animation: none; }
.todo.done .tick span { transform: scale(1.15); }
#hud-brief li.going { opacity: 1; transform: none; }

/* live activity ticker */
#ticker { display: flex; align-items: center; gap: 10px; height: 30px; margin: 8px 14px 0; padding: 0 0 0 10px; overflow: hidden;
  background: rgba(18, 18, 18, 0.82); border: 1px solid rgba(255, 255, 255, 0.1); border-left: 3px solid var(--yellow); }
#ticker:empty { display: none; }
#ticker .live { flex: none; display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: 0.64rem; letter-spacing: 0.14em; color: var(--yellow); }
#ticker .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: live 1.8s ease-in-out infinite; }
#ticker .win { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 26px), transparent); }
#ticker .lane { display: inline-flex; white-space: nowrap; will-change: transform; }
#ticker .it { display: inline-block; padding: 0 22px 0 0; font-size: 0.84rem; color: #CFCFCF; cursor: pointer; }
#ticker .it::after { content: ""; display: inline-block; width: 6px; height: 7px; margin-left: 22px; clip-path: var(--hex); background: #4A4A4A; vertical-align: middle; }
#ticker .it b { font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 0.03em; }
#ticker .it.hot b { color: var(--yellow); }
#ticker .it:hover { color: var(--yellow); }
#hud-feed { display: none; }                      /* phones: the ticker replaces the one-line feed */

/* reply written out word by word */
.msg .bub .w { display: inline-block; }

/* live stamp + snap */
#brief .stamp { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; justify-content: center; }
#brief .stamp .dot, #hud-snap .k .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: live 1.8s ease-in-out infinite; }
#brief .stamp .re { font-weight: 900; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--black); color: var(--yellow); padding: 5px 10px; }
#brief .stamp .re[disabled] { opacity: 0.6; }
#hud-snap .two { gap: 16px; }
#hud-snap .nx { margin-top: 10px; font-size: 0.8rem; line-height: 1.25; color: #CFCFCF; }
#hud-snap .nx b { font-size: 0.64rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); display: inline; margin-right: 4px; }

@media (min-width: 900px) and (min-height: 560px) {
  #ticker { position: absolute; z-index: 3; top: calc(var(--top) + 6px); left: 50%; width: min(700px, calc(100% - 40px)); margin: 0 0 0 calc(min(700px, 100% - 40px) / -2); transition: transform 0.6s var(--spring), opacity 0.3s; }
  #hive { inset: 104px 16px calc(var(--dock) + 30px) 16px; }
  body.sheet-open #ticker { transform: translateX(-210px); }
}
@media (min-width: 1240px) and (min-height: 640px) {
  #hive { inset: 104px 296px calc(var(--dock) + 30px) 296px; }
  #hud-feed { display: block; top: 110px; }
  #ticker { width: min(640px, calc(100% - 640px)); margin-left: calc(min(640px, 100% - 640px) / -2); }
}
@media (prefers-reduced-motion: reduce) {
  .hx .cell.busy .halo, .hx .cell.working .halo, .hx .bot .typing circle, #ticker .live i, #brief .stamp .dot, #hud-snap .k .dot { animation: none !important; }
  .hx .cell .lift, .hx .bot .pop, #ticker, .tabs .ind { transition: none !important; }
}