/* Input panel - ReactBits-inspired dark skin layer. Load after base.css. */

/* ReactBits-inspired dark skin */
.input-panel {
  background:
    linear-gradient(180deg, rgba(39,30,55,0.86), rgba(18,15,23,0.94)),
    linear-gradient(90deg, rgba(82,39,255,0.18), rgba(120,209,225,0.06));
  border-top-color: var(--rb-line);
  box-shadow:
    0 -18px 70px rgba(0,0,0,0.48),
    0 0 0 1px rgba(255,255,255,0.025) inset;
}

.input-panel-content {
  background: rgba(18,15,23,0.62);
}

.media-mode-btn {
  background: rgba(22,16,38,0.86);
  border-color: var(--rb-line);
  color: var(--rb-muted);
  box-shadow:
    0 12px 32px rgba(0,0,0,0.28),
    0 0 0 1px rgba(255,255,255,0.03) inset;
}

.media-mode-btn:hover,
.media-mode-btn:focus-visible {
  color: #fff;
  border-color: var(--rb-line-strong);
  background: rgba(37,24,64,0.92);
  box-shadow:
    0 16px 36px rgba(0,0,0,0.34),
    0 0 26px rgba(82,39,255,0.22);
}

.media-mode-btn.active {
  color: #fff;
  border-color: rgba(139,92,246,0.68);
  background:
    linear-gradient(135deg, rgba(82,39,255,0.9), rgba(168,85,247,0.66));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.1) inset,
    0 0 30px rgba(82,39,255,0.38);
}

.canvas-entry-btn {
  border-color: rgba(120,209,225,0.28);
  color: #bdeef6;
}

.canvas-entry-btn:hover,
.canvas-entry-btn:focus-visible {
  border-color: rgba(120,209,225,0.58);
  background: rgba(120,209,225,0.12);
  box-shadow: 0 0 26px rgba(120,209,225,0.2);
}

.tabs,
.image-upload-area,
.video-upload-area,
.composer-panel-header {
  border-color: rgba(218,209,246,0.09);
}

.tab-item {
  color: rgba(180,151,207,0.68);
}

.tab-item:hover {
  background: rgba(255,255,255,0.045);
  color: #fff;
}

.tab-item.active {
  background: rgba(82,39,255,0.18);
  color: #dad1f6;
  border-bottom-color: var(--rb-primary-2);
  box-shadow: 0 -1px 18px rgba(82,39,255,0.13) inset;
}

.composer-panel-title,
.dance-placeholder-title {
  color: var(--rb-text);
}

.composer-panel-subtitle,
.dance-placeholder-desc,
.image-counter {
  color: var(--rb-muted);
}

.upload-card,
.video-upload-card,
.dance-placeholder-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.026)),
    rgba(22,16,38,0.56);
  border-color: rgba(139,92,246,0.3);
  box-shadow: 0 12px 36px rgba(0,0,0,0.2);
}

.upload-card:hover,
.video-upload-card:hover {
  background:
    linear-gradient(180deg, rgba(82,39,255,0.13), rgba(255,255,255,0.032)),
    rgba(22,16,38,0.64);
  border-color: rgba(139,92,246,0.54);
}

.image-thumb-wrapper,
.image-add-tile,
.dance-placeholder-box {
  background: rgba(18,15,23,0.62);
  border-color: rgba(139,92,246,0.38);
}

.image-add-tile {
  color: #dad1f6;
}

.image-add-tile:hover {
  background: rgba(82,39,255,0.24);
  border-color: rgba(218,209,246,0.72);
  box-shadow: 0 0 24px rgba(82,39,255,0.24);
}

.btn-add-image {
  background: rgba(82,39,255,0.16);
  color: #dad1f6;
  border: 1px solid rgba(139,92,246,0.28);
}

.btn-add-image:hover {
  background: rgba(82,39,255,0.28);
  border-color: rgba(139,92,246,0.52);
  color: #fff;
}

.prompt-textarea,
.media-mention-editor {
  background: rgba(6,0,16,0.46);
  border-color: var(--rb-line);
  color: var(--rb-text);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.018) inset;
}

.prompt-textarea:focus,
.media-mention-editor:focus {
  border-color: rgba(139,92,246,0.78);
  background: rgba(18,15,23,0.74);
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.12) inset,
    0 0 28px rgba(82,39,255,0.22);
}

.prompt-textarea::placeholder,
.media-mention-editor:empty::before {
  color: rgba(180,151,207,0.56);
}

.btn-send,
.btn-primary {
  background: linear-gradient(135deg, var(--rb-primary), var(--rb-primary-3));
  box-shadow:
    0 8px 26px rgba(82,39,255,0.36),
    0 0 0 1px rgba(255,255,255,0.1) inset;
}

.btn-send:hover,
.btn-primary:hover {
  box-shadow:
    0 12px 34px rgba(82,39,255,0.5),
    0 0 0 1px rgba(255,255,255,0.16) inset;
}

.video-send-btn {
  background: linear-gradient(135deg, var(--rb-primary), var(--rb-cyan));
  box-shadow: 0 8px 26px rgba(120,209,225,0.26);
}

.point-cost-preview {
  background: #181818;
  border-color: rgba(255,255,255,0.1);
  color: #a3a3a3;
}

.setting-select-inline,
.model-selector-trigger {
  background: rgba(6,0,16,0.52);
  border-color: var(--rb-line);
  color: #f5f5f5;
}

.setting-select-inline:hover,
.setting-select-inline:focus,
.model-selector-trigger:hover {
  border-color: var(--rb-line-strong);
  background: rgba(22,16,38,0.82);
}

.setting-select-inline option {
  background: #120F17;
  color: #f5f5f5;
}

.model-dropdown-inline {
  background: rgba(18,15,23,0.96);
  border-color: var(--rb-line);
  box-shadow: 0 -16px 42px rgba(0,0,0,0.42);
}

.model-option-inline {
  border-color: rgba(218,209,246,0.08);
  color: rgba(245,245,245,0.82);
}

.model-option-inline:hover,
.model-option-inline.selected {
  background: rgba(82,39,255,0.18);
  color: #dad1f6;
}

.media-mention-chip {
  background: rgba(120,209,225,0.13);
  border-color: rgba(120,209,225,0.42);
  color: #bdeef6;
}

.media-mention-popover {
  background: rgba(18,15,23,0.96);
  color: var(--rb-text);
  border-color: var(--rb-line);
  box-shadow: var(--rb-shadow-soft);
}

.media-mention-option {
  color: var(--rb-text);
}

.media-mention-option:hover,
.media-mention-option:focus-visible,
.media-mention-option.is-active {
  background: rgba(82,39,255,0.18);
}

.media-mention-option-main b {
  color: #f5f5f5;
}

.media-mention-option-main small,
.media-mention-empty {
  color: var(--rb-muted);
}

.dance-placeholder-box {
  border-color: rgba(120,209,225,0.26);
  background: rgba(120,209,225,0.06);
}

.dance-placeholder-box span {
  color: #bdeef6;
  background: rgba(120,209,225,0.14);
}

.dance-placeholder-box strong {
  color: rgba(245,245,245,0.82);
}

.dance-placeholder-btn {
  background: rgba(255,255,255,0.055);
  border-color: var(--rb-line);
  color: rgba(180,151,207,0.62);
}