/* Venturoo member portal: Matches & Chat and the Match button (portal-chat-render.js). The app's design (matches_screen.dart,
   chat_screen.dart): a messages list, grey and cobalt bubbles with the time inside, a pill box with a round send button.
   Colours are the site tokens (site.css), so light and dark follow the palette. */

/* ── Message / Connect / Meet under a profile's header (profile_match_bar.dart) ── */
.pt-actions-host { margin: 16px 0 18px; }
.pt-matchbar { display: grid; grid-template-columns: 1.1fr 1fr .9fr; gap: 10px; }
.pt-pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 10px; min-width: 0;
  font: 700 16px var(--sans); border-radius: 16px; border: 0; background: var(--brand-50); color: var(--ink); cursor: pointer; }
.pt-pbtn .pt-ico { color: var(--brand); flex: none; }
.pt-pbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-pbtn.primary { background: var(--brand-btn); color: var(--on-brand); }
.pt-pbtn.primary .pt-ico { color: inherit; }
.pt-pbtn:hover:not([disabled]) { filter: brightness(1.04); }
.pt-pbtn[disabled] { cursor: default; opacity: .6; }
.pt-pbtn.done[disabled] { opacity: 1; }
.pt-pbtn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (max-width: 380px) { .pt-pbtn { font-size: 14.5px; gap: 6px; padding: 0 6px; } .pt-pbtn .pt-ico { width: 18px; height: 18px; } }
/* buttons of the request cards (Accept / Pass) */
.pt-mb-row { display: flex; gap: 12px; }
.pt-mbtn { flex: 2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 18px;
  font: 700 16px var(--sans); border-radius: 14px; border: 1px solid var(--brand); background: var(--brand-btn); color: var(--on-brand); cursor: pointer; }
.pt-mbtn.ghost { flex: 1; background: var(--paper); color: var(--muted); border-color: var(--rule); }
.pt-mbtn[disabled] { cursor: default; opacity: .75; }
.pt-mbtn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.pt-starters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.pt-starters .pt-chip { font-size: 13px; padding: 7px 12px; }
.pt-dlg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }

/* ── the list ── */
.pt-chat-page { max-width: 720px; }
.pt-chat-title { font-size: 26px; letter-spacing: -0.02em; margin: 4px 0 14px; }
.pt-csearch { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 50px; border-radius: 16px; background: var(--paper-3); color: var(--ink); margin-bottom: 10px; }
.pt-csearch input { flex: 1; min-width: 0; border: 0; background: transparent; font: 16px var(--sans); color: var(--ink); outline: none; padding: 0; }
.pt-csearch input::placeholder { color: var(--faint); }
.pt-csearch:focus-within { box-shadow: 0 0 0 2px var(--brand); }
.pt-clist { display: grid; }
.pt-crow { display: flex; gap: 14px; padding: 14px 4px 0; text-decoration: none; color: inherit; min-width: 0; }
.pt-cbody { flex: 1; min-width: 0; display: grid; gap: 3px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.pt-crow:last-child .pt-cbody { border-bottom: 0; }
.pt-ctop { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pt-ctop b { flex: 1; min-width: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.pt-ctop time { font-size: 13px; color: var(--faint); flex: none; }
.pt-crow.unread .pt-ctop time { color: var(--brand); }
.pt-cbottom { display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
.pt-cprev { flex: 1; min-width: 0; color: var(--faint); font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pt-crow.unread .pt-cprev { color: var(--ink); font-weight: 500; }
.pt-crow:hover .pt-ctop b { color: var(--brand-deep); }
.pt-cbadge { flex: none; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--brand-btn); color: var(--on-brand); font-size: 12.5px; font-weight: 700; }
.pt-ticks { display: inline-flex; color: var(--faint); flex: none; }
.pt-ticks.read { color: var(--brand); }
.pt-cavatar { flex: none; display: inline-flex; border-radius: 50%; overflow: hidden; }
.pt-cavatar .pt-avatar { width: 100% !important; height: 100% !important; font-size: inherit; }
.pt-cavatar .pt-avatar-fallback { background: var(--brand-50); color: var(--brand-deep); font-weight: 700; }
.pt-cempty { color: var(--muted); text-align: center; padding: 24px 0; }
.pt-cfoot { color: var(--faint); text-align: center; font-size: 13px; margin: 18px 0 0; }

.pt-reqrow { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin: 6px 0 4px; border-radius: 18px; background: var(--brand-50); color: var(--ink); text-decoration: none; }
.pt-faces { position: relative; height: 52px; flex: none; }
.pt-face { position: absolute; top: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--paper); background: var(--paper); }
.pt-reqtext { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pt-reqtext b { font-size: 17px; }
.pt-reqtext span { color: var(--muted); font-size: 14.5px; }
.pt-reqrow > .pt-ico { color: var(--brand); flex: none; }

/* ── request cards ── */
.pt-req { border: 1px solid var(--rule); border-radius: 18px; background: var(--paper); padding: 14px; margin: 0 0 12px; }
.pt-req-who { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.pt-req-who > span:not(.pt-cavatar) { flex: 1; min-width: 0; }
.pt-req-who b { font-size: 16.5px; }
.pt-req-sub { display: block; color: var(--brand-deep); font-size: 13.5px; font-weight: 500; }
.pt-plus { font-size: 10px; font-weight: 800; color: var(--brand-deep); background: var(--brand-50); border-radius: 6px; padding: 2px 6px; vertical-align: 2px; }
.pt-req-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--paper-3); color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.pt-req .pt-mb-row { margin-top: 12px; }
.pt-req .pt-mbtn { min-height: 44px; flex: 1; font-size: 15px; }

/* ── the conversation ── */
.pt-room { display: flex; flex-direction: column; height: calc(100vh - 140px); height: calc(100dvh - 140px); min-height: 420px; max-width: 760px;
  border: 1px solid var(--rule); border-radius: 22px; background: var(--paper); overflow: hidden; }
.pt-room-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.pt-iconlink { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); }
.pt-iconlink:hover { background: var(--paper-3); }
.pt-room-who { flex: 1; min-width: 0; text-align: center; text-decoration: none; color: inherit; display: grid; }
.pt-room-who b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-room-who span { font-size: 13px; color: var(--faint); }
.pt-room-who span.on { color: var(--brand); font-weight: 600; }
.pt-room-msgs { flex: 1; overflow-y: auto; padding: 16px; overscroll-behavior: contain; }
.pt-b { display: flex; flex-direction: column; margin: 0 0 6px; }
.pt-b.me { align-items: flex-end; padding-left: 56px; }
.pt-b.them { align-items: flex-start; padding-right: 56px; }
.pt-b.end { margin-bottom: 14px; }
.pt-b.end::after { content: ''; width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; background: var(--rule); }
.pt-b.me.end::after { background: var(--brand); }
.pt-bin { max-width: 100%; padding: 10px 14px 8px 16px; border-radius: 22px; background: var(--paper-3); color: var(--ink); }
.pt-b.me .pt-bin { background: var(--brand-btn); color: var(--on-brand); }
.pt-bin p { margin: 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; white-space: pre-wrap; }
.pt-b.me .pt-bin a { color: inherit; }
.pt-bmeta { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-top: 2px; padding-left: 24px; font-size: 11.5px; color: var(--faint); }
.pt-b.me .pt-bmeta { color: rgba(255, 255, 255, .78); }
.pt-b.me .pt-ticks, .pt-b.me .pt-ticks.read { color: inherit; }
.pt-b.me .pt-ticks.read { color: #fff; }
.pt-b.img .pt-bin { padding: 6px; }
.pt-bimg { display: block; max-width: min(320px, 100%); border-radius: 17px; }
.pt-sysmsg { text-align: center; color: var(--muted); font-size: 13px; margin: 8px auto 14px; padding: 6px 12px; border-radius: 999px; background: var(--paper-3); width: fit-content; max-width: 90%; }
.pt-compose { display: flex; align-items: flex-end; gap: 10px; padding: 10px 14px 12px; }
.pt-compose textarea { flex: 1; min-width: 0; resize: none; min-height: 50px; max-height: 160px; padding: 13px 18px; border: 1.5px solid transparent; border-radius: 26px;
  background: var(--paper-3); color: var(--ink); font: 16px/1.4 var(--sans); outline: none; }
.pt-compose textarea::placeholder { color: var(--faint); }
.pt-compose textarea:focus { border-color: var(--brand); }
.pt-send { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--brand-btn); color: var(--on-brand); cursor: pointer; }
.pt-send[disabled] { opacity: .5; cursor: default; }
.pt-send-error:empty { display: none; }
.pt-send-error { margin: 0 16px 10px; }

@media (max-width: 640px) {
  .pt-room { height: calc(100dvh - 120px); border-radius: 18px; margin: 0 -6px; }
  .pt-b.me { padding-left: 36px; } .pt-b.them { padding-right: 36px; }
}