/* Chat bubble styles, shared by the configurator preview (Website/create.html,
   guest + member) and the export comparison page (Website/compare.html).
   Renderer: shared/bubbles.js. Moved here unchanged from website.css; load it
   straight after website.css so the cascade order is as before.
   Relies on --border, which every including page defines. */
/* Message bubbles */
.pr-messages { display: flex; flex-direction: column; gap: 4px; }
.pr-msg {
  max-width: 82%; padding: 4px 8px 3px; border-radius: 7px; font-size: 12px; line-height: 1.4; position: relative; word-wrap: break-word;
  box-shadow: 0.75px 0.75px 0 0 #D1D1CF;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}
.pr-msg-left { align-self: flex-start; background: #F7F5F0; border: 1px solid var(--border); border-bottom-left-radius: 3px; }
.pr-msg-right { align-self: flex-end; background: #D9FDD3; border: 1px solid transparent; border-bottom-right-radius: 3px; }
/* Printer friendly — no coloured backgrounds */
.printer-friendly .pr-msg-left { background: #FFFFFF; }
.printer-friendly .pr-msg-right { background: #FFFFFF; border: 1px solid #6BAD7D; }
.printer-friendly .pr-voice-play { border-left-color: #8696A0 !important; }
.printer-friendly .pr-voice-bar { background: #CCCCCC !important; }
.printer-friendly .pr-date-pill { background: transparent; border: 1px solid var(--border); }
.pr-msg-sender { font-size: 10px; font-weight: 700; margin-bottom: 2px; max-width: 25ch; overflow-wrap: break-word; }
.pr-msg-left .pr-msg-sender { color: #067887; }
.pr-msg-right .pr-msg-sender { color: #006B5D; }
/* right-to-left text (Arabic, Hebrew): each line set from the right, the time on its own
   line underneath; a left-to-right line inside stays left-to-right (unicode-bidi: plaintext) */
.pr-msg.is-rtl .pr-msg-text, .pr-msg.is-rtl .pr-cap-under, .pr-msg.is-rtl .pr-cap-side, .pr-msg.is-rtl .pr-msg-caption { display: block; text-align: right; unicode-bidi: plaintext; }
.pr-msg.is-rtl > .pr-msg-time { float: none; display: block; text-align: right; margin-top: 2px; }
/* line breaks and runs of spaces kept, as the PDF keeps them */
.pr-msg-text { display: inline; white-space: pre-wrap; }
.pr-link { color: #1A73E8; text-decoration: underline; pointer-events: none; }
.pr-msg-time { font-size: 8px; color: #667781; float: right; margin-left: 8px; margin-top: 4px; margin-bottom: -1px; line-height: 1; }
/* System messages — centred grey text like WhatsApp */
.pr-msg-system { align-self: center; font-size: 9px; color: #8696A0; padding: 5px 0; text-align: center; max-width: 80%; line-height: 1.4; }

/* Date separator pill — white bg, grey border, bold text, centred */
.pr-date-pill {
  align-self: center; display: inline-block;
  background: #FFFFFF; border: 0.75px solid #CCCCCC; border-radius: 8px;
  padding: 3px 12px; margin: 5px 0;
  font-size: 8px; font-weight: 700; color: #4A5568; text-align: center;
  white-space: nowrap;
}

/* Image inside bubble — edge-to-edge with tight top corners, narrower than text bubbles */
.pr-msg.has-image { padding-top: 0; border-top-left-radius: 1px; border-top-right-radius: 1px; max-width: 46%; }
.pr-msg.has-image.pr-msg-left { border-bottom-left-radius: 3px; }
.pr-msg.has-image.pr-msg-right { border-bottom-right-radius: 3px; }
.pr-msg-img {
  display: block;
  width: calc(100% + 16px);
  margin: 0 -8px 3px -8px;
  height: auto;
  border-radius: 1px 1px 0 0; /* near-square top corners like PDF */
}
/* Sender above image — add small gap */
.pr-msg-sender + .pr-msg-img { margin-top: 2px; }
/* Image with caption below */
.pr-msg-caption { font-size: 12px; line-height: 1.35; margin-top: 1px; white-space: pre-wrap; }
/* A picture or "Media omitted" with a caption (shared rule with the PDF, layoutCaption in
   bubbles.js): the picture against the bubble's outer edge, a column beside it for the
   caption (set low), then the caption underneath after half a line. */
.pr-msg.has-caption { max-width: none; }
.pr-msg.has-caption.has-image { padding-top: 0; }
.pr-cap-row { display: flex; align-items: flex-start; gap: 10px; margin: 0 -8px; }
.pr-msg-right .pr-cap-row { flex-direction: row-reverse; }
.pr-msg-sender + .pr-cap-row { margin-top: 2px; }
.pr-msg.has-caption .pr-msg-img { width: auto; max-width: none; margin: 0; flex: none; }
.pr-msg.has-caption .pr-msg-media { flex: none; margin: 0; }
.pr-cap-side { align-self: flex-end; flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.35;
  white-space: pre-wrap; overflow-wrap: anywhere; padding-right: 8px; }
.pr-msg-right .pr-cap-side { padding-right: 0; padding-left: 8px; }
.pr-cap-side:empty { display: none; }
/* carrying on underneath: lowered so its last line is one line above the next */
.pr-msg.cap-run-on .pr-cap-side { transform: translateY(7.5px); }
.pr-cap-under { display: block; margin-top: 7.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pr-cap-under:empty { display: none; }

/* Voice message — WhatsApp-style */
.pr-voice-msg {
  display: flex; align-items: center; gap: 5px; min-width: 180px;
}
.pr-voice-play {
  width: 0; height: 0; flex-shrink: 0;
  border-style: solid; border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #8696A0;
}
.pr-msg-right .pr-voice-play { border-left-color: #6BAD7D; }
.pr-voice-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #53BDEB; flex-shrink: 0;
}
.pr-voice-wave {
  flex: 1; display: flex; align-items: center; gap: 1px; height: 20px;
}
.pr-voice-bar {
  flex: 1; background: #CCCCCC; border-radius: 0.5px; min-width: 1px;
}
.pr-msg-right .pr-voice-bar { background: #B2D8B6; }
/* Pseudo-random waveform heights */
.pr-voice-bar:nth-child(5n+1) { height: 25%; }
.pr-voice-bar:nth-child(5n+2) { height: 55%; }
.pr-voice-bar:nth-child(5n+3) { height: 85%; }
.pr-voice-bar:nth-child(5n+4) { height: 40%; }
.pr-voice-bar:nth-child(5n)   { height: 65%; }
.pr-voice-bar:nth-child(7n+3) { height: 95%; }
.pr-voice-bar:nth-child(7n+6) { height: 30%; }
.pr-voice-bar:nth-child(11n)  { height: 75%; }
.pr-voice-bar:nth-child(3n+1) { height: 45%; }
.pr-voice-msg .pr-msg-time { float: none; margin: 0; flex-shrink: 0; align-self: flex-end; }

/* Media omitted placeholder — grey box with centred dark pill */
.pr-msg-media {
  background: #E6E6E6; border-radius: 4px; margin-bottom: 2px;
  position: relative; width: 168px; height: 77px;  /* the PDF's OMITTED_PH_W / _H */
  overflow: hidden;
}
.pr-msg-media-pill {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.35); border-radius: 50px; padding: 5px 14px 5px 10px;
  display: flex; align-items: center; gap: 6px;
  color: #fff; font-size: 9px; white-space: nowrap;
  max-width: 90%; overflow: hidden; text-overflow: ellipsis;
}
.pr-msg-media-pill svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Document attachment bubble — matches WhatsApp's document share style */
.pr-doc-bubble {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.04); border-radius: 6px;
  padding: 7px 10px; margin-bottom: 2px;
}
.pr-doc-icon {
  flex-shrink: 0; width: 26px; height: 30px;
  color: #8696A0;
  display: flex; align-items: center; justify-content: center;
}
.pr-doc-icon svg { width: 26px; height: 30px; }
.pr-doc-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pr-doc-name {
  font-size: 9px; color: var(--text-primary, #111);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word; line-height: 1.3;
}
.pr-doc-meta {
  font-size: 7px; color: #8696A0; text-transform: uppercase;
}
.pr-msg-right .pr-doc-bubble { background: rgba(0,0,0,0.04); }
.pr-msg-right .pr-doc-icon { color: #8696A0; }
.pr-msg-right .pr-doc-name { color: #111; }
.pr-msg-right .pr-doc-meta { color: #8696A0; }

/* Voice/video call bubble — matches WhatsApp's call display */
.pr-call-bubble {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; margin-bottom: 2px;
}
.pr-call-icon {
  flex-shrink: 0; width: 28px; height: 28px;
  background: rgba(0,0,0,0.06); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #667781;
}
.pr-call-icon svg { width: 14px; height: 14px; }
.pr-call-icon.missed { color: #E74C3C; }
.pr-call-info { display: flex; flex-direction: column; gap: 0; }
.pr-call-label { font-size: 9px; color: var(--text-primary, #111); font-weight: 500; }
.pr-call-duration { font-size: 7px; color: #8696A0; }
.pr-msg-right .pr-call-icon { background: rgba(0,0,0,0.06); color: #667781; }
.pr-msg-right .pr-call-icon.missed { color: #E74C3C; }
.pr-msg-right .pr-call-label { color: #111; }
.pr-msg-right .pr-call-duration { color: #8696A0; }

/* Batch media-omitted grid */
.pr-msg:has(.pr-omitted-grid) { min-width: 60%; }
.pr-omitted-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 2px;
}
.pr-omitted-grid .pr-msg-media {
  width: auto; height: 70px; min-width: 0; margin-bottom: 0;
}
.pr-omitted-more {
  background: #D8D8D4; border-radius: 4px; height: 70px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #667781;
}

/* Redacted message (Request flow): black, the same size as the message itself, sender
   and time kept, content hidden and labelled, exactly as the PDF draws it. */
.pr-msg.is-redacted { background: #141414 !important; border-color: #141414 !important; box-shadow: none; }
.pr-msg.is-redacted > * { visibility: hidden; }
.pr-msg.is-redacted > .pr-msg-sender,
.pr-msg.is-redacted > .pr-redact-label,
.pr-msg.is-redacted .pr-msg-time { visibility: visible; }
.pr-msg.is-redacted .pr-msg-time { color: #B0B0B0; }
.pr-msg.is-redacted .pr-msg-sender { color: #FFFFFF !important; }
.pr-redact-label {
  position: absolute; /* no offsets: sits where the text would start, taking no space */
  font-size: 8px; font-weight: 700; color: #FFFFFF; letter-spacing: 0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 16px);
}
/* a short bubble: keep clear of the time, as the PDF does */
.pr-msg.is-redacted:not(.redact-centre) .pr-redact-label { max-width: calc(100% - 50px); }
.pr-msg.is-redacted.redact-centre .pr-redact-label { top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* Request mode: a message can be clicked to redact it, or clicked again to restore it */
/* only on the page in front: the pages behind are for turning, not redacting */
.redact-mode .preview-page .pr-msg[data-gidx] { cursor: pointer; }
.redact-mode .preview-page .pr-msg[data-gidx]:hover { outline: 2px solid #141414; outline-offset: 1px; }
/* the reason list that opens beside a message being redacted */
.redact-menu { position: fixed; z-index: 3200; background: #fff; border: 1px solid #141414; border-radius: 3px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); padding: 6px 0; min-width: 250px; font-family: var(--sans, 'Source Sans 3', system-ui, sans-serif); }
.redact-menu h4 { font-family: inherit !important; font-size: 12px; font-weight: 700; color: #141414; padding: 6px 14px 8px; margin: 0; }
.redact-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 7px 14px; font: inherit; font-size: 13.5px; color: #141414; cursor: pointer; }
.redact-menu button:hover, .redact-menu button:focus { background: #EFEEE9; outline: none; }
.redact-menu button.quiet { color: #6B7370; border-top: 1px solid #E4E2DB; margin-top: 4px; padding-top: 9px; }