/* ==========================================================================
   SOLVIKA - website assistant

   Built on the tokens in site.css, not beside them. site.css opens with
   "The restraint is deliberate ... the sites that look cheap are the ones
   that paint every section a different shade", so this widget uses the olive
   ramp, the warm paper neutrals and Archivo, exactly like every other
   component. No gradient, no cartoon avatar, no emoji: the customer is a
   substrate buyer ordering truckloads.

   THE ONE TOKEN IT DOES NOT TAKE IS --radius. 3px is right for a card sat
   in the page; on a 560x660 sheet floating over a dimmed page it reads as
   sharp and cheap (the boss, 2026-09-16: "ours looks pointy and ugly, the
   corners, shapes and everything"). A floating surface is rounded more than
   a document surface - that is the convention his reference follows too.
   So: 18px on the dialog, 14px on the bubbles, 12px on the field, a round
   send button. The palette stays exactly as restrained as it was.
   ========================================================================== */

.sv-chat-launch {
  position: fixed;
  inset-inline-end: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  /* The button size and type of the site (type system A, 2026-10-15): 44 px,
     14/600. It was a 51 px pill at 16 px, bigger than every button it sat
     beside. Round is kept: the launcher floats, it is not in the page. */
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid var(--moss-800);
  border-radius: var(--r-pill, 999px);
  background: var(--brand-deep);
  color: #fff;
  font: inherit;
  font-size: var(--fs-small, .875rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: var(--shadow-float);
  transition: background .15s ease, transform .15s ease;
}
.sv-chat-launch:hover { background: #17301e; }
.sv-chat-launch:active { transform: translateY(1px); }
.sv-chat-launch:focus-visible { outline: 2px solid var(--moss-500); outline-offset: 3px; }
.sv-chat-launch svg { width: 18px; height: 18px; flex: none; }
.sv-chat-launch[hidden] { display: none !important; }
.sv-chat-launch--onfoot { background: var(--paper); color: var(--brand-deep); border-color: var(--paper); }
.sv-chat-launch--onfoot:hover { background: var(--moss-100); }

/* The page behind, dimmed. The panel is a centred dialog, not a corner
   tooltip: opened from the hero it should read as "we are talking now",
   which is what the reference does and what a corner panel does not. */
.sv-chat-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(28, 31, 14, .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.sv-chat-backdrop[hidden] { display: none !important; }

.sv-chat-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 901;
  width: min(620px, calc(100vw - 2.5rem));
  height: min(730px, calc(100vh - 3rem));
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(28, 31, 14, .34), 0 2px 10px rgba(28, 31, 14, .14);
  overflow: hidden;
}
.sv-chat-panel[hidden] { display: none !important; }

@media (max-width: 480px) {
  .sv-chat-panel {
    top: 0; left: 0; right: 0; bottom: 0;
    transform: none;
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;   /* full-screen: rounded corners would show the page */
  }
}

/* ---- header ---- */
.sv-chat-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1rem;
  background: var(--brand-deep);
  color: #fff;
  flex: none;
}
.sv-chat-head img { width: 26px; height: 26px; flex: none; object-fit: contain; }
.sv-chat-title { font-size: var(--t-base); font-weight: 700; line-height: 1.25; }
.sv-chat-sub { font-size: var(--t-sm); color: var(--moss-200); line-height: 1.3; }
.sv-chat-head-actions { margin-inline-start: auto; display: flex; gap: .15rem; }
.sv-chat-ico {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--moss-200);
  padding: .35rem;
  border-radius: 9px;
  cursor: pointer;
  line-height: 0;
}
.sv-chat-ico:hover { color: #fff; background: rgba(255,255,255,.1); }
.sv-chat-ico:focus-visible { outline: 2px solid var(--moss-300); outline-offset: 1px; }
.sv-chat-ico svg { width: 17px; height: 17px; }

/* ---- log ---- */
.sv-chat-log {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  /* A shade deeper than --paper-2: white bubbles on #faf9f4 were only five
     units apart and stopped reading as bubbles once their border went. */
  background: var(--moss-50);
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.sv-msg {
  max-width: 85%;
  padding: .6rem .8rem;
  border-radius: 14px;
  font-size: var(--t-base);
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.sv-msg a { color: var(--moss-800); }
/* No 1px outline on a bubble: the border was what made these read as
   boxes. A hairline shadow gives the same lift without the hard edge. The
   4px corner is the tail, on the side the speaker sits. */
.sv-msg-bot  { align-self: flex-start; background: var(--paper); color: var(--ink); border-radius: 14px 14px 14px 4px; box-shadow: 0 1px 2px rgba(28, 31, 14, .07); }
.sv-msg-user { align-self: flex-end;   background: var(--moss-700); color: #fff; border-radius: 14px 14px 4px 14px; }
.sv-msg-note { align-self: center; background: var(--moss-100); color: var(--moss-900); font-size: var(--t-xs); text-align: center; max-width: 95%; border-radius: 12px; }

.sv-typing { display: inline-flex; gap: 4px; align-items: center; padding: .25rem 0; }
.sv-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-mute);
  animation: sv-bounce 1.15s infinite ease-in-out;
}
.sv-typing span:nth-child(2) { animation-delay: .16s; }
.sv-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes sv-bounce { 0%, 70%, 100% { opacity: .28; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .sv-typing span { animation: none; opacity: .5; } }

/* ---- starter chips ---- */
/* Inside .sv-chat-log now, so it inherits the log's padding and its own
   is zero; align-self keeps it from stretching to the bubble width. */
.sv-chat-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; flex: none; align-self: flex-start; max-width: 100%; }
.sv-chip {
  font: inherit;
  font-size: var(--t-sm);
  padding: .45rem .8rem;
  border: 1px solid var(--moss-200);
  border-radius: 999px;
  background: var(--paper);
  color: var(--moss-800);
  cursor: pointer;
}
.sv-chip:hover { background: var(--moss-50); border-color: var(--moss-300); }
.sv-chip:focus-visible { outline: 2px solid var(--moss-500); outline-offset: 2px; }

/* ---- composer ---- */
.sv-chat-form {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  padding: .7rem;
  border-top: 1px solid var(--line-soft);
  background: var(--paper);
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
}
.sv-chat-input {
  flex: 1 1 auto;
  font: inherit;
  font-size: var(--t-base);
  line-height: 1.45;
  resize: none;
  max-height: 110px;
  padding: .55rem .65rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
}
.sv-chat-input:focus { outline: none; border-color: var(--moss-400); box-shadow: 0 0 0 3px var(--moss-100); }
.sv-chat-send {
  flex: none;
  appearance: none;
  border: 0;
  background: var(--moss-700);
  color: #fff;
  border-radius: 999px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}
.sv-chat-send:hover:not(:disabled) { background: var(--moss-800); }
.sv-chat-send:disabled { opacity: .45; cursor: default; }
.sv-chat-send:focus-visible { outline: 2px solid var(--moss-500); outline-offset: 2px; }
.sv-chat-send svg { width: 17px; height: 17px; }

.sv-chat-foot { flex: none; padding: 0 .75rem .6rem; background: var(--paper); font-size: 11px; color: var(--ink-mute); text-align: center; }

/* display:flex on .sv-chat-chips beats the user agent's [hidden]{display:none},
   so the starter chips stayed on screen under the conversation and pushed the
   composer down. Anything this widget toggles with .hidden needs this. */
.sv-chat-chips[hidden] { display: none !important; }

/* ---- right to left -----------------------------------------------------
   Arabic flips the panel through dir="rtl", which the browser handles for
   layout and text. The one thing it cannot know is that the send arrow is a
   drawing of a direction, not a glyph, so it has to be mirrored by hand. */
.sv-chat-panel[dir="rtl"] .sv-chat-send svg { transform: scaleX(-1); }
.sv-chat-launch--mini { padding: 0; width: 48px; height: 48px; justify-content: center; gap: 0; }
.sv-chat-launch--mini span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sv-chat-launch--mini svg { width: 22px; height: 22px; }

/* Fixed bottom right (assets/js/chat.js, the owner 2026-10-16): on a phone it
   becomes the round icon once the page scrolls down, and fades only over a
   button or a field. It cannot be clicked while it is gone. Not over the open
   phone menu, where it hid the language row. */
.sv-chat-launch { transition: background .15s ease, opacity .15s ease, visibility 0s; }
.sv-chat-launch--away { opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s linear .15s; }
.site-head.menu-open ~ .sv-chat-launch { display: none; }