/* Glass primitives — light-mode glass relief.
   Used for sidebar, file cards, dialogs, chat composer, install banner. */

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg);
}

.glass-card-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg);
}

.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Glass icon cell — translucent teal at the crown, cream-warm at the base.
   Matches the brand-cover "icons-foot" copy: "soft glass relief". */
.glass-icon-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 120% at 50% 20%,
      rgba(158, 103, 247, 0.55) 0%,
      rgba(255, 255, 255, 0.85) 50%,
      rgba(213, 243, 138, 0.85) 100%);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.7),
    0 4px 10px rgba(40, 35, 35, 0.06);
  color: var(--inkwell-twilight);
}
.glass-icon-cell.lg { width: 56px; height: 56px; border-radius: var(--radius-lg); }
.glass-icon-cell.sm { width: 28px; height: 28px; border-radius: 8px; }
.glass-icon-cell svg { width: 60%; height: 60%; }

/* Scrim for modals */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(40, 35, 35, 0.40);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadein .15s ease-out;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes slidein-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.dialog {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  max-width: 900px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(40, 35, 35, 0.25);
  animation: slidein-up .2s ease-out;
}
.dialog-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--stroke-1);
}
.dialog-body { flex: 1; overflow: auto; padding: 24px; }
.dialog-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--stroke-1);
}