/* Tema Spike para a interface de configuração de Mensagem Auto. */

/* Tela Meus Painéis: variáveis e cartões da lista, sem tocar nos cartões de mensagem demonstrativos. */
.mensagem-auto-react #dashboard-view .container {
  --bg: #0a0e0b;
  --card: #111715;
  --line: #303a35;
  --text: #e8eee9;
  --muted: #929b96;
  --green: #00ff88;
  --brand: #00ff88;
  background: #0a0e0b;
  color: #e8eee9;
}
.mensagem-auto-react #dashboard-view .container .grid > .card {
  background: linear-gradient(180deg, #111715 0%, #0d1310 100%);
  border-color: #303a35;
  color: #e8eee9;
}
.mensagem-auto-react #dashboard-view .container .grid > .card::before { color: #929b96; }
.mensagem-auto-react #dashboard-view .container .badge {
  background: #0d1310;
  border-color: #303a35;
  color: #929b96;
}
.mensagem-auto-react #dashboard-view .container .badge.on {
  border-color: rgba(0,255,136,.30);
  color: #00ff88;
}
.mensagem-auto-react #dashboard-view .container .meta { color: #aebbb2; }
.mensagem-auto-react #dashboard-view .container .meta-label { color: #929b96; }
.mensagem-auto-react #dashboard-view .container .code-box {
  background: #0a0e0b;
  border-color: #303a35;
}
.mensagem-auto-react #dashboard-view .container .copy,
.mensagem-auto-react #dashboard-view .container .act:not(.danger) {
  background: #0d1310;
  border-color: #303a35;
  color: #e8eee9;
}
.mensagem-auto-react #dashboard-view .container .copy:hover,
.mensagem-auto-react #dashboard-view .container .act:not(.danger):hover {
  background: #151c19;
  border-color: #00ff88;
  color: #00ff88;
}
.mensagem-auto-react #dashboard-view .container .empty {
  border-color: #303a35;
  color: #929b96;
}
.mensagem-auto-react #dashboard-view .overlay .modal {
  background: #111715;
  border-color: #303a35;
  color: #e8eee9;
}
.mensagem-auto-react #dashboard-view .overlay .m-head,
.mensagem-auto-react #dashboard-view .overlay .m-foot {
  border-color: #303a35;
}
.mensagem-auto-react #dashboard-view .overlay .m-head h2 { color: #00ff88; }
.mensagem-auto-react #dashboard-view .overlay .close,
.mensagem-auto-react #dashboard-view .overlay .cancel {
  background: #0d1310;
  border-color: #303a35;
  color: #e8eee9;
}
.mensagem-auto-react #dashboard-view .overlay .close:hover,
.mensagem-auto-react #dashboard-view .overlay .cancel:hover {
  border-color: #00ff88;
  color: #00ff88;
}
.mensagem-auto-react #dashboard-view .overlay :is(.input, .select, input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea) {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  border: 1px solid #303a35 !important;
  border-radius: 9px !important;
  background: #0a0e0b !important;
  color: #e8eee9 !important;
  font-size: 12px !important;
}
.mensagem-auto-react #dashboard-view#dashboard-view .overlay textarea { min-height: 88px !important; }
.mensagem-auto-react #dashboard-view .overlay :is(.input, .select, input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea):focus {
  border-color: #00ff88 !important;
  box-shadow: 0 0 0 3px rgba(0,255,136,.12) !important;
  outline: none !important;
}
.mensagem-auto-react #dashboard-view .overlay :is(input, textarea)::placeholder { color: #748279 !important; opacity: 1; }
.mensagem-auto-react #dashboard-view#dashboard-view .channel-picker-trigger {
  min-height: 42px !important;
  border-color: #303a35 !important;
  border-radius: 9px !important;
  background: #0a0e0b !important;
  color: #e8eee9 !important;
}
.mensagem-auto-react #dashboard-view#dashboard-view .channel-picker-trigger:hover,
.mensagem-auto-react #dashboard-view#dashboard-view .channel-picker-trigger:focus-visible {
  border-color: #00ff88 !important;
  box-shadow: 0 0 0 3px rgba(0,255,136,.12) !important;
  outline: none !important;
}

/* Editor: variáveis aplicadas somente à coluna de controles; a coluna de prévia é irmã dela. */
.mensagem-auto-react #editor-view .stack {
  --bg: #0a0e0b !important;
  --panel: #111715 !important;
  --panel2: #0d1310 !important;
  --panel3: #151c19 !important;
  --line: #303a35 !important;
  --text: #e8eee9 !important;
  --muted: #929b96 !important;
  --soft: #aebbb2 !important;
  --accent: #00ff88 !important;
  --accent2: #00cc66 !important;
  --green: #00ff88 !important;
}
.mensagem-auto-react #editor-view .app .sidebar {
  background: rgba(13,19,16,.96);
  border-right-color: #303a35;
}
.mensagem-auto-react #editor-view .app .brand strong { color: #e8eee9; }
.mensagem-auto-react #editor-view .app .brand small,
.mensagem-auto-react #editor-view .app .nav-label,
.mensagem-auto-react #editor-view .app .server-card small { color: #929b96; }
.mensagem-auto-react #editor-view .app .nav-btn {
  border-color: transparent;
  color: #aebbb2;
}
.mensagem-auto-react #editor-view .app .nav-btn:hover {
  background: #151c19;
  border-color: #303a35;
  color: #e8eee9;
}
.mensagem-auto-react #editor-view .app .nav-btn.active {
  background: rgba(0,255,136,.10);
  border-color: rgba(0,255,136,.30);
  color: #00ff88;
}
.mensagem-auto-react #editor-view .app .nav-icon { background: #151c19; }
.mensagem-auto-react #editor-view .app .nav-btn.active .nav-icon {
  background: #00ff88;
  color: #07100d;
}
.mensagem-auto-react #editor-view .app .server-card {
  background: #111715;
  border-color: #303a35;
  color: #e8eee9;
}
.mensagem-auto-react #editor-view .app .main { background: #0a0e0b; }
.mensagem-auto-react #editor-view .app .main .topbar {
  background: rgba(10,14,11,.96);
  border-bottom-color: #303a35;
}
.mensagem-auto-react #editor-view .app .topbar .top-title > span { color: #929b96; }
.mensagem-auto-react #editor-view .app .topbar .status { color: #aebbb2; }
.mensagem-auto-react #editor-view .app .topbar .status.saved { color: #00ff88; }
.mensagem-auto-react #editor-view .app .topbar .btn.ghost {
  border-color: #303a35;
  background: #111715;
  color: #e8eee9;
}
.mensagem-auto-react #editor-view .app .topbar .btn.ghost:hover {
  border-color: #00ff88;
  background: #151c19;
  color: #00ff88;
}
.mensagem-auto-react #editor-view .app .page-head h1 { color: #e8eee9; }
.mensagem-auto-react #editor-view .app .page-head p { color: #929b96; }
.mensagem-auto-react #editor-view .app .page-head .eyebrow { color: #00cc66; }
.mensagem-auto-react #editor-view .app .page-head .pill {
  border-color: rgba(0,255,136,.30);
  background: rgba(0,255,136,.10);
  color: #00ff88;
}

.mensagem-auto-react #editor-view .stack .card {
  background: linear-gradient(180deg, #111715 0%, #0d1310 100%);
  border-color: #303a35;
}
.mensagem-auto-react #editor-view .stack .card.accent {
  border-color: rgba(0,255,136,.30);
  box-shadow: inset 3px 0 #00ff88, 0 12px 30px rgba(0,0,0,.18);
}
.mensagem-auto-react #editor-view .stack .card-head { border-bottom-color: #303a35; }
.mensagem-auto-react #editor-view .stack .card-head strong,
.mensagem-auto-react #editor-view .stack .category-title strong,
.mensagem-auto-react #editor-view .stack .question-head strong,
.mensagem-auto-react #editor-view .stack .field-head strong,
.mensagem-auto-react #editor-view .stack .action-head strong,
.mensagem-auto-react #editor-view .stack .switch-row strong { color: #e8eee9; }
.mensagem-auto-react #editor-view .stack .card-head small,
.mensagem-auto-react #editor-view .stack .category-title small,
.mensagem-auto-react #editor-view .stack .switch-row small,
.mensagem-auto-react #editor-view .stack .help,
.mensagem-auto-react #editor-view .stack .field label,
.mensagem-auto-react #editor-view .stack .subhead,
.mensagem-auto-react #editor-view .stack .subhead small,
.mensagem-auto-react #editor-view .stack .counter { color: #aebbb2; }
.mensagem-auto-react #editor-view .stack .category,
.mensagem-auto-react #editor-view .stack .question,
.mensagem-auto-react #editor-view .stack .field-item,
.mensagem-auto-react #editor-view .stack .action-item,
.mensagem-auto-react #editor-view .stack .switch-row,
.mensagem-auto-react #editor-view .stack .add-bar,
.mensagem-auto-react #editor-view .stack .schedule-time,
.mensagem-auto-react #editor-view .stack .json-preview {
  border-color: #303a35;
  background: #0d1310;
  color: #e8eee9;
}
.mensagem-auto-react #editor-view .stack .category-body,
.mensagem-auto-react #editor-view .stack .category-body .question,
.mensagem-auto-react #editor-view .stack .category-body .field-item,
.mensagem-auto-react #editor-view .stack .category-body .action-item {
  border-color: #303a35;
}
.mensagem-auto-react #editor-view .stack .card .variables .chip {
  border-color: rgba(0,255,136,.30);
  background: rgba(0,255,136,.08);
  color: #00ff88;
}
.mensagem-auto-react #editor-view .stack .card .variables .chip:hover {
  background: rgba(0,255,136,.16);
  color: #00ff88;
}
.mensagem-auto-react #editor-view .stack .pill {
  border-color: rgba(0,255,136,.30);
  background: rgba(0,255,136,.10);
  color: #00ff88;
}
.mensagem-auto-react #editor-view .stack input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
.mensagem-auto-react #editor-view .stack select,
.mensagem-auto-react #editor-view .stack textarea {
  box-sizing: border-box !important;
  max-width: 100% !important;
  border: 1px solid #303a35 !important;
  border-radius: 9px !important;
  background: #0a0e0b !important;
  color: #e8eee9 !important;
  font-family: inherit;
  font-size: 12px !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.mensagem-auto-react #editor-view .stack input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
.mensagem-auto-react #editor-view .stack select {
  min-height: 42px !important;
  padding: 10px 12px !important;
}
.mensagem-auto-react #editor-view .stack textarea {
  min-height: 88px !important;
  padding: 10px 12px !important;
  line-height: 1.45;
}
.mensagem-auto-react #editor-view .stack input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]):hover,
.mensagem-auto-react #editor-view .stack select:hover,
.mensagem-auto-react #editor-view .stack textarea:hover {
  border-color: #00c96f !important;
}
.mensagem-auto-react #editor-view .stack input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]):focus,
.mensagem-auto-react #editor-view .stack select:focus,
.mensagem-auto-react #editor-view .stack textarea:focus {
  border-color: #00ff88 !important;
  box-shadow: 0 0 0 3px rgba(0,255,136,.12) !important;
  outline: none !important;
}
.mensagem-auto-react #editor-view .stack input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"])::placeholder,
.mensagem-auto-react #editor-view .stack textarea::placeholder { color: #748279 !important; opacity: 1; }
.mensagem-auto-react #editor-view .stack .btn:not(.primary):not(.danger) {
  border-color: #303a35;
  background: #111715;
  color: #e8eee9;
}
.mensagem-auto-react #editor-view .stack .btn:not(.primary):not(.danger):hover {
  border-color: #00ff88;
  background: #151c19;
  color: #00ff88;
}
.mensagem-auto-react #editor-view .stack .btn.primary {
  border-color: #00ff88 !important;
  background: linear-gradient(135deg, #00ff88 0%, #00cc66 100%) !important;
  color: #07100d !important;
  box-shadow: 0 8px 24px rgba(0,255,136,.14) !important;
}
.mensagem-auto-react #editor-view .stack .btn.primary:disabled {
  border-color: #303a35 !important;
  background: #18201c !important;
  color: #718078 !important;
  box-shadow: none !important;
}
.mensagem-auto-react #editor-view .stack .btn.good { color: #00ff88; }
.mensagem-auto-react #editor-view .stack .btn.danger { color: #ff8c9d; }
.mensagem-auto-react #editor-view .stack .schedule-day {
  border-color: #303a35;
  background: #0d1310;
  color: #aebbb2;
}
.mensagem-auto-react #editor-view .stack .schedule-day:hover { border-color: #00ff88; }
.mensagem-auto-react #editor-view .stack .schedule-day.active {
  border-color: #00ff88;
  background: #00ff88;
  color: #07100d;
}
.mensagem-auto-react #editor-view .stack .switch-row { background: #0d1310; }
.mensagem-auto-react #editor-view .stack .slider { background: #303a35; }
.mensagem-auto-react #editor-view .stack .switch input:checked + .slider { background: #00ff88; }
.mensagem-auto-react #editor-view .stack .switch input:checked + .slider::before { background: #07100d; }
.mensagem-auto-react #editor-view .stack .json-preview {
  background: #0a0e0b;
  color: #aebbb2;
}
.mensagem-auto-react #editor-view .stack .empty {
  border-color: #303a35;
  color: #929b96;
}
.mensagem-auto-react #editor-view .modal-box:not(.wide) {
  border-color: #303a35;
  background: #111715;
  color: #e8eee9;
}
.mensagem-auto-react #editor-view .modal-box:not(.wide) .modal-head,
.mensagem-auto-react #editor-view .modal-box:not(.wide) .modal-foot {
  border-color: #303a35;
}
.mensagem-auto-react #editor-view .modal-box:not(.wide) .modal-head strong { color: #e8eee9; }
.mensagem-auto-react #editor-view .modal-box:not(.wide) .modal-head small { color: #929b96; }
.mensagem-auto-react #editor-view #importModal textarea {
  border-color: #303a35 !important;
  border-radius: 9px !important;
  background: #0a0e0b !important;
  color: #e8eee9 !important;
}
.mensagem-auto-react #editor-view .mobile-nav {
  border-top-color: #303a35;
  background: rgba(13,19,16,.98);
}
.mensagem-auto-react #editor-view .mobile-nav button { color: #aebbb2; }
.mensagem-auto-react #editor-view .mobile-nav button.active { color: #00ff88; }

/* Selects aprimorados da própria página, inclusive quando o modal é anexado ao body. */
.mensagem-auto-react .spike-settings-select-trigger {
  border-color: #303a35 !important;
  border-radius: 9px !important;
  background: #0a0e0b !important;
  color: #e8eee9 !important;
}
.mensagem-auto-react .spike-settings-select-trigger:hover,
.mensagem-auto-react .spike-settings-select-trigger:focus-visible {
  border-color: #00ff88 !important;
  box-shadow: 0 0 0 3px rgba(0,255,136,.12) !important;
}
.spike-settings-select-dialog {
  border-color: #303a35 !important;
  background: #111715 !important;
  color: #e8eee9 !important;
}
.spike-settings-select-head { border-bottom-color: #303a35 !important; }
.spike-settings-select-close {
  border-color: #303a35 !important;
  background: #0d1310 !important;
  color: #e8eee9 !important;
}
.spike-settings-select-close:hover { border-color: #00ff88 !important; color: #00ff88 !important; }
.spike-settings-select-option {
  border-color: #303a35 !important;
  background: #0d1310 !important;
  color: #e8eee9 !important;
}
.spike-settings-select-option:hover,
.spike-settings-select-option.active {
  border-color: #00ff88 !important;
  background: rgba(0,255,136,.10) !important;
  color: #00ff88 !important;
}

@media (max-width: 640px) {
  .mensagem-auto-react #dashboard-view .overlay :is(.input, .select, input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select),
  .mensagem-auto-react #editor-view .stack input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  .mensagem-auto-react #editor-view .stack select,
  .mensagem-auto-react #dashboard-view#dashboard-view .channel-picker-trigger,
  .mensagem-auto-react .spike-settings-select-trigger {
    min-height: 44px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
  }
}


/* Ações destrutivas: vermelho visível em repouso e mais forte no hover/foco. */
.mensagem-auto-react #dashboard-view .container .act.danger {
  border-color: rgba(255,92,102,.42);
  background: rgba(255,92,102,.10);
  color: #ff7b86;
}
.mensagem-auto-react #dashboard-view .container .act.danger:hover,
.mensagem-auto-react #dashboard-view .container .act.danger:focus-visible {
  border-color: #ff5964;
  background: rgba(255,92,102,.18);
  color: #ff9aa2;
  box-shadow: 0 0 0 3px rgba(255,92,102,.10);
  outline: none;
}
.mensagem-auto-react #editor-view .stack .btn.danger {
  border-color: rgba(255,92,102,.42);
  background: rgba(255,92,102,.10);
  color: #ff8c96;
}
.mensagem-auto-react #editor-view .stack .btn.danger:hover,
.mensagem-auto-react #editor-view .stack .btn.danger:focus-visible {
  border-color: #ff5964;
  background: rgba(255,92,102,.18);
  color: #ffabb1;
  box-shadow: 0 0 0 3px rgba(255,92,102,.10);
  outline: none;
}