/* Panel System — Pill styles
   system.panel-system v1.0.0 (v0.6 Day 1)
   Pills are always-visible handles for docked panels.
   See v0.6 §16a (Pill system) for the full rule set.
*/

:root {
  --fv-pill-edge: #4A9EFF;          /* Edge Panel pill colour (blue) */
  --fv-pill-pro: #9B59B6;            /* Pro Mode pill colour (purple, inactive) */
  --fv-pill-pro-active: #E67E22;     /* Pro Mode pill colour (orange, when Pro Mode is on) */
  --fv-pill-width: 24px;
  --fv-pill-height: 80px;
  --fv-pill-radius: 6px;
  --fv-pill-z: 9999;
}

/* Edge Panel pill — right edge, always visible */
.fv-pill-edge {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: var(--fv-pill-width);
  height: var(--fv-pill-height);
  background: var(--fv-pill-edge);
  border-radius: var(--fv-pill-radius) 0 0 var(--fv-pill-radius);
  z-index: var(--fv-pill-z);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 11px;
  font-weight: 600;
  user-select: none;
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.15);
  transition: background 0.15s ease, transform 0.15s ease;
}

.fv-pill-edge:hover {
  background: #357ABD;
  transform: translateY(-50%) translateX(-2px);
}

.fv-pill-edge:active {
  transform: translateY(-50%) translateX(-4px);
}

/* Pro Mode pill — top-right corner, always visible, distinct colour */
.fv-pill-pro {
  position: fixed;
  top: 8px;
  right: 8px;
  width: var(--fv-pill-width);
  height: var(--fv-pill-height);
  background: var(--fv-pill-pro);
  border-radius: var(--fv-pill-radius);
  z-index: var(--fv-pill-z);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 11px;
  font-weight: 600;
  user-select: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: background 0.15s ease;
}

.fv-pill-pro:hover {
  background: #7D3C98;
}

.fv-pill-pro.fv-pill-pro-active {
  background: var(--fv-pill-pro-active);
}

/* Mobile: pills remain visible, no exceptions */
@media (max-width: 600px) {
  .fv-pill-edge {
    height: 60px;
    width: 20px;
    font-size: 10px;
  }
  .fv-pill-pro {
    height: 60px;
    width: 20px;
    font-size: 10px;
  }
}