:root {
  background-color: #030303;
  --voice-highlight-bg: rgba(89, 252, 179, 0.3);
  --voice-highlight-text: #59fcb3;
  --voice-frequency-glow: rgba(89, 252, 179, 0.8);
  --icon-color-primary: #33DB98;
  --reply-highlight-border: #33DB98;
  --toast-border-color: #33DB98;
  --primary-color: #33DB98;
  --accent-color: #59fcb3;
  --danger-color: #FF2EA9;
  --slider-fill: #6DD89D;
}

.sync-line {
  background-color: #59fcb3;
}

.popup {
  background-color: #030303;
  box-shadow: 0 0 15px #33DB9825;
  border-color: #33DB98;
}

.typing-indicator-text {
  background: linear-gradient(to right, #ffffff 13.87%, #808080 60%);
  background-size: 200% 200%;
  background-clip: text;
}

.back-btn {
  color: rgb(191, 191, 191);
}

.chatlist-contact {
  border-color: transparent;
}

.chat {
  background-color: #171717;
}

.chat-messages {
  background-color: #030303;
}

.dmsg-reply-them {
  border-left-color: #59fcb3 !important;
}

@keyframes highlightMessage {
  0%, 100% { background-color: rgba(90, 252, 180, 0); }
  20%, 80% { background-color: rgba(90, 252, 180, 0.18); }
}

.image-viewer-close {
  border: 1px solid var(--primary-color);
}

.attachment-panel {
  background: #0a0a0a;
  border-width: 1px;
  border-color: rgba(90, 252, 180, 0.36);
}

.mention-selector {
  background: #0a0a0a;
  border-width: 1px;
  border-color: rgba(90, 252, 180, 0.36);
}

.mention-item.active::before {
  background: #59fcb3;
}

.mention {
  background: rgba(89, 252, 179, 0.12);
  color: #59fcb3;
}

.mention:hover {
  background: rgba(89, 252, 179, 0.22);
}

.emoji-shortcode-selector {
  background: #0a0a0a;
  border-width: 1px;
  border-color: rgba(90, 252, 180, 0.36);
}

.emoji-shortcode-item.active::before {
  background: #59fcb3;
}

.input-box {
  background: linear-gradient(90deg, #59fcb3 0%, #2b976c 100%);
  -webkit-box-shadow: 
    0 10px 20px 5px #59fcb33c,
    0 8px 12px 20px rgba(90, 252, 180, 0.36);
}

#chat-input {
  background-color: #0a0a0a;
}

#chat-box {
  -webkit-box-shadow: none;
}

input,
textarea,
button {
  background-color: #171717;
}

.corner-float {
  border-color: rgba(90, 252, 180, 0.55);
}

.divider {
  background-color: #59fcb3;
}

.new-chat-btn .icon {
  background-color: var(--primary-color);
}

.progress-bar {
  background: linear-gradient(90deg, #33db98, #00ff9d);
}

select {
  border: 1px solid #59fcb3;
}

#whisper-model:focus {
  box-shadow: 0 0 0 2px rgba(89, 252, 179, 0.3);
}

#download-model {
  background: linear-gradient(90deg, #33db98, #00ff9d);
}

#download-model:hover {
  opacity: 0.8;
}

.model-status {
  color: #59fcb3;
}


/* Update Settings Section Styles */
#current-version,
#new-version {
  color: #59fcb3;
}

.accept-btn {
  background: rgba(89, 252, 179, 0.1);
  border: 1px solid rgba(90, 252, 180, 0.65);
  color: #ffffff;
}

.accept-btn:hover:not(:disabled) {
  border-color: rgba(89, 252, 179, 0.5);
}

#update-status-text {
  color: rgba(255, 255, 255, 0.8);
}

#update-progress-bar {
  background: linear-gradient(90deg, #33db98, #00ff9d);
  box-shadow: 0 0 10px rgba(0, 255, 157, 0.4);
}

#download-update-btn,
#restart-update-btn {
  color: #000;
  border: none;
  box-shadow: 0 4px 12px rgba(89, 252, 179, 0.3);
}

#changelog-content {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(89, 252, 179, 0.2);
  color: rgba(255, 255, 255, 0.8);
}

.progress-bar-track {
  box-shadow: 
    inset 0 1px 3px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(89, 252, 179, 0.1);
}

.progress-bar-fill {
  background: linear-gradient(90deg, #33db98, #00ff9d);
}

.progress-text {
  text-shadow: 0 0 5px rgba(89, 252, 179, 0.7);
}

.voice-progress-container {
  border: 1px solid #59fcb3;
  box-shadow: 0 0 15px rgba(89, 252, 179, 0.3);
}

.voice-progress-fill {
  background: linear-gradient(90deg, #59fcb3, #00ff9d);
}

.voice-progress-text {
  color: #59fcb3;
}

input[type="checkbox"]:checked + .neon-toggle {
  background: linear-gradient(90deg, #33db98, #00ff9d);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.neon-toggle:hover {
  box-shadow: 
    0 0 4px #b2b2b2,
    inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

input[type="checkbox"]:checked + .neon-toggle:hover {
  box-shadow: 
    0 0 4px #59fcb3,
    inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

#theme-select:focus {
  box-shadow: 0 0 0 2px #59FCB330;
}

.icon-trash {
  background-color: #59fcb3;
}

select:disabled {
  border-color: rgba(89, 252, 179, 0.3);
}

.nav-icon {
  background-color: #59fcb3;
}








/* File Preview Overlay Theme */
.file-preview-container {
  border-color: var(--primary-color);
  background: #0A0A0A;
}

.file-preview-icon-container {
  background: rgba(89, 252, 179, 0.1);
  border: 1px solid rgba(89, 252, 179, 0.2);
}

.file-preview-icon {
  background-color: #59fcb3;
}

.file-preview-option {
  background: #171717;
  border: 1px solid #47474750;
}

.file-preview-btn-send {
  background: linear-gradient(90deg, #33db98, #00ff9d);
}

.file-preview-btn-send:hover {
  opacity: 0.9;
}

/* Marketplace Theme Overrides */
.marketplace-panel {
  background-color: #0a0a0a;
}

.marketplace-header {
  background-color: rgba(22, 22, 22, 0.85);
}

.marketplace-search-container input:focus {
  border-color: rgba(89, 252, 179, 0.5);
}

.marketplace-filter-tag {
  background-color: rgba(89, 252, 179, 0.15);
  color: #59fcb3;
}

.marketplace-filter-tag:hover {
  background-color: rgba(89, 252, 179, 0.25);
}

.marketplace-filter-tag .icon {
  background-color: #59fcb3;
}

.marketplace-app-card {
  background-color: #171717;
  border-color: rgba(90, 252, 180, 0.15);
}

.marketplace-app-card:hover {
  border-color: rgba(90, 252, 180, 0.35);
  box-shadow: 0 4px 16px rgba(89, 252, 179, 0.15);
}

.marketplace-app-icon-container {
  background-color: rgba(89, 252, 179, 0.1);
  border: 1px solid rgba(89, 252, 179, 0.2);
}

.marketplace-app-icon-placeholder {
  background-color: #59fcb3;
}

.marketplace-app-category {
  background-color: rgba(89, 252, 179, 0.15);
  color: #59fcb3;
}

.marketplace-app-category:hover {
  background-color: rgba(89, 252, 179, 0.3);
}

.marketplace-install-btn {
  background-color: #58fcb3;
  color: #000;
}

.marketplace-install-btn:hover {
  box-shadow: 0 4px 16px rgba(89, 252, 179, 0.4);
}

.marketplace-install-btn.installed {
  background-color: #58fcb3;
}

.marketplace-install-btn.installing {
  background-color: #58fcb3;
  opacity: 0.7;
}

.marketplace-install-btn.update-available {
  background-color: #58fcb3;
  color: #000;
}

.marketplace-install-btn.updating {
  background-color: #58fcb3;
  opacity: 0.7;
}

.marketplace-app-version.update-available {
  color: #59fcb3;
}

.marketplace-loading-icon {
  background-color: #59fcb3;
}

.marketplace-empty-icon {
  background-color: rgba(89, 252, 179, 0.4);
}

.marketplace-retry-btn {
  background: linear-gradient(90deg, #59fcb3 0%, #2b976c 100%);
  color: #000;
}

.marketplace-retry-btn:hover {
  box-shadow: 0 4px 16px rgba(89, 252, 179, 0.4);
}

/* Publish Dialog Theme */
.publish-app-container {
  background-color: #0a0a0a;
  border-color: rgba(90, 252, 180, 0.25);
}

.publish-app-header {
  border-bottom-color: rgba(90, 252, 180, 0.2);
}

.publish-app-icon-placeholder {
  background: linear-gradient(135deg, #59fcb3 0%, #2b976c 100%);
}

.publish-app-icon-placeholder .icon {
  background-color: #000;
}

.publish-app-field input:focus,
.publish-app-field textarea:focus {
  border-color: rgba(89, 252, 179, 0.5);
  box-shadow: 0 0 0 2px rgba(89, 252, 179, 0.15);
}

.publish-app-btn-publish {
  background: linear-gradient(90deg, #33db98, #00ff9d);
  color: #000;
}

.publish-app-btn-publish:hover {
  box-shadow: 0 4px 16px rgba(89, 252, 179, 0.4);
}

/* File Preview Publish Button */
.file-preview-btn-publish {
  background: linear-gradient(90deg, #59fcb3 0%, #2b976c 100%);
  color: #000;
}

.file-preview-btn-publish .icon {
  background-color: #000;
}

.file-preview-btn-publish:hover {
  box-shadow: 0 4px 16px rgba(89, 252, 179, 0.4);
}

/* App Details Panel Theme Overrides */
.app-details-panel {
  background-color: #0a0a0a;
}

.app-details-header {
  background-color: rgba(22, 22, 22, 0.85);
}

.app-details-icon-container {
  background-color: rgba(89, 252, 179, 0.1);
}

.app-details-icon-placeholder {
  background-color: #59fcb3;
}

.app-details-category {
  background-color: rgba(89, 252, 179, 0.15);
  color: #59fcb3;
}

.app-details-category:hover {
  background-color: rgba(89, 252, 179, 0.3);
}

.app-details-action-btn {
  background-color: #58fcb3;
  color: #000;
}

.app-details-action-btn:hover {
  box-shadow: 0 4px 16px rgba(89, 252, 179, 0.4);
}

.app-details-action-btn.installed {
  background-color: #58fcb3;
}

.app-details-action-btn.installing {
  background-color: #58fcb3;
  opacity: 0.7;
}

/* App Details Uninstall Button */
.app-details-uninstall-btn {
  background-color: rgba(255, 100, 100, 0.2);
  color: #ff6464;
  border: 1px solid rgba(255, 100, 100, 0.4);
}

.app-details-uninstall-btn:hover {
  background-color: rgba(255, 100, 100, 0.3);
  box-shadow: 0 4px 16px rgba(255, 100, 100, 0.2);
}

/* App Details Update Button */
.app-details-update-btn {
  background-color: #58fcb3;
  color: #000;
}

.app-details-update-btn:hover {
  box-shadow: 0 4px 16px rgba(89, 252, 179, 0.4);
}

.app-details-update-btn.updating {
  background-color: #58fcb3;
  opacity: 0.7;
}

.app-details-publisher {
  background-color: rgba(89, 252, 179, 0.05);
}

.app-details-publisher:hover {
  background-color: rgba(89, 252, 179, 0.1);
}

/* Marketplace category overflow indicator */
.marketplace-app-category-overflow {
  background-color: rgba(89, 252, 179, 0.2);
  color: rgba(89, 252, 179, 0.9);
}

/* Featured category card */
.marketplace-featured-category.highlighted {
  background: linear-gradient(135deg, rgba(89, 252, 179, 0.15) 0%, rgba(43, 151, 108, 0.08) 100%);
  border-color: rgba(89, 252, 179, 0.3);
}

.marketplace-featured-category.highlighted:hover {
  box-shadow: 0 8px 24px rgba(89, 252, 179, 0.2);
}

.marketplace-popular-category:hover {
  background-color: rgba(89, 252, 179, 0.2);
  color: #59fcb3;
}

/* Relay Add Button */
.relay-add-btn {
  background: rgba(89, 252, 179, 0.2);
  border: 1px solid rgba(89, 252, 179, 0.4);
  color: #59fcb3;
}

.relay-add-btn:hover {
  background: rgba(89, 252, 179, 0.3);
  border-color: rgba(89, 252, 179, 0.6);
}

/* Relay Dialog */

.relay-dialog-buttons .primary-btn {
  background-color: #59fcb3;
  color: #000;
}

.relay-metric-value {
  color: #59fcb3;
}

.relay-metric-inline-value {
    color: var(--accent-color);
}

.relay-dialog .relay-form-select {
    border: 1px solid #262626;
}

.aggro-glitch-img {
  content: url('../../icons/aggro-glitch.gif');
  width: 64px;
  height: 64px;
}

.warning-icon {
  content: url('../../icons/warning_pink.png');
  width: 16px;
  height: 16px;
}
