/* webapp/css/base.css */

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body, #app-container {
  background: var(--theme-bg-primary, #121212);
  color: var(--theme-text-primary, #e0e0e0);
}

/* Глобальные стили скроллбара через переменные темы */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--theme-bg-secondary, #1e1e1e); /* Тёмный fallback */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: var(--theme-accent-primary, #ff8c00); /* Цвет темы */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--theme-accent-primary, #ff8c00);
    opacity: 0.8;
}
/* Для Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--theme-accent-primary, #ff8c00) var(--theme-bg-secondary, #1e1e1e);
}


/* Утилитарные классы */
.hidden {
  display: none !important;
}

.sr-only { /* Для элементов, которые должны быть доступны скринридерам, но невидимы */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* Анимация спиннера (остается глобальной) */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}

/* Стили для плавной смены видимости */
.fade-in-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0s !important;
}

/* Классы для анимации появления/скрытия элементов на странице Учить и AI панелей */
#study-mode-message,
#study-mode-buttons-wrapper,
.ai-explanation-display,
#study-card-input, #study-card-mc, #study-card-audition,
#study-card-dictation, #study-card-phrase-audition, #study-card-phrase-translation {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
    will-change: opacity, visibility;
}

#study-mode-message.fade-in-visible,
#study-mode-buttons-wrapper.fade-in-visible,
.ai-explanation-display.fade-in-visible,
#study-card-input.fade-in-visible,
#study-card-mc.fade-in-visible,
#study-card-audition.fade-in-visible,
#study-card-dictation.fade-in-visible,
#study-card-phrase-audition.fade-in-visible,
#study-card-phrase-translation.fade-in-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0s;
}

/* Специфичные для AI панели анимации высоты */
.ai-explanation-display {
    max-height: 0; /* Start collapsed */
    overflow: hidden;
    transition: opacity 0.3s ease-in-out,
                max-height 0.4s ease-in-out,
                visibility 0s linear 0.4s,
                margin-top 0.3s ease-in-out,
                margin-bottom 0.3s ease-in-out,
                padding-top 0.3s ease-in-out,
                padding-bottom 0.3s ease-in-out;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.ai-explanation-display.fade-in-visible {
    max-height: 600px; /* Or enough to show content. Adjust as needed. */
    margin-top: 0.5rem; /* Tailwind my-2 */
    margin-bottom: 0.5rem; /* Tailwind my-2 */
    padding-top: 0.75rem; /* Tailwind p-3 */
    padding-bottom: 0.75rem; /* Tailwind p-3 */
}


/* Debug UI Panel Styles - Base Structure (colors will be theme-dependent) */
#debug-mode-indicator {
    position: fixed; top: 0; left: 0; right: 0;
    padding: 4px 8px; text-align: center; font-size: 0.75rem; font-weight: bold;
    z-index: 99999; display: none;
    /* background-color and color will be set by theme */
}
#debug-ui-panel {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 35vh;
    z-index: 99998; display: flex; flex-direction: column;
    font-size: 0.8rem;
    /* background-color, border-top, box-shadow will be set by theme */
}
#debug-ui-panel.hidden { display: none; }
#debug-ui-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.3rem 0.6rem;
    /* background-color, border-bottom will be set by theme */
}
#debug-ui-controls { display: flex; align-items: center; gap: 0.4rem; }
#debug-ui-controls input[type="text"] {
    padding: 0.2rem 0.4rem; font-size: 0.75rem;
    border-radius: 0.25rem;
    width: 150px;
    /* background-color, border, color will be set by theme */
}
#debug-ui-controls button {
    background: none;
    padding: 0.2rem 0.4rem; border-radius: 0.25rem; cursor: pointer;
    font-size: 0.85rem; line-height: 1;
     /* border, color, hover states will be set by theme */
}
#debug-log-container {
    flex-grow: 1; overflow-y: auto; padding: 0.5rem;
    font-family: 'Menlo', 'Monaco', 'Consolas', "Courier New", monospace;
    line-height: 1.4;
    /* scrollbar styles are global or set by theme */
}
.log-entry {
    padding: 0.15rem 0;
    word-break: break-all;
    /* border-bottom will be set by theme */
}
.log-entry:last-child { border-bottom: none; }
.log-timestamp { font-size: 0.9em; /* color will be set by theme */ }
.log-context { font-weight: bold; font-size: 0.9em; /* color will be set by theme */ }
.log-message { /* color will be set by theme */ }
.log-data {
    padding: 0.3rem 0.5rem; margin-top: 0.2rem; border-radius: 0.25rem;
    font-size: 0.9em;
    /* background-color, border, border-left will be set by theme */
}
.log-data pre {
    margin: 0; white-space: pre-wrap; word-break: break-all;
    /* color will be set by theme */
}

/* Material Symbols base style */
.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-settings-filled {
  font-variation-settings: 'FILL' 1;
}

/* Подсказка под input (ошибка/хинт) — абсолютная, с анимацией */
.input-hint.error {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  z-index: 10;
  background: transparent;
  color: var(--theme-error, #e74c3c);
  font-size: 0.92em;
  padding: 2px 4px 0 0;
  margin-top: 2px;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 0.22s cubic-bezier(0.4,0,0.2,1), transform 0.22s cubic-bezier(0.4,0,0.2,1);
  min-height: 0;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.3;
  filter: brightness(0.95) opacity(0.85);
}
.input-hint.error.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.input-hint.error.static {
  position: static;
  margin-top: 2px;
  padding-left: 0;
  width: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
  font-size: 0.92em;
  color: var(--theme-error, #e74c3c);
  opacity: 0;
  transition: opacity 0.22s cubic-bezier(0.4,0,0.2,1);
  filter: brightness(0.95) opacity(0.85);
}
.input-hint.error.static.visible {
  opacity: 1;
}

/* Больше отступа для подсказки под примерами */
#examples-error.input-hint.error.static {
  margin-top: 8px;
  transition: opacity 0.22s cubic-bezier(0.4,0,0.2,1), margin-top 0.22s cubic-bezier(0.4,0,0.2,1);
}

/* Кнопка 'Сгенерировать примеры' — современный стиль */
#generate-example-button {
  background: linear-gradient(90deg, var(--theme-accent-primary, #ff9800) 80%, var(--theme-accent-secondary, #ffb347) 100%);
  color: var(--theme-button-text-on-accent, #fff);
  font-weight: 700;
  font-size: 1.08em;
  border-radius: 10px;
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10);
  transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 44px;
  margin-top: 18px;
  margin-bottom: 6px;
}
#generate-example-button .material-symbols-rounded {
  font-size: 1.3em;
  vertical-align: -2px;
}
#generate-example-button:hover:not(:disabled) {
  background: linear-gradient(90deg, var(--theme-accent-primary, #ff9800) 90%, #ffd580 100%);
  box-shadow: 0 6px 24px 0 rgba(0,0,0,0.16);
  transform: translateY(-2px) scale(1.04);
}
#generate-example-button:active:not(:disabled) {
  background: color-mix(in srgb, var(--theme-accent-primary, #ff9800) 80%, #000 20%);
  transform: scale(0.98);
}

/* Контейнер input — position: relative для абсолютной подсказки */
.input-hint-parent { position: relative; }

/* Карточка существующего слова — фон, отступы, скролл */
.existing-word-card {
  background: color-mix(in srgb, var(--theme-bg-primary, #222) 85%, #fff 15%);
  border: 1.5px solid var(--theme-border-color, #444);
  border-radius: 12px;
  margin-top: 18px;
  padding: 16px 18px 14px 18px;
  box-shadow: 0 4px 18px 0 rgba(0,0,0,0.10);
  font-size: 1em;
  color: var(--theme-text-primary, #fff);
  animation: fadeIn 0.35s cubic-bezier(0.4,0,0.2,1);
  max-width: 100%;
}
.ewc-title {
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--theme-accent-primary, #ff9800);
  display: flex;
  align-items: center;
  gap: 0.3em;
}
.ewc-title .material-symbols-rounded {
  font-size: 1.1em;
  vertical-align: -2px;
  color: var(--theme-accent-primary, #ff9800);
}
.ewc-main {
  font-size: 1.12em;
  font-weight: 600;
  margin-bottom: 2px;
}
.ewc-alt {
  font-size: 0.97em;
  color: var(--theme-text-secondary, #aaa);
  margin-bottom: 6px;
}
.ewc-examples {
  margin: 0 0 0 12px;
  padding: 0;
  list-style: disc inside;
  max-height: 120px;
  overflow-y: auto;
}
.ewc-examples li {
  margin-bottom: 6px;
  line-height: 1.5;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* --- Демо-эффекты для кнопок --- */
.btn-hover-gradient {
  background: var(--theme-accent-primary, #ff9800);
  transition: background 0.22s, box-shadow 0.22s, transform 0.22s;
}
.btn-hover-gradient:hover:not(:disabled) {
  background: linear-gradient(90deg, var(--theme-accent-primary, #ff9800) 80%, #ffb347 100%);
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.13);
}

.btn-hover-scale {
  transition: transform 0.18s, box-shadow 0.18s;
}
.btn-hover-scale:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 6px 24px 0 rgba(0,0,0,0.16);
}

.btn-hover-bright {
  transition: filter 0.18s, box-shadow 0.18s;
}
.btn-hover-bright:hover:not(:disabled) {
  filter: brightness(1.13);
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.10);
}

.btn-hover-shadow {
  transition: box-shadow 0.22s, filter 0.22s;
}
.btn-hover-shadow:hover:not(:disabled) {
  box-shadow: 0 8px 32px 0 rgba(255,152,0,0.18), 0 2px 10px 0 rgba(0,0,0,0.13);
  filter: brightness(1.07);
}

.btn-hover-border {
  border: 2px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background: var(--theme-accent-primary, #ff9800);
  transition: border 0.22s, background 0.22s, transform 0.22s;
}
.btn-hover-border:hover:not(:disabled) {
  border: 2px solid #ffb347;
  background: linear-gradient(90deg, var(--theme-accent-primary, #ff9800) 80%, #ffb347 100%);
  transform: scale(1.04);
}