/* Paginа: portal/social/direct-messages.html — CSS extraido automaticamente */
:root {
      --bg-main:#F5F2E9;
      --bg-secondary:#181818;
      --bg-card:rgba(255,255,255,.045);
      --bg-card-strong:rgba(255,255,255,.065);

      --gold:#16804A;
      --gold-soft:rgba(22,128,74,.10);

      --green:#16804A;
      --green-soft:rgba(22,128,74,.10);

      --red:#C93632;
      --red-soft:rgba(201,54,50,.10);

      --text:#111111;
      --text-soft:#3b3b3b;
      --text-muted:#6f6a5f;

      --border:rgba(17,17,17,.10);

      --radius:18px;
      --radius-small:13px;

      --nav-height:72px;
      --sidebar-width:270px;
    }

    * {
      box-sizing:border-box;
    }

    html {
      scroll-behavior:smooth;
    }

    body {
      margin:0;
      min-height:100vh;
      background:var(--bg-main);
      color:var(--text);
      font-family:'Montserrat',sans-serif;
      overflow-x:hidden;
    }

    body::before {
      content:"";
      position:fixed;
      inset:0;

      background:
        linear-gradient(
          rgba(11,11,15,.94),
          rgba(11,11,15,.98)
        ),
        url("/portal/logo/logo.png");

      background-position:center;
      background-repeat:no-repeat;
      background-size:430px;

      opacity:.08;
      pointer-events:none;
      z-index:-1;
    }

    a {
      color:inherit;
      text-decoration:none;
    }

    button,
    input,
    textarea {
      font-family:inherit;
    }

    /* =======================================================
       SIDEBAR PADRÃO PORTAL
    ======================================================== */

    .sidebar {
      position:fixed;
      top:0;
      left:0;
      width:var(--sidebar-width);
      height:100vh;

      background:var(--bg-secondary);
      border-right:1px solid var(--border);

      z-index:1050;

      display:flex;
      flex-direction:column;

      overflow-y:auto;
      overflow-x:hidden;

      transform:translateX(-100%);
      transition:transform .25s ease;
    }

    .sidebar.show {
      transform:translateX(0);
    }

    .sidebar-brand {
      display:flex;
      align-items:center;
      gap:11px;

      padding:20px 18px 18px;

      border-bottom:1px solid var(--border);

      text-decoration:none;
      flex-shrink:0;
    }

    .sidebar-brand img {
      width:38px;
      height:38px;
      object-fit:contain;
    }

    .sidebar-brand h5 {
      margin:0;

      color:var(--gold);

      font-weight:800;
      font-size:15px;
      line-height:1.1;
    }

    .sidebar-brand small {
      display:block;

      color:var(--text-muted);

      font-size:9px;
      letter-spacing:.8px;

      margin-top:2px;
    }

    .sidebar-menu {
      flex:1;

      padding:14px 12px;

      display:flex;
      flex-direction:column;
      gap:2px;
    }

    .sidebar-section {
      padding:14px 10px 5px;

      color:var(--text-muted);

      font-size:9px;
      font-weight:700;

      text-transform:uppercase;
      letter-spacing:1.4px;
    }

    .sidebar-menu a {
      display:flex;
      align-items:center;
      gap:11px;

      padding:9px 10px;

      border-radius:9px;

      color:var(--text-soft);

      font-size:12px;
      font-weight:600;

      text-decoration:none;

      transition:.15s ease;
    }

    .sidebar-menu a i {
      width:20px;

      text-align:center;

      font-size:16px;

      flex-shrink:0;
    }

    .sidebar-menu a:hover {
      color:var(--text);
      background:rgba(255,255,255,.055);
    }

    .sidebar-menu a.active {
      color:var(--gold);
      background:rgba(255,215,0,.10);
    }

    .sidebar-menu a[data-exige] {
      display:none;
    }

    .sidebar-menu a[data-exige].liberado {
      display:flex;
    }

    .sidebar-divider {
      height:1px;
      margin:10px 10px;

      background:var(--border);
    }

    .sidebar-footer {
      padding:12px;

      border-top:1px solid var(--border);
    }

    .sidebar-user {
      display:flex;
      align-items:center;
      gap:10px;

      padding:10px;

      border:1px solid var(--border);
      border-radius:12px;

      background:var(--bg-card);

      min-width:0;
    }

    .sidebar-user .avatar {
      width:36px;
      height:36px;

      flex:none;
    }

    .sidebar-user-info {
      min-width:0;
    }

    .sidebar-user-info strong {
      display:block;

      font-size:10px;

      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .sidebar-user-info span {
      display:block;

      margin-top:2px;

      color:var(--text-muted);

      font-size:8px;

      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .sidebar-logout {
      width:100%;

      margin-top:8px;

      border:1px solid var(--border);
      border-radius:9px;

      padding:8px 10px;

      background:transparent;
      color:var(--text-muted);

      font-size:9px;
      font-weight:600;

      text-align:left;
    }

    .sidebar-logout:hover {
      color:#e57c75;
      background:var(--red-soft);
    }

    .sidebar-overlay {
      display:none;

      position:fixed;
      inset:0;

      background:rgba(0,0,0,.7);

      z-index:1040;
    }

    .sidebar-overlay.show {
      display:block;
    }

    /* =======================================================
       MAIN
    ======================================================== */

    .main {
      min-height:100vh;
      padding-bottom:var(--nav-height);
    }

    .topbar {
      position:sticky;
      top:0;

      z-index:900;

      height:66px;

      display:flex;
      align-items:center;
      justify-content:space-between;

      padding:0 16px;

      background:rgba(11,11,15,.84);

      backdrop-filter:blur(18px);

      border-bottom:1px solid var(--border);
    }

    .topbar-left {
      display:flex;
      align-items:center;
      gap:10px;

      min-width:0;
    }

    .menu-btn,
    .back-btn,
    .icon-btn {
      width:38px;
      height:38px;

      flex:none;

      border:1px solid var(--border);
      border-radius:12px;

      background:var(--bg-card);
      color:var(--text-soft);

      display:flex;
      align-items:center;
      justify-content:center;

      transition:.2s;
    }

    .menu-btn:hover,
    .back-btn:hover,
    .icon-btn:hover {
      color:var(--gold);
      background:var(--gold-soft);
    }

    .menu-btn {
      display:flex;
    }

    .page-title {
      margin:0;

      font-size:14px;
      font-weight:800;

      white-space:nowrap;
    }

    .page-subtitle {
      display:block;

      margin-top:1px;

      color:var(--text-muted);

      font-size:9px;
    }

    .top-actions {
      display:flex;
      gap:7px;
    }

    .content {
      width:min(1180px,100%);

      margin:0 auto;

      padding:18px 14px 30px;
    }

    /* =======================================================
       SEARCH
    ======================================================== */

    .search-box {
      position:relative;
      margin-bottom:16px;
    }

    .search-box i {
      position:absolute;

      left:14px;
      top:50%;

      transform:translateY(-50%);

      color:var(--text-muted);

      font-size:14px;

      pointer-events:none;
    }

    .search-box input {
      width:100%;
      height:44px;

      padding:0 14px 0 40px;

      border:1px solid var(--border);
      border-radius:13px;

      outline:none;

      background:var(--bg-card);
      color:var(--text);

      font-size:10px;
    }

    .search-box input::placeholder {
      color:var(--text-muted);
    }

    .search-box input:focus {
      border-color:rgba(255,215,0,.35);
      background:var(--bg-card-strong);
    }

    /* =======================================================
       LAYOUT
    ======================================================== */

    .messages-layout {
      display:grid;

      grid-template-columns:1fr;

      gap:14px;
    }

    /* =======================================================
       CONVERSATIONS
    ======================================================== */

    .conversations {
      border:1px solid var(--border);
      border-radius:var(--radius);

      background:var(--bg-card);

      overflow:hidden;
    }

    .conversation-header {
      padding:15px 16px;

      border-bottom:1px solid var(--border);

      display:flex;
      align-items:center;
      justify-content:space-between;
    }

    .conversation-header strong {
      font-size:12px;
    }

    .conversation-header span {
      color:var(--text-muted);
      font-size:9px;
    }

    .conversation-list {
      max-height:600px;
      overflow-y:auto;
    }

    .conversation {
      width:100%;

      padding:12px 14px;

      border:0;
      border-bottom:1px solid var(--border);

      background:transparent;

      color:var(--text);

      display:flex;
      align-items:center;

      gap:10px;

      text-align:left;

      cursor:pointer;

      transition:.18s ease;
    }

    .conversation:last-child {
      border-bottom:0;
    }

    .conversation:hover {
      background:rgba(255,255,255,.035);
    }

    .conversation.active {
      background:var(--gold-soft);
    }

    .conversation .avatar {
      width:42px;
      height:42px;

      flex:none;

      border-radius:50%;

      display:flex;
      align-items:center;
      justify-content:center;

      background:rgba(255,255,255,.055);

      color:var(--text-muted);

      font-size:14px;
      font-weight:800;

      overflow:hidden;
    }

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

    .conversation-info {
      min-width:0;
      flex:1;
    }

    .conversation-name {
      font-size:10px;
      font-weight:700;

      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .conversation-message {
      margin-top:4px;

      color:var(--text-muted);

      font-size:8px;

      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .conversation-empty {
      min-height:230px;

      display:flex;
      align-items:center;
      justify-content:center;

      text-align:center;

      padding:30px 18px;
    }

    .conversation-empty-icon {
      width:56px;
      height:56px;

      margin:0 auto 13px;

      border-radius:18px;

      display:flex;
      align-items:center;
      justify-content:center;

      background:var(--gold-soft);
      color:var(--gold);

      font-size:23px;
    }

    .conversation-empty strong {
      display:block;

      color:var(--text-soft);

      font-size:10px;

      margin-bottom:5px;
    }

    .conversation-empty span {
      display:block;

      color:var(--text-muted);

      font-size:8px;

      line-height:1.6;
    }

    /* =======================================================
       CHAT
    ======================================================== */

    .chat-panel {
      min-width:0;
      min-height:600px;

      border:1px solid var(--border);
      border-radius:var(--radius);

      background:var(--bg-card);

      overflow:hidden;

      display:flex;
      flex-direction:column;
    }

    .chat-header {
      min-height:68px;

      padding:11px 14px;

      border-bottom:1px solid var(--border);

      display:flex;
      align-items:center;
      justify-content:space-between;

      gap:10px;
    }

    .chat-person {
      display:flex;
      align-items:center;

      gap:10px;

      min-width:0;
    }

    .chat-person .avatar {
      width:40px;
      height:40px;

      flex:none;

      border-radius:50%;

      display:flex;
      align-items:center;
      justify-content:center;

      background:rgba(255,255,255,.055);

      color:var(--text-muted);

      overflow:hidden;
    }

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

    .chat-person-info {
      min-width:0;
    }

    .chat-person-info strong {
      display:block;

      font-size:11px;
      font-weight:800;

      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .chat-person-info span {
      display:flex;
      align-items:center;

      gap:5px;

      margin-top:3px;

      color:var(--text-muted);

      font-size:8px;
    }

    .status-dot {
      width:6px;
      height:6px;

      border-radius:50%;

      background:var(--text-muted);
    }

    .chat-actions {
      display:flex;
      gap:6px;
    }

    .chat-action {
      width:34px;
      height:34px;

      border:0;
      border-radius:10px;

      background:transparent;
      color:var(--text-muted);

      display:flex;
      align-items:center;
      justify-content:center;
    }

    .chat-action:hover {
      color:var(--gold);
      background:var(--gold-soft);
    }

    .chat-action:disabled {
      opacity:.35;
      cursor:not-allowed;
    }

    /* =======================================================
       MESSAGES
    ======================================================== */

    .messages {
      flex:1;

      min-height:390px;
      max-height:510px;

      overflow-y:auto;

      padding:18px 14px;

      display:none;

      flex-direction:column;

      gap:12px;
    }

    /* =======================================================
       COMPOSER
    ======================================================== */

    .composer {
      padding:10px;

      border-top:1px solid var(--border);

      background:rgba(0,0,0,.12);
    }

    .composer-row {
      display:flex;
      align-items:flex-end;

      gap:7px;
    }

    .composer-btn {
      width:37px;
      height:37px;

      flex:none;

      border:1px solid var(--border);
      border-radius:11px;

      background:var(--bg-card);
      color:var(--text-muted);

      display:flex;
      align-items:center;
      justify-content:center;
    }

    .composer-btn:disabled {
      opacity:.35;
      cursor:not-allowed;
    }

    .message-input {
      flex:1;

      min-height:37px;
      max-height:100px;

      resize:none;

      padding:10px 11px;

      border:1px solid var(--border);
      border-radius:11px;

      outline:none;

      background:var(--bg-card);
      color:var(--text);

      font-size:9px;
    }

    .message-input::placeholder {
      color:var(--text-muted);
    }

    .message-input:disabled {
      opacity:.55;
      cursor:not-allowed;
    }

    .send-btn {
      width:37px;
      height:37px;

      flex:none;

      border:0;
      border-radius:11px;

      background:var(--gold);
      color:#111;

      display:flex;
      align-items:center;
      justify-content:center;
    }

    .send-btn:disabled {
      opacity:.35;
      cursor:not-allowed;
    }

    /* =======================================================
       EMPTY CHAT
    ======================================================== */

    .chat-empty {
      flex:1;

      min-height:500px;

      display:flex;
      align-items:center;
      justify-content:center;

      text-align:center;

      padding:30px;
    }

    .chat-empty-icon {
      width:70px;
      height:70px;

      margin:0 auto 15px;

      border-radius:22px;

      display:flex;
      align-items:center;
      justify-content:center;

      background:var(--gold-soft);
      color:var(--gold);

      font-size:28px;
    }

    .chat-empty h3 {
      font-size:14px;
      font-weight:800;

      margin-bottom:6px;
    }

    .chat-empty p {
      max-width:330px;

      color:var(--text-muted);

      font-size:9px;
      line-height:1.6;

      margin:0 auto;
    }

    /* =======================================================
       MODAL
    ======================================================== */

    .modal-content {
      background:#121217;
      color:var(--text);

      border:1px solid var(--border);

      border-radius:20px;
    }

    .modal-header {
      border-bottom:1px solid var(--border);

      padding:16px 18px;
    }

    .modal-title {
      font-size:13px;
      font-weight:800;
    }

    .btn-close {
      filter:invert(1);
      opacity:.7;
    }

    .modal-body {
      padding:18px;
    }

    /* =======================================================
       TOAST
    ======================================================== */

    .toast-container {
      position:fixed;

      right:14px;
      bottom:85px;

      z-index:2000;
    }

    .aya-toast {
      display:flex;
      align-items:center;

      gap:9px;

      padding:11px 14px;

      border:1px solid var(--border);
      border-radius:12px;

      background:#17171d;

      box-shadow:0 12px 35px rgba(0,0,0,.35);

      color:var(--text-soft);

      font-size:9px;

      animation:toastIn .25s ease;
    }

    .aya-toast i {
      color:var(--gold);
      font-size:15px;
    }

    @keyframes toastIn {
      from {
        transform:translateY(10px);
        opacity:0;
      }

      to {
        transform:translateY(0);
        opacity:1;
      }
    }

    /* =======================================================
       BOTTOM NAV
    ======================================================== */

    .bottom-nav {
      position:fixed;

      left:0;
      right:0;
      bottom:0;

      height:var(--nav-height);

      display:grid;

      grid-template-columns:repeat(5,1fr);

      align-items:center;

      padding:5px 7px 7px;

      background:rgba(10,10,14,.94);

      backdrop-filter:blur(18px);

      border-top:1px solid var(--border);

      z-index:1000;
    }

    .bottom-link {
      height:58px;

      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;

      gap:4px;

      color:var(--text-muted);

      font-size:8px;
      font-weight:600;
    }

    .bottom-link i {
      font-size:18px;
    }

    .bottom-link.active {
      color:var(--gold);
    }

    .bottom-link.center .center-icon {
      width:45px;
      height:45px;

      margin-top:-17px;

      border-radius:50%;

      border:4px solid var(--bg-main);

      background:var(--gold);
      color:#111;

      display:flex;
      align-items:center;
      justify-content:center;

      font-size:19px;
    }

    /* =======================================================
       LOADING
    ======================================================== */

    .page-loading {
      position:fixed;
      inset:0;

      z-index:3000;

      display:flex;
      align-items:center;
      justify-content:center;

      background:rgba(11,11,15,.94);

      backdrop-filter:blur(12px);

      transition:opacity .25s ease;
    }

    .page-loading.hidden {
      opacity:0;
      pointer-events:none;
    }

    .page-loading-inner {
      text-align:center;
    }

    .page-loading-logo {
      width:52px;
      height:52px;

      object-fit:contain;

      margin-bottom:14px;
    }

    .page-loading-text {
      color:var(--text-muted);

      font-size:9px;
      font-weight:600;
    }

    /* =======================================================
       DESKTOP
    ======================================================== */

    @media (min-width:992px) {

      .sidebar {
        transform:translateX(0);
      }

      .sidebar-overlay {
        display:none !important;
      }

      .menu-btn {
        display:none;
      }

      .main {
        margin-left:var(--sidebar-width);
        padding-bottom:30px;
      }

      .topbar {
        padding:0 28px;
      }

      .content {
        padding:26px 28px 35px;
      }

      .bottom-nav {
        display:none;
      }

      .messages-layout {
        grid-template-columns:340px minmax(0,1fr);

        min-height:650px;
      }

      .conversation-list {
        max-height:640px;
      }

      .chat-panel {
        min-height:650px;
      }

      .chat-empty {
        min-height:500px;
      }

      .toast-container {
        bottom:25px;
      }
    }

    @media (max-width:991px) {

      .chat-panel {
        min-height:560px;
      }

      .conversation-list {
        max-height:360px;
      }

      .messages-layout {
        display:flex;
        flex-direction:column;
      }

      .chat-panel {
        order:1;
      }

      .conversations {
        order:2;
      }
    }

    @media (max-width:520px) {

      .content {
        padding-left:10px;
        padding-right:10px;
      }

      .conversation-list {
        max-height:320px;
      }

      .chat-actions .chat-action:nth-child(2) {
        display:none;
      }
    }
          /* ===== IEPLUS_LIGHT_OVERRIDES : IÊ+ tema claro (estrutura/navegação preta com texto claro) ===== */
        .topbar,.sidebar,.sidebar-header,.bottom-navigation,.bottom-nav,.side-nav,.nav-drawer,.app-nav{background:#111111 !important;}
        .topbar,.topbar *,.sidebar *,.bottom-navigation *,.bottom-navigation a,.bottom-navigation i,.bottom-navigation span{color:rgba(255,255,255,.85) !important;}
        .sidebar a.active,.sidebar .active,.bottom-navigation .active{color:#8FE6B4 !important;}
        .sidebar a.active,.bottom-navigation .active{background:rgba(22,128,74,.30) !important;}