/* =========================================================
   BMIE T — Chat UI (Teal) • Revamped Look & Feel
   - Pure CSS (no functionality change)
   - Right-aligned labeled FAB on desktop
   - Auto-collapse to round FAB on mobile
   - Bottom-right modal, polished bubbles, chips, composer
   - Strong overrides to avoid theme conflicts
   ========================================================= */

/* ---------- Theme Tokens (Teal) ---------- */
:root{
  --bmiet-primary-color: #00bcd4;   /* Teal */
  --bmiet-primary-hover: #0097a7;
  --bmiet-primary-text:  #ffffff;

  --bmiet-bg:            #ffffff;
  --bmiet-surface:       #ffffff;
  --bmiet-muted:         #6b7280;
  --bmiet-ink:           #0f172a;
  --bmiet-border:        rgba(2,6,23,.12);

  --bmiet-shadow:        0 18px 50px rgba(2,6,23,.18);
  --bmiet-radius:        12px;

  --bmiet-success:       #22c55e;
  --bmiet-danger:        #ef4444;

  --bmiet-safe-bottom:   env(safe-area-inset-bottom, 0px);
  --bmiet-safe-right:    env(safe-area-inset-right, 0px);
}

@media (prefers-color-scheme: dark){
  :root{
    --bmiet-bg:          #0c1220;
    --bmiet-surface:     #0f172a;
    --bmiet-ink:         #e5e7eb;
    --bmiet-muted:       #9ca3af;
    --bmiet-border:      rgba(255,255,255,.12);
    --bmiet-shadow:      0 24px 64px rgba(0,0,0,.54);
  }
}

/* ---------- Global guards (avoid theme conflicts) ---------- */
#bmietChatModal, .bmiet-chat-modal,
.bmiet-chat-fab-labeled {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--bmiet-ink);
}

/* =========================================================
   FAB — Labeled on Desktop, Round Icon on Mobile
   ========================================================= */

/* Labeled Floating Action Button (FAB) — RIGHT aligned */
.bmiet-chat-fab-labeled{
  position: fixed !important;
  right: calc(1.25rem + var(--bmiet-safe-right)) !important;
  left: auto !important;
  bottom: calc(1.25rem + var(--bmiet-safe-bottom)) !important;
  z-index: 2147483647 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 60px;
  max-width: 280px;
  border: 0;
  padding: 0;
  border-radius: 30px;
  background: #fff;
  color: #111827;
  box-shadow: var(--bmiet-shadow);
  cursor: pointer;

  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.bmiet-chat-fab-labeled:hover{ transform: translateY(-1px); box-shadow: 0 24px 64px rgba(2,6,23,.24); }
.bmiet-chat-fab-labeled:active{ transform: translateY(0); }
.bmiet-chat-fab-labeled:focus-visible{ outline:0; box-shadow: 0 0 0 3px rgba(0,188,212,.35), var(--bmiet-shadow); }

/* FAB inner layout */
.bmiet-fab-content{ display:flex; align-items:center; gap:.75rem; padding: 0 14px 0 16px; }
.bmiet-fab-text{ display:flex; flex-direction:column; line-height:1.15; text-align:right; }
.bmiet-fab-title{ font-size: 1rem; font-weight: 700; color:#222; }
.bmiet-fab-status{ font-size:.85rem; font-weight:600; color: var(--bmiet-success); }

/* Avatar on the right edge with teal ring */
.bmiet-fab-image img{
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--bmiet-primary-color);
  margin-left: 6px;
}

/* Mobile: collapse to round icon (saves space) */
@media (max-width: 640px){
  .bmiet-chat-fab-labeled{
    width: 56px; height: 56px; padding: 0 !important; border-radius: 9999px;
    justify-content: center !important;
  }
  .bmiet-fab-text{ display:none; }            /* hide label on small screens */
  .bmiet-fab-content{ padding: 0 !important; }
  .bmiet-fab-image img{ width: 28px; height: 28px; margin: 0; }
}

/* Optional teal background variant (use together with .is-teal-bg) */
.bmiet-chat-fab-labeled.is-teal-bg{
  background: var(--bmiet-primary-color);
  color: var(--bmiet-primary-text);
}
.bmiet-chat-fab-labeled.is-teal-bg .bmiet-fab-title,
.bmiet-chat-fab-labeled.is-teal-bg .bmiet-fab-status{ color: var(--bmiet-primary-text); }
.bmiet-chat-fab-labeled.is-teal-bg .bmiet-fab-image img{ border-color: #fff; }

/* =========================================================
   Modal — Bottom-Right anchored, polished shell
   ========================================================= */

/* Position bottom-right relative to FAB */
#bmietChatModal .modal-dialog.modal-dialog-centered{
  align-items: flex-end;  /* vertical bottom */
  display: flex;
}
#bmietChatModal .modal-dialog{
  margin: 0;
  margin-right: calc(1.5rem + var(--bmiet-safe-right));
  margin-bottom: calc(5rem + var(--bmiet-safe-bottom)); /* clears FAB */
  margin-left: auto;            /* push to right */
  max-width: 480px;
  width: min(96vw, 480px);
}

/* Mobile: near full-width panel, lifted above FAB */
@media (max-width: 640px){
  #bmietChatModal .modal-dialog{
    max-width: none;
    width: calc(100vw - 20px);
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: calc(74px + var(--bmiet-safe-bottom));
  }
}

/* Modal container */
.bmiet-chat-modal{
  background: var(--bmiet-surface);
  border: 1px solid var(--bmiet-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--bmiet-shadow);
}

/* Optional glass effect */
@supports(backdrop-filter: blur(8px)){
  .bmiet-chat-modal{
    background: color-mix(in oklab, var(--bmiet-surface) 86%, transparent);
    backdrop-filter: blur(10px) saturate(120%);
  }
}

/* Bootstrap scrollable area cap */
.modal-dialog-scrollable .modal-content{ max-height: 90vh; }

/* Header/Footer styling if present */
.bmiet-chat-modal .modal-header{
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--bmiet-border);
  background: linear-gradient(135deg, #008a99, var(--bmiet-primary-color));
  color: #fff;
}
.bmiet-chat-modal .modal-title{ font-weight: 700; font-size: 1rem; }
.bmiet-chat-modal .btn-close{ filter: invert(1) grayscale(1); opacity:.9; }
.bmiet-chat-modal .modal-footer{
  border-top: 1px solid var(--bmiet-border);
  background: var(--bmiet-surface);
}

/* =========================================================
   Stream (messages), Bubbles, Chips, Composer
   ========================================================= */

.bmiet-chat-stream{
  padding: 1rem;
  height: min(60vh, 520px);
  overflow: auto;
  background: var(--bmiet-bg);
  scroll-behavior: smooth;
}
/* Scrollbar polish */
.bmiet-chat-stream::-webkit-scrollbar{ width:10px; height:10px; }
.bmiet-chat-stream::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.2); border-radius:10px; border:2px solid transparent; background-clip:padding-box;
}

/* Messages */
.bmiet-chat-msg{ display:flex; margin: .4rem 0; }
.bmiet-chat-msg .bubble{
  max-width: 78%;
  padding: .65rem .9rem;
  border-radius: 14px;
  border: 1px solid var(--bmiet-border);
  box-shadow: none;
  font-size: .93rem;
  line-height: 1.45;
  color: var(--bmiet-ink);
  background: #fff;
  transform: translateY(6px); opacity:0; animation: chat-in .22s ease forwards;
}
@keyframes chat-in{ to{ transform: translateY(0); opacity:1; } }

/* Bot/User variants */
.bmiet-chat-msg.bot{ justify-content: flex-start; }
.bmiet-chat-msg.bot .bubble{
  background: #f2f6f9;
  color: #1f2937;
  border-bottom-left-radius: 6px;
}
.bmiet-chat-msg.user{ justify-content: flex-end; }
.bmiet-chat-msg.user .bubble{
  background: var(--bmiet-primary-color);
  color: var(--bmiet-primary-text);
  border-color: transparent;
  border-bottom-right-radius: 6px;
}

/* Links + inline code inside bubbles */
.bmiet-chat-msg .bubble a{
  color: #064e3b;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bmiet-chat-msg .bubble code{
  background: rgba(2,6,23,.06);
  border-radius: 6px;
  padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
}

/* Quick intents (chips) */
.bmiet-quick-intents{
  display:flex; gap:.45rem; flex-wrap: wrap;
  padding: .6rem 1rem;
  background: #fff;
  border-top: 1px solid var(--bmiet-border);
}
.bmiet-quick-intents .btn-outline-primary{
  --_c: var(--bmiet-primary-color);
  color: var(--_c); border-color: var(--_c);
  border-radius: 999px;
  font-size: .82rem;
  padding: .35rem .7rem;
  background: transparent;
}
.bmiet-quick-intents .btn-outline-primary:hover{
  background: var(--bmiet-primary-color);
  color: var(--bmiet-primary-text);
}

/* Composer */
.bmiet-chat-form{
  display:flex; gap:.55rem; align-items:center;
  padding: .75rem 1rem;
  background: #fff;
  border-top: 1px solid var(--bmiet-border);
}
.bmiet-chat-form .form-control{
  border: 1px solid var(--bmiet-border);
  border-radius: 10px;
  padding: .6rem .75rem;
  min-height: 44px;
  background: #fff;
  color: var(--bmiet-ink);
}
.bmiet-chat-form .form-control:focus{
  outline: 0; border-color: var(--bmiet-primary-color);
  box-shadow: 0 0 0 3px rgba(0,188,212,.25);
}
.bmiet-chat-form .btn-primary{
  background: var(--bmiet-primary-color);
  border-color: var(--bmiet-primary-color);
  color: var(--bmiet-primary-text);
  border-radius: 10px;
  padding: .55rem .9rem;
  font-weight: 700;
}
.bmiet-chat-form .btn-primary:hover{
  background: var(--bmiet-primary-hover);
  border-color: var(--bmiet-primary-hover);
}
.bmiet-chat-form .btn-primary:disabled{ opacity:.7; cursor:not-allowed; }

/* Typing dots */
.bmiet-typing{ display:flex; gap:.3rem; align-items:center; margin-left:.5rem; }
.bmiet-typing span{
  width:6px; height:6px; border-radius:50%;
  background: var(--bmiet-primary-color);
  animation: blink 1s infinite alternate;
}
.bmiet-typing span:nth-child(2){ animation-delay:.2s; }
.bmiet-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ from{opacity:.35} to{opacity:1} }

/* Accessibility */
.bmiet-chat-form :focus-visible,
.bmiet-quick-intents :focus-visible,
.bmiet-chat-fab-labeled:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0,188,212,.28);
}

/* Motion-reduction */
@media (prefers-reduced-motion: reduce){
  .bmiet-chat-fab-labeled, .bmiet-chat-modal, .bmiet-chat-msg .bubble, .bmiet-quick-intents .btn-outline-primary{
    transition: none !important;
    animation: none !important;
  }
}