:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; overflow: hidden; background: #040406; color: #fff; }
input, button { border: 0; color: inherit; font: inherit; }
input:focus { outline: none; }
button { cursor: pointer; }

#toggle-sidebar { display: none; }
nav { display: none; height: 64px; align-items: center; justify-content: space-between; padding: 0 2rem; border-bottom: 1px solid #171717; }
h1 { margin: 0; font-size: 1.15rem; font-weight: 650; letter-spacing: -.02em; }
.user { display: flex; align-items: center; gap: .75rem; }
#status { width: 7px; height: 7px; overflow: hidden; border-radius: 50%; background: #6b2525; color: transparent; }
#status.connected { background: #4f9d69; }
#sender { width: 8rem; padding: .35rem 0; background: transparent; text-align: right; font-weight: 500; }

main { height: 100dvh; display: flex; }
#channels { width: 15rem; height: 100dvh; display: flex; flex-direction: column; flex-shrink: 0; background: rgb(20 20 24); }
.channels-header, .channels-footer { flex-shrink: 0; background: rgb(12 12 16); }
.channels-header { height: 64px; display: flex; align-items: center; padding: 1.5rem; }
.channels-header h2 { margin: 0; font-size: 1.05rem; font-weight: 650; letter-spacing: -.02em; }
.channels-middle { min-height: 0; flex: 1; display: flex; flex-direction: column; padding: 1rem .75rem; }
.channels-heading { margin: 0 0 .65rem; color: #8d8d91; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.channels-footer { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem; }
.profile { min-width: 0; display: flex; align-items: center; gap: .65rem; }
.avatar-placeholder { width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 50%; background: #4a4a4c; }
#profile-nickname { min-width: 0; overflow: hidden; color: #c8c8ca; font-size: .9rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
#open-settings { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 4px; background: transparent; color: #a9a9ad; }
#open-settings:hover { background: #2d2d2f; color: #fff; }
#open-settings .settings-icon { width: 1.1rem; height: 1.1rem; display: block; }
#channel-list { min-height: 0; flex: 1; display: flex; flex-direction: column; gap: .2rem; overflow-y: auto; }
.channel { width: 100%; padding: .55rem .65rem; border-radius: 4px; background: transparent; color: #a9a9ad; text-align: left; transition: background .15s ease, color .15s ease; }
.channel:hover { background: rgb(45 45 47); color: #fff; }
.channel.active { background: rgb(54 54 56); color: #fff; }
#add-room { flex-shrink: 0; margin-top: .65rem; padding: .55rem .65rem; border-radius: 4px; background: rgb(45 45 47); color: #c2c2c5; text-align: left; transition: background .15s ease, color .15s ease; }
#add-room:hover { background: rgb(58 58 60); color: #fff; }

.chat { min-width: 0; flex: 1; display: flex; flex-direction: column; padding: 1.5rem 2rem 2rem; }
#messages { width: min(100%, 760px); flex: 1; align-self: center; margin: 0 0 1.5rem; padding: 1rem 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #252525 transparent; }
.message-row { display: flex; gap: .75rem; margin: 0 0 .85rem; color: #b7b7b7; line-height: 1.5; overflow-wrap: anywhere; }
.message-avatar { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: .1rem; border-radius: 50%; color: #fff; font-size: .75rem; font-weight: 700; }
.message-details { min-width: 0; flex: 1; }
.message-author { display: block; color: #fff; font-size: .85rem; font-weight: 600; line-height: 1.2; }
.message-content { margin: .2rem 0 0; color: #b7b7b7; line-height: 1.5; }
.message-row.own .message-content { color: #d9e9ed; }
.message-row.continuation { margin-top: -.55rem; }
.message-row.continuation .message-avatar { visibility: hidden; }

#message-form { width: min(100%, 760px); display: flex; align-self: center; flex-shrink: 0; padding: .25rem; border: 1px solid #333; border-radius: 5px; background: #252525; transition: border-color .15s ease; }
#message-form:focus-within { border-color: #555; }
#content { min-width: 0; flex: 1; padding: .7rem .8rem; background: transparent; }
#content::placeholder { color: #777; }
#send { width: 2.5rem; border-radius: 4px; background: #353535; color: #bbb; font-size: 1.1rem; transition: background .15s ease, color .15s ease; }
#send:not(:disabled):hover { background: #444; color: #fff; }
#send:disabled { background: #2b2b2b; color: #666; cursor: not-allowed; }
dialog { width: min(22rem, calc(100vw - 2rem)); padding: 0; border: 1px solid #3a3a3a; border-radius: 7px; background: #1d1d1f; color: #fff; box-shadow: 0 1rem 4rem rgb(0 0 0 / 50%); }
dialog::backdrop { background: rgb(0 0 0 / 65%); }
.dialog-content { padding: 1.25rem; }
.dialog-content h2 { margin: 0 0 .35rem; font-size: 1rem; }
.dialog-content p { margin: 0 0 1rem; color: #929296; font-size: .85rem; }
.dialog-content label { display: block; margin: .85rem 0 .35rem; color: #b7b7bb; font-size: .8rem; }
#room-id, #settings-nickname, #settings-endpoint { width: 100%; padding: .65rem .7rem; border: 1px solid #3b3b3d; border-radius: 4px; background: #29292b; }
#room-id:focus, #settings-nickname:focus, #settings-endpoint:focus { border-color: #666; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.dialog-actions button { padding: .55rem .75rem; border-radius: 4px; background: #353537; color: #c8c8ca; }
.dialog-actions button[type="submit"] { background: #4a4a4c; color: #fff; }
.dialog-actions button:hover { background: #555557; color: #fff; }

@media (max-width: 700px) {
  nav { display: flex; height: 56px; padding: 0 5%; }
  #toggle-sidebar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 4px; background: transparent; color: #b7b7bb; font-size: 1.25rem; line-height: 1; }
  #toggle-sidebar:hover { background: #2d2d2f; color: #fff; }
  .user { gap: .5rem; }
  #sender { width: 6.5rem; }
  main { height: calc(100dvh - 56px); flex-direction: column; }
  #channels { position: fixed; top: 56px; bottom: 0; left: 0; width: min(18rem, 86vw); height: auto; max-height: none; transform: translateX(-100%); transition: transform .2s ease; z-index: 10; box-shadow: 1rem 0 2rem rgb(0 0 0 / 25%); }
  #channels.is-open { transform: translateX(0); }
  .channels-footer { display: flex; height: 64px; }
  .channels-middle { padding: .65rem 5%; }
  .channels-heading { display: none; }
  #channel-list { flex-direction: row; overflow-x: auto; }
  .channel { width: auto; white-space: nowrap; }
  #add-room { margin-top: .65rem; }
  .chat { min-height: 0; padding: 1rem 5%; }
}