/* Input panel - minimal black pass with restrained ReactBits-inspired effects. Load after theme-reactbits.css. */

/* Minimal black pass with restrained ReactBits-inspired effects */
.input-panel {
  background:
    linear-gradient(180deg, rgba(27,25,34,0.95), rgba(13,12,18,0.97)),
    #0d0c12;
  border-top-color: rgba(255,255,255,0.11);
  box-shadow:
    0 -18px 58px rgba(0,0,0,0.44),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

.input-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 20px 20px 0 0;
  padding: 1px;
  background: conic-gradient(
    from var(--rb-border-angle),
    transparent 0deg,
    transparent 70deg,
    rgba(139,92,246,0.34) 100deg,
    transparent 136deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.48;
  animation: rbBorderSpin 14s linear infinite;
}

.input-panel-content {
  background: rgba(14,13,19,0.78);
}

.media-mode-btn {
  background: rgba(17,16,22,0.9);
  border-color: rgba(255,255,255,0.11);
  color: rgba(244,244,245,0.68);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 22px rgba(0,0,0,0.22);
}

.media-mode-btn:hover,
.media-mode-btn:focus-visible {
  background: rgba(24,21,32,0.96);
  border-color: rgba(139,92,246,0.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 28px rgba(0,0,0,0.28);
}

.media-mode-btn.active {
  background: rgba(40,31,58,0.92);
  border-color: rgba(139,92,246,0.52);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 0 20px rgba(124,58,237,0.22);
}

.canvas-entry-btn {
  border-color: rgba(139,92,246,0.18);
  color: rgba(226,220,239,0.68);
}

.canvas-entry-btn:hover,
.canvas-entry-btn:focus-visible {
  border-color: rgba(139,92,246,0.32);
  background: rgba(139,92,246,0.08);
  box-shadow: 0 12px 28px rgba(0,0,0,0.3);
}

.tab-item {
  color: rgba(154,148,166,0.72);
}

.tab-item:hover {
  background: rgba(255,255,255,0.05);
}