/* ==========================================================================
   asyrul.dev — Transmission section: embedded AI chat (terminal style)
   ========================================================================== */

.transmission {
  background:
    radial-gradient(ellipse 70% 60% at 50% 120%, rgba(78, 225, 232, 0.07), transparent 70%),
    var(--ay-space-950);
}

/* --------------------------------------------------------------------------
   Modal + backdrop — 250ms fade transition (reso-ui ModalContainer pattern:
   class toggles the transition; JS keeps the DOM visible until it finishes)
   -------------------------------------------------------------------------- */

.chat_backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(2, 4, 12, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms var(--ay-ease), visibility 0s 250ms;
}

.chat_backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 250ms var(--ay-ease);
}

.chat_modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px var(--ay-section-pad);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms var(--ay-ease), visibility 0s 250ms;
}

.chat_modal .chat_terminal {
  pointer-events: auto;
  width: 100%;
}

.chat_modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 250ms var(--ay-ease);
}

@media (prefers-reduced-motion: reduce) {
  .chat_backdrop,
  .chat_modal {
    transition: none;
  }
}

body.chat-open {
  overflow: hidden;
}

.chat_close {
  background: transparent;
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius-pill);
  color: var(--ay-text-dim);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
}

.chat_close:hover {
  color: var(--ay-signal);
  border-color: var(--ay-signal-dim);
}

.chat_terminal {
  background: var(--ay-glass-heavy);
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius-lg);
  box-shadow: var(--ay-shadow-deep);
  overflow: hidden;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* Terminal chrome bar */
.chat_chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--ay-line);
  background: var(--ay-space-900);
}

.chat_chrome_title {
  font-family: var(--ay-font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ay-text-dim);
  flex: 1;
  text-align: left;
}

.chat_chrome_status {
  font-family: var(--ay-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--ay-signal);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.chat_chrome_status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ay-signal);
  box-shadow: 0 0 8px var(--ay-signal);
  animation: hero-pulse 2s infinite;
}

/* Messages area */
.chat_messages {
  height: 440px;
  overflow-y: auto;
  padding: 24px 22px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--ay-space-600) transparent;
}

.chat_messages::-webkit-scrollbar {
  width: 8px;
}

.chat_messages::-webkit-scrollbar-thumb {
  background: var(--ay-space-600);
  border-radius: var(--ay-radius-pill);
}

.chat_msg {
  max-width: 86%;
  margin-bottom: 18px;
  animation: msg-in 300ms var(--ay-ease);
}

@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.chat_msg_name {
  font-family: var(--ay-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--ay-text-dim);
}

.chat_msg_bubble {
  border-radius: var(--ay-radius);
  font-size: 0.94rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat_msg--user .chat_msg_bubble {
  padding: 13px 17px;
}

.chat_msg--assistant {
  max-width: 100%;
}

.chat_msg_text {
  font-size: 0.94rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ay-text);
  padding: 0;
}

.chat_msg--user {
  margin-left: auto;
}

.chat_msg--user .chat_msg_name {
  text-align: right;
}

.chat_msg--user .chat_msg_bubble {
  background: linear-gradient(135deg, rgba(78, 225, 232, 0.12), rgba(124, 92, 255, 0.14));
  border: 1px solid var(--ay-signal-dim);
  border-bottom-right-radius: 3px;
  color: var(--ay-text-bright);
}

/* Shimmer border while awaiting response (Persona AI technique) */
.chat_msg--pending .chat_msg_bubble {
  border: 1px solid transparent;
  background-image:
    linear-gradient(var(--ay-space-800), var(--ay-space-800)),
    linear-gradient(90deg, var(--ay-signal-dim), var(--ay-plasma), var(--ay-signal-dim));
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 200% 100%;
  animation: border-shimmer 2.2s linear infinite;
}

@keyframes border-shimmer {
  0% { background-position: 0 0, 200% 0; }
  100% { background-position: 0 0, -200% 0; }
}

.chat_msg--error .chat_msg_bubble {
  padding: 13px 17px;
  border: 1px solid var(--ay-error-border);
  background: var(--ay-error-bg);
  color: var(--ay-error-text);
}

/* Markdown-lite inside messages */
.chat_msg_bubble code,
.chat_msg_text code {
  font-family: var(--ay-font-mono);
  font-size: 0.85em;
  background: var(--ay-space-950);
  border: 1px solid var(--ay-line);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--ay-signal);
}

.chat_msg_bubble a,
.chat_msg_text a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chat_msg_bubble strong,
.chat_msg_text strong {
  color: var(--ay-text-bright);
}

/* Planning status — shimmer text shown while the agent runs tools
   (Persona AI's gradient-clipped-text technique) */
.chat_msg--planning {
  margin-bottom: 10px;
}

.chat_planning_text {
  font-family: var(--ay-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  background: linear-gradient(
    90deg,
    var(--ay-text-dim) 0%,
    var(--ay-text-bright) 40%,
    var(--ay-text-dim) 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: chat-shimmer 1.8s linear infinite;
}

@keyframes chat-shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@media (prefers-reduced-motion: reduce) {
  .chat_planning_text {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--ay-text-dim);
  }
}

/* Typing indicator */
.chat_typing {
  display: none;
  align-items: center;
  gap: 5px;
  background: var(--ay-space-800);
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius);
  border-bottom-left-radius: 3px;
  padding: 14px 16px;
  width: fit-content;
  margin-bottom: 18px;
}

.chat_typing.is-active {
  display: inline-flex;
}

.chat_typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ay-signal);
  animation: typing-bounce 1.8s infinite ease-in-out;
}

.chat_typing i:nth-child(2) {
  animation-delay: 150ms;
}

.chat_typing i:nth-child(3) {
  animation-delay: 300ms;
}

@keyframes typing-bounce {
  0%, 60%, 100% {
    transform: none;
    opacity: 0.4;
  }
  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* Starter pills — shown only while history is empty */
.chat_starters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 22px 16px;
}

.chat_starter {
  font-family: var(--ay-font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  color: var(--ay-text);
  background: transparent;
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius-pill);
  padding: 8px 15px;
  cursor: pointer;
  transition: border-color 200ms, color 200ms, background 200ms;
}

.chat_starter:hover {
  border-color: var(--ay-signal);
  color: var(--ay-signal);
  background: var(--ay-signal-faint);
}

/* Input area */
.chat_input_row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  border-top: 1px solid var(--ay-line);
  background: var(--ay-space-900);
}

.chat_input_field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.chat_input_prefix {
  font-family: var(--ay-font-mono);
  color: var(--ay-plasma);
  font-size: 0.9rem;
  padding-top: 10px;
  user-select: none;
}

.chat_input {
  flex: 1;
  resize: none;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ay-text-bright);
  font-family: var(--ay-font-mono);
  font-size: 16px;
  line-height: 1.5;
  padding: 10px 0;
  max-height: 120px;
  width: 100%;
}

.chat_input_actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.chat_input::placeholder {
  color: var(--ay-text-dim);
}

.chat_input:disabled {
  opacity: 0.5;
}

.chat_mic {
  background: transparent;
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius-sm);
  color: var(--ay-text-dim);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 200ms, border-color 200ms;
}

.chat_mic:hover:not(:disabled) {
  color: var(--ay-signal);
  border-color: var(--ay-signal-dim);
}

.chat_mic:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.chat_mic.is-recording {
  color: var(--ay-error-text);
  border-color: var(--ay-error-border);
  animation: mic-pulse 1.4s infinite;
}

.chat_mic.is-busy {
  color: var(--ay-plasma);
  border-color: var(--ay-plasma-faint);
  animation: mic-pulse 1.4s infinite;
}

@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 82, 82, 0.25); }
  50% { box-shadow: 0 0 0 6px rgba(240, 82, 82, 0); }
}

.chat_send {
  font-family: var(--ay-font-display);
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  color: var(--ay-on-accent);
  background: var(--ay-gradient-signal);
  border: none;
  border-radius: var(--ay-radius-sm);
  padding: 11px 22px;
  cursor: pointer;
  transition: box-shadow 200ms, opacity 200ms;
}

.chat_send:hover:not(:disabled) {
  box-shadow: var(--ay-glow-signal);
}

.chat_send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Real-time voice call modal — phone-call style: column layout, pulsing orb,
   big timer, full-width End Call. Shares the chat modal's fade classes.
   -------------------------------------------------------------------------- */

.voice_modal .voice_call {
  pointer-events: auto;
  position: relative;
}

.voice_call_close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--ay-text-dim);
  background: transparent;
  border: 1px solid var(--ay-line);
  border-radius: 50%;
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
}

.voice_call_close:hover {
  color: var(--ay-text-bright);
  border-color: var(--ay-text-dim);
}

.voice_call {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  width: 100%;
  max-width: 360px;
  padding: 40px 28px 24px;
  background: var(--ay-glass-heavy);
  border: 1px solid var(--ay-line);
  border-radius: var(--ay-radius-lg);
  box-shadow: var(--ay-shadow-deep);
}

/* the "caller" orb — pulses while the line is live */
.voice_call_dot {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--ay-space-600), var(--ay-space-800));
  border: 1px solid var(--ay-line);
  margin-bottom: 14px;
}

.voice_call.is-live .voice_call_dot {
  background: var(--ay-gradient-signal);
  border: none;
  box-shadow: var(--ay-glow-signal);
  animation: voice-orb 1.8s infinite ease-in-out;
}

@keyframes voice-orb {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

.voice_call_name {
  font-family: var(--ay-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ay-text-bright);
}

.voice_call_status {
  font-family: var(--ay-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ay-text-dim);
  min-height: 1.2em;
}

.voice_call.is-live .voice_call_status {
  color: var(--ay-signal);
}

.voice_call_timer {
  font-family: var(--ay-font-mono);
  font-size: 2.1rem;
  font-weight: 500;
  color: var(--ay-text-bright);
  margin: 10px 0 2px;
}

/* final minute — the countdown turns urgent */
.voice_call.is-ending .voice_call_timer {
  color: var(--ay-error-text);
  animation: hero-pulse 1.2s infinite;
}

.voice_call_note {
  font-family: var(--ay-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--ay-text-dim);
  margin-bottom: 22px;
}

.voice_call_end {
  width: 100%;
  font-family: var(--ay-font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  color: var(--ay-error-text);
  background: var(--ay-error-bg);
  border: 1px solid var(--ay-error-border);
  border-radius: var(--ay-radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  transition: filter 200ms;
}

.voice_call_end:hover {
  filter: brightness(1.2);
}

.chat_disclaimer {
  font-family: var(--ay-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--ay-text-dim);
  text-align: center;
  padding: 0 18px 14px;
  background: var(--ay-space-900);
}

@media (max-width: 620px) {
  /* Fill the viewport: the terminal becomes a column and the messages
     area flexes to take all remaining height (instead of a fixed 380px) */
  .chat_modal {
    padding: 10px;
    align-items: stretch;
  }

  .chat_modal .chat_terminal {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .chat_messages {
    flex: 1;
    height: auto;
    min-height: 0;
  }

  .chat_msg {
    max-width: 94%;
  }

  .voice_modal {
    align-items: center;
  }

  .voice_modal .voice_call {
    height: auto;
  }
}