/* =========================================================================
   MONARQUE LADY — хаб участницы. Стили экрана ?showcase=studio.
   Источник истины: CONCEPT.md §1.5 (вкладки по сайтам, карточка 9:16,
   правый сайдбар с диалогами), §1.5.3 (только диалоги выбранного сайта,
   новые сверху), §1.4 (действие: включает/выключает показ карточки).

   Правила и ограничения:
   • Цвета берутся из токенов темы (sites.css §14), чтобы Студия жила
     в палитре своего сайта и не ломала контраст. Жёстких hex минимум:
     только там, где нужен цвет статуса (новый / ответили / отклонён).
   • Hover меняет ТОЛЬКО цвет и тень. Никаких transform/translate/scale
     и сдвигов — правило владельца.
   • Сетка «контент + сайдбар»; на узких экранах сайдбар уходит вниз.
   • Карточка 9:16 — общий компонент (.mnq-card из cards.css), здесь только
     рамка-контейнер, чтобы не дублировать размеры компонента.
   ========================================================================= */

/* ---------------------------------------------------------------- шапка --- */
.studio-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.studio-head h1 {
  margin: .2rem 0 .3rem;
  font-family: var(--site-serif, var(--font-display));
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1.15;
  color: var(--ink);
}
.studio-head__sub {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--muted);
}
.studio-head__actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* --------------------------------------------------- сетка кабинет+сайдбар --- */
.studio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 1.25rem;
  align-items: start;
}
.studio-main { min-width: 0; }
.studio-aside { min-width: 0; }

/* ---------------------------------------------------------------- вкладки --- */
.studio-tabs {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  padding: .35rem;
  margin-bottom: .9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.studio-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .85rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  /* hover — только цвет, без движения */
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.studio-tab:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--site-acc, var(--acc)) 8%, transparent);
}
.studio-tab.is-active {
  color: var(--site-on-accent, #111);
  background: var(--site-acc, var(--acc));
  border-color: var(--site-acc, var(--acc));
}
.studio-tab:focus-visible {
  outline: 2px solid var(--site-acc, var(--acc));
  outline-offset: 2px;
}
.studio-tab__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}
.studio-tab__dot.is-on { opacity: 1; }
.studio-tab__dot.is-off { opacity: .25; }

/* Счётчик диалогов: показывает, что на вкладке есть запросы */
.studio-tab__count {
  min-width: 1.1rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--site-acc, var(--acc)) 22%, transparent);
  color: inherit;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}
.studio-tab.is-active .studio-tab__count {
  background: color-mix(in srgb, var(--site-on-accent, #111) 20%, transparent);
}

/* ------------------------------------------------------- панель вкладки --- */
.studio-panel[hidden] { display: none; }

.studio-panel__head {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem;
  margin-bottom: .9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  flex-wrap: wrap;
}
.studio-panel__info {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  min-width: 0;
}
.studio-panel__site {
  font-size: .95rem;
  font-weight: 800;
  color: var(--ink);
}
.studio-panel__status {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.studio-panel__status.is-on { color: var(--site-acc, var(--acc)); }
.studio-panel__status.is-off { color: var(--muted); }
.studio-panel__counters {
  margin: .1rem 0 0;
  font-size: .74rem;
  color: var(--muted);
}

/* --------------------------------------------------- круглая миниатюра ---
   Владелец: миниатюра КРУГЛАЯ, не квадратная. Кольцо рисуем псевдоэлементом,
   чтобы оно не влияло на раскладку. */
.studio-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--site-acc, var(--acc)) 14%, var(--surface));
}
.studio-thumb__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.studio-thumb__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--site-acc, var(--acc));
  pointer-events: none;
}
/* Скрытый показ — приглушаем, но миниатюру оставляем читаемой */
.studio-thumb.is-off .studio-thumb__media { opacity: .45; }
.studio-thumb.is-off .studio-thumb__ring {
  border-color: var(--line-strong, var(--line));
  border-style: dashed;
}
.studio-thumb__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: .1rem 0;
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  color: var(--site-on-accent, #111);
  background: color-mix(in srgb, var(--site-acc, var(--acc)) 88%, transparent);
}

/* -------------------------------------------------- переключатель показа --- */
.studio-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .3rem;
  padding: .35rem .6rem .35rem .4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.studio-toggle:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--site-acc, var(--acc)) 55%, var(--line));
}
.studio-toggle__track {
  position: relative;
  display: block;
  width: 30px;
  height: 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  transition: background-color .18s ease;
}
.studio-toggle__dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  transition: left .18s ease;
}
/* Позиция точки — состояние, а не hover, поэтому движение допустимо */
.studio-toggle.is-on .studio-toggle__track {
  background: var(--site-acc, var(--acc));
}
.studio-toggle.is-on .studio-toggle__dot { left: 16px; }
.studio-toggle.is-on { color: var(--ink); }

/* -------------------------------------------------------- карточка 9:16 ---
   Саму карточку рисует общий компонент (.mnq-card, cards.css). Здесь только
   ограничиваем ширину колонки, чтобы пропорция 9:16 держалась. */
.studio-panel__card {
  display: flex;
  justify-content: center;
}
.studio-panel__card .mnq-card {
  width: min(100%, 340px);
  max-width: 340px;
}

/* --------------------------------------------------------- правый сайдбар --- */
.studio-side-wrap[hidden] { display: none; }

.studio-side {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
}
.studio-side__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .8rem .9rem;
  border-bottom: 1px solid var(--line);
}
.studio-side__title {
  margin: 0;
  font-size: .95rem;
  font-weight: 800;
  color: var(--ink);
}
.studio-side__site {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--site-acc, var(--acc));
}
.studio-side__body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .7rem;
  max-height: 640px;
  overflow-y: auto;
}
.studio-side__note {
  margin: 0;
  padding: .65rem .9rem .8rem;
  border-top: 1px solid var(--line);
  font-size: .68rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ------------------------------------------------------- плашка диалога --- */
.sd-card {
  padding: .7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2, color-mix(in srgb, var(--site-acc, var(--acc)) 5%, transparent));
  transition: border-color .18s ease, box-shadow .18s ease;
}
/* hover — только цвет и тень, позиция не меняется */
.sd-card:hover {
  border-color: color-mix(in srgb, var(--site-acc, var(--acc)) 50%, var(--line));
  box-shadow: 0 6px 18px -14px rgba(0, 0, 0, .55);
}
/* Новый запрос — акцентная левая грань, без движения */
.sd-card.is-new {
  border-inline-start: 3px solid var(--site-acc, var(--acc));
}
.sd-card.is-accepted { border-inline-start: 3px solid #2f8f6b; }
.sd-card.is-declined { border-inline-start: 3px solid var(--line-strong, var(--line)); opacity: .8; }

.sd-card__top {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}
.sd-card__avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--site-acc, var(--acc)) 18%, transparent);
}
.sd-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sd-card__avatar-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: .8rem;
  font-weight: 800;
  color: var(--site-acc, var(--acc));
}
.sd-card__head {
  min-width: 0;
  flex: 1 1 auto;
}
.sd-card__title {
  display: block;
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-card__meta {
  display: block;
  margin-top: .1rem;
  font-size: .7rem;
  color: var(--muted);
}
/* Статус: компактная плашка, цвет по смыслу */
.sd-card__status {
  flex: 0 0 auto;
  padding: .1rem .4rem;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--muted);
}
.sd-card.is-new .sd-card__status {
  background: color-mix(in srgb, var(--site-acc, var(--acc)) 22%, transparent);
  color: var(--ink);
}
.sd-card.is-accepted .sd-card__status {
  background: rgba(47, 143, 107, .16);
  color: #1f6b4f;
}
/* На тёмных сайтах зелёный статус должен светлеть, иначе проваливается */
html[data-showcase="studio"] .sd-card.is-accepted .sd-card__status {
  color: #7fd3b2;
  background: rgba(47, 143, 107, .2);
}

.sd-card__msg {
  margin: .45rem 0 0;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--ink-2, var(--muted));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sd-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .5rem;
}
.sd-card__date {
  font-size: .68rem;
  color: var(--muted);
}
.sd-card__open {
  padding: .3rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.sd-card__open:hover {
  color: var(--site-on-accent, #111);
  background: var(--site-acc, var(--acc));
  border-color: var(--site-acc, var(--acc));
}

/* ---------------------------------------------- пустое состояние и сироты --- */
.sd-empty {
  padding: 1rem .9rem;
  border: 1px dashed var(--line);
  border-radius: 12px;
  text-align: center;
  color: var(--muted);
}
.sd-empty b {
  display: block;
  margin-bottom: .25rem;
  font-size: .84rem;
  color: var(--ink);
}
.sd-empty p {
  margin: 0 0 .6rem;
  font-size: .74rem;
  line-height: 1.5;
}
.sd-orphan {
  padding: .7rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.sd-orphan__label {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------------- адаптив --- */
/* Планшет: сайдбар уходит под контент */
@media (max-width: 1080px) {
  .studio-layout { grid-template-columns: minmax(0, 1fr); }
  .studio-aside { order: 2; }
  .studio-main { order: 1; }
  .studio-side__body { max-height: none; }
}

@media (max-width: 720px) {
  .studio-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .studio-head__actions { width: 100%; }
  .studio-head__actions .btn { flex: 1 1 auto; }

  /* Вкладки — горизонтальная прокрутка, чтобы шесть названий влезли */
  .studio-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .studio-tabs::-webkit-scrollbar { display: none; }
  .studio-tab { flex: 0 0 auto; }

  .studio-panel__head { gap: .7rem; }
  .studio-thumb { width: 56px; height: 56px; }
  .studio-panel__card .mnq-card { width: 100%; max-width: none; }
}

@media (max-width: 420px) {
  .studio-thumb { width: 48px; height: 48px; }
  .studio-tab { padding: .45rem .65rem; font-size: .76rem; }
  .sd-card__status { display: none; }
}

/* -------------------------------------------------- статус карты в шапке --- */
/* Плашка тарифа участницы (user.card_label из /api/my-cards):
   «ПОДПИСКА ELITE» — как карта Резидента на его стороне. */
.studio-head__tier {
  display: inline-block;
  padding: .06rem .4rem;
  border: 1px solid color-mix(in srgb, var(--site-acc, var(--acc)) 55%, transparent);
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--site-acc, var(--acc));
  vertical-align: middle;
}