/* =========================================================
   MCA ACADEMY PRO — Modern Theme Overlay
   Sobrepõe e moderniza o style.css existente sem o remover.
   ========================================================= */

:root{
  --mca-primary:#0b1a4a;
  --mca-primary-2:#1e3a8a;
  --mca-accent:#22c55e;
  --mca-accent-2:#16a34a;
  --mca-danger:#ef4444;
  --mca-warning:#f59e0b;
  --mca-info:#0ea5e9;
  --mca-bg:#f4f6fb;
  --mca-card:#ffffff;
  --mca-text:#0f172a;
  --mca-muted:#64748b;
  --mca-border:#e5e7ef;
  --mca-radius:14px;
  --mca-radius-lg:10px;
  --mca-shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --mca-shadow:0 8px 24px -8px rgba(15,23,42,.12);
  --mca-shadow-lg:0 20px 40px -16px rgba(15,23,42,.25);
  --mca-grad:linear-gradient(135deg,#0b1a4a 0%,#1e3a8a 55%,#0ea5e9 100%);
  --mca-grad-accent:linear-gradient(135deg,#22c55e,#0ea5e9);
}

body{ background:var(--mca-bg)!important; color:var(--mca-text)!important; font-family:'Inter',system-ui,sans-serif!important; }

/* Sidebar refinement */
.sidebar{ background:var(--mca-card)!important; border-right:1px solid var(--mca-border)!important; box-shadow:var(--mca-shadow-sm); }
.sidebar-logo{ background:var(--mca-grad); color:#fff; border-bottom:none!important; }
.sidebar-logo .logo-text{ color:#fff!important; }
.nav-link{ border-radius:12px!important; }
.nav-link.active,.nav-link:hover{ background:var(--mca-grad)!important; color:#fff!important; box-shadow:var(--mca-shadow-sm); }

/* Header */
.app-header{ background:rgba(255,255,255,.85)!important; border-bottom:1px solid var(--mca-border)!important; backdrop-filter:blur(14px) saturate(180%); }
.header-title{ background:var(--mca-grad); -webkit-background-clip:text; background-clip:text; color:transparent!important; }

/* Weather chip in header */
.mca-weather{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:var(--mca-grad); color:#fff; font-size:13px; font-weight:600; box-shadow:var(--mca-shadow-sm); cursor:default; }
.mca-weather i{ font-size:14px; }
.mca-weather .mca-temp{ font-weight:700; }
.mca-weather.muted{ background:#e2e8f0; color:#475569; }

/* Cards / posts */
.modal,.card{ border-radius:var(--mca-radius-lg)!important; box-shadow:var(--mca-shadow)!important; border:1px solid var(--mca-border)!important; }
.post-card{border-radius:var(--mca-radius-lg)!important; border:1px solid var(--mca-border)!important; }
.create-post{ padding:14px!important; background:var(--mca-card)!important; }
.post-actions-fb{ border-top:1px solid var(--mca-border); padding:6px 8px; gap:6px; }
.action-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:10px; border-radius:10px; transition:.2s; color:var(--mca-muted); font-weight:600; }
.action-btn:hover{ background:#eff3fa; color:var(--mca-primary); }
.action-btn.liked{ color:var(--mca-info); }
.action-btn.share{ color:#16a34a; }



/* =================================================================
   SISTEMA DE ISOLAMENTO ANT-MISTURA DO FEED (CORREÇÃO DE LARGURA)
   ================================================================= */

/* Garante que o contêiner geral do feed alinhe tudo de cima para baixo em fila indiana */
#mca-feed-container, 
#posts-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* Força que cada bloco de post ou curso seja uma linha completamente independente */
.feed-block-separator {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
  margin-bottom: 14px !important; /* Espaçamento limpo e fixo entre cards */
  box-sizing: border-box !important;
  float: none !important;
}

/* O card de post fica 100% sozinho, sem interferência de grids */
.post-card {
  background: #fff;
  border-radius: 12px;
  padding: 0;
  margin: 0 !important; /* Margem controlada pelo pai .feed-block-separator */
  overflow: hidden;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  clear: both !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* O contêiner de cursos também fica totalmente isolado */
.feed-cursos-grid-container {
  background: #f8fafc;
  padding: 14px;
  border-radius: 12px;
  margin: 0 !important;
  border: 1px solid #e2e8f0;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  clear: both !important;
}

/* A grid interna restrita apenas a ela própria */
.cursos-udemy-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Proteção extra para o card do curso não rebentar o layout */
.curso-udemy-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  cursor: pointer;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Carrossel do topo também isolado */
.populares-section {
  background: #fff;
  padding: 14px 0;
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  clear: both !important;
}



/* Avatar circles */
.avatar-circle,.avatar{ background:var(--mca-grad)!important; color:#fff!important; font-weight:700; }

/* Primary button */
.btn-primary{ background:var(--mca-grad)!important; color:#fff!important; border-radius:12px!important; padding:12px 18px!important; font-weight:600; box-shadow:var(--mca-shadow); transition:.2s; }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:var(--mca-shadow-lg); }
.btn-secondary{ background:#eef1f8!important; color:var(--mca-text)!important; border-radius:12px!important; padding:12px 18px!important; font-weight:600; }
.btn-ghost{ background:transparent; color:var(--mca-primary); border:1px solid var(--mca-border); padding:10px 16px; border-radius:12px; font-weight:600; }
.btn-accent{ background:var(--mca-grad-accent); color:#fff; padding:12px 18px; border-radius:12px; font-weight:600; box-shadow:var(--mca-shadow); }

/* Login modal — visitor + pre-registration */
.login-modal{ border-radius:24px!important; padding:24px!important; max-width:420px; }
.login-header h2{ background:var(--mca-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.login-extra{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.login-extra button{ padding:12px; border-radius:12px; border:1px solid var(--mca-border); background:#f8fafc; font-weight:600; color:var(--mca-text); transition:.2s; }
.login-extra button:hover{ background:#fff; box-shadow:var(--mca-shadow-sm); }

/* Bottom nav */
.bottom-nav{ box-shadow:0 -8px 24px -8px rgba(15,23,42,.15)!important; border-top:1px solid var(--mca-border)!important; }
.bnav-item.active{ color:var(--mca-primary)!important; }
.bnav-item.active i{ background:var(--mca-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Toast modern */
#toast,.mca-toast{
  position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px);
  background:#0f172a; color:#fff; padding:12px 18px; border-radius:14px;
  box-shadow:var(--mca-shadow-lg); opacity:0; transition:.3s; z-index:9999;
  font-size:14px; font-weight:500; max-width:90vw;
  display:flex; align-items:center; gap:10px;
}
.mca-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.mca-toast.success{ background:linear-gradient(135deg,#16a34a,#22c55e); }
.mca-toast.error{ background:linear-gradient(135deg,#dc2626,#ef4444); }
.mca-toast.info{ background:linear-gradient(135deg,#0369a1,#0ea5e9); }
.mca-toast.warn{ background:linear-gradient(135deg,#b45309,#f59e0b); }

/* Generic page wrapper */
.mca-page{ max-width:760px; margin:0 auto; padding:8px 4px 100px; }
.mca-page-wide{ max-width:1100px; margin:0 auto; padding:8px 4px 100px; }
.mca-section-title{ font-size:18px; font-weight:700; margin:18px 8px 12px; display:flex; align-items:center; gap:8px; }

/* Communities */
.mca-group-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.mca-group-card{ background:var(--mca-card); border:1px solid var(--mca-border); border-radius:var(--mca-radius-lg); overflow:hidden; box-shadow:var(--mca-shadow-sm); transition:.2s; cursor:pointer; }
.mca-group-card:hover{ transform:translateY(-2px); box-shadow:var(--mca-shadow); }
.mca-group-cover{ height:90px; background:var(--mca-grad); position:relative; }
.mca-group-cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.3)); }
.mca-group-body{ padding:14px; }
.mca-group-body h4{ margin-bottom:6px; font-size:15px; }
.mca-group-body p{ font-size:12px; color:var(--mca-muted); margin-bottom:10px; }
.mca-group-body .members{ font-size:12px; color:var(--mca-muted); display:flex; align-items:center; gap:6px; }

/* Courses (Udemy-like)
.mca-course-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.mca-course-card{ background:var(--mca-card); border:1px solid var(--mca-border); border-radius:var(--mca-radius-lg); overflow:hidden; box-shadow:var(--mca-shadow-sm); transition:.2s; cursor:pointer; }
.mca-course-card:hover{ transform:translateY(-3px); box-shadow:var(--mca-shadow-lg); }
.mca-course-thumb{ height:140px; background:var(--mca-grad-accent); position:relative; display:flex; align-items:center; justify-content:center; color:#fff; font-size:32px; }
.mca-course-body{ padding:14px; }
.mca-course-body h4{ font-size:15px; margin-bottom:4px; }
.mca-course-body .author{ font-size:12px; color:var(--mca-muted); margin-bottom:8px; }
.mca-course-body .meta{ display:flex; justify-content:space-between; font-size:12px; color:var(--mca-muted); }
.mca-course-progress{ height:6px; background:#eef1f8; border-radius:99px; margin-top:10px; overflow:hidden; }
.mca-course-progress > span{ display:block; height:100%; background:var(--mca-grad-accent); }

/* Course player */
/* .mca-player-wrap{ display:grid; grid-template-columns:1fr 320px; gap:18px; }
@media(max-width:900px){ .mca-player-wrap{ grid-template-columns:1fr; } }
.mca-player video{ width:100%; border-radius:var(--mca-radius); background:#000; }
.mca-lesson-list{ background:var(--mca-card); border:1px solid var(--mca-border); border-radius:var(--mca-radius); padding:8px; max-height:520px; overflow:auto; }
.mca-lesson-item{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px; cursor:pointer; }
.mca-lesson-item:hover{ background:#eff3fa; }
.mca-lesson-item.active{ background:var(--mca-grad); color:#fff; }
.mca-lesson-item.done{ color:var(--mca-accent-2); } */

/* Moodle / Aulas online */
/* .mca-class-card{ background:var(--mca-card); border:1px solid var(--mca-border); border-radius:var(--mca-radius-lg); padding:16px; box-shadow:var(--mca-shadow-sm); margin-bottom:14px; }
.mca-class-card h4{ margin-bottom:4px; }
.mca-class-card .when{ font-size:12px; color:var(--mca-muted); margin-bottom:10px; }
.mca-class-actions{ display:flex; gap:8px; flex-wrap:wrap; } */ */


        /* --- Estilos Gerais Compactados (Uma Linha por Classe) --- */
        .mobile-container { width: 100%; max-width: 450px; min-height: 100vh; margin: 0 auto; background-color: #FFFFFF; padding: 20px 16px; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; box-shadow: 0 0 20px rgba(0,0,0,0.05); }
       .animate-section {
    opacity: 0;
    transform: translateY(20px);
    transition: all .6s ease;
}
        .promo-banner { width: 100%; background: #5E27B6; border-radius: 16px; padding: 20px; display: flex; justify-content: space-between; align-items: center; position: relative; overflow: hidden; min-height: 140px; }
        .banner-content { max-width: 60%; z-index: 2; }
        .banner-content h2 { color: #FFFFFF; font-size: 18px; font-weight: 700; line-height: 1.3; margin-bottom: 12px; }
        .buy-now-btn { background-color: #E53935; color: #FFFFFF; border: none; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 10px rgba(229,57,53,0.3); }
        .banner-img-wrapper { position: absolute; right: 10px; bottom: 0; width: 38%; height: 95%; display: flex; align-items: flex-end; }
        .banner-img-wrapper img { width: 100%; height: 100%; object-fit: contain; }
        .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
        .section-header h3 { font-size: 17px; font-weight: 700; color: #2D2D2D; }
        .see-all { color: #5E27B6; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
        .categories-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
        .category-item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; }
        .icon-box { width: 100%; aspect-ratio: 1; background-color: #F1EBFB; border-radius: 12px; display: flex; justify-content: center; align-items: center; transition: transform 0.2s; color: #5E27B6; font-size: 20px; }
        .category-item span { font-size: 11px; color: #5E27B6; font-weight: 600; text-align: center; }
        .courses-slider { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
        .courses-slider::-webkit-scrollbar { display: none; }
        
        /* --- Estilos de Cursos Baseados na Sua Estrutura --- */
        .mca-course-grid { display: flex; flex-direction: column; gap: 12px; }
        .mca-course-card { display: flex; gap: 12px; background: #FFFFFF; border: 1px solid #EAEAEA; border-radius: 12px; padding: 10px; cursor: pointer; align-items: center; }
        .mca-course-thumb { width: 70px; height: 70px; background: #F1EBFB; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #5E27B6; font-size: 22px; flex-shrink: 0; }
        .mca-course-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
        .mca-course-body h4 { font-size: 14px; font-weight: 700; color: #2D2D2D; }
        .mca-course-body .author { font-size: 12px; color: #64748B; }
        .mca-course-body .meta { display: flex; gap: 12px; font-size: 11px; color: #64748B; }
        .mca-course-progress { width: 100%; height: 4px; background: #E2E8F0; border-radius: 2px; overflow: hidden; margin-top: 2px; }
        .mca-course-progress span { display: block; height: 100%; background: #5E27B6; }

        /* --- Layout de Cursos Populares (Cards Horizontais) --- */
        .mca-course-card-horiz { min-width: 220px; width: 220px; background: #FFFFFF; border-radius: 14px; border: 1px solid #EAEAEA; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; }
        .mca-course-thumb-horiz { position: relative; width: 100%; height: 120px; background-color: #1a1a2e; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; }
        .mca-course-title-badge { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); color: #FFFFFF; padding: 6px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .mca-course-info-horiz { padding: 10px; display: flex; flex-direction: column; gap: 6px; }

        /* --- Interface de Pesquisa e Navegação --- */
        .search-container { position: relative; width: 100%; margin-bottom: 12px; }
        .search-input { width: 100%; padding: 12px 14px 12px 40px; border-radius: 10px; border: 1px solid #E2E8F0; background: #F8F9FA; font-size: 14px; outline: none; }
        .search-input:focus { border-color: #5E27B6; background: #FFF; }
        .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #64748b; font-size: 14px; }
        .btn-back { background: none; border: none; color: #5E27B6; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }

        /* --- Componentes do Player de Vídeo e Jitsi (Estilo Moodle/Udemy) --- */
        .mca-player-wrap { display: flex; flex-direction: column; gap: 16px; }
        .mca-lesson-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
        .mca-lesson-item { display: flex; gap: 10px; padding: 10px; border: 1px solid #EAEAEA; border-radius: 8px; cursor: pointer; align-items: center; }
        .mca-lesson-item.active { background: #F1EBFB; border-color: #5E27B6; }
        .btn-ghost { background: none; border: 1px solid #E2E8F0; padding: 8px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; }
        .btn-primary { background: #5E27B6; color: #FFF; border: none; padding: 8px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; }
        .btn-accent { background: #FFB300; color: #1A1A1A; border: none; padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }

     .animate-section.show {
    opacity: 1;
    transform: translateY(0);
}












/* Video call (Jitsi) */
.mca-jitsi-wrap{ position:fixed; inset:0; background:#000; z-index:9998; display:flex; flex-direction:column; }
.mca-jitsi-top{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:#0f172a; color:#fff; }
.mca-jitsi-top h4{ font-size:15px; }
.mca-jitsi-top button{ background:#ef4444; color:#fff; padding:8px 14px; border-radius:10px; font-weight:600; }
.mca-jitsi-frame{ flex:1; border:0; width:100%; }

/* Document share board */
.mca-doc-board{ background:var(--mca-card); border:1px solid var(--mca-border); border-radius:var(--mca-radius-lg); padding:14px; box-shadow:var(--mca-shadow-sm); }
.mca-doc-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin-top:12px; }
.mca-doc-tile{ padding:14px; border:1px dashed var(--mca-border); border-radius:12px; text-align:center; background:#f8fafc; cursor:pointer; transition:.2s; }
.mca-doc-tile:hover{ background:#eff3fa; }
.mca-doc-tile i{ font-size:30px; color:var(--mca-primary); margin-bottom:6px; display:block; }
.mca-doc-tile small{ display:block; color:var(--mca-muted); font-size:11px; margin-top:4px; }

/* Share menu */
.mca-share-menu{ display:flex; gap:8px; flex-wrap:wrap; padding:10px 14px; border-top:1px solid var(--mca-border); }
.mca-share-menu button{ display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:99px; font-size:13px; font-weight:600; border:1px solid var(--mca-border); background:#fff; transition:.2s; }
.mca-share-menu button:hover{ background:#f1f5f9; }
.mca-share-menu .wa{ color:#25D366; }
.mca-share-menu .fb{ color:#1877F2; }
.mca-share-menu .copy{ color:var(--mca-muted); }

/* Pre-inscricao form */
.mca-form{ display:flex; flex-direction:column; gap:10px; }
.mca-form label{ font-size:12px; color:var(--mca-muted); font-weight:600; }
.mca-form input,.mca-form select,.mca-form textarea{ border-radius:12px!important; border:1px solid var(--mca-border)!important; }

/* Animations */
@keyframes mcaFadeIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.mca-fade-in{ animation:mcaFadeIn .3s ease both; }

/* Hide login on persistent session OK already */

/* Mobile tweaks */
@media(max-width:540px){
  .mca-weather{ padding:5px 9px; font-size:12px; }
  .mca-jitsi-top h4{ font-size:13px; }
}

/* =========================================================
   MCA ACADEMY v4 — IA Assistant
   ========================================================= */
.ia-wrapper {
  display: flex;
  height: calc(100vh - 60px);
  overflow: hidden;
  background: var(--bg, #f0f2f5);
}

/* Sidebar */
.ia-sidebar {
  width: 260px;
  min-width: 260px;
  background: #1a1a2e;
  color: #eee;
  display: flex;
  flex-direction: column;
  transition: transform .3s;
  z-index: 10;
}
.ia-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.ia-btn-new {
  background: #1877f2;
  color: #fff;
  border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.ia-model-select { padding: 10px 12px; }
.ia-model-select select {
  width: 100%;
  background: rgba(255,255,255,.08);
  color: #eee;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  cursor: pointer;
}
.ia-usage-bar { padding: 6px 14px 10px; font-size: 12px; color: #aaa; }
.ia-usage-track { background: rgba(255,255,255,.1); border-radius: 4px; height: 4px; margin-top: 5px; }
.ia-usage-fill { height: 4px; background: #1877f2; border-radius: 4px; transition: width .4s; }
.ia-usage-bar.pro .ia-usage-text { color: #ffd700; }

.ia-conv-list { flex: 1; overflow-y: auto; padding: 6px; }
.ia-conv-item {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: background .15s;
}
.ia-conv-item:hover { background: rgba(255,255,255,.08); }
.ia-conv-item.active { background: rgba(24,119,242,.3); }
.ia-conv-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-conv-actions { display: none; gap: 4px; }
.ia-conv-item:hover .ia-conv-actions { display: flex; }
.ia-conv-actions button {
  background: transparent; border: none; color: #aaa; cursor: pointer; padding: 3px 5px; border-radius: 4px; font-size: 11px;
}
.ia-conv-actions button:hover { color: #fff; background: rgba(255,255,255,.1); }
.ia-empty { text-align: center; color: #666; padding: 20px; font-size: 13px; }

/* Main */
.ia-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}
.ia-header-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  font-weight: 600;
  font-size: 15px;
}
.ia-menu-btn {
  display: none;
  background: none; border: none; cursor: pointer; font-size: 18px; color: #555;
}
.ia-btn-ghost {
  margin-left: auto;
  background: none; border: none; cursor: pointer; font-size: 16px; color: #555;
}
.ia-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Boas-vindas */
.ia-welcome {
  margin: auto;
  text-align: center;
  max-width: 480px;
  padding: 20px;
}
.ia-welcome-icon { font-size: 48px; margin-bottom: 12px; }
.ia-welcome h3 { font-size: 20px; color: #1a1a1a; margin-bottom: 6px; }
.ia-welcome p  { color: #666; font-size: 14px; margin-bottom: 20px; }
.ia-sugestoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ia-sugestoes button {
  background: #f0f2f5; border: 1px solid #ddd;
  border-radius: 20px; padding: 8px 16px;
  font-size: 13px; cursor: pointer; transition: all .2s;
}
.ia-sugestoes button:hover { background: #1877f2; color: #fff; border-color: #1877f2; }

/* Bubbles */
.ia-bubble {
  display: flex;
  gap: 10px;
  max-width: 85%;
  animation: iaFadeIn .25s ease;
}
@keyframes iaFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

.ia-bubble.ia-user { align-self: flex-end; flex-direction: row-reverse; }
.ia-bubble.ia-ai   { align-self: flex-start; }

.ia-avatar-user {
  width: 32px; height: 32px; border-radius: 50%;
  background: #1877f2; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.ia-avatar-ai {
  width: 32px; height: 32px; border-radius: 50%;
  background: #1a1a2e; display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}

.ia-bubble-content {
  background: #f0f2f5;
  border-radius: 16px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.6;
  color: #1a1a1a;
}
.ia-bubble.ia-user .ia-bubble-content {
  background: #1877f2;
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}
.ia-bubble.ia-ai .ia-bubble-content {
  border-radius: 16px 16px 16px 4px;
}
.ia-bubble-content pre {
  background: #1a1a2e;
  color: #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  overflow-x: auto;
  margin: 8px 0;
  font-size: 13px;
}
.ia-bubble-content code {
  background: rgba(0,0,0,.08);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 13px;
}
.ia-bubble.ia-user .ia-bubble-content code { background: rgba(255,255,255,.2); }

/* Thinking animation */
.ia-thinking { display: inline-flex; gap: 5px; align-items: center; }
.ia-thinking span {
  width: 7px; height: 7px; background: #999;
  border-radius: 50%; animation: iaBounce 1s infinite;
}
.ia-thinking span:nth-child(2) { animation-delay: .15s; }
.ia-thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes iaBounce {
  0%,80%,100% { transform: scale(.7); opacity:.5; }
  40% { transform: scale(1); opacity:1; }
}

/* Limite */
.ia-limite-msg {
  text-align: center;
  background: #fff3e0;
  border: 1px solid #ff9800;
  border-radius: 12px;
  padding: 20px;
  max-width: 400px;
  margin: 0 auto;
}
.ia-limite-msg i { font-size: 24px; color: #ff9800; margin-bottom: 8px; }
.ia-limite-msg strong { display: block; color: #333; margin-bottom: 6px; }
.ia-limite-msg p { color: #666; font-size: 13px; margin-bottom: 12px; }

/* Input */
.ia-input-area {
  padding: 12px 16px;
  border-top: 1px solid #eee;
  background: #fff;
}
.ia-input-wrap {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  background: #f0f2f5;
  border-radius: 12px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  transition: border-color .2s;
}
.ia-input-wrap:focus-within { border-color: #1877f2; }
.ia-input-wrap textarea {
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
  font-size: 14px;
  color: #1a1a1a;
  outline: none;
  max-height: 150px;
  font-family: inherit;
  line-height: 1.5;
}
.ia-send-btn {
  width: 36px; height: 36px;
  background: #1877f2; color: #fff;
  border: none; border-radius: 8px;
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .2s;
}
.ia-send-btn:hover { background: #1558c0; }
.ia-send-btn:disabled { background: #ccc; cursor: not-allowed; }
.ia-disclaimer { font-size: 11px; color: #aaa; text-align: center; margin-top: 6px; }
.ia-loader { text-align: center; padding: 30px; color: #999; font-size: 24px; }

/* Dark mode */
[data-theme="dark"] .ia-main { background: #1a1a2e; }
[data-theme="dark"] .ia-header-bar { border-color: rgba(255,255,255,.1); color: #eee; }
[data-theme="dark"] .ia-messages { }
[data-theme="dark"] .ia-bubble-content { background: rgba(255,255,255,.05); color: #ddd; }
[data-theme="dark"] .ia-bubble.ia-user .ia-bubble-content { background: #1877f2; }
[data-theme="dark"] .ia-input-area { background: #1a1a2e; border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .ia-input-wrap { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .ia-input-wrap textarea { color: #ddd; }
[data-theme="dark"] .ia-welcome h3 { color: #eee; }

/* Mobile */
@media (max-width: 640px) {
  .ia-menu-btn { display: flex; }
  .ia-sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    transform: translateX(-100%);
    height: 100%;
  }
  .ia-sidebar.open { transform: translateX(0); }
  .ia-bubble { max-width: 95%; }
}

/* =========================================================
   CHAT — WhatsApp Web style

/* =========================================================
   SC — CHAT SOCIAL (WhatsApp + Facebook) — Mobile First
   ========================================================= */

/* Layout raiz */
.sc-root {
  display: flex;
  height: calc(100vh - 60px);
  overflow: hidden;
  background: #f0f2f5;
  position: relative;
}

/* ─── Sidebar ─────────────────────────────────────────── */
.sc-sidebar {
  width: 360px;
  min-width: 360px;
  background: #fff;
  border-right: 1px solid #e9edef;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .25s, opacity .25s;
  z-index: 10;
}
.sc-sidebar.hidden { transform: translateX(-100%); position: absolute; }

.sc-sidebar-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f0f2f5;
  min-height: 54px;
}
.sc-sidebar-title {
  flex: 1;
  font-weight: 700;
  font-size: 17px;
  color: #111;
}
.sc-my-avatar { cursor: pointer; flex-shrink: 0; }
.sc-hdr-actions { display: flex; align-items: center; gap: 2px; }

/* ─── Ícone btn ───────────────────────────────────────── */
.sc-icon-btn {
  width: 38px; height: 38px;
  background: none; border: none;
  color: #54656f; font-size: 18px;
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.sc-icon-btn:hover { background: rgba(0,0,0,.07); color: #1877f2; }

/* ─── Dropdown ────────────────────────────────────────── */
.sc-more-wrap { position: relative; }
.sc-dropdown {
  display: none;
  position: absolute;
  right: 0; top: 40px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,.15);
  min-width: 200px;
  z-index: 999;
  overflow: hidden;
}
.sc-dropdown.open { display: block; }
.sc-dropdown > div {
  padding: 12px 16px;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  color: #111;
  transition: background .12s;
}
.sc-dropdown > div:hover { background: #f5f6f7; }
.sc-dropdown > div .sc-badge { background: #e53935; color: #fff; border-radius: 10px; padding: 1px 6px; font-size: 11px; }

/* ─── Search ──────────────────────────────────────────── */
.sc-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 12px;
  background: #f0f2f5;
  border-radius: 22px;
  padding: 8px 14px;
  font-size: 13px;
  color: #aaa;
}
.sc-search-bar input {
  border: none; background: transparent; outline: none;
  flex: 1; font-size: 14px; color: #333; font-family: inherit;
}

/* ─── Tabs ────────────────────────────────────────────── */
.sc-tabs {
  display: flex;
  border-bottom: 2px solid #f0f2f5;
  margin: 0 12px;
}
.sc-tab {
  flex: 1; padding: 9px 0;
  background: none; border: none;
  font-size: 13px; font-weight: 600; color: #aaa;
  cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: color .15s, border-color .15s;
}
.sc-tab.active { color: #1877f2; border-color: #1877f2; }

/* ─── Lista de conversas ──────────────────────────────── */
.sc-list { flex: 1; overflow-y: auto; }

.sc-conv-item, .sc-colega-item, .sc-nc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f0f2f5;
  transition: background .12s;
  position: relative;
}
.sc-conv-item:hover, .sc-colega-item:hover, .sc-nc-item:hover { background: #f5f6f7; }
.sc-conv-item.active  { background: #f0f2f5; }
.sc-nc-item.selected  { background: #e8f0fe; }

.sc-ci-av-wrap { position: relative; flex-shrink: 0; }
.sc-ci-av {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #e0e0e0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  overflow: hidden;
  flex-shrink: 0;
}
.sc-ci-av.group { background: #e3f2fd; }
.sc-ci-av img   { width: 100%; height: 100%; object-fit: cover; }

.sc-online-dot {
  width: 11px; height: 11px;
  background: #25d366;
  border: 2px solid #fff;
  border-radius: 50%;
  position: absolute;
  right: 1px; bottom: 1px;
}

.sc-ci-info { flex: 1; overflow: hidden; }
.sc-ci-top  { display: flex; align-items: center; justify-content: space-between; }
.sc-ci-name { font-weight: 600; font-size: 15px; color: #111; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-ci-time { font-size: 11px; color: #aaa; white-space: nowrap; flex-shrink: 0; }
.sc-ci-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.sc-ci-last { font-size: 13px; color: #667781; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

.sc-badge {
  background: #25d366; color: #fff;
  border-radius: 10px; padding: 2px 7px;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0; margin-left: 6px;
}

.sc-empty-msg { text-align: center; color: #aaa; padding: 30px 20px; font-size: 14px; line-height: 1.8; }
.sc-link      { background: none; border: none; color: #1877f2; cursor: pointer; font-size: 14px; text-decoration: underline; }
.sc-spinner   { text-align: center; padding: 30px; color: #aaa; font-size: 24px; }

/* ─── Painel principal ────────────────────────────────── */
.sc-panel {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #efeae2;
  background-image: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ccc' fill-opacity='0.1'%3E%3Cpath d='M0 0h4v4H0zm8 0h4v4H8zm8 0h4v4h-4zm8 0h4v4h-4zm8 0h4v4h-4zm8 0h4v4h-4z'/%3E%3C/g%3E%3C/svg%3E");
}
.sc-empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; gap: 12px; color: #aaa;
  background: #f8f9fa;
}
.sc-empty-state h3 { color: #555; font-size: 18px; }
.sc-empty-state p  { font-size: 14px; }

/* ─── Conversa window ─────────────────────────────────── */
.sc-conv-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

.sc-conv-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: #f0f2f5;
  border-bottom: 1px solid #e0e0e0;
  min-height: 54px;
  z-index: 2;
}
.sc-conv-hdr-av { flex-shrink: 0; }
.sc-conv-hdr-info { flex: 1; cursor: pointer; }
.sc-conv-hdr-name { font-weight: 700; font-size: 15px; }
.sc-conv-hdr-sub  { font-size: 12px; color: #667781; }

/* ─── Mensagens ───────────────────────────────────────── */
.sc-msgs {
  flex: 1; overflow-y: auto;
  padding: 10px 8px;
  display: flex; flex-direction: column;
  gap: 2px;
}
.sc-day-div {
  align-self: center;
  background: rgba(255,255,255,.85);
  border-radius: 8px;
  padding: 4px 14px;
  font-size: 12px; color: #667781;
  margin: 8px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.sc-msg { display: flex; align-items: flex-end; gap: 5px; max-width: 78%; }
.sc-msg.me    { align-self: flex-end; flex-direction: row-reverse; }
.sc-msg.them  { align-self: flex-start; }

.sc-av-sm {
  width: 26px; height: 26px; border-radius: 50%;
  flex-shrink: 0; overflow: hidden;
  margin-bottom: 4px;
}
.sc-av-sm img { width: 100%; height: 100%; object-fit: cover; }

.sc-bubble-wrap { display: flex; flex-direction: column; position: relative; }
.sc-bubble-wrap:hover .sc-reply-btn { opacity: 1; }
.sc-reply-btn {
  opacity: 0; position: absolute;
  right: -32px; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.1); border: none;
  width: 26px; height: 26px; border-radius: 50%;
  cursor: pointer; font-size: 12px; color: #555;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s;
}
.sc-msg.me .sc-reply-btn { right: auto; left: -32px; }

.sc-bubble {
  padding: 7px 10px 5px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
  max-width: 100%;
  position: relative;
  word-break: break-word;
}
.sc-msg.me .sc-bubble { background: #d9fdd3; border-radius: 8px 8px 0 8px; }
.sc-msg.them .sc-bubble { border-radius: 8px 8px 8px 0; }

.sc-msg-sender { font-size: 12px; font-weight: 700; color: #1877f2; margin-bottom: 3px; }
.sc-msg-txt    { font-size: 14px; color: #111; line-height: 1.5; }
.sc-deleted    { font-size: 13px; color: #aaa; font-style: italic; }
.sc-msg-meta   { display: flex; align-items: center; justify-content: flex-end; gap: 3px; font-size: 11px; color: #aaa; margin-top: 3px; }
.sc-ticks      { font-size: 12px; }
.sc-ticks.read { color: #53bdeb; }

.sc-reply-quote {
  background: rgba(0,0,0,.07); border-left: 3px solid #1877f2;
  border-radius: 6px; padding: 5px 8px; margin-bottom: 5px; font-size: 12px;
}
.sc-reply-quote b  { color: #1877f2; display: block; margin-bottom: 2px; }
.sc-reply-quote span { color: #555; }

.sc-img-msg {
  max-width: 220px; max-height: 200px;
  border-radius: 8px; display: block; cursor: pointer; object-fit: cover;
}
.sc-file-msg {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,.05); border-radius: 8px;
  padding: 8px 12px; text-decoration: none; color: #111; font-size: 13px; min-width: 180px;
}
.sc-file-msg > div { flex: 1; overflow: hidden; }
.sc-file-msg b  { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-file-msg small { color: #888; font-size: 11px; }
.sc-link-msg { color: #1877f2; }

/* ─── Reply bar ───────────────────────────────────────── */
.sc-reply-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: #f0f2f5;
  border-top: 1px solid #e0e0e0;
}
.sc-reply-content {
  flex: 1; background: #fff; border-left: 3px solid #1877f2;
  border-radius: 6px; padding: 5px 10px; font-size: 13px;
}
.sc-reply-content b    { color: #1877f2; display: block; }
.sc-reply-content span { color: #667781; }

/* ─── Input area ──────────────────────────────────────── */
.sc-input-area {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 10px;
  background: #f0f2f5;
  border-top: 1px solid #e0e0e0;
  position: relative;
}
.sc-textarea {
  flex: 1; border: none; background: #fff;
  border-radius: 22px; padding: 9px 14px;
  font-size: 14px; font-family: inherit; resize: none;
  outline: none; max-height: 120px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  line-height: 1.5;
}
.sc-send-btn {
  width: 42px; height: 42px;
  background: #25d366; color: #fff;
  border: none; border-radius: 50%;
  cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .2s;
}
.sc-send-btn:hover    { background: #128c7e; }
.sc-send-btn:disabled { background: #ccc; cursor: not-allowed; }

/* ─── Context menu ────────────────────────────────────── */
.sc-ctx-menu {
  position: fixed; z-index: 9999;
  background: #fff; border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  min-width: 170px; overflow: hidden;
}
.sc-ctx-menu > div {
  padding: 12px 16px; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; gap: 10px; color: #111;
  transition: background .1s;
}
.sc-ctx-menu > div:hover    { background: #f5f6f7; }
.sc-ctx-menu > div.danger   { color: #e53935; }

/* ─── Emoji picker ────────────────────────────────────── */
.sc-emoji-picker {
  position: absolute; bottom: 60px; left: 10px;
  background: #fff; border-radius: 12px;
  padding: 10px; display: flex; flex-wrap: wrap;
  gap: 5px; width: 240px;
  box-shadow: 0 4px 20px rgba(0,0,0,.14); z-index: 200;
}
.sc-emoji-picker span {
  font-size: 22px; cursor: pointer; padding: 4px;
  border-radius: 6px; transition: background .1s;
}
.sc-emoji-picker span:hover { background: #f0f2f5; }

/* ─── FullView (perfil, newchat, settings, etc.) ─────── */
.sc-fullview {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
  background: #fff;
}
.sc-fv-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: #f0f2f5;
  border-bottom: 1px solid #e0e0e0;
  font-weight: 700; font-size: 16px;
  min-height: 54px; flex-shrink: 0;
}
.sc-fv-search {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 12px;
  background: #f0f2f5; border-radius: 22px;
  padding: 8px 14px; font-size: 13px; color: #aaa;
}
.sc-fv-search input {
  border: none; background: transparent; outline: none;
  flex: 1; font-size: 14px; font-family: inherit;
}
.sc-fv-input {
  margin: 10px 16px; padding: 12px 16px;
  border: 1px solid #e0e0e0; border-radius: 10px;
  font-size: 15px; font-family: inherit; outline: none;
  width: calc(100% - 32px); box-sizing: border-box;
}
.sc-fv-input:focus { border-color: #1877f2; }

/* ─── New chat actions ────────────────────────────────── */
.sc-newchat-actions { padding: 0 4px; }
.sc-action-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; cursor: pointer;
  border-bottom: 1px solid #f0f2f5; font-size: 15px; font-weight: 500;
  transition: background .12s;
}
.sc-action-row:hover { background: #f5f6f7; }
.sc-action-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: #1877f2; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.sc-section-title {
  padding: 8px 16px;
  font-size: 12px; font-weight: 700; color: #667781;
  text-transform: uppercase; letter-spacing: .5px;
  background: #f8f9fa;
}
.sc-nc-list { flex: 1; overflow-y: auto; }
.sc-nc-item { padding: 10px 14px; }
.sc-nc-info { flex: 1; overflow: hidden; }
.sc-nc-btns { display: flex; gap: 6px; flex-shrink: 0; }

/* ─── Botões ──────────────────────────────────────────── */
.sc-btn-primary, .sc-btn-sm {
  padding: 8px 14px; border-radius: 20px;
  border: none; cursor: pointer; font-size: 13px;
  font-weight: 600; transition: all .15s;
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.sc-btn-primary { background: #1877f2; color: #fff; font-size: 14px; padding: 10px 20px; }
.sc-btn-primary:hover { background: #1558c0; }
.sc-btn-sm         { background: #f0f2f5; color: #444; }
.sc-btn-sm.primary { background: #1877f2; color: #fff; }
.sc-btn-sm.success { background: #25d366; color: #fff; }
.sc-btn-sm.muted   { background: #e0e0e0; color: #aaa; }
.sc-btn-sm.danger  { background: #fee; color: #e53935; }
.sc-btn-sm:hover:not(:disabled) { filter: brightness(.9); }
.sc-btn-sm:disabled { opacity: .6; cursor: not-allowed; }

/* ─── Grupo form ──────────────────────────────────────── */
.sc-grupo-form-body { flex: 1; overflow-y: auto; padding-bottom: 20px; }
.sc-grupo-icon-pick { display: flex; flex-direction: column; align-items: center; padding: 20px 0 10px; gap: 12px; }
.sc-grupo-icon-display { font-size: 56px; cursor: pointer; }
.sc-icon-opts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 280px; }
.sc-icon-opts span { font-size: 28px; cursor: pointer; padding: 5px; border-radius: 8px; transition: background .12s; }
.sc-icon-opts span:hover { background: #f0f2f5; }
.sc-gf-selected { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 14px; min-height: 36px; }
.sc-gf-chip { background: #e3f2fd; color: #1877f2; border-radius: 20px; padding: 5px 12px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.sc-gf-chip i { cursor: pointer; }
.sc-gf-check { color: #ccc; font-size: 20px; flex-shrink: 0; }

/* ─── Perfil ──────────────────────────────────────────── */
.sc-profile-page { overflow-y: auto; background: #f0f2f5; }
.sc-profile-cover {
  height: 140px; background: linear-gradient(135deg,#1877f2,#00897b);
  position: relative; display: flex; align-items: flex-end; justify-content: center;
}
.sc-profile-av-big {
  position: absolute; bottom: -40px;
  border: 4px solid #fff; border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.sc-online-badge {
  position: absolute; top: 12px; right: 14px;
  background: #25d366; color: #fff;
  border-radius: 20px; padding: 3px 10px; font-size: 12px;
}
.sc-profile-body { padding: 50px 20px 20px; background: #fff; margin: 0; }
.sc-profile-body h2   { font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 4px; }
.sc-profile-sub       { color: #667781; font-size: 13px; text-align: center; margin-bottom: 10px; }
.sc-profile-bio       { color: #444; font-size: 14px; text-align: center; margin-bottom: 10px; }
.sc-profile-meta      { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; color: #667781; font-size: 13px; margin-bottom: 16px; }
.sc-profile-meta span { display: flex; align-items: center; gap: 5px; }
.sc-profile-actions   { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.sc-profile-btn {
  padding: 9px 20px; border-radius: 20px; border: none;
  cursor: pointer; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 7px;
  background: #f0f2f5; color: #444; transition: all .15s;
}
.sc-profile-btn.primary { background: #1877f2; color: #fff; }
.sc-profile-btn.success { background: #25d366; color: #fff; }
.sc-profile-btn.muted   { background: #e0e0e0; color: #aaa; }
.sc-profile-btn:hover:not(:disabled) { filter: brightness(.9); }
.sc-profile-posts { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; margin-top: 6px; }
.sc-profile-post  { background: #f8f9fa; border-radius: 6px; overflow: hidden; cursor: pointer; }
.sc-profile-post img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.sc-profile-post p   { padding: 6px 8px; font-size: 12px; color: #444; margin: 0; }
.sc-profile-post small { padding: 0 8px 6px; font-size: 11px; color: #aaa; display: block; }

/* ─── Mídias ──────────────────────────────────────────── */
.sc-media-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; padding: 4px; overflow-y: auto; flex: 1; }
.sc-media-thumb { aspect-ratio: 1; overflow: hidden; cursor: pointer; background: #f0f2f5; }
.sc-media-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.sc-media-thumb:hover img { transform: scale(1.05); }
.sc-docs-list { flex: 1; overflow-y: auto; }
.sc-media-tabs { display: flex; background: #f0f2f5; border-bottom: 1px solid #e0e0e0; }
.sc-media-tabs .sc-tab { flex: 1; padding: 10px; }

/* ─── Settings ────────────────────────────────────────── */
.sc-settings-profile {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 16px; background: #fff; border-bottom: 8px solid #f0f2f5;
}
.sc-settings-av { flex-shrink: 0; }
.sc-settings-section {
  padding: 12px 16px 6px;
  font-size: 12px; font-weight: 700; color: #667781;
  background: #f8f9fa; text-transform: uppercase; letter-spacing: .5px;
}
.sc-settings-list { flex: 1; overflow-y: auto; background: #fff; }
.sc-settings-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-bottom: 1px solid #f0f2f5;
  cursor: pointer; font-size: 15px; color: #111;
  transition: background .12s;
}
.sc-settings-item:hover { background: #f8f9fa; }
.sc-settings-item i:first-child { width: 22px; text-align: center; color: #667781; font-size: 18px; }
.sc-settings-item span { flex: 1; }
.sc-settings-item.danger { color: #e53935; }
.sc-settings-item.danger i { color: #e53935; }
.sc-chev { color: #ccc; font-size: 14px; }

/* ─── Toggle switch ───────────────────────────────────── */
.sc-toggle {
  width: 44px; height: 24px; background: #ccc; border-radius: 12px;
  position: relative; cursor: pointer; transition: background .2s; margin-left: auto;
}
[data-theme="dark"] .sc-toggle { background: #1877f2; }
.sc-toggle-knob {
  width: 20px; height: 20px; background: #fff; border-radius: 50%;
  position: absolute; top: 2px; left: 2px;
  transition: left .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
[data-theme="dark"] .sc-toggle-knob { left: 22px; }

/* ─── Lightbox ────────────────────────────────────────── */
.sc-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.sc-lb-bg { position: absolute; inset: 0; background: rgba(0,0,0,.9); }
.sc-lightbox img {
  position: relative; z-index: 1;
  max-width: 92vw; max-height: 88vh;
  border-radius: 8px; object-fit: contain;
}
.sc-lightbox button {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  background: rgba(255,255,255,.2); border: none; color: #fff;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 16px;
}

/* ─── Dark mode ───────────────────────────────────────── */
[data-theme="dark"] .sc-sidebar         { background: #1e2126; border-color: rgba(255,255,255,.05); }
[data-theme="dark"] .sc-sidebar-hdr     { background: #2a2f38; }
[data-theme="dark"] .sc-sidebar-title   { color: #e9edef; }
[data-theme="dark"] .sc-icon-btn        { color: #aebac1; }
[data-theme="dark"] .sc-icon-btn:hover  { background: rgba(255,255,255,.07); }
[data-theme="dark"] .sc-search-bar      { background: rgba(255,255,255,.07); color: #8696a0; }
[data-theme="dark"] .sc-search-bar input{ color: #e9edef; }
[data-theme="dark"] .sc-conv-item       { border-color: rgba(255,255,255,.04); }
[data-theme="dark"] .sc-conv-item:hover,
[data-theme="dark"] .sc-conv-item.active{ background: rgba(255,255,255,.05); }
[data-theme="dark"] .sc-ci-name         { color: #e9edef; }
[data-theme="dark"] .sc-ci-last         { color: #8696a0; }
[data-theme="dark"] .sc-ci-time         { color: #8696a0; }
[data-theme="dark"] .sc-panel           { background: #0b141a; }
[data-theme="dark"] .sc-conv-hdr        { background: #202c33; border-color: rgba(255,255,255,.05); }
[data-theme="dark"] .sc-conv-hdr-name   { color: #e9edef; }
[data-theme="dark"] .sc-conv-hdr-sub    { color: #8696a0; }
[data-theme="dark"] .sc-bubble          { background: #1f2c34; }
[data-theme="dark"] .sc-msg.me .sc-bubble { background: #025144; }
[data-theme="dark"] .sc-msg-txt         { color: #e9edef; }
[data-theme="dark"] .sc-input-area      { background: #202c33; border-color: rgba(255,255,255,.05); }
[data-theme="dark"] .sc-textarea        { background: #2a3942; color: #e9edef; }
[data-theme="dark"] .sc-day-div         { background: rgba(17,27,33,.85); color: #8696a0; }
[data-theme="dark"] .sc-fullview        { background: #111b21; }
[data-theme="dark"] .sc-fv-hdr          { background: #202c33; border-color: rgba(255,255,255,.05); color: #e9edef; }
[data-theme="dark"] .sc-fv-search       { background: rgba(255,255,255,.06); color: #8696a0; }
[data-theme="dark"] .sc-fv-search input { color: #e9edef; }
[data-theme="dark"] .sc-fv-input        { background: #2a3942; border-color: rgba(255,255,255,.1); color: #e9edef; }
[data-theme="dark"] .sc-section-title   { background: #111b21; color: #8696a0; }
[data-theme="dark"] .sc-action-row      { color: #e9edef; border-color: rgba(255,255,255,.05); }
[data-theme="dark"] .sc-action-row:hover{ background: rgba(255,255,255,.04); }
[data-theme="dark"] .sc-nc-item         { border-color: rgba(255,255,255,.04); }
[data-theme="dark"] .sc-nc-item:hover   { background: rgba(255,255,255,.04); }
[data-theme="dark"] .sc-nc-item.selected{ background: rgba(24,119,242,.2); }
[data-theme="dark"] .sc-profile-body    { background: #111b21; }
[data-theme="dark"] .sc-profile-body h2 { color: #e9edef; }
[data-theme="dark"] .sc-profile-sub,
[data-theme="dark"] .sc-profile-bio     { color: #8696a0; }
[data-theme="dark"] .sc-profile-post    { background: #1f2c34; }
[data-theme="dark"] .sc-profile-post p  { color: #aaa; }
[data-theme="dark"] .sc-settings-list   { background: #111b21; }
[data-theme="dark"] .sc-settings-item   { border-color: rgba(255,255,255,.04); color: #e9edef; }
[data-theme="dark"] .sc-settings-item:hover { background: rgba(255,255,255,.04); }
[data-theme="dark"] .sc-settings-section { background: #0b141a; color: #8696a0; }
[data-theme="dark"] .sc-settings-profile { background: #1f2c34; border-color: #0b141a; }
[data-theme="dark"] .sc-dropdown        { background: #233138; box-shadow: 0 4px 20px rgba(0,0,0,.4); }
[data-theme="dark"] .sc-dropdown > div  { color: #e9edef; }
[data-theme="dark"] .sc-dropdown > div:hover { background: rgba(255,255,255,.05); }
[data-theme="dark"] .sc-ctx-menu        { background: #233138; }
[data-theme="dark"] .sc-ctx-menu > div  { color: #e9edef; }
[data-theme="dark"] .sc-btn-sm          { background: #2a3942; color: #e9edef; }
[data-theme="dark"] .sc-empty-state     { background: #111b21; }
[data-theme="dark"] .sc-reply-bar       { background: #202c33; border-color: rgba(255,255,255,.05); }
[data-theme="dark"] .sc-reply-content   { background: #1f2c34; color: #e9edef; }
[data-theme="dark"] .sc-tab             { color: #8696a0; }
[data-theme="dark"] .sc-tab.active      { color: #25d366; border-color: #25d366; }
[data-theme="dark"] .sc-reply-quote     { background: rgba(255,255,255,.05); }
[data-theme="dark"] .sc-reply-quote span{ color: #8696a0; }

/* ─── MOBILE ──────────────────────────────────────────── */
@media (max-width: 700px) {
  .sc-root { position: relative; overflow: hidden; }

  /* Sidebar ocupa tudo */
  .sc-sidebar {
    position: absolute;
    inset: 0;
    width: 100%;
    min-width: unset;
    z-index: 10;
    transform: none;
  }
  .sc-sidebar.hidden {
    transform: translateX(-100%);
  }

  /* Panel ocupa tudo por cima */
  .sc-panel {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
  }
  .sc-panel.active { display: flex; }

  /* Sempre mostra botão de voltar */
  .sc-back { display: flex !important; }

  /* Mensagens mais largas */
  .sc-msg { max-width: 90%; }

  /* Perfil: grid de posts 2 colunas */
  .sc-profile-posts { grid-template-columns: repeat(2,1fr); }

  /* Textarea mais pequena */
  .sc-conv-hdr-name { font-size: 14px; }
}

/* Tablet */
@media (min-width: 701px) and (max-width: 980px) {
  .sc-sidebar { width: 280px; min-width: 280px; }
}
/* Garante que imagens e vídeos dentro do feed ocupem o espaço correto e apareçam */
#mca-feed-container img, 
#posts-container img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

#mca-feed-container video, 
#posts-container video,
#mca-feed-container iframe,
#posts-container iframe {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  border-radius: 8px;
}

/* Evita que blocos de mídia fiquem invisíveis por herança de opacidade */
.post-media, .post-images, .post-video-wrapper {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  clear: both !important;
}



/* Força a visibilidade absoluta de mídias que entram no feed isolado */
.feed-block-separator img,
.post-card img,
.feed-video-thumb,
.curso-cover-wrap img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.feed-block-separator video,
.feed-native-video-wrap video {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
}

/* Evita que qualquer flexbox quebre os cards para os lados */
.feed-block-separator {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    float: none !important;
}