/* ================================================================
   AI PDF Chatbot — Frontend Styles
   ================================================================ */

:root {
  --aipc-accent:       #1a73e8;
  --aipc-accent-dark:  #1557b0;
  --aipc-bg:           #ffffff;
  --aipc-surface:      #f7f7fb;
  --aipc-border:       #e4e4f0;
  --aipc-text:         #1a1a2e;
  --aipc-muted:        #8888aa;
  --aipc-bot-bg:       #e8f0fe;
  --aipc-user-bg:      var(--aipc-accent);
  --aipc-user-text:    #ffffff;
  --aipc-radius:       18px;
  --aipc-font:         'Georgia', 'Times New Roman', serif;
  --aipc-font-ui:      -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --aipc-shadow:       0 8px 40px rgba(108,99,255,0.14), 0 2px 8px rgba(0,0,0,0.06);
  --aipc-w:            420px;
  --aipc-h:            540px;
}

/* Inject accent color via JS */
#aipc-chatbot-wrap { --aipc-accent: var(--aipc-accent-override, #6c63ff); }

/* ── Wrapper ───────────────────────────────────────────────── */
.aipc-wrap {
  display:         flex;
  flex-direction:  column;
  width:           100%;
  max-width:       var(--aipc-w);
  height:          var(--aipc-h);
  background:      var(--aipc-bg);
  border-radius:   var(--aipc-radius);
  box-shadow:      var(--aipc-shadow);
  overflow:        hidden;
  font-family:     var(--aipc-font-ui);
  border:          1px solid var(--aipc-border);
  margin:          1.5rem auto;
}

/* ── Header ────────────────────────────────────────────────── */
.aipc-header {
  display:         flex;
  align-items:     center;
  gap:             12px;
  padding:         14px 20px;
  background:      var(--aipc-accent);
  color:           #fff;
  position:        relative;
}
.aipc-header::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 60%);
  pointer-events: none;
}
.aipc-avatar {
  font-size:       1.8rem;
  line-height:     1;
  filter:          drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.aipc-header-info { display: flex; flex-direction: column; gap: 2px; }
.aipc-bot-name { font-size: .95rem; font-weight: 700; letter-spacing: .01em; }
.aipc-status {
  display:     flex;
  align-items: center;
  gap:         5px;
  font-size:   .72rem;
  opacity:     .85;
}
.aipc-dot {
  width:            7px;
  height:           7px;
  border-radius:    50%;
  background:       #4cff91;
  animation:        aipc-pulse 2s ease infinite;
}
@keyframes aipc-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.6; transform:scale(.8); }
}

/* ── Messages ──────────────────────────────────────────────── */
.aipc-messages {
  flex:         1;
  overflow-y:   auto;
  padding:      16px 18px;
  display:      flex;
  flex-direction: column;
  gap:          10px;
  background:   var(--aipc-surface);
  scroll-behavior: smooth;
}
.aipc-messages::-webkit-scrollbar { width: 4px; }
.aipc-messages::-webkit-scrollbar-track { background: transparent; }
.aipc-messages::-webkit-scrollbar-thumb { background: var(--aipc-border); border-radius: 4px; }

/* ── Individual message ────────────────────────────────────── */
.aipc-message {
  display:    flex;
  max-width:  88%;
  animation:  aipc-slide-in .25s ease;
}
@keyframes aipc-slide-in {
  from { opacity:0; transform: translateY(8px); }
  to   { opacity:1; transform: translateY(0); }
}
.aipc-message--bot  { align-self: flex-start; }
.aipc-message--user { align-self: flex-end;   flex-direction: row-reverse; }

.aipc-bubble {
  padding:       10px 15px;
  border-radius: 16px;
  font-size:     .875rem;
  line-height:   1.6;
  word-break:    break-word;
  white-space:   pre-wrap;
  position:      relative;
}
.aipc-message--bot  .aipc-bubble {
  background:    var(--aipc-bot-bg);
  color:         var(--aipc-text);
  border-bottom-left-radius: 4px;
  box-shadow:    0 1px 3px rgba(0,0,0,.06);
}
.aipc-message--user .aipc-bubble {
  background:    var(--aipc-accent);
  color:         var(--aipc-user-text);
  border-bottom-right-radius: 4px;
}

/* ── Typing indicator ──────────────────────────────────────── */
.aipc-typing .aipc-bubble {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
}
.aipc-typing .aipc-dot-t {
  width:  7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aipc-muted);
  animation: aipc-bounce .9s ease infinite;
}
.aipc-typing .aipc-dot-t:nth-child(2) { animation-delay: .15s; }
.aipc-typing .aipc-dot-t:nth-child(3) { animation-delay: .30s; }
@keyframes aipc-bounce {
  0%,80%,100% { transform: translateY(0); opacity:.5; }
  40%          { transform: translateY(-5px); opacity:1; }
}

/* ── Error message ─────────────────────────────────────────── */
.aipc-message--error .aipc-bubble {
  background: #fff0f0;
  color:      #c0392b;
  border:     1px solid #f5c6cb;
}

/* ── Input area ────────────────────────────────────────────── */
.aipc-input-area {
  display:     flex;
  align-items: flex-end;
  gap:         10px;
  padding:     12px 16px;
  background:  var(--aipc-bg);
  border-top:  1px solid var(--aipc-border);
}
.aipc-input {
  flex:          1;
  resize:        none;
  border:        1.5px solid var(--aipc-border);
  border-radius: 14px;
  padding:       9px 14px;
  font-size:     .875rem;
  font-family:   var(--aipc-font-ui);
  color:         var(--aipc-text);
  background:    var(--aipc-surface);
  outline:       none;
  max-height:    120px;
  overflow-y:    auto;
  line-height:   1.5;
  transition:    border-color .2s;
}
.aipc-input:focus {
  border-color: var(--aipc-accent);
  background:   #fff;
}
.aipc-input::placeholder { color: var(--aipc-muted); }

.aipc-send-btn {
  flex-shrink: 0;
  width:       40px;
  height:      40px;
  border:      none;
  border-radius: 50%;
  background:  var(--aipc-accent);
  color:       #fff;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content: center;
  transition:  background .2s, transform .1s;
  padding:     0;
}
.aipc-send-btn:hover:not(:disabled) { background: var(--aipc-accent-dark); transform: scale(1.05); }
.aipc-send-btn:active               { transform: scale(.95); }
.aipc-send-btn:disabled             { opacity: .5; cursor: not-allowed; }
.aipc-send-btn svg                  { width: 18px; height: 18px; }

/* ── Footer ────────────────────────────────────────────────── */
.aipc-footer {
  text-align:  center;
  font-size:   .68rem;
  color:       var(--aipc-muted);
  padding:     5px 0 8px;
  background:  var(--aipc-bg);
  border-top:  1px solid var(--aipc-border);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .aipc-wrap { max-width: 100%; height: 480px; border-radius: 12px; }
}

/* ================================================================
   FLOATING WIDGET — added in v2.1.0
   ================================================================ */

:root {
  --aipc-launcher-size: 60px;
  --aipc-offset-x:      24px;
  --aipc-offset-y:      24px;
  --aipc-z:             999990;
}

/* ── Float Container ────────────────────────────────────────── */
.aipc-float-container {
  position: fixed;
  z-index:  var(--aipc-z);
  display:  flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Corner positions */
.aipc-position--bottom-right {
  bottom: var(--aipc-offset-y);
  right:  var(--aipc-offset-x);
  align-items: flex-end;
}
.aipc-position--bottom-left {
  bottom: var(--aipc-offset-y);
  left:   var(--aipc-offset-x);
  align-items: flex-start;
}
.aipc-position--top-right {
  top:   var(--aipc-offset-y);
  right: var(--aipc-offset-x);
  align-items: flex-end;
  flex-direction: column-reverse;
}
.aipc-position--top-left {
  top:  var(--aipc-offset-y);
  left: var(--aipc-offset-x);
  align-items: flex-start;
  flex-direction: column-reverse;
}

/* ── Floating Chat Window ───────────────────────────────────── */
.aipc-wrap--floating {
  /* Reset inline margin, set fixed sizing */
  margin:          0;
  width:           var(--aipc-w, 380px);
  max-width:       calc(100vw - 32px);
  height:          var(--aipc-h, 540px);

  /* Hidden by default — toggled via JS */
  opacity:         0;
  pointer-events:  none;
  transform:       translateY(16px) scale(0.97);
  transition:      opacity .25s ease, transform .25s ease;
  transform-origin: bottom right;
  margin-bottom:   16px;
  border-radius:   var(--aipc-radius);
  box-shadow:      var(--aipc-shadow);
  overflow:        hidden;
}

/* top positions: window opens downward */
.aipc-position--top-right  .aipc-wrap--floating,
.aipc-position--top-left   .aipc-wrap--floating {
  transform-origin: top right;
  transform:       translateY(-16px) scale(0.97);
  margin-bottom:   0;
  margin-top:      16px;
}
.aipc-position--top-left   .aipc-wrap--floating { transform-origin: top left; }
.aipc-position--bottom-left .aipc-wrap--floating { transform-origin: bottom left; }

.aipc-wrap--floating.aipc-wrap--open {
  opacity:        1;
  pointer-events: auto;
  transform:      translateY(0) scale(1);
}

/* ── Close button inside header ────────────────────────────── */
.aipc-close-btn {
  margin-left:    auto;
  background:     transparent;
  border:         none;
  color:          rgba(255,255,255,.75);
  cursor:         pointer;
  padding:        4px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  border-radius:  6px;
  transition:     color .15s, background .15s;
  flex-shrink:    0;
}
.aipc-close-btn:hover {
  color:       #fff;
  background:  rgba(255,255,255,.15);
}
.aipc-close-btn svg { width: 20px; height: 20px; }

/* ── Launcher Button ────────────────────────────────────────── */
.aipc-launcher {
  position:       relative;
  width:          var(--aipc-launcher-size);
  height:         var(--aipc-launcher-size);
  border-radius:  50%;
  background:     var(--aipc-accent, #6c63ff);
  color:          #fff;
  border:         none;
  cursor:         pointer;
  box-shadow:     0 4px 20px rgba(108,99,255,0.4), 0 2px 6px rgba(0,0,0,0.15);
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-size:      1.6rem;
  transition:     transform .2s ease, box-shadow .2s ease, background .2s;
  flex-shrink:    0;
  overflow:       hidden;
}
.aipc-launcher:hover {
  transform:   scale(1.08);
  box-shadow:  0 6px 28px rgba(108,99,255,0.5), 0 3px 10px rgba(0,0,0,0.2);
}
.aipc-launcher:active { transform: scale(.95); }

/* Icon vs Close icon swap */
.aipc-launcher-icon  { transition: opacity .2s, transform .2s; }
.aipc-launcher-close {
  position:  absolute;
  opacity:   0;
  transform: rotate(-90deg) scale(0.6);
  transition: opacity .2s, transform .2s;
  display:   flex;
}
.aipc-launcher-close svg { width: 24px; height: 24px; }

.aipc-float-container.aipc-is-open .aipc-launcher-icon {
  opacity:   0;
  transform: rotate(90deg) scale(0.6);
}
.aipc-float-container.aipc-is-open .aipc-launcher-close {
  opacity:   1;
  transform: rotate(0deg) scale(1);
}

/* ── Unread badge ───────────────────────────────────────────── */
.aipc-unread-badge {
  position:      absolute;
  top:           4px;
  right:         4px;
  width:         12px;
  height:        12px;
  border-radius: 50%;
  background:    #ff4757;
  border:        2px solid #fff;
  display:       none;
}
.aipc-unread-badge.aipc-badge--visible { display: block; }

/* ── Mobile tweaks for floating ─────────────────────────────── */
@media (max-width: 480px) {
  .aipc-wrap--floating {
    width:    calc(100vw - 24px);
    height:   70vh;
    max-height: 540px;
  }
  .aipc-position--bottom-right,
  .aipc-position--bottom-left {
    bottom: 16px;
    right:  12px;
    left:   auto;
  }
  .aipc-position--bottom-left {
    left:  12px;
    right: auto;
  }
}