/* Fallback for header height (JS overwrites this) */
:root {
  --header-offset: 70px;
}

/*────────────────────────────────────────────────────────
  1. MAIN CONTAINER: right-middle, auto width ≤25vw on small
────────────────────────────────────────────────────────*/
html body #chat-container {
  position: fixed !important;
  /*top: clamp( calc(var(--header-offset) + 40px), 50%, calc(100% - var(--header-offset)) ) !important;*/
  top: var(--chat-top, 50%) !important;   /* JS will set this value */
  right: 20px  !important;
  /* transform: translateY(-50%) !important; */
  width: 0     !important;
  height: 74vh !important;
  background-color: #fff !important;
  border-radius: 15px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transition: width 0.4s ease, opacity 0.4s ease !important;
  opacity: 0 !important;
  z-index: 9999 !important;
}

html body.chat-open #chat-container {
  /* never exceed 25% of viewport width on small laptops,
     otherwise cap at 400px */
  width: min(25vw, 400px) !important;
  opacity: 1    !important;
}

html body:not(.chat-open) #chat-container {
  width: 0    !important;
  opacity: 0  !important;
}

/*────────────────────────────────────────────────────────
  EXTRA WIDE DESKTOPS  –  widen chat container
────────────────────────────────────────────────────────*/
@media (min-width: 1680px) {           /* ≈ 20-inch monitors */
  html body.chat-open #chat-container {
    /* let it use up to 30 % of the viewport or 500 px,
       whichever is smaller – adjust to taste              */
    width: min(30vw, 500px) !important;
  }
}

/* Optional: go a bit wider still for ultra-wide screens */
@media (min-width: 1920px) {
  html body.chat-open #chat-container {
    width: min(32vw, 560px) !important;
  }
}

/*removed chat bubble launcher*/

html body.chat-open #chat-launcher {
  opacity: 0 !important;
  pointer-events: none !important;
}

/*────────────────────────────────────────────────────────
  3. HEADER (logo image + text + controls)
────────────────────────────────────────────────────────*/
#chat-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1rem !important;
  background-color: #fff !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#bot-avatar img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
}

#bot-info {
  flex: 1 !important;
  margin-left: 0.75rem !important;
}

#bot-info h3 {
  margin: 0 !important;
  font-size: 1rem !important;
  color: #111827 !important;
}

#bot-info p {
  margin: 0 !important;
  font-size: 0.75rem !important;
  color: #6b7280 !important;
}

#header-controls button {
  background: none !important;
  border: none !important;
  color: #6b7280 !important;
  font-size: 1.25rem !important;
  margin-left: 0.5rem !important;
  cursor: pointer !important;
  transition: color 0.2s, transform 0.2s !important;
}

#header-controls button:hover {
  color: #111827 !important;
  transform: scale(1.5);
}



/* put this after every other #header-controls button rule so that this rule prevails */
#header-controls #minimize-button {          /* 101 points  */
  color: #dc2626 !important;                 /*   bright red */
}
#header-controls #minimize-button:hover {    /* 101 points  */
  color: #b91c1c !important;                 /*   darker red on hover */
}


/*────────────────────────────────────────────────────────
  4. CHAT LOG & MESSAGES
────────────────────────────────────────────────────────*/
#chat-log {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 1rem !important;
  background-color: #f9fafb !important;
}

.chat-message {
  display: flex !important;
  margin-bottom: 0.75rem !important;
}
.bot-message { justify-content: flex-start !important; }
.user-message { justify-content: flex-end !important; }

.message-bubble {
  max-width: 70% !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.75rem !important;
  background-color: #e5e7eb !important;
  color: #1f2937 !important;
  position: relative !important;
}
.bot-message .message-bubble  { border-bottom-left-radius: 0 !important; }
.user-message .message-bubble { 
  background-color: #126312 !important;
  color: #fff !important;
  border-bottom-right-radius: 0 !important;
}

/* remove boxed speaker icon */
.replay-button {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin-left: 0.5rem !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  color: currentColor !important;
}

/* timestamps */
.timestamp {
  font-size: 0.625rem !important;
  color: #9ca3af !important;
  margin-top: 0.25rem !important;
}
.bot-timestamp       { margin-left: 0.5rem !important; }
.user-message .timestamp { margin-right: 0.5rem !important; }

/*────────────────────────────────────────────────────────
  5. TYPING INDICATOR
────────────────────────────────────────────────────────*/
.typing-indicator { display: flex !important; gap: 0.25rem !important; padding: 0.5rem !important; }
.typing-indicator .dot {
  width: 8px !important;
  height: 8px !important;
  background: #9ca3af !important;
  border-radius: 50% !important;
  animation: blink 1s infinite ease-in-out both !important;
}
.typing-indicator .dot:nth-child(2) { animation-delay: 0.2s !important; }
.typing-indicator .dot:nth-child(3) { animation-delay: 0.4s !important; }
@keyframes blink {
  0%,80%,100% { opacity: 0.3 !important; }
  40%          { opacity: 1   !important; }
}

/*────────────────────────────────────────────────────────
  6. INPUT AREA (text + mic/send)
────────────────────────────────────────────────────────*/
#input-container {
  display: flex !important;
  align-items: center !important;
  padding: 0.75rem 1rem !important;
  border-top: 1px solid #e5e7eb !important;
  background-color: #fff !important;
}

#chat-input {
  flex: 1 !important;
  padding: 0.5rem 0.75rem !important;
  border: 1px solid #d1d5db !important;
  border-radius: 999px !important;
  font-size: 0.9rem !important;
  outline: none !important;
}

#input-buttons {
  display: flex !important;
  gap: 0.5rem !important;
  margin-left: 0.5rem !important;
}

#input-buttons button {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: #6b7280 !important;
  font-size: 1.5rem !important;
  transition: color 0.2s !important;
}

#input-buttons button:hover {
  color: #126312 !important;
}

#input-buttons svg {
  stroke: currentColor !important;
  width: 24px !important;
  height: 24px !important;
}

/*────────────────────────────────────────────────────────
  7. LIVE CHAT BUTTON
────────────────────────────────────────────────────────*/
.live-chat-button-container {
  padding: 1rem !important;
  text-align: center !important;
  border-top: 1px solid #e5e7eb !important;
  background: #fff !important;
}

#live-chat-button {
  background-color: #ef4444 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0.375rem !important;
  padding: 0.5rem 1rem !important;
  cursor: pointer !important;
  font-size: 0.9rem !important;
  transition: background-color 0.2s !important;
}

#live-chat-button:hover {
  background-color: #dc2626 !important;
}
	/* add  the 2nd button for submit ticket*/
/* ACTION-BAR: two side-by-side buttons */
/*────────────────────────────────────────────────────────
  ACTION-BAR  –  base behaviour
────────────────────────────────────────────────────────*/
.live-chat-button-container {
  display: flex !important;
  gap: 0.75rem !important;
  justify-content: center !important;
  padding: 1rem !important;
  border-top: 1px solid #e5e7eb !important;
  background: #fff !important;

  /* let the buttons wrap when there isn’t enough width */
  flex-wrap: wrap !important;
}

/* Each button should shrink identically and fill the row */
.action-btn {
  flex: 1 1 160px !important;   /*  =  grow : shrink : basis-width  */
  max-width: 100% !important;
}


/*────────────────────────────────────────────────────────
  SMALL CHAT BOXES (< 350 px wide)
  – stack buttons vertically to avoid crowding
────────────────────────────────────────────────────────*/
@media (max-width: 349px) {
  .live-chat-button-container {
    flex-direction: column !important;   /* one above the other   */
    gap: 0.5rem !important;
  }
  .action-btn {
    flex: 1 1 auto !important;           /* full-width each row   */
  }
}

/*────────────────────────────────────────────────────────
  MID-SIZE (350 – 480 px)
  – two per row but allow text to wrap cleanly
────────────────────────────────────────────────────────*/
@media (min-width: 350px) and (max-width: 480px) {
  .action-btn {
    flex: 1 1 45% !important;            /* two buttons in a row  */
    white-space: normal !important;      /* allow “Open Live Chat” to wrap */
  }
}


/* shared look */
.action-btn{
  flex:1 1 0;                             /* equal widths */
  min-width:120px;
  text-align:center !important;
  border:none !important;
  border-radius:.375rem !important;
  padding:.5rem 1rem !important;
  font-size:.9rem !important;
  cursor:pointer !important;
  transition:background-color .2s !important;
  color:#fff !important;
}

/* specific colours */
.action-btn.live  { background:#ef4444 !important; }   /* red */
.action-btn.live:hover  { background:#dc2626 !important; }

.action-btn.ticket{ background:#3b82f6 !important; }   /* blue */
.action-btn.ticket:hover{ background:#2563eb !important; }


/* cleaned up ticket form css*/
/* ─ Seamless ticket form (inside chat log) ─────────────────────*/
.ticket-form{
  display:flex;
  flex-direction:column;
  align-items:flex-start;          /* flush-left                */
  gap:.10rem;                      /* ultra-compact vertical    */
  width:100%; max-width:100%;      /* follow chat-box width     */
  padding:0 !important;            /* no extra inset            */
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

.ticket-form label{
  font-weight:500;
  margin-bottom:.1rem;
}

.ticket-form input,
.ticket-form select,
.ticket-form textarea{
  width:100%;
  box-sizing:border-box;
  padding:.4rem .6rem;
  border:1px solid #d1d5db;
  border-radius:.375rem;
  font:inherit;
  background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.ticket-form input:focus,
.ticket-form select:focus,
.ticket-form textarea:focus{
  outline:none;
  border-color:#3b82f6;
  box-shadow:0 0 0 2px rgba(59,130,246,.25);
}

/* intl-tel-input full width + shrink-friendly */
.phone-wrap .iti{ width:100%; }
.phone-wrap .iti__tel-input{
  padding-left:3.25rem;
  min-width:0;                     /* prevent horiz scroll      */
}

/* error line keeps layout from jumping */
.ticket-form .error{
  min-height:.9rem;
  color:#dc2626;
  font-size:.8rem;
}

/* centred buttons */
.ticket-form .action-bar{
  display:flex;
  justify-content:center !important;
  gap:.75rem;
  margin-top:.5rem;
}
.ticket-form .btn{
  padding:.45rem 1.2rem;
  border-radius:.375rem;
  font-size:.9rem;
  border:none;
  color:#fff;
  cursor:pointer;
  transition:transform .12s,background-color .2s;
}
.ticket-form .btn:hover{ transform:translateY(-1px); }

.ticket-form .btn.submit      {background:#3b82f6;}
.ticket-form .btn.submit:hover{background:#2563eb;}
.ticket-form .btn.cancel      {background:#6b7280;}
.ticket-form .btn.cancel:hover{background:#4b5563;}

/* never allow horizontal overflow */
#chat-log,
.ticket-form{ overflow-x:hidden !important; }

 /* Ticket form – red highlight for any .invalid input / select / textarea */
.ticket-form .invalid {
  border-color:#dc2626 !important;
  box-shadow:0 0 0 2px rgba(220,38,38,.25) !important;
}


/*────────────────────────────────────────────────────────
  8. MOBILE OVERRIDE
────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  html body.chat-open #chat-container {
    top: auto !important;
    bottom: 0     !important;
    transform: none !important;
    width: 100%   !important;
    height: 60vh  !important;
    border-radius: 12px 12px 0 0 !important;
	  
	transition: none !important;   /* <- NEW: width */
    opacity: 1  !important;        /* <- NEW: no fade-in */
  }
  /*#chat-launcher { display: none !important; }*/
}

/*────────────────────────────────────────────────────────
  Avatar inside chat-log: constrain your logo to 40×40 px
────────────────────────────────────────────────────────*/
#chat-container .avatar img {
  width: 40px !important;
  height: 40px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/*────────────────────────────────────────────────────────
  Header title: bigger, bolder, dark green
────────────────────────────────────────────────────────*/
#bot-info h3 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #007528 !important;
}

/*────────────────────────────────────────────────────────
  Close button “×” in header: red  [REMOVED FOR NOW]
────────────────────────────────────────────────────────
#header-controls #close-button-window {
  color: #dc2626 !important;
}
*/

/*────────────────────────────────────────────────────────
  Pulse animation for the minimized “AI” bubble
────────────────────────────────────────────────────────*/
@keyframes pulse {
  0%   { transform: translateY(-50%) scale(1); }
  50%  { transform: translateY(-50%) scale(1.1); }
  100% { transform: translateY(-50%) scale(1); }
}

html body:not(.chat-open) #chat-launcher {
  animation: pulse 2s infinite ease-in-out !important;
}

/*────────────────────────────────────────────────────────
  1. Header buttons (reset, minimize, close) same size as title
────────────────────────────────────────────────────────*/
#header-controls button {
  font-size: 1.25rem !important;   /* matches h3 size */
  line-height: 1 !important;
}

/*────────────────────────────────────────────────────────
  2. Bot-message avatar: small + centered
────────────────────────────────────────────────────────*/
.chat-message {
  display: flex !important;
  align-items: center !important;  /* vertically center avatar + bubble */
}
#chat-container .avatar img {
  width: 24px !important;
  height: 24px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  margin-right: 0.5rem !important; /* space between icon + bubble */
}

/*────────────────────────────────────────────────────────
  3. All bubbles: green background + white text
────────────────────────────────────────────────────────*/
.message-bubble {
  background-color: #007528 !important;
  color: #ffffff        !important;
}
.message-bubble a,
.message-bubble code {
  color: #fff !important;  /* keep links/text white too */
}

/*────────────────────────────────────────────────────────
  4. Mic “listening” indicator: red pulsing ring
────────────────────────────────────────────────────────*/
@keyframes mic-pulse {
  0%   { box-shadow: 0 0 0 2px rgba(220,38,38,0.8); }
  50%  { box-shadow: 0 0 0 6px rgba(220,38,38,0);   }
  100% { box-shadow: 0 0 0 2px rgba(220,38,38,0.8); }
}
#mic-button.listening {
  animation: mic-pulse 1s infinite ease-in-out !important;
  border-radius: 50%         !important;
}

/*────────────────────────────────────────────────────────
  2. Responsive scaling on mid-sized screens
────────────────────────────────────────────────────────*/
@media (max-width: 1200px) and (min-width: 769px) {
  /* header */
  #bot-info h3 { font-size: 1rem !important; }
  #bot-info p  { font-size: 0.75rem !important; }

  /* chat bubbles */
  .message-bubble {
    font-size: 0.85rem !important;
    padding: 0.4rem 0.6rem !important;
  }
  .timestamp     { font-size: 0.6rem !important; }
  .bot-timestamp { margin-left: 0.4rem !important; }
  .user-message .timestamp { margin-right: 0.4rem !important; }

  /* input area */
  #input-container { padding: 0.6rem 0.8rem !important; }
  #chat-input     { font-size: 0.85rem !important; }
  #input-buttons svg { width: 20px !important; height: 20px !important; }

  /* live chat button */
  #live-chat-button {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.85rem !important;
  }
}

/*────────────────────────────────────────────────────────
  3. Mic “listening” state: red icon + two red square outlines
────────────────────────────────────────────────────────*/
/*───────────────────────────────────────────────────────────────
  Mic button – base appearance
───────────────────────────────────────────────────────────────*/
#mic-button {
  position: relative !important;

  /* size & shape */
  width: 40px;
  height: 40px;
  border-radius: 4px !important;       /* 0 = perfect square     */

  /* layout helpers */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* default colours (edit as you like) */
  background: #ffffff;
  color: #444;
  transition: color .2s ease;
}

/*───────────────────────────────────────────────────────────────
  Listening state – red icon + pulsing double-square halo
───────────────────────────────────────────────────────────────*/
#mic-button.listening {
  /* 1. keep square shape, override any 50% radius elsewhere       */
  border-radius: 4px !important;

  /* 2. red mic icon colour                                        */
  color: #dc2626 !important;

  /* 3. two red square outlines + pulse animation                  */
  animation: pulse-squares 1s ease-in-out infinite;
}

/* Keyframes for the “blink” effect */
@keyframes pulse-squares {
  0% {
    box-shadow:
      0 0 0 2px rgba(220, 38, 38, 1),
      0 0 0 6px rgba(220, 38, 38, .5);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(220, 38, 38, .6),
      0 0 0 9px rgba(220, 38, 38, .25);
  }
  100% {
    box-shadow:
      0 0 0 2px rgba(220, 38, 38, 1),
      0 0 0 6px rgba(220, 38, 38, .5);
  }
}



/*────────────────────────────────────────────────────────
  4. User bubbles become silver
────────────────────────────────────────────────────────*/
.user-message .message-bubble {
  background-color: #e4e4e4 !important;
  color:           #1f2937 !important;
}


/*────────────────────────────────────────────────────────
  Halo pulse for the circular launcher
────────────────────────────────────────────────────────*/

/* 1. Make sure the bubble acts as an anchor for a pseudo-element */
#chat-launcher {
  position: fixed !important;          /* already set, just here for clarity */
  /* …your other styles…               */
  overflow: visible !important;        /* let the halo extend past the edge */
}

/* 2. Create the halo layer */
#chat-launcher::before {
  content: "";
  position: absolute;
  inset: 0;                            /* stretch to the bubble’s edges   */
  border-radius: 50%;
  background: transparent;
  pointer-events: none;                /* halo shouldn’t intercept clicks */
  z-index: -1;                         /* sit *behind* the bubble         */
}



/*────────────────────────────────────────────────────────
  20-inch-and-larger screens  –  bigger input + icons
────────────────────────────────────────────────────────*/
@media (min-width: 1680px) {

  /* 1. Text field */
  #chat-input {
    font-size: 1rem !important;          /* was 0.9rem */
    padding: 0.6rem 1rem !important;     /* taller / wider */
  }

  /* 2. Send & mic buttons (font-icon and SVG) */
  #input-buttons button       { font-size: 1.75rem !important; }  /* was 1.5rem */
  #input-buttons svg          { width: 28px !important; height: 28px !important; }

  /* 3. Mic button itself – larger square */
  #mic-button                 { width: 48px !important; height: 48px !important; }

  /* 4. Bigger pulse to match new size */
  #mic-button.listening {
    animation: pulse-squares-lg 1s ease-in-out infinite !important;
  }
}

/*────────────────────────────────────────────────────────
  Keyframes for the larger mic halo
────────────────────────────────────────────────────────*/
@keyframes pulse-squares-lg {
  /* yellow → green, proportionally wider shadows */
  0%   { box-shadow: 0 0 0 3px rgba(254,235,58,.8),
                       0 0 0 8px rgba(18,99,18,.2); }
  45%  { box-shadow: 0 0 0 4px rgba(254,235,58,.6),
                       0 0 0 12px rgba(18,99,18,.15); }
  70%  { box-shadow: 0 0 0 10px rgba(18,99,18,.25),
                       0 0 0 18px rgba(18,99,18,0); }
  100% { box-shadow: 0 0 0 3px rgba(254,235,58,.8),
                       0 0 0 8px rgba(18,99,18,.2); }
}


/*────────────────────────────────────────────────────────
  Extra-compact bubbles for small chat window
────────────────────────────────────────────────────────*/
@media (max-width: 768px) {                /* same cut-off used for your
                                              mobile override above */

  /* 1. Chat bubbles: tighter padding + smaller text */
  .message-bubble {
    font-size: 0.8rem !important;          /* was 0.85–1rem */
    padding: 0.35rem 0.55rem !important;   /* was 0.5rem 0.75rem */
    line-height: 1.25 !important;
  }

  /* 2. Timestamp text even smaller */
  .timestamp {
    font-size: 0.55rem !important;         /* was 0.625rem */
  }

  /* 3. Reduce space under each message */
  .chat-message {
    margin-bottom: 0.5rem !important;      /* was 0.75rem */
  }
}


/*────────────────────────────────────────────────────────
  13-inch-class laptops  –  smaller bubbles & avatars
────────────────────────────────────────────────────────*/
@media (min-width: 769px) and (max-width: 1440px) {

  /* 1. Shrink bubble text & padding */
  .message-bubble {
    font-size: 0.75rem !important;          /* was 0.85–1rem        */
    padding: 0.35rem 0.55rem !important;    /* narrower & shorter   */
    line-height: 1.25 !important;
  }

  /* 2. Trim timestamp size */
  .timestamp {
    font-size: 0.55rem !important;          /* was 0.625rem         */
  }

  /* 3. Reduce vertical spacing */
  .chat-message {
    margin-bottom: 0.45rem !important;      /* was 0.75rem          */
  }

  /* 4. Optionally scale down avatars if you want */
  #chat-container .avatar img {
    width: 20px !important;                 /* was 24px             */
    height: 20px !important;
    margin-right: 0.4rem !important;
  }
}

/*────────────────────────────────────────────────────────
  USER BUBBLES  –  right-align everything & allow longer lines
────────────────────────────────────────────────────────*/

/* 1. Stack the bubble + timestamp vertically, pinned to the right */
.user-message {
  flex-direction: column !important;   /* bubble on top, time below      */
  align-items: flex-end !important;    /* stick both to the right edge   */
  text-align: right !important;        /* wrap lines starting from right */
}

/* 2. Let user bubbles grow wider before wrapping                */
/*    (70 % → 85 %, tweak to taste)                              */
.user-message .message-bubble {
  max-width: 85% !important;
}

/* 3. Timestamp sits under the bubble, right-aligned              */
.user-message .timestamp {
  margin: 0.25rem 0 0 !important;      /* small gap above time stamp     */
  text-align: right !important;
  width: 100% !important;              /* take the full row so it flushes
                                          with the bubble’s right edge   */
}


/*────────────────────────────────────────────────────────
  USER SIDE  –  flush-right bubble & timestamp, no extra gap
────────────────────────────────────────────────────────*/

/* 1. Collapse any reserved avatar space and right-align the column */
.user-message {                                  /* your markup uses this class */
  display: flex !important;
  flex-direction: column !important;             /* bubble on top, time below   */
  align-items: flex-end !important;              /* stick the stack to the right*/
  margin-left: 0 !important;                     /* kill leftover indent        */
  padding-left: 0 !important;
}

/* 2. Hide empty avatar placeholder (it was creating a left gutter) */
.user-message .avatar { display: none !important; }

/* 3. Bubble itself – no stray margins, wider before wrapping */
.user-message .message-bubble {
  margin: 0 !important;                          /* remove both left/right gaps */
  max-width: 90% !important;                     /* was 70–85%; tweak as needed */
  text-align: left !important;                   /* natural reading direction   */
}

/* 4. Timestamp sits directly under the bubble, flush right */
.user-message .timestamp {
  margin: 0.25rem 0 0 !important;                /* tiny gap above time         */
  align-self: flex-end !important;               /* right edge of column        */
  text-align: right !important;
}



/* Fallback if JS fails: leave room ≈ chat’s default size
html body.chat-open {
  padding-right: min(26vw, 420px);
  transition: padding-right .4s ease;
}
 */

/* Push-left fallback (only used if JS fails) */
 body.chat-open .angela-push  {
  padding-right: min(26vw, 420px);
  transition: padding-right .4s ease;
}

/* Cancel and Submit buttons not getting centered in the form
 * probably there's a higher flex ruke or so somewhere up in the code 
 * so we use this 
*/
/* absolutely guarantee the Cancel + Submit row centres */
.ticket-form .action-bar{
  width:100% !important;            /* take the whole line   */
  display:flex !important;          /* (just in case)        */
  justify-content:center !important;
}

.chat-hidden  { display:none !important; }
.chat-visible { display:block !important; }

/* generic toggle */
.chat-hidden  { display:none !important; }
.chat-visible { display:block !important; }

/* ticket pane inherits the bubble area’s look & scroll */
#ticket-wrapper{
  flex:1;                 /* fill the chat-box vertical space  */
  overflow-y:auto;
  padding:1rem;           /* same inset as #chat-log           */
}


/* ——— Compact Header ——— */
#chat-header {
  padding: 0.5rem !important;                  /* shrink vertical space */
}
#bot-avatar img {
  width: 1.25rem !important;                   /* ~20px to match text */
  height: 1.25rem !important;
}
#header-controls button {
  font-size: 1rem !important;                  /* match h3 font size */
  margin-left: 0.25rem !important;             /* tighter spacing */
}

/*────────────────────────────────────────────────────────
  Header avatar aligns perfectly with “Angela AI”
────────────────────────────────────────────────────────*/
#bot-avatar{
  display:flex !important;          /* make wrapper a flex box  */
  align-items:center !important;    /* vertically centre img    */
}

#bot-avatar img{
  display:block !important;         /* remove default img gap   */
}

#bot-info h3{
  line-height:1 !important;         /* same height as the icon  */
}


#header-controls #snooze-button:hover:not(.snoozed) {
  color: #b91c1c !important;                  /*darker hover tint for the red X */
}

/* ——— Snoozed Launcher ——— */ 
body.snoozed-chat #chat-launcher { 
	background-color: #9ca3af !important;
	/* neutral grey */ 
	border-color: #6b7280 !important; 
	/* darker grey ring */ 
	color: #ffffff !important; 
	/* keep “AI” text visible */ 
}

/* turn EVERYTHING off when snoozed */ body.snoozed-chat #chat-launcher, body.snoozed-chat.chat-minimized #chat-launcher { animation: none !important; } body.snoozed-chat #chat-launcher::before, body.snoozed-chat.chat-minimized #chat-launcher::before { animation: none !important; box-shadow: none !important; }


/*────────────────────────────────────────────────────────
  INPUT-ROW  –  keep mic & send visible at any width
────────────────────────────────────────────────────────*/

/* 1.  Make the text field shrinkable and allow 0-width flex‐basis   */
#chat-input {
  flex: 1 1 auto !important;   /* grow (1)  shrink (1)  basis auto   */
  min-width: 0 !important;     /* ← *critical* so it will shrink     */
}

/* 2.  Icons should never shrink, but keep their natural width       */
#input-buttons   { flex: 0 0 auto !important; }
#input-buttons button { flex: 0 0 auto !important; }

/*────────────────────────────────────────────────────────
  MICRO TWEAKS  –  sub-350 px chat boxes
────────────────────────────────────────────────────────*/
@media (max-width: 349px) {
  /* tighten gaps so everything still fits neatly */
  #input-container  { padding: 0.6rem 0.6rem !important; }

  #chat-input       { padding: 0.4rem 0.6rem !important; }

  #input-buttons    { margin-left: 0.25rem !important; gap: 0.25rem !important; }

  #input-buttons button { font-size: 1.3rem !important; }   /* a hair smaller */
}


/*************************************************************************
 *  FULL-SCREEN CHAT + VERTICAL TAB   ( ≤ 1199 px wide )
 *************************************************************************/
@media (max-width: 1199px) {

  /* ——— OPEN  →  take the whole viewport ——— */
  html body.chat-open #chat-container {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    border-radius: 0 !important;
    z-index: 9999 !important;
  }

  /* stop any push-left padding created by JS */
  html body.chat-open .angela-push {
    padding-right: 0 !important;
  }

  /* ——— MINIMISED  →  slim vertical “CHAT” bar ——— 
  html body.chat-minimized #chat-launcher {
    top: 50% !important; transform: translateY(-50%) !important;
    right: 0 !important;
    width: 44px !important; height: 140px !important;
    border-radius: 6px 0 0 6px !important;
    background: #126312 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.2) !important;

    font: 700 0.75rem/1 "Inter", sans-serif !important;
    color: #fff !important;
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    letter-spacing: 0.05em !important;
    padding: 0.4rem 0 !important;
  }
*/
	
  /* kill halo on narrow screens */
  html body.chat-minimized #chat-launcher::before { display:none !important; }
}

/*────────────────────────────────────────────────────────
  Hide input + action buttons while a ticket form is open
────────────────────────────────────────────────────────*/
body.ticket-open #input-container,
body.ticket-open .live-chat-button-container {   /* Open Live Chat + Submit Ticket */
  display: none !important;
}

/*────────────────────────────────────────────────────────
  Header controls – bump icon size
────────────────────────────────────────────────────────*/
#header-controls #reset-button,
#header-controls #minimize-button {
  font-size: 1.85rem !important;
  line-height: 1 !important;
}
#header-controls #snooze-button {
  font-size: 2.1rem !important; /* A bit larger for visual balance */
  line-height: 1 !important;
}

/*────────────────────────────────────────────────────────
  Ticket-confirmation styling
────────────────────────────────────────────────────────*/
.ticket-confirm  { text-align: center !important; }

.ticket-confirm .thanks      { margin: 0 0 .5rem 0 !important; }

.ticket-confirm .ticket-num  {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  margin: 0 0 .75rem 0 !important;
}


/*────────────────────────────────────────────────────────
  Ticket-confirmation – keep everything perfectly centred
────────────────────────────────────────────────────────*/
.ticket-confirm{
  /* centre the whole mini-card on any screen */
  text-align:center !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;   /* ☰ horizontal centring   */
  gap:0.75rem !important;          /* tidy vertical spacing   */
}

/* make the Close button shrink to its content and stay centred */
.ticket-confirm .btn.cancel{
  display:inline-block !important; /* no full-width stretch   */
  margin:0 auto !important;        /* centre inside flex col  */
  width:auto !important;
}


/*────────────────────────────────────────────────────────
  Center the confirmation card itself on every device
────────────────────────────────────────────────────────*/
.ticket-confirm           {               /* the white card */
  margin: 0 auto !important;              /* ← horizontal centring */
  max-width: 90% !important;              /* keep some side gutter */
}

/*────────────────────────────────────────────────────────
  Confirmation view – centre the mini card on any screen
────────────────────────────────────────────────────────*/
#ticket-wrapper.ticket-confirm-mode {
  display: flex !important;          /* turn wrapper into flex box  */
  justify-content: center !important;/* centre horizontally         */
  padding-left: 0 !important;        /* kill the normal 1 rem inset */
  padding-right: 0 !important;
}

#ticket-wrapper.ticket-confirm-mode .ticket-confirm {
  max-width: 90% !important;         /* little side gutter on phones */
}

/* keep the Close button tight & centred (already works on desktop) */
.ticket-confirm .btn.cancel {
  display: inline-block !important;
  margin: 0 auto !important;
  width: auto !important;
}

/* -----------------------------------------------------------------
   SINGLE BUTTON LAYOUT  –  centre the Submit-Ticket button
   -----------------------------------------------------------------*/
.live-chat-button-container{
  justify-content:center !important;   /* centre the flex row        */
  gap:0 !important;                    /* no stray space to the left */
}

.action-btn.ticket{
  flex:0 0 auto !important;            /* stop it stretching          */
  min-width:160px !important;          /* nice fixed size             */
  max-width:100% !important;           /* still shrink on tiny screens*/
}

/* ----------------------------------------------------------
   Local-confetti canvas – sits on top of the receipt only
----------------------------------------------------------*/
.ticket-confirm-mode{ position:relative !important; }         /* anchor   */

.confetti-canvas{
  position:absolute; inset:0;                 /* fill wrapper */
  pointer-events:none; z-index:10;            /* ignore clicks */
}

/* intl-tel-input full width + shrink-friendly  (existing) */
.phone-wrap .iti{ width:100%; }
.phone-wrap .iti__tel-input{
  padding-left:3.25rem;
  min-width:0;
}

/* ✱ NEW: breathing room under the phone field */
.phone-wrap{
  margin-bottom:0.6rem;   /* adjust to taste (0.4–0.8rem) */
}

/* stop the footer from inheriting the chat’s push-left padding */
body.chat-open footer,
body.chat-open .site-footer {
  padding-right: 0 !important;
}

/* keep the open chat 20 px above the bottom edge 
body.chat-open #chat-container.chat-open {
  bottom: 20px;  
}
*/

/*────────────────────────────────────────────────────────
  Avatar = keep original outline, max 40 px in either direction
────────────────────────────────────────────────────────*/
#chat-container .avatar{
  /* always reserve the same column so bubbles stay aligned */
  flex: 0 0 20px !important;      /* 40-pixel “slot”, never shrinks  */
  display: flex !important;
  align-items: center !important;
}

#chat-container .avatar img{
  /* forget the circular crop */
  border-radius: 0 !important;

  /* preserve aspect-ratio, but don’t let it grow past 40 px */
  max-width : 20px !important;
  max-height: 20px !important;
  width : auto !important;
  height: auto !important;

  /* let transparent corners show if the logo is not square */
  object-fit: contain !important;
}

/* ───────────────────────────────────────────────
   Snoozed state → grey vertical bar (≤1199 px wide)
   ─────────────────────────────────────────────── */
@media (max-width: 1199px) {
  /* more specific than the existing green rule */
  html body.chat-minimized.snoozed-chat #chat-launcher {
    background: #9ca3af !important;   /* same neutral grey you use elsewhere */
    border-color: #6b7280 !important; /* optional thin outline, matches bubble grey */
    color: #ffffff !important;        /* keep the “CHAT” text legible */
  }
}

#reset-modal{
  position:absolute; inset:0;                /* fills the chat box */
  background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  z-index:10000;
}
.reset-box{
  background:#fff; padding:1.25rem 1.75rem;
  border-radius:8px; text-align:center; max-width:260px;
  box-shadow:0 6px 24px rgba(0,0,0,.2);
}
.reset-box .btn{margin:.4rem .3rem;}

/* ───────────────── modern green modal ───────────────── */
#reset-modal{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  z-index:10000;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.reset-box,
.refresh-box{
  /* soft-green glass card */
  background:linear-gradient(135deg, #e8f9f1 0%, #d4f6e3 100%);
  border:1px solid #b8eecf;
  border-radius:12px;
  padding:1.6rem 2rem;
  max-width:300px; width:90%;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  text-align:center;
}

.reset-box p,
.refresh-box p{
  color:#033b2d;
  font-size:.95rem;
  line-height:1.4;
  margin-bottom:1.2rem;
}

.reset-box .btn,
.refresh-box .btn{
  appearance:none;
  border-radius:6px;
  font-size:.9rem;
  padding:.45rem 1.1rem;
  cursor:pointer;
  transition:.18s ease;
  border:2px solid transparent;
}

/* ghost-button */
.reset-box .btn.cancel,
.refresh-box .btn.cancel{
  background:transparent;
  border-color:#2ecc71;
  color:#2ecc71;
}
.reset-box .btn.cancel:hover,
.refresh-box .btn.cancel:hover{
  background:#e7fdf1;
}

/* solid primary */
.reset-box .btn.proceed,
.refresh-box .btn.proceed{
  background:#2ecc71;
  color:#fff;
}
.reset-box .btn.proceed:hover,
.refresh-box .btn.proceed:hover{
  background:#28bd66;
}
/*------------------------------
rehaul chatbot design theme*/

/* ───────── GLOBAL GREEN-GLASS THEME ───────── */
:root{
  --angela-bg-grad : linear-gradient(135deg,#e8f9f1 0%,#d4f6e3 100%);
  --angela-border  : #b8eecf;
  --angela-green   : #2ecc71;
  --angela-green-hover : #28bd66;
  --angela-text-dark  : #033b2d;
  --angela-shadow : 0 8px 32px rgba(0,0,0,.18);
  --angela-blur   : blur(14px);
}

/* ─── launcher bubble ─── */
#chat-launcher{
  background:var(--angela-bg-grad);
  border:2px solid var(--angela-border);
  color:var(--angela-text-dark);
  box-shadow:var(--angela-shadow);
  backdrop-filter:var(--angela-blur);
}

/* ─── main chat container ─── */
#chat-container{
  background:var(--angela-bg-grad);
  border:1px solid var(--angela-border);
  box-shadow:var(--angela-shadow);
  backdrop-filter:var(--angela-blur);
}

/* header & footer bars keep the glass look */
#chat-header,
#chat-footer{
  background:transparent;                 /* inherit gradient */
  border-bottom:1px solid var(--angela-border);
  color:var(--angela-text-dark);
}

/* ─── user & bot bubbles ─── */
.message-bubble{
  background:#fff;                        /* crisp on glass card */
  border-radius:16px;
  padding:.55rem .9rem;
  color:#1a1a1a;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.user-message .message-bubble{
  background:#e2fff0;
}
.bot-message  .message-bubble{
  background:#ffffff;
}

/* ─── timestamp ─── */
.timestamp{
  color:rgba(0,0,0,.44);
}

/* ─── input row ─── */
#chat-input-area{
  background:transparent;
  border-top:1px solid var(--angela-border);
}
#chat-input{
  background:#fff;
  border:1px solid var(--angela-border);
  border-radius:8px;
}
#send-button,
#mic-button{
  background:var(--angela-green);
  color:#fff;
  border:none;
  border-radius:8px;
  transition:.18s ease;
}
#send-button:hover,
#mic-button:hover{
  background:var(--angela-green-hover);
}

/* ─── ticket form card ─── */
#ticket-wrapper{
  background:var(--angela-bg-grad);
  backdrop-filter:var(--angela-blur);
  border-left:1px solid var(--angela-border);
}
.ticket-form,
.ticket-confirm{
  background:#ffffffd9;                   /* slight translucency */
  border:1px solid var(--angela-border);
  border-radius:10px;
  box-shadow:var(--angela-shadow);
  padding:1rem 1.25rem;
}
.ticket-form label{
  color:var(--angela-text-dark);
}

/* ─── generic buttons ─── */
.btn{
  appearance:none;
  padding:.45rem 1.1rem;
  font-size:.9rem;
  border-radius:6px;
  cursor:pointer;
  border:2px solid transparent;
  transition:.18s ease;
}
.btn.submit,
.btn.proceed{
  background:var(--angela-green);
  color:#fff;
}
.btn.submit:hover,
.btn.proceed:hover{
  background:var(--angela-green-hover);
}
.btn.cancel{
  background:transparent;
  color:var(--angela-green);
  border-color:var(--angela-green);
}
.btn.cancel:hover{
  background:#e7fdf1;
}

/* ─── minimise launcher pulse (optional) ─── */
@keyframes launcherGlow{
  0%{box-shadow:0 0 0 0 rgba(46,204,113,.6);}
  60%{box-shadow:0 0 0 12px rgba(46,204,113,0);}
  100%{box-shadow:0 0 0 0 rgba(46,204,113,0);}
}
#chat-launcher.attention{
  animation:launcherGlow 2.8s infinite;
}

/* ────────────────────────── 1. EXTRA DEPTH ────────────────────────── */
:root {
  /* bump the opacity from .28 to .5 for a noticeably darker shadow */
  --angela-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  /* you can also stack a tighter, darker inner shadow for extra depth */
  --angela-shadow-two: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#chat-container,
#chat-launcher,
.reset-box,
.refresh-box,
.ticket-form,
.ticket-confirm {
  /* apply both shadows, comma-separated */
  box-shadow: var(--angela-shadow), var(--angela-shadow-two);
}

/* ───────────────────── 2. SOFT GOLD ACCENT COLOUR ─────────────────── */
/* ─────────  FINAL “PEACH-GLASS” PATCH  ───────── */

/* 1. Stronger gradient (peach comes in sooner) */
:root{
  --angela-bg-grad:
      linear-gradient(135deg,
        #e8f9f1   0%,
        #d4f6e3  35%,
        #ffdba0 100%);
}

/* 2. All inner panels go TRANSPARENT so the card’s glass shows through */
#chat-header,
#chat-log,
#input-container,
.live-chat-button-container,
#ticket-wrapper{
  background:transparent !important;
  backdrop-filter: var(--angela-blur);      /* keep the frosted look */
  border-color: var(--angela-border) !important; /* tidy edge line   */
}

/* 3. A subtle peach trim line makes the accent obvious */
#chat-header,
#chat-footer{
  border-bottom:1px solid var(--angela-accent) !important;
}

/* 4. Give the input bar its own soft-white so text stays legible */
#chat-input{
  background:#ffffffcc !important;          /* 80 % white */
}

/* 5. Optional – lift the footer button row with a faint glass tint */
.live-chat-button-container{
  backdrop-filter: var(--angela-blur);
  border-top:1px solid var(--angela-border) !important;
}

/* 6. Ensure the launcher inherits the tweaked gradient */
#chat-launcher{
  background:var(--angela-bg-grad) !important;
}


/*Make the bubble darker for better visibility*/
/* ───────── DARKER, DEEPER MINIMISED BUBBLE ───────── */
/* ─────────  DEEPER GREEN-→-YELLOW GRADIENT FOR MINIMISED BUBBLE ───────── */
:root{
  /* the two hues you already use in the halo animation */
  --bubble-green : #126312;   /* dark Angela green  */
  --bubble-gold  : #feeb3a;   /* bright yellow      */
}

/* circular launcher on desktop */
body.chat-minimized #chat-launcher{
  background:linear-gradient(135deg,
              var(--bubble-green) 0%,
              var(--bubble-gold) 100%) !important;
  border:2px solid #0b4510 !important;          /* darker rim */

  /* stacked shadows for stronger 3-D pop */
  box-shadow:
      0 16px 42px rgba(0,0,0,.55),
      0 6px 18px  rgba(0,0,0,.35) !important;

  color:#fff !important;
  backdrop-filter:none !important;              /* show pure gradient */
}



/* ─────────  LIVELY “DOT-WAVE” TYPING INDICATOR ───────── */

/* 1.  Re-skin the container (same markup, new look) */
.typing-indicator{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;                   /* a touch wider */
  padding:.5rem !important;
}

/* 2.  Each dot: Angela green + wave animation */
.typing-indicator .dot{
  width:8px !important;
  height:8px !important;
  border-radius:50% !important;
  background:#158848 !important;        /* match brand green */
  animation:dotWave 1.2s ease-in-out infinite !important;
  opacity:.45 !important;               /* base fade */
}

/* 3.  Staggered delays create the travelling wave */
.typing-indicator .dot:nth-child(2){ animation-delay:.15s !important; }
.typing-indicator .dot:nth-child(3){ animation-delay:.30s !important; }

/* 4.  Keyframes – grow + brighten then shrink + fade */
@keyframes dotWave{
  0%   { transform:scale(.4); opacity:.25; }
  35%  { transform:scale(1);  opacity:1;   }
  70%  { transform:scale(.4); opacity:.25; }
  100% { transform:scale(.4); opacity:.25; }
}

/* ─────────  SNOOZED -> SOLID GREY LAUNCHER  ───────── */
body.snoozed-chat #chat-launcher,
body.snoozed-chat.chat-minimized #chat-launcher{
  /* neutral grey bubble */
  background:#9ca3af !important;
  border:2px solid #6b7280 !important;
  color:#ffffff !important;

  /* softer single-shadow (depth without the bright pop) */
  box-shadow:0 8px 24px rgba(0,0,0,.35) !important;

  /* no glass / gradient */
  backdrop-filter:none !important;
}

/* stop the halo & size-pulse while snoozed */
body.snoozed-chat #chat-launcher::before{ animation:none !important; box-shadow:none !important; }
body.snoozed-chat #chat-launcher{ animation:none !important; }


/* ─── stop colour flash as bubble fades ─── */
body.chat-open #chat-launcher{
  transition:none !important;      /* bubble hides instantly */
}

/* ─── mobile: open full-screen instantly (no 0.4 s slide) ─── */
@media(max-width:768px){
  html body.chat-open #chat-container{
    transition:none !important;    /* no width animation delay */
  }
}

/* ⇢ AI disclaimer below main “Submit Ticket” button */
.ai-disclaimer{
  margin:.4rem auto 0;
  max-width:260px;
  font-size:.65rem;
  line-height:1.35;
  color:#111;
  text-align:center;
  opacity:.8;
}

/* the actual tweak */
.live-chat-button-container .ai-disclaimer{
    flex: 0 0 100%;      /* take an entire row in the flex-box              */
    width: 100%;         /* makes sure it fills left → right                */
    text-align: center;  /* horizontal centring of the sentence             */
    margin: .45rem 0 0;  /* small gap above, no extra side/bottom spacing   */
}

/* ——— pre-boot colour so no custom-prop is needed ——— */
html body #chat-launcher{
  /* hard-coded gradient = valid from the first paint */
  background: linear-gradient(135deg,#126312 0%,#feeb3a 100%) !important;
  border:     2px solid #0b4510 !important;  /* same darker rim */
  color:      #fff;
}

/* ════════════════════════════════════════════════════════════════════════
   O C E A N   –  teal → bright-sky
   ════════════════════════════════════════════════════════════════════════*/
body.angela-theme-ocean{
    /* core palette ------------------------------------------------------*/
    --angela-primary        : #0d9488;   /* main teal (send / submit btns) */
    --angela-primary-dark   : #0f766e;   /* hover / darker shade           */
    --angela-primary-light  : #d0fdf9;   /* user bubble background         */
    --angela-title          : #03534e;   /* “Angela AI” title colour       */
}

/* -- launcher gradient & halo hues you already had */
body.angela-theme-ocean{
    --angela-bg-grad : linear-gradient(135deg,#d4fbf4 0%,#c7f0ff 35%,#7ac6ff 100%);
    --bubble-green   : #007c7a;
    --bubble-gold    : #54c8ff;
}

/* 1. title -------------------------------------------------------------*/
body.angela-theme-ocean #bot-info h3{
    color:var(--angela-title) !important;
}

/* 2. bot + user message bubbles ---------------------------------------*/
body.angela-theme-ocean .bot-message  .message-bubble{
   background:#ffffff !important;
    color:#03534e !important;
}
body.angela-theme-ocean .user-message .message-bubble{
    background:var(--angela-primary-light) !important;
    color:#03534e !important;
}

/* 3. “Submit Ticket”, send & mic buttons ------------------------------*/
body.angela-theme-ocean #send-button,
body.angela-theme-ocean #mic-button,
body.angela-theme-ocean .action-btn.ticket,
body.angela-theme-ocean .btn.submit{
    background:var(--angela-primary) !important;
}
body.angela-theme-ocean #send-button:hover,
body.angela-theme-ocean #mic-button:hover,
body.angela-theme-ocean .action-btn.ticket:hover,
body.angela-theme-ocean .btn.submit:hover{
    background:var(--angela-primary-dark) !important;
}



/* ════════════════════════════════════════════════════════════════════════
   S U N S E T   –  coral → soft-violet
   ════════════════════════════════════════════════════════════════════════*/
body.angela-theme-sunset{
    /* core palette ------------------------------------------------------*/
    --angela-primary        : #d5573b;   /* coral                          */
    --angela-primary-dark   : #ab3c29;
    --angela-primary-light  : #ffeae1;   /* very light coral               */
    --angela-title          : #953220;   /* deeper coral for title         */
}

/* -- launcher gradient & halo hues you already had */
body.angela-theme-sunset{
    --angela-bg-grad : linear-gradient(135deg,#ffe9d5 0%,#ffc1ab 35%,#d19aff 100%);
    --bubble-green   : #d5573b;
    --bubble-gold    : #b259ff;
}

/* 1. title -------------------------------------------------------------*/
body.angela-theme-sunset #bot-info h3{
    color:var(--angela-title) !important;
}

/* 2. bot + user message bubbles ---------------------------------------*/
body.angela-theme-sunset .bot-message  .message-bubble{
    background:#ffffff !important;
    color:#953220 !important;
}
body.angela-theme-sunset .user-message .message-bubble{
    background:var(--angela-primary-light) !important;
    color:#953220 !important;
}

/* 3. “Submit Ticket”, send & mic buttons ------------------------------*/
body.angela-theme-sunset #send-button,
body.angela-theme-sunset #mic-button,
body.angela-theme-sunset .action-btn.ticket,
body.angela-theme-sunset .btn.submit{
    background:var(--angela-primary) !important;
}
body.angela-theme-sunset #send-button:hover,
body.angela-theme-sunset #mic-button:hover,
body.angela-theme-sunset .action-btn.ticket:hover,
body.angela-theme-sunset .btn.submit:hover{
    background:var(--angela-primary-dark) !important;
}

/* ==========  FLAT ICON STYLE  (shared by both themes)  ====== */
/* • removes red square background but keeps icon colour & hover */
body.angela-theme-ocean   #send-button,
body.angela-theme-ocean   #mic-button,
body.angela-theme-sunset  #send-button,
body.angela-theme-sunset  #mic-button{
    background:transparent !important;    /* no coloured box        */
    color:var(--angela-primary) !important;/* icon inherits brand    */
    border:none !important;
    padding:0 !important;
}

/* SVG arrows pick up currentColor */
body.angela-theme-ocean   #send-button svg,
body.angela-theme-ocean   #mic-button  svg,
body.angela-theme-sunset  #send-button svg,
body.angela-theme-sunset  #mic-button  svg{
    stroke:currentColor !important;
}

/* simple icon-only hover tint */
body.angela-theme-ocean   #send-button:hover,
body.angela-theme-ocean   #mic-button:hover,
body.angela-theme-sunset  #send-button:hover,
body.angela-theme-sunset  #mic-button:hover{
    color:var(--angela-primary-dark) !important;
}

/* — centre the “AI disclaimer” on its own full-width row — */
.live-chat-button-container .ai-disclaimer{
    flex: 0 0 100% !important;   /* force a new flex-line */
    max-width: none !important;  /* ← overrides the old 260 px limit */
    width: 100%      !important;
    text-align: center !important;
    margin: .45rem 0 0 !important;
}


/* top section size increase */
/* ───────────────── 1. Tall view-ports (big tablets, portrait monitors) ───────────────── */
@media (min-height: 900px) {                     /* iPad Air: 1180 px  /  Pro: 1366 px   */
  #chat-header            { padding: 0.8rem 1rem !important; }
  #bot-info h3            { font-size: 1.65rem !important;   /* was 1.25 rem */ }
  #header-controls button { font-size: 2.0rem  !important;   /* was 1.5 rem  */ }
}

/* ───────────────── 2. Ultra-wide desktops (≥ 1536 px) ───────────────── */
@media (min-width: 1536px) {                      /* 24–27″ monitors and larger           */
  #bot-info h3            { font-size: 1.8rem  !important; }
  #header-controls button { font-size: 2.2rem    !important; }
}

/* ────────────────────────────────────────────────────────────────
   1.  BIG-VIEWPORT HEADER  →  scale avatar alongside title/icons
   ─────────────────────────────────────────────────────────────── */
@media (min-height: 900px) {            /* tall tablets, portrait monitors */
  #bot-avatar img {                      /* header avatar */
    width : 2.0rem !important;           /* ≈ 35 px         */
    height: 2.0rem !important;
  }
}

@media (min-width: 1536px) {            /* 24-27″ desktops and larger      */
  #bot-avatar img {
    width : 2.2rem !important;           /* ≈ 38 px         */
    height: 2.2rem !important;
  }
}

/*───────────────────────────────────────────────────────────────
  B O T   A V A T A R   —  perfect vertical centring
───────────────────────────────────────────────────────────────*/

/* 1. remove the old nudge */
.chat-message.bot-message .avatar{
  margin-top:0 !important;
}

/* 2. centre the avatar against the (now shorter) column */
.chat-message.bot-message{
  align-items:center !important;      /* avatar ↔︎ bubble middle */
}

/* 3. keep timestamp but let it float *below* the bubble */
.message-and-timestamp-wrapper{
  position:relative !important;       /* anchor for absolute child */
  display:block !important;           /* shrink-wrap to bubble only */  /* BD_CHANGED - inline-block to block */
  width: 100%;                        /* BD_CHANGED - added */
}

.bot-message .timestamp{
  position:absolute !important;
  top:100%; left:0;
  margin-top:2px !important;          /* small gap under bubble */
  width:100%;                         /* still full-width for RTL etc. */
  text-align:left !important;         /* same alignment as before */
}

/* ─── 1 ▸ return the row to its original centring ─── */
.chat-message.bot-message{
    align-items:center !important;          /* row height now = bubble + timestamp */
}

/* ─── 2 ▸ remove the real margin, use a tiny translate instead ─── */
.chat-message.bot-message .avatar{
    margin-top:0 !important;                /* kill the layout-breaking margin     */
    transform:translateY(2px);              /* ~½ line-height optical nudge        */
}

/* ─── 3 ▸ make sure the timestamp always has breathing-room ─── */
.bot-timestamp{
    margin-top:0.35rem !important;          /* was 0.25rem → extra 2–3 px gap      */
}

/* (optional) a little more vertical space between messages on big screens */
@media (min-width:1024px){
    .chat-message{ margin-bottom:1rem !important; }  /* restore clear gap */
}

/* ═══════════════════════════════════════════════════════════════════
   D E F A U L T  ·  D A R K
   ═══════════════════════════════════════════════════════════════════*/
body.angela-theme-default-dark{
	/* glass backdrop */
	--angela-bg-grad : linear-gradient(135deg,#0f1c16 0%,#123122 45%,#173d2b 100%);
	--angela-border  : #20523d;
	--angela-shadow  : 0 12px 32px rgba(0,0,0,.6);

	/* brand accents */
	--angela-primary       : #2ecc71;   /* buttons / icons                */
	--angela-primary-dark  : #25a35a;   /* hover state                    */
	--angela-title         : #7fffb3;   /* “Angela” title                 */
	--angela-ts            : #a7dac3;   /* timestamp                      */
	--angela-label         : #c9f5e3;   /* form labels                    */
	--angela-disclaimer    : #d9efe7;   /* AI-disclaimer text             */
	--angela-reset         : #f59e0b;   /* RESET icon                     */
}

/*Launcher pop  ----------------------------------*/
body.angela-theme-default-dark.chat-minimized #chat-launcher{
	background:linear-gradient(135deg,#009452 0%,#4daa32 100%) !important;
	border:2px solid #046838 !important;     /* deeper rim */
	color:#e8ffe9 !important;                /* soft mint text */
	box-shadow:0 14px 36px rgba(0,0,0,.55),
	           0 4px 14px  rgba(0,0,0,.35) !important;
}


/* Title colour -----------------------------------------------------*/
body.angela-theme-default-dark #bot-info h3{
	color:var(--angela-title) !important;
}

/* Timestamp --------------------------------------------------------*/
body.angela-theme-default-dark .timestamp{
	color:var(--angela-ts) !important;
}

/* RESET button (⟳) -------------------------------------------------*/
body.angela-theme-default-dark #header-controls #reset-button{
	color:var(--angela-reset) !important;
}
body.angela-theme-default-dark #header-controls #reset-button:hover{
	color:#f8b13d !important;
}

/* Bubbles ----------------------------------------------------------*/
body.angela-theme-default-dark .bot-message  .message-bubble{
	background:linear-gradient(135deg,#0a5a32 0%,#0f8a4c 100%) !important;
	color:#e8fff4 !important;
}
body.angela-theme-default-dark .user-message .message-bubble{
	background:linear-gradient(135deg,#2b2e2b 0%,#475047 100%) !important;
	color:#e7fbe7 !important;
}

/* AI disclaimer ----------------------------------------------------*/
body.angela-theme-default-dark .ai-disclaimer{
	color:var(--angela-disclaimer) !important;
}

/* Buttons / icons --------------------------------------------------*/
body.angela-theme-default-dark #send-button,
body.angela-theme-default-dark #mic-button,
body.angela-theme-default-dark .action-btn.ticket,
body.angela-theme-default-dark .btn.submit{
	background:var(--angela-primary) !important;
}
body.angela-theme-default-dark #send-button:hover,
body.angela-theme-default-dark #mic-button:hover,
body.angela-theme-default-dark .action-btn.ticket:hover,
body.angela-theme-default-dark .btn.submit:hover{
	background:var(--angela-primary-dark) !important;
}

/* icon-only mic / send (flat style) */
body.angela-theme-default-dark #send-button,
body.angela-theme-default-dark #mic-button{
  background:transparent !important;
  color:var(--angela-primary) !important;
}
body.angela-theme-default-dark #send-button:hover,
body.angela-theme-default-dark #mic-button:hover{
  color:var(--angela-primary-dark) !important;
}

/* Ticket-form labels ----------------------------------------------*/
body.angela-theme-default-dark .ticket-form label{
	color:var(--angela-label) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   O C E A N   ·  D A R K
   ═══════════════════════════════════════════════════════════════════*/
body.angela-theme-ocean-dark{
	--angela-bg-grad : linear-gradient(135deg,#042927 0%,#063447 45%,#0a4565 100%);
	--angela-border  : #074e53;
	--angela-shadow  : 0 12px 32px rgba(0,0,0,.64);

	--angela-primary       : #0ea5e9;      /* sky-blue accents            */
	--angela-primary-dark  : #0284c7;
	--angela-title         : #5ef2e9; 
	--angela-ts            : #b9e4ff;
	--angela-label         : #d2f7ff;
	--angela-disclaimer    : #cfeafb;
	--angela-reset         : #38bdf8;
}

/*Launcher pop  ----------------------------------*/
body.angela-theme-ocean-dark.chat-minimized #chat-launcher{
	background:linear-gradient(135deg,#006c7a 0%,#009fb1 100%) !important;
	border:2px solid #004a57 !important;
	color:#d8faff !important;                /* icy-cyan glyph */
	box-shadow:0 14px 36px rgba(0,0,0,.55),
	           0 4px 14px  rgba(0,0,0,.35) !important;
}

/* Title */
body.angela-theme-ocean-dark #bot-info h3{color:var(--angela-title)!important;}

/* Timestamp */
body.angela-theme-ocean-dark .timestamp{color:var(--angela-ts)!important;}

/* RESET */
body.angela-theme-ocean-dark #header-controls #reset-button{color:var(--angela-reset)!important;}
body.angela-theme-ocean-dark #header-controls #reset-button:hover{color:#60cdff!important;}

/* Bubbles */
body.angela-theme-ocean-dark .bot-message  .message-bubble{
	background:linear-gradient(135deg,#014d4f 0%,#027d82 100%)!important;
	color:#dffcff!important;
}
body.angela-theme-ocean-dark .user-message .message-bubble{
	background:linear-gradient(135deg,#003344 0%,#02516a 100%)!important;
	color:#cff6ff!important;
}

/* AI disclaimer */
body.angela-theme-ocean-dark .ai-disclaimer{color:var(--angela-disclaimer)!important;}

/* Buttons / icons */
body.angela-theme-ocean-dark #send-button,
body.angela-theme-ocean-dark #mic-button,
body.angela-theme-ocean-dark .action-btn.ticket,
body.angela-theme-ocean-dark .btn.submit{
	background:var(--angela-primary)!important;
}
body.angela-theme-ocean-dark #send-button:hover,
body.angela-theme-ocean-dark #mic-button:hover,
body.angela-theme-ocean-dark .action-btn.ticket:hover,
body.angela-theme-ocean-dark .btn.submit:hover{
	background:var(--angela-primary-dark)!important;
}

/* icon-only mic / send (flat style) */
body.angela-theme-ocean-dark #send-button,
body.angela-theme-ocean-dark #mic-button{
  background:transparent !important;
  color:var(--angela-primary) !important;
}
body.angela-theme-ocean-dark #send-button:hover,
body.angela-theme-ocean-dark #mic-button:hover{
  color:var(--angela-primary-dark) !important;
}

/* Form labels */
body.angela-theme-ocean-dark .ticket-form label{color:var(--angela-label)!important;}


/* ═══════════════════════════════════════════════════════════════════
   S U N S E T   ·  D A R K
   ═══════════════════════════════════════════════════════════════════*/
body.angela-theme-sunset-dark{
	--angela-bg-grad : linear-gradient(135deg,#2d0e10 0%,#4a1c1e 40%,#562358 100%);
	--angela-border  : #5b2832;
	--angela-shadow  : 0 12px 32px rgba(0,0,0,.6);

	--angela-primary       : #f97316;   /* warm amber / coral        */
	--angela-primary-dark  : #ea580c;
	--angela-title         : #ffb3a1;
	--angela-ts            : #f6c8be;
	--angela-label         : #ffe9e2;
	--angela-disclaimer    : #f7dbd5;
	--angela-reset         : #fb7185;   /* vibrant pink-red          */
}

/*Launcher pop  ----------------------------------*/
body.angela-theme-sunset-dark.chat-minimized #chat-launcher{
	background:linear-gradient(135deg,#b53a23 0%,#b2356b 100%) !important;
	border:2px solid #81231a !important;
	color:#fff7f5 !important;                /* warm ivory text */
	box-shadow:0 14px 36px rgba(0,0,0,.55),
	           0 4px 14px  rgba(0,0,0,.35) !important;
}

/* Title */
body.angela-theme-sunset-dark #bot-info h3{color:var(--angela-title)!important;}

/* Timestamp */
body.angela-theme-sunset-dark .timestamp{color:var(--angela-ts)!important;}

/* RESET */
body.angela-theme-sunset-dark #header-controls #reset-button{color:var(--angela-reset)!important;}
body.angela-theme-sunset-dark #header-controls #reset-button:hover{color:#ff9aa7!important;}

/* Bubbles */
body.angela-theme-sunset-dark .bot-message  .message-bubble{
	background:linear-gradient(135deg,#5b2222 0%,#8a3939 100%)!important;
	color:#ffeae7!important;
}
body.angela-theme-sunset-dark .user-message .message-bubble{
	background:linear-gradient(135deg,#3b2736 0%,#6b3a60 100%)!important;
	color:#ffecff!important;
}

/* AI disclaimer */
body.angela-theme-sunset-dark .ai-disclaimer{color:var(--angela-disclaimer)!important;}

/* Buttons / icons */
body.angela-theme-sunset-dark #send-button,
body.angela-theme-sunset-dark #mic-button,
body.angela-theme-sunset-dark .action-btn.ticket,
body.angela-theme-sunset-dark .btn.submit{
	background:var(--angela-primary)!important;
}
body.angela-theme-sunset-dark #send-button:hover,
body.angela-theme-sunset-dark #mic-button:hover,
body.angela-theme-sunset-dark .action-btn.ticket:hover,
body.angela-theme-sunset-dark .btn.submit:hover{
	background:var(--angela-primary-dark)!important;
}

/* icon-only mic / send (flat style) */
body.angela-theme-sunset-dark #send-button,
body.angela-theme-sunset-dark #mic-button{
  background:transparent !important;
  color:var(--angela-primary) !important;
}
body.angela-theme-sunset-dark #send-button:hover,
body.angela-theme-sunset-dark #mic-button:hover{
  color:var(--angela-primary-dark) !important;
}

/* Form labels */
body.angela-theme-sunset-dark .ticket-form label{color:var(--angela-label)!important;}


/* ─────────────────────────────────────────────
   2-button recommendation row
─────────────────────────────────────────────*/
.recommend-row{
  display:flex; gap:.4rem; margin-top:.35rem;
}
.recommend-btn{
  flex:1 1 0;         /* equal widths, shrinkable */
  min-width:0;        /* allow text-overflow to work */
  height:24px; line-height:24px;
  font-size:.75rem; font-weight:600;
  border:none; border-radius:6px;
  padding:0 .6rem; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  cursor:pointer; position:relative;
  transition:transform .15s;
}
.recommend-btn:hover{ transform:translateY(-1px); }

/* glow pulse */
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(0,0,0,.25);}
50%{box-shadow:0 0 0 4px rgba(0,0,0,0);}
100%{box-shadow:0 0 0 0 rgba(0,0,0,0);} }
.recommend-btn{ animation:glow 2.4s infinite; }

/* —— theme colours —— */
.angela-theme-default      .recommend-btn{background:#10b981;color:#fff;}
.angela-theme-ocean        .recommend-btn{background:#0ea5e9;color:#fff;}
.angela-theme-sunset       .recommend-btn{background:#f97316;color:#fff;}
.angela-theme-default-dark .recommend-btn{background:#4ade80;color:#064e3b;}
.angela-theme-ocean-dark   .recommend-btn{background:#67e8f9;color:#083344;}
.angela-theme-sunset-dark  .recommend-btn{background:#fdba74;color:#7c2d12;}


/* ── keep the row only as wide as the buttons ─────────────────────────── */
.recommend-row{             /* was display:flex */
  display:inline-flex;      /* inline-flex ⇒ width shrinks to its content */
}

/* each button keeps its own natural width instead of stretching */
.recommend-btn{             /* overrides the earlier flex:1 1 0; */
  flex:0 0 auto;
}

/* ── a little breathing-room under every timestamp ─────────── */
.timestamp{
  display:inline-block;       /* keeps its intrinsic width */
  margin-bottom:0.45rem;      /* adjust to taste */
}

/* ── stop the next bubble from sitting on top of the timestamp ───────── */
.timestamp{
  display:block;            /* takes full line so margin works */
  margin:0.15rem 0 0.9rem;  /* ↑ tweak last value until it feels right */
}

/* ── keep messages from colliding on narrow screens ─────────────── */
.chat-message{
  margin-bottom:1rem;                 /*  = ~16 px gap everywhere   */
}

/* Optionally bump it a hair more on very small widths */
@media (max-width:480px){
  .chat-message{ margin-bottom:1.25rem; }
}

/* ── BOT TIMESTAMP stays *inside* the flow ───────────────────────── */
.bot-message .timestamp{
  position:static   !important;   /* stop absolute positioning       */
  display:block     !important;   /* new line under the bubble       */
  margin-top:0.15rem!important;   /* small gap                       */
  width:auto        !important;   /* shrink to its own content       */
  text-align:left   !important;   /* keep the old alignment          */
}

/* ── harmonise spacing for BOTH bot + user messages ───────────── */

/* 1. message-to-message gap (back to the original 0.75 rem) */
.chat-message{
  margin-bottom:0.75rem !important;
}

/* 2. timestamp: one small top gap, no bottom gap */
.timestamp{
  display:block     !important;   /* still forces a new line   */
  margin:0.25rem 0 0 !important;  /* 4 px above, 0 below       */
}

/* 3. nothing special for bot vs user now—same rule fits both */


/* ───── INPUT BAR: flat, modern ─────────────────────────── */
#input-container{
  display:flex !important; align-items:center !important;
  gap:.6rem !important;            /* equal spacing */
  padding:.6rem 1rem !important;   /* keep the top bar look */
  background:transparent !important;  /* glass card shows through */
  border-top:1px solid var(--angela-border) !important;
}

#handsfree-button,
#mic-button,
#send-button{
  flex:0 0 auto !important;        /* icons never shrink */
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.15rem;
  border:none; border-radius:8px;
  background:var(--angela-primary);
  color:#fff;
  cursor:pointer;
  transition:background .15s;
}
#handsfree-button.active{ background:var(--angela-primary-dark); }

/* invisible “glass” text field */
#chat-input{
  flex:1 1 auto !important; min-width:0 !important;
  border:none !important;
  background:transparent !important;
  outline:none !important;
  font-size:.95rem !important;
  color:var(--angela-input-txt,#111);
  /* place caret visibly on dark cards */
  caret-color:var(--angela-input-txt,#111);
}

#chat-input::placeholder{
  color:var(--angela-input-ph,#6b7280);
  opacity:.8;
}

/* theme overrides */
.angela-theme-default-dark #chat-input,
.angela-theme-ocean-dark   #chat-input,
.angela-theme-sunset-dark  #chat-input{
  --angela-input-txt:#f1f5f9;
  --angela-input-ph:#9ca3af;
}

/* ═════════ HANDS-FREE CONTROL ════════════════ */
#handsfree-button{
  background:transparent !important;
  color:var(--angela-primary) !important;         /* light-theme tint          */
  border:none !important; padding:0 !important;
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:color .15s;
}

#handsfree-button:hover      { color:var(--angela-primary-dark) !important; }
#handsfree-button.active     { color:var(--angela-primary-dark) !important; }

/* dark themes need brighter base tint for visibility */
body.angela-theme-default-dark #handsfree-button,
body.angela-theme-ocean-dark   #handsfree-button,
body.angela-theme-sunset-dark  #handsfree-button{
  color:var(--angela-title) !important;
}
body.angela-theme-default-dark #handsfree-button:hover,
body.angela-theme-ocean-dark   #handsfree-button:hover,
body.angela-theme-sunset-dark  #handsfree-button:hover{
  color:var(--angela-primary) !important;
}

/* visual state: slash OFF by default, waves OFF; invert when active */
#handsfree-button .waves{ display:none; }        /* idle → slash only */
#handsfree-button.active .waves{ display:block; }/* listening → waves */
#handsfree-button.active .slash{ display:none; }

/* ───────────────────────────────────────────────────────────
   1) Make Mic + Send match Hands-Free tint & size
   2) Tint the chatbot title the same primary colour
   3) Vertically centre all three icons in the input bar
─────────────────────────────────────────────────────────────*/

/* Apply same sizing + colour rules to all three buttons */
#handsfree-button,
#mic-button,
#send-button {
  width:38px; height:38px;                 /* identical size */
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  color:var(--angela-primary) !important;  /* theme primary tint */
  border:none !important;
  cursor:pointer !important;
  transition:color .15s !important;
}

/* Hover & active state darken consistently */
#handsfree-button:hover,
#mic-button:hover,
#send-button:hover,
#handsfree-button.active {
  color:var(--angela-primary-dark) !important;
}

/* Dark-theme override: brighter base tint for contrast */
body.angela-theme-default-dark   #handsfree-button,
body.angela-theme-default-dark   #mic-button,
body.angela-theme-default-dark   #send-button,
body.angela-theme-ocean-dark     #handsfree-button,
body.angela-theme-ocean-dark     #mic-button,
body.angela-theme-ocean-dark     #send-button,
body.angela-theme-sunset-dark    #handsfree-button,
body.angela-theme-sunset-dark    #mic-button,
body.angela-theme-sunset-dark    #send-button {
  color:var(--angela-title) !important;    /* use title hue on darks */
}
body.angela-theme-default-dark   #handsfree-button:hover,
body.angela-theme-default-dark   #mic-button:hover,
body.angela-theme-default-dark   #send-button:hover,
body.angela-theme-ocean-dark     #handsfree-button:hover,
body.angela-theme-ocean-dark     #mic-button:hover,
body.angela-theme-ocean-dark     #send-button:hover,
body.angela-theme-sunset-dark    #handsfree-button:hover,
body.angela-theme-sunset-dark    #mic-button:hover,
body.angela-theme-sunset-dark    #send-button:hover {
  color:var(--angela-primary) !important;
}

/* Ensure the input container always centres its children */
#input-container {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:.6rem !important;
}

/* Chatbot title matches primary tint */
#bot-info h3 {
  color:var(--angela-primary) !important;
}

/* Hands-Free button pulse when active */
#handsfree-button.pulsing {
  animation: scalePulse 1.2s ease-in-out infinite;
}
@keyframes scalePulse {
  0%,100% { transform: scale(1);    }
  50%     { transform: scale(1.15); }
}

/* Force hands-free to be cyan in every state */
#handsfree-button,
#handsfree-button:hover,
#handsfree-button.active {
  color: #06b6d4 !important;    /* chosen cyan */
  transition: none !important;   /* disables any hover-pulse tint */
}


/* ── widen outgoing (user) bubbles ───────────────────────── */
#chat-container .user-message .message-bubble{
    max-width: 85% !important;   /* was 70 %; adjust to taste */
    /* optional helpers */
    white-space: normal !important;   /* keep normal wrapping */
    /* word-break: break-word !important;/* prevent overflow on long words */  /* BD_CHANGED - Removed */
	overflow-wrap: break-word !important;     /* BD_CHANGED - Added */
	text-align: left !important;              /* BD_CHANGED - Added */
	display: inline-block;                    /* BD_CHANGED - Added */
}

/* ───── Keep ticket‑form fields pure white on every theme ───── */
.ticket-form input,
.ticket-form textarea,
.ticket-form select {
  background:#fff !important;   /* never inherit gradients / tints */
  color:#111 !important;        /* solid black text for legibility */
}

.ticket-form input:focus,
.ticket-form textarea:focus,
.ticket-form select:focus {
  background:#fff !important;   /* stay white when focused */
  color:#111 !important;
  /* keep your existing blue focus ring / border */
}

/* optional – neutral placeholder so it’s visible on white */
.ticket-form ::placeholder{
  color:#6b7280 !important;
}

/* ── tighten the right edge ─────────────────────────────── */
#angela-chatbot #chat-log{
    /* keep top / bottom / LEFT padding, kill the right one   */
    padding: 1rem 0 1rem 1rem !important;  /* TB 1rem, R 0, L 1rem */
}

/* optional: give mobiles a little breathing room so the
   scroll‑bar overlay doesn’t touch the bubble text          */
@media (max-width: 640px){
  #angela-chatbot #chat-log{ padding-right: .5rem !important; }
}


/* ── Flush outgoing bubbles hard right ─────────────────── */
/* 1. kill the row’s horizontal margin / padding            */
#angela-chatbot .ang-row.out{          /* adjust selector if you renamed it */
    margin-right: 0   !important;
    padding-right: 0  !important;
}

/* 2. remove the vertical/horizontal gap inside the log     */
#angela-chatbot #chat-log{
    gap: 0 !important;          /* modern browsers         */
    row-gap: 0 !important;      /* legacy fallback         */
    column-gap: 0 !important;   /* just in case            */
}

/* 3. if any bubble itself keeps a safety margin, clear it   */
#angela-chatbot .ang-row.out .message-bubble{
    margin-right: 0 !important;
}

/* optional: put a *tiny* mobile buffer so the scrollbar
   overlay doesn’t smother text on touch devices            */
@media (max-width: 640px){
  #angela-chatbot #chat-log{ padding-right:.25rem !important; }
}

/* somehow save the plugin from drowning at the bottom*/
/* 1. mobile: keep the old “20 px off bottom” behaviour */
@media (max-width: 768px) {
  body.chat-open #chat-container.chat-open {
    bottom: 20px !important;
  }
}

/* 2. desktop & tablets: let JS handle vertical centring */
@media (min-width: 769px) {
  body.chat-open #chat-container.chat-open {
    bottom: auto !important;   /* clear the override          */
  }
}

/* kill every uplift, whether it comes from your own CSS or inline html */
#chat-container{
    transform: none !important;
}

/* Hide Angela until <body> loses the “angela-preload” flag */
body.angela-preload #chat-launcher,
body.angela-preload #chat-container{
  opacity: 0 !important;          /* invisible                     */
  visibility: hidden !important;  /* no clicks while hidden        */
  pointer-events: none !important;
  transition: opacity .35s ease;  /* fade‑in once the flag is gone */
}

/*-----Make the launcher universal for all breakpoints----*/
/* vertical “CHAT” bar on all screens */
html body.chat-minimized #chat-launcher{
    background:linear-gradient(165deg,
                var(--bubble-green) 0%,
                var(--bubble-gold) 100%) !important;
    border:2px solid #0b4510 !important;
    box-shadow:
        0 14px 36px rgba(0,0,0,.5),
        0 4px 14px  rgba(0,0,0,.35) !important;
  }

/* ───────── UNIVERSAL MINIMISED LAUNCHER ───────── */
html body.chat-minimized #chat-launcher{
  top: 50% !important; transform: translateY(-50%) !important;
  right: 0 !important;

  /* keep the original size that looked good on phones */
  width: 35px !important; height: 140px !important;

  border-radius: 6px 0 0 6px !important;
  background: #126312 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.2) !important;

  /* centre the “AI / CHAT” label perfectly */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font: 700 0.75rem/1 "Inter", sans-serif !important;
  color: #fff !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  letter-spacing: 0.05em !important;
  padding: 0.4rem 0 !important;
}


/* Kill the halo / circle pulse */
#chat-launcher,
#chat-launcher::before{ animation:none !important; }

/* ───────────────────────────────────────────────────────────────
   UNIVERSAL VERTICAL‑LAUNCHER ANIMATION (140 × 35 px rectangle)
   • edgeGlow  : subtle breathing halo around the bar
   • launcherSheen : vertical light‑ray sweep, full width
──────────────────────────────────────────────────────────────── */

@keyframes edgeGlow{
  0%,100%{ box-shadow:0 0 0   0  rgba(255,255,255,.10),
                         0 0 6px     rgba(0,0,0,.35); }
  50%   { box-shadow:0 0 0   3px rgba(255,255,255,.16),
                         0 0 14px    rgba(0,0,0,.45); }
}

@keyframes launcherSheen{
  0%   { transform:translateY(-150%); opacity:0; }
  10%  { opacity:1; }                      /* fade‑in as it enters  */
  90%  { opacity:1; }
  100% { transform:translateY(180%);  opacity:0; } /* exits bottom   */
}

html body.chat-minimized #chat-launcher{
  /* ‑‑ existing sizing & layout already in your sheet ‑‑ */
  animation:edgeGlow 3.2s ease-in-out infinite;
  position:fixed !important;      /* anchor for ::after  */
  overflow:hidden !important;     /* clip the sheen      */
}

/* moving sheen strip */
html body.chat-minimized #chat-launcher::after{
  content:"";
  position:absolute;
  top:-90px;                       /* start just above bar */
  left:0; right:0;                 /* full internal width  */
  height:90px;                     /* strip thickness    */
  border-radius:inherit;
  pointer-events:none;
  mix-blend-mode:screen;

  background:linear-gradient(
    180deg,
    transparent                0%,
    rgba(255,255,255,.35)     40%,
    rgba(255,255,255,.65)     50%, /* bright core */
    rgba(255,255,255,.35)     60%,
    transparent              100%
  );
  box-shadow:
    0 0 6px  2px rgba(255,255,255,.35),
    0 0 14px 4px rgba(255,255,255,.20);

  animation:launcherSheen 2.8s linear infinite;
}

/* --- Spinner Animation for Submit Button --- */
.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border .75s linear infinite;
}

@keyframes spinner-border {
  to { transform: rotate(360deg); }
}

/* Style for the disabled submit button */
.ticket-form button[type="submit"]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  display: inline-flex;
  align-items: center;
  gap: 0.5em; /* Space between text and spinner */
}