/* camera chốn riêng, the result sheet and the sticker editor. */

.sheet { width: 100%; max-width: 440px; max-height: 100dvh; margin: auto auto 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; }
.sheet::backdrop { background: oklch(8% 0.02 var(--hue) / 0.7); }
.sheet__panel { display: grid; gap: var(--space-3); padding: var(--space-4); padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); background: var(--surface); border-radius: 24px 24px 0 0; max-height: 100dvh; overflow-y: auto; }
@media (min-width: 600px) { .sheet { margin: auto; } .sheet__panel { border-radius: 24px; } }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sheet__media { position: relative; display: grid; place-items: center; max-height: 52dvh; min-height: 0; border-radius: var(--radius); overflow: hidden; background: oklch(12% 0.012 var(--hue)); touch-action: none; }
.sheet__media img, .sheet__media video, .sheet__media canvas { display: block; max-width: 100%; max-height: 52dvh; width: auto; height: auto; object-fit: contain; }
.sheet__actions { display: grid; gap: var(--space-2); }
.sheet__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.sheet__row--one { grid-template-columns: 1fr; }
.sheet .toast { bottom: auto; top: calc(var(--space-5) * -2); }
.sheet__note { font-size: var(--step--1); color: var(--ink-3); min-height: 1.5em; }
.sheet__note:empty { display: none; }

.editor { display: grid; gap: var(--space-2); }
.editor__tray { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); }
.editor__tray::-webkit-scrollbar { display: none; }
.editor__tray button { flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 14px; background: var(--surface-2); display: grid; place-items: center; }
.editor__tray canvas { width: 46px; height: 46px; }
.editor__text { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); }
.editor__text input { min-height: 44px; padding: 0 var(--space-3); border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink); font: 500 var(--step-0) var(--font-hand); }
.editor__text input::placeholder { color: var(--ink-3); }
.editor__hint { font-size: var(--step--1); color: var(--ink-3); }
.sheet.is-editing .sheet__actions, .sheet.is-editing .sheet__note { display: none; }