/* ==========================================================================
   AI ASSISTANT ("Truxie") — chat widget styles      (REMOVABLE FEATURE)
   Flat, light, friendly. Brand blue accent from the mascot icon, soft light
   borders (no dark borders), Inter type, gentle animations. No emoji.
   Delete this file + its <link> in admin.html to remove the styling.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ai-blue: #1f5fd0;
  --ai-blue-dk: #1a51b3;
  --ai-tint: #eef4ff;
  --ai-line: #e7eef9;          /* soft light border everywhere */
  --ai-ink: #1f2a3d;
  --ai-muted: #8a98ac;
  --ai-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

#aiLauncher, #aiPanel, #aiPanel * { font-family: var(--ai-font); box-sizing: border-box; }

/* ── Floating launcher (the mascot) — static, no idle animation/glow ─────── */
#aiLauncher {
  position: fixed; right: 24px; bottom: 24px; z-index: 9000;
  width: 52px; height: 52px; padding: 0; border: none; background: transparent;
  cursor: grab; display: none; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 10px rgba(31, 60, 110, .22));
  transition: transform .12s ease;
  touch-action: none;          /* let us handle touch-drag without page scroll */
  user-select: none; -webkit-user-select: none;
}
#aiLauncher img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; user-select: none; }
#aiLauncher:active { transform: scale(.92); }                 /* tap feedback */
#aiLauncher.ai-dragging { cursor: grabbing; transform: scale(1.12); transition: none; filter: drop-shadow(0 10px 22px rgba(31, 60, 110, .34)); }

/* ── Chat panel ─────────────────────────────────────────────────────────── */
#aiPanel {
  position: fixed; right: 24px; bottom: 24px; z-index: 9001;
  width: 384px; max-width: calc(100vw - 28px);
  height: 580px; max-height: calc(100vh - 44px);
  background: #fff; border: 1px solid var(--ai-line); border-radius: 20px;
  box-shadow: 0 24px 60px rgba(31, 60, 110, .20);
  display: none; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(.96); transform-origin: bottom right;
  transition: opacity .2s ease, transform .22s cubic-bezier(.16,1,.3,1);
}
#aiPanel.ai-show { opacity: 1; transform: translateY(0) scale(1); }

/* Header — light, never dark */
#aiPanel .ai-head {
  display: flex; align-items: center; gap: 11px; padding: 13px 14px;
  background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--ai-line);
}
#aiPanel .ai-avatar { width: 38px; height: 38px; flex: 0 0 auto; }
#aiPanel .ai-avatar img { width: 100%; height: 100%; object-fit: contain; }
#aiPanel .ai-id { flex: 1; min-width: 0; line-height: 1.25; }
#aiPanel .ai-name { font-weight: 700; font-size: 15px; color: var(--ai-ink); letter-spacing: -.01em; }
#aiPanel .ai-state { font-size: 11.5px; color: var(--ai-muted); font-weight: 500; display: flex; align-items: center; gap: 5px; }
#aiPanel .ai-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #25c26a; box-shadow: 0 0 0 3px rgba(37,194,106,.18); }
#aiPanel .ai-head .ai-hbtn {
  background: transparent; border: none; color: var(--ai-muted); cursor: pointer;
  width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
#aiPanel .ai-head .ai-hbtn:hover { background: var(--ai-tint); color: var(--ai-blue); }

/* Body */
#aiBody { flex: 1; overflow-y: auto; padding: 16px; background: #f7f9fc; display: flex; flex-direction: column; gap: 11px; }
#aiBody::-webkit-scrollbar { width: 8px; }
#aiBody::-webkit-scrollbar-thumb { background: #dde5f0; border-radius: 8px; }

.ai-msg { max-width: 85%; padding: 10px 13px; border-radius: 15px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; animation: aiMsgIn .22s ease both; }
@keyframes aiMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.ai-msg.ai-user { align-self: flex-end; background: var(--ai-blue); color: #fff; border-bottom-right-radius: 5px; }
.ai-msg.ai-bot  { align-self: flex-start; background: #fff; color: var(--ai-ink); border: 1px solid var(--ai-line); border-bottom-left-radius: 5px; }
.ai-msg.ai-bot strong { color: var(--ai-blue); font-weight: 600; }
.ai-file-link { display: inline-flex; align-items: center; gap: 6px; margin: 3px 4px 3px 0; padding: 6px 12px; background: var(--ai-tint); color: var(--ai-blue); border: 1px solid #d6e4ff; border-radius: 8px; font-size: 12.5px; font-weight: 600; text-decoration: none; transition: background .15s, border-color .15s; }
.ai-file-link::before { content: ""; width: 13px; height: 13px; flex: none; background-color: var(--ai-blue); -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E"); mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E"); }
.ai-file-link:hover { background: #e1ecff; border-color: #bcd4ff; }
.ai-msg table { border-collapse: collapse; margin: 6px 0; font-size: 12.5px; width: 100%; }
.ai-msg th, .ai-msg td { border: 1px solid var(--ai-line); padding: 4px 8px; text-align: left; }
.ai-msg th { background: var(--ai-tint); font-weight: 600; }
.ai-error { color: #b42318; border-color: #f4cfca !important; background: #fef4f3 !important; }

/* Thinking dots */
.ai-typing { align-self: flex-start; display: flex; gap: 5px; padding: 13px 15px; background: #fff; border: 1px solid var(--ai-line); border-radius: 15px; border-bottom-left-radius: 5px; animation: aiMsgIn .2s ease both; }
.ai-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ai-blue); opacity: .55; animation: aiBounce 1.3s infinite ease-in-out both; }
.ai-typing span:nth-child(2) { animation-delay: .18s; }
.ai-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes aiBounce { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-5px); opacity: 1; } }

/* Suggestion chips */
.ai-suggests { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.ai-suggests button {
  font-size: 12px; font-weight: 500; color: var(--ai-blue); background: #fff; border: 1px solid #d8e3f6;
  border-radius: 18px; padding: 6px 12px; cursor: pointer; transition: all .14s;
}
.ai-suggests button:hover { background: var(--ai-blue); color: #fff; border-color: var(--ai-blue); transform: translateY(-1px); }

/* Footer / input */
#aiFoot { border-top: 1px solid var(--ai-line); padding: 11px; background: #fff; }
#aiFoot form { display: flex; gap: 9px; align-items: flex-end; }
#aiInput {
  flex: 1; resize: none; border: 1px solid var(--ai-line); border-radius: 13px;
  padding: 10px 12px; font: inherit; font-size: 13.5px; max-height: 100px; line-height: 1.45; color: var(--ai-ink);
  transition: border-color .14s, box-shadow .14s; background: #fbfcfe;
}
#aiInput::placeholder { color: #aab6c7; }
#aiInput:focus { outline: none; border-color: var(--ai-blue); box-shadow: 0 0 0 3px rgba(31,95,208,.12); background: #fff; }
#aiSend {
  background: var(--ai-blue); color: #fff; border: none; border-radius: 13px;
  width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .14s, transform .12s;
}
#aiSend:hover { background: var(--ai-blue-dk); }
#aiSend:active { transform: scale(.92); }
#aiSend:disabled { opacity: .5; cursor: default; }
.ai-note { font-size: 10.5px; color: #aab6c7; text-align: center; margin-top: 7px; }