/* ===== НАСТАВНИК: РАСКЛАДКА ПО ОБЩЕМУ ОБРАЗЦУ И РАЗГОВОР В ОСНОВНОЙ ОБЛАСТИ (15 сентября 2026) =====
   Образец — «Разметка 2» (assets/studio-layout.css, ai-video.html, chat.html):
     поля у краёв и просветы между столбцами 14px (на телефоне 10px);
     столбцы — панели с рамкой и скруглением 18px, левый столбец 12px внутри;
     высота столбцов — экран минус шапка и два поля; содержимое основной панели 26/28/34px;
     переключатели вверху основной панели — как «🗂 История» на студиях.
   Отличие наставника от образца оставлено нарочно: третий столбец — полка «Ближайшее / За 30 дней».
   Файл идёт ПОСЛЕ coach-skin.css и перекрывает его раскладку; цвета кабинета не меняются.
   На «Тренере» основная панель — разговор: лента прокручивается внутри, строка ввода внизу,
   как в chat.html. Остальное с «Тренера» — во вкладке-переключателе «Сводка дня». */

/* ---------- переключатели «Разговор / Сводка дня» (как .pills на студиях) ---------- */
.cv-pills{ display:flex; gap:8px; padding:14px 16px 0; flex-wrap:wrap; flex:0 0 auto }
.cv-pill{
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--ck-line); background:var(--ck-card2,#f3f6fa);
  border-radius:9px; padding:7px 11px; font:600 13px/1.45 'Manrope',sans-serif; color:var(--ck-ink); cursor:pointer; min-height:0!important;
}
.cv-pill:hover, .cv-pill.on{ border-color:var(--ck-muted) }
.cv-pill.on{ background:var(--ck-card,#fff) }
.cv-pill:focus-visible{ outline:2px solid var(--ck-teal); outline-offset:2px }
.cv-razgovor[hidden], .cv-svodka[hidden]{ display:none!important }

/* ---------- основная панель: одна рамка вместо карточек внутри ---------- */
.view.on{
  background:var(--ck-card,#fff); border:1px solid var(--ck-line); border-radius:18px; min-width:0;
}
.view > .tool-card{ background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; border-radius:0!important; margin:0!important }
.view > .tool-card + .tool-card{ border-top:1px solid var(--ck-line)!important; padding-top:24px!important; margin-top:24px!important }

/* ---------- разговор ---------- */
#view-coach.on{ padding:0!important; display:flex!important; flex-direction:column; overflow:hidden!important }
#view-coach .cv-razgovor{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column }
#view-coach #chatCard{
  flex:1 1 auto; min-height:0!important; margin:0!important; display:flex!important; flex-direction:column; overflow:hidden;
  border:0!important; border-radius:0!important; box-shadow:none!important; background:transparent!important;
}
#view-coach #chatCard .chat-head{ position:static; background:transparent; border-radius:0; padding:10px 20px 12px; border-bottom:1px solid var(--ck-line) }
#view-coach #chatCard .chat-close{ display:none }
.chat-head .bell-wrap{ margin-left:auto }
.chat-head .bell-wrap + .chat-close{ margin-left:0 }
.chat-head .cab-bell{ width:36px; height:36px; border-radius:11px; font-size:16px; margin-left:0 }
.chat-head #cabBellMenu{ top:44px }
/* лента на всю высоту, текст — колонкой до 820px по центру, как в chat.html */
#view-coach #chatCard .chat-msgs{
  flex:1 1 auto; min-height:0!important; max-height:none!important; overflow-y:auto; overscroll-behavior:contain;
  padding:26px max(20px, calc((100% - 820px) / 2)) 10px!important; gap:18px;
}
#view-coach #chatCard .quick{ padding:0 max(20px, calc((100% - 820px) / 2)) 8px!important; background:transparent!important; flex:0 0 auto }
#view-coach #chatCard .composer{
  position:static; flex:0 0 auto; width:calc(100% - 40px); max-width:820px; margin:0 auto 18px!important; box-sizing:border-box;
  border:1px solid var(--ck-line)!important; border-radius:20px!important; background:var(--ck-card2,#f3f6fa)!important;
  box-shadow:0 16px 44px rgba(15,23,42,.10); padding:10px 10px 10px 12px!important;
}
#view-coach #chatCard .composer textarea{ background:transparent!important; border:0!important; padding:10px 6px!important }
#view-coach .cv-svodka{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:22px 28px 34px }

/* ---------- широкий экран: три столбца в высоту экрана ---------- */
@media (min-width:1000px){
  /* высота — всё место между шапкой и нижней полосой сайта (у обеих своя высота, числом не пишем) */
  #app{ height:auto!important; flex:1 1 0!important; min-height:0!important }
  .panel.wrap{ padding:14px!important; gap:14px!important; grid-template-rows:minmax(0,1fr) auto!important; row-gap:8px!important }
  .tabs, .rail{ grid-row:1 / span 2!important }
  /* строка «Тренер не заменяет врача…» обязана быть видна — она под основной панелью */
  .panel.wrap > .disclaimer{ grid-column:2; grid-row:2; margin:0!important; line-height:1.4 }
  .tabs{ padding:12px!important; border-radius:18px!important; box-shadow:none!important; min-height:0!important }
  .rail{ padding-bottom:0!important }
  .view.on:not(#view-coach){ padding:26px 28px 34px!important; overflow-y:auto }
}

/* ---------- телефон и узкие окна: один столбец ---------- */
@media (max-width:999px){
  .panel.wrap{ padding:10px 10px 90px!important }
  .tabs{ margin:0 0 10px!important; border-radius:18px!important; box-shadow:none!important }
  .view.on:not(#view-coach){ padding:16px!important }
  /* разговор — в высоту экрана под шапкой и вкладками; лента листается внутри, полка — ниже прокруткой страницы */
  /* --cr-verh — где начинается разговор на странице; меряет coach-chat-vezde.js (шапка на телефоне бывает в две строки) */
  #view-coach.on{ height:calc(100dvh - var(--cr-verh,180px) - 10px); min-height:420px }
  .cv-pills{ padding:10px 10px 0 }
  #view-coach #chatCard .chat-head{ padding:8px 12px 10px }
  #view-coach #chatCard .chat-msgs{ padding:14px 12px 8px!important; gap:14px }
  #view-coach #chatCard .quick{ padding:0 12px 6px!important }
  #view-coach #chatCard .composer{ width:calc(100% - 20px); margin:0 auto 10px!important; padding:8px 8px 8px 10px!important }
  #view-coach .cv-svodka{ padding:14px }
  .rail{ margin-top:10px!important }
}
/* плашка «Установить приложение» (argeda-app.js) на телефоне висит в 56px от низа и закрыла бы кнопку
   отправки; пока она есть — разговор кончается над ней. Закрыли плашку — она удаляется, место возвращается. */
@media (max-width:600px){
  body:has(> #agInstall) #view-coach.on{ height:calc(100dvh - var(--cr-verh,180px) - 102px) }
}