:root {
  font-family:Inter,Arial,system-ui,sans-serif;
  color:#18212f;
  background:#f1f4f7;
  --line:#e9edf2;
  --green:#12a780;
  --orange:#f39817;
  --panel:#fff
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  height:100dvh;
  min-height:510px;
  overflow:hidden;
  background:#f1f4f7;
  color:#18212f
}
button,input {
  font:inherit
}
button {
  cursor:pointer
}
button:disabled {
  opacity:.5;
  cursor:not-allowed
}
.topbar {
  height:66px;
  background:#151b2a;
  color:white;
  display:flex;
  align-items:center;
  padding:0 26px;
  gap:25px;
  box-shadow:0 2px 12px #11182718;
  z-index:2
}
.brand {
  display:flex;
  align-items:center;
  gap:9px;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:19px;
  letter-spacing:-.7px
}
.brand small {
  font-size:10px;
  color:#a9b2c5;
  margin-left:2px
}
.brand-accent,.login-brand h1 span {
  color:#53dbb1
}
.brand-mark {
  width:31px;
  height:31px;
  border-radius:10px;
  background:linear-gradient(145deg,#16c79a,#078b70);
  color:white;
  display:grid;
  place-items:center;
  font-size:24px;
  box-shadow:0 5px 12px #0b9d7c55
}
.network-state {
  margin:auto;
  display:flex;
  align-items:center;
  gap:8px;
  color:#bac3d1;
  font-size:11px
}
.network-state i,.group-label i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2acb91;
  box-shadow:0 0 0 3px #2acb9122
}
.network-state b {
  color:#fff;
  background:#263247;
  border-radius:20px;
  padding:4px 9px;
  font-size:10px
}
.top-actions {
  display:flex;
  align-items:center;
  gap:12px
}
.icon-btn {
  border:0;
  background:transparent;
  color:inherit;
  width:36px;
  height:36px;
  border-radius:9px;
  font-size:18px
}
.profile-pill {
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #ffffff24;
  background:#ffffff0b;
  color:white;
  border-radius:22px;
  padding:5px 11px 5px 5px;
  font-size:11px
}
.profile-pill #myAvatar {
  width:27px;
  height:27px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#d7f5eb;
  color:#078568;
  font-weight:700
}
.profile-pill b {
  color:#aab3c3;
  margin-left:4px
}
.layout {
  height:calc(100dvh - 66px);
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 250px;
  gap:0;
  padding:14px;
  max-width:1600px;
  margin:auto
}
.left-rail,.chat-panel,.right-panel {
  background:var(--panel);
  min-height:0
}
.left-rail {
  border:1px solid var(--line);
  border-right:0;
  border-radius:14px 0 0 14px;
  display:flex;
  flex-direction:column;
  padding:19px 13px 12px
}
.rail-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5px;
  height:30px;
  font-size:9px;
  font-weight:700;
  letter-spacing:1px;
  color:#99a2ae
}
.rail-title button {
  border:0;
  background:#f0f3f6;
  color:#647384;
  border-radius:7px;
  width:25px;
  height:25px;
  font-size:17px
}
.room-list {
  padding-top:12px;
  display:flex;
  flex-direction:column;
  gap:4px
}
.room {
  border:0;
  background:transparent;
  border-radius:9px;
  height:41px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 10px;
  text-align:left;
  color:#687485;
  font-size:12px
}
.room:hover {
  background:#f5f8fa
}
.room.active {
  color:#078967;
  background:#e9f8f2;
  font-weight:600
}
.room .hash {
  font-size:17px;
  color:#9aa5b1
}
.room.active .hash {
  color:#16a880
}
.room-live {
  margin-left:auto;
  width:6px;
  height:6px;
  background:#27bd87;
  border-radius:50%
}
.rail-bottom {
  margin-top:auto
}
.secure-card {
  display:flex;
  gap:9px;
  align-items:center;
  padding:10px 8px;
  background:#f6f9f8;
  border:1px solid #edf2ef;
  border-radius:10px
}
.secure-card>b {
  width:28px;
  height:28px;
  border-radius:8px;
  background:#e0f5ed;
  color:#0a9b73;
  display:grid;
  place-items:center
}
.secure-card strong,.secure-card small {
  display:block
}
.secure-card strong {
  font-size:9px
}
.secure-card small {
  font-size:8px;
  color:#98a2ae;
  margin-top:3px
}
.rail-bottom>button {
  border:0;
  background:transparent;
  padding:14px 6px 2px;
  color:#8e98a7;
  font-size:10px
}
.chat-panel {
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  min-width:0
}
.chat-heading {
  height:65px;
  flex:none;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  padding:0 18px;
  gap:11px
}
.room-icon {
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#e7f7f1;
  color:#109c75;
  font-size:21px
}
.chat-heading>div:nth-child(2) {
  display:flex;
  flex-direction:column;
  gap:4px
}
.chat-heading strong {
  text-transform:capitalize;
  font-size:13px
}
.chat-heading small {
  color:#909aa8;
  font-size:9px
}
.chat-heading .icon-btn {
  margin-left:auto;
  color:#8792a0
}
.connection-notice {
  height:29px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#8792a0;
  font-size:9px;
  background:#fbfcfd;
  border-bottom:1px solid #f0f2f5;
  flex:none
}
.connection-notice i {
  width:10px;
  height:10px;
  border:2px solid #d7e8e2;
  border-top-color:#18a881;
  border-radius:50%;
  animation:spin .7s linear infinite
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
.connection-notice.connected {
  color:#168c68;
  background:#f4fbf8
}
.connection-notice.connected i {
  border:0;
  background:#23bd89;
  animation:none;
  width:6px;
  height:6px
}
.connection-notice.error {
  color:#c95460;
  background:#fff7f7
}
.connection-notice.error i {
  border:0;
  background:#df7680;
  animation:none;
  width:6px;
  height:6px
}
.message-list {
  flex:1;
  min-height:0;
  overflow:auto;
  padding:18px 23px;
  scroll-behavior:smooth
}
.date-divider {
  text-align:center;
  color:#aab2bd;
  font-size:8px;
  letter-spacing:1px;
  margin:2px 0 21px
}
.date-divider:before,.date-divider:after {
  content:"";
  display:inline-block;
  width:20%;
  height:1px;
  background:#edf0f3;
  vertical-align:middle;
  margin:0 12px
}
.welcome-card {
  margin:12px auto 25px;
  max-width:380px;
  text-align:center;
  padding:18px;
  border:1px dashed #e2e8ec;
  border-radius:13px;
  color:#657282
}
.welcome-card>b {
  width:34px;
  height:34px;
  border-radius:11px;
  background:#e9f8f3;
  color:#14a77f;
  display:grid;
  place-items:center;
  margin:0 auto 9px
}
.welcome-card strong {
  font-size:11px;
  color:#455262
}
.welcome-card p {
  font-size:9px;
  margin:5px 0 0;
  color:#9ba5b2
}
.system-message {
  max-width:92%;
  margin:6px auto 11px;
  text-align:center;
  color:#8993a1;
  font-size:9px
}
.system-message span {
  display:inline-block;
  background:#f6f8fa;
  padding:6px 11px;
  border-radius:20px
}
.chat-message {
  display:flex;
  gap:9px;
  margin:0 0 14px;
  max-width:88%;
  align-items:flex-start
}
.chat-message.mine {
  margin-left:auto;
  flex-direction:row-reverse
}
.msg-avatar,.user-avatar {
  width:28px;
  height:28px;
  border-radius:50%;
  background:#e7eefb;
  color:#5474a7;
  display:grid;
  place-items:center;
  font-size:10px;
  font-weight:700;
  flex:none
}
.chat-message.mine .msg-avatar {
  background:#def5eb;
  color:#078a68
}
.msg-body {
  min-width:0
}
.msg-meta {
  display:flex;
  gap:8px;
  align-items:baseline;
  margin:1px 0 4px
}
.msg-nick {
  font-weight:700;
  color:#3a4655;
  font-size:10px
}
.chat-message.mine .msg-nick {
  color:#0d9873
}
.msg-time {
  font-size:8px;
  color:#a4acb7
}
.msg-bubble {
  padding:9px 12px;
  border-radius:3px 12px 12px 12px;
  background:#f3f5f7;
  color:#374151;
  font-size:11px;
  line-height:1.55;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.chat-message.mine .msg-bubble {
  background:#e7f8f1;
  border-radius:12px 3px 12px 12px
}
.composer {
  margin:0 17px;
  border:1px solid #e3e8ed;
  border-radius:11px;
  min-height:47px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px;
  background:#fff;
  box-shadow:0 3px 12px #1b25320a;
  flex:none
}
.composer:focus-within {
  border-color:#9bdcc7;
  box-shadow:0 0 0 3px #13a77e12
}
.composer>button {
  width:32px;
  height:32px;
  border:0;
  background:transparent;
  color:#84909d;
  border-radius:8px;
  font-size:16px
}
.composer>button:hover {
  background:#f0f5f4;
  color:#159a76
}
.composer input {
  border:0;
  outline:0;
  flex:1;
  min-width:30px;
  color:#303c4a;
  font-size:11px
}
.composer input::placeholder {
  color:#aeb6c0
}
.composer #sendBtn {
  width:auto;
  background:#11a780;
  color:white;
  border-radius:8px;
  padding:0 11px;
  display:flex;
  gap:10px;
  align-items:center;
  font-size:9px;
  font-weight:600
}
.composer #sendBtn b {
  font-size:13px
}
.composer-hint {
  text-align:center;
  padding:8px 2px 0;
  height:27px;
  flex:none;
  color:#a6afba;
  font-size:8px
}
.composer-hint span {
  margin:0 5px
}
.right-panel {
  border:1px solid var(--line);
  border-left:0;
  border-radius:0 14px 14px 0;
  padding:19px 14px 11px;
  display:flex;
  flex-direction:column
}
.people-heading {
  display:flex;
  align-items:center;
  gap:9px;
  margin:2px 3px 15px
}
.people-heading strong {
  font-size:12px
}
.people-heading>b,.group-label>b {
  font-size:8px;
  color:#169c76;
  background:#eaf8f2;
  border-radius:10px;
  padding:4px 7px
}
.people-search {
  height:33px;
  border:1px solid #edf0f3;
  background:#fafbfc;
  border-radius:8px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 9px;
  color:#9aa3af
}
.people-search input {
  border:0;
  outline:0;
  background:transparent;
  min-width:0;
  width:100%;
  font-size:9px
}
.group-label {
  font-size:8px;
  font-weight:700;
  letter-spacing:.5px;
  color:#8b96a4;
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:18px;
  padding:0 4px 9px;
  border-bottom:1px solid #f0f2f5
}
.group-label>b {
  margin-left:auto;
  background:#f2f4f6;
  color:#677485
}
.user-list {
  padding-top:6px;
  overflow:auto
}
.empty-users {
  font-size:9px;
  color:#a1aab6;
  line-height:1.55;
  padding:10px 4px
}
.user-row {
  height:37px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 4px;
  border-radius:8px;
  cursor:pointer
}
.user-row:hover {
  background:#f6f8fa
}
.user-row:nth-child(4n+2) .user-avatar {
  background:#fff2dd;
  color:#b37b1b
}
.user-row:nth-child(4n+3) .user-avatar {
  background:#f2eaff;
  color:#8166bb
}
.user-row:nth-child(4n+4) .user-avatar {
  background:#e5f7f1;
  color:#188a69
}
.user-name {
  font-size:9px;
  color:#536071;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.user-rank {
  font-size:8px;
  color:#a3adba;
  margin-left:auto
}
.tip-card {
  margin-top:auto;
  display:flex;
  gap:8px;
  background:#f5faf8;
  border:1px solid #e8f4ef;
  border-radius:9px;
  padding:9px
}
.tip-card>b {
  font-size:14px
}
.tip-card strong,.tip-card small {
  display:block
}
.tip-card strong {
  font-size:8px
}
.tip-card small {
  font-size:8px;
  color:#8e9b9a;
  line-height:1.45;
  margin-top:4px
}
.server-foot {
  display:flex;
  justify-content:space-between;
  padding:11px 2px 2px;
  color:#9ea7b2;
  font-size:7px
}
.overlay {
  position:fixed;
  inset:66px 0 0;
  z-index:5;
  background:#12182677;
  backdrop-filter:blur(3px);
  display:grid;
  place-items:center;
  overflow:auto;
  padding:16px
}
.login-wrap {
  width:min(408px,100%);
  display:flex;
  align-items:center;
  flex-direction:column
}
.login-brand {
  text-align:center;
  color:#fff;
  margin:0 0 14px
}
.login-brand h1 {
  margin:0;
  font-size:21px;
  letter-spacing:-1px;
  font-weight:800;
  text-shadow:0 2px 9px #10182855
}
.login-brand p {
  font-size:10px;
  color:#e0e5ed;
  margin:4px 0 0
}
.login-card {
  width:100%;
  background:#fff;
  border-radius:17px;
  padding:24px 28px 17px;
  box-shadow:0 18px 60px #10182855
}
.login-card h2 {
  font-size:18px;
  margin:0 0 5px;
  letter-spacing:-.4px
}
.login-desc {
  margin:0 0 16px;
  color:#8b95a3;
  font-size:10px
}
.login-card form>label,.modal form>label {
  display:block;
  font-size:9px;
  font-weight:600;
  color:#414e5d;
  margin:11px 0 5px
}
.login-card label small {
  font-size:8px;
  color:#9ca5b1;
  font-weight:400
}
.field {
  height:39px;
  border:1px solid #e5eaf0;
  border-radius:8px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 10px;
  background:#fff
}
.field:focus-within {
  border-color:#8cd7c0;
  box-shadow:0 0 0 3px #10a77e12
}
.field>i {
  font-style:normal;
  font-size:13px;
  color:#f29b38;
  min-width:14px;
  text-align:center
}
.field input {
  border:0;
  outline:0;
  background:transparent;
  min-width:0;
  flex:1;
  font-size:10px;
  color:#344052
}
.field input::placeholder {
  color:#b5bdc7
}
.field>button {
  border:0;
  background:none;
  color:#a2acb8
}
.remember {
  display:flex!important;
  align-items:center;
  gap:8px;
  margin:12px 0!important;
  color:#697585!important;
  font-size:9px!important;
  font-weight:500!important;
  cursor:pointer
}
.remember input {
  position:absolute;
  opacity:0
}
.remember>span {
  height:15px;
  width:15px;
  border:1px solid #ced6df;
  border-radius:4px;
  display:grid;
  place-items:center
}
.remember input:checked+span {
  background:#13a780;
  border-color:#13a780
}
.remember input:checked+span:after {
  content:"✓";
  font-size:10px;
  color:white
}
.enter-btn {
  height:41px;
  width:100%;
  border:0;
  border-radius:8px;
  background:#f39817;
  color:#fff;
  font-size:11px;
  font-weight:700;
  box-shadow:0 5px 12px #f398173d
}
.enter-btn:hover {
  background:#e88807;
  transform:translateY(-1px)
}
.or {
  height:24px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#b3bbc5;
  font-size:8px
}
.or:before,.or:after {
  content:"";
  height:1px;
  flex:1;
  background:#edf0f3
}
.guest-btn {
  width:100%;
  height:36px;
  border:1px solid #e7ebef;
  border-radius:8px;
  background:#fff;
  color:#626e7d;
  font-size:9px;
  font-weight:600
}
.guest-btn:hover {
  background:#f7faf9;
  border-color:#bee8d8;
  color:#0d9571
}
.register-link {
  display:block;
  margin:10px auto 0;
  border:0;
  background:none;
  color:#159a76;
  font-size:9px;
  font-weight:600
}
.register-link b {
  font-size:13px;
  margin-left:4px
}
.login-error {
  min-height:0;
  color:#cf4f5a;
  font-size:9px;
  text-align:center;
  margin:5px 0 0
}
.login-footer {
  margin-top:12px;
  color:#e2e8ee;
  font-size:8px;
  text-shadow:0 1px 4px #11182766
}
.login-footer a {
  color:#fff;
  text-decoration:none
}
.modal-overlay {
  position:fixed;
  inset:0;
  background:#10182888;
  backdrop-filter:blur(3px);
  display:none;
  place-items:center;
  padding:16px;
  z-index:10
}
.modal-overlay.show {
  display:grid
}
.modal {
  width:min(370px,100%);
  background:#fff;
  border-radius:16px;
  padding:23px;
  position:relative;
  box-shadow:0 18px 60px #11182744
}
.modal .close {
  position:absolute;
  right:12px;
  top:11px;
  border:0;
  background:#f2f4f6;
  border-radius:50%;
  width:27px;
  height:27px;
  font-size:18px;
  color:#7e8997
}
.modal h2 {
  font-size:16px;
  margin:5px 0
}
.modal>p {
  font-size:9px;
  color:#8e98a5;
  margin:0 0 14px
}
.modal-primary {
  margin-top:13px;
  height:39px;
  width:100%;
  background:#13a780;
  border:0;
  border-radius:8px;
  color:white;
  font-weight:700;
  font-size:10px
}
.modal-note {
  display:block;
  font-size:8px;
  line-height:1.5;
  margin-top:9px;
  color:#99a2ad
}
.toast {
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translate(-50%,20px);
  opacity:0;
  pointer-events:none;
  z-index:20;
  background:#172235;
  color:#fff;
  border-radius:9px;
  padding:10px 15px;
  font-size:10px;
  box-shadow:0 8px 24px #11182733;
  transition:.2s
}
.toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
.mobile-only,.mobile-nav {
  display:none
}
.dark-mode {
  --line:#2c3544;
  --panel:#1c2533;
  background:#141b27;
  color:#e5eaf2
}
.dark-mode .layout,.dark-mode body {
  background:#141b27
}
.dark-mode .left-rail,.dark-mode .chat-panel,.dark-mode .right-panel,.dark-mode .composer,.dark-mode .login-card,.dark-mode .modal {
  background:#1c2533;
  color:#e5eaf2;
  border-color:#2c3544
}
.dark-mode .room:not(.active),.dark-mode .user-name,.dark-mode .msg-nick,.dark-mode .composer input,.dark-mode .login-card h2,.dark-mode .field input,.dark-mode .modal h2 {
  color:#d8dfeb
}
.dark-mode .chat-heading,.dark-mode .group-label {
  border-color:#2c3544
}
.dark-mode .field input::placeholder,.dark-mode .composer input::placeholder {
  color:#8490a1
}
.dark-mode .login-card form>label,.dark-mode .modal form>label {
  color:#c7d0dc
}
.dark-mode .welcome-card {
  border-color:#3a4554
}
.dark-mode .welcome-card strong {
  color:#d4dce8
}
@media(max-width:980px) {
  .layout {
    grid-template-columns:185px minmax(0,1fr);
    padding:10px
  }
.right-panel {
    display:none;
    border:1px solid var(--line);
    border-radius:0 13px 13px 0;
    position:absolute;
    right:10px;
    top:76px;
    bottom:10px;
    width:min(275px,80vw);
    z-index:4;
    box-shadow:0 12px 35px #16202c35
  }
.right-panel.mobile-open {
    display:flex
  }
.mobile-only {
    display:block
  }
.chat-panel {
    border-radius:0 13px 13px 0
  }
.left-rail {
    border-radius:13px 0 0 13px
  }
}
@media(max-width:620px) {
  body {
    min-height:460px
  }
.topbar {
    height:55px;
    padding:0 12px;
    gap:6px
  }
.brand {
    font-size:15px
  }
.brand-mark {
    width:26px;
    height:26px;
    font-size:20px
  }
.network-state {
    font-size:8px;
    gap:5px
  }
.network-state b {
    padding:3px 6px
  }
.top-actions {
    gap:1px
  }
.profile-pill {
    padding:3px;
    border:0;
    background:transparent
  }
.profile-pill>span:nth-child(2),.profile-pill>b {
    display:none
  }
.layout {
    display:block;
    height:calc(100dvh - 101px);
    padding:0;
    background:var(--panel)
  }
.left-rail {
    display:none
  }
.chat-panel {
    height:100%;
    border:0;
    border-radius:0
  }
.chat-heading {
    height:54px;
    padding:0 13px
  }
.mobile-only {
    display:block
  }
.connection-notice {
    height:25px
  }
.message-list {
    padding:13px 12px
  }
.chat-message {
    max-width:96%
  }
.composer {
    margin:0 8px;
    min-height:44px
  }
.composer-hint {
    height:21px;
    padding-top:5px
  }
.right-panel {
    top:55px;
    right:0;
    bottom:46px;
    width:min(300px,88vw)
  }
.mobile-nav {
    height:46px;
    display:flex;
    background:#fff;
    border-top:1px solid #e9edf2;
    justify-content:space-around;
    align-items:center;
    z-index:3
  }
.mobile-nav button {
    height:42px;
    min-width:74px;
    border:0;
    background:transparent;
    color:#8994a2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    font-size:15px
  }
.mobile-nav button small {
    font-size:8px
  }
.mobile-nav button.selected {
    color:#12a47c;
    font-weight:700
  }
.overlay {
    inset:55px 0 0;
    padding:12px;
    background:#101724a8
  }
.login-brand {
    margin-bottom:9px
  }
.login-brand h1 {
    font-size:18px
  }
.login-brand p {
    font-size:9px
  }
.login-card {
    padding:19px 18px 14px;
    border-radius:14px
  }
.login-card h2 {
    font-size:16px
  }
.login-desc {
    margin-bottom:11px
  }
.login-card form>label {
    margin-top:8px
  }
.field {
    height:36px
  }
.remember {
    margin:9px 0!important
  }
.enter-btn {
    height:38px
  }
.login-footer {
    text-align:center;
    font-size:8px
  }
.dark-mode .mobile-nav {
    background:#1c2533;
    border-color:#2c3544
  }
}
@media(max-height:680px) {
  .login-brand {
    margin-bottom:6px
  }
.login-brand h1 {
    font-size:17px
  }
.login-brand p {
    margin-top:1px
  }
.login-card {
    padding-top:15px;
    padding-bottom:10px
  }
.login-card h2 {
    font-size:15px
  }
.login-desc {
    margin-bottom:8px
  }
.login-card form>label {
    margin-top:6px
  }
.field {
    height:34px
  }
.remember {
    margin:7px 0!important
  }
.enter-btn {
    height:35px
  }
.or {
    height:19px
  }
.guest-btn {
    height:32px
  }
.login-footer {
    margin-top:7px
  }
}
/* Reference-inspired desktop layout: chat, participants, then persistent channel list. */ @media (min-width: 900px) {
  .topbar {
    height: 58px;
    padding: 0 24px;
  }
 .layout {
    height: calc(100dvh - 58px);
    max-width: none;
    padding: 0;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 18vw) minmax(180px, 18vw);
  }
 .chat-panel {
    grid-column: 1;
    grid-row: 1;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
  }
 .right-panel {
    grid-column: 2;
    grid-row: 1;
    position: static;
    width: auto;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
  }
 .left-rail {
    grid-column: 3;
    grid-row: 1;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    padding: 19px 13px 12px;
  }
}
.room.status-room {
  margin-bottom:8px;
  border-bottom:1px solid #edf0f3;
  border-radius:8px
}
.room.status-room .hash {
  font-size:12px;
  color:#16a880
}
.room.status-room.active {
  background:#e9f8f2
}
.chat-tools {
  margin:0 17px 7px;
  padding:10px 12px;
  background:#fff;
  border:1px solid #e3e8ed;
  border-radius:12px;
  box-shadow:0 8px 24px #1b25321a;
  max-height:36vh;
  overflow:auto;
  flex:none
}
.chat-tools[hidden] {
  display:none
}
.tools-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  margin-bottom:8px
}
.tools-title button {
  border:0;
  background:#f2f5f7;
  border-radius:6px;
  width:25px;
  height:25px
}
.emoji-grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(26px,1fr));
  gap:3px
}
.emoji-grid button {
  border:0;
  border-radius:6px;
  background:transparent;
  font-size:18px;
  height:30px
}
.emoji-grid button:hover {
  background:#edf7f3
}
.format-tools {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  border-top:1px solid #edf0f3;
  margin-top:9px;
  padding-top:8px
}
.format-tools>button {
  height:27px;
  min-width:28px;
  border:1px solid #e4e9ed;
  border-radius:6px;
  background:#fff;
  color:#536071
}
.format-tools .color-label {
  font-size:9px;
  color:#7d8997;
  margin-left:6px
}
.color-grid {
  display:flex;
  gap:4px;
  flex-wrap:wrap
}
.color-grid button {
  width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid #cbd2d9;
  background:var(--swatch)
}
.color-grid button.selected {
  outline:2px solid #12a47c;
  outline-offset:2px
}
.status-line {
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:8px;
  max-width:100%;
  margin:4px auto 8px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:10px;
  line-height:1.5;
  text-align:left;
  overflow-wrap:anywhere
}
.status-line time {
  flex:none;
  color:#96a0ad;
  font-size:9px;
  padding-top:2px
}
.status-line>span {
  display:block;
  max-width:min(920px,95%);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  border-radius:8px
}
.dark-mode .chat-tools {
  background:#1c2533;
  border-color:#2c3544
}
.dark-mode .tools-title,.dark-mode .format-tools>button {
  color:#d8dfeb;
  background:#1c2533;
  border-color:#3a4554
}
.dark-mode .room.status-room {
  border-color:#2c3544
}
@media(max-width:620px) {
  .chat-tools {
    margin:0 8px 6px;
    max-height:30vh;
    padding:8px
  }
.emoji-grid {
    grid-template-columns:repeat(9,minmax(25px,1fr))
  }
.emoji-grid button {
    height:28px;
    font-size:17px
  }
.status-line {
    justify-content:flex-start;
    font-size:9px
  }
.status-line>span {
    max-width:100%
  }
}
.status-nav {
  width:calc(100% - 12px);
  margin:5px 6px 9px;
  padding:10px;
  border:1px solid #e7edf0;
  border-radius:9px;
  background:#fff;
  display:grid;
  grid-template-columns:20px 1fr;
  grid-template-rows:auto auto;
  gap:1px 7px;
  text-align:left;
  color:#566273
}
.status-nav>span {
  grid-row:1/3;
  align-self:center;
  color:#13a780
}
.status-nav>b {
  font-size:11px
}
.status-nav>small {
  font-size:8px;
  color:#9ba5b1
}
.status-nav.active {
  background:#e9f8f2;
  border-color:#c9ebdf;
  color:#078967
}
.dark-mode .status-nav {
  background:#1c2533;
  border-color:#2c3544;
  color:#d8dfeb
}
.dark-mode .status-nav.active {
  background:#18352d;
  border-color:#25634f
}
.layout.status-view {
  grid-template-columns:minmax(0,1fr) 250px!important
}
.layout.status-view .left-rail {
  display:none!important
}
.layout.status-view .chat-panel {
  grid-column:1
}
.layout.status-view .right-panel {
  grid-column:2;
  border-left:1px solid var(--line);
  border-radius:0 14px 14px 0;
  display:flex!important;
  position:relative;
  right:auto;
  top:auto;
  bottom:auto;
  width:auto;
  box-shadow:none;
  padding:18px 12px 10px
}
.layout.status-view #channelPanel {
  display:flex;
  flex-direction:column;
  min-height:0;
  height:100%
}
.layout.status-view #channelPanel[hidden] {
  display:none
}
.layout.status-view #peopleContent[hidden] {
  display:none
}
.channel-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 4px 10px;
  border-bottom:1px solid #edf0f3;
  font-size:9px;
  letter-spacing:.5px;
  color:#8591a0
}
.channel-heading>b {
  font-size:9px;
  border-radius:10px;
  background:#eef7f3;
  color:#149875;
  padding:4px 7px
}
.status-channel-list {
  overflow:auto;
  padding:7px 0
}
.status-channel {
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  height:38px;
  padding:0 7px;
  border:0;
  border-radius:8px;
  background:transparent;
  text-align:left;
  color:#586577;
  font-size:11px
}
.status-channel:hover {
  background:#f5f8fa;
  color:#078967
}
.status-channel .hash {
  color:#9aa5b1;
  font-size:15px
}
.join-channel {
  height:35px;
  flex:none;
  margin-top:6px;
  border:1px solid #e7edf2;
  border-radius:8px;
  background:#fff;
  color:#667485;
  font-size:10px
}
.join-channel:hover {
  border-color:#b6e5d5;
  color:#078967
}
.dark-mode .status-channel:hover {
  background:#253244;
  color:#8de0c4
}
.dark-mode .channel-heading {
  border-color:#2c3544
}
.dark-mode .join-channel {
  background:#1c2533;
  border-color:#2c3544;
  color:#d8dfeb
}
@media(max-width:620px) {
  .layout.status-view {
    display:block
  }
.layout.status-view .left-rail {
    display:none!important
  }
.layout.status-view .right-panel {
    display:none!important
  }
.layout.status-view .right-panel.mobile-open {
    display:flex!important;
    position:absolute;
    right:10px;
    top:62px;
    bottom:52px;
    width:min(290px,85vw);
    z-index:4;
    border-radius:13px;
    box-shadow:0 12px 35px #16202c35
  }
.status-line {
    justify-content:flex-start
  }
}
.layout:not(.status-view) .connection-notice {
  display:none
}
.status-line {
  justify-content:flex-start;
  margin:4px 8px 8px;
  text-align:left
}
.status-line>span {
  background:transparent;
  padding:0;
  border-radius:0;
  color:#53647a
}
.status-line time {
  min-width:47px
}
.room-section-label {
  padding:14px 8px 4px;
  color:#99a2ae;
  font-size:8px;
  font-weight:700;
  letter-spacing:1px
}
.private-room .hash {
  font-size:14px;
  color:#b185d8
}
.private-room.active .hash {
  color:#078967
}
.user-rank {
  min-width:18px;
  text-align:right;
  white-space:nowrap;
  letter-spacing:.3px;
  font-size:11px;
  font-weight:800;
  color:#128b70
}
.user-rank:empty {
  display:none
}
.private-empty {
  margin:30px auto;
  padding:16px 20px;
  max-width:420px;
  border:1px dashed #dce4eb;
  border-radius:12px;
  color:#8b96a4;
  text-align:center;
  font-size:12px
}
/* Mobile layout aligned to the reference chat: compact top bar, full-height stream,
   drawer navigation and a composer that stays at the bottom. */ @media (max-width: 620px) {
  html, body {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
 body {
    height: 100dvh;
    min-height: 0;
    overscroll-behavior: none;
  }
 .topbar {
    height: 56px;
    min-height: 56px;
    padding: 0 10px;
    gap: 7px;
  }
 .room-menu-btn {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 36px;
    font-size: 20px;
  }
 .brand {
    flex: 0 0 auto;
    font-size: 14px;
    gap: 6px;
  }
 .brand-mark {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }
 .brand small {
    font-size: 8px;
  }
 .network-state {
    min-width: 0;
    margin: 0 auto;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
  }
 .network-state span:not(:first-of-type), .network-state b {
    display: none;
  }
 .network-state span:first-of-type {
    overflow: hidden;
    text-overflow: ellipsis;
  }
 .top-actions {
    flex: 0 0 auto;
    gap: 2px;
  }
 .layout, .layout.status-view {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    height: calc(100dvh - 56px);
    min-height: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    overflow: hidden;
  }
 .chat-panel {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }
 .chat-heading {
    height: 54px;
    min-height: 54px;
    padding: 0 14px;
  }
 .chat-heading strong {
    font-size: 14px;
  }
 .chat-heading small {
    font-size: 10px;
  }
 .message-list {
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px 12px;
  }
 .chat-message {
    max-width: 96%;
    gap: 8px;
  }
 .msg-bubble {
    font-size: 13px;
  }
 .composer {
    margin: 0 8px;
    min-height: 46px;
    gap: 4px;
    padding: 5px;
  }
 .composer input {
    font-size: 14px;
  }
 .composer-hint {
    height: 22px;
    padding-top: 5px;
    font-size: 8px;
  }
 .mobile-nav {
    display: none !important;
  }
 .left-rail {
    display: flex;
    position: fixed;
    z-index: 12;
    inset: 56px auto 0 0;
    width: min(300px, 86vw);
    height: auto;
    padding: 16px 12px calc(14px + env(safe-area-inset-bottom));
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 14px 14px 0;
    box-shadow: 14px 0 40px #11182730;
    transform: translateX(-105%);
    transition: transform .2s ease;
    background: var(--panel);
  }
 .left-rail.mobile-open {
    transform: translateX(0);
  }
 .layout.status-view .left-rail {
    display: flex !important;
  }
 .right-panel, .layout.status-view .right-panel {
    display: flex !important;
    position: fixed;
    z-index: 11;
    inset: 56px 0 0 auto;
    width: min(310px, 88vw);
    height: auto;
    padding: 16px 13px calc(12px + env(safe-area-inset-bottom));
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: 14px 0 0 14px;
    box-shadow: -12px 0 36px #11182728;
    transform: translateX(105%);
    transition: transform .2s ease;
    background: var(--panel);
  }
 .right-panel.mobile-open, .layout.status-view .right-panel.mobile-open {
    transform: translateX(0);
  }
 .layout.status-view #channelPanel {
    height: 100%;
    min-height: 0;
  }
 .layout.status-view #peopleContent[hidden], .layout.status-view #channelPanel[hidden] {
    display: none !important;
  }
 .people-heading {
    margin-bottom: 12px;
  }
 .user-row {
    min-height: 42px;
  }
 .user-name {
    font-size: 12px;
  }
 .user-rank {
    font-size: 10px;
  }
 .status-channel {
    min-height: 44px;
    font-size: 13px;
  }
 .join-channel {
    min-height: 42px;
    font-size: 12px;
  }
 .chat-tools {
    margin: 0 8px 6px;
    max-height: 34dvh;
    padding: 9px;
  }
 .emoji-grid {
    grid-template-columns: repeat(8, minmax(28px, 1fr));
  }
 .emoji-grid button {
    height: 34px;
    font-size: 19px;
  }
 .overlay {
    inset: 0;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }
}
@media (max-width: 360px) {
  .network-state {
    display: none;
  }
 .topbar {
    justify-content: space-between;
  }
 .composer-hint {
    font-size: 7px;
  }
 .composer #sendBtn {
    padding: 0 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .left-rail, .right-panel {
    transition: none !important;
  }
}
@media(max-width:620px) {
  .login-card {
    max-height:calc(100dvh - 92px);
    overflow:auto
  }
}
/* Yetki simgelerini kalın, renkli ve kolay fark edilir göster. */ .user-row {
  min-height:42px;
  height:auto;
}
.user-rank:not(:empty) {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  height:26px;
  padding:0 7px;
  border:1px solid #087b5f;
  border-radius:8px;
  background:#10a77e;
  color:#fff;
  font-size:16px;
  font-weight:900;
  line-height:1;
  letter-spacing:.2px;
  text-align:center;
  text-shadow:0 1px 1px #075f49;
  box-shadow:0 2px 5px #07896735;
}
.dark-mode .user-rank:not(:empty) {
  background:#14a983;
  border-color:#36c69f;
  color:#fff;
}
@media(max-width:620px) {
  .user-row {
    min-height:46px;
  }
 .user-rank:not(:empty) {
    min-width:30px;
    height:30px;
    font-size:18px;
    border-radius:9px;
  }
}