/* Print shop chat widget: chat-app look (round avatars, grey incoming and blue outgoing bubbles, quick replies).
   Everything is scoped under .pc and driven by the variables below, so a host page can restyle it without overrides. */
.pc {
  --pc-blue: #0a7cff;
  --pc-blue-2: #0058d6;
  --pc-bg: #fff;
  --pc-in: #f0f2f5;
  --pc-ink: #080809;
  --pc-ink-2: #65676b;
  --pc-line: #e4e6eb;
  --pc-card: #fff;
  --pc-owner: #fff8e6;
  --pc-owner-line: #f2d78b;
  --pc-online: #31a24c;
  /* --pc-font: set it to force a face; unset, the widget inherits the host page's font (Geologica on the portfolio) */
  --pc-size: 15px;
  --pc-ava: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--pc-bg);
  color: var(--pc-ink);
  font-family: var(--pc-font, inherit);
  font-size: var(--pc-size);
  font-weight: 400;
  line-height: 1.34;
  text-align: left;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.pc *, .pc *::before, .pc *::after { box-sizing: border-box; }
.pc.pc-compact { --pc-size: 13px; --pc-ava: 22px; }

/* header */
.pc-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--pc-line); flex: none; background: var(--pc-bg); }
.pc-head-ava { position: relative; flex: none; width: 40px; height: 40px; }
.pc-head-ava img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.pc-head-ava::after { content: ""; position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--pc-online); border: 2px solid var(--pc-bg); }
.pc-head-txt { min-width: 0; line-height: 1.2; }
.pc-head-name { margin: 0; font-size: 1.04em; font-weight: 600; color: var(--pc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-head-status { margin: 2px 0 0; font-size: .82em; color: var(--pc-ink-2); }
.pc-compact .pc-head { padding: 8px 10px; gap: 8px; }
.pc-compact .pc-head-ava { width: 32px; height: 32px; }
.pc-compact .pc-head-ava::after { width: 10px; height: 10px; }

/* feed */
.pc-feed { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 10px 6px; display: flex; flex-direction: column; gap: 2px; scroll-behavior: smooth; overscroll-behavior: contain; }
.pc-compact .pc-feed { padding: 8px 8px 4px; }
.pc-intro { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 10px 14px; gap: 4px; }
.pc-intro img { width: 72px; height: 72px; border-radius: 50%; margin-bottom: 6px; }
.pc-intro b { font-size: 1.1em; font-weight: 600; }
.pc-intro span { font-size: .85em; color: var(--pc-ink-2); }
.pc-compact .pc-intro { padding: 10px 6px 8px; }
.pc-compact .pc-intro img { width: 52px; height: 52px; }

.pc-row { display: flex; align-items: flex-end; gap: 7px; max-width: 100%; animation: pc-in .22s ease-out both; }
.pc-row + .pc-row { margin-top: 2px; }
.pc-row.pc-in + .pc-row.pc-out, .pc-row.pc-out + .pc-row.pc-in, .pc-row + .pc-sys, .pc-sys + .pc-row { margin-top: 10px; }
.pc-out { justify-content: flex-end; }
.pc-ava { flex: none; width: var(--pc-ava); height: var(--pc-ava); border-radius: 50%; }
.pc-row.pc-cont .pc-ava { visibility: hidden; }
.pc-bubble { max-width: 78%; padding: 8px 12px; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pc-compact .pc-bubble { padding: 6px 10px; border-radius: 16px; max-width: 82%; }
.pc-in .pc-bubble { background: var(--pc-in); color: var(--pc-ink); }
.pc-out .pc-bubble { background: linear-gradient(160deg, var(--pc-blue), var(--pc-blue-2)); color: #fff; }
.pc-in.pc-cont-next .pc-bubble { border-bottom-left-radius: 5px; }
.pc-in.pc-cont .pc-bubble { border-top-left-radius: 5px; }

/* typing dots */
.pc-dots { display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 18px; background: var(--pc-in); }
.pc-dots i { width: 7px; height: 7px; border-radius: 50%; background: #90949c; animation: pc-dot 1.2s infinite ease-in-out; }
.pc-dots i:nth-child(2) { animation-delay: .15s; }
.pc-dots i:nth-child(3) { animation-delay: .3s; }
.pc-compact .pc-dots { padding: 9px 11px; }
.pc-compact .pc-dots i { width: 6px; height: 6px; }

/* cards: quote and order summary */
.pc-card { width: min(100%, 290px); max-width: 82%; background: var(--pc-card); border: 1px solid var(--pc-line); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.pc-card-head { padding: 10px 12px 8px; background: var(--pc-in); }
.pc-card-kicker { display: block; font-size: .72em; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pc-ink-2); }
.pc-card-title { display: block; font-weight: 600; font-size: 1.02em; margin-top: 2px; }
.pc-card-sub { display: block; font-size: .8em; color: var(--pc-ink-2); margin-top: 2px; }
.pc-lines { margin: 0; padding: 8px 12px 4px; list-style: none; }
.pc-lines li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: .86em; }
.pc-lines li span:first-child { color: var(--pc-ink-2); min-width: 0; overflow-wrap: anywhere; }
.pc-lines li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-total { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 12px 0; padding: 8px 0 10px; border-top: 1px solid var(--pc-line); font-weight: 700; }
.pc-total span:last-child { font-size: 1.12em; font-variant-numeric: tabular-nums; }
.pc-card-note { margin: 0; padding: 0 12px 10px; font-size: .78em; color: var(--pc-ink-2); }
.pc-compact .pc-card { max-width: 86%; border-radius: 14px; }
.pc-compact .pc-card-head { padding: 7px 10px 6px; }
.pc-compact .pc-lines { padding: 6px 10px 2px; }
.pc-compact .pc-total { margin: 2px 10px 0; padding: 6px 0 8px; }
.pc-compact .pc-card-note { padding: 0 10px 8px; }

/* the owner card: what the shop owner receives, shown in the middle of the feed */
.pc-sys { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: pc-in .3s ease-out both; }
.pc-sys-label { display: inline-flex; align-items: center; gap: 6px; font-size: .74em; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #8a6d1f; }
.pc-sys-label svg { width: 14px; height: 14px; }
.pc-owner { width: min(100%, 300px); background: var(--pc-owner); border: 1px solid var(--pc-owner-line); border-radius: 14px; padding: 10px 12px; box-shadow: 0 6px 18px -10px rgba(138, 109, 31, .45); }
.pc-owner-title { display: block; font-weight: 700; margin-bottom: 4px; }
.pc-owner .pc-lines { padding: 0; }
.pc-owner .pc-lines li span:last-child { white-space: normal; text-align: right; overflow-wrap: anywhere; }
.pc-owner .pc-total { margin: 4px 0 0; padding: 6px 0 2px; border-top-color: var(--pc-owner-line); }
.pc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pc-tags span { font-size: .78em; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--pc-owner-line); color: #6b5310; }
.pc-owner-note { margin: 8px 0 0; font-size: .74em; color: #7a6a3e; }
.pc-compact .pc-owner { padding: 8px 10px; }

/* quick replies */
.pc-quick { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding: 4px 10px 8px; }
.pc-quick:empty { display: none; }
.pc-chip { font: inherit; font-size: .9em; font-weight: 500; line-height: 1.2; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--pc-blue); background: var(--pc-bg); color: var(--pc-blue); cursor: pointer; text-align: left; animation: pc-in .2s ease-out both; }
.pc-chip:hover { background: rgba(10, 124, 255, .07); }
.pc-chip:focus-visible { outline: 2px solid var(--pc-blue); outline-offset: 2px; }
.pc-chip[disabled] { opacity: .5; cursor: default; }
.pc-chip.pc-tap { background: var(--pc-blue); color: #fff; }
.pc-compact .pc-quick { padding: 2px 8px 6px; gap: 4px; }
.pc-compact .pc-chip { padding: 5px 9px; }

/* composer */
.pc-composer { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px; border-top: 1px solid var(--pc-line); background: var(--pc-bg); margin: 0; }
.pc-input { flex: 1; min-width: 0; font: inherit; font-size: max(16px, 1em); /* 16px+ so phones do not zoom on focus */ color: var(--pc-ink); background: var(--pc-in); border: 0; border-radius: 999px; padding: 9px 14px; outline: none; }
.pc-input:focus-visible { box-shadow: 0 0 0 2px var(--pc-blue); }
.pc-input::placeholder { color: var(--pc-ink-2); }
.pc-send { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--pc-blue); display: grid; place-items: center; cursor: pointer; padding: 0; }
.pc-send:hover { background: rgba(10, 124, 255, .08); }
.pc-send:focus-visible { outline: 2px solid var(--pc-blue); outline-offset: 1px; }
.pc-send[disabled] { opacity: .45; cursor: default; }
.pc-send svg { width: 22px; height: 22px; }
.pc-compact .pc-composer { padding: 6px 8px 8px; }
.pc-compact .pc-input { padding: 7px 11px; font-size: 1em; }
.pc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@keyframes pc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pc-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pc-row, .pc-sys, .pc-chip { animation: none; }
  .pc-dots i { animation: none; opacity: .7; }
  .pc-feed { scroll-behavior: auto; }
}