/* RINKO asistentas (DI) — chat widget.
   Every rule is scoped to #rkai-btn / #rkai-panel, and theme styles for buttons and textareas are reset first:
   WoodMart styles [type=button]/[type=submit] with the same specificity as a class and loads its CSS later in the
   page, which knocked the launcher out of position:fixed (2026-09-28). IDs win over theme selectors, now and after
   theme updates. */

#rkai-btn, #rkai-panel { --rkai-primary: #1f3b4d; --rkai-accent: #e0485a; } /* overridden by the colours in the settings */
#rkai-btn, #rkai-panel, #rkai-panel * { box-sizing: border-box; }
#rkai-btn, #rkai-panel button, #rkai-panel textarea { all: unset; box-sizing: border-box; }

/* ---------------------------------------------------------------- launcher */
#rkai-btn {
  position: fixed; right: 20px; bottom: 24px; z-index: 9990;
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 20px 0 11px; border-radius: 26px;
  background: var(--rkai-primary); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: .01em; text-transform: none;
  box-shadow: 0 10px 28px rgba(15, 35, 50, .28), 0 2px 6px rgba(15, 35, 50, .16);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .15s ease, bottom .25s ease, background-color .15s ease;
  animation: rkai-in .4s ease-out .3s both;
}
#rkai-btn:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(15, 35, 50, .32), 0 3px 8px rgba(15, 35, 50, .18); }
#rkai-btn:focus-visible { outline: 3px solid #9ec5e8; outline-offset: 3px; }
#rkai-btn .rkai-btn-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--rkai-accent); flex: none; }
#rkai-btn svg { width: 18px; height: 18px; fill: #fff; display: block; }
body:has(.wd-sticky-btn-shown) #rkai-btn { bottom: 118px; }
.rkai-tawk-on:not(.rkai-left) #rkai-btn { bottom: 100px; } /* Tawk live-chat bubble visible below */
.rkai-left #rkai-btn, .rkai-left #rkai-panel { right: auto; left: 20px; }
.rkai-is-open #rkai-btn { display: none; }
@keyframes rkai-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- panel (light, DigitalGenius-like layout) */
#rkai-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 100000;
  display: none; flex-direction: column;
  width: 410px; height: min(720px, calc(100vh - 40px));
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(15, 35, 50, .26), 0 4px 14px rgba(15, 35, 50, .10);
  font-family: inherit; font-size: 14px; line-height: 1.5; color: #1d2d3a; text-align: left; letter-spacing: normal; text-transform: none;
  transition: width .25s ease, height .25s ease;
}
#rkai-panel.rkai-wide { width: min(760px, calc(100vw - 40px)); height: calc(100vh - 40px); }
#rkai-panel.rkai-open { display: flex; animation: rkai-pop .18s ease-out; }
@keyframes rkai-pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

#rkai-panel .rkai-head { display: flex; align-items: center; gap: 12px; padding: 14px 10px 14px 16px; background: #fff; color: #1d2d3a; border-bottom: 1px solid #eceff2; flex: none; }
#rkai-panel .rkai-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--rkai-primary); flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#rkai-panel .rkai-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#rkai-panel .rkai-avatar b { font-size: 18px; color: #fff; }
#rkai-panel .rkai-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#rkai-panel .rkai-head-text strong { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #1d2d3a; line-height: 1.2; letter-spacing: .02em; }
#rkai-panel .rkai-badge { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 2px 8px; border-radius: 10px; background: color-mix(in srgb, var(--rkai-primary) 10%, #fff); color: var(--rkai-primary); }
#rkai-panel .rkai-head-text span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7682; line-height: 1.2; }
#rkai-panel .rkai-dot { width: 7px; height: 7px; border-radius: 50%; background: #22a55a; flex: none; box-shadow: 0 0 0 3px rgba(34, 165, 90, .15); }
#rkai-panel .rkai-icon-btn { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: transparent; color: #5d6873; cursor: pointer; transition: background-color .15s, color .15s; }
#rkai-panel .rkai-icon-btn:hover { background: #f1f3f5; color: #1d2d3a; }
#rkai-panel .rkai-icon-btn svg { width: 19px; height: 19px; fill: currentColor; display: block; }

/* ---------------------------------------------------------------- messages */
#rkai-panel .rkai-list { position: relative; flex: 1; overflow-y: auto; padding: 18px 16px 8px; background: #fff; overscroll-behavior: contain; }
#rkai-panel.rkai-wide .rkai-list { padding: 22px 28px 10px; }
#rkai-panel .rkai-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin: -4px 0 16px; }
#rkai-panel .rkai-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1.5px solid var(--rkai-primary); border-radius: 20px; background: #fff; color: var(--rkai-primary); font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.3; cursor: pointer; transition: background-color .15s, color .15s; }
#rkai-panel .rkai-chip:hover { background: var(--rkai-primary); color: #fff; }
#rkai-panel .rkai-chip svg { width: 17px; height: 17px; fill: currentColor; display: block; flex: none; }

#rkai-panel .rkai-msg { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
#rkai-panel .rkai-user { align-items: flex-end; }
#rkai-panel .rkai-assistant { align-items: flex-start; }
#rkai-panel .rkai-bubble { max-width: 86%; padding: 11px 15px; border-radius: 18px; font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
#rkai-panel.rkai-wide .rkai-bubble { max-width: 78%; }
#rkai-panel .rkai-bubble p { margin: 0 0 6px; }
#rkai-panel .rkai-bubble p:last-child { margin: 0; }
#rkai-panel .rkai-bubble ul { margin: 4px 0 6px; padding: 0 0 0 18px; list-style: disc; }
#rkai-panel .rkai-bubble li { margin: 0 0 3px; }
#rkai-panel .rkai-user .rkai-bubble { background: var(--rkai-primary); color: #fff; border-bottom-right-radius: 6px; white-space: pre-wrap; }
#rkai-panel .rkai-assistant .rkai-bubble { background: #f2f4f6; color: #1d2d3a; border-bottom-left-radius: 6px; }
#rkai-panel .rkai-bubble a { color: #1f5f8b; text-decoration: underline; text-underline-offset: 2px; }
#rkai-panel .rkai-dots { display: inline-flex; gap: 5px; padding: 5px 2px; }
#rkai-panel .rkai-dots i { width: 7px; height: 7px; border-radius: 50%; background: #9aa6b1; animation: rkai-blink 1.2s infinite ease-in-out; }
#rkai-panel .rkai-dots i:nth-child(2) { animation-delay: .15s; }
#rkai-panel .rkai-dots i:nth-child(3) { animation-delay: .3s; }
#rkai-panel .rkai-typing-note { display: block; margin-top: 4px; font-size: 12px; color: #7b8691; }
@keyframes rkai-blink { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

/* ---------------------------------------------------------------- product cards */
#rkai-panel .rkai-cards { display: flex; flex-direction: column; gap: 8px; width: 94%; }
#rkai-panel.rkai-wide .rkai-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
#rkai-panel .rkai-card { display: flex; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; background: #fff; border: 1px solid #e3e8ed; border-radius: 14px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
#rkai-panel .rkai-card:hover { border-color: #b9c7d3; box-shadow: 0 6px 18px rgba(15, 35, 50, .08); transform: translateY(-1px); }
#rkai-panel .rkai-card img { width: 72px; height: 72px; object-fit: contain; flex: none; border-radius: 10px; background: #fff; }
#rkai-panel .rkai-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#rkai-panel .rkai-card-title { font-size: 13px; line-height: 1.35; color: #1d2d3a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#rkai-panel .rkai-card-price { font-size: 15px; line-height: 1.3; }
#rkai-panel .rkai-card-price strong { color: #1d2d3a; font-weight: 700; }
#rkai-panel .rkai-card-price s { color: #8a939b; font-size: 12px; margin-right: 6px; }
#rkai-panel .rkai-card-stock { font-size: 12px; color: #1f8035; }
#rkai-panel .rkai-card-stock.rkai-out { color: #8a939b; }

#rkai-panel .rkai-fb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #7b8691; }
#rkai-panel .rkai-fb-btn { padding: 3px 12px; border: 1px solid #d5dde5; border-radius: 12px; background: #fff; color: var(--rkai-primary); font-family: inherit; font-size: 12px; line-height: 1.5; cursor: pointer; }
#rkai-panel .rkai-fb-btn:hover { border-color: var(--rkai-primary); }

/* ---------------------------------------------------------------- input: one rounded field, send button inside */
#rkai-panel .rkai-form { position: relative; display: flex; align-items: flex-end; margin: 8px 14px 8px; padding: 5px 5px 5px 18px; border: 1.5px solid #dfe4e9; border-radius: 26px; background: #fff; flex: none; transition: border-color .15s, box-shadow .15s; }
#rkai-panel .rkai-form:focus-within { border-color: var(--rkai-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rkai-primary) 12%, transparent); }
#rkai-panel .rkai-form textarea {
  flex: 1; display: block; min-height: 40px; max-height: 120px; padding: 9px 8px 9px 0;
  border: 0; background: transparent; color: #1d2d3a;
  font-family: inherit; font-size: 16px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; resize: none; cursor: text;
}
#rkai-panel .rkai-form textarea::placeholder { color: #8a96a3; opacity: 1; }
#rkai-panel .rkai-send { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--rkai-accent); color: #fff; cursor: pointer; transition: filter .15s, opacity .15s; }
#rkai-panel .rkai-send:hover { filter: brightness(.92); }
#rkai-panel .rkai-send[disabled] { opacity: .4; cursor: default; }
#rkai-panel .rkai-send svg { width: 18px; height: 18px; fill: currentColor; display: block; }
#rkai-panel .rkai-foot { padding: 0 18px 10px; text-align: center; background: #fff; font-size: 11px; line-height: 1.4; color: #8a939b; flex: none; }
#rkai-panel .rkai-foot a { color: #8a939b; text-decoration: underline; }

#rkai-panel button:focus-visible, #rkai-panel a:focus-visible { outline: 2px solid #9ec5e8; outline-offset: 2px; }
.rkai-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- phones */
/* desktop: a docked side drawer (full height on the right) over a soft backdrop, so it reads as a layer on top of
   the page instead of a box covering the product details */
#rkai-shade { display: none; }
@media (min-width: 768px) {
  #rkai-panel { top: 12px; right: 12px; bottom: 12px; height: auto; width: 420px; border-radius: 20px; }
  #rkai-panel.rkai-wide { width: min(760px, calc(100vw - 24px)); height: auto; }
  #rkai-panel.rkai-open { animation: rkai-slide .3s cubic-bezier(.32, .72, 0, 1); } /* iOS drawer curve */
  .rkai-left #rkai-panel { right: auto; left: 12px; }
  #rkai-shade { position: fixed; inset: 0; z-index: 99999; background: rgba(12, 20, 30, .28); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: rkai-fade .2s ease-out; }
  .rkai-is-open #rkai-shade { display: block; }
}
@keyframes rkai-slide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes rkai-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 767px) {
  /* above WoodMart's bottom toolbar, and above the sticky add-to-cart bar when it shows */
  #rkai-btn { right: 12px; bottom: calc(68px + env(safe-area-inset-bottom)); height: 50px; padding: 0 16px 0 10px; font-size: 14px; }
  body:has(.wd-sticky-btn-shown) #rkai-btn { bottom: calc(110px + env(safe-area-inset-bottom)); }
  .rkai-tawk-on:not(.rkai-left) #rkai-btn { bottom: calc(150px + env(safe-area-inset-bottom)); }
  .rkai-left #rkai-btn { left: 12px; }
  #rkai-panel, #rkai-panel.rkai-wide { inset: 0; width: auto; height: auto; border-radius: 0; }
  #rkai-panel .rkai-wide-btn { display: none; }
  #rkai-panel .rkai-head { padding-top: calc(12px + env(safe-area-inset-top)); }
  #rkai-panel .rkai-form { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  html.rkai-is-open, html.rkai-is-open body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  #rkai-btn, #rkai-panel.rkai-open, #rkai-panel .rkai-dots i, #rkai-shade { animation: none; }
  #rkai-btn, #rkai-panel .rkai-card { transition: none; }
}