/* Keep the search glyph clear of typed text and the placeholder. */
@media (min-width: 641px) {
  .page .search-control::before {
    content: '';
    left: 12px;
    width: 16px;
    height: 16px;
    pointer-events: none;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23536174' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E");
  }
  .page .search-control > input.control { padding-inline-start: 40px; }
}

/* Desktop scrollbars: preserve native scrolling behavior. */
@media (min-width: 701px) and (pointer: fine) and (forced-colors: none) {
  /* Native scrolling remains available to keyboard, mouse and touchpad. */
  html, .sidebar, .nav-list, .inbox-thread-list, .conversation-messages,
  .table-wrap, .jb-inspector, .jb-dialog, .inbox-dialog {
    scrollbar-width: thin;
    scrollbar-color: #7281a0 #f0f3f8;
  }
  .sidebar, .nav-list { scrollbar-color: #8d9dc5 #122865; }
  select::picker(select) { scrollbar-width: thin; scrollbar-color: #7281a0 #f0f3f8; }
  @supports selector(::-webkit-scrollbar) {
    html, .sidebar, .nav-list, .inbox-thread-list, .conversation-messages,
    .table-wrap, .jb-inspector, .jb-dialog, .inbox-dialog {
      scrollbar-width: auto;
      scrollbar-color: auto;
    }
    :is(html, .sidebar, .nav-list, .inbox-thread-list, .conversation-messages, .table-wrap, .jb-inspector, .jb-dialog, .inbox-dialog)::-webkit-scrollbar { width: 9px; height: 9px; }
    :is(html, .sidebar, .nav-list, .inbox-thread-list, .conversation-messages, .table-wrap, .jb-inspector, .jb-dialog, .inbox-dialog)::-webkit-scrollbar-track { background: #f0f3f8; }
    :is(html, .sidebar, .nav-list, .inbox-thread-list, .conversation-messages, .table-wrap, .jb-inspector, .jb-dialog, .inbox-dialog)::-webkit-scrollbar-thumb { background: #7281a0; border: 2px solid #f0f3f8; border-radius: 8px; }
    :is(html, .sidebar, .nav-list, .inbox-thread-list, .conversation-messages, .table-wrap, .jb-inspector, .jb-dialog, .inbox-dialog)::-webkit-scrollbar-thumb:hover { background: #536788; }
    :is(html, .sidebar, .nav-list, .inbox-thread-list, .conversation-messages, .table-wrap, .jb-inspector, .jb-dialog, .inbox-dialog)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
    :is(.sidebar, .nav-list)::-webkit-scrollbar-track { background: #122865; }
    :is(.sidebar, .nav-list)::-webkit-scrollbar-thumb { background: #8d9dc5; border-color: #122865; }
    :is(.sidebar, .nav-list)::-webkit-scrollbar-thumb:hover { background: #b4c0df; }
  }
}

/* Keep browser selection, validation and form events; style the desktop picker. */
@media (min-width: 701px) and (pointer: fine) and (forced-colors: none) {
  @supports (appearance: base-select) {
    select:not([multiple]):not([size]),
    select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
    select:not([multiple]):not([size]) {
      min-width: 0;
      align-items: center;
      gap: 12px;
      cursor: pointer;
    }
    select:not([multiple]):not([size])::picker(select) {
      box-sizing: border-box;
      width: max-content;
      min-width: anchor-size(width);
      max-width: min(480px, calc(100vw - 24px));
      max-height: min(340px, 60vh);
      overflow: auto;
      padding: 6px;
      margin-block: 6px;
      border: 1px solid #c4cddd;
      border-radius: 12px;
      background: #fff;
      color: #122865;
      box-shadow: 0 12px 32px #12286526, 0 2px 6px #1228650d;
      font: 500 14px/1.5 Inter, sans-serif;
    }
    select:not([multiple]):not([size])::picker-icon {
      content: '';
      flex: 0 0 7px;
      width: 7px;
      height: 7px;
      margin: -4px 3px 0 auto;
      border: solid currentColor;
      border-width: 0 1.8px 1.8px 0;
      rotate: 45deg;
    }
    select:not([multiple]):not([size]):open::picker-icon { rotate: 225deg; margin-top: 4px; }
    select:not([multiple]):not([size]) option {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 42px;
      padding: 10px 12px;
      border: 0;
      border-radius: 7px;
      white-space: normal;
      overflow-wrap: anywhere;
      color: #122865;
      background: #fff;
    }
    select:not([multiple]):not([size]) option:checked { background: #edf1f9; font-weight: 700; }
    select:not([multiple]):not([size]) option:not(:disabled):hover,
    select:not([multiple]):not([size]) option:not(:disabled):focus { background: #e4eaf5; outline: 2px solid #122865; outline-offset: -2px; }
    select:not([multiple]):not([size]) option:disabled { color: #697586; cursor: not-allowed; }
    select:not([multiple]):not([size]) option::checkmark { color: #122865; order: 1; margin-left: auto; }
    select:not([multiple]):not([size]) optgroup { font: 600 12px/1.5 Inter, sans-serif; color: #536174; }
    select:not([multiple]):not([size]):disabled { cursor: not-allowed; }
    .sender-switcher select { font-size: 12px; line-height: 1.5; }
  }

}