app/styles.css

/* Основной фон */
/*.gradio-container {
    background-color: #fef3c7;
} */

/* Заголовок */
 .main-title h2 {
  text-align: left;
  font-size: 2rem;
  margin: 0; /* Убираем отступы вокруг заголовка */
  /*color: #003366;*/
  margin-bottom: -5px !important; /* Убираем отступ снизу заголовка */
  padding: 0;
}


/* Цитата */
.quote-block {
  text-align: left;
  /*font-style: italic;*/
  padding: 0;
  margin: -1px 0 0 0; /* верхний небольшой отступ, снизу чуть больше */
  /*max-width: 30em;*/ /* ограничиваем ширину, чтобы не тянулась на всю строку */
  line-height: 1.4em;
}



/* optionally allow horizontal scroll on overflow */
.right-col .markdown {
  overflow-x: auto;
}

/* класс .small-btn делает ширину кнопки по её содержимому */
.small-btn {
  width: auto !important;
  max-width: 200px;
  margin-top: 1em;       /* <-- вот эта строка приподнимет кнопку */
  margin-bottom: 0;      /* убедимся, что нет лишнего снизу */
  align-self: flex-start; /* если родитель — flex, то кнопка не будет растягиваться */
}


/* 2) «Выцепляем» кнопку и ставим её по середине этого контейнера */
#show-method-btn {
  position: absolute !important;
  top: 33% !important;              /* по середине высоты #plan-output */
  transform: translateY(-50%) !important;
  left: 1em !important;              /* сдвиг от левой границы блока */
  margin: 0 !important;              /* сброс всех внешних отступов */
}


/* таблица выбора методологии */
#methodology-table {
  position: absolute !important;
  top: calc(30% + 2em) !important; /* смещение на высоту кнопки + отступ */
  transform: none !important;
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}

/* Все ячейки — НЕ разрываем слова */
#methodology-table th,
#methodology-table td {
  border: 1px solid #ccc;
  padding: 0.5em;
  white-space: normal;
  word-break: keep-all;
  hyphens: none;
}

/* Только последний столбец — разрешить переносы */
#methodology-table td:last-child,
#methodology-table th:last-child {
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}


/* Стилизуем заголовок аккордеона (самую "кнопку")  */
.feedback-button {
    font-weight: bold;
    text-align: center;
    background-color: #f1f1f1;
    padding: 12px 18px;
    border-radius: 10px;
    margin-top: 12px;
}

.feedback-confirmation {
    display: block !important;
    margin-top: 10px;
    color: green;
}




/* =====================================================
   1. Правая колонка (.right-col) — авто‑высота по контенту
   ===================================================== */
.right-col {
  /* Отменяем прежний min-height:100vh, чтобы не было «пустого» пространства */
  min-height: auto !important;    /* ﹘ auto позволяет высоте подстраиваться под содержимое */ /* :contentReference[oaicite:0]{index=0} */
  height: auto !important;        /* ﹘ высота равна сумме высот детей */              /* :contentReference[oaicite:1]{index=1} */
  overflow-y: visible !important; /* ﹘ никакого скролла на контейнере */               /* :contentReference[oaicite:2]{index=2} */
}

/* =====================================================
   2. Блок вывода плана (#plan-output)
   ===================================================== */
#plan-output {
  position: relative !important;
  /* До генерации: жёсткая высота 1800px, без скролла */
  height: 1800px !important;      /* ﹘ фикс‑высота до 1800px */
  max-height: none !important;    /* ﹘ отключаем прежний max-height */
  overflow-y: visible !important; /* ﹘ содержимое льётся наружу контейнера, но .right-col не скроллится */
 /* white-space: pre-wrap;          /* ﹘ сохраняем переносы строк из Markdown */
  margin-bottom: 20px;            /* ﹘ отступ до кнопок */

  /* Плавный переход высоты при смене на auto */
  transition: height 0.25s ease;  /* ﹘ плавное изменение height */
}

/* =====================================================

/* Фиксирует панель с кнопками внизу правой колонки */
.output-panel {
    position: relative;
    min-height: 80vh;
}

.feedback-button {
    position: sticky;
    bottom: 20px;
    margin-top: auto; /* Прижимает к низу */
}

.gradio-container {
    overflow: visible !important;
}


.header-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
}
.header-table th, .header-table td {
  border: 1px solid #ccc;
  padding: 0.5em;
  text-align: left;
}
.header-table th {
  background-color: #f6f8fa;
  width: 20%;
}

.lesson-metadata strong,
.materials-list strong {
  color: #2a2a2a;
}



.header-table {
  /* width: 100%; */
  border-collapse: collapse;
  margin-bottom: 1em;
  table-layout: auto;
  font-size: 0.85em;
}
.header-table td {
  border: 1px solid #ccc;
  padding: 0.5em;
  vertical-align: top;
}
.cell-label {
  display: block;
  font-size: 0.75em !important;
  color: #555;
  margin-bottom: 0.2em;
}
.cell-value {
  display: block;
  font-size: 1em !important;
}
</style>