@use 'kit-deps' as *;
@use 'tokens' as *;

// ─── Scrollbars ────────────────────────────────────────────────────────────
// The kit paints thick square webkit bars globally (kit.scss). The app
// overrides them thinner and rounded, consistently for every scroll area
// (tabs strip, settings region, message list, tables, code blocks).
// Firefox gets the same look via scrollbar-width/color, which have no
// per-element control.
* {
  scrollbar-width: thin;
  scrollbar-color: $color-grey transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  width: 8px;
  background: $color-grey;
  border-radius: 9999px;
  cursor: default;
}

*::-webkit-scrollbar-thumb:hover {
  background: $color-text-dark;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

*::-webkit-scrollbar-button {
  display: none;
}

// ─── Selection policy (PWA) ────────────────────────────────────────────────
// Service UI is chrome, not content: long-pressing a control drags in the
// browser text-selection sheet ("Search with Google") over the controls.
// Keep selection OFF for chrome and ON for message content / text controls.
.chat-header,
.context-bar,
.profile-badge,
.msg-meta-row,
.recall-banner,
.app-sidebar,
.input-bar,
.tabs-list {
  user-select: none;
  -webkit-touch-callout: none;

  // Anything the user actually types in stays selectable + editable-safe.
  input,
  textarea {
    user-select: auto;
    -webkit-touch-callout: default;
  }
}

// Focus zoom: mobile browsers zoom the viewport when an input with a
// font-size < 16px gets focus. Text entry stays at 16px on phones;
// checkboxes/radios are excluded — they never trigger the zoom.
@media (max-width: 767px) {
  textarea,
  input:not([type='checkbox']):not([type='radio']):not([type='range']) {
    font-size: 16px !important;
  }
}