:root {
  --navy-950: #050F24;
  --navy-900: #0A1B3D;
  --navy-800: #102850;
  --blue-700: #0067B8;
  --blue-600: #2E7BFF;
  --blue-500: #4F94FF;
  --sky-100: #EEF4FF;
  --sky-50: #F7FAFF;
  --white: #FFFFFF;
  --gold-500: #F4B942;
  --gain: #17C784;
  --loss: #F0465C;
  --ink-900: #0B1424;
  --ink-700: #33425E;
  --ink-500: #67748F;
  --line: #DCE6F7;
  --radius: 14px;
  --shadow: 0 20px 50px -20px rgba(10,27,61,.35);
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--sky-50);
  color: var(--ink-700);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--ink-900);
  /* A long unbroken word (a group name with no spaces) wraps instead of pushing the page wider than a phone. */
  overflow-wrap: anywhere;
}

/* Per-language font stacks. Inter/Space Grotesk have no Arabic or Han glyphs, and Space Grotesk has no
   Cyrillic, so those languages use fonts that do (system fonts first, so nothing extra has to download).
   Matched on the html lang attribute set by _Layout. wwwroot/css/lang-fonts.css repeats this for the
   landing and sign-up pages, which do not load this file. */
:lang(ar) body,
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4, :lang(ar) h5, :lang(ar) h6 {
  font-family: 'Segoe UI', Tahoma, 'Noto Sans Arabic', Arial, sans-serif;
}

:lang(zh-Hans) body,
:lang(zh-Hans) h1, :lang(zh-Hans) h2, :lang(zh-Hans) h3, :lang(zh-Hans) h4, :lang(zh-Hans) h5, :lang(zh-Hans) h6 {
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', 'Hiragino Sans GB', sans-serif;
}

/* Body already uses Inter, which has Cyrillic; only the Space Grotesk headings need a replacement. */
:lang(ru) h1, :lang(ru) h2, :lang(ru) h3, :lang(ru) h4, :lang(ru) h5, :lang(ru) h6 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

.mono {
  font-family: 'JetBrains Mono', monospace;
}

a {
  color: var(--blue-700);
}

a:hover {
  color: var(--blue-600);
}

.btn-link {
  color: var(--blue-700);
}

/* ---------- logo mark (shared by header and footer) ---------- */
.logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: 0.8rem;
  box-shadow: 0 4px 10px rgba(0, 103, 184, 0.35), 0 0 0 2px #fff;
  flex-shrink: 0;
}

/* ---------- header / nav ---------- */
/* The nav stays pinned to the top of the viewport on every page of the app.
   z-index sits above page content but below Bootstrap modals (1055). */
body > header {
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* While the menu is collapsed into the hamburger (phones; and, for the signed-in navigation, every width below xxl),
   a tall expanded menu on a short screen scrolls inside the header instead of running off-screen. Not applied
   when the links sit inline, where overflow:auto would add a sideways scrollbar to a wide admin nav. */
@media (max-width: 575.98px) {
  body > header {
    max-height: 100vh;
    overflow-y: auto;
  }
}

@media (max-width: 1399.98px) {
  body > header:has(.navbar-expand-xxl) {
    max-height: 100vh;
    overflow-y: auto;
  }
}

.pt-navbar {
  background-color: #fff !important;
  border-bottom: 1px solid var(--line) !important;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.pt-navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink-900) !important;
  letter-spacing: -0.02em;
}

.pt-navbar .nav-link {
  color: var(--ink-700) !important;
  font-weight: 500;
  font-size: 0.925rem;
}

.pt-navbar .nav-link:hover {
  color: var(--blue-700) !important;
}

.pt-navbar .navbar-toggler {
  border-color: var(--line);
}

/* The signed-in navigation (see _Layout: navbar-expand-xxl) shows its links inline only from 1400px up, where the
   member links fit on one row in every language; narrower windows (tablets, small desktops) use the hamburger
   menu, as phones do. An admin has many more links, so when they do not fit on one row they wrap onto further
   rows instead of overflowing, and the language selector / profile link / Logout stay together, centred beside
   them. */
@media (min-width: 1400px) {
  .pt-navbar.navbar-expand-xxl .navbar-nav {
    flex-wrap: wrap;
  }

  .pt-navbar.navbar-expand-xxl .navbar-collapse > .navbar-nav:last-child {
    flex-wrap: nowrap;
    flex-shrink: 0;
    align-self: center;
    align-items: center;
  }
}

/* ---------- buttons ----------
   One look for every primary button in the application, taken from the landing page's "Drive with PoolRide"
   button: solid blue (#0067B8) with white bold text and 8px corners. Only the look is shared: each button keeps
   the size it already had. Solid blue fill with white text reads clearly on both the light content area and the
   dark navbar/footer, so there is no per-background variant. Home.css (landing and sign-up pages) already
   defines the same look. */
:root {
  --btn-blue: #0067B8;
}

.btn {
  border-radius: 8px;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pt-btn-primary,
.btn-primary {
  background-color: var(--btn-blue);
  border-color: var(--btn-blue);
  color: #fff;
}

.pt-btn-primary:hover,
.btn-primary:hover {
  background-color: var(--navy-950);
  border-color: var(--navy-950);
  color: #fff;
  transform: translateY(-2px);
}

.btn-outline-secondary:hover,
.btn-outline-danger:hover {
  transform: translateY(-1px);
}

.badge.pt-btn-primary {
  background-color: var(--navy-950);
}

/* ---------- cards ----------
   No height:100% here on purpose. Most .pt-card usages are content sections
   stacked inside a Bootstrap .row/.col (which stretches its columns by
   default) — a card with height:100% in that context mis-measures against
   its own variable-height content (a growing table/list) and overflows past
   the footer instead of the column growing to contain it. Equal-height grid
   tiles (dashboard stat cards) opt in via .pt-stat-card below instead. */
.pt-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--white);
  box-shadow: 0 10px 30px -18px rgba(10, 27, 61, 0.25);
}

.pt-card .card-header {
  background-color: var(--navy-950);
  color: var(--white);
  font-weight: 600;
  border-bottom: none;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* ---------- badges, alerts, tables, list groups, forms ---------- */
.pt-badge-soon {
  background-color: #e9ecef;
  color: #495057;
}

.alert-success {
  background-color: rgba(23, 199, 132, 0.12);
  border-color: rgba(23, 199, 132, 0.35);
  color: #0b6b47;
}

.alert-danger {
  background-color: rgba(240, 70, 92, 0.1);
  border-color: rgba(240, 70, 92, 0.3);
  color: #8a1626;
}

.table thead {
  background-color: var(--sky-100);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--sky-50);
}

.list-group-item {
  border-color: var(--line);
}

.list-group-item-action:hover {
  background-color: var(--sky-50);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 0.2rem rgba(0, 103, 184, 0.15);
}

/* ---------- sticky footer ----------
   body is a flex column (see site.css); this element is the flex-grow
   spacer between header and footer so short pages still push the footer
   to the bottom of the viewport instead of leaving a gap above it. */
.pt-page-content {
  flex: 1 0 auto;
}

/* ---------- footer ---------- */
footer.pt-footer {
  flex-shrink: 0;
  background-color: #fff;
  border-top-color: var(--line) !important;
  color: var(--ink-500);
}

footer.pt-footer a {
  color: var(--ink-500);
}

footer.pt-footer a:hover {
  color: var(--blue-700);
}

/* ---------- auth pages ---------- */
.auth-page {
  display: flex;
  justify-content: center;
  padding: 3rem 1rem;
}

.auth-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px -18px rgba(10, 27, 61, 0.25);
  padding: 2.5rem;
  width: 100%;
  max-width: 440px;
}

.auth-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--sky-100);
  color: var(--blue-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.auth-title {
  margin-bottom: 0.4rem;
}

.auth-sub {
  color: var(--ink-500);
  margin-bottom: 1.5rem;
}

.auth-links {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}

/* ---------- icon badges (dashboard/groups/profile/admin) ---------- */
.pt-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--sky-100);
  color: var(--blue-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ---------- dashboard stat cards ---------- */
.pt-stat-card {
  height: 100%;
}

.pt-stat-card .card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--white);
  color: var(--ink-700);
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}

.pt-stat-card .card-body h3 {
  font-weight: 700;
  margin-bottom: 0;
}

/* ---------- group cards ---------- */
.pt-group-card {
  border-left: 4px solid var(--blue-600);
}

.pt-group-card .card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ---------- profile section headers ---------- */
.pt-section-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

/* ---------- admin/apply action cards ---------- */
.pt-action-card {
  max-width: 560px;
}

.pt-action-card .pt-icon-badge {
  margin-bottom: 0.75rem;
}

/* ---------- wide multi-field application forms (Funding/Apply and similar) ----------
   Unlike .pt-action-card's single narrow column (for short 1-3 field admin forms),
   this spans the full page width and lays fields out two-per-row, matching the
   sign-up form card's section/grid pattern (PoolTransact.Web/wwwroot/css/Register.css)
   so a longer application form reads as one deliberate layout rather than a long
   single-column stack. */
.pt-form-card {
  padding: 2.5rem;
}

.pt-form-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin: 1.75rem 0 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.pt-form-section-label:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.pt-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
}

@media (max-width: 767.98px) {
  .pt-form-grid {
    grid-template-columns: 1fr;
  }

  .pt-form-card {
    padding: 1.5rem;
  }
}

/* ---------- funding request status badges ---------- */
.pt-status-badge {
  display: inline-block;
  padding: 0.3em 0.7em;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.pt-status-submitted {
  background-color: var(--sky-100);
  color: var(--blue-700);
}

.pt-status-offered {
  background-color: rgba(244, 185, 66, 0.2);
  color: #8a5a00;
}

.pt-status-disbursed {
  background-color: rgba(0, 103, 184, 0.12);
  color: var(--blue-700);
}

.pt-network-posts {
  overflow-y: auto;
}

.pt-network-post-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  transition: background-color .15s ease;
}

.pt-network-post-item:last-child {
  border-bottom: none;
}

.pt-network-post-item:hover {
  background-color: var(--sky-50);
}

.pt-network-post-item h3 {
  color: var(--blue-700);
  font-weight: 600;
}

.pt-network-post-main {
  flex: 1 1 220px;
  min-width: 0;
}

.pt-network-post-author {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  max-width: 45%;
  text-align: right;
}

.pt-network-post-author-name {
  color: var(--ink-900);
  font-weight: 600;
  font-size: 0.9rem;
}

.pt-network-post-author-role {
  color: var(--ink-500);
  font-size: 0.8rem;
}

@media (max-width: 575.98px) {
  .pt-network-post-author {
    flex-basis: 100%;
    max-width: 100%;
    text-align: left;
  }
}

@media (min-width: 992px) {
  .pt-network-panel {
    position: sticky;
    /* sit just below the pinned nav; --pt-header-h is its measured height (set in site.js), 5.5rem before it loads */
    top: calc(var(--pt-header-h, 4.5rem) + 1rem);
    /* Bootstrap's .row is a flex container with the default align-items:
       stretch, which would otherwise force this column to match the (taller)
       groups column's height exactly - leaving sticky zero room to move. */
    align-self: flex-start;
  }

  .pt-network-posts {
    max-height: calc(100vh - 280px);
  }
}

@media (max-width: 991.98px) {
  .pt-network-posts {
    max-height: 60vh;
  }
}

.pt-status-repaid {
  background-color: rgba(23, 199, 132, 0.14);
  color: #0b6b47;
}

.pt-status-rejected {
  background-color: rgba(240, 70, 92, 0.12);
  color: #8a1626;
}

/* ---------- invitations: landing page and Invitations list ---------- */
.pt-status-expired {
  background-color: #e9ecef;
  color: var(--ink-500);
}

.pt-invite-landing {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}

.pt-invite-card {
  width: 100%;
  max-width: 560px;
  padding: 2rem;
  text-align: center;
}

.pt-invite-eyebrow {
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-700);
}

.pt-invite-target {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--sky-50);
  /* Names and descriptions are user text: wrap long unbroken strings instead of overflowing the card. */
  overflow-wrap: anywhere;
}

.pt-invite-reason {
  margin-bottom: 1.5rem;
  color: var(--ink-700);
}

.pt-invite-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.pt-invite-actions .btn {
  flex: 1 1 180px;
}

.pt-invite-list .pt-invite-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.pt-invite-list .pt-invite-row:last-child {
  border-bottom: none;
}

.pt-invite-row-main {
  flex: 1 1 260px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.pt-invite-row-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 575.98px) {
  .pt-invite-card {
    padding: 1.25rem;
  }
}

/* ---------- invite dialog (Views/Shared/_InviteDialog.cshtml, js/invite.js) ---------- */
.pt-invite-dialog .nav-tabs .nav-link {
  color: var(--ink-700);
}

.pt-invite-dialog .nav-tabs .nav-link.active {
  color: var(--blue-700);
  font-weight: 600;
}

/* The modal is .modal-dialog-scrollable, so a long result list scrolls inside the dialog body. */
.pt-invite-results {
  padding-left: 0;
}

/* Lets long names/emails wrap instead of pushing the Invite button out of the row. */
.pt-invite-result-text {
  min-width: 0;
}

.pt-invite-dialog-actions {
  display: flex;
}

.pt-invite-link-group .form-control {
  min-width: 0;
}

/* Count badge in the nav next to "Invitations"; sits level with the text. */
#invite-badge {
  vertical-align: text-top;
  margin-left: 2px;
}

@media (max-width: 575.98px) {
  /* Full-width action buttons and a stacked link/copy row at phone widths. */
  .pt-invite-dialog-actions .btn {
    width: 100%;
  }

  .pt-invite-link-group {
    flex-direction: column;
  }

  .pt-invite-link-group .form-control,
  .pt-invite-link-group .btn {
    width: 100%;
    border-radius: var(--bs-border-radius) !important;
  }

  .pt-invite-link-group .btn {
    margin-left: 0 !important;
    margin-top: 0.5rem;
  }

  #invite-wa-link {
    display: block;
  }
}

/* ---------- chat message bubbles ---------- */
.chat-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.chat-row-mine {
  flex-direction: row-reverse;
}

.chat-bubble {
  background: var(--sky-100);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  padding: 0.5rem 0.75rem;
  max-width: 75%;
}

.chat-row-mine .chat-bubble {
  background: var(--blue-700);
  color: var(--white);
  border-radius: 14px;
  border-bottom-right-radius: 4px;
}

.chat-row-mine .chat-bubble .text-muted {
  color: rgba(255, 255, 255, 0.75) !important;
}

.chat-row-mine .chat-bubble a {
  color: var(--white);
  text-decoration: underline;
}

/* ---------- chat attachments: image thumbnail, file row, lightbox ---------- */
.chat-attachment {
  position: relative;
  display: inline-block;
  /* the cap lives on the figure (not just the image) so the overlaid download button stays on the
     thumbnail's corner instead of floating off the edge of a wider, uncapped figure */
  max-width: min(280px, 100%);
  margin: 6px 0 0;
}

.chat-attachment-img {
  display: block;
  max-width: min(280px, 100%);
  max-height: 220px;
  object-fit: cover;
  border-radius: 10px;
  cursor: zoom-in;
}

.chat-attachment-img:focus-visible {
  outline: 2px solid var(--blue-700);
  outline-offset: 2px;
}

/* ".chat-bubble a.chat-attachment-download" has the same specificity as ".chat-row-mine .chat-bubble a" (white,
   underlined) and wins only because it comes later in this file, so keep it after that rule. */
.chat-bubble a.chat-attachment-download {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(10, 27, 61, 0.65);
  color: #fff;
  text-decoration: none;
}

.chat-bubble a.chat-attachment-download:hover {
  background: rgba(10, 27, 61, 0.85);
}

.chat-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.chat-file-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* In a file row the button sits in the flow instead of floating over a thumbnail. */
.chat-bubble a.chat-attachment-download.chat-attachment-download-inline {
  position: static;
  flex: 0 0 auto;
}

#chat-lightbox-img {
  max-height: 80vh;
  object-fit: contain;
}

/* ---------- chat message actions: hover affordance ---------- */
.chat-bubble:hover {
  filter: brightness(0.97);
}

/* ---------- context menu ---------- */
.chat-context-menu {
  position: fixed;
  z-index: 1080;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 30px -8px rgba(10, 27, 61, 0.35);
  padding: 0.35rem;
  min-width: 160px;
}

.chat-context-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--ink-700);
}

.chat-context-menu-item:hover {
  background: var(--sky-100);
}

.chat-context-menu-item-danger {
  color: var(--loss);
}

/* ---------- in-place edit ---------- */
.chat-edit-textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 0.4rem 0.5rem;
  font: inherit;
  resize: vertical;
}

.chat-edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

/* ---------- delete confirm ---------- */
.chat-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 15, 36, 0.35);
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-confirm-box {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.25rem;
  max-width: 320px;
  box-shadow: 0 20px 50px -12px rgba(10, 27, 61, 0.45);
}

.chat-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* ---------- reply ---------- */
.chat-reply-quote {
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.35rem;
  border-left: 3px solid var(--blue-600);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  cursor: pointer;
}

.chat-row-mine .chat-reply-quote {
  border-left-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.12);
}

.chat-row-highlight {
  animation: chat-row-flash 1.2s ease;
}

@keyframes chat-row-flash {
  0% { background-color: rgba(244, 185, 66, 0.35); }
  100% { background-color: transparent; }
}

.chat-reply-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: var(--sky-100);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

/* ---------- reactions ---------- */
.chat-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

.chat-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--sky-100);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--ink-700);
}

.chat-row-mine .chat-reaction-pill {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--white);
}

.chat-reaction-pill-mine {
  border-color: var(--blue-600);
  font-weight: 600;
}

.chat-reaction-quickbar {
  position: fixed;
  z-index: 1080;
  display: flex;
  gap: 0.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.5rem;
  box-shadow: 0 10px 30px -8px rgba(10, 27, 61, 0.35);
}

.chat-reaction-quickbar-emoji {
  border: none;
  background: none;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.15rem;
  border-radius: 6px;
  cursor: pointer;
}

.chat-reaction-quickbar-emoji:hover {
  background: var(--sky-100);
}

/* ---------- read receipts + typing ---------- */
.chat-read-receipt {
  font-size: 0.72rem;
  color: var(--ink-500);
  margin-top: 0.2rem;
  text-align: right;
}

.chat-row-mine .chat-read-receipt {
  color: rgba(255, 255, 255, 0.75);
}

.chat-typing-indicator {
  font-size: 0.82rem;
  color: var(--ink-500);
  font-style: italic;
  margin-bottom: 0.5rem;
  min-height: 1.1rem;
}

/* ---------- presence dot + avatar/profile links ---------- */
.pt-avatar-wrap {
  position: relative;
  display: inline-block;
}

.pt-avatar-link {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

.pt-presence-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--white);
}

.pt-presence-dot-online {
  background-color: var(--gain);
}

.pt-presence-dot-away {
  background-color: var(--gold-500);
}

.pt-presence-dot-offline {
  display: none;
}

/* ---------- chat sender name / chat index links to profile ---------- */
/* A person's name is never underlined, not even on hover or inside a blue "my message" bubble (where the generic
   ".chat-row-mine .chat-bubble a" rule would otherwise underline every link). */
.chat-sender-link,
.chat-sender-link:hover,
.chat-row-mine .chat-bubble .chat-sender-link,
.chat-row-mine .chat-bubble .chat-sender-link:hover,
.pt-chat-index-link,
.pt-chat-index-link:hover,
.pt-avatar-link,
.pt-avatar-link:hover {
  text-decoration: none;
}

.chat-sender-link,
.pt-chat-index-link {
  color: inherit;
}

.chat-row-mine .chat-bubble .chat-sender-link {
  color: var(--white);
}

/* A long unbroken display name wraps inside its bubble (like the message text does), in the sender line and in a reply
   quote and the reply preview above the composer (a flex row, so its text needs min-width:0), instead of making the
   message list scroll sideways. */
.chat-sender-link,
.chat-reply-quote,
#reply-preview-text {
  overflow-wrap: anywhere;
}

#reply-preview-text {
  min-width: 0;
}

/* ---------- chat list (Views/Chat/Index.cshtml): long names never widen the page ----------
   Each row is a flex container, and a flex item's automatic minimum width is its content width, so a long unbroken
   name or message preview (a group called "Supercalifragilistic...", a pasted URL) kept the item at full length and
   overflowed the row/card to the side. Those items may shrink below their content and break the text anywhere. */
.pt-chat-index-name,
.pt-chat-index-row,
.pt-chat-index-link {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pt-chat-index-row > .pt-avatar-link,
.pt-chat-index-row > .pt-avatar-wrap {
  flex-shrink: 0;
}

/* ---------- Groups page investment cards (photo/badge style) ---------- */
/* Copied and adapted from Home.css's .group-card family (landing page),
   scoped to a 2-column grid for the narrower col-lg-8 column on /Groups.
   Renamed to avoid colliding with .group-card (Home.css, 3-column layout)
   and the existing .pt-group-card header-bar class this replaces here. */
.pt-groups-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Divider between the standard groups and groups created from members' requests:
   a rule across the column with the label centred on it. */
.pt-groups-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 18px;
  color: var(--ink-700);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pt-groups-divider::before,
.pt-groups-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}

.pt-group-media-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
  display: flex;
  flex-direction: column;
}

.pt-group-media-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}

.pt-group-media {
  position: relative;
  height: 140px;
  overflow: hidden;
}

.pt-group-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.pt-group-media-card:hover .pt-group-media img {
  transform: scale(1.09);
}

.pt-group-card-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.pt-group-card-body h4 {
  font-size: 16px;
  margin-bottom: 6px;
}

.pt-group-card-body p {
  font-size: 13px;
  color: var(--ink-500);
  margin-bottom: 12px;
}

.pt-group-card-body p.small {
  font-size: 11.5px;
}

.pt-group-card-body .pt-group-card-action {
  margin-top: auto;
}

/* Primary action plus the admin-only Remove button, side by side. */
.pt-group-card-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 767.98px) {
  .pt-groups-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- PoolRide live tracking ---------- */
.pt-ride-map {
  height: 360px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}

.pt-ride-track-status {
  font-size: 0.85rem;
  color: var(--ink-500);
  min-height: 1.2em;
  margin-bottom: 0.5rem;
}

/* ---------- scrollable long lists (queues, activity feeds, logs) ----------
   Any list/table whose length grows with usage (an admin review queue, a
   user's activity/payment history, a chat conversation list) must not be
   allowed to grow the page indefinitely — a long one pushes the footer far
   below the fold and leaves almost no breathing room between the last row
   and the footer band. Capping the panel's height and scrolling internally
   keeps the page height stable regardless of how much data it holds. Values
   mirror .pt-network-posts, this codebase's original instance of this
   pattern (Groups/Index's Business Network panel). */
.pt-scroll-panel {
  overflow-y: auto;
}

@media (min-width: 992px) {
  .pt-scroll-panel {
    max-height: calc(100vh - 280px);
  }
}

@media (max-width: 991.98px) {
  .pt-scroll-panel {
    max-height: 60vh;
  }
}

/* A <table>'s own <thead> would otherwise scroll out of view with the rest
   of the table body inside a .pt-scroll-panel — pin it so column headers
   stay visible while the rows scroll underneath. */
.pt-scroll-panel table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--white);
}

/* ---------- Group request images ---------- */
/* Small square thumbnail beside a request's name in the request tables. */
.pt-request-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  vertical-align: middle;
}

/* Preview under the file input on the request form, before submitting. */
.pt-request-preview {
  display: block;
  max-width: 100%;
  max-height: 200px;
  margin-top: 0.75rem;
  object-fit: cover;
  border-radius: 8px;
}

/* ---------- My Account: wallet & activity ---------- */
.pt-wallet-card h3 {
  color: var(--blue-700);
}

.pt-account-activity .list-group-item {
  border-left: none;
  border-right: none;
}

.pt-account-activity .list-group-item:first-child {
  border-top: none;
}

/* ---------- PTBN post attachments ---------- */
.pt-attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.pt-attachment-image {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

.pt-attachment-image img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
}

.pt-attachment-image figcaption {
  padding: 8px 12px;
  font-size: 0.8rem;
  color: var(--ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-attachment-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-700);
}

.pt-attachment-download:hover {
  color: var(--blue-700);
  border-color: var(--blue-700);
}

.pt-attachment-image .pt-attachment-download {
  position: absolute;
  top: 8px;
  right: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pt-attachment-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.pt-attachment-file-text {
  flex: 1 1 auto;
  min-width: 0;
}

.pt-attachment-file-name {
  color: var(--ink-900);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-attachment-file-meta {
  color: var(--ink-500);
  font-size: 0.8rem;
}

/* ---------- group chat hero ----------
   A compact take on the sign-up hero (Home.css .hero): same diagonal gradient, blurred blobs,
   pill and illustration, at roughly a third of the height. Home.css is not loaded in the app
   layout, so everything the hero needs is defined here, scoped under .pt-chat-hero. */
.pt-chat-hero {
  background: linear-gradient(135deg, var(--navy-950) 0%, var(--blue-700) 38%, var(--blue-500) 68%, #A9C2CE 100%);
  position: relative;
  overflow: hidden;
  padding: 44px 0 36px;
  margin-bottom: 24px;
}

/* The nav carries mb-3 for ordinary pages; drop it when the hero follows so the gradient meets the nav border. */
body:has(.pt-chat-hero) .pt-navbar {
  margin-bottom: 0 !important;
}

.pt-chat-hero .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.3;
  pointer-events: none;
}

.pt-chat-hero .blob1 {
  width: 360px;
  height: 360px;
  background: var(--blue-500);
  top: -140px;
  right: -90px;
  animation: pt-chat-hero-float1 16s ease-in-out infinite;
}

.pt-chat-hero .blob2 {
  width: 260px;
  height: 260px;
  background: var(--gold-500);
  bottom: -120px;
  left: -80px;
  opacity: 0.14;
  animation: pt-chat-hero-float2 20s ease-in-out infinite;
}

@keyframes pt-chat-hero-float1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-30px, 36px); }
}

@keyframes pt-chat-hero-float2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -22px); }
}

@keyframes pt-chat-hero-pulse {
  0% { box-shadow: 0 0 0 0 rgba(23, 199, 132, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(23, 199, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(23, 199, 132, 0); }
}

/* z-index lifts the content above the absolutely positioned blobs */
.pt-chat-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 32px;
  position: relative;
  z-index: 2;
}

.pt-chat-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.pt-chat-hero-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gain);
  animation: pt-chat-hero-pulse 1.8s infinite;
}

.pt-chat-hero h1 {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.15;
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}

.pt-chat-hero-lead {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  max-width: 560px;
  margin-bottom: 20px;
  overflow-wrap: anywhere;
  /* the description is meant to be brief: a long one is cut at three lines on every screen size so it
     cannot push the conversation off the first screen */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* a group with no description just shows the name and buttons */
.pt-chat-hero-lead:empty {
  display: none;
}

.pt-chat-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* "My dashboard": solid white with blue text; "Back to chat": translucent outline. */
.pt-chat-hero-btn-light {
  background-color: #fff;
  border-color: #fff;
  color: var(--btn-blue);
}

/* Bootstrap's .btn:focus-visible / :active rules out-rank the single-class colours above, so the hover, focus and
   pressed states are restated together here (otherwise the buttons lose their colours on keyboard focus). */
.pt-chat-hero-btn-light:hover,
.pt-chat-hero-btn-light:focus-visible,
.btn.pt-chat-hero-btn-light:active {
  background-color: var(--sky-100);
  border-color: var(--sky-100);
  color: var(--btn-blue);
}

.pt-chat-hero-btn-light:hover {
  transform: translateY(-1px);
}

.pt-chat-hero-btn-outline {
  background-color: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff;
}

.pt-chat-hero-btn-outline:hover,
.pt-chat-hero-btn-outline:focus-visible,
.btn.pt-chat-hero-btn-outline:active {
  background-color: rgba(255, 255, 255, 0.26);
  border-color: #fff;
  color: #fff;
}

.pt-chat-hero-btn-outline:hover {
  transform: translateY(-1px);
}

/* Visible focus ring for keyboard users on the dark gradient. */
.pt-chat-hero-btn-light:focus-visible,
.pt-chat-hero-btn-outline:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.pt-chat-hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pt-chat-hero-visual img {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.3));
}

@media (max-width: 767.98px) {
  .pt-chat-hero {
    padding: 32px 0 28px;
  }

  .pt-chat-hero-grid {
    grid-template-columns: 1fr;
  }

  .pt-chat-hero-visual {
    display: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  .pt-chat-hero .blob,
  .pt-chat-hero-pill .dot {
    animation: none;
  }
}

/* ---------- Chat composer (Views/Chat/_Composer.cshtml) ---------- */
/* Multi-line message box + paperclip + Send, shared by group, direct, ride and Business Network chats. */
.chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.chat-composer-field {
  flex: 1 1 auto;
  min-width: 0;
}

textarea.chat-composer-input {
  display: block;
  resize: none;
  min-height: 5.5rem; /* three comfortable lines before it starts to grow */
  line-height: 1.45;
  padding: 0.6rem 0.8rem;
  overflow-y: hidden;
}

.chat-composer-hint {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--ink-500, #6b7a90);
}

.chat-attach-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-bottom: 1.35rem; /* line up with the textarea, not the hint line below it */
  cursor: pointer;
}

.chat-send-btn {
  flex: 0 0 auto;
  min-height: 44px;
  margin-bottom: 1.35rem;
}

/* The picked file, shown instead of the browser's "No file chosen". */
.chat-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin-bottom: 6px;
  padding: 3px 6px 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--sky-100);
  font-size: 0.85rem;
}

.chat-attachment-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-attachment-chip-clear {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.chat-attachment-chip-clear:hover,
.chat-attachment-chip-clear:focus-visible {
  background: rgba(0, 0, 0, 0.1);
}

/* Messages keep the line breaks their author typed. */
.message-body > span {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  /* phone: the box takes the full width, paperclip and Send share the row below it */
  .chat-composer {
    flex-wrap: wrap;
    align-items: center;
  }

  .chat-composer-field {
    flex: 1 1 100%;
  }

  .chat-attach-btn,
  .chat-send-btn {
    margin-bottom: 0;
  }

  .chat-send-btn {
    flex: 1 1 auto;
  }

  .chat-composer-hint {
    display: none; /* no Shift key on a phone keyboard */
  }
}

/* ---------- Business Network thread: click-to-open options (chat.js) ---------- */
.pt-post-card {
  cursor: pointer;
}

.pt-post-card:focus-visible {
  outline: 2px solid var(--blue-700);
  outline-offset: 2px;
}

/* the controls inside the post keep their own pointer */
.pt-post-card a,
.pt-post-card button,
.pt-post-card img {
  cursor: pointer;
}

.chat-clickable .chat-row {
  cursor: pointer;
}

/* text areas and links inside a clickable row keep their usual cursors */
.chat-clickable .chat-edit-wrapper,
.chat-clickable .chat-edit-wrapper * {
  cursor: auto;
}

/* ---------- Paperclip icon (Views/Shared/_PaperclipIcon.cshtml) ---------- */
.pt-icon {
  flex-shrink: 0;
  vertical-align: -0.125em; /* sits on the text baseline instead of floating above it */
}

.chat-attach-btn .pt-icon {
  width: 1.3rem;
  height: 1.3rem;
}

.chat-attachment-chip .pt-icon {
  width: 1rem;
  height: 1rem;
}

/* ---------- dashboard "My groups" panel ----------
   Sits to the right of the stat cards on xl screens (a single scrollable column) and below them on smaller
   screens, where the entries flow into a responsive grid. Logical properties keep it correct in right-to-left. */
.pt-mygroups .card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--white);
  color: var(--ink-700);
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}

.pt-mygroups-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.25rem;
  padding: 0.5rem;
}

@media (min-width: 1200px) {
  .pt-mygroups-list {
    grid-template-columns: minmax(0, 1fr);
    max-height: 9.5rem;
    overflow-y: auto;
  }
}

.pt-mygroups-list > li {
  min-width: 0;
}

.pt-mygroup {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
  color: var(--ink-700);
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.15s ease;
}

.pt-mygroup:hover,
.pt-mygroup:focus-visible {
  background-color: var(--sky-100);
  color: var(--blue-700);
}

.pt-mygroup.is-current {
  background-color: var(--sky-100);
  color: var(--blue-700);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--blue-700);
}

[dir="rtl"] .pt-mygroup.is-current {
  box-shadow: inset -3px 0 0 var(--blue-700);
}

.pt-mygroup-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: cover;
}

.pt-mygroup-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-700);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}

.pt-mygroup-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Chat icon (Views/Shared/_ChatIcon.cshtml) ----------
   Replaces the word "Chat" in the navigation; the link keeps a visually hidden label and a tooltip. */
.pt-icon-chat {
  height: 1.9rem;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.pt-nav-icon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px; /* touch target: the root font size is 14px below 768px, which would make the 1.9rem icon link 41px */
}

/* The icon is taller than a text link. In the stacked (hamburger) menu that is fine and gives a 46px touch target. In
   a single-row navbar the extra height is pulled back with a negative margin so the row does not grow, and the item
   is centred so the icon lines up with the text of the other links. */
.pt-navbar .nav-item:has(> .pt-nav-icon-link) {
  display: flex;
  align-items: center;
}

@media (min-width: 576px) {
  .navbar-expand-sm .pt-nav-icon-link {
    margin-block: -0.4rem;
  }
}

@media (min-width: 1400px) {
  .navbar-expand-xxl .pt-nav-icon-link {
    margin-block: -0.4rem;
  }
}

/* The icon is a fixed two-colour mark, so the text-colour hover of the other links does not apply; dim it slightly. */
.pt-nav-icon-link .pt-icon-chat {
  transition: opacity 0.15s ease;
}

.pt-nav-icon-link:hover .pt-icon-chat,
.pt-nav-icon-link:focus-visible .pt-icon-chat,
.pt-nav-icon-link:hover .pt-icon-groups,
.pt-nav-icon-link:focus-visible .pt-icon-groups {
  opacity: 0.8;
}

/* ---------- Groups icon (Views/Shared/_GroupsIcon.cshtml) ----------
   A round badge, as tall as the Chat icon so the two line up in the navigation. */
.pt-icon-groups {
  height: 1.9rem;
  width: 1.9rem;
  display: block;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}

/* A page heading with the chat icon in front of its text (Chat page). The icon is sized from the heading's font. */
.pt-heading-with-icon {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pt-heading-with-icon .pt-icon-chat {
  height: 1.3em;
}

/* ---------- live heading (Groups page) ----------
   A red dot that pulses and fades beside the heading to show the content is live, like the landing page's dot
   (Home.css .eyebrow .dot) but red. Switched off for people who ask their system for reduced motion. */
.pt-live-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.pt-live-dot {
  flex-shrink: 0;
  width: 0.35em;
  height: 0.35em;
  /* Centred on the first line of the heading, so a heading that wraps keeps the dot beside its first line. */
  margin-top: calc((1.2em - 0.35em) / 2);
  border-radius: 50%;
  background: #E5322D;
  box-shadow: 0 0 0 0 rgba(229, 50, 45, 0.6);
  animation: pt-live-blink 1.4s ease-in-out infinite;
}

@keyframes pt-live-blink {
  0% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(229, 50, 45, 0.6);
  }

  50% {
    opacity: 0.35;
  }

  70% {
    box-shadow: 0 0 0 0.3em rgba(229, 50, 45, 0);
  }

  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(229, 50, 45, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pt-live-dot {
    animation: none;
  }
}