/* ══════════════════════════════════════════════════════════════════
 * FIDNT · Sidebar Gestures CSS · v1.0.0
 * Hover · Single · Double · Long-press modals beside each icon.
 * Token-aware: respects data-ui="software" + data-theme="dark|light".
 * ══════════════════════════════════════════════════════════════════ */

/* ── Visible "gestures active" signal on the main logo ──
   A subtle pulsing dot at the top-right of the Fi logo so the user
   can confirm the gesture system is loaded. Disappears once they
   interact with any gesture-enabled icon. */
.sidebar-logo[data-gesture="main"]::after {
  content: '';
  position: absolute;
  top: 6px; right: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sui-active, var(--accent, #4cc2ff));
  box-shadow: 0 0 0 0 var(--sui-active, var(--accent, #4cc2ff));
  animation: gx-pulse 2s ease-out infinite;
  pointer-events: none;
}
.sidebar-logo[data-gesture="main"] { position: relative; }
@keyframes gx-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(76,194,255,.5); opacity: 1; }
  70%  { box-shadow: 0 0 0 8px rgba(76,194,255,0); opacity: .7; }
  100% { box-shadow: 0 0 0 0 rgba(76,194,255,0); opacity: 1; }
}
body[data-gestures-seen="1"] .sidebar-logo[data-gesture="main"]::after { display: none; }

/* ── Gesture-modal container (anchored beside the icon) ── */
.gx-modal {
  position: fixed;
  z-index: 9000;
  min-width: 220px;
  max-width: 320px;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--sui-raised, var(--bg-card, #2b2b2b));
  border: 1px solid var(--sui-border, var(--border, #3d3d3d));
  color:  var(--sui-text, var(--text-primary, #fff));
  font:   12px/1.5 'Segoe UI Variable','Segoe UI',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  box-shadow: 0 4px 16px rgba(0,0,0,.30);
  pointer-events: auto;
  animation: gx-fade .12s ease-out;
}
@keyframes gx-fade { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
.gx-modal[data-arrow="left"]::before {
  content: '';
  position: absolute;
  top: 16px; left: -6px;
  width: 10px; height: 10px;
  background: var(--sui-raised, var(--bg-card, #2b2b2b));
  border-left:  1px solid var(--sui-border, var(--border, #3d3d3d));
  border-bottom:1px solid var(--sui-border, var(--border, #3d3d3d));
  transform: rotate(45deg);
}
.gx-modal h4 {
  margin: 0 0 6px;
  font-size: 12px; font-weight: 600;
  color: var(--sui-text, var(--text-primary, #fff));
  letter-spacing: .01em;
}
.gx-modal .gx-sub {
  font-size: 10px; color: var(--sui-faint, var(--text-muted, #8a8a8a));
  margin-bottom: 10px; letter-spacing: .04em;
}
.gx-modal .gx-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; gap: 10px; font-size: 11px;
  border-bottom: 1px solid var(--sui-border-sub, var(--border-subtle, rgba(255,255,255,.06)));
}
.gx-modal .gx-row:last-child { border-bottom: none; }
.gx-modal .gx-key {
  font-family: 'Cascadia Mono',Consolas,'Courier New',monospace;
  font-size: 10px; padding: 1px 6px; border-radius: 3px;
  background: var(--sui-surface, var(--bg-secondary, #2b2b2b));
  color: var(--sui-muted, var(--text-secondary, #c0c0c0));
  border: 1px solid var(--sui-border, var(--border, #3d3d3d));
}
.gx-modal .gx-desc { color: var(--sui-muted, var(--text-secondary, #c0c0c0)); flex: 1; }

/* ── Tooltip variant (just text · for hover on pillar / theme / resizer icons) ── */
.gx-tooltip {
  padding: 6px 10px;
  font-size: 12px; font-weight: 500;
  pointer-events: none;
}

/* ── Action grid (for theme presets, font selectors, tab formats, etc.) ── */
.gx-modal .gx-grid {
  display: grid; gap: 6px; margin-top: 8px;
  grid-template-columns: repeat(2, 1fr);
}
.gx-modal .gx-grid.gx-cols-1 { grid-template-columns: 1fr; }
.gx-modal .gx-grid.gx-cols-3 { grid-template-columns: repeat(3, 1fr); }
.gx-modal .gx-grid.gx-cols-4 { grid-template-columns: repeat(4, 1fr); }
.gx-modal .gx-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 7px 8px; border-radius: 4px; cursor: pointer;
  background: var(--sui-surface, var(--bg-secondary));
  border: 1px solid var(--sui-border, var(--border));
  color: var(--sui-text, var(--text-primary));
  font-size: 11px; font-weight: 500; font-family: inherit;
  transition: background .12s, border-color .12s;
}
.gx-modal .gx-btn:hover { background: var(--sui-hover, rgba(255,255,255,.06)); }
.gx-modal .gx-btn.is-active {
  border-color: var(--sui-active, var(--accent, #4cc2ff));
  background: var(--sui-active-bg, rgba(76,194,255,.10));
  color: var(--sui-active, var(--accent));
}

/* ── Color swatch (for tooltip color picker) ── */
.gx-modal .gx-swatch {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 4px; cursor: pointer;
  background: var(--sui-surface, var(--bg-secondary));
  border: 1px solid var(--sui-border, var(--border));
  font-size: 11px;
}
.gx-modal .gx-swatch:hover { background: var(--sui-hover, rgba(255,255,255,.06)); }
.gx-modal .gx-swatch.is-active { border-color: var(--sui-active, var(--accent)); }
.gx-modal .gx-swatch-dot {
  width: 14px; height: 14px; border-radius: 3px;
  border: 1px solid var(--sui-border, var(--border));
}

/* ── Reset row ── */
.gx-modal .gx-reset {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--sui-border-sub, var(--border-subtle, rgba(255,255,255,.06)));
  display: flex; align-items: center; justify-content: space-between;
}
.gx-modal .gx-reset .gx-btn {
  font-size: 10px; padding: 4px 10px; min-width: 0;
}
.gx-modal .gx-reset .gx-reset-icon {
  font-family: 'Cascadia Mono','Courier New',monospace;
  font-size: 13px; color: var(--sui-muted, var(--text-secondary));
  cursor: pointer; padding: 0 6px;
}
.gx-modal .gx-reset .gx-reset-icon:hover { color: var(--sui-active, var(--accent)); }

/* ── Sidebar-hidden edge handle (when main-icon double-click hides sidebar) ── */
body[data-sidebar-hidden="1"] .sidebar { transform: translateX(calc(-1 * var(--sidebar-w, 48px) + 8px)); transition: transform .2s ease; }
body[data-sidebar-hidden="1"] .main    { margin-left: 8px; transition: margin-left .2s ease; }
body[data-sidebar-hidden="1"] .sidebar::after {
  content: '';
  position: absolute;
  top: 0; right: -8px; bottom: 0; width: 8px;
  background: var(--sui-active, var(--accent, #4cc2ff));
  cursor: pointer;
  opacity: .6;
  transition: opacity .12s;
}
body[data-sidebar-hidden="1"] .sidebar:hover::after { opacity: 1; }

/* ── User-preference applied classes ── */
/* Tooltip border-color presets */
:root[data-pref-tip="accent"]   .gx-tooltip { border-color: var(--sui-active, var(--accent)); }
:root[data-pref-tip="warm"]     .gx-tooltip { border-color: #f59e0b; }
:root[data-pref-tip="trust"]    .gx-tooltip { border-color: var(--sui-trust, #6ccb5f); }
:root[data-pref-tip="muted"]    .gx-tooltip { border-color: var(--sui-faint, #8a8a8a); }
:root[data-pref-tip="strong"]   .gx-tooltip { border-color: var(--sui-text, #fff); }

/* Tab selection format presets */
:root[data-pref-tab="underline"] .id-tab-btn.active,
:root[data-pref-tab="underline"] .subnav-tab.active,
:root[data-pref-tab="underline"] .channel-tab.active {
  border-bottom: 2px solid var(--sui-active, var(--accent)) !important;
  background: transparent !important; border-radius: 0 !important;
}
:root[data-pref-tab="pill"] .id-tab-btn.active,
:root[data-pref-tab="pill"] .subnav-tab.active,
:root[data-pref-tab="pill"] .channel-tab.active {
  border-radius: 999px !important;
  background: var(--sui-active-bg, rgba(76,194,255,.10)) !important;
  border-bottom: 1px solid transparent !important;
}
:root[data-pref-tab="box"] .id-tab-btn.active,
:root[data-pref-tab="box"] .subnav-tab.active,
:root[data-pref-tab="box"] .channel-tab.active {
  border: 1px solid var(--sui-active, var(--accent)) !important;
  border-radius: 4px !important;
  background: var(--sui-active-bg, rgba(76,194,255,.10)) !important;
  border-bottom: 1px solid var(--sui-active, var(--accent)) !important;
}
:root[data-pref-tab="plain"] .id-tab-btn.active,
:root[data-pref-tab="plain"] .subnav-tab.active,
:root[data-pref-tab="plain"] .channel-tab.active {
  border: none !important;
  background: transparent !important;
  color: var(--sui-active, var(--accent)) !important;
  text-decoration: underline !important; text-underline-offset: 4px;
}

/* Text size presets (S / M / L / XL / XXL) */
:root[data-pref-textsize="S"]   { --pref-text-scale: 0.875; }
:root[data-pref-textsize="M"]   { --pref-text-scale: 1.000; }
:root[data-pref-textsize="L"]   { --pref-text-scale: 1.125; }
:root[data-pref-textsize="XL"]  { --pref-text-scale: 1.250; }
:root[data-pref-textsize="XXL"] { --pref-text-scale: 1.375; }
:root[data-pref-textsize] body  { font-size: calc(13px * var(--pref-text-scale, 1)) !important; }
:root[data-pref-textsize] .subnav-tab,
:root[data-pref-textsize] .id-tab-btn,
:root[data-pref-textsize] .channel-tab { font-size: calc(11px * var(--pref-text-scale, 1)) !important; }

/* Font preset families */
:root[data-pref-font="segoe"]    body { font-family: 'Segoe UI Variable','Segoe UI',sans-serif !important; }
:root[data-pref-font="inter"]    body { font-family: 'Inter','Helvetica Neue',sans-serif !important; }
:root[data-pref-font="serif"]    body { font-family: 'Cormorant Garamond',Georgia,'Times New Roman',serif !important; }
:root[data-pref-font="mono"]     body { font-family: 'Cascadia Mono',Consolas,'Courier New',monospace !important; }
:root[data-pref-font="system"]   body { font-family: -apple-system,BlinkMacSystemFont,system-ui,sans-serif !important; }

/* Effects presets */
:root[data-pref-effect="reduce-motion"] *,
:root[data-pref-effect="reduce-motion"] *::before,
:root[data-pref-effect="reduce-motion"] *::after {
  animation-duration: 0s !important; transition-duration: 0s !important;
}
:root[data-pref-effect="high-contrast"] {
  --sui-text: #fff !important; --sui-muted: #fff !important;
  --sui-faint: #ddd !important;
}
:root[data-pref-effect="sharp"] *      { border-radius: 0 !important; }

/* Tooltip edge style (left bar accent) */
:root[data-pref-tip-edge="bar"] .gx-tooltip { padding-left: 12px; border-left: 3px solid var(--sui-active, var(--accent)); }
:root[data-pref-tip-edge="dot"] .gx-tooltip::before { content: '●'; margin-right: 6px; color: var(--sui-active, var(--accent)); }
:root[data-pref-tip-edge="square"] .gx-tooltip { border-radius: 0; }
:root[data-pref-tip-edge="rounded"] .gx-tooltip { border-radius: 8px; }