/*
 * DEAD DROP — transmit screen skin (M5). Reusable CSS layer over the working app, driven by
 * tokens.css. The signature blue transmit view is the one bold element; everything else stays
 * quiet around it (§2.1). All motion/effects degrade under prefers-reduced-motion via the tokens.
 *
 * Apply `.dd` to the screen root. Markup contract (see client/preview/transmit.html):
 *   .dd > .dd-bar, .dd-sub, .dd-log (.dd-msg / .dd-who / .dd-sys / .dd-gone), .dd-compose
 */

.dd {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  color: var(--dd-ink);
  font-family: var(--dd-font-msg);
  background: var(--dd-field);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* CRT scanline overlay (confined to the terminal so it works embedded in a window). */
.dd::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(var(--dd-scanline) 0 1px, transparent 1px 3px);
}

/* One-time boot sweep on mount. */
.dd-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 42px;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(rgba(220, 232, 255, 0.16), transparent);
  animation: dd-sweep 1.25s ease-out 1 forwards;
}
@keyframes dd-sweep {
  0% { transform: translateY(-60px); opacity: 1; }
  100% { transform: translateY(102vh); opacity: 0; }
}

.dd-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(env(safe-area-inset-top) + 15px) 18px 8px;
  color: var(--dd-ink-dim);
  font-size: var(--dd-chrome-size);
  letter-spacing: 0.18em;
}

/* Secure transmit indicator. */
.dd-tx {
  display: inline-block;
  width: 0.52em;
  height: 0.86em;
  margin-right: 0.35em;
  vertical-align: -1px;
  background: var(--dd-secure);
  box-shadow: 0 0 7px rgba(116, 240, 168, 0.6);
  animation: dd-pulse 2s ease-in-out infinite;
}
@keyframes dd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Peer identity line: name + verified key fingerprint (sealed-sender recognition). */
.dd-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px 12px;
  color: var(--dd-ink-dim);
  font-size: 11px;
  letter-spacing: 0.12em;
  opacity: 0.78;
  border-bottom: 1px solid rgba(157, 184, 240, 0.2);
}

.dd-log {
  flex: 1;
  padding: 22px 18px 10px var(--dd-margin);
  overflow-y: auto;
  font-size: var(--dd-msg-size);
  line-height: var(--dd-msg-leading);
  font-weight: var(--dd-msg-weight);
}

.dd-msg {
  margin-bottom: 6px;
  text-shadow: var(--dd-glow);
}

.dd-who {
  margin-bottom: 22px;
  color: var(--dd-ink-dim);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.09em;
}

.dd-sys {
  margin-bottom: 22px;
  color: var(--dd-ink-sys);
  font-weight: 400;
  font-size: 0.6em;
}

/* Near-expiry: warm tone + soft throb. */
.dd-msg.dd-warn,
.dd-who.dd-warn { color: var(--dd-warn); }
.dd-near { animation: dd-throb 1s ease-in-out infinite; }
@keyframes dd-throb {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Destroyed-message tombstone (crypto-erased). */
.dd-gone {
  margin-bottom: 22px;
  padding-left: 0.7em;
  color: var(--dd-ink-ghost);
  font-weight: 400;
  font-size: 0.6em;
  letter-spacing: 0.05em;
  border-left: 2px solid rgba(95, 120, 192, 0.5);
}

.dd-compose {
  display: flex;
  align-items: center;
  gap: 0.42em;
  padding: 14px 18px calc(env(safe-area-inset-bottom) + 18px);
  border-top: 1px solid rgba(157, 184, 240, 0.2);
  font-size: clamp(20px, 6vw, 25px);
  font-weight: var(--dd-msg-weight);
}
.dd-prompt { color: var(--dd-ink-dim); }
/* The live compose field: a terminal-native input, not the boxed chrome input. */
.dd-compose-input {
  flex: 1;
  width: auto;
  min-width: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  color: var(--dd-ink);
  font: inherit;
  font-size: clamp(20px, 6vw, 25px);
  font-weight: var(--dd-msg-weight);
  caret-color: var(--dd-cursor);
}
.dd-compose-input:focus { outline: none; }
.dd-compose .dd-btn { font-size: 14px; font-weight: 400; }
.dd-cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  background: var(--dd-cursor);
  box-shadow: var(--dd-cursor-glow);
  animation: dd-blink var(--dd-cursor-blink) steps(1) infinite;
}
@keyframes dd-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dd-sweep { display: none; }
  .dd-tx,
  .dd-cursor,
  .dd-near { animation: none; }
}