* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #1a1714; color: #f4efe6; font-family: Segoe UI, system-ui, sans-serif; }
#app { display: flex; flex-direction: row; height: 100%; min-height: 100vh; min-width: 980px; }
#chat { width: 340px; min-width: 280px; background: #241f1a; border-right: 1px solid #3d342c; display: flex; flex-direction: column; }
#chat header { padding: 14px 16px; border-bottom: 1px solid #3d342c; }
#chat header span { display: block; color: #b7a99a; font-size: 0.8rem; }
#log { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { padding: 8px 10px; border-radius: 10px; font-size: 0.92rem; line-height: 1.35; white-space: pre-wrap; }
.msg.you { background: #1f6f5b; align-self: flex-end; max-width: 92%; }
.msg.director { background: #3a322a; align-self: flex-start; max-width: 92%; }
#approvals { padding: 0 12px 8px; }
.appr { background: #3a322a; border-radius: 8px; padding: 8px; margin-top: 6px; font-size: 0.85rem; white-space: pre-wrap; }
#form { padding: 10px; border-top: 1px solid #3d342c; }
textarea { width: 100%; resize: none; background: #1a1714; color: #f4efe6; border: 1px solid #3d342c; border-radius: 8px; padding: 8px; }
.row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
button { background: #1f6f5b; color: #fff; border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
button.reject, #mic { background: #5c4a3a; }
button.reject { background: #8a3b2b; }
#mic.live { background: #8a3b2b; }
#speak.on { background: #1f6f5b; }
#speak.off { background: #3a322a; }
#floor { flex: 1; overflow: auto; padding: 12px; background: #2a241e; }
#office { display: block; background: #c4b49a; border-radius: 8px; image-rendering: pixelated; }
#hint { color: #b7a99a; font-size: 0.8rem; }