/* ════════════════════════════════════════════════════════════════════════
   Messenger · v1.1.3.338 — SHARED root + THEME INTEGRATION LAYER

   Що тут є (shared, завантажується НА ВСІХ сторінках месенджера):
     1. BG decorations (animated, .kp-bg-fx*)
     2. PAGE ROOT (.kp-msg-app — layout, grid)
     3. THEME TOKENS (DARK default + [data-theme="light"] overrides)
     4. APPLY layer — overrides для shared компонентів:
        - sidebar (.kp-msg-sidebar, .kp-msg-sb__*)
        - search (.kp-msg-search__*)
        - tabs (.kp-msg-sb__tab, .kp-msg-sb__tab-badge)
        - conv list (.kp-msg-conv*)
        - empty state (.kp-msg-empty*)
     5. Mobile fixes — solid sidebar, hide empty state на /messages

   Раніше (v337) theme integration layer жив тільки у thread.css → не
   працював на /messages (index). Тепер shared → реагує всюди.

   Class names: kp-msg-* (compatible з thread.js).
   Visual: glassmorphism panels, animated BG, modern bubbles.
   ════════════════════════════════════════════════════════════════════════ */


/* ─── BODY LOCK FALLBACK (v364) ──────────────────────────────────────────
   Дублює критичні правила з messages-layout.css.
   Мотивація: messages-layout.css може не завантажитись через SW-кеш або
   Hostinger unzip failures. messages.css ГАРАНТОВАНО завантажується через
   explicit addPageCss() у MessagesController (index + thread).
   Дублювання безпечне: addPageCss() deduplicate через realpath(). Якщо
   messages-layout.css вже завантажений — ці правила є no-op (сама
   специфічність + пізніший source order). Якщо ні — рятують layout.

   Ланцюжок: body → wrapper → container → .kp-msg-app — усі flex column.
   ──────────────────────────────────────────────────────────────────────── */
body.kp-route-messages {
  overflow: hidden;
  height: 100vh;       /* fallback для браузерів без dvh */
  height: 100dvh;
  min-height: 0;       /* перебиває base.css body{min-height:100vh} */
  max-height: 100vh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
}

html:has(body.kp-route-messages) {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.app-page-wrapper--messages {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

.container--messages {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}


/* ─── BG decorations (animated) ──────────────────────────────────────── */
.kp-bg-fx {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.kp-bg-fx__v {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 50%, rgba(239,100,67,.05), transparent 60%),
    radial-gradient(ellipse 40% 60% at 80% 30%, rgba(34,211,238,.035), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(167,139,250,.03), transparent 60%);
}
.kp-bg-fx__scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg,
    transparent, transparent 2px,
    rgba(255,255,255,.005) 2px, rgba(255,255,255,.005) 4px);
}
.kp-bg-fx__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .6;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000, transparent 90%);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000, transparent 90%);
}

/* На світлій темі BG-decorations прозоріші — щоб не «забивали» */
[data-theme="light"] .kp-bg-fx { opacity: .35; }


/* ─── PAGE ROOT ──────────────────────────────────────────────────────── */
.kp-msg-app {
  position: relative;
  z-index: 1;
  display: flex;
  /* v347: flex:1 + min-height:0 замість абсолютної calc(100dvh - X).
     `layouts/app/messages-layout.css` керує висотою через flex chain
     (body → wrapper → container → .kp-msg-app — всі flex column).
     Раніше `.kp-msg-app` ставив фіксовану calc-висоту, що НЕ
     узгоджувалось з flex parent — composer на mobile вилазив за
     viewport, sidebar не отримував правильну висоту. flex:1 +
     min-height:0 — стандартний flex pattern: займай весь доступний
     простір, дозволяй children shrink.
     Раніше було: height: calc(100vh - 56px); max-height: 900px; */
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r);
  margin: 0 auto;
  max-width: 1400px;
  /* v349: width:100% ОБОВ'ЯЗКОВО! Без нього margin:0 auto у flex parent
     (container--messages — flex column) скасовує align-items:stretch →
     `.kp-msg-app` shrink-to-fit до intrinsic content. На mobile (≤900px)
     empty state hidden + sidebar absolute → 0 intrinsic content → 0 width.
     Було: при 901px main=420px (intrinsic empty state), при 900px main=0px. */
  /* v339: backdrop-filter ВИДАЛЕНО — він робив .kp-msg-app containing
     block для position:fixed дітей. Фон solid через token, blur зайвий. */
}


/* ════════════════════════════════════════════════════════════════════════
   THEME TOKENS
   ════════════════════════════════════════════════════════════════════════ */

/* DARK (default — без data-theme або data-theme="dark") */
.kp-msg-app {
  --kp-msg-bg:           #0a0b10;
  --kp-msg-panel:        rgba(14, 15, 22, .97);
  --kp-msg-panel-solid:  #0e0f16;
  --kp-msg-cell:         rgba(255, 255, 255, .04);
  --kp-msg-cell-h:       rgba(255, 255, 255, .07);
  --kp-msg-border:       rgba(255, 255, 255, .06);
  --kp-msg-border-h:     rgba(255, 255, 255, .12);
  --kp-msg-text:         var(--text, #ddd8d0);
  --kp-msg-text-strong:  #fff;
  --kp-msg-text-dim:     #908a82;
  --kp-msg-text-mute:    #5a5550;
  --kp-msg-bubble-out:   linear-gradient(135deg, rgba(239, 100, 67, .15), rgba(239, 100, 67, .05));
  --kp-msg-bubble-out-b: rgba(239, 100, 67, .25);
  --kp-msg-bubble-in:    rgba(255, 255, 255, .04);
  --kp-msg-bubble-in-b:  rgba(255, 255, 255, .06);
  --kp-msg-shadow:       0 12px 48px rgba(0, 0, 0, .4);
}

/* LIGHT */
[data-theme="light"] .kp-msg-app {
  --kp-msg-bg:           #f6f3ee;
  --kp-msg-panel:        rgba(255, 255, 255, .96);
  --kp-msg-panel-solid:  #ffffff;
  --kp-msg-cell:         rgba(0, 0, 0, .03);
  --kp-msg-cell-h:       rgba(0, 0, 0, .05);
  --kp-msg-border:       rgba(0, 0, 0, .07);
  --kp-msg-border-h:     rgba(0, 0, 0, .13);
  --kp-msg-text:         #1a1714;
  --kp-msg-text-strong:  #0a0807;
  --kp-msg-text-dim:     #6b6660;
  --kp-msg-text-mute:    #908a82;
  --kp-msg-bubble-out:   linear-gradient(135deg, var(--accent-dim), color-mix(in oklab, var(--accent) 8%, transparent));
  --kp-msg-bubble-out-b: color-mix(in oklab, var(--accent) 35%, transparent);
  --kp-msg-bubble-in:    rgba(0, 0, 0, .03);
  --kp-msg-bubble-in-b:  rgba(0, 0, 0, .07);
  --kp-msg-shadow:       0 8px 32px rgba(42, 34, 28, .08);
}


/* ════════════════════════════════════════════════════════════════════════
   APPLY LAYER — застосовуємо токени до shared-класів
   ════════════════════════════════════════════════════════════════════════ */

.kp-msg-app {
  background: var(--kp-msg-panel) !important;
  box-shadow: var(--kp-msg-shadow) !important;
  border: 1px solid var(--kp-msg-border) !important;
  color: var(--kp-msg-text);
}
.kp-msg-sb__tab.is-active { color: var(--accent); border-bottom-color: var(--accent) !important; }
.kp-msg-conv.is-active {
  background: var(--accent-dim) !important;
}
.kp-msg-conv.is-unread {
  background: var(--kp-msg-cell);
}
.kp-msg-conv.is-unread .kp-msg-conv__name { color: var(--kp-msg-text-strong); }
.kp-msg-conv.is-unread .kp-msg-conv__time { color: var(--accent); }
.kp-msg-conv.is-unread .kp-msg-conv__preview { color: var(--kp-msg-text-dim); }

/* ─── Empty main state (на /messages коли не вибрано бесіду) ─────────────────
   v353: структурні стилі ПЕРЕНЕСЕНО з thread/thread.css сюди — раніше вони
   жили тільки у thread, а thread.css на /messages route не завантажується,
   тому кнопки виглядали як простий текст без border/padding. */
.kp-msg-main { background: var(--kp-msg-bg) !important; }

.kp-msg-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  text-align: center;
  color: var(--kp-msg-text-dim);
}
.kp-msg-empty__icon {
  font-size: 5rem;
  opacity: .4;
  filter: drop-shadow(0 0 24px rgba(239, 100, 67, .25));
}
.kp-msg-empty__title {
  font-family: var(--mono, monospace);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--kp-msg-text);
}
.kp-msg-empty__sub {
  font-size: .8rem;
  color: var(--kp-msg-text-dim);
  text-align: center;
  max-width: 320px;
  line-height: 1.5;
}
.kp-msg-empty__actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.kp-msg-empty__btn {
  padding: 9px 16px;
  border-radius: 11px;
  border: 1px solid var(--kp-msg-border);
  background: var(--kp-msg-cell);
  color: var(--kp-msg-text);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .2s cubic-bezier(.16, 1, .3, 1);
}
.kp-msg-empty__btn:hover {
  background: var(--kp-msg-cell-h);
  border-color: var(--accent);
  color: var(--accent);
}
.kp-msg-empty__btn--primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 70%, white));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(239, 100, 67, .35);
}
.kp-msg-empty__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(239, 100, 67, .45);
  color: #fff;
}

/* Alerts */
.kp-msg-app .kp-alert {
  background: var(--kp-msg-cell);
  border: 1px solid var(--kp-msg-border);
  color: var(--kp-msg-text);
}


/* ════════════════════════════════════════════════════════════════════════
   MOBILE (≤ 900px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .kp-msg-app {
    /* v347: flex:1 inherited з desktop — НЕ потрібен height override.
       max-height/border/shadow все ще треба прибрати на mobile.
       v362: margin:0 ОБОВ'ЯЗКОВО — без нього `margin:0 auto` (з desktop rule)
       залишається активним на /messages (index). thread.css скидає margin
       на thread route, але messages.css — спільний, і НА /messages index
       thread.css НЕ завантажується. У flex column без stretch override +
       margin:auto → shrink-to-fit → 0 intrinsic content → width=0 → чат зникає. */
    border-radius: 0;
    border: none !important;
    max-width: none;
    margin: 0;
    box-shadow: none !important;
  }

  /* Sidebar — solid, поверх main, щоб не просвічувався empty state */
  .kp-msg-sidebar {
    background: var(--kp-msg-panel-solid) !important;
    z-index: 10 !important;
  }

  /* Index page (/messages): empty state живе у <main>, але на mobile
     sidebar займає 100% ширини і повністю покриває main. Empty state
     лишається у DOM, проте просвічується крізь напівпрозорі шари —
     ховаємо його повністю на mobile. */
  .kp-msg-empty { display: none !important; }
}