/* content.css — the Content editor (.cn-) and the Messenger screen (.mg-) */

.cn-preview {
  min-width: 0; padding: 18px 20px; border-radius: var(--radius); background: var(--grad-teal); color: #fff; overflow-wrap: anywhere;
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25;
}
.cn-preview-s { font-family: var(--font-script); color: var(--yellow); font-size: 1.35em; }

.cn-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 10px; }
.cn-tile {
  position: relative; min-width: 0; padding: 0; border: 2px solid var(--line); border-radius: 12px; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--aqua-tint); cursor: pointer;
}
.cn-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cn-tile.on { border-color: var(--aqua-deep); }
.cn-tile:not(.on) img { opacity: .45; filter: grayscale(1); }
.cn-tick {
  position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--yellow); color: var(--brand-dark);
}
.cn-tick svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------- messenger */

.mg-row {
  display: flex; align-items: flex-start; gap: 14px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
}
.mg-row.sent { background: var(--bg); }
.mg-row .grow { min-width: 0; }
.mg-text {
  margin: 6px 0 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.5; white-space: pre-wrap;
  overflow-wrap: anywhere; max-height: 8.4em; overflow-y: auto;
}
.mg-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 1 170px; min-width: 0; max-width: 100%; align-items: stretch; }
.mg-actions .btn { max-width: 100%; white-space: normal; }
.mg-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.mg-dot.on { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-tint); }
.mg-placeholders { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-ph {
  max-width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; overflow-wrap: anywhere;
  padding: 5px 9px; border-radius: 8px; background: var(--aqua-tint-2); color: var(--aqua-text);
}

@media (max-width: 760px) {
  .mg-row { flex-direction: column; }
  .mg-actions { flex-direction: row; flex-wrap: wrap; flex-basis: auto; width: 100%; }
  .mg-actions .btn { flex: 1 1 130px; }
  .cn-preview { font-size: 1.2rem; }
}