/* Compact communication tools; familiar iOS-style grouped settings. */
body.theme-soft { --bg:#f6f5fa; --fg:#26223b; --panel:#fff; --panel-fg:#26223b; --line:#d9d5e6; --accent:#5634ba; --accent-fg:#fff; --muted:#625e73; }
#app { height:100dvh; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#top-bar { min-height:58px; padding:5px 10px; gap:6px; border-bottom:1px solid var(--line); background:var(--panel); }
.patchy-brand { flex:none; display:flex; align-items:center; gap:7px; background:transparent; border:0; padding:0 6px 0 0; min-height:44px; border-radius:10px; }
#patchy-logo { width:44px; height:44px; object-fit:contain; border-radius:8px; background:white; transform-origin:50% 80%; }
.brand-name { text-align:left; font-size:14px; font-weight:800; letter-spacing:-.3px; line-height:1.05; }
.brand-name small { display:block; font-size:10px; letter-spacing:2px; margin-top:4px; color:var(--muted); }
#message-text { display:block!important; min-height:44px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); font-size:17px; line-height:20px; font-weight:600; }
#message-text:empty::before { content:'Your words, your way…'; font-weight:400; color:var(--muted); }
#top-bar .msg-btn { display:block; min-height:44px; min-width:44px; padding:8px 11px; font-size:14px; border-width:1px; border-radius:10px; }
#top-bar .msg-btn:disabled { opacity:.45; cursor:default; }
#top-bar #msg-speak { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
#top-bar #adult-btn { position:static; width:auto; height:auto; opacity:1; display:block; color:var(--panel-fg); font-size:14px; z-index:auto; }
#home-btn[hidden] { display:none!important; }
#page-title { max-width:100px; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
#edit-banner { padding:8px 12px; font-size:14px; background:#efe8ff; color:#37216e; }
#edit-banner .btn { min-height:44px; }
.panel { padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.panel-head { border-bottom-width:1px; }
.panel-body { width:100%; max-width:920px; margin:0 auto; padding:24px; }
.panel-body fieldset { background:var(--panel); border-radius:16px; }
[hidden] { display:none!important; }
.settings-categories { display:flex; flex:none; gap:6px; padding:10px 16px; overflow-x:auto; background:var(--panel); border-bottom:1px solid var(--line); }
.settings-categories button { min-height:44px; border:1px solid transparent; border-radius:10px; padding:8px 16px; background:transparent; font-weight:650; }
.settings-categories button[aria-pressed="true"] { background:var(--accent); color:var(--accent-fg); }
#skin-preview { font-size:38px; padding:14px 0; }
.pw-dialog { width:min(560px,calc(100% - 24px)); max-height:calc(100dvh - 32px); border:1px solid var(--line); border-radius:24px; padding:24px; background:var(--bg); color:var(--fg); overflow-y:auto; box-shadow:0 18px 75px #15102640; }
.pw-dialog::backdrop { background:#14102470; }
.pw-dialog header { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.pw-dialog h2 { margin:2px 0; font-size:23px; letter-spacing:-.5px; flex:1; }
.pw-dialog header > div { flex:1; }
.pw-dialog .btn { min-height:44px; border-width:1px; border-radius:10px; }
.eyebrow { color:var(--muted); font-size:10px; letter-spacing:1.6px; font-weight:750; }
.menu-board-name:empty { display:none; }
.menu-actions { background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.menu-actions > button { display:flex; align-items:center; gap:13px; width:100%; padding:13px 15px; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--line); min-height:70px; }
.menu-actions > button:last-child { border-bottom:0; }
.menu-actions > button > span:nth-child(2) { flex:1; }
.menu-actions small,.menu-security small { display:block; font-size:12px; font-weight:400; color:var(--muted); margin-top:4px; }
.menu-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; font-size:23px; color:#fff; }
.violet{background:#6942c3}.blue{background:#177db0}.coral{background:#be4439}.green{background:#437c3d}.amber{background:#936216}
.menu-security { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:20px 0 0; }
.menu-security > div { flex:1; min-width:100px; font-size:14px; }
.menu-note { font-size:12px; line-height:1.5; color:var(--muted); margin-bottom:0; }
.pin-dialog { max-width:430px; }
.pin-dialog p { font-size:14px; line-height:1.5; }
.pin-dialog label { display:block; margin:12px 0 7px; }
.pin-dialog input { width:100%; font-size:24px; padding:12px; min-height:48px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--fg); }
#pin-error { color:var(--danger); min-height:21px; }
#patchy-tour p { line-height:1.65; font-size:17px; }
#patchy-tour footer { display:flex; align-items:center; justify-content:space-between; }
#patchy-tour img { border-radius:12px; }
.tour-target { outline:3px solid var(--focus); outline-offset:2px; }
body.edit-mode .cell:not(.blank)::before { content:'✎'; position:absolute; top:5px; right:5px; font-size:16px; background:var(--panel); color:var(--panel-fg); border-radius:7px; padding:2px 5px; z-index:2; }
@media (max-width:1000px) { .brand-name { display:none; } #page-title { display:none; } }
@media (max-width:650px) {
  #top-bar { flex-wrap:wrap; gap:5px; padding:5px 8px; }
  .patchy-brand { order:0; padding:0; }
  #message-text { order:1; flex:1 1 calc(100% - 120px); }
  #top-bar #adult-btn { order:2; }
  .menu-label { display:none; }
  #top-bar .msg-btn { order:3; padding:7px 10px; }
  #home-btn { margin-right:auto; }
  #msg-speak { margin-left:auto; }
  .panel-body { padding:16px; }
  .pw-dialog { padding:18px; border-radius:20px; }
  .settings-categories { padding:8px; gap:2px; }
  .settings-categories button { padding:8px 12px; }
  #edit-banner { flex-wrap:wrap; gap:6px; }
  #edit-banner > span:first-child { flex-basis:100%; }
}
@media (prefers-reduced-motion:reduce) { .cell[class*="anim-"] { animation:none!important; } }
/* Visual echo never intercepts selections or covers the message controls. */
.picture-echo { position: fixed; z-index: 80; pointer-events: none; left: 50%; top: max(125px, 25%); transform: translateX(-50%); width: min(55vw, 360px); max-height: calc(100dvh - 150px); overflow: hidden; box-sizing: border-box; padding: 18px; background: #fff; color: #171324; border: 5px solid #6b39d5; border-radius: 28px; box-shadow: 0 10px 40px #0008; text-align: center; animation: picture-echo-in 180ms ease-out; }
.picture-echo-huge { width: min(85vw, 620px); top: max(125px, 17%); }
.picture-echo-symbol { font-size: clamp(70px, 18vw, 180px); line-height: 1.1; }
.picture-echo-huge .picture-echo-symbol { font-size: clamp(120px, 32vw, 300px); }
.picture-echo-symbol img { display: block; width: 100%; height: min(32dvh, 280px); object-fit: contain; }
.picture-echo-huge .picture-echo-symbol img { height: min(46dvh, 400px); }
.picture-echo-label { font-size: clamp(24px, 4vw, 42px); font-weight: 800; overflow-wrap: anywhere; }
@keyframes picture-echo-in { from { opacity: 0; transform: translateX(-50%) scale(.7); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .picture-echo { animation: none; } }