/* KidLisp Editor - UI Components */

/* ============================================
   TABS
   ============================================ */

.tab {
  padding: 0 16px;
  cursor: pointer;
  border-right: 1px solid var(--border-color);
  height: 100%;
  display: flex;
  align-items: center;
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  transition: all 0.2s;
}

@media (hover: hover) {
  .tab:hover { filter: brightness(1.1); }
  #examples-tab:hover { background: rgba(59, 130, 246, 0.35); }
  #keeps-tab:hover { background: rgba(205, 92, 155, 0.35); }
  #reference-tab:hover { background: rgba(34, 197, 94, 0.35); }
}

.tab.active {
  color: var(--text-primary);
  border-bottom: 1px solid var(--bg-primary);
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
  font-weight: 600;
}

/* Color-coded tabs */
#examples-tab {
  background: var(--tab-examples-bg);
  color: #1e40af;
}
#examples-tab.active {
  background: var(--tab-examples-active);
  color: #1e3a8a;
}

#keeps-tab {
  background: var(--tab-keeps-bg);
  color: #9d174d;
}
#keeps-tab.active {
  background: var(--tab-keeps-active);
  color: #831843;
}

#reference-tab {
  background: var(--tab-reference-bg);
  color: #166534;
}
#reference-tab.active {
  background: var(--tab-reference-active);
  color: #14532d;
}

/* ============================================
   DROPDOWNS (Generic)
   ============================================ */

/* Shared dropdown styles */
[data-dropdown] {
  position: relative;
}

[data-dropdown-menu] {
  display: none;
  position: absolute;
  top: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 99999;
  padding: 4px 0;
  margin-top: 4px;
}

[data-dropdown].open [data-dropdown-menu] {
  display: block;
}

/* ============================================
   LANGUAGE DROPDOWN
   ============================================ */

.language-tab {
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
  overflow: visible;
}

@media (hover: hover) {
  .language-tab:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
  }
}

.lang-flag { font-size: 14px; }
.lang-text { font-size: 12px; min-width: 50px; }
.lang-arrow { font-size: 12px; opacity: 0.6; }

.language-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 99999;
  min-width: 120px;
  margin-top: 2px;
}

.lang-option {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

@media (hover: hover) {
  .lang-option:hover {
    background: rgba(205, 92, 155, 0.1);
    color: var(--ac-purple);
  }
}

.lang-option:first-child { border-radius: 4px 4px 0 0; }
.lang-option:last-child { border-radius: 0 0 4px 4px; }

.language-tab.cycling .lang-flag,
.language-tab.cycling .lang-text {
  animation: langFade 0.3s ease-in-out;
}

@keyframes langFade {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

/* ============================================
   PLATFORM SELECTOR
   ============================================ */

.platform-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s;
  position: relative;
}

.platform-selector:hover {
  background: rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
  .platform-selector:hover { background: rgba(255, 255, 255, 0.1); }
}

[data-theme="dark"] .platform-selector:hover {
  background: rgba(255, 255, 255, 0.1);
}

.platform-icon { font-size: 14px; }
.platform-arrow { font-size: 8px; color: var(--text-tertiary); margin-left: 2px; }

.platform-dropdown {
  position: fixed;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  min-width: 220px;
  z-index: 99999;
  padding: 4px 0;
  /* Use visibility + opacity for smooth open without flash */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.platform-selector.open .platform-dropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.platform-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.platform-option:hover { background: var(--bg-secondary); }
.platform-option.active { background: rgba(205, 92, 155, 0.15); }
.platform-option.active:hover { background: rgba(205, 92, 155, 0.25); }

.platform-opt-icon { font-size: 16px; width: 24px; text-align: center; }
.platform-opt-name { font-size: 13px; color: var(--text-primary); flex: 1; }

.platform-status {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: bold;
}

.platform-option.coming-soon { opacity: 0.5; }
.platform-option.coming-soon .platform-status {
  background: rgba(59, 130, 246, 0.2);
  color: rgb(59, 130, 246);
}

.platform-option.experimental { opacity: 0.4; }
.platform-option.experimental .platform-status {
  background: rgba(234, 179, 8, 0.2);
  color: rgb(180, 140, 0);
}

@media (prefers-color-scheme: dark) {
  .platform-option.coming-soon .platform-status { color: rgb(147, 197, 253); }
  .platform-option.experimental .platform-status { color: rgb(253, 224, 71); }
}

[data-theme="dark"] .platform-option.coming-soon .platform-status { color: rgb(147, 197, 253); }
[data-theme="dark"] .platform-option.experimental .platform-status { color: rgb(253, 224, 71); }

.platform-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
}

/* ============================================
   USER MENU (Header)
   ============================================ */

.header-login-btn {
  margin-left: auto;
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--ac-purple) 0%, rgb(175, 62, 125) 100%);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.header-login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(205, 92, 155, 0.3);
}

.header-user-menu {
  margin-left: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
  transition: background 0.2s;
}

.header-user-menu:hover { background: var(--bg-tertiary); }

.header-user-handle { font-size: 12px; color: var(--text-secondary); }
.header-menu-arrow { font-size: 8px; color: var(--text-tertiary); }

.header-user-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 100px;
  z-index: 10000;
}

.header-user-menu.open .header-user-dropdown {
  display: block;
}

.header-logout-btn {
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  text-align: left;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
}

.header-logout-btn:hover { background: var(--bg-tertiary); }

/* ============================================
   THEME TOGGLE
   ============================================ */

#theme-toggle {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: opacity 0.2s;
  padding: 0;
  opacity: 0.6;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  #theme-toggle:hover { opacity: 1; }
}

#theme-toggle:active { opacity: 0.4; }

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

.kidlisp-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: 8px;
  color: white;
  font-family: var(--font-mono);
  font-size: 14px;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.toast-info { background: #8b5cf6; }
.toast-warning { background: #f59e0b; }
.toast-error { background: #ef4444; }
.toast-success { background: #22c55e; }