/* ═══════════════════════════════════════════════════════════════
   PAGE: Managely Chat | Namespace: pgc-* | File: /static/css/shell/mani-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); }
.pg-chat .appx-badge { background: var(--blue-l); border-color: var(--blue-xl); color: var(--blue-d); }

/* soft shadows shared by the mockups */
.pg-chat { --sh-s: 0 1px 2px rgba(2,32,20,.06); --sh-m: 0 10px 30px rgba(2,32,20,.08); --sh-l: 0 22px 55px rgba(2,32,20,.14); }

/* ── 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: 11.5px; 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: 11px; color: var(--silver); font-weight: 600; margin-block-end: 6px; }
.pgc-doc-title { font-size: 17px; font-weight: 800; color: var(--ink2); display: flex; align-items: center; gap: 10px; }
.pgc-badge-amber { font-size: 10.5px; 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: 11px; color: var(--slate); font-weight: 600; }
.pgc-v { font-size: 22px; font-weight: 800; color: var(--ink2); }
.pgc-due { font-size: 11px; 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: 12px; font-weight: 800; }
.pgc-panel-top b { font-size: 13px; color: var(--ink2); }
.pgc-pres { margin-inline-start: auto; display: flex; align-items: center; gap: 5px; font-size: 10.5px; 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: 12.5px; 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: 12px; }
.pgc-rec-t { font-size: 12px; font-weight: 800; color: var(--ink2); line-height: 1.2; }
.pgc-rec-t small { display: block; font-weight: 600; color: var(--silver); font-size: 10px; }
.pgc-rec-meta { padding: 8px 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.pgc-rec-meta div { font-size: 10.5px; color: var(--slate); }
.pgc-rec-meta b { display: block; font-size: 12px; 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: 11px; 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; box-shadow: var(--sh-m); background: var(--white); text-align: start; max-width: 980px; margin-inline: auto; }
.pgc-half { padding: 32px 30px; }
.pgc-half h3 { font-size: 20px; 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); font-size: 15px; 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; font-size: 14px; color: var(--ink2); align-items: flex-start; }
.pgc-half li i { color: var(--blue); margin-block-start: 3px; font-size: 12px; }
.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); font-size: 22px; }
.pgc-inbox b { font-size: 12px; color: var(--blue-d); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.pgc-inbox span { display: block; font-size: 11px; 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 ── */
.pgc-ba { display: grid; gap: 14px; max-width: 980px; margin-inline: auto; 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-size: 11px; 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 { font-size: 14.5px; color: var(--slate); margin: 0; }
.pgc-after p { font-size: 14.5px; 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; } .pgc-ba-arrow { transform: rotate(90deg); } }

/* ── 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); box-shadow: var(--sh-m); }
.pgc-col.bad { border-color: var(--red-xl); }
.pgc-col-head { padding: 18px 22px; font-weight: 800; font-size: 16px; 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; font-size: 11px; }
.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; font-size: 14px; color: var(--ink2); margin-block-end: 2px; }
.pgc-cmp-list span { font-size: 13px; 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 { font-size: 14px; color: var(--ink); font-weight: 600; }
.pgc-res { padding: 8px; }
.pgc-res-h { font-size: 10.5px; 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-size: 13.5px; font-weight: 700; color: var(--ink2); }
.pgc-res-t small { display: block; font-weight: 500; color: var(--silver); font-size: 11.5px; }
.pgc-res-amt { margin-inline-start: auto; font-size: 12.5px; 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 { font-size: 14px; color: var(--ink2); font-weight: 800; display: block; }
.pgc-rcx-t small { font-size: 11.5px; color: var(--silver); }
.pgc-rcx-meta { padding: 6px 16px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pgc-rcx-meta .cell span { font-size: 10.5px; color: var(--slate); display: block; margin-block-end: 1px; }
.pgc-rcx-meta .cell b { font-size: 14px; 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-size: 12px; font-weight: 700; color: var(--blue-d); }
.pgc-reader-toggle { display: inline-flex; 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-size: 13px; 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 { font-size: 13px; 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-size: 15px; font-weight: 800; color: var(--ink2); }
.pgc-poll-sub { font-size: 11.5px; 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-size: 13.5px; 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-size: 13px; font-weight: 800; color: var(--blue-d); }
.pgc-pct.mut { color: var(--slate); }
.pgc-preason { position: relative; font-size: 11.5px; 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); font-size: 11.5px; 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-size: 12px; 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: 11.5px; 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-size: 11px; font-weight: 800; color: var(--slate); letter-spacing: .5px; flex: none; }
.pgc-lv-info { min-inline-size: 0; }
.pgc-lv-info b { font-size: 13px; color: var(--ink2); font-weight: 700; display: block; }
.pgc-lv-info span { font-size: 11.5px; color: var(--silver); display: block; }
.pgc-lv-meta { margin-inline-start: auto; text-align: end; flex: none; }
.pgc-lv-loc { font-size: 11.5px; color: var(--slate); font-weight: 600; }
.pgc-lv-start { margin-block-start: 4px; font-size: 10.5px; 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 { font-size: 14px; display: block; }
.pgc-wid-top span { font-size: 11px; 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%; font-size: 13px; 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-size: 12px; font-weight: 800; color: var(--blue-d); background: var(--blue-l); border-radius: 6px; padding: 2px 7px; flex: none; }
.pgc-wb-field span { font-size: 13px; 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; font-size: 12.5px; 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; }