/* ─────────────────────────────────────────────────────────────────
   FRZ AI Support Chatbot — Public Widget Styles
   ───────────────────────────────────────────────────────────────── */

:root {
  --frz-color:       #1a56db;
  --frz-color-dark:  #1648c0;
  --frz-radius:      16px;
  --frz-shadow:      0 8px 32px rgba(0,0,0,.18);
  --frz-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
  --frz-bg:          #ffffff;
  --frz-surface:     #f4f6fa;
  --frz-border:      #e2e8f0;
  --frz-text:        #1e293b;
  --frz-text-muted:  #64748b;
  --frz-user-bg:     var(--frz-color);
  --frz-user-text:   var(--frz-header-text-color, #ffffff);
  --frz-bot-bg:      #f1f5f9;
  --frz-bot-text:    var(--frz-text);
}

/* ── Floating button ─────────────────────────────────────────────── */
.frz-open-btn {
  position:        fixed;
  bottom:          24px;
  right:           24px;
  z-index:         9998;
  display:         flex;
  align-items:     center;
  gap:             8px;
  background:      var(--frz-color);
  color:           var(--frz-header-text-color, #ffffff);
  border:          none;
  border-radius:   50px;
  padding:         14px 20px;
  cursor:          pointer;
  font-family:     var(--frz-font);
  font-size:       15px;
  font-weight:     600;
  box-shadow:      var(--frz-shadow);
  transition:      transform .2s ease, box-shadow .2s ease, background .2s ease;
  animation:       frzPulse 3s infinite;
}

.frz-open-btn svg {
  width:  20px;
  height: 20px;
}

.frz-open-btn:hover {
  background:  var(--frz-color-dark);
  transform:   translateY(-2px);
  box-shadow:  0 12px 36px rgba(0,0,0,.22);
  animation:   none;
}

.frz-open-btn.frz-hidden {
  opacity:    0;
  pointer-events: none;
  transform:  scale(0.8);
}

@keyframes frzPulse {
  0%, 100% { box-shadow: var(--frz-shadow); }
  50%       { box-shadow: 0 8px 32px rgba(26,86,219,.45); }
}

/* ── Chat window ─────────────────────────────────────────────────── */
.frz-chat-window {
  position:        fixed;
  bottom:          90px;
  right:           24px;
  z-index:         9999;
  width:           380px;
  max-width:       calc(100vw - 32px);
  max-height:      580px;
  background:      var(--frz-bg);
  border-radius:   var(--frz-radius);
  box-shadow:      var(--frz-shadow);
  display:         flex;
  flex-direction:  column;
  font-family:     var(--frz-font);
  overflow:        hidden;
  transform:       scale(0.9) translateY(16px);
  opacity:         0;
  pointer-events:  none;
  transition:      transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}

.frz-chat-window.frz-open {
  transform:      scale(1) translateY(0);
  opacity:        1;
  pointer-events: all;
}

/* ── Header ──────────────────────────────────────────────────────── */
.frz-chat-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  background:      var(--frz-color);
  color:           var(--frz-header-text-color, #ffffff);
  padding:         14px 16px;
  flex-shrink:     0;
}

.frz-header-left {
  display:     flex;
  align-items: center;
  gap:         12px;
}

.frz-avatar {
  width:           40px;
  height:          40px;
  background:      rgba(255,255,255,.15);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       20px;
  flex-shrink:     0;
}

.frz-header-title {
  font-size:   15px;
  font-weight: 700;
  line-height: 1.2;
}

.frz-header-sub {
  font-size:   11px;
  opacity:     .8;
  margin-top:  2px;
}

.frz-close-btn {
  background:  transparent;
  border:      none;
  color:       var(--frz-header-text-color, #ffffff);
  opacity:     0.85;
  font-size:   18px;
  cursor:      pointer;
  padding:     4px 8px;
  border-radius: 6px;
  transition:  background .15s;
  line-height: 1;
}

.frz-close-btn:hover { background: rgba(255,255,255,.15); }

/* ── Messages ────────────────────────────────────────────────────── */
.frz-messages {
  flex:       1;
  overflow-y: auto;
  padding:    16px 12px;
  display:    flex;
  flex-direction: column;
  gap:        10px;
  scroll-behavior: smooth;
}

.frz-messages::-webkit-scrollbar { width: 4px; }
.frz-messages::-webkit-scrollbar-track { background: transparent; }
.frz-messages::-webkit-scrollbar-thumb { background: var(--frz-border); border-radius: 4px; }

.frz-msg {
  display:    flex;
  align-items: flex-end;
  gap:        8px;
  animation:  frzFadeUp .2s ease;
}

@keyframes frzFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.frz-msg-user {
  justify-content: flex-end;
}

.frz-msg-bot {
  justify-content: flex-start;
}

.frz-avatar-sm {
  width:           30px;
  height:          30px;
  background:      var(--frz-color);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       14px;
  flex-shrink:     0;
}

.frz-bubble {
  max-width:     78%;
  padding:       10px 14px;
  border-radius: 16px;
  font-size:     14px;
  line-height:   1.55;
  word-break:    break-word;
}

.frz-bubble-user {
  background:    var(--frz-user-bg);
  color:         var(--frz-user-text);
  border-bottom-right-radius: 4px;
}

.frz-bubble-bot {
  background:    var(--frz-bot-bg);
  color:         var(--frz-bot-text);
  border-bottom-left-radius: 4px;
}

.frz-bubble ul {
  margin:   6px 0;
  padding-left: 18px;
}

.frz-bubble li { margin: 3px 0; }

/* ── Typing indicator ────────────────────────────────────────────── */
.frz-typing {
  display:     flex;
  align-items: center;
  gap:         5px;
  padding:     12px 14px;
}

.frz-typing span {
  display:       block;
  width:         7px;
  height:        7px;
  background:    var(--frz-text-muted);
  border-radius: 50%;
  animation:     frzBounce 1.2s infinite;
}

.frz-typing span:nth-child(2) { animation-delay: .2s; }
.frz-typing span:nth-child(3) { animation-delay: .4s; }

@keyframes frzBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-6px); }
}

/* ── Citations ───────────────────────────────────────────────────── */
.frz-citations {
  font-size:  12px;
  color:      var(--frz-text-muted);
  margin-top: 4px;
  padding-left: 8px;
}

.frz-citations a {
  color:           var(--frz-color);
  text-decoration: none;
}

.frz-citations a:hover { text-decoration: underline; }

/* ── Escalation buttons ──────────────────────────────────────────── */
.frz-escalation {
  background:    #fff8ed;
  border:        1px solid #fde68a;
  border-radius: 12px;
  padding:       12px 14px;
  max-width:     85%;
}

.frz-esc-text {
  font-size:   13px;
  color:       #92400e;
  margin:      0 0 10px;
}

.frz-esc-buttons {
  display: flex;
  gap:     8px;
  flex-wrap: wrap;
}

.frz-esc-btn {
  display:         flex;
  align-items:     center;
  gap:             6px;
  padding:         8px 14px;
  border-radius:   8px;
  text-decoration: none;
  font-size:       13px;
  font-weight:     600;
  transition:      opacity .15s, transform .15s;
}

.frz-esc-btn:hover { opacity: .85; transform: translateY(-1px); }

.frz-esc-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.frz-tg-btn {
  background: #2AABEE;
  color:      #fff;
}

.frz-wa-btn {
  background: #25D366;
  color:      #fff;
}

/* ── Email prompt ────────────────────────────────────────────────── */
.frz-email-prompt {
  background:    #f0f9ff;
  border-top:    1px solid var(--frz-border);
  padding:       12px 14px;
  flex-shrink:   0;
}

.frz-email-prompt p {
  font-size:  13px;
  color:      var(--frz-text);
  margin:     0 0 8px;
}

.frz-email-row {
  display: flex;
  gap:     6px;
  margin-bottom: 8px;
}

.frz-email-row input {
  flex:         1;
  padding:      8px 10px;
  border:       1px solid var(--frz-border);
  border-radius: 8px;
  font-size:    13px;
  outline:      none;
  transition:   border-color .15s;
}

.frz-email-row input:focus { border-color: var(--frz-color); }
.frz-email-row input.frz-input-error { border-color: #ef4444; }

.frz-btn-primary {
  background:    var(--frz-color);
  color:         #fff;
  border:        none;
  padding:       8px 14px;
  border-radius: 8px;
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  transition:    background .15s;
  white-space:   nowrap;
}

.frz-btn-primary:hover { background: var(--frz-color-dark); }

.frz-btn-ghost {
  background:  transparent;
  color:       var(--frz-text-muted);
  border:      1px solid var(--frz-border);
  padding:     8px 12px;
  border-radius: 8px;
  font-size:   13px;
  cursor:      pointer;
  transition:  background .15s;
}

.frz-btn-ghost:hover { background: var(--frz-surface); }

.frz-consent {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   12px;
  color:       var(--frz-text-muted);
  cursor:      pointer;
}

/* ── Input area ──────────────────────────────────────────────────── */
.frz-input-area {
  display:     flex;
  align-items: flex-end;
  gap:         8px;
  padding:     10px 12px;
  border-top:  1px solid var(--frz-border);
  flex-shrink: 0;
  background:  var(--frz-bg);
}

#frz-user-input {
  flex:          1;
  resize:        none;
  border:        1px solid var(--frz-border);
  border-radius: 10px;
  padding:       10px 12px;
  font-size:     14px;
  font-family:   var(--frz-font);
  color:         var(--frz-text);
  background:    var(--frz-surface);
  outline:       none;
  line-height:   1.4;
  max-height:    120px;
  overflow-y:    auto;
  transition:    border-color .15s;
}

#frz-user-input:focus {
  border-color: var(--frz-color);
  background:   #fff;
}

#frz-user-input:disabled { opacity: .6; }

.frz-send-btn {
  width:         40px;
  height:        40px;
  border-radius: 10px;
  background:    var(--frz-color);
  border:        none;
  color:         #fff;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  transition:    background .15s, transform .1s;
}

.frz-send-btn svg { width: 16px; height: 16px; }

.frz-send-btn:hover   { background: var(--frz-color-dark); }
.frz-send-btn:active  { transform: scale(.95); }
.frz-send-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .frz-chat-window {
    bottom:       0;
    right:        0;
    left:         0;
    width:        100%;
    max-width:    100%;
    max-height:   85vh;
    border-radius: 20px 20px 0 0;
  }

  .frz-open-btn {
    bottom: 16px;
    right:  16px;
  }

  .frz-btn-label { display: none; }

  .frz-open-btn {
    width:         56px;
    height:        56px;
    border-radius: 50%;
    padding:       0;
    justify-content: center;
  }
}