/* OPIFY live chat widget. Everything is namespaced "olc-" so it cannot clash with page styles. */
#olc-root {
  --olc-brand: #5b4bff;
  --olc-brand-2: #8b7bff;
  --olc-bg: #ffffff;
  --olc-soft: #f3f4f8;
  --olc-line: #e4e6ee;
  --olc-text: #1a1d29;
  --olc-muted: #6b7185;
  --olc-ok: #16a34a;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--olc-text);
}
#olc-root *, #olc-root *::before, #olc-root *::after { box-sizing: border-box; }
#olc-root [hidden] { display: none !important; }

.olc-launcher {
  position: fixed; right: 18px; bottom: 18px; z-index: 2147483000;
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, var(--olc-brand), var(--olc-brand-2));
  box-shadow: 0 10px 28px rgba(91, 75, 255, .42);
  display: grid; place-items: center; transition: transform .15s ease, box-shadow .15s ease;
}
.olc-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(91, 75, 255, .5); }
.olc-launcher:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--olc-brand); }
.olc-badge {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff;
}

.olc-panel {
  position: fixed; right: 18px; bottom: 90px; z-index: 2147483000;
  width: min(380px, calc(100vw - 24px)); height: min(580px, calc(100vh - 120px));
  background: var(--olc-bg); border: 1px solid var(--olc-line); border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 18, 40, .28);
  display: flex; flex-direction: column;
}
.olc-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: #fff;
  background: linear-gradient(135deg, var(--olc-brand), var(--olc-brand-2));
}
.olc-titles { flex: 1; min-width: 0; }
.olc-title { font-weight: 700; font-size: 15px; }
.olc-sub { font-size: 12px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olc-x { background: rgba(255, 255, 255, .18); border: 0; color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; }
.olc-x:hover { background: rgba(255, 255, 255, .3); }
.olc-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.olc-menu-btn { display: grid; place-items: center; padding: 0; }
.olc-head { position: relative; }
.olc-menu {
  position: absolute; right: 12px; top: 52px; z-index: 5; min-width: 210px; padding: 6px;
  background: #fff; border: 1px solid var(--olc-line); border-radius: 12px; box-shadow: 0 10px 30px rgba(20, 20, 50, .22);
  display: flex; flex-direction: column;
}
.olc-menu[hidden] { display: none; }
.olc-item { background: none; border: 0; text-align: left; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--olc-text); padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.olc-item[hidden] { display: none; }
.olc-item:hover, .olc-item:focus-visible { background: var(--olc-soft); outline: none; }
.olc-item.olc-end { color: #dc2626; }

.olc-status { padding: 8px 14px; font-size: 12.5px; background: #fff7e6; color: #8a5a00; border-bottom: 1px solid #fde8b6; }
.olc-status.olc-ok { background: #eafaf0; color: #146c3a; border-color: #c9efd8; }

.olc-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--olc-soft); }
.olc-msg { display: flex; flex-direction: column; max-width: 86%; }
.olc-who { font-size: 11px; color: var(--olc-muted); margin: 0 4px 3px; }
.olc-bubble { padding: 9px 13px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.olc-bot .olc-bubble, .olc-staff .olc-bubble { background: #fff; border: 1px solid var(--olc-line); border-top-left-radius: 4px; }
.olc-staff .olc-bubble { border-color: #cfc9ff; background: #f3f1ff; }
.olc-me { align-self: flex-end; }
.olc-me .olc-bubble { background: linear-gradient(135deg, var(--olc-brand), var(--olc-brand-2)); color: #fff; border-top-right-radius: 4px; }
.olc-bubble a, .olc-event a { color: inherit; text-decoration: underline; }
.olc-event { align-self: center; text-align: center; max-width: 92%; font-size: 12.5px; color: var(--olc-muted); background: #ecedf4; padding: 7px 12px; border-radius: 12px; }

.olc-typing { flex-direction: row; gap: 4px; padding: 11px 14px; background: #fff; border: 1px solid var(--olc-line); border-radius: 14px; border-top-left-radius: 4px; width: 58px; }
.olc-typing span { width: 7px; height: 7px; border-radius: 50%; background: #aab0c5; animation: olc-bounce 1.2s infinite ease-in-out; }
.olc-typing span:nth-child(2) { animation-delay: .15s; }
.olc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes olc-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

.olc-foot { border-top: 1px solid var(--olc-line); background: var(--olc-bg); padding: 8px 12px 10px; }
.olc-link { background: none; border: 0; padding: 0; color: var(--olc-brand); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.olc-form { display: flex; align-items: flex-end; gap: 8px; }
.olc-input {
  flex: 1; resize: none; border: 1px solid var(--olc-line); border-radius: 12px; padding: 9px 12px; font: inherit; color: var(--olc-text);
  background: #fff; max-height: 110px; outline: none; overflow-y: hidden; line-height: 1.35;
}
.olc-input:focus { border-color: var(--olc-brand-2); box-shadow: 0 0 0 3px rgba(139, 123, 255, .2); }
.olc-send {
  width: 40px; height: 40px; flex: none; border: 0; border-radius: 12px; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, var(--olc-brand), var(--olc-brand-2)); display: grid; place-items: center;
}
.olc-send:disabled { opacity: .5; cursor: default; }
.olc-note { margin-top: 6px; font-size: 11px; color: var(--olc-muted); text-align: center; }

/* Screenshots */
.olc-attach {
  width: 40px; height: 40px; flex: none; border: 1px solid var(--olc-line); border-radius: 12px; cursor: pointer;
  background: #fff; color: var(--olc-muted); display: grid; place-items: center;
}
.olc-attach:hover, .olc-attach.olc-has { color: var(--olc-brand); border-color: var(--olc-brand-2); }
.olc-attach:focus-visible, .olc-chip-x:focus-visible, .olc-faq summary:focus-visible { outline: 2px solid var(--olc-brand); outline-offset: 2px; }
.olc-previews { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.olc-chip { position: relative; width: 52px; height: 52px; border-radius: 10px; border: 1px solid var(--olc-line); overflow: visible; }
.olc-chip img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; display: block; }
.olc-chip-x {
  position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; border: 0; cursor: pointer;
  background: #1a1d29; color: #fff; font-size: 14px; line-height: 20px; padding: 0; text-align: center;
}
.olc-shots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.olc-me .olc-shots { justify-content: flex-end; }
.olc-shot { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--olc-line); background: #fff; }
.olc-shot img { display: block; max-width: 190px; max-height: 150px; object-fit: cover; }

/* Common questions (collapsible) */
.olc-faqs { align-self: stretch; display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.olc-faqs-title { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--olc-muted); text-transform: uppercase; padding-left: 2px; }
.olc-faq { background: #fff; border: 1px solid var(--olc-line); border-radius: 12px; overflow: hidden; }
.olc-faq[open] { border-color: var(--olc-brand-2); }
.olc-faq summary {
  cursor: pointer; list-style: none; padding: 9px 34px 9px 12px; font-size: 13px; font-weight: 600; color: var(--olc-text); position: relative;
}
.olc-faq summary::-webkit-details-marker { display: none; }
.olc-faq summary::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border-right: 2px solid var(--olc-muted); border-bottom: 2px solid var(--olc-muted); transform: rotate(45deg); transition: transform .15s ease;
}
.olc-faq[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.olc-faq-a { padding: 0 12px 11px; font-size: 13px; color: #373b4d; white-space: pre-wrap; overflow-wrap: anywhere; }
.olc-faq-a a { color: var(--olc-brand); text-decoration: underline; }

/* End-of-chat rating */
.olc-rate { align-self: stretch; background: #fff; border: 1px solid var(--olc-line); border-radius: 14px; padding: 12px 14px; text-align: center; }
.olc-rate-title { font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.olc-stars { display: flex; justify-content: center; gap: 4px; }
.olc-star { background: none; border: 0; cursor: pointer; font-size: 30px; line-height: 1; color: #cfd3e1; padding: 2px 3px; transition: color .1s ease, transform .1s ease; }
.olc-star:hover { transform: scale(1.12); }
.olc-star.olc-on { color: #f5a524; }
.olc-star:focus-visible { outline: 2px solid var(--olc-brand); outline-offset: 2px; border-radius: 6px; }
.olc-rate-more { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.olc-rate-text { width: 100%; resize: none; border: 1px solid var(--olc-line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; outline: none; }
.olc-rate-text:focus { border-color: var(--olc-brand-2); box-shadow: 0 0 0 3px rgba(139, 123, 255, .2); }
.olc-rate-err { color: #dc2626; font-size: 12px; min-height: 0; }
.olc-rate-row { display: flex; align-items: center; gap: 14px; }
.olc-rate-send { border: 0; border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--olc-brand), var(--olc-brand-2)); }
.olc-rate-send:disabled { opacity: .5; cursor: default; }

@media (max-width: 520px) {
  .olc-panel { right: 8px; left: 8px; bottom: 8px; width: auto; height: calc(100dvh - 16px); border-radius: 16px; }
  .olc-launcher { right: 14px; bottom: 14px; width: 54px; height: 54px; }
  .olc-launcher.olc-on { display: none; }
  .olc-input { font-size: 16px; }   /* stops iOS zooming into the field */
}
@media (prefers-reduced-motion: reduce) {
  .olc-launcher, .olc-typing span, .olc-faq summary::after { transition: none; animation: none; }
}