/* layout.css — page grid and overlays */

.app-main {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: var(--input-h);
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w);
  overflow: hidden;
}

.chat-area {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.overlay {
  position: fixed; inset: 0; z-index: 8000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(800px 600px at 50% 30%, #131c30 0%, #05080f 80%);
  padding: 24px;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.login-card, .offline-card {
  width: 100%; max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  text-align: center;
  backdrop-filter: blur(10px);
}

.login-logo, .offline-logo { width: 96px; height: auto; margin-bottom: 12px; }
.login-title { font-size: 26px; letter-spacing: 0.14em; margin: 4px 0 4px; color: var(--gold); font-weight: 600; }
.login-sub { color: var(--text-dim); margin: 0 0 18px; font-size: 14px; letter-spacing: 0.08em; }
.login-note { color: var(--text-mute); font-size: 12px; margin: 14px 0 0; }

#login-form { display: flex; flex-direction: column; gap: 10px; }
#login-form input {
  background: rgba(0,0,0,0.35); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 16px; outline: none;
}
#login-form input:focus { border-color: var(--gold); }
#login-form button {
  margin-top: 6px; padding: 12px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dim) 100%);
  color: #1a1100; border-radius: var(--radius-sm);
  font-weight: 700; letter-spacing: 0.1em; font-size: 16px;
}
.login-error {
  color: var(--danger); font-size: 13px; margin-top: 4px;
}

.offline-title {
  font-size: 32px; letter-spacing: 0.18em; color: var(--gold);
  margin: 6px 0 8px;
}
.offline-card p { color: var(--text-dim); margin: 0 0 16px; }
.offline-card button {
  padding: 10px 22px; background: transparent; color: var(--gold);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  letter-spacing: 0.08em;
}

.install-banner {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; box-shadow: var(--shadow);
}
.install-actions { display: flex; gap: 8px; }
.install-actions button {
  padding: 6px 12px; border-radius: var(--radius-sm);
  background: var(--gold); color: #1a1100; font-weight: 600;
}
.install-actions .link-btn { background: none; color: var(--text-dim); padding: 6px; }