/* m3.css — M3 images: photo chip, photo bubbles, before/after view, save, full-screen viewer, first-time notice. */

/* Photo ready chip — sits right above the textarea */
.m3-chip { width: min(100%, 34rem); display: flex; align-items: center; gap: .6rem; background: var(--white); border-radius: 16px; padding: .4rem .4rem .4rem .5rem; box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.m3-chip[hidden] { display: none; }
.m3-chip-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--bg); flex: none; }
.m3-chip-text { flex: 1; font-size: 1rem; color: var(--ink-2); }
.m3-chip-x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); font: inherit; font-size: 1.1rem; cursor: pointer; flex: none; }
.m3-chip-x:active { background: var(--bg); }

/* The person's turn: thumbnail + words */
.bubble--photo { display: flex; flex-direction: column; gap: .5rem; }
.m3-thumb { max-width: 180px; max-height: 180px; width: auto; height: auto; border-radius: 12px; display: block; }

/* Kergo working */
.m3-working::after { content: "…"; display: inline-block; animation: pulse 1s infinite; }

/* Kergo's turn: the picture */
.bubble--kergo.m3-result { width: 100%; max-width: 100%; padding: .5rem; }
.m3-pic { margin: 0; position: relative; }
.m3-main { width: 100%; height: auto; display: block; border-radius: 14px; background: var(--bg); cursor: zoom-in; }
.m3-badge { position: absolute; top: .6rem; left: .6rem; background: rgba(0,0,0,.55); color: #fff; font-size: .85rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; pointer-events: none; }
.m3-toggle { display: flex; margin: .6rem 0 0; background: var(--bg); border-radius: 999px; padding: 3px; }
.m3-toggle button { flex: 1; font: inherit; font-size: 1rem; font-weight: 600; min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; }
.m3-toggle button[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.m3-text { margin: .6rem .35rem 0; color: var(--ink-2); font-size: 1rem; }
.m3-actions { display: flex; gap: .6rem; margin-top: .6rem; }
.m3-save { flex: 1; min-height: 52px; font-size: 1.1rem; padding: .75rem 1rem; }

/* First-time photo notice — one plain line, one button */
.m3-notice { align-self: center; max-width: 30rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: .5rem .75rem; }
.m3-notice p { margin: 0; color: var(--ink-2); font-size: 1.02rem; }
.m3-notice .btn { min-height: 48px; padding: .6rem 2rem; }

/* Full-screen viewer: big picture, press-and-hold to save on iOS */
.m3-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: calc(var(--safe-top) + 1rem) 1rem calc(var(--safe-bottom) + 1rem); }
.m3-overlay img { max-width: 100%; max-height: 80dvh; width: auto; height: auto; object-fit: contain; border-radius: 8px; -webkit-touch-callout: default; }
.m3-hint { margin: 0; color: #fff; font-size: 1.05rem; text-align: center; min-height: 1.5em; }
.m3-hint a { color: #fff; font-weight: 600; }
.m3-close { position: absolute; top: calc(var(--safe-top) + .5rem); right: .75rem; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font: inherit; font-size: 1.3rem; cursor: pointer; }