/* ========== ROLLBACK sidebar grupos: apague este bloco inteiro (até o fim do comentário) e reverta o HTML do .sidebar-nav em index.html ========== */
/* Sidebar nav groups (labels antes de cada conjunto de menu) */
.sidebar-nav .sidebar-nav-group {
  margin-bottom: 14px;
}
.sidebar-nav .sidebar-nav-group:last-child {
  margin-bottom: 0;
}
.sidebar-nav-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #349098;
  opacity: 0.85;
  padding: 8px var(--spacing-lg, 16px) 6px;
  margin: 0;
  line-height: 1.2;
  pointer-events: none;
}
.sidebar-nav .sidebar-nav-group .nav-item {
  margin-left: 0;
}
/* ========== Fim do bloco ROLLBACK sidebar grupos ========== */

/* Badge NOVIDADE no nav-item do sidebar */
.nav-item-new-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  background: rgba(212,175,55,0.15);
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 999px;
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #D4AF37;
  margin-left: auto;
  flex-shrink: 0;
}

/* Home approval rail - overlay nav positions */
.approval-section { position: relative; }
.approval-section .carousel-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.approval-section .carousel-nav[aria-label="Anterior"]{
  left: 8px;
  right: auto;
}
.approval-section .carousel-nav[aria-label="Próximo"]{
  right: 8px;
  left: auto;
}

/* Home banner slider – múltiplos banners (carrossel, logo, etc.) */
.home-banner-slider {
  position: relative;
  margin-bottom: 55px;
  overflow: hidden;
  border-radius: 14px;
  padding-bottom: 28px;
}
.home-banner-slider--single .home-banner-arrow {
  display: none;
}
.home-banner-slider--single .home-banner-dots {
  display: none;
}
.home-banner-slider--single .home-banner-close {
  top: 12px;
  right: 12px;
}
.home-banner-track {
  display: flex;
  transition: transform 0.35s ease-out;
  will-change: transform;
}
.home-banner-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
}
.home-banner-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
  padding-top: 28px;
}
.home-banner-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.home-banner-dot:hover {
  background: rgba(255, 255, 255, 0.7);
}
.home-banner-dot[aria-current="true"] {
  background: #fff;
  transform: scale(1.2);
}

/* Setas do slider de banner */
.home-banner-arrow {
  position: absolute;
  top: -webkit-calc(50% - 18px);
  transform: translateY(-50%);
  z-index: 3;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.home-banner-arrow:hover {
  background: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.home-banner-arrow:active {
  background: rgba(255, 255, 255, 0.35);
}
.home-banner-prev {
  left: 10px;
}
.home-banner-next {
  right: 10px;
}
.home-banner-arrow svg {
  display: block;
}

@media (max-width: 600px) {
  .home-banner-arrow {
    width: 32px;
    height: 32px;
  }
  .home-banner-prev { left: 6px; }
  .home-banner-next { right: 6px; }
}

/* Home banner (slide único) – ativo até data_expiracao no banners.json */
.home-banner {
  position: relative;
  padding: 20px 48px 28px 20px;
  background: linear-gradient(135deg, rgb(104 121 227 / 54%) 0%, rgb(140 78 166 / 54%) 100%);
  border: 0px solid rgba(99, 102, 241, 0.25);
  border-radius: 14px;
  overflow: hidden;
}
.home-banner-slider--single .home-banner-content {
    padding: 0;
}
.home-banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 40px;
}

@media (max-width: 760px) {
  .home-banner-content {
      flex-direction: column;
      align-items: flex-start;
      padding-left: 40px !important;
      padding-right: 5px !important;
  }
}

.home-banner-text {
  flex: 1;
  min-width: 0;
  width: 100%;
}
.home-banner-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.home-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.95);
}
.home-banner-icon svg {
  display: block;
}
.home-banner-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}
.home-banner-subtitle {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}
.home-banner-cta {
  flex-shrink: 0;
  margin-right: 30px;
  background: #ffffffe3;
  color: #24152f;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.home-banner-cta:hover{
  background: #349098;
  color: #ffffff;
}

.home-banner-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  /*background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);*/
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
  right: 70px;
  top: 30px;
  background:transparent;
  color:  rgba(255, 255, 255, 0.9);
}


@media (max-width: 460px) {
  .home-banner-close {
    top: 12px !important;
    right: 12px !important;
  }
}

.home-banner-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
@media (max-width: 600px) {
  .home-banner {
    padding: 16px 44px 24px 16px;
  }
  .home-banner-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .home-banner-slider--single .home-banner-content {
    padding: 0;
    padding-left: 5px !important;
  }
  .home-banner-cta {
    width: 100%;
    text-align: center;
  }
}

/* Requested overrides */
.edit-option {
  min-height: 130px !important;
  height: 130px !important;
}
.modal.carousel-edit-image-modal .edit-option {
  min-height: 100px !important;
  height: 100px !important;
}
.post-status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  left: auto !important;
  box-shadow: 0px 0px 8px rgb(0 0 0 / 37%);
  z-index: 9;
}
/* Post edit modal: position edit button at bottom center */
.container-stories-edit #edit-image{
  position: absolute;
  left: auto !important;
  bottom: 12px !important;
  width: 90% !important;
  margin: 0 5% auto !important;
  display: block;
}
@media (min-width: 769px) {
  .container-stories-edit #edit-image {
    width: 50% !important;
    margin-left: 25% !important;
    margin-right: 25% !important;
  }
  .modal.modal-choose-template .modal-body {
    max-height: 100vh !important;
  }
}

/* Spacing for edit title stack groups */
.edit-title-stack .form-group{
  margin-bottom: 10px !important;
}


/* Post edit modal: position edit button at bottom center */
.edit-modal #edit-image{
  position: absolute;
  left: auto !important;
  bottom: 12px !important;
  width: 90% !important;
  margin: 0 5% auto !important;
  display: block;
  border: 1px solid #282828;
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.25);
  padding: 16px 20px;
  border-radius: 6px;
  color: #349098;
}
@media (min-width: 769px) {
  .edit-modal #edit-image {
    width: 50% !important;
    margin-left: 25% !important;
    margin-right: 25% !important;
  }
}

.add-slide-modal .add-card {
  height: 115px !important;
  min-height: 100px !important;
}

@media (max-width: 768px) {
  .carousel-preview-modal .modal-body > div > div.cp-left {
    padding-bottom: 0px !important;
  }
  .carousel-preview-modal .cp-right .btn {
    margin-top: 20px;
  }



  .modal-edit-carousel .edit-title-stack{
    display: block !important;
  }
}

@media (max-width: 768px) {
  .apply-image-modal {
    height: auto !important;
  }
  .apply-image-modal .modal-footer {
    opacity: 0 !important;
  }
}

/* Add slide modal sizing */
.add-slide-modal {
  max-width: 590px !important;
}
@media (max-width: 768px) {
  .add-slide-modal {
    height: 80% !important;
  }
}
@media (min-width: 1024px) {
  .add-slide-modal .add-card {
    height: 130px !important;
    min-height: 130px !important;
  }
}

.img-ref{
  align-self: start !important;
}

/* Edit image modal tweaks */
@media (max-width: 1600px) {
  .edit-title-stack {
    grid-template-columns: 35% 65% !important;
  }
}

@media (min-width: 2600px) {
  .edit-title-stack {
    grid-template-columns: 22% 77% !important;
  }
}

.carousel-edit-image-modal .ecp-edit {
  max-height: 100vh !important;
}
@media (max-width: 768px) {
  .modal.carousel-preview-modal, .carousel-edit-image-backdrop {
    max-width: 100vw;
    width: 100vw;
    padding: 16px 8px 16px 16px;
  }
  .modal.carousel-preview-modal .modal-header, 
  .modal.modal-preview-video .modal-header, 
  .modal.modal-preview-story .modal-header, 
  .modal.modal-edit-video .modal-header, 
  .modal.modal-edit-story .modal-header, 
  .modal.modal-choose-template .modal-header, 
  .modal-full-prophoto .modal-header,
  .carousel-edit-image-backdrop .modal-header {
    padding: 22px 0px 14px 0px !important;
  }
  .carousel-edit-image-backdrop .edit-option{
    min-height: 130px;
    height: 130px;
  }
  .carousel-edit-image-backdrop .edit-section-image{
    margin-top: 40px !important;
  }
  /* Create Post main wrapper spacing */
  .create-post-columns, .create-post-form {
    margin-bottom: 0px !important;
  }
  .create-post-columns {
    padding: 10px !important;
  }
}

.modal .modal-body > div.approve-modal-content > div {
  /* default (desktop) can remain untouched; mobile overrides below */
}

@media (max-width: 768px) {
  .modal .modal-body > div.approve-modal-content > div {
    margin-bottom: 20px;
    width: 100% !important;
    max-width: 100% !important;
  }
  .modal .modal-body > div.approve-modal-content > div:first-child:nth-last-child(2) {
    padding-bottom: 10px !important;
  }
}
/* Ajuste de padding/margin em Settings */
.settings-container .settings-content .card > div:first-of-type {
  padding: 10px;
  margin-top: 20px;
}

button.brand-color {
  width: 60px !important;
  height: 45px !important;
  border-radius: 4px !important;
  border: 1px solid #000 !important;
}

@media (max-width: 768px) {
  .modal.onboarding-modal-instagram {
    height: 80vh !important;
  }
}

@media (max-width: 768px) {
  .modal.modal-preview-video {
    transform: none !important;
    top: 0 !important;
    left: 0 !important;
  }
}

@media (max-width: 640px) {
  .modal.modal-revisar-reel,
  .modal.modal-video-preview-reel {
    transform: none !important;
    top: 0 !important;
    left: 0 !important;
  }

  /* Calendar — card de vídeo: 55% de largura e centralizado */
  .post-card--story .post-card-thumbnail,
  .post-card--video .post-card-thumbnail {
    width: 55%;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 9 / 16 !important;
    overflow: hidden;
  }

  /* Mobile: imagem e vídeo preenchem o container 9/16 absolutamente */
  .post-card--video .post-card-thumbnail img,
  .post-card--video .post-card-thumbnail video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
    object-fit: cover;
  }
}

/* Desktop header blur and fixed positioning */
@media (min-width: 1025px) {
  .app-header {
    position: fixed;
    top: var(--banner-offset, 0px);
    left: 0;
    right: 0;
    z-index: 100;
    height: 70px;
    /* OPACITY: 0.9; */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: #101721c4;
  }
}

.modal.onboarding-modal-instagram .alert {
  background: transparent !important;
  border: 0px solid #334156 !important;
  color: #bbb !important;
  border-radius: 0;
  padding: 0 !important;
  font-size: 14px;
  margin-top: 30px;
}

.modal.onboarding-modal-instagram .text-secondary {
  color: #fff !important;
  font-weight: 600;
}

/* Onboarding adjustments */
.onb-step-card {
  padding: 10px 20px !important;
}

/* CTA “Criar meu primeiro conteúdo”: fundo em degradê animado + leve pulse */
.onb-step-card.onb-step-card--cta {
  border: none !important;
  background: transparent !important;
  box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
  animation: onbCtaPulse 2.4s ease-in-out infinite;
  padding: 16px 15px !important;
}
.onb-step-card.onb-step-card--cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  z-index: 0;
  background: linear-gradient(125deg, #312e81, #5b21b6, #7c3aed, #c026d3, #4f46e5, #312e81);
  background-size: 320% 320%;
  animation: onbCtaGradientShift 5.5s ease infinite;
}
.onb-step-card.onb-step-card--cta > * {
  position: relative;
  z-index: 1;
}
.onb-step-card.onb-step-card--cta svg {
  stroke: #fff !important;
}
.onb-step-card.onb-step-card--cta h3 {
  color: #fff !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
@keyframes onbCtaGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes onbCtaPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.35);
  }
  50% {
    box-shadow: 0 0 22px 6px rgba(124, 58, 237, 0.22);
  }
}
.onboarding-section-title {
  font-weight: 400 !important;
  font-size: 0.8rem !important;
  margin-top: 4px !important;
  padding-bottom: 0 !important;
  color: #d1d5db !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0 !important;
}

@media (max-width: 768px) {
  .onboarding-page {
    padding: 3px !important;
  }
}

/* Forçar altura do modal de criação do onboarding */
.modal.onboarding-modal-create {
  height: 90vh !important;
}

/* Instagram bio header and name styles */
.instagram-bio-header {
  display: flex !important;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}
.instagram-fullname {
  font-size: 17px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 12px;
}

/* Header user avatar */
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  padding: 4px;
}

small.ai-sub{
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-height: 16px;
  display: -webkit-box !important;
}
/* Spacing for approve modal buttons */
.approve-modal-content .btn{
  margin-right: 7px;
}
/* Imagens do seletor de galeria (posts) */
.img-card {
  aspect-ratio: 4 / 5 !important;
}

/* Content type grid (3 side-by-side) */
.content-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.content-type-grid .ct-item {
  border: 1px solid var(--premium-border, #222);
  background: #0f1115;
  color: #e5e7eb;
  border-radius: 10px;
  padding: 12px 10px;
  cursor: pointer;
  transition: .18s ease;
}
.content-type-grid .ct-item:hover { background: #141922; border-color: #2a3342; }
.content-type-grid .ct-item.active { background: #1a3026; border-color: #3a6445; }
@media (max-width: 768px) {
  html.hv3 .cr3--split .suggestions-header h3{
    margin-bottom: 20px;
  }
  .content-type-grid { grid-template-columns: repeat(2, 1fr); }
  .content-type-grid .ct-item {
    border: 1px solid var(--premium-border, #222);
    background: #0f1115;
    color: #e5e7eb;
    border-radius: 10px;
    padding: 13px 7px;
    cursor: pointer;
    transition: .18s ease;
    font-weight: 600;
    font-size: 15px;
    line-height: 19px;
  }
}

/* Template type grid (3 side-by-side) */
.template-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.template-type-grid .tt-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--premium-border, #222);
  background: #0f1115;
  color: #e5e7eb;
  border-radius: 10px;
  padding: 10px 8px;
  cursor: pointer;
  transition: .18s ease;
  font-size: 13px;
}
.template-type-grid .tt-item:hover { background: #141922; border-color: #2a3342; }
.template-type-grid .tt-item.active { background: #1a3026; border-color: #3a6445; }
.template-type-grid .tt-item .tt-icon { display: inline-flex; align-items: center; justify-content: center; opacity: .95; }
.template-type-grid .tt-item .tt-icon svg { width: 22px; height: 22px; }
.template-type-grid .tt-item .tt-icon ~ span { display: inline-block; text-align: center; line-height: 1.2; }
@media (max-width: 768px) {
  .template-type-grid { grid-template-columns: repeat(3, 1fr); }
  .template-type-grid .tt-item { padding: 9px 5px; font-size: 13px; }
  .template-type-grid .tt-item .tt-icon ~ span {
    display: inline-block;
    text-align: center;
    line-height: 1.2;
    font-weight: 600;
    font-size: 13px;
  }
}

/* ── Seção Customizar (criação de post / carrossel) ── */
.cp-customize-card {
  background: linear-gradient(135deg, #0d111a 0%, #111827 100%);
  border: 1px solid #1e2a3a;
  border-radius: 14px;
  overflow: hidden;
}
.cp-customize-card__header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px 10px;
  border-bottom: 1px solid #1a2234;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.cp-customize-card__header:hover { color: #c4cfe0; }
.cp-cust-chevron {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform .22s ease;
  color: #4b5563;
}
.cp-customize-card.is-collapsed .cp-cust-chevron { transform: rotate(-90deg); }
.cp-customize-card.is-collapsed .cp-customize-card__body { display: none; }
.cp-customize-card__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.cp-cust-col {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cp-cust-col:first-child { border-right: 1px solid #1a2234; }
.cp-cust-col__label {
  font-size: 10px;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
}
/* Template thumbnail */
.cp-cust-tpl-thumb {
  width: 110px;
  aspect-ratio: 4 / 5;
  border-radius: 9px;
  overflow: hidden;
  background: #151c28;
  border: 1px solid #2a3342;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
/* Hover overlays (desktop only) */
.cp-cust-thumb-overlay,
.cp-cust-swatch-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0,0,0,.52);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
  color: #fff;
}
.cp-cust-tpl-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cp-cust-tpl-thumb--auto {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #4b5563;
  font-size: 10px;
  text-align: center;
  padding: 6px;
  line-height: 1.3;
}
@keyframes cp-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.cp-cust-tpl-skeleton {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #1a1f2e 25%, #232838 50%, #1a1f2e 75%);
  background-size: 200% 100%;
  animation: cp-shimmer 1.5s infinite;
}
/* Color swatch */
.cp-cust-color-swatch {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 2px rgba(212,175,55,.5), 0 4px 12px rgba(0,0,0,.4);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
  background: #2a3342;
}
@media (hover: hover) {
  .cp-cust-color-swatch:hover { transform: scale(1.1); box-shadow: 0 0 0 2px #D4AF37, 0 6px 16px rgba(0,0,0,.5); }
  .cp-cust-color-swatch:hover .cp-cust-swatch-overlay { opacity: 1; }
  .cp-cust-tpl-thumb:hover .cp-cust-thumb-overlay { opacity: 1; }
}
.cp-cust-color-swatch.is-loading {
  background: linear-gradient(90deg, #1a1f2e 25%, #232838 50%, #1a1f2e 75%);
  background-size: 200% 100%;
  animation: cp-shimmer 1.5s infinite;
  box-shadow: none;
  border-color: #2a3342;
  pointer-events: none;
}
/* Action buttons */
.cp-cust-btn {
  font-size: 11px;
  color: #6b8afd;
  background: rgba(107,138,253,.08);
  border: 1px solid rgba(107,138,253,.18);
  border-radius: 7px;
  cursor: pointer;
  padding: 5px 11px;
  transition: .15s ease;
  width: fit-content;
  white-space: nowrap;
}
.cp-cust-btn:hover {
  background: rgba(107,138,253,.18);
  border-color: rgba(107,138,253,.4);
  color: #8fa3ff;
}
.cp-cust-btn:disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}
/* Save color checkbox */
.cp-cust-save-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #6b7280;
  cursor: pointer;
  line-height: 1.3;
  margin-top: 2px;
}
.cp-cust-save-label input[type="checkbox"] {
  accent-color: #6b8afd;
  width: 13px;
  height: 13px;
  cursor: pointer;
  flex-shrink: 0;
}
/* Color picker inside modal */
.cp-color-modal-palette { display: flex; flex-wrap: wrap; gap: 10px; }
.cp-color-modal-swatch {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: 0 0 0 2px transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: transform .12s ease;
}
.cp-color-modal-swatch:hover { transform: scale(1.15); }
.cp-color-modal-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px #D4AF37;
}
.cp-color-modal-swatch.selected::after {
  content: '✓';
  position: absolute; right: -5px; top: -5px;
  background: #D4AF37; color: #111;
  width: 15px; height: 15px; border-radius: 50%;
  font-size: 9px;
  display: flex; align-items: center; justify-content: center;
}
.cp-color-modal-group { margin-bottom: 16px; }
.cp-color-modal-group__title {
  font-size: 11px; color: #6b7280; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 10px;
}
/* Modal de cores: fullscreen no mobile */
@media (max-width: 767px) {
  .cp-color-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
  }
  .cp-color-modal .cp-color-modal-group { margin-bottom: 0; }
}
@media (max-width: 768px) {
  .modal .modal-body > div > div.cp-color-modal-group {
    padding-bottom: 12px !important;
  }
  .modal.editar-template .modal-body {
    overflow-y: scroll !important;
  }
}

@media (min-width: 1025px) {
  .main-content {
    margin-top: 70px;
    margin-left: 266px;
    /* Altura = tela menos o header. Com 100vh o main passava 70px da janela: o <html> (overflow: hidden)
       ganhava 70px de rolagem, e qualquer scrollIntoView/focus subia o app inteiro para trás do header
       sem jeito de voltar (faixa de outra cor embaixo) e escondia o fim de todas as páginas. */
    height: calc(100vh - (70px + var(--banner-offset, 0px)));
    overflow-y: scroll;
    overflow-x: hidden;
    /* FERNANDO */
    position: absolute;
    width: calc(100% - 266px);
  }
}

/* Desktop page content padding and bounds */
@media (min-width: 1025px) {
  #page-content {
    padding: 27px !important;
    margin-left: 30px;
    margin-top: 0px;
    max-width: 100%;
    max-width: -webkit-calc(100% - 72px);
    padding-bottom: 60px !important;
  }
}
/* Image source grid */
.image-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.image-source-grid .is-item {
  border: 1px solid var(--premium-border, #222);
  background: #0f1115;
  color: #e5e7eb;
  border-radius: 10px;
  padding: 12px 10px;
  cursor: pointer;
  transition: .18s ease;
}
.image-source-grid .is-item:hover { background: #141922; border-color: #2a3342; }
.image-source-grid .is-item.active { background: #1a3026; border-color: #3a6445; }
.image-source-grid .is-item.active {
  background: #1a3026;
  border-color: #3a6445;
}
.image-source-grid .is-item[aria-disabled="true"] {
  opacity: .55;
  pointer-events: none;
  filter: grayscale(.2);
}
@media (max-width: 768px) {
  .image-source-grid { grid-template-columns: repeat(2, 1fr); }
  .image-source-grid .is-item {
    border: 1px solid var(--premium-border, #222);
    background: #0f1115;
    color: #e5e7eb;
    border-radius: 10px;
    padding: 9px 17px;
    cursor: pointer;
    transition: .18s ease;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
  }
}

/* Form two-col layout inside create form */
.cp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7%;
}
.cp-form-col { min-width: 0; }
@media (max-width: 1024px) {
  .cp-form-grid { grid-template-columns: 1fr; gap: 20px !important; }
}

/* Criar post: tema vs link + prévia de URL */
.cp-mode-toggle {
  display: inline-flex;
  gap: 0;
  margin-bottom: 12px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--premium-border, #2a3342);
  background: #0f1115;
}
.cp-mode-btn {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: #9aa0a6;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cp-mode-btn:hover {
  color: #e5e7eb;
  background: rgba(255, 255, 255, 0.04);
}
.cp-mode-btn.active {
  background: #1a2230;
  color: #e5e7eb;
}
.cp-link-hint {
  margin-top: 6px;
  font-size: 13px;
}
.cp-link-preview-loading {
  margin-top: 10px;
  font-size: 13px;
  color: #9aa0a6;
}
.cp-link-preview {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--premium-border, #2a3342);
  background: #12161c;
  max-width: 100%;
}
.cp-link-preview-body {
  flex: 1;
  min-width: 0;
}
.cp-link-preview-source-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cp-link-preview-site-logo {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: contain;
  flex-shrink: 0;
  background: #1a1f27;
}
.cp-link-preview-site-name {
  font-size: 13px;
  color: #9aa0a6;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-link-open-article {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #c4c9d1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cp-link-open-article:hover {
  background: rgba(107, 142, 253, 0.2);
  color: #e5e7eb;
}
.cp-link-preview-title {
  font-size: 15px;
  font-weight: 600;
  color: #e5e7eb;
  line-height: 1.35;
  margin-bottom: 4px;
}
.cp-link-preview-meta {
  font-size: 12px;
  color: #9aa0a6;
}
.cp-link-preview-thumb-wrap {
  flex-shrink: 0;
  width: 88px;
  border-radius: 8px;
  overflow: hidden;
  background: #0b0e12;
}
.cp-link-preview-img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  display: block;
}
.cp-link-preview--google-news .cp-link-preview-thumb-wrap {
  display: none !important;
}

/* Override: outer layout now has only one column; internal cp-form-grid handles 2-col */
.create-post-columns {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 24px;
}

/* Duration grid (teleprompter v2) */
.video-duration-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.video-duration-grid .vd-item {
  border: 1px solid var(--premium-border, #222);
  background: #0f1115;
  color: #e5e7eb;
  border-radius: 10px;
  padding: 16px 10px;
  cursor: pointer;
  transition: .18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.video-duration-grid .vd-item .vd-icon { opacity: .9; }
.video-duration-grid .vd-item:hover { background: #141922; border-color: #2a3342; }
.video-duration-grid .vd-item.active { background: #1a3026; border-color: #3a6445; }
@media (max-width: 768px) {
  .video-duration-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Form labels weight */
.create-post-form .form-label {
  font-weight: 600;
}

/* Create button sizing and spacing */
.create-post-form .create-content-btn {
  margin-top: 22px;
  align-self: stretch;
}
@media (min-width: 1025px) {
  .create-post-form .create-content-btn {
    align-self: flex-start;
    width: calc((100% - 7%) / 2);
  }
}

/* Suggestions block tweaks */
.create-post-suggestions {
  background: #070b10a1 !important;
  border: 0;
  padding: 30px;
  border-radius: 20px;
  margin-bottom: 20px;
  margin-top: 40px;
}
.suggestions-subtitle {
  margin: 3px 0 25px !important;
  color: #9aa0a6;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  #page-content {
    padding: 20px 10px !important;
  }
}

@media (max-width: 480px) {
  .create-content-btn {
    font-size: 0.875rem;
    padding: 0.875rem 1.5rem;
    margin-top: 10px !important;
  }
}

@media (max-width: 768px) {
  .create-post-form {
    border-radius: 14px;
    padding: 10px;
    padding-bottom: 90px;
    margin-top: 0px !important;
  }

  .create-post-suggestions{
    border-radius: 14px;
    padding: 16px;
    padding-bottom: 90px;
    margin-top: 0px !important;
  }
}

/* Override mobile padding specifically for suggestions */
@media (max-width: 768px) {
  .create-post-suggestions {
    border-radius: 14px;
    padding: 22px;
    padding-bottom: 90px;
  }
}

/* Form group spacing */
.create-post-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.section-edit-content-carousel .form-group {
  margin-bottom: 20px !important;
  gap: 0.2rem;
}

.form-group {
  margin-bottom: 40px;
}
@media (max-width: 768px) {
  .modal.onboarding-modal-create,
  .modal.onboarding-modal-prophoto,
  .modal.onboarding-modal-audience {
    max-height: initial !important;
    height: 95vh !important;
  }
}
/* Ajuste solicitado para div[1] (segundo div dentro do card) */
.settings-container .settings-content .card > div:nth-of-type(2) {
  padding: 10px;
  margin-top: 20px;
}
/**
 * Pulmo 2.0 - Custom Styles
 * Estilos específicos para componentes e páginas
 */

/* ==================== POSTS PAGE ==================== */
.card.mb-lg {
  background: #101721;
}

.posts-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.posts-filters {
  display: flex;
  gap: var(--spacing-xs);
}

.filter-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: default;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color-dark);
  transition: all 0.2s;
}

.filter-btn:hover {
  background: var(--background-color);
}

.filter-btn.active {
  background: #ffffff2b;
  color: #fff;
}

.posts-actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.cal-source-filter {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 3px;
}

.cal-source-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: #8b949e;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.cal-source-btn:hover {
  color: #e6edf3;
  background: rgba(255,255,255,0.06);
}

.cal-source-btn.active {
  background: rgba(88,166,255,0.18);
  color: #58a6ff;
}

/* Grupo direito do toolbar: type + source */
.cal-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-toolbar-right .cal-source-filter {
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,0.1);
}
/* Dropdown de origem só aparece no mobile */
.cal-src-dropdown--mobile { display: none; }

/* Type filter dropdown */
.cal-type-dropdown {
  position: relative;
}
.cal-type-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  appearance: none;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #c9d1d9;
  border-radius: 8px;
  padding: 7px 14px 7px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.cal-type-toggle:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.22);
}
.cal-type-toggle svg { flex-shrink: 0; }
.cal-type-toggle-chevron {
  margin-left: 2px;
  opacity: 0.5;
  transition: transform 0.15s;
}
.cal-type-dropdown.open .cal-type-toggle-chevron { transform: rotate(180deg); }
.cal-type-menu {
  min-width: 190px;
  background: #161b22;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 6px;
  z-index: 9999;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.cal-type-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  color: #8b949e;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.cal-type-opt:hover { background: rgba(255,255,255,0.07); color: #e6edf3; }
.cal-type-opt.active { background: rgba(255,255,255,0.1); color: #e6edf3; font-weight: 600; }
.cal-type-opt-icon { display: flex; align-items: center; flex-shrink: 0; }

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-box svg {
  position: absolute;
  left: 12px;
  opacity: 0.5;
}

.search-box input {
  padding-left: 40px;
  width: 250px;
}

.posts-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.posts-container.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--spacing-xl);
}

.post-card {
  background: var(--surface-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  position: relative;
}

.posts-container.list-view .post-card {
  flex-direction: row;
}

.btn.btn-outline-secondary.btn--sm {
  color: #666;
  font-weight: 400;
  border: 1px solid #484646;
  border-radius: 6px;
  padding: 5px 10px;
}

#rn-source-section .btn.btn-outline-secondary.btn--sm {
    color: #7b93b4;
    border: 2px dashed #304362;
    border-radius: 12px;
}

/* Create Post / Story */
.create-post-main {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.create-post-columns, .create-post-form {
  margin-bottom: 50px;
}

.create-post-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px;
  align-items: stretch;
  background: #161c23 !important;
  padding: 40px;
  border-radius: 20px;
}

.create-post-form {
  background: transparent;
  border: 0;
}

.create-post-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.create-post-form .create-content-btn {
  margin-top: 0px;
  align-self: stretch;
}

.create-post-suggestions {
  background: transparent;
  border: 0;
}

/* Quando create-post-suggestions fica fora do create-post-columns (ex: vídeo) */
.create-post-main > .create-post-suggestions {
  background: #070b10a1 !important;
  border: 0;
  padding: 30px;
  border-radius: 20px;
  margin-top: 20px;
}

.suggestions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.suggestions-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #e5e7eb;
}

.suggestions-subtitle {
  margin: 15px 0 25px;
  color: #9aa0a6;
  font-size: 0.9rem;
}

.suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  padding: 1px;
}
.suggestions-list::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0.6) 0%, rgba(15,23,42,0.2) 35%, rgba(15,23,42,0) 100%);
  border-radius: 16px;
  pointer-events: none;
  opacity: 0.6;
}
.suggestions-list > * {
  position: relative;
  z-index: 1;
}

.suggestion-card {
  padding: 17px;
  background: #0f172a;
  border: 1px solid #1f2937;
  border-radius: 14px;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.5;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
}
.suggestion-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--suggestion-bg, linear-gradient(135deg, rgba(102, 126, 234, 0.18), rgba(118, 75, 162, 0.12)));
  opacity: 0.9;
  z-index: -1;
}
.suggestion-card:nth-child(4n+1) { --suggestion-bg: linear-gradient(135deg, rgba(102,126,234,0.22), rgba(118,75,162,0.18)) !important; }
.suggestion-card:nth-child(4n+2) { --suggestion-bg: linear-gradient(135deg, rgba(34,180,167,0.22), rgba(18,119,178,0.18)) !important; }
.suggestion-card:nth-child(4n+3) { --suggestion-bg: linear-gradient(135deg, rgba(236,118,72,0.22), rgba(219,39,119,0.18)) !important; }
.suggestion-card:nth-child(4n+4) { --suggestion-bg: linear-gradient(135deg, rgba(248,196,113,0.22), rgba(226,149,76,0.18)) !important; }

.suggestion-card:hover,
.suggestion-card.active {
  border-color: var(--primary-color, #4a90e2);
  box-shadow: 0 0 0 1px rgba(74, 144, 226, 0.25);
  transform: translateY(-1px);
  color: #f1f5f9;
}

.suggestion-card.skeleton {
  color: transparent;
  pointer-events: none;
}

.suggestion-card.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: shimmer 1.4s infinite;
}

/* Espaço para a tag de categoria nas sugestões */
#tpv2-help .suggestion-card,
.create-post-suggestions .suggestion-card,
#recommendations-list .suggestion-card {
  padding-right: 16px;
}

/* Tag de categoria e textos das recomendações estruturadas */
.tpv2-sugg-cat {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #111;
  border: 1px solid #333;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  opacity: .9;
  pointer-events: none;
}
.tpv2-aud-wrap {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tpv2-aud-wrap .tpv2-sugg-cat { position: static; pointer-events: none; }
.tpv2-aud-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #333;
  border-radius: 50%;
  background: #111;
  color: #c9ced6;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
}
.tpv2-aud-tip {
  position: absolute;
  top: 24px;
  right: 0;
  min-width: 20vh;
  background: #111;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: #e5e7eb;
  display: none;
  z-index: 10;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
@media (hover: hover) {
  .tpv2-aud-wrap:hover .tpv2-aud-tip { display: block; }
}
.tpv2-aud-wrap.open .tpv2-aud-tip { display: block; }

#toggle-edit-caption{
  border: 1px solid #282828;
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.25);
  padding: 16px 20px;
  border-radius: 6px;
}
.approval-carousel .approval-info h4{
  display: none;
}

.approval-carousel .approval-info .text-secondary.text-sm{
  color: #abb0b5 !important;
}

#posts-container .btn[data-action="reject"],
#stories-container .btn[data-action="reject"],
#videos-grid .btn[data-action="reject"],
#carousel-container .btn[data-action="reject"],
.approval-info .btn-outline-primary[data-action="reject"],
#preview-reject{
  color: #d98f8f;
  background: #3d1f1f;
  border: 0px !important;
}

#posts-container .btn[data-action="reject"]:hover,
#stories-container .btn[data-action="reject"]:hover,
#videos-grid .btn[data-action="reject"]:hover,
#carousel-container .btn[data-action="reject"]:hover,
#posts-container .btn[data-action="reject"]:hover,
.approval-info .btn-outline-primary[data-action="reject"]:hover,
#preview-reject:hover{
  color: #ffffff;
  border: 0px !important;
}

.type-badge{
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: #ecaf4994 !important;
    color: #fff !important;
}

/* Create Post/Story - audience accordion wrapping */
#cp-acc-toggle {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  white-space: normal;
}
#cp-acc-label {
  flex: 1 1 auto;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
}
#cp-acc-toggle > span:last-child {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: 8px;
}
.tpv2-sugg-title {
  font-weight: 700;
  margin-right: 70px;
  font-size: 18px;
  margin-top: 30px;
  margin-right: 0 !important;
  margin-bottom: 10px;
}
.tpv2-sugg-just {
  font-size: 14.5px;
  opacity: 1;
  margin-top: 6px;
  line-height: 1.5;
  font-family: 'Lato', sans-serif;
}

.suggestions-empty {
  padding: 18px;
  border: 1px dashed rgba(148, 163, 184, 0.3);
  border-radius: 12px;
  color: #9aa0a6;
  font-size: 0.9rem;
  text-align: center;
}

.create-post-loading {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  /* Ensure loading content stacks vertically (rows) */
  flex-direction: column;
  gap: 14px;
}

.create-post-loading .preview-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.create-post-loading .preview-loading svg {
  width: 120px;
  height: 120px;
}

/* Onboarding create content */
.onb-create-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 420px;
  padding: 16px;
}

.onb-create-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
  align-items: flex-start;
}

.onb-create-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.onb-create-suggestions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.onb-create-suggestions .text-secondary {
  margin-top: -3px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: #9aa0a6;
  line-height: 16px;
}

.onb-suggestions-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.onb-suggestion.btn {
  display: block;
  width: 100%;
  padding: 20px 10px;
  border-radius: 14px;
  border: 1px solid rgba(102, 126, 234, 0.35);
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.22), rgba(118, 75, 162, 0.18));
  color: #f1f5f9;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  line-height: 21px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.onboarding-modal .modal-body {
  padding: 0 !important;
}

.onboarding-modal .onb-preview-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 24px;
  padding: 24px;
}

.onboarding-modal .onb-preview-main {
  display: flex;
  gap: 24px;
  flex: 1;
  min-height: 0;
}

.onboarding-modal .onb-preview-media {
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: 12px;
  padding: 12px;
}

.onboarding-modal .onb-preview-image {
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  border-radius: 12px;
}

.onboarding-modal .onb-preview-details {
  flex: 1;
  overflow: auto;
  padding-right: 8px;
}

.onboarding-modal .onb-preview-details h2 {
  margin: 0 0 12px;
  color: #e5e7eb;
}

.onboarding-modal .onb-preview-details p {
  color: #bdc0c3;
  white-space: pre-line;
  line-height: 1.6;
}

.onboarding-modal .onb-preview-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.onboarding-modal .onb-preview-actions-left,
.onboarding-modal .onb-preview-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.onboarding-modal .onb-preview-actions .btn {
  min-width: 180px;
}

@media (max-width: 768px) {
  .onboarding-modal .onb-preview-main {
    flex-direction: column;
  }

  .create-post-main {
    margin-top: 60px;
  }


  .onboarding-modal .onb-preview-media {
    flex: 0 0 auto;
    width: 100%;
  }

  .onboarding-modal .onb-preview-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .onboarding-modal .onb-preview-actions-left,
  .onboarding-modal .onb-preview-actions-right {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .onboarding-modal .onb-preview-actions .btn {
    width: 100%;
  }
}

.onb-suggestion.btn:hover,
.onb-suggestion.btn.active {
  border-color: rgba(102, 126, 234, 0.55);
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.15);
  transform: translateY(-1px);
  color: #fff;
}

.onb-preview-loading {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  border-radius: 12px;
}

@media (max-width: 1200px) {
  .create-post-columns {
    grid-template-columns: 1fr;
  }

  .create-post-form,
  .create-post-suggestions {
    padding: 24px;
  }

  .create-post-form .create-content-btn {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .create-post-main {
    gap: 24px;
  }

  .create-post-form,
  .create-post-suggestions {
    border-radius: 14px;
    padding: 20px;
  }
  /* Ajuste de espaçamento para grupos do formulário no mobile */
  .create-post-form .form-group {
    margin-bottom: 34px !important;
  }

  .onb-create-columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .onb-create-form,
  .onb-create-suggestions {
    width: 100%;
  }

  .onb-create-wrapper {
    padding: 12px;
  }

  .onb-suggestion.btn {
    padding: 18px 12px;
  }
}

@media (max-width: 768px) {
  .create-post-layout {
    padding: 0 !important;
  }
  .suggestion-card {
    padding: 10px;
  }
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/*.post-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}*/

/* Normalize icon alignment for "Criar Conteúdo" buttons */
#create-content-btn, .create-content-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
#create-content-btn svg, .create-content-btn svg {
  margin-right: 2px;
  vertical-align: middle;
}

/* Align icon + text consistently on key action buttons */
#home-quick-create-btn,
#refresh-suggestions,
#refresh-recommendations,
#generate-script {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.post-card-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 1 !important;
  cursor: pointer;
  height: auto;
  height: intrinsic;
  margin-bottom: 5px;
}
.post-card-thumbnail--draft {
  margin-bottom: 15px;
}

.posts-container.list-view .post-card-thumbnail {
  width: 200px;
  aspect-ratio: 4 / 5;
  flex-shrink: 0;
}

.post-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-card-thumbnail video {
  position: absolute;
  width: 50%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  display: block;
}

@media (min-width: 641px) {
  /* Container: altura fixa 30vh com largura proporcional 9:16, centralizado */
  .post-card--video .post-card-thumbnail,
  .post-card--story .post-card-thumbnail {
    height: 41vh;
    width: auto;
    aspect-ratio: 9 / 16 !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Conteúdo preenche o container 9:16 centralizado */
  .post-card--video .post-card-thumbnail img,
  .post-card--video .post-card-thumbnail video,
  .post-card--story .post-card-thumbnail img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: none;
    object-fit: cover;
    object-position: center;
  }
}

.post-card-thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1e2736 0%, #2a3347 100%);
}

.post-card-thumb-placeholder--teleprompter {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 8px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(12, 16, 24, 0.94), rgba(88, 166, 255, 0.16));
}

.post-card-thumb-placeholder--video {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 8px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(12, 16, 24, 0.94), rgba(88, 166, 255, 0.16));
}

.calendar-tp-clip-line {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(230, 237, 243, 0.95);
  line-height: 1.35;
}

.calendar-tp-clip-line--muted {
  opacity: 0.72;
}

.post-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
  border-radius: inherit;
  /* Permitir que elementos abaixo (ex.: carousel-nav) recebam hover/clicks */
  pointer-events: none;
}

.post-card:hover .post-card-overlay {
  opacity: 1 !important;
}

/* Garantir que o hover funcione mesmo após re-renderização */
#carousel-container .post-card:hover .post-card-overlay {
  opacity: 1 !important;
}

#carousel-container .post-status-badge{
  z-index: 1;
}

/* Garantir que o carousel-thumb não bloqueie o hover do overlay */
.post-card-thumbnail .carousel-thumb {
  z-index: 1;
  position: relative;
}

.post-card-thumbnail .post-card-overlay {
  z-index: 20;
}

/* Ensure calendar "video overlay" icons/spinners are always above placeholders */
.post-card-thumb-placeholder {
  position: relative;
  z-index: 5;
}

.post-card-video-overlay {
  z-index: 30;
}

.post-card-thumbnail .post-card-video-overlay > * {
  max-width: 70%;
}

/* Teleprompter recording draft: separar overlay e placeholder (stack um sobre o outro) */
.post-card--tp-recording .post-card-thumb-placeholder--teleprompter {
  transform: translateY(12px);
}

.post-card--tp-recording .post-card-video-overlay > span {
  transform: translateY(-12px);
}

/* Forçar hover após filtro - garantir que funcione */
.post-card-thumbnail:hover .post-card-overlay,
.post-card:hover .post-card-thumbnail .post-card-overlay {
  opacity: 1 !important;
}

.post-card-overlay .btn-icon-white,
.post-card-overlay button {
  /* Reabilitar interações apenas nos botões do overlay */
  pointer-events: auto;
}

/* Audience modal (desktop/mobile shared) */
.aud-list {
  max-height: 60vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: initial;
  margin-top: 6px;
}
.audience-modal-desktop{
  height: 100%;
}
.audience-modal-desktop .aud-item {
  padding: 30px 30px;
  border-bottom: 1px solid var(--border-color, #222);
  cursor: pointer;
  background: transparent;
  color: #e5e7eb;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}
.audience-modal-desktop .modal-body{
  overflow: hidden;
}

/* Ensure desktop audience modal fills height */
.audience-modal-desktop {
  height: 100% !important;
}

@media (max-width: 768px) {
  .modal .modal-body > div > div.aud-custom {
    margin-bottom: 20px;
    padding-bottom: 0 !important;
  }

  #pv-media-col #preview-media-toggle button{
    width: 50% !important;
  }

}

/* Override max-height for desktop audience list */
.audience-modal-desktop .aud-list {
  max-height: none !important;
}

/* Carousel Edit Image modal styling hooks */
.carousel-edit-image-modal {
  position: relative; /* hook present; avoid empty ruleset lint */
}
.carousel-edit-image-modal .modal-body {
  overflow: hidden;
  padding: 0px !important;
}
.carousel-edit-image-modal .ecp-edit {
  max-height: 70vh;
}
.carousel-edit-image-modal .ecp-index .idx-btn {
  min-width: 44px;
}

/* Explicit styles requested */
.carousel-edit-image-modal .img-ref {
  align-self: stretch;
  display: block !important;
}

.carousel-edit-image-modal .edit-advanced-fields .form-group{
  margin-bottom: 20px;
}

.carousel-edit-image-modal .edit-section-image{
  margin-top: 50px;
}


.carousel-edit-image-modal .ecp-index {
  margin-top: 8px;
  display: flex;
}
@media (min-width: 769px) {
  .carousel-edit-image-modal #ecp-add-slide-btn {
    max-width: 160px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}
.carousel-edit-image-modal .ecp-index {
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
  margin: 20px 0px !important;
}

/* Mobile override for template selection cards inside modal */
@media (max-width: 1024px) {
  .modal .modal-body > div > div.tpl-card {
    margin-bottom: 0px !important;
    padding-bottom: 20px !important;
  }
}
.carousel-edit-image-modal .ecp-index .idx-btn.active {
  background: #349098 !important;
  border-color: #349098;
  color: #fff;
}

/* Backdrop blur for "Aplicar imagem" modal */
.apply-image-modal-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgb(0 0 0 / 76%) !important;
  z-index: 9999999;
  position: absolute !important;
  z-index: 1001 !important;
}

/* Mobile adjustments for Carousel Edit Image modal */
@media (max-width: 768px) {
  .modal.carousel-edit-image-modal .modal-body > div > div {
    margin-bottom: 20px;
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .carousel-edit-image-modal .img-ref {
    align-self: stretch;
    display: contents !important;
  }

  .carousel-edit-image-modal .ecp-index {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0px;
    margin: 10px 0px 20px !important;
  }

  #ecp-add-slide-btn{
    margin-bottom: 15px;
  }
}

/* ====== Carousel Preview modal — mesmo padrão do edit-modal (desktop) ====== */
.carousel-preview-modal {
  position: relative;
}
/* Body: position:absolute idêntico ao edit-modal */
.carousel-preview-modal .modal-body {
  position: absolute !important;
  top: 30px !important;
  bottom: 46px !important;
  left: 0 !important;
  right: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  margin-top: 40px !important;
  max-height: -webkit-calc(100% - 170px) !important;
  max-height: calc(100% - 170px) !important;
}
/* Grid vira flex-row com colunas de altura igual */
.carousel-preview-modal .carousel-preview-grid {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  height: 100% !important;
}
/* Coluna esquerda: largura fixa, altura 100%, sem scroll */
.carousel-preview-modal .cp-left {
  flex: 0 0 54% !important;
  max-width: 54% !important;
  height: 100% !important;
  overflow: hidden !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
/* Coluna direita: flex:1, altura 100%, scroll interno */
.carousel-preview-modal .cp-right {
  flex: 1 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 0 !important;
  min-width: 0 !important;
}
/* Footer carousel: mesmo padrão do edit-modal */
.modal-choose-template > .actions-footer,
.carousel-preview-modal > .actions-footer {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 24px 12px !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
  background: var(--surface-color, #0d1117);
  border-top: 1px solid var(--premium-border, #1f1f22);
  box-sizing: border-box;
  width: 100%;
}
.carousel-preview-modal > .actions-footer #preview-reject {
  margin-left: auto !important;
}
.carousel-preview-modal .ecp-preview {
  max-width: 540px;
}
.carousel-preview-modal .ecp-nav {
  z-index: 2;
  font-weight: 800;
  background: rgb(236 175 73 / 88%) !important;
}
/* Setas straddling the edge of ecp-preview: metade dentro, metade fora */
.carousel-preview-modal .ecp-nav.prev {
  left: -20px !important;
}
.carousel-preview-modal .ecp-nav.next {
  right: -20px !important;
}


/* Slides inativos não devem capturar toque (mobile): só o slide ativo recebe eventos */
.ecp-preview .ecp-slide:not(.active),
.carousel-thumb .carousel-slide:not(.active) {
  pointer-events: none !important;
}
.ecp-preview .ecp-slide.active,
.carousel-thumb .carousel-slide.active {
  pointer-events: auto;
}
/* Mobile: vídeo recebe toques (play/pause); evitar que container roube o gesto */
.ecp-preview video,
.carousel-thumb video,
.approve-modal-content .ecp-preview video {
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

/* Overlay de play no vídeo (mobile): toque no overlay dispara play() no mesmo gesto */
.video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  z-index: 2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.video-play-overlay.hidden {
  display: none !important;
}
.video-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  padding-left: 6px;
  box-sizing: border-box;
}
.video-play-error {
  position: absolute;
  bottom: 12px;
  left: 8px;
  right: 8px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.6);
  padding: 6px 8px;
  border-radius: 6px;
}
.carousel-thumb .carousel-slide-video {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
}
.carousel-preview-backdrop {
  background: rgba(0,0,0,0.30) !important;
}
/* Adjust preview height */
.carousel-preview-modal .ecp-preview {
  height: -webkit-calc(100% - 60px) !important;
}
/* spacing for edit button in preview modal */
.carousel-preview-modal #edit-image{
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
@media (max-width: 768px) {
  .carousel-preview-modal #edit-image {
    width: 90% !important;
    margin: 5% auto !important;
    display: block;
  }
}
@media (min-width: 769px) {
  .carousel-preview-modal #edit-image {
    width: 50% !important;
    margin-left: 25% !important;
    margin-right: 25% !important;
  }
}
@media (max-width: 768px) {
  .carousel-preview-modal .modal-body > div > div {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Stronger style for idx buttons */
.ecp-index .idx-btn {
  width: 39px !important;
  min-width: 39px !important;
  height: 39px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border-color, #222) !important;
  background: #111 !important;
  color: #e5e7eb !important;
  font-size: 13px !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  cursor: grab !important;
}


.ecp-index .idx-btn[data-kind="cover"],
.ecp-index .idx-btn[data-kind="ending"]{
  font-size: 11px !important;
}

.ecp-index .idx-placeholder {
  border: 1px dashed #374151 !important;
  background: transparent !important;
  pointer-events: none;
}
/* Extra gap between groups (cover | slides | ending) */
.ecp-index .idx-btn.group-gap {
  margin-left: 14px !important;
}

/* Add button behavior */
.ecp-index .idx-btn.add {
  cursor: pointer !important;
  border: 1px dashed var(--border-color, #222) !important;
}

/* Confirm discard modal backdrop */
.confirm-discard-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(0,0,0,0.45) !important;
  z-index: 1002 !important;
}
/* Ensure discard modal is above */
.confirm-discard-modal {
  z-index: 1003 !important;
}


.modal.modal-large.editar-template.editar-template-criar-conteudo.modal-choose-template{
  height: 90vh !important;
}
.modal .modal-body > div > div.pctpl-grid{
  display: grid !important;
}

.modal .modal-body > div > div.pctpl{
  padding-bottom: auto !important;
}

/* Upload overlay (progress on top of editor) */
.upload-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.upload-overlay .box {
  min-width: 280px;
  background: #2d2d2d;
  border: 1px solid #1f1f1f;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.upload-overlay .upl-label {
  color: #e5e7eb;
  font-weight: 600;
  font-size: 13px;
}
.upload-overlay .upl-pct {
  color: #9ca3af;
  font-weight: 600;
  font-size: 12px;
}

/* Ensure nav above slides in edit modal; keep overlay above all */
.carousel-edit-image-modal .ecp-edit .slide {
  z-index: 3 !important; /* acima de plano de fundo, abaixo das setas */
  pointer-events: auto;
}
.carousel-edit-image-modal .ecp-edit .nav {
  z-index: 5;
}

/* Desabilitar cartões de edição quando aria-disabled=true */
.carousel-edit-image-modal .edit-option[aria-disabled="true"]{
  pointer-events: none !important;
  opacity: .5 !important;
  filter: grayscale(1);
  cursor: not-allowed !important;
}
/* === Mobile rules requested === */
@media (max-width: 768px) {
  .modal.carousel-edit-image-backdrop .form-group {
    margin-bottom: 10px;
  }
  .modal.carousel-edit-image-modal .modal-body > div > div {
    margin-bottom: 20px;
    padding-bottom: 10px !important;
  }
  .modal.carousel-edit-image-modal .modal-footer {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .add-slide-modal .add-grid{
        margin: 0 !important;
    padding: 0 !important;
  }

  .add-slide-modal .modal-footer{
    display: none !important;
  }

}

/* === Additional mobile adjustments for Edit Image modal === */
@media (max-width: 768px) {
  .modal.carousel-edit-image-modal .edit-section-image {
    margin-top: 40px !important;
  }
  .modal.carousel-edit-image-modal #edit-image {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  .modal.carousel-edit-image-modal .edit-option {
    min-height: 80px !important;
    height: 108px !important;
  }
  .apply-image-modal {
    height: 100% !important;
  }
  /* "div[primeiro] div[primeiro]" -> first nested grid wrappers */
  .modal.carousel-edit-image-modal .modal-body > div:first-child > div:first-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}
.post-card-edit-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 10;
  border-radius: inherit;
}

.post-card-edit-overlay button {
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

.post-card-edit-overlay:hover button {
  transform: scale(1);
}

.btn-icon-white {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: all 0.2s;
  color: #fff;
}

.btn-icon-white:hover {
  background: #fff;
  color: var(--text-color-dark);
}

.post-status-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.post-status-badge.status-published {
  background: #0c9e65b8;
  color: #fff;
}

.post-status-badge.status-scheduled {
  background: #4996ec94;
  color: #fff;
}

.post-status-badge.status-draft {
  background: #aa6c0380;
  color: #fff;
}
.post-status-badge.status-pending {
  background: #aa6c0380;
  color: #fff;
}
.post-status-badge.status-rejected {
  background: #6b6b6b99 !important;
  color: #fff;
}

.post-card-content {
  padding: var(--spacing-lg);
  padding-right: 6px;
  padding-left: 8px;
  flex: 1;
  cursor: pointer;
  padding-top: 20px;
}

.post-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 8px;
}

.post-card-caption {
  font-size: 0.9375rem;
  color: #bdc0c3;
  margin: 0 0 22px;
  padding-top: 20px;
  line-height: 1.5;
}

.post-card-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

/* Linha principal: badge de tipo + chip de data */
.pcm-row {
  display: flex;
  align-items: center;
}
.pcm-row--main {
  justify-content: flex-start;
  gap: 8px;
}
.pcm-row--sub {
  gap: 6px;
  padding-top: 12px;
}

/* Badge de tipo de conteúdo */
.pcm-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  line-height: 1.4;
  white-space: nowrap;
  background: rgba(108, 99, 255, 0.13);
  color: #a59fff;
  border: 1px solid rgba(108, 99, 255, 0.22);
}
.pcm-badge--info    { background: rgba(52, 144, 220, 0.12); color: #74b9e9; border-color: rgba(52, 144, 220, 0.22); }
.pcm-badge--edu     { background: rgba(34, 181, 194, 0.12); color: #22b5c2; border-color: rgba(34, 181, 194, 0.22); }
.pcm-badge--prev    { background: rgba(52, 199, 100, 0.12); color: #5ecf7f; border-color: rgba(52, 199, 100, 0.22); }
.pcm-badge--mot     { background: rgba(255, 159, 28, 0.12); color: #f59f00; border-color: rgba(255, 159, 28, 0.22); }
.pcm-badge--alert   { background: rgba(255, 107, 107, 0.12); color: #ff8787; border-color: rgba(255, 107, 107, 0.22); }
.pcm-badge--default { background: rgba(108, 117, 125, 0.12); color: #868e96; border-color: rgba(108, 117, 125, 0.22); }
.pcm-badge--neutral { background: rgba(148, 163, 184, 0.08); color: #94a3b8; border-color: rgba(148, 163, 184, 0.18); }
.pcm-badge--video   { background: rgba(139, 92, 246, 0.12); color: #a78bfa; border-color: rgba(139, 92, 246, 0.22); }
.pcm-badge--standalone {
  display: inline-flex;
}

/* Chip de data */
.pcm-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  line-height: 1.4;
}
.pcm-date svg { flex: 0 0 auto; }
.pcm-date--scheduled {
  background: rgba(52, 144, 152, 0.12);
  color: #349098;
  border: 1px solid rgba(52, 144, 152, 0.22);
}
.pcm-date--created {
  background: rgba(108, 117, 125, 0.1);
  color: #868e96;
  border: 1px solid rgba(108, 117, 125, 0.15);
}

/* Refs no topo do card — destaque */
.post-card > .pcm-research-card {
  margin: 0;
  border-radius: 0;
  border-bottom: 0px solid rgba(99, 179, 237, 0.18);
  background: rgba(99, 179, 237, 0.1);
  padding: 18px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.post-card > .pcm-research-card .pcm-research-card-label {
  font-size: 0.7rem;
  color: rgba(99, 179, 237, 0.9);
  margin-bottom: 7px;
}
.post-card > .pcm-research-card .srb-ref-title {
  font-size: 0.87rem;
  font-weight: 600;
  color: #c3dff5;
}
.post-card > .pcm-research-card .srb-ref-meta {
  font-size: 0.75rem;
  color: #7aaccc;
}
.post-card > .pcm-research-card .srb-ref-logo {
  width: 22px;
  height: 22px;
}
.post-card > .pcm-research-card .srb-ref-logo--large {
  width: auto !important;
  max-width: 100px;
  max-height: 36px !important;
  align-self: flex-start;
  margin-left: 0;
}
.post-card > .pcm-research-card .pcm-research-more {
  color: rgba(99, 179, 237, 0.85);
  font-size: 0.72rem;
  padding-top: 5px;
}

/* Linha de origem abaixo do type+date */
.pcm-origin-row {
  margin-top: 5px;
}

/* Atribuição Pulmo IA */
.pcm-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: #4a4a6a;
  letter-spacing: 0.2px;
  margin-top: 5px;
}
.pcm-source svg { flex: 0 0 auto; opacity: 0.7; fill: #6b6ed3; }

.pcm-source--plan {
  color: #5ecf7f;
}
.pcm-source--plan svg { stroke: #5ecf7f; fill: none; opacity: 0.85; }

.pcm-type-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.pcm-source--right {
  margin-left: auto;
}

/* icon + text inline for meta items (outras páginas) */
.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.meta-item svg { flex: 0 0 auto; display: inline-block; }

.post-card-hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hashtag-mini {
  padding: 2px 8px;
  background: rgba(0, 123, 255, 0.1);
  color: var(--primary-color);
  border-radius: 4px;
  font-size: 0.75rem;
}

.hashtag-more {
  font-size: 0.75rem;
  color: #6c757d;
}

.post-card-actions {
  padding: var(--spacing-md);
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Hide actions while video is uploading/processing */
.post-card.video-uploading .post-card-actions {
  display: none !important;
}

/* Square loader ratio while uploading */
.post-card.video-uploading .video-loading-container{
  aspect-ratio: 1/1 !important;
}

/* ==================== BIO GENERATOR PAGE ==================== */

.bio-suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--spacing-xl);
  padding: var(--spacing-lg) 0;
}

@media (min-width: 1200px) {
  .bio-suggestions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bio-suggestion-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transition: all 0.2s;
}

.bio-suggestion-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.bio-suggestion-header {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
}

.bio-type-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bio-type-formal {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.bio-type-informal {
  background: rgba(236, 72, 153, 0.1);
  color: #ec4899;
}

.bio-type-neutro {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

.bio-suggestion-content {
  padding: var(--spacing-lg);
}

.bio-suggestion-actions {
  padding: var(--spacing-md);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

/* Instagram Bio Mockup */
.instagram-bio-mockup {
  background: #fff;
  border-radius: 12px;
  padding: var(--spacing-xl);
  max-width: 375px;
  margin: 0 auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.instagram-bio-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.instagram-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #e5e7eb;
  flex-shrink: 0;
}

.instagram-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.instagram-bio-content {
  text-align: left;
}

.instagram-username {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 4px;
}

.instagram-fullname {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 12px;
}

.instagram-bio-text {
  font-size: 14px;
  line-height: 1.6;
  color: #262626;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.instagram-bio-text br {
  line-height: 1.8;
}

.instagram-bio-link {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.instagram-bio-link a {
  color: #2385e2;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.instagram-bio-link a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .bio-suggestions-grid {
    grid-template-columns: 1fr;
  }
  
  .instagram-bio-mockup {
    max-width: 100%;
  }
}

/* ==================== VIDEO PAGE ==================== */

.videos-toolbar {
  padding: 0;
}

.videos-filters {
  display: flex;
  gap: var(--spacing-xs);
}

.videos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
}

@media (max-width: 1320px) {
  .videos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .videos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .videos-grid {
    grid-template-columns: 1fr;
  }
}

.video-card {
  background: var(--surface-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
}

.video-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;
  background: #000;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.video-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  cursor: default;
}

.video-card:hover .video-play-overlay {
  opacity: 1;
}

.video-status-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
}

.video-info {
  padding: var(--spacing-md);
}

.video-info h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 8px;
}

.video-info p {
  font-size: 0.875rem;
  color: #6c757d;
  margin: 0 0 8px;
}

.video-meta {
  font-size: 0.75rem;
  color: #6c757d;
  display: flex;
  gap: 8px;
}

.video-actions {
  padding: var(--spacing-md);
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ==================== VIDEO CREATION / TELEPROMPTER ==================== */

.video-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.5;
}

.step.active,
.step.completed {
  opacity: 1;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--background-color);
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-bottom: 8px;
}

.step.active .step-number {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

.step.completed .step-number {
  background: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}

.step-label {
  font-size: 0.875rem;
  font-weight: 500;
}

.step-line {
  width: 80px;
  height: 2px;
  background: var(--border-color);
  margin: 0 0 24px 0;
}

.video-step-content {
  display: none;
}

.video-step-content.active {
  display: block;
}

.script-section {
  margin-bottom: var(--spacing-lg);
}

.script-box {
  background: var(--background-color);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
  min-height: 100px;
  line-height: 1.8;
}

.script-box.editable:focus {
  outline: 2px solid var(--primary-color);
}

.teleprompter-container {
  display: grid;
  grid-template-rows: 200px 1fr auto auto;
  gap: var(--spacing-lg);
  height: calc(100vh - 300px);
}

.camera-preview {
  position: relative;
  background: #000;
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.camera-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recording-indicator {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.recording-dot {
  width: 12px;
  height: 12px;
  background: #f00;
  border-radius: 50%;
  animation: pulse-red 1s infinite;
}

@keyframes pulse-red {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.teleprompter-screen {
  background: #000;
  color: #fff;
  border-radius: var(--border-radius-md);
  overflow-y: auto;
  padding: var(--spacing-xl);
  padding-top: 25vh;
  text-align: center;
}

.teleprompter-text {
  font-size: 37px;
  font-weight: 600;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto;
}

.teleprompter-text .instruction {
  color: #aeaeae;
  font-weight: 400;
}

.tp-section {
  margin-bottom: 40px;
}

.tp-hook {
  font-weight: 700;
  color: var(--warning-color);
}

.tp-cta {
  font-weight: 600;
  color: var(--accent-color);
}

.teleprompter-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg);
  padding: 20px !important;
  border-radius: 100px !important;
  box-shadow: 0px 0px 20px #2d2a2a !important;
  background: #00000038 !important;
  flex-wrap: wrap;
  width: min(520px, calc(100% - 32px));
  margin: 0 auto;
}

.teleprompter-controls .btn {
  min-width: 140px;
  flex: 1 1 160px;
  padding: 12px 18px;
  justify-content: center;
  text-align: center;
}

.video-preview-frame {
  position: relative;
  width: min(340px, calc(100vw - 32px));
  margin: 0 auto 1.5rem;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.video-preview-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.btn-large {
  padding: 20px 40px;
  font-size: 1.125rem;
}

.teleprompter-settings {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xl);
}

.teleprompter-settings label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.875rem;
}

/* ==================== CALENDAR ==================== */

/* Calendar card right panel: gradient on calendar-main, full height */
.calendar-main.calendar-card {
  background: linear-gradient(135deg, #222833 0%, #1a283d 20%, #1a2332 50%, #1a2332 75%, #1a2332 100%) !important;
  border-radius: 12px;
  overflow: hidden;
  border: 0px;
  height: auto !important;
  padding: 0 !important;
}

/* Toolbar igual da imagem: mês/ano, setas, botão Hoje */
.calendar-main .calendar-toolbar {
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.calendar-main .calendar-toolbar-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.calendar-toolbar-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  color: inherit;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.calendar-toolbar-btn-icon:hover {
  background: rgba(255, 255, 255, 0.25);
}

.calendar-mini-month-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
}

.calendar-mini-month-overlay[aria-hidden="false"] {
  pointer-events: auto;
}

.calendar-mini-month-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

.calendar-mini-month-dropdown {
  position: relative;
  z-index: 1001;
  width: 50vw;
  max-width: 520px;
  min-width: 280px;
  height: 85vh;
  max-height: 720px;
  padding: 0;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}

.calendar-mini-month-dropdown .calendar-mini-month-wrap {
  margin-bottom: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.calendar-mini-month-dropdown .calendar-mini-month {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.calendar-mini-month-dropdown .calendar-mini-month-days {
  flex: 1;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  gap: 4px;
  min-height: 0;
}

.calendar-main .calendar-toolbar-chevron {
  width: 36px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.calendar-main .calendar-toolbar-chevron:hover {
  background: #181a1b;
  border-color: #fff;
  color: #fff;
}

.calendar-main .calendar-toolbar-label {
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
}

.calendar-main .calendar-card-grid-wrap {
  padding: 6px 6px 8px;
  background: transparent;
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.calendar-grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-xl);
}

.calendar-grid {
  padding: 0;
}

/* Right panel: grid com border-radius, sem linhas entre dias, altura 100% */
.calendar-main .calendar-grid {
  padding: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: visible;
  background: transparent;
  border: 1px solid #25282b;
}

.calendar-main .calendar-weekdays-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  padding: 4px 6px 2px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.calendar-main .calendar-weekday-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(139, 148, 158, 0.92);
  user-select: none;
}

.calendar-main .calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  background: transparent;
  border: none;
  flex: 1;
  min-height: 0;
}

.calendar-main .calendar-day {
  min-height: 110px;
  background: linear-gradient(0deg, #222833 0%, #3c4353 100%) !important;
  padding: 8px;
  cursor: default;
  transition: background 0.2s;
  color: #e6edf3;

  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
}

.calendar-main .calendar-day:hover {
  background: #33373b;
}

.calendar-main .calendar-day.empty {
  background: #21262d;
  cursor: default;
}

.calendar-main .calendar-day.today {
  background: rgba(88, 166, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.4);
}

/* Past days (month + week) */
.calendar-main .calendar-day.day--past {
  background: #16202c !important;
  box-shadow: none !important;
}

.calendar-main .calendar-day.day--past .day-number {
  color: #495870 !important;
}

.calendar-main .day-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Fallback when not inside .calendar-main (e.g. other pages) */
.calendar-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  margin-bottom: 1px;
}

.calendar-day-name {
  padding: 10px 8px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #8b949e;
  background: #25282b;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #272727;
  border: 1px solid #25282b;
}

.calendar-day {
  min-height: 110px;
  background: #181a1b;
  padding: 8px;
  cursor: default;
  transition: background 0.2s;
  color: #e6edf3;
}

.calendar-day:hover {
  background: #33373b;
}

.calendar-day.empty {
  background: #21262d;
  cursor: default;
}

.calendar-day.today {
  background: rgba(88, 166, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.4);
}

.calendar-day.today .day-number {
  background: #58a6ff;
  color: #fff;
}

/* ==================== Month view (quadrados com bolinhas) ==================== */
.calendar-main .calendar-days--month {
  gap: 6px;
  padding: 6px 6px 8px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-content: start;
}

.calendar-main .calendar-days--month .calendar-day {
  min-height: 0;
  padding: 8px;
  border-radius: 14px;
  aspect-ratio: 1 / 1;
  background: #1C2330;
  min-width: 0;
  align-items: center;
  cursor: pointer;
}

.calendar-main .calendar-days--month .calendar-day.empty-day {
  background: #16202c;
}

.calendar-main .calendar-days--month .calendar-day.empty {
  background: transparent !important;
  border: transparent !important;
}

.calendar-main .calendar-days--month .calendar-day.today {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.22) 0%, rgba(255, 215, 0, 0.06) 60%, rgba(28, 35, 48, 1) 100%);
  box-shadow: inset 0 0 0 2px #e1c51e;
}

.calendar-main .calendar-days--month .calendar-day.today .day-number {
  color: #e1c51e;
}

.calendar-main .calendar-days--month .calendar-day:hover {
  background: inherit;
}

.calendar-main .calendar-days--month .day-top {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.calendar-main .calendar-days--month .day-number {
  width: auto;
  height: auto;
  border-radius: 0;
  margin-bottom: 0;
  background: transparent;
  /* Escala com a viewport; em telas grandes não passa de 18px */
  font-size: min(14px, 1.04vw);
  font-weight: 600;
  margin-top: 14px;
  margin-top: min(0px, 14px);
}

.calendar-main .calendar-days--month .day-dots {
  margin-top: 0;
  padding-top: 4px;
  padding-bottom: 0;
  justify-content: center;
  gap: 3px 2px;
  flex-wrap: wrap;
  min-height: 14px;
  max-height: 30px;
  overflow: hidden;
  align-content: flex-start;
}

.calendar-main .calendar-days--month .calendar-event--dot {
  width: 10px;
  height: 10px;
  padding: 0;
  margin-bottom: 0;
}

.calendar-main .calendar-days--month .calendar-day-dot--shape {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.03);
}

/* Conteúdo agendado/publicado → green */
.calendar-main .calendar-days--month .calendar-day.day--has-content {
  background: rgba(63, 185, 80, 0.18) !important;
  border-color: rgba(63, 185, 80, 0.30);
}

.calendar-main .calendar-days--month .calendar-day.day--has-content.day--past .day-number{
  color: #2d6341 !important;
}

/* Para aprovar → yellow */
.calendar-main .calendar-days--month .calendar-day.day--has-pending {
  background: rgba(241, 212, 74, 0.18);
  border-color: rgba(241, 212, 74, 0.30);
}

/* Dia selecionado → outline highlight */
.calendar-main .calendar-days--month .calendar-day.day--selected {
  outline: 2px solid rgba(88, 166, 255, 0.8);
  outline-offset: -2px;
}

/* No home widget, não mostrar seleção de dia */
.home-calendar-embed .calendar-main .calendar-days--month .calendar-day.day--selected {
  outline: none;
}

/* Badge de contagem de conteúdos no dia */
.calendar-main .calendar-days--month .day-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  align-self: center;
  min-width: 18px;
  max-width: 36px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  background: rgba(88, 166, 255, 0.25);
  color: #58a6ff;
  margin-top: 3px;
}

.calendar-main .calendar-days--month .calendar-day.day--has-pending .day-count-badge {
  background: rgba(241, 212, 74, 0.3);
  color: #c9a227;
}

.calendar-main .calendar-days--month .calendar-day.day--has-content .day-count-badge {
  background: rgba(63, 185, 80, 0.25);
  color: #3fb950;
}

/* Rejeitado/falhou → red */
.calendar-main .calendar-days--month .calendar-day.day--has-failed {
  background: rgba(248, 81, 73, 0.18);
  border-color: rgba(248, 81, 73, 0.30);
}

.calendar-main .calendar-days--month .calendar-day.day--has-failed .day-count-badge {
  background: rgba(248, 81, 73, 0.25);
  color: #f85149;
}

.day-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-bottom: 4px;
  color: #e6edf3;
  background: transparent;
}

.calendar-day .day-number {
  margin-bottom: 0;
}

.day-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calendar-event {
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.75rem;
  cursor: default;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.calendar-event.post {
  background: rgba(0, 123, 255, 0.1);
  color: var(--primary-color);
  border-left: 3px solid var(--primary-color);
}

.calendar-event.video {
  background: rgba(220, 53, 69, 0.1);
  color: var(--danger-color);
  border-left: 3px solid var(--danger-color);
}

.calendar-event:hover {
  transform: translateX(2px);
}

.day-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 28px;
}

.day-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding-top: 6px;
  min-height: 18px;
}

/* ===== Month dots (each dot is clickable) ===== */
.calendar-event--dot {
  padding: 0;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: none;
}

.calendar-event--dot:hover {
  transform: none;
}

.calendar-day-dot--shape {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.03);
}

/* published → green */
.calendar-day-dot--published.calendar-day-dot--shape {
  background: #3fb950;
  box-shadow: 0 0 0 3px rgba(63, 185, 80, 0.18);
}

/* pending approval → yellow */
.calendar-day-dot--pending.calendar-day-dot--shape {
  background: #f1d44a;
  box-shadow: 0 0 0 3px rgba(241, 212, 74, 0.18);
}

/* planned (scheduled by plan) → blue */
.calendar-day-dot--planned.calendar-day-dot--shape {
  background: #58a6ff;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.18);
}

/* avulso (manual scheduled) → blue */
.calendar-day-dot--avulso.calendar-day-dot--shape {
  background: #58a6ff;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.18);
}

.calendar-day-dot--more {
  font-size: 10px;
  color: #c9d1d9;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 2px 6px;
  line-height: 1.2;
}

/* ===== Right panel: Agendamentos ===== */
.calendar-agenda-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  padding: 0px;
  border-radius: 12px;
  overflow: hidden;
  background: #1C2330;
  border: 1px solid rgba(255, 255, 255, 0.06);
  height: auto;
}

/* Desktop: painel transparente, toolbar e grid substituem o card */
.cal-agenda-toolbar {
  display: block;
}
.cal-agenda-toolbar.card:hover {
  border-color: rgba(255,255,255,0.06) !important;
  transform: none !important;
  box-shadow: var(--shadow-sm) !important;
}

#cal-agenda-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

@media (min-width: 1441px) {
  #cal-agenda-posts-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 2001px) {
  #cal-agenda-posts-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 2501px) {
  #cal-agenda-posts-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Equaliza altura dos thumbs no grid do calendário — sem corte, conteúdo centralizado no thumb */
#cal-agenda-posts-grid .post-card-thumbnail,
#cal-agenda-posts-grid .post-card--video .post-card-thumbnail,
#cal-agenda-posts-grid .post-card--story .post-card-thumbnail {
  height: 50vh !important;
  width: 100% !important;
  aspect-ratio: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  overflow: hidden !important;
}

@media (min-width: 1441px) {
  #cal-agenda-posts-grid .post-card-thumbnail,
  #cal-agenda-posts-grid .post-card--video .post-card-thumbnail,
  #cal-agenda-posts-grid .post-card--story .post-card-thumbnail {
    height: 45vh !important;
  }
}

@media (min-width: 1921px) {
  #cal-agenda-posts-grid .post-card-thumbnail,
  #cal-agenda-posts-grid .post-card--video .post-card-thumbnail,
  #cal-agenda-posts-grid .post-card--story .post-card-thumbnail {
    height: 30vh !important;
  }
}

#cal-agenda-posts-grid .post-card-thumbnail img {
  position: static !important;
  height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  inset: unset !important;
  transform: none !important;
}

#cal-agenda-posts-grid .post-card-thumbnail video {
  position: static !important;
  height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
}

#cal-agenda-posts-grid .post-card-thumb-placeholder,
#cal-agenda-posts-grid .post-card-thumb-placeholder--video,
#cal-agenda-posts-grid .post-card-thumb-placeholder--teleprompter {
  width: 100% !important;
  height: 100% !important;
}

/* Compact mobile list — always hidden (replaced by card grid) */
.calendar-agenda-panel .calendar-agenda-header,
.calendar-agenda-panel .calendar-agenda-list {
  display: none !important;
}

.calendar-agenda-header {
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 0;
}

.calendar-agenda-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #e6edf3;
}

.calendar-agenda-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
  width: 100%;
}

.calendar-agenda-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.calendar-agenda-tab {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #c9d1d9;
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.calendar-agenda-tab.active {
  background: linear-gradient(135deg, rgba(88, 166, 255, 0.22) 0%, rgba(88, 166, 255, 0.06) 60%, rgba(28, 35, 48, 1) 100%);
  border-color: rgba(88, 166, 255, 0.35);
  color: #fff;
}

.calendar-agenda-list {
  min-height: 0;
  overflow-y: auto;
  padding: 8px 8px 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.calendar-agenda-empty {
  color: #8b949e;
  padding: 16px 6px;
  font-size: 0.9rem;
  text-align: center;
}

.calendar-event--agenda {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 10px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  margin-bottom: 0;
  transition: background 0.2s, border-color 0.2s;
  min-width: 0;
}

.calendar-event--agenda:hover {
  transform: none;
  background: rgba(88, 166, 255, 0.08);
  border-color: rgba(88, 166, 255, 0.25);
}

.calendar-agenda-thumb {
  flex-shrink: 0;
  width: 44%;
  height: auto;
  border-radius: 18px;
  overflow: hidden;
  background: #1C2330;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.calendar-agenda-delivery-slot {
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.01);
}

.calendar-agenda-delivery-slot .calendar-sidebar-card {
  padding: 8px;
}

.calendar-agenda-delivery-slot .calendar-sidebar-card .card-header {
  padding: 10px 12px;
}

.calendar-agenda-delivery-slot .calendar-sidebar-card .card-body {
  padding: 10px 12px;
}

.calendar-agenda-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.calendar-agenda-thumb-img--placeholder {
  background: linear-gradient(135deg, rgba(88, 166, 255, 0.18), rgba(88, 166, 255, 0.02));
}

.calendar-agenda-thumb-img--teleprompter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 72px;
  padding: 8px;
  box-sizing: border-box;
  background: linear-gradient(145deg, rgba(15, 20, 32, 0.98), rgba(88, 166, 255, 0.14));
  color: rgba(230, 237, 243, 0.96);
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.25;
}

.calendar-agenda-tp-icon {
  color: rgba(88, 166, 255, 0.95);
  flex-shrink: 0;
}

.calendar-agenda-tp-clips {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.calendar-agenda-tp-clips-sub {
  font-weight: 400;
  opacity: 0.78;
  font-size: 0.68rem;
}

.calendar-agenda-meta {
  min-width: 0;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calendar-agenda-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}

.calendar-agenda-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.03);
  flex-shrink: 0;
  margin-top: 8px;
}

.calendar-agenda-dot--published {
  background: #3fb950;
  box-shadow: 0 0 0 3px rgba(63, 185, 80, 0.18);
  margin-top: 8px;
}

.calendar-agenda-dot--planned {
  background: #f1d44a;
  box-shadow: 0 0 0 3px rgba(241, 212, 74, 0.18);
}

.calendar-agenda-dot--avulso {
  background: #f0883e;
  box-shadow: 0 0 0 3px rgba(240, 136, 62, 0.18);
}

.calendar-agenda-title {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 800;
  color: #e6edf3;
}

.calendar-agenda-sub {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 0;
  width: 100%;
  flex-wrap: wrap;
}

.calendar-agenda-type {
  font-size: 0.75rem;
  color: #c9d1d9;
  background: rgba(88, 166, 255, 0.08);
  border: 1px solid rgba(88, 166, 255, 0.18);
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  text-align: right;
  margin-left: 0;
}

.calendar-agenda-datetime {
  font-size: 0.75rem;
  color: #8b949e;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
  text-align: left;
}

.calendar-briefing-approve-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 12px;
  border-radius: 14px;
  margin-top: 12px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.22);
}

.calendar-agenda-list .calendar-briefing-approve-card {
  margin-top: 0;
}

/* Keep banners compact inside the banners container */
.calendar-agenda-banners {
  overflow: visible;
}

.calendar-agenda-banners .calendar-banner {
  margin: 0 0 10px;
  padding: 16px !important;
  border-radius: 12px;
  position: relative;
  margin-left: 14px; /* space for the arrow */
  border: none !important;
  font-size: 0.9375rem;
}
.calendar-agenda-banners .calendar-banner .text-sm {
  font-size: 0.9375rem;
}

/* Modal backdrop blur */
.modal-backdrop--blur {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Publicar conteúdo modal — cancela o padding geral do modal-body */
.modal-body:has(.pub-modal-content) {
  padding: 0 !important;
}
.pub-modal-content {
  padding: 15px;
}

.pub-modal-content input{
  width: 90% !important;
}

.modal .modal-body > div > div.pub-modal-content-agora {
  padding-bottom: 0px !important;
}

/* Seletor de formato de publicação de vídeo (Reels / Story) */
.pub-mode-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .modal .modal-body > div > div.pub-mode-selector {
    margin-bottom: 16px !important;
    padding-bottom: 16px !important;
  }

  .modal-small .modal-header {
      padding: 24px 0px 14px 0px !important;
  }

}
.pub-mode-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px 14px;
  border-radius: 10px;
  border: 2px solid var(--premium-border, #333);
  background: #1a1a1a;
  cursor: pointer;
  position: relative;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  min-height: 96px;
  user-select: none;
}
.pub-mode-card .pub-mode-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid #555;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.pub-mode-card .pub-mode-check svg {
  display: none;
  width: 11px;
  height: 11px;
}
.pub-mode-card.selected {
  border-color: var(--premium-accent, #63f1b8);
  background: rgba(99, 102, 241, 0.08);
  box-shadow: 0 0 0 1px var(--premium-accent, #63f1b8), 0 4px 16px rgba(99, 102, 241, 0.18);
}
.pub-mode-card.selected .pub-mode-check {
  background: var(--premium-accent, #63f1b8);
  border-color: var(--premium-accent, #63f1b8);
}
.pub-mode-card.selected .pub-mode-check svg {
  display: block;
  stroke: #333;
}
.pub-mode-card .pub-mode-icon {
  opacity: 0.55;
  transition: opacity 0.18s;
}
.pub-mode-card.selected .pub-mode-icon {
  opacity: 1;
}
.pub-mode-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: #888;
  transition: color 0.18s;
}
.pub-mode-card.selected .pub-mode-label {
  color: #fff;
}

/* Card read-only (Post obrigatório) */
.pub-mode-card--readonly {
  cursor: default !important;
}
.pub-mode-card--readonly.selected .pub-mode-check {
  background: #4b6b60;
  border-color: #4b6b60;
}
.pub-mode-card--readonly.selected {
  border-color: #4b6b60;
  background: rgba(75, 107, 96, 0.1);
  box-shadow: 0 0 0 1px #4b6b60, 0 4px 16px rgba(75, 107, 96, 0.15);
}


/* WhatsApp-style speech bubble arrow pointing left */
.calendar-agenda-banners .calendar-banner::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 18px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 12px solid rgba(52, 144, 153, 0.15); /* default: generating color */
}

.calendar-agenda-banners .calendar-banner--generating::before {
  border-right-color: rgba(52, 144, 153, 0.15);
}

.calendar-agenda-banners .calendar-banner--warning::before {
  border-right-color: rgb(240 193 75 / 43%);
}

#calendar-next-week-approve-banner p.text-sm{
  color: #fff !important;
}

#calendar-approve-next-week-plan-btn{
  background-color: #bd6711;
}
#calendar-approve-next-week-plan-btn:hover{
  background-color: #95510d;
}
.calendar-agenda-banners .calendar-banner--info::before {
  border-right-color: rgba(0, 123, 255, 0.08);
}

.calendar-agenda-banners .calendar-banner--fill-briefing::before {
  border-right-color: rgba(220, 53, 69, 0.12);
}

.calendar-agenda-banners .calendar-banner--prepare-briefing::before {
  border-right-color: rgba(52, 144, 153, 0.52);
}

.calendar-agenda-banners .calendar-banner--plan-created::before {
  border-right-color: rgb(255 220 0 / 12%);
}

.calendar-agenda-banners .calendar-banner--approve-contents::before {
  border-right-color: rgb(60 199 251 / 42%);
}

.calendar-agenda-banners .calendar-banner:last-child {
  margin-bottom: 0;
}

.calendar-briefing-approve-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.12);
  color: #ff6b6b;
  flex-shrink: 0;
}

.calendar-briefing-approve-content strong {
  color: #fff;
  display: block;
  margin-bottom: 2px;
}

.calendar-briefing-approve-desc {
  color: #f9d2d2;
  font-size: 0.85rem;
  margin: 6px 0 10px;
}

.event-time {
  font-weight: 600;
  margin-right: 4px;
}

.suggestions-calendar-list {
  padding: var(--spacing-lg);
  max-height: 600px;
  overflow-y: auto;
}

.suggestion-calendar-item {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-md);
  transition: all 0.2s;
}

.suggestion-calendar-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
}

.suggestion-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  background: var(--background-color);
  border-radius: 8px;
  min-width: 60px;
}

.date-day {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--primary-color);
}

.date-month {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #6c757d;
}

/* ==================== CALENDAR PAGE (Plan experience) ==================== */

.calendar-page-wrap {
  animation: calendarPageFadeIn 0.35s ease;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@keyframes calendarPageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.calendar-period-label {
  margin: 0;
  min-width: 180px;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  color: #e6edf3;
}

.calendar-top-row {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: var(--spacing-md, 12px);
  align-items: start;
  margin-bottom: var(--spacing-md, 12px);
}

.calendar-top-row .calendar-banner-slot {
  min-width: 0;
}

.calendar-top-row .calendar-banner-slot .calendar-banner {
  margin-bottom: 0;
}

.calendar-top-row .calendar-delivery-slot:empty {
  display: none;
}

.modal-small {
  height: max-content !important;
}

@media (max-width: 768px) {
  .calendar-top-row {
    grid-template-columns: 1fr;
  }


  .modal-small.modal .modal-body{
    padding-bottom: 0px !important; 
  }
}


@media (min-width: 2160px) {
  .calendar-agenda-thumb {
    max-height: 260px  !important;
    width: auto !important;
  }
  .calendar-agenda-thumb-img{
    width: auto !important; 
    max-height: 260px !important;
  }
}


.calendar-delivery-slot {
  max-width: 220px;
}

#calendar-edit-plan-btn {
  background: transparent;
  border: 1px solid #ffffff54;
  color: #ffffff6b;
}

@media (max-width: 768px) {
  .calendar-card.calendar-main {
    position: relative;
  }
  #calendar-edit-plan-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  #calendar-edit-plan-btn .calendar-toolbar-settings-text {
    display: none;
  }
}

.calendar-delivery-slot .calendar-sidebar-card--delivery .card-header {
  padding: 8px 10px;
}

.calendar-delivery-slot .calendar-sidebar-card--delivery .card-body {
  padding: 8px 10px;
}

.calendar-delivery-slot .calendar-sidebar-card--delivery .card-title {
  font-size: 0.85rem;
}

.calendar-delivery-slot .calendar-sidebar-card--delivery .card-body p {
  font-size: 1.4rem;
    color: #fff;
    text-align: center;
}

.calendar-delivery-slot .calendar-sidebar-card--delivery .calendar-delivery-day-time {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
}

.calendar-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 450px) minmax(400px, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "calendar banners"
    "agenda   agenda";
  gap: 12px;
  align-items: start;
  flex: 0 0 auto;
  min-height: 0;
}

.calendar-main {
  grid-area: calendar;
}

.calendar-agenda-banners {
  grid-area: banners;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.calendar-agenda-panel {
  grid-area: agenda;
}

.calendar-sidebar--left {
  order: 1;
  overflow: auto;
  min-height: 0;
}

.calendar-main {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 0 0 auto;
}

.calendar-main-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

/* Mini month (left sidebar) — ref: dark panel, yellow oval today, blue events */
.calendar-mini-month-wrap {
  background: #1a1a1a !important;
  border: 0px solid #2d2d2d;
  border-radius: 10px;
  padding: 16px 14px 18px;
  margin-bottom: 4px;
}

.calendar-mini-month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 2px;
}

.calendar-mini-month-chevron {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #b0b0b0;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.calendar-mini-month-chevron:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.calendar-mini-month-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
}

.calendar-mini-month {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calendar-mini-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #8b949e;
  text-align: center;
  padding: 0 0 4px;
}

.calendar-mini-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-mini-day {
  aspect-ratio: 1;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  color: #e6edf3;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.calendar-mini-day.empty {
  cursor: default;
  color: #6e7681;
  opacity: 0.8;
}

.calendar-mini-day:not(.empty):hover {
  background: rgba(255, 255, 255, 0.1);
}

.calendar-mini-day.today {
  background: #ffd700;
  color: #1a1a1a;
  font-weight: 700;
}

.calendar-mini-day.has-events:not(.today) {
  background: #58a6ff;
  color: #fff;
  font-weight: 500;
}

.calendar-mini-day.has-events.today {
  background: #ffd700;
  color: #1a1a1a;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.5);
}

/* Week header (right panel) — gradient is on .calendar-main, strip transparent/semi */
.calendar-week-gradient-header {
  background: transparent;
  margin: 0;
  padding: 14px 20px 0px;
  border-radius: 0;
}

.calendar-week-day-cards {
  display: flex;
  gap: 5px;
  align-items: stretch;
}

.calendar-week-day-card {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.calendar-week-day-card .calendar-week-day-name {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: lowercase;
  color: #fff;
  margin-bottom: 2px;
}

.calendar-week-day-card .calendar-week-day-num {
  display: block;
  font-size: 1.55rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  font-family: 'Lato';
}

/* Dia corrente = branco; demais = overlay 0.2 */
.calendar-week-day-card {
  background: rgba(255, 255, 255, 0.2);
}

.calendar-week-day-card.current {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.calendar-week-day-card.current .calendar-week-day-name,
.calendar-week-day-card.current .calendar-week-day-num {
  color: #1f2937;
}
#next-period svg,
#prev-period svg{
  color:#fff;
}

.calendar-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.calendar-sidebar-card {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  padding: 10px;
}

.calendar-sidebar-card--delivery {
  background: linear-gradient(135deg, rgba(88, 166, 255, 0.18) 0%, rgba(88, 166, 255, 0.06) 50%, rgba(56, 139, 253, 0.1) 100%) !important;
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.2);
}

.calendar-sidebar-card--topics {
  background: linear-gradient(135deg, rgba(63, 185, 80, 0.15) 0%, rgba(63, 185, 80, 0.04) 50%, rgba(46, 160, 67, 0.08) 100%) !important;
  box-shadow: 0 0 0 1px rgba(63, 185, 80, 0.18);
}

.calendar-sidebar-card .card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.calendar-sidebar-card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
}

.calendar-sidebar-card--delivery .card-header .calendar-sidebar-card-icon {
  color: #58a6ff;
}

.calendar-sidebar-card--topics .card-header .calendar-sidebar-card-icon {
  color: #3fb950;
}

.calendar-sidebar-card .card-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #e6edf3;
}

.calendar-sidebar-card .card-body {
  padding: 12px 14px;
}

.calendar-sidebar-card .card-body p {
  color: #c9d1d9;
  font-size: 0.85rem;
}

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

.calendar-topic-item {
  padding: 0.3rem 0;
  font-size: 0.85rem;
  color: #c9d1d9;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.calendar-topic-item:last-child {
  border-bottom: none;
}

/* Banners */
.calendar-banner {
  border-radius: 12px;
  padding: var(--spacing-lg);
  transition: opacity 0.3s ease;
}

.calendar-banner-inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.calendar-banner-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Agent avatar in banners */
.calendar-banner-agent {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  width: 100%;
}
.calendar-banner-agent-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.15);
  display: block;
  flex-shrink: 0;
}
.calendar-banner-agent-img--spinning {
  animation: bannerAgentPulse 2s ease-in-out infinite;
}
@keyframes bannerAgentPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 144, 153, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(52, 144, 153, 0); }
}
.calendar-banner-agent-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.calendar-banner-agent-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  line-height: 1.2;
}
.calendar-banner-agent-role {
  font-size: 0.74rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  line-height: 1.2;
}

.calendar-banner--generating {
  background: rgba(52, 144, 153, 0.15);
  border: 1px solid rgba(52, 144, 153, 0.4);
}

.calendar-banner--generating .calendar-banner-icon {
  display: none;
}

.calendar-banner-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(52, 144, 153, 0.3);
  border-top-color: #349099;
  border-radius: 50%;
  animation: calendarSpinner 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes calendarSpinner {
  to { transform: rotate(360deg); }
}

/* Posts individuais pendentes de aprovação → amarelo mais saturado */
.calendar-banner--pending-content {
  background: rgba(241, 196, 15, 0.16);
  border: 1px solid rgba(241, 196, 15, 0.45);
}

.calendar-banner--pending-content .text-sm{
  color: #ffffffdd;
}

.calendar-banner--fill-briefing .text-sm{
  color: #ffffffdd;
}

.calendar-agenda-banners .calendar-banner--pending-content::before {
  border-right-color: rgba(241, 196, 15, 0.15);
}

.pending-banner-days {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 4px;
}

.pending-banner-day {
  background: rgba(241, 196, 15, 0.18);
  border: 1px solid rgba(241, 196, 15, 0.35);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.75rem;
  color: #d4a017;
  white-space: nowrap;
}

.calendar-banner--warning {
  background: rgb(240 193 75 / 43%);
  border: 1px solid rgba(240, 193, 75, 0.35);
}

.calendar-banner--warning .calendar-banner-icon {
  background: rgba(240, 193, 75, 0.25);
  color: #f0c14b;
}

.calendar-banner--approve-contents {
  background: rgb(60 199 251 / 42%);
  border: 1px solid rgb(60 199 251 / 55%);
}
.calendar-banner--approve-contents strong {
  color: #e8f9ff !important;
}
.calendar-banner--approve-contents p,
.calendar-banner--approve-contents .text-sm {
  color: rgba(255, 255, 255, 0.75) !important;
}
.calendar-banner--approve-contents .calendar-banner-agent-name {
  color: #ffffff;
}
.calendar-banner--approve-contents .calendar-banner-agent-role {
  color: rgba(255, 255, 255, 0.55);
}

.calendar-banner--generating-content {
  background: rgba(56, 139, 253, 0.10);
  border: 1px solid rgba(56, 139, 253, 0.28);
}
.calendar-banner-generating-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(56, 139, 253, 0.14);
  border-radius: 50%;
  flex-shrink: 0;
  color: #388bfd;
}
.calendar-banner-spin-icon {
  animation: calendarSpinner 1.4s linear infinite;
  color: #388bfd;
}
.calendar-banner--generating-content strong {
  color: #82b4ff;
}
.calendar-banner--generating-content .text-sm {
  color: rgba(255, 255, 255, 0.65);
}

.calendar-banner--info {
  background: rgba(0, 123, 255, 0.08);
  border: 1px solid rgba(0, 123, 255, 0.25);
}

.calendar-banner--info .calendar-banner-icon {
  background: rgba(0, 123, 255, 0.2);
  color: var(--primary-color, #0d6efd);
}

/* Próxima semana: plano ainda não gerado — mensagem com dia/hora do template */
.calendar-banner--next-week-info {
  background: rgba(88, 166, 255, 0.1);
  border: 1px solid rgba(88, 166, 255, 0.28);
}

.calendar-banner--next-week-info .mb-0.text-sm {
  color: #c9d1d9 !important;
}

/* Semana atual + próxima: ambas scheduled/published — mensagem de continuidade */
.calendar-banner--two-weeks-scheduled {
  background: rgba(46, 160, 67, 0.14);
  border: 1px solid rgba(46, 160, 67, 0.32);
}

.calendar-banner--two-weeks-scheduled .mb-0.text-sm {
  color: #c9d1d9 !important;
}

.calendar-banner--prepare-briefing {
  background: rgba(52, 144, 153, 0.52);
  border: 1px solid rgba(52, 144, 153, 0.35);
}


.calendar-banner--prepare-briefing .mb-0.text-sm{
  color: #ffffff9c !important;
}

.calendar-banner--prepare-briefing .calendar-banner-icon {
  background: rgba(52, 144, 153, 0.25);
  color: #349099;
}

.calendar-banner--fill-briefing {
  background: rgba(220, 53, 69, 0.12);
  border: 1px solid rgba(220, 53, 69, 0.4);
}

.calendar-banner--fill-briefing .calendar-banner-icon {
  background: rgba(220, 53, 69, 0.3);
  color: #dc3545;
}

.calendar-banner--fill-briefing .btn-primary {
  background: #dc3545;
  border-color: #dc3545;
}

.calendar-banner--fill-briefing .btn-primary:hover {
  background: #bb2d3b;
  border-color: #bb2d3b;
}

.calendar-banner--plan-created {
  background: rgb(255 220 0 / 12%);
    border: 1px solid rgb(220 220 53 / 40%);
}

.calendar-banner--plan-created .flex-grow-1 p.text-sm{
  color: #fff !important;
}

.calendar-banner--plan-created .calendar-banner-icon {
  background: rgb(220 146 53 / 30%);
    color: #dcce35;
}

.calendar-banner--plan-created .btn-primary {
  background: #dc8a35;
    border-color: #dcb335;
}

.calendar-banner--plan-created .btn-primary:hover {
  background: rgb(187, 177, 45);
    border-color: #dcb335;
}

/* Calendar welcome overlay (current_week + next_week null) */
.calendar-page-wrap {
  position: relative;
}

.calendar-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg, 16px);
  animation: calendarWelcomeFadeIn 0.3s ease;
}

.calendar-welcome-overlay--closing {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.calendar-welcome-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 17, 23, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.calendar-welcome-overlay-card {
  position: relative;
  z-index: 1;
  max-width: 700px;
  width: 100%;
  padding: var(--spacing-xl, 24px);
  padding-top: 48px;
  background: var(--card-bg, #161b22);
  border: 1px solid var(--border-color, #30363d);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

.calendar-welcome-overlay-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-secondary, #8b949e);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.calendar-welcome-overlay-close-btn:hover {
  color: var(--text-primary, #e6edf3);
  background: rgba(255, 255, 255, 0.08);
}

.calendar-welcome-overlay-body {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xl, 24px);
}

.calendar-welcome-overlay-illustration {
  flex-shrink: 0;
  color: #349099;
  opacity: 0.9;
}

.calendar-welcome-overlay-content {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.calendar-welcome-overlay-content .btn-lg {
  margin-top: var(--spacing-md, 12px);
}

.calendar-welcome-overlay-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md, 12px);
  color: var(--text-primary, #e6edf3);
}

.calendar-welcome-overlay-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary, #8b949e);
  margin-bottom: var(--spacing-xl, 24px);
}

@media (max-width: 540px) {
  .calendar-welcome-overlay-body {
    flex-direction: column;
    align-items: center;
  }
  .calendar-welcome-overlay-content {
    text-align: center;
  }
}

@keyframes calendarWelcomeFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.flex-grow-1 {
  flex-grow: 1;
  min-width: 0;
  width: 100%;
}

/* Calendar day events: borda arredondada, cores PLANO vs AVULSO */
.calendar-event--plan {
  border-radius: 10px;
  border: 1px solid rgba(88, 166, 255, 0.5);
  background: rgba(88, 166, 255, 0.2);
  color: #a5d6ff;
}

.calendar-event--avulso {
  border-radius: 10px;
  border: 1px solid rgba(139, 148, 158, 0.5);
  background: rgba(139, 148, 158, 0.2);
  color: #b1bac4;
}

/* Right panel (.calendar-main): eventos com borda arredondada e cores por tipo */
.calendar-main .calendar-event--plan {
  border-radius: 10px;
  border: 1px solid #b1d8c6;
  background: #b1d8c6;
  color: #000;
}

.calendar-main .calendar-event--avulso {
  border-radius: 10px;
  border: 1px solid #e0dede;
  background: #e9e9e9;
  color: #000;
}

/* Desktop: evento com thumb 4:5, altura ajustada */
@media (min-width: 769px) {
  .calendar-main .calendar-event {
    max-height: 320px;
    min-height: 200px;
    padding: 10px 12px;
    font-size: 0.8125rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
    cursor: pointer;
  }
  .calendar-main .calendar-event-thumb {
    width: 100%;
    max-width: 120px;
    aspect-ratio: 4 / 5;
  }
  .calendar-main .calendar-event-title {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
  }
  .calendar-main .calendar-event-preview {
    font-size: 0.8rem;
    line-height: 1.35;
    margin: 4px 0 0;
    opacity: 0.95;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
}

#calendar-view-pending-btn.btn-primary{
  background: #988034 !important;
}

.calendar-main .calendar-day:hover .calendar-day-add,
.calendar-main .calendar-day:focus-within .calendar-day-add {
  background: rgba(212, 225, 87, 0.15);
}

.calendar-main .calendar-day-add-icon {
  background: #6b7280;
  color: #fff;
}

.calendar-event-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 4px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.06);
}

.calendar-event-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.calendar-event-time {
  font-weight: 600;
  margin-right: 4px;
  font-size: 0.7rem;
}

.calendar-event-badge {
  display: inline-block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-left: 4px;
  opacity: 0.9;
}

.calendar-event-preview {
  font-size: 0.75rem;
  line-height: 1.3;
  margin: 2px 0 0;
  opacity: 0.9;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Empty day: hover + button */
.calendar-day.empty-day {
  position: relative;
}

.calendar-day-add {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease, background 0.2s ease;
  pointer-events: none;
  border-radius: inherit;
  cursor: pointer;
}

.calendar-day.empty-day .calendar-day-add {
  pointer-events: auto;
}

.calendar-day:hover .calendar-day-add,
.calendar-day:focus-within .calendar-day-add {
  opacity: 1;
  background: rgba(88, 166, 255, 0.1);
}

.calendar-day-add-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #58a6ff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.calendar-day-add:hover .calendar-day-add-icon {
  transform: scale(1.08);
}

/* Edit template form */
.calendar-edit-form {
  display: grid;
  gap: 12px;
}
.calendar-edit-form .form-group {
  margin-bottom: 40px;
}
.calendar-edit-form .form-group:last-child {
  margin-bottom: 0;
}
.calendar-edit-form .form-label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.81rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7d8fa0;
}

/* Section */
.calendar-edit-section {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
}

.calendar-edit-section-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 0px solid rgba(255, 255, 255, 0.06);
}

.calendar-edit-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.2);
  color: #2dd4bf;
}

.calendar-edit-section-title {
  margin: 0 0 3px;
  font-size: 0.96rem;
  font-weight: 700;
  color: #e6edf3;
  line-height: 1.3;
}

.calendar-edit-section-desc {
  margin: 0;
  font-size: 0.95rem;
  color: #6b7a8d;
}

/* Frequency stepper */
.calendar-edit-frequency-row {
  display: none;
}
.calendar-edit-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.calendar-edit-stepper-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #c9d1d9;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.calendar-edit-stepper-btn:hover {
  background: rgba(45, 212, 191, 0.15);
  border-color: rgba(45, 212, 191, 0.4);
  color: #2dd4bf;
}
.calendar-edit-stepper-input {
  width: 40px;
  text-align: center;
  background: transparent !important;
  border: none !important;
  color: #e6edf3 !important;
  font-size: 1.1rem;
  font-weight: 700;
  -moz-appearance: textfield;
}
.calendar-edit-stepper-input::-webkit-inner-spin-button,
.calendar-edit-stepper-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* Day pills */
.calendar-edit-days {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.calendar-edit-check {
  display: inline-flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
}
.calendar-edit-check input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.calendar-edit-check span {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.86rem;
  font-weight: 500;
  color: #7d8fa0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.calendar-edit-check:has(input:checked) span {
  background: rgba(45, 212, 191, 0.15);
  border-color: rgba(45, 212, 191, 0.45);
  color: #2dd4bf;
  font-weight: 600;
}
.calendar-edit-check:hover span {
  border-color: rgba(255, 255, 255, 0.2);
  color: #c9d1d9;
}

/* Time rows */
.calendar-edit-time-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.calendar-edit-time-row:last-child {
  margin-bottom: 0;
}
.calendar-edit-time-row label {
  flex: 1;
  font-size: 0.86rem;
  font-weight: 600;
  color: #c9d1d9;
}
.calendar-edit-time-row .form-control {
  width: auto;
  height: 38px;
}

/* Review section 2-col */
.calendar-edit-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Topics textarea */
.calendar-edit-textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 100px;
  font-size: 0.89rem;
  line-height: 1.6;
  padding: 0.5rem 1rem;
}

/* Modal de edição do template */
body > .modal.modal-edit-template {
  width: 70vw !important;
  max-width: 70vw !important;
  height: 70vh !important;
  max-height: 70vh !important;
}

.modal-edit-template #edit-review-time{
  padding: 0.6rem 1rem;
  height: auto !important;
}

body > .modal.modal-edit-template input[type='time']{
  padding: 0.75rem;
}

.calendar-edit-section-title{
  font-size: 1.1rem;
}


body > .modal.modal-edit-template .modal-body {
  overflow-y: auto;
  padding: 16px;
}
body > .modal.modal-edit-template .form-control,
body > .modal.modal-edit-template select,
body > .modal.modal-edit-template textarea {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #e6edf3 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  font-size: 0.9rem !important;
}
body > .modal.modal-edit-template input[type='time'] {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #e6edf3 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  height: 38px !important;
  font-size: 0.9rem !important;
}
body > .modal.modal-edit-template .form-control::placeholder,
body > .modal.modal-edit-template textarea::placeholder {
  color: #4a5568 !important;
}
body > .modal.modal-edit-template select option {
  background: #1a1f27;
}
@media (max-width: 768px) {
  body > .modal.modal-edit-template {
    width: 90vw !important;
    max-width: 90vw !important;
    height: 90% !important;
    max-height: 90vh !important;
  }

  .modal .modal-body > div > div.calendar-edit-section{
    padding-bottom: 30px !important;
  }
}


/* Blur no fundo ao abrir modal briefing */
.modal-backdrop--blur {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.55) !important;
}

/* Banner vermelho na sidebar quando não há current_week nem next_week */
.calendar-sidebar-card--briefing-cta {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(220, 53, 69, 0.6) !important;
  background: linear-gradient(120deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.45), rgba(220, 53, 69, 0.1)) !important;
  background-size: 200% 200%;
  animation: calendar-briefing-cta-pulse 6s ease-in-out infinite;
}

.calendar-sidebar-card--briefing-cta .card-body {
  padding: 14px 16px;
}

.calendar-sidebar-briefing-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.calendar-sidebar-briefing-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(220, 53, 69, 0.95);
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
}

.calendar-sidebar-card--briefing-cta .btn-primary {
  background: #dc3545;
  border-color: #dc3545;
}

.calendar-sidebar-card--briefing-cta .btn-primary:hover {
  background: #bb2d3b;
  border-color: #bb2d3b;
}

@keyframes calendar-briefing-cta-pulse {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Briefing modal: 90% largura e altura */
.modal-briefing-week,
.modal-approve-plan-week {
  width: 90vw !important;
  max-width: 90vw !important;
  height: 70vh !important;
  max-height: 70vh !important;
}

.modal-briefing-week .modal-header{
  padding: 9px !important;
}
.modal-briefing-week .modal-footer .btn{
  float: right !important;  
}

.calendar-briefing-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 280px;
  padding: 24px;
}
.modal .modal-body > div.calendar-briefing-loading--hide-mobile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.modal .modal-body > div.calendar-briefing-loading.briefing-loading--done {
  display: none !important;
}
.modal .modal-body > div.calendar-briefing-form--steps.briefing-form--hidden {
  display: none !important;
}
.modal .modal-body > div.calendar-briefing-loading .calendar-briefing-loading-spinner {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.calendar-briefing-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #2dd4bf;
  border-radius: 50%;
  animation: calendar-briefing-spin 0.8s linear infinite;
}

.calendar-briefing-loading-text {
  margin: 0;
  font-size: 1rem;
  color: #7d8fa0;
}

@keyframes calendar-briefing-spin {
  to {
    transform: rotate(360deg);
  }
}

.calendar-briefing-form--two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  height: 100%;
  min-height: 0;
}
.calendar-briefing-form--steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  height: auto;
  min-height: 0;
}
/* Desktop: steps navigation hidden, both sections visible */
.calendar-briefing-steps {
  display: none;
}
.calendar-briefing-steps-divider {
  display: none;
}

/* Step pill styles (used on mobile only) */
.calendar-briefing-step-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #6b7a8d;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 10px 18px;
  cursor: pointer;
  height: auto !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.calendar-briefing-step-pill.active {
  border-color: rgba(45, 212, 191, 0.4);
  background: rgba(45, 212, 191, 0.1);
  color: #2dd4bf;
}
.calendar-briefing-step-num {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
  font-weight: 800;
  flex-shrink: 0;
}
.calendar-briefing-step-pill.active .calendar-briefing-step-num {
  background: rgba(45, 212, 191, 0.25);
  color: #2dd4bf;
}

/* Desktop: show both step sections simultaneously */
@media (min-width: 769px) {
  #calendar-briefing-step-1,
  #calendar-briefing-step-2 {
    display: flex !important;
  }
  .modal-briefing-week [data-button-index="0"] {
    display: none !important;
  }
  .modal-briefing-week [data-button-index="1"] {
    display: inline-flex !important;
  }
}

.calendar-briefing-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
  background: rgb(52 60 69 / 64%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 24px;
  border-radius: 16px;
}

.calendar-briefing-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.calendar-briefing-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #349099;
}

.calendar-briefing-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: #e6edf3;
}

.calendar-briefing-section-desc {
  font-size: 0.88rem;
  color: #6b7a8d;
  margin: 0;
  margin-bottom: 16px;
}

.calendar-briefing-topic-input {
  font-size: 1rem;
  padding: 12px 14px;
  color: #111 !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 10px;
  resize: none;
  field-sizing: content;
  min-height: 90px;
}

.calendar-briefing-suggestions-accordion {
  margin-top: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  overflow: hidden;
}
.calendar-briefing-suggestions-accordion[open] {
  border-color: rgba(255, 255, 255, 0.1);
}
.calendar-briefing-suggestions-label {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8f98a8;
  margin: 0;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.calendar-briefing-suggestions-label::-webkit-details-marker { display: none; }
.calendar-briefing-suggestions-label::after {
  content: '';
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.calendar-briefing-suggestions-accordion[open] .calendar-briefing-suggestions-label::after {
  transform: rotate(180deg);
}
.calendar-briefing-suggestions-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.18);
  color: var(--color-primary, #63f1b8);
  border: 1px solid rgba(var(--color-primary-rgb, 99, 102, 241), 0.3);
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  text-transform: none;
  letter-spacing: 0;
  margin-left: auto;
  margin-right: 8px;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.calendar-briefing-suggestions-badge:empty {
  display: none;
}
.calendar-briefing-suggestions-accordion[open] .calendar-briefing-suggestions-badge {
  opacity: 0;
  pointer-events: none;
}
.calendar-briefing-suggestions {
  margin-top: 0;
  padding: 0 10px 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

.calendar-briefing-suggestions {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

.calendar-briefing-suggestions .suggestion-card {
  text-align: left;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.calendar-briefing-suggestions .suggestion-card__content {
  flex: 1;
}

.calendar-briefing-suggestions .suggestion-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.65);
}

.calendar-briefing-suggestions .suggestion-card__footer-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
}

.calendar-briefing-suggestions .suggestion-card-footer-icon {
  flex-shrink: 0;
  opacity: 0.8;
}

.calendar-briefing-suggestions .suggestion-card.skeleton {
  min-height: 72px;
}

.calendar-briefing-suggestions .suggestion-card.skeleton .suggestion-card__footer {
  display: none;
}

.calendar-briefing-sugg-btn {
  font-size: 0.85rem;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #c9d1d9;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.calendar-briefing-sugg-btn:hover {
  background: rgba(45, 212, 191, 0.1);
  border-color: rgba(45, 212, 191, 0.35);
  color: #2dd4bf;
}

/* audience-ms dentro do briefing */
#briefing-audience-ms.ms {
  border: 0px solid var(--premium-border, #e5e7eb);
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
  flex: 1;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}

#briefing-audience-ms .ms-search {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 0px solid var(--premium-border, #e5e7eb);
}

#briefing-audience-ms .ms-search input {
  flex: 1;
  font-size: 0.95rem;
  padding: 8px 10px;
  height: 42px;
  color: #e6edf3;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

#briefing-audience-ms .ms-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

#briefing-audience-ms .ms-list label,
#briefing-audience-ms .ms-list .ms-option-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  min-height: 76px;
  position: relative;
}

#briefing-audience-ms .ms-list label:hover,
#briefing-audience-ms .ms-list .ms-option-card:hover {
  background-color: rgba(59, 130, 246, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border-color: rgba(59, 130, 246, 0.2);
}

#briefing-audience-ms .ms-list label:active,
#briefing-audience-ms .ms-list .ms-option-card:active {
  background-color: rgba(59, 130, 246, 0.12);
}

#briefing-audience-ms .ms-list .ms-option-card__checkbox {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

#briefing-audience-ms .ms-list .ms-option-card__check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
}

#briefing-audience-ms .ms-list .ms-option-card__text {
  padding-right: 24px;
  line-height: 1.35;
}

#briefing-audience-ms .ms-list .ms-option-card.is-selected {
  border-color: rgba(88, 166, 255, 0.45);
  background: rgba(88, 166, 255, 0.14);
}

#briefing-audience-ms .ms-list .ms-option-card.is-selected .ms-option-card__check {
  color: #fff;
  background: #349099;
  border-color: #349099;
}

@media (max-width: 768px) {
  .calendar-main .calendar-toolbar{
    display: grid;
  }

  .calendar-briefing-topic-input {
    min-height: 140px;
  }

  .calendar-main .calendar-days--month .calendar-event--dot{
    height: 8px;
    width: 8px;
  }

  .calendar-main .calendar-days--month .calendar-day.today {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.22) 0%, rgba(255, 215, 0, 0.06) 60%, rgba(28, 35, 48, 1) 100%);
    box-shadow: inset 0 0 0 2px #e1c51e;
  }

  .calendar-main .calendar-days--month .day-number {
    font-size: 0.8rem !important;
    margin-top: 8px !important;
  }

  .calendar-briefing-steps {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    margin-top: 10px;
  }
  .calendar-briefing-step-pill {
    flex: 1;
    justify-content: center;
    padding: 10px 12px;
    font-size: 0.85rem;
  }
  .calendar-briefing-suggestions{
    grid-template-columns: inherit !important;
  }

  #calendar-briefing-step-1 .suggestion-card__content h4{
    font-size: 15px !important;
  }

  .modal .modal-body > div > div.calendar-briefing-steps {
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
  }

  .modal-briefing-week .calendar-briefing-suggestions .suggestion-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  #briefing-audience-ms .ms-search{
    border: 0px !important;
    display: grid !important;
    padding: 0px !important;
  }

  .calendar-briefing-loading--hide-mobile {
    display: flex;
  }
  #briefing-audience-ms .ms-list {
    grid-template-columns: 1fr;
    padding: 0;
    margin-top: 40px;
  }
  #briefing-audience-ms.ms{
    background: transparent;
    border: 0px !important;
  }
  .calendar-briefing-form--two-cols {
    grid-template-columns: 1fr;
  }



  .calendar-main .calendar-days--month .calendar-day {
    padding: 2px !important;
    aspect-ratio: 1 / 1.2 !important;
    justify-content: center !important;
  }
  .calendar-main .calendar-days--month .calendar-day-dot--shape {
    width: 6px;
    height: 6px;
  }
  .calendar-main .calendar-days--month .day-number {
    font-size: 0.72rem !important;
    margin-top: 0 !important;
  }
  .calendar-main .calendar-days--month .day-count-badge {
    font-size: 0.58rem !important;
    height: 14px !important;
    min-width: 14px !important;
    margin-top: 2px !important;
  }
  /* No home, não mostrar seleção de dia */
  .home-calendar-embed .calendar-main .calendar-days--month .calendar-day.day--selected {
    outline: none !important;
  }

}

@media (max-width: 1440px) {

  /* Briefing modal: 90% largura e altura */
  .modal-briefing-week,
  .modal-approve-plan-week {
    width: 90vw !important;
    max-width: 90vw !important;
    height: 97vh !important;
    max-height: 97vh !important;
  }
}

.calendar-briefing-preview {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.calendar-briefing-preview.visible {
  opacity: 1;
}

.calendar-briefing-audience-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.calendar-briefing-audience-row .form-control {
  flex: 1;
  min-width: 0;
}

.calendar-briefing-audience-modal.aud-modal {
  padding: 12px;
}

.calendar-briefing-audience-modal .aud-custom {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.calendar-briefing-audience-modal .aud-custom input {
  flex: 1;
}

.calendar-briefing-audience-modal .aud-list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.calendar-briefing-audience-modal .aud-item {
  padding: 10px 12px;
  border: 1px solid var(--border-color, #30363d);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.calendar-briefing-audience-modal .aud-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(52, 144, 153, 0.4);
}

/* Week view: taller cells */
.calendar-grid--week .calendar-days--week .calendar-day {
  min-height: 140px;
}

@media (min-width: 1025px) {
  .calendar-main {
    max-width: 1000px;
    width: 100%;
  }

  /* Desktop agenda: painel transparente sem card */
  .calendar-agenda-panel {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    padding: 0;
    gap: 16px;
  }

  /* Desktop: agenda panel sem card background */

}

@media (max-width: 1024px) {
  .calendar-main-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "calendar"
      "banners"
      "agenda";
  }

  /* Mobile: restaurar card style no painel */
  .calendar-agenda-panel {
    background: transparent;
    border: 0px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 40px;
  }

  .card:hover{
    border: 0px !important;
    transform: none !important;
    transition: none !important;
  }

  /* Mobile: 1 coluna no grid de posts */
  #cal-agenda-posts-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0x !important;
  }

  /* Mobile: filtros com scroll horizontal */
  .cal-agenda-toolbar {
    padding: 10px 12px 0;
  }

  .cal-agenda-toolbar .posts-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
  }

  .cal-agenda-toolbar .posts-filters {
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .cal-agenda-toolbar .filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.78rem;
    padding: 5px 10px;
  }

  /* Source filter: mostrar no mobile, mas empurrar para linha separada */
  .cal-agenda-toolbar .posts-actions {
    display: flex;
    width: 100%;
    padding: 6px 0 8px;
    overflow-x: auto;
  }

  .cal-agenda-toolbar .cal-source-filter {
    width: 100%;
    justify-content: stretch;
  }

  .cal-agenda-toolbar .cal-source-btn {
    flex: 1;
    text-align: center;
  }

  .cal-agenda-toolbar .posts-toolbar {
    flex-wrap: wrap;
  }

  /* Mobile: cal-toolbar-right vira grid 2 colunas (tipo | origem) */
  .cal-agenda-toolbar .cal-toolbar-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 8px;
  }

  /* Mobile: mostrar dropdown de origem, esconder botões */
  .cal-agenda-toolbar .cal-src-dropdown--mobile { display: flex; }
  .cal-agenda-toolbar .cal-source-filter { display: none; }

  /* Dropdowns ocupam 100% da célula do grid */
  .cal-agenda-toolbar .cal-toolbar-right .cal-type-dropdown {
    width: 100%;
  }
  .cal-agenda-toolbar .cal-toolbar-right .cal-type-toggle {
    width: 100%;
    justify-content: space-between;
  }

  /* Remove separador lateral no mobile */
  .cal-agenda-toolbar .cal-toolbar-right .cal-source-filter {
    border-left: none;
    padding-left: 0;
  }
}

@media (max-width: 768px) {
  .calendar-main-grid {
    grid-template-columns: 1fr;
  }

  .calendar-banner-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .calendar-event-thumb {
    max-width: 64px;
    aspect-ratio: 4 / 5;
  }

  .calendar-day-add-icon {
    width: 28px;
    height: 28px;
    font-size: 1.1rem;
  }

  .calendar-period-label {
    min-width: 140px;
    font-size: 1rem;
  }
  
  .calendar-briefing-section {
    padding: 16px !important;
  }
  .calendar-briefing-section-title{
    line-height: 22px;
  }
}

.suggestion-content {
  flex: 1;
}

.suggestion-content h4 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 4px;
}

.suggestion-content p {
  font-size: 0.75rem;
  color: #6c757d;
  margin: 0 0 8px;
}

.suggestion-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.75rem;
}

.suggestion-meta .time {
  color: #6c757d;
}

.suggestion-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ==================== SETTINGS ==================== */

.settings-container {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: var(--spacing-xl);
}

.settings-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: default;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: all 0.2s;
  color: var(--text-color-dark);
}

.settings-tab:hover {
  background: var(--background-color);
}

.settings-tab.active {
  background: var(--primary-color);
  color: #fff;
}

.settings-content {
  flex: 1;
}

.profile-photo-section {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
}

.profile-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}
.profile-photo.fallback {
  background: var(--secondary-color);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 36px;
}

.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: default;
}

.theme-selector {
  display: flex;
  gap: var(--spacing-md);
}

.theme-option {
  flex: 1;
  padding: var(--spacing-lg);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: transparent;
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.theme-option:hover {
  border-color: var(--primary-color);
}

.theme-option.active {
  border-color: var(--primary-color);
  background: rgba(0, 123, 255, 0.05);
}

.logo-upload-area {
  border: 2px dashed var(--border-color);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-xl);
  text-align: center;
  cursor: default;
  transition: all 0.2s;
  padding: 20px !important;
}

.logo-upload-area:hover {
  border-color: var(--primary-color);
  background: rgba(0, 123, 255, 0.02);
}

.templates-selection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--spacing-md);
}

.template-checkbox {
  position: relative;
}

.template-checkbox input {
  position: absolute;
  opacity: 0;
}

.template-checkbox label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--spacing-sm);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-md);
  cursor: default;
  transition: all 0.2s;
}

.template-checkbox input:checked + label {
  border-color: var(--primary-color);
  background: rgba(0, 123, 255, 0.05);
}

.template-checkbox label img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
}

.instagram-connected,
.instagram-not-connected {
  padding: var(--spacing-lg);
}

.instagram-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}

.instagram-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.instagram-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--background-color);
  border-radius: var(--border-radius-md);
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
}

.stat-label {
  font-size: 0.875rem;
  color: #6c757d;
}

.notification-group h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 1024px) {
  .calendar-grid-container {
    grid-template-columns: 1fr;
  }

  .settings-container {
    grid-template-columns: 1fr;
    margin-bottom: 70px;
  }

  .settings-tabs {
    flex-direction: row;
    overflow-x: auto;
  }

  .settings-tab {
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .card {
    /*background: var(--color-background); */
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-md);
    padding: 0 !important;
    transition: all var(--transition-base);
    border: 1px solid transparent;
  }

  .search-box input {
    padding-left: 10px !important;
    font-size: 14px;
    width: 100%;
  }

  .posts-toolbar,
  .videos-toolbar,
  .calendar-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-md);
  }

  .posts-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    align-items: center;
  }

  .posts-actions .search-box {
    grid-column: 1 / 1;
  }

  .posts-actions #posts-sort,
  .posts-actions #stories-sort {
    width: 100%;
    font-size: 14px;
  }

  .posts-container.list-view .post-card {
    flex-direction: column;
  }

  .posts-container.list-view .post-card-thumbnail {
    width: 100%;
    aspect-ratio: 4 / 5;
  }

  .videos-grid {
    grid-template-columns: 1fr;
    padding: var(--spacing-md);
  }

  .calendar-grid-container {
    grid-template-columns: 1fr;
  }

  .calendar-day {
    min-height: 60px;
    font-size: 0.875rem;
  }

  .teleprompter-container {
    grid-template-rows: 150px 1fr auto auto;
    height: calc(100vh - 200px);
  }

  .teleprompter-text {
    font-size: 24px;
  }

  .settings-tabs {
    gap: 8px;
  }

  .templates-selection {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Post cards mobile improvements */
  .post-card {
    margin-bottom: var(--spacing-md);
  }

  .post-card-thumbnail {
    aspect-ratio: 4/5;
  }

  .post-card-content {
    padding: var(--spacing-md);
    padding-left: 8px;
    padding-top: 12px;
  }

  .post-card-title {
    font-size: 1rem;
  }

  .post-card-caption {
    font-size: 0.875rem;
    margin-bottom: var(--spacing-sm);
  }

  .post-card-actions {
    padding: var(--spacing-sm);
    flex-wrap: wrap;
    gap: var(--spacing-xs);
  }

  /* Video cards mobile improvements */
  .video-thumbnail {
    aspect-ratio: 9/16;
  }

  .video-info {
    padding: var(--spacing-sm);
  }

  .video-info h3 {
    font-size: 0.9rem;
  }

  .video-info p {
    font-size: 0.8rem;
  }

  .video-actions {
    padding: var(--spacing-sm);
    flex-wrap: wrap;
    gap: var(--spacing-xs);
  }

  /* Settings mobile improvements */
  .profile-photo-section {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-md);
  }

  .instagram-stats {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .theme-selector {
    flex-direction: column;
  }

  .logo-upload-area {
    padding: var(--spacing-lg);
  }

  /* Calendar mobile improvements */
  .calendar-nav {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .calendar-nav h3 {
    min-width: auto;
  }

  .calendar-view-toggle {
    width: 100%;
    justify-content: center;
  }

  .suggestion-calendar-item {
    flex-direction: column;
    text-align: center;
  }

  .suggestion-date {
    align-self: center;
  }

  .suggestion-actions {
    flex-direction: row;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  #stories-container .post-card-thumbnail {
    aspect-ratio: 9 / 16 !important;
  }
}

/* Mobile: Video Creation form - remove padding do card */
@media (max-width: 768px) {
  .video-creation-form .card {
    padding: 0 !important;
  }

  .video-preview-frame {
    max-width: 80%;
  }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
  .post-card-content {
    padding: var(--spacing-sm);
    padding-left: 8px;
    padding-top: 12px;
  }

  .post-card-title {
    font-size: 0.9rem;
  }

  .post-card-caption {
    font-size: 0.8125rem;
  }

  .video-info {
    padding: var(--spacing-xs);
  }

  .video-info h3 {
    font-size: 0.85rem;
  }

  .video-info p {
    font-size: 0.75rem;
  }

  .teleprompter-text {
    font-size: 20px;
    padding: 0 0.5rem;
  }

  .teleprompter-screen {
    padding: 10px;
    padding-top: 20vh;
  }

  .teleprompter-controls {
    padding: 12px !important;
    gap: var(--spacing-sm);
    width: calc(100% - 24px);
  }

  .teleprompter-controls .btn {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }
  .video-preview-frame {
    max-width: 80%;
  }

  .btn-large {
    padding: 15px 25px;
    font-size: 1rem;
  }

  .settings-tab {
    padding: 8px 12px;
    font-size: 13px;
  }

  .templates-selection {
    grid-template-columns: 1fr;
  }

  .calendar-day {
    min-height: 50px;
    padding: 4px;
  }

  .day-number {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
  }

  .approval-card {
    min-width: 250px;
    padding: var(--spacing-sm);
  }

  .approval-thumb {
    height: 150px;
  }

  .approval-thumb.vertical {
    height: 150px;
  }
}

/* ==================== UTILITIES ==================== */

.ml-md {
  margin-left: var(--spacing-md);
}

.mr-sm {
  margin-right: var(--spacing-sm);
}

.mt-xs {
  margin-top: var(--spacing-xs);
}

.empty-state-large {
  text-align: center;
  padding: var(--spacing-xxl);
  color: #6c757d;
}

.empty-state-large svg {
  margin: 0 auto var(--spacing-lg);
  opacity: 0.3;
}

.empty-state-large h2 {
  margin-bottom: var(--spacing-md);
  color: var(--text-color-dark);
}

.empty-state-large p {
  margin-bottom: var(--spacing-xl);
}

.btn-danger {
  background: var(--danger-color);
  color: #fff;
}

.btn-danger:hover {
  background: #c82333;
}

.btn-warning {
  background: var(--warning-color);
  color: #fff;
}

.btn-warning:hover {
  background: #e0a800;
}

.btn-accent {
  background: var(--accent-color);
  color: #fff;
}

.btn-accent:hover {
  background: #218838;
}

.tpl-subtab-bar{
  width: auto !important;
}

/* Mobile modal body adjustments */
@media (max-width: 768px) {
  .modal .modal-body {
    overflow: hidden !important;
    overflow-y: visible !important;
    padding: 0 !important;
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .tpl-subtab-bar{
   width: 90vw !important;
  }
}

@media (max-width: 768px) {
  .modal.onboarding-modal-prophoto .modal-body,
  .modal.onboarding-modal-audience .modal-body {
    overflow-y: visible !important;
    padding: 0 !important;
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Mobile: modal de rejeição sem padding/overflow no body */
@media (max-width: 768px) {
  .modal.reject-post .modal-body {
    overflow: hidden;
    padding: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Mobile modal structure adjustments */
@media (max-width: 768px) {
  .modal .modal-body > div {
    display: block !important;
    padding: 0.5rem 0.5rem 0.5rem 0 !important;
  }

  .modal .modal-body > div.rn-confirm-btns {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    padding: 0 !important;
  }

  .modal .modal-body > div.img-grid {
      overflow-y: auto;
      display: grid !important;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
  }

  .modal .modal-body > div > div {
    margin-bottom: 20px;
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .modal .modal-body > div.pctpl-grid{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .modal .modal-body > div > div.pctpl-card{
    padding-bottom: 0 !important;
  }

  .modal .modal-body > div > div.img-card {
    margin-bottom: 20px;
    padding-bottom: 0 !important;
  }

   .modal.modal-fullscreen .modal-body > div > div {
    margin-bottom: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Template grid cards on mobile */
  .tpl-card {
    aspect-ratio: 4 / 5 !important;
  }
}

/* Mobile modal footer full width */
@media (max-width: 768px) {
  .modal-footer {
    width: 100%;
    padding-right: 0px;
  }
}

/* ==================== MOBILE BOTTOM NAV - NOTCH + CENTER FAB ==================== */
@media (max-width: 768px) {
  html {
    overflow: hidden;
  }

  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 0 8px;
    background: #161e2bd4; /* mantém próximo do visual do app */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,0.06);
  }

  /* Notch: recorte curvo no topo do bottom-nav para acomodar o botão central */
  .bottom-nav::before {
    content: '';
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 48px;
    background: var(--app-bg, #0a0a0a);
    border-bottom-left-radius: 48px;
    border-bottom-right-radius: 48px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.35);
    pointer-events: none;
    z-index: 0;
    display: none;
  }

  /* Central FAB "+" ajustado para ficar circular e elevado */
  #quick-create {
    flex: 0 0 auto;
  }
  #quick-create-btn {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    width: 68px;
    height: 68px;
    border-radius: 50% !important;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f1722;
    border: 6px solid #d0d5db; /* anel claro como no mock */
    box-shadow: 0 8px 22px rgba(0,0,0,0.45);
    z-index: 2;
    border: 4px solid #2f363f !important;
  }
  #quick-create-btn svg { width: 28px; height: 28px; }
  #quick-create-btn span { display: none; }

  /* Distribuição dos itens laterais mantendo espaçamento */
  .bottom-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    align-items: end;
    column-gap: 2px;
  }
  /* Garantir que o item central (quick-create) não empurre os demais */
  .bottom-nav .bottom-nav-item { 
    z-index: 1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

}

/* ==================== QUICK CREATE MENU (tela cheia + blur + animação) ==================== */
.quick-create-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  opacity: 0;
}
.quick-create-overlay.is-open {
  pointer-events: auto;
  opacity: 1;
  align-items: flex-end;
}
.quick-create-overlay.is-closing {
  opacity: 0;
}
.quick-create-overlay.is-closing .quick-create-panel {
  transform: translateY(100%);
}
/* Blur no conteúdo atrás do modal (melhor contraste) */
.quick-create-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
/* Painel: fora do bottom-nav, fixed, tela cheia, animação de subir */
.quick-create-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  background: rgba(17, 20, 28, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: none;
  opacity: 0.8;
  border-radius: 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 401;
}
.quick-create-overlay.is-open .quick-create-panel {
  transform: translateY(0);
}
.quick-create-overlay.is-closing .quick-create-panel {
  transform: translateY(100%);
}
#home-quick-create-btn{
  width: 170px;
  height: 50px;
}

/* Mobile: quick-create não cobre o bottom-nav (apenas este modal; outros mantêm como está) */
@media (max-width: 768px) {
  .quick-create-overlay {
    bottom: 64px; /* altura do bottom-nav */
  }

  #sidebar-quick-create-btn{
    display: none;
  }
}

@media (min-width: 769px) {
  .quick-create-overlay {
    align-items: center;
    padding: 16px;
  }
  .quick-create-overlay.is-open {
    align-items: center;
  }
  .quick-create-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    width: 100%;
    max-width: 700px;
    height: auto;
    max-height: 88vh;
    margin: 0;
    transform: translate(-50%, -50%) scale(0.95);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  }
  .quick-create-overlay.is-open .quick-create-panel {
    transform: translate(-50%, -50%) scale(1);
  }
  .quick-create-overlay.is-closing .quick-create-panel {
    transform: translate(-50%, -50%) scale(0.95);
  }
  .quick-create-panel {
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }
}
.quick-create-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #e5e5e5;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s ease, color 0.15s ease;
}
.quick-create-close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.quick-create-content {
  padding: 24px 20px 32px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  margin-bottom: 90px;
}
.quick-create-title {
  margin: 0 0 20px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.quick-create-section {
  margin-bottom: 24px;
}
.quick-create-section:last-child {
  margin-bottom: 0;
}
.quick-create-subtitle {
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
}
.quick-create-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 600px) {
  .quick-create-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 900px) {
  .quick-create-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.quick-create-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  min-height: 130px;
}
.quick-create-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(99, 102, 241, 0.5);
  color: #fff;
}
.quick-create-card:active {
  background: rgba(255, 255, 255, 0.1);
}
.quick-create-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #63f1b8);
}
.quick-create-card:hover .quick-create-card-icon {
  color: #818cf8;
}
.quick-create-card-label {
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.quick-create-card-sublabel {
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.quick-create-card-highlight {
  font-size: 1rem;
  font-weight: 800;
}
.quick-create-card--carousel .quick-create-card-highlight,
.quick-create-card--post     .quick-create-card-highlight { color: #fff; }
.quick-create-card--post    { background: rgb(52 144 220 / 15%);  border-color: rgb(52 144 220 / 34%); }
.quick-create-card--post    .quick-create-card-icon { color: #74b9e9; }
.quick-create-card--post:hover    { background: rgba(52, 144, 220, 0.14); border-color: rgba(52, 144, 220, 0.45); }

.quick-create-card--carousel { background: rgb(34 194 149 / 11%); border-color: rgb(32 224 187 / 21%); }
.quick-create-card--carousel .quick-create-card-icon { color: #22b5c2; }
.quick-create-card--carousel:hover { background: rgba(34, 181, 194, 0.14); border-color: rgba(34, 181, 194, 0.45); }

.quick-create-card--story   { background: rgba(255, 159, 28, 0.07);  border-color: rgba(255, 159, 28, 0.22); }
.quick-create-card--story   .quick-create-card-icon { color: #f59f00; }
.quick-create-card--story:hover   { background: rgba(255, 159, 28, 0.14); border-color: rgba(255, 159, 28, 0.45); }

.quick-create-card--video   { background: rgb(139 92 246 / 12%);  border-color: rgba(139, 92, 246, 0.22); }
.quick-create-card--video   .quick-create-card-icon { color: #a78bfa; }
.quick-create-card--video:hover   { background: rgba(139, 92, 246, 0.14); border-color: rgba(139, 92, 246, 0.45); }

/* ==================== MAIN CONTENT - MOBILE LAYOUT ==================== */
@media (max-width: 480px) {
  .main-content {
    height: calc(100vh - 58px);
    /* margin-top: 58px !important; fernando */
    margin-top: 0px !important;
    transform: translateY(0);
    transition: transform .22s ease, opacity .18s ease;
    opacity: 1;
    padding-bottom: 64px;
  }
}

@media (max-width: 768px) {
  .main-content {
    margin-left: 0 !important;
    /* margin-top: 69px !important; fernando */
    top: 60px !important;
    margin-top: 0 !important; 
    height: calc(100vh - 90px);
    overflow-y: auto;
    transition: transform .22s ease, opacity .18s ease;
    transform: translateY(0);
    opacity: 1;
    padding-bottom: 64px;
    padding: 7px;
  }
}

/* ==================== PREVIEW LOADING SPINNER (Pulmo) ==================== */
.preview-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 240px;
  width: 100%;
  text-align: center;
}

/* TPV2 Clip Viewer - Desktop overrides */
@media (min-width: 1025px) {
  /* Primeira div dentro do #tpv2-clip-viewer (painel) */
  #tpv2-clip-viewer > div:first-child {
    width: auto !important;
  }
  /* Div pai do <video> no viewer */
  #tpv2-clip-viewer > div:first-child > div:nth-child(2) > div:first-child {
    width: auto !important;
    height: 500px !important;
    aspect-ratio: auto !important;
  }
}

/* TPV2 clip viewer buttons */
#tpv2-viewer-close{
  color: #fff !important;
  font-weight: 700;
}
#tpv2-record-again{
  color: #b3b3b3 !important;
  padding: 15px;
}

/* ==================== ONBOARDING HUB ==================== */
.onboarding-active #page-content {
  padding: 0 !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
}

.onboarding-active #main-content {
  opacity: 1 !important;
  width: 100%;
}

/* Modais do onboarding com altura fixa */


.onboarding-modal.onboarding-modal-specialty {
  height: auto !important;
}

.onboarding-modal.onboarding-modal-specialty .modal-body {
  overflow-y: hidden !important;
}

.onboarding-modal-instagram {
  height: auto !important;
}

@media (max-width: 768px) {
  .modal.onboarding-modal-prophoto .modal-body > div > div, .modal.onboarding-modal-create .modal-body > div > div,
  .modal.onboarding-modal-audience .modal-body > div > div, .modal.onboarding-modal-create .modal-body > div > div {
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
    margin-top: 20px;
  }
  
  /* Grid de público-alvo em 1 coluna no mobile */
  .modal.onboarding-modal-audience .modal-body > div > div > div,
  .modal.onboarding-modal-audience .modal-body div[style*="grid-template-columns"] {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .modal.onboarding-modal-audience .modal-body {
    overflow-x: hidden;
    padding: 0 !important;
    padding-bottom: 0px;
  }
}

@media (max-width: 768px){
  .onboarding-page { padding: 0px !important; }
  .onboarding-page .hub { padding: 24px 16px !important; border: 0px !important; }
  .onboarding-page .steps { gap: 10px !important; }
  .onboarding-page h1 { font-size: 1.4rem !important; }
  .onboarding-page p { font-size: 0.95rem !important; }
  .onb-step-card {
      padding: 10px 15px !important;
  }
  .onb-step-card h3 {
      line-height: 22px;
  }
  
  .onboarding-active .main-content {
    margin-left: 0 !important;
    margin-top: 0 !important;
    height: calc(100vh - 56px - 64px);
    overflow-y: auto;
    transition: margin-top .22s ease, height .22s ease;
  }
}
@media (max-width: 768px) {
  .onboarding-page p {
    font-size: 0.95rem !important;
    margin-bottom: 0;
  }
}
/* Hover effect nos cards */
.onboarding-page .steps > div:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(16,185,129,0.15);
}

/* Loading: Carrossel de Dicas */
.cp-tips-carousel{
  width: 100%;
  max-width: 580px; /* desktop cap */
  margin-top: 14px;
  margin-left: auto;
  margin-right: auto;
}
.cp-tips-track{
  overflow: hidden;
  border: 1px solid #13252b;
  border-radius: 14px;
  background: linear-gradient(180deg, #0a0f13 0%, #215459 100%);
}
.cp-tip{
  flex: 0 0 100%;
  padding: 16px 18px;
  color: #e5e7eb;
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
}
.cp-tip-badge{
  position: absolute;
  top: 8px;
  left: 10px;
  background: #111;
  border: 1px solid #333;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  color: #cbd5e1;
  opacity: .9;
}
.cp-tip-text{
  font-size: 15px;
  line-height: 1.6;
  padding: 6px 8px;
  margin-top: 21px;
  padding-bottom: 10px;
}
.cp-tips-dots{
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}
.cp-tip-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2a3342;
  opacity: .8;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all .18s ease;
}
.cp-tip-dot.active{
  width: 22px;
  background: var(--primary-color, #4a90e2);
  opacity: 1;
}
@media (max-width: 768px){
  .cp-tips-carousel{
    width: 90%;        /* 90% of screen on mobile */
    max-width: 90%;
  }
  .cp-tip{ min-height: 96px; padding: 18px 14px; }
  .cp-tip-text{ font-size: 14.5px; }
}

/* ==================== Preview do Post: Abas (Edição + Ajustar com IA) ==================== */
.preview-tabs {
  display: flex;
  flex-direction: column;
  height: calc(92vh - 80px);
  min-height: 320px;
}

.preview-tabs-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--premium-border, #1f1f22);
  background: var(--surface-color, #0d1117);
  padding: 0 4px;
  flex-shrink: 0;
  border-radius: 10px 10px 0 0;
}

.preview-tab-btn {
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted, #9ca3af);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -1px;
}

.preview-tab-btn:hover {
  color: var(--text-color-light, #e5e7eb);
}

.preview-tab-btn.active {
  color: var(--primary-color, #D4AF37);
  border-bottom-color: var(--primary-color, #D4AF37);
}

.preview-tab-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.preview-tab-badge--beta {
  background: linear-gradient(135deg, #63f1b8 0%, #8b5cf6 100%);
  color: #fff;
}
 

.modal.modal-fullscreen.modal-preview-video #preview-edit-cover-btn{
  width: 100%;
}

/* Edit-modal: display:block puro. Body e footer com position:absolute */
.modal.modal-fullscreen.modal-preview-video .modal-body,
.modal.modal-fullscreen.modal-preview-story .modal-body,
.modal.modal-fullscreen.modal-edit-video .modal-body,
.modal.modal-fullscreen.modal-edit-post .modal-body,
.modal.modal-fullscreen.modal-choose-template .modal-body,
.modal.modal-tpl-preview-ampliar .modal-body,
.modal.refinar-gallery-modal .modal-body,
.modal-full-prophoto .modal-body,
.modal.modal-fullscreen.edit-modal .modal-body {
  position: absolute !important;
  top: 30px !important;
  bottom: 46px !important;
  left: 0 !important;
  right: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  margin-top: 40px !important;
  max-height: -webkit-calc(100% - 170px) !important;
  max-height: calc(100% - 170px) !important;
}

.modal.modal-fullscreen.modal-edit-story .modal-body,
.modal.modal-fullscreen.modal-choose-template .modal-body,
.modal.refinar-gallery-modal .modal-body,
.modal.modal-fullscreen.modal-edit-carousel .modal-body {
  position: absolute !important;
  top: 30px !important;
  bottom: 26px !important;
  left: 0 !important;
  right: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  margin-top: 40px !important;
  max-height: -webkit-calc(100% - 0px) !important;
  max-height: calc(100% - 180px) !important;
}

/* Permite que o conteúdo cresça além do viewport */
.carousel-edit-image-modal .ceib-root {
  height: auto !important;
  min-height: 100%;
  scroll-snap-type: y proximity;
}
/* .img-ref sempre visível por inteiro no primeiro scroll (snap) */
.carousel-edit-image-modal .img-ref {
  scroll-snap-align: start;
  scroll-margin-top: 0;
}


.modal.modal-fullscreen.modal-edit-video > .actions-footer,
.modal.modal-fullscreen.modal-edit-carousel > .actions-footer,
.modal.modal-fullscreen.modal-edit-story > .actions-footer,
.modal.modal-fullscreen.modal-edit-post > .actions-footer,
.modal.modal-video-preview-reel .modal-footer,
.modal-revisar-reel .modal-footer { display:none !important; }

.modal.modal-geracao-erro { height: max-content; }

.modal.modal-fullscreen.modal-choose-template > .actions-footer,
.modal.modal-tpl-preview-ampliar > .actions-footer,
.modal.refinar-gallery-modal > .actions-footer,
.modal.modal-revisar-reel > .actions-footer,
.modal.modal-preview-video > .actions-footer,
.modal.modal-fullscreen.modal-preview-story > .actions-footer,
.modal.modal.modal-edit-post > .actions-footer,
.modal.modal.modal-edit-carousel > .actions-footer,
.modal.modal-fullscreen.edit-modal > .actions-footer {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 100%;
}
/* Lixeira empurrada para a direita — leva Publicar junto */
.modal.modal-fullscreen.modal-preview-video > .actions-footer #preview-reject,
.modal.modal-fullscreen.modal-preview-story > .actions-footer #preview-reject,
.modal.modal-fullscreen.modal-edit-carousel > .actions-footer #preview-reject,
.modal.modal-fullscreen.modal-edit-video > .actions-footer #preview-reject,
.modal.modal-fullscreen.modal-edit-story > .actions-footer #preview-reject,
.modal.modal-fullscreen.modal-edit-post > .actions-footer #preview-reject,
.modal.modal-fullscreen.modal-choose-template > .actions-footer #preview-reject,
.modal.modal-tpl-preview-ampliar > .actions-footer #preview-reject,
.modal.refinar-gallery-modal > .actions-footer #preview-reject,
.modal.modal-revisar-reel > .actions-footer #preview-reject,
.modal.modal-fullscreen.edit-modal > .actions-footer #preview-reject {
  margin-left: auto !important;
}
.modal.modal-fullscreen.modal-preview-video .modal-body > .preview-tab-panels,
.modal.modal-fullscreen.modal-preview-story .modal-body > .preview-tab-panels,
.modal.modal-fullscreen.modal-edit-carousel .modal-body > .preview-tab-panels,
.modal.modal-fullscreen.modal-edit-video .modal-body > .preview-tab-panels,
.modal.modal-fullscreen.modal-edit-story .modal-body > .preview-tab-panels,
.modal.modal-fullscreen.modal-edit-post .modal-body > .preview-tab-panels,
.modal.modal-fullscreen.modal-choose-template .modal-body > .preview-tab-panels,
.modal.modal-tpl-preview-ampliar .modal-body > .preview-tab-panels,
.modal.refinar-gallery-modal > .preview-tab-panels,
.modal.modal-revisar-reel > .preview-tab-panels,
.modal.modal-fullscreen.edit-modal .modal-body > .preview-tab-panels {
  height: 100% !important;
}
.modal.modal-fullscreen.modal-preview-story .preview-tab-panel.active,
.modal.modal-fullscreen.modal-preview-video .preview-tab-panel.active,
.modal.modal-fullscreen.modal-edit-story .preview-tab-panel.active,
.modal.modal-fullscreen.modal-edit-video .preview-tab-panel.active,
.modal.modal-fullscreen.modal-edit-post .preview-tab-panel.active,
.modal.modal-fullscreen.modal-edit-carousel .preview-tab-panel.active,
.modal.modal-fullscreen.modal-choose-template .preview-tab-panel.active,
.modal.modal-tpl-preview-ampliar .preview-tab-panel.active,
.modal.refinar-gallery-modal .preview-tab-panel.active,
.modal.modal-revisar-reel .preview-tab-panel.active,
.modal.modal-fullscreen.edit-modal .preview-tab-panel.active {
  display: block !important;
  height: 100% !important;
}
/* Container: ambas as colunas com height:100% (stretch) */
.modal.modal-fullscreen.edit-modal .container-stories-edit.preview-edit-panel {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  height: 100% !important;
}
/* Coluna esquerda: 100% de altura, sem scroll — imagem e botão totalmente visíveis */
.modal.modal-fullscreen.edit-modal .container-stories-edit.preview-edit-panel > div:first-child {
  flex: 0 0 54% !important;
  max-width: 54% !important;
  height: 100% !important;
  overflow: hidden !important;
}
/* Coluna direita: 100% de altura, scroll no inner-div se necessário */
.modal.modal-fullscreen.edit-modal .preview-edit-panel-right {
  flex: 1 !important;
  height: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding-right: 0 !important;
}

 .modal.modal-fullscreen.modal-choose-template{
  display: block !important;
 }


/* Desktop: modal ancorado no topo, header e footer mínimos — edit-modal e carousel */
@media (min-width: 769px) {


  .modal.modal-fullscreen.edit-modal,
  .modal.modal-fullscreen.modal-preview-video,
  .modal.modal-fullscreen.modal-preview-story,
  .modal.modal-fullscreen.modal-edit-video,
  .modal.modal-fullscreen.modal-edit-post,
  .modal.modal-fullscreen.modal-edit-carousel,
  .modal.modal-fullscreen.modal-choose-template,
  .modal.modal-fullscreen.modal-edit-story,
  .modal.modal-fullscreen.modal-revisar-reel,
  .modal-full-prophoto,
  .modal.refinar-gallery-modal,
  .modal.modal-tpl-preview-ampliar,
  .carousel-preview-modal {
    max-height: 96vh !important;
    top: 2vh !important;
    transform: translateX(-50%) !important;
  }
  .modal.modal-fullscreen.edit-modal .modal-header,
  .modal.modal-fullscreen.modal-preview-story .modal-header,
  .modal.modal-fullscreen.modal-preview-video .modal-header,
  .modal.modal-fullscreen.modal-edit-story .modal-header,
  .modal.modal-fullscreen.modal-edit-video .modal-header,
  .modal.modal-fullscreen.modal-edit-post .modal-header,
  .modal.modal-fullscreen.modal-choose-template .modal-header,
  .modal.modal-fullscreen.modal-edit-carousel .modal-header,
  .modal.modal-revisar-reel .modal-header,
  .modal-full-prophoto .modal-header,
  .modal.refinar-gallery-modal .modal-header,
  .modal.modal-tpl-preview-ampliar .modal-header,
  .carousel-preview-modal .modal-header {
    padding: 5px 20px !important;
    min-height: 0 !important;
  }
  .modal.refinar-gallery-modal .modal-header,
  .modal-full-prophoto .modal-header,
  .modal.refinar-gallery-modal .modal-header,
  .modal.modal-tpl-preview-ampliar .modal-header{
      top: 20px !important;
      position: absolute;
  }


  .modal.modal-tpl-preview-ampliar .modal-title{
    opacity: 0;
  }

  .modal.modal-fullscreen.edit-modal .modal-title,
  .modal.modal-fullscreen.modal-preview-video .modal-title,
  .modal.modal-fullscreen.modal-preview-story .modal-title,
  .modal.modal-fullscreen.modal-edit-story .modal-title,
  .modal.modal-fullscreen.modal-edit-video .modal-title,
  .modal.modal-fullscreen.modal-edit-post .modal-title,
  .modal.modal-fullscreen.modal-choose-template .modal-title,
  .modal.modal-fullscreen.modal-edit-carousel .modal-title,
  .modal.modal-tpl-preview-ampliar .modal-title,
  .modal.refinar-gallery-modal .modal-title,
  .modal.modal-revisar-reel .modal-title,
  .carousel-preview-modal .modal-title {
    font-size: 1rem !important;
  }
  .modal.modal-fullscreen.edit-modal .modal-body,
  .modal.modal-fullscreen.modal-preview-video .modal-body,
  .modal.modal-fullscreen.modal-preview-story .modal-body,
  .modal.modal-fullscreen.modal-edit-video .modal-body,
  .modal.modal-fullscreen.modal-edit-story .modal-body,
  .modal.modal-fullscreen.modal-edit-post .modal-body,
  .modal.modal-fullscreen.modal-choose-template .modal-body,
  .modal.modal-fullscreen.modal-edit-carousel .modal-body,
  .modal.modal-tpl-preview-ampliar .modal-body,
  .modal.refinar-gallery-modal .modal-body,
  .modal-full-prophoto .modal-body,
  .modal.modal-revisar-reel .modal-body,
  .modal-video-preview-reel .modal-body,
  .carousel-preview-modal .modal-body {
    padding: 8px 16px !important;
  }

  .modal-revisar-reel .modal-body,
  .modal-video-preview-reel .modal-body {
    height: calc(100vh - 50px) !important;
    max-height: 100vh !important;
  }
}

/* ── modal-video-preview-reel: espelha estilos do modal-revisar-reel ── */
.modal.modal-video-preview-reel > .actions-footer {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 100%;
}
.modal.modal-video-preview-reel > .preview-tab-panels {
  height: 100% !important;
}
.modal.modal-video-preview-reel .preview-tab-panel.active {
  display: block !important;
  height: 100% !important;
}
@media (min-width: 769px) {
  .modal.modal-fullscreen.modal-video-preview-reel {
    max-height: 96vh !important;
    top: 2vh !important;
    transform: translateX(-50%) !important;
  }
  .modal.modal-video-preview-reel .modal-header {
    padding: 5px 20px !important;
    min-height: 0 !important;
  }
  .modal.modal-video-preview-reel .modal-title {
    font-size: 1rem !important;
  }
  .modal.modal-video-preview-reel .modal-body {
    padding: 8px 16px !important;
    height: calc(96vh - 110px) !important;
    max-height: calc(96vh - 110px) !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

}


/* ── Review modal ─────────────────────────────────────────────────────── */
.rn-review-tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media(max-width: 480px) { .rn-review-tpl-grid { grid-template-columns: 1fr; } }
.rn-review-tpl-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; border-radius: 10px; cursor: pointer; background: #0f1520; border: 1.5px solid #1e2a3a; transition: border-color .15s, background .15s; text-align: left; position: relative; }
.rn-review-tpl-card:hover { border-color: #2a3a54; }
.rn-review-tpl-card.active { border-color: #6b8afd; background: rgba(107,138,253,.1); }
.rn-review-tpl-card.active::after { content: '✓'; position: absolute; top: 6px; right: 8px; font-size: 11px; color: #6b8afd; font-weight: 800; }
.rn-finalize-btn { width:100%; padding:14px 24px; border-radius:12px; border:none; cursor:pointer; font-size:15px; font-weight:700; color:#fff; background:#349863; transition:filter .2s,transform .15s; display:flex; align-items:center; justify-content:center; gap:8px; }
.rn-finalize-btn:hover { filter:brightness(1.1); transform:translateY(-1px); }
.rn-finalize-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.rn-img-preview { width:100%; max-height:200px; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,.08); margin-bottom:10px; display:block; }
.rn-pro-video-item { padding-bottom: 0px !important; cursor:pointer; border:2px solid transparent; border-radius:10px; overflow:hidden; transition:border-color .15s; }
.modal .modal-body > div > div.rn-pro-video-item { padding-bottom: 0px !important; }
.rn-pro-video-item.active { border-color:#6b8afd; }
.rn-pro-video-item video { width:100%; height:100px; object-fit:cover; display:block; }
.rn-pro-video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }


/* Template preview ampliar — header/footer compacto igual ao Preview do Post */
.modal.modal-tpl-preview-ampliar .modal-header {
  padding: 5px 20px !important;
  min-height: 0 !important;
}
.modal.modal-tpl-preview-ampliar .modal-title {
  font-size: 1rem !important;
}
.modal.modal-tpl-preview-ampliar .modal-body {
  padding: 8px 16px !important;
}
.modal.modal-tpl-preview-ampliar .modal-footer {
  padding: 10px 20px !important;
  border-top: 1px solid var(--border-color, #1e2330) !important;
  position: absolute !important;
    bottom: 10px !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100%;
}

.modal.modal-fullscreen.modal-preview-story .actions-footer .btn,
.modal.modal-fullscreen.modal-preview-video .actions-footer .btn,
.modal.modal-fullscreen.modal-edit-story .actions-footer .btn,
.modal.modal-fullscreen.modal-edit-video .actions-footer .btn,
.modal.modal-fullscreen.modal-edit-post .actions-footer .btn,
.modal.modal-fullscreen.modal-edit-carousel .actions-footer .btn,
.modal.modal-fullscreen.modal-choose-template .actions-footer .btn,
.modal.modal-fullscreen.edit-modal .actions-footer .btn,
.modal.refinar-gallery-modal .actions-footer .btn,
.modal-full-prophoto .actions-footer .btn,
.modal.modal-revisar-reel .actions-footer .btn,
.modal.modal-video-preview-reel .actions-footer .btn,
.modal.modal-tpl-preview-ampliar .actions-footer .btn
{
  padding: 7px 18px;
}
.modal.modal-fullscreen.modal-preview-story > .actions-footer,
.modal.modal-fullscreen.modal-preview-video > .actions-footer,
.modal.modal-fullscreen.modal-edit-story > .actions-footer,
.modal.modal-fullscreen.modal-edit-video > .actions-footer,
.modal.modal-fullscreen.modal-edit-post > .actions-footer,
.modal.modal-fullscreen.modal-choose-template > .actions-footer,
.modal.modal-fullscreen.modal-edit-carousel > .actions-footer,
.modal.refinar-gallery-modal > .actions-footer,
.modal-full-prophoto > .actions-footer,
.modal.modal-revisar-reel > .actions-footer,
.modal.modal-video-preview-reel > .actions-footer,
.modal.modal-tpl-preview-ampliar > .actions-footer {
  padding: 24px 12px !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
}


.preview-tab-panels {
  flex: 1;
  min-height: 0;
  /*overflow: hidden;*/
  position: relative;
}

/* Quando não há barra de abas (só edição ou só chat), preencher altura */
.modal-body > .preview-tab-panels {
  height: calc(92vh - 80px);
  min-height: 320px;
}

.preview-tab-panel {
  display: none;
  height: 100%;
  animation: previewTabIn 0.25s ease-out;
}

.preview-tab-panel.active {
  display: block;
}

/* Preview do Post: coluna direita */
.edit-modal .container-stories-edit.preview-edit-panel {
  padding-right: 0;
  box-sizing: border-box;
}
.edit-modal .preview-edit-panel-right {
  padding-right: 0;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}
.edit-modal .preview-edit-panel-right .form-input,
.edit-modal .preview-edit-panel-right .actions-footer {
  max-width: 100%;
  box-sizing: border-box;
}

@keyframes previewTabIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Chat de tuning: layout imagem (esquerda) + conversa (direita) */
.preview-chat-panel {
  height: calc(92vh - 190px);
  min-height: 320px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 16px 0;
}

.preview-chat-left {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  padding: 12px;
}

.preview-chat-image-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-chat-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  transition: opacity 0.3s ease;
}

.preview-chat-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--premium-border, #1f1f22);
  border-radius: 12px;
  background: var(--surface-color, #0d1117);
  overflow: hidden;
}

.preview-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 120px;
}

.preview-chat-msg {
  display: flex;
  animation: previewChatMsgIn 0.3s ease-out;
}

.preview-chat-msg--user {
  justify-content: flex-end;
}

.preview-chat-msg--assistant {
  justify-content: flex-start;
}

.preview-chat-msg-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 1rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.preview-chat-msg--user .preview-chat-msg-bubble {
  background: #145056;
  color: #ffffff;
  border-bottom-right-radius: 4px;
}

.preview-chat-msg--assistant .preview-chat-msg-bubble {
  background: var(--premium-border, #1f1f22);
  color: var(--text-color-light, #e5e7eb);
  border-bottom-left-radius: 4px;
}

@keyframes previewChatMsgIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.preview-chat-typing {
  display: flex;
  align-items: center;
  padding: 8px 16px 12px;
  min-height: 44px;
}

.preview-chat-typing-dots {
  display: inline-flex;
  gap: 4px;
  font-size: 2.25rem;
  color: #ffd524;
  font-weight: 800;
}


.preview-chat-typing-dots span {
  animation: previewTypingDot 0.6s ease-in-out infinite both;
}

.preview-chat-typing-dots span:nth-child(1) { animation-delay: 0s; }
.preview-chat-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.preview-chat-typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes previewTypingDot {
  0%, 80%, 100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

.preview-chat-input-wrap {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--premium-border, #1f1f22);
  background: var(--surface-color, #0d1117);
  flex-shrink: 0;
}

.preview-chat-input {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--premium-border, #1f1f22);
  background: #fff;
  color: #000;
  font-size: 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.preview-chat-input:focus {
  outline: none;
  border-color: var(--primary-color, #D4AF37);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

.preview-chat-send {
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: 10px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.preview-chat-send:hover:not(:disabled) {
  transform: translateY(-1px);
}

.preview-chat-send:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Responsivo: preview tabs e chat */
@media (max-width: 900px) {
  .preview-chat-panel {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(200px, 40vh) 1fr;
    height: auto;
    min-height: 400px;
  }

  .modal .modal-body > div > div.rn-pro-video-item { 
    padding-bottom: 0px !important; 
    margin-bottom: 0px !important;
  }


  .preview-chat-left {
    min-height: 200px;
  }

  .modal .modal-body > div > div.preview-tabs-bar {
      flex-wrap: wrap;
      padding-bottom: 0px !important;
  }

  .modal .modal-body > div > div.preview-tab-panels {
    padding-bottom: 0px !important;
}

  .preview-tabs-bar {
    flex-wrap: wrap;
  }

  .preview-tab-btn {
    padding: 10px 14px;
    font-size: 0.9rem;
  }

  .modal.modal-fullscreen.edit-modal .actions-footer .btn{
    padding: 9px 12px;
  }
  
}

@media (max-width: 600px) {
  .preview-tabs {
    height: auto;
    min-height: 280px;
  }

  .preview-chat-panel {
    min-height: 360px;
    padding: 8px 0;
  }

  .preview-chat-messages {
    padding: 12px;
    min-height: 300px;
  }

  .preview-chat-input-wrap {
    flex-direction: column;
    padding: 10px 12px;
  }

  .preview-chat-send {
    width: 100%;
  }

  .container-stories-edit.preview-edit-panel {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .container-stories-edit.preview-edit-panel > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    min-height: 0 !important;
  }

  .edit-modal {
    padding-right: 4px;
  }

  .edit-modal .container-stories-edit.preview-edit-panel {
      padding-right: 2px !important;
  }

  #preview-caption {
    display: block !important;
    visibility: visible !important;
    min-height: 2.5em !important;
  }

  .edit-modal .modal-body .preview-tab-panels {
    overflow-y: hidden !important;
  }
}

/* Edit-modal mobile: flex-column, body estático e scrollável, footer estático */
@media (max-width: 768px) {


  .modal-video-preview-reel #toggle-edit-caption{
    margin-bottom: 100px;
  }

  .modal.modal-video-preview-reel .actions-footer{
    padding: 24px 12px !important;
    margin-bottom: 0px !important;
  }

  .modal.refinar-gallery-modal{
    display: flex !important;
    flex-direction: column !important;
    width: 95vw !important;
    max-width: 95vw !important;
    border-radius: 0 !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    max-height: 100dvh !important;
    height: 95dvh !important;
    margin: 2.5dvh 2.5dvw;
  }


  .modal.modal-fullscreen.edit-modal {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
    padding-left: 12px;
    padding-right: 12px;
  }
  /* body: sai do position:absolute, vira flex-item scrollável */
  .modal.modal-fullscreen.edit-modal .modal-body,
  .modal.modal-fullscreen.modal-preview-story .modal-body,
  .modal.modal-fullscreen.modal-edit-story .modal-body,
  .modal.modal-fullscreen.modal-edit-post .modal-body,
  .modal.modal-choose-template .modal-body,
  .modal.refinar-gallery-modal .modal-body,
  .modal-full-prophoto .modal-body,
  .modal.modal-fullscreen.modal-preview-video .modal-body {
    position: static !important;
    flex: 1 1 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px 0px !important;
    box-sizing: border-box !important;
    height: calc(100% - 170px) !important;
  }

  .modal.modal-tpl-preview-ampliar .modal-header{
    top: 0 !important;
    position: absolute !important;
  }

  .branding-font-dropdown__trigger{
    width: 100% !important;
  }

  /* footer: sai do position:absolute, fica no rodapé do flex */
  .modal.modal-fullscreen.modal-preview-story > .actions-footer,
  .modal.modal-fullscreen.modal-preview-video > .actions-footer,
  .modal.modal-fullscreen.modal-edit-post > .actions-footer,
  .modal-full-prophoto > .actions-footer,
  .modal.modal-fullscreen.edit-modal > .actions-footer {
    position: static !important;
    flex-shrink: 0 !important;
    padding: 10px 0px !important;
  }
  /* coluna única: imagem em cima, conteúdo abaixo */
  .modal.modal-fullscreen.modal-preview-story .modal-body > .preview-tab-panels,
  .modal.modal-fullscreen.modal-preview-story .preview-tab-panel.active,  
  .modal.modal-fullscreen.modal-preview-video .modal-body > .preview-tab-panels,
  .modal.modal-fullscreen.modal-preview-video .preview-tab-panel.active,
  .modal.modal-fullscreen.modal-edit-post .preview-tab-panel.active,
  .modal.modal-fullscreen.edit-modal .modal-body > .preview-tab-panels,
  .modal-full-prophoto > .preview-tab-panels,
  .modal.modal-fullscreen.edit-modal .preview-tab-panel.active {
    height: auto !important;
  }

  .modal.modal-fullscreen.modal-preview-story .modal-body > .preview-tab-panels{
    height: calc(100vh - 240px) !important;
  }

  .modal.modal-edit-post .modal-body{
    height: calc(100vh - 170px) !important;
    max-height: 100vh !important;
  }

  .modal-video-preview-reel .modal-body,
  .modal-revisar-reel .modal-body{
    height: calc(100vh - 120px) !important;
    max-height: 100vh !important;
  }



  .modal.modal-fullscreen.edit-modal .container-stories-edit.preview-edit-panel,
  .modal.modal-fullscreen.modal-preview-video .preview-edit-panel {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
    gap: 12px !important;
    display: block !important;
  }
  .modal.modal-fullscreen.modal-preview-video .preview-edit-panel > div:first-child,
  .modal.modal-fullscreen.edit-modal .container-stories-edit.preview-edit-panel > div:first-child {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
  /* Carousel preview mobile: mesma lógica */
  .carousel-preview-modal {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
  }
  .carousel-preview-modal .modal-body {
    position: static !important;
    flex: 1 1 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
  }
  .carousel-preview-modal .ecp-preview {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
  /* Carousel: grid vira coluna única */
  .carousel-preview-modal .carousel-preview-grid {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
    gap: 12px !important;
  }
  .carousel-preview-modal .cp-left {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .carousel-preview-modal .cp-right {
    flex: none !important;
    height: auto !important;
    overflow: visible !important;
    min-width: 0 !important;
    padding-right: 0 !important;
  }
  /* Footer carousel mobile: estático */
  .carousel-preview-modal > .actions-footer {
    position: static !important;
    flex-shrink: 0 !important;
    padding: 16px 12px !important;
  }
  .modal.modal-fullscreen.edit-modal .preview-edit-panel-right {
    flex: none !important;
    height: auto !important;
    overflow: visible !important;
    min-height: 0 !important;
  }
}

/* Preview modal - Publicar Agora button custom color */
#preview-publish-now {
  background: #35af62 !important;
}
#preview-publish-now:hover {
  background: #20954b !important;
}

button[aria-label="Editar imagens"] svg,
button[aria-label="Editar imagem"] svg{
    width: 26px;
    height: 26px;
}
@media (max-width: 400px) {
  button[aria-label="Editar imagem"] svg,
  button[aria-label="Editar imagens"] svg{
      display: none;
  }
  .btn#preview-open-publish{
    padding: 10px 15px !important;
  }
}

@media (max-width: 768px) {
  button[aria-label="Editar imagem"],
  button[aria-label="Editar imagens"]{
      padding: 10px 10px 10px 10px !important;
      font-size: 13px;
  }
  button[aria-label="Editar imagens"] svg,
  button[aria-label="Editar imagem"] svg{
      width: 17px;
      height: 17px;
  }
  
}

button#preview-open-publish{
  background: linear-gradient(23deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%) !important;
}

#pub-now, #pub-sched {
  background: linear-gradient(23deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}



/* Preview modals: carousel grid → 1 coluna no mobile */
@media (max-width: 768px) {
  .carousel-preview-grid {
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow-y: auto;
  }

  .carousel-preview-grid .cp-left {
    min-height: 240px;
  }

  /* Actions footer: empilhar no mobile se precisar */
  .modal .actions-footer {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 0px !important;
  }

  .slides--strip {
    gap: 0px;
  }

  button[aria-label="Editar imagens"]{
    padding: 10px 12px !important;
  }

  .modal .actions-footer .btn--lg {
    flex-shrink: 0;
  }

  .modal.modal-fullscreen.modal-edit-story .modal-body, 
  .modal.modal-fullscreen.modal-edit-carousel .modal-body{
    overflow-y: auto !important;
    padding: 10px !important;
  }


  .modal.modal-fullscreen.modal-edit-story .modal-header, 
  .modal.modal-fullscreen.modal-edit-carousel .modal-header{
    border-bottom: 1px solid var(--border-color, #e0e0e0) !important;
  }


}

svg#spin-pulmo {
  width: 96px;
  height: 96px;
  display: block;
  margin: 0 auto;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
svg#spin-pulmo .spin-track {
  fill: none;
  stroke: rgba(148, 163, 184, 0.25);
  stroke-width: 8;
}
svg#spin-pulmo .spin-head {
  fill: none;
  stroke: url(#gradient);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 210;
  stroke-dashoffset: 170;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: spinDash 1.2s ease-in-out infinite;
}
/* Garantir centralização do texto */
.preview-loading .loading-text { 
  margin: 0; 
  text-align: center; 
}
/* Editar-template modal: mobile overflow scroll and grid padding override */
@media (max-width: 768px){
  .modal.editar-template .modal-body { overflow-y: scroll !important; }
  .modal.editar-template .tpl-grid { padding-bottom: 0 !important; margin-bottom: 0 !important; }
}
/* Template modal section title */
.tpl-section-title {
  margin: 0 0 10px 2px;
  margin-top: 20px;
  font-size: .95rem;
  color: #cbd5e1;
  letter-spacing: .02em;
}

.settings-content.tab-templates .tpl-section-title {
  font-size: 1.3rem !important;
  margin-top: 40px  !important;
}


/* Settings - Templates tab content padding adjustments */
@media (min-width: 1025px) {
  #tab-content-area .card > div:nth-of-type(2) { padding: 0 !important; }
}
@media (max-width: 768px) {
  #tab-content-area .card > div:nth-of-type(2) { padding: 10px !important; }
}
@keyframes spinDash {
  0% {
    stroke-dashoffset: 170;
    transform: rotate(0deg);
  }
  50% {
    stroke-dashoffset: 60;
    transform: rotate(180deg);
  }
  100% {
    stroke-dashoffset: 170;
    transform: rotate(360deg);
  }
}

/* Mobile editar template modal adjustments */
@media (max-width: 768px) {
  .modal.editar-template .modal-body {
    overflow: hidden !important;
    overflow-y: hidden !important;
    padding: 0 !important;
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

#preview-content .post-image-container {
  width: 100%;
  background: var(--surface-color, #2d2d2d);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.approve-modal-content .post-preview-card .post-image-container{
  height: -webkit-calc(100% - 60px);
}

.btn#preview-open-publish{
  padding: 12px 28px;
}

@media (max-width: 768px) {
  .modal .modal-body > div > div[data-testid="onboarding-congrats-icon"] {
    padding-bottom: 50px !important;
    padding-bottom: 0px !important;
    height: 64px !important;
    width: 64px !important;
  }
  .btn#preview-open-publish{
    padding: 10px 21px;
    font-size: 15px;
  }

}

@media (max-width: 768px) {
  .modal.onboarding-modal-congrats .modal-header {
    display: none !important;
  }
  .modal.onboarding-modal-congrats .modal-body {
    overflow-y: hidden !important;
  }
}

#congrats-progress {
  padding: 0 !important;
  margin-top: 30px !important;
}

.onboarding-section-title {
  font-weight: 400;
  font-size: 0.8rem;
  margin-top: 20px;
  padding-bottom: 0;
  color: #d1d5db;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0;
}

.onboarding-modal.onboarding-modal-approval .modal-body{
  overflow-y: hidden !important;
}

.onboarding-modal.onboarding-modal-approval .onb-create-wrapper{
  display: block;
}



.onboarding-modal.onboarding-modal-create .onb-create-suggestions-col{
  border: 1px solid #000000;
  padding: 19px 14px !important;
  overflow: auto;
  background: #0f1115 !important;
  border-radius: 13px !important;
  margin-top: 40px !important;
  overflow-y: auto !important;
  height: unset !important;
}

@media (max-width: 768px) {
  .onboarding-modal.onboarding-modal-approval .onb-publish-modal-body {
      display: block !important;
      padding: 2.5rem 0.5rem 1.5rem 0 !important;
  }
  .onboarding-modal.onboarding-modal-approval .onb-publish-section{
    margin-bottom: 58px !important;
  }
  .onboarding-modal-create .content-type-grid .ct-item{
    font-size: 12.5px !important;
    line-height: 18px !important;
    padding: 13px 0px !important;
  }

  .onboarding-modal.onboarding-modal-create .onb-create-suggestions-col{
    overflow: hidden !important;
  }

  .onboarding-modal-create .image-source-grid .is-item {
    font-size: 13px !important;
  }
}

.onboarding-section-title--initial {
  color: #d1d5db;
}

.onboarding-section-title--final {
  color: #d1d5db;
}

.onboarding-page .steps {
  margin-bottom: 20px;
}

.onboarding-modal-edit-caption .modal-body {
  padding: 24px !important;
}
.onboarding-modal-edit-caption .onb-edit-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.onboarding-modal-edit-caption .onb-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

@media (max-width: 768px) {
  .onboarding-modal-create .modal-header {
    padding: 24px 0 14px 0 !important;
  }
}

/* Toast container above all layers */
#pulmo-toast-container {
  z-index: 999999 !important;
}

@media (max-width: 768px) {
  .toast {
    bottom: 70px;
    right: var(--space-4);
    left: var(--space-4);
    max-width: none;
    margin-top: 25px;
  }
}

@media (max-width: 768px) {
  .onboarding-modal .modal-body {
    overflow: hidden !important;
    overflow-y: visible !important;
    padding: 0 !important;
  }
  /* Modal Criar Post / Criar Carrossel: permitir rolagem para ver todas as sugestões */
  .modal.onboarding-modal-create .modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .modal-edit-image-story .edit-title-stack .img-ref {
    width: 100%;
    max-width: none;
    min-width: 0;
    aspect-ratio: 9 / 16;
    height: auto;
  }

  .settings-container .card {
    background: var(--surface-color) !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
  }
}

/* ==================== Preview Chat: Botão Flutuante + Sidebar/Bottom Sheet ==================== */
.preview-chat-float-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #ecaf49;
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1002;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
  overflow: visible;
  display: none;
}

.preview-chat-float-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.5);
}

.preview-chat-float-btn.hidden {
  display: none;
}

.preview-chat-float-btn-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-chat-float-btn-ai {
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.preview-chat-float-btn-text {
  display: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
}

.preview-chat-float-btn.show-text .preview-chat-float-btn-ai {
  display: none;
}

.preview-chat-float-btn.show-text .preview-chat-float-btn-text {
  display: block;
}

/* Botão EDITAR no actions-footer: mesmo formato que Rejeitar/Agendar/Publicar, só cor amarela */
.btn.preview-chat-footer-btn {
  background: rgb(38 45 56) !important;
  color: #fff;
  border-color: rgb(38 45 56) !important;
}
.btn.preview-chat-footer-btn:hover {
  background: rgb(28 34 44) !important;
  color: #fff;
  border-color: rgb(28 34 44) !important;
}
.btn.preview-chat-footer-btn[data-action="refine"] {
  background: rgb(38 45 56) !important;
  border-color: rgb(38 45 56) !important;
}
.preview-chat-footer-btn.hidden {
  display: none !important;
}

.edit-modal .actions-footer .preview-chat-footer-btn {
  margin-right: auto;
}

/* Overlay atrás do chat */
.preview-chat-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 61%);
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.preview-chat-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.preview-chat-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(240, 240, 240, 0.08) 25%,
    rgba(200, 200, 200, 0.03) 50%,
    transparent 100%);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-100%);
}

.preview-chat-overlay.content-updated::after {
  animation: previewChatOverlayUpdate 1.2s ease-out forwards;
}

@keyframes previewChatOverlayUpdate {
  0% {
    opacity: 1;
    transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    transform: translateY(100%);
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

/* === Siri Glow — Preview Chat / Refinar === */
@keyframes siri-sidebar-entrance {
  0%   { box-shadow: -4px 0 12px rgba(0,0,0,0.4); }
  15%  { box-shadow:
           -4px 0 12px rgba(0,0,0,0.3),
           -55px 0 100px 20px rgba(139,92,246,0.85),
           0 -55px 100px 18px rgba(59,130,246,0.65),
           0  55px 100px 18px rgba(236,72,153,0.65); }
  60%  { box-shadow:
           -4px 0 12px rgba(0,0,0,0.3),
           -28px 0 65px 8px rgba(139,92,246,0.42),
           0 -22px 55px 5px rgba(59,130,246,0.3),
           0  22px 55px 5px rgba(249,115,22,0.3); }
  100% { box-shadow:
           -4px 0 12px rgba(0,0,0,0.3),
           -18px 0 48px 4px rgba(139,92,246,0.22),
           0 -12px 36px 2px rgba(59,130,246,0.16),
           0  12px 36px 2px rgba(236,72,153,0.16); }
}

@keyframes siri-glow-pulse {
  0%, 100% { box-shadow:
               -4px 0 12px rgba(0,0,0,0.3),
               -18px 0 48px 4px rgba(139,92,246,0.22),
               0 -12px 36px 2px rgba(59,130,246,0.16),
               0  12px 36px 2px rgba(236,72,153,0.16); }
  25%       { box-shadow:
               -4px 0 12px rgba(0,0,0,0.3),
               -18px 0 48px 4px rgba(34,211,238,0.22),
               0 -12px 36px 2px rgba(139,92,246,0.16),
               0  12px 36px 2px rgba(249,115,22,0.16); }
  50%       { box-shadow:
               -4px 0 12px rgba(0,0,0,0.3),
               -18px 0 48px 4px rgba(249,115,22,0.22),
               0 -12px 36px 2px rgba(236,72,153,0.16),
               0  12px 36px 2px rgba(34,211,238,0.16); }
  75%       { box-shadow:
               -4px 0 12px rgba(0,0,0,0.3),
               -18px 0 48px 4px rgba(59,130,246,0.22),
               0 -12px 36px 2px rgba(249,115,22,0.16),
               0  12px 36px 2px rgba(139,92,246,0.16); }
}

@keyframes siri-sheet-entrance {
  0%   { box-shadow: 0 -4px 12px rgba(0,0,0,0.4); }
  15%  { box-shadow:
           0 -4px 12px rgba(0,0,0,0.3),
           0 -65px 100px 20px rgba(139,92,246,0.85),
           -55px -25px 100px 18px rgba(59,130,246,0.65),
            55px -25px 100px 18px rgba(236,72,153,0.65); }
  60%  { box-shadow:
           0 -4px 12px rgba(0,0,0,0.3),
           0 -42px 65px 8px rgba(139,92,246,0.42),
           -28px -18px 55px 5px rgba(59,130,246,0.3),
            28px -18px 55px 5px rgba(249,115,22,0.3); }
  100% { box-shadow:
           0 -4px 12px rgba(0,0,0,0.3),
           0 -32px 48px 4px rgba(139,92,246,0.22),
           -16px -12px 36px 2px rgba(59,130,246,0.16),
            16px -12px 36px 2px rgba(236,72,153,0.16); }
}

@keyframes siri-sheet-pulse {
  0%, 100% { box-shadow:
               0 -4px 12px rgba(0,0,0,0.3),
               0 -32px 48px 4px rgba(139,92,246,0.22),
               -16px -12px 36px 2px rgba(59,130,246,0.16),
                16px -12px 36px 2px rgba(236,72,153,0.16); }
  25%       { box-shadow:
               0 -4px 12px rgba(0,0,0,0.3),
               0 -32px 48px 4px rgba(34,211,238,0.22),
               -16px -12px 36px 2px rgba(139,92,246,0.16),
                16px -12px 36px 2px rgba(249,115,22,0.16); }
  50%       { box-shadow:
               0 -4px 12px rgba(0,0,0,0.3),
               0 -32px 48px 4px rgba(249,115,22,0.22),
               -16px -12px 36px 2px rgba(236,72,153,0.16),
                16px -12px 36px 2px rgba(34,211,238,0.16); }
  75%       { box-shadow:
               0 -4px 12px rgba(0,0,0,0.3),
               0 -32px 48px 4px rgba(59,130,246,0.22),
               -16px -12px 36px 2px rgba(249,115,22,0.16),
                16px -12px 36px 2px rgba(139,92,246,0.16); }
}

/* Sidebar Desktop */
.preview-chat-sidebar {
  position: fixed;
  top: 0;
  right: -50vw;
  min-width: 410px;
  width: 40vw;
  max-width: 840px;
  height: 100vh;
  background: var(--surface-color, #0d1117);
  border-left: 1px solid var(--premium-border, #1f1f22);
  z-index: 1003;
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);
}


.preview-chat-sidebar.open {
  right: 0;
  animation:
    siri-sidebar-entrance 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    siri-glow-pulse 7s ease-in-out 1.2s infinite;
}

.modal.chat-sidebar-open {
  margin-right: 410px;
  transition: margin-right 0.3s ease;
}

/* Bottom Sheet Mobile */
.preview-chat-bottom-sheet {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  height: 75vh;
  max-height: 640px;
  background: var(--surface-color, #0d1117);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  z-index: 1003;
  display: flex;
  flex-direction: column;
  transition: bottom 0.3s ease;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
}

.preview-chat-bottom-sheet.open {
  bottom: 0;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 20px);
  animation:
    siri-sheet-entrance 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    siri-sheet-pulse 7s ease-in-out 1.2s infinite;
}

/* Barra de arraste no topo do bottom sheet (mobile) */
.preview-chat-bottom-sheet::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  z-index: 1;
}

/* Header do Chat */
.preview-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--premium-border, #1f1f22);
  flex-shrink: 0;
}

.preview-chat-agent-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.preview-chat-agent-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.preview-chat-agent-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-color-light, #e5e7eb);
}

.preview-chat-agent-subtitle {
  font-size: 0.90rem;
  color: var(--text-muted, #9ca3af);
  margin-top: 2px;
}

.preview-chat-toggle {
  background: transparent;
  border: none;
  color: var(--text-muted, #9ca3af);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.preview-chat-toggle:hover {
  color: var(--text-color-light, #e5e7eb);
}

/* Mensagens */
.preview-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.preview-chat-msg {
  display: flex;
  gap: 8px;
  animation: previewChatMsgIn 0.3s ease-out;
}

.preview-chat-msg--user {
  justify-content: flex-end;
}

.preview-chat-msg--assistant {
  justify-content: flex-start;
}

.preview-chat-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.preview-chat-msg--user .preview-chat-msg-avatar {
  display: none;
}

.preview-chat-msg-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 75%;
}

.preview-chat-msg-time {
  font-size: 0.7rem;
  color: var(--text-muted, #9ca3af);
  padding: 0 4px;
}

.preview-chat-msg--user .preview-chat-msg-time {
  text-align: right;
}

.preview-chat-msg--assistant .preview-chat-msg-time {
  text-align: left;
}

.preview-chat-msg-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 1rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.preview-chat-msg--user .preview-chat-msg-bubble {
  background: #145056;
  color: #ffffff;
  border-bottom-right-radius: 4px;
}

.preview-chat-msg--assistant .preview-chat-msg-bubble {
  background: var(--premium-border, #1f1f22);
  color: var(--text-color-light, #e5e7eb);
  border-bottom-left-radius: 4px;
}

.preview-chat-typing {
  display: flex;
  align-items: center;
  padding: 8px 16px 12px;
  min-height: 44px;
}

.preview-chat-input-wrap {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--premium-border, #1f1f22);
  background: var(--surface-color, #0d1117);
  flex-shrink: 0;
}

.preview-chat-input {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--premium-border, #1f1f22);
  background: #fff;
  color: #000;
  font-size: 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.preview-chat-input:focus {
  outline: none;
  border-color: var(--primary-color, #D4AF37);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

.preview-chat-send {
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: 10px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.preview-chat-send:hover:not(:disabled) {
  transform: translateY(-1px);
}

.preview-chat-send:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Responsivo */
@media (max-width: 900px) {
  .preview-chat-float-btn {
    bottom: 130px;
    right: 20px;
    width: 65px;
    height: 65px;
  }

  .preview-chat-sidebar {
    display: none;
  }

  .modal.chat-sidebar-open {
    margin-right: 0;
  }
}

@media (min-width: 901px) {
  .preview-chat-bottom-sheet {
    display: none;
  }
}



/* NEWS */

/* Create button sizing and spacing */
.create-post-form .create-content-btn {
  margin-top: 22px;
  align-self: stretch;
}
@media (min-width: 1025px) {
  .create-post-form .create-content-btn {
    align-self: flex-start;
    width: calc((100% - 7%) / 2);
  }
}

/* Faixa de notícias: criar post / carrossel — desktop flex (3/4/6 por largura); mobile grid 1 col, máx. 3 */

.home-news-section {
  background: #161c23;
  border-radius: 20px;
  padding: 24px 30px 28px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  overflow: visible;
}

.news-fm-card-body button.btn,
.news-fm-card-actions button.btn,
.home-news-card-body button.btn {
  cursor: pointer;
  font-size: 13px;
  padding: 15px 12px !important;
  border: 1px solid #242933;
}

.news-fm-read-icon {
  margin-left: auto;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
  padding: 6px;
  color: #6e7681;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.news-fm-read-icon:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
  color: #e6edf3;
}

.btn-news-post,
.btn-news-carousel,
.btn-news-video,
.btn-news-stories {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  font-size: 0.71rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.3;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-news-post {
  background: rgb(52 144 220 / 15%);
  border: 1px solid rgb(52 144 220 / 34%);
  color: #74b9e9;
}
.btn-news-post:hover {
  background: rgba(52, 144, 220, 0.22);
  border-color: rgba(52, 144, 220, 0.5);
  color: #90c6f0;
}
.btn-news-carousel {
  background: rgb(34 194 149 / 11%);
  border: 1px solid rgb(32 224 187 / 21%);
  color: #22b5c2;
}
.btn-news-carousel:hover {
  background: rgba(34, 181, 194, 0.18);
  border-color: rgba(34, 181, 194, 0.45);
  color: #30c8d6;
}
.btn.btn-outline-secondary.btn--sm.btn-news-read {
  padding: 4px 8px;
}


.home-news-see-all {
  text-decoration: none;
}
.home-news-section-title .home-news-title--mobile {
  display: none;
}
.home-news-section-title .home-news-title--desktop {
  display: none;
}
.home-news-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  overflow: hidden;
}
.home-news-row > .home-news-card {
  flex: 1 1 0;
  min-width: 0;
}
/* No máximo 4 notícias na faixa (home / criar post), qualquer largura */
.home-news-row > .home-news-card:nth-child(n + 5) {
  display: none !important;
}
/* Mobile: grid 1 coluna (vertical); título curto */
@media (max-width: 768px) {
  .home-news-section-title .home-news-title--mobile {
    display: none;
  }
  .home-news-section-title .home-news-title--desktop {
    display: none;
  }
  .home-news-row {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .home-news-row > .home-news-card {
    flex: none;
    width: 100%;
    min-width: 0;
  }
}
.home-news-card {
  min-width: 0;
  background: #0f1115;
  border: 0px solid #2a3342;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
  display: flex;
  flex-direction: column;
}
.home-news-card:hover {
  border-color: #3d4d62;
  transform: translateY(-2px);
}
.home-news-card:focus-visible {
  outline: 2px solid var(--primary-color, #3b82f6);
  outline-offset: 2px;
}
/* Faixa sem thumb: card não é “clicável” inteiro; ações nos botões */
.home-news-card--text-only {
  cursor: default;
}
.home-news-card--text-only:hover {
  transform: none;
}
.home-news-card-body--stack {
  padding-top: 14px;
}
.home-news-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.home-news-card-media {
  aspect-ratio: 16 / 9;
  position: relative;
  flex-shrink: 0;
}
.home-news-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-news-card-thumb-ph {
  width: 100%;
  height: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #4a5568;
  background: linear-gradient(145deg, #1a2230, #0f1318);
}
.news-fm-card-body,
.home-news-card-body {
  padding: 12px 22px 34px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.news-fm-card-source-row,
.home-news-card-source-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 16px;
  padding: 15px 0px;
}
.home-news-card-logo {
  flex-shrink: 0;
  border-radius: 4px;
  width: 28px;
}
.home-news-card-source {
  font-size: 1.05rem;
  color: #fff;
  font-weight: 700;
}
.news-fm-card-title,
.home-news-card-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 15px;
}
/* Altura fixa de 3 linhas na faixa home/criar post — alinha snippet, data e botões entre cards */
.home-news-card-title {
  min-height: calc(3 * 1.35em);
}
.home-news-card-snippet {
  font-size: 1rem;
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #fff;
}
.news-fm-card-date,
.home-news-card-date {
  font-size: 0.72rem;
  margin-top: 16px;
}
.home-news-card--skeleton {
  min-height: 200px;
  border-radius: 14px;
  background: linear-gradient(90deg, #1a1f26 25%, #232b36 50%, #1a1f26 75%);
  background-size: 200% 100%;
  animation: home-news-shimmer 1.2s ease-in-out infinite;
  pointer-events: none;
  border: 1px solid #2a3342;
}
@keyframes home-news-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (max-width: 576px) {
  .home-news-section {
    padding: 16px;
    border-radius: 14px;
  }
  .home-news-head {
    flex-direction: row;
    align-items: flex-start !important;
  }
}


/* Modo Link: oculta template, tipo de conteúdo e audiência */

/* ── Tema / Link toggle ─────────────────────────────────────────── */
.cp-mode-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  margin-bottom: 10px;
}
.cp-mode-btn {
  padding: 5px 16px;
  font-size: 0.82rem;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.cp-mode-btn:hover {
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.07);
}
.cp-mode-btn.active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-weight: 600;
}

#create-post-form-column.cp-form--link-mode .cp-hide-in-link-mode {
  display: none !important;
}
.cp-link-url-label {
  margin-top: 4px;
}
.cp-link-hint {
  font-size: 12px;
  margin-top: 6px;
  margin-bottom: 10px;
}
.cp-link-preview-loading {
  font-size: 0.85rem;
  color: #8b949e;
  padding: 10px 0;
}
.cp-link-preview {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--premium-border, #30363d);
  background: rgba(0, 0, 0, 0.22);
}
.cp-link-preview-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.cp-link-preview-source-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cp-link-preview-site-logo {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: contain;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
}
.cp-link-preview-site-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #8b949e;
  line-height: 1.3;
}
.cp-link-preview.cp-link-preview--google-news .cp-link-preview-thumb-wrap {
  display: none !important;
}
.cp-link-preview-thumb-wrap {
  flex: 0 0 112px;
  width: 112px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: #161b22;
  position: relative;
}
.cp-link-thumb-skeleton {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(
    110deg,
    #1c2128 0%,
    #2d333b 45%,
    #1c2128 90%
  );
  background-size: 200% 100%;
  animation: cp-link-thumb-shimmer 1.2s ease-in-out infinite;
}
.cp-link-preview-thumb-wrap.cp-link-thumb-loading .cp-link-preview-img {
  opacity: 0;
}
.cp-link-preview-thumb-wrap:not(.cp-link-thumb-loading) .cp-link-preview-img {
  opacity: 1;
  transition: opacity 0.2s ease;
}
@keyframes cp-link-thumb-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.cp-link-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cp-link-preview-title {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--text-primary, #e6edf3);
  margin: 0 0 6px;
}
.cp-link-preview-meta {
  font-size: 0.78rem;
  color: #8b949e;
  margin: 0 0 2px;
}


/* ========== Playground: Notícias para mim ========== */
.news-fm-page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px 16px 32px;
}
.news-fm-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.news-fm-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text-primary, #e6edf3);
}
.news-fm-sub {
  margin: 0;
  font-size: 0.95rem;
}
.news-fm-status {
  margin-bottom: 12px;
}
.news-fm-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.news-fm-section {
  margin: 0;
  margin-top: 28px;
}
.news-fm-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8b949e;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--premium-border, #30363d);
}
.news-fm-section-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
}
@media (min-width: 769px) {
  .news-fm-section-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}
@media (min-width: 1100px) {
  .news-fm-section-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.news-fm-list--loading .news-fm-section-cards--loading {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 769px) {
  .news-fm-list--loading .news-fm-section-cards--loading {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .news-fm-list--loading .news-fm-section-cards--loading {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.news-fm-empty {
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--premium-border, #30363d);
  border-radius: 12px;
}
.news-fm-skeleton-card {
  min-height: 280px;
  border-radius: 14px;
  background: linear-gradient(90deg, #161b22 0%, #1f2937 50%, #161b22 100%);
  background-size: 200% 100%;
  animation: newsFmShimmer 1.2s ease-in-out infinite;
}
@keyframes newsFmShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.news-fm-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: #1C2330;
  border: 1px solid var(--premium-border, #1f2937);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  text-align: left;
  height: 100%;
  min-height: 0;
}
.news-fm-card:hover,
.news-fm-card:focus-visible {
  border-color: rgba(88, 166, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.12);
  outline: none;
}
/* Lista sem thumb: foco nas ações, não no card inteiro */
.news-fm-card--text-only {
  cursor: default;
}
.news-fm-card--text-only:hover,
.news-fm-card--text-only:focus-visible {
  box-shadow: none;
}
.news-fm-card--featured.news-fm-card--text-only {
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
}
.news-fm-card-foot--actions {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.news-fm-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.news-fm-featured-wrap {
  margin-bottom: 20px;
}
.news-fm-card--featured {
  position: relative;
  flex-direction: row;
  align-items: stretch;
  min-height: 200px;
  border-color: rgba(88, 166, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.08), 0 12px 40px rgba(0, 0, 0, 0.35);
}
.news-fm-card--featured:hover,
.news-fm-card--featured:focus-visible {
  border-color: rgba(88, 166, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.18), 0 16px 48px rgba(0, 0, 0, 0.4);
}
.news-fm-featured-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(88, 166, 255, 0.95), rgba(46, 160, 130, 0.9));
  color: #0d1117;
  pointer-events: none;
}
.news-fm-featured-media {
  flex: 0 0 44%;
  max-width: 420px;
  min-width: 200px;
  display: flex;
  align-self: stretch;
}
.news-fm-card-thumb--featured {
  flex: 1;
  width: 100%;
  min-height: 200px;
  aspect-ratio: unset;
  height: auto;
  align-self: stretch;
}
.news-fm-card-thumb--featured.news-fm-card-thumb--placeholder {
  min-height: 200px;
}
.news-fm-card-thumb--featured .news-fm-card-thumb-img {
  min-height: 200px;
}
.news-fm-featured-body {
  flex: 1;
  min-width: 0;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.news-fm-card-title--featured {
  font-size: 1.2rem;
  -webkit-line-clamp: 4;
}
.news-fm-card-snippet--featured {
  font-size: 0.9rem;
  -webkit-line-clamp: 6;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .news-fm-card--featured {
    flex-direction: column;
    min-height: 0;
  }
  .news-fm-featured-media {
    flex: none;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  .news-fm-card-thumb--featured {
    min-height: 0;
    aspect-ratio: 16 / 9;
    max-height: 240px;
  }
  .news-fm-card-thumb--featured .news-fm-card-thumb-img {
    min-height: 0;
  }
  .news-fm-featured-body {
    padding: 14px 16px 16px;
  }
  .news-fm-featured-badge {
    top: 10px;
    right: 10px;
  }
}
.news-fm-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #161b22;
  flex-shrink: 0;
}
.news-fm-card-thumb--failed {
  background: linear-gradient(145deg, #1c2128, #0d1117);
}
.news-fm-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-fm-card-site-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(13, 17, 23, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  display: none;
}
.news-fm-site-logo-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}
.news-fm-card-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #21262d, #0d1117);
}
.news-fm-card-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-fm-card-thumb-letter {
  font-size: 1.75rem;
  font-weight: 800;
  color: #484f58;
  text-transform: uppercase;
}
.news-fm-card-logo--inline {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
.news-fm-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.news-fm-card-logo {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.news-fm-logo-skel {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, #1f2937 0%, #2d3748 50%, #1f2937 100%);
  background-size: 200% 100%;
  animation: newsFmShimmer 1s ease-in-out infinite;
}
.news-fm-logo-skel--failed {
  animation: none;
  background: #21262d;
}
.news-fm-logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  background: #0d1117;
}
.news-fm-card-source-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.news-fm-card-source-logo {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  object-fit: contain;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
}
.news-fm-card-source {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8b949e;
  margin: 0;
}
.news-fm-card-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text-primary, #e6edf3);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-specialty-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(192, 38, 211, 0.12);
  border: 1px solid rgba(192, 38, 211, 0.3);
  color: #d946ef;
  margin-bottom: 6px;
}
.home-news-card .news-specialty-tag {
  font-size: 0.52rem;
  padding: 2px 6px;
  margin-bottom: 4px;
}
.news-fm-card-snippet {
  margin: 0 0 10px;
  font-size: 1rem;
  color: #9ca3af;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.news-fm-card-foot {
  display: grid;
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.75rem;
  margin-top: auto;
}
.news-fm-card-foot-date {
  flex: 1 1 auto;
  min-width: 0;
}
.news-fm-card-cta {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.75rem !important;
  padding: 6px 12px !important;
  border-radius: 8px;
}
.news-fm-card--featured .news-fm-card-foot {
  margin-top: 12px;
}
.news-fm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.news-fm-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.news-fm-panel {
  position: fixed;
  top: 0;
  right: calc(-1 * min(92vw, 900px));
  width: min(92vw, 900px);
  max-width: 100vw;
  height: 100vh;
  z-index: 1001;
  background: var(--surface-color, #0d1117);
  border-left: 1px solid var(--premium-border, #1f1f22);
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.45);
}
.news-fm-panel.open {
  right: 0;
}
.news-fm-panel.news-fm-panel--mobile {
  top: auto;
  left: 0;
  right: 0;
  bottom: -100%;
  width: 100%;
  height: 85vh;
  max-height: none;
  border-left: none;
  border-top: 1px solid var(--premium-border, #1f1f22);
  border-radius: 20px 20px 0 0;
  transition: bottom 0.3s ease;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
}
.news-fm-panel.news-fm-panel--mobile.open {
  bottom: 0;
  right: 0;
}
.news-fm-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.news-fm-panel-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--premium-border, #1f1f22);
  flex-shrink: 0;
}
.news-fm-panel-toolbar-text {
  min-width: 0;
}
.news-fm-panel-title-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.news-fm-panel-site-logo {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--premium-border, #30363d);
  display: none;
}
.news-fm-panel-title-stack {
  min-width: 0;
  flex: 1;
}
.news-fm-panel-heading-inline {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.35;
  color: var(--text-primary, #e6edf3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.news-fm-panel-sub {
  margin: 0;
  font-size: 0.75rem;
}
.news-fm-cta {
  font-weight: 700 !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.news-fm-close-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--premium-border, #30363d);
  background: rgba(255, 255, 255, 0.08);
  color: #e6edf3;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.news-fm-close-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #8b949e;
  color: #fff;
}
.news-fm-close-btn:focus-visible {
  outline: 2px solid #58a6ff;
  outline-offset: 2px;
}
.news-fm-panel-webview-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #010409;
  display: flex;
  flex-direction: column;
}
.news-fm-article-hero {
  flex-shrink: 0;
  position: relative;
  height: 140px;
  max-height: 28vh;
  overflow: hidden;
  border-bottom: 1px solid var(--premium-border, #30363d);
  background: #161b22;
}
.news-fm-article-hero[hidden] {
  display: none !important;
}
.news-fm-article-hero-skel {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    #1c2128 0%,
    #2d333b 45%,
    #1c2128 90%
  );
  background-size: 200% 100%;
  animation: newsFmHeroShimmer 1.15s ease-in-out infinite;
}
@keyframes newsFmHeroShimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.news-fm-article-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-fm-iframe-stack {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #010409;
}
.news-fm-article-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
/* Leitor em texto: esconde iframe dentro da stack */
.news-fm-panel-webview-wrap--reader .news-fm-iframe-stack .news-fm-article-frame {
  display: none !important;
}
.news-fm-article-reader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface-color, #0d1117);
  overflow: hidden;
}
.news-fm-article-reader[hidden] {
  display: none !important;
}
.news-fm-reader-top {
  flex-shrink: 0;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--premium-border, #30363d);
}
.news-fm-reader-hint {
  margin: 0 0 10px;
  font-size: 0.78rem;
  line-height: 1.4;
}
.news-fm-reader-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 0.82rem;
}
.news-fm-reader-open-link {
  color: #58a6ff;
  text-decoration: none;
  font-weight: 600;
}
.news-fm-reader-open-link:hover {
  text-decoration: underline;
}
.news-fm-reader-open-link--disabled {
  opacity: 0.4;
  pointer-events: none;
}
.news-fm-reader-sep {
  opacity: 0.45;
  user-select: none;
}
.news-fm-reader-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px 28px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-primary, #e6edf3);
}
.news-fm-webview-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-color, #0d1117);
  transition: opacity 0.2s ease;
}
.news-fm-webview-loading--done {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.news-fm-webview-loading-inner {
  text-align: center;
  padding: 24px;
}
.news-fm-webview-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  border: 3px solid rgba(88, 166, 255, 0.2);
  border-top-color: #58a6ff;
  border-radius: 50%;
  animation: newsFmSpin 0.8s linear infinite;
}
@keyframes newsFmSpin {
  to { transform: rotate(360deg); }
}
.news-fm-webview-fallback {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: var(--surface-color, #0d1117);
}
.news-fm-webview-fallback[hidden] {
  display: none !important;
}
.news-fm-webview-fallback-title {
  font-weight: 700;
  margin: 0;
  color: var(--text-primary, #e6edf3);
}
.news-fm-webview-fallback-text {
  margin: 0;
  max-width: 320px;
  font-size: 0.9rem;
}
body.news-fm-panel-open {
  overflow: hidden;
}
@media (min-width: 769px) {
  .news-fm-panel.news-fm-panel--mobile {
    /* evita estado inconsistente */
  }
}

/* ── Referências científicas ── */

/* ── Card: bloco de referência ── */
.pcm-research-card {
  background: rgba(99, 179, 237, 0.05);
  border-radius: 3px;
  padding: 8px 9px 6px;
  margin-top: 25px;
  margin-bottom: 15px;
}
.pcm-research-card-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.67rem;
  font-weight: 600;
  color: rgba(99, 179, 237, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.pcm-research-card .srb-ref-item {
  border: none;
  background: none;
  padding: 0;
  border-radius: 0;
}
.pcm-research-card .srb-ref-title {
  font-size: 0.84rem;
}
.pcm-research-card .srb-ref-meta {
  font-size: 0.78rem;
}
.pcm-research-more {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: rgba(99, 179, 237, 0.8);
  font-size: 0.71rem;
  text-align: left;
  cursor: pointer;
  padding: 4px 0 0;
  margin-top: 2px;
}
.pcm-research-more:hover {
  color: rgba(99, 179, 237, 1);
}

/* ── Modal: seção de referências ── */
.srb-refs-section {
  border-top: 1px solid var(--premium-border, #1f2937);
  padding-top: 10px;
  margin-top: 0;
}
.srb-refs-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--text-secondary, #8b949e);
  margin-bottom: 8px;
}
.srb-refs-header--toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.srb-refs-header--toggle:hover { color: var(--text-primary, #c9d1d9); }
.srb-refs-chevron {
  margin-left: auto;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.srb-refs-header--collapsed .srb-refs-chevron {
  transform: rotate(180deg);
}
.srb-refs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.srb-refs-rest {
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.srb-refs-more-btn {
  background: none;
  border: none;
  color: rgba(99, 179, 237, 0.75);
  font-size: 0.73rem;
  cursor: pointer;
  padding: 4px 0 0;
  text-align: left;
}
.srb-refs-more-btn:hover { color: rgba(99, 179, 237, 1); }

/* ── Ref item (card e modal compartilham) ── */
.srb-ref-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--premium-border, #1f2937);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, border-color 0.15s;
  overflow: hidden;
  min-width: 0;
}
/* Card: logo grande em cima, texto abaixo */
.srb-ref-item:has(.srb-ref-logo--large) {
  flex-direction: column;
  align-items: flex-start;
}
.srb-ref-item:has(.srb-ref-logo--large) .srb-ref-body {
  width: 100%;
  min-width: 0;
}
/* Modal (srb-refs-section): desktop → logo esquerda, texto direita */
.srb-refs-section .srb-ref-item:has(.srb-ref-logo--large) {
  flex-direction: row;
  align-items: flex-start;
}
.srb-refs-section .srb-ref-item:has(.srb-ref-logo--large) .srb-ref-ext {
  margin-top: 2px;
}
a.srb-ref-item:hover {
  background: rgba(99, 179, 237, 0.06);
  border-color: rgba(99, 179, 237, 0.25);
}
.srb-ref-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  min-width: 32px;
}
.srb-ref-logo {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: contain;
}
.srb-ref-logo--large {
  width: 32% !important;
  height: auto !important;
  max-height: 36px;
  border-radius: 0;
  object-fit: contain;
  display: block;
  margin-top: 9px;
  flex-shrink: 0;
  opacity: 0.9;
}
/* Modal: logo lateral fixa */
.srb-refs-section .srb-ref-logo--large {
  width: 92px !important;
  max-height: 40px;
  border-radius: 4px;
  margin-top: 0;
  margin-right: 15px;
}
/* Modal: título menor no desktop */
.srb-refs-section .srb-ref-title {
  font-size: 0.93rem;
}
@media (max-width: 600px) {
  .srb-refs-section .srb-ref-item:has(.srb-ref-logo--large) {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }
  .srb-refs-section .srb-ref-logo--large {
    width: 80px !important;
    max-height: 32px;
    margin-bottom: 4px;
    margin-right: 0;
  }
  .srb-refs-section .srb-ref-item:has(.srb-ref-logo--large) .srb-ref-ext {
    position: absolute;
    top: 8px;
    right: 10px;
    margin-top: 0;
  }
  .srb-refs-section .srb-ref-title {
    font-size: 0.93rem;
  }
}
.srb-ref-site {
  font-size: 0.6rem;
  color: var(--text-secondary, #8b949e);
  text-align: center;
  max-width: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.srb-ref-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.srb-ref-title {
  font-size: 0.875rem;
  color: var(--text-primary, #e6edf3);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.srb-ref-meta {
  font-size: 0.78rem;
  color: var(--text-secondary, #8b949e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.srb-ref-ext {
  flex-shrink: 0;
  opacity: 0.35;
  margin-top: 2px;
}
a.srb-ref-item:hover .srb-ref-ext { opacity: 0.7; }

/* Modal editar template vindo da tela de criação de post/carrossel */
.modal.modal-choose-template .modal-body {
  overflow-y: scroll !important;
}
.modal-choose-template .modal-body > div > div.tpl-card {
  aspect-ratio: 0 !important;
  margin-bottom: 18px !important;
}

/* Banner "Gerar conteúdos" na home — gradiente rosa/vermelho/laranja */
#home-next-action-banner.calendar-banner--fill-briefing {
  background: linear-gradient(90deg, rgb(180 58 110) 0%, rgba(253, 29, 29, 1) 50%, rgb(252 171 69) 100%);
  border: 0;
}
#home-next-action-banner.calendar-banner--fill-briefing #home-next-action-btn {
  background: #ffffff;
  color: #661011;
  border-color: #ffffff;
}
#home-next-action-banner.calendar-banner--fill-briefing #home-next-action-btn:hover {
  background: rgba(255,255,255,0.88);
  border-color: rgba(255,255,255,0.88);
}

/* ===================================================================
   PAYWALL OVERLAY
   =================================================================== */

.paywall-overlay {
  position: fixed;
  inset: 0;
  z-index: 200000;
  background: #ffffff0d;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.paywall-overlay--visible {
  opacity: 1;
}

/* ── Card ── */
.paywall-card {
  background: #111111;
  border: 1px solid #252525;
  border-radius: 20px;
  width: 90vw;
  height: 90vh;
  overflow: hidden;
  display: flex;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7);
}

/* Pending payment: dois painéis lado a lado */
.paywall-card--pending {
  width: 90vw;
  height: 90vh;
}

/* ── Brand ── */
.paywall-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.paywall-brand--center {
  justify-content: center;
  margin-bottom: 8px;
}

.paywall-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.paywall-brand-name {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.3px;
}

/* ── Left Panel ── */
.paywall-left {
  width: 300px;
  flex-shrink: 0;
  background: #0d0d0d;
  border-right: 1px solid #252525;
  padding: 32px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

.paywall-tagline {
  font-size: 13px;
  color: #666;
  line-height: 1.55;
  margin: 0;
}

.paywall-no-plans {
  font-size: 13px;
  color: #555;
  margin: 20px 0 0;
}

/* ── Grid de planos ── */
.paywall-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.paywall-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 22px 20px 18px;
  border-radius: 14px;
  border: 1px solid #252525;
  background: #0d0d0d;
  color: #e5e7eb;
  text-decoration: none;
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.15s ease;
  cursor: pointer;
}

.paywall-plan-card:hover {
  border-color: #349098;
  background: rgba(52, 144, 152, 0.07);
  transform: translateY(-2px);
  color: #fff;
}

.paywall-plan-card--best {
  border-color: rgba(61, 186, 111, 0.35);
  background: rgba(61, 186, 111, 0.04);
}

.paywall-plan-card--best:hover {
  border-color: #3dba6f;
  background: rgba(61, 186, 111, 0.09);
}

/* badge "Mais escolhido" */
.paywall-plan-card-badge {
  position: absolute;
  top: -9px;
  right: 12px;
  background: #3bff8a;
  color: #0f351e;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* topo: ícone + label billing */
.paywall-plan-card-top {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  margin-top: 6px;
}

.paywall-plan-card-billing-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.paywall-plan-card-billing-icon.pbc-pix {
  background: rgba(50, 188, 173, 0.12);
  border: 1px solid rgba(50, 188, 173, 0.25);
}

.paywall-plan-card-billing-icon.pbc-card {
  background: rgba(160, 160, 200, 0.1);
  border: 1px solid rgba(160, 160, 200, 0.2);
  color: #aaa;
}

.paywall-plan-card-billing-label {
  font-size: 12px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ciclo + badge de desconto */
.paywall-plan-card-cycle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.paywall-plan-card-cycle {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-top: 12px;
}

.paywall-plan-card-discount {
  font-size: 12px;
  font-weight: 800;
  background: #e8a030;
  color: #000;
  border-radius: 999px;
  padding: 3px 10px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  margin-top: 11px;
}

/* preço original riscado */
.paywall-plan-card-original {
  font-size: 15px;
  color: #555;
  text-decoration: line-through;
  line-height: 1.2;
  margin-top: 4px;
}

/* texto "equivalente a R$ X/mês" */
.paywall-plan-card-equiv-text {
  font-size: 13px;
  color: #9a9a9a;
  margin-top: 0px;
  margin-bottom: 10px;
}

/* badge economia de X meses */
.paywall-plan-card-economy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #3dba6f;
  border: 1px solid rgba(61, 186, 111, 0.3);
  border-radius: 999px;
  padding: 4px 12px;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* preço grande: estrutura */
.paywall-plan-card-price-big {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  margin: 2px 0 0;
}

.paywall-pbc-currency {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-top: 10px;
}

.paywall-pbc-integer {
  font-size: 35px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -2px;
}

.paywall-plan-card--best .paywall-pbc-integer {
  color: #3dba6f;
}

.paywall-pbc-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 6px;
}

.paywall-pbc-cents {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}

.paywall-pbc-period {
  font-size: 10px;
  color: #666;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* preço */
.paywall-plan-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.paywall-plan-card-price {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}

.paywall-plan-card--best .paywall-plan-card-price {
  color: #ecaf49;
}

.paywall-plan-card-period {
  font-size: 12px;
  color: #666;
  font-weight: 400;
}

/* equivalência anual/bimestral */
.paywall-plan-card-equiv {
  font-size: 13px;
  color: #ddd;
  line-height: 1.4;
  text-align: left;
}

/* description */
.paywall-plan-card-desc {
  font-size: 12px;
  color: #777;
  line-height: 1.45;
  margin-top: 2px;
  flex: 1;
}

/* CTA dentro do card */
.paywall-plan-card-cta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding-top: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #349098;
  border-top: 1px solid #1e1e1e;
  transition: color 0.15s ease;
}

.paywall-plan-card--best .paywall-plan-card-cta {
  color: #3dba6f;
  border-top-color: rgba(61, 186, 111, 0.15);
}

.paywall-plan-card:hover .paywall-plan-card-cta {
  color: #fff;
}

/* ── Logout ── */
.paywall-logout-btn {
  background: transparent;
  border: none;
  border-top: 1px solid #1a1a1a;
  color: #444;
  font-size: 12px;
  cursor: pointer;
  padding: 16px 36px;
  text-align: left;
  line-height: 1.4;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.paywall-logout-btn:hover {
  color: #888;
}

.paywall-right-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #349098;
  margin: 0 0 12px;
}

.paywall-right-title {
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: -0.8px;
  line-height: 1.1;
}

.paywall-right-sub {
  font-size: 15px;
  color: #777;
  margin: 0 0 28px;
  line-height: 1.55;
}

.paywall-right-price {
  font-size: 44px;
  font-weight: 800;
  color: #349098;
  margin: 0 0 4px;
  line-height: 1.05;
}

.paywall-right-period {
  font-size: 17px;
  font-weight: 400;
  color: #666;
}

/* ── Features ── */
.paywall-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.paywall-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #ccc;
  line-height: 1.4;
}

.paywall-features li::before {
  content: '';
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(52, 144, 152, 0.15);
  border: 1.5px solid #349098;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 3.5L3.5 6L9 1' stroke='%23349098' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.paywall-hint {
  font-size: 13px;
  color: #444;
  margin: 0;
}

/* ── Back button ── */
.paywall-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #666;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 28px;
  transition: color 0.15s ease;
}

.paywall-back-btn:hover {
  color: #ccc;
}

/* ── Payment methods ── */
.paywall-payment-methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.paywall-payment-method {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 20px;
  border-radius: 14px;
  border: 1px solid #252525;
  background: #0d0d0d;
  color: #e5e7eb;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}

.paywall-payment-method:hover {
  border-color: #349098;
  background: rgba(52, 144, 152, 0.07);
  color: #fff;
}

.paywall-payment-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  flex-shrink: 0;
  color: #aaa;
}

.paywall-payment-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.paywall-payment-name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.paywall-payment-desc {
  font-size: 12px;
  color: #666;
}

.paywall-payment-arrow {
  color: #444;
  flex-shrink: 0;
}

.paywall-payment-method:hover .paywall-payment-arrow {
  color: #349098;
}

/* ── Pending payment: layout 2 colunas ── */
.paywall-pending-left {
  width: 42%;
  flex-shrink: 0;
  min-height: 0;
  background: linear-gradient(160deg, #0a1a1c 0%, #0d0d0d 100%);
  border-right: 1px solid #252525;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.paywall-left-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 44px 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.paywall-retention-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.paywall-retention-title {
  font-size: 33px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.6px;
  margin: 0;
}

.paywall-retention-sub {
  font-size: 17px;
  color: #888;
  line-height: 1.6;
  margin: 0;
}

.paywall-checks {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.paywall-checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 18px;
  color: #ccc;
  line-height: 1.45;
}

.paywall-checks li strong {
  color: #fff;
  font-weight: 700;
}

.paywall-checks li::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(52, 144, 152, 0.15);
  border: 1.5px solid #349098;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 3.5L3.5 6L9 1' stroke='%23349098' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ── Pending: painel direito ── */
.paywall-pending-right {
  flex: 1;
  overflow-y: auto;
}

.paywall-pending-right-content {
  padding: 44px 44px 40px;
  min-height: 100%;
}

/* ── Invoice card ── */
.paywall-invoice-card {
  border: 1px solid #252525;
  border-radius: 14px;
  background: #0d0d0d;
  overflow: hidden;
  margin: 24px 0 28px;
}

.paywall-invoice-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #1e1e1e;
  gap: 12px;
}

.paywall-invoice-row:last-child {
  border-bottom: none;
}

.paywall-invoice-row--total {
  background: rgba(52, 144, 152, 0.06);
}

.paywall-invoice-label {
  font-size: 13px;
  color: #666;
}

.paywall-invoice-value {
  font-size: 14px;
  color: #ddd;
  font-weight: 500;
  text-align: right;
}

.paywall-invoice-due {
  color: #ecaf49;
}

.paywall-invoice-amount {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

/* ── Botão primário ── */
.paywall-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  background: #349098;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  transition: background 0.15s ease;
  letter-spacing: -0.2px;
}

.paywall-btn-primary:hover {
  background: #2a7880;
  color: #fff;
}

/* ── Plano selecionado (painel esquerdo, durante polling) ── */
.paywall-selected-plan {
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  background: #0d0d0d;
  padding: 14px 16px;
}

.paywall-selected-plan-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #555;
  margin: 0 0 10px;
}

.paywall-selected-plan-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.paywall-spb-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.paywall-spb-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.paywall-spb-cycle {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.paywall-spb-billing {
  font-size: 12px;
  color: #666;
}

.paywall-spb-price {
  font-size: 11px;
  font-weight: 400;
  color: #555;
  white-space: nowrap;
}

.paywall-spb-period {
  font-size: 11px;
  font-weight: 400;
  color: #555;
}

.paywall-spb-price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.paywall-spb-installments {
  font-size: 15px;
  font-weight: 700;
  color: #3dba6f;
  white-space: nowrap;
}

/* ── Evolution banner ── */
/* versão mobile: oculta no desktop */
.paywall-evolution-banner--mobile {
  display: none;
}

.paywall-pending-left .paywall-evolution-banner {
  margin-top: 20px;
  border-radius: 16px;
  border: 1px solid rgba(236, 175, 73, 0.28);
  background: linear-gradient(145deg, rgba(236, 175, 73, 0.1) 0%, rgba(52, 144, 152, 0.07) 60%, rgba(15, 57, 62, 0.12) 100%);
  padding: 22px 24px 20px;
  display: table;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.paywall-evolution-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(236,175,73,0.04) 0%, transparent 100%);
  pointer-events: none;
}

.paywall-evolution-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.paywall-evolution-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}

.paywall-evolution-title {
  font-size: 15px;
  font-weight: 700;
  color: #ecaf49;
  letter-spacing: -0.2px;
}

.paywall-evolution-body {
  font-size: 13px;
  color: #999;
  line-height: 1.65;
  margin: 0;
}

.paywall-evolution-cta {
  font-size: 13px;
  font-weight: 600;
  color: #ecaf49;
  margin: 0;
  line-height: 1.4;
  margin-top: 8px;
}

/* ── Polling: tela de aguardo ── */
.paywall-polling {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 0 0;
  gap: 0;
}

.paywall-polling-icon {
  position: relative;
  width: 60px;
  height: 60px;
  margin-bottom: 24px;
}

.paywall-polling-spinner {
  animation: paywall-spin 1.8s linear infinite;
  transform-origin: center;
}

@keyframes paywall-spin {
  to { transform: rotate(360deg); }
}

.paywall-polling-pulse {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: rgba(52, 144, 152, 0.15);
  animation: paywall-pulse 1.8s ease-in-out infinite;
}

@keyframes paywall-pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 1; }
}

.paywall-polling-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: -0.4px;
  line-height: 1.2;
}

.paywall-polling-sub {
  font-size: 14px;
  color: #777;
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 340px;
}

.paywall-polling-sub strong {
  color: #ccc;
  font-weight: 600;
}

/* Progress bar */
.paywall-progress-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.paywall-progress-bar {
  flex: 1;
  height: 4px;
  background: #252525;
  border-radius: 999px;
  overflow: hidden;
}

.paywall-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #349098, #ecaf49);
  border-radius: 999px;
  transition: width 0.1s linear;
}

.paywall-progress-label {
  font-size: 12px;
  color: #555;
  min-width: 24px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Botão CONFIRMAR */
.paywall-btn-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  background: transparent;
  border: 1.5px solid #349098;
  color: #349098;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.2s ease;
  margin-bottom: 16px;
}

.paywall-btn-confirm:hover {
  background: rgba(52, 144, 152, 0.1);
  color: #fff;
  border-color: #5ab8bf;
}

/* Voltar aos planos (no polling) */
.paywall-back-plans {
  color: #555;
  font-size: 13px;
  margin-top: 0;
}

.paywall-back-plans:hover {
  color: #999;
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .paywall-overlay {
    align-items: flex-end;
  }

  .paywall-card,
  .paywall-card--pending {
    flex-direction: column;
    border-radius: 20px 20px 0 0;
    width: 95vw;
    height: 95vh;
    margin: auto auto 0;
    overflow-y: auto;
  }

  .paywall-pending-left {
    width: 100%;
    flex-shrink: 0;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid #252525;
  }

  .paywall-left-scroll {
    padding: 24px 20px 20px;
    gap: 16px;
    overflow-y: visible;
  }

  .paywall-retention-title {
    font-size: 20px;
  }

  .paywall-retention-sub,
  .paywall-checks li {
    font-size: 14px;
  }

  .paywall-right-title {
    font-size: 24px;
  }

  /* scroll único no mobile: só o card rola */
  .paywall-pending-right {
    overflow-y: visible;
  }

  .paywall-pending-right-content {
    padding: 24px 20px 32px;
    min-height: unset;
  }

  .paywall-plans-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Card: ciclo à esquerda, billing à direita na primeira linha */
  .paywall-plan-card {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 8px;
    row-gap: 6px;
  }

  .paywall-plan-card-top {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
    align-self: center;
  }

  .paywall-plan-card-cycle-row {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-content: flex-start;
    gap: 8px;
  }

  .paywall-plan-card-discount {
    margin-top: 10px;
  }

  .paywall-plan-card-original,
  .paywall-plan-card-price-big,
  .paywall-plan-card-equiv-text,
  .paywall-plan-card-economy,
  .paywall-plan-card-cta {
    grid-column: 1 / -1;
  }

  .paywall-plan-card-price {
    font-size: 18px;
  }

  /* Esconde banner do painel esquerdo no mobile */
  .paywall-left-scroll .paywall-evolution-banner {
    display: none;
  }

  /* Mostra banner ao final dos planos no mobile */
  .paywall-evolution-banner--mobile {
    display: block;
    margin-top: 16px;
    border-radius: 16px;
    border: 1px solid rgba(236, 175, 73, 0.28);
    background: linear-gradient(145deg, rgba(236, 175, 73, 0.1) 0%, rgba(52, 144, 152, 0.07) 60%, rgba(15, 57, 62, 0.12) 100%);
    padding: 22px 24px 20px;
    display: table;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
  }

  .paywall-logout-btn {
    padding: 14px 20px;
  }
}

/* ── Paywall: altura reduzida (< 800px CSS) — compactar sem perder legibilidade ── */
@media (max-height: 800px) {
  .paywall-card {
    height: 97vh;
  }

  /* Esquerda: apenas reduzir padding e gap, manter fontes legíveis */
  .paywall-left-scroll {
    padding: 26px 32px 20px;
    gap: 18px;
  }

  .paywall-retention-title {
    font-size: 24px;
  }

  .paywall-checks li {
    font-size: 14px;
  }

  .paywall-retention-sub {
    font-size: 14px;
  }

  .paywall-checks {
    gap: 9px;
  }

  .paywall-checks li {
    font-size: 13px;
  }

  /* Banner amarelo: manter visível, só reduzir padding interno */
  .paywall-pending-left .paywall-evolution-banner {
    padding: 14px 18px 12px;
    margin-top: 40px;
  }

  .paywall-evolution-title {
    font-size: 13px;
  }

  .paywall-evolution-body,
  .paywall-evolution-cta {
    font-size: 12px;
  }

  /* Direita: padding e título menores */
  .paywall-pending-right-content {
    padding: 28px 32px;
  }

  .paywall-right-title {
    font-size: 28px;
    margin-bottom: 6px;
  }

  .paywall-right-sub {
    margin-bottom: 18px;
  }

  /* Cards: só reduzir gap e padding, fontes quase iguais */
  .paywall-plans-grid {
    gap: 10px;
    margin-top: 2px;
  }

  .paywall-plan-card {
    padding: 14px 14px 12px;
    gap: 4px;
  }

  .paywall-plan-card-cycle {
    font-size: 18px;
    margin-top: 8px;
  }

  .paywall-pbc-integer {
    font-size: 44px;
  }

  .paywall-plan-card-cta {
    padding-top: 10px;
  }
}

/* ── Filtros do paywall (toggle mensal/anual + dropdown pagamento) ── */
.paywall-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.paywall-toggle {
  display: flex;
  background: #111;
  border: 1px solid #252525;
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}

.paywall-toggle-btn {
  padding: 7px 18px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #888;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.paywall-toggle-btn.active {
  background: #349098;
  color: #fff;
}

.paywall-toggle-btn:not(.active):hover {
  color: #ccc;
}

.paywall-payment-select {
  padding: 8px 32px 8px 12px;
  background: #111;
  border: 1px solid #252525;
  border-radius: 10px;
  color: #ccc;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.15s ease;
}

.paywall-payment-select:focus {
  outline: none;
  border-color: #349098;
}

.paywall-no-plans-msg {
  color: #666;
  font-size: 14px;
  padding: 24px 0;
  text-align: center;
  grid-column: 1 / -1;
}

/* ── Grade de tiers (Starter / Pro / Platinum) ── */
.paywall-tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 4px;
}

.paywall-tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 16px 18px;
  border-radius: 14px;
  border: 1px solid #252525;
  background: #0d0d0d;
  color: #e5e7eb;
}

.paywall-tier-card--highlight {
  border-color: rgba(61, 186, 111, 0.35);
  background: rgba(61, 186, 111, 0.04);
}

.paywall-tier-name {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
}

.paywall-tier-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.paywall-tier-feature--hl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #ccc;
}

.paywall-tier-feature--hl strong {
  color: #fff;
}

.paywall-tier-fi {
  font-size: 14px;
  flex-shrink: 0;
}

.paywall-tier-price-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.paywall-tier-installments-label {
  font-size: 14px;
    font-weight: 500;
    color: #979797;
    letter-spacing: -0.2px;
    margin-bottom: -7px;
    margin-top: 7px;
}

.paywall-tier-price-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.paywall-tier-discount {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  background: #e8a030;
  color: #000;
  border-radius: 999px;
  padding: 2px 9px;
  letter-spacing: 0.3px;
  width: fit-content;
}

.paywall-tier-installment {
  font-size: 13px;
  color: #b4b4b4;
  margin-top: 5px;
}

.paywall-tier-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.paywall-tier-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 11px 12px;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.paywall-tier-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.paywall-tier-btn--card {
  background: #349098;
  color: #fff;
}

.paywall-tier-btn--pix {
  background: rgba(50, 188, 173, 0.12);
  border: 1px solid rgba(50, 188, 173, 0.3);
  color: #32bcad;
}

.paywall-tier-pix-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.paywall-tier-pix-or {
  font-size: 11px;
  color: #555;
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* linhas laterais flexíveis: nunca passam por cima do texto */
.paywall-tier-pix-or::before,
.paywall-tier-pix-or::after {
  content: '';
  flex: 1;
  min-width: 8px;
  height: 1px;
  background: #2a2a2a;
}

.paywall-tier-pix-price {
  font-size: 15px;
  color: #dedede;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 9px;
  margin-bottom: 15px;
  font-weight: 600;
}

.paywall-tier-pix-badge {
  font-size: 10px;
  font-weight: 700;
  background: rgba(61, 186, 111, 0.15);
  color: #3dba6f;
  border-radius: 999px;
  padding: 2px 8px;
}

@media (max-width: 900px) {
  .paywall-tiers-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Banner de assinatura vencida (header) ── */
@keyframes pulmo-gradient-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.pulmo-expired-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(90deg, #dc2626, #ef4444, #f97316, #ef4444, #dc2626);
  background-size: 280% 100%;
  animation: pulmo-gradient-flow 3s ease infinite;
  box-shadow:
    0 4px 16px rgba(239, 68, 68, 0.55),
    0 2px 6px  rgba(249, 115, 22, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.pulmo-expired-banner:hover {
  box-shadow:
    0 6px 24px rgba(239, 68, 68, 0.7),
    0 3px 10px rgba(249, 115, 22, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}
.pulmo-expired-banner:active {
  transform: translateY(0);
  box-shadow:
    0 2px 10px rgba(239, 68, 68, 0.5),
    0 1px 4px  rgba(249, 115, 22, 0.3);
}

/* ── Mobile: ocultar logo e notificações quando assinatura vencida ── */
@media (max-width: 700px) {
  .app-header--expired .logo,
  .app-header--expired #notifications-btn {
    display: none !important;
  }
}

/* ── Painel expandido periódico ── */
.pulmo-expired-panel {
  position: fixed;
  z-index: 199998;
  width: 268px;
  background: linear-gradient(155deg, #1e0808 0%, #2c0f0f 60%, #1a0a0a 100%);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 16px;
  padding: 18px 16px 14px;
  box-shadow:
    0 10px 40px rgba(239, 68, 68, 0.28),
    0 4px 18px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: translateY(-10px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.38s cubic-bezier(0.34, 1.45, 0.64, 1),
    opacity   0.22s ease;
}
.pulmo-expired-panel--visible {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: all;
}
.pulmo-expired-panel-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.35);
  padding: 3px;
  line-height: 1;
  transition: color 0.15s;
}
.pulmo-expired-panel-close:hover { color: rgba(255, 255, 255, 0.75); }
.pulmo-expired-panel-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #f97316;
  margin: 0 0 8px;
}
.pulmo-expired-panel-text {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 14px;
}
.pulmo-expired-panel-text strong { color: #fff; }
.pulmo-expired-panel-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: linear-gradient(90deg, #dc2626, #f97316);
  background-size: 200% 100%;
  animation: pulmo-gradient-flow 2.5s ease infinite;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(239, 68, 68, 0.4);
  transition: opacity 0.15s, transform 0.15s;
}
.pulmo-expired-panel-cta:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* ── Botão fechar paywall (só quando closeable) ── */
.paywall-close-btn {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10010;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.65);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.paywall-close-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* posts-new — dropdown de fonte compacto (escopo: só #cp-font-chips) */
#cp-font-chips .branding-font-dropdown {
  width: auto;
  margin-right: auto;
}
#cp-font-chips .branding-font-dropdown__trigger {
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 8px;
  width: auto;
  min-width: 180px;
}
#cp-font-chips .branding-font-dropdown__chevron {
  width: 15px;
  height: 15px;
}
#cp-font-chips .branding-font-dropdown__panel {
  right: auto;
  left: 0;
  min-width: 260px;
  max-width: 340px;
}
#cp-font-chips .branding-font-dropdown__search {
  padding: 7px 10px;
  font-size: 13px;
}
#cp-font-chips .branding-font-dropdown__option {
  padding: 9px 14px;
  font-size: 13px;
}

/* Painéis de abas do image-picker: garante que painéis inativos fiquem ocultos mesmo com a regra global display:block !important */
.modal.modal-image-picker .rn-media-panel:not(.active) {
  display: none !important;
}

/* ── modal-audio-picker + modal-image-picker: mesmos estilos de modal-revisar-reel ── */
.modal.modal-audio-picker > .actions-footer,
.modal.modal-image-picker > .actions-footer {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 100%;
}
@media (max-width: 768px) {


  .modal.modal-pro-video-picker .modal-body,
  .modal.modal-fullscreen.modal-audio-picker .modal-body,
  .modal.modal-fullscreen.modal-image-picker .modal-body {
    max-height: -webkit-calc(100vh - 80px) !important;
  }

  .modal.modal-fullscreen .modal-body > div > div.rn-audio-item{
    margin-bottom: 6px;
  }

  .modal.modal-pro-video-picker .actions-footer,
  .modal.modal-fullscreen.modal-image-picker .actions-footer,
  .modal.modal-fullscreen.modal-audio-picker .actions-footer{
    display: none !important;
  }
}


@media (min-width: 769px) {
  .modal.modal-pro-video-picker,
  .modal.modal-fullscreen.modal-audio-picker,
  .modal.modal-fullscreen.modal-image-picker {
    max-height: 96vh !important;
    top: 2vh !important;
    transform: translateX(-50%) !important;
  }
  .modal.modal-pro-video-picker .modal-header,
  .modal.modal-audio-picker .modal-header,
  .modal.modal-image-picker .modal-header {
    padding: 5px 20px !important;
    min-height: 0 !important;
  }
  .modal.modal-pro-video-picker .modal-title,
  .modal.modal-audio-picker .modal-title,
  .modal.modal-image-picker .modal-title {
    font-size: 1rem !important;
  }
  .modal.modal-pro-video-picker .modal-body,
  .modal.modal-audio-picker .modal-body,
  .modal.modal-image-picker .modal-body {
    padding: 8px 16px !important;
    height: calc(100vh - 50px) !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    padding-bottom: 72px !important;
  }
}


.cp-theme-sugg-chip {
      background: rgb(42 54 68);
      border: 1px solid #2a3044;
      border-radius: 999px;
      padding: 5px 13px;
      font-size: 14px;
      color: #f1f5f9;
      cursor: pointer;
      transition: background .15s, border-color .15s;
      text-align: left;
      line-height: 1.35;
      margin: 2px 0;
      font-weight: 600;
}


@media (max-width: 768px) {
  .cp-theme-sugg-chip {
    padding: 10px 10px;
    border-radius: 10px;
  }
}

/* Pro Photos — botão "Somente salvar a foto" (antes inline com !important; o tema claro sobrescreve em theme-light.css) */
#pp-save-upload { color: #939393 !important; font-weight: 400 !important; border: 1px solid #535353 !important; }

/* #calendar: capas de vídeos e stories inteiras nos cards (sem corte) */
html .calendar-page-wrap #cal-agenda-posts-grid .post-card.post-card--video .post-card-thumbnail > img,
html .calendar-page-wrap #cal-agenda-posts-grid .post-card.post-card--video .post-card-thumbnail > video,
html .calendar-page-wrap #cal-agenda-posts-grid .post-card.post-card--story .post-card-thumbnail > img,
html .calendar-page-wrap #cal-agenda-posts-grid .post-card.post-card--story .post-card-thumbnail > video,
.approval-card[data-type="video"] .approval-thumb img,
.approval-card[data-type="video"] .approval-thumb video,
.approval-card[data-type="teleprompter"] .approval-thumb img,
.approval-card[data-type="teleprompter"] .approval-thumb video,
.approval-card[data-type="story"] .approval-thumb img,
.approval-card[data-type="story"] .approval-thumb video {
  object-fit: contain !important;
}