/* SmartChat widget — scoped, theme-respectful.
   Accent is injected at runtime via --smartchat-accent (set in widget.js). */

#smartchat-root {
  --sc-accent: #2f6f5e;
  --sc-accent-ink: #ffffff;
  --sc-bg: #ffffff;
  --sc-surface: #f6f7f7;
  --sc-ink: #1d2321;
  --sc-ink-soft: #5d6b66;
  --sc-line: #e6e9e8;
  --sc-radius: 16px;
  --sc-shadow: 0 12px 40px rgba(20, 35, 30, .18);
  position: fixed;
  right: 20px;
  bottom: 20px;
  /* Near-max so a theme's scroll-to-top / cookie bar can't cover the launcher
     (common cause of "shows on mobile, hidden on desktop"). */
  z-index: 2147483000;
  isolation: isolate;
  /* Defensive: stop aggressive theme resets from hiding the widget. */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sc-ink);
}

#smartchat-root *,
#smartchat-root *::before,
#smartchat-root *::after { box-sizing: border-box; }

/* ---- Launcher ---- */
#smartchat-launcher {
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  box-shadow: var(--sc-shadow);
  display: grid !important;
  place-items: center;
  visibility: visible !important;
  opacity: 1 !important;
  transition: transform .18s ease, box-shadow .18s ease;
  margin-left: auto;
}
#smartchat-launcher:hover { transform: translateY(-2px) scale(1.04); }
#smartchat-launcher:active { transform: scale(.96); }
#smartchat-launcher .smartchat-ic-close { display: none; }
#smartchat-root.is-open #smartchat-launcher .smartchat-ic-chat { display: none; }
#smartchat-root.is-open #smartchat-launcher .smartchat-ic-close { display: block; }

/* ---- Panel ---- */
#smartchat-panel {
  position: absolute;
  right: 0;
  bottom: 72px;
  width: 370px;
  max-width: calc(100vw - 32px);
  height: 540px;
  max-height: calc(100vh - 110px);
  background: var(--sc-bg);
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  animation: sc-pop .18s ease;
}
@keyframes sc-pop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

#smartchat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  font-weight: 600;
}
#smartchat-header .smartchat-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #7ef0c6; box-shadow: 0 0 0 3px rgba(126,240,198,.25);
}
#smartchat-title { flex: 1; }
#smartchat-min {
  border: 0; background: transparent; color: inherit;
  cursor: pointer; opacity: .85; padding: 2px; line-height: 0;
}
#smartchat-min:hover { opacity: 1; }

/* ---- Log ---- */
#smartchat-log {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--sc-surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sc-msg { max-width: 85%; padding: 10px 13px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; }
.sc-msg a { color: var(--sc-accent); font-weight: 600; text-decoration: underline; }
.sc-user {
  align-self: flex-end;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  border-bottom-right-radius: 4px;
}
.sc-user a { color: #fff; }
.sc-bot {
  align-self: flex-start;
  background: var(--sc-bg);
  border: 1px solid var(--sc-line);
  border-bottom-left-radius: 4px;
}

/* typing indicator */
.sc-typing { display: inline-flex; gap: 4px; align-items: center; }
.sc-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sc-ink-soft);
  animation: sc-blink 1.2s infinite both;
}
.sc-typing span:nth-child(2) { animation-delay: .2s; }
.sc-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes sc-blink { 0%,80%,100% { opacity:.25; } 40% { opacity:1; } }

/* ---- Suggestions ---- */
#smartchat-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 12px;
  background: var(--sc-surface);
}
#smartchat-suggestions:not(:empty) { padding-bottom: 8px; }
.sc-chip {
  border: 1px solid var(--sc-line);
  background: var(--sc-bg);
  color: var(--sc-ink);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.sc-chip:hover { border-color: var(--sc-accent); color: var(--sc-accent); }

/* ---- Composer ---- */
#smartchat-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--sc-line);
  background: var(--sc-bg);
}
#smartchat-input {
  flex: 1;
  border: 1px solid var(--sc-line);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  resize: none;
  max-height: 120px;
  outline: none;
  color: var(--sc-ink);
  background: var(--sc-bg);
}
#smartchat-input:focus { border-color: var(--sc-accent); }
#smartchat-send {
  border: 0;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  cursor: pointer;
  display: grid; place-items: center;
  flex: 0 0 auto;
  transition: opacity .15s ease;
}
#smartchat-send:disabled { opacity: .5; cursor: default; }

#smartchat-footnote {
  margin: 0;
  padding: 6px 12px 10px;
  font-size: 11px;
  color: var(--sc-ink-soft);
  text-align: center;
  background: var(--sc-bg);
}

/* ---- Mobile ---- */
@media (max-width: 480px) {
  #smartchat-root { right: 14px; bottom: 14px; }
  #smartchat-panel {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    right: -14px;
    bottom: -14px;
    border-radius: 0;
  }
}

/* ---- Header mail button (email transcript) ---- */
#smartchat-mail {
  border: 0; background: transparent; color: inherit;
  cursor: pointer; opacity: .85; padding: 2px; line-height: 0; margin-right: 2px;
}
#smartchat-mail:hover { opacity: 1; }

/* ---- Inline transcript form (rendered as a bot message) ---- */
.sc-transcript {
  display: flex; flex-direction: column; gap: 8px;
}
.sc-transcript input {
  border: 1px solid var(--sc-line);
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  outline: none;
  color: var(--sc-ink);
  background: var(--sc-bg);
}
.sc-transcript input:focus { border-color: var(--sc-accent); }
.sc-transcript button {
  align-self: flex-start;
  border: 0;
  border-radius: 10px;
  padding: 8px 14px;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  font: inherit;
  cursor: pointer;
}
.sc-transcript button:disabled { opacity: .5; cursor: default; }