/*
 * MundoTrabajos — sistema visual desktop navy + amarillo v1.5
 * Capa final cargada después de los estilos históricos.
 * Deliberadamente limitada a escritorio: no modifica mobile.php ni estilos <= 900px.
 */
@media (min-width: 901px) {
  :root {
    --blue: #0d315d !important;
    --blue-dark: #071a31 !important;
    --navy: #071a31 !important;
    --ink: #111827 !important;
    --muted: #667085 !important;
    --line: #e2e8f0 !important;
    --light: #f6f8fb !important;
    --white: #fff !important;
    --shadow: 0 18px 48px rgba(8, 26, 49, .10) !important;
    --mt-navy: #071a31 !important;
    --mt-navy-2: #0d315d !important;
    --mt-gold: #ffc928 !important;
    --mt-gold-soft: #fff0a6 !important;
    --mt-yellow: #ffc928;
    --mt-yellow-hover: #ffd54f;
    --mt-surface: #f6f8fb;
    --mt-surface-2: #eef3f8;
    --mt-border: #dfe6ee;
    --mt-text: #111827;
    --mt-muted: #667085;
  }

  html { background: var(--mt-surface); }

  body {
    color: var(--mt-text) !important;
    background:
      radial-gradient(circle at 6% 0%, rgba(13, 49, 93, .035), transparent 28rem),
      linear-gradient(180deg, #f8fafc 0%, var(--mt-surface) 100%) !important;
  }

  body.page-home {
    background: #fff !important;
  }

  ::selection {
    color: var(--mt-navy) !important;
    background: rgba(255, 201, 40, .42) !important;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 3px solid rgba(255, 201, 40, .62) !important;
    outline-offset: 3px !important;
  }

  /* ----------------------------------------------------------
     Cabecera general, sin tocar la cabecera específica de home
     ---------------------------------------------------------- */
  body:not(.page-home) > .site-header {
    height: 84px !important;
    min-height: 84px !important;
    color: #fff !important;
    background: rgba(7, 26, 49, .97) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
    box-shadow: 0 12px 34px rgba(7, 26, 49, .13) !important;
    backdrop-filter: blur(14px) !important;
  }

  body:not(.page-home) > .site-header .header-inner {
    height: 84px !important;
    min-height: 84px !important;
  }

  body:not(.page-home) > .site-header .brand {
    color: #fff !important;
    font-size: 20px !important;
    letter-spacing: -.04em !important;
  }

  body:not(.page-home) > .site-header .brand:hover {
    color: #fff !important;
  }

  body:not(.page-home) > .site-header .brand-mark,
  body:not(.page-home) > .site-header .helmet-logo,
  body:not(.page-home) > .site-header .custom-brand-logo,
  body:not(.page-home) > .site-header .brand-logo-main,
  body:not(.page-home) > .site-header .brand-logo-mark {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important;
    object-fit: contain !important;
  }

  body:not(.page-home) > .site-header .main-nav {
    gap: 10px !important;
  }

  body:not(.page-home) > .site-header .main-nav a {
    position: relative !important;
    padding: 10px 13px !important;
    border-radius: 10px !important;
    color: rgba(255, 255, 255, .86) !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: color .18s ease, background .18s ease, transform .18s ease !important;
  }

  body:not(.page-home) > .site-header .main-nav a:hover,
  body:not(.page-home) > .site-header .main-nav a.active {
    color: var(--mt-navy) !important;
    background: var(--mt-yellow) !important;
    box-shadow: none !important;
  }

  body:not(.page-home) > .site-header .main-nav .nav-cta {
    color: var(--mt-navy) !important;
    background: var(--mt-yellow) !important;
    border: 1px solid var(--mt-yellow) !important;
    box-shadow: 0 10px 22px rgba(255, 201, 40, .17) !important;
  }

  body:not(.page-home) > .site-header .main-nav .nav-cta:hover {
    color: var(--mt-navy) !important;
    background: var(--mt-yellow-hover) !important;
    border-color: var(--mt-yellow-hover) !important;
  }

  /* Bloqueo defensivo: el menú móvil nunca se superpone en desktop. */
  body.page-home > .mobile-nav,
  body:not(.page-home) .menu-toggle {
    display: none !important;
  }

  /* ----------------------------------------------------------
     Home: eliminar cualquier resplandor rosa heredado
     ---------------------------------------------------------- */
  body.page-home,
  body.page-home main,
  body.page-home .ny-jobs,
  body.page-home .ny-categories {
    box-shadow: none !important;
  }

  body.page-home::before,
  body.page-home::after,
  body.page-home main::before,
  body.page-home main::after,
  body.page-home .ny-hero::before,
  body.page-home .ny-categories::before,
  body.page-home .ny-categories::after,
  body.page-home .ny-jobs::before,
  body.page-home .ny-jobs::after {
    border-color: rgba(13, 49, 93, .08) !important;
    box-shadow: none !important;
  }

  body.page-home .ny-job-card:hover {
    border-color: rgba(255, 201, 40, .9) !important;
    box-shadow: 0 20px 44px rgba(7, 26, 49, .10) !important;
  }

  body.page-home .ny-company-cta,
  body.page-home .ny-stats {
    box-shadow: 0 20px 48px rgba(7, 26, 49, .14) !important;
  }

  /* ----------------------------------------------------------
     Botones, enlaces de acción y estados activos
     ---------------------------------------------------------- */
  .button,
  button.button,
  .hero-search button,
  .filter-apply,
  .filter-apply-inline,
  .publish-actions button,
  .contact-form button[type="submit"],
  .inbox-empty a,
  .sj-cookie-accept,
  .chat-send,
  .chat-compose > button[type="submit"] {
    color: #fff !important;
    background: linear-gradient(135deg, var(--mt-navy), #123f73) !important;
    border-color: var(--mt-navy) !important;
    box-shadow: 0 10px 24px rgba(7, 26, 49, .16) !important;
  }

  .button:hover,
  button.button:hover,
  .hero-search button:hover,
  .filter-apply:hover,
  .filter-apply-inline:hover,
  .publish-actions button:hover,
  .contact-form button[type="submit"]:hover,
  .inbox-empty a:hover,
  .sj-cookie-accept:hover,
  .chat-send:hover,
  .chat-compose > button[type="submit"]:hover {
    color: var(--mt-navy) !important;
    background: var(--mt-yellow) !important;
    border-color: var(--mt-yellow) !important;
    filter: none !important;
    box-shadow: 0 12px 26px rgba(7, 26, 49, .13) !important;
  }

  .button-outline,
  .button-ghost,
  .button-ghost-light,
  .button-light,
  .sj-cookie-essential {
    color: var(--mt-navy) !important;
    background: #fff !important;
    border-color: #b8c5d4 !important;
    box-shadow: none !important;
  }

  .button-outline:hover,
  .button-ghost:hover,
  .button-ghost-light:hover,
  .button-light:hover,
  .sj-cookie-essential:hover {
    color: var(--mt-navy) !important;
    background: var(--mt-yellow) !important;
    border-color: var(--mt-yellow) !important;
  }

  /* ----------------------------------------------------------
     Héroes y cabeceras interiores
     ---------------------------------------------------------- */
  .page-hero,
  .legal-hero,
  .employer-top {
    color: #fff !important;
    background:
      radial-gradient(circle at 88% 8%, rgba(255, 201, 40, .12), transparent 24rem),
      linear-gradient(125deg, #071a31 0%, #0d315d 56%, #174b82 100%) !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06) !important;
  }

  .page-hero h1,
  .page-hero h2,
  .page-hero p,
  .employer-top h1,
  .employer-top p {
    color: #fff !important;
  }

  .page-hero .eyebrow,
  .employer-top .eyebrow,
  .eyebrow:not(.dark) {
    color: var(--mt-yellow) !important;
  }

  .eyebrow.dark,
  .section-heading .eyebrow,
  .form-heading span,
  .profile-meter-head strong,
  .employer-panel-head span,
  .billing-preview > div > span {
    color: var(--mt-navy) !important;
  }

  /* ----------------------------------------------------------
     Fondos, tarjetas y sombras neutras
     ---------------------------------------------------------- */
  .section,
  .jobs-section,
  .jobs-board-section,
  .category-section,
  .featured-jobs-section,
  .contact-hero,
  .contact-form-section,
  .messages-page,
  .chat-page,
  .chat-section,
  .employer-workspace,
  .legal-section,
  .dashboard-section {
    background:
      radial-gradient(circle at 95% 5%, rgba(13, 49, 93, .035), transparent 26rem),
      linear-gradient(180deg, #f8fafc 0%, var(--mt-surface) 100%) !important;
  }

  .category-section::before,
  .category-section::after,
  .featured-jobs-section::before,
  .featured-jobs-section::after,
  .contact-hero::before,
  .contact-hero::after {
    border-color: rgba(13, 49, 93, .08) !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  .job-card,
  .category-card,
  .filters,
  .filters-infojob,
  .detail-card,
  .detail-facts,
  .apply-box,
  .auth-box,
  .profile-card,
  .activity-item,
  .conversation-links > a,
  .publish-form,
  .post-job-form,
  form.publish-form,
  .contact-channels a,
  .legal-content,
  .employer-panel,
  .employer-stats article,
  .inbox-shell,
  .chat-app,
  .cv-license-card,
  .admin-login-link {
    border-color: var(--mt-border) !important;
    background: #fff !important;
    box-shadow: 0 14px 36px rgba(7, 26, 49, .065) !important;
  }

  .job-card:hover,
  .category-card:hover,
  .featured-jobs-grid .job-card:hover,
  .activity-item:hover,
  .conversation-links > a:hover,
  .contact-channels a:hover,
  .cv-license-card:hover,
  .admin-login-link:hover {
    border-color: var(--mt-yellow) !important;
    background: #fff !important;
    box-shadow: 0 20px 44px rgba(7, 26, 49, .11) !important;
    color: var(--mt-text) !important;
  }

  .job-list .job-card:hover {
    border-left-color: var(--mt-yellow) !important;
  }

  .category-card:hover .category-icon,
  .featured-jobs-grid .job-card:hover .job-arrow {
    color: var(--mt-navy) !important;
    background: var(--mt-yellow) !important;
    box-shadow: 0 10px 22px rgba(7, 26, 49, .12) !important;
  }

  .category-card:hover > i {
    color: var(--mt-navy) !important;
    background: var(--mt-yellow) !important;
  }

  .category-section .section-heading > a,
  .featured-jobs-section .section-heading > a,
  .pagination a,
  .clear-filters,
  .employer-panel-head > a,
  .job-arrow,
  .activity-item a,
  .blog-card-link {
    color: #0b5cab !important;
  }

  .category-section .section-heading > a:hover,
  .featured-jobs-section .section-heading > a:hover,
  .pagination a:hover,
  .pagination a.active {
    color: var(--mt-navy) !important;
    background: var(--mt-yellow) !important;
    border-color: var(--mt-yellow) !important;
    box-shadow: none !important;
  }

  /* ----------------------------------------------------------
     Formularios, filtros y selección
     ---------------------------------------------------------- */
  .filters,
  .filters-infojob,
  .publish-form,
  .auth-box,
  .profile-card,
  .legal-content {
    color: var(--mt-text) !important;
  }

  .filters input,
  .filters select,
  .filter-field input,
  .filter-field select,
  .auth-box input,
  .publish-form input,
  .publish-form select,
  .publish-form textarea,
  .profile-card input,
  .profile-card textarea,
  .company-form input,
  .company-form textarea,
  .chat-compose textarea,
  .inbox-sidebar > label {
    color: var(--mt-text) !important;
    border-color: #cfd8e3 !important;
    background: #fff !important;
  }

  .filters input:focus,
  .filters select:focus,
  .filter-field input:focus,
  .filter-field select:focus,
  .auth-box input:focus,
  .publish-form input:focus,
  .publish-form select:focus,
  .publish-form textarea:focus,
  .profile-card input:focus,
  .profile-card textarea:focus,
  .company-form input:focus,
  .company-form textarea:focus,
  .chat-compose textarea:focus {
    border-color: var(--mt-navy) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(13, 49, 93, .11) !important;
  }

  input[type="checkbox"],
  input[type="radio"] {
    accent-color: var(--mt-navy) !important;
  }

  .filter-check:hover,
  .cv-upload-box:hover,
  .conversation-list > a:hover,
  .quick-replies button:hover,
  .emoji-picker button:hover {
    color: var(--mt-navy) !important;
    background: #fff8df !important;
    border-color: rgba(255, 201, 40, .72) !important;
  }

  .role-picker input:checked + span,
  .auth-entry-tabs a.active,
  .auth-entry-tabs a:hover,
  .cv-step-list .active,
  .cv-step-list .done {
    color: var(--mt-navy) !important;
    background: var(--mt-yellow) !important;
    border-color: var(--mt-yellow) !important;
    box-shadow: none !important;
  }

  .cv-step-list .active b,
  .cv-step-list .done b,
  .cv-license-card input:checked {
    color: var(--mt-navy) !important;
    background: var(--mt-yellow) !important;
    border-color: var(--mt-yellow) !important;
  }

  /* ----------------------------------------------------------
     Acceso, perfiles, avisos y legales
     ---------------------------------------------------------- */
  .auth-section,
  .auth-panel,
  .auth-visual {
    background-color: var(--mt-surface) !important;
  }

  .auth-visual {
    background:
      radial-gradient(circle at 18% 12%, rgba(255, 201, 40, .13), transparent 22rem),
      linear-gradient(145deg, #071a31 0%, #0d315d 100%) !important;
  }

  .auth-visual h1,
  .auth-visual p,
  .auth-visual-copy,
  .auth-visual-copy h1 {
    color: #fff !important;
  }

  .admin-login-link {
    color: var(--mt-navy) !important;
  }

  .admin-login-link:hover {
    color: var(--mt-navy) !important;
    background: #fff8df !important;
  }

  .verify-banner {
    color: var(--mt-navy) !important;
    background: linear-gradient(135deg, #fff8dc, #fffdf4) !important;
    border-color: #f0d477 !important;
    box-shadow: 0 10px 26px rgba(7, 26, 49, .06) !important;
  }

  .verify-banner button {
    color: var(--mt-navy) !important;
    background: var(--mt-yellow) !important;
  }

  .flash,
  .flash-error,
  .flash-success,
  .flash-info {
    color: var(--mt-text) !important;
    background: #fff !important;
    border-left-color: var(--mt-navy) !important;
    box-shadow: 0 14px 34px rgba(7, 26, 49, .10) !important;
  }

  .flash-error { border-left-color: #b42318 !important; }
  .flash-success { border-left-color: #087a55 !important; }

  .legal-updated,
  .coming-label,
  .quota-note,
  .status-badge,
  .job-category,
  .featured-badge {
    color: var(--mt-navy) !important;
    background: #fff2b8 !important;
    border-color: rgba(255, 201, 40, .7) !important;
  }

  .legal-table th {
    color: var(--mt-navy) !important;
    background: #f2f6fa !important;
  }

  /* ----------------------------------------------------------
     Contacto
     ---------------------------------------------------------- */
  .contact-hero {
    background:
      radial-gradient(circle at 90% 12%, rgba(255, 201, 40, .10), transparent 24rem),
      linear-gradient(180deg, #f8fafc, #eef3f8) !important;
  }

  .contact-channel-icon {
    color: var(--mt-navy) !important;
    background: var(--mt-yellow) !important;
    box-shadow: 0 9px 20px rgba(7, 26, 49, .10) !important;
  }

  .contact-hero-blob,
  .home-intro-blob {
    background: radial-gradient(circle at 32% 28%, #fff9df 0%, #fff0a6 46%, #f3d55a 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 201, 40, .22) !important;
  }

  /* ----------------------------------------------------------
     Panel de empresa
     ---------------------------------------------------------- */
  .employer-top {
    background:
      radial-gradient(circle at 88% 0%, rgba(255, 201, 40, .13), transparent 24rem),
      linear-gradient(120deg, #071a31 0%, #0d315d 58%, #174b82 100%) !important;
  }

  .employer-workspace {
    background: var(--mt-surface) !important;
  }

  .employer-sidebar {
    color: #fff !important;
    background: linear-gradient(180deg, #071a31, #0a2547) !important;
    box-shadow: 0 18px 42px rgba(7, 26, 49, .15) !important;
  }

  .company-avatar,
  .profile-photo,
  .avatar-tile {
    color: var(--mt-navy) !important;
    background: linear-gradient(145deg, var(--mt-yellow), #f0b900) !important;
  }

  .employer-sidebar a {
    color: rgba(255, 255, 255, .78) !important;
  }

  .employer-sidebar a.active,
  .employer-sidebar a:hover {
    color: var(--mt-navy) !important;
    background: var(--mt-yellow) !important;
  }

  .employer-stats article {
    border-top-color: var(--mt-navy) !important;
  }

  .employer-stats article > i,
  .offer-icon,
  .candidate-person > span {
    color: var(--mt-navy) !important;
    background: #fff3bd !important;
  }

  .employer-panel-head > a,
  .employer-panel-head span,
  .billing-preview > div > span {
    color: #0b5cab !important;
  }

  .employer-offers .offer-edit:hover,
  .activity-item .activity-withdraw button:hover {
    color: var(--mt-navy) !important;
    background: var(--mt-yellow) !important;
  }

  /* ----------------------------------------------------------
     Mensajería y chat
     ---------------------------------------------------------- */
  .messages-page,
  .chat-page,
  .chat-section {
    background:
      radial-gradient(circle at 8% 4%, rgba(13, 49, 93, .055), transparent 28rem),
      linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%) !important;
  }

  .inbox-sidebar {
    border-right-color: var(--mt-border) !important;
  }

  .inbox-filter button,
  .inbox-empty > i,
  .chat-secure-pill {
    color: var(--mt-navy) !important;
    background: #fff3bd !important;
    border-color: #f1d77d !important;
  }

  .conversation-list > a {
    color: var(--mt-text) !important;
    border-top-color: #edf1f5 !important;
  }

  .conversation-list b {
    color: #0b5cab !important;
  }

  .inbox-welcome,
  .chat-app-header,
  .chat-app .chat-messages,
  .chat-shell .chat-messages {
    background:
      radial-gradient(circle at 90% 0%, rgba(255, 201, 40, .07), transparent 22rem),
      linear-gradient(180deg, #fff 0%, #f5f8fb 100%) !important;
  }

  .chat-app-header::after {
    border-color: rgba(13, 49, 93, .04) !important;
  }

  .inbox-welcome > div > i,
  .chat-empty i {
    color: var(--mt-navy) !important;
    background: var(--mt-yellow) !important;
    box-shadow: 0 14px 30px rgba(7, 26, 49, .12) !important;
  }

  .chat-back:hover,
  .emoji-toggle:hover,
  .emoji-toggle[aria-expanded="true"] {
    color: var(--mt-navy) !important;
    border-color: var(--mt-yellow) !important;
    background: var(--mt-yellow) !important;
  }

  .chat-messages .message.mine,
  .chat-messages .message.mine .message-bubble,
  .chat-messages .message.mine > div:not(.message-content) {
    color: #fff !important;
    border-color: var(--mt-navy) !important;
    background: linear-gradient(145deg, #174b82 0%, #071a31 100%) !important;
    box-shadow: 0 8px 20px rgba(7, 26, 49, .15) !important;
  }

  .quick-replies button,
  .emoji-toggle {
    color: var(--mt-navy) !important;
    background: #fff !important;
    border-color: #cfd8e3 !important;
    box-shadow: 0 5px 14px rgba(7, 26, 49, .055) !important;
  }

  .chat-app .notice-closed,
  .chat-shell .notice-closed {
    color: var(--mt-navy) !important;
    background: #fff8df !important;
    border-color: #f0d477 !important;
  }

  /* ----------------------------------------------------------
     Quiénes somos: conservar composición y unificar color
     ---------------------------------------------------------- */
  body.page-about .about-hero-shell {
    background:
      radial-gradient(circle at 92% 8%, rgba(255, 201, 40, .12), transparent 24rem),
      linear-gradient(135deg, #071a31 0%, #0d315d 100%) !important;
    box-shadow: 0 22px 54px rgba(7, 26, 49, .14) !important;
  }

  body.page-about .about-hero h1 em,
  body.page-about .about-hero .eyebrow {
    color: var(--mt-yellow) !important;
  }

  body.page-about .about-intro,
  body.page-about .about-sectors,
  body.page-about .about-how,
  body.page-about .about-closing {
    background: var(--mt-surface) !important;
  }

  body.page-about .about-sector-card,
  body.page-about .about-intro-media img,
  body.page-about .about-how-media img {
    box-shadow: 0 18px 42px rgba(7, 26, 49, .11) !important;
  }

  body.page-about .about-sector-card:hover {
    box-shadow: 0 22px 48px rgba(7, 26, 49, .15) !important;
  }

  body.page-about .about-step-num {
    color: var(--mt-navy) !important;
    background: var(--mt-yellow) !important;
  }

  body.page-about .about-steps li {
    border-color: var(--mt-border) !important;
    background: #fff !important;
  }

  body.page-about .about-intro-badge {
    color: var(--mt-navy) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 14px 30px rgba(7, 26, 49, .12) !important;
  }

  body.page-about .about-intro-badge i {
    color: var(--mt-navy) !important;
  }

  /* ----------------------------------------------------------
     Footer y cookies
     ---------------------------------------------------------- */
  .site-footer,
  .site-footer--minimal {
    color: rgba(255, 255, 255, .72) !important;
    background: linear-gradient(180deg, #071a31 0%, #041120 100%) !important;
    border-top: 1px solid rgba(255, 201, 40, .16) !important;
    box-shadow: none !important;
  }

  .site-footer a,
  .site-footer--minimal .footer-legal a,
  .site-footer--minimal .footer-email {
    color: rgba(255, 255, 255, .72) !important;
  }

  .site-footer a:hover,
  .site-footer--minimal .footer-legal a:hover,
  .site-footer--minimal .footer-email:hover {
    color: var(--mt-yellow) !important;
  }

  .sj-cookie-banner {
    color: var(--mt-text) !important;
    background: #fff !important;
    border-color: var(--mt-border) !important;
    box-shadow: 0 22px 56px rgba(7, 26, 49, .15) !important;
  }
}

@media (min-width: 901px) {
  /* Cobertura adicional de estilos históricos con colores rosados explícitos. */
  .page-hero .job-category,
  .button-ghost.is-saved {
    color: var(--mt-navy) !important;
    background: #fff3bd !important;
    border-color: rgba(255, 201, 40, .72) !important;
  }

  .cv-step-intro,
  .cv-upload-box,
  .avatar-upload-field,
  .billing-preview,
  .inbox-welcome {
    color: var(--mt-text) !important;
    background: linear-gradient(135deg, #fff 0%, #f4f7fa 100%) !important;
    border-color: var(--mt-border) !important;
    box-shadow: none !important;
  }

  .profile-meter-track {
    background: #e6ecf2 !important;
  }

  .profile-meter-track span {
    background: linear-gradient(90deg, var(--mt-navy), #174b82, var(--mt-yellow)) !important;
  }

  .company-logo {
    border-color: var(--mt-border) !important;
    box-shadow: 0 7px 16px rgba(7, 26, 49, .06) !important;
  }

  .status-badge.is-rejected {
    color: #667085 !important;
    background: #eef2f6 !important;
    border-color: #d8e0e9 !important;
  }

  .employer-offers > a {
    color: var(--mt-text) !important;
  }

  .employer-offers .offer-edit {
    color: #0b5cab !important;
    background: #eef4fa !important;
    border-left-color: var(--mt-border) !important;
  }

  .home-intro {
    background: linear-gradient(180deg, #fff 0%, #f5f8fb 100%) !important;
  }

  .home-intro h1 em,
  .home-intro-badge--bottom i {
    color: var(--mt-navy) !important;
  }

  .chat-safety,
  .chat-app > .safety-banner,
  .chat-shell > .safety-banner {
    color: var(--mt-navy) !important;
    background: linear-gradient(90deg, #fff8dc 0%, #fffdf4 100%) !important;
    border-color: #f0d477 !important;
  }

  .chat-app .chat-messages,
  .chat-shell .chat-messages {
    scrollbar-color: #9aa9b9 transparent !important;
  }

  .chat-app .chat-messages::-webkit-scrollbar-thumb,
  .chat-shell .chat-messages::-webkit-scrollbar-thumb {
    background: #9aa9b9 !important;
    background-clip: padding-box !important;
  }
}