/* apps/labsgpt.css (modern redesign aligned with referral) */

/* Global font definition */
.lab-title,
.lab-intro,
.lab-card {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* Title & intro */
.lab-title {  
  font-size: clamp(1.8rem, 3vw, 2.4rem);  
  letter-spacing: -.5px;  
  margin: 0 0 .75rem;  
  font-weight: 600;
}

.lab-intro {  
  margin-top: 0;  
  margin-bottom: 1.75rem;  
  font-size: .95rem;  
  color: #6b7280;  
  max-width: 62ch;  
}

body.dark-mode .lab-intro {  
  color: #b4b4b4;  
}

/* Container (card) */
.lab-card {  
  position: relative;  
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(245,245,247,.9));  
  backdrop-filter: blur(12px) saturate(140%);  
  -webkit-backdrop-filter: blur(12px) saturate(140%);  
  border: 1px solid rgba(0,0,0,0.08);  
  border-radius: 20px;  
  padding: clamp(1rem, 2vw, 2rem);  
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,0.03) inset;  
  overflow: hidden;  
  animation: labFadeIn .6s ease forwards;  
}

body.dark-mode .lab-card {  
  background: linear-gradient(135deg, rgba(46,46,46,.9), rgba(28,28,28,.85));  
  border: 1px solid rgba(255,255,255,0.08);  
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,0.03) inset;  
}

@keyframes labFadeIn {  
  from { opacity: 0; transform: translateY(12px); }  
  to { opacity: 1; transform: translateY(0); }  
}

/* Drop zone */
.lab-file-drop-zone {  
  border: 1.5px dashed rgba(0,0,0,0.2);  
  border-radius: 16px;  
  padding: 1.75rem 1.25rem;  
  text-align: center;  
  background: linear-gradient(145deg,#ffffff,#f5f5f7);  
  color: #1d1d1f;  
  cursor: pointer;  
  transition: background .35s ease, border-color .35s ease, transform .25s ease;  
  position: relative;  
  margin-bottom: 1.15rem;  
  isolation: isolate;  
}

body.dark-mode .lab-file-drop-zone {  
  border: 1.5px dashed #3d3d3d;  
  background: linear-gradient(145deg,#242424,#1a1a1a);  
  color: #e2e2e2;  
}

.lab-file-drop-zone input[type="file"] {  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  opacity: 0;  
  cursor: pointer;  
  pointer-events: none;  
}

.lab-file-drop-zone::before {  
  content: "";  
  position: absolute;  
  inset: 0;  
  border-radius: inherit;  
  background: radial-gradient(circle at 30% 20%, rgba(0,113,227,0.08), transparent 60%);  
  opacity: 0;  
  transition: opacity .4s ease;  
  z-index: 0;  
}

body.dark-mode .lab-file-drop-zone::before {  
  background: radial-gradient(circle at 30% 20%, rgba(1,230,205,0.06), transparent 60%);  
}

.lab-file-drop-zone:hover::before,  
.lab-file-drop-zone.hover::before {  
  opacity: 1;  
}

.lab-file-drop-zone:hover,  
.lab-file-drop-zone.hover {  
  background: linear-gradient(145deg,#f5f5f7,#ebebeb);  
  border-color: #0071e3;  
  transform: translateY(-2px);  
}

body.dark-mode .lab-file-drop-zone:hover,  
body.dark-mode .lab-file-drop-zone.hover {  
  background: linear-gradient(145deg,#1f1f1f,#171717);  
  border-color: #01e6cd;  
}

.lab-drop-inner {  
  position: relative;  
  z-index: 1;  
  display: flex;  
  flex-direction: column;  
  gap: .5rem;  
  align-items: center;  
}

.lab-drop-icon {  
  font-size: 2.2rem;  
  background: linear-gradient(135deg,#0071e3,#005bb5);  
  background-clip: text;  
  -webkit-background-clip: text;  
  color: transparent;  
}

body.dark-mode .lab-drop-icon {  
  background: linear-gradient(135deg,#01e6cd,#00b8a3);  
  background-clip: text;  
  -webkit-background-clip: text;  
}

.lab-file-drop-zone .lab-drop-text {  
  font-size: .95rem;  
  font-weight: 500;  
  line-height: 1.3;  
  max-width: 40ch;  
  color: #3c3c3c;  
}

body.dark-mode .lab-file-drop-zone .lab-drop-text {  
  color: #d8d8d8;  
}

.lab-hint {  
  font-size: .65rem;  
  letter-spacing: .5px;  
  text-transform: uppercase;  
  color: #8e8e8e;  
}

body.dark-mode .lab-hint {  
  color: #6f6f6f;  
}

/* Submit button */
.lab-submit-btn {  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  gap: .55rem;  
  width: 100%;  
  padding: .85rem 1.1rem;  
  background: linear-gradient(92deg,#0071e3,#005bb5);  
  color: #ffffff;  
  border: 1px solid #004a99;  
  border-radius: 12px;  
  font-size: .9rem;  
  font-weight: 600;  
  cursor: pointer;  
  position: relative;  
  overflow: hidden;  
  transition: background .35s ease, transform .18s ease, box-shadow .25s ease, border-color .35s ease;  
  box-shadow: 0 2px 4px rgba(0,0,0,0.15), 0 0 0 0 rgba(0,113,227,0);  
  margin-top: .25rem;  
}

body.dark-mode .lab-submit-btn {  
  background: linear-gradient(92deg,#02d7bf,#019a87);  
  color: #0b2824;  
  border: 1px solid #06665b;  
  box-shadow: 0 2px 4px rgba(0,0,0,0.35), 0 0 0 0 rgba(1,200,175,0);  
}

.lab-submit-btn::after {  
  content: "";  
  position: absolute;  
  inset: 0;  
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.3), transparent 55%);  
  mix-blend-mode: overlay;  
  opacity: .25;  
  transition: opacity .4s ease;  
  pointer-events: none;  
}

.lab-submit-btn:hover {  
  background: linear-gradient(92deg,#0084ff,#0066cc);  
  transform: translateY(-1px);  
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.25);  
}

body.dark-mode .lab-submit-btn:hover {  
  background: linear-gradient(92deg,#04e4ca,#01a894);  
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.55);  
}

.lab-submit-btn:focus-visible {  
  outline: none;  
  box-shadow: 0 0 0 3px rgba(0,30,27,0.9), 0 0 0 5px rgba(2,221,192,0.45);  
}

.lab-submit-btn:hover::after {  
  opacity: .38;  
}

.lab-submit-btn:active {  
  transform: translateY(0);  
  background: linear-gradient(92deg,#005bb5,#004a99);  
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);  
}

body.dark-mode .lab-submit-btn:active {  
  background: linear-gradient(92deg,#02c5ae,#018676);  
  box-shadow: 0 1px 3px rgba(0,0,0,0.55);  
}

.lab-submit-btn:disabled {  
  opacity: .55;  
  cursor: not-allowed;  
  box-shadow: none;  
}

/* Loading overlay */
.lab-loading-overlay {  
  position: absolute;  
  inset: 0;  
  background: rgba(255,255,255,0.85);  
  backdrop-filter: blur(4px);  
  -webkit-backdrop-filter: blur(4px);  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  gap: .85rem;  
  opacity: 0;  
  pointer-events: none;  
  transition: opacity .4s ease;  
  border-radius: inherit;  
}

body.dark-mode .lab-loading-overlay {  
  background: rgba(8,8,8,0.55);  
}

.lab-card.loading .lab-loading-overlay {  
  opacity: 1;  
  pointer-events: all;  
}

.lab-spinner {  
  width: 42px;  
  height: 42px;  
  border: 4px solid rgba(0,0,0,0.08);  
  border-top-color: #0071e3;  
  border-radius: 50%;  
  animation: labSpin 1s linear infinite;  
}

body.dark-mode .lab-spinner {  
  border: 4px solid rgba(255,255,255,0.12);  
  border-top-color: #04e4ca;  
}

@keyframes labSpin {  
  to { transform: rotate(360deg); }  
}

/* Result */
#lab-result {  
  background: linear-gradient(145deg,#ffffff,#f5f5f7);  
  padding: 1rem 1rem 1.2rem;  
  border-radius: 16px;  
  margin-top: 1.2rem;  
  color: #1d1d1f;  
  white-space: pre-wrap;  
  border: 1px solid rgba(0,0,0,0.1);  
  position: relative;  
  font-size: .9rem;  
  line-height: 1.4;  
  max-height: 420px;  
  overflow-y: auto;  
  scrollbar-width: thin;  
}

body.dark-mode #lab-result {  
  background: linear-gradient(145deg,#202020,#181818);  
  color: #e2e2e2;  
  border: 1px solid #2c2c2c;  
}

#lab-result::-webkit-scrollbar {  
  width: 8px;  
}
#lab-result::-webkit-scrollbar-track {  
  background: #ebebeb;  
  border-radius: 10px;  
}
body.dark-mode #lab-result::-webkit-scrollbar-track {  
  background: #141414;  
}
#lab-result::-webkit-scrollbar-thumb {  
  background: #c5c5c5;  
  border-radius: 10px;  
}
body.dark-mode #lab-result::-webkit-scrollbar-thumb {  
  background: #2d2d2d;  
}
#lab-result::-webkit-scrollbar-thumb:hover {  
  background: #a8a8a8;  
}
body.dark-mode #lab-result::-webkit-scrollbar-thumb:hover {  
  background: #3a3a3a;  
}

#lab-result .copy-icon {  
  font-size: 18px;  
  display: inline-flex;  
  align-items: center;  
  justify-content: center;  
  padding: 4px;  
  border-radius: 6px;  
  color: #6b6b6b;  
  transition: background .3s ease, color .3s ease;  
}

body.dark-mode #lab-result .copy-icon {  
  color: #b5b5b5;  
}

#lab-result .copy-icon:hover {  
  background: #ebebeb;  
  color: #0071e3;  
}

body.dark-mode #lab-result .copy-icon:hover {  
  background: #262626;  
  color: #04e4ca;  
}

/* Responsive */
@media (max-width: 620px) {  
  .lab-card {  
    padding: 1rem 1rem 1.25rem;  
    border-radius: 18px;  
  }
  .lab-file-drop-zone {  
    padding: 1.25rem 1rem;  
  }
  .lab-drop-icon {  
    font-size: 1.9rem;  
  }
  .lab-submit-btn {  
    font-size: .85rem;  
    padding: .75rem 1rem;  
    border-radius: 10px;  
  }
  #lab-result {  
    font-size: .85rem;  
    max-height: 360px;  
  }
}

/* Utility (animations re-use) */
.lab-fade-in {  
  animation: labFadeIn .6s ease forwards;  
}

/* Copy icon global fallback */
.copy-icon {  
  cursor: pointer;  
}