/*
  contact.html only — Glass Noir, permanently (not switchable, unlike the homepage). data-home-style
  is hardcoded to "glass" in this page's own boot script rather than read from sessionStorage, and
  home-glass.css is loaded alongside this file so the shared token overrides, .card frosted-glass
  treatment, .button-primary gradient, and .deco-blobs background wash all apply automatically —
  this file only needs to handle this page's own layout, not re-derive any of Glass Noir's palette.
*/

.page-hero .container {
  position: relative;
}

/* Same gradient-text treatment as the homepage's own .hero-title, for visual continuity. */
.page-hero h1 {
  background: linear-gradient(120deg, var(--ink) 30%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-hero p:not(.eyebrow) {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

/* Contact grid ------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 28px;
  align-items: stretch;
}

.contact-panel,
.chat-panel {
  padding: 32px;
}

.contact-panel h2,
.chat-panel h2 {
  margin-bottom: 20px;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 28px;
}

.contact-method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.contact-method:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(4px);
}

.method-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  flex-shrink: 0;
}

.method-icon .icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.contact-method span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-method strong {
  font-size: 0.82rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
  font-weight: 500;
}

.detail-block {
  padding-top: 18px;
  margin-top: 18px;
  border-top: var(--border-w) solid var(--line);
}

.detail-block h3 {
  margin-bottom: 6px;
}

.detail-block p {
  color: var(--ink-soft);
  font-size: 0.94rem;
}

/*
  This is the page's primary CTA — chat is "the fastest way to reach us" per the lede copy right
  above it, so it gets the more energetic treatment (gradient glow on hover) rather than reading as
  equal-weight with the plain reference-info card beside it.
*/
.chat-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: border-color var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease);
}

.chat-panel:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg), 0 0 50px rgba(139, 107, 255, 0.2);
}

.chat-panel > div:first-child p {
  color: var(--ink-soft);
  margin-top: 8px;
}

.chat-entry-card {
  background: linear-gradient(160deg, rgba(139, 107, 255, 0.14), rgba(47, 216, 224, 0.08));
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-top: auto;
}

.chat-entry-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.chat-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2fd8a0;
  box-shadow: 0 0 0 4px rgba(47, 216, 160, 0.22);
  animation: chat-dot-pulse 2.2s ease-in-out infinite;
}

@keyframes chat-dot-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(47, 216, 160, 0.22);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(47, 216, 160, 0.1);
  }
}

.chat-entry-card p {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-bottom: 16px;
}

@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* First message ------------------------------------------------------------------- */

.section-soft {
  position: relative;
}

.section-heading.compact {
  max-width: 620px;
  margin-bottom: 32px;
}

.section-heading.compact h2 {
  margin-top: 8px;
}

.message-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.message-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px;
  background: var(--surface-elevated);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-md);
  font-size: 0.94rem;
  transition: transform var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease);
}

.message-list li:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}

.message-list li span:first-child {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent-2);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .message-list {
    grid-template-columns: 1fr;
  }
}