/* ============================================================
   CloudDrive — Warm Glass Design System  v0.2.22
   Soft gradients · frosted panels · warm ambient glow
   ============================================================ */

/* ---- 1. Custom properties ---- */
:root {
  --wg-transition-theme: 420ms cubic-bezier(.4,0,.2,1);
  --wg-spring: cubic-bezier(.34,1.56,.64,1);
  --wg-glass-border: rgba(255,215,160,.07);
  --wg-glass-border-hover: rgba(255,215,160,.14);
  --wg-glass-highlight: inset 0 1px 0 rgba(255,225,180,.05);
  --wg-warm-shadow: 0 4px 24px rgba(40,25,10,.12);
  --wg-warm-shadow-lg: 0 8px 40px rgba(40,25,10,.18);
  --wg-ambient: radial-gradient(ellipse 80% 60% at 18% -10%, rgba(200,140,70,.07) 0%, transparent 60%),
                 radial-gradient(ellipse 70% 50% at 85% 110%, rgba(130,90,170,.05) 0%, transparent 60%);
  --wg-radius: 14px;
  --wg-radius-sm: 10px;
  --wg-radius-lg: 20px;

  /* Dark warm tokens */
  --cd-bg: #17140f;
  --cd-bg-soft: #1e1a14;
  --cd-surface: rgba(36,30,24,.82);
  --cd-surface-elevated: rgba(44,38,30,.88);
  --cd-glass: rgba(36,30,24,.78);
  --cd-glass-sidebar: rgba(24,20,16,.92);
  --cd-glass-strong: rgba(36,30,24,.96);
  --cd-glass-topbar: rgba(24,20,16,.88);
  --cd-border-faint: rgba(255,215,160,.03);
  --cd-line: rgba(255,215,160,.07);
  --cd-line-strong: rgba(255,215,160,.14);
  --cd-text: #ede8e0;
  --cd-muted: #9a9285;
  --cd-subtle: #6b645a;
  --cd-shadow: 0 2px 8px rgba(30,20,8,.35);
  --cd-shadow-soft: 0 1px 4px rgba(30,20,8,.22);
  --cd-radius: 14px;
  --cd-radius-sm: 10px;

  --cd-blue: #4a9eff;
  --cd-blue-soft: rgba(74,158,255,.10);
  --cd-blue-glow: rgba(74,158,255,.22);
  --cd-green: #34c759;
  --cd-orange: #ff9f0a;
  --cd-red: #ff453a;
  --cd-purple: #bf5af2;
  --cd-cyan: #64d2ff;

  --cd-input-bg: rgba(255,215,160,.04);
  --cd-input-bg-focus: rgba(255,215,160,.07);
  --cd-segmented-bg: rgba(255,215,160,.04);
  --cd-btn-ghost-bg: rgba(255,215,160,.04);
  --cd-btn-ghost-hover: rgba(255,215,160,.08);
  --cd-icon-btn-bg: rgba(255,215,160,.04);
  --cd-icon-btn-hover: rgba(255,215,160,.08);
  --cd-search-box-bg: rgba(255,215,160,.04);
  --cd-card-hover-bg: rgba(255,215,160,.05);
  --cd-card-hover-border: rgba(255,215,160,.10);
  --cd-modal-bg: rgba(10,8,5,.65);
  --cd-toast-info-bg: rgba(74,158,255,.10);
  --cd-toast-info-border: rgba(74,158,255,.18);
  --cd-preview-bg: rgba(10,8,5,.92);
}

[data-theme="light"] {
  --cd-bg: #faf6f1;
  --cd-bg-soft: #f4efe8;
  --cd-surface: rgba(255,252,248,.78);
  --cd-surface-elevated: rgba(255,253,250,.88);
  --cd-glass: rgba(255,252,248,.68);
  --cd-glass-sidebar: rgba(250,246,240,.90);
  --cd-glass-strong: rgba(255,252,248,.94);
  --cd-glass-topbar: rgba(250,246,240,.88);
  --cd-border-faint: rgba(160,120,60,.03);
  --cd-line: rgba(160,120,60,.08);
  --cd-line-strong: rgba(160,120,60,.15);
  --cd-text: #2c2520;
  --cd-muted: #7a7168;
  --cd-subtle: #a89e94;
  --cd-shadow: 0 2px 8px rgba(140,100,50,.07);
  --cd-shadow-soft: 0 1px 4px rgba(140,100,50,.04);
  --wg-ambient: radial-gradient(ellipse 80% 60% at 18% -10%, rgba(255,200,140,.14) 0%, transparent 60%),
                 radial-gradient(ellipse 70% 50% at 85% 110%, rgba(200,170,230,.08) 0%, transparent 60%);
  --wg-warm-shadow: 0 4px 24px rgba(140,100,50,.07);
  --wg-warm-shadow-lg: 0 8px 40px rgba(140,100,50,.10);
  --wg-glass-border: rgba(180,140,80,.08);
  --wg-glass-border-hover: rgba(180,140,80,.16);
  --wg-glass-highlight: inset 0 1px 0 rgba(255,255,255,.45);

  --cd-blue: #2383e2;
  --cd-blue-soft: rgba(35,131,226,.07);
  --cd-green: #0f7b0f;
  --cd-orange: #d9730d;
  --cd-red: #e03e3e;
  --cd-purple: #6940a5;
  --cd-cyan: #0b6e99;
}

/* ---- 2. Warm ambient background ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--wg-ambient);
  transition: background var(--wg-transition-theme);
}

/* ---- 3. Glass panel overrides ---- */
.login-shell,
.page-panel,
.workspace-hero,
.summary-card,
.file-row,
.file-card,
.action-row,
.upload-row,
.upload-zone,
.smart-card,
.ai-result,
.tag-result,
.empty-state,
.profile-card,
.search-box,
.segmented,
.context-menu {
  background: var(--cd-surface);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-color: var(--wg-glass-border);
  border-radius: var(--wg-radius);
  box-shadow: var(--wg-warm-shadow), var(--wg-glass-highlight);
  transition: background .22s, border-color .22s, box-shadow .28s, transform .22s var(--wg-spring);
}

.login-shell {
  border-radius: var(--wg-radius-lg);
  box-shadow: var(--wg-warm-shadow-lg), var(--wg-glass-highlight);
}

.modal {
  background: var(--cd-glass-strong);
  backdrop-filter: saturate(200%) blur(30px);
  -webkit-backdrop-filter: saturate(200%) blur(30px);
  border-radius: var(--wg-radius-lg);
  box-shadow: 0 16px 60px rgba(20,12,4,.28), var(--wg-glass-highlight);
}

.sidebar, .topbar, .bottom-nav {
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}

.toast {
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-radius: var(--wg-radius-sm);
}

/* ---- 4. Page transition keyframes ---- */
@keyframes wg-page-exit {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-6px) scale(.995); }
}
@keyframes wg-page-enter {
  from { opacity: 0; transform: translateY(10px) scale(.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.content-inner.wg-exit {
  animation: wg-page-exit 160ms cubic-bezier(.4,0,1,1) forwards;
}
.content-inner.wg-enter {
  animation: wg-page-enter 300ms cubic-bezier(0,0,.2,1) forwards;
}

/* ---- 5. Modal spring animations ---- */
@keyframes wg-modal-bg-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes wg-modal-bg-out { from { opacity: 1 } to { opacity: 0 } }
@keyframes wg-modal-card-in {
  from { opacity: 0; transform: scale(.88) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes wg-modal-card-out {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(.92) translateY(8px); }
}

.modal-root.wg-show {
  display: flex;
  animation: wg-modal-bg-in 220ms ease-out forwards;
}
.modal-root.wg-show .modal {
  animation: wg-modal-card-in 380ms var(--wg-spring) forwards;
}
.modal-root.wg-hide {
  display: flex;
  animation: wg-modal-bg-out 180ms ease-in forwards;
  pointer-events: none;
}
.modal-root.wg-hide .modal {
  animation: wg-modal-card-out 180ms cubic-bezier(.4,0,1,1) forwards;
}

/* ---- 6. Theme cross-fade ---- */
html.wg-theme-transitioning,
html.wg-theme-transitioning *,
html.wg-theme-transitioning *::before,
html.wg-theme-transitioning *::after {
  transition: background-color var(--wg-transition-theme),
              color var(--wg-transition-theme),
              border-color var(--wg-transition-theme),
              box-shadow var(--wg-transition-theme) !important;
}

/* ---- 7a. Button ripple ---- */
.wg-ripple-host { position: relative; overflow: hidden; }
.wg-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  transform: scale(0);
  animation: wg-ripple-expand 520ms ease-out forwards;
  pointer-events: none;
  z-index: 1;
}
[data-theme="light"] .wg-ripple { background: rgba(0,0,0,.06); }
@keyframes wg-ripple-expand {
  to { transform: scale(2.8); opacity: 0; }
}

/* ---- 7b. FAB pulse ---- */
@keyframes wg-fab-breathe {
  0%, 100% { box-shadow: 0 2px 12px rgba(74,158,255,.25), 0 0 0 0 rgba(74,158,255,.30); }
  50%      { box-shadow: 0 4px 20px rgba(74,158,255,.35), 0 0 0 8px rgba(74,158,255,0); }
}
.fab {
  animation: wg-fab-breathe 3s ease-in-out infinite;
  border-radius: 16px;
}

/* ---- 7c. Toast bounce-in ---- */
@keyframes wg-toast-in {
  0%   { opacity: 0; transform: translateY(-16px) scale(.92); }
  65%  { opacity: 1; transform: translateY(3px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wg-toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-10px) scale(.95); }
}
.toast { animation: wg-toast-in 360ms var(--wg-spring) forwards; }
.toast.wg-exit { animation: wg-toast-out 220ms ease-in forwards; }

/* ---- 7d. Sidebar active indicator ---- */
.side-nav { position: relative; }
.side-nav::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 2px;
  background: var(--cd-blue);
  transform: translateY(-50%);
  transition: height 280ms var(--wg-spring);
}
.side-nav.active::before { height: 20px; }

/* ---- 7e. Search panel expand ---- */
.search-panel {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 300ms cubic-bezier(.4,0,.2,1),
              padding 300ms cubic-bezier(.4,0,.2,1),
              opacity 220ms ease;
}
.search-panel.wg-open {
  max-height: 68px;
  padding-top: 8px;
  padding-bottom: 8px;
  opacity: 1;
}

/* ---- 7f. File card magnetic hover ---- */
.file-card {
  transition: border-color .18s, box-shadow .28s, transform 160ms ease-out;
}
.file-row {
  transition: background .15s, transform 160ms ease-out;
}

/* ---- 8. Enhanced hover states ---- */
.summary-card:hover,
.file-card:hover {
  border-color: var(--wg-glass-border-hover);
  box-shadow: var(--wg-warm-shadow-lg), var(--wg-glass-highlight);
}

.file-row:hover {
  transform: translateX(2px);
}

.primary-btn {
  transition: background .18s, transform .12s, box-shadow .22s;
}
.primary-btn:hover {
  box-shadow: 0 4px 16px rgba(74,158,255,.22);
}
.primary-btn:active { transform: scale(.96); }

.ghost-btn, .danger-btn {
  transition: background .15s, transform .12s;
}
.ghost-btn:active, .danger-btn:active { transform: scale(.96); }

.icon-btn {
  transition: background .15s, transform .12s;
}
.icon-btn:active { transform: scale(.90); }

.chip {
  transition: background .15s, color .15s, transform .12s;
}
.chip:active { transform: scale(.94); }

/* ---- 9. Login page warmth ---- */
.login-page {
  background: var(--cd-bg);
}
.login-shell {
  border: 1px solid var(--wg-glass-border);
}

/* ---- 10. Scrollbar warmth ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,215,160,.12);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,215,160,.22); }
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(160,120,60,.12);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(160,120,60,.22);
}

/* ---- 11. Selection warmth ---- */
::selection {
  background: rgba(74,158,255,.22);
  color: inherit;
}
[data-theme="light"] ::selection {
  background: rgba(35,131,226,.16);
}

/* ---- 12. Input focus glow ---- */
.input:focus {
  box-shadow: 0 0 0 3px rgba(74,158,255,.12), var(--wg-glass-highlight);
  border-color: var(--cd-blue);
}
[data-theme="light"] .input:focus {
  box-shadow: 0 0 0 3px rgba(35,131,226,.08);
}

/* ---- 13. Upload progress glow ---- */
.progress span {
  box-shadow: 0 0 12px rgba(74,158,255,.30);
  border-radius: 4px;
  transition: width .3s cubic-bezier(.4,0,.2,1);
}

/* ---- 14. Bottom nav warmth ---- */
.bottom-nav {
  border-top: 1px solid var(--wg-glass-border);
}
.nav-tab.active {
  color: var(--cd-blue);
}

/* ---- 15. Preview overlay warmth ---- */
.preview-overlay {
  background: var(--cd-preview-bg);
}

/* ---- 16. Accessibility gates ---- */
.low-effects .wg-ripple { display: none !important; }
.low-effects .fab { animation: none !important; }
.low-effects .content-inner.wg-exit,
.low-effects .content-inner.wg-enter { animation: none !important; }
.low-effects .modal-root.wg-show,
.low-effects .modal-root.wg-hide,
.low-effects .modal-root.wg-show .modal,
.low-effects .modal-root.wg-hide .modal { animation: none !important; }
.low-effects .toast { animation: none !important; }
.low-effects .side-nav::before { transition: none !important; }
.low-effects .search-panel { transition: none !important; }
.low-effects .file-card { transition: border-color .15s !important; }
.low-effects body::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .wg-ripple { display: none !important; }
  .fab { animation: none !important; }
  .content-inner.wg-exit,
  .content-inner.wg-enter { animation: none !important; }
  .modal-root.wg-show, .modal-root.wg-hide,
  .modal-root.wg-show .modal,
  .modal-root.wg-hide .modal { animation: none !important; }
  .side-nav::before { transition: none !important; }
  .toast { animation: none !important; }
  body::before { display: none; }
}