/* ==========================================================================
   KAVVI MODERN FLASHCARDS — 2026-09-30
   Active-recall Obsidian-Mint engine with high typography hierarchy,
   smooth scrolling, decoupled 2D controls, and RTL perfection.
   ========================================================================== */

/* --- Card Scene & 3D Stage --- */
.kv-app-shell .flashcard-scene,
.flashcard-scene {
  position: relative !important;
  width: 100% !important;
  max-width: 780px !important;
  height: clamp(380px, 50vh, 500px) !important;
  min-height: 360px !important;
  margin: 0 auto !important;
  perspective: 1400px !important;
  -webkit-perspective: 1400px !important;
}

.kv-app-shell .flashcard-scene.expanded-scene,
.flashcard-scene.expanded-scene {
  height: clamp(440px, 58vh, 560px) !important;
  max-width: 840px !important;
}

/* 3D Container */
.kv-app-shell .flashcard-3d,
.flashcard-3d {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
  border-radius: 18px !important;
  cursor: pointer !important;
}

.kv-app-shell .flashcard-3d.is-flipped,
.flashcard-3d.is-flipped {
  transform: rotateY(180deg) !important;
  -webkit-transform: rotateY(180deg) !important;
}

.kv-app-shell .flashcard-3d.no-flip-transition,
.flashcard-3d.no-flip-transition {
  transition: none !important;
}

/* --- Card Faces (Front & Back) --- */
.kv-app-shell .flashcard-face,
.flashcard-face {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  padding: 64px 32px 28px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-origin: center center !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(var(--kv-violet-rgb), 0.28) !important;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(var(--kv-violet-rgb), 0.16), transparent 75%),
    linear-gradient(155deg, rgba(var(--kv-card-rgb), 0.95), rgba(var(--kv-canvas-rgb), 0.98)) !important;
  box-shadow: 0 20px 48px rgba(7, 12, 6, 0.42), inset 0 1px 1px rgba(var(--kv-ink-rgb), 0.1) !important;
  transition: border-color 0.24s ease, box-shadow 0.24s ease !important;
}

.kv-app-shell .flashcard-3d:hover .flashcard-face,
.flashcard-3d:hover .flashcard-face {
  border-color: rgba(var(--kv-violet-rgb), 0.48) !important;
  box-shadow: 0 24px 56px rgba(7, 12, 6, 0.54), 0 0 24px rgba(var(--kv-violet-rgb), 0.18) !important;
}

/* Back Face */
.kv-app-shell .flashcard-face.flashcard-back,
.flashcard-face.flashcard-back {
  transform: rotateY(180deg) translateZ(1px) !important;
  -webkit-transform: rotateY(180deg) translateZ(1px) !important;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(var(--kv-violet-56-rgb), 0.18), transparent 75%),
    linear-gradient(155deg, color-mix(in srgb, var(--kv-card-raised) 92%, black), var(--kv-card)) !important;
  border-color: rgba(var(--kv-violet-56-rgb), 0.35) !important;
}

/* --- Static 2D Action Toolbar (Top-Right / Top-Left) --- */
.kv-app-shell .flashcard-actions,
.flashcard-actions {
  position: absolute !important;
  top: 14px !important;
  inset-inline-end: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 30 !important;
  pointer-events: auto !important;
}

.kv-app-shell .flashcard-actions button,
.flashcard-actions button {
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  border: 1px solid rgba(var(--kv-ink-rgb), 0.12) !important;
  color: var(--kv-text-3) !important;
  background: rgba(var(--kv-card-rgb), 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.kv-app-shell .flashcard-actions button:hover,
.flashcard-actions button:hover {
  color: var(--kv-text) !important;
  background: rgba(var(--kv-violet-rgb), 0.16) !important;
  border-color: rgba(var(--kv-violet-rgb), 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Badges */
.kv-app-shell .card-badge,
.card-badge {
  position: absolute !important;
  top: 16px !important;
  inset-inline-start: 18px !important;
  z-index: 10 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-family: var(--kv-font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.question-badge {
  color: var(--kv-on-violet) !important;
  background: rgba(var(--kv-violet-rgb), 0.14) !important;
  border: 1px solid rgba(var(--kv-violet-rgb), 0.32) !important;
}

.answer-badge {
  color: var(--kv-on-blue) !important;
  background: rgba(var(--kv-violet-56-rgb), 0.16) !important;
  border: 1px solid rgba(var(--kv-violet-56-rgb), 0.35) !important;
}

.badge-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: 0 0 6px currentColor !important;
}

/* --- Card Text Container & Typography Hierarchy --- */
.kv-app-shell .card-text-container,
.card-text-container {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 680px !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 8px 12px 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(var(--kv-violet-rgb), 0.35) transparent !important;
  box-sizing: border-box !important;
}

/* Custom scrollbar for webkit */
.card-text-container::-webkit-scrollbar {
  width: 5px;
}
.card-text-container::-webkit-scrollbar-thumb {
  background: rgba(var(--kv-violet-rgb), 0.3);
  border-radius: 999px;
}
.card-text-container::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--kv-violet-rgb), 0.5);
}

/* Front Face (Question) Typography: Prominent, Centered when short */
.flashcard-front .card-text-container {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.flashcard-front .card-text-container * {
  font-size: clamp(20px, 2.1vw, 26px) !important;
  line-height: 1.48 !important;
  font-weight: 600 !important;
  color: var(--kv-text) !important;
  text-align: center !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* Back Face (Answer) Typography: Clear Study Typography, Start Aligned */
.flashcard-back .card-text-container {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: start !important;
}

.flashcard-back .card-text-container p,
.flashcard-back .card-text-container div,
.flashcard-back .card-text-container span,
.flashcard-back .card-text-container li {
  font-size: clamp(15px, 1.35vw, 17px) !important;
  line-height: 1.72 !important;
  font-weight: 400 !important;
  color: var(--kv-text-2) !important;
  text-align: start !important;
  margin-inline: 0 !important;
  max-width: 100% !important;
}

.flashcard-back .card-text-container strong,
.flashcard-back .card-text-container b {
  font-weight: 700 !important;
  color: var(--kv-text) !important;
}

.flashcard-back .card-text-container em,
.flashcard-back .card-text-container i {
  color: var(--kv-on-violet) !important;
  font-style: italic !important;
}

.flashcard-back .card-text-container h1,
.flashcard-back .card-text-container h2,
.flashcard-back .card-text-container h3,
.flashcard-back .card-text-container h4 {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--kv-text) !important;
  text-align: start !important;
  margin: 10px 0 6px 0 !important;
}

/* Lists styling */
.flashcard-back .card-text-container ul,
.flashcard-back .card-text-container ol {
  display: block !important;
  width: 100% !important;
  margin: 10px 0 14px 0 !important;
  padding-inline-start: 24px !important;
  text-align: start !important;
  box-sizing: border-box !important;
}

.flashcard-back .card-text-container li {
  margin-bottom: 6px !important;
  display: list-item !important;
  text-align: start !important;
}

.flashcard-back .card-text-container ul li {
  list-style-type: disc !important;
}

.flashcard-back .card-text-container ol li {
  list-style-type: decimal !important;
}

/* Code & Pre */
.flashcard-face .card-text-container pre,
.flashcard-face .card-text-container code {
  font-family: var(--kv-font-mono) !important;
  border-radius: 8px !important;
  text-align: start !important;
}

.flashcard-face .card-text-container pre {
  width: 100% !important;
  padding: 12px 16px !important;
  margin: 12px 0 !important;
  background: rgba(7, 12, 6, 0.6) !important;
  border: 1px solid rgba(var(--kv-ink-rgb), 0.12) !important;
  overflow-x: auto !important;
}

.flashcard-face .card-text-container pre code {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--kv-violet-56) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.flashcard-face .card-text-container :not(pre) > code {
  font-size: 13.5px !important;
  padding: 2px 7px !important;
  background: rgba(var(--kv-violet-rgb), 0.12) !important;
  border: 1px solid rgba(var(--kv-violet-rgb), 0.25) !important;
  color: var(--kv-on-violet) !important;
}

/* Flip Prompt at Bottom */
.kv-app-shell .card-flip-prompt,
.card-flip-prompt {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  min-height: 28px !important;
  margin-top: 8px !important;
  padding-top: 6px !important;
  color: var(--kv-text-muted) !important;
  font-family: var(--kv-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  user-select: none !important;
  border-top: 1px solid rgba(var(--kv-ink-rgb), 0.06) !important;
}

/* --- Review Navigation Controls (Zero Layout Shift) --- */
.kv-app-shell .premium-card-nav,
.premium-card-nav {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 48px !important;
  align-items: center !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  gap: 12px !important;
  width: min(780px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.kv-app-shell .nav-arrow-btn,
.nav-arrow-btn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--kv-line-2) !important;
  background: rgba(var(--kv-ink-rgb), 0.035) !important;
  color: var(--kv-text-2) !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.kv-app-shell .nav-arrow-btn:hover:not(:disabled),
.nav-arrow-btn:hover:not(:disabled) {
  border-color: rgba(var(--kv-violet-rgb), 0.35) !important;
  background: rgba(var(--kv-violet-rgb), 0.12) !important;
  color: var(--kv-text) !important;
}

.kv-app-shell .nav-arrow-btn:disabled,
.nav-arrow-btn:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

/* Flip Hint Pill */
.kv-app-shell .flip-hint-pill,
.flip-hint-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(var(--kv-violet-rgb), 0.3) !important;
  background: linear-gradient(135deg, rgba(var(--kv-violet-rgb), 0.12), rgba(var(--kv-card-rgb), 0.8)) !important;
  color: var(--kv-text) !important;
  font-family: var(--kv-font-head) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.kv-app-shell .flip-hint-pill:hover,
.flip-hint-pill:hover {
  border-color: rgba(var(--kv-violet-rgb), 0.5) !important;
  background: linear-gradient(135deg, rgba(var(--kv-violet-rgb), 0.22), rgba(var(--kv-card-rgb), 0.95)) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(var(--kv-violet-rgb), 0.18) !important;
}

/* 4-Tier SM-2 Rating Bar */
.kv-app-shell .review-buttons.four-tier,
.review-buttons.four-tier {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  align-items: center !important;
}

.kv-app-shell .review-buttons .rate-btn,
.review-buttons .rate-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  border-radius: 13px !important;
  border: 1px solid var(--kv-line-2) !important;
  background: rgba(var(--kv-ink-rgb), 0.035) !important;
  color: var(--kv-text-2) !important;
  font-family: var(--kv-font-head) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
}

.kv-app-shell .rate-btn .hotkey,
.rate-btn .hotkey {
  display: inline-grid !important;
  place-items: center !important;
  width: 19px !important;
  height: 19px !important;
  border-radius: 6px !important;
  font-family: var(--kv-font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  background: rgba(var(--kv-ink-rgb), 0.08) !important;
  color: var(--kv-text-3) !important;
}

/* 1: Again (Red) */
.rate-again:hover {
  border-color: rgba(var(--kv-danger-rgb), 0.6) !important;
  background: rgba(var(--kv-danger-rgb), 0.14) !important;
  color: var(--kv-danger) !important;
}
.rate-again:hover .hotkey {
  background: rgba(var(--kv-danger-rgb), 0.25) !important;
  color: var(--kv-danger) !important;
}

/* 2: Hard (Amber) */
.rate-hard:hover {
  border-color: rgba(var(--kv-warning-rgb), 0.6) !important;
  background: rgba(var(--kv-warning-rgb), 0.14) !important;
  color: var(--kv-warning) !important;
}
.rate-hard:hover .hotkey {
  background: rgba(var(--kv-warning-rgb), 0.25) !important;
  color: var(--kv-warning) !important;
}

/* 3: Good (Violet / Mint Primary) */
.rate-good:hover {
  border-color: rgba(var(--kv-violet-rgb), 0.6) !important;
  background: rgba(var(--kv-violet-rgb), 0.18) !important;
  color: var(--kv-on-violet) !important;
}
.rate-good:hover .hotkey {
  background: rgba(var(--kv-violet-rgb), 0.3) !important;
  color: var(--kv-on-violet) !important;
}

/* 4: Easy (Emerald) */
.rate-easy:hover {
  border-color: rgba(var(--kv-success-rgb), 0.6) !important;
  background: rgba(var(--kv-success-rgb), 0.14) !important;
  color: var(--kv-success) !important;
}
.rate-easy:hover .hotkey {
  background: rgba(var(--kv-success-rgb), 0.25) !important;
  color: var(--kv-success) !important;
}

/* --- RTL (Arabic) Refinements --- */
[dir="rtl"] .flashcard-3d.is-flipped {
  transform: rotateY(-180deg) !important;
  -webkit-transform: rotateY(-180deg) !important;
}

[dir="rtl"] .flashcard-face.flashcard-back {
  transform: rotateY(-180deg) translateZ(1px) !important;
  -webkit-transform: rotateY(-180deg) translateZ(1px) !important;
}

[dir="rtl"] .flashcard-back .card-text-container {
  text-align: right !important;
}

[dir="rtl"] .flashcard-back .card-text-container ul,
[dir="rtl"] .flashcard-back .card-text-container ol {
  text-align: right !important;
  padding-inline-start: 24px !important;
}

[dir="rtl"] .flashcard-back .card-text-container li {
  text-align: right !important;
}

/* --- Inline Chat Artifact Deck (.artifact-deck) --- */
.artifact-deck {
  width: 100% !important;
  max-width: 480px !important;
  margin: 12px 0 !important;
}

.artifact-deck .flashcard-scene {
  height: 280px !important;
  min-height: 260px !important;
  max-width: 100% !important;
}

.artifact-deck .flashcard-face {
  padding: 48px 20px 20px !important;
}

.artifact-deck .card-text-container {
  padding: 4px 6px !important;
}

.artifact-deck .flashcard-front .card-text-container * {
  font-size: 18px !important;
  line-height: 1.5 !important;
}

.artifact-deck .flashcard-back .card-text-container * {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
}

.artifact-deck-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 10px !important;
  padding: 4px 8px !important;
}

.artifact-deck-nav button {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--kv-line-2) !important;
  background: rgba(var(--kv-ink-rgb), 0.04) !important;
  color: var(--kv-text-2) !important;
  cursor: pointer !important;
}

.artifact-deck-nav button:hover {
  background: rgba(var(--kv-violet-rgb), 0.12) !important;
  border-color: rgba(var(--kv-violet-rgb), 0.3) !important;
  color: var(--kv-text) !important;
}

.artifact-deck-nav span {
  font-family: var(--kv-font-mono) !important;
  font-size: 12px !important;
  color: var(--kv-text-muted) !important;
}

/* --- Expanded Study Mode Modal --- */
.flashcard-expanded-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(7, 12, 6, 0.85) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  animation: kv-fade-in 0.25s ease-out !important;
}

.flashcard-expanded-modal {
  display: flex !important;
  flex-direction: column !important;
  width: min(920px, 94vw) !important;
  height: min(720px, 90vh) !important;
  max-height: 800px !important;
  padding: 24px 28px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(var(--kv-violet-rgb), 0.3) !important;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--kv-violet-rgb), 0.15), transparent 70%),
    linear-gradient(165deg, rgba(var(--kv-card-rgb), 0.98), rgba(var(--kv-canvas-rgb), 0.99)) !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(var(--kv-ink-rgb), 0.1) !important;
  box-sizing: border-box !important;
}

.expanded-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding-bottom: 16px !important;
}

.expanded-modal-header h3 {
  margin: 4px 0 0 !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--kv-text) !important;
}

.expanded-progress-line {
  width: 100% !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(var(--kv-ink-rgb), 0.08) !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}

.expanded-progress-fill {
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--kv-violet), var(--kv-blue)) !important;
  transition: width 0.3s ease !important;
}

.expanded-card-wrapper {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}

.expanded-card-wrapper .flashcard-scene {
  height: 100% !important;
  max-width: 100% !important;
}

.expanded-controls-wrapper {
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  padding-top: 10px !important;
}

@keyframes kv-fade-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}