/* V37.2 TARGETED — PC/TABLET CHAT POLISH ONLY
 * Scope: visual alignment of the existing chat scroll surface, desktop/tablet
 * sidebar search surface, and existing 3 composer tools.
 * NO JS, Firebase, message loading, authentication, navigation or data logic.
 * MOBILE <=767px is intentionally untouched.
 */

@media (min-width:768px){
  /* 1) Make the message scroller visually tighter and better aligned with
        the actual chat column. Keep the existing flex/scroll behavior. */
  .chat-main .chat-window{
    padding:12px 12px 10px 14px !important;
    scrollbar-width:thin !important;
    scrollbar-color:rgba(100,116,139,.34) transparent !important;
  }
  .chat-main .chat-window::-webkit-scrollbar{
    width:3px !important;
    height:3px !important;
  }
  .chat-main .chat-window::-webkit-scrollbar-track{
    background:transparent !important;
  }
  .chat-main .chat-window::-webkit-scrollbar-thumb{
    background:rgba(100,116,139,.34) !important;
    border-radius:999px !important;
  }

  /* Keep the message column comfortable after tightening the scroll surface. */
  .chat-main .chat-window .msg-row{
    max-width:82% !important;
  }

  /* 2) PC/tablet sidebar search: remove the extra CSS-drawn search glyph.
        The input itself remains fully functional and keeps its current size. */
  .sidebar-menu .search-box-area::before,
  .sidebar-menu .search-box-area::after{
    content:none !important;
    display:none !important;
  }
  .sidebar-menu .search-box-area .search-input,
  .sidebar-menu .search-box-area #searchInput{
    padding-left:12px !important;
  }

  /* 3) Existing 3 composer tools: modern compact controls, visually matching
        the mobile icon language. Click handlers and file inputs are untouched. */
  .chat-main .chat-input-zone .zalo-toolbar{
    gap:7px !important;
    padding:6px 12px !important;
    border-bottom:0 !important;
  }
  .chat-main .chat-input-zone .z-tool-icon{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    border:0 !important;
    border-radius:50% !important;
    background:transparent !important;
    color:var(--text-sub) !important;
    transition:background .15s ease,color .15s ease,transform .15s ease !important;
  }
  .chat-main .chat-input-zone .z-tool-icon:hover{
    background:color-mix(in srgb,var(--active-bg,#25D366) 10%,transparent) !important;
    color:var(--active-bg,#25D366) !important;
    transform:translateY(-1px) !important;
  }
  .chat-main .chat-input-zone .z-tool-icon:active{
    transform:scale(.95) !important;
  }
  .chat-main .chat-input-zone .z-tool-icon svg{
    width:22px !important;
    height:22px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }

  .chat-main .chat-input-zone .zalo-input-area{
    gap:8px !important;
    padding:7px 12px 9px !important;
    align-items:center !important;
  }
  .chat-main .chat-input-zone .zalo-input-box{
    min-height:42px !important;
    border-radius:22px !important;
    padding:3px 13px !important;
    border:1px solid color-mix(in srgb,var(--border-color) 82%,var(--active-bg,#25D366) 18%) !important;
    box-shadow:inset 0 1px 2px rgba(15,23,42,.04) !important;
  }
  .chat-main .chat-input-zone .chat-input{
    min-height:32px !important;
    padding:6px 0 !important;
    font-size:14px !important;
    line-height:20px !important;
  }
  .chat-main .chat-input-zone .send-submit-btn{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    border-radius:50% !important;
    box-shadow:0 3px 10px color-mix(in srgb,var(--active-bg,#25D366) 20%,transparent) !important;
  }
  .chat-main .chat-input-zone .send-submit-btn svg{
    width:20px !important;
    height:20px !important;
  }
}