/* ============================================
   MOBILE MESSAGES - INSTAGRAM DM STYLE
   Clean, simple, mobile-first messaging UI
   v20260821
   ============================================ */

@media (max-width: 1023px) {

  /* ============================================
     HIDE DESKTOP SIDEBAR
     ============================================ */

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

  .msg-layout {
    display: block !important;
  }

  .msg-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ============================================
     CLEAN MOBILE HEADER
     ============================================ */

  .msg-search-bar {
    padding: 16px 16px 12px !important;
    background: transparent !important;
    border: none !important;
    position: relative;
  }

  /* Messages title + New button */
  .msg-search-bar::before {
    content: 'Messages';
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    font-family: 'Orbitron', sans-serif;
  }

  /* New Message Button - Top Right */
  .msg-new-btn {
    position: fixed !important;
    top: 20px;
    right: 16px;
    z-index: 100;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0 !important; /* Hide text */
  }

  .msg-new-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #fff !important;
    stroke-width: 2.5 !important;
  }

  .msg-new-btn:active {
    transform: scale(0.92);
    background: rgba(255, 107, 26, 0.2) !important;
  }

  /* ============================================
     SIMPLE MOBILE SEARCH
     ============================================ */

  .msg-search-input-wrap {
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
  }

  .msg-search-icon {
    width: 18px !important;
    height: 18px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    flex-shrink: 0;
  }

  .msg-search-input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 15px !important;
    height: 100% !important;
    padding: 0 !important;
    outline: none !important;
  }

  .msg-search-input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
  }

  /* Hide filter icon - move to overflow menu */
  .msg-search-filter-icon {
    display: none !important;
  }

  /* ============================================
     SIMPLIFIED FILTER TABS
     ============================================ */

  .msg-toolbar {
    padding: 16px 16px 8px !important;
    background: transparent !important;
    border: none !important;
  }

  /* Hide "MESSAGES" title (we show it in header) */
  .msg-toolbar-title {
    display: none !important;
  }

  .msg-tabs {
    display: flex !important;
    gap: 4px !important;
    align-items: center;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  /* Show only All and Unread */
  .msg-tab {
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    transition: all 0.2s;
    display: flex !important;
    align-items: center;
    gap: 6px;
  }

  .msg-tab.is-active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  .msg-tab:active {
    transform: scale(0.95);
  }

  /* Hide Groups and Favorites on mobile (show only All/Unread) */
  .msg-tab[data-filter="groups"],
  .msg-tab[data-filter="favorites"] {
    display: none !important;
  }

  /* Add overflow menu button */
  .msg-tabs::after {
    content: '⋯';
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 4px;
  }

  /* Hide sort dropdown on mobile */
  .msg-sort {
    display: none !important;
  }

  /* ============================================
     CLEAN CONVERSATION LIST
     ============================================ */

  .msg-conv-list {
    padding: 0 !important;
    background: transparent !important;
  }

  /* Individual conversation row - Instagram style */
  .msg-conv-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 16px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background 0.15s;
    margin: 0 !important;
    min-height: 72px;
  }

  .msg-conv-item:active {
    background: rgba(255, 255, 255, 0.04) !important;
  }

  /* Separator between conversations */
  .msg-conv-item::after {
    content: '';
    position: absolute;
    left: 76px; /* Start after avatar */
    right: 16px;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
  }

  .msg-conv-item:last-child::after {
    display: none;
  }

  /* ============================================
     CIRCULAR AVATARS
     ============================================ */

  .msg-conv-avatar,
  .msg-notif-av {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 50% !important;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  /* Online indicator */
  .msg-conv-avatar-wrap {
    position: relative;
    flex-shrink: 0;
  }

  .msg-online-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #4ade80;
    border: 2px solid #0a0a10;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
  }

  /* ============================================
     CONVERSATION INFO
     ============================================ */

  .msg-conv-body {
    flex: 1 !important;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* Username/Name */
  .msg-conv-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Last message */
  .msg-conv-snippet {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Unread conversations - bolder */
  .msg-conv-item.msg-conv-unread .msg-conv-name {
    font-weight: 700 !important;
    color: #fff !important;
  }

  .msg-conv-item.msg-conv-unread .msg-conv-snippet {
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.75) !important;
  }

  /* ============================================
     RIGHT SIDE (Time + Badge)
     ============================================ */

  .msg-conv-meta {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
  }

  /* Timestamp */
  .msg-conv-time {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.35) !important;
    white-space: nowrap;
  }

  /* Unread badge */
  .msg-conv-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #ff6b1a !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hide badge when 0 */
  .msg-conv-badge:empty,
  .msg-conv-badge[data-count="0"] {
    display: none !important;
  }

  /* ============================================
     EMPTY STATE
     ============================================ */

  .msg-page-empty {
    padding: 80px 24px !important;
    text-align: center;
  }

  .msg-page-empty::before {
    content: 'No messages yet';
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
  }

  .msg-page-empty::after {
    content: 'Start a conversation with someone.';
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
  }

  /* ============================================
     CHAT VIEW (when conversation is open)
     ============================================ */

  .msg-content.in-chat {
    background: #0a0a10 !important;
  }

  /* Chat header */
  .msg-chat-header {
    padding: 12px 16px !important;
    background: rgba(10, 10, 15, 0.95) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  /* Back button */
  .msg-chat-back {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50%;
    background: transparent !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 !important;
    transition: background 0.15s;
  }

  .msg-chat-back:active {
    background: rgba(255, 255, 255, 0.08) !important;
  }

  .msg-chat-back svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
  }

  /* Chat avatar */
  .msg-chat-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    object-fit: cover;
    flex-shrink: 0;
  }

  /* Chat username */
  .msg-chat-user-name {
    flex: 1;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #fff !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Chat options button */
  .msg-chat-options {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    background: transparent !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 !important;
  }

  /* Message composer */
  .msg-compose-bar {
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    background: rgba(10, 10, 15, 0.95) !important;
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    position: sticky;
    bottom: 0;
    z-index: 100;
  }

  .msg-compose-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .msg-compose-input {
    flex: 1;
    min-height: 40px !important;
    max-height: 120px;
    padding: 10px 14px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    color: #fff !important;
    font-size: 15px !important;
    resize: none;
    outline: none;
  }

  .msg-compose-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
  }

  .msg-compose-send {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
    background: #ff6b1a !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
  }

  .msg-compose-send:active {
    transform: scale(0.9);
    background: #ff8533 !important;
  }

  .msg-compose-send svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
  }

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

  .msg-page-loading {
    padding: 60px 24px !important;
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.35);
  }

  /* ============================================
     MOBILE SAFE AREAS
     ============================================ */

  #view-messages {
    padding-bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom)) !important;
  }

  .msg-content {
    padding-bottom: 16px !important;
  }

  /* ============================================
     ACCESSIBILITY
     ============================================ */

  @media (prefers-reduced-motion: reduce) {
    .msg-conv-item,
    .msg-tab,
    .msg-new-btn,
    .msg-chat-back {
      transition: none !important;
    }
  }

  /* ============================================
     SMALL SCREENS
     ============================================ */

  @media (max-width: 375px) {
    .msg-search-bar {
      padding: 14px 14px 10px !important;
    }

    .msg-toolbar {
      padding: 12px 14px 6px !important;
    }

    .msg-conv-item {
      padding: 10px 14px !important;
      min-height: 68px;
    }

    .msg-conv-avatar,
    .msg-notif-av {
      width: 48px !important;
      height: 48px !important;
      min-width: 48px !important;
    }

    .msg-conv-item::after {
      left: 70px;
      right: 14px;
    }
  }

}

/* ============================================
   DESKTOP (≥1024px) - Keep existing layout
   ============================================ */

@media (min-width: 1024px) {
  /* Desktop keeps the existing Messages layout */
  /* No changes to desktop experience */
}
/* ============================================
   MESSAGES SEARCH FIELD FIX
   Proper spacing, sizing, and alignment
   v20260821
   ============================================ */

@media (max-width: 1023px) {

  /* Search Input Wrapper */
  .msg-search-input-wrap {
    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important; /* Comfortable height */
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 0 16px 0 12px !important; /* Less left padding for icon */
    display: flex !important;
    align-items: center;
    gap: 0 !important; /* Remove gap, use padding instead */
    margin: 0 !important;
    position: relative;
  }

  /* Search Icon - Positioned on Left */
  .msg-search-icon {
    width: 18px !important;
    height: 18px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    flex-shrink: 0;
    margin-right: 0 !important;
    position: relative;
    z-index: 2;
  }

  /* Search Input Field */
  .msg-search-input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 15px !important; /* Comfortable mobile size */
    font-weight: 400 !important; /* Normal weight */
    height: 100% !important;
    padding: 0 !important;
    padding-left: 12px !important; /* Space between icon and text */
    margin: 0 !important;
    outline: none !important;
    line-height: 1.5 !important;
  }

  /* Placeholder Styling - Subtle and Properly Sized */
  .msg-search-input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important; /* Subtle, not dark */
    font-size: 15px !important;
    font-weight: 400 !important; /* Normal weight */
    opacity: 1 !important;
  }

  .msg-search-input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }

  .msg-search-input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }

  .msg-search-input:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }

  /* Focus State */
  .msg-search-input:focus {
    color: #fff !important;
  }

  .msg-search-input:focus::placeholder {
    color: rgba(255, 255, 255, 0.25) !important;
  }

  /* Hide Filter Icon (moved to overflow menu) */
  .msg-search-filter-icon {
    display: none !important;
  }

  /* ============================================
     SMALL SCREENS (≤375px)
     ============================================ */

  @media (max-width: 375px) {
    .msg-search-input-wrap {
      height: 46px !important;
      padding: 0 14px 0 10px !important;
    }

    .msg-search-icon {
      width: 17px !important;
      height: 17px !important;
    }

    .msg-search-input {
      font-size: 14px !important;
      padding-left: 10px !important;
    }

    .msg-search-input::placeholder,
    .msg-search-input::-webkit-input-placeholder,
    .msg-search-input::-moz-placeholder,
    .msg-search-input:-ms-input-placeholder {
      font-size: 14px !important;
    }
  }

  /* ============================================
     LARGER SCREENS (≥390px)
     ============================================ */

  @media (min-width: 390px) and (max-width: 1023px) {
    .msg-search-input-wrap {
      height: 50px !important;
    }

    .msg-search-input {
      font-size: 16px !important;
      padding-left: 14px !important;
    }

    .msg-search-input::placeholder,
    .msg-search-input::-webkit-input-placeholder,
    .msg-search-input::-moz-placeholder,
    .msg-search-input:-ms-input-placeholder {
      font-size: 16px !important;
    }
  }

}
/* ============================================
   MESSAGES SEARCH BAR - STRUCTURE FIX
   ONE clean search field with no overlapping elements
   v20260821-v2
   ============================================ */

@media (max-width: 1023px) {

  /* ============================================
     SEARCH WRAPPER - The visible container
     This is what the user sees as the search field
     ============================================ */

  .msg-search-input-wrap {
    /* Full width */
    width: 100% !important;
    max-width: 100% !important;

    /* Comfortable height */
    height: 50px !important;

    /* Visual styling - wrapper controls all borders/background */
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;

    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    /* Padding for icon and text */
    padding: 0 16px !important;

    /* Reset */
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;

    /* Transition for focus state */
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  }

  /* Focus state - wrapper gets the orange border */
  .msg-search-input-wrap:focus-within {
    border-color: rgba(255, 107, 26, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 26, 0.15) !important;
  }

  /* ============================================
     SEARCH ICON - Inside wrapper, left side
     ============================================ */

  .msg-search-icon {
    /* Size */
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;

    /* Color */
    color: rgba(255, 255, 255, 0.4) !important;
    stroke: rgba(255, 255, 255, 0.4) !important;

    /* Position */
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    /* Space to the right of icon */
    margin-right: 12px !important;

    /* Ensure it's visible */
    position: relative !important;
    z-index: 1 !important;
  }

  /* ============================================
     SEARCH INPUT - Transparent, fills wrapper
     NO visible border or background
     ============================================ */

  .msg-search-input {
    /* Fill the remaining space */
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;

    /* CRITICAL: Remove ALL visible styling from input */
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    /* Text styling */
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;

    /* Reset padding and margin */
    padding: 0 !important;
    margin: 0 !important;

    /* Box model */
    box-sizing: border-box !important;

    /* Ensure it's aligned */
    display: block !important;

    /* No transform/position tricks */
    position: relative !important;
    transform: none !important;
  }

  /* Remove ALL focus styles from input itself */
  .msg-search-input:focus {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* ============================================
     PLACEHOLDER STYLING
     ============================================ */

  .msg-search-input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }

  .msg-search-input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }

  .msg-search-input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }

  .msg-search-input:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }

  /* Placeholder fades slightly on focus */
  .msg-search-input:focus::placeholder {
    color: rgba(255, 255, 255, 0.25) !important;
  }

  /* ============================================
     HIDE FILTER ICON
     ============================================ */

  .msg-search-filter-icon {
    display: none !important;
  }

  /* ============================================
     SMALL SCREENS (≤375px)
     ============================================ */

  @media (max-width: 375px) {
    .msg-search-input-wrap {
      height: 46px !important;
      padding: 0 14px !important;
    }

    .msg-search-icon {
      width: 17px !important;
      height: 17px !important;
      min-width: 17px !important;
      margin-right: 10px !important;
    }

    .msg-search-input {
      font-size: 14px !important;
    }

    .msg-search-input::placeholder,
    .msg-search-input::-webkit-input-placeholder,
    .msg-search-input::-moz-placeholder,
    .msg-search-input:-ms-input-placeholder {
      font-size: 14px !important;
    }
  }

  /* ============================================
     LARGER SCREENS (≥430px)
     ============================================ */

  @media (min-width: 430px) and (max-width: 1023px) {
    .msg-search-input-wrap {
      height: 52px !important;
    }

    .msg-search-icon {
      margin-right: 14px !important;
    }

    .msg-search-input {
      font-size: 16px !important;
    }

    .msg-search-input::placeholder,
    .msg-search-input::-webkit-input-placeholder,
    .msg-search-input::-moz-placeholder,
    .msg-search-input:-ms-input-placeholder {
      font-size: 16px !important;
    }
  }

}
/* ============================================
   MESSAGES SEARCH - ICON AS PLACEHOLDER
   Search icon is part of placeholder text
   Disappears when user types
   v20260821-v3
   ============================================ */

@media (max-width: 1023px) {

  /* ============================================
     HIDE SEPARATE ICON ELEMENT
     Icon is now part of placeholder text
     ============================================ */

  .msg-search-icon {
    display: none !important;
  }

  /* ============================================
     SEARCH WRAPPER - Clean container
     ============================================ */

  .msg-search-input-wrap {
    /* Full width */
    width: 100% !important;
    max-width: 100% !important;

    /* Comfortable height */
    height: 50px !important;

    /* Visual styling */
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;

    /* Layout */
    display: flex !important;
    align-items: center !important;

    /* Padding - symmetric since no icon element */
    padding: 0 16px !important;

    /* Reset */
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;

    /* Transition for focus state */
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  }

  /* Focus state - wrapper gets the orange border */
  .msg-search-input-wrap:focus-within {
    border-color: rgba(255, 107, 26, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 26, 0.15) !important;
  }

  /* ============================================
     SEARCH INPUT - Transparent, fills wrapper
     ============================================ */

  .msg-search-input {
    /* Fill the space */
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;

    /* Remove ALL visible styling from input */
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    /* Text styling */
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;

    /* No extra padding - icon is in placeholder */
    padding: 0 !important;
    margin: 0 !important;

    /* Box model */
    box-sizing: border-box !important;
    display: block !important;

    /* No transform/position tricks */
    position: relative !important;
    transform: none !important;
  }

  /* Remove ALL focus styles from input itself */
  .msg-search-input:focus {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* ============================================
     PLACEHOLDER WITH ICON
     Icon is part of placeholder text
     Disappears when typing (standard behavior)
     ============================================ */

  .msg-search-input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }

  .msg-search-input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }

  .msg-search-input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }

  .msg-search-input:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }

  /* Placeholder fades slightly on focus */
  .msg-search-input:focus::placeholder {
    color: rgba(255, 255, 255, 0.25) !important;
  }

  /* ============================================
     HIDE FILTER ICON
     ============================================ */

  .msg-search-filter-icon {
    display: none !important;
  }

  /* ============================================
     SMALL SCREENS (≤375px)
     ============================================ */

  @media (max-width: 375px) {
    .msg-search-input-wrap {
      height: 46px !important;
      padding: 0 14px !important;
    }

    .msg-search-input {
      font-size: 14px !important;
    }

    .msg-search-input::placeholder,
    .msg-search-input::-webkit-input-placeholder,
    .msg-search-input::-moz-placeholder,
    .msg-search-input:-ms-input-placeholder {
      font-size: 14px !important;
    }
  }

  /* ============================================
     LARGER SCREENS (≥430px)
     ============================================ */

  @media (min-width: 430px) and (max-width: 1023px) {
    .msg-search-input-wrap {
      height: 52px !important;
    }

    .msg-search-input {
      font-size: 16px !important;
    }

    .msg-search-input::placeholder,
    .msg-search-input::-webkit-input-placeholder,
    .msg-search-input::-moz-placeholder,
    .msg-search-input:-ms-input-placeholder {
      font-size: 16px !important;
    }
  }

}