* { box-sizing: border-box; }
:root { color-scheme: light; font-family: "Courier New", Courier, monospace; background: #d6d6d6; color: #111; }
body { margin: 0; min-height: 100vh; background: #cfcfcf; font-size: 14px; }
body[data-font="small"] { font-size: 12px; }
body[data-font="large"] { font-size: 18px; }
.shell { width: 100%; max-width: 980px; height: calc(100vh - 20px); max-height: 760px; min-height: 420px; margin: 10px auto; border: 2px solid #111; background: #eee; box-shadow: 5px 5px 0 #777; overflow: hidden; display: flex; flex-direction: column; }
.topbar { display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto; padding: 8px 12px; color: #fff; background: #162c50; border-bottom: 2px solid #111; font-weight: bold; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.mobile-tools-btn { display: none; padding: 3px 8px; border: 1px solid #fff; color: #fff; background: transparent; font-size: 14px; }

.mention-alert { padding: 4px 8px; border: 1px solid #fff; background: #ffd966; color: #111; font-size: 12px; }
#status { font-weight: normal; }
.panel { margin: 22px; border: 1px solid #444; background: #fff; }
.gate { max-width: 580px; margin: 55px auto; padding: 24px 28px; }
h1, h2, h3 { margin-top: 0; }
h1 { margin-bottom: 16px; font-size: 22px; }
.hint { color: #555; line-height: 1.5; }
label { display: block; margin: 15px 0; font-weight: bold; }
input { width: 100%; border: 1px solid #555; border-radius: 0; padding: 9px 10px; margin-top: 5px; background: #fff; color: #111; font: inherit; }
button { border: 2px solid #111; border-radius: 0; padding: 8px 20px; background: #ddd; color: #111; cursor: pointer; font: inherit; font-weight: bold; }
button:hover { background: #c2d0e5; }
.danger-button { background: #f2b3b3; color: #7a0000; }
.admin-live-users { color: #0a5c2a; overflow-wrap: anywhere; }
.color-settings { margin: 15px 0; font-weight: bold; }
.quick-colors { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.color-choice { padding: 5px 8px; min-width: 42px; background: #f7f7f7; }
.color-input-row { display: grid; grid-template-columns: 1fr 54px; gap: 6px; align-items: center; }
.color-input-row input { margin-top: 0; }
#entry-color-picker { height: 38px; padding: 2px; }
.secondary { background: #e7e7e7; }
.hidden { display: none !important; }
.admin-panel { max-width: 880px; margin: 20px auto; padding: 18px; height: calc(100% - 90px); overflow-y: auto; }
.section-title, .admin-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.room-stats { display: grid; gap: 10px; margin: 15px 0; }
.room-card { border: 1px solid #777; padding: 10px; display: grid; gap: 7px; overflow-wrap: anywhere; }
.room-key { color: #0645ad; }
.create-room, .visitor-detail { border-top: 1px dashed #777; margin-top: 18px; padding-top: 15px; }
.visitor-row { border-bottom: 1px dotted #999; padding: 7px 0; overflow-wrap: anywhere; }
.chat-layout { display: grid; grid-template-columns: 180px 1fr; flex: 1 1 auto; height: auto; min-height: 0; overflow: hidden; }
.room-info { padding: 15px 12px; border-right: 1px solid #444; background: #e0e0e0; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.room-info strong { overflow-wrap: anywhere; }
#current-id { color: #555; overflow-wrap: anywhere; }
#online-count { color: #0645ad; }
.online-users { max-height: 150px; overflow-y: auto; color: #333; font-size: 0.9em; overflow-wrap: anywhere; }
.online-title { color: #0645ad; margin-bottom: 4px; }
.online-user { padding: 2px 0; border-bottom: 1px dotted #aaa; }
.link-button { border: 0; padding: 0; text-align: left; background: transparent; text-decoration: underline; font-weight: normal; }
.display-controls { display: grid; gap: 8px; }
.conversation { position: relative; margin: 0; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.messages { flex: 1; overflow-y: auto; min-height: 0; padding: 12px; background: #fff; }
.message { padding: 8px 0 10px; border-bottom: 1px dotted #999; overflow-wrap: anywhere; }
.message-head { color: #163e73; font-weight: bold; }
.sender-link { border: 0; padding: 0; color: #0645ad; background: transparent; text-decoration: none; font-weight: bold; font-family: inherit; font-size: inherit; }
.export-btn { text-decoration: none; }
.message.mention-highlight { background: #fff2a8; outline: 2px solid #e0b400; }
.online-user { display: block; width: 100%; padding: 2px 0; border: 0; border-bottom: 1px dotted #aaa; color: #0645ad; background: transparent; text-align: left; text-decoration: none; font: inherit; }
.message-body img { display: block; max-width: 100%; max-height: 320px; margin-top: 5px; border: 1px solid #555; }
a { color: #0645ad; }
audio { max-width: 100%; margin-top: 5px; }
.composer { display: grid; grid-template-columns: 1fr 48px auto auto auto; gap: 5px; padding: 8px; border-top: 2px solid #111; background: #e5e5e5; position: relative; }
.emoji-btn { width: 48px; min-width: 48px; height: 42px; padding: 0; font-family: sans-serif; font-size: 22px; line-height: 1; text-align: center; }
.emoji-picker { position: absolute; z-index: 5; right: 8px; bottom: 58px; width: 224px; max-height: 230px; overflow-y: auto; padding: 6px; border: 2px solid #111; background: #fff; box-shadow: 3px 3px 0 #777; display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.emoji-picker button { width: 24px; height: 28px; border: 1px solid #999; padding: 0; background: #f4f4f4; font-family: sans-serif; font-size: 17px; line-height: 1; }
.emoji-picker button:hover { background: #c2d0e5; }
.composer input { margin: 0; min-width: 0; }
.file-btn { display: inline-flex; align-items: center; margin: 0; padding: 8px 10px; border: 2px solid #111; cursor: pointer; background: #ddd; }
.file-btn input { display: none; }
.record.recording { background: #f2b3b3; }
.typing { min-height: 20px; padding: 0 12px; color: #666; background: #fff; }
.round-mode .shell, .round-mode .panel, .round-mode .conversation, .round-mode .gate, .round-mode .admin-panel { border-radius: 22px; }
.round-mode .topbar { border-radius: 20px 20px 0 0; }
@media (max-width: 650px) { .shell { width: 100%; height: 100vh; min-height: 320px; margin: 0; border-left: 0; border-right: 0; box-shadow: none; } .mobile-tools-btn { display: inline-block; } .chat-layout { grid-template-columns: 1fr; } .room-info { border-right: 0; border-bottom: 1px solid #444; flex-direction: row; align-items: center; min-height: auto; max-height: 52px; overflow: hidden; } .room-info.tools-open { max-height: 180px; flex-wrap: wrap; align-content: flex-start; overflow-y: auto; } .room-info .display-controls, .room-info #online-users, .room-info #online-count, .room-info #current-id { display: none; } .room-info.tools-open .display-controls, .room-info.tools-open #online-users, .room-info.tools-open #online-count, .room-info.tools-open #current-id { display: block; } .room-info.tools-open .display-controls { display: flex; flex-direction: row; flex-wrap: wrap; } .messages { min-height: 0; } .composer { grid-template-columns: 1fr 42px auto auto auto; gap: 4px; padding: 5px; } .emoji-btn { width: 42px; min-width: 42px; height: 38px; font-size: 20px; } .emoji-picker { right: 5px; bottom: 50px; width: 184px; max-height: 180px; overflow-y: auto; grid-template-columns: repeat(8, 1fr); } .emoji-picker button { width: 20px; height: 24px; font-size: 15px; } .record { grid-column: auto; } .gate { margin: 20px 10px; } }