/* Beacon AI Guide module styles. Only uses the design tokens from styles.css.
   User bubbles: navy, right-aligned. Beacon bubbles: white cards, left. */

.gd-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
  margin-top: 1rem;
}

.gd-chat {
  background: var(--white); border-radius: var(--radius);
  border: 1px solid rgba(11, 42, 80, 0.05); box-shadow: var(--shadow-soft);
  padding: 1rem 0.9rem; margin-top: 0.8rem;
  min-height: 220px; max-height: 55vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.7rem;
  scroll-behavior: smooth;
}

.gd-row { display: flex; }
.gd-row.user { justify-content: flex-end; }

.gd-bubble {
  max-width: 88%; font-size: 0.9rem; line-height: 1.55;
  padding: 0.75rem 0.95rem;
}
.gd-bubble.user {
  background: var(--navy); color: var(--white);
  border-radius: 16px 16px 4px 16px;
  box-shadow: var(--shadow-soft);
}
.gd-bubble.beacon {
  background: var(--cream); color: var(--navy);
  border: 1px solid var(--line);
  border-radius: 16px 16px 16px 4px;
}

.gd-cite {
  display: block; margin-top: 0.55rem; padding-top: 0.5rem;
  border-top: 1px dashed var(--pale-sea);
  font-size: 0.72rem; font-weight: 700; color: var(--navy);
  text-decoration: none; letter-spacing: 0.02em;
}

.gd-actions { display: flex; gap: 0.45rem; margin-top: 0.55rem; flex-wrap: wrap; }
.gd-actions button {
  display: inline-flex; align-items: center; gap: 0.3rem;
  border: 1.5px solid var(--pale-sea); background: var(--white); color: var(--navy);
  border-radius: 100px; font-size: 0.7rem; font-weight: 700; padding: 0.28rem 0.7rem;
}
.gd-actions button svg { width: 13px; height: 13px; flex: 0 0 auto; }

.gd-sos {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
  color: var(--white); border-radius: var(--radius);
  padding: 1rem 1.05rem; box-shadow: var(--shadow); max-width: 92%;
}
.gd-sos b { font-size: 1rem; font-weight: 800; display: block; }
.gd-sos p { font-size: 0.8rem; opacity: 0.92; margin-top: 0.25rem; }
.gd-sos .row { display: flex; gap: 0.6rem; margin-top: 0.75rem; flex-wrap: wrap; }
.gd-sos .btn {
  flex: 1; background: var(--white); color: var(--red);
  padding: 0.6rem 0.9rem; font-size: 0.85rem; box-shadow: none; min-width: 130px;
}

.gd-inputrow { display: flex; gap: 0.55rem; align-items: center; margin-top: 0.9rem; }
.gd-inputrow input { flex: 1; border-radius: 100px; padding: 0.75rem 1.1rem; font-size: 0.92rem; }
.gd-send, .gd-mic {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-soft); transition: transform 0.15s ease;
}
.gd-send:hover, .gd-mic:hover { transform: translateY(-1px); }
.gd-send { background: var(--red); color: var(--white); }
.gd-mic { background: var(--navy); color: var(--white); }
.gd-mic[aria-pressed="true"] { background: var(--red); animation: gd-pulse 1.1s infinite; }
.gd-send svg, .gd-mic svg { width: 20px; height: 20px; }

@keyframes gd-pulse {
  0% { box-shadow: 0 0 0 0 rgba(198, 32, 46, 0.4); }
  70% { box-shadow: 0 0 0 12px rgba(198, 32, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(198, 32, 46, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .gd-mic[aria-pressed="true"] { animation: none; }
  .gd-chat { scroll-behavior: auto; }
}

.gd-tinynote { font-size: 0.72rem; color: var(--slate); margin-top: 0.55rem; line-height: 1.5; }

.gd-visuallyhidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}