.contact-layout { grid-template-columns: minmax(0, 1.25fr) minmax(290px, 1fr); gap: 7%; padding-block: 28px; }
.contact-action { background: none; padding: 0; }
.contact-action:before { display: none; }
.contact-section > .contact-orbit {
  width: min(980px, 82%);
  left: 16%;
  -webkit-mask-image: radial-gradient(ellipse 72% 76% at 60% 38%, #000 16%, rgba(0, 0, 0, .92) 48%, rgba(0, 0, 0, .46) 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 76% at 60% 38%, #000 16%, rgba(0, 0, 0, .92) 48%, rgba(0, 0, 0, .46) 70%, transparent 100%);
}
.contact-preview {
  position: relative;
  margin-top: 0;
  padding: 14px 16px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 74%, rgba(255, 255, 255, .2));
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .045), transparent 34%),
    linear-gradient(125deg, color-mix(in srgb, var(--accent) 5%, transparent), rgba(var(--scene-rgb), .76));
  -webkit-backdrop-filter: blur(18px) saturate(.82);
  backdrop-filter: blur(18px) saturate(.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(0, 0, 0, .22),
    0 18px 44px rgba(0, 0, 0, .18);
}
.contact-preview-header,.contact-preview-footer { display: flex; align-items: center; gap: 8px; font: 8px/1.5 ui-monospace, monospace; letter-spacing: .07em; color: var(--muted); }
.contact-agent { width: 28px; height: 28px; flex: none; color: var(--accent); }
.contact-intent { display: flex; align-items: center; gap: 9px; min-height: 3em; margin: 10px 0 0; color: var(--muted); font: 10px/1.5 ui-monospace,monospace; }
.contact-thinking-dots { display: flex; gap: 3px; flex: none; }
.contact-thinking-dots i { width: 3px; height: 3px; border-radius: 50%; background: var(--accent); opacity: .3; }
.is-thinking .contact-thinking-dots i { animation: contact-think .7s ease-in-out infinite alternate; }
.is-thinking .contact-thinking-dots i:nth-child(2) { animation-delay: .15s; }
.is-thinking .contact-thinking-dots i:nth-child(3) { animation-delay: .3s; }
.is-thinking .contact-agent { animation: contact-agent-wake 1.3s ease-in-out infinite; }
.contact-another { padding: 4px 0; border: 0; background: none; color: var(--muted); font: 10px/1.5 ui-monospace,monospace; cursor: pointer; }
.contact-another:hover { color: var(--ink); }
.contact-another:disabled { opacity: .4; cursor: wait; }
.contact-another:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.contact-preview-footer { min-height: 24px; }
@keyframes contact-think { to { opacity: 1; transform: translateY(-3px); } }
.contact-preview-state { margin-left: auto; font-size: 7px; color: var(--accent); }
.contact-draft { min-height: 5.1em; margin: 12px 0 14px; font-size: 13px; line-height: 1.7; color: var(--ink); }
.contact-preview-footer { justify-content: space-between; gap: 12px; font-size: 7px; }
.contact-use-draft { padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 5px; background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: 10px; color: var(--ink); letter-spacing: 0; text-decoration: none; white-space: nowrap; }
.contact-use-draft:hover { color: var(--accent); }
.contact-use-draft:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.is-drafting .contact-draft-text:after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 4px; background: var(--accent); vertical-align: -.12em; animation: draft-cursor .7s steps(2,end) infinite; }
.is-drafting .contact-agent { animation: contact-agent-wake 2s ease-in-out both; }
.contact-awake .contact-message em { background: linear-gradient(110deg,var(--accent) 35%,var(--ink) 49%,var(--accent) 63%); background-size: 260% 100%; background-position: 100% 0; background-clip: text; -webkit-background-clip: text; color: transparent; animation: contact-shimmer 2.4s .2s ease-in-out both; }
@keyframes draft-cursor { 50% { opacity: 0; } }
@keyframes contact-agent-wake { 50% { transform: rotate(12deg) scale(1.12); opacity: .65; } }
@keyframes contact-shimmer { to { background-position: 0 0; } }
@media (max-width: 720px) {
  .contact-layout { gap: 24px; }
  .contact-action { max-width: none; }
  .contact-draft { font-size: 12px; }
  .contact-section > .contact-orbit {
    width: 620px;
    right: -250px;
    left: auto;
    -webkit-mask-image: radial-gradient(ellipse 68% 74% at 58% 34%, #000 12%, rgba(0, 0, 0, .82) 48%, rgba(0, 0, 0, .32) 72%, transparent 100%);
    mask-image: radial-gradient(ellipse 68% 74% at 58% 34%, #000 12%, rgba(0, 0, 0, .82) 48%, rgba(0, 0, 0, .32) 72%, transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce) { .contact-awake .contact-message em { animation: none; background: none; color: var(--accent); } .is-thinking .contact-thinking-dots i,.is-thinking .contact-agent,.is-drafting .contact-agent,.is-drafting .contact-draft-text:after { animation: none; } }
@media print { .contact-preview { display: none; } .contact-layout { padding-block: 10px; } }

.contact-recipient { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.contact-recipient > span { font: 8px/1.5 ui-monospace,monospace; color: var(--muted); }
.contact-recipient .contact-button { display: inline-flex; width: auto; font-size: 11px; }
.contact-recipient .contact-address { min-height: 0; padding: 0; border: 0; background: none; color: var(--muted); font-weight: 400; }
.contact-recipient .contact-arrow { display: none; }
.contact-recipient .contact-button:hover .contact-address { color: var(--ink); }
.contact-draft { min-height: 6.8em; }