/* Окно консьержа в стиле превью (hellopepti-дизайн, палитра v2 — 16.10.2026).
   Подключается после sl-concierge.css и только переопределяет внешний вид:
   разметка, поведение и тексты виджета не меняются. Токены — из sl-pepti.css
   (html.pal-v2); на страницах без него — запасные значения ниже. */
:root {
  --cc-accent: var(--accent, #eaa830);
  --cc-accent-soft: var(--accent-soft, #fcebc4);
  --cc-ink: var(--ink, #14322b);
  --cc-night: var(--night, #0b0b0c);
  --cc-mist: var(--mist, #fdf8ec);
  --cc-mist-2: var(--mist-2, #f9ecc9);
  --cc-dark: var(--dark, #101828);
  --cc-font: var(--font-body, 'Inter', system-ui, sans-serif);
  --cc-display: var(--font-display, 'Unbounded', system-ui, sans-serif);
}

/* ---- пузырь-кнопка: их круглая тёмная кнопка чата с золотым кольцом ---- */
.slcc-fab {
  width: 56px; height: 56px;
  background: var(--cc-dark);
  box-shadow: 0 16px 40px -18px rgba(11, 11, 12, .6), inset 0 0 0 1.5px var(--cc-accent);
}
.slcc-fab:hover { background: var(--cc-night); }
.slcc-fab__dot { background: var(--cc-accent); box-shadow: 0 0 0 2px var(--cc-dark); }

/* ---- окно: их карточка rounded-[2rem], стеклянная тень ---- */
.slcc {
  border-radius: 28px;
  background: var(--cc-mist);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 24px 60px -20px rgba(11, 11, 12, .45);
  font-family: var(--cc-font);
  color: var(--cc-night);
}

/* ---- шапка: тёмная пилюля nav + фото-аватар с золотым кольцом ---- */
.slcc__head {
  gap: 12px;
  padding: 12px 10px 12px 12px;
  background: var(--cc-dark);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.slcc__avatar {
  width: 42px; height: 42px;
  font-size: 0;                              /* буквы SL прячем — внутри фото */
  color: transparent;
  background: url('../cdn/shop/files/smilelab/concierge/avatar-96.jpg') center / cover no-repeat;
  box-shadow: 0 0 0 2px var(--cc-accent), 0 0 0 4px rgba(234, 168, 48, .25);
  position: relative;
}
.slcc__avatar::after {                      /* точка «онлайн» их зелёная → наше золото */
  content: ''; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--cc-accent); box-shadow: 0 0 0 2px var(--cc-dark);
}
@media (min-resolution: 2dppx) {
  .slcc__avatar { background-image: url('../cdn/shop/files/smilelab/concierge/avatar-192.jpg'); }
}
.slcc__title { font-family: var(--cc-display); font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.slcc__status { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.slcc__icon { width: 38px; height: 38px; border-radius: 12px; }
.slcc__icon:hover { background: rgba(255, 255, 255, .1); }
.slcc__icon:focus-visible { outline-color: var(--cc-accent); }

/* ---- лента: панель с их лентой-ribbon на фоне ---- */
.slcc__log {
  position: relative;
  background: linear-gradient(180deg, var(--cc-mist) 0%, var(--cc-mist-2) 100%);
}
.slcc__log::before {
  content: ''; position: absolute; left: 50%; top: -40px; width: 180px; height: 140%;
  transform: translateX(-50%) rotate(14deg);
  background: linear-gradient(180deg, rgba(243, 213, 138, .45), rgba(243, 213, 138, .15));
  border-radius: 999px; pointer-events: none;
}
.slcc__log > * { position: relative; }

/* пузыри: бот — стекло, человек — тёмная пилюля */
.slcc__msg { border-radius: 18px; font-size: 14.5px; line-height: 1.5; padding: 11px 15px; }
.slcc__msg--bot {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), 0 10px 24px -16px rgba(11, 11, 12, .3);
  color: var(--cc-night);
  border-bottom-left-radius: 6px;
}
.slcc__msg--me { background: var(--cc-dark); color: #fff; border-bottom-right-radius: 6px; }
.slcc__msg--typing { background: rgba(255, 255, 255, .5); }

/* чипы: их пилюли-фильтры (белые, активный тёмный) */
.slcc__chip {
  padding: 9px 14px;
  border: 1px solid rgba(11, 11, 12, .08);
  background: rgba(255, 255, 255, .85);
  color: var(--cc-night);
  font-size: 13.5px; font-weight: 600;
  box-shadow: 0 4px 12px -8px rgba(11, 11, 12, .25);
}
.slcc__chip:hover { background: var(--cc-dark); color: #fff; border-color: var(--cc-dark); }
.slcc__chip--quiet { border-style: solid; background: transparent; box-shadow: none; color: rgba(11, 11, 12, .6); }

/* карточка изделия: их карточка rounded-2xl на светлой плашке */
.slcc__card {
  border-radius: 20px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), 0 18px 40px -24px rgba(11, 11, 12, .35);
}
.slcc__prod img { width: 64px; height: 64px; border-radius: 14px; background: var(--cc-accent-soft); }
.slcc__pname { font-family: var(--cc-display); font-size: 14px; letter-spacing: -.01em; color: var(--cc-night); }
.slcc__price { color: rgba(11, 11, 12, .6); }
.slcc__price b { color: var(--cc-night); font-size: 17px; }
.slcc__line { color: rgba(11, 11, 12, .68); }

/* кнопки: золотая с бликом (как на главной) и контурная */
.slcc__book {
  background-image: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .42) 50%, transparent 60%), linear-gradient(135deg, var(--gold-1, #f9d978) 0%, var(--cc-accent) 48%, var(--gold-3, #cf8a1e) 100%);
  background-size: 260% 100%, 100% 100%; background-position: 120% 0, 0 0; background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 24px -12px rgba(234, 168, 48, .8);
  color: var(--cc-night);
  animation: ppGoldSheen 9s ease-in-out infinite;
}
.slcc__book:hover { background-image: linear-gradient(135deg, var(--gold-1, #f9d978) 0%, var(--cc-accent) 48%, var(--gold-3, #cf8a1e) 100%); }
.slcc__see { border-color: rgba(11, 11, 12, .18); background: rgba(255, 255, 255, .8); color: var(--cc-night); }
.slcc__see:hover { background: var(--cc-dark); border-color: var(--cc-dark); color: #fff; }

/* поле ввода: их белая пилюля с тенью, тёмная кнопка */
.slcc__bar { padding: 10px 12px 6px; background: var(--cc-mist-2); border-top: 1px solid rgba(11, 11, 12, .06); }
.slcc__in {
  height: 46px; border: 0; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 11, 12, .08), 0 8px 20px -14px rgba(11, 11, 12, .3);
  font-size: 15px;
}
.slcc__in:focus { box-shadow: 0 0 0 2px var(--cc-accent); border-color: transparent; }
.slcc__send { width: 46px; height: 46px; background: var(--cc-dark); }
.slcc__send:hover { background: var(--cc-night); }
.slcc__legal { background: var(--cc-mist-2); color: rgba(11, 11, 12, .55); font-size: 11px; }

/* полоса звонка и меню-лист — в тех же тонах */
.slcc__call-bar { background: var(--cc-dark); color: #fff; }
.slcc__vol { background: var(--cc-accent); }
.slcc__hang { background: #b91c1c; color: #fff; border-radius: 999px; }
.slcc__sheet { background: var(--cc-mist); }
.slcc__new { background: var(--cc-dark); border-radius: 999px; }
.slcc__acts button, .slcc__cart, .slcc__back { border-bottom-color: rgba(11, 11, 12, .08); color: var(--cc-night); }

/* телефон: лист снизу со скруглением сверху, как их sheet */
@media (max-width: 749px) {
  .slcc { border-radius: 28px 28px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .slcc__book { animation: none; } }

/* лаунчер «Ask Smiley»: вытянутая пилюля с именем и круглой аватаркой справа */
.slcc-fab { width: auto; height: 54px; padding: 0 6px 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; }
.slcc-fab svg { display: none; }
.slcc-fab__t { font: 700 14px/1 'Inter', system-ui, sans-serif; color: #fff; letter-spacing: -.01em; white-space: nowrap; }
.slcc-fab__ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 2px var(--cc-accent); display: block; }
.slcc-fab__dot { top: 4px; right: 4px; }
/* «Ask Smiley»: заметно шире влево, текст крупнее */
.slcc-fab { height: 56px; padding: 0 6px 0 22px; gap: 14px; min-width: 200px; justify-content: space-between; }
.slcc-fab__t { font-size: 16px; }
.slcc-fab__ava { width: 44px; height: 44px; }

/* лаунчер как у Remi: компактная пилюля, текст + иконка бота справа, без аватарки и точки */
.slcc-fab { height: 48px; min-width: 0; padding: 0 16px 0 18px; gap: 10px; justify-content: center; border-radius: 999px; box-shadow: 0 10px 26px -12px rgba(11,11,12,.55), inset 0 0 0 1.5px var(--cc-accent); }
.slcc-fab svg.slcc-fab__bot { display: block; width: 22px; height: 22px; color: var(--cc-accent); }
.slcc-fab__t { font: 700 15px/1 'Inter', system-ui, sans-serif; }
.slcc-fab__ava, .slcc-fab__dot { display: none !important; }

/* лаунчер как у Remi, оранжевый: компактная пилюля, аккуратный текст, диалоговая иконка справа */
.slcc-fab { height: 42px; padding: 0 14px 0 16px; gap: 8px; background: linear-gradient(180deg, #f3b94a, #e39a22) !important; color: #0b0b0c; box-shadow: 0 8px 20px -10px rgba(227,154,34,.7); }
.slcc-fab:hover { background: linear-gradient(180deg, #f6c35a, #e8a22a) !important; }
.slcc-fab__t { font: 600 14px/1 'Inter', system-ui, sans-serif; color: #0b0b0c; letter-spacing: 0; }
.slcc-fab svg.slcc-fab__bot { width: 20px; height: 20px; color: #0b0b0c; }