/* Apollo assistant — the panel in the bottom-right corner.
 *
 * Same construction as Gala's quick panel: a round launcher, a box that grows
 * up and to the left of it, a grip in the top-left corner, a home screen with a
 * dock, and app windows that grow out of the icon that was tapped. The material
 * is Apollo's, not Gala's: near-black glass and gold hairlines instead of white
 * cards, because this thing floats over the constellation.
 *
 * Everything is scoped under .apx-, and the root is a fixed layer of its own, so
 * none of this can reach into a page that already has 22,000 lines of CSS.
 */

.apx-root {
  position: fixed;
  right: 22px;
  bottom: 22px;
  /* Above every panel, console and modal in the app (the highest in use is
     100000). The assistant is the one control that must stay reachable. */
  z-index: 100200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* The constellation's voice mic owned this corner first (bottom 22, right 22).
   The launcher takes it, so the mic steps to the left of it instead of sitting
   underneath. An id selector, so no !important is needed to outrank the class
   rule in styles.css. */
#constellation-mic { right: 92px; }

/* ── the launcher ───────────────────────────────────────────────────────── */

.apx-fab {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(200, 165, 74, 0.55);
  background: radial-gradient(120% 120% at 30% 25%, #1d1810, #0a0907 70%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(247, 225, 160, 0.28);
  cursor: pointer;
  /* Not overflow:hidden — the count badge sits outside the circle by design and
     clipping it left a half-moon stuck to the rim. */
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.apx-fab:hover { transform: translateY(-2px); border-color: var(--gold, #c8a54a); }
.apx-fab:focus-visible { outline: 2px solid var(--gold, #c8a54a); outline-offset: 3px; }
.apx-fab-art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-bright, #e6c977);
  transition: opacity 0.18s ease, transform 0.22s ease;
}
.apx-fab-art svg { width: 26px; height: 26px; }
/* The planet crossfades into a cross, the way a "+" rotates in Gala. Same idea,
   one mark turning into the way out, so the launcher is also the close button. */
.apx-fab-close {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f0d78d;
  opacity: 0;
  transform: rotate(0deg) scale(0.7);
  transition: opacity 0.18s ease, transform 0.22s ease;
}
.apx-fab-close svg { width: 24px; height: 24px; }
.apx-root.is-open .apx-fab-art { opacity: 0; transform: scale(0.7); }
.apx-root.is-open .apx-fab-close { opacity: 1; transform: rotate(45deg) scale(1); }

.apx-fab-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  border: 2px solid #0a0907;
  background: linear-gradient(180deg, #e6c977, #c8a54a);
  color: #1a1508;
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}
.apx-root.is-open .apx-fab-badge { opacity: 0; }
.apx-fab.has-due { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(200, 165, 74, 0.18); }

/* ── the panel ──────────────────────────────────────────────────────────── */

.apx-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(200, 165, 74, 0.30);
  background: #070609;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(247, 225, 160, 0.10);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.2s ease-out, height 0.2s ease-out;
}
.apx-panel.is-in { opacity: 1; transform: translateY(0) scale(1); }
/* The closed panel has to be display:none, not just invisible. `display:flex`
   above outranks the browser's own [hidden] rule, so with the panel shut the
   box stayed in the layout at opacity 0 and swallowed every click inside it:
   882x745 over the bottom-right quarter of the screen. That is where the
   Weekly Review panel keeps its Ready button, which is why Ready read as
   dead from the hold shelf. Nothing was wrong with the button. */
.apx-panel[hidden] { display: none !important; }
/* During a drag the box has to track the pointer exactly. A transition there
   makes it lag behind the cursor and feel broken. */
.apx-panel.is-resizing { transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); }

/* ── top bar: grip on the left, clock on the right ──────────────────────── */

.apx-topbar {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-bottom: 1px solid rgba(200, 165, 74, 0.16);
  background: rgba(12, 11, 9, 0.92);
}
.apx-grip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: rgba(230, 201, 119, 0.55);
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  cursor: nwse-resize;
  touch-action: none;
  user-select: none;
  transition: background 0.14s ease, color 0.14s ease;
}
.apx-grip:hover { background: rgba(200, 165, 74, 0.12); color: var(--gold-bright, #e6c977); }
.apx-grip-icon { display: flex; }
.apx-grip-icon svg { width: 13px; height: 13px; }
.apx-clock {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  color: rgba(230, 201, 119, 0.62);
}
.apx-clock-time { font-variant-numeric: tabular-nums; }

/* ── the stage: home screen, and app windows over it ────────────────────── */

.apx-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.apx-home { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; }

/* Deep space rather than a photo: it is the same sky the constellation view
   uses, so the panel reads as part of Apollo and not a widget dropped on it. */
.apx-wall {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 55% at 50% -8%, rgba(200, 165, 74, 0.20), transparent 62%),
    radial-gradient(60% 40% at 88% 22%, rgba(120, 92, 200, 0.14), transparent 70%),
    radial-gradient(1px 1px at 18% 22%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(1px 1px at 62% 14%, rgba(255, 255, 255, 0.40), transparent 100%),
    radial-gradient(1px 1px at 78% 46%, rgba(255, 255, 255, 0.35), transparent 100%),
    radial-gradient(1px 1px at 33% 62%, rgba(255, 255, 255, 0.30), transparent 100%),
    radial-gradient(1.4px 1.4px at 8% 74%, rgba(255, 255, 255, 0.30), transparent 100%),
    linear-gradient(180deg, #0a0a12 0%, #07060a 55%, #050405 100%);
}

.apx-summary {
  position: relative;
  margin: 14px 16px 0;
  padding: 10px 14px;
  border-radius: 13px;
  border: 1px solid rgba(200, 165, 74, 0.22);
  background: rgba(12, 11, 9, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(230, 201, 119, 0.72);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.apx-summary b { color: var(--gold-bright, #e6c977); font-weight: 700; }
.apx-summary:hover { border-color: var(--gold, #c8a54a); background: rgba(22, 19, 12, 0.75); color: #f0d78d; }

/* The grid. Two steps rather than a formula: an icon rendered at 51.4px is
   visibly softer than one at 52, and .is-phone is the panel's own width
   talking, not the window's. */
.apx-grid {
  position: relative;
  flex: 1;
  align-content: start;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: 28px 16px;
  padding: 26px 18px 6px;
  overflow-y: auto;
  scrollbar-width: none;
}
.apx-grid::-webkit-scrollbar { width: 0; height: 0; }
.apx-panel.is-phone .apx-grid {
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  gap: 20px 10px;
  padding: 20px 14px 6px;
}

.apx-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.apx-tile:focus-visible { outline: 2px solid var(--gold, #c8a54a); outline-offset: 4px; border-radius: 16px; }
/* The mark: a rounded square of gold glass, the shape a home screen icon has
   everywhere, so nothing about it needs explaining. */
.apx-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  border: 1px solid rgba(200, 165, 74, 0.34);
  background: linear-gradient(180deg, rgba(58, 50, 32, 0.85), rgba(14, 12, 9, 0.92));
  box-shadow: inset 0 1px 0 rgba(247, 225, 160, 0.22), 0 6px 18px rgba(0, 0, 0, 0.5);
  color: var(--gold-bright, #e6c977);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.apx-mark svg { width: 26px; height: 26px; }
.apx-panel.is-phone .apx-mark { width: 46px; height: 46px; border-radius: 13px; }
.apx-panel.is-phone .apx-mark svg { width: 21px; height: 21px; }
.apx-tile:hover .apx-mark {
  transform: translateY(-2px);
  border-color: var(--gold, #c8a54a);
  box-shadow: inset 0 1px 0 rgba(247, 225, 160, 0.3), 0 10px 24px rgba(0, 0, 0, 0.6), 0 0 18px rgba(200, 165, 74, 0.22);
}
.apx-tile-label {
  max-width: 100%;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  color: rgba(230, 201, 119, 0.78);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.apx-panel.is-phone .apx-tile-label { font-size: 10px; }
.apx-tile:hover .apx-tile-label { color: #f0d78d; }

/* The dock. Crystal glass, the same recipe the review cards and the app dock
   use: almost all of the effect is the blur, which is how real glass works. */
.apx-dock { position: relative; flex-shrink: 0; padding: 6px 16px 14px; }
.apx-dock-glass {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid rgba(150, 150, 150, 0.08);
  background: rgba(150, 150, 150, 0.07);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(9.4px);
  -webkit-backdrop-filter: blur(9.4px);
}
.apx-dock-glass .apx-mark { width: 50px; height: 50px; border-radius: 14px; }
.apx-dock-glass .apx-mark svg { width: 23px; height: 23px; }
.apx-panel.is-phone .apx-dock-glass { gap: 10px; padding: 8px 11px; }
.apx-panel.is-phone .apx-dock-glass .apx-mark { width: 42px; height: 42px; border-radius: 12px; }

/* ── an app, filling the panel ──────────────────────────────────────────── */

.apx-window {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #0b0a08, #070605);
  opacity: 0;
  transform: scale(0.14);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.apx-window.is-open { opacity: 1; transform: scale(1); }
/* The way out is a fade and a slight settle, never a shrink: scaling scrollable
   content back down leaves painted fragments on the screen behind it. */
.apx-window.is-closing {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), opacity 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.apx-window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(200, 165, 74, 0.16);
}
.apx-back {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 9px 5px 6px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: rgba(230, 201, 119, 0.62);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.apx-back svg { width: 15px; height: 15px; }
.apx-back:hover { background: rgba(200, 165, 74, 0.12); color: #f0d78d; }
.apx-window-title { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--gold-bright, #e6c977); }
.apx-window-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 16px 20px;
}
/* House rule: invisible at rest, visible only while scrolling. */
.apx-window-body, .apx-grid { scrollbar-width: none; }
.apx-window-body::-webkit-scrollbar { width: 8px; }
.apx-window-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
.apx-window-body:hover { scrollbar-width: thin; scrollbar-color: rgba(230, 201, 119, 0.25) transparent; }
.apx-window-body:hover::-webkit-scrollbar-thumb { background: rgba(230, 201, 119, 0.22); }

/* ── lists ──────────────────────────────────────────────────────────────── */

.apx-group {
  margin: 14px 2px 7px;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(230, 201, 119, 0.5);
}
.apx-group:first-child { margin-top: 0; }
.apx-group.is-late { color: #f0a1a1; }

.apx-list { display: flex; flex-direction: column; gap: 6px; }
.apx-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px 10px 11px;
  border-radius: 13px;
  border: 1px solid rgba(200, 165, 74, 0.18);
  background: rgba(14, 12, 9, 0.72);
  transition: border-color 0.14s ease, background 0.14s ease;
}
.apx-row:hover { border-color: rgba(200, 165, 74, 0.42); background: rgba(22, 19, 12, 0.8); }
.apx-row.is-late { border-color: rgba(220, 120, 120, 0.38); }
.apx-row.is-done { opacity: 0.55; }
.apx-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(200, 165, 74, 0.5);
  border-radius: 7px;
  background: transparent;
  color: #1a1508;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.apx-check svg { width: 13px; height: 13px; }
.apx-check:hover { border-color: var(--gold, #c8a54a); background: rgba(200, 165, 74, 0.18); }
.apx-row.is-done .apx-check {
  background: linear-gradient(180deg, #e6c977, #c8a54a);
  border-color: #c8a54a;
}
.apx-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.apx-row-title { font-size: 13px; line-height: 1.35; color: #f5efe2; overflow-wrap: anywhere; }
.apx-row.is-done .apx-row-title { text-decoration: line-through; }
.apx-row-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.apx-chip {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(200, 165, 74, 0.22);
  font-size: 10.5px;
  color: rgba(230, 201, 119, 0.72);
}
.apx-chip-date { border-color: rgba(200, 165, 74, 0.4); color: var(--gold-bright, #e6c977); }
.apx-row.is-late .apx-chip-date { border-color: rgba(220, 120, 120, 0.5); color: #f0a1a1; }
/* The actions stay quiet until the row is under the pointer: a list of twelve
   reminders with twenty-four buttons lit reads as a control panel. */
.apx-row-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.14s ease; }
.apx-row:hover .apx-row-actions, .apx-row:focus-within .apx-row-actions { opacity: 1; }
.apx-iconbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(230, 201, 119, 0.6);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.apx-iconbtn svg { width: 15px; height: 15px; }
.apx-iconbtn:hover { background: rgba(200, 165, 74, 0.16); color: #f0d78d; }
.apx-iconbtn-danger:hover { background: rgba(220, 120, 120, 0.16); color: #f0a1a1; }

.apx-empty {
  margin: 26px 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(230, 201, 119, 0.45);
}
.apx-linkbtn {
  margin-top: 16px;
  padding: 7px 12px;
  border: 1px solid rgba(200, 165, 74, 0.22);
  border-radius: 10px;
  background: transparent;
  color: rgba(230, 201, 119, 0.6);
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.apx-linkbtn:hover { border-color: var(--gold, #c8a54a); color: #f0d78d; }

/* ── the writer ─────────────────────────────────────────────────────────── */

.apx-form { display: flex; flex-direction: column; gap: 8px; }
.apx-label {
  margin-top: 6px;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(230, 201, 119, 0.55);
}
.apx-form > .apx-label:first-child { margin-top: 0; }
.apx-optional { letter-spacing: 0.06em; text-transform: none; opacity: 0.65; font-weight: 600; }
/* The selector is doubled on purpose: the dark theme paints every bare `input`
   with a solid #111 fill, which outranks a single class and would show as a
   grey slab inside these rounded fields. */
.apx-form .apx-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid rgba(200, 165, 74, 0.26);
  background: rgba(12, 11, 9, 0.9);
  color: #f5efe2;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.apx-form .apx-input::placeholder { color: rgba(230, 201, 119, 0.32); }
.apx-form .apx-input:focus { border-color: var(--gold, #c8a54a); background: rgba(22, 19, 12, 0.95); }
.apx-form .apx-input-date { color-scheme: dark; max-width: 190px; }

.apx-when { display: flex; flex-wrap: wrap; gap: 6px; }
.apx-when-opt {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(200, 165, 74, 0.26);
  background: transparent;
  color: rgba(230, 201, 119, 0.7);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.apx-when-opt:hover { border-color: var(--gold, #c8a54a); color: #f0d78d; }
.apx-when-opt.is-on {
  background: linear-gradient(180deg, #e6c977 0%, #c8a54a 55%, #a8862f 100%);
  border-color: #c8a54a;
  color: #1a1508;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(247, 225, 160, 0.6), 0 2px 10px rgba(200, 165, 74, 0.3);
}

.apx-form-actions { margin-top: 14px; display: flex; }
.apx-save {
  padding: 11px 20px;
  border-radius: 13px;
  border: 1px solid #c8a54a;
  background: linear-gradient(180deg, #e6c977 0%, #c8a54a 55%, #a8862f 100%);
  color: #1a1508;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(247, 225, 160, 0.6), 0 4px 16px rgba(200, 165, 74, 0.28);
  transition: filter 0.14s ease, transform 0.14s ease;
}
.apx-save:hover { filter: brightness(1.06); transform: translateY(-1px); }
.apx-form-note { margin: 8px 2px 0; font-size: 11.5px; color: #f0a1a1; min-height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .apx-panel, .apx-window, .apx-fab, .apx-mark, .apx-fab-art, .apx-fab-close { transition: none !important; }
}

/* On a phone-sized browser window the panel takes the screen, minus the room
   the launcher needs under it. A fixed 380px box would hang off the edge. */
@media (max-width: 520px) {
  .apx-root { right: 14px; bottom: 14px; }
  .apx-panel { width: calc(100vw - 28px) !important; max-height: calc(100vh - 110px); }
}