/* ==========================================================================
   Live chat (Chatwoot). Loaded by Chofu\Chat\Widget only on pages where the
   chat is on; <body> carries "chat-live" and "chat-launcher-{natalia|bubble|
   expanded_bubble}" from the server, so nothing moves when the SDK arrives.
   ========================================================================== */

/* The header button keeps the theme's rule (it shows once Natalia has been
   dismissed): always showing it would widen the header, and the German menu
   no longer fits at 1440px. While the chat is on, it opens the conversation. */

/* "Vorbește cu un om" in Natalia's window: an outline button with the same
   corner as the quick replies (--r-btn), the office hours next to it. */
.d-human { display: flex; align-items: center; gap: 12px;
           padding: 8px 16px; border-bottom: 1px solid var(--divider); background: #fff; }
.d-human__btn { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 40px;
                padding: 6px 12px; border: 1px solid var(--chofu-navy); background: #fff;
                border-radius: var(--r-btn, 10px); color: var(--chofu-navy); font: inherit; font-size: 14px;
                font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer;
                transition: background-color .2s var(--ease), color .2s var(--ease); }
.d-human__btn:hover, .d-human__btn:focus-visible { background: var(--chofu-navy); color: #fff; }
.d-human__btn:focus-visible { outline: 2px solid var(--chofu-navy); outline-offset: 2px; }
.d-human__btn[aria-busy="true"] { cursor: progress; opacity: .7; }
.d-human__note { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.35; color: var(--text-muted); }
@media (pointer: coarse) { .d-human__btn { min-height: 44px; } }

/* The extra row must not squeeze the conversation: Natalia's greeting needs
   room to be read. A little more height on desktop, and on touch screens the
   quick replies become one row that swipes sideways (the fade on the right
   says there is more). */
.d-win:has(.d-human) { height: min(80vh, 620px); }
@media (pointer: coarse), (max-width: 560px) {
  .d-win:has(.d-human) { height: min(84vh, 620px); }
  .d-win:has(.d-human) .d-qs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
                               scrollbar-width: none; padding-right: 28px;
                               -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
                               mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .d-win:has(.d-human) .d-qs::-webkit-scrollbar { display: none; }
  .d-win:has(.d-human) .d-q { flex: none; white-space: nowrap; }
}
.d-win:has(.d-human) .d-top { padding-block: 12px; }

/* While the conversation is open, Natalia's corner steps aside. */
html.cw-open .d-dock, html.cw-open .d-bub { visibility: hidden; }

/* Above the product page's quote bar while it shows (chofu.js puts "is-on" on
   it and its height in --qbar-h; the theme already lifts the round dock
   below 1000px, this does it at every width, and for Chatwoot's bubble). */
body.chat-live:has(.quote-bar.is-on) .d-dock { bottom: calc(var(--qbar-h, 0px) + 12px); }
body.chat-live:has(.quote-bar.is-on) .d-bub { bottom: calc(var(--qbar-h, 0px) + 88px); }
body.chat-live:has(.quote-bar.is-on) .woot-widget-bubble { bottom: calc(var(--qbar-h, 0px) + 12px) !important; }
@media (min-width: 668px) {
  body.chat-launcher-bubble:has(.quote-bar.is-on) .woot-widget-holder:not(.woot--hide),
  body.chat-launcher-expanded_bubble:has(.quote-bar.is-on) .woot-widget-holder:not(.woot--hide) { bottom: calc(var(--qbar-h, 0px) + 96px) !important; }
}

/* The widget is a surface that appears, not travels. */
@media (prefers-reduced-motion: reduce) {
  .d-human__btn { transition: none; }
  .woot-widget-holder, .woot-widget-bubble { transition: opacity .2s ease !important; transform: none !important; animation: none !important; }
}