/* Near/far theme and the ArtifactOS dock. */
  /* ——— the far side of the moon: private, and — as a try, never canon —
     dark. The near side stays light and, for now, empty. ——— */
  body.dark {
    --bg: #0E0F13; --card: #1B1D24;
    --ink: #F2F2F4; --ink2: #9EA0AA; --ink3: #6C6E78;
    --line: rgba(120, 124, 140, 0.28);
    --fill: rgba(120, 124, 140, 0.22);
    --tint: #0A84FF;
  }
  body.dark .top { background: rgba(16, 18, 24, 0.6); }
  body.dark .prop-multiselect { color: #FB923C; background: rgba(249, 115, 22, 0.22); }
  body.dark .prop-agent { color: #BF5AF2; background: rgba(191, 90, 242, 0.22); }
  body.dark .prop-folder { color: #30D158; background: rgba(48, 209, 88, 0.2); }
  body.dark .chatface { color: #BF5AF2; background: rgba(191, 90, 242, 0.2); }
  body.dark .vtray, body.dark .sidebtn, body.dark .viewopts.open, body.dark .views {
    background: rgba(28, 30, 38, 0.55);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.45);
  }
  body.dark .vicon {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.08);
  }
  body.dark .vseat-centred .vicon { background: #262A34; }
  body.dark .drawer { background: rgba(24, 26, 33, 0.94); }
  /* The dark room separates by edge and depth, not by shadow: a dark
     card is nearly the colour of any dark surface it sits on, and the
     light room's shadow reads as nothing there. So every face wears a
     hairline in the dark, the columns sink below the cards, and the
     canvas is its own darker table — found the day the board's cards
     melted into their columns on the far side. */
  body.dark .card, body.dark .group {
    border: 0.5px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  }
  body.dark .kcol { background: rgba(0, 0, 0, 0.28); }
  body.dark .canvas { background: #14161C; }
  body.dark #board[data-view="graph"] .canvas { background: #0e0f12; }
  body.dark .gedge { stroke: #d4d4de; stroke-opacity: 0.22; }
  body.dark .gnode circle { fill: var(--gfill, #A1A1AA); }
  body.dark .gnode circle.ghit { fill: transparent; }
  body.dark .graph.gfocus .gedge.ghot { stroke: #c4b5fd; }
  body.dark .dock {
    background: rgba(24, 26, 33, 0.48);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  }
  body.dark .dockagent-icon { border-color: rgba(255, 255, 255, 0.14); }

  /* ——— the dock. Carried over from ArtifactOS through OS4 and OS5: the
     same glass tray, the same wheel, the same faces — and, restored
     2026-08-14, the same anchoring: absolute at the bottom edge of the
     100dvh app frame, fifteen pixels up, and never a safe-area inset on
     the tray itself, because "an inset added here reads as a bar under
     the tray" (OS4's recorded words). Clearance from the Home indicator
     comes from where the app frame ends. ——— */
  .dock {
    position: absolute;
    left: 50%; bottom: 15px;
    z-index: 5;
    transform: translateX(-50%);
    width: min(calc(100% - 18px), 412px);
    overflow: hidden;
    border: 0.5px solid rgba(255, 255, 255, 0.8);
    border-radius: 28px;
    background: rgba(248, 248, 250, 0.5);
    -webkit-backdrop-filter: blur(28px) saturate(1.5);
    backdrop-filter: blur(28px) saturate(1.5);
    box-shadow: 0 8px 28px rgba(30, 32, 38, 0.14);
  }
  .dock-wheel {
    display: flex; align-items: center; gap: 4px;
    width: 100%; height: 84px;
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    /* Half a viewport of padding each side lets the first and last faces
       reach the centre line; 37px is half an entry. */
    padding: 5px calc(50% - 37px);
    scroll-padding-inline: calc(50% - 37px);
  }
  .dock-wheel::-webkit-scrollbar { display: none; }
  .dockagent {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 74px; height: 74px;
    border-radius: 22px;
    scroll-snap-align: center;
    transform-origin: center center;
    transition: transform 220ms ease-out, opacity 220ms ease-out;
  }
  .dockagent-icon {
    width: 52px; height: 52px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0.5px solid rgba(255, 255, 255, 0.66);
    border-radius: 16px;
    background: linear-gradient(155deg, #949990, #686d65);
    color: white;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 5px 12px rgba(35, 38, 32, 0.16);
    transition: width 240ms ease, height 240ms ease, border-radius 240ms ease,
      box-shadow 240ms ease, transform 240ms ease;
  }
  .dockagent-centred .dockagent-icon {
    width: 64px; height: 64px;
    border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 24px rgba(36, 39, 33, 0.22);
    transform: translateY(-2px);
  }
  .dockagent-centred .dockagent-icon svg { width: 36px; height: 36px; }
  .dockicon-hand { background: linear-gradient(155deg, #9dbb5e, #567029); }
  .dockicon-claude { background: linear-gradient(155deg, #ef9b68, #d96842); }
  .dockicon-cursor { background: linear-gradient(145deg, #55585d 0%, #17191c 65%, #060708); }
  .dockicon-codex { background: linear-gradient(145deg, #9dafff, #596ee7 52%, #7657d6); }
  .dockicon-terminal { background: linear-gradient(155deg, #384452, #11161d); }
  .dockicon-git { background: linear-gradient(155deg, #f38a64, #d84433); }
  @media (prefers-reduced-motion: reduce) {
    .dockagent, .dockagent-icon { transition: none; }
  }