/*
 * V31 TARGETED BUGFIX — only the six requested fixes.
 * IMPORTANT: bottom navigation/menu is intentionally NOT touched here.
 */

/* 1) Search outer area follows the chat canvas surface in both themes.
   The search input itself keeps its existing visual treatment. */
.search-box-area{
  background:var(--bg-main) !important;
  color:var(--text-main) !important;
  border-bottom-color:var(--border-color) !important;
}
:root[data-theme="dark"] .search-box-area,
body[data-theme="dark"] .search-box-area{
  background:var(--bg-main) !important;
  color:var(--text-main) !important;
}
:root[data-theme="light"] .search-box-area,
body[data-theme="light"] .search-box-area{
  background:var(--bg-main) !important;
  color:var(--text-main) !important;
}

/* 2 + 3) Contact/group list: flat messenger rows, with a single
   notebook-style divider beginning after the avatar area. */
@media (max-width:767px){
  .sidebar-menu #roomList > .room-item,
  .sidebar-menu #recentContactList > .room-item,
  .sidebar-menu #contactList > .room-item{
    margin:0 !important;
    border-radius:0 !important;
    border:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    position:relative !important;
  }

  .sidebar-menu #roomList > .room-item::after,
  .sidebar-menu #recentContactList > .room-item::after,
  .sidebar-menu #contactList > .room-item::after{
    content:"" !important;
    position:absolute !important;
    left:64px !important;
    right:10px !important;
    bottom:0 !important;
    height:1px !important;
    background:rgba(15,23,42,.10) !important;
    pointer-events:none !important;
  }

  :root[data-theme="dark"] .sidebar-menu #roomList > .room-item::after,
  :root[data-theme="dark"] .sidebar-menu #recentContactList > .room-item::after,
  :root[data-theme="dark"] .sidebar-menu #contactList > .room-item::after,
  body[data-theme="dark"] .sidebar-menu #roomList > .room-item::after,
  body[data-theme="dark"] .sidebar-menu #recentContactList > .room-item::after,
  body[data-theme="dark"] .sidebar-menu #contactList > .room-item::after{
    background:rgba(255,255,255,.12) !important;
  }

  .sidebar-menu #roomList > .room-item:hover,
  .sidebar-menu #recentContactList > .room-item:hover,
  .sidebar-menu #contactList > .room-item:hover{
    background:var(--hover-bg) !important;
  }

  .sidebar-menu #roomList > .room-item.active,
  .sidebar-menu #recentContactList > .room-item.active,
  .sidebar-menu #contactList > .room-item.active{
    background:var(--active-bg) !important;
    border-radius:8px !important;
  }
}

/* 4) Admin message table: keep long message content on one compact line. */
#messagesPane .admin-message-content-cell{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:0 !important;
}
#messagesPane .admin-message-content-cell > *{
  max-width:100% !important;
}

/* 5) Mobile admin actions: fit every existing action button instead of
   forcing the table to desktop width. */
@media (max-width:767px){
  body.admin-open #messagesPane .admin-table{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
  }

  body.admin-open #messagesPane .admin-table th,
  body.admin-open #messagesPane .admin-table td{
    padding:7px 3px !important;
    overflow:hidden !important;
    vertical-align:middle !important;
  }

  body.admin-open #messagesPane .admin-table th:nth-child(1),
  body.admin-open #messagesPane .admin-table td:nth-child(1){width:15% !important;}
  body.admin-open #messagesPane .admin-table th:nth-child(2),
  body.admin-open #messagesPane .admin-table td:nth-child(2){width:25% !important;}
  body.admin-open #messagesPane .admin-table th:nth-child(3),
  body.admin-open #messagesPane .admin-table td:nth-child(3){width:18% !important;}
  body.admin-open #messagesPane .admin-table th:nth-child(4),
  body.admin-open #messagesPane .admin-table td:nth-child(4){width:10% !important;}
  body.admin-open #messagesPane .admin-table th:nth-child(5),
  body.admin-open #messagesPane .admin-table td:nth-child(5){width:32% !important;}

  body.admin-open #messagesPane .admin-message-actions{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:2px !important;
    width:100% !important;
    min-width:0 !important;
    white-space:nowrap !important;
  }

  body.admin-open #messagesPane .admin-action-button{
    flex:0 0 23px !important;
    width:23px !important;
    min-width:23px !important;
    height:23px !important;
    min-height:23px !important;
    padding:0 !important;
    border-radius:6px !important;
    font-size:0 !important;
  }

  body.admin-open #messagesPane .admin-action-button::before{
    width:12px !important;
    height:12px !important;
  }

  body.admin-open #messagesPane .admin-action-forward{
    font-size:13px !important;
    line-height:1 !important;
  }
}

/* 6) Composer readability: dark mode must never use a dark input font.
   Light mode remains dark; dark mode remains bright. */
:root[data-theme="light"] .chat-input,
body[data-theme="light"] .chat-input{
  color:#111b21 !important;
  -webkit-text-fill-color:#111b21 !important;
  caret-color:var(--primary,#25D366) !important;
}
:root[data-theme="dark"] .chat-input,
body[data-theme="dark"] .chat-input{
  color:#e9edef !important;
  -webkit-text-fill-color:#e9edef !important;
  caret-color:var(--primary,#25D366) !important;
}
:root[data-theme="light"] .chat-input::placeholder,
body[data-theme="light"] .chat-input::placeholder{
  color:#667781 !important;
  opacity:1 !important;
}
:root[data-theme="dark"] .chat-input::placeholder,
body[data-theme="dark"] .chat-input::placeholder{
  color:#8696a0 !important;
  opacity:1 !important;
}

/* @all / employee mention colors. This only changes the already-existing
   mention presentation; no message-routing behavior is changed. */
.mention-suggestion-item.mention-all-item strong,
.mention-suggestion-item.mention-all-item small,
.message-mention-all{
  color:#ef4444 !important;
  font-weight:700 !important;
}
.mention-suggestion-item:not(.mention-all-item) strong,
.mention-suggestion-item:not(.mention-all-item) small,
.message-mention-person{
  color:var(--primary,#25D366) !important;
  font-weight:600 !important;
}

:root[data-theme="dark"] .mention-suggestion-item:not(.mention-all-item) strong,
:root[data-theme="dark"] .mention-suggestion-item:not(.mention-all-item) small,
body[data-theme="dark"] .mention-suggestion-item:not(.mention-all-item) strong,
body[data-theme="dark"] .mention-suggestion-item:not(.mention-all-item) small{
  color:#4ade80 !important;
}