/* Chats triage (2026-09-30, static/chat-tools.js): filter chips, pinned rows, Select mode, the Starred list, the
   "Staying safe" link, and inside a chat his profile in the same panel with his photo dimmed behind the messages. */

/* Chips: one strip under the title; it scrolls sideways when the phone is narrow. */
.chat-chips {
  position:relative;
  display:flex;
  gap:8px;
  margin:4px 0 2px;
  padding:4px 28px 8px 0;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  overflow-x:auto;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch
}

.chat-chips::-webkit-scrollbar {
  display:none
}

.chat-chips button {
  position:relative;
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:38px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#0c1822;
  color:var(--muted);
  font-size:14px;
  font-weight:650;
  white-space:nowrap;
  scroll-snap-align:start
}

/* A thumb-sized target around the smaller pill. */
.chat-chips button::after {
  content:'';
  position:absolute;
  inset:-3px 0
}

.chat-chips button[aria-selected="true"] {
  background:var(--ice);
  border-color:var(--ice);
  color:#07131d
}

.chat-chips i {
  display:inline-grid;
  min-width:20px;
  height:20px;
  padding:0 5px;
  place-items:center;
  border-radius:10px;
  background:var(--ice);
  color:#07131d;
  font-size:11px;
  font-style:normal
}

.chat-chips button[aria-selected="true"] i {
  background:#07131d;
  color:var(--ice)
}

.chip-results {
  margin-top:10px
}

.chip-results.request-list {
  display:grid;
  gap:12px
}

.chip-empty p {
  margin:6px 0 16px
}

.chip-loading {
  padding:24px 0;
  text-align:center;
  color:var(--muted);
  font-size:13px
}

/* Pinned rows carry a small pin before the name. */
.pin-mark {
  display:inline-flex;
  width:14px;
  height:14px;
  margin-right:6px;
  vertical-align:-2px;
  color:var(--ice)
}

.pin-mark svg {
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linejoin:round
}

/* Starred men: a row like a chat row, tap opens his profile. */
.starred-row .star-mark {
  flex:none;
  color:#ffd76a;
  font-size:19px
}

/* Select mode: a round tick before each row, Archive and Delete in a bar at the foot of the list. */
.pick-box {
  display:none
}

.chats-section.selecting .pick-box {
  order:-1;
  display:inline-grid;
  flex:none;
  width:24px;
  height:24px;
  place-items:center;
  border:2px solid #5d7485;
  border-radius:50%
}

.chats-section.selecting .swipe-row.picked .pick-box {
  background:var(--ice);
  border-color:var(--ice)
}

.chats-section.selecting .swipe-row.picked .pick-box::after {
  content:'';
  width:10px;
  height:5px;
  border:solid #07131d;
  border-width:0 0 2px 2px;
  transform:translateY(-1px) rotate(-45deg)
}

.chats-section.selecting .swipe-row {
  --swipe:0px !important
}

.chats-section.selecting .swipe-row.open>.person-row {
  width:100%
}

.chats-section.selecting .swipe-delete {
  display:none
}

.chats-section.selecting h2.list-heading:has(+ .request-list),
.chats-section.selecting .request-list {
  display:none
}

.chats-section.selecting .swipe-row.unpickable {
  opacity:.5
}

.chat-list-head:has(.chat-select-toggle) {
  justify-content:flex-start
}

.chat-list-head:has(.chat-select-toggle) h1 {
  margin-right:auto
}

.chat-select-bar {
  position:sticky;
  bottom:calc(var(--nav-h,calc(69px + env(safe-area-inset-bottom))) + 8px);
  z-index:5;
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding:8px 8px 8px 16px;
  border:1px solid #3c505f;
  border-radius:18px;
  background:#15232f;
  box-shadow:0 8px 28px #0008
}

.chat-select-bar span {
  flex:1;
  min-width:0;
  color:var(--muted);
  font-size:13px
}

.chat-select-bar button {
  width:auto;
  min-height:44px;
  margin:0;
  padding:0 16px
}

.chat-select-bar button:disabled {
  opacity:.45
}

body.split-chat .side-chat .chat-select-bar {
  bottom:8px
}

/* The persistent safety link at the foot of the list. */
.chat-safety-link {
  margin:26px 0 6px;
  text-align:center
}

.chat-safety-link .text-button {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:44px;
  padding:0 10px;
  color:var(--muted);
  font-size:13px
}

.chat-safety-link svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linejoin:round
}

/* In a chat: the Chat / Profile toggle in the header. */
.chat-profile-toggle svg {
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7
}

.chat-profile-toggle[aria-pressed="true"] {
  color:var(--ice)
}

.chat-title {
  cursor:pointer;
  border-radius:10px
}

/* The desktop chat column has no room for one more icon; his name is the switch there. */
body.split-chat .side-chat .chat-profile-toggle {
  display:none
}

.conversation {
  position:relative
}

/* His profile covers the messages and the composer; neither is redrawn, so the scroll and the typed words stay. */
.chat-profile-pane {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:14px 6px 22px;
  background:var(--bg);
  animation:chat-pane-in .18s ease-out
}

@keyframes chat-pane-in {
  from { opacity:0 }
}

.pane-hero {
  max-width:min(420px,36vh);
  margin:0 auto 12px;
  border-radius:18px;
  overflow:hidden;
  background:#0f1e2a
}

.pane-hero.empty {
  display:flex;
  justify-content:center;
  padding:10px 0 4px;
  background:none
}

.chat-profile-pane .profile-top {
  text-align:left
}

.chat-profile-pane .profile-top h2 span {
  color:var(--muted);
  font-weight:500
}

.pane-actions {
  display:flex;
  gap:10px;
  margin-top:20px
}

.pane-actions button {
  flex:1;
  min-height:48px;
  margin:0
}

/* His photo behind the chat: dim and blurred, drawn once on its own layer, never scrolled or animated. */
.chat-backdrop {
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  contain:strict;
  will-change:transform
}

.chat-backdrop .avatar {
  position:absolute;
  left:50%;
  top:50%;
  width:max(100%,100vh);
  height:auto;
  aspect-ratio:1;
  border:0;
  border-radius:0;
  background:#0f1e2a;
  transform:translate(-50%,-50%) scale(1.15);
  filter:blur(26px) brightness(.32) saturate(.85)
}

.chat-backdrop::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(10,22,34,.82),rgba(10,22,34,.45) 38%,rgba(10,22,34,.55) 70%,rgba(10,22,34,.9))
}

.conversation.has-backdrop>.conversation-header {
  z-index:2
}

.conversation.has-backdrop>:not(.chat-backdrop):not(.chat-profile-pane):not(.conversation-header) {
  position:relative;
  z-index:1
}

@media (prefers-reduced-transparency: reduce) {
  .chat-backdrop { display:none }
}

@media (prefers-reduced-motion: reduce) {
  .chat-profile-pane { animation:none }
}