/* Authentication Styles */
/* auth.css - Login form and authentication UI */

/* Auth Container - Clean login screen */
.auth-container {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 60%, #e0f2fe 100%);
  z-index: 10000;
}

.auth-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.auth-blob {
  position: absolute;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle at 30% 30%, rgba(59,130,246,.35), transparent 60%);
  filter: blur(10px);
  transform: translate(-30%, -30%);
}

.auth-blob--alt {
  top: auto;
  left: auto;
  right: -120px;
  bottom: -80px;
  background: radial-gradient(circle at 20% 60%, rgba(14,165,233,.35), transparent 62%);
}

.auth-panel {
  position: relative;
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  align-items: stretch;
  width: min(960px, 100%);
  padding: 36px;
  border-radius: 24px;
  background: var(--glass-surface-80);
  border: 1px solid rgba(148, 163, 184, .2);
  box-shadow: 0 30px 60px rgba(15, 23, 42, .16);
  backdrop-filter: blur(24px);
}

.auth-intro {
  display: grid;
  align-content: center;
  gap: 16px;
  padding-right: clamp(12px, 4vw, 32px);
  color: #0f172a;
}

.auth-badge {
  width: fit-content;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-family: var(--font-default);
}

.auth-title {
  margin: 0;
  font-size: 4rem;
  line-height: 1.1;
  letter-spacing: .2px;
  font-family: var(--font-heading);
  margin-bottom: 8px;
}

.auth-subtitle {
  font: normal 1.7rem var(--font-heading);
  color: rgba(15, 23, 42, .7);
  max-width: 28ch;
  letter-spacing: -0.2px;
  margin: 0 0 40px;
}

.auth-divider {
  width: 54px;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #0ea5e9);
  border-radius: 999px;
}

.auth-highlights {
  list-style: none;
  display: grid;
  gap: 10px;
  font-size: 14px;
  color: rgba(15, 23, 42, .75);
}

.auth-card {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 25px;
  background: var(--surface);
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 40px rgba(15, 23, 42, .08);
  overflow: hidden;
  width: 370px;
  margin-inline: auto;
}

.auth-card form {
  display: grid;
  gap: 14px;
}

.auth-card .btn-primary {
  width: 100%;
  justify-self: stretch;
  border-radius: 17px; /* Adjusted to look better with tight card */
  margin-top: 15px;
}

.auth-card > * {
  position: relative;
  z-index: 1;
}

/* Chat Branding in Auth Card */
.chat-branding {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: 'Instrument Serif', serif !important;
  font-size: 1.8rem;
  font-weight: 400;
  color: #0f172a; /* var(--text) fallback */
  letter-spacing: -0.5px;
  line-height: 1.1;
  padding-bottom: 20px;
}

.chat-branding .branding-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-top: 3px;
  border-radius: 18px;
}

.auth-card-header {
  display: grid;
  gap: 6px;
  text-align: left;
}

.auth-card-header h2 {
  margin: 0;
  font-size: 20px;
}

.auth-card-header p {
  margin: 0;
  font-size: 14px;
  color: rgba(15, 23, 42, .65);
}

.form-group {
  display: grid;
  gap: 6px;
  font-size: 14px;
}

.form-group input {
  height: 35px;
  padding: 0 14px;
  border: 1px solid rgba(148, 163, 184, .6);
  border-radius: 18px;
  background: var(--surface);
  font: inherit;
}

.form-group input:focus {
  outline: 2px solid color-mix(in oklab, var(--accent) 35%, #ffffff);
  outline-offset: 2px;
}

.password-field {
  position: relative;
  display: flex;
  align-items: center;
}

.password-field input {
  width: 100%;
  padding-right: 44px;
}

.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(148, 163, 184, .18);
  cursor: pointer;
  transition: background .2s ease;
}

.password-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%230f172a" stroke-width="1.6"%3E%3Cpath d="M2 12s3.2-6 10-6 10 6 10 6-3.2 6-10 6-10-6-10-6Z"/%3E%3Ccircle cx="12" cy="12" r="3"/%3E%3C/svg%3E') center/contain no-repeat;
  opacity: .75;
}

.password-toggle:is(:hover, :focus-visible) {
  background: rgba(37, 99, 235, .14);
}

.password-toggle.is-active::before {
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%230f172a" stroke-width="1.6"%3E%3Cpath d="M3 3l18 18" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M10.584 10.587A2 2 0 0113.414 13.417"/%3E%3Cpath d="M9.88 4.58A9.86 9.86 0 0112 4c6.8 0 10 6 10 6a19.8 19.8 0 01-2.67 3.517M15.534 15.535A9.6 9.6 0 0112 16c-6.8 0-10-6-10-6a19.7 19.7 0 013.11-3.982" stroke-linecap="round"/%3E%3C/svg%3E') center/contain no-repeat;
  opacity: .9;
}

.btn-primary {
  height: 42px;
  border: 0;
  border-radius: 18px;
  background: var(--main_color);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-primary:hover {
  background: var(--hover_main_color);
  box-shadow: 0 2px 10px var(--main_color_shadow);
}

.btn-primary:active {
  transform: translateY(1px) scale(.98);
}

.error-message {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--danger);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 10px 25px rgba(239, 68, 68, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  width: max-content;
  max-width: 90vw;
}

.error-message.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.error-message::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23dc2626" stroke-width="2"%3E%3Ccircle cx="12" cy="12" r="10"/%3E%3Cline x1="12" y1="8" x2="12" y2="12"/%3E%3Cline x1="12" y1="16" x2="12.01" y2="16"/%3E%3C/svg%3E') center/contain no-repeat;
}

/* Error state for inputs */
.form-group input.has-error,
.form-group input.has-error-static {
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.05);
}

.form-group input.has-error {
  animation: shake 0.4s ease;
}

.form-group input.has-error:focus,
.form-group input.has-error-static:focus {
  outline: 2px solid rgba(239, 68, 68, 0.35);
  outline-offset: 2px;
}

/* Shake animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(calc(var(--padding-xs) * -1)); }
  20%, 40%, 60%, 80% { transform: translateX(var(--padding-xs)); }
}

/* Loading state for button */
.btn-primary.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.btn-primary.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--glass-border);
  border-top-color: var(--surface);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

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