/* DocuMind Frontend — Blue Gradient, Glass UI, ChatGPT-style Ring Loader */

/* fonts: Poppins via system fallback */
:root{
  --bg1:#0d47a1;
  --bg2:#42a5f5;
  --card: rgba(255,255,255,0.12);
  --accent1:#00b4db;
  --accent2:#0083b0;
  --glass-border: rgba(255,255,255,0.18);
  --text:#ffffff;
  --muted: rgba(255,255,255,0.9);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body,#root{height:100%}
body{
  min-height:100vh;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(135deg,var(--bg1),var(--bg2));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:24px;
}

/* Page wrapper */
.page{width:100%;max-width:980px}

/* Card */
.card{
  margin:0 auto;
  background:var(--card);
  backdrop-filter: blur(12px) saturate(120%);
  border-radius:20px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 12px 40px rgba(2,6,23,0.45);
  padding:32px;
  text-align:center;
  animation:cardIn .9s cubic-bezier(.2,.9,.3,1);
}

/* Brand */
.brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:8px}
.logo{width:120px;height:auto;border-radius:12px;object-fit:cover;animation:pulse 2.4s infinite;box-shadow:0 6px 20px rgba(0,0,0,0.25)}
h1{font-size:2.1rem;letter-spacing:0.2px}
.tagline{color:var(--muted);font-size:0.98rem;margin-top:-6px}

/* Controls */
.controls{margin:18px auto;display:flex;gap:12px;align-items:center;justify-content:center}
#uploadBtn{
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  color:#fff;padding:12px 22px;border-radius:999px;border:none;font-weight:700;cursor:pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  transition: transform .18s ease, box-shadow .18s ease;
}
#uploadBtn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,0.28)}
#uploadBtn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}

/* Loader: ChatGPT-style ring */
.loader{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:10px}
.hidden{display:none !important}
.ring{
  width:70px;height:70px;border-radius:50%;
  border:6px solid rgba(255,255,255,0.12);
  border-top-color: #00e5ff;
  border-left-color: rgba(255,255,255,0.12);
  animation:spin 0.95s linear infinite;
  box-shadow: 0 6px 18px rgba(0,229,255,0.08), inset 0 -6px 18px rgba(0,0,0,0.05);
}
.loader-text{color:var(--muted);font-weight:600}
.loader-dot{display:inline-block;opacity:1;animation:dotPulse 1s steps(3,end) infinite}

/* Result box */
.result{margin-top:18px;background:rgba(255,255,255,0.06);padding:16px;border-radius:12px;color:var(--muted);display:none; text-align:left;}

/* Footer */
.footer{text-align:center;margin-top:18px;color:rgba(255,255,255,0.75);font-size:0.9rem}

/* Animations */
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes dotPulse{0%{opacity:0.2}50%{opacity:1}100%{opacity:0.2}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:0.95}}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Responsive */
@media (max-width:520px){
  .card{padding:20px}
  .logo{width:88px}
  h1{font-size:1.6rem}
  #uploadBtn{padding:10px 16px}
}