/* Osama AI Web Portal Stylesheet */

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(178, 20, 34, 0.25);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(230, 81, 0, 0.45);
}

/* Brand Gradients (#b21422, #e65100, #f9a825) */
.brand-gradient {
  background: linear-gradient(135deg, #b21422 0%, #e65100 52%, #f9a825 100%) !important;
}
.brand-gradient-hover:hover {
  background: linear-gradient(135deg, #cf1b2c 0%, #ff5e0e 52%, #ffb833 100%) !important;
}
.brand-gradient-text {
  background: linear-gradient(135deg, #b21422 0%, #e65100 50%, #f9a825 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.brand-gradient-subtle {
  background: linear-gradient(180deg, rgba(178, 20, 34, 0.08) 0%, rgba(230, 81, 0, 0.03) 100%);
}

/* Flame Pulse Animation */
@keyframes flamePulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(1.08); }
}
.animate-flame-pulse {
  animation: flamePulse 6s ease-in-out infinite;
}

/* Live Typing / Streaming Cursor */
.typing-cursor::after {
  content: '▋';
  display: inline-block;
  vertical-align: baseline;
  color: #e65100;
  animation: cursorBlink 0.85s infinite;
  margin-right: 3px;
  font-weight: bold;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Modern Books Showcase Styles */
.showcase-tab {
  background-color: rgba(20, 24, 34, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}
.showcase-tab:hover {
  border-color: rgba(230, 81, 0, 0.5);
  color: #ffffff;
}
.showcase-tab.active-tab {
  background: linear-gradient(135deg, #b21422 0%, #e65100 52%, #f9a825 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(230, 81, 0, 0.35);
}

.showcase-book-card {
  position: relative;
  border-radius: 18px;
  background: rgba(18, 22, 32, 0.88);
  border: 1.5px solid rgba(255, 255, 255, 0.07);
  transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  cursor: pointer;
}
.showcase-book-card:hover {
  transform: translateY(-6px);
  border-color: rgba(230, 81, 0, 0.65);
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.6), 0 0 20px -4px rgba(230, 81, 0, 0.3);
}
.showcase-book-card.selected-book {
  border: 2px solid #f9a825 !important;
  box-shadow: 0 0 0 3px rgba(230, 81, 0, 0.25), 0 14px 30px -6px rgba(178, 20, 34, 0.45) !important;
  transform: translateY(-4px);
}
.showcase-book-cover-wrap {
  aspect-ratio: 3 / 4.2;
  width: 100%;
  overflow: hidden;
  background: #0d1017;
  position: relative;
}
.showcase-book-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.showcase-book-card:hover .showcase-book-cover-wrap img {
  transform: scale(1.05);
}

/* =========================================================================
   Clean Light Theme (html:not(.dark)) — الوضع النهاري الأنيق المتكامل
   ========================================================================= */
html:not(.dark),
html:not(.dark) body.portal-body {
  background-color: #f4f6f9 !important;
  color: #0f172a !important;
}

/* Sidebar in Light Mode */
html:not(.dark) #sidebar.portal-sidebar {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: -4px 0 24px rgba(15, 23, 42, 0.06) !important;
}

html:not(.dark) .portal-sidebar-header,
html:not(.dark) .portal-sidebar-footer {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .portal-newchat-inner {
  background-color: #ffffff !important;
}
html:not(.dark) .portal-newchat-inner:hover {
  background-color: transparent !important;
}
html:not(.dark) .portal-newchat-inner span {
  color: #0f172a !important;
}
html:not(.dark) .group:hover .portal-newchat-inner span {
  color: #ffffff !important;
}

html:not(.dark) .session-history-item {
  color: #334155 !important;
}
html:not(.dark) .session-history-item:hover,
html:not(.dark) .session-history-item.active-session {
  background-color: #fff7ed !important;
  color: #b21422 !important;
}

html:not(.dark) .portal-quota-card {
  background: linear-gradient(135deg, rgba(178, 20, 34, 0.06), rgba(230, 81, 0, 0.06), rgba(249, 168, 37, 0.08)) !important;
  border-color: rgba(230, 81, 0, 0.28) !important;
}

/* Main Area & Header in Light Mode */
html:not(.dark) main.portal-main {
  background-color: #f4f6f9 !important;
}

html:not(.dark) header.portal-header {
  background-color: rgba(255, 255, 255, 0.94) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04) !important;
}

html:not(.dark) .portal-badge-pill {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html:not(.dark) .portal-icon-btn {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}
html:not(.dark) .portal-icon-btn:hover {
  background-color: #fff7ed !important;
  border-color: #e65100 !important;
  color: #b21422 !important;
}

/* Circular Assistant Avatar Styling (No Square Corners) */
.portal-logo-box {
  border-radius: 50% !important;
  overflow: hidden;
}
.portal-logo-box img {
  border-radius: 50% !important;
  object-fit: cover;
}

html:not(.dark) .portal-logo-box {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
  border-color: rgba(178, 20, 34, 0.45) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1) !important;
  border-radius: 50% !important;
}

/* Books Showcase in Light Mode */
html:not(.dark) .showcase-tab {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
html:not(.dark) .showcase-tab:hover {
  border-color: #e65100 !important;
  color: #b21422 !important;
}
html:not(.dark) .showcase-tab.active-tab {
  color: #ffffff !important;
}

html:not(.dark) .showcase-book-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
html:not(.dark) .showcase-book-card:hover {
  border-color: #e65100 !important;
  box-shadow: 0 14px 28px -6px rgba(15, 23, 42, 0.14), 0 0 18px -4px rgba(230, 81, 0, 0.22);
}
html:not(.dark) .showcase-book-cover-wrap {
  background: #f1f5f9 !important;
}

/* Input Footer & Context Pill in Light Mode */
html:not(.dark) #portalInputFooter.portal-input-footer {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) #inputBoxContainer.portal-input-box {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06) !important;
}

html:not(.dark) #selectedBookContextPill {
  background: linear-gradient(90deg, rgba(178, 20, 34, 0.08), rgba(230, 81, 0, 0.08), rgba(249, 168, 37, 0.1)) !important;
  border-color: rgba(230, 81, 0, 0.4) !important;
}
html:not(.dark) #contextPillTitle {
  color: #0f172a !important;
}
html:not(.dark) #contextPillSeries {
  color: #b21422 !important;
}

html:not(.dark) #promptInput {
  color: #0f172a !important;
}
html:not(.dark) #promptInput::placeholder {
  color: #64748b !important;
}

html:not(.dark) .portal-tool-btn {
  color: #475569 !important;
}
html:not(.dark) .portal-tool-btn:hover {
  background-color: #f1f5f9 !important;
  color: #b21422 !important;
}

/* Chat Messages in Light Mode */
html:not(.dark) .message-content {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05) !important;
}

html:not(.dark) .user-message-bubble {
  background-color: #fff7ed !important;
  border-color: #fed7aa !important;
  color: #0f172a !important;
}

html:not(.dark) .sources-citation-box {
  background-color: #f8fafc !important;
  border-color: rgba(230, 81, 0, 0.35) !important;
  color: #334155 !important;
}

/* Text Contrast Overrides in Light Mode (preserving fiery gradient elements) */
html:not(.dark) .text-white:not(.brand-gradient *):not(.brand-gradient):not(.active-tab):not(.active-tab *):not(#sendBtn):not(#sendBtn *) {
  color: #0f172a !important;
}

html:not(.dark) .text-slate-100,
html:not(.dark) .text-slate-200,
html:not(.dark) .text-slate-300 {
  color: #334155 !important;
}

html:not(.dark) .text-slate-400,
html:not(.dark) .text-slate-500 {
  color: #64748b !important;
}

html:not(.dark) #toastBox {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #e65100 !important;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12) !important;
}

html:not(.dark) .portal-modal-card {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}