/* 
 * Magnific AI - Voice Studio Style System
 * Ultra-high fidelity Dark Luxury Aesthetic
 */

:root {
  --bg-main: #0c0c0e;
  --bg-sidebar: #101014;
  --bg-panel: #16161a;
  --bg-card: #1c1c22;
  --bg-card-hover: #23232b;
  --bg-input: #121216;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.16);
  --border-active: rgba(184, 23, 82, 0.5);
  --pink-accent: #b81752;
  --berry-accent: #b81752;
  --berry-deep: #7a0c38;
  --berry-light: #d82b6e;
  --pink-glow: rgba(184, 23, 82, 0.35);
  --berry-glow: rgba(184, 23, 82, 0.35);
  --purple-accent: #a855f7;
  --yellow-accent: #fbbf24;
  --cyan-accent: #06b6d4;
  --text-primary: #f4f4f7;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --radius-xl: 16px;
  --radius-lg: 12px;
  --radius-md: 8px;
  --font-arabic: 'Tajawal', 'Cairo', system-ui, -apple-system, sans-serif;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* Hide scrollbar utility for clean pill ribbons */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Base Body Styles */
html, body {
  height: 100%;
  overflow: hidden;
}
body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: 'Inter', var(--font-arabic);
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* Glowing Create Button */
.btn-create-pink {
  background: linear-gradient(135deg, #c2185b 0%, #7a0c38 100%);
  color: white;
  box-shadow: 0 0 20px rgba(184, 23, 82, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-create-pink:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(184, 23, 82, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  filter: brightness(1.1);
}
.btn-create-pink:active {
  transform: translateY(0);
}

/* Glassmorphism Classes */
.glass-panel {
  background: rgba(22, 22, 26, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
}

.glass-modal {
  background: rgba(18, 18, 22, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9), 0 0 35px rgba(184, 23, 82, 0.15);
}

.glass-floating-player {
  background: rgba(18, 18, 24, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.85), 0 0 30px rgba(184, 23, 82, 0.25);
}

/* Sub-sidebar Tool Navigation (Image 2 & 3) */
.tool-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: #9ca3af;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}
.tool-nav-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #f3f4f6;
}
.tool-nav-item.active {
  background-color: #22222a;
  color: #ffffff;
  border-color: rgba(184, 23, 82, 0.45);
  box-shadow: 0 4px 15px -3px rgba(184, 23, 82, 0.2);
}

/* Drag and Drop Reordering Styles for Sub-Sidebar Groups */
.tool-nav-item.draggable-group-item {
  position: relative;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}
.tool-nav-item.group-item-dragging {
  opacity: 0.45 !important;
  transform: scale(0.97) !important;
  border: 1px dashed #ec4899 !important;
  background-color: rgba(184, 23, 82, 0.15) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  cursor: grabbing !important;
}
.tool-nav-item.group-item-drag-over-top {
  border-top: 2px solid #ec4899 !important;
  box-shadow: 0 -4px 12px rgba(236, 72, 153, 0.5) !important;
}
.tool-nav-item.group-item-drag-over-bottom {
  border-bottom: 2px solid #ec4899 !important;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.5) !important;
}
.drag-grip-handle {
  cursor: grab;
  touch-action: none;
  opacity: 0.4;
  transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.tool-nav-item:hover .drag-grip-handle {
  opacity: 0.9;
}
.drag-grip-handle:hover {
  opacity: 1 !important;
  color: #ec4899 !important;
  transform: scale(1.1);
}
.drag-grip-handle:active {
  cursor: grabbing !important;
}
.group-reorder-btn {
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.tool-nav-item:hover .group-reorder-btn {
  opacity: 0.65;
}
.group-reorder-btn:hover {
  opacity: 1 !important;
  color: #ec4899 !important;
  transform: scale(1.2);
}

.nav-item-btn.active {
  background-color: #22222a !important;
  color: #ffffff !important;
  border-color: rgba(184, 23, 82, 0.45) !important;
  outline: 1px solid rgba(184, 23, 82, 0.35);
  box-shadow: 0 4px 20px -4px rgba(184, 23, 82, 0.3), inset 0 0 0 1px rgba(184, 23, 82, 0.2) !important;
  font-weight: 700 !important;
}

/* Sidebar nav button base style */
.nav-item-btn {
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-item-btn:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.05);
  color: #f3f4f6;
  border-color: rgba(255, 255, 255, 0.06);
}

/* Active pink pulse dot visibility for active nav items */
.nav-item-btn.active .nav-active-dot {
  display: inline-block;
}
.nav-item-btn:not(.active) .nav-active-dot {
  display: none;
}

/* =====================================================
   SIDEBAR COLLAPSE / EXPAND SYSTEM
   ===================================================== */

/* Sidebar base transition */
#main-sidebar {
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1), 
              min-width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed sidebar = fully hidden (0 width) */
#main-sidebar.sidebar-collapsed {
  width: 0px !important;
  min-width: 0px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Floating Reopen Button (FAB) — shown only when sidebar is collapsed */
/* RTL layout: sidebar is on the RIGHT → button sits on the RIGHT edge */
#sidebar-reopen-fab {
  position: fixed;
  top: 50%;
  right: 0;
  left: auto;
  transform: translateY(-50%);
  z-index: 9999;
  /* Round the LEFT corners (facing inward toward content) */
  border-radius: 10px 0 0 10px;
  transition: opacity 0.2s ease, background 0.2s ease;
}

/* Elements hidden when sidebar is collapsed */
#main-sidebar.sidebar-collapsed .sidebar-show-when-open {
  display: none !important;
}

/* Elements only visible when collapsed */
#main-sidebar.sidebar-collapsed .sidebar-show-when-closed {
  display: flex !important;
}

/* In open state, hide the collapsed-only elements */
#main-sidebar:not(.sidebar-collapsed) .sidebar-show-when-closed {
  display: none !important;
}

/* Smooth transition for everything inside sidebar */
#main-sidebar * {
  transition: opacity 0.15s ease;
}
/* Interactive Card Animations */
.magnific-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.magnific-card:hover {
  background-color: var(--bg-card-hover);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7);
}

/* Category Quick Icon Tile */
.category-tile {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background-color: #1a1a21;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.category-tile:hover {
  transform: translateY(-3px) scale(1.06);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

/* Panoramic Glassmorphic Studio Dock (Home Master Hub) */
.studio-dock-scroll {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 12px 12px 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.studio-dock-scroll::-webkit-scrollbar {
  display: none;
}
@media (min-width: 1260px) {
  .studio-dock-scroll {
    justify-content: center;
    flex-wrap: nowrap;
  }
}

.studio-dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.studio-dock-item:hover {
  transform: translateY(-3px);
}
.studio-dock-item:active {
  transform: translateY(0) scale(0.96);
}

.studio-dock-tile {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(28, 28, 36, 0.95), rgba(18, 18, 24, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.studio-dock-item:hover .studio-dock-tile {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.studio-dock-tile.dock-active {
  background: linear-gradient(135deg, rgba(184, 23, 82, 0.25) 0%, rgba(122, 12, 56, 0.4) 100%);
  border-color: rgba(184, 23, 82, 0.6);
  box-shadow: 0 0 20px rgba(184, 23, 82, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.studio-dock-label {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  white-space: nowrap;
  transition: color 0.2s ease;
  letter-spacing: -0.2px;
}
.studio-dock-item:hover .studio-dock-label {
  color: #ffffff;
}
.studio-dock-item.is-active .studio-dock-label {
  color: #f43f8e;
  font-weight: 700;
}

/* Card Playing Glow Pulse */
.card-playing-active {
  border-color: rgba(184, 23, 82, 0.6) !important;
  background: linear-gradient(180deg, #1f1b24 0%, #17151e 100%) !important;
  box-shadow: 0 8px 30px -6px rgba(184, 23, 82, 0.35), inset 0 0 0 1px rgba(184, 23, 82, 0.3) !important;
}

/* BiDi Isolate Protection */
.bidi-isolate {
  unicode-bidi: isolate;
  direction: ltr;
  display: inline-block;
}

/* Animated Mini Equalizer for Playing Audio Cards */
.mini-equalizer {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 16px;
  padding: 0 2px;
}
.mini-equalizer span {
  width: 3px;
  background-color: #ffffff;
  border-radius: 9999px;
  animation: eqBounce 1s infinite ease-in-out;
}
.mini-equalizer span:nth-child(1) { height: 40%; animation-delay: 0.1s; }
.mini-equalizer span:nth-child(2) { height: 90%; animation-delay: 0.3s; }
.mini-equalizer span:nth-child(3) { height: 60%; animation-delay: 0.2s; }
.mini-equalizer span:nth-child(4) { height: 100%; animation-delay: 0.4s; }

@keyframes eqBounce {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

/* Custom Toggle Switch */
.magnific-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}
.magnific-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.magnific-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2e2e38;
  transition: .25s;
  border-radius: 34px;
}
.magnific-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .25s;
  border-radius: 50%;
}
input:checked + .magnific-slider {
  background-color: var(--pink-accent);
}
input:checked + .magnific-slider:before {
  transform: translateX(16px);
}

/* Spaces Infinite Canvas Grid */
.spaces-grid {
  background-color: #0d0d11;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Animated Connecting Line in Spaces Card */
@keyframes dashTravel {
  to {
    stroke-dashoffset: -20;
  }
}
.animated-dash-line {
  stroke-dasharray: 5, 5;
  animation: dashTravel 1.2s linear infinite;
}

/* Waveform Canvas Container */
.waveform-container {
  background: linear-gradient(180deg, rgba(16, 16, 20, 0.9) 0%, rgba(12, 12, 15, 0.95) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* Karaoke / Synchronized Text Highlighting */
.transcript-word {
  display: inline-block;
  padding: 2px 3px;
  border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.transcript-word.active-word {
  background-color: rgba(184, 23, 82, 0.25);
  color: #fce7f3;
  font-weight: 700;
  transform: scale(1.04);
  text-shadow: 0 0 8px rgba(184, 23, 82, 0.4);
}

/* Pulse animation for active recording / generating */
@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(184, 23, 82, 0.6); }
  70% { box-shadow: 0 0 0 14px rgba(184, 23, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 23, 82, 0); }
}
.generating-pulse {
  animation: pulseGlow 1.8s infinite;
}

/* Animation utilities */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.animate-fadeIn {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.animate-scaleUp {
  animation: scaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Slide up for floating player */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-slideUp {
  animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* RTL Specific adjustments */
[dir="rtl"] {
  text-align: right;
}
[dir="rtl"] .space-x-reverse > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}

/* Explore Academic Pathways & Roadmap Styles */
.pathway-card {
  background: linear-gradient(135deg, rgba(24, 24, 32, 0.95), rgba(16, 16, 22, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.pathway-card:hover {
  border-color: rgba(184, 23, 82, 0.35);
  box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.8), 0 0 25px rgba(184, 23, 82, 0.15);
}

.pathway-step-node {
  background: #181822;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  transition: all 0.25s ease;
}
.pathway-step-node:hover {
  border-color: rgba(184, 23, 82, 0.45);
  transform: translateY(-2px);
  background: #1f1f2c;
}

.badge-glow-pink {
  box-shadow: 0 0 15px rgba(184, 23, 82, 0.35);
}
.badge-glow-blue {
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
}

/* Custom Styled Dark Selects */
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b81752' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: left 0.75rem center;
  background-size: 1em;
  padding-left: 2.25rem;
  cursor: pointer;
}
[dir="ltr"] select {
  background-position: right 0.75rem center;
  padding-left: 0.75rem;
  padding-right: 2.25rem;
}
select option {
  background-color: #14141a;
  color: #f4f4f7;
  padding: 8px;
}

/* =========================================================================
 * Spaces Infinite Workflow Canvas & Node Graph Styles
 * ========================================================================= */
@keyframes spaceDashPulse {
  from { stroke-dashoffset: 48; }
  to { stroke-dashoffset: 0; }
}

.wire-pulse {
  animation: spaceDashPulse 2.2s linear infinite;
}

.wire-pulse-fast {
  animation: spaceDashPulse 0.7s linear infinite;
}

.spaces-dots-bg {
  background-color: #0b0c10;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
}

.spaces-blueprint-bg {
  background-color: #080a10;
  background-image: linear-gradient(rgba(6, 182, 212, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(6, 182, 212, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}

.space-canvas-node {
  will-change: transform, left, top;
  touch-action: none;
}

.space-canvas-node:hover {
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 255, 255, 0.05);
}

/* =========================================================================
 * Voiceover Generator Studio Advanced Styles
 * ========================================================================= */
.transcript-word {
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 4px;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
  user-select: text;
}

.transcript-word:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fbcfe8;
  transform: translateY(-1px);
}

.transcript-word.active-word {
  background: linear-gradient(135deg, rgba(184, 23, 82, 0.45), rgba(122, 12, 56, 0.35));
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(184, 23, 82, 0.5);
  border: 1px solid rgba(184, 23, 82, 0.6);
  transform: scale(1.06);
}

/* Stereo VU Meter Simulation (Professional DAW 96px) */
.stereo-vu-bar {
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
  width: 14px;
  height: 96px;
  background: rgba(10, 10, 14, 0.85);
  padding: 3px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8);
}

.vu-segment {
  width: 100%;
  height: 7px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.08);
  transition: background-color 0.08s ease, box-shadow 0.08s ease;
}

.vu-segment.active-green {
  background-color: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.vu-segment.active-amber {
  background-color: #f59e0b;
  box-shadow: 0 0 6px #f59e0b;
}

.vu-segment.active-red {
  background-color: #ef4444;
  box-shadow: 0 0 8px #ef4444;
}

/* Custom Styled Range Sliders (Eliminates ugly Chrome native white tracks) */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  background: #1e1e28;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #b81752;
  margin-top: -4px;
  border: 2px solid #ffffff;
  box-shadow: 0 0 10px rgba(184, 23, 82, 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 14px rgba(184, 23, 82, 0.9);
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 6px;
  background: #1e1e28;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

input[type="range"]::-moz-range-thumb {
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #b81752;
  border: 2px solid #ffffff;
  box-shadow: 0 0 10px rgba(184, 23, 82, 0.6);
}

/* Bidi Isolation for Numbers & Units in Arabic Context */
.bidi-isolate {
  unicode-bidi: isolate;
  direction: ltr;
  display: inline-block;
}

/* Template Card Flex Containment */
.template-card-box {
  min-width: 0;
  overflow: hidden;
}

/* Take History Card Hover Effect */
.take-history-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.take-history-card:hover {
  border-color: rgba(184, 23, 82, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.7);
}

/* Custom Teleprompter Scrollbar */
#synchronized-transcript-box::-webkit-scrollbar {
  width: 6px;
}
#synchronized-transcript-box::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
#synchronized-transcript-box::-webkit-scrollbar-thumb {
  background: rgba(184, 23, 82, 0.35);
  border-radius: 4px;
}
#synchronized-transcript-box::-webkit-scrollbar-thumb:hover {
  background: rgba(184, 23, 82, 0.65);
}

/* =========================================================================
   AUDIO EDITOR & SEGMENTER STUDIO DAW STYLES
   ========================================================================= */
.editor-waveform-stage {
  background: radial-gradient(circle at 50% 30%, #171722 0%, #0d0d12 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.8), 0 10px 30px -10px rgba(0, 0, 0, 0.9);
  position: relative;
  user-select: none;
}

.editor-ruler-track {
  background: linear-gradient(180deg, #181824 0%, #111118 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.editor-segment-card {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.editor-segment-card:hover {
  border-color: rgba(184, 23, 82, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.6);
}

.editor-segment-card.active-segment {
  border-color: #b81752;
  background: linear-gradient(135deg, rgba(184, 23, 82, 0.15) 0%, rgba(18, 18, 24, 0.95) 100%);
  box-shadow: 0 0 20px rgba(184, 23, 82, 0.25);
}

.editor-rack-panel {
  background: linear-gradient(180deg, #16161e 0%, #101015 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.editor-knob-display {
  background: #0f0f14;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8);
}

/* =========================================================================
   AUDIO ENHANCER, DUAL DEBATES & VOICE CLONING STUDIOS
   ========================================================================= */
.enhancer-rack-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.enhancer-rack-card:hover {
  border-color: rgba(245, 158, 11, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -8px rgba(245, 158, 11, 0.15);
}

.dialogue-turn-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dialogue-turn-card:hover {
  border-color: rgba(59, 130, 246, 0.4);
}

.voice-clone-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.voice-clone-card:hover {
  border-color: rgba(16, 185, 129, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -8px rgba(16, 185, 129, 0.15);
}

/* =========================================================================
   SIDEBAR TOGGLE & REOPEN FAB BUTTONS
   ========================================================================= */
#sidebar-toggle-btn {
  width: 28px;
  height: 48px;
  background-color: #1a1a24;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d1d5db;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  cursor: pointer;
}

#sidebar-toggle-btn:hover {
  background-color: #252535;
  color: #ffffff;
  border-color: rgba(184, 23, 82, 0.5);
  box-shadow: 0 0 15px rgba(184, 23, 82, 0.25);
}

#sidebar-toggle-btn:hover i,
#sidebar-toggle-btn:hover svg {
  color: #e35f92;
}

#sidebar-reopen-fab {
  border-radius: 10px 0 0 10px !important;
}

/* =========================================================================
   PULSING GLOW BORDER FOR CURRENTLY PLAYING LECTURE CARD
   ========================================================================= */
@keyframes cardPlayingPulse {
  0% {
    border-color: rgba(227, 95, 146, 0.45);
    box-shadow: 0 0 0 1px rgba(184, 23, 82, 0.35), 0 0 15px -2px rgba(184, 23, 82, 0.35), 0 12px 30px -10px rgba(0, 0, 0, 0.7);
  }
  50% {
    border-color: rgba(244, 63, 94, 0.95);
    box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.7), 0 0 30px 4px rgba(244, 63, 94, 0.65), 0 15px 35px -5px rgba(0, 0, 0, 0.9);
  }
  100% {
    border-color: rgba(227, 95, 146, 0.45);
    box-shadow: 0 0 0 1px rgba(184, 23, 82, 0.35), 0 0 15px -2px rgba(184, 23, 82, 0.35), 0 12px 30px -10px rgba(0, 0, 0, 0.7);
  }
}

.card-playing-active {
  animation: cardPlayingPulse 2s ease-in-out infinite !important;
  border-color: rgba(244, 63, 94, 0.9) !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Offline cached badge & button styling */
.btn-offline-cached {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.badge-listen-count {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.badge-resume-playback {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(184, 23, 82, 0.2));
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

/* =========================================================================
   SPOTLIGHT SEARCH & COMMAND PALETTE (CTRL+K) LUXURY STYLES
   ========================================================================= */
#search-modal .glass-modal {
  background: linear-gradient(180deg, rgba(16, 17, 24, 0.98) 0%, rgba(10, 11, 16, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 25px 80px -10px rgba(0, 0, 0, 0.95), 0 0 35px -5px rgba(184, 23, 82, 0.15);
}

[data-spotlight-item].ring-2 {
  background-color: rgba(184, 23, 82, 0.18) !important;
  border-color: rgba(227, 95, 146, 0.5) !important;
  box-shadow: 0 4px 20px rgba(184, 23, 82, 0.25), inset 0 0 12px rgba(184, 23, 82, 0.15) !important;
}

mark {
  background-color: rgba(184, 23, 82, 0.35) !important;
  color: #fce7f0 !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
}

/* =========================================================================
   CLOUD LIBRARY COMMAND BAR & QURANIC TYPOGRAPHY LUXURY STYLES
   ========================================================================= */
.cloud-command-bar {
  background: linear-gradient(135deg, rgba(22, 22, 30, 0.96) 0%, rgba(16, 16, 22, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
}

.quran-ayah-inline {
  font-family: 'Amiri', 'Traditional Arabic', serif;
  color: #fbbf24;
  letter-spacing: 0.02em;
}

.quran-ayah-badge {
  display: inline-block;
  font-family: 'Amiri', 'Traditional Arabic', serif;
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 6px;
  padding: 0 6px;
  font-size: 0.95em;
  margin: 1px 2px;
  line-height: 1.6;
}

/* =========================================================================
   SERIES DROPDOWN MENU - 100% OPAQUE SOLID EXECUTIVE OBSIDIAN
   ========================================================================= */
#group-series-dropdown-menu {
  background-color: #12121c !important;
  background: linear-gradient(180deg, #171726 0%, #101018 100%) !important;
  border: 1px solid rgba(236, 72, 153, 0.45) !important;
  box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.98), 0 0 35px rgba(236, 72, 153, 0.25) !important;
  backdrop-filter: blur(25px) !important;
  opacity: 1 !important;
  max-height: 420px !important;
}

#group-series-dropdown-menu.hidden {
  display: none !important;
}

#group-series-dropdown-menu:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
}

#group-series-dropdown-menu .series-dropdown-item {
  background-color: #12121c;
  transition: all 0.15s ease;
}

#group-series-dropdown-menu .series-dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

#group-series-dropdown-menu .series-dropdown-item.is-selected-series {
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.28) 0%, rgba(168, 85, 247, 0.18) 100%) !important;
  border-inline-start: 3px solid #ec4899;
}

#group-series-dropdown-menu .custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(227, 95, 146, 0.35) transparent;
}
#group-series-dropdown-menu .custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
#group-series-dropdown-menu .custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(227, 95, 146, 0.35);
  border-radius: 4px;
}
#group-series-dropdown-menu .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(227, 95, 146, 0.6);
}

/* =========================================================================
   EXPLORE VIEW & CURRICULUM PATHWAYS ARCHITECTURE STYLES
   ========================================================================= */
.pathway-card {
  background: linear-gradient(145deg, #15151f 0%, #111118 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.7);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.pathway-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.6), rgba(168, 85, 247, 0.6), transparent);
  pointer-events: none;
}

.pathway-step-node {
  background: rgba(22, 22, 32, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1.25rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(12px);
}

.pathway-step-node:hover {
  transform: translateY(-3px);
  background: rgba(28, 28, 42, 0.9);
  border-color: rgba(236, 72, 153, 0.45);
  box-shadow: 0 12px 30px -8px rgba(236, 72, 153, 0.2);
}

#series-deepdive-modal-root .glass-modal {
  background: linear-gradient(180deg, #171724 0%, #101017 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 30px 90px -10px rgba(0, 0, 0, 0.95), 0 0 40px rgba(236, 72, 153, 0.15) !important;
}

/* =========================================================================
   RESPONSIVE MOBILE & TABLET ARCHITECTURE (ALL SCREEN SIZES)
   ========================================================================= */
@media (max-width: 1023px) {
  /* Hide the floating desktop edge reopen tab on Mobile/Tablet (Header has its own dedicated menu button) */
  #sidebar-reopen-fab {
    display: none !important;
  }

  /* Convert Main Sidebar into a fixed right-side overlay drawer on Mobile/Tablet */
  #main-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    z-index: 80 !important;
    width: 272px !important;
    max-width: 84vw !important;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.92), 0 0 35px rgba(184, 23, 82, 0.2) !important;
  }

  [dir="ltr"] #main-sidebar {
    right: auto !important;
    left: 0 !important;
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.92), 0 0 35px rgba(184, 23, 82, 0.2) !important;
  }

  #main-sidebar.sidebar-collapsed {
    width: 0px !important;
    min-width: 0px !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Convert Audio Library Sub-Sidebar (#tools-sub-sidebar) into a fixed overlay drawer on Mobile/Tablet */
  #tools-sub-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    width: 300px !important;
    max-width: 88vw !important;
    z-index: 80 !important;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(184, 23, 82, 0.22) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease !important;
  }

  [dir="ltr"] #tools-sub-sidebar {
    right: auto !important;
    left: 0 !important;
  }

  #tools-sub-sidebar.mobile-subsidebar-closed {
    transform: translateX(105%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-shadow: none !important;
  }

  [dir="ltr"] #tools-sub-sidebar.mobile-subsidebar-closed {
    transform: translateX(-105%) !important;
  }

  #tools-sub-sidebar:not(.mobile-subsidebar-closed) {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 640px) {
  /* Optimize studio dock tiles for mobile touch */
  .studio-dock-scroll {
    gap: 10px;
    padding: 4px 6px 10px 6px;
  }
  .studio-dock-tile {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }
  .studio-dock-label {
    font-size: 10px;
  }

  /* Keep floating reopen FAB subtle on mobile since header has a dedicated Menu button */
  #sidebar-reopen-fab {
    top: auto !important;
    bottom: 130px !important;
    transform: none !important;
    height: 40px !important;
    width: 24px !important;
    opacity: 0.85;
  }
}

/* =====================================================================
   ROYAL EXECUTIVE SERIES DROPDOWN - MATCHING ACTIVE DEPARTMENT AMBIENT GLOW
   Styled identically to .tool-nav-item.active with signature Ambient Breathe & Glowing Edge
   ===================================================================== */
.series-dropdown-field-idle {
  background: linear-gradient(90deg, rgba(184, 23, 82, 0.24) 0%, rgba(30, 22, 38, 0.94) 50%, rgba(20, 18, 26, 0.96) 100%) !important;
  border: 1.5px solid rgba(216, 43, 110, 0.65) !important;
  animation: ambientBreatheSlow 4s ease-in-out infinite !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: blur(12px) !important;
}

.series-dropdown-field-idle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(216, 43, 110, 0.8) 30%, rgba(244, 63, 94, 0.95) 70%, transparent 100%);
  pointer-events: none;
}

/* Signature Glowing Vertical Edge Accent Bar (Matching .tool-nav-item.active) */
.series-dropdown-field-idle::after {
  content: "";
  position: absolute;
  top: 15%;
  bottom: 15%;
  right: -1px;
  width: 3.5px;
  background: linear-gradient(to bottom, #f43f5e, #b81752);
  border-radius: 4px;
  box-shadow: 0 0 12px #f43f5e;
  pointer-events: none;
}

.series-dropdown-field-idle:hover {
  background: linear-gradient(90deg, rgba(216, 43, 110, 0.32) 0%, rgba(38, 26, 48, 0.98) 50%, rgba(26, 22, 34, 0.98) 100%) !important;
  border-color: rgba(244, 63, 94, 1) !important;
  transform: translateY(-2px);
  box-shadow: 0 0 32px 3px rgba(244, 63, 94, 0.65), 0 14px 34px -4px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.series-dropdown-field-idle:active,
.series-dropdown-field-idle.is-dropdown-open {
  transform: translateY(0);
  border-color: rgba(244, 63, 94, 1) !important;
  box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.6), 0 0 32px 4px rgba(184, 23, 82, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* =====================================================================
   CALM & REFINED EXECUTIVE SERIES DROPDOWN (هدوء وأناقة ورقة القائمة)
   Main button maintains distinctive status; menu rows are calm & restful
   ===================================================================== */

/* 1. Main Closed Trigger Button Badge (Distinctive Royal Berry) */
.series-dropdown-field-idle .series-count-pill-distinct {
  background: linear-gradient(135deg, rgba(184, 23, 82, 0.42) 0%, rgba(122, 12, 56, 0.6) 100%) !important;
  border: 1.5px solid rgba(216, 43, 110, 0.8) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 14px rgba(184, 23, 82, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  letter-spacing: -0.01em !important;
}

.series-dropdown-field-idle:hover .series-count-pill-distinct {
  background: linear-gradient(135deg, rgba(216, 43, 110, 0.75) 0%, rgba(184, 23, 82, 0.9) 100%) !important;
  border-color: rgba(244, 63, 94, 1) !important;
  color: #ffffff !important;
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(216, 43, 110, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* 2. Calm, Delicate & Restful Menu Items Inside the Open Dropdown */
.series-dropdown-item {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-right: 2px solid transparent !important;
}

.series-dropdown-item .series-count-pill-distinct {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.series-dropdown-item .series-count-pill-distinct span.animate-pulse {
  background-color: #64748b !important;
  box-shadow: none !important;
  animation: none !important;
  opacity: 0.6;
}

.series-dropdown-item .series-seq-number-badge {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  color: #94a3b8 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

/* Gentle Soft Hover on Dropdown Rows */
.series-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.series-dropdown-item:hover .series-count-pill-distinct {
  background: rgba(184, 23, 82, 0.16) !important;
  border-color: rgba(216, 43, 110, 0.35) !important;
  color: #f1f5f9 !important;
  transform: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

.series-dropdown-item:hover .series-count-pill-distinct span.animate-pulse {
  background-color: #f43f5e !important;
  opacity: 0.9;
}

.series-dropdown-item:hover .series-seq-number-badge {
  background: rgba(184, 23, 82, 0.2) !important;
  border-color: rgba(216, 43, 110, 0.45) !important;
  color: #ffffff !important;
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

/* Calm & Elegant Selected Series Row */
.series-dropdown-item.is-selected-series {
  background: linear-gradient(90deg, rgba(184, 23, 82, 0.18) 0%, rgba(28, 22, 34, 0.85) 100%) !important;
  border-right: 3px solid #e35f92 !important;
}

.series-dropdown-item.is-selected-series .series-count-pill-distinct {
  background: rgba(184, 23, 82, 0.25) !important;
  border-color: rgba(216, 43, 110, 0.5) !important;
  color: #fce7f0 !important;
}

.series-dropdown-item.is-selected-series .series-count-pill-distinct span.animate-pulse {
  background-color: #f43f5e !important;
  opacity: 1;
}

.series-dropdown-item.is-selected-series .series-seq-number-badge {
  background: rgba(184, 23, 82, 0.35) !important;
  border-color: rgba(216, 43, 110, 0.7) !important;
  color: #ffffff !important;
}

/* =========================================================================
   AWWWARDS-CALIBER AMBIENT EXPERIENCE (v2.6-Stable)
   Subtle breathing accent on active departments & tactile lecture cards
   ========================================================================= */
@keyframes ambientBreatheSlow {
  0%, 100% {
    box-shadow: 0 0 16px -2px rgba(184, 23, 82, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    border-color: rgba(216, 43, 110, 0.55);
  }
  50% {
    box-shadow: 0 0 26px 1px rgba(184, 23, 82, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    border-color: rgba(244, 63, 94, 0.9);
  }
}

.tool-nav-item.active {
  animation: ambientBreatheSlow 4s ease-in-out infinite;
  background: linear-gradient(90deg, rgba(184, 23, 82, 0.22) 0%, rgba(30, 22, 36, 0.9) 100%) !important;
  backdrop-filter: blur(10px);
  position: relative;
}

.tool-nav-item.active::before {
  content: "";
  position: absolute;
  top: 15%;
  bottom: 15%;
  right: -1px;
  width: 3px;
  background: linear-gradient(to bottom, #f43f5e, #b81752);
  border-radius: 4px;
  box-shadow: 0 0 10px #f43f5e;
}

/* Luxury Interactive Elevate on Lecture Cards */
.magnific-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
  will-change: transform;
}

.magnific-card:hover {
  transform: translateY(-3.5px);
  box-shadow: 0 18px 38px -6px rgba(0, 0, 0, 0.75), 0 0 20px -3px rgba(184, 23, 82, 0.2) !important;
  border-color: rgba(216, 43, 110, 0.45) !important;
}

/* Atmospheric Ambient Backlight on Command Bar */
.cloud-command-bar {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease !important;
}

.cloud-command-bar:hover {
  box-shadow: 0 24px 55px -10px rgba(0, 0, 0, 0.9), 0 0 35px -6px rgba(184, 23, 82, 0.3) !important;
  border-color: rgba(216, 43, 110, 0.4) !important;
}