/* DRAW-003–007: viewport-sized room, square canvas and role-specific controls. */
body.painter-mode{overflow:hidden;overscroll-behavior:none}
body.painter-mode>.test-strip,body.painter-mode>#network-status{display:none}
body.painter-mode #app{padding:0;max-width:none;margin:0}
.painter-stage{position:fixed;left:var(--painter-left,0px);top:var(--painter-top,0px);width:var(--painter-vw,100vw);height:var(--painter-vh,100dvh);display:flex;flex-direction:column;gap:5px;background:#0c0e0a;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overflow:hidden}
.painter-top{display:flex;align-items:center;justify-content:space-between;flex:none;height:36px;margin:0;gap:8px}
.painter-top h2{font-size:20px;line-height:1.2;margin:0}.painter-top small{font-size:12px;color:#bdc8a9;font-weight:400}
.painter-top button{min-height:34px;padding:4px 12px;font-size:13px}
.painter-summary{display:flex;justify-content:space-between;align-items:center;flex:none;height:24px;font-size:12px;border-bottom:1px solid #424e32;gap:6px;white-space:nowrap}
#painter-mode{font-size:11px;color:#abb89c}#room-status{font-weight:700;color:var(--lime)}
.painter-members{display:flex;gap:5px;flex:none;height:32px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.painter-member{flex:1;min-width:48px;max-width:140px;background:#232c1a;border:1px solid #465334;display:flex;align-items:center;flex-direction:column;justify-content:center;font-size:10px;line-height:1.25;padding:1px 3px;overflow:hidden}
.painter-member b{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.painter-member small{font-size:10px;white-space:nowrap}.painter-member.drawing{border-color:var(--lime);color:var(--lime)}
.painter-word{flex:none;min-height:30px;max-height:40px;padding:4px 8px;font-size:14px;line-height:20px;background:#29351e;color:#ebf4db;overflow:auto;overflow-wrap:anywhere}
.painter-workspace{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;min-width:0}
.painter-canvas-area{position:relative;display:flex;flex:1;align-items:center;justify-content:center;min-height:0;min-width:0;overflow:hidden}
#board{display:block;background:#fff;border:1px solid #8b9b76;touch-action:none;user-select:none;-webkit-user-select:none;flex:none}
#painter-sync{position:absolute;bottom:2px;left:4px;right:4px;max-height:40px;overflow:hidden;padding:3px 6px;background:#171c15e8;color:#d9f3b9;font-size:11px;text-align:center;pointer-events:none}
.painter-sidebar{display:flex;flex:none;flex-direction:column;gap:4px;min-height:0;min-width:0}
.painter-tools{display:flex;flex-direction:column;gap:4px;flex:none}
.painter-palette,.painter-tool-actions{display:flex;align-items:center;gap:5px;min-width:0}
.painter-tools button,.painter-tools select{font-size:12px;min-height:36px;height:36px;padding:3px 10px}
.painter-palette [data-color]{width:36px;flex:none;padding:0;border:2px solid #79836c;background:var(--swatch);box-shadow:inset 0 0 0 2px #ffffff20}
.painter-tools [aria-pressed=true]{outline:2px solid var(--paper);outline-offset:-5px;border-color:var(--lime)}
.painter-palette [data-color][aria-pressed=true]::after{content:'✓';display:block;color:#fff;text-shadow:1px 1px #000,-1px -1px #000;font-size:20px}
.painter-tool-actions select{width:90px}.painter-tool-actions button{flex:1;background:#25301c;color:var(--paper);border:1px solid #7c8d63}
.painter-chat-panel{position:relative;min-height:0;flex:none}
.painter-chat{height:58px;overflow:auto;overscroll-behavior:contain;border:1px solid #455138;padding:3px 7px;font-size:12px;overflow-wrap:anywhere}
.painter-chat p{margin:1px 0;line-height:18px}.painter-chat b{font-weight:400;color:#b6c4a6}
#painter-new-chat{position:absolute;bottom:2px;right:5px;min-height:24px;padding:1px 8px;font-size:11px}
.painter-compose{flex:none}.painter-compose .guess-form{margin:0;gap:6px}.painter-compose .guess-form input{font-size:16px;height:44px;padding:8px;flex:1}.painter-compose .guess-form button{min-width:68px;font-size:13px;padding:4px 8px;height:44px}
#painter-input-status{font-size:11px;line-height:16px;margin:0;color:#c6d3b7;overflow-wrap:anywhere;max-height:32px;overflow:auto}
.painter-rule{font-size:10px;line-height:14px;color:#9fac90;margin:0;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.painter-stage[data-role=drawer] .painter-chat{height:38px}
.painter-stage[data-role=drawer] #painter-input-status{display:none}
#painter-result{font-size:12px;flex:none}#painter-result-detail{margin:0 0 4px;line-height:18px}#again{width:100%;min-height:36px;padding:4px}
.painter-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.painter-keyboard .painter-members,.painter-keyboard .painter-rule{display:none}.painter-keyboard .painter-top{height:30px}.painter-keyboard .painter-chat{height:36px}
@media(min-aspect-ratio:6/5){
 .painter-workspace{flex-direction:row;gap:12px}.painter-sidebar{width:260px;flex:none}.painter-chat-panel{flex:1}.painter-chat,.painter-stage[data-role=drawer] .painter-chat{height:100%}
 .painter-word{min-height:26px;max-height:32px;font-size:13px;padding:2px 8px}.painter-top{height:32px}.painter-members{height:28px}.painter-summary{height:20px}
 .painter-rule{display:none}.painter-stage{gap:4px}
}
@media(max-width:350px){.painter-top h2{font-size:17px}.painter-top small{font-size:10px}.painter-summary{font-size:11px}.painter-palette{gap:4px}.painter-palette [data-color]{width:34px}.painter-tools button{padding-inline:7px}}
@media(max-height:350px) and (min-aspect-ratio:6/5){.painter-stage{gap:3px;padding-block:4px}.painter-sidebar{width:236px}.painter-top{height:28px}.painter-members{height:25px}.painter-tools button,.painter-tools select{height:32px;min-height:32px}.painter-palette [data-color]{width:32px}.painter-compose .guess-form input,.painter-compose .guess-form button{height:40px;min-height:40px}}