/*
 * Sentro Concierge — widget styles
 *
 * All rules are scoped under the .sentro-cc prefix so this stylesheet cannot
 * bleed into (or be bled into by) the host WordPress theme. Do not add any
 * bare element selectors (body, button, a, etc.) outside that prefix.
 *
 * Colours are CSS custom properties defined once below (PLACEHOLDER values,
 * not any particular property's brand hex codes) so each property can rebrand the
 * whole widget by editing this one block.
 *
 * z-index: the launcher and panel use 2147483000, a very high but not
 * absurd value, high enough to sit above nearly any theme's header/modal
 * layers without reaching for the browser's actual max (2147483647).
 */

.sentro-cc {
  /* ---- Brand colours: neutral defaults. Per-property values are set at
         runtime by sentro-concierge.js from window.SentroConcierge config,
         which overrides these custom properties on the .sentro-cc element. ---- */
  --sentro-cc-color-primary: #2f6f6b;      /* PLACEHOLDER: deep coastal teal */
  --sentro-cc-color-primary-dark: #24534f; /* PLACEHOLDER: darker teal for hover states */
  --sentro-cc-color-accent: #e8a655;       /* PLACEHOLDER: warm sand/gold accent */
  --sentro-cc-color-bg: #fffaf3;           /* PLACEHOLDER: warm off-white background */
  --sentro-cc-color-surface: #ffffff;
  --sentro-cc-color-text: #2b2420;         /* PLACEHOLDER: warm near-black text */
  --sentro-cc-color-text-muted: #6b6058;
  --sentro-cc-color-border: #e6dccb;       /* PLACEHOLDER: warm sand border */
  --sentro-cc-color-guest-bubble: #2f6f6b;
  --sentro-cc-color-guest-bubble-text: #ffffff;
  --sentro-cc-color-bot-bubble: #f4ece0;   /* PLACEHOLDER: warm sand bubble */
  --sentro-cc-color-bot-bubble-text: #2b2420;
  --sentro-cc-color-notice-bg: #fbf2df;
  --sentro-cc-color-notice-text: #7a5a1e;
  --sentro-cc-color-error-bg: #fbeaea;
  --sentro-cc-color-error-text: #8a2e2e;
  --sentro-cc-color-focus-ring: #2f6f6b;

  --sentro-cc-radius: 14px;
  --sentro-cc-radius-sm: 8px;
  --sentro-cc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sentro-cc-z: 2147483000; /* high but not absurd; see file header */

  font-family: var(--sentro-cc-font);
  color: var(--sentro-cc-color-text);
  box-sizing: border-box;
}

.sentro-cc *,
.sentro-cc *::before,
.sentro-cc *::after {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------- */
/* Launcher button                                                   */
/* ---------------------------------------------------------------- */

.sentro-cc-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--sentro-cc-z);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 56px;
  height: 56px;
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  background: var(--sentro-cc-color-primary);
  color: #fff;
  font-family: var(--sentro-cc-font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.sentro-cc-launcher:hover {
  background: var(--sentro-cc-color-primary-dark);
  transform: translateY(-1px);
}

.sentro-cc-launcher:focus-visible {
  outline: 3px solid var(--sentro-cc-color-focus-ring);
  outline-offset: 2px;
}

.sentro-cc-launcher-icon {
  font-size: 20px;
  line-height: 1;
}

.sentro-cc-launcher[hidden] {
  display: none;
}

/* ---------------------------------------------------------------- */
/* Panel                                                              */
/* ---------------------------------------------------------------- */

.sentro-cc-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--sentro-cc-z);
  width: min(360px, calc(100vw - 24px));
  height: min(560px, calc(100vh - 24px));
  max-height: 560px;
  display: flex;
  flex-direction: column;
  background: var(--sentro-cc-color-bg);
  border: 1px solid var(--sentro-cc-color-border);
  border-radius: var(--sentro-cc-radius);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  font-family: var(--sentro-cc-font);
}

.sentro-cc-panel[hidden] {
  display: none;
}

@media (max-width: 480px) {
  .sentro-cc-panel {
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
    height: min(560px, calc(100vh - 16px));
  }

  .sentro-cc-launcher {
    right: 12px;
    bottom: 12px;
  }
}

/* ---------------------------------------------------------------- */
/* Header                                                             */
/* ---------------------------------------------------------------- */

.sentro-cc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  background: var(--sentro-cc-color-primary);
  color: #fff;
  flex: 0 0 auto;
}

.sentro-cc-header-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sentro-cc-header-title strong {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sentro-cc-header-subtitle {
  font-size: 12px;
  opacity: 0.85;
}

.sentro-cc-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--sentro-cc-radius-sm);
  background: transparent;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.sentro-cc-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

.sentro-cc-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- */
/* Transcript                                                        */
/* ---------------------------------------------------------------- */

.sentro-cc-transcript {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--sentro-cc-color-bg);
}

.sentro-cc-msg {
  max-width: 82%;
  padding: 9px 12px;
  border-radius: var(--sentro-cc-radius);
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}

.sentro-cc-msg-guest {
  align-self: flex-end;
  background: var(--sentro-cc-color-guest-bubble);
  color: var(--sentro-cc-color-guest-bubble-text);
  border-bottom-right-radius: 4px;
}

.sentro-cc-msg-bot {
  align-self: flex-start;
  background: var(--sentro-cc-color-bot-bubble);
  color: var(--sentro-cc-color-bot-bubble-text);
  border-bottom-left-radius: 4px;
}

.sentro-cc-msg-notice {
  align-self: center;
  max-width: 92%;
  background: var(--sentro-cc-color-notice-bg);
  color: var(--sentro-cc-color-notice-text);
  font-size: 12.5px;
  text-align: center;
  border-radius: var(--sentro-cc-radius-sm);
}

.sentro-cc-msg-error {
  align-self: center;
  max-width: 92%;
  background: var(--sentro-cc-color-error-bg);
  color: var(--sentro-cc-color-error-text);
  font-size: 12.5px;
  text-align: center;
  border-radius: var(--sentro-cc-radius-sm);
}

.sentro-cc-msg-typing {
  align-self: flex-start;
  background: var(--sentro-cc-color-bot-bubble);
  color: var(--sentro-cc-color-text-muted);
  font-size: 13px;
  font-style: italic;
  border-bottom-left-radius: 4px;
}

/* ---------------------------------------------------------------- */
/* Composer                                                           */
/* ---------------------------------------------------------------- */

.sentro-cc-composer {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--sentro-cc-color-border);
  background: var(--sentro-cc-color-surface);
}

.sentro-cc-input {
  flex: 1 1 auto;
  resize: none;
  max-height: 90px;
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid var(--sentro-cc-color-border);
  border-radius: var(--sentro-cc-radius-sm);
  font-family: var(--sentro-cc-font);
  font-size: 14px;
  line-height: 1.4;
  color: var(--sentro-cc-color-text);
  background: var(--sentro-cc-color-bg);
}

.sentro-cc-input:focus-visible {
  outline: 3px solid var(--sentro-cc-color-focus-ring);
  outline-offset: 1px;
}

.sentro-cc-send {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 14px;
  border: none;
  border-radius: var(--sentro-cc-radius-sm);
  background: var(--sentro-cc-color-primary);
  color: #fff;
  font-family: var(--sentro-cc-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.sentro-cc-send:hover:not(:disabled) {
  background: var(--sentro-cc-color-primary-dark);
}

.sentro-cc-send:focus-visible {
  outline: 3px solid var(--sentro-cc-color-focus-ring);
  outline-offset: 2px;
}

.sentro-cc-send:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sentro-cc-hint {
  flex: 0 0 auto;
  padding: 4px 14px 10px;
  font-size: 11px;
  color: var(--sentro-cc-color-text-muted);
  background: var(--sentro-cc-color-surface);
}

/* ---------------------------------------------------------------- */
/* Motion                                                             */
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .sentro-cc-panel {
    animation: sentro-cc-panel-in 0.16s ease-out;
  }
}

@keyframes sentro-cc-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sentro-cc * {
    transition: none !important;
    animation: none !important;
  }
}