/* ==========================================================================
   Заголовки вкладок: плашка, іконка, назва, підзаголовок.
   Зведення CSS, етап 3 (docs/CSS_CONSOLIDATION_PLAN.md). Значення — переможці
   каскаду до зведення (smoke_css_generate.js на 1300 / 700 / 400 / 360 px,
   день і ніч), без !important. Підключений після старих файлів і поза @layer.

   На телефоні (<=768) плашки чату, дитини, бібліотеки й пульсу сховані.
   Профіль лишає прозорий рядок із кнопкою. Липкість і колонка сітки профілю
   діють лише від 769 px: нижче top, z-index і grid-column скинуті, бо інакше
   десктопне правило протікало б униз.

   h1 у .chat-header — той самий заголовок. Його !important прибрано разом
   із компонентом, інакше на вузькому екрані він перебивав би цей файл.
   Саме правило .chat-header (flex, проміжок) лишилось у style.css.
   Спільні з іконками бібліотеки .clay-icon-3d / .clay-kb-3d-img не чіпались.
   ========================================================================== */

#tabViewChat > .page-header,
#tabViewKnowledge > .page-header {
  border: 1.5px solid color-mix(in srgb, var(--accent-primary) 14%, transparent);
  background: var(--surface-card, var(--lit-fff));
  border-color: color-mix(in srgb, var(--accent-primary) 42%, var(--lit-fff));
  border-radius: 18px;
  padding: 16px 18px;
  margin: 0px 0px 0.75rem;
  flex: 0 0 auto;
  overflow: hidden;
  align-items: center;
  position: relative;
  box-shadow: var(--shadow-clay);
}

[data-theme="soft-neon-night"] #tabViewChat > .page-header,
[data-theme="soft-neon-night"] #tabViewPassport > .page-header,
[data-theme="soft-neon-night"] #tabViewKnowledge > .page-header,
[data-theme="soft-neon-night"] #tabViewAnalytics > .page-header,
[data-theme="soft-neon-night"] #tabViewProfile > .page-header {
  background: var(--surface-card, var(--lit-342c58));
  border-color: var(--lit-rgba-196-181-253-0-42);
}

#tabViewChat > .page-header::before,
#tabViewPassport > .page-header::before,
#tabViewKnowledge > .page-header::before,
#tabViewAnalytics > .page-header::before,
#tabViewProfile > .page-header::before {
  content: none;
  display: none;
}

#tabViewChat > .page-header .page-header-row,
#tabViewPassport > .page-header .page-header-row,
#tabViewKnowledge > .page-header .page-header-row,
#tabViewAnalytics > .page-header .page-header-row,
#tabViewProfile > .page-header .page-header-row {
  gap: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0px;
}

#tabViewChat > .page-header .page-header-lead,
#tabViewPassport > .page-header .page-header-lead,
#tabViewKnowledge > .page-header .page-header-lead,
#tabViewAnalytics > .page-header .page-header-lead,
#tabViewProfile > .page-header .page-header-lead {
  gap: 12px;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0px;
  padding-left: 0px;
}

#tabViewChat > .page-header .page-header-icon.page-header-icon--3d,
#tabViewPassport > .page-header .page-header-icon.page-header-icon--3d,
#tabViewKnowledge > .page-header .page-header-icon.page-header-icon--3d,
#tabViewAnalytics > .page-header .page-header-icon.page-header-icon--3d,
#tabViewProfile > .page-header .page-header-icon.page-header-icon--3d {
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 16px;
  padding: 0px;
  overflow: visible;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  color: var(--accent-primary);
}

#tabViewChat > .page-header .page-header-3d-img,
#tabViewPassport > .page-header .page-header-3d-img,
#tabViewKnowledge > .page-header .page-header-3d-img,
#tabViewAnalytics > .page-header .page-header-3d-img,
#tabViewProfile > .page-header .page-header-3d-img {
  background: transparent;
  border-radius: 0px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(var(--lit-rgba-45-38-64-0-22) 0px 4px 3px);
  box-shadow: none;
}

[data-theme="soft-neon-night"] #tabViewChat > .page-header .page-header-3d-img,
[data-theme="soft-neon-night"] #tabViewPassport > .page-header .page-header-3d-img,
[data-theme="soft-neon-night"] #tabViewKnowledge > .page-header .page-header-3d-img,
[data-theme="soft-neon-night"] #tabViewAnalytics > .page-header .page-header-3d-img,
[data-theme="soft-neon-night"] #tabViewProfile > .page-header .page-header-3d-img {
  filter: drop-shadow(var(--lit-rgba-0-0-0-0-4) 0px 5px 4px);
}

#tabViewChat > .page-header .page-header-copy,
#tabViewPassport > .page-header .page-header-copy,
#tabViewKnowledge > .page-header .page-header-copy,
#tabViewAnalytics > .page-header .page-header-copy,
#tabViewProfile > .page-header .page-header-copy {
  gap: 2px;
  min-width: 0px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

#tabViewChat > .page-header .page-title,
#tabViewPassport > .page-header .page-title,
#tabViewKnowledge > .page-header .page-title,
#tabViewAnalytics > .page-header .page-title,
#tabViewProfile > .page-header .page-title {
  margin: 0px;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--text-main);
  text-overflow: ellipsis;
  -webkit-text-fill-color: unset;
  filter: none;
  text-shadow: none;
}

#tabViewChat > .page-header .page-subtitle,
#tabViewPassport > .page-header .page-subtitle,
#tabViewKnowledge > .page-header .page-subtitle,
#tabViewAnalytics > .page-header .page-subtitle,
#tabViewProfile > .page-header .page-subtitle {
  margin: 0px;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-muted);
  letter-spacing: 0.005em;
  -webkit-text-fill-color: unset;
  filter: none;
  text-shadow: none;
}

#tabViewPassport > .page-header,
#tabViewAnalytics > .page-header {
  border: 1.5px solid color-mix(in srgb, var(--accent-primary) 14%, transparent);
  background: var(--surface-card, var(--lit-fff));
  border-color: color-mix(in srgb, var(--accent-primary) 42%, var(--lit-fff));
  border-radius: 18px;
  padding: 16px 18px;
  margin: 0px 0px 0.75rem;
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-clay);
}

#tabViewPassport > .page-header .page-header-actions,
#tabViewProfile > .page-header .page-header-actions {
  gap: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

#tabViewProfile > .page-header {
  border: 1.5px solid color-mix(in srgb, var(--accent-primary) 14%, transparent);
  background: var(--surface-card, var(--lit-fff));
  border-color: color-mix(in srgb, var(--accent-primary) 42%, var(--lit-fff));
  border-radius: 18px;
  padding: 16px 18px;
  margin: 0px 0px 0.75rem;
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-clay);
}

/* Липкість і колонка сітки — лише коли профіль відкритий на широкому екрані.
   Інакше десктопне правило трималось би і на зачиненій вкладці. */
@media (min-width: 769px) {
  body.tab-profile #tabViewProfile > .page-header {
    position: sticky;
    top: 0px;
    z-index: 6;
  }
}

@media (min-width: 960px) {
  body.tab-profile #tabViewProfile > .page-header {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  #tabViewChat > .page-header,
  #tabViewKnowledge > .page-header,
  #tabViewAnalytics > .page-header {
    gap: 6px;
    flex-wrap: nowrap;
    display: none;
  }

  #tabViewChat > .page-header .page-title {
    font-size: 1rem;
    text-wrap-mode: wrap;
  }

  #tabViewChat > .page-header .page-subtitle,
  #tabViewPassport > .page-header .page-subtitle,
  #tabViewKnowledge > .page-header .page-subtitle,
  #tabViewAnalytics > .page-header .page-subtitle,
  #tabViewProfile > .page-header .page-subtitle {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  #tabViewPassport > .page-header {
    gap: 6px;
    flex-wrap: nowrap;
    position: sticky;
    top: 0px;
    z-index: 5;
    display: none;
  }

  #tabViewPassport > .page-header .page-title,
  #tabViewAnalytics > .page-header .page-title,
  #tabViewProfile > .page-header .page-title {
    text-wrap-mode: wrap;
  }

  #tabViewKnowledge > .page-header .page-title {
    font-size: 0.95rem;
    text-wrap-mode: wrap;
  }

  #tabViewProfile > .page-header {
    background: transparent;
    border: 0px none currentcolor;
    border-radius: 0px;
    padding: 0px;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: nowrap;
    position: relative;
    top: auto;
    z-index: auto;
    grid-column: auto;
    box-shadow: none;
    display: flex;
  }

  [data-theme="soft-neon-night"] #tabViewProfile > .page-header {
    background: transparent;
    border-color: currentcolor;
  }

  #tabViewProfile > .page-header .page-header-row {
    justify-content: flex-end;
  }

  #tabViewProfile > .page-header .page-header-lead {
    display: none;
  }

}

@media (max-width: 420px) {
  #tabViewChat > .page-header,
  #tabViewPassport > .page-header,
  #tabViewKnowledge > .page-header,
  #tabViewAnalytics > .page-header {
    padding: 14px;
  }

  #tabViewChat > .page-header .page-header-icon.page-header-icon--3d,
  #tabViewPassport > .page-header .page-header-icon.page-header-icon--3d,
  #tabViewKnowledge > .page-header .page-header-icon.page-header-icon--3d,
  #tabViewAnalytics > .page-header .page-header-icon.page-header-icon--3d,
  #tabViewProfile > .page-header .page-header-icon.page-header-icon--3d {
    width: 44px;
    height: 44px;
  }

  #tabViewPassport > .page-header .page-title,
  #tabViewAnalytics > .page-header .page-title,
  #tabViewProfile > .page-header .page-title {
    font-size: 1.08rem;
  }

}

/* Фокус паспорта. Рамку й тінь у clay-global-plaques.css знято з !important,
   тож ці оголошення перемагають і style.css (там outline: none). */
.passport-input:focus,
.passport-textarea:focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-color: var(--accent-primary);
}

.avatar-bubble:focus-visible,
.avatar-option-item:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* «Аватар» у шапці паспорта. Було в clay-page-headers.css з !important,
   інакше прозорий .edit-avatar-link-btn зі style.css лишався б видимим.
   Тут селектор вужчий і файл пізніший, тож !important не потрібен.
   Інші кнопки з тим класом (вихід, «Пізніше», посилання пульсу) не тут. */
.page-header-actions .edit-avatar-link-btn {
  border-radius: 999px;
  font-weight: 700;
  background: var(--surface-card);
  border: 1.5px solid color-mix(in srgb, var(--accent-primary) 16%, var(--lit-fff));
  box-shadow: var(--shadow-clay);
  color: var(--accent-primary);
  padding: 8px 12px;
}

/* Колонки. Було в clay-global-plaques.css з !important, інакше style.css
   лишав --glass-fill, радіус 26 px (на телефоні 18) і нічну --shadow-clay.
   Колір рамки тримає clay-contrast.css через border-color з !important;
   товщина 1.5px solid уже є в style.css. */
.glass-panel {
  background: var(--surface-panel);
  border-radius: 24px;
  box-shadow: var(--clay-plaque-shadow);
}

/* М'які заголовки розділів. Вага 800 вже в style.css. Колір text-dim
   програвав text-main через !important; специфічність та сама, файл пізніший. */
.section-title.section-title-soft {
  color: var(--text-main);
}