/* ═══════════════════════════════════════════════════════════════════════════
   TYRAND.UK VISUAL KNOBS
   Edit values here. Every other CSS file reads these variables.
   JS / behavior knobs:  /js/config.js
   Relay / Telegram:     /relay/config.json
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette ─────────────────────────────────────────────────────────── */
  --color-bg: #070312;
  --color-text: #f1f5f9;
  --color-purple: #a855f7;
  --color-purple-bright: #c084fc;
  --color-emerald: #34d399;
  --color-rose: #f43f5e;
  --color-amber: #fbbf24;

  /* ── Message actions dock (hover toolbar) ──────────────────────────────
     bottom: calc(100% + 5px) = floats fully above the bubble with zero text overlap
     side: inset from the bubble's right (outgoing) / left (incoming) */
  --dock-top: auto;
  --dock-bottom: calc(100% + 5px);
  --dock-outgoing-side: 2px;
  --dock-incoming-side: 2px;
  --dock-z: 50;
  --dock-line-z: 100;
  --dock-bg: rgba(10, 4, 24, 0.96);
  --dock-border: rgba(168, 85, 247, 0.45);
  --dock-glow: rgba(168, 85, 247, 0.35);
  --dock-radius: 20px;
  --dock-pad-y: 2px;
  --dock-pad-x: 5px;
  --dock-gap: 3px;

  /* ── Feed / bubbles ──────────────────────────────────────────────────── */
  --feed-max-width: 680px;
  --feed-gap: 0.85rem;
  --bubble-max-pct: 85%;
  --bubble-max-width: 540px;
  --bubble-pad-y: 8px;
  --bubble-pad-x: 14px;
  --bubble-radius: 16px;

  /* ── Album / multi-file grid ─────────────────────────────────────────── */
  --album-max-width: 360px;
  --album-gap: 3px;
  --album-cell-min: 92px;
  --album-cell-max: 180px;
}