/* THE MAIN COLLAB WORKSPACE */
    body.workspace-active #site-header,
    body.workspace-active #site-footer {
      display: none !important;
    }
    body.workspace-active .page-main {
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    .sociax-workspace {
      display: none;
      grid-template-columns: var(--sidebar-width, 280px) 1fr var(--right-panel-width, 0px);
      height: 100vh;
      width: 100vw;
      background: var(--surface);
      border: none;
      border-radius: 0;
      overflow: hidden;
      margin-bottom: 0;
      box-shadow: none;
    }

    /* COLLAPSED SIDEBAR OVERRIDES */
    .sociax-sidebar.collapsed .sociax-logo-header span,
    .sociax-sidebar.collapsed .user-profile-bar .user-name,
    .sociax-sidebar.collapsed .user-profile-bar .btn-logout,
    .sociax-sidebar.collapsed .sidebar-panels-container {
      display: none !important;
    }
    .sociax-sidebar.collapsed .sociax-logo-header {
      padding: 15px 0 !important;
      justify-content: center !important;
    }
    .sociax-sidebar.collapsed #btnToggleSidebar {
      margin-left: 0 !important;
    }
    .sociax-sidebar.collapsed #btnToggleSidebar svg {
      transform: rotate(180deg);
    }
    .sociax-sidebar.collapsed .user-profile-bar {
      padding: 0 0 15px !important;
      justify-content: center !important;
    }
    .sociax-sidebar.collapsed .sidebar-nav-menu {
      flex-direction: column !important;
      gap: 12px !important;
      padding: 10px 0 !important;
      align-items: center !important;
    }

    html[data-theme="dark"] .sociax-workspace {
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
      background: #121416;
      border-color: #2a2e32;
    }

    /* SIDEBAR */
    .sociax-sidebar {
      background: var(--bg-soft);
      border-right: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      padding: 20px 0;
      overflow-y: auto;
    }

    html[data-theme="dark"] .sociax-sidebar {
      background: #181a1d;
      border-color: #2a2e32;
    }

    .user-profile-bar {
      padding: 0 20px 15px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;
    }

    html[data-theme="dark"] .user-profile-bar {
      border-color: #2a2e32;
    }

    .profile-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .btn-logout {
      font-size: 0.75rem;
      color: #e71d36;
      font-weight: 700;
      cursor: pointer;
    }

    .search-box {
      padding: 0 20px 15px;
      display: flex;
      gap: 8px;
    }

    .contacts-section {
      padding: 10px 20px;
      flex-grow: 1;
    }

    .contacts-list {
      list-style: none;
      padding: 0;
      margin: 10px 0 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .contact-btn {
      width: 100%;
      padding: 8px 10px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      text-align: left;
      transition: background 0.15s;
    }

    .contact-btn:hover {
      background: rgba(0,0,0,0.03);
    }

    html[data-theme="dark"] .contact-btn:hover {
      background: rgba(255,255,255,0.03);
    }

    .contact-btn.active {
      background: rgba(0,0,0,0.05);
      font-weight: 700;
    }

    html[data-theme="dark"] .contact-btn.active {
      background: rgba(255,255,255,0.06);
    }

    /* VIEWPORT */
    .sociax-viewport {
      display: flex;
      flex-direction: column;
      height: 100%;
      position: relative;
    }

    .sociax-header {
      padding: 18px 24px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    html[data-theme="dark"] .sociax-header {
      border-color: #2a2e32;
    }

    .header-actions {
      display: flex;
      gap: 12px;
    }

    /* CHAT PANEL */
    .sociax-chat-messages {
      flex-grow: 1;
      overflow-y: auto;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      background: var(--surface);
    }

    html[data-theme="dark"] .sociax-chat-messages {
      background: #121416;
    }

    .msg-img {
      max-width: 200px;
      border-radius: 8px;
      margin-top: 8px;
      display: block;
      cursor: zoom-in;
    }

    /* MISSING LAYOUT & PREMIUM BUBBLE CSS */
    .section-title {
      font-size: 0.72rem;
      text-transform: uppercase;
      font-weight: 800;
      letter-spacing: 0.08em;
      color: var(--muted);
      margin-bottom: 12px;
      padding-left: 10px;
    }

    .user-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.85rem;
      flex-shrink: 0;
      user-select: none;
    }

    .chat-msg-input-bar {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .chat-msg {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      max-width: 75%;
      animation: fadeInMsg 0.25s ease-out;
    }

    @keyframes fadeInMsg {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .chat-msg.self {
      flex-direction: row-reverse;
      align-self: flex-end;
    }

    .msg-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.9rem;
      flex-shrink: 0;
      user-select: none;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    .msg-bubble {
      padding: 10px 14px;
      border-radius: 4px 16px 16px 16px;
      background: var(--bg-soft);
      color: var(--text);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      font-size: 0.9rem;
      line-height: 1.45;
      word-break: break-word;
      border: 1px solid var(--line);
    }

    html[data-theme="dark"] .msg-bubble {
      background: #141923;
      border-color: #2a2e32;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .chat-msg.self .msg-bubble {
      border-radius: 16px 4px 16px 16px;
      background: var(--sociax-accent);
      color: #ffffff;
      border-color: var(--sociax-accent);
      box-shadow: 0 4px 12px rgba(var(--sociax-accent-rgb), 0.2);
    }

    .msg-meta {
      display: flex;
      gap: 8px;
      align-items: baseline;
      font-size: 0.72rem;
      margin-bottom: 4px;
    }

    .msg-meta strong {
      font-weight: 700;
      color: var(--text);
    }

    .msg-meta span {
      color: var(--muted);
      font-size: 0.68rem;
    }

    .chat-msg.self .msg-meta strong {
      color: #ffffff;
    }

    .chat-msg.self .msg-meta span {
      color: rgba(255, 255, 255, 0.75);
    }

    /* TABS & PANELS STYLING */
    .sidebar-panel {
      display: none;
      flex-direction: column;
      height: 100%;
    }
    .sidebar-panel.active {
      display: flex;
    }
    .nav-menu-btn:hover {
      background: rgba(0,0,0,0.05);
      color: var(--text) !important;
    }
    html[data-theme="dark"] .nav-menu-btn:hover {
      background: rgba(255,255,255,0.05);
    }
    .nav-menu-btn.active {
      color: var(--sociax-accent) !important;
    }

    /* STATUS MARKERS */
    .status-badge {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 4px;
      flex-shrink: 0;
    }
    .status-badge.online { background-color: #23a55a; }
    .status-badge.busy { background-color: #e71d36; }
    .status-badge.dnd { background-color: #ff9f1c; position: relative; }
    .status-badge.dnd::after {
      content: "";
      position: absolute;
      left: 2px;
      top: 3px;
      width: 4px;
      height: 2px;
      background: #fff;
    }
    .status-badge.offline { background-color: #999; }

    /* AGENDA ITEMS */
    .agenda-event-card {
      background: var(--bg-soft);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      position: relative;
    }
    html[data-theme="dark"] .agenda-event-card {
      background: #141923;
      border-color: #2a2e32;
    }
    .btn-delete-event {
      position: absolute;
      top: 8px;
      right: 8px;
      background: none;
      border: none;
      color: #e71d36;
      cursor: pointer;
      font-size: 1rem;
      font-weight: 700;
    }

    /* CONTACTS TAB NAV */
    .contact-tab-btn {
      background: none;
      border: none;
      color: var(--muted);
      cursor: pointer;
      transition: all 0.2s;
    }
    .contact-tab-btn.active {
      color: var(--text) !important;
      border-bottom: 2px solid var(--sociax-accent);
    }

    /* PREMIUM GOLD OVERRIDES */
    body.premium-active {
      --accent: #ffd700;
      --accent-contrast: #000000;
    }
    body.premium-active .btn-primary {
      background: #ffd700 !important;
      color: #000000 !important;
      border-color: #ffd700 !important;
      box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3) !important;
    }
    body.premium-active .btn-primary:hover {
      background: #ffe347 !important;
    }
    body.premium-active .nav-menu-btn.active {
      color: #ffd700 !important;
    }
    body.premium-active .contact-tab-btn.active {
      border-bottom-color: #ffd700 !important;
    }
    body.premium-active .chat-msg.self .msg-bubble {
      background: #ffd700 !important;
      color: #000000 !important;
      border-color: #d4af37 !important;
      box-shadow: 0 4px 12px rgba(255, 215, 0, 0.25) !important;
    }
    body.premium-active .chat-msg.self .msg-meta strong {
      color: #000000 !important;
    }
    body.premium-active .chat-msg.self .msg-meta span {
      color: rgba(0, 0, 0, 0.6) !important;
    }

    /* PREMIUM BADGE */
    .premium-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #ffd700 0%, #ffae00 100%);
      color: #000;
      font-size: 0.62rem;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 4px;
      margin-left: 6px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      box-shadow: 0 2px 4px rgba(255, 174, 0, 0.3);
      user-select: none;
    }

    /* CROWN KING ICON */
    .crown-icon {
      color: #ffd700;
      font-size: 0.9rem;
      margin-left: 4px;
      display: inline-block;
      vertical-align: middle;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
    }

    /* ADMIN & MODERATION BADGES */
    .admin-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #ff4d4d 0%, #cc0000 100%);
      color: #fff;
      font-size: 0.62rem;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 4px;
      margin-left: 6px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      box-shadow: 0 2px 4px rgba(204, 0, 0, 0.3);
      user-select: none;
    }
    .muted-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #ff9f1c;
      color: #fff;
      font-size: 0.58rem;
      font-weight: 800;
      padding: 1px 4px;
      border-radius: 3px;
      margin-left: 4px;
      text-transform: uppercase;
    }
    .banned-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #777;
      color: #fff;
      font-size: 0.58rem;
      font-weight: 800;
      padding: 1px 4px;
      border-radius: 3px;
      margin-left: 4px;
      text-transform: uppercase;
    }

    /* REPLIES PREVIEW */
    .reply-preview-bar {
      display: none;
      align-items: center;
      justify-content: space-between;
      background: var(--bg-soft);
      border-top: 1px solid var(--line);
      padding: 8px 16px;
      font-size: 0.78rem;
      color: var(--text);
    }
    .reply-preview-content {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 80%;
      opacity: 0.8;
    }
    .reply-preview-cancel {
      cursor: pointer;
      color: #e71d36;
      font-weight: 700;
      font-size: 1rem;
      border: none;
      background: none;
    }

    /* QUOTED REPLY IN CHAT */
    .chat-msg-reply-ref {
      font-size: 0.72rem;
      background: rgba(0, 0, 0, 0.05);
      border-left: 2px solid var(--line);
      padding: 4px 8px;
      margin-bottom: 6px;
      border-radius: 4px;
      color: var(--muted);
      cursor: pointer;
      user-select: none;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    html[data-theme="dark"] .chat-msg-reply-ref {
      background: rgba(255, 255, 255, 0.05);
    }

    /* MESSAGE HOVER ACTIONS CONTROLLER */
    .chat-msg {
      position: relative;
    }
    .chat-msg-actions {
      display: none;
      position: absolute;
      top: -15px;
      right: 15px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      z-index: 10;
      padding: 2px;
      gap: 2px;
      align-items: center;
    }
    .chat-msg:hover .chat-msg-actions {
      display: flex;
    }
    .chat-msg-btn {
      background: none;
      border: none;
      font-size: 0.85rem;
      padding: 4px 6px;
      cursor: pointer;
      color: var(--muted);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .chat-msg-btn:hover {
      background: var(--bg-soft);
      color: var(--text);
    }

    /* REACTIONS CONTAINER BELOW BUBBLE */
    .msg-reactions-list {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 6px;
    }
    .msg-reaction-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: var(--bg-soft);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 2px 8px;
      font-size: 0.72rem;
      cursor: pointer;
      user-select: none;
    }
    .msg-reaction-badge:hover {
      border-color: var(--sociax-accent);
    }
    .msg-reaction-badge.active {
      background: rgba(var(--sociax-accent-rgb), 0.1);
      border-color: var(--sociax-accent);
    }

    /* EMOJI PICKER POPOVER */
    .emoji-popover {
      display: none;
      position: absolute;
      top: -45px;
      right: 30px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.12);
      padding: 6px;
      gap: 6px;
      z-index: 100;
    }
    .emoji-option {
      font-size: 1.15rem;
      cursor: pointer;
      user-select: none;
      padding: 2px;
      border-radius: 4px;
      transition: transform 0.1s ease;
    }
    .emoji-option:hover {
      transform: scale(1.25);
    }

    .sociax-pinned-friends {
      border-bottom: 1px solid var(--line);
      padding-bottom: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .sociax-pinned-row,
    .sociax-profile-card {
      background: rgba(255,255,255,0.72);
      border: 1px solid var(--line);
      border-radius: 16px;
    }
    html[data-theme="dark"] .sociax-pinned-row,
    html[data-theme="dark"] .sociax-profile-card {
      background: rgba(255,255,255,0.045);
    }
    .sociax-pinned-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px;
      cursor: pointer;
      transition: background .2s ease, transform .2s ease;
    }
    .sociax-pinned-row:hover,
    .sociax-pinned-row.active {
      background: rgba(var(--sociax-accent-rgb),.12);
      transform: translateX(2px);
    }
    .sociax-sidebar.collapsed .sociax-pinned-meta,
    .sociax-sidebar.collapsed .sociax-section-label,
    .sociax-sidebar.collapsed .group-create-bar,
    .sociax-sidebar.collapsed .search-box,
    .sociax-sidebar.collapsed .contacts-nav-tabs {
      display: none !important;
    }
    .sociax-sidebar.collapsed .sidebar-panel {
      padding-left: 8px !important;
      padding-right: 8px !important;
    }
    .sociax-badge-list {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
    }
    .sociax-profile-card {
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-height: 100%;
    }
    .sociax-profile-avatar {
      width: 88px;
      height: 88px;
      border-radius: 999px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.25rem;
      font-weight: 900;
      color: #fff;
      background: var(--sociax-accent-gradient);
      border: 1px solid var(--line);
    }
    .sociax-frame-mode {
      position: fixed !important;
      left: calc(var(--sidebar-width, 280px) + 24px) !important;
      right: 24px !important;
      top: 92px !important;
      bottom: 24px !important;
      width: auto !important;
      max-width: none !important;
      max-height: none !important;
      transform: none !important;
      border-radius: 22px !important;
      z-index: 260 !important;
    }
    .sociax-call-toast {
      position: fixed;
      left: 50%;
      top: 90px;
      transform: translateX(-50%);
      z-index: 500;
      padding: 12px 18px;
      border-radius: 999px;
      color: #fff;
      background: #111827;
      box-shadow: 0 12px 32px rgba(0,0,0,.2);
      display: none;
      font-weight: 800;
      font-size: .9rem;
    }
    .sociax-feedback-options {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .sociax-feedback-option {
      border: 1px solid var(--line);
      background: var(--bg-soft);
      color: var(--text);
      border-radius: 16px;
      padding: 12px 8px;
      font-size: 1.6rem;
      cursor: pointer;
      transition: border-color .2s ease, transform .2s ease;
    }
    .sociax-feedback-option span {
      display: block;
      margin-top: 6px;
      font-size: .72rem;
      font-weight: 800;
    }
    .sociax-feedback-option.active {
      border-color: var(--sociax-accent);
      transform: translateY(-2px);
    }

    /* MUTE NOTICE BAR */
    .chat-mute-notice {
      display: none;
      background: #ff9f1c;
      color: #fff;
      text-align: center;
      padding: 10px;
      font-weight: 700;
      font-size: 0.85rem;
      border-top: 1px solid var(--line);
    }

    /* Dedicated Views for Sidebar Items */
    .viewport-view {
      font-family: 'Inter', sans-serif;
      box-sizing: border-box;
      height: calc(100vh - 60px);
      max-height: calc(100vh - 60px);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      animation: viewFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #chatViewWrapper {
      animation: viewFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes viewFadeIn {
      from {
        opacity: 0;
        transform: translateY(6px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .viewport-view::-webkit-scrollbar {
      width: 8px;
    }
    .viewport-view::-webkit-scrollbar-track {
      background: #2b2d31;
    }
    .viewport-view::-webkit-scrollbar-thumb {
      background: #1a1b1e;
      border-radius: 4px;
    }

    /* Mobile Menu Button */
    .btn-mobile-menu {
      display: none;
      background: none;
      border: none;
      color: var(--text);
      cursor: pointer;
      padding: 8px;
      margin-right: 12px;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      transition: background 0.2s;
    }
    .btn-mobile-menu:hover {
      background: var(--bg-soft);
    }
    html[data-theme="dark"] .btn-mobile-menu:hover {
      background: rgba(255, 255, 255, 0.05);
    }

    /* Mobile Sidebar Backdrop */
    .mobile-sidebar-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(2px);
      z-index: 999;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    /* Close button on private profile card */
    .btn-close-profile {
      display: none;
      background: none;
      border: none;
      color: var(--text);
      font-size: 1.4rem;
      font-weight: 700;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      transition: background 0.2s;
    }
    .btn-close-profile:hover {
      background: rgba(0,0,0,0.05);
    }
    html[data-theme="dark"] .btn-close-profile:hover {
      background: rgba(255, 255, 255, 0.05);
    }

    /* Media query for tablet and mobile devices */
    @media (max-width: 768px) {
      .btn-mobile-menu {
        display: flex !important;
      }
      .btn-close-profile {
        display: flex;
        position: absolute;
        top: 10px;
        right: 10px;
      }
      
      .sociax-workspace {
        grid-template-columns: 1fr !important;
        position: relative;
      }

      .sociax-sidebar {
        position: absolute !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        height: 100%;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        box-shadow: 4px 0 15px rgba(0,0,0,0.15);
      }

      .sociax-workspace.mobile-sidebar-active .sociax-sidebar {
        transform: translateX(0) !important;
      }

      .sociax-workspace.mobile-sidebar-active .mobile-sidebar-backdrop {
        display: block;
        opacity: 1;
      }

      /* Sliding profile panel overlay on mobile */
      #privateProfilePanel {
        position: absolute !important;
        top: 0;
        right: 0;
        bottom: 0;
        width: 280px !important;
        height: 100%;
        z-index: 998;
        box-shadow: -4px 0 15px rgba(0,0,0,0.15);
        border-left: 1px solid var(--line) !important;
      }

      /* Adjust viewport title size and overflow */
      .viewport-title {
        font-size: 1.1rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* Adjust viewport padding and forms */
      .viewport-view {
        padding: 15px !important;
      }

      /* WebRTC controls layout on mobile */
      .call-controls-bar {
        gap: 10px;
        padding: 0 10px;
      }
      .btn-call-action {
        width: 42px;
        height: 42px;
      }
      
      /* Chat layout tweaks */
      .sociax-chat-messages {
        padding: 15px;
      }
      .chat-msg {
        max-width: 90%;
      }
      .chat-msg-input-bar {
        padding: 10px 15px !important;
      }

      /* Responsive local video box resize */
      .local-video-box {
        bottom: 10px;
        right: 10px;
        width: 100px;
        height: 75px;
      }
      .local-video-box .placeholder-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
      }
      .local-video-box .placeholder-name {
        font-size: 0.6rem;
      }
    }

    .sociax-relation-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-top: 2px;
    }
    .sociax-relation-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--text);
      background: var(--bg-soft);
      font-size: .72rem;
      font-weight: 800;
      padding: 5px 9px;
      cursor: help;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .sociax-relation-pill:hover {
      transform: scale(1.04);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    .sociax-relation-icon {
      width: 14px;
      height: 14px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }
    .sociax-relation-icon path,
    .sociax-relation-icon circle {
      vector-effect: non-scaling-stroke;
    }
    .sociax-relation-pill.friend {
      color: #087f5b;
      border-color: rgba(var(--sociax-accent-rgb), .42);
      background: rgba(var(--sociax-accent-rgb), .12);
    }
    .sociax-relation-pill.pending,
    .sociax-relation-pill.incoming {
      color: #b7791f;
      border-color: rgba(255, 159, 28, .42);
      background: rgba(255, 159, 28, .12);
    }
    .sociax-relation-pill.blocked {
      color: #c92a2a;
      border-color: rgba(231, 29, 54, .42);
      background: rgba(231, 29, 54, .12);
    }
    html[data-theme="dark"] .sociax-relation-pill.friend {
      color: #69db7c;
    }
    html[data-theme="dark"] .sociax-relation-pill.pending,
    html[data-theme="dark"] .sociax-relation-pill.incoming {
      color: #ffd43b;
    }
    html[data-theme="dark"] .sociax-relation-pill.blocked {
      color: #ff8787;
    }
    .sociax-group-member {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 8px;
      background: rgba(255,255,255,.04);
    }
    .sociax-crown {
      color: #ffd700;
      cursor: help;
      font-size: 1rem;
      line-height: 1;
    }


    /* SOCIAX LOGO, UNREAD, BOT & FILE POLISH */
    .sociax-logo-header img,
    .sociax-hero img[src*="sociax-logo"] {
      background: #ffffff;
      padding: 2px;
      box-shadow: 0 10px 24px rgba(37, 99, 235, .16);
    }
    .sociax-unread-badge {
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #e71d36;
      color: #fff;
      font-size: .72rem;
      font-weight: 950;
      box-shadow: 0 6px 16px rgba(231, 29, 54, .28);
      flex-shrink: 0;
    }
    .chat-msg.bot .msg-bubble {
      border-color: rgba(var(--sociax-accent-rgb), .32);
      background: linear-gradient(135deg, rgba(var(--sociax-accent-rgb), .18), rgba(37, 99, 235, .08));
    }
    html[data-theme="dark"] .chat-msg.bot .msg-bubble {
      background: linear-gradient(135deg, rgba(var(--sociax-accent-rgb), .14), rgba(37, 99, 235, .08));
    }
    .msg-avatar-img.bot-logo {
      background: #fff;
      padding: 2px;
      box-shadow: 0 8px 18px rgba(37,99,235,.18);
    }
    .sociax-bot-chip {
      display: inline-flex;
      align-items: center;
      padding: 2px 6px;
      border-radius: 999px;
      background: rgba(var(--sociax-accent-rgb),.16);
      color: #0f766e;
      font-size: .62rem;
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .msg-delivery-status {
      margin-top: 6px;
      text-align: right;
      color: rgba(255,255,255,.72);
      font-size: .68rem;
      font-weight: 800;
    }
    html[data-theme="dark"] .chat-msg:not(.self) .msg-delivery-status,
    .chat-msg:not(.self) .msg-delivery-status {
      color: var(--muted);
    }
    .badge-icon {
      cursor: default !important;
    }
    input[type="file"] {
      border: 1px dashed rgba(var(--sociax-accent-rgb),.45) !important;
      background: linear-gradient(135deg, rgba(var(--sociax-accent-rgb),.08), rgba(37,99,235,.04)) !important;
      color: var(--muted) !important;
      cursor: pointer !important;
      padding: 12px !important;
    }
    input[type="file"]::file-selector-button {
      border: 0;
      border-radius: 999px;
      padding: 8px 12px;
      margin-right: 10px;
      background: var(--sociax-accent);
      color: #fff;
      font-weight: 900;
      cursor: pointer;
      transition: transform .2s ease, background .2s ease;
    }
    input[type="file"]::file-selector-button:hover {
      background: var(--sociax-accent-hover);
      transform: translateY(-1px);
    }

    .badge-tip {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 4px;
      vertical-align: middle;
      cursor: help;
    }
    .badge-tip::after {
      content: attr(data-tip);
      position: absolute;
      left: 50%;
      bottom: calc(100% + 8px);
      transform: translateX(-50%) translateY(4px);
      opacity: 0;
      pointer-events: none;
      white-space: nowrap;
      padding: 6px 9px;
      border-radius: 999px;
      background: rgba(8, 11, 14, .95);
      color: #fff;
      font-size: .68rem;
      font-weight: 800;
      box-shadow: 0 10px 25px rgba(0,0,0,.22);
      z-index: 50;
      transition: opacity .16s ease, transform .16s ease;
    }
    .badge-tip:hover::after {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    .badge-tip .badge-icon {
      display: block;
      margin-left: 0 !important;
      cursor: default !important;
    }

    input[type="file"].sociax-file-field,
    input[type="file"].discord-input,
    input[type="file"].sociax-field {
      color: var(--text) !important;
      line-height: 1.25;
      min-height: 50px;
    }
    input[type="file"].sociax-file-field::file-selector-button {
      border: 0;
      border-radius: 999px;
      background: var(--sociax-accent);
      color: #fff;
      font-weight: 900;
      padding: 9px 14px;
      margin-right: 12px;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(var(--sociax-accent-rgb),.22);
    }




/* Sociax fixes: visible theme toggle, annual Premium offer, stable avatars */
.sociax-theme-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  height: 32px;
  padding: 0 10px !important;
  border-radius: 8px !important;
  white-space: nowrap;
}

.sociax-cert-codes-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.sociax-cert-codes-card strong {
  display: block;
  color: var(--text);
  font-size: .9rem;
}

.sociax-cert-codes-card span {
  display: block;
  color: var(--muted);
  font-size: .78rem;
}

.sociax-cert-codes-card code {
  display: block;
  padding: 9px 10px;
  border-radius: 7px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 800;
  letter-spacing: .04em;
}

.msg-avatar {
  background: var(--sociax-accent-gradient);
  color: var(--accent-contrast);
}

.chat-msg.self .msg-avatar {
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--line);
}

#btnTogglePremium {
  border: 1px solid #ffd700 !important;
  background: #ffd700 !important;
  color: #000 !important;
  border-radius: 999px !important;
  padding: 7px 12px !important;
  text-decoration: none !important;
  font-weight: 800 !important;
}

@media (max-width: 768px) {
  .sociax-theme-toggle #themeToggleLabel {
    display: none;
  }
}