/* Native 267 x 162 embed; posting/authentication handlers stay unchanged. */
.sayhi #post{padding:3px 5px;flex:0 0 auto}
.sayhi #post .compose{grid-template-columns:61px minmax(0,1fr) auto;gap:2px 3px}
.sayhi #post .compose input{height:20px;padding:2px 3px;font:10px/14px Verdana,Arial,sans-serif}
.sayhi #post #url{grid-column:2/4}
.sayhi #post #body{grid-column:1/3}
.sayhi .compose-actions{gap:3px;align-items:center}
.sayhi .compose-actions .smiley-trigger{width:22px;min-width:22px;flex-basis:22px;height:20px;min-height:20px;padding:2px}
.sayhi .compose-actions .smiley-trigger svg{width:14px;height:14px}
.sayhi .compose-actions button[type=submit]{height:20px;min-height:20px;padding:1px 4px;font:10px/14px Verdana,Arial,sans-serif}
.sayhi .form-note{min-height:13px;margin-top:1px;gap:5px;flex-wrap:nowrap;font:9px/12px Verdana,Arial,sans-serif}
.sayhi .form-note>span:empty{display:none}
.sayhi .history{flex:0 0 auto}
html .sayhi .history .scroll-button{min-width:18px;min-height:16px;padding:0 3px;font-size:9px;line-height:14px}
.sayhi header{flex:0 0 auto;padding:2px 5px}
.sayhi #status:not(:empty){padding:2px 5px;font-size:9px;line-height:12px}
html[data-sayhi-theme] .sayhi,html[data-sayhi-theme] .sayhi header,html[data-sayhi-theme] .sayhi form,html[data-sayhi-theme] .sayhi #status,html[data-sayhi-theme] .sayhi .message,html[data-sayhi-theme] .sayhi .history{color:var(--theme-font)}
html[data-sayhi-theme] .sayhi input{color:var(--theme-font);background:var(--theme-textbox);border-color:var(--theme-field-border)}
html[data-sayhi-theme] .sayhi input::placeholder{color:var(--theme-font);opacity:.75}
html[data-sayhi-theme] .sayhi .message a{color:var(--theme-poster-link)}
html[data-sayhi-theme] .sayhi .message a:hover,html[data-sayhi-theme] .sayhi .message a:focus-visible{color:var(--theme-poster-hover)}
html[data-sayhi-theme] .sayhi{border-color:var(--theme-border)}
/* Transparent borders preserve layout, focus outlines and saved colour values. */
html[data-outer-border-off] .sayhi{border-color:transparent}
html[data-field-borders-off] .sayhi #post .compose input{border-color:transparent}
.admin-page #theme-controls input[type=checkbox]{display:inline-block;width:auto;max-width:none;padding:0;margin-right:6px;vertical-align:middle}

/* SayHi R21: 32px smileys, compact inline visitor rows, separate hit areas. */
.sayhi .smiley-image{width:auto;height:auto;max-width:32px;max-height:32px;object-fit:contain;image-rendering:pixelated}
html .sayhi .messages .message{margin:0;padding:0;border-bottom:0;line-height:14px}
.sayhi .messages .message p{display:inline;margin:0;white-space:pre-wrap}
.sayhi .messages .message strong::after{content:": ";white-space:pre}
.sayhi .messages .message time{font-size:8px;line-height:inherit;margin-right:3px;opacity:.8;white-space:nowrap}
.sayhi .smiley-picker{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:center;gap:2px;padding:2px}
.sayhi .smiley-picker button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;min-width:44px;min-height:44px;padding:2px;margin:0;line-height:1;vertical-align:middle}

/* Fine-pointer desktop: recover message space without shrinking action buttons. */
.sayhi #post{padding:2px 5px}
.sayhi #post .compose{gap:1px 3px}
.sayhi #post .compose input{height:16px;padding:0 2px;font:9px/12px Verdana,Arial,sans-serif}
/* Preserve existing R20 form dimensions on touch-first devices. */
@media(pointer:coarse){
 .sayhi #post{padding:3px 5px}
 .sayhi #post .compose{gap:2px 3px}
 .sayhi #post .compose input{height:20px;padding:2px 3px;font:10px/14px Verdana,Arial,sans-serif}
}

/* Compact appearance update: retain existing 32px smiley display and touch fields. */
/* Remove only the header control that opens a larger/new SayHi window. */
.sayhi header nav a[aria-label="Open larger SayHi"]{display:none}

/* Exact approved text inserts; keep the compact footer on one line. */
.sayhi .form-note{gap:3px}
.sayhi .form-note>span:not(:empty){flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sayhi .form-note>button,.sayhi .form-note>a{flex:0 0 auto;white-space:nowrap}
.sayhi .form-note .symbol-trigger{min-height:13px;padding:0 2px;font:9px/12px Verdana,Arial,sans-serif;white-space:pre}