:root { --bg:#363636; --card:#121923; --text:#e8eef6; --muted:#91a1b5; --accent:#7ad2ff; --accent-contrast:#06131c; --radius:16px; --gap:14px; --maxw:980px }
*{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; color:var(--text); background-color:#363636; font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji"; display:grid }
.app{ min-height:100dvh; display:grid; grid-template-rows:auto 1fr auto; position:relative }
.tile-bar{ position:absolute; inset:0 auto auto 0; width:100%; height:320px; z-index:0; pointer-events:none; margin:0; padding:0; background:#363636 url('bgtile.png') repeat-x top left; }
.site-header, .content, .composer{ position:relative; z-index:1 }
.site-header{ max-width:var(--maxw); margin:8px auto 8px; padding:0 16px; text-align:center }
.site-header .logo{ display:block; max-width:100%; height:auto; margin:0 auto }
.site-header .tag{ margin:6px 0 0; color:var(--muted); font-size:1rem; text-align:center }
.content{ max-width:var(--maxw); width:100%; margin:0 auto; padding:0 16px 24px }
.messages{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--gap) }
.message{ background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,.25); padding:14px 16px 12px }
.meta{ display:flex; gap:10px; align-items:baseline; margin-bottom:4px }
.time{ font-size:.85rem; color:var(--muted) }
.text{ white-space:pre-wrap; word-wrap:anywhere; margin:0 }
/* Newest +20% */
.messages>li:first-child .text{ font-size:120% }
/* Older block (#9–#33) slightly smaller */
.messages>li:nth-child(n+9) .text{ font-size:90% }

.composer{ position:sticky; bottom:0; background:var(--bg); border-top:1px solid rgba(255,255,255,.08); padding:12px 16px 18px }
#msgForm{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:stretch }
#msgInput{ width:100%; resize:none; overflow:hidden; min-height:44px; max-height:40vh; padding:12px 14px; border-radius:calc(var(--radius) - 4px); border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:var(--text) }
#msgInput:focus{ outline:2px solid var(--accent); outline-offset:2px }
/* Desktop send button; mobile override below */
#sendBtn{ padding:12px 27px; border:0; border-radius:calc(var(--radius) - 6px); background:var(--accent); color:var(--accent-contrast); font-weight:800; font-size:200%; line-height:1; min-height:48px }
.draft-note{ color:var(--muted); font-size:.85rem }
/* Generic warnings container (no live counters) */
.limit-note{ color:#ffd166; font-size:.9rem; margin-top:4px }
.limit-note.warn{ color:#ffd166 }
.limit-note.error{ color:#ff9ea7 }

/* API unreachable banner */
#apiBanner{ display:none; background:#ffefc1; color:#3b2b00; border:1px solid rgba(0,0,0,.15); padding:10px 12px; margin:8px auto 0; max-width:var(--maxw); border-radius:10px; }
#apiBanner.show{ display:block; }

/* Admin page */
.admin{ max-width:var(--maxw); margin:24px auto; padding:0 16px }
.controls{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px }
.controls input, .controls select{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); color:var(--text); padding:8px 10px; border-radius:8px }
.table{ width:100%; border-collapse:collapse }
.table th, .table td{ border-bottom:1px solid rgba(255,255,255,.1); padding:8px 6px; text-align:left; vertical-align:top }
.table th{ color:var(--muted); font-weight:600 }
.btn{ background:transparent; border:1px solid rgba(255,255,255,.18); color:var(--text); border-radius:8px; padding:6px 10px; cursor:pointer }
.btn.danger{ color:#ff9ea7; border-color:#ff9ea7 }
.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 }

/* Mobile: bigger input, smaller send */
@media (max-width: 640px){
  #msgForm{ grid-template-columns: 1fr auto; gap:8px; }
  #msgInput{ font-size:1.1rem; min-height:64px; padding:14px 16px; }
  #sendBtn{ font-size:110%; padding:8px 12px; font-weight:700; }
  .messages{ gap:10px; }
}