/* =========================================================
   El Faraana Chatbot — Full Stylesheet (Launcher + Panel)
   ========================================================= */

/* ====== Launcher ====== */
#chat-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: none;
  background: #002147; /* brand */
  color: #fff;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  cursor: pointer;
  z-index: 2147483000; /* very high so it's on top */
  transition: transform .15s ease, background .2s ease;
  transform-origin: 80% 80%;
}
#chat-launcher:hover { transform: translateY(-1px); background:#001838; }

/* Micro pop when opening (toggle .opening via JS) */
#chat-launcher.opening { animation: pop .18s ease-out; }
@keyframes pop { 0%{transform:scale(.6);} 100%{transform:scale(1);} }

/* ====== Panel ====== */
#chat-box {
  position: fixed;
  right: 20px;
  bottom: 90px;
  width: 360px;
  max-height: 78svh; /* small viewport height for mobile browsers */
  background: #f7f8fa;
  color: #0f1115;
  border-radius: 16px;
  display: none; /* toggled to flex via JS */
  flex-direction: column;
  box-shadow: 0 24px 48px rgba(0,0,0,.28);
  overflow: hidden;
  z-index: 2147483000;
}

/* ====== Header ====== */
#chat-header {
  background: linear-gradient(135deg, #002147 0%, #17365e 100%);
  color: #fff;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 40px 1fr 24px;
  gap: 10px; align-items: center;
  position: relative;
}
.header-avatar {
  width: 40px; height: 40px; border-radius: 10px;
  display:flex;align-items:center;justify-content:center;
  background:#19324c; font-size:20px; color:#fff;
}
.header-meta { line-height: 1.2; }
.header-title { font-weight: 700; font-size: 15px; }
.header-sub  { opacity:.9; font-size: 12px; }

/* Online badge (dot + pulse) */
.header-status { display:inline-flex; gap:6px; align-items:center; }
.header-dot {
  width:8px; height:8px; border-radius:50%;
  background:#35d882; box-shadow:0 0 0 0 rgba(53,216,130,.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow:0 0 0 0 rgba(53,216,130,.6); }
  70% { box-shadow:0 0 0 10px rgba(53,216,130,0); }
  100% { box-shadow:0 0 0 0 rgba(53,216,130,0); }
}

.header-close {
  background: transparent; border: 0; color: #fff; cursor: pointer; font-size: 18px;
  opacity:.85; line-height: 1;
}
.header-close:hover{opacity:1}

/* ====== Body / messages ====== */
#chat-body {
  padding: 14px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  -webkit-overflow-scrolling: touch;
  background: transparent;
  position: relative; /* for scroll FAB positioning */
}

/* Scrollbar polish (Firefox + WebKit) */
#chat-body { scrollbar-width: thin; scrollbar-color: #c7d2e0 transparent; }
#chat-body::-webkit-scrollbar { width: 8px; }
#chat-body::-webkit-scrollbar-track { background: transparent; }
#chat-body::-webkit-scrollbar-thumb { background: #c7d2e0; border-radius: 999px; }
#chat-body::-webkit-scrollbar-thumb:hover { background:#a9b8cc; }

.msg-row { display: flex; gap: 10px; }
.msg-row.user { justify-content: flex-end; }

.avatar {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 28px;
  display:flex;align-items:center;justify-content:center;
  background:#e9edf2; color:#111; font-size:14px;
}
.avatar.bot { background:#002147; color:#fff; }

.bubble {
  max-width: 78%;
  padding: 10px 12px; border-radius: 14px;
  font-size: 14px; line-height: 1.45;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  word-wrap: break-word;
  animation: bubble-in .18s ease;
}
@keyframes bubble-in {
  from { transform: translateY(6px); opacity:0; }
  to   { transform: translateY(0);   opacity:1; }
}
.msg-row.user .bubble {
  background: #002147; color: #fff; border: 1px solid rgba(255,255,255,.06);
}

/* Grouping (stack same-author messages) */
.msg-row + .msg-row.same .bubble { border-top-left-radius:6px; border-top-right-radius:6px; }
.msg-row.user + .msg-row.user.same .bubble { border-top-right-radius:6px; }

/* thumbs feedback under bot bubbles */
.feedback {
  display:flex; gap:10px; align-items:center; margin-top:6px; opacity:.75;
  font-size:14px;
}
.feedback button {
  border:1px solid rgba(0,0,0,.12);
  background:#fff; border-radius:8px; padding:4px 6px; cursor:pointer;
}
.feedback button:hover { background:#f0f2f5; }

/* Timestamps */
.timestamp {
  display:inline-block; margin-top:6px; font-size:11px; opacity:.6;
}

/* Typing indicator (3 dots) */
.typing {
  display:inline-flex; align-items:center; gap:4px;
  padding:10px 12px; border-radius:14px; background:#fff; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.typing .dot {
  width:6px; height:6px; border-radius:50%; background:#9aa5b1;
  animation: bounce 1.2s infinite ease-in-out;
}
.typing .dot:nth-child(2){ animation-delay: .15s; }
.typing .dot:nth-child(3){ animation-delay: .3s; }
@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); opacity:.6; }
  40% { transform: translateY(-4px); opacity:1; }
}

/* Quick-reply chips */
.quick-replies {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;
}
.quick-replies button {
  border:1px solid #dfe6ee; background:#fff; border-radius:999px;
  padding:6px 10px; font-size:12px; cursor:pointer;
}
.quick-replies button:hover { background:#f0f4f8; }

/* Attachment preview (image/file chip) */
.attach {
  display:inline-flex; align-items:center; gap:8px; padding:8px 10px;
  border:1px dashed #cfd8e3; border-radius:12px; background:#f9fbfd; font-size:12px;
}
.attach img { width:64px; height:64px; object-fit:cover; border-radius:10px; }
.attach .name { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Scroll-to-bottom FAB (positioned inside #chat-body) */
#scroll-bottom {
  position:absolute; right:12px; bottom:12px; z-index:3;
  background:#002147; color:#fff; border:0; border-radius:999px;
  padding:8px 10px; display:none; box-shadow:0 6px 18px rgba(0,0,0,.18); cursor:pointer;
}
#chat-body:hover #scroll-bottom { opacity:.95; }

/* ====== Input ====== */
#chat-input {
  background:#fff; padding: 10px; display:flex; gap:8px; align-items:center;
  border-top: 1px solid rgba(0,0,0,.06);
}
#chat-text {
  flex:1; padding: 10px 12px; border-radius: 12px;
  border:1px solid #dde2e7; background:#fff; color:#0f1115;
  outline: none;
  font-size: 14px;
}
#chat-text:focus { border-color:#2a4e86; box-shadow: 0 0 0 3px rgba(42,78,134,.15); }

#chat-send {
  background:#002147; color:#fff; border:0; border-radius: 12px;
  padding: 10px 14px; cursor:pointer;
}
#chat-send:hover { filter: brightness(1.05); }
#chat-send:disabled { opacity:.6; cursor:not-allowed; }

/* Input bar icon buttons (attach/emoji/etc.) */
#chat-input .icon-btn {
  width:36px; height:36px; border-radius:10px; border:1px solid #dde2e7;
  background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
#chat-input .icon-btn:hover { background:#f3f6fa; }

/* ====== RTL per message ====== */
.bubble[dir="rtl"] { text-align:right; }

/* ====== Mobile ====== */
@media (max-width: 768px) {
  /* Respect safe areas (iPhone notch) */
  #chat-launcher {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 8px);
  }

  #chat-box {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(max(84px, env(safe-area-inset-bottom)) + 8px);
    width: auto;
    max-height: calc(100svh - 140px);
  }

  .bubble { max-width: 88%; }
}

/* When keyboard is open (toggled by JS) */
#chat-box.chat--kbd-open {
  max-height: calc(100svh - 20px);
}

/* ====== Dark mode ====== */
/* Auto (prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  #chat-box { background:#0f1217; color:#e8eef6; box-shadow: 0 24px 48px rgba(0,0,0,.6); }
  #chat-body { background:#0f1217; }
  .bubble { background:#171a21; color:#e8eef6; border-color:#212633; }
  .msg-row.user .bubble { background:#19365e; border-color:#19365e; }
  #chat-input { background:#12151b; border-top-color:#202533; }
  #chat-text { background:#0f1217; color:#e8eef6; border-color:#253042; }
  #chat-send { background:#2a4e86; }
  .avatar { background:#1b2230; color:#fff; }
  .avatar.bot { background:#2a4e86; }
  #scroll-bottom { background:#2a4e86; }
}
/* Manual toggle support via .theme-dark on <body> */
.theme-dark #chat-box { background:#0f1217; color:#e8eef6; }
.theme-dark #chat-body { background:#0f1217; }
.theme-dark .bubble { background:#171a21; color:#e8eef6; border-color:#212633; }
.theme-dark .msg-row.user .bubble { background:#19365e; border-color:#19365e; }
.theme-dark #chat-input { background:#12151b; border-top-color:#202533; }
.theme-dark #chat-text { background:#0f1217; color:#e8eef6; border-color:#253042; }
.theme-dark #chat-send { background:#2a4e86; }
.theme-dark .avatar { background:#1b2230; color:#fff; }
.theme-dark .avatar.bot { background:#2a4e86; }
.theme-dark #scroll-bottom { background:#2a4e86; }

/* ====== Focus & accessibility ====== */
#chat-launcher:focus,
.header-close:focus,
#chat-send:focus,
.quick-replies button:focus,
.icon-btn:focus,
#scroll-bottom:focus {
  outline: 3px solid rgba(0, 136, 255, .45);
  outline-offset: 2px;
  border-radius: 12px;
}

/* ====== Animations disabled when user prefers reduced motion ====== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ====== Utility helpers ====== */

/* Hide visually but keep accessible for screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* Fade-in utility (use with JS to gently reveal elements) */
.fade-in {
  opacity: 0; animation: fadeIn .25s ease forwards;
}
@keyframes fadeIn {
  to { opacity: 1; }
}

/* Slide-up utility (for new messages) */
.slide-up {
  transform: translateY(8px); opacity: 0;
  animation: slideUp .25s ease forwards;
}
@keyframes slideUp {
  to { transform: translateY(0); opacity: 1; }
}

/* Glow highlight (can be toggled on important bot replies) */
.glow {
  box-shadow: 0 0 0 3px rgba(0,136,255,.25);
}

/* Disabled state style for any button */
button[disabled] {
  opacity: 0.6; cursor: not-allowed;
}

/* ====== End of Chatbot Stylesheet ====== */