:root{color-scheme:light;--ink:#5b3e4c;--line:#dbb9c9;--pink:#f8eaf1;--accent:#8b4467}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font:12px/1.35 Verdana,Arial,sans-serif;color:var(--ink);background:#fffafd}button,input{font:inherit}button,a{color:var(--accent)}button{cursor:pointer;border:1px solid var(--line);border-radius:3px;background:#fff7fb;padding:3px 6px}button:hover{background:#f4dbe7}button:disabled{opacity:.6;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #803658;outline-offset:1px}a{text-decoration:underline}header{display:flex;justify-content:space-between;align-items:center;padding:3px 6px;background:var(--pink);border-bottom:1px solid var(--line)}header nav{display:flex;align-items:center;gap:6px}header button{border:0;padding:0;background:transparent;font-size:10px}.sayhi{height:100dvh;min-height:162px;max-width:600px;margin:auto;border:1px solid var(--line);display:flex;flex-direction:column}.messages{flex:1;min-height:40px;overflow:auto;padding:3px 6px}.message{padding:4px 0;border-bottom:1px dotted var(--line);overflow-wrap:anywhere}.message p{margin:2px 0;white-space:pre-wrap}.message time{font-size:9px;opacity:.8;margin-right:4px}.message strong{font-size:11px}.history{display:flex;gap:4px;align-items:center;padding:0 5px;font-size:9px}.history span{margin-left:auto}.history button{font-size:9px;padding:0 3px}form{margin:0;padding:4px 5px;background:var(--pink)}.compose{display:grid;grid-template-columns:65px minmax(0,1fr) auto;gap:3px}#url{grid-column:2/4}#body{grid-column:1/3}input{min-width:0;width:100%;padding:4px;border:1px solid var(--line);border-radius:3px;background:#fff}input::placeholder{color:#79596a}.form-note{display:flex;align-items:center;gap:5px;font-size:9px;margin-top:2px}.form-note button{padding:0 3px;border:0}.form-note a:first-of-type{margin-left:auto}#status{margin:0;padding:0 5px;font-size:10px;background:#fff1d8;overflow-wrap:anywhere}#status:not(:empty){padding:4px 5px}.trap,.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}.document{max-width:700px;margin:24px auto;padding:20px;font-size:14px}.document h1{font:normal 28px Georgia,serif;color:var(--accent)}.document label{display:block;margin:12px 0}.document input{max-width:360px}.document .message{padding:14px 0}.actions{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}.badge{background:var(--pink);padding:3px 6px}.preview-grid{display:flex;flex-wrap:wrap;gap:30px;align-items:flex-start}.preview-grid iframe{border:0;display:block}.preview-small{width:267px;height:162px}.preview-large{width:min(360px,85vw);height:450px}

#theme-preview{display:block;border:0;max-width:100%;margin:10px 0}#theme-controls input[type=color]{width:64px;height:34px;padding:2px}
html[data-custom-theme],html[data-custom-theme] body{background:var(--theme-background);color:var(--theme-foreground)}
html[data-custom-theme] .sayhi{border-color:var(--theme-border);color:var(--theme-foreground);background:var(--theme-background)}
html[data-custom-theme] .sayhi header,html[data-custom-theme] .sayhi form,html[data-custom-theme] .sayhi #status{background:var(--theme-background);color:var(--theme-foreground)}
html[data-custom-theme] .sayhi header,html[data-custom-theme] .sayhi .message{border-color:var(--theme-border)}
html[data-custom-theme] .sayhi input,html[data-custom-theme] .sayhi button{color:var(--theme-foreground);background:var(--theme-background);border-color:var(--theme-foreground)}
html[data-custom-theme] .sayhi a,html[data-custom-theme] .sayhi input::placeholder{color:var(--theme-foreground);opacity:1}
html[data-custom-theme] .sayhi .message time{opacity:1}
html[data-custom-theme] .sayhi button:focus-visible,html[data-custom-theme] .sayhi a:focus-visible,html[data-custom-theme] .sayhi input:focus-visible{outline-color:var(--theme-foreground)}

.smiley-image{display:inline-block;vertical-align:middle;image-rendering:pixelated;max-width:64px;max-height:64px}
.sayhi{position:relative}.smiley-picker{position:absolute;bottom:24px;left:4px;right:4px;max-height:94px;overflow:auto;background:var(--theme-background,#fffafd);border:1px solid currentColor;padding:4px;z-index:5}.smiley-picker button{min-width:28px;min-height:28px;margin:2px}.smiley-editor{border-top:1px solid #dbb9c9;padding:8px 0}.smiley-editor label{display:inline-block;margin:3px}.smiley-editor input{max-width:160px}

html[data-background-image] .sayhi{background-image:var(--theme-image);background-repeat:var(--theme-repeat);background-size:auto;background-position:left top;image-rendering:pixelated}
html[data-background-image] .sayhi .message,html[data-background-image] .sayhi .messages>p,html[data-background-image] .sayhi .history{background-color:var(--theme-background);color:var(--theme-foreground)}
html[data-background-image] .sayhi .message{margin-bottom:3px}
#theme-controls select{max-width:100%;font:inherit}#theme-controls input[type=file]{max-width:100%}

/* SayHi scroll controls */
.theme-colour-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}
.document .theme-colour-row label{min-width:0;margin:8px 0}.theme-colour-row input{max-width:100%}
@media(max-width:560px){.theme-colour-row{grid-template-columns:1fr}}
.sayhi .messages{min-height:0;scrollbar-width:auto;scrollbar-color:var(--theme-scroll-thumb,#8b4467) var(--theme-scroll-track,#f8eaf1)}
.messages::-webkit-scrollbar{width:14px}.messages::-webkit-scrollbar-track{background:var(--theme-scroll-track,#f8eaf1)}.messages::-webkit-scrollbar-thumb{background:var(--theme-scroll-thumb,#8b4467);border:2px solid var(--theme-scroll-track,#f8eaf1);border-radius:7px}
.history{flex-wrap:wrap}#scroll-controls{display:inline-flex;gap:4px;margin-left:auto}#scroll-controls[hidden]{display:none}
html .sayhi .history .scroll-button{min-width:24px;min-height:24px;padding:2px 5px;background:var(--theme-scroll-button,#fff7fb);color:var(--theme-scroll-button-foreground,#000000);border:1px solid currentColor;touch-action:manipulation}
.scroll-button[aria-disabled="true"]{opacity:.6}.messages:focus-visible,.scroll-button:focus-visible{outline:2px solid currentColor;outline-offset:-2px}

.sayhi .form-note{flex-wrap:wrap}.sayhi #contact-note{font:inherit}
/* Owner interface: scoped so the compact embedded shoutbox stays unchanged. */
.admin-page{background:#faf5f0;color:#513d47;font:15px/1.5 Verdana,Arial,sans-serif}
.admin-shell{max-width:1120px;margin:20px auto;padding:20px;font-size:15px}
.admin-heading,.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.admin-heading h1{margin:0;font-size:32px}.eyebrow{margin:0;color:#795366;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.admin-page #page-build-proof{font-size:12px;color:#795366;margin:10px 0}.admin-page #status{font-size:14px;border-radius:6px;margin:10px 0}
.admin-nav{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.admin-nav #logout{margin-left:auto}
.admin-page button,.admin-page select,.admin-page input{font:inherit}.admin-page button{min-height:40px;padding:8px 12px;border-radius:6px}.admin-nav [aria-pressed=true]{background:#803e60;color:white;border-color:#803e60}
.admin-page :is(button,a,input,select,summary):focus-visible{outline:3px solid #803e60;outline-offset:3px}
.admin-panel{background:#fffdfb;border:1px solid #dfcbd3;border-radius:10px;padding:20px;box-shadow:0 3px 12px #513d4708}.admin-panel h2{font:normal 25px Georgia,serif;margin:0 0 12px;color:#803e60}.admin-panel h3{font-size:16px;margin:16px 0 8px}.admin-panel p{margin:8px 0 14px}.admin-page .muted{color:#735e68;font-size:14px}
.admin-page form{padding:14px;border-radius:8px;background:#faf0f5}.admin-page label{margin:8px 0;display:block}.admin-page input,.admin-page select{padding:8px;max-width:100%;border:1px solid #b893a5;border-radius:5px}.admin-page select{width:100%;background:white;color:#513d47}
.appearance-layout{display:grid;grid-template-columns:minmax(0,1fr) 291px;gap:20px;align-items:start}.preview-card{padding:12px;background:#faf5f0;border-radius:8px;position:sticky;top:16px}.preview-card h3{margin-top:0}.preview-card p{font-size:13px}.admin-page #theme-preview{margin:0;max-width:100%}
.admin-page .theme-colour-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.admin-page .theme-colour-row label{font-size:13px}.admin-page .theme-colour-row input{display:block;margin-top:6px;min-height:40px}
.admin-page .message{padding:16px;margin:12px 0;border:1px solid #e3cfd9;border-radius:8px;background:#fff}.admin-page .message strong{font-size:15px}.admin-page .message p{margin:8px 0}.admin-page .message .actions{gap:8px}.empty-state{padding:24px;text-align:center;background:#faf0f5;border-radius:8px}
.admin-page .set-controls button{margin:8px 8px 0 0}.smiley-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:16px}.smiley-card,.smiley-upload{border:1px solid #dfcbd3;border-radius:8px;background:#fff}.smiley-card summary,.smiley-upload summary{cursor:pointer;padding:12px;min-height:48px}.smiley-card summary .smiley-image{margin-right:8px}.smiley-card summary span{overflow-wrap:anywhere}.admin-page .smiley-editor{border:0;padding:12px}.admin-page .smiley-editor label{display:block;margin:8px 0}.admin-page .smiley-editor input{display:block;max-width:100%}.admin-page .smiley-editor button{margin:6px 6px 0 0}.admin-page footer{margin-top:16px;font-size:14px}.admin-page #login{max-width:420px}
@media(max-width:800px){.appearance-layout{grid-template-columns:minmax(0,1fr)}.preview-card{position:static;max-width:100%}}
@media(max-width:480px){.admin-shell{margin:0;padding:12px}.admin-panel{padding:14px}.admin-heading h1{font-size:28px}.admin-nav{gap:6px}.admin-nav button{flex:1 1 40%}.admin-nav #logout{flex:0 1 auto;margin-left:0}.admin-page .theme-colour-row{gap:6px}.admin-page .theme-colour-row label{font-size:12px}.smiley-grid{grid-template-columns:minmax(0,1fr)}}
