/* ============================================================
   COMPLAINBOT – STYLESHEET
   WooCommerce + Groq AI
   ============================================================ */

/* ── CSS Variables ── */
:root {
  --primary:    #4e73df;
  --success:    #1cc88a;
  --info:       #36b9cc;
  --warning:    #f6c23e;
  --danger:     #e74a3b;
  --groq-color: #f55036;
}

/* ── Base ── */
body {
  font-family: 'Nunito', sans-serif;
  background-color: #f8f9fc;
}

/* ── Sidebar ── */
.sidebar {
  min-height: 100vh;
  background: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
}
.sidebar .nav-item .nav-link { color: rgba(255,255,255,0.8); padding: 1rem; }
.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item.active .nav-link { color: #fff; background: rgba(255,255,255,0.15); }
.sidebar-brand { padding: 1.5rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.15); }
.sidebar-brand h6 { color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: 0.05rem; }
.sidebar-brand small { color: rgba(255,255,255,0.6); font-size: 0.7rem; }
.sidebar-divider { border-top: 1px solid rgba(255,255,255,0.15); margin: 0 1rem 1rem; }
.sidebar-heading {
  color: rgba(255,255,255,0.4);
  font-size: 0.65rem; font-weight: 800;
  letter-spacing: 0.13rem; text-transform: uppercase;
  padding: 0 1rem 0.5rem;
}
.badge-counter-sidebar {
  background: #e74a3b; color: white; border-radius: 50%;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700; margin-left: auto;
}

/* ── Topbar ── */
.topbar { height: 4.375rem; background: #fff; box-shadow: 0 0.15rem 1.75rem rgba(58,59,69,.15); }
.topbar .dropdown-toggle::after { display: none; }
.groq-badge {
  background: var(--groq-color); color: white;
  font-size: 0.65rem; font-weight: 700;
  padding: 2px 8px; border-radius: 4px; letter-spacing: 0.05rem;
}
.woo-badge {
  background: #7f54b3; color: white;
  font-size: 0.65rem; font-weight: 700;
  padding: 2px 8px; border-radius: 4px; letter-spacing: 0.05rem;
}

/* ── Page Sections ── */
.page-section        { display: none; }
.page-section.active { display: block; }

/* ── Stat Cards ── */
.border-left-primary { border-left: 0.25rem solid #4e73df !important; }
.border-left-success { border-left: 0.25rem solid #1cc88a !important; }
.border-left-info    { border-left: 0.25rem solid #36b9cc !important; }
.border-left-warning { border-left: 0.25rem solid #f6c23e !important; }

/* ── Complaint List Panel ── */
.complaint-list-panel {
  height: calc(100vh - 200px);
  overflow-y: auto;
  border-right: 1px solid #e3e6f0;
}
.complaint-item {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #e3e6f0;
  cursor: pointer; transition: background 0.15s;
}
.complaint-item:hover  { background: #f8f9fc; }
.complaint-item.active { background: #eaecf4; border-left: 3px solid #4e73df; }
.complaint-item .c-name    { font-weight: 700; font-size: 0.8rem; color: #3a3b45; }
.complaint-item .c-platform { font-size: 0.7rem; color: #858796; }
.complaint-item .c-preview {
  font-size: 0.75rem; color: #858796;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
.complaint-item .c-time { font-size: 0.65rem; color: #b7b9cc; }

/* ── Chat Area ── */
.chat-panel { display: flex; flex-direction: column; height: calc(100vh - 200px); }
.chat-messages { flex: 1; overflow-y: auto; padding: 1rem; background: #f8f9fc; }
.msg-bubble { max-width: 75%; margin-bottom: 0.75rem; }
.msg-bubble.customer { align-self: flex-start; }
.msg-bubble.bot      { align-self: flex-end; margin-left: auto; }
.msg-bubble .bubble-inner {
  padding: 0.75rem 1rem; border-radius: 1rem;
  font-size: 0.82rem; line-height: 1.5;
}
.msg-bubble.customer .bubble-inner {
  background: #fff; border: 1px solid #e3e6f0;
  border-radius: 0.25rem 1rem 1rem 1rem;
}
.msg-bubble.bot .bubble-inner {
  background: #4e73df; color: #fff;
  border-radius: 1rem 0.25rem 1rem 1rem;
}
.msg-label { font-size: 0.65rem; font-weight: 700; margin-bottom: 3px; color: #858796; }
.msg-time  { font-size: 0.6rem; color: #b7b9cc; margin-top: 3px; }
.msg-bubble.bot .msg-time { text-align: right; }

/* ── Reply Box ── */
.reply-area { padding: 0.75rem 1rem; background: #fff; border-top: 1px solid #e3e6f0; }
.template-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.75rem; }
.chip-btn {
  font-size: 0.7rem; padding: 3px 10px; border-radius: 20px;
  border: 1px solid #d1d3e2; background: #fff; color: #858796;
  cursor: pointer; transition: all 0.15s;
}
.chip-btn:hover,
.chip-btn.active { border-color: #4e73df; color: #4e73df; background: #eaecf4; }

/* ── AI Thinking Indicator ── */
.ai-thinking      { display: none; padding: 0.5rem 1rem; background: #fff3cd; border-left: 3px solid #f6c23e; font-size: 0.78rem; color: #856404; }
.ai-thinking.show { display: flex; align-items: center; gap: 8px; }
.typing-dots span {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #f6c23e; animation: typing 1.2s infinite; margin: 0 1px;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-5px); }
}

/* ── Settings ── */
.settings-card    { max-width: 700px; }
.form-group label { font-weight: 600; font-size: 0.8rem; color: #3a3b45; }
.api-key-input    { font-family: monospace; font-size: 0.8rem; letter-spacing: 0.05rem; }
.connection-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 20px;
}
.status-ok   { background: #d4edda; color: #155724; }
.status-err  { background: #f8d7da; color: #721c24; }
.status-idle { background: #e2e3e5; color: #383d41; }

/* ── Templates Page ── */
.tmpl-card { cursor: pointer; transition: box-shadow 0.15s, transform 0.1s; }
.tmpl-card:hover { box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1); transform: translateY(-2px); }
.tmpl-category-badge { font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; }

/* ── Stats ── */
.progress-bar-label { font-size: 0.75rem; color: #858796; }

/* ── Loading Spinner ── */
.fetch-loading      { display: none; text-align: center; padding: 2rem; color: #858796; }
.fetch-loading.show { display: block; }

/* ── Empty State ── */
.empty-chat {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; color: #b7b9cc;
}
.empty-chat i { font-size: 3rem; margin-bottom: 1rem; }
.empty-chat p { font-size: 0.85rem; }

/* ── Custom Scrollbars ── */
.complaint-list-panel::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar           { width: 4px; }
.complaint-list-panel::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb     { background: #d1d3e2; border-radius: 2px; }

/* ── Sidebar Fixed + Responsive ── */
#accordionSidebar { position: fixed; top: 0; left: 0; width: 14rem; height: 100vh; z-index: 100; }
#content-wrapper  { margin-left: 14rem; }
@media (max-width: 768px) {
  #accordionSidebar { transform: translateX(-100%); }
  #content-wrapper  { margin-left: 0; }
}

/* ── Utilities ── */
.text-xs          { font-size: 0.7rem; }
.font-weight-bold { font-weight: 700 !important; }
.text-gray-800    { color: #3a3b45; }
.text-gray-300    { color: #dddfeb; }
.no-complaints    { padding: 2rem; text-align: center; color: #b7b9cc; font-size: 0.8rem; }
.groq-powered     { font-size: 0.65rem; color: var(--groq-color); font-weight: 700; }
textarea:focus    { border-color: #bac8ff; box-shadow: 0 0 0 0.2rem rgba(78,115,223,.15); }