/* ============================================================================
   Orbix — Concierge's voice command centre (namespace orbx-*).
   ----------------------------------------------------------------------------
   Colours: ONLY the active admin theme's --at-color-* labels, following the
   Design & Layout Formulas surface → label table:
     the page   → words Heading/Foreground, artwork + lights Link, edges Control border
     a panel    → Card + Card foreground, artwork Link, edges Control border
     a pop-up   → Popover + Popover foreground, edges Border
     filled controls → Primary + Primary foreground
     status lights   → status-<x>-ink
   Allowed exceptions: the pop-up backdrop dimmer and drop shadows.
   Shell responds to screen tiers (mobile first, min-width); the card ring and
   panels respond to their own container width.
   ============================================================================ */

.orbx {
    --orbx-gap: clamp(8px, 1.6vw, 18px);
    --orbx-radius: 16px;
    --orbx-glass: color-mix(in srgb, var(--at-color-card) 82%, transparent);
    --orbx-glow: color-mix(in srgb, var(--at-color-link) 38%, transparent);
    --orbx-line: var(--at-color-control-border, var(--at-color-border));
    position: fixed;
    inset: 0;
    z-index: 1040;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
        "top"
        "stage"
        "talk"
        "bar";
    gap: var(--orbx-gap);
    padding: var(--orbx-gap);
    background: var(--at-color-background);
    background-image:
        radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--at-color-link) 10%, transparent) 0%, transparent 60%),
        linear-gradient(color-mix(in srgb, var(--at-color-link) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--at-color-link) 5%, transparent) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    color: var(--at-color-foreground);
    overflow: hidden;
    font-size: 16px;
}
.orbx *, .orbx *::before, .orbx *::after { box-sizing: border-box; }
/* The admin page underneath must not scroll into view behind Orbix. */
html.orbx-open, html.orbx-open body { overflow: hidden; height: 100%; }
/* Page mode (owner's tablet, 16 Oct 2026): the admin page underneath is
   switched OFF on Orbix's own page, not merely covered. A covered top bar,
   logo, avatar and background pattern still showed through on an Android
   tablet, and their hidden animations made the page lag. Modals, the lightbox
   and pop-up messages stay available. */
html.orbx-page, html.orbx-page body { background: var(--at-color-background) !important; background-image: none !important; }
html.orbx-page body::before, html.orbx-page body::after,
html.orbx-page #wrapper::before, html.orbx-page #wrapper::after { content: none !important; display: none !important; }
html.orbx-page #header,
html.orbx-page #menu,
html.orbx-page #setup-menu-wrapper,
html.orbx-page .top-bar-mobile,
html.orbx-page #newsfeed,
html.orbx-page #fj-forj,
html.orbx-page .fj-pill,
html.orbx-page .tbeng-side-toggle,
html.orbx-page .tbeng-menu,
html.orbx-page .tbeng-qc-mega,
html.orbx-page .tbeng-nfp-mega,
html.orbx-page .tbeng-fx-mega,
html.orbx-page #wrapper:not(:has(#orbx)) { display: none !important; }

/* ── top bar ─────────────────────────────────────────────────── */
.orbx-top {
    grid-area: top;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}
.orbx-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.orbx-brand-mark {
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
    border: 2px solid var(--at-color-link);
    box-shadow: 0 0 14px var(--orbx-glow), inset 0 0 10px var(--orbx-glow);
}
.orbx-title {
    margin: 0;
    /* The theme preset's heading font (owner, 16 Oct 2026), a little smaller. */
    font-family: var(--at-font-heading, inherit);
    font-weight: var(--at-font-heading-weight, 400);
    font-size: clamp(16px, 1.5vw, 22px);
    white-space: nowrap;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--at-color-heading);
    line-height: 1.1;
}
.orbx-tagline { margin: 2px 0 0; font-size: 13px; letter-spacing: .08em; color: var(--at-color-foreground); opacity: .85; }
.orbx-clock { display: none; flex-direction: column; align-items: center; margin: 0 auto; }
.orbx-clock-time { font-size: clamp(20px, 2.2vw, 30px); font-variant-numeric: tabular-nums; color: var(--at-color-link); letter-spacing: .08em; }
.orbx-clock-date { font-size: 13px; color: var(--at-color-foreground); }
.orbx-top-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

.orbx-chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--orbx-line);
    background: var(--orbx-glass);
    color: var(--at-color-card-foreground);
    font-size: 15px; line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.orbx-chip:hover, .orbx-chip:focus-visible {
    border-color: var(--at-color-link);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--at-color-ring) 40%, transparent);
    outline: none;
    text-decoration: none;
}
.orbx-chip > span { color: var(--at-color-card-foreground); }
.orbx-chip .fa { color: var(--at-color-link); }
.orbx-chip span:not(.sr-only) { display: none; }

/* ── panels (feed + conversation) ───────────────────────────── */
.orbx-panel {
    background: var(--orbx-glass);
    color: var(--at-color-card-foreground);
    border: 1px solid var(--orbx-line);
    border-radius: var(--orbx-radius);
    padding: 12px 14px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
}
.orbx-panel-title {
    margin: 0 0 8px;
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--at-color-card-foreground);
}
.orbx-panel-title .fa { color: var(--at-color-link); margin-right: 4px; }

/* The live feed fills the edge drawer (owner, 16 Oct 2026). */
.orbx-side-body.orbx-feed { gap: 0; }
.orbx-feed-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.orbx-feed-list li, .orbx-feed-list button { color: var(--at-color-popover-foreground); }
.orbx-feed-list li { border-bottom-color: var(--at-color-border); }
.orbx-feed-list li {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 4px;
    border-bottom: 1px solid var(--orbx-line);
    font-size: 15px; line-height: 1.4;
    overflow-wrap: anywhere;
}
.orbx-feed-list li::before {
    content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%;
    background: var(--at-color-link);
}
.orbx-feed-list li.is-warn::before { background: var(--at-color-status-warning-ink); }
.orbx-feed-list li.is-good::before { background: var(--at-color-status-success-ink); }
.orbx-feed-list li.orbx-feed-empty::before { display: none; }
.orbx-feed-list button {
    border: 0; background: none; padding: 0; text-align: left; cursor: pointer;
    color: var(--at-color-card-foreground); font: inherit;
}
.orbx-feed-list button span { color: var(--at-color-link); text-decoration: underline; }
.orbx-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.orbx-suggest-btn {
    min-height: 44px; padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--orbx-line);
    background: var(--at-color-card);
    color: var(--at-color-card-foreground);
    font-size: 14px; line-height: 1.3;
    text-align: left; cursor: pointer;
}
.orbx-suggest-btn:hover, .orbx-suggest-btn:focus-visible { border-color: var(--at-color-link); outline: none; }

.orbx-talk { grid-area: talk; max-height: 22vh; }
.orbx-log { overflow-y: auto; flex: 1 1 auto; min-height: 48px; display: flex; flex-direction: column; gap: 8px; }
.orbx-line { font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.orbx-line b { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--at-color-link); font-weight: 600; }
.orbx-line.is-you { color: var(--at-color-card-foreground); opacity: .9; }
.orbx-line.is-orbix { color: var(--at-color-card-foreground); }
/* Morning news roundup: where each story came from (owner, 18 Oct 2026). */
.orbx-news-src { margin-top: 6px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.orbx-news-src a { color: var(--at-color-link); text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.orbx-line .orbx-draft {
    margin-top: 6px; padding: 10px 12px; border-radius: 10px;
    border: 1px dashed var(--orbx-line); white-space: pre-wrap;
}
.orbx.no-captions .orbx-talk { display: none; }
.orbx-talk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.orbx-talk-head .orbx-panel-title { margin: 0; }
.orbx-talk-tools { display: flex; align-items: center; gap: 6px; }
.orbx-chip-small { min-height: 44px; padding: 6px 12px; font-size: 14px; }
.orbx-chip-small span { display: inline; }
#orbx-btn-transcript[aria-expanded="true"] { border-color: var(--at-color-link); box-shadow: 0 0 0 2px color-mix(in srgb, var(--at-color-link) 35%, transparent); }

/* ── stage: orb + cards ─────────────────────────────────────── */
.orbx-stage {
    grid-area: stage;
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* When cards fill a short screen, start at the top instead of pushing the
       orb up under the header. */
    justify-content: safe center;
    overflow-y: auto;
    overflow-x: hidden;
    container-type: inline-size;
    container-name: orbxstage;
}
/* With cards on screen the orb steps back to make room. */
.orbx-stage.has-cards .orbx-orb-wrap { width: min(44vw, 26vh, 280px); }
.orbx-orb-wrap {
    position: relative;
    /* On a phone the orb shares a short screen with the conversation and the
       talk bar, so it is sized by the height first. */
    width: min(62vw, 30vh, 460px);
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
}
.orbx-orb { width: 100%; height: 100%; display: block; max-width: 100%; }
/* A slow breath (owner, 16 Oct 2026): the orb swells a little and settles.
   Its own scale, so it never fights the swing back and forth in 3D. */
.orbx-sp-core .orbx-orb { animation: orbx-orb-breathe 5s ease-in-out infinite; }
@keyframes orbx-orb-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.045; } }
.orbx.is-calm .orbx-sp-core .orbx-orb { animation: none; }
@media (prefers-reduced-motion: reduce) { .orbx-sp-core .orbx-orb { animation: none; } }
/* The living background (orbix_field.js) draws the chosen style itself; its
   still CSS layers step aside while it does (they stay as the fallback). */
.orbx-bg-field { position: absolute; inset: 0; display: block; }
/* One more class than the style rules in orbix_backdrops.css (loaded after
   this file), which set display: block and used to win: the old moving layers
   then ran underneath the live drawing, two backgrounds at once (16 Oct 2026). */
.orbx .orbx-bg.is-live .orbx-bg-l { display: none; }
/* Fonts from the enabled theme preset (owner, 16 Oct 2026): the clock's time
   takes the heading font, the date and the tagline the body font, and the
   talk button the theme's button font, like every other button. */
.orbx-clock-time { font-family: var(--at-font-heading, inherit); font-weight: var(--at-font-heading-weight, 400); }
.orbx-clock-date, .orbx-tagline { font-family: var(--at-font-body, inherit); font-weight: var(--at-font-body-weight, 400); }
.orbx .orbx-mic { font-family: var(--at-font-button, inherit); }
/* The "Home ›" trail is switched off for now (owner, 16 Oct 2026) — kept in
   the page and still filled in, so it can come back by removing this rule. */
.orbx .orbx-sp-crumbs { display: none; }
/* Phones (owner's screenshots, 16 Oct 2026): the heading stays on one line,
   and an open card sits between the heading and the ring. Under it: Back,
   Flip, Straighten / angle, Open full record and Close — Flip and Straighten
   brought back on phones and tablets (owner, 16 Oct 2026); turning and zoom
   stay by drag and pinch (those buttons are switched off in orbix_holo.js). */
@media (max-width: 767.98px) {
    .orbx-title { font-size: 15px; letter-spacing: .16em; }
    .orbx-tagline { font-size: 12px; }
}
/* Tablets and phones (owner, 22 Oct 2026: "increase the height of them … so we don't
   have to scroll so much … they can cover over the bottom left controls … stop just
   above the bottom full width button"): an open record card fills from just under
   the Orbix title to just above the talk bar. --orbx-bar-room is the talk bar's
   height from the screen's foot, measured live (orbix.js). The controls bottom left
   go under the open card (it has its own close). Replaces the earlier phone rule that
   kept the card between the heading and those controls. */
@media (max-width: 991.98px) {
    .orbx .orbx-holo { justify-content: flex-start; padding: 64px 10px calc(var(--orbx-bar-room, 120px) + 10px); gap: 0; }
    .orbx .orbx-holo-stage { width: 100%; height: 100%; max-height: none; align-items: stretch; }
    .orbx .orbx-holo-obj { height: 100%; }
    /* A fixed height, however long the record (a long list grew past the talk bar and
       its close went off the screen: owner, 22 Oct 2026): longer content scrolls inside. */
    .orbx .orbx-holo-face { min-height: 0; height: var(--orbx-room-h); max-height: var(--orbx-room-h); overflow-y: auto; }
    .orbx:has(.orbx-holo:not([hidden])) .orbx-sp-compass { z-index: 5; }
    /* EVERY card and fly-out ends just above the talk bar, so its close is always reachable. */
    /* 30 px clear of the talk bar: the cards stand at a slight angle, and their lower corner dips a little. */
    .orbx { --orbx-room-h: calc(100dvh - 64px - var(--orbx-bar-room, 120px) - 30px); }
    .orbx .orbx-pop { place-items: start center; padding: 64px 10px calc(var(--orbx-bar-room, 120px) + 10px); }
    .orbx .orbx-pop-box { width: calc(100% - 20px); height: var(--orbx-room-h); max-height: var(--orbx-room-h); }
    .orbx .orbx-set { padding-bottom: calc(var(--orbx-bar-room, 120px) + 10px); }
    .orbx .orbx-drawer, .orbx.is-tucked .orbx-side { bottom: var(--orbx-bar-room, 120px); }
    .orbx .orbx-confirm { max-height: var(--orbx-room-h); overflow-y: auto; }
    .orbx .orbx-sp-zone { max-height: min(var(--orbx-sp-zh, 600px), var(--orbx-room-h)); }
}
.orbx-orb-hit {
    position: absolute; inset: 14%;
    border-radius: 50%;
    border: 0; background: transparent; cursor: pointer;
}
.orbx-orb-hit:focus-visible { outline: 3px solid var(--at-color-ring); outline-offset: 4px; }
.orbx-state {
    margin: 6px 0 0;
    font-size: 14px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--at-color-link);
    text-align: center;
}
.orbx-live-words {
    margin: 4px 0 0; min-height: 1.4em; max-width: 90%;
    font-size: 17px; text-align: center; color: var(--at-color-heading);
    overflow-wrap: anywhere;
}

/* the card ring — a row that wraps on narrow stages, a 3D arc on wide ones */
.orbx-ring {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 10px;
    perspective: 1200px;
}
.orbx-ring:empty { display: none; }
.orbx-card {
    position: relative;
    display: flex; flex-direction: column; gap: 4px;
    min-height: 92px;
    padding: 12px 12px 12px 46px;
    border-radius: 14px;
    border: 1px solid var(--orbx-line);
    background: var(--orbx-glass);
    color: var(--at-color-card-foreground);
    text-align: left;
    cursor: pointer;
    font: inherit;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .14), 0 0 0 0 var(--orbx-glow);
    transition: box-shadow .2s ease, border-color .2s ease;
    animation: orbx-card-in .45s ease-out both;
    animation-delay: calc(var(--i, 0) * 70ms);
    overflow-wrap: anywhere;
}
.orbx-card:hover, .orbx-card:focus-visible {
    border-color: var(--at-color-link);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .18), 0 0 18px var(--orbx-glow);
    outline: none;
}
.orbx-card-n {
    position: absolute; left: 10px; top: 12px;
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 13px; font-weight: 700;
    border: 1.5px solid var(--at-color-link);
    color: var(--at-color-link);
}
.orbx-card-kind { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--at-color-link); }
.orbx-card-title { font-size: 15px; line-height: 1.3; color: var(--at-color-card-foreground); font-weight: 600; }
.orbx-card-sub { font-size: 13px; line-height: 1.3; color: var(--at-color-card-foreground); opacity: .85; }
.orbx-card-due { font-size: 13px; color: var(--at-color-card-foreground); display: inline-flex; align-items: center; gap: 6px; }
.orbx-card-due.is-overdue::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--at-color-status-danger-ink);
}
.orbx-ring-clear {
    margin-top: 8px; min-height: 44px; padding: 6px 14px;
    border-radius: 999px; border: 1px solid var(--orbx-line);
    background: transparent; color: var(--at-color-foreground); cursor: pointer;
}

@keyframes orbx-card-in {
    from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.92); }
    to   { opacity: 1; transform: none; }
}

/* A wide stage: the cards float in an arc around the orb, in 3D. */
@container orbxstage (min-width: 640px) {
    .orbx-stage.has-cards .orbx-orb-wrap { width: min(34cqi, 44vh, 340px); }
    .orbx-ring {
        position: absolute;
        inset: 0;
        display: block;
        margin: 0;
        pointer-events: none;
        transform-style: preserve-3d;
    }
    .orbx-card {
        position: absolute;
        left: 50%; top: 50%;
        width: clamp(150px, 22cqi, 220px);
        pointer-events: auto;
        transform: translate(-50%, -50%) translate3d(var(--x, 0px), var(--y, 0px), 0) rotateY(var(--ry, 0deg));
        animation: orbx-card-fly .6s cubic-bezier(.2, .8, .2, 1) both, orbx-card-float 6s ease-in-out infinite;
        animation-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * -700ms);
    }
    .orbx-card:hover, .orbx-card:focus-visible { z-index: 2; }
    .orbx-ring-clear { position: absolute; bottom: 4px; }
}
@keyframes orbx-card-fly {
    from { opacity: 0; transform: translate(-50%, -50%) translate3d(0, 0, -200px) scale(.4); }
    to   { opacity: 1; transform: translate(-50%, -50%) translate3d(var(--x, 0px), var(--y, 0px), 0) rotateY(var(--ry, 0deg)); }
}
@keyframes orbx-card-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -6px; }
}

/* ── confirm card, toast ───────────────────────────────────── */
.orbx-confirm {
    position: fixed;
    left: 50%; bottom: calc(var(--orbx-bar-h, 96px) + 12px);
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 24px));
    /* Above an open record pop-up (8): a change waiting for a yes is never out of sight. */
    z-index: 9;
    padding: 16px 18px;
    border-radius: var(--orbx-radius);
    background: var(--at-color-popover);
    color: var(--at-color-popover-foreground);
    border: 1px solid var(--at-color-border);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .3), 0 0 24px var(--orbx-glow);
    animation: orbx-card-in .3s ease-out both;
}
.orbx-confirm[hidden] { display: none; }
.orbx-confirm-title { margin: 0 0 8px; font-size: 18px; color: var(--at-color-popover-foreground); }
.orbx-confirm-body { font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.orbx-confirm-body dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; }
.orbx-confirm-body dt { font-weight: 600; color: var(--at-color-popover-foreground); }
.orbx-confirm-body dd { margin: 0; white-space: pre-wrap; }
.orbx-confirm-hint { margin: 10px 0; font-size: 13px; color: var(--at-color-popover-foreground); opacity: .85; }
.orbx-confirm-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.orbx-confirm-btns .btn { min-height: 44px; min-width: 96px; }

.orbx-toast {
    position: fixed; left: 50%; top: 16px; transform: translateX(-50%);
    z-index: 10;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    max-width: calc(100vw - 24px);
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--at-color-popover);
    color: var(--at-color-popover-foreground);
    border: 1px solid var(--at-color-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.orbx-toast[hidden] { display: none; }
.orbx-toast-undo {
    min-height: 44px; padding: 6px 14px; border-radius: 999px;
    border: 1px solid var(--at-color-border); background: transparent;
    color: var(--at-color-popover-foreground); cursor: pointer; font-weight: 600;
}

/* ── talk bar ──────────────────────────────────────────────── */
.orbx-bar {
    grid-area: bar;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "left right"
        "talk talk";
    gap: 10px;
    align-items: center;
}
.orbx-bar-left { grid-area: left; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.orbx-bar-right { grid-area: right; justify-self: end; min-width: 0; max-width: 100%; }
.orbx-talkbar { grid-area: talk; display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.orbx-mic {
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 10px 22px;
    border-radius: 999px;
    border: 0;
    background: var(--at-color-primary);
    color: var(--at-color-primary-foreground);
    font-size: 17px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--at-color-primary), 0 0 26px var(--orbx-glow);
    transition: box-shadow .2s ease;
}
.orbx-mic:focus-visible { outline: 3px solid var(--at-color-ring); outline-offset: 3px; }
/* One row always (owner, 15 Oct 2026): the words shrink to fit a phone. */
.orbx-mic-label { color: var(--at-color-primary-foreground); white-space: nowrap; min-width: 0; }
.orbx-mic-wave { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.orbx-mic-wave i {
    display: block; width: 3px; height: 30%; border-radius: 2px;
    background: var(--at-color-primary-foreground);
    transform-origin: center;
    transition: height .08s linear;
}
.orbx[data-state="listening"] .orbx-mic,
.orbx[data-state="speaking"] .orbx-mic { box-shadow: 0 0 0 3px var(--at-color-ring), 0 0 40px var(--orbx-glow); }

.orbx-type { display: flex; gap: 8px; min-width: 0; }
.orbx-input {
    flex: 1 1 auto; min-width: 0; min-height: 44px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--orbx-line);
    background: var(--at-color-input, var(--at-color-card));
    color: var(--at-color-foreground);
    font-size: 16px;
}
.orbx-input::placeholder { color: var(--at-color-placeholder, var(--at-color-foreground)); }
.orbx-input:focus { outline: none; border-color: var(--at-color-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--at-color-ring) 35%, transparent); }

.orbx-icon-btn {
    display: inline-grid; place-items: center;
    min-width: 44px; min-height: 44px;
    border-radius: 50%;
    border: 1px solid var(--orbx-line);
    background: var(--orbx-glass);
    color: var(--at-color-link);
    cursor: pointer;
    text-decoration: none;
}
.orbx-icon-btn:hover, .orbx-icon-btn:focus-visible { border-color: var(--at-color-link); outline: none; text-decoration: none; }
.orbx-icon-btn[aria-pressed="true"] { border-color: var(--at-color-status-warning-ink); color: var(--at-color-status-warning-ink); }

.orbx-preset {
    min-height: 44px; width: 100%; max-width: 220px;
    padding: 6px 28px 6px 10px;
    border-radius: 12px;
    border: 1px solid var(--orbx-line);
    background: var(--at-color-input, var(--at-color-card));
    color: var(--at-color-foreground);
    font-size: 15px;
}

.orbx-switch { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; min-height: 44px; font-weight: 400; }
.orbx-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.orbx-switch-track {
    position: relative; width: 46px; height: 26px; border-radius: 13px;
    border: 1px solid var(--orbx-line); background: var(--at-color-card);
}
.orbx-switch-track::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--at-color-link); transition: transform .15s ease;
}
.orbx-switch input:checked + .orbx-switch-track { border-color: var(--at-color-link); }
.orbx-switch input:checked + .orbx-switch-track::after { transform: translateX(20px); }
.orbx-switch input:focus-visible + .orbx-switch-track { box-shadow: 0 0 0 3px var(--at-color-ring); }
.orbx-switch-label { font-size: 15px; color: var(--at-color-foreground); }

/* ── testing readout (?orbix_debug=1) ──────────────────────── */
.orbx-debug {
    /* A small box at the top left, not the whole width (owner, 19 Oct 2026). */
    position: fixed; left: 8px; top: 64px; z-index: 1045;
    width: min(420px, calc(100% - 16px));
    max-height: 32vh; overflow: auto;
    padding: 8px 10px; border-radius: 10px;
    background: var(--at-color-popover); color: var(--at-color-popover-foreground);
    border: 1px solid var(--at-color-border);
    font: 13px/1.4 ui-monospace, monospace;
    pointer-events: none;
}
/* Any Orbix panel opened over the page puts the readout out of the way. */
body.orbx-set-open .orbx-debug,
body:has(.orbx-drawer:not([hidden])) .orbx-debug,
body:has(.orbx-side.is-open) .orbx-debug { visibility: hidden; }

/* ── the edge tab and its slide-in panel (every screen size) ── */
.orbx-side-tab, .orbx-side { display: none; }
.orbx.is-tucked .orbx-side-tab {
    display: grid; place-items: center;
    position: fixed; right: 0; top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 30px; height: 72px;
    padding: 0;
    border: 1px solid var(--orbx-line); border-right: 0;
    border-radius: 14px 0 0 14px;
    background: var(--orbx-glass);
    color: var(--at-color-link);
    box-shadow: -4px 0 18px rgba(0, 0, 0, .18), 0 0 14px var(--orbx-glow);
    cursor: pointer;
    transition: opacity .2s ease;
}
/* The touch area is wider than the tab itself (44px), so it is easy to hit. */
.orbx.is-tucked .orbx-side-tab::before { content: ""; position: absolute; inset: 0 0 0 -14px; }
.orbx.is-tucked .orbx-side-tab:focus-visible { outline: 3px solid var(--at-color-ring); outline-offset: 2px; }
.orbx.is-tucked .orbx-side {
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(340px, 86vw);
    z-index: 7;
    background: var(--at-color-popover);
    color: var(--at-color-popover-foreground);
    border-left: 1px solid var(--at-color-border);
    box-shadow: -18px 0 50px rgba(0, 0, 0, .35);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .3s;
}
.orbx.is-tucked .orbx-side.is-open {
    transform: none;
    visibility: visible;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.orbx.is-tucked .orbx-side.is-open ~ .orbx-side-tab,
.orbx.is-tucked .orbx-side-tab[aria-expanded="true"] { opacity: 0; pointer-events: none; }
.orbx-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--at-color-border); }
.orbx-side-head .orbx-panel-title { margin: 0; color: var(--at-color-popover-foreground); }
.orbx-side-body { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
/* Inside the panel the buttons are a list with their words showing. */
.orbx-side-body .orbx-top-actions { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.orbx-side-body .orbx-chip { width: 100%; justify-content: flex-start; border-radius: 12px; }
.orbx-side-body .orbx-chip span:not(.sr-only) { display: inline; }
.orbx-side-body .orbx-chip-exit .sr-only { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; }
.orbx-side-body #orbx-btn-briefing { display: inline-flex; }
.orbx-side-body .orbx-bar-left { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.orbx-side-body .orbx-bar-right { justify-self: auto; }
.orbx-side-body .orbx-preset { max-width: none; }
.orbx-side-body .orbx-switch-label { font-size: 15px; color: var(--at-color-popover-foreground); }
.orbx-side-body .orbx-bar-left { flex-direction: column; align-items: flex-start; }
/* The mute button says what it does inside the panel. */
.orbx-side-body #orbx-music { display: inline-flex; gap: 8px; width: auto; padding: 0 14px; border-radius: 12px; }
.orbx-side-body #orbx-music .sr-only { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; color: var(--at-color-popover-foreground); }
.orbx-side-body #orbx-mute { display: inline-flex; gap: 8px; width: auto; padding: 0 14px; border-radius: 12px; }
.orbx-side-body #orbx-mute .sr-only { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; color: var(--at-color-popover-foreground); }
/* Typing: hidden until "Type instead" is on in the panel. */
.orbx-typing-switch { display: none; }
.orbx.is-tucked .orbx-typing-switch { display: inline-flex; }
.orbx.is-tucked:not(.show-typing) .orbx-type { display: none; }
/* The panel's titled groups. */
.orbx-side-group { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--at-color-border); }
.orbx-side-group:last-child { border-bottom: 0; padding-bottom: 0; }
.orbx-side-group-title {
    margin: 0;
    font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    /* A pop-up's accent words take Link (formula: Muted foreground is never words). */
    color: var(--at-color-link);
}
.orbx-side-group-title label { margin: 0; font: inherit; color: inherit; }
.orbx-side-body .orbx-bar-left, .orbx-side-body .orbx-bar-right { width: 100%; }
.orbx-side-body .orbx-preset { width: 100%; }
.orbx-side-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.orbx-side-places .orbx-chip { width: 100%; justify-content: flex-start; border-radius: 12px; }
.orbx-side-places .orbx-chip span { display: inline; }
/* Only the talk button stays in the bar, in the middle. */
.orbx.is-tucked .orbx-bar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "talk"; justify-items: center; }
.orbx.is-tucked .orbx-talkbar { width: 100%; justify-content: center; }
/* The bar spans the screen but only its buttons take taps: on tablets the
   ring round Home sits beside the talk button, and the bar's empty sides
   were swallowing taps on Money, Clients and Team (owner, 17 Oct 2026). */
.orbx.is-tucked .orbx-bar, .orbx.is-tucked .orbx-talkbar { pointer-events: none; }
.orbx.is-tucked .orbx-talkbar > * { pointer-events: auto; }
/* Wider talk button on tablet and desktop (owner, 15 Oct 2026); phones already span the screen. */
@media (min-width: 768px) {
    .orbx.is-tucked .orbx-mic { width: min(480px, 100%); min-width: 0; }
}
/* Top right: the settings cog and the close button. */
.orbx-corner { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.orbx-exit, .orbx-cog { width: 44px; padding: 0; justify-content: center; flex: 0 0 auto; }
.orbx-cog .fa { transition: transform .5s cubic-bezier(.2, 0, 0, 1); }
.orbx-cog[aria-expanded="true"] { border-color: var(--at-color-link); }
.orbx-cog[aria-expanded="true"] .fa { transform: rotate(90deg); }

/* ── settings pop-up (from the cog) ─────────────────────────── */
.orbx-set {
    position: fixed; inset: 0; z-index: 8;
    display: grid; place-items: start end;
    padding: 72px 16px 16px;
    background: rgba(0, 0, 0, .4);
    opacity: 0; visibility: hidden;
    transition: opacity .3s cubic-bezier(.2, 0, 0, 1), visibility 0s linear .3s;
}
.orbx-set.is-open { opacity: 1; visibility: visible; transition: opacity .3s cubic-bezier(.2, 0, 0, 1), visibility 0s; }
.orbx-set-box {
    width: min(420px, 100%);
    max-height: 100%;
    display: flex; flex-direction: column;
    border-radius: var(--orbx-radius);
    overflow: hidden;
    background: var(--at-color-popover);
    color: var(--at-color-popover-foreground);
    border: 1px solid var(--at-color-border);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 30px var(--orbx-glow);
    /* Grows out of the cog in the top right corner. */
    transform-origin: top right;
    transform: translateY(-10px) scale(.92);
    transition: transform .42s cubic-bezier(.2, 0, 0, 1);
}
.orbx-set.is-open .orbx-set-box { transform: none; }
.orbx-set-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--at-color-border); }
.orbx-set-head .orbx-panel-title { margin: 0; color: var(--at-color-popover-foreground); }
.orbx-set-body { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
/* Inside the pop-up the buttons are a list with their words showing. */
.orbx-set-body .orbx-top-actions { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.orbx-set-body .orbx-chip { width: 100%; justify-content: flex-start; border-radius: 12px; }
.orbx-set-body .orbx-chip span:not(.sr-only) { display: inline; }
.orbx-set-body #orbx-btn-briefing { display: inline-flex; }
.orbx-set-body .orbx-bar-left { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; width: 100%; }
.orbx-set-body .orbx-bar-right { justify-self: auto; width: 100%; }
.orbx-set-body .orbx-preset { width: 100%; max-width: none; }
.orbx-set-body .orbx-switch-label { font-size: 15px; color: var(--at-color-popover-foreground); }
.orbx-set-body #orbx-music { display: inline-flex; gap: 8px; width: auto; padding: 0 14px; border-radius: 12px; }
.orbx-set-body #orbx-music .sr-only { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; color: var(--at-color-popover-foreground); }
.orbx-set-body #orbx-mute { display: inline-flex; gap: 8px; width: auto; padding: 0 14px; border-radius: 12px; }
.orbx-set-body #orbx-mute .sr-only { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; color: var(--at-color-popover-foreground); }
@media (max-width: 767.98px) {
    .orbx-set { place-items: center; padding: 16px; }
    .orbx-set-box { transform-origin: center; transform: translateY(16px) scale(.94); }
}
/* The pop-up never mixes with the moving 3D orb (owner, 16 Oct 2026: it
   flickered on a phone). The 3D space is kept in its own layer underneath,
   the pop-up gets its own layer on top, and on phones, where the pop-up sits
   over the orb, the space is dimmed and then put to rest while it is open. */
.orbx-stage { isolation: isolate; z-index: 0; }
.orbx-set { transform: translateZ(0); will-change: opacity; }
/* Phones (Android flickered, 16 Oct 2026): nothing see-through is ever drawn
   over moving pictures. Behind the pop-up is solid theme background, shown at
   once rather than faded; only the box itself slides in. The orb and the
   moving background are hidden and paused while it is open. */
@media (max-width: 767.98px) {
    .orbx-set { background: var(--at-color-background); transition: none; will-change: auto; transform: none; }
    .orbx-set.is-open { transition: none; }
    .orbx.is-set-open .orbx-sp,
    .orbx.is-set-open .orbx-bg { visibility: hidden; }
    .orbx.is-set-open .orbx-bg *, .orbx.is-set-open .orbx-bg *::before, .orbx.is-set-open .orbx-bg *::after { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
    .orbx.is-tucked .orbx-side, .orbx.is-tucked .orbx-side.is-open { transition: none; }
    .orbx-set, .orbx-set.is-open, .orbx-set-box, .orbx-cog .fa { transition: none; }
}

/* ── record pop-up ─────────────────────────────────────────── */
.orbx-pop {
    position: fixed; inset: 0; z-index: 8;
    display: grid; place-items: center;
    padding: 12px;
    /* A page opened inside Orbix stands at the same angle as every record
       card (owner, 19 Oct 2026); the angle matches orbix_holo.js's resting view. */
    perspective: 1200px;
    background: rgba(0, 0, 0, .45);
}
.orbx-pop[hidden] { display: none; }
.orbx-pop-box {
    /* Room left round it, so the angled card's nearer edge and its Close
       button stay on screen (it used to fill the whole screen, flat). */
    width: min(940px, calc(100% - 96px));
    height: min(820px, calc(100% - 140px));
    display: flex; flex-direction: column;
    border-radius: var(--orbx-radius);
    overflow: hidden;
    background: var(--at-color-popover);
    color: var(--at-color-popover-foreground);
    border: 1px solid var(--at-color-border);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 30px var(--orbx-glow);
    transform-origin: center;
    transform: rotateX(-6deg) rotateY(-14deg);
}
@media (max-width: 767.98px) {
    .orbx-pop-box { width: calc(100% - 40px); height: calc(100% - 120px); }
}
.orbx-pop-head {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px 8px 16px;
    border-bottom: 1px solid var(--at-color-border);
}
.orbx-pop-num:empty { display: none; }
.orbx-pop-num {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700; font-size: 13px;
    border: 1.5px solid var(--at-color-link); color: var(--at-color-link);
}
.orbx-pop-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 17px; color: var(--at-color-popover-foreground); overflow-wrap: anywhere; }
.orbx-pop-frame { flex: 1 1 auto; width: 100%; max-width: 100%; border: 0; background: var(--at-color-background); }

/* ── drawer (history, my settings) ─────────────────────────── */
.orbx-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(420px, 100vw);
    z-index: 7;
    display: flex; flex-direction: column;
    background: var(--at-color-popover);
    color: var(--at-color-popover-foreground);
    border-left: 1px solid var(--at-color-border);
    box-shadow: -18px 0 50px rgba(0, 0, 0, .3);
    animation: orbx-drawer-in .25s ease-out both;
}
.orbx-drawer[hidden] { display: none; }
@keyframes orbx-drawer-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.orbx-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--at-color-border); }
.orbx-drawer .orbx-panel-title { margin: 0; color: var(--at-color-popover-foreground); }
.orbx-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px; }
.orbx-hist { list-style: none; margin: 0; padding: 0; }
.orbx-hist li { padding: 10px 0; border-bottom: 1px solid var(--at-color-border); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.orbx-hist small { display: block; font-size: 13px; opacity: .85; }
.orbx-hist .orbx-toast-undo { margin-top: 6px; }
.orbx-pref { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--at-color-border); }
.orbx-pref label { margin: 0; font-weight: 400; font-size: 15px; color: var(--at-color-popover-foreground); }
.orbx-pref select { min-height: 44px; max-width: 60%; border-radius: 10px; border: 1px solid var(--at-color-border); background: var(--at-color-input, var(--at-color-popover)); color: var(--at-color-popover-foreground); padding: 6px 10px; }
.orbx-pref input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--at-color-primary); }
/* Orbix's own tick boxes (owner, 27 Oct 2026: in a green workspace theme a ticked box looked empty, so only the
   box just pressed seemed ticked). Opted out of the shared checkbox base (pd-cb-no-base) and drawn from the theme's
   own labels: Primary fill with its foreground tick when on, the control border when off. The theme's component
   colours for every checkbox are stronger rules, so the colours here must win outright. */
.orbx-pref input.orbx-tick[type="checkbox"] {
    -webkit-appearance: none; appearance: none; flex: 0 0 auto; position: relative; cursor: pointer;
    width: 24px; height: 24px; margin: 0; padding: 0; border-radius: 7px;
    border: 2px solid var(--at-color-control-border, var(--at-color-border)) !important;
    background: transparent !important;
}
.orbx-pref input.orbx-tick[type="checkbox"]:checked {
    border-color: var(--at-color-primary) !important;
    background: var(--at-color-primary) !important;
}
.orbx-pref input.orbx-tick[type="checkbox"]::after {
    content: ''; position: absolute; left: 6px; top: 1px; width: 7px; height: 13px;
    border: solid transparent; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.orbx-pref input.orbx-tick[type="checkbox"]:checked::after { border-color: var(--at-color-primary-foreground) !important; }
.orbx-pref input.orbx-tick[type="checkbox"]:focus { outline: none; }
.orbx-pref input.orbx-tick[type="checkbox"]:focus-visible { outline: 2px solid var(--at-color-ring) !important; outline-offset: 2px; }
.orbx-pref-note { font-size: 14px; line-height: 1.4; margin: 10px 0; }

.orbx .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* ── tiers (page shell) ───────────────────────────────────── */
/* Phone: one tight row of controls and the brand without its ring. The
   switch's word and the gaps shrink with the screen (fluid, not a new
   breakpoint) so the style menu keeps room for its longest name at 360px. */
@media (max-width: 575.98px) {
    .orbx { gap: 8px; padding: 8px; }
    .orbx-brand-mark, .orbx-tagline { display: none; }
    .orbx-top { flex-wrap: nowrap; }
    .orbx-top-actions { gap: 6px; flex-wrap: nowrap; }
    /* Six round buttons do not fit beside the name on a phone: the briefing
       lives in the live-feed panel there instead (its first suggestion). */
    #orbx-btn-briefing { display: none; }
    .orbx-bar, .orbx-bar-left { gap: 6px; }
    .orbx-switch { gap: 6px; }
    .orbx-switch-track { width: 40px; }
    .orbx-switch input:checked + .orbx-switch-track::after { transform: translateX(14px); }
    .orbx-switch-label { font-size: clamp(12px, 3.5vw, 15px); }
    .orbx-mic { min-height: 52px; padding: 10px 14px; font-size: clamp(12px, 3.9vw, 17px); letter-spacing: .08em; }
    .orbx-state { margin-top: 2px; }
}
@media (min-width: 576px) {
    .orbx-orb-wrap { width: min(62vw, 40vh, 460px); }
}
@media (min-width: 768px) {
    .orbx-orb-wrap { width: min(62vw, 46vh, 460px); }
}
@media (min-width: 768px) {
    .orbx-chip span:not(.sr-only) { display: inline; }
    .orbx-chip-exit span:not(.sr-only) { display: none; }
    .orbx-talkbar { flex-direction: row; align-items: center; }
    .orbx-mic { width: auto; flex: 0 0 auto; min-width: 260px; }
    .orbx-type { flex: 1 1 auto; }
    .orbx-talk { max-height: 24vh; }
    /* Tablet and desktop: the switches, talk button, typing box and preset
       all on one row (owner, 15 Oct 2026). */
    .orbx-bar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "left talk right";
    }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .orbx-mic { min-width: 0; padding: 10px 18px; font-size: 15px; letter-spacing: .1em; }
}
@media (min-width: 992px) {
    .orbx-clock { display: flex; }
    .orbx-bar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "left talk right";
    }
    .orbx {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "top top"
            "stage talk"
            "bar bar";
    }
    .orbx-talk { max-height: none; }
}
@media (min-width: 1200px) {
    .orbx {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    }
}
/* With the transcript closed the stage takes its column back. */
@media (min-width: 992px) {
    .orbx.no-captions {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "top" "stage" "bar";
    }
}
@media (min-width: 1200px) {
    .orbx.no-captions {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "top" "stage" "bar";
    }
}
/* Wide screens: the logo and the corner buttons sit near the page edges
   (owner, 16 Oct 2026), so the side margin stays the normal gap. */

/* ── edges (owner, 16 Oct 2026) ─────────────────────────────────
   No round mark beside the name; the clock sits small in the bottom right,
   level with the bottom of the talk button; the ring round Home sits in the
   bottom left, in line with the name above it and the talk button beside it.
   Phones keep the ring where it was: the talk button spans the screen there. */
.orbx-brand-mark { display: none; }
@media (min-width: 992px) {
    .orbx-clock {
        position: absolute;
        right: var(--orbx-gap); bottom: var(--orbx-gap);
        margin: 0;
        align-items: flex-end;
        text-align: right;
        z-index: 2;
        pointer-events: none;
    }
    .orbx-clock-time { font-size: 18px; letter-spacing: .06em; }
    .orbx-clock-date { font-size: 12px; }
    .orbx.show-typing .orbx-clock { display: none; }
}
@media (min-width: 768px) {
    .orbx:not(.show-typing) .orbx-sp-compass {
        position: fixed;
        left: calc(var(--orbx-gap) - 5px);
        bottom: calc(var(--orbx-gap) + 1px);
    }
}

/* ── calm motion: the person's choice, or their device's ───── */
.orbx.is-calm .orbx-card { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .orbx .orbx-card, .orbx .orbx-confirm, .orbx .orbx-drawer { animation: none; }

}

/* Tablets and phones (owner, 16 Oct 2026): frosted glass over the moving
   background made the tablet blur the scene again on every frame. On touch
   screens the panels are solid theme cards instead — same colours, no lag. */
@media (pointer: coarse) {
    .orbx .orbx-panel, .orbx .orbx-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--at-color-card) 94%, transparent); }
}

/* "Thinking" on the talk button: three dots that rise in turn (owner, 18 Oct 2026). */
.orbx-mic-label .orbx-dots { display: inline-flex; margin-left: 2px; }
.orbx-mic-label .orbx-dots i { font-style: normal; display: inline-block; animation: orbxDot 1.2s ease-in-out infinite; }
.orbx-mic-label .orbx-dots i:nth-child(2) { animation-delay: .2s; }
.orbx-mic-label .orbx-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes orbxDot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .orbx-mic-label .orbx-dots i { animation: none; opacity: 1; } }

/* Closing Orbix (owner, 22 Oct 2026): the whole screen dissolves away before
   the admin page it goes back to blurs in. */
html.orbx-leaving body { opacity: 0; filter: blur(14px); transform: scale(1.02); transition: opacity .6s ease, filter .6s ease, transform .6s ease; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    html.orbx-leaving body { filter: none; transform: none; transition: opacity .15s linear; }
}

/* How to allow the microphone (owner, 22 Oct 2026): opens from the
   "Microphone blocked" button, above the talk bar. Colours are the theme's
   pop-over labels. */
.orbx-mic-help {
    position: fixed;
    left: 50%;
    bottom: 110px;
    z-index: 60;
    width: min(520px, calc(100vw - 32px));
    transform: translateX(-50%);
    padding: 18px 20px 16px;
    border: 1px solid var(--at-color-border, var(--at-color-control-border));
    border-radius: 16px;
    background: var(--at-color-popover, var(--at-color-card));
    color: var(--at-color-popover-foreground, var(--at-color-card-foreground));
    box-shadow: 0 18px 44px -20px color-mix(in srgb, currentColor 50%, transparent);
    font-size: 15px;
    line-height: 1.5;
}
.orbx-mic-help[hidden] { display: none; }
.orbx-mic-help-title { margin: 0 0 10px; font-size: 18px; color: var(--at-color-heading, inherit); }
.orbx-mic-help-steps { margin: 0 0 10px; padding-left: 22px; }
.orbx-mic-help-steps li { margin: 0 0 6px; }
.orbx-mic-help-note { margin: 0 0 10px; font-size: 14px; opacity: .85; }
.orbx-mic-help-msg { margin: 0 0 10px; font-weight: 600; color: var(--at-color-status-danger-ink, var(--at-color-destructive-ink)); }
.orbx-mic-help-msg:empty { display: none; }
.orbx-mic-help-btns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }