/* ==========================================================================
   message.css — the message preview and its copy button
   ========================================================================== */

.message-section { display: flex; flex-direction: column; }

.message-preview {
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
  /* Grow to whatever the sticky panel can show, so the whole message is
     usually visible without scrolling. */
  max-height: calc(100vh - 250px);
  min-height: 220px;
  overflow-y: auto;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}

.message-preview.flash { animation: msg-flash 600ms var(--ease); }

@keyframes msg-flash {
  0%   { border-color: var(--accent); background: var(--accent-wash); }
  100% { border-color: var(--border); background: var(--surface-alt); }
}

.message-preview .line-warn    { color: var(--critical); font-weight: 600; }
.message-preview .line-holiday { color: var(--caution); font-weight: 600; }
.message-preview .line-note    { color: var(--text); font-weight: 600; }
.message-preview .line-link    { color: var(--accent); word-break: break-all; }

/* ----------------------------------------------------------- copy CTA -- */
/* Copying is the whole job, so the button spans the panel. */
.btn-block {
  width: 100%;
  height: 44px;
  margin-top: 16px;
  font-size: 14px;
}

.btn-copy.copied { background: var(--positive); }

.copy-hint {
  margin-top: 10px;
  text-align: center;
}
.copy-hint kbd { margin: 0 1px; }

/* --------------------------------------------------------- save state -- */
.save-state {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.save-state.visible { opacity: 1; }
.save-state.saved { color: var(--positive); }
.save-state.failed { color: var(--critical); }