/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Slate Theme: Paleta de cores inteligente para leitura profunda.
  2. Dark Mode: Otimização de contraste e tons de superfície.
  3. Progress Bar: Indicador fixo de progresso de leitura.
  4. Sidebar TOC: Tabela de conteúdos flutuante com expansão lateral.
  5. Main Article Layout: Content wrapper centrado.
  6. Typography: Hierarquia rigorosa de títulos (H1-H3), parágrafos e listas.
  7. Elementos Especiais: Tags, Leads, Quotes e Dividers.
  8. Info Boxes: Blocos de aviso (Tip/Warn) com ícones.
  9. Interaction Area: Likes, Favoritos e Share Buttons (Sociais).
  10. Newsletter Section: Formulário integrado com feedback visual.
  11. Comments Section: Sistema premium de comentários com avatares coloridos.
  12. Mobile Overrides:
      - Desktop (> 768px): Layout lado-a-lado e ajustes de alinhamento.
      - Mobile (<= 768px): Bottom Sheet Mode e overrides de layout. adaptado para ecrãs pequenos.
*/

/* --- PALETA DE CORES INTELIGENTE (SLATE THEME) --- */

:root {
  /* --- MODO CLARO: Reutiliza variáveis globais --- */
  --bg-body: var(--brand-neutral-50);
  --bg-card: var(--brand-neutral-white);

  /* Textos */
  --text-main: var(--brand-neutral-600);
  --text-muted: var(--brand-neutral-500);

  /* Azul Principal */
  --primary: var(--md-sys-color-primary);
  --primary-hover: oklch(from var(--md-sys-color-primary) 85% c h);
  --accent: var(--brand-primary-blue);

  /* Bordas */
  --border: var(--brand-neutral-200);

  /* Elementos de UI */
  --toc-active-bg: var(--md-sys-color-primary-container);
  --toc-active-border: var(--primary);
  --input-bg: var(--brand-neutral-100);

  /* Variáveis de Status */
  --box-tip-bg: var(--status-success-bg);
  --box-tip-border: var(--status-success);
  --box-tip-text: var(--brand-tertiary-green);
  --box-warn-bg: var(--status-warning-bg);
  --box-warn-border: var(--status-warning);
  --box-warn-text: oklch(from var(--status-warning) 35% c h);

  /* Cores de Interação */
  --like-color: var(--md-sys-color-error);
  --favorite-color: var(--status-warning);
  --toc-width: 320px;
  /* Slightly wider for better readability */
  --toc-pill-size: 48px;
  --toc-bg: var(--bg-card);
  /* Solid background */
  --toc-border: var(--border);
  --toc-shadow: var(--shadow-strong-md);
}

/* --- MODO ESCURO OTIMIZADO --- */
html.dark-theme {
  /* Fundo */
  --bg-body: var(--md-sys-color-surface);
  --bg-card: var(--md-sys-color-surface-container);

  /* Texto */
  --text-main: var(--md-sys-color-on-surface);
  --text-muted: var(--md-sys-color-on-surface-variant);

  /* Azul Luminoso para Dark Mode */
  --primary: var(--md-sys-color-primary);
  --primary-hover: oklch(from var(--md-sys-color-primary) 90% c h);

  /* Bordas */
  --border: var(--md-sys-color-outline);

  /* UI Dark */
  --toc-active-bg: oklch(from var(--md-sys-color-primary) l c h / 10%);
  --input-bg: var(--md-sys-color-surface-container-lowest);

  /* Ajuste nos Boxes para Dark Mode */
  --box-tip-bg: oklch(from var(--status-success) l c h / 10%);
  --box-tip-text: oklch(from var(--status-success) 85% c h);
  --box-warn-bg: oklch(from var(--status-warning) l c h / 10%);
  --box-warn-text: oklch(from var(--status-warning) 80% c h);
  --toc-bg: var(--md-sys-color-surface-container-high);
  --toc-border: var(--md-sys-color-outline-variant);
  --toc-shadow: 0 12px 32px oklch(0% 0 0deg / 40%), 0 4px 12px oklch(0% 0 0deg / 20%);
}

/* --- UTILITIES & HELPERS --- */
.metadata-hidden,
.article-hidden {
  display: none;
}

.icon-muted {
  color: var(--text-muted);
}

.icon-lg {
  font-size: var(--text-2xl);
}

.icon-sm {
  font-size: var(--text-lg);
}

.icon-inline-right {
  margin-left: var(--space-xs);
  vertical-align: middle;
}

/* --- PROGRESS BAR --- */
.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-toast);
  width: 100%;
  height: var(--space-xs);
  pointer-events: none;
}

.progress-bar {
  width: 100%;
  height: 100%;
  background: var(--primary);
  box-shadow: 0 0 10px var(--primary);
  transform: scaleX(0);
  transform-origin: left;

  /* JS updates this */
  transition: transform var(--duration-fast) var(--ease-snappy);
}

/* --- LOADING STATE --- */
.loading-indicator {
  padding: var(--space-xl);
  color: var(--text-muted);
  text-align: center;
}

.loading-icon {
  color: var(--primary);
}

/* --- LAYOUT GRID --- */
.page-wrapper {
  position: relative;
  display: block;
  width: 100%;
  max-width: var(--max-width-content);
  padding: var(--space-l) var(--space-m);
  margin: 0 auto;
}

html {
  height: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
}

body {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow: hidden visible;

  /* Garantir que o conteúdo flua naturalmente */
  color: var(--text-main);
  background-color: var(--bg-body);
  transition:
    background-color var(--duration-smooth) var(--ease-fluid),
    color var(--duration-smooth) var(--ease-fluid);
  padding-top: 80px;
}

/* --- SIDEBAR TOC (FLOATING PILL & BOTTOM SHEET) --- */

/* TOC Variables - MD3 Solid Surfaces */

/* Main Sidebar Container - Floating Wrapper */
.toc-sidebar {
  position: fixed;
  top: max(100px, 15dvh);
  /* Give space below navbar */
  right: var(--space-m);
  left: auto;
  z-index: var(--z-sticky, 100);
}

/* Toggle Button - The Floating Pill (Desktop) */
.toc-toggle {
  display: flex;
  /* Flex on desktop */
  align-items: center;
  justify-content: center;
  width: var(--toc-pill-size);
  height: var(--toc-pill-size);
  font-size: 24px;
  color: var(--text-main);
  cursor: pointer;
  background: var(--toc-bg);
  border: 1px solid var(--toc-border);
  border-radius: var(--md-sys-shape-corner-full);
  /* Circular pill */
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-smooth) var(--ease-fluid),
    background-color var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy);
}

.toc-toggle:hover {
  color: var(--primary);
  box-shadow: var(--toc-shadow);
  transform: translateY(-2px);
}

.toc-toggle:active {
  transform: scale(0.95);
}

.toc-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Main Panel - The Solid Card (Desktop) */
.toc-panel {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  /* Starts at the exact same right position as the pill */
  width: var(--toc-width);
  max-height: calc(100dvh - 120px);
  padding: var(--space-l);
  overflow-y: auto;
  background: var(--toc-bg);
  border: 1px solid var(--toc-border);
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow: var(--toc-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateX(20px) scale(0.95);
  /* Slide from the pill position (right side) */
  transform-origin: top right;
  transition:
    transform var(--duration-smooth) var(--ease-fluid),
    opacity var(--duration-fast) var(--ease-snappy),
    visibility var(--duration-fast) var(--ease-snappy);
}

/* Custom Scrollbar for TOC Panel */
.toc-panel::-webkit-scrollbar {
  width: 6px;
}

.toc-panel::-webkit-scrollbar-track {
  background: transparent;
}

.toc-panel::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.toc-panel::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Open State (Desktop) */
.toc-sidebar.is-open .toc-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
}

.toc-sidebar.is-open .toc-toggle {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  pointer-events: none;
}

/* Header Section */
.toc-header {
  display: flex;
  gap: var(--space-m);
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-m);
  margin-bottom: var(--space-m);
  border-bottom: 1px solid var(--toc-border);
  /* Use solid border */
}

/* Handle for Bottom Sheet (Hidden on Desktop) */
.toc-drag-handle {
  display: none;
}

.toc-title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.toc-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--text-muted);
  cursor: pointer;
  background: var(--bg-body);
  /* Solid contrast */
  border: 1px solid var(--toc-border);
  border-radius: var(--md-sys-shape-corner-full);
  /* Circular close */
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

.toc-close:hover {
  color: var(--md-sys-color-on-primary);
  background: var(--primary);
  border-color: var(--primary);
}

.toc-close:active {
  transform: scale(0.9);
}

.toc-close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Navigation */
.toc-nav {
  padding-top: var(--space-xs);
}

.toc-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.toc-list li {
  margin-bottom: 4px;
}

.toc-link {
  display: block;
  padding: var(--space-s) var(--space-m);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium) 0;
  transition:
    color var(--duration-fast) var(--ease-snappy),
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    padding-left var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

.toc-link:hover {
  color: var(--primary);
  background: var(--toc-active-bg);
  border-left-color: var(--toc-active-border);
  padding-left: calc(var(--space-m) + 4px);
  transform: translateX(2px);
}

.toc-link.active {
  font-weight: var(--font-semibold);
  color: var(--primary);
  background: var(--toc-active-bg);
  border-left-color: var(--toc-active-border);
}

/* Nested Level (h3) */
.toc-list .toc-list {
  padding-left: var(--space-l);
  margin-top: 4px;
}

.toc-list .toc-list .toc-link {
  font-size: var(--text-xs);
  padding-left: var(--space-l);
}

.toc-list .toc-list .toc-link:hover {
  padding-left: calc(var(--space-l) + 4px);
}

/* --- MOBILE SIDEBAR OVERRIDES --- */

/* --- ARTIGO MAIN CONTENT --- */
.article-content {
  padding: var(--space-l) var(--space-xl);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow: 0 10px 40px -10px oklch(0% 0 0deg / 5%);
}

/* Títulos */
.article-content h1 {
  margin-bottom: var(--space-l);
  font-family: 'Google Sans', sans-serif;
  font-size: var(--font-size-display-small);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--text-main);
  letter-spacing: -0.03em;
}

.article-content h2 {
  padding-top: var(--space-s);
  margin-top: var(--space-l);
  margin-bottom: var(--space-s);
  font-size: var(--font-size-headline-medium);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  color: var(--primary);
  letter-spacing: -0.02em;
  border-top: 1px solid var(--border);
}

.article-content h3 {
  margin-top: var(--space-l);

  /* Realistic: 24-36px */
  font-size: var(--font-size-title-large);
  font-weight: var(--font-semibold);
  color: var(--primary);
  opacity: 0.9;
}

.article-content p {
  /* Realistic: 16-24px (like Medium) */
  font-size: var(--text-base);
  line-height: var(--line-height-relaxed);
  color: var(--text-main);
  text-wrap: pretty;
}

/* Global ul/li reset/styles inside article */
.article-content ul {
  padding-left: var(--space-xl);
  margin-bottom: 0;
}

.article-content li {
  margin-bottom: var(--space-s);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-main);

  /* Golden rule: list items same size as body text */
}

/* Tags */
.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-l);
}

.blog-tags span {
  padding: 6px 14px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: var(--md-sys-shape-corner-full);
}

/* Lead Paragraph */
.lead-paragraph {
  margin-bottom: var(--space-l);
  font-size: var(--font-size-headline-small);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

/* Article Meta */
.article-meta {
  display: flex;
  gap: var(--space-m);
  align-items: center;
  margin: var(--space-l) 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Article Metadata - específico para o container com reading-time e data */
.article-metadata {
  margin-bottom: var(--space-s);
}

/* Article Excerpt */
.article-excerpt {
  margin-top: var(--space-s);
  margin-bottom: var(--space-m);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.reading-time {
  display: flex;
  gap: var(--space-s);
  align-items: center;
}

/* Article Quote */
.article-quote {
  padding: var(--space-l);
  margin: var(--space-l) 0;
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--primary);
  background: var(--bg-body);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium) 0;
}

/* Article Divider */
.article-divider {
  margin-top: var(--space-m);
  margin-bottom: var(--space-m);
  border-top: 1px solid var(--border);
}

/* Sources Section */
.sources-title {
  font-size: var(--text-lg);
  color: var(--text-muted);
}

.sources-list {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Destaques (Boxes) */
.box {
  padding: var(--space-m);
  margin: var(--space-m) 0;

  /* Realistic: ~16-24px */
  border: 1px solid;

  /* Realistic: ~16-24px */
  border-radius: var(--md-sys-shape-corner-large);
}

.box-tip {
  color: var(--box-tip-text);
  background-color: var(--box-tip-bg);
  border-color: var(--box-tip-border);
}

.box-warn {
  color: var(--box-warn-text);
  background-color: var(--box-warn-bg);
  border-color: var(--box-warn-border);
}

.box h4 {
  /* Tighter gap */
  display: flex;
  gap: var(--space-s);
  align-items: center;
  margin: 0 0 var(--space-s) 0;
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: inherit;
}

.box h4 iconify-icon {
  font-size: var(--text-2xl);
}

.box-highlight {
  border-color: var(--primary);
}

/* Interações */
.interaction-area {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-m);
  margin-top: var(--space-m);
  margin-bottom: var(--space-m);
  border-top: 1px solid var(--border);
}

.like-count-badge {
  padding: 0;
  font-size: var(--text-base);
  font-weight: 700;
  background: transparent;
  border-radius: 0;
  opacity: 0.9;
}

.like-count-badge::before {
  margin-right: 1px;
  content: '(';
}

.like-count-badge::after {
  margin-left: 1px;
  content: ')';
}

.btn-action {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 0;
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  cursor: pointer;
  background: transparent;
  border: none;
  box-shadow: none;
  transition:
    color var(--duration-smooth) var(--ease-snappy),
    opacity var(--duration-smooth) var(--ease-snappy);
}

.btn-action iconify-icon {
  display: flex;
  align-items: center;

  /* Slightly larger icon for emphasis */
  margin-top: -2px;
  font-size: var(--text-3xl);
  transition: transform var(--duration-smooth) var(--ease-fluid);
}

.btn-action:hover {
  color: var(--like-color);
  background: transparent;
  border: none;
  box-shadow: none;
}

.btn-action:hover iconify-icon {
  transform: scale(1.2);
}

.btn-action:active iconify-icon {
  transform: scale(0.95);
}

/* State Classes */
.btn-action.is-liked,
.mobile-action-btn.is-liked {
  color: var(--like-color);
}

.btn-action.is-liked iconify-icon,
.mobile-action-btn.is-liked iconify-icon {
  color: var(--like-color);
}

.mobile-action-btn.is-saved iconify-icon {
  color: var(--favorite-color);
}

#like-btn.is-liked {
  border-color: var(--like-color);
}

/* --- Share Buttons --- */

.share-container {
  display: flex;
  gap: var(--space-m);
  align-items: center;
}

.share-label {
  margin-right: 4px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
}

.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: var(--text-xl);
  color: white;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  box-shadow: var(--shadow-strong-md);
  transition:
    transform var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy);
}

.share-btn:hover {
  box-shadow: 0 8px 15px var(--black-alpha-15);
  transform: translateY(-3px) scale(1.1);
}

.share-btn:active {
  transform: scale(0.95);
}

.bg-facebook {
  background-color: var(--brand-facebook);
}

.bg-twitter {
  background-color: var(--brand-neutral-black);
}

html.dark-theme .bg-twitter {
  background-color: var(--brand-neutral-800);
}

.bg-linkedin {
  background-color: var(--brand-linkedin);
}

.bg-whatsapp {
  background-color: var(--brand-whatsapp);
}

/* --- Article Newsletter Section --- */
.article__newsletter {
  position: relative;
  padding: var(--space-l);
  margin: var(--space-l) 0 0;
  overflow: hidden;
  text-align: center;
  background: oklch(from var(--primary) l c h / 5%);
  border: 1px solid oklch(from var(--primary) l c h / 10%);
  border-radius: var(--md-sys-shape-corner-extra-large);
}

.article__newsletter::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  content: '';
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.article__newsletter h3 {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-s);
  font-size: var(--font-size-headline-small);
  color: var(--primary);
}

.article__newsletter p {
  max-width: var(--max-width-skeleton-form, 37.5rem);
  margin: var(--space-m) auto;
  font-size: var(--text-base);
  color: var(--text-muted);
}

/* Correção de contraste para newsletter em light mode */

/* Removed hardcoded fixes to use global variables */

.article-newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  justify-content: center;
  max-width: var(--max-width-form-container, 31.25rem);

  /* Limita a largura para não esticar */
  margin: 0 auto;
}

.article-newsletter-input {
  flex: 1 1;
  min-width: 200px;

  /* Reduzido para caber melhor */
  padding: 12px 20px;
  font-size: var(--text-base);
  outline: none;
  border: 1px solid var(--border);
  border-radius: var(--md-sys-shape-corner-full);
  transition:
    border-color var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy);
}

.article-newsletter-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px oklch(from var(--primary) l c h / 10%);
}

.article-newsletter-btn {
  padding: 12px 28px;
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-on-primary);
  cursor: pointer;
  background: var(--md-sys-color-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: var(--md-sys-elevation-level1);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy),
    filter var(--duration-fast) var(--ease-snappy);
}

.article-newsletter-btn:hover {
  background: var(--md-sys-color-primary);
  box-shadow: var(--md-sys-elevation-level2);
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.article-newsletter-btn:active {
  box-shadow: 0 2px 8px oklch(from var(--a11y-primary-dark) l c h / 30%);
  transform: translateY(0);
}

.article-newsletter-feedback {
  display: none;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-l);
  font-weight: var(--font-medium);
  color: var(--status-success);
  animation: fadeIn var(--duration-smooth) var(--ease-fluid);
}

/* Dark Mode Adjustments */
html.dark-theme .article-newsletter-input {
  color: white;
  background: var(--bg-body);
  border-color: var(--white-alpha-10);
}

/* Navbar Overrides */

.navbar {
  background: color-mix(in srgb, var(--bg-card), transparent 15%);
  border-bottom: 1px solid var(--border);
}

/* Responsive (Tablet & Mobile) */

/* Comments Section - Premium Design (Global) */
.article-comments {
  margin-top: var(--space-l);
}

.comments-header {
  display: flex;
  gap: var(--space-m);
  align-items: center;
  margin-bottom: var(--space-m);
}

.comments-header h3 {
  margin: 0;
  font-size: var(--font-size-headline-small);
  font-weight: var(--font-bold);
  color: var(--text-main);
  line-height: 1;
  align-self: center;
}

.comments-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--height-component-xs);
  height: var(--height-component-xs);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: white;
  background: oklch(from var(--primary) min(l, 45%) c h);
  border-radius: 50%;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--primary), transparent 80%);
}

.comment-input-wrapper-inner {
  position: relative;
}

/* Form */
.comment-form-wrapper {
  position: relative;
}

.comment-textarea {
  width: 100%;
  min-height: 7rem;
  padding: var(--space-m);
  font-family: 'Google Sans', sans-serif;
  font-size: var(--text-base);
  color: var(--text-main);
  resize: none;
  outline: none;
  background: color-mix(in srgb, var(--bg-body), black 3%);
  border: 1px solid var(--border);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: inset 0 2px 4px oklch(0% 0 0deg / 2%);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy),
    filter var(--duration-fast) var(--ease-snappy);
}

.comment-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary), transparent 90%);
}

.comment-resize-handle {
  position: absolute;
  right: var(--space-s);
  bottom: var(--space-s);
  color: var(--text-muted);
  pointer-events: none;
  opacity: 0.5;
}

.comment-submit-area {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-m);
}

.btn-submit-premium {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  padding: var(--space-s) var(--space-l);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: white;
  cursor: pointer;
  background: oklch(from var(--primary) min(l, 40%) c h);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary), transparent 75%);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy),
    filter var(--duration-fast) var(--ease-snappy);
}

.btn-submit-premium:hover {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary), transparent 70%);
  transform: translateY(-1px);
}

/* Comments List */
.comments-list-premium {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.comment-item {
  display: flex;
  gap: var(--space-m);
}

.comment-avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--height-component-sm);
  height: var(--height-component-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

/* Avatar Colors */
.avatar-indigo {
  color: var(--md-sys-color-primary);
  background: oklch(from var(--md-sys-color-primary) 94% c h);
}

.avatar-emerald {
  color: var(--status-success);
  background: var(--status-success-bg);
}

.avatar-pink {
  color: var(--md-sys-color-error);
  background: oklch(from var(--md-sys-color-error) 94% c h);
}

/* Dark Mode Adjustments — inline-scripts.js applies html.dark-theme before paint,
   so @media fallback is no longer needed. html.dark-theme rules cover both cases. */

html.dark-theme .comment-textarea {
  background: var(--md-sys-color-surface-container-low);
  border-color: oklch(100% 0 0deg / 5%);
}

html.dark-theme .avatar-indigo {
  color: oklch(from var(--md-sys-color-primary) 85% c h);
  background: oklch(from var(--md-sys-color-primary) l c h / 20%);
}

html.dark-theme .avatar-emerald {
  color: oklch(from var(--status-success) 85% c h);
  background: oklch(from var(--status-success) l c h / 20%);
}

html.dark-theme .avatar-pink {
  color: oklch(from var(--md-sys-color-error) 85% c h);
  background: oklch(from var(--md-sys-color-error) l c h / 20%);
}

.comment-content {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: var(--space-xs);
}

.comment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.comment-author {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-main);
}

.comment-time {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-muted);
}

.comment-text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.comment-actions {
  display: flex;
  gap: var(--space-l);
  align-items: center;
  margin-top: var(--space-s);
}

.action-reply {
  padding: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  transition: color var(--duration-fast) var(--ease-snappy);
}

.action-reply:hover {
  color: var(--primary);
}

.action-like {
  display: flex;
  gap: var(--space-3xs);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-snappy);
}

.action-like:hover {
  color: var(--md-sys-color-error);
}

/* Scroll to top positioned relative to Dock */
.dock-wrapper {
  position: relative;
  width: 100%;
  max-width: var(--max-width-modal-loading, 25rem);
  margin: 0 auto;
}

.dock-fab {
  position: absolute;
  top: -60px;
  right: 0;
  z-index: var(--z-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: white;
  cursor: pointer;
  background: var(--primary);
  border: none;
  border-radius: 50%;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary), transparent 70%);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy),
    filter var(--duration-fast) var(--ease-snappy);
}

.dock-fab:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
}

.dock-fab:active {
  transform: scale(0.95);
}

/* Mobile Action Buttons (Restored) */
.mobile-action-btn {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: 'Google Sans', sans-serif;
  color: var(--text-muted);
  cursor: pointer;
  background: transparent;
  border: none;
}

.mobile-action-btn iconify-icon {
  font-size: var(--text-2xl);
  color: var(--text-main);
  transition: transform var(--duration-smooth) var(--ease-fluid);
}

.mobile-action-btn span {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  opacity: 0.9;
}

.mobile-action-btn:active iconify-icon {
  transform: scale(0.8);
}

.navbar__back {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 16px;
  margin-right: auto;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--text-main);
  text-decoration: none;
  border-radius: var(--md-sys-shape-corner-full);
  transition: background-color var(--duration-fast) var(--ease-snappy);
}

.navbar__back:hover {
  background: oklch(0% 0 0deg / 5%);
}

.navbar__back iconify-icon {
  font-size: var(--text-xl);
}

/* .theme-toggle moved to _badges.css (S.S.O.T.) */

/* Theme Toggle Icon Logic — handled by opacity in _badges.css */

/* Empty State para Comentários */
.comments-empty-state {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: center;
  padding: var(--space-l);
  margin-top: 0;
  color: var(--text-muted);
  text-align: center;
  background: oklch(from var(--bg-body) l c h / 50%);
  border: 1px dashed var(--border);
  border-radius: var(--md-sys-shape-corner-medium);
}

.comments-empty-state iconify-icon {
  margin-bottom: var(--space-3xs);
  font-size: var(--text-3xl);
  color: var(--text-muted);
  opacity: 0.4;
}

.comments-empty-state p {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

/* --- FOOTER OVERRIDES --- */
.footer-article {
  margin-top: auto;
  border-top: 1px solid var(--border);

  /* Padding herdado do footer global (_footer.css) para consistência total */
}

/* .footer-copyright removido pois agora usamos o standard .footer p */

/* --- ARTICLE TABLE --- */
.article-table {
  width: 100%;
  margin: 2rem 0;
  overflow: hidden;
  font-size: var(--text-sm);
  border-collapse: collapse;
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--shadow-sm);
}

.article-table th {
  padding: var(--space-m);
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-on-primary-container);
  text-align: left;
  background: var(--md-sys-color-primary-container);
}

.article-table td {
  padding: var(--space-m);
  background: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

/* --- DYNAMIC CONTENT (CMS Articles via view.html) --- */
.dynamic-content h2 {
  margin-top: 2rem;
  color: var(--primary);
}

.dynamic-content p {
  margin-bottom: 1rem;
  line-height: var(--leading-relaxed);
}

.dynamic-content ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  list-style-type: disc;
}

.dynamic-content li {
  margin-bottom: 0.5rem;
}

/* --- EDIT MODE (CMS Nexus) --- */
[contenteditable='true'] {
  outline: 2px dashed var(--primary);
  outline-offset: 4px;
  border-radius: 4px;
  padding: 4px;
  transition: outline var(--duration-fast) var(--ease-snappy);
}

[contenteditable='true']:focus {
  outline: 2px solid var(--primary);
  background: var(--md-sys-color-surface-container-highest);
}

/* Hide Floating Actions on Article Pages (Prevent Dock Overlap) */
#wrapper-chat,
.chat-fab-btn,
.focus-mode-fab,
.section-sidebar__toggle,
.botao-recrutamento-flutuante,
.skip-link-fab,
.js-back-to-top {
  display: none !important;
}
@media (width > 1024px) {
  .mobile-interaction-bar {
    display: none !important;
  }
}
@media (width <=1024px) {

  /* Hide Desktop Toggle Pill on Mobile (Use Dock Button Instead) */
  .toc-toggle {
    display: none;
  }

  /* Reset Sidebar Container for Full Screen Overlay */
  .toc-sidebar {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    pointer-events: none;
    /* Let clicks pass through when closed */
    background: transparent;
    transition: background-color var(--duration-smooth) var(--ease-fluid);
  }

  /* Dim background overlay when active */
  .toc-sidebar.is-open {
    pointer-events: auto;
    /* Catch clicks on overlay */
    background: oklch(0% 0 0deg / 40%);
    backdrop-filter: blur(4px);
  }

  /* Mobile Sidebar Panel (Slide from Right) */
  .toc-panel {
    top: 0;
    bottom: auto;
    left: auto;
    right: 0;
    width: 85vw;
    max-width: 320px;
    height: 100dvh;
    max-height: 100dvh;
    padding: var(--space-m) var(--space-l) calc(var(--space-l) + env(safe-area-inset-bottom, 20px));
    border: none;
    border-left: 1px solid var(--toc-border);
    border-radius: var(--md-sys-shape-corner-extra-large) 0 0 var(--md-sys-shape-corner-extra-large);
    box-shadow: -8px 0 32px oklch(0% 0 0deg / 15%);
    transform: translateX(100%);
    /* Slide from right */
    transform-origin: right center;
  }

  /* Open State (Mobile Sidebar) */
  .toc-sidebar.is-open .toc-panel {
    transform: translateX(0);
  }
  .page-wrapper {
    padding: var(--space-s) 0 0;
  }

  /* .toc-sidebar display:none removed to allow sliding behavior */

  .article-content {
    padding: var(--space-m) var(--space-xl);
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .box {
    border-right: none;
    border-left: none;
  }

  body {
    padding-top: 60px;
  }

  .interaction-area {
    display: none !important;
  }

  .mobile-interaction-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 70px;
    padding: var(--space-s) var(--space-m) calc(var(--space-s) + env(safe-area-inset-bottom, 0px));
    margin: 0;
    background: oklch(from var(--bg-card) l c h / 80%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: 0 -4px 20px oklch(0% 0 0deg / 5%);
    transform: none;
    transition: transform var(--duration-smooth) var(--ease-fluid);
  }

  .article-newsletter-form {
    flex-direction: column;
  }

  .article-newsletter-btn {
    justify-content: center;
    width: 100%;
  }
}