/* Prachum AI - Professional UI/UX System (Inspired by ui-ux-pro-max) */

/* 1. Global & Ambient Lights */
:root {
  --font-sans: 'Prompt', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Fira Code', monospace;
}

body {
  font-family: var(--font-sans);
  background-color: #070b14;
  color: #f1f5f9;
  position: relative;
  overflow-x: hidden;
}

/* Ambient glow orbs in background for modern luxury dark theme */
.ambient-glow-1 {
  position: fixed;
  top: -100px;
  left: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0) 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.ambient-glow-2 {
  position: fixed;
  top: 30%;
  right: 5%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.06) 0%, rgba(20, 184, 166, 0) 70%);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

.ambient-glow-3 {
  position: fixed;
  bottom: -150px;
  left: 30%;
  width: 700px;
  height: 500px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.04) 0%, rgba(99, 102, 241, 0) 70%);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

/* 2. Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.2);
  border-radius: 9999px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.4);
}

/* 3. Glassmorphism Card System */
.glass-panel {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(51, 65, 85, 0.5);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

.glass-card {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(51, 65, 85, 0.4);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  border-color: rgba(100, 116, 139, 0.6);
  background: rgba(30, 41, 59, 0.5);
}

/* 4. Pulsing Recording Indicator */
@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.recording-pulse {
  animation: pulse-ring 1.8s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* 5. Audio Wave Sound Indicator */
@keyframes soundwave {
  0%, 100% { height: 4px; }
  50% { height: 16px; }
}

.wave-bar {
  width: 3px;
  background: #10b981;
  border-radius: 9999px;
  animation: soundwave 1.2s ease-in-out infinite;
}

.wave-bar:nth-child(2) { animation-delay: 0.2s; }
.wave-bar:nth-child(3) { animation-delay: 0.4s; }
.wave-bar:nth-child(4) { animation-delay: 0.1s; }

/* 6. Live Speech Interim Text */
.interim-text {
  color: #a7f3d0;
  font-style: italic;
  position: relative;
}

.interim-text::after {
  content: ' ●';
  font-size: 8px;
  color: #10b981;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* 7. Action Item Completed State */
.task-checkbox:checked + div label {
  text-decoration: line-through;
  color: #64748b;
}

.task-checkbox:checked + div {
  opacity: 0.65;
}

/* 8. Accessible Focus Indicators */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #10b981 !important;
  outline-offset: 2px !important;
}

/* 9. Printing Styles */
@media print {
  body {
    background: white !important;
    color: black !important;
  }
  header, #statusBar, #transcriptBox, #manualInput, #manualAddBtn, #chatQuestionInput, #sendChatBtn, #exportBtn, #recordBtn, #themeToggleBtn, .ambient-glow-1, .ambient-glow-2, .ambient-glow-3 {
    display: none !important;
  }
  #summaryContentArea {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ==========================================================================
   10. HIGH-FIDELITY CLAYMORPHISM 3D DESIGN SYSTEM (.theme-clay)
   Simulation of Tangible Physical UI, 4-Layer Shadows & Organic Motion
   ========================================================================== */

:root {
  --font-sans: 'Prompt', 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Prompt', 'Inter', sans-serif;
  --font-mono: 'Fira Code', monospace;
}

html.theme-clay {
  /* Claymorphism Palette Tokens */
  --clay-bg: #F4F1FA;
  --clay-surface: #FFFFFF;
  --clay-surface-subtle: #FAF8FD;
  --clay-pressed-bg: #ECE7F6;
  --clay-text-primary: #332F3A;
  --clay-text-secondary: #635F69;
  --clay-accent-violet: #7C3AED;
  --clay-accent-violet-light: #A78BFA;
  --clay-accent-pink: #DB2777;
  --clay-accent-sky: #0EA5E9;
  --clay-accent-green: #10B981;
  --clay-accent-amber: #F59E0B;
  --clay-border: #E8E2F2;

  --font-sans: 'DM Sans', 'Prompt', 'Inter', system-ui, sans-serif;
  --font-heading: 'Nunito', 'Prompt', system-ui, sans-serif;
}

/* 3D Floating Blobs Zero-Gravity Animation */
@keyframes clayFloat1 {
  0% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
  50% { transform: translate(30px, 20px) rotate(8deg) scale(1.08); }
  100% { transform: translate(-20px, 40px) rotate(-6deg) scale(0.95); }
}

@keyframes clayFloat2 {
  0% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
  50% { transform: translate(-35px, -25px) rotate(-10deg) scale(1.05); }
  100% { transform: translate(25px, -15px) rotate(8deg) scale(0.96); }
}

@keyframes clayFloat3 {
  0% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
  50% { transform: translate(40px, -30px) rotate(12deg) scale(1.1); }
  100% { transform: translate(-30px, 20px) rotate(-8deg) scale(0.92); }
}

/* Base Body in Clay Mode */
html.theme-clay body {
  background-color: var(--clay-bg) !important;
  color: var(--clay-text-primary) !important;
  font-family: var(--font-sans) !important;
}

html.theme-clay ::selection {
  background-color: #DDD6FE !important;
  color: #5B21B6 !important;
}

/* Soft Pastel 3D Clay Floating Blobs */
html.theme-clay .ambient-glow-1 {
  background: radial-gradient(circle, rgba(167, 139, 250, 0.45) 0%, rgba(196, 181, 253, 0.15) 55%, transparent 75%) !important;
  filter: blur(55px) !important;
  opacity: 0.85 !important;
  animation: clayFloat1 16s ease-in-out infinite alternate !important;
}

html.theme-clay .ambient-glow-2 {
  background: radial-gradient(circle, rgba(244, 114, 182, 0.4) 0%, rgba(251, 207, 232, 0.12) 55%, transparent 75%) !important;
  filter: blur(65px) !important;
  opacity: 0.8 !important;
  animation: clayFloat2 20s ease-in-out infinite alternate !important;
}

html.theme-clay .ambient-glow-3 {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.4) 0%, rgba(186, 230, 253, 0.1) 55%, transparent 75%) !important;
  filter: blur(70px) !important;
  opacity: 0.8 !important;
  animation: clayFloat3 22s ease-in-out infinite alternate !important;
}

/* Custom Scrollbars in Clay Mode */
html.theme-clay ::-webkit-scrollbar-thumb {
  background: rgba(160, 150, 180, 0.35) !important;
}
html.theme-clay ::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 58, 237, 0.4) !important;
}

/* Header in Clay Mode */
html.theme-clay header {
  background: rgba(244, 241, 250, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 2px solid #FFFFFF !important;
  box-shadow: 0 10px 28px rgba(160, 150, 180, 0.14), 0 2px 6px rgba(160, 150, 180, 0.08) !important;
}

html.theme-clay header .w-10.h-10 {
  background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%) !important;
  border-radius: 18px !important;
  box-shadow: 6px 6px 14px rgba(124, 58, 237, 0.35), -4px -4px 10px #FFFFFF, inset 2px 2px 4px rgba(255, 255, 255, 0.5) !important;
  border: none !important;
}

html.theme-clay header .w-10.h-10 i {
  color: #FFFFFF !important;
}

html.theme-clay header span.text-white {
  color: #332F3A !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

html.theme-clay header p.text-slate-400 {
  color: #635F69 !important;
}

html.theme-clay header span.bg-emerald-500\/10 {
  background: #EDE9FE !important;
  color: #7C3AED !important;
  border: 1.5px solid #DDD6FE !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  border-radius: 9999px !important;
  box-shadow: 2px 2px 6px rgba(160, 150, 180, 0.15), -1px -1px 3px #FFFFFF !important;
}

/* Header Controls in Clay Mode */
html.theme-clay .flex:has(> #audioSourceSelect) {
  background: #ECE7F6 !important;
  border: 1.5px solid #DDD6FE !important;
  border-radius: 18px !important;
  box-shadow: inset 3px 3px 6px #DDD5EB, inset -3px -3px 6px #FFFFFF !important;
}

html.theme-clay #audioSourceSelect {
  color: #332F3A !important;
  font-weight: 600 !important;
}

html.theme-clay #audioSourceSelect option {
  background: #FFFFFF !important;
  color: #332F3A !important;
}

html.theme-clay .flex:has(> #langTh) {
  background: #ECE7F6 !important;
  border: 1.5px solid #DDD6FE !important;
  border-radius: 18px !important;
  box-shadow: inset 3px 3px 6px #DDD5EB, inset -3px -3px 6px #FFFFFF !important;
}

html.theme-clay #langTh {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
}

html.theme-clay #langTh.bg-emerald-500,
html.theme-clay #langEn.bg-emerald-500 {
  background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 4px 4px 10px rgba(124, 58, 237, 0.3), inset 2px 2px 4px rgba(255, 255, 255, 0.4) !important;
}

html.theme-clay #langEn {
  color: #635F69 !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}

/* Meeting Timer Container & Text in Clay Mode */
html.theme-clay #timerContainer,
html.theme-clay div:has(> #meetingTimer),
html.theme-clay .flex:has(> #meetingTimer),
html.theme-clay .md\:flex:has(> #meetingTimer) {
  background: #FFFFFF !important;
  border: 1.5px solid #FFFFFF !important;
  border-radius: 18px !important;
  box-shadow: 6px 6px 16px rgba(160, 150, 180, 0.18),
              -4px -4px 10px #FFFFFF,
              inset 2px 2px 4px rgba(255, 255, 255, 0.95),
              inset -2px -2px 4px rgba(160, 150, 180, 0.05) !important;
}

html.theme-clay #timerContainer i,
html.theme-clay #timerIcon,
html.theme-clay div:has(> #meetingTimer) i {
  color: #7C3AED !important;
}

html.theme-clay #meetingTimer {
  color: #5B21B6 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
}

/* Primary Record CTA in Clay Mode */
html.theme-clay #recordBtn {
  background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%) !important;
  color: #FFFFFF !important;
  border: 2px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 20px !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 10px 10px 24px rgba(124, 58, 237, 0.35),
              -6px -6px 14px rgba(255, 255, 255, 0.9),
              inset 3px 3px 6px rgba(255, 255, 255, 0.5),
              inset -3px -3px 6px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-clay #recordBtn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 12px 14px 28px rgba(124, 58, 237, 0.42),
              -8px -8px 18px #FFFFFF,
              inset 3px 3px 6px rgba(255, 255, 255, 0.5) !important;
}

html.theme-clay #recordBtn:active {
  transform: scale(0.94) translateY(1px) !important;
  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.25),
              inset -4px -4px 8px rgba(255, 255, 255, 0.3) !important;
}

html.theme-clay #recordBtn.bg-rose-500,
html.theme-clay #recordBtn.bg-rose-600 {
  background: linear-gradient(135deg, #FB7185 0%, #E11D48 100%) !important;
  box-shadow: 10px 10px 24px rgba(225, 29, 72, 0.35),
              -6px -6px 14px rgba(255, 255, 255, 0.9),
              inset 3px 3px 6px rgba(255, 255, 255, 0.5) !important;
}

/* End Meeting Button */
html.theme-clay #endMeetingBtn {
  background: linear-gradient(135deg, #FDA4AF 0%, #F43F5E 100%) !important;
  color: #FFFFFF !important;
  border: 2px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 20px !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  box-shadow: 8px 8px 20px rgba(244, 63, 94, 0.3),
              -5px -5px 12px #FFFFFF,
              inset 2px 2px 4px rgba(255, 255, 255, 0.5) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-clay #endMeetingBtn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 10px 12px 24px rgba(244, 63, 94, 0.38) !important;
}

html.theme-clay #endMeetingBtn:active {
  transform: scale(0.94) translateY(1px) !important;
  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.25) !important;
}

/* Secondary Buttons: Download Audio, Export, Theme Toggle */
html.theme-clay #downloadAudioBtn,
html.theme-clay #exportBtn,
html.theme-clay #themeToggleBtn {
  background: #FFFFFF !important;
  color: #332F3A !important;
  border: 1.5px solid #FFFFFF !important;
  border-radius: 18px !important;
  box-shadow: 8px 8px 18px rgba(160, 150, 180, 0.2),
              -6px -6px 14px #FFFFFF,
              inset 2px 2px 4px rgba(255, 255, 255, 0.95),
              inset -2px -2px 4px rgba(160, 150, 180, 0.08) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-clay #downloadAudioBtn:hover,
html.theme-clay #exportBtn:hover,
html.theme-clay #themeToggleBtn:hover {
  transform: translateY(-2px) !important;
  color: #7C3AED !important;
  box-shadow: 10px 10px 22px rgba(160, 150, 180, 0.26), -8px -8px 16px #FFFFFF !important;
}

html.theme-clay #downloadAudioBtn:active,
html.theme-clay #exportBtn:active,
html.theme-clay #themeToggleBtn:active {
  transform: scale(0.94) translateY(1px) !important;
  box-shadow: inset 3px 3px 6px #DDD5EB, inset -3px -3px 6px #FFFFFF !important;
}

html.theme-clay #themeToggleBtn {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  color: #5B21B6 !important;
  background: #EDE9FE !important;
  border: 1.5px solid #DDD6FE !important;
}

html.theme-clay #themeToggleBtn i {
  color: #7C3AED !important;
}

/* Zoom Banner in Clay Mode */
html.theme-clay #zoomBanner {
  background: linear-gradient(90deg, #EDE9FE 0%, #F5F3FF 50%, #EDE9FE 100%) !important;
  border-bottom: 1.5px solid #DDD6FE !important;
  color: #5B21B6 !important;
}

html.theme-clay #zoomBanner .w-5.h-5 {
  background: #DDD6FE !important;
  border: 1px solid #C4B5FD !important;
}

html.theme-clay #zoomBanner i {
  color: #7C3AED !important;
}

html.theme-clay #dismissBannerBtn {
  background: #DDD6FE !important;
  color: #5B21B6 !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}

/* Live Status Bar in Clay Mode */
html.theme-clay #statusBar {
  background: rgba(244, 241, 250, 0.75) !important;
  border-bottom: 1.5px solid #E8E2F2 !important;
  backdrop-filter: blur(16px) !important;
}

html.theme-clay #micStatus {
  color: #332F3A !important;
  font-weight: 700 !important;
}

html.theme-clay #statusBar .text-slate-400 {
  color: #635F69 !important;
}

html.theme-clay #statusBar .text-slate-700 {
  color: #DDD6FE !important;
}

html.theme-clay #statusBar strong {
  color: #7C3AED !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
}

html.theme-clay #audioLevelBar {
  background: linear-gradient(90deg, #7C3AED 0%, #DB2777 50%, #0EA5E9 100%) !important;
}

html.theme-clay .w-28.h-2:has(> #audioLevelBar) {
  background: #ECE7F6 !important;
  border: 1px solid #DDD6FE !important;
  box-shadow: inset 2px 2px 4px #D6CEE5, inset -2px -2px 4px #FFFFFF !important;
}

html.theme-clay #autoSummarizeToggle {
  accent-color: #7C3AED !important;
}

html.theme-clay #autoSummarizeInterval {
  background: #FFFFFF !important;
  color: #332F3A !important;
  border: 1.5px solid #DDD6FE !important;
  box-shadow: 4px 4px 10px rgba(160, 150, 180, 0.15), -2px -2px 6px #FFFFFF !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
}

/* Panels & Columns in Clay Mode */
html.theme-clay .glass-panel {
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 28px !important;
  box-shadow: 16px 16px 36px rgba(160, 150, 180, 0.22),
              -12px -12px 28px #FFFFFF,
              inset 4px 4px 8px rgba(124, 58, 237, 0.02),
              inset -4px -4px 8px #FFFFFF !important;
}

html.theme-clay .glass-panel > div:first-child {
  background: #FAF8FD !important;
  border-bottom: 1.5px solid #EDE8F5 !important;
}

html.theme-clay .glass-panel h2 {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  color: #332F3A !important;
}

html.theme-clay #transcriptCounter {
  background: #EDE9FE !important;
  color: #7C3AED !important;
  border: 1.5px solid #DDD6FE !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  box-shadow: 2px 2px 6px rgba(160, 150, 180, 0.12) !important;
}

html.theme-clay #clearTranscriptBtn,
html.theme-clay #copyTranscriptBtn {
  background: #F4F1FA !important;
  color: #635F69 !important;
  border: 1px solid #E5DFEE !important;
  border-radius: 14px !important;
  box-shadow: 3px 3px 8px rgba(160, 150, 180, 0.15), -2px -2px 6px #FFFFFF !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-clay #clearTranscriptBtn:hover {
  color: #E11D48 !important;
  transform: translateY(-1px) !important;
  box-shadow: 4px 4px 10px rgba(225, 29, 72, 0.2) !important;
}

html.theme-clay #copyTranscriptBtn:hover {
  color: #7C3AED !important;
  transform: translateY(-1px) !important;
  box-shadow: 4px 4px 10px rgba(124, 58, 237, 0.2) !important;
}

/* Transcript Stream in Clay Mode */
html.theme-clay #emptyTranscriptPlaceholder .w-14.h-14 {
  background: #EDE9FE !important;
  border: 2px solid #DDD6FE !important;
  box-shadow: 8px 8px 20px rgba(124, 58, 237, 0.15), -4px -4px 12px #FFFFFF !important;
  border-radius: 22px !important;
}

html.theme-clay #emptyTranscriptPlaceholder i {
  color: #7C3AED !important;
}

html.theme-clay #emptyTranscriptPlaceholder p.text-slate-300 {
  color: #332F3A !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
}

html.theme-clay #emptyTranscriptPlaceholder p.text-slate-400 {
  color: #635F69 !important;
}

html.theme-clay #transcriptBox > div:not(#emptyTranscriptPlaceholder) {
  background: #FAF8FD !important;
  border: 1.5px solid #FFFFFF !important;
  border-radius: 22px !important;
  box-shadow: 6px 6px 16px rgba(160, 150, 180, 0.16),
              -4px -4px 12px #FFFFFF !important;
  color: #332F3A !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-clay #transcriptBox > div:not(#emptyTranscriptPlaceholder):hover {
  transform: translateY(-2px) !important;
  box-shadow: 8px 8px 22px rgba(160, 150, 180, 0.22), -6px -6px 16px #FFFFFF !important;
}

html.theme-clay #transcriptBox span.text-slate-100 {
  color: #332F3A !important;
  font-weight: 500 !important;
}

html.theme-clay #transcriptBox span.font-mono {
  background: #EDE8F5 !important;
  color: #7C3AED !important;
  border: 1px solid #DDD6FE !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}

html.theme-clay #transcriptBox span.bg-slate-800,
html.theme-clay #transcriptBox span.bg-slate-800\/80 {
  background: #EDE8F5 !important;
  color: #635F69 !important;
  border: 1px solid #DDD6FE !important;
}

html.theme-clay #interimLine {
  background: #F5F3FF !important;
  border: 2px solid #C4B5FD !important;
  border-radius: 22px !important;
  box-shadow: 8px 8px 22px rgba(124, 58, 237, 0.16), -4px -4px 12px #FFFFFF !important;
}

html.theme-clay .interim-text {
  color: #6D28D9 !important;
  font-weight: 600 !important;
}

html.theme-clay .wave-bar {
  background: #7C3AED !important;
}

/* Inputs & Concave Clay Surfaces */
html.theme-clay .border-t:has(> #manualInput) {
  background: #FAF8FD !important;
  border-top: 1.5px solid #EDE8F5 !important;
}

html.theme-clay #manualInput,
html.theme-clay #chatQuestionInput,
html.theme-clay #meetingTitleInput {
  background: #ECE7F6 !important;
  color: #332F3A !important;
  border: 1.5px solid #DDD6FE !important;
  border-radius: 18px !important;
  box-shadow: inset 4px 4px 8px #D9D2E8, inset -4px -4px 8px #FFFFFF !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

html.theme-clay #manualInput::placeholder,
html.theme-clay #chatQuestionInput::placeholder {
  color: #9CA3AF !important;
}

html.theme-clay #manualInput:focus,
html.theme-clay #chatQuestionInput:focus,
html.theme-clay #meetingTitleInput:focus {
  border-color: #7C3AED !important;
  box-shadow: inset 4px 4px 8px #DDD5EB, inset -4px -4px 8px #FFFFFF, 0 0 0 3px rgba(124, 58, 237, 0.18) !important;
}

html.theme-clay #manualAddBtn,
html.theme-clay #demoBtn,
html.theme-clay #emptyDemoBtn {
  background: #FFFFFF !important;
  color: #7C3AED !important;
  border: 1.5px solid #DDD6FE !important;
  border-radius: 18px !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  box-shadow: 6px 6px 14px rgba(160, 150, 180, 0.18), -4px -4px 10px #FFFFFF !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-clay #manualAddBtn:hover,
html.theme-clay #demoBtn:hover,
html.theme-clay #emptyDemoBtn:hover {
  transform: translateY(-2px) !important;
  background: #F5F3FF !important;
  box-shadow: 8px 8px 18px rgba(124, 58, 237, 0.25), -5px -5px 12px #FFFFFF !important;
}

html.theme-clay #manualAddBtn:active,
html.theme-clay #demoBtn:active,
html.theme-clay #emptyDemoBtn:active {
  transform: scale(0.94) translateY(1px) !important;
  box-shadow: inset 3px 3px 6px #DDD5EB, inset -3px -3px 6px #FFFFFF !important;
}

/* AI Live Notes (Right Column) in Clay Mode */
html.theme-clay #summarizeNowBtn {
  background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%) !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 18px !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  box-shadow: 6px 6px 16px rgba(124, 58, 237, 0.32), -4px -4px 10px #FFFFFF, inset 2px 2px 4px rgba(255, 255, 255, 0.4) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-clay #summarizeNowBtn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 8px 10px 22px rgba(124, 58, 237, 0.42) !important;
}

html.theme-clay #lastSummarizedTime {
  color: #635F69 !important;
}

html.theme-clay #summaryContentArea label.text-\[11px\] {
  color: #635F69 !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
}

html.theme-clay #summaryContentArea .rounded-2xl.bg-gradient-to-b {
  background: #FAF8FD !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 24px !important;
  box-shadow: 10px 10px 26px rgba(160, 150, 180, 0.16), -6px -6px 16px #FFFFFF !important;
}

html.theme-clay #summaryContentArea .h-1.bg-gradient-to-r {
  background: linear-gradient(90deg, #7C3AED 0%, #DB2777 50%, #0EA5E9 100%) !important;
  height: 5px !important;
}

html.theme-clay #summaryContentArea h3 {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  color: #332F3A !important;
}

html.theme-clay #summaryText {
  color: #332F3A !important;
  font-weight: 500 !important;
}

html.theme-clay #keyTopicsList > div {
  background: #FAF8FD !important;
  border: 1.5px solid #FFFFFF !important;
  border-radius: 20px !important;
  box-shadow: 6px 6px 16px rgba(160, 150, 180, 0.14), -4px -4px 12px #FFFFFF !important;
  transition: all 0.2s ease !important;
}

html.theme-clay #keyTopicsList > div:hover {
  transform: translateY(-1px) !important;
  box-shadow: 8px 8px 20px rgba(160, 150, 180, 0.2) !important;
}

html.theme-clay #keyTopicsList .text-teal-300 {
  color: #7C3AED !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
}

html.theme-clay #keyTopicsList .w-5.h-5 {
  background: #EDE9FE !important;
  border: 1.5px solid #DDD6FE !important;
  color: #7C3AED !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  box-shadow: 2px 2px 6px rgba(160, 150, 180, 0.15) !important;
}

html.theme-clay #keyTopicsList p {
  color: #635F69 !important;
}

html.theme-clay #decisionsList > div {
  background: #F0FDF4 !important;
  border: 1.5px solid #DCFCE7 !important;
  border-radius: 20px !important;
  box-shadow: 6px 6px 16px rgba(16, 185, 129, 0.12), -4px -4px 12px #FFFFFF !important;
}

html.theme-clay #decisionsList span.text-emerald-100 {
  color: #065F46 !important;
  font-weight: 600 !important;
}

html.theme-clay #decisionsList .w-5.h-5 {
  background: #10B981 !important;
  border: none !important;
  color: #FFFFFF !important;
  box-shadow: 3px 3px 8px rgba(16, 185, 129, 0.3) !important;
}

html.theme-clay #actionItemsList > div {
  background: #FAF8FD !important;
  border: 1.5px solid #FFFFFF !important;
  border-radius: 20px !important;
  box-shadow: 6px 6px 16px rgba(160, 150, 180, 0.14), -4px -4px 12px #FFFFFF !important;
}

html.theme-clay #actionItemsList label {
  color: #332F3A !important;
  font-weight: 700 !important;
}

html.theme-clay #actionItemsList input[type="checkbox"] {
  accent-color: #7C3AED !important;
}

html.theme-clay #actionItemsList span.bg-slate-800\/80 {
  background: #EDE9FE !important;
  color: #6D28D9 !important;
  border: 1px solid #DDD6FE !important;
  border-radius: 10px !important;
}

html.theme-clay #actionItemsList span.bg-amber-500\/10 {
  background: #FEF3C7 !important;
  color: #B45309 !important;
  border: 1px solid #FDE68A !important;
  border-radius: 10px !important;
}

html.theme-clay #actionCount {
  background: #EDE9FE !important;
  color: #7C3AED !important;
  border: 1.5px solid #DDD6FE !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
}

/* Meeting Ended Official Banner in Clay Mode */
html.theme-clay #meetingEndedBanner {
  background: linear-gradient(135deg, #FAF5FF 0%, #EDE9FE 100%) !important;
  border: 2px solid #C4B5FD !important;
  border-radius: 26px !important;
  box-shadow: 12px 12px 32px rgba(124, 58, 237, 0.18), -8px -8px 20px #FFFFFF !important;
}

html.theme-clay #meetingEndedBanner h4 {
  color: #332F3A !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
}

html.theme-clay #meetingEndedBanner p {
  color: #635F69 !important;
}

html.theme-clay #meetingEndedBanner .bg-slate-900\/90 {
  background: #FFFFFF !important;
  border: 1.5px solid #FFFFFF !important;
  border-radius: 20px !important;
  box-shadow: 6px 6px 14px rgba(160, 150, 180, 0.15), -4px -4px 10px #FFFFFF !important;
}

html.theme-clay #finalDuration { color: #7C3AED !important; font-weight: 800 !important; }
html.theme-clay #finalTranscriptCount { color: #0EA5E9 !important; font-weight: 800 !important; }
html.theme-clay #finalDecisionsCount { color: #10B981 !important; font-weight: 800 !important; }
html.theme-clay #finalActionsCount { color: #DB2777 !important; font-weight: 800 !important; }

html.theme-clay #downloadFinalDocBtn {
  background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%) !important;
  color: #FFFFFF !important;
  border-radius: 18px !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  box-shadow: 8px 8px 20px rgba(124, 58, 237, 0.3), inset 2px 2px 4px rgba(255, 255, 255, 0.4) !important;
}

html.theme-clay #copyFinalSummaryBtn {
  background: #FFFFFF !important;
  color: #332F3A !important;
  border: 1.5px solid #DDD6FE !important;
  border-radius: 18px !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  box-shadow: 6px 6px 14px rgba(160, 150, 180, 0.16) !important;
}

html.theme-clay #startNewMeetingBtn {
  background: #FFFFFF !important;
  color: #332F3A !important;
  border: 1.5px solid #DDD6FE !important;
  border-radius: 16px !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  box-shadow: 6px 6px 14px rgba(160, 150, 180, 0.16) !important;
}

/* In-Meeting AI Assistant Chat & Suggestion Chips in Clay Mode */
html.theme-clay .chat-chip {
  background: #FFFFFF !important;
  color: #635F69 !important;
  border: 1.5px solid #E5DFEE !important;
  border-radius: 16px !important;
  box-shadow: 4px 4px 10px rgba(160, 150, 180, 0.14), -2px -2px 6px #FFFFFF !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-clay .chat-chip:hover {
  transform: translateY(-2px) !important;
  color: #7C3AED !important;
  border-color: #DDD6FE !important;
  box-shadow: 6px 6px 14px rgba(124, 58, 237, 0.22) !important;
}

html.theme-clay #sendChatBtn {
  background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%) !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 18px !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  box-shadow: 8px 8px 18px rgba(124, 58, 237, 0.32), inset 2px 2px 4px rgba(255, 255, 255, 0.4) !important;
}

html.theme-clay #chatAnswerBox {
  background: #FAF5FF !important;
  border: 2px solid #E9D5FF !important;
  border-radius: 22px !important;
  box-shadow: 8px 8px 20px rgba(124, 58, 237, 0.12), -4px -4px 12px #FFFFFF !important;
}

html.theme-clay #chatAnswerText {
  color: #332F3A !important;
  font-weight: 500 !important;
}

/* Toast in Clay Mode */
html.theme-clay #toast {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #332F3A !important;
  border: 2px solid #DDD6FE !important;
  border-radius: 24px !important;
  box-shadow: 14px 14px 32px rgba(124, 58, 237, 0.2), -8px -8px 20px #FFFFFF !important;
  backdrop-filter: blur(20px) !important;
}

html.theme-clay #toast i {
  color: #7C3AED !important;
}