/*
 * chat-widget.css
 * Local Tailwind-equivalent styles for the external ChatWidget component.
 * Loaded AFTER Bootstrap in head.html so these rules win.
 * All rules are scoped to .chat-widget to avoid affecting the rest of the page.
 *
 * Design tokens map to CED tokens:
 *   --background  → --ced-surface         (#fcf9f1)
 *   --foreground  → --ced-on-surface       (#1c1c17)
 *   --primary     → --ced-secondary        (#af2b3e)
 *   --secondary   → --ced-surface-container (#ede9df)
 *   --border      → --ced-outline-variant  (#c9c6bc)
 *   --ring        → --ced-secondary        (#af2b3e)
 */

/* ── Design tokens ────────────────────────────────────────────────────────── */
.chat-widget {
  --background:                   #fcf9f1;
  --foreground:                   #1c1c17;
  --primary:                      #af2b3e;
  --primary-foreground:           #ffffff;
  --secondary:                    #ede9df;
  --secondary-foreground:         #4a473e;
  --muted:                        #e5e1d6;
  --muted-foreground:             #4a473e;
  --border:                       #c9c6bc;
  --ring:                         #af2b3e;
  --destructive:                  #dc2626;
  --action-button-active:         #af2b3e;
  --action-button-active-foreground: #ffffff;
  --action-button-size:           2.5rem;
  --chatbot-max-h-md:             640px;

  /* Root positioning — Bootstrap resets position; force it back */
  position: fixed !important;
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px)) !important;
  right: max(1.25rem, env(safe-area-inset-right, 0px)) !important;
  z-index: 1040 !important;
}

/* ── Bootstrap button reset inside the widget ─────────────────────────────── */
/* Bootstrap's reboot sets border-radius:0 and appearance on all buttons.
   Reset to neutral so Tailwind utility classes take effect. */
.chat-widget button {
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  line-height: normal;
  padding: 0;
  color: inherit;
  text-align: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.chat-widget .flex           { display: flex; }
.chat-widget .inline-flex    { display: inline-flex; }
.chat-widget .hidden         { display: none; }
.chat-widget .flex-col       { flex-direction: column; }
.chat-widget .flex-1         { flex: 1 1 0%; }
.chat-widget .grow,
.chat-widget .flex-grow      { flex-grow: 1; }
.chat-widget .shrink-0       { flex-shrink: 0; }
.chat-widget .items-center   { align-items: center; }
.chat-widget .justify-center { justify-content: center; }
.chat-widget .justify-end-safe { justify-content: flex-end; }
.chat-widget .items-stretch   { align-items: stretch; }
.chat-widget .mx-auto        { margin-left: auto; margin-right: auto; }
.chat-widget .my-auto        { margin-top: auto; margin-bottom: auto; }
.chat-widget .space-x-2 > * + * { margin-left: 0.5rem; }
.chat-widget .space-y-1 > * + * { margin-top: 0.25rem; }

/* ── Position ─────────────────────────────────────────────────────────────── */
.chat-widget .absolute       { position: absolute; }
.chat-widget .relative       { position: relative; }
.chat-widget .top-0          { top: 0; }
.chat-widget .left-0         { left: 0; }
.chat-widget .bottom-5       { bottom: 1.25rem; }
.chat-widget .bottom-15      { bottom: 3.75rem; }
.chat-widget .right-5        { right: 1.25rem; }
.chat-widget .z-10           { z-index: 10; }
.chat-widget .z-40           { z-index: 40; }
.chat-widget .z-50           { z-index: 50; }

/* ── Sizing ───────────────────────────────────────────────────────────────── */
.chat-widget .w-full         { width: 100%; }
.chat-widget .h-full         { height: 100%; }
.chat-widget .h-9            { height: 2.25rem; }
.chat-widget .size-14        { width: 3.5rem; height: 3.5rem; }
.chat-widget .size-full      { width: 100%; height: 100%; }
.chat-widget .min-h-4        { min-height: 1rem; }
.chat-widget .max-h-82       { max-height: 20.5rem; }
.chat-widget .overflow-hidden    { overflow: hidden; }
.chat-widget .overflow-visible   { overflow: visible; }
.chat-widget .overflow-x-hidden  { overflow-x: hidden; }
.chat-widget .resize-none    { resize: none; }
.chat-widget .block          { display: block; }

/* Tailwind v4 arbitrary values */
.chat-widget [class*="size-\("] { width: var(--action-button-size); height: var(--action-button-size); }
.chat-widget [class*="sm\:max-h-\("] { max-height: var(--chatbot-max-h-md); }

/* ── Spacing ──────────────────────────────────────────────────────────────── */
.chat-widget .p-2            { padding: 0.5rem; }
.chat-widget .px-2           { padding-left: 0.5rem;  padding-right: 0.5rem; }
.chat-widget .px-3           { padding-left: 0.75rem; padding-right: 0.75rem; }
.chat-widget .px-4           { padding-left: 1rem;    padding-right: 1rem; }
.chat-widget .px-6           { padding-left: 1.5rem;  padding-right: 1.5rem; }
.chat-widget .py-2           { padding-top: 0.5rem;   padding-bottom: 0.5rem; }
.chat-widget .py-3           { padding-top: 0.75rem;  padding-bottom: 0.75rem; }
.chat-widget .py-4           { padding-top: 1rem;     padding-bottom: 1rem; }
.chat-widget .pt-3           { padding-top: 0.75rem; }
.chat-widget .pt-4           { padding-top: 1rem; }
.chat-widget .pb-2           { padding-bottom: 0.5rem; }
.chat-widget .pb-4           { padding-bottom: 1rem; }
.chat-widget .pb-16          { padding-bottom: 4rem; }
.chat-widget .mb-2           { margin-bottom: 0.5rem; }
.chat-widget .mb-4           { margin-bottom: 1rem; }
.chat-widget .mt-8           { margin-top: 2rem; }
.chat-widget .gap-2          { gap: 0.5rem; }
.chat-widget .gap-3          { gap: 0.75rem; }

/* ── Border & Radius ──────────────────────────────────────────────────────── */
.chat-widget .border         { border-width: 1px; border-style: solid; border-color: var(--border); }
.chat-widget .border-0       { border: 0 !important; }
.chat-widget .border-2       { border-width: 2px; border-style: solid; }
.chat-widget .border-white   { border-color: #ffffff; }
.chat-widget .rounded        { border-radius: 0.25rem !important; }
.chat-widget .rounded-md     { border-radius: 0.375rem !important; }
.chat-widget .rounded-lg     { border-radius: 0.5rem !important; }
.chat-widget .rounded-full   { border-radius: 9999px !important; }
.chat-widget .rounded-\[inherit\] { border-radius: inherit !important; }

/* ── Colours: backgrounds ─────────────────────────────────────────────────── */
.chat-widget .bg-transparent { background-color: transparent; }
.chat-widget .bg-background  { background-color: var(--background); }
.chat-widget .bg-primary     { background-color: var(--primary); color: var(--primary-foreground); }
.chat-widget .bg-primary *   { color: var(--primary-foreground); }
.chat-widget .bg-secondary   { background-color: var(--secondary); }

/* Opacity variants — bg-background/45 etc. */
.chat-widget .bg-background\/45 { background-color: rgba(252, 249, 241, 0.45); }
.chat-widget .bg-background\/70 { background-color: rgba(252, 249, 241, 0.70); }

/* CSS variable-based background (action button active) */
.chat-widget [class*="bg-\(--action-button-active\)"] {
  background-color: var(--action-button-active);
}
.chat-widget [class*="hover\:bg-\(--action-button-active\)\/90"]:hover {
  background-color: rgba(175, 43, 62, 0.9);
}
.chat-widget .hover\:bg-primary\/90:hover { background-color: rgba(175, 43, 62, 0.9); }

/* ── Colours: borders ─────────────────────────────────────────────────────── */
.chat-widget .border-background\/80 { border-color: rgba(252, 249, 241, 0.8); }
.chat-widget [class*="border-\(--action-button-active\)"] {
  border-color: var(--action-button-active);
}

/* ── Colours: text ────────────────────────────────────────────────────────── */
.chat-widget .text-foreground            { color: var(--foreground); }
.chat-widget .text-primary-foreground    { color: var(--primary-foreground); }
.chat-widget .text-secondary-foreground  { color: var(--secondary-foreground); }
.chat-widget .text-destructive           { color: var(--destructive); }
.chat-widget [class*="text-\(--action-button-active-foreground\)"] {
  color: var(--action-button-active-foreground);
}
.chat-widget .placeholder\:text-muted-foreground::placeholder {
  color: var(--muted-foreground);
}

/* ── Shadows & Backdrop ───────────────────────────────────────────────────── */
.chat-widget .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}
.chat-widget .shadow-xs {
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.chat-widget .backdrop-blur-2xl    { backdrop-filter: blur(40px); }
.chat-widget .backdrop-saturate-200 {
  /* combine with blur if both present */
  backdrop-filter: blur(40px) saturate(200%);
}

/* ── Typography ───────────────────────────────────────────────────────────── */
.chat-widget .text-sm        { font-size: 0.875rem; line-height: 1.25rem; }
.chat-widget .text-lg        { font-size: 1.125rem; line-height: 1.75rem; }
.chat-widget .font-medium    { font-weight: 500; }
.chat-widget .font-semibold  { font-weight: 600; }
.chat-widget .tracking-tight { letter-spacing: -0.025em; }
.chat-widget .whitespace-nowrap { white-space: nowrap; }
.chat-widget .sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ── Interactivity ────────────────────────────────────────────────────────── */
.chat-widget .outline-none         { outline: none; }
.chat-widget .pointer-events-none  { pointer-events: none; }
.chat-widget .invisible            { visibility: hidden; }
.chat-widget .opacity-0            { opacity: 0; }
.chat-widget .scale-100            { transform: scale(1); }
.chat-widget .transition-all       { transition: all 150ms cubic-bezier(0.4,0,0.2,1); }
.chat-widget .transition-\[color\,box-shadow\] { transition: color 150ms ease, box-shadow 150ms ease; }
.chat-widget .duration-250         { transition-duration: 250ms !important; }
.chat-widget .ease-out             { transition-timing-function: cubic-bezier(0,0,0.2,1); }
.chat-widget .hover\:scale-110:hover { transform: scale(1.1); }
.chat-widget .disabled\:opacity-50:disabled   { opacity: 0.5; }
.chat-widget .disabled\:pointer-events-none:disabled { pointer-events: none; }
.chat-widget .disabled\:cursor-not-allowed:disabled  { cursor: not-allowed; }

/* ── SVG helpers ──────────────────────────────────────────────────────────── */
.chat-widget [class*="\[&_svg\]\:pointer-events-none"] svg { pointer-events: none; }
.chat-widget [class*="\[&_svg\]\:shrink-0"] svg            { flex-shrink: 0; }
.chat-widget .has-\[\>svg\]\:px-3:has(> svg) { padding-left: 0.75rem; padding-right: 0.75rem; }

/* ── Linear gradient ──────────────────────────────────────────────────────── */
.chat-widget .bg-linear-135 { background-image: linear-gradient(135deg, var(--primary), var(--action-button-active)); }
.chat-widget .from-primary  { --tw-gradient-from: var(--primary); }
.chat-widget .to-\(--action-button-active\) { --tw-gradient-to: var(--action-button-active); }
.chat-widget .text-gradient {
  color: var(--primary);                    /* solid maroon — visible immediately */
  background-image: linear-gradient(135deg, var(--primary), var(--action-button-active));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── sm: breakpoint (640px) ───────────────────────────────────────────────── */
@media (min-width: 640px) {
  .chat-widget .sm\:rounded-xl     { border-radius: 0.75rem; }
  .chat-widget .sm\:absolute       { position: absolute; }
  .chat-widget .sm\:inset-auto     { inset: auto; }     /* must come BEFORE bottom-0/right-0 */
  .chat-widget .sm\:bottom-0       { bottom: 0 !important; }
  .chat-widget .sm\:right-0        { right: 0 !important; }
  .chat-widget .sm\:h-\[80vh\]     { height: 80vh; }
  .chat-widget .sm\:max-w-md       { max-width: 28rem; }
  .chat-widget .sm\:w-\[90vw\]     { width: 90vw; }
  .chat-widget .sm\:-top-1\.75     { top: -0.4375rem; }
  .chat-widget .sm\:translate-y-5  { transform: translateY(1.25rem); }
  .chat-widget .sm\:right-\[107\%\] { right: 107%; }
  .chat-widget .sm\:right-\[97\%\]  { right: 97%; }
}

/* ── Panel: force on-screen position regardless of utility class order ─────── */
/* The .chat-widget root is a fixed 56×56px FAB container.
   Position the panel ABOVE the FAB via bottom:calc(100%+0.5rem) so it
   clears the button. Give a default height/width so flex-1 children
   (message list) have something to fill — no !important so the widget's
   resize logic can override these via JS inline styles or higher-specificity
   classes. Position is !important so it always appears above the FAB. */
.chat-widget > section {
  position: absolute !important;
  bottom: calc(100% + 0.5rem) !important;
  right: 0 !important;
  width: min(448px, 90vw);
  max-width: calc(100vw - 2.5rem);
  height: min(640px, 80vh);
}

/*
 * Mobile: ChatWidget uses `fixed` + `w-full` + `h-full` but only `sm:bottom-0 sm:right-0`
 * for insets — below 640px the panel has no viewport anchors and can render off-screen.
 * Full-viewport overlay matches CED-124 (usable at 320–375px, no horizontal escape).
 */
@media (max-width: 639.98px) {
  .chat-widget > section {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important; /* fallback */
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
  }
}

/* Ensure the container fills the section so its flex children work */
.chat-widget > section .chatbot-container {
  height: 100%;
}

/* ── Named component classes ──────────────────────────────────────────────── */
.chat-widget .ai-panel   { display: flex; flex-direction: column; height: 100%; }
.chat-widget .ai-wrapper { display: flex; flex-direction: column; flex: 1 1 0%; overflow: hidden; }
.chat-widget .ai-message-list {
  display: flex; flex-direction: column;
  flex: 1 1 0%; overflow-y: auto; padding: 1rem 0.75rem;
}
.chat-widget .chat-widget-header {
  display: flex; align-items: center;
  padding: 0.75rem; gap: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.chat-widget .chat-widget-footer {
  padding: 0.5rem 0.75rem 0.75rem;
  border-top: 1px solid var(--border);
}
.chat-widget .chat-widget-controls {
  display: flex; align-items: center; gap: 0.25rem;
  margin-left: auto;
}
.chat-widget .main-effect {
  transition: all 250ms cubic-bezier(0,0,0.2,1);
}

/* ── Panel container (glass effect) ──────────────────────────────────────── */
.chat-widget .chatbot-container {
  background-color: rgba(252, 249, 241, 0.93); /* opaque enough to prevent maroon banner bleed */
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-radius: 0.75rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Focus ring (Tailwind focus-visible utilities) ────────────────────────── */
.chat-widget .focus-visible\:ring-4:focus-visible     { box-shadow: 0 0 0 4px rgba(175,43,62,.25); outline: none; }
.chat-widget .focus-visible\:ring-\[3px\]:focus-visible { box-shadow: 0 0 0 3px rgba(175,43,62,.25); outline: none; }
.chat-widget .focus-visible\:outline-1:focus-visible  { outline-width: 1px; }
.chat-widget .focus\:ring-0:focus                     { box-shadow: none; outline: none; }

/* ── Bootstrap element-level resets ──────────────────────────────────────── */
/* Bootstrap reboot sets aggressive styles on h*, p, ul, ol, textarea.
   These bleed into the widget and break the header title, message list, input. */
.chat-widget h1,
.chat-widget h2,
.chat-widget h3,
.chat-widget h4,
.chat-widget h5,
.chat-widget h6  { font-size: inherit; font-weight: inherit; line-height: inherit;
                   color: inherit; margin: 0; }
.chat-widget p   { margin: 0; }
.chat-widget ul,
.chat-widget ol  { margin: 0; padding-left: 0; list-style: none; }
.chat-widget li  { margin: 0; }
.chat-widget strong { font-weight: 600; }
/* Bootstrap forces white background + black text on inputs — override explicitly */
.chat-widget textarea,
.chat-widget input[type="text"],
.chat-widget input[type="search"] {
  font-size: inherit;
  font-family: inherit;
  background-color: transparent;
  color: var(--foreground);
  caret-color: var(--primary);
}

/* ── Open/close state utilities ───────────────────────────────────────────── */
/* Widget toggles these on the <section> to show/hide the panel */
.chat-widget .visible          { visibility: visible; }
.chat-widget .opacity-100      { opacity: 1; }
.chat-widget .translate-y-0    { transform: translateY(0); }
.chat-widget .pointer-events-auto { pointer-events: auto; }
.chat-widget .fixed            { position: fixed; }

/* ── Gap-fill: missing sizing utilities ───────────────────────────────────── */
.chat-widget .size-6           { width: 1.5rem;  height: 1.5rem; }
.chat-widget .size-8           { width: 2rem;    height: 2rem; }
.chat-widget .size-9           { width: 2.25rem; height: 2.25rem; }
.chat-widget .size-10          { width: 2.5rem;  height: 2.5rem; }
.chat-widget .size-12          { width: 3rem;    height: 3rem; }
.chat-widget .size-4           { width: 1rem;    height: 1rem; }
.chat-widget .w-8              { width: 2rem; }
.chat-widget .h-8              { height: 2rem; }
.chat-widget .w-10             { width: 2.5rem; }
.chat-widget .h-10             { height: 2.5rem; }
.chat-widget .w-12             { width: 3rem; }
.chat-widget .h-12             { height: 3rem; }
.chat-widget .h-3\/4           { height: 75%; }
.chat-widget .w-auto           { width: auto; }
.chat-widget .h-auto           { height: auto; }
.chat-widget .min-w-0          { min-width: 0; }
.chat-widget .min-h-0          { min-height: 0; }
.chat-widget .w-\[90\%\]       { width: 90%; }

/* ── Gap-fill: missing spacing utilities ──────────────────────────────────── */
.chat-widget .gap-1            { gap: 0.25rem; }
.chat-widget .gap-4            { gap: 1rem; }
.chat-widget .gap-6            { gap: 1.5rem; }
.chat-widget .p-8              { padding: 2rem; }
.chat-widget .p-4              { padding: 1rem; }
.chat-widget .p-3              { padding: 0.75rem; }
.chat-widget .pt-2             { padding-top: 0.5rem; }
.chat-widget .pb-3             { padding-bottom: 0.75rem; }
.chat-widget .mt-1             { margin-top: 0.25rem; }
.chat-widget .mt-2             { margin-top: 0.5rem; }
.chat-widget .mb-0             { margin-bottom: 0; }
.chat-widget .mb-1             { margin-bottom: 0.25rem; }

/* ── Gap-fill: missing position utilities ─────────────────────────────────── */
.chat-widget .right-\[95\%\]   { right: 95%; }
.chat-widget .inset-0          { inset: 0; }
.chat-widget .self-start       { align-self: flex-start; }
.chat-widget .self-end         { align-self: flex-end; }
.chat-widget .self-center      { align-self: center; }

/* ── Gap-fill: missing typography utilities ───────────────────────────────── */
.chat-widget .text-xs          { font-size: 0.75rem;  line-height: 1rem; }
.chat-widget .text-base        { font-size: 1rem;     line-height: 1.5rem; }
.chat-widget .text-xl          { font-size: 1.25rem;  line-height: 1.75rem; }
.chat-widget .font-bold        { font-weight: 700; }
.chat-widget .font-normal      { font-weight: 400; }
.chat-widget .font-secondary   { font-family: var(--ced-font-body, 'Public Sans', sans-serif); }
.chat-widget .leading-relaxed  { line-height: 1.625; }
.chat-widget .leading-tight    { line-height: 1.25; }
.chat-widget .leading-none     { line-height: 1; }
.chat-widget .text-left        { text-align: left; }
.chat-widget .text-center      { text-align: center; }
.chat-widget .text-right       { text-align: right; }
.chat-widget .text-muted-foreground { color: var(--muted-foreground); }
.chat-widget .italic           { font-style: italic; }
.chat-widget .not-italic       { font-style: normal; }
.chat-widget .line-clamp-1     { overflow: hidden; display: -webkit-box;
                                  -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
/* Arbitrary text size: text-[0.6rem] — used for the session ID in the footer */
.chat-widget [class*="text-[0.6rem]"] { font-size: 0.6rem !important; line-height: 1; }

/* ── Gap-fill: object-fit & aspect-ratio (video avatar) ──────────────────── */
.chat-widget .object-cover     { object-fit: cover; }
.chat-widget .object-contain   { object-fit: contain; }
.chat-widget .object-fill      { object-fit: fill; }
.chat-widget .object-center    { object-position: center; }
.chat-widget .aspect-square    { aspect-ratio: 1 / 1; }
.chat-widget .aspect-video     { aspect-ratio: 16 / 9; }
.chat-widget .aspect-auto      { aspect-ratio: auto; }
.chat-widget video             { display: block; }

/* Intro / loading video — circular mask (widget DOM: .chat-widget-video > .rounded-full.border > .circular-video-container > video) */
.chat-widget .chat-widget-video {
  align-items: center;
  justify-content: center;
}
/* Square frame first — without equal width/height, rounded-full stays a rounded rectangle */
.chat-widget .chat-widget-video .rounded-full {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(18rem, 72vw);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: 50% !important;
  overflow: hidden !important;
}
.chat-widget .circular-video-container {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  border-radius: 50%;
  overflow: hidden !important;
}
.chat-widget .circular-video-container video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover !important;
  object-position: center;
  border-radius: 50%;
  /* Extra insurance: some browsers paint video above parent overflow */
  clip-path: circle(closest-side at 50% 50%);
  -webkit-clip-path: circle(closest-side at 50% 50%);
}

/* ── Gap-fill: missing colour utilities ───────────────────────────────────── */
.chat-widget .bg-card          { background-color: var(--background); }
.chat-widget .bg-muted         { background-color: var(--muted); }
.chat-widget .hover\:bg-primary\/90:hover { background-color: rgba(175, 43, 62, 0.9); }
.chat-widget .hover\:bg-secondary:hover   { background-color: var(--secondary); }

/* ── Chat session ID — developer-only, nearly invisible ──────────────────── */
/* The footer renders `id: <uuid>` for debugging. Keep it readable only on
   deliberate inspection — 0.6rem, 30% opacity, monospace, no select. */
.chat-widget [data-footer] span { opacity: 0.3; font-family: monospace; user-select: all; }