/* ============================================================
   HIDAY COMMAND CENTER · ambient interaction layer (bg.css)
   Ported from hiday.ai: base paper grid, cursor-following grid
   spotlight, dot cursor, liquid-glass hover language.
   Gates: reduced motion, Save-Data, agent view, fine pointers.
   ============================================================ */

/* ── Base paper grid (the substrate the spotlight brightens) ── */
:root {
  --grid-line: rgba(0, 0, 0, 0.022);
  --spot-line: rgba(13, 13, 13, 0.13);
  --glass:     rgba(255, 253, 249, 0.6);
}
:root[data-theme="dark"] {
  --grid-line: rgba(255, 255, 255, 0.025);
  --spot-line: rgba(184, 135, 90, 0.20);
  --glass:     rgba(24, 22, 17, 0.55);
}

body {
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
}
/* Fixed attachment keeps the spotlight registered to the page grid.
   Only on the desktops that get the spotlight; mobile scrolls plain. */
@media (pointer: fine) and (min-width: 900px) {
  body { background-attachment: fixed; }
}
html.is-agent body { background-image: none; }

/* ── #bg: fixed host for the spotlight ── */
#bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
html.is-agent #bg { display: none; }
@media (prefers-reduced-motion: reduce) {
  #bg { display: none !important; }
}

/* Grid spotlight: a brighter grid patch that follows the cursor,
   with a faint warm breath beneath it */
.bg-spot {
  position: absolute;
  width: 500px; height: 500px;
  top: 0; left: 0;
  background-image:
    linear-gradient(to right, var(--spot-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--spot-line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle 230px at center, rgba(0, 0, 0, 0.9), transparent 72%);
  mask-image: radial-gradient(circle 230px at center, rgba(0, 0, 0, 0.9), transparent 72%);
  will-change: transform;
}
.bg-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 230px at center, rgba(184, 135, 90, 0.06), transparent 68%);
}
:root[data-theme="dark"] .bg-spot::after {
  background: radial-gradient(circle 230px at center, rgba(184, 135, 90, 0.09), transparent 68%);
}

/* ── Dot cursor ── */
@media (pointer: fine) {
  :root.has-cursor,
  :root.has-cursor body,
  :root.has-cursor a,
  :root.has-cursor button { cursor: none; }
  :root.has-cursor input,
  :root.has-cursor textarea,
  :root.has-cursor select { cursor: auto; }
}
.cur-dot {
  position: fixed;
  top: 0; left: 0;
  z-index: 130;                /* above modals and toast */
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--accent);
}
.cur-hidden .cur-dot { opacity: 0; }

/* ── Liquid-glass hover language ──
   Rest states stay solid; glass is a hover language. The grid and
   warm spotlight passing beneath a frosted surface supply the liquid
   depth; the sheen tracks the pointer inside the element. */
.uc-card, .kpi, .eos-band, .xwalk-row, .vb-card { position: relative; }
.uc-card::before, .kpi::before, .eos-band::before, .xwalk-row::before, .vb-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 40%),
              rgba(255, 255, 255, 0.35), transparent 62%);
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
:root[data-theme="dark"] .uc-card::before,
:root[data-theme="dark"] .kpi::before,
:root[data-theme="dark"] .eos-band::before,
:root[data-theme="dark"] .xwalk-row::before,
:root[data-theme="dark"] .vb-card::before {
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 40%),
              rgba(184, 135, 90, 0.16), transparent 62%);
}

@media (pointer: fine) {
  .uc-card:hover, .xwalk-row:hover, .vb-card:hover {
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
    box-shadow: 0 14px 34px rgba(13, 13, 13, 0.07),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
  }
  :root[data-theme="dark"] .uc-card:hover,
  :root[data-theme="dark"] .xwalk-row:hover,
  :root[data-theme="dark"] .vb-card:hover {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(184, 135, 90, 0.22);
  }
  /* KPI cells sit inside a clipping band: frost without lift */
  .kpi:hover {
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
  }
  .eos-band:not(.eos-ai):hover {
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
  :root[data-theme="dark"] .eos-band:not(.eos-ai):hover {
    box-shadow: inset 0 1px 0 rgba(184, 135, 90, 0.22);
  }
  .uc-card:hover::before, .kpi:hover::before, .xwalk-row:hover::before,
  .vb-card:hover::before, .eos-band:not(.eos-ai):hover::before { opacity: 1; }

  /* Chrome controls join the glass language */
  .view-btn:not(.is-active):hover,
  .mode-btn:not(.is-active):hover {
    background: color-mix(in srgb, var(--panel) 55%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .uc-card:hover, .kpi:hover, .xwalk-row:hover, .vb-card:hover,
  .eos-band:not(.eos-ai):hover { background: var(--layer-hover); }
}

@media (prefers-reduced-motion: reduce) {
  .cur-dot, .bg-spot { display: none !important; }
  :root.has-cursor, :root.has-cursor body,
  :root.has-cursor a, :root.has-cursor button { cursor: auto; }
  .uc-card:hover, .xwalk-row:hover, .vb-card:hover { transform: none; }
}