/* ═══════════════════════════════════════════════════════════════════════════
   redesign.css — новый визуальный слой панели. Подключается ПОСЛЕ panel.css,
   поэтому переопределяет её точечно: базовая вёрстка остаётся рабочей, а всё
   новое собрано в одном файле — удобно смотреть, править и при желании снять
   одной строкой в base.html.

   Разделы:
     1) Токены (радиусы, ритм, тени)
     2) Сайдбар и навигация
     3) Списки: диалоги, таблица клиентов
     4) Чат: шапка, пузыри, композер
     5) Мобилка
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Токены ───────────────────────────────────────────────────────────── */
:root{
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --pad-card:14px;
  --ring:0 0 0 2px var(--accent-soft);
}

/* Плотность и типографика: чуть крупнее строчный интервал, спокойнее заголовки */
body{ -webkit-font-smoothing:antialiased; letter-spacing:.1px }
.page-hdr h2{ font-weight:600; letter-spacing:-.2px }

/* Пока идёт первая отрисовка (html.preload — класс ставится и снимается в base.html),
   никаких переходов и анимаций. Без этого на iOS при переходе между вкладками успевал
   мелькнуть сайдбар: у него transition:transform, и он «выезжал» из своего исходного
   положения вместо того, чтобы сразу быть за краем экрана. */
html.preload *,html.preload *::before,html.preload *::after{
  transition:none!important; animation:none!important;
}

/* Список диалогов и таблица клиентов имели класс fade-in — проявлялись анимацией при
   КАЖДОЙ загрузке страницы. Поверх плавного перехода между страницами это читается как
   «моргнуло»: сначала кросс-фейд страницы, потом ещё раз проявляется её содержимое.
   Переход и так плавный, второе проявление лишнее. */
.fade-in{ animation:none!important }

/* ── 2. Сайдбар ──────────────────────────────────────────────────────────── */
.sidebar{ border-right:1px solid var(--border) }
.nav a{ border-radius:var(--r-md); padding:10px 13px; gap:11px }
.nav a:hover{ transform:none; background:var(--hover) }
.nav a.active{
  background:var(--accent-soft); color:var(--accent);
  box-shadow:none; position:relative;
}
.nav a.active::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:0 3px 3px 0; background:var(--accent);
}
.nav-section{ opacity:.5; letter-spacing:.1em }
.sidebar-foot a,.theme-btn{ border-radius:var(--r-sm); padding:8px 11px }

/* ── 3. Списки ───────────────────────────────────────────────────────────── */
/* Поиск — «пилюля» */
.client-search input,#cliSearch,input[type=search]{
  border-radius:var(--r-pill); border:1px solid var(--border);
  background:var(--input-bg); padding-top:10px; padding-bottom:10px;
}
.client-search input:focus,#cliSearch:focus{ outline:none; box-shadow:var(--ring); border-color:var(--accent) }

/* Диалоги — карточки с акцентной полосой у активного.
   ГАБАРИТЫ: у списка уже есть свой отступ (.client-items{padding:6px}), поэтому боковое
   поле у строки НЕ ставим — иначе строка вдвойне поджимается с боков и выглядит уже и
   мельче, чем была до редизайна. Аватар и внутренние отступы чуть крупнее прежних. */
.ci{
  border-radius:var(--r-md); margin:2px 0; padding:11px 12px; gap:12px;
  border:1px solid transparent; transition:background .15s ease;
}
.ci .av{ width:52px; height:52px; font-size:19px }
.ci .cname{ font-size:15px }
.ci .cprev{ font-size:13px; margin-top:3px }
/* Оценка высоты строки для content-visibility — под новые габариты (иначе скролл прыгает) */
.ci{ contain-intrinsic-size:auto 78px }
.ci:hover{ background:var(--hover) }
.ci.active{ background:var(--accent-soft); border-color:transparent; position:relative }
.ci.active::before{
  content:''; position:absolute; left:0; top:8px; bottom:8px;
  width:2px; border-radius:2px; background:var(--accent);
}
.ci .cname{ font-weight:600 }
.ci .cprev{ opacity:.85 }
.unread{ border-radius:var(--r-pill); font-weight:600 }

/* Фильтры-пилюли (категории, регистрация) */
.btn-sm,.dlg-sort-item,.reg-f{ border-radius:var(--r-pill)!important }

/* Таблица клиентов — строки-карточки, без тяжёлых линий */
.cli-tbl th{
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-sec); font-weight:600; border-bottom:1px solid var(--border);
}
.cli-tbl td{ border-bottom:1px solid var(--border) }
.cli-row{ transition:background .13s ease }
.cli-row:hover{ background:var(--hover) }
.tag{ border-radius:var(--r-pill); font-weight:600; padding:2px 9px }

/* Кнопки и поля — единый радиус */
.btn,.btn-sm,.btn-icon,input,textarea,select{ border-radius:var(--r-sm) }
.btn-primary{ box-shadow:none }
.btn-primary:hover{ transform:none; background:var(--accent-h) }
.modal-box{ border-radius:var(--r-lg) }

/* ── 4. Чат ──────────────────────────────────────────────────────────────── */
.chat-hdr{ padding:11px 16px; gap:11px; border-bottom:1px solid var(--border) }
.chat-hdr .cname{ font-weight:600; letter-spacing:-.1px }

/* Чипы статуса в шапке (запись, ждёт подтверждения, заблокировал бота) */
.chat-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:5px }
.chat-chip{
  font-size:11px; font-weight:600; padding:2px 9px; border-radius:var(--r-pill);
  background:var(--hover); color:var(--text-sec); white-space:nowrap;
}
.chat-chip.ok{ background:var(--accent-soft); color:var(--accent) }
.chat-chip.gold{ background:var(--gold-soft); color:var(--gold) }

/* Отложенное, которое не удалось отправить: видно с первого взгляда, что оно не ушло. */
.sched-row.sched-failed{ background:rgba(240,112,127,.08); border-radius:var(--r-sm) }
.sched-err{ color:var(--red)!important }

/* Ссылки внутри сообщений. Админы присылают клиентам ссылки на оплату и просили,
   чтобы по ним можно было нажать прямо из панели. Подчёркиваем и красим: во входящих —
   акцентом, в исходящих (тёмный пузырь) — светлым, иначе акцент на нём не читается. */
.msg .mtext .mlink{ color:var(--accent); text-decoration:underline; text-underline-offset:2px }
.msg .mtext .mlink:hover{ opacity:.8 }
.msg-wrap.out .msg .mtext .mlink{ color:#ffe7d8 }

/* Пузыри: мягче углы, «хвост» только у крайнего в группе */
.msg{ border-radius:var(--r-md); box-shadow:none; border:1px solid var(--bubble-in-border) }
.msg-wrap.out .msg{ border-color:transparent }
.msgs{ gap:5px }

/* Композер */
.chat-compose{ border-top:1px solid var(--border); padding:10px 14px }
.chat-compose textarea,#rtxt{
  border-radius:var(--r-lg); border:1px solid var(--border); background:var(--input-bg);
}
.chat-compose textarea:focus,#rtxt:focus{ outline:none; box-shadow:var(--ring); border-color:var(--accent) }
.btn-send{ border-radius:50%; box-shadow:none }
.btn-send:hover{ transform:none; background:var(--accent-h) }

/* Быстрые ответы теперь сворачиваются и на десктопе: раньше ручка показывалась только
   на телефоне (#quickToggle{display:none}), и панель на широком экране висела всегда. */
#quickToggle{
  display:flex!important; align-items:center; justify-content:center; width:100%; height:20px;
  border:none; background:var(--card); color:var(--text-sec); cursor:pointer; padding:0;
  -webkit-tap-highlight-color:transparent;
}
#quickToggle:hover{ color:var(--text) }
#quickToggle i{ font-size:18px; line-height:1; transition:transform .2s }
#quickWrap.collapsed #quickTemplates{ display:none!important }
#quickWrap.collapsed #quickToggle i{ transform:rotate(180deg) }

/* Строка чипов держит постоянную высоту: данные о записи приходят из YClients с задержкой,
   и без этого шапка «подрастала» при их появлении, а переписка уезжала вверх. */
.chat-chips{ min-height:19px; height:19px; flex-wrap:nowrap; overflow:hidden; align-items:center }
/* На телефоне строка чипов узкая: «ждёт подтверждения» текстом не помещается и
   обрезалось. Оставляем только значок — цвет тот же, смысл читается, место экономится.
   Полный текст доступен долгим нажатием (атрибут title). */
@media (max-width:768px){
  .chat-chip .chip-t{ display:none }
  .chat-chip.wait{ padding:2px 7px }
}
.chat-chip.book{ background:rgba(92,192,138,.16); color:var(--green) }
.chat-chip.none{ background:rgba(240,112,127,.14); color:var(--red) }

/* ── 4b. Карточка клиента: колонка справа / выезжающая панель ─────────────── */
.client-pane{
  display:none; flex-direction:column; gap:12px; flex-shrink:0;
  width:300px; padding:16px 14px; overflow-y:auto;
  background:var(--card); border-left:1px solid var(--border);
}
/* Показываем колонку только когда чат открыт и экран достаточно широкий */
@media (min-width:1180px){
  /* колонку можно закрыть тапом по имени в шапке — тогда body получает card-hidden */
  body.has-chat:not(.card-hidden) .client-pane{ display:flex }
}
.cp-close{ display:none }
.cp-head{ text-align:center; padding-bottom:12px; border-bottom:1px solid var(--border) }
.cp-av{
  width:64px; height:64px; border-radius:50%; margin:0 auto 9px; font-size:22px; font-weight:600;
  display:flex; align-items:center; justify-content:center; color:#fff; overflow:hidden; position:relative;
}
.cp-name{ font-size:15px; font-weight:600; color:var(--text); word-break:break-word }
.cp-sub{ font-size:12px; color:var(--text-sec); margin-top:3px }
.cp-phone{
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text);
  background:var(--bg); border-radius:var(--r-md); padding:9px 11px;
}
.cp-phone i{ color:var(--text-sec); font-size:15px; flex-shrink:0 }
.cp-phone #ccPhone{ flex:1; min-width:0; word-break:break-all }
.cp-copy{
  flex-shrink:0; border:none; background:none; cursor:pointer; color:var(--text-sec);
  padding:4px 6px; border-radius:6px; font-size:15px; line-height:1;
}
.cp-copy:hover{ background:var(--hover); color:var(--accent) }
.cp-copy.ok{ color:var(--green) }
.cp-overlay{
  display:none; position:fixed; inset:0; background:var(--overlay); z-index:180;
}

/* Узкий экран и телефон: панель выезжает справа поверх чата */
@media (max-width:1179px){
  .client-pane{
    position:fixed; top:0; right:0; bottom:0; z-index:190;
    width:min(360px,88vw); display:flex; border-left:1px solid var(--border);
    transform:translateX(102%); transition:transform .22s ease; box-shadow:var(--shadow-lg);
    padding-top:calc(16px + env(safe-area-inset-top));
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
  .client-pane.open{ transform:none }
  .cp-overlay.open{ display:block }
  .cp-close{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:10px; right:10px; width:32px; height:32px;
    border:none; background:var(--hover); color:var(--text-sec); border-radius:50%;
    font-size:17px; cursor:pointer;
  }
}

/* Блоки карточки клиента: заголовок с иконкой + содержимое (как в референсе) */
/* В panel.css у #ccStats сетка в две колонки (для старых плиток) — из-за неё новые
   карточки вставали рядом и текст ломался на «4 00 0 ₽». Теперь блоки идут строками. */
#ccStats{ display:block!important }
.cp-card{ background:var(--bg); border-radius:var(--r-md); padding:11px 12px }
/* Скелетон на время загрузки: держит ту же высоту, что и готовый блок, поэтому
   ничего не подпрыгивает и кнопка «Сохранить заметку» не мелькает. */
.cp-skel{ position:relative; overflow:hidden; opacity:.5 }
.cp-skel::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,var(--hover),transparent);
  transform:translateX(-100%); animation:cpSkel 1.1s infinite;
}
@keyframes cpSkel{ to{ transform:translateX(100%) } }
@media (prefers-reduced-motion:reduce){ .cp-skel::after{ animation:none } }
.cp-card + .cp-card{ margin-top:10px }
.cp-card-h{
  display:flex; align-items:center; gap:7px; margin-bottom:9px;
  font-size:12px; font-weight:600; color:var(--gold);
}
.cp-card-h i{ font-size:15px }
.cp-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:3px 0 }
.cp-row .l{ font-size:12px; color:var(--text-sec) }
.cp-row .v{ font-size:13px; color:var(--text); font-weight:600; text-align:right; word-break:break-word }
.cp-badges{ display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin-top:8px }
.cp-badge{ font-size:11px; font-weight:600; padding:2px 9px; border-radius:var(--r-pill); color:#fff }
.cp-badge.vip{ background:var(--gold-soft); color:var(--gold) }
/* Ближайшая запись — как отдельная строка со статусом */
.cp-book{ display:flex; align-items:center; gap:9px }
.cp-book-ico{
  width:30px; height:30px; border-radius:9px; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; background:rgba(92,192,138,.16); color:var(--green); font-size:15px;
}
.cp-book-when{ font-size:13px; font-weight:600; color:var(--text) }
.cp-book-who{ font-size:11px; color:var(--text-sec); margin-top:1px }
.cp-book-none{ font-size:12px; color:var(--red) }
/* Бейдж статуса записи. Три тона на четыре статуса YClients:
   ok — подтверждена / пришёл, wait — ждёт подтверждения / не отмечен, miss — не пришёл. */
.cp-status{
  display:inline-block; font-size:11px; font-weight:600; padding:2px 8px;
  border-radius:var(--r-pill); white-space:nowrap; flex-shrink:0;
}
.cp-status.ok{ background:rgba(92,192,138,.16); color:var(--green) }
.cp-status.wait{ background:rgba(224,164,74,.16); color:var(--orange) }
.cp-status.miss{ background:rgba(240,112,127,.14); color:var(--red) }
.cp-visit .cp-status{ margin-top:7px }
.chat-chip.wait{ background:rgba(224,164,74,.16); color:var(--orange) }

/* Вкладка «Визиты»: последние посещения из YClients */
.cp-visit{ background:var(--bg); border-radius:var(--r-md); padding:10px 12px }
.cp-visit + .cp-visit{ margin-top:8px }
.cp-visit-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px }
.cp-visit-date{ font-size:13px; font-weight:600; color:var(--text) }
.cp-visit-cost{ font-size:12.5px; font-weight:600; color:var(--gold); white-space:nowrap }
.cp-visit-srv{ font-size:12px; color:var(--text-sec); margin-top:4px; line-height:1.45 }
.cp-visit-who{ font-size:11px; color:var(--text-sec); margin-top:5px; display:flex; align-items:center; gap:5px }
/* Комментарий администратора к записи — у очереди/листа ожидания это главное содержание */
.cp-visit-note{
  display:flex; align-items:flex-start; gap:5px; margin-top:6px; padding-top:6px;
  border-top:1px solid var(--border); font-size:12px; color:var(--text); line-height:1.45;
}
.cp-visit-note i{ color:var(--text-sec); margin-top:2px; flex-shrink:0 }
.cp-visit.queue .cp-status{ margin-top:0 }
/* Очередь / лист ожидания — визуально отделены от настоящих визитов */
.cp-queue-h{
  display:flex; align-items:center; gap:6px; margin:14px 0 2px;
  font-size:12px; font-weight:600; color:var(--text-sec);
}
.cp-queue-h i{ font-size:14px }
.cp-queue-note{ font-size:11px; color:var(--text-sec); opacity:.75; margin-bottom:8px }
.cp-visit.queue{ background:transparent; border:1px dashed var(--border) }
.cp-visit.queue .cp-visit-date{ font-weight:500; color:var(--text-sec) }

/* Три вкладки в узкой колонке — не даём заголовкам ломаться */
.cc-tabs .cc-tab{ flex:1; text-align:center; white-space:nowrap; font-size:12.5px; padding:7px 4px }

.cp-actions{ display:flex; flex-direction:column; gap:6px }
.cp-act{
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--r-sm);
  background:var(--card); color:var(--text); font-size:12.5px; text-decoration:none;
  border:1px solid var(--border); cursor:pointer; width:100%; text-align:left;
}
.cp-act:hover{ background:var(--hover); border-color:var(--accent) }
.cp-act i{ font-size:15px; color:var(--gold); flex-shrink:0 }

/* ── 5. Мобилка ──────────────────────────────────────────────────────────── */
/* Про мигание на iOS: причиной оказался НЕ скроллер, а наш сценарий открытия чата
   на месте (гасили opacity → чистили innerHTML → скелетон с fade → пересобирали всё).
   Диагностика показала, что серверная страница чата чистая, а вложенный скроллер сам
   по себе не мигает. Поэтому лечение — открывать диалог настоящим переходом (см. openChat),
   а раскладку оставляем ИСХОДНУЮ: шапка и композер держатся флексом и не двигаются.
   От root-scroll со sticky отказались: sticky пересчитывается после установки позиции
   прокрутки, из-за чего шапка и поле ввода заметно «вздрагивали» при заходе в диалог. */
@media (max-width:768px){
  /* В panel.css глобально html{scroll-behavior:smooth} — из-за него любой программный
     переход в конец диалога анимируется. На телефоне это лишнее. */
  html{ scroll-behavior:auto!important }

  /* никаких fade/анимаций на переписке — они дают лишний «пустой» кадр */
  .msgs.chat-fade-in{ animation:none!important }
  .msgs .msg-media img,.msgs .msg-media video{ opacity:1!important; transition:none!important }

  /* тап-зоны крупнее */
  .ci{ padding:12px 12px; margin:3px 6px }
  .mob-bar a{ padding:7px 0 }
  .btn-sm{ padding:7px 12px }
}