body { -webkit-font-smoothing: antialiased; }
pre { white-space: pre-wrap; word-break: break-word; }
.tabs-container { overflow-x: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; display: flex; }
.tab-panel { scroll-snap-align: start; min-width: 100%; }

/* Нижняя панель препаратов: показываем 2 строки всегда полностью */
.drug-tabs { padding: 8px 16px; border-bottom: 1px solid #e5e7eb; background:#fff; }
.drug-buttons { display:flex; flex-wrap:wrap; gap:8px; max-height:none; overflow:visible; }
.drug-tab { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; background:#eef; cursor:pointer; transition:background .2s; flex:1 1 calc(50% - 8px); }
.drug-tab.active { background:#4F46E5; color:#fff; }

@media (min-width: 640px){ .drug-tab{ flex:1 1 calc(33.333% - 8px);} }
@media (min-width: 768px){ .drug-tab{ flex:1 1 calc(25% - 8px);} }
@media (min-width: 1024px){ .drug-tab{ flex:0 0 calc(20% - 8px);} }

.drug-more { background:#f3f4f6; flex:0 0 auto; }

.tab-panel[data-tab="schedule"] { background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); /*padding-top: 4px !important;*/ }
.tab-panel[data-tab="schedule"] .card { background: transparent; box-shadow: none; border: none; }

.glass-strong { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 0; margin-left: 0 !important; margin-right: 0 !important; }
.glass-strong:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(31, 38, 135, 0.5); }
.morph-icon { width: 60px; height: 60px; border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; animation: morph 8s ease-in-out infinite; position: relative; overflow: hidden; }
@keyframes morph { 0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: rotate(0deg); } 25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; transform: rotate(90deg); } 50% { border-radius: 45% 55% 62% 38% / 53% 51% 49% 47%; transform: rotate(180deg); } 75% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; transform: rotate(270deg); } }
.morning-blob, .day-blob, .evening-blob { margin-left: 0 !important; margin-right: 0 !important; }
.morning-blob { background: linear-gradient(45deg, #ff9a9e, #fecfef, #fecfef, #ff9a9e); background-size: 400% 400%; animation: morph 8s ease-in-out infinite, gradientShift 4s ease-in-out infinite; }
day-blob { background: linear-gradient(45deg, #a8edea, #fed6e3, #a8edea, #fed6e3); background-size: 400% 400%; animation: morph 8s ease-in-out infinite, gradientShift 4s ease-in-out infinite; }
.evening-blob { background: linear-gradient(45deg, #d299c2, #fef9d7, #d299c2, #fef9d7); background-size: 400% 400%; animation: morph 8s ease-in-out infinite, gradientShift 4s ease-in-out infinite; }
@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.emoji-icon { font-size: 28px; display: inline-block; animation: bounce 2s ease-in-out infinite; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } 60% { transform: translateY(-3px); } }

/* «стеклянный блок» внутри расписания, который группирует препараты по типу/времени.
   в него кладётся заголовок (До еды, Во время еды, После еды, Независимо от еды) и список препаратов. */
.drug-group { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px; padding: 4px 0px; margin-bottom: 4px; }
.drug-simple-list { padding: 0; margin: 0; }
.drug-simple-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; color: white; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.drug-simple-item:last-child { border-bottom: none; }
.pill-simple { width: 20px; height: 20px; background: linear-gradient(45deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1)); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: pillSpin 3s linear infinite; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.2); }
@keyframes pillSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.time-badge { background: linear-gradient(45deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); color: white; font-weight: 600; font-size: 0.7rem; padding: 2px 8px; border-radius: 12px; white-space: nowrap; flex-shrink: 0; }
.floating { 
  animation: float 6s ease-in-out infinite; 
  margin-top: 16px;
}
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
.collapse-title:hover { background: rgba(255, 255, 255, 0.05); }

.text-success, .success-message { color: #fff3e0 !important; background: rgba(255, 243, 224, 0.15) !important; border: 1px solid rgba(255, 243, 224, 0.25) !important; }
.generate-schedule-btn, .text-success { font-size: 1.1rem !important; font-weight: 700 !important; padding: 16px 24px !important; letter-spacing: 0.025em; margin-bottom: -8px !important; }
.generate-schedule-btn { color: white !important; text-shadow: 0 1px 2px rgba(0,0,0,0.2); background: #7c3aed !important; }

.status-text {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #000000 !important;
  margin-top: 4px !important;
  margin-bottom: 10px !important;
}

.text-warning, .text-error {
  font-weight: 700 !important;
  margin: 4px auto 10px auto !important;
  max-width: 80% !important;
  display: block !important;
}

.drug-item { color: rgba(0, 0, 0, 0.9) !important; }

.centered-hint {
  text-align: center !important;
  font-weight: 600 !important;
  margin: 16px auto !important;
  max-width: 80% !important;
  display: block !important;
}
.drug-main { color: rgba(0, 0, 0, 0.9) !important; font-weight: 700; }
.drug-timing { color: rgba(0, 0, 0, 0.65) !important; background: rgba(0, 0, 0, 0.1) !important; }
.group-title { color: rgba(0, 0, 0, 0.85) !important; }

@media (max-width: 768px) { .morph-icon { width: 50px; height: 50px; } .emoji-icon { font-size: 24px; } .glass-strong { border-radius: 16px; margin: 8px 0; } .drug-group { padding: 4px 3px !important; margin: 7px 0 !important; border-radius: 12px; } }

.dropdown-header {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 12px 16px;
  margin: 0;
  position: relative;
}

.dropdown-header:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
/*
.info-panel-content {
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  overflow: hidden;
  max-height: 1000px;
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}

.info-panel-content.collapsed {
  max-height: 0;
  padding: 0;
  margin: 0;
} */

/* Базовое: панель открыта, тянется по контенту */
.info-panel-content {
  /*padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));*/
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  /* НЕТ overflow и max-height здесь */
}

/* Закрытое состояние (дропдаун свернут) */
.info-panel-content.collapsed {
  overflow: hidden;
  max-height: 0;
  padding: 0;
  margin: 0;
}

.dropdown-header:active {
  opacity: 0.8;
}

#drug-tabs {
  flex-shrink: 0;
}

/* ===== FLEXBOX LAYOUT (автоматическая высота) ===== */
/* Главный контейнер приложения */
.APP {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}

/* Фиксированные элементы сверху */
.topbar {
  flex-shrink: 0;
}

#drug-tabs {
  flex-shrink: 0;
}

/* Основной контейнер - растягивается на все доступное пространство */
main {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Fix for vertical scroll on info and schedule tabs */
main .WRAP {
  height: 100%;
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* Контейнер панелей - занимает все доступное пространство в main */
.panels-container {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Ensure tab-panel has proper flex properties */
.tab-panel.active {
  flex: 1;
  min-height: 0;
}

/* Панели вкладок - чистый Flexbox с правильным скроллом */
.tab-panel {
  display: none;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 16px;
  min-height: 400px;
}

.tab-panel.active {
  display: flex;
  flex-direction: column;
}

/* Минимальная высота для панели расписания при отсутствии расписания */
.tab-panel[data-tab="schedule"] .card {
  min-height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.tab-panel[data-tab="schedule"] .card-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 300px;
}

.schedule-period-content {
  padding-top: 2px;     /* между заголовком «День» и первой группой */
  padding-bottom: 4px;  /* между последней группой и низом плашки */
}

/* Нижняя навигация - часть flex-потока */
.btm-nav {
  flex-shrink: 0;
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100%;
  max-width: var(--APP_MAX);
  margin-left: auto;
  margin-right: auto;
  padding-top: 0px;
  padding-bottom: max(env(safe-area-inset-bottom), 3px);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

#schedule-loader {
  /* НЕ трогаем display здесь */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 16px;
  margin-bottom: 20px;
  text-align: center;
}


#schedule-loader .loader {
  width: 120px;
  height: 120px;
  margin: 0 auto 8px auto;    /* спиннер по центру */
}

/* ===== UI TWEAKS: Уменьшенные отступы между плашками ввода ===== */
/* Переопределяем margin-bottom для .input-glass-panel в разделе Ввод */
.tab-panel[data-tab="input"] .input-glass-panel {
  margin-bottom: 10px !important;
}

.tab-panel[data-tab="input"] .input-glass-panel:last-child {
  margin-bottom: 0 !important;
}

/* На мобильных ещё меньше */
@media (max-width: 768px) {
  .tab-panel[data-tab="input"] .input-glass-panel {
    margin-bottom: 8px !important;
  }
}