* { box-sizing: border-box; }
body { margin: 0; background: #f4f6f8; color: #19222c; font: 16px/1.5 system-ui, sans-serif; }
main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 880px; margin: 32px auto; padding: 0 max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left)); align-items: start; }
section { background: white; border-radius: 16px; overflow: hidden; }
.editor { padding: 20px; }
h1 { margin: 0 0 16px; font-size: 20px; }
.usage-notice { margin-bottom: 16px; padding: 12px; border: 1px solid #e6bd73; border-radius: 8px; background: #fff8e8; font-size: 13px; }
.usage-notice h2 { margin: 0 0 6px; font-size: 15px; }
.usage-notice p { margin: 0 0 6px; }
.usage-notice ul { margin: 0; padding-inline-start: 1.4em; }
fieldset { border: 1px solid #d5dce3; border-radius: 8px; margin: 0 0 16px; padding: 12px; min-width: 0; }
label { display: block; margin-bottom: 8px; }
input, select, textarea, button { font: inherit; }
input, select, textarea { display: block; width: 100%; padding: 6px; border: 1px solid #aab6c2; border-radius: 6px; }
textarea { resize: vertical; }
button { cursor: pointer; padding: 6px 12px; border: 1px solid #aab6c2; border-radius: 6px; background: white; }
.preview { --chat-blue: #92afd4; }
.chat-header { background: var(--chat-blue); color: #111; }
.status-bar, .chat-toolbar, .composer, .suggestions { display: flex; align-items: center; }
.status-bar { justify-content: space-between; padding: 14px 24px 8px; font-weight: 700; }
.status-icons { display: flex; align-items: center; gap: 5px; }
.battery { padding: 0 4px; border-radius: 5px; background: #111; color: white; font-size: 11px; }
.chat-toolbar { gap: clamp(6px, 2vw, 16px); padding: 13px 14px 8px; }
.chat-back { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
#contact-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-icon { display: block; flex: 0 0 auto; }
.badge { display: block; padding: 0 14px 4px; text-align: right; font-size: 10px; color: #31445e; }
.chat-screen { min-width: min(100%, 260px); display: flex; flex-direction: column; aspect-ratio: var(--screen-ratio, 1179 / 2556); overflow: hidden; background: var(--chat-blue); container-type: inline-size; }
.chat-header, .chat-footer { flex: 0 0 auto; }
#messages { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; padding: 14px 12px 8px; background: var(--chat-blue); }
.chat-footer { background: white; color: #111; padding: 9px 10px 24px; }
.composer { gap: clamp(6px, 2vw, 13px); }
.composer-field { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; padding: 5px 9px; border-radius: 20px; background: #f3f3f3; color: #777; }
.composer-placeholder { color: #666; }
.suggestions { flex-wrap: wrap; gap: clamp(3px, 1vw, 6px); margin-top: 9px; white-space: nowrap; }
.assistant-mark { font-size: 13px; color: #6861d9; }
.suggestion { padding: 5px clamp(4px, 1.3vw, 9px); border-radius: 18px; background: #f6f6f6; font-size: clamp(9px, 2.5vw, 11px); font-weight: 600; }
.message { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 14px; }
.outgoing { flex-direction: row-reverse; }
.avatar { flex: 0 0 30px; height: 30px; align-self: flex-start; border-radius: 50%; background: #e6edf5; text-align: center; line-height: 30px; overflow: hidden; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-controls { margin-bottom: 16px; }
#avatar-status { margin: 8px 0 0; font-size: 13px; color: #415162; }
.bubble { position: relative; min-width: 0; max-width: min(74%, 320px); padding: 8px 12px; border-radius: 19px; background: white; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble::before {
  content: "";
  position: absolute;
  top: 1px;
  left: -4px;
  width: 16px;
  height: 16px;
  background: inherit;
  clip-path: path("M 0 0 C 5 4 11 5 16 2 L 16 16 C 8 15 2 10 0 0 Z");
}
.outgoing .bubble { background: #70e67d; }
.outgoing .bubble::before { left: auto; right: -4px; transform: scaleX(-1); }
time { flex-shrink: 0; font-size: 11px; color: #273a52; }

/* Use the preview width as the scale so the exported PNG has the same proportions. */
.status-bar { padding: 4.1cqw 8.5cqw 1.6cqw 10cqw; font-size: 4.1cqw; }
.status-icons { gap: 1.2cqw; }
.status-clock { display: flex; align-items: center; gap: 0.75cqw; }
.status-clock .chat-icon { width: 3.65cqw; height: 3.65cqw; }
.status-icons .chat-icon { width: 4.5cqw; height: 4.5cqw; }
.battery { padding-inline: 1cqw; font-size: 2.65cqw; }
.chat-toolbar { gap: 4.3cqw; padding: 4.6cqw 3.4cqw 1.4cqw; font-size: 4.2cqw; }
.chat-toolbar .chat-icon { width: 5.1cqw; height: 5.1cqw; }
.badge { padding: 0 2.7cqw 0.5cqw; font-size: 2.25cqw; }
#messages { padding: 1.6cqw 2cqw 1cqw; }
.message { gap: 1.35cqw; margin-bottom: 1.75cqw; }
.avatar { flex-basis: 7.7cqw; height: 7.7cqw; font-size: 3.8cqw; line-height: 7.7cqw; }
.bubble { max-width: min(69%, 320px); padding: 2.35cqw 3.6cqw; border-radius: 4.4cqw; font-size: 3.15cqw; line-height: 1.3; }
#messages time { font-size: 2.15cqw; line-height: 1.4; margin-bottom: 0.9cqw; }
.chat-footer { padding: 2.1cqw 3.5cqw 10.5cqw; }
.composer { gap: 4.2cqw; }
.composer .chat-icon { width: 5.4cqw; height: 5.4cqw; }
.composer-field { min-height: 9cqw; gap: 1cqw; padding: 0.9cqw 2cqw 0.9cqw 3.8cqw; font-size: 3.1cqw; }
.composer-placeholder { color: #9a9a9a; }
.suggestions { gap: 1.65cqw; margin-top: 2.3cqw; }
.assistant-mark { font-size: 3.5cqw; margin-right: 1.1cqw; }
.suggestion { padding: 1.3cqw 2.7cqw; font-size: 2.75cqw; line-height: 1.5; }
.download { padding: 12px 16px; }
#download-status { margin-left: 8px; font-size: 13px; }
#png-preview p { margin: 10px 0 6px; font-size: 13px; }
#png-image { display: block; max-width: 100%; height: auto; margin-inline: auto; }
main.account-page { display: block; max-width: 520px; }
.account-card { padding: 20px; }
.account-card form + form { margin-top: 20px; }
.account-actions { margin-bottom: 16px; }
#draft-status { margin: 4px 0 0; font-size: 13px; }
@media (max-width: 620px) {
  main {
    grid-template-columns: minmax(0, 1fr);
    margin: max(16px, env(safe-area-inset-top)) auto 16px;
    gap: 16px;
  }
  .preview { grid-row: 1; }
  .chat-screen {
    width: min(100%, calc((100svh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * (var(--screen-ratio, 1179 / 2556))));
    margin-inline: auto;
  }
  .editor input, .editor select, .editor textarea { scroll-margin-block: 16px; }
}

@media (min-width: 621px) {
  .editor {
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  .preview {
    position: sticky;
    top: 32px;
  }
  .chat-screen {
    width: min(100%, calc((100dvh - 120px) * (var(--screen-ratio, 1179 / 2556))));
    margin-inline: auto;
  }
}