/* Chat: conversations with friends about gigs (list + conversation; side by side on desktop) */
.ch { max-width: 720px; margin: 0 auto; padding: 8px 0 32px; }
.ch__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px 10px; }
.ch__head > div { flex: 1; min-width: 0; }
.ch__title { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; }
.ch__sub { margin: 2px 0 0; font-size: 13px; color: var(--color-ink-muted); }
.ch__list { display: flex; flex-direction: column; background: var(--color-surface); }
.ch__empty { padding: 48px 24px; }
.ch-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: var(--hairline) solid var(--color-line); color: var(--color-ink); text-decoration: none; }
.ch__list .ch-row:first-child { border-top: 0; }
.ch-row .dx-av { flex: none; width: 48px; height: 48px; }
.ch-row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-row__top { display: flex; align-items: baseline; gap: 8px; }
.ch-row__top b { flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-row__top small { flex: none; font-size: 12px; color: var(--color-ink-muted); }
.ch-row__msg { font-size: 13px; color: var(--color-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-row__msg svg { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; }
.ch-row.has-unread .ch-row__msg { color: var(--color-ink); font-weight: 700; }
.ch-row.is-open { background: var(--color-hover); box-shadow: inset 3px 0 0 var(--color-ink); }

.ch-thread { display: flex; flex-direction: column; min-height: 100%; background: var(--color-bg); }
.ch-thread__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--color-surface); border-bottom: var(--hairline) solid var(--color-line); }
.ch-chat { flex: 1; }
.ch-compose .ch-attach { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--color-field); color: var(--color-ink-2); }
.ch-compose .ch-attach svg { width: 18px; height: 18px; }
.ch-gig { display: flex; gap: 10px; align-items: center; width: 100%; margin: 0 0 8px; padding: 8px; border-radius: 12px; background: var(--color-surface); box-shadow: 0 0 0 var(--hairline) var(--color-line-strong); text-align: left; color: var(--color-ink); }
.ch-gig img { flex: none; width: 64px; height: 48px; object-fit: cover; border-radius: 8px; }
.ch-gig > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ch-gig b { font-size: 14px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-gig small { font-size: 11px; color: var(--color-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-bubble.is-mine .ch-gig { box-shadow: 0 0 0 var(--hairline) var(--btn-brand-line); }

.screen--chat .screen-inner { max-width: 720px; padding: 0; }
.ch-page { min-height: 100%; }
.screen--chat .ch-thread { min-height: calc(100dvh - 64px); }
.screen--chat .ch-thread__head { display: none; }

@media (min-width: 640px) { .ch__list { margin: 4px 16px 0; border-radius: 16px; box-shadow: 0 0 0 var(--hairline) var(--color-line); overflow: hidden; } }
@media (min-width: 1024px) {
  .ch { max-width: var(--page-w); display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 24px; padding: 28px 24px 32px; align-items: start; }
  .ch__head { padding: 8px 0 8px; }
  .ch__list { margin: 4px 0 0; }
  .ch__main { position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: 16px; box-shadow: 0 0 0 var(--hairline) var(--color-line); background: var(--color-surface); }
  .ch__main:empty { display: none; }
  .ch__main .ch-thread { min-height: calc(100dvh - 32px); }
  .ch__main .ob-chat { min-height: calc(100dvh - 140px); }
  .nav-item[data-tab="chat"], .side-link[data-tab="chat"] { position: relative; }
}
.nav-item[data-tab="chat"] { position: relative; }

/* ---------- Conversation rows: feed-size type, room to breathe ---------- */
.ch__head .tk-iconbtn + .tk-iconbtn { margin-left: -4px; }
.ch-row { position: relative; display: block; padding: 0; border-top: 0; }
.ch-row + .ch-row::before { content: ''; position: absolute; top: 0; left: 90px; right: 0; border-top: var(--hairline) solid var(--color-line); }
.ch-row__link { display: flex; align-items: center; gap: 14px; padding: 14px 52px 14px 20px; color: var(--color-ink); text-decoration: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.ch-row .dx-av { width: 56px; height: 56px; font-size: 18px; }
.ch-row__txt { gap: 4px; }
.ch-row__top { align-items: center; gap: 6px; }
.ch-row__top b { font-size: 16px; line-height: 22px; font-weight: 600; }
.ch-row__top small { margin-left: auto; font-size: 13px; }
.ch-row__flag { flex: none; width: 14px; height: 14px; color: var(--color-ink-muted); }
.ch-row__msg { font-size: 15px; line-height: 20px; }
.ch-row.has-unread .ch-row__top b { font-weight: 800; }
.ch-row.has-unread .ch-row__msg { font-weight: 600; color: var(--color-ink); }
.ch-row.has-unread .ch-row__top small { color: var(--color-ink); font-weight: 600; }
.ch-row.is-muted.has-unread .ch-row__msg { font-weight: 400; color: var(--color-ink-muted); }
.ch-row__dot { position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--color-badge); }
.ch-row.is-muted .ch-row__dot { background: var(--color-ink-muted); }
.ch-row__more { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: none; place-items: center; border-radius: 50%; color: var(--color-ink-2); }
.ch-row__more svg { width: 20px; height: 20px; }
.ch-row:active .ch-row__link { background: var(--color-hover); }
.ch-row.is-open { background: var(--color-hover); box-shadow: inset 3px 0 0 var(--color-ink); }
@media (hover: hover) and (pointer: fine) {
  .ch-row:hover { background: var(--color-hover); }
  .ch-row:hover .ch-row__more, .ch-row__more:focus-visible { display: grid; }
  .ch-row:hover .ch-row__dot { display: none; }
  .ch-row__more:hover { background: var(--color-surface); }
}
.ch-thread__head .tk-iconbtn { flex: none; }
.screen--chat .ch-thread__head { display: none; }

/* "Seen" under your last message */
.ch-seen { margin: -2px 6px 6px auto; text-align: right; font-size: 12px; color: var(--color-ink-muted); }

/* Write box: more room, calmer */
.ch-compose { gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
.ch-compose textarea { min-height: 46px; padding: 12px 16px; border-radius: 23px; font-size: 16px; line-height: 22px; }
.ch-compose textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--color-line-strong); background: var(--color-surface); }
.ch-compose .ch-attach, .ch-compose .ob-send { width: 46px; height: 46px; }

/* Settings + delete sheets */
.ch-sheet .dsheet__body { display: flex; flex-direction: column; gap: 4px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.ch-sheet .tk-switchrow { padding: 12px 4px 14px; }
.ch-sheet__label { margin: 14px 4px 6px; font-size: 13px; font-weight: 700; color: var(--color-ink-muted); }
.ch-sheet__text { margin: 4px 4px 16px; font-size: 15px; line-height: 22px; color: var(--color-ink-2); }
.ch-sheet__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ch-sheet__acts .dx-btn { height: 48px; justify-content: center; font-size: 15px; font-weight: 700; border-radius: 14px; }
.ch-del { color: var(--color-danger); }
@media (min-width: 640px) { .fsheet.ch-sheet { align-items: center; } }
@media (min-width: 1024px) {
  .ch-row__link { padding: 12px 52px 12px 16px; }
  .ch-row .dx-av { width: 48px; height: 48px; }
  .ch-row + .ch-row::before { left: 78px; }
}

/* No conversations yet (22 Oct): the page takes the profile's width — one column, hero on top, people to write to under it */
.ch.ch--none .ch__main { display: none; }
.ch__people { margin-top: 8px; }
@media (min-width: 1024px) {
  .ch.ch--none { display: block; max-width: 720px; }
  .ch.ch--none .ch__empty { padding-top: clamp(32px, 8vh, 88px); }
}

/* Desktop conversation, 22 Oct: no box — same as Tasks (the glowing divider and field live in tasks.css) */
@media (min-width: 1024px) {
  .ch:not(.ch--none) { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 0; padding-bottom: 0; }
  .ch:not(.ch--none) .ch__side { padding: 0 28px 48px 0; }
  .ch__main { position: sticky; top: 0; display: flex; flex-direction: column; height: 100dvh; max-height: none; margin-top: -52px; padding: 52px 0 0 28px; overflow: hidden;
    border-radius: 0; box-shadow: none; background: none; }
  .ch__main .ch-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; background: none; }
  .ch__main .ch-thread__head { padding: 0 0 14px; background: none; border-bottom: 0; }
  .ch__main .ob-chat { flex: 1; min-height: 0; background: none; }
  .ch__main .ob-chat__list { overflow-y: auto; overscroll-behavior: contain; padding: 16px 4px 16px 0; }
  .ch__main .ch-compose .ch-attach { width: 48px; height: 48px; background: var(--color-surface); box-shadow: inset 0 0 0 var(--hairline) var(--color-line-strong); }
}
.ch-gig__hue { flex: none; display: grid; place-items: center; width: 64px; height: 48px; border-radius: 8px; font-style: normal; font-size: 20px; font-weight: 900; letter-spacing: -0.02em; }

/* ---------- Message requests and page inboxes (23 Oct) ---------- */
.ch-reqhint { display: flex; align-items: center; gap: 8px; margin: 6px 16px 4px; font-size: 13px; line-height: 18px; color: var(--color-ink-muted); }
.ch-reqhint svg { flex: none; width: 14px; height: 14px; }
.ch-row__to { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 16px; color: var(--color-accent-text, var(--color-accent)); }
.ch-row__to svg { width: 12px; height: 12px; }
.ch-aspage { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--color-accent-text, var(--color-accent)); }
.ch-aspage svg { width: 15px; height: 15px; }
.ch-by { margin-right: 6px; font-style: normal; font-weight: 600; }
/* the bar that replaces the composer on a request: who, why, and the three answers */
.ch-reqbar { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.ch-reqbar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; opacity: .5;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent) 60%, transparent) 30%, color-mix(in srgb, var(--color-accent) 60%, transparent) 70%, transparent); }
.ch-reqbar p { display: flex; flex-direction: column; gap: 4px; margin: 0; text-align: center; }
.ch-reqbar b { font-size: 15px; line-height: 20px; }
.ch-reqbar small { font-size: 13px; line-height: 18px; color: var(--color-ink-muted); }
.ch-reqbar__acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ch-reqbar__acts > * { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: 22px; font-size: 14.5px; font-weight: 700; }
.ch-reqbar__acts svg { width: 15px; height: 15px; }
.ch-reqbar__acts [data-req="block"] { color: var(--color-danger); }
.ch-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); font-size: 13.5px; line-height: 19px; color: var(--color-ink-2); text-align: center; }
.ch-note svg { flex: none; width: 15px; height: 15px; color: var(--color-ink-muted); }
.ch-blocked { display: flex; flex-direction: column; }
.ch-blocked__row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.ch-blocked__row b { flex: 1; min-width: 0; font-size: 15px; }
.ch-blocked__row .dx-av { width: 36px; height: 36px; font-size: 12px; }