* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #e5ddd5;
      height: 100vh;
      height: 100dvh;
      /* Dynamic viewport height for mobile */
      overflow: hidden;
    }

    #app {
      display: flex;
      height: 100vh;
      height: 100dvh;
      /* Dynamic viewport height for mobile */
      max-width: 1400px;
      margin: 0 auto;
      background: #fff;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      position: relative;
    }

    /* Sidebar */
    #sidebar {
      width: 35%;
      min-width: 300px;
      background: #fff;
      border-right: 1px solid #ddd;
      display: flex;
      flex-direction: column;
    }

    .safe-add-category button:hover {
      background: #e9edef;
    }

    .safe-search-container {
      margin-bottom: 15px;
    }

    .safe-search-container input {
      width: 100%;
      padding: 10px 15px;
      border: 1px solid #d1d7db;
      border-radius: 8px;
      font-size: 14px;
      outline: none;
    }

    .safe-search-container input:focus {
      border-color: #00a884;
    }

    .safe-item-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-bottom: 30px;
      flex-shrink: 0;
    }

    .safe-contact-card {
      padding: 10px 16px 10px 12px;
      border: 1px solid #eee;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      transition: box-shadow 0.2s;
      gap: 12px;
      overflow: visible;
    }

    .safe-contact-card:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .safe-contact-card>div {
      min-width: 0;
      flex: 1;
    }

    .safe-contact-card strong {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .safe-contact-actions {
      display: flex;
      gap: 6px;
      margin-right: 2px;
      flex-shrink: 0;
    }

    .safe-action-btn {
      background: #f0f2f5;
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      transition: all 0.2s;
    }

    .safe-action-btn:hover {
      background: #e9edef;
      transform: scale(1.1);
    }

    .safe-action-btn.invite {
      color: #00a884;
    }

    .safe-action-btn.call {
      color: #53bdeb;
    }

    .safe-action-btn.delete {
      color: #ea4335 !important;
    }

    .safe-action-btn.rename {
      color: #fbbc05 !important;
    }

    .safe-menu-item {
      display: flex;
      justify-content: flex-start !important;
      align-items: center;
      gap: 12px;
      padding: 12px 15px !important;
      transition: all 0.2s ease;
    }

    .safe-icon {
      width: 20px;
      height: 20px;
      stroke: #667781;
      stroke-width: 2px;
      flex-shrink: 0;
      transition: stroke 0.2s ease;
    }

    .safe-menu-item.active .safe-icon {
      stroke: #00a884;
    }

    .safe-menu-item:hover .safe-icon {
      stroke: #00a884;
    }

    .safe-cat-delete {
      opacity: 0;
      background: none;
      border: none;
      color: #999;
      cursor: pointer;
      font-size: 14px;
      padding: 5px;
      transition: all 0.2s;
    }

    .safe-menu-item:hover .safe-cat-delete {
      opacity: 1;
    }

    .safe-cat-delete:hover {
      color: #ea4335;
      transform: scale(1.2);
    }

    /* Safe UI Fixes */
    #safeModal {
      z-index: 1000000 !important;
    }

    #mediaViewer,
    #historyModal,
    #forwardModal,
    #forwardMethodModal,
    #inviteModal,
    #choiceModal,
    #userActionsModal,
    #settingsModal,
    #contactsModal,
    #mailModal,
    #groupModal,
    #profileModal,
    #diagnosticModal,
    #groupInfoModal,
    #addMemberModal,
    #incomingCallModal,
    #outgoingCallModal,
    #activeCallModal,
    #passwordModal,
    #readReceiptsModal {
      z-index: 2000000 !important;
    }

    /* Map Picker must be ABOVE everything else */
    #mapPickerModal {
      z-index: 9999999 !important;
    }

    .safe-header {
      background: #008069;
      color: #fff;
      padding: 12px 20px;
      padding-top: max(12px, env(safe-area-inset-top), 45px);
      /* Stronger protection for iPhone 15 Pro Max */
      display: flex;
      align-items: center;
      gap: 15px;
      border-radius: 12px 12px 0 0;
      flex-shrink: 0;
    }

    .safe-header-close {
      background: none !important;
      border: none !important;
      color: #fff !important;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px !important;
      margin-left: auto;
      transition: all 0.2s ease;
    }

    .safe-header-close:hover {
      background: rgba(255, 255, 255, 0.1) !important;
      border-radius: 50%;
      transform: scale(1.1);
    }

    .safe-header-close svg {
      width: 32px !important;
      height: 32px !important;
      stroke-width: 3.5px !important;
    }

    .safe-container {
      display: flex;
      flex: 1;
      min-height: 0;
      /* Chrome flex fix */
      overflow: hidden;
      background: #fff;
    }

    .safe-sidebar {
      width: 180px;
      background: #fcfcfc;
      border-right: 1px solid #eee;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      transition: width 0.3s;
      height: 100%;
      padding-bottom: env(safe-area-inset-bottom);
    }

    #safeMenuArea {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }

    @media (max-width: 600px) {
      .safe-sidebar {
        width: 75px;
        /* Increased from 60px */
        /* Mini sidebar on small screens */
      }

      .safe-menu-item {
        justify-content: center !important;
        padding: 10px 5px !important;
        font-size: 20px;
      }

      .safe-menu-item span {
        display: none;
        /* Hide text on small screens */
      }

      .safe-cat-delete {
        display: none;
      }

      #safeStorageInfo span,
      #safeUsageText,
      #safeUpgradeOffer {
        display: none;
      }

      #safeStorageInfo {
        padding: 5px !important;
      }

      .safe-content {
        padding: 15px 12px !important;
      }
    }

    .safe-content {
      flex: 1;
      padding: 20px 24px;
      padding-bottom: calc(90px + env(safe-area-inset-bottom));
      /* Extra bottom space for iOS */
      overflow-y: auto;
      background: #fff;
      min-height: 0;
      /* Chrome flex fix */
      -webkit-overflow-scrolling: touch;
      /* Safari smooth scroll */
      display: flex;
      flex-direction: column;
    }

    #mediaViewerContent img,
    #mediaViewerContent video {
      max-width: 100%;
      max-height: 80vh;
      border-radius: 8px;
    }

    /* Safe action buttons consolidated above */

    .btn-main {
      background: #00a884;
      color: #fff;
      border: none;
      padding: 10px 18px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      white-space: nowrap;
    }

    .btn-main:hover {
      background: #008a70;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .btn-main:active {
      transform: translateY(0);
    }

    .btn-premium {
      background: #00a884;
      color: #fff;
      border: none;
      padding: 12px 24px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 700;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      white-space: nowrap;
      box-shadow: 0 4px 12px rgba(0, 168, 132, 0.2);
    }

    .btn-premium:hover {
      background: #008a70;
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    }

    .btn-premium:active {
      transform: translateY(0);
    }

    /* Desktop (Wide Screens) */
    @media (min-width: 1025px) {
      #sidebar {
        width: 30%;
      }

      #mainChat {
        display: flex !important;
      }
    }

    #sidebarHeader {
      background: linear-gradient(135deg, #008069, #00a884);
      color: #fff;
      padding: 12px 15px;
      padding-top: max(15px, 65px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 100;
    }

    .premium-header-btn {
      background: rgba(255, 255, 255, 0.1) !important;
      border: 1px solid rgba(255, 255, 255, 0.15) !important;
      color: #fff !important;
      width: 60px !important;
      height: 60px !important;
      border-radius: 18px !important;
      font-size: 28px !important;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      padding: 0 !important;
    }

    .premium-header-btn svg {
      width: 38px;
      height: 38px;
      stroke-width: 2px !important;
    }

    .header-action-btn {
      background: rgba(0, 168, 132, 0.1) !important;
      border: none !important;
      color: #00a884 !important;
      width: 44px !important;
      height: 44px !important;
      border-radius: 50% !important;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      padding: 0 !important;
    }

    .header-action-btn:hover {
      background: rgba(0, 168, 132, 0.2) !important;
      transform: scale(1.05);
    }

    .header-action-btn svg {
      width: 24px;
      height: 24px;
    }

    .premium-header-btn:hover {
      background: rgba(255, 255, 255, 0.2) !important;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .premium-header-btn:active {
      transform: translateY(0);
    }

    #userName {
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* v527.45: XL Lively Signal Animation (Redesigned) */
    .connection-status-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      /* XL size */
      height: 44px;
      /* XL size */
      background: rgba(255, 255, 255, 0.95);
      border-radius: 50%;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      color: #999;
      transition: all 0.3s ease;
      cursor: help;
      margin-left: 10px;
      flex-shrink: 0;
      position: relative;
    }

    .connection-status-icon.online {
      color: #00a884;
      background: #fff;
      box-shadow: 0 0 15px rgba(0, 168, 132, 0.4);
    }

    /* Wave animations for 6 segments (3 pairs) */
    .connection-status-icon .wave {
      opacity: 0;
      transform-origin: bottom center;
    }

    .connection-status-icon.online .wave,
    .connection-status-icon.connecting .wave {
      animation: signalWaveRadiate 2.5s infinite;
    }

    .connection-status-icon .wave-1 {
      animation-delay: 0s;
    }

    .connection-status-icon .wave-2 {
      animation-delay: 0.5s;
    }

    .connection-status-icon .wave-3 {
      animation-delay: 1s;
    }

    /* Connecting state: intense pulsing */
    .connection-status-icon.connecting {
      color: #ffc107;
      background: #fff;
      box-shadow: 0 0 15px rgba(255, 193, 7, 0.4);
    }

    .connection-status-icon.connecting .wave {
      animation: signalWaveRadiate 1.2s infinite ease-in-out;
    }

    .connection-status-icon.offline {
      color: #ea4335;
      background: #fff;
    }

    .connection-status-icon svg {
      width: 32px;
      /* XL SVG */
      height: 32px;
      z-index: 2;
    }

    @keyframes signalWaveRadiate {
      0% {
        opacity: 0;
        transform: scale(0.8);
      }

      30% {
        opacity: 1;
        transform: scale(1);
      }

      100% {
        opacity: 0;
        transform: scale(1.4);
      }
    }

    @keyframes connectionPulse {
      0% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      }

      50% {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
      }

      100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      }
    }

    /* Flexible Buttons for small screens - WRAP to ensure visibility */
    .header-buttons {
      display: flex;
      gap: 5px;
      align-items: center;
      flex-shrink: 0;
    }

    /* Hide scrollbar logic as we are wrapping now */
    .header-buttons::-webkit-scrollbar {
      display: none;
    }

    .header-buttons button {
      background: none;
      border: none;
      color: #fff;
      cursor: pointer;
      font-size: 14px;
      padding: 6px 8px;
      white-space: nowrap;
    }

    /* Dropdown Menu Styles */
    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      right: 0;
      background-color: #fff;
      min-width: 180px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 3000000 !important;
      /* Ensure menu is above everything, including Safe */
      border-radius: 8px;
      overflow: hidden;
      margin-top: 8px;
      border: 1px solid #ddd;
    }

    .dropdown-content button {
      color: #3b4a54 !important;
      padding: 12px 16px !important;
      text-decoration: none;
      display: block;
      width: 100%;
      text-align: left;
      border: none;
      background: none;
      font-size: 14px !important;
      cursor: pointer;
      border-bottom: 1px solid #f0f2f5;
    }

    .dropdown-content button:last-child {
      border-bottom: none;
    }

    .dropdown-content button:hover {
      background-color: #f5f5f5;
    }

    .dropdown-content.show {
      display: block;
    }



    /* Performance Optimizations */
    .chat-item {
      will-change: transform, opacity;
      contain: content;
    }

    #sidebar {
      will-change: transform;
    }

    #chatList {
      content-visibility: auto;
      contain-intrinsic-size: 1px 1000px;
    }

    /* Mobile (Portrait) - One Pane Logic */
    @media (max-width: 768px) {
      #app {
        box-shadow: none;
      }

      #sidebar {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
      }

      #mainChat {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        display: none;
      }

      #mainChat.active {
        display: flex;
        z-index: 5;
        /* Ensure above sidebar */
      }

      /* RESTORE BACK BUTTON */
      #backBtn {
        display: block !important;
        margin-right: 10px;
      }

      #typingIndicator {
        font-size: 13px;
        color: #00a884;
        /* WhatsApp green */
        font-weight: 500;
        animation: typingBlink 1.5s infinite;
      }

      @keyframes typingBlink {
        0% {
          opacity: 1;
        }

        50% {
          opacity: 0.5;
        }

        100% {
          opacity: 1;
        }
      }

      /* Clean up buttons on mobile */
      .btn-text {
        display: none;
      }

      /* Ensure sidebar buttons are clickable by managing z-index when chat NOT active */
      #sidebar:not(.hidden) {
        z-index: 6;
        /* Higher than inactive chat */
      }

      #chatActions button {
        padding: 6px 10px !important;
        font-size: 14px !important;
      }

      #chatInfo {
        min-width: 0;
      }

      /* Call Modal Buttons Mobile Optimization */
      #activeCallModal .modal-content button {
        padding: 10px 15px !important;
        font-size: 16px !important;
        min-width: 50px;
      }

      /* Sidebar Header - Back to simple and clean */
      #sidebarHeader {
        padding: 75px 15px 10px 15px !important;
        gap: 10px !important;
      }

      #userName {
        font-size: 16px !important;
        flex: 1 !important;
        min-width: 0 !important;
      }

      .header-buttons {
        gap: 8px !important;
        flex-shrink: 0 !important;
      }

      #sidebarMenuBtn,
      #contactsBtn,
      #mailHeaderBtn,
      #safeHeaderBtn {
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important;
        padding: 0 !important;
      }

      /* Chat Header & Input Optimizations */
      #chatHeader {
        padding: 40px 12px 8px 12px !important;
      }

      #chatActions button.header-action-btn {
        width: 40px !important;
        height: 40px !important;
      }

      #chatActions button.header-action-btn svg {
        width: 20px !important;
        height: 20px !important;
      }

      #inputRow {
        padding: 8px 10px !important;
        gap: 8px !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border-radius: 25px 25px 0 0 !important;
        bottom: 30px !important;
        width: 100% !important;
      }

      .chat-input-btn {
        width: 44px !important;
        height: 44px !important;
      }

      .chat-input-btn svg {
        width: 22px !important;
        height: 22px !important;
      }

      #textInput {
        padding: 10px 15px !important;
        font-size: 14px !important;
      }

      /* Wider message bubbles on mobile */
      .message-bubble {
        max-width: 85% !important;
      }

      /* Wrap message actions to prevent horizontal scroll */
      .message-meta {
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        gap: 4px 8px !important;
      }

      .message-meta span {
        white-space: nowrap;
      }

      #messages {
        padding-bottom: 80px !important;
        /* Ensure last message is visible above input */
      }
    }

    /* Auth */
    #authPanel {
      padding: 20px;
      background: #f0f2f5;
      border-bottom: 1px solid #ddd;
    }

    #authPanel input {
      width: 100%;
      padding: 10px;
      margin: 5px 0;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
    }

    #authPanel button {
      width: 100%;
      padding: 10px;
      margin: 5px 0;
      background: #00a884;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    /* Chat List */
    #chatList {
      flex: 1;
      overflow-y: auto;
      background: #fff;
    }

    .chat-item {
      padding: 15px;
      border-bottom: 1px solid #f0f0f0;
      cursor: pointer;
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .chat-item:hover {
      background: #f5f5f5;
    }

    .chat-item.active {
      background: #ebebeb;
    }

    /* CSS rule removed: filtering is now done in JS */

    .chat-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #00a884;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: bold;
      position: relative;
    }

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

    .online-indicator.offline {
      background: #8696a0;
    }

    .chat-info {
      flex: 1;
    }

    .chat-name {
      font-weight: 600;
      font-size: 16px;
    }

    .chat-last {
      font-size: 13px;
      color: #667781;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Mini contact actions (More Menu) */
    .contact-more-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 50%;
      transition: background 0.2s;
      font-size: 20px;
      color: #667781;
      flex-shrink: 0;
      margin-left: 5px;
    }

    .contact-more-btn:hover {
      background: rgba(0, 0, 0, 0.05);
      color: #00a884;
    }

    /* Contact Context Menu */
    .contact-context-menu {
      position: fixed;
      background: #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      border-radius: 8px;
      padding: 5px 0;
      z-index: 10000;
      min-width: 150px;
      border: 1px solid #eee;
    }

    .contact-menu-item {
      padding: 10px 15px;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: background 0.2s;
    }

    .contact-menu-item:hover {
      background: #f5f5f5;
    }

    .contact-menu-item.delete {
      color: #d32f2f;
    }

    .unread-badge {
      background: #25d366;
      color: #fff;
      border-radius: 12px;
      padding: 2px 8px;
      font-size: 12px;
      font-weight: bold;
      min-width: 20px;
      text-align: center;
      margin-right: 5px;
      /* Spacing for 'before' position */
    }

    /* Contact Actions */
    .contact-actions {
      display: flex;
      gap: 8px;
      margin-left: 8px;
      opacity: 0;
      transition: opacity 0.2s;
    }

    .chat-item:hover .contact-actions {
      opacity: 1;
    }

    .contact-actions button {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 16px;
      padding: 4px;
      border-radius: 4px;
      transition: background 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .contact-actions button:hover {
      background: rgba(0, 0, 0, 0.05);
    }

    .contact-delete-btn:hover {
      background: #ffebee !important;
    }

    /* Main Chat */
    #mainChat {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: #efeae2;
    }

    #chatHeader {
      background: #f0f2f5;
      padding: 4px 10px;
      padding-top: 40px;
      border-bottom: 1px solid #ddd;
      display: flex;
      align-items: center;
      gap: 10px;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    #backBtn {
      display: none;
      background: none;
      border: none;
      font-size: 24px;
      color: #667781;
      cursor: pointer;
      padding: 8px;
    }

    #chatAvatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #00a884;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      position: relative;
    }

    #chatInfo {
      flex: 1;
    }

    #chatName {
      font-weight: 600;
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #chatStatus {
      font-size: 13px;
      color: #667781;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #typingIndicator {
      font-size: 13px;
      color: #00a884;
      font-style: italic;
      display: none;
    }

    @keyframes typingDots {

      0%,
      20% {
        content: '.';
      }

      40% {
        content: '..';
      }

      60%,
      100% {
        content: '...';
      }
    }

    #typingIndicator::after {
      content: '...';
      animation: typingDots 1.5s infinite;
    }

    /* Messages */
    #messages {
      flex: 1;
      overflow-y: auto;
      padding: 15px;
      /* v527.71: more compact */
      padding-bottom: 80px;
      background: #efeae2;
    }

    .message {
      display: flex;
      margin-bottom: 8px;
    }

    .message.received {
      justify-content: flex-start;
    }

    .message.sent {
      justify-content: flex-end;
    }

    .message-bubble {
      max-width: 65%;
      padding: 8px 12px;
      border-radius: 8px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .message.received .message-bubble {
      background: #fff;
    }

    .message.sent .message-bubble {
      background: #d9fdd3;
    }

    .message-text {
      font-size: 14px;
      line-height: 1.4;
      word-wrap: break-word;
    }

    .message-meta {
      display: flex;
      gap: 5px;
      justify-content: flex-end;
      margin-top: 4px;
      font-size: 11px;
      color: #667781;
    }

    .message-sender {
      font-weight: 600;
      font-size: 13px;
      color: #00a884;
      margin-bottom: 4px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .message-sender:hover {
      text-decoration: underline;
    }

    .read-status {
      margin-left: 4px;
      color: #8696a0;
      font-size: 14px;
      font-weight: bold;
      letter-spacing: -1px;
    }

    .read-status.delivered {
      color: #8696a0;
      /* Gray double tick */
    }

    .read-status.read {
      color: #53bdeb;
      /* Blue double tick */
    }

    #emptyState {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: #667781;
    }

    /* Input */
    #inputRow {
      background: rgba(255, 255, 255, 0.9) !important;
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      border-top: 1px solid rgba(255, 255, 255, 0.3);
      padding: 10px 15px !important;
      gap: 10px !important;
      margin: 0 !important;
      display: flex;
      align-items: center;
      position: sticky;
      bottom: 40px !important;
      z-index: 10;
      border-radius: 30px 30px 0 0 !important;
      box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.05);
      width: 100% !important;
    }

    .chat-input-btn {
      width: 48px;
      height: 48px;
      border-radius: 50% !important;
      background: #f0f2f5 !important;
      /* Neutral background by default */
      color: #54656f !important;
      /* Standard dark gray icon color */
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      padding: 0 !important;
      border: none;
      cursor: pointer;
      flex-shrink: 0;
    }

    .chat-input-btn svg {
      width: 24px;
      height: 24px;
      stroke-width: 2.2px;
    }

    .chat-input-btn:active {
      transform: scale(0.9);
    }

    .chat-input-btn:disabled {
      background: #ccc !important;
      opacity: 0.6;
      cursor: not-allowed;
    }

    /* Pulse animation for recording and highlights */
    @keyframes pulse-red {
      0% {
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
      }

      70% {
        box-shadow: 0 0 0 12px rgba(255, 59, 48, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
      }
    }

    .pulse-red {
      animation: pulse-red 1.5s infinite;
      background: #ff3b30 !important;
    }

    #negotiateBtn {
      color: #54656f !important;
    }

    .blue-send {
      background: #0084ff !important;
      /* Standard messenger blue */
      color: #fff !important;
      box-shadow: 0 4px 10px rgba(0, 132, 255, 0.3);
    }

    .blue-send svg {
      transform: translateX(1px);
      /* Optical alignment for arrow */
      stroke: #fff !important;
    }

    #recordBtn:not(:disabled) {
      color: #54656f !important;
    }

    #textInput {
      flex: 1;
      padding: 12px 20px;
      border: 1px solid #e0e0e0;
      border-radius: 25px;
      background: #f8f9fa;
      color: #000;
      font-size: 15px;
      outline: none;
      transition: all 0.3s ease;
    }

    #textInput:focus {
      border-color: #00a884;
    }

    #textInput::placeholder {
      color: #8696a0;
    }

    /* Recording UI */
    #recordingUI {
      display: none;
      flex: 1;
      align-items: center;
      gap: 15px;
      padding: 0 10px;
    }

    #recordTimer {
      color: #54656f;
      font-size: 16px;
      font-variant-numeric: tabular-nums;
      display: flex;
      align-items: center;
      gap: 8px;
    }

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

    @keyframes pulse {
      0% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.5;
        transform: scale(1.2);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    #cancelRecordBtn {
      color: #ff3b30 !important;
    }

    .deleteBtn:hover {
      color: #00a884 !important;
    }

    /* Reply Styling */
    .reply-quote {
      background: rgba(0, 0, 0, 0.05);
      border-left: 4px solid #00a884;
      padding: 5px 10px;
      margin-bottom: 5px;
      border-radius: 4px;
      font-size: 13px;
      color: #555;
    }

    /* Premium Location Message Styling v528.06.5 */
    .message-location {
      margin-bottom: 5px;
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      max-width: 400px;
      transition: transform 0.2s ease;
    }

    .message-location:hover {
      transform: translateY(-2px);
    }

    .message-location-map {
      display: block;
      position: relative;
      width: 100%;
      height: 180px;
      background: #f0f2f5;
    }

    .message-location-map img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .message-location-info {
      padding: 12px 16px;
      background: #fff;
    }

    .message-location-title {
      font-size: 15px;
      font-weight: 700;
      color: #00a884;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .message-location-address {
      font-size: 13px;
      color: #3b4a54;
      line-height: 1.5;
      margin-bottom: 12px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .message-location-coords {
      font-size: 11px;
      color: #8696a0;
      font-family: monospace;
      margin-bottom: 12px;
    }

    .message-location-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .message-location-btn {
      flex: 1;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      color: #fff;
      transition: opacity 0.2s;
      min-width: 110px;
    }

    .message-location-btn:hover {
      opacity: 0.9;
    }

    .btn-yandex {
      background: #fc3f1d;
    }

    .btn-google {
      background: #4285f4;
    }

    .live-badge {
      display: inline-flex;
      align-items: center;
      background: #25d366;
      color: #fff;
      font-size: 9px;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      animation: pulse-live 2s infinite;
    }

    @keyframes pulse-live {
      0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
      }

      70% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
      }
    }

    .reply-preview {
      display: none;
      background: #f0f2f5;
      border-top: 1px solid #ddd;
      padding: 10px 15px;
      position: relative;
      animation: slideUp 0.3s ease;
    }

    .reply-preview.active {
      display: block;
    }

    @keyframes slideUp {
      from {
        transform: translateY(100%);
        opacity: 0;
      }

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

    @keyframes callPulse {

      0%,
      100% {
        transform: scale(1);
        opacity: 1;
      }

      50% {
        transform: scale(1.1);
        opacity: 0.8;
      }
    }

    #sendRecordBtn {
      color: #00a884 !important;
    }

    /* Settings Modal */
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      align-items: center;
      justify-content: center;
    }

    .modal.show,
    .modal.active {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      background: rgba(0, 0, 0, 0.8) !important;
      pointer-events: auto !important;
    }

    .modal-content {
      background: #fff;
      border-radius: 12px;
      padding: 12px;
      max-width: 400px;
      width: 85%;
      max-height: 85vh;
      overflow-y: auto;
    }

    .modal-content h3 {
      margin-bottom: 8px;
      font-size: 16px;
      text-align: center;
    }

    /* Force smaller inputs/buttons inside modals (override inline styles) */
    .modal-content input[type="text"],
    .modal-content input[type="tel"],
    .modal-content input[type="password"],
    .modal-content input[type="number"] {
      padding: 8px !important;
      font-size: 14px !important;
      margin: 4px 0 !important;
    }

    .modal-content button {
      padding: 8px !important;
      /* Smaller buttons */
      font-size: 14px !important;
      margin-top: 5px !important;
    }

    .modal-content label {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 0;
    }

    .modal-close {
      background: #00a884;
      color: #fff;
      border: none;
      padding: 12px;
      border-radius: 8px;
      cursor: pointer;
      margin-top: 16px;
      width: 100%;
    }

    /* System Messages */
    .message.system-message {
      display: flex;
      justify-content: center;
      margin: 10px 0;
      width: 100%;
    }

    .message.system-message .message-bubble {
      background: rgba(0, 0, 0, 0.05);
      color: #666;
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 13px;
      text-align: center;
      border: 1px dashed #ccc;
      max-width: 90%;
      box-shadow: none;
    }

    .message.system-message .message-meta {
      display: none;
    }

    /* Sidebar Bottom Navigation v517 */
    #sidebarBottomNav {
      display: none;
      /* Hidden by default (shown only when logged in) */
      height: 150px;
      /* Extra high to lift icons significantly */
      background: #f0f2f5;
      border-top: 1px solid #d1d7db;
      flex-shrink: 0;
      padding-bottom: 70px;
      /* Strong lift for icons as requested */
    }

    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #54656f;
      transition: all 0.2s;
      position: relative;
      gap: 4px;
    }

    .nav-item span {
      font-size: 11px;
      font-weight: 500;
    }

    .nav-item:hover {
      background: rgba(0, 0, 0, 0.03);
    }

    .nav-item.active {
      color: #00a884;
    }

    .nav-item.active::after {
      content: '';
      position: absolute;
      top: 0;
      left: 15%;
      right: 15%;
      height: 3px;
      background: #00a884;
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
    }

    /* v527.33: Matched Call Buttons to Microphone Style */
    #chatActions {
      gap: 18px !important;
      /* Larger gap as requested */
    }

    .header-action-btn {
      width: 48px;
      height: 48px;
      border-radius: 50% !important;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none !important;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: none;
      /* Flat style like the microphone button */
      background: #f0f2f5 !important;
      /* Grey background matching message input buttons */
      color: #54656f !important;
      /* Standard dark grey icon color */
    }

    .header-action-btn svg {
      width: 24px;
      height: 24px;
      stroke-width: 2.2px;
    }

    .header-action-btn:hover {
      background: #e1e4e7 !important;
      transform: scale(1.05);
    }

    .header-action-btn:active {
      transform: scale(0.95);
      background: #d1d7db !important;
    }

    /* Override previous specific colors for uniform grey look */
    #callBtn,
    #videoCallBtn {
      background: #f0f2f5 !important;
      color: #54656f !important;
    }

    /* Invite Button to match the same style */
    #inviteBtn {
      background: #f0f2f5 !important;
      border: none !important;
      border-radius: 24px !important;
      padding: 0 16px !important;
      height: 48px !important;
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      color: #00a884 !important;
      font-weight: 600 !important;
      font-size: 15px !important;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    #inviteBtn:hover {
      background: #e1e4e7 !important;
    }

    /* Mobile adjustments for header buttons */
    @media (max-width: 480px) {
      #chatActions {
        gap: 10px !important;
      }

      .header-action-btn {
        width: 40px;
        height: 40px;
      }

      #inviteBtn {
        height: 40px !important;
        padding: 0 12px !important;
      }

      #inviteBtn .btn-text {
        display: none;
        /* Hide text on mobile to save space */
      }
    }

    .nav-icon-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .nav-badge {
      position: absolute;
      top: -6px;
      right: -8px;
      background: #ff3b30;
      color: white;
      font-size: 10px;
      font-weight: bold;
      padding: 2px 6px;
      border-radius: 10px;
      min-width: 18px;
      text-align: center;
      display: none;
      /* Hidden if 0 */
      border: 2px solid #f0f2f5;
    }

    .contact-actions-container {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
      flex-shrink: 0;
    }

    @media (max-width: 400px) {
      .contact-actions-container {
        gap: 2px;
      }

      .contact-action-btn {
        width: 32px;
        height: 32px;
      }

      .contact-action-btn svg {
        width: 18px;
        height: 18px;
      }
    }

    .contact-action-btn {
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 50%;
      transition: all 0.2s;
      color: #667781;
      position: relative;
      flex-shrink: 0;
    }

    .contact-action-btn:hover {
      background: rgba(0, 168, 132, 0.1);
      color: #00a884;
    }

    .contact-action-btn svg {
      width: 20px;
      height: 20px;
    }

    .action-badge {
      position: absolute;
      top: -10px;
      right: -10px;
      background: #ff3b30;
      color: white;
      font-size: 11px;
      font-weight: bold;
      padding: 3px 6px;
      border-radius: 12px;
      min-width: 20px;
      text-align: center;
      border: 2px solid #fff;
      z-index: 100;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      animation: badge-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    @keyframes badge-pop {
      0% {
        transform: scale(0);
      }

      100% {
        transform: scale(1);
      }
    }

    /* Adjust chat-item for actions */
    .chat-item {
      display: flex;
      align-items: center;
      padding: 10px 12px;
      gap: 12px;
    }

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

    #chatList {
      flex: 1;
      overflow-y: auto;
    }

    /* Call History Icons */
    .call-missed {
      color: #ff3b30;
      font-weight: bold;
    }

    .call-incoming {
      color: #25d366;
      font-weight: bold;
    }

    .call-outgoing {
      color: #00a884;
      font-weight: bold;
    }

    /* Performance Optimizations */
    .chat-item {
      will-change: transform, opacity;
      contain: content;
    }

    #sidebar {
      will-change: transform;
    }

    #chatList {
      content-visibility: auto;
      contain-intrinsic-size: 1px 1000px;
    }

    /* Mail Autocomplete */
    .mail-autocomplete-item:hover {
      background-color: #f7f9fa !important;
    }

    .mail-autocomplete-item strong {
      color: #00a884;
    }

    .mail-autocomplete-item:last-child {
      border-bottom: none !important;
    }

    /* Animations for menu items */
    @keyframes menuScale {
      from {
        transform: scale(0.95);
        opacity: 0;
      }

      to {
        transform: scale(1);
        opacity: 1;
      }
    }

    /* Live location pulse animation */
    @keyframes pulse {
      0% {
        opacity: 1;
      }

      50% {
        opacity: 0.5;
      }

      100% {
        opacity: 1;
      }
    }

    /* Attach Menu Popup Styles */
    #attachMenuPopup {
      animation: attachMenuSlideUp 0.2s ease-out;
    }

    .modal.show,
    .modal.active {
      display: flex !important;
    }

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

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

    .attach-menu-item:hover {
      background: #f0f2f5 !important;
    }

    .attach-menu-item:disabled {
      opacity: 0.4;
      cursor: not-allowed !important;
    }

    #attachMenuWrapper {
      display: flex;
      align-items: center;
    }

    /* v528.06.10: Premium System Message (Toast) */
    .system-toast-container {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(-150px);
      z-index: 1000000;
      width: 90%;
      max-width: 400px;
      transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
      pointer-events: none;
    }

    .system-toast-container.active {
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
    }

    .system-toast {
      background: rgba(255, 255, 255, 0.82);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 24px;
      padding: 24px;
      box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: relative;
      overflow: hidden;
    }

    .system-toast::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 5px;
      height: 100%;
      background: linear-gradient(180deg, #00a884 0%, #00d2ad 100%);
    }

    .system-toast-header {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #008069;
      font-weight: 800;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
    }

    .system-toast-body {
      color: #2c3e50;
      font-size: 15px;
      line-height: 1.6;
      font-weight: 500;
    }

    .system-toast-footer {
      display: flex;
      justify-content: center;
      margin-top: 10px;
    }

    .system-toast-btn {
      background: #00a884;
      color: #fff;
      border: none;
      padding: 12px 32px;
      border-radius: 14px;
      font-weight: 700;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 8px 20px rgba(0, 168, 132, 0.25);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .system-toast-btn:hover {
      background: #008069;
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(0, 168, 132, 0.35);
    }

    .system-toast-btn:active {
      transform: translateY(0);
    }