/* StowFlow support-chat widget — shared stylesheet.
 *
 * Loaded by the marketing site AND the signed-in console; every colour comes
 * from CSS variables both palettes define (--card, --accent, --card-edge …),
 * so the widget takes each page's theme automatically. */

/* ---------- Support chat ---------- */

/* Screen chrome, never content: the fixed launcher was landing in the corner
 * of every printed page — label sheets, replenishment orders, the warehouse
 * report a customer hands their accountant. */
@media print {
  .chat-launcher, .chat-panel { display: none !important; }
}

.chat-launcher {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  display: flex; align-items: center; gap: 9px;
  background: var(--accent); color: #ffffff; border: none;
  font: inherit; font-weight: 700; font-size: .92rem;
  padding: 11px 20px 11px 16px; border-radius: 99px; cursor: pointer;
  box-shadow: 0 10px 30px rgba(26,26,26,.18);
}
/* The robot reads as "a machine will answer", where a speech bubble or a
   question mark reads as "here are some articles". */
.chat-bot { width: 22px; height: 22px; flex: 0 0 auto; }
.chat-title { display: flex; align-items: center; gap: 8px; }
.chat-title .chat-bot { width: 20px; height: 20px; color: var(--accent); }
.chat-launcher:hover { background: var(--accent-dark); }
.chat-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 41;
  width: min(370px, calc(100vw - 40px)); max-height: min(560px, calc(100vh - 40px));
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--card-edge); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(26,26,26,.22); overflow: hidden;
}
.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--card-edge); background: var(--bg-alt);
}
.chat-close {
  background: none; border: none; color: var(--muted);
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.chat-close:hover { color: var(--text); }
.chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { display: flex; }
.chat-user { justify-content: flex-end; }
.chat-bubble {
  max-width: 85%; padding: 9px 13px; border-radius: 12px;
  font-size: .9rem; line-height: 1.5; white-space: pre-wrap;
}
.chat-assistant .chat-bubble { background: var(--bg); border: 1px solid var(--card-edge); color: var(--text); }
.chat-user .chat-bubble { background: var(--accent); color: #ffffff; font-weight: 500; }
.chat-pending .chat-bubble { color: var(--muted); }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--card-edge); }
.chat-input {
  flex: 1; min-width: 0; background: var(--bg); color: var(--text);
  border: 1px solid var(--card-edge); border-radius: 8px; padding: 9px 12px; font: inherit; font-size: .9rem;
}
.chat-input:focus { outline: none; border-color: var(--accent); }
.chat-send { padding: 9px 16px; font-size: .88rem; }
.chat-foot { color: var(--muted); font-size: .72rem; padding: 0 12px 12px; }
.chat-foot a { color: var(--accent); }
@media (max-width: 480px) {
  .chat-panel { right: 10px; left: 10px; bottom: 10px; width: auto; }
}

/* Maximised chat: room for a real conversation. */
.chat-panel.chat-maxed { width: min(720px, calc(100vw - 32px)); height: min(85vh, 780px); max-height: none; }
.chat-panel.chat-maxed .chat-log { flex: 1; max-height: none; }
.chat-max { background: none; border: 0; color: inherit; font-size: 1.05rem; cursor: pointer;
  padding: 2px 8px; opacity: .8; }
.chat-max:hover { opacity: 1; }