/* ═══════════════════════════════════════════════════════════════
   PAGE: Managely Chat (/erp-chat) | Namespace: pgc-* | File: /static/css/shell/mani-erp-chat-ltr.css
   Built on the shared .appx-* app-page system (mani-globals-ltr.css).
   Accent = blue (matches the POS app-page). Logical properties throughout → RTL-safe.
   ═══════════════════════════════════════════════════════════════ */

.pg-chat {
   --app-accent: var(--blue);
   --acc-d: var(--blue-d);
   --acc-l: var(--blue-l);
   --acc-xl: var(--blue-xl);
}

@keyframes processingGlow {

    0%,
    100% {
        opacity: 0.35;
    }

    50% {
        opacity: 0.8;
    }
}

.pg-chat .appx-badge {
   background: var(--blue-l);
   border-color: var(--blue-xl);
   color: var(--blue-d);
}

/* soft shadows shared by the mockups */
/* The chat page used to redefine --sh-s/m/l with green-tinted values of its own.
   That is the drift the scale exists to remove, so the override is gone and the
   page now sits at the same heights as every other page. */

/* ── Hero visual: chat panel over an ERP invoice ── */
.pgc-stage {
   max-width: 760px;
   margin-inline: auto;
   margin-block-start: 40px;
}

.pgc-erp {
   position: relative;
   border-radius: var(--r-xl);
   border: 1px solid var(--mist);
   background: var(--white);
   box-shadow: var(--sh-l);
   overflow: hidden;
}

.pgc-erp-bar {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 11px 14px;
   background: var(--snow);
   border-block-end: 1px solid var(--mist);
}

.pgc-tl {
   display: flex;
   gap: 6px;
}

.pgc-tl i {
   inline-size: 10px;
   block-size: 10px;
   border-radius: 50%;
   background: var(--mist);
}

.pgc-url {
   margin-inline-start: 8px;
   font-size: var(--fs-2xs);
   color: var(--silver);
   font-weight: 600;
}

.pgc-erp-body {
   position: relative;
   min-block-size: 320px;
}

.pgc-doc {
   padding: 18px 18px 22px;
}

.pgc-crumb {
   font-size: var(--fs-2xs);
   color: var(--silver);
   font-weight: 600;
   margin-block-end: 6px;
}

.pgc-doc-title {
   font-size: var(--fs-lead);
   font-weight: 800;
   color: var(--ink2);
   display: flex;
   align-items: center;
   gap: 10px;
}

.pgc-badge-amber {
   font-size: var(--fs-micro);
   font-weight: 700;
   color: var(--amber-d);
   background: var(--amber-l);
   border: 1px solid var(--amber);
   border-radius: 6px;
   padding: 2px 7px;
}

.pgc-rows {
   margin-block-start: 14px;
   display: grid;
   gap: 9px;
}

.pgc-line {
   block-size: 9px;
   border-radius: 5px;
   background: var(--mist);
   opacity: .55;
}

.pgc-line.s {
   inline-size: 62%;
}

.pgc-line.m {
   inline-size: 82%;
}

.pgc-line.l {
   inline-size: 94%;
}

.pgc-tot {
   margin-block-start: 16px;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   padding-block-start: 14px;
   border-block-start: 1px dashed var(--mist);
}

.pgc-k {
   font-size: var(--fs-2xs);
   color: var(--slate);
   font-weight: 600;
}

.pgc-v {
   font-size: var(--fs-h4);
   font-weight: 800;
   color: var(--ink2);
}

.pgc-due {
   font-size: var(--fs-2xs);
   color: var(--red-d);
   font-weight: 700;
   background: var(--red-l);
   border: 1px solid var(--red-xl);
   border-radius: 6px;
   padding: 2px 8px;
}

.pgc-panel {
   position: absolute;
   inset-inline-end: 14px;
   inset-block-end: 14px;
   inline-size: 270px;
   max-inline-size: calc(100% - 28px);
   border-radius: 16px;
   background: var(--white);
   border: 1px solid var(--mist);
   box-shadow: var(--sh-l);
   overflow: hidden;
   text-align: start;
}

.pgc-panel-top {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 10px 12px;
   background: var(--white);
   border-block-end: 1px solid var(--mist);
}

.pgc-av {
   inline-size: 26px;
   block-size: 26px;
   border-radius: 8px;
   background: var(--ink2);
   color: #fff;
   display: grid;
   place-items: center;
   font-size: var(--fs-xs);
   font-weight: 800;
}

.pgc-panel-top b {
   font-size: var(--fs-sm);
   color: var(--ink2);
}

.pgc-pres {
   margin-inline-start: auto;
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: var(--fs-micro);
   color: var(--slate);
   font-weight: 700;
}

.pgc-pres i {
   inline-size: 7px;
   block-size: 7px;
   border-radius: 50%;
   background: var(--blue);
}

.pgc-panel-body {
   padding: 12px;
   display: flex;
   flex-direction: column;
   gap: 9px;
   background: var(--snow);
}

.pgc-b {
   max-inline-size: 88%;
   font-size: var(--fs-xs);
   line-height: 1.45;
   padding: 8px 11px;
   border-radius: 13px;
   box-shadow: var(--sh-s);
}

.pgc-b.in {
   align-self: flex-start;
   background: var(--white);
   color: var(--ink);
   border-end-start-radius: 4px;
}

.pgc-b.out {
   align-self: flex-end;
   background: var(--blue-xl);
   color: var(--blue-d);
   border-end-end-radius: 4px;
}

/* shared record card (used in panel + share section) */
.pgc-rec {
   align-self: stretch;
   border: 1px solid var(--mist);
   border-radius: 12px;
   background: var(--white);
   box-shadow: var(--sh-s);
   overflow: hidden;
}

.pgc-rec-top {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 9px 11px;
   border-block-end: 1px solid var(--snow);
}

.pgc-rec-ic {
   inline-size: 24px;
   block-size: 24px;
   border-radius: 7px;
   background: var(--blue-l);
   color: var(--blue-d);
   display: grid;
   place-items: center;
   flex: none;
}

.pgc-rec-ic i {
   font-size: var(--fs-xs);
}

.pgc-rec-t {
   font-size: var(--fs-xs);
   font-weight: 800;
   color: var(--ink2);
   line-height: 1.2;
}

.pgc-rec-t small {
   display: block;
   font-weight: 600;
   color: var(--silver);
   font-size: var(--fs-micro);
}

.pgc-rec-meta {
   padding: 8px 11px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 6px 10px;
}

.pgc-rec-meta div {
   font-size: var(--fs-micro);
   color: var(--slate);
}

.pgc-rec-meta b {
   display: block;
   font-size: var(--fs-xs);
   color: var(--ink2);
   font-weight: 700;
}

.pgc-rec-open {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 11px;
   border-block-start: 1px solid var(--snow);
   font-size: var(--fs-2xs);
   font-weight: 700;
   color: var(--blue-d);
}

/* ── Two halves ── */
.pgc-halves {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: stretch;
   border: 1px solid var(--mist);
   border-radius: var(--r-xl);
   overflow: hidden;
   background: var(--white);
   text-align: start;
   max-width: 980px;
   margin-inline: auto;
}

.pgc-half {
   padding: 32px 30px;
}

.pgc-half h3 {
   font-weight: 800;
   margin: 0 0 8px;
   display: flex;
   align-items: center;
   gap: 10px;
}

.pgc-hi {
   inline-size: 34px;
   block-size: 34px;
   border-radius: 10px;
   display: grid;
   place-items: center;
   flex: none;
}

.pgc-hi.team {
   background: var(--blue-l);
   color: var(--blue-d);
}

.pgc-hi.web {
   background: var(--blue-l);
   color: var(--blue);
}

.pgc-half>p {
   color: var(--slate);
   margin: 0;
}

.pgc-half ul {
   margin: 16px 0 0;
   padding: 0;
   list-style: none;
   display: grid;
   gap: 9px;
}

.pgc-half li {
   display: flex;
   gap: 9px;
   color: var(--ink2);
   align-items: flex-start;
}

.pgc-half li i {
   color: var(--blue);
   margin-block-start: 3px;
}

.pgc-mid {
   display: grid;
   place-items: center;
   background: var(--snow);
   border-inline: 1px solid var(--mist);
   padding-inline: 10px;
   min-inline-size: 120px;
}

.pgc-inbox {
   text-align: center;
}

.pgc-ring {
   inline-size: 56px;
   block-size: 56px;
   border-radius: 50%;
   background: var(--white);
   border: 2px solid var(--blue-xl);
   display: grid;
   place-items: center;
   margin: 0 auto 8px;
   box-shadow: var(--sh-s);
   color: var(--blue);
}

.pgc-inbox b {
   color: var(--blue-d);
   font-weight: 800;
   letter-spacing: .04em;
   text-transform: uppercase;
}

.pgc-inbox span {
   display: block;
   color: var(--slate);
   margin-block-start: 2px;
}

@media (max-width: 820px) {
   .pgc-halves {
      grid-template-columns: 1fr;
   }

   .pgc-mid {
      border-inline: 0;
      border-block: 1px solid var(--mist);
      padding-block: 20px;
   }
}

/* ── Before / after ── */
/* No max-width: the row shares the section's width (.appx-mx, 1180 - 48 padding),
   so it lines up with the card grid under it instead of being 152px narrower.
   The bottom margin is deliberately larger than the grid's own 18px gap - the
   space between two different blocks has to read as bigger than the space
   between three peers, or the two blocks look like one broken block. */
.pgc-ba {
   display: grid;
   gap: 14px;
   margin-inline: auto;
   margin-block-end: 26px;
   text-align: start;
}

.pgc-ba-row {
   display: grid;
   grid-template-columns: 1fr auto 1.15fr;
   gap: 16px;
   align-items: center;
   border: 1px solid var(--mist);
   border-radius: var(--r-l);
   background: var(--white);
   padding: 16px 18px;
   box-shadow: var(--sh-s);
}

.pgc-tag {
   font-weight: 800;
   letter-spacing: .05em;
   text-transform: uppercase;
   display: block;
   margin-block-end: 5px;
}

.pgc-before .pgc-tag {
   color: var(--silver);
}

.pgc-after .pgc-tag {
   color: var(--blue-d);
}

.pgc-before p {
   color: var(--slate);
   margin: 0;
}

.pgc-after p {
   color: var(--ink2);
   font-weight: 600;
   margin: 0;
}

.pgc-ba-arrow {
   inline-size: 34px;
   block-size: 34px;
   border-radius: 50%;
   background: var(--blue-l);
   display: grid;
   place-items: center;
   flex: none;
   color: var(--blue);
}

[dir="rtl"] .pgc-ba-arrow i {
   transform: scaleX(-1);
}

@media (max-width: 720px) {
   .pgc-ba-row {
      grid-template-columns: 1fr;
   }

   /* The row stacks, so the arrow turns to point down the page. The RTL flip
     above is for a horizontal row only - composed with this rotation it aims
     the Arabic arrow back up the page, against the flow. */
   .pgc-ba-arrow {
      transform: rotate(90deg);
   }

   [dir="rtl"] .pgc-ba-arrow i {
      transform: none;
   }
}

/* ── Comparison ── */
.pgc-cmp {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   text-align: start;
}

.pgc-col {
   border-radius: var(--r-xl);
   border: 1px solid var(--mist);
   overflow: hidden;
   background: var(--white);
}

.pgc-col.bad {
   border-color: var(--red-xl);
}

.pgc-col-head {
   padding: 18px 22px;
   font-weight: 800;
   display: flex;
   align-items: center;
   gap: 10px;
}

.pgc-col.bad .pgc-col-head {
   background: var(--red-l);
   color: var(--red-d);
   border-block-end: 1px solid var(--red-xl);
}

.pgc-col.good .pgc-col-head {
   background: var(--blue-l);
   color: var(--blue-d);
   border-block-end: 1px solid var(--blue-xl);
}

.pgc-col-ic {
   inline-size: 30px;
   block-size: 30px;
   border-radius: 9px;
   display: grid;
   place-items: center;
   flex: none;
   background: #fff;
}

.pgc-col.bad .pgc-col-ic {
   color: var(--red);
}

.pgc-col.good .pgc-col-ic {
   color: var(--blue);
}

.pgc-cmp-list {
   list-style: none;
   padding: 8px 0;
   margin: 0;
}

.pgc-cmp-list li {
   display: flex;
   gap: 12px;
   padding: 14px 22px;
   border-block-start: 1px solid var(--snow);
   align-items: flex-start;
}

.pgc-cmp-list li:first-child {
   border-block-start: 0;
}

.pgc-mk {
   inline-size: 20px;
   block-size: 20px;
   border-radius: 6px;
   flex: none;
   display: grid;
   place-items: center;
   margin-block-start: 1px;
}

.pgc-col.bad .pgc-mk {
   background: var(--red-l);
   color: var(--red);
}

.pgc-col.good .pgc-mk {
   background: var(--blue-l);
   color: var(--blue-d);
}

.pgc-cmp-list b {
   display: block;
   color: var(--ink2);
   margin-block-end: 2px;
}

.pgc-cmp-list span {
   color: var(--slate);
   line-height: 1.5;
}

@media (max-width: 820px) {
   .pgc-cmp {
      grid-template-columns: 1fr;
   }
}

/* ── Share: search + per-reader card ── */
.pgc-share {
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   gap: 44px;
   align-items: center;
   text-align: start;
}

@media (max-width: 900px) {
   .pgc-share {
      grid-template-columns: 1fr;
      gap: 34px;
   }
}

.pgc-searchbox {
   border: 1px solid var(--mist);
   border-radius: var(--r-l);
   background: var(--white);
   box-shadow: var(--sh-m);
   overflow: hidden;
}

.pgc-searchbar {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 13px 15px;
   border-block-end: 1px solid var(--mist);
   color: var(--silver);
}

.pgc-searchbar span {
   color: var(--ink);
   font-weight: 600;
}

.pgc-res {
   padding: 8px;
}

.pgc-res-h {
   font-weight: 800;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--silver);
   padding: 8px 10px 4px;
}

.pgc-res-item {
   display: flex;
   align-items: center;
   gap: 11px;
   padding: 9px 10px;
   border-radius: 10px;
}

.pgc-res-item.act {
   background: var(--blue-l);
}

.pgc-res-ic {
   inline-size: 30px;
   block-size: 30px;
   border-radius: 8px;
   background: var(--snow);
   border: 1px solid var(--mist);
   display: grid;
   place-items: center;
   flex: none;
   color: var(--slate);
}

.pgc-res-item.act .pgc-res-ic {
   background: #fff;
   color: var(--blue-d);
   border-color: var(--blue-xl);
}

.pgc-res-t {
   font-weight: 700;
   color: var(--ink2);
}

.pgc-res-t small {
   display: block;
   font-weight: 500;
   color: var(--silver);
}

.pgc-res-amt {
   margin-inline-start: auto;
   font-weight: 700;
   color: var(--ink2);
}

.pgc-res-amt.due {
   color: var(--red-d);
}

.pgc-reader-card {
   border: 1px solid var(--mist);
   border-radius: var(--r-l);
   background: var(--white);
   box-shadow: var(--sh-l);
   overflow: hidden;
   max-inline-size: 360px;
   margin-inline: auto;
}

.pgc-rcx-top {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 14px 16px;
   border-block-end: 1px solid var(--snow);
}

.pgc-rcx-ic {
   inline-size: 34px;
   block-size: 34px;
   border-radius: 9px;
   background: var(--blue-l);
   color: var(--blue-d);
   display: grid;
   place-items: center;
   flex: none;
}

.pgc-rcx-t b {
   color: var(--ink2);
   font-weight: 800;
   display: block;
}

.pgc-rcx-t small {
   color: var(--silver);
}

.pgc-rcx-meta {
   padding: 6px 16px 14px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
}

.pgc-rcx-meta .cell span {
   color: var(--slate);
   display: block;
   margin-block-end: 1px;
}

.pgc-rcx-meta .cell b {
   color: var(--ink2);
   font-weight: 700;
}

.pgc-rcx-meta .cell.money b {
   color: var(--blue-d);
}

.pgc-rcx-meta .cell.hide b {
   color: var(--silver);
   letter-spacing: 1px;
}

.pgc-rcx-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 11px 16px;
   border-block-start: 1px solid var(--snow);
   font-weight: 700;
   color: var(--blue-d);
}

/* Centred like its two siblings. inline-flex shrink-wraps but does not centre,
   so the pill sat 78px off the column's middle. */
.pgc-reader-toggle {
   display: flex;
   inline-size: fit-content;
   margin-inline: auto;
   background: var(--snow);
   border: 1px solid var(--mist);
   border-radius: 100px;
   padding: 4px;
   margin-block-end: 18px;
}

.pgc-reader-toggle button {
   border: 0;
   background: transparent;
   font-family: inherit;
   font-weight: 700;
   color: var(--slate);
   padding: 7px 16px;
   border-radius: 100px;
   cursor: pointer;
   transition: .2s;
}

.pgc-reader-toggle button.on {
   background: var(--white);
   color: var(--blue-d);
   box-shadow: var(--sh-s);
}

.pgc-reader-note {
   color: var(--slate);
   margin-block-start: 14px;
   max-inline-size: 340px;
   margin-inline: auto;
   text-align: center;
}

/* ── Poll ── */
.pgc-poll-wrap {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 44px;
   align-items: center;
   text-align: start;
}

@media (max-width: 820px) {
   .pgc-poll-wrap {
      grid-template-columns: 1fr;
      gap: 30px;
   }
}

.pgc-poll {
   max-inline-size: 400px;
   border: 1px solid var(--mist);
   border-radius: 16px;
   background: var(--white);
   box-shadow: var(--sh-l);
   overflow: hidden;
   margin-inline: auto;
}

.pgc-poll-h {
   padding: 14px 16px 12px;
}

.pgc-poll-q {
   font-weight: 800;
   color: var(--ink2);
}

.pgc-poll-sub {
   color: var(--silver);
   margin-block-start: 3px;
}

.pgc-poll-opts {
   padding: 0 16px 8px;
   display: grid;
   gap: 9px;
}

.pgc-poll-opt {
   position: relative;
   border: 1px solid var(--mist);
   border-radius: 11px;
   padding: 11px 13px;
   overflow: hidden;
}

.pgc-poll-opt .fill {
   position: absolute;
   inset-block: 0;
   inset-inline-start: 0;
   background: var(--blue-l);
   inline-size: var(--w, 0);
}

.pgc-poll-opt.win {
   border-color: var(--blue-xl);
}

.pgc-pi {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.pgc-plabel {
   font-weight: 700;
   color: var(--ink2);
   display: flex;
   align-items: center;
   gap: 8px;
}

.pgc-plabel i.y {
   color: var(--blue);
}

.pgc-plabel i.n {
   color: var(--slate);
}

.pgc-pct {
   font-weight: 800;
   color: var(--blue-d);
}

.pgc-pct.mut {
   color: var(--slate);
}

.pgc-preason {
   position: relative;
   color: var(--slate);
   margin-block-start: 6px;
   padding-inline-start: 8px;
   border-inline-start: 2px solid var(--blue-xl);
}

.pgc-poll-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 11px 16px;
   border-block-start: 1px solid var(--snow);
   color: var(--slate);
}

.pgc-closed {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-weight: 700;
   color: var(--blue-d);
}

/* ── Website side: live visitors + widget mockup ── */
.pgc-web {
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   gap: 20px;
   text-align: start;
}

@media (max-width: 900px) {
   .pgc-web {
      grid-template-columns: 1fr;
   }
}

.pgc-lv {
   border: 1px solid var(--mist);
   border-radius: var(--r-l);
   background: var(--white);
   box-shadow: var(--sh-m);
   overflow: hidden;
}

.pgc-lv-top {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 13px 16px;
   border-block-end: 1px solid var(--mist);
   background: var(--snow);
}

.pgc-live {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-weight: 800;
   color: var(--blue-d);
}

.pgc-live i {
   inline-size: 8px;
   block-size: 8px;
   border-radius: 50%;
   background: var(--blue);
   animation: pgcpulse 1.6s infinite;
}

@keyframes pgcpulse {
   0% {
      box-shadow: 0 0 0 0 rgba(37, 99, 235, .4);
   }

   70% {
      box-shadow: 0 0 0 7px rgba(37, 99, 235, 0);
   }

   100% {
      box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
   }
}

.pgc-lv-count {
   margin-inline-start: auto;
   font-size: var(--fs-2xs);
   color: var(--slate);
   font-weight: 600;
}

.pgc-lv-row {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 16px;
   border-block-start: 1px solid var(--snow);
}

.pgc-flag {
   inline-size: 28px;
   block-size: 26px;
   border-radius: 7px;
   background: var(--snow);
   border: 1px solid var(--mist);
   display: grid;
   place-items: center;
   font-weight: 800;
   color: var(--slate);
   letter-spacing: .5px;
   flex: none;
}

.pgc-lv-info {
   min-inline-size: 0;
}

.pgc-lv-info b {
   color: var(--ink2);
   font-weight: 700;
   display: block;
}

.pgc-lv-info span {
   color: var(--silver);
   display: block;
}

.pgc-lv-meta {
   margin-inline-start: auto;
   text-align: end;
   flex: none;
}

.pgc-lv-loc {
   color: var(--slate);
   font-weight: 600;
}

.pgc-lv-start {
   margin-block-start: 4px;
   font-weight: 800;
   color: var(--blue-d);
   background: var(--blue-l);
   border: 1px solid var(--blue-xl);
   border-radius: 100px;
   padding: 3px 9px;
   display: inline-flex;
   align-items: center;
   gap: 5px;
}

[dir="rtl"] .pgc-lv-start i {
   transform: scaleX(-1);
}

/* website widget mockup */
.pgc-wid {
   border: 1px solid var(--mist);
   border-radius: var(--r-l);
   background: var(--white);
   box-shadow: var(--sh-m);
   overflow: hidden;
   display: flex;
   flex-direction: column;
}

.pgc-wid-top {
   background: var(--ink);
   color: #fff;
   padding: 13px 15px;
   display: flex;
   align-items: center;
   gap: 10px;
}

.pgc-wid-top .av {
   inline-size: 32px;
   block-size: 32px;
   border-radius: 9px;
   background: rgba(255, 255, 255, .14);
   display: grid;
   place-items: center;
   font-weight: 800;
}

.pgc-wid-top b {
   display: block;
}

.pgc-wid-top span {
   color: #94a3b8;
   display: flex;
   align-items: center;
   gap: 5px;
}

.pgc-wid-top span i {
   inline-size: 6px;
   block-size: 6px;
   border-radius: 50%;
   background: #93c5fd;
}

.pgc-wid-body {
   padding: 14px;
   display: flex;
   flex-direction: column;
   gap: 9px;
   background: var(--snow);
   flex: 1;
}

.pgc-wb {
   max-inline-size: 86%;
   line-height: 1.45;
   padding: 9px 12px;
   border-radius: 13px;
   box-shadow: var(--sh-s);
}

.pgc-wb.bot {
   align-self: flex-start;
   background: var(--white);
   color: var(--ink);
   border-end-start-radius: 4px;
}

.pgc-wb.me {
   align-self: flex-end;
   background: var(--ink2);
   color: #fff;
   border-end-end-radius: 4px;
}

.pgc-wb-field {
   align-self: stretch;
   background: var(--white);
   border: 1px solid var(--blue-xl);
   border-radius: 12px;
   padding: 10px 12px;
   display: flex;
   align-items: center;
   gap: 8px;
   box-shadow: var(--sh-s);
}

.pgc-wb-field .cc {
   font-weight: 800;
   color: var(--blue-d);
   background: var(--blue-l);
   border-radius: 6px;
   padding: 2px 7px;
   flex: none;
}

.pgc-wb-field span {
   color: var(--ink2);
   font-weight: 600;
}

.pgc-wb-field i {
   margin-inline-start: auto;
   color: var(--blue);
}

.pgc-wid-input {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 11px;
   border-block-start: 1px solid var(--mist);
   background: var(--white);
}

.pgc-wid-input .ph {
   flex: 1;
   border: 1px solid var(--mist);
   border-radius: 100px;
   padding: 9px 13px;
   color: var(--silver);
}

.pgc-wid-input .snd {
   inline-size: 34px;
   block-size: 34px;
   border-radius: 11px;
   background: var(--blue);
   color: #fff;
   display: grid;
   place-items: center;
   flex: none;
}

/* ── Closing line ── */
.pgc-close-line {
   font-size: clamp(18px, 2.4vw, 24px);
   font-weight: 800;
   color: var(--blue-d);
   max-inline-size: 26ch;
   margin: 22px auto 0;
   line-height: 1.35;
   text-align: center;
}


/* ── The two-viewer infographic (.cv-*) ──
   "rendered with each viewer's own permissions" is a sentence anyone can write.
   Two screens side by side, same message, two different card bodies, is the
   same claim in a form that cannot be written by someone who cannot do it. */
.cv {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin-block-start: 6px;
}

.cv__v {
   border: 1px solid var(--mist);
   border-radius: 16px;
   overflow: hidden;
   background: var(--white);
}

.cv__top {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 9px 12px;
   background: var(--snow);
   border-block-end: 1px solid var(--mist);
}

.cv__av {
   width: 22px;
   height: 22px;
   border-radius: 7px;
   display: grid;
   place-items: center;
   font-weight: 700;
   background: var(--blue-xl);
   color: var(--blue-d);
}

.cv__av--other {
   background: var(--snow);
   color: var(--slate);
   border: 1px solid var(--mist);
}

.cv__who {
   font-weight: 700;
}

.cv__role {
   color: var(--silver);
   margin-inline-start: auto;
}

.cv__body {
   padding: 12px;
}

.cv__msg {
   color: var(--slate);
   background: var(--snow);
   border: 1px solid var(--mist);
   border-radius: 9px;
   padding: 7px 9px;
   display: inline-block;
   margin-block-end: 10px;
}

.cv__rec {
   border: 1px solid var(--mist);
   border-radius: 11px;
   overflow: hidden;
}

.cv__rech {
   background: var(--ink);
   color: var(--white);
   padding: 6px 10px;
   font-size: var(--fs-micro);
   font-weight: 700;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.cv__rech span {
   color: var(--silver);
   font-weight: 400;
   font-family: ui-monospace, monospace;
}

.cv__recb {
   padding: 8px 10px;
}

.cv__r {
   display: flex;
   gap: 8px;
   padding: 4px 0;
   font-size: var(--fs-micro);
   border-block-end: 1px solid var(--snow);
}

.cv__r:last-child {
   border-block-end: 0;
}

/* No font-size here means the UA's small{font-size:smaller} takes 0.833 of the
   parent - 8.33px, under the 13px floor Arabic needs. Inherit the mockup scale. */
.cv__r small {
   font-size: inherit;
   color: var(--silver);
   width: 56px;
   flex: none;
}

.cv__r b {
   font-weight: 600;
   color: var(--slate);
}

.cv__r.is-hidden b {
   color: var(--silver);
   font-weight: 400;
}

.cv__act {
   margin-block-start: 12px;
   display: flex;
   gap: 8px;
   align-items: center;
   flex-wrap: wrap;
}

.cv__btn {
   border-radius: 8px;
   padding: 6px 12px;
   font-weight: 700;
   border: 1px solid var(--mist);
}

.cv__btn--ok {
   background: var(--blue);
   color: var(--white);
   border-color: var(--blue);
}

.cv__btn--off {
   background: var(--white);
   color: var(--silver);
}

.cv__doc {
   margin-block-start: 20px;
   display: flex;
   align-items: center;
   gap: 10px;
   justify-content: center;
   flex-wrap: wrap;
   color: var(--slate);
   background: var(--snow);
   border: 1px solid var(--mist);
   border-radius: 12px;
   padding: 11px 14px;
}

.cv__doc b {
   color: var(--ink);
}

@media (max-width: 820px) {
   .cv {
      grid-template-columns: 1fr;
   }
}

/* Calling a record INTO the conversation. This is the step that removes the
   email thread: the document does not get described, it gets summoned. */
.cv__call {
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
   background: var(--snow);
   border: 1px solid var(--mist);
   border-radius: 14px;
   padding: 12px 14px;
   margin-block-end: 20px;
}

.cv__field {
   display: flex;
   align-items: center;
   gap: 8px;
   background: var(--white);
   border: 1px solid var(--mist);
   border-radius: 10px;
   padding: 8px 12px;
   color: var(--slate);
   flex: 1 1 240px;
}

.cv__ref {
   font-family: ui-monospace, monospace;
   color: var(--blue-d);
   font-weight: 700;
}

.cv__caret {
   width: 1px;
   height: 14px;
   background: var(--blue);
   animation: cvBlink 1.1s steps(2) infinite;
}

@keyframes cvBlink {
   to {
      opacity: 0;
   }
}

.cv__then {
   font-size: var(--fs-micro);
   color: var(--silver);
}

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

/* Website visitors land in the SAME inbox. Kept as one quiet strip rather than a
   section of its own: it is the same inbox, and giving it its own section would
   say the opposite. */
.cv__web {
   margin-block-start: 14px;
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
   border: 1px dashed var(--mist);
   border-radius: 12px;
   padding: 11px 14px;
   font-size: var(--fs-xs);
   color: var(--slate);
}

.cv__web i {
   color: var(--blue);
}

.cv__web b {
   color: var(--ink);
}