/* =====================================================
   ORIBIBLE PANELS - DESIGN SYSTEM UNIFIÉ
   Couleur principale: #3a38b2 (Indigo spirituel)
   Fonds: #f8f8ff (violet doux) & #fffbf0 (jaune doux)
   ===================================================== */

/* === VARIABLES CSS ORIBIBLE === */
:root {
  --ori-primary: #3a38b2;
  --ori-primary-light: #4f4dc7;
  --ori-primary-dark: #2d2b8f;
  --ori-primary-soft: rgba(58, 56, 178, 0.08);
  --ori-bg-purple: #f8f8ff;
  --ori-bg-cream: #fffbf0;
  --ori-bg-white: #ffffff;
  --ori-text-primary: #1a1a2e;
  --ori-text-secondary: #5a5a7a;
  --ori-text-muted: #8a8aa3;
  --ori-border-soft: #e8e8f0;
  --ori-border-light: #f0f0f8;
  --ori-shadow-sm: 0 2px 8px rgba(58, 56, 178, 0.06);
  --ori-shadow-md: 0 4px 20px rgba(58, 56, 178, 0.08);
  --ori-shadow-lg: 0 20px 60px rgba(58, 56, 178, 0.15);
}

/* =====================================================
   OVERLAYS - STYLE UNIFIÉ
   ===================================================== */
.history-panel-overlay,
.fav-panel-overlay,
.marks-panel-overlay,
.compare-panel-overlay,
.ba-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 46, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* =====================================================
   PANELS CONTAINERS - STYLE UNIFIÉ
   ===================================================== */
.history-panel,
.fav-panel,
.marks-panel,
.compare-panel {
  background: var(--ori-bg-white);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--ori-shadow-lg), 0 4px 12px rgba(58, 56, 178, 0.1);
  overflow: hidden;
}

.compare-panel {
  max-width: 700px;
}

/* =====================================================
   HEADERS - STYLE UNIFIÉ ORIBIBLE
   ===================================================== */
.history-panel-header,
.fav-panel-header,
.marks-panel-header,
.compare-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: linear-gradient(135deg, var(--ori-primary) 0%, var(--ori-primary-dark) 100%);
  color: white;
  flex-shrink: 0;
}

.history-header-left,
.fav-header-left,
.marks-header-left,
.compare-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.history-header-icon,
.fav-header-icon,
.marks-header-icon,
.compare-header-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.history-header-title,
.fav-header-title,
.marks-header-title,
.compare-header-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: white;
  letter-spacing: -0.01em;
}

.history-header-subtitle,
.fav-header-subtitle,
.marks-header-subtitle,
.compare-header-subtitle {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

/* =====================================================
   CLOSE BUTTONS - STYLE UNIFIÉ
   ===================================================== */
.history-close-btn,
.fav-close-btn,
.marks-close-btn,
.compare-close-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.history-close-btn:hover,
.fav-close-btn:hover,
.marks-close-btn:hover,
.compare-close-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

/* =====================================================
   CONTENT AREAS - STYLE UNIFIÉ
   ===================================================== */
.history-panel-content,
.fav-panel-content,
.marks-panel-content,
.compare-content {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--ori-bg-purple);
}

/* Scrollbar élégante */
.history-panel-content::-webkit-scrollbar,
.fav-panel-content::-webkit-scrollbar,
.marks-panel-content::-webkit-scrollbar,
.compare-content::-webkit-scrollbar {
  width: 6px;
}

.history-panel-content::-webkit-scrollbar-track,
.fav-panel-content::-webkit-scrollbar-track,
.marks-panel-content::-webkit-scrollbar-track,
.compare-content::-webkit-scrollbar-track {
  background: var(--ori-bg-purple);
}

.history-panel-content::-webkit-scrollbar-thumb,
.fav-panel-content::-webkit-scrollbar-thumb,
.marks-panel-content::-webkit-scrollbar-thumb,
.compare-content::-webkit-scrollbar-thumb {
  background: rgba(58, 56, 178, 0.2);
  border-radius: 4px;
}

.history-panel-content::-webkit-scrollbar-thumb:hover,
.fav-panel-content::-webkit-scrollbar-thumb:hover,
.marks-panel-content::-webkit-scrollbar-thumb:hover,
.compare-content::-webkit-scrollbar-thumb:hover {
  background: rgba(58, 56, 178, 0.35);
}

/* =====================================================
   CONTINUE SECTION (HISTORIQUE)
   ===================================================== */
.history-continue-section {
  padding: 16px 24px;
  background: var(--ori-bg-cream);
  border-bottom: 1px solid var(--ori-border-soft);
}

.history-continue-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--ori-primary) 0%, var(--ori-primary-dark) 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(58, 56, 178, 0.25);
}

.history-continue-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(58, 56, 178, 0.35);
}

.history-continue-ref {
  font-size: 12px;
  color: var(--ori-text-muted);
  margin-top: 8px;
  text-align: center;
}

/* =====================================================
   STATS (HISTORIQUE)
   ===================================================== */
.history-stats {
  display: flex;
  padding: 16px 24px;
  background: var(--ori-bg-white);
  border-bottom: 1px solid var(--ori-border-light);
  gap: 12px;
}

.history-stat {
  flex: 1;
  text-align: center;
  padding: 14px 8px;
  background: var(--ori-bg-purple);
  border-radius: 10px;
}

.history-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ori-primary);
  line-height: 1;
}

.history-stat-label {
  font-size: 10px;
  color: var(--ori-text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =====================================================
   LIST ITEMS - STYLE UNIFIÉ
   ===================================================== */
.history-list,
.fav-list,
.marks-list {
  display: flex;
  flex-direction: column;
}

.history-group,
.fav-group {
  border-bottom: 1px solid var(--ori-border-light);
}

.history-group:last-child,
.fav-group:last-child {
  border-bottom: none;
}

.history-group-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--ori-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 24px 8px;
  background: var(--ori-bg-white);
  position: sticky;
  top: 0;
  z-index: 1;
}

.history-item,
.fav-item,
.marks-item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  background: var(--ori-bg-white);
  transition: all 0.2s ease;
  gap: 14px;
  cursor: pointer;
}

.history-item:hover,
.fav-item:hover,
.marks-item:hover {
  background: var(--ori-primary-soft);
}

.history-item-icon,
.fav-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ori-primary-soft) 0%, rgba(58, 56, 178, 0.12) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ori-primary);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.history-item-content,
.fav-item-content {
  flex: 1;
  min-width: 0;
}

.history-ref,
.fav-ref {
  font-size: 14px;
  font-weight: 600;
  color: var(--ori-text-primary);
  margin: 0;
}

.history-ref button,
.fav-ref button {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  width: 100%;
  transition: color 0.2s ease;
}

.history-ref button:hover,
.fav-ref button:hover {
  color: var(--ori-primary);
}

.history-meta,
.fav-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}

.history-version,
.fav-version,
.history-date,
.fav-date {
  font-size: 11px;
  color: var(--ori-text-muted);
}

/* =====================================================
   ITEM ACTIONS
   ===================================================== */
.history-item-actions,
.fav-item-actions,
.marks-item-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.history-item:hover .history-item-actions,
.fav-item:hover .fav-item-actions,
.marks-item:hover .marks-item-actions {
  opacity: 1;
}

.history-delete,
.fav-delete,
.marks-delete {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--ori-text-muted);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.history-delete:hover,
.fav-delete:hover,
.marks-delete:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* =====================================================
   FOOTERS - STYLE UNIFIÉ
   ===================================================== */
.history-panel-footer,
.fav-panel-footer,
.marks-panel-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  background: var(--ori-bg-white);
  border-top: 1px solid var(--ori-border-soft);
  flex-shrink: 0;
}

.history-footer-actions,
.fav-footer-actions {
  display: flex;
  gap: 8px;
}

/* Action Buttons */
.history-action-btn,
.fav-action-btn,
.marks-action-btn {
  padding: 10px 16px;
  border: 1.5px solid var(--ori-border-soft);
  background: var(--ori-bg-white);
  color: var(--ori-text-secondary);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.history-action-btn:hover,
.fav-action-btn:hover,
.marks-action-btn:hover {
  background: var(--ori-primary);
  border-color: var(--ori-primary);
  color: white;
}

/* Clear Buttons */
.history-clear-btn,
.fav-clear-btn,
.marks-clear-btn {
  padding: 10px 16px;
  border: none;
  background: #fee2e2;
  color: #dc2626;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.history-clear-btn:hover,
.fav-clear-btn:hover,
.marks-clear-btn:hover {
  background: #dc2626;
  color: white;
}

/* =====================================================
   CONFIRM DIALOGS - STYLE UNIFIÉ
   ===================================================== */
.history-confirm-overlay,
.fav-confirm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 46, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: 16px;
  animation: oriPanelFadeIn 0.2s ease;
}

.history-confirm-box,
.fav-confirm-box {
  background: var(--ori-bg-white);
  border-radius: 16px;
  padding: 28px;
  max-width: 340px;
  width: 90%;
  text-align: center;
  box-shadow: var(--ori-shadow-lg);
  animation: oriPanelSlideUp 0.25s ease;
}

@keyframes oriPanelFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes oriPanelSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.history-confirm-icon,
.fav-confirm-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.history-confirm-icon i,
.fav-confirm-icon i {
  font-size: 24px;
  color: #d97706;
}

.history-confirm-title,
.fav-confirm-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ori-text-primary);
  margin: 0 0 8px;
}

.history-confirm-text,
.fav-confirm-text {
  font-size: 14px;
  color: var(--ori-text-secondary);
  margin: 0 0 8px;
  line-height: 1.5;
}

.history-confirm-count,
.fav-confirm-count {
  font-size: 13px;
  color: #ef4444;
  font-weight: 600;
  margin: 0 0 20px;
}

.history-confirm-actions,
.fav-confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.history-confirm-btn,
.fav-confirm-btn {
  padding: 10px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.history-confirm-cancel,
.fav-confirm-cancel {
  background: var(--ori-bg-purple);
  color: var(--ori-text-secondary);
}

.history-confirm-cancel:hover,
.fav-confirm-cancel:hover {
  background: var(--ori-border-soft);
}

.history-confirm-ok,
.fav-confirm-ok {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.history-confirm-ok:hover,
.fav-confirm-ok:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35);
}

/* =====================================================
   SEARCH BARS - STYLE UNIFIÉ
   ===================================================== */
.history-search,
.fav-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: var(--ori-bg-white);
  border-bottom: 1px solid var(--ori-border-light);
}

.history-search i,
.fav-search i {
  color: var(--ori-text-muted);
  font-size: 14px;
}

.history-search input,
.fav-search input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--ori-text-primary);
  outline: none;
}

.history-search input::placeholder,
.fav-search input::placeholder {
  color: var(--ori-text-muted);
}

/* =====================================================
   STREAK INDICATOR (HISTORIQUE)
   ===================================================== */
.history-streak {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--ori-bg-cream) 0%, #fef3c7 100%);
  border-bottom: 1px solid var(--ori-border-soft);
}

.streak-icon {
  font-size: 24px;
}

.streak-info {
  display: flex;
  flex-direction: column;
}

.streak-count {
  font-size: 18px;
  font-weight: 700;
  color: var(--ori-text-primary);
}

.streak-label {
  font-size: 12px;
  color: var(--ori-text-muted);
}

/* =====================================================
   RESPONSIVE - MOBILE
   ===================================================== */
@media (max-width: 640px) {
  .history-panel-overlay,
  .fav-panel-overlay,
  .marks-panel-overlay,
  .compare-panel-overlay {
    padding: 0;
  }
  
  .history-panel,
  .fav-panel,
  .marks-panel,
  .compare-panel {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
  }
  
  .history-panel-header,
  .fav-panel-header,
  .marks-panel-header,
  .compare-panel-header {
    padding: 16px 20px;
  }
  
  .history-header-title,
  .fav-header-title,
  .marks-header-title,
  .compare-header-title {
    font-size: 16px;
  }
  
  .history-item,
  .fav-item,
  .marks-item {
    padding: 12px 20px;
  }
  
  .history-panel-footer,
  .fav-panel-footer,
  .marks-panel-footer {
    padding: 12px 20px;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .history-action-btn,
  .fav-action-btn,
  .marks-action-btn,
  .history-clear-btn,
  .fav-clear-btn,
  .marks-clear-btn {
    font-size: 12px;
    padding: 8px 12px;
  }
}