@charset "UTF-8";
:root {
  color-scheme: dark;
  --bg: #0b0b14;
  --shell: #101220;
  --panel: #151827;
  --panel-deep: #111421;
  --rail: #0c1020;
  --surface: #1c2134;
  --surface-hover: #262d44;
  --border: rgba(174, 184, 255, .105);
  --border-strong: rgba(174, 184, 255, .19);
  --text: #edf0ff;
  --muted: #8993b3;
  --muted-soft: #687492;
  --purple: #8b5cf6;
  --purple-light: #ad8dff;
  --cyan: #22d3ee;
  --green: #27d697;
  --red: #fb6174;
  --yellow: #efb948;
  --radius: 16px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
*, *::before, *::after {box-sizing: border-box}
[hidden] {display: none !important}
html, body {margin: 0; min-height: 100%; width: 100%}
body {
  overflow: hidden;
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 12% 20%, rgba(99, 57, 170, .23), transparent 35%),
              radial-gradient(ellipse at 91% 78%, rgba(18, 176, 211, .13), transparent 34%), #0b0b14;
  color: var(--text); line-height: 1.5;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .25;
  background-image: linear-gradient(rgba(135, 108, 255, .095) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(135, 108, 255, .095) 1px, transparent 1px);
  background-size: 58px 58px; mask-image: linear-gradient(180deg, #000, transparent 80%);
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .23;
  background-image: radial-gradient(#b6a9fb .7px, transparent .9px);
  background-size: 81px 83px; background-position: 21px 13px;
}
.ambient {position: fixed; width: 480px; height: 480px; border-radius: 50%; filter: blur(95px); opacity: .15; pointer-events: none;}
.ambient-a {background: var(--purple); top: -290px; left: -130px}
.ambient-b {background: var(--cyan); bottom: -300px; right: -150px}
button, input {font: inherit}
button {cursor: pointer}
button:disabled {cursor: not-allowed; opacity: .55}
button, input { -webkit-tap-highlight-color: transparent }
button:focus-visible, input:focus-visible, a:focus-visible {outline: 2px solid var(--cyan); outline-offset: 3px}
button {color: inherit}
input {color: var(--text)}
a {color: var(--cyan)}
svg {display: block; width: 20px; height: 20px; fill: none}
.svg-sprite {position: absolute; width: 0; height: 0; overflow: hidden}
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0}
.skip-link {position: absolute; left: 10px; top: -70px; z-index: 100; background: var(--purple); padding: 12px 16px; border-radius: 10px}
.skip-link:focus {top: 10px}
.app-shell {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  width: min(1660px, calc(100% - 50px)); height: min(930px, calc(100dvh - 50px)); min-height: 540px;
  overflow: hidden; border: 1px solid rgba(185, 180, 255, .23); border-radius: 19px;
  background: var(--shell); box-shadow: 0 28px 100px rgba(0, 0, 0, .5),
    0 0 52px rgba(108, 64, 241, .17), 0 1px 0 rgba(217, 213, 255, .1) inset;
}
.global-header {
  flex: 0 0 73px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 0 26px; background: #111424; border-bottom: 1px solid var(--border);
}
.brand {display: flex; align-items: center; gap: 12px; flex: 0 0 auto}
.brand-icon {width: 42px; height: 42px; display: grid; place-items: center; color: var(--purple-light); filter: drop-shadow(0 0 9px rgba(139, 92, 246, .7))}
.brand-icon svg {width: 36px; height: 36px}
.brand-words {display: flex; flex-direction: column; gap: 0}
.brand-words strong {font-size: 22px; letter-spacing: -.9px; line-height: 1.1}
.brand-words strong span {background: linear-gradient(95deg, #a780ff 12%, var(--cyan)); color: transparent; background-clip: text}
.brand-words small {font-size: 10px; letter-spacing: 1.3px; color: #99a2c6; margin-top: 4px}
.header-center {display: flex; align-items: center; gap: 11px; color: #bcc5de; font-size: 12px}
.live-pulse {width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 12px var(--green)}
.header-separator {height: 17px; width: 1px; background: var(--border-strong); margin: 0 5px}
.header-hint {color: var(--muted)}
.header-actions {display: flex; align-items: center; gap: 13px}
.preview-pill {font-size: 10px; font-weight: 700; letter-spacing: .9px; color: var(--cyan); border: 1px solid rgba(34, 211, 238, .25); background: rgba(34, 211, 238, .07); padding: 6px 10px; border-radius: 20px}
.secondary-button, .primary-button {border-radius: 10px; font-weight: 700; border: 1px solid rgba(154, 118, 255, .35); transition: filter .2s, transform .2s, background .2s}
.secondary-button {background: rgba(139, 92, 246, .16); color: #d5c4ff; padding: 9px 17px; font-size: 12px}
.secondary-button:hover, .primary-button:hover {filter: brightness(1.15); transform: translateY(-1px)}
.primary-button {padding: 12px 18px; background: linear-gradient(110deg, #9357fc, #724ef2); box-shadow: 0 5px 24px rgba(139, 92, 246, .22); color: #fff; font-size: 13px}
.primary-button.small-button {padding: 9px 13px; white-space: nowrap}
.full-width {width: 100%; margin-top: 16px}
.icon-button {border: 0; background: transparent; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: #9aa6c7}
.icon-button:hover {background: var(--surface-hover); color: #fff}
.menu-trigger {display: none}
.app-grid {display: grid; grid-template-columns: 72px 250px minmax(0, 1fr) 225px; flex: 1; min-height: 0; position: relative}
.server-rail {padding: 20px 10px; display: flex; flex-direction: column; align-items: center; gap: 13px; background: var(--rail); border-right: 1px solid var(--border)}
.server-item {display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border: 1px solid transparent; border-radius: 16px; background: #1a2036; color: #aab6d4; font-size: 18px; font-weight: 800; transition: background .2s, border-color .2s, border-radius .2s, transform .2s}
.server-item svg {width: 25px; height: 25px}
.server-item:hover {background: #30315b; transform: translateY(-2px)}
.server-item.active {border-radius: 16px; background: linear-gradient(135deg, #6338da, #398aca); border-color: #ab92ff; color: #fff; box-shadow: 0 0 0 3px rgba(136, 84, 246, .17), 0 0 21px rgba(139, 92, 246, .35)}
.rail-divider {height: 1px; width: 28px; background: var(--border-strong); margin: 0 0 2px}
.server-add {border: 1px dashed rgba(34, 211, 238, .45); color: var(--cyan); background: rgba(34, 211, 238, .065)}
.rail-spacer {flex: 1}
.rail-bottom-label {display: grid; place-items: center; border: 1px solid var(--border); border-radius: 12px; width: 38px; height: 38px; color: var(--muted-soft); font-size: 11px; font-weight: 900; letter-spacing: 2px}
.channel-sidebar {display: flex; flex-direction: column; min-height: 0; background: #171b2b; border-right: 1px solid var(--border)}
.server-heading {min-height: 70px; padding: 0 19px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); font-weight: 750; font-size: 13px}
.tiny-server-mark {display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; background: #3b286c; color: #c4a8ff}
.chevron {margin-left: auto; color: var(--muted); font-size: 22px; font-weight: 400}
.sidebar-scroll {flex: 1; min-height: 0; overflow-y: auto; padding: 20px 12px}
.sidebar-announcement {display: flex; gap: 10px; padding: 13px 11px; border: 1px solid rgba(139, 92, 246, .18); background: linear-gradient(110deg, rgba(139, 92, 246, .17), rgba(34, 211, 238, .04)); border-radius: 11px; margin-bottom: 26px}
.announcement-emoji {color: #c5aeff; font-size: 17px; line-height: 1.1}
.sidebar-announcement b, .sidebar-announcement small {display: block}
.sidebar-announcement b {font-size: 11px}
.sidebar-announcement small {font-size: 10px; line-height: 1.5; color: var(--muted); margin-top: 3px}
.sidebar-section-label, .list-caption {display: flex; justify-content: space-between; color: #7e8bab; font-size: 10px; letter-spacing: 1.3px; font-weight: 800; margin: 0 9px 10px}
.sidebar-section-spaced {margin-top: 26px}
.channel-list {display: grid; gap: 4px}
.channel, .side-shortcut {width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 11px; border: 1px solid transparent; border-radius: 8px; background: transparent; text-align: left; font-weight: 650; font-size: 13px; color: #98a5c3; min-height: 41px}
.channel svg, .side-shortcut svg {width: 19px; height: 19px; opacity: .8; flex-shrink: 0}
.channel:hover, .side-shortcut:hover {background: #252b41; color: #eef0ff}
.channel.active {background: #303553; color: #fff; border-color: rgba(167, 156, 255, .1); box-shadow: inset 3px 0 0 var(--purple)}
.channel-count, .shortcut-count {margin-left: auto; color: #acb6d3; font-size: 10px}
.channel-unread {width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; margin-left: auto; box-shadow: 0 0 9px var(--cyan)}
.locked-tag {margin-left: auto; color: #e4ba77; font-size: 8px; letter-spacing: .25px}
.side-shortcut {min-height: 40px}
.sidebar-tip {margin-top: 38px; padding: 17px 15px; border: 1px solid rgba(158, 124, 250, .14); border-radius: 13px; background: radial-gradient(circle at 80% 0, rgba(139, 92, 246, .17), transparent 70%), #1c2034}
.sidebar-tip .tip-star {font-size: 23px; color: var(--purple-light); margin-bottom: 9px}
.sidebar-tip b {font-size: 13px}
.sidebar-tip p {font-size: 11px; line-height: 1.65; color: var(--muted); margin: 5px 0 0}
.account-bar {display: flex; align-items: center; gap: 10px; border: 0; border-top: 1px solid var(--border); background: #141728; padding: 12px 14px; text-align: left}
.account-bar:hover {background: #22283c}
.account-info {display: flex; flex-direction: column; min-width: 0}
.account-info b {font-size: 12px}
.account-info small {font-size: 10px; color: var(--muted)}
.account-settings {font-size: 19px; color: var(--muted); margin-left: auto}
.avatar {position: relative; display: inline-grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; flex: 0 0 37px; color: #fff; font-size: 15px; font-weight: 800; border: 2px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 10px rgba(255, 255, 255, .12)}
.avatar-kuba {background: linear-gradient(145deg, #f28361, #7c39ae)}
.avatar-ania {background: linear-gradient(145deg, #ec9b7b, #5b49bb)}
.avatar-marek {background: linear-gradient(145deg, #61b6c7, #3c568d)}
.avatar-ola {background: linear-gradient(145deg, #d78cbd, #7b4ec4)}
.avatar-bartek {background: linear-gradient(145deg, #50ada7, #536ab8)}
.avatar-tomek {background: linear-gradient(145deg, #728eb0, #4949a6)}
.avatar-natalia {background: linear-gradient(145deg, #d79488, #a23f85)}
.avatar-dawid {background: linear-gradient(145deg, #718096, #424d65)}
.avatar-kasia {background: linear-gradient(145deg, #936f91, #48506f)}
.avatar-piotrek {background: linear-gradient(145deg, #558799, #3d4971)}
.avatar-igor {background: linear-gradient(145deg, #67976e, #4e5175)}
.presence {position: absolute; right: -3px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #171b2b}
.presence.online, .role-dot.green {background: var(--green)}
.presence.idle, .role-dot.yellow {background: var(--yellow)}
.presence.offline, .role-dot.grey {background: #75819d}
.presence.busy {background: var(--red)}
.main-panel {min-width: 0; min-height: 0; background: var(--panel-deep)}
.view-panel {height: 100%; min-height: 0; display: flex; flex-direction: column}
.panel-header {display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 23px; height: 70px; min-height: 70px; border-bottom: 1px solid var(--border); background: #161a2b}
.panel-title {display: flex; align-items: center; min-width: 0; gap: 12px}
.panel-title > svg {color: #b2bce0; width: 23px; height: 23px; flex: 0 0 23px}
.panel-title h1 {font-size: 15px; line-height: 1.25; margin: 0; white-space: nowrap}
.panel-title > span:not(.vertical-line) {font-size: 11px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.vertical-line {width: 1px; height: 22px; background: var(--border-strong); margin: 0 4px}
.panel-actions {display: flex; gap: 3px}
.chat-search {padding: 12px 22px; border-bottom: 1px solid var(--border); background: var(--panel)}
.chat-search label {display: block; font-size: 11px; color: var(--muted); margin-bottom: 7px}
.chat-search input {width: 100%; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; padding: 9px 12px}
.message-scroll {flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #414863 transparent; padding: 27px 0 14px}
.channel-welcome {margin: 0 30px 26px}
.welcome-icon {width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, #6943e8, #3582bb); box-shadow: 0 5px 22px rgba(139, 92, 246, .24); margin-bottom: 14px}
.welcome-icon svg {width: 27px; height: 27px}
.channel-welcome h2 {margin: 0 0 5px; font-size: clamp(17px, 2vw, 24px); letter-spacing: -.6px}
.channel-welcome p {margin: 0; font-size: 12px; color: var(--muted)}
.day-divider {display: flex; align-items: center; gap: 16px; color: #8995b2; font-weight: 750; font-size: 10px; margin: 0 26px 22px; white-space: nowrap}
.day-divider::before, .day-divider::after {content: ""; height: 1px; flex: 1; background: var(--border)}
.messages {padding: 0 16px}
.message {display: flex; gap: 14px; border-radius: 8px; padding: 7px 10px 7px; margin-bottom: 1px}
.message:hover {background: rgba(185, 194, 255, .035)}
.message > .avatar {margin-top: 1px; width: 39px; height: 39px; flex: 0 0 39px}
.message-main {min-width: 0; flex: 1}
.message-meta {display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 3px}
.message-meta strong {font-size: 12px}
.message-meta time {font-size: 10px; color: #7785a5}
.role-admin {color: #ff6e7b}
.role-moderator {color: #42dcee}
.role-chip {font-size: 8px; font-weight: 850; padding: 2px 6px; border-radius: 4px; line-height: 1.4; letter-spacing: .25px}
.admin-chip {color: #ff9a9d; background: rgba(241, 63, 86, .15)}
.moderator-chip {color: #72ebff; background: rgba(34, 211, 238, .13)}
.member-chip {color: #b3bcd2; background: rgba(155, 167, 201, .11)}
.message-main p {font-size: 12px; margin: 0; color: #dce3f5; line-height: 1.65; overflow-wrap: anywhere}
.message-attachment {margin: 12px 0 9px; width: min(100%, 365px); overflow: hidden; border-radius: 11px; border: 1px solid rgba(149, 130, 248, .3); box-shadow: 0 5px 22px rgba(0,0,0,.17)}
.message-attachment img {display: block; width: 100%; height: auto; aspect-ratio: 490 / 224; object-fit: cover}
.reactions {display: flex; align-items: center; flex-wrap: wrap; gap: 6px}
.reaction {border: 1px solid rgba(157, 171, 215, .17); padding: 3px 9px; font-size: 11px; color: #bbc8e2; background: #232b41; border-radius: 8px}
.reaction:hover, .reaction[aria-pressed="true"] {border-color: var(--purple); background: rgba(139, 92, 246, .25)}
.composer-wrap {padding: 12px 22px 16px; background: var(--panel-deep)}
.composer {display: flex; align-items: center; gap: 10px; padding: 8px 11px; min-height: 51px; background: #272d42; border: 1px solid #383f58; border-radius: 10px}
.composer:focus-within, .dm-compose:focus-within {border-color: rgba(139, 92, 246, .7); box-shadow: 0 0 0 2px rgba(139, 92, 246, .1)}
.composer-plus {display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #171b29; background: #bbc5df; font-size: 21px; font-weight: 600}
.composer input, .dm-compose input {flex: 1; min-width: 0; border: 0; outline: none; padding: 8px 0; background: transparent; font-size: 12px}
.composer input::placeholder, .dm-compose input::placeholder {color: #a3aec8}
.send-button {width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--purple); color: #fff}
.send-button:hover {background: #a376ff}
.send-button svg {width: 18px; height: 18px}
.composer-help {display: flex; gap: 7px; margin: 8px 3px 0; color: #697798; font-size: 9px}
.members-panel {min-height: 0; position: relative; overflow-y: auto; background: #171b2b; border-left: 1px solid var(--border); padding: 24px 15px 92px; scrollbar-width: thin; scrollbar-color: #353b56 transparent}
.members-title {display: flex; justify-content: space-between; gap: 8px; color: #8b98b7; font-size: 10px; font-weight: 850; letter-spacing: 1px; margin-bottom: 30px}
.member-count {font-size: 9px; letter-spacing: 0; font-weight: 500}
.member-group {margin-bottom: 25px}
.member-group h2 {font-size: 10px; letter-spacing: .7px; color: #b9c0d7; margin: 0 0 12px 3px}
.member-group h2 span {font-weight: 500; color: #7c8bac}
.member {display: flex; align-items: center; gap: 9px; min-height: 48px; margin: 4px 0}
.member .avatar {width: 32px; height: 32px; flex: 0 0 32px; font-size: 12px}
.member b, .member small {display: block; font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.member small {color: var(--muted); font-size: 10px}
.member.is-offline {opacity: .55}
.member-footer {position: sticky; bottom: -75px; margin-top: 26px; display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: #20253a}
.member-footer svg {color: var(--cyan); flex-shrink: 0}
.member-footer b, .member-footer small {display: block}
.member-footer b {font-size: 10px}
.member-footer small {color: var(--muted); font-size: 9px}
.friends-header {gap: 10px}
.friend-tabs {display: flex; gap: 6px; padding: 14px 22px; border-bottom: 1px solid var(--border)}
.friend-tab {background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 7px 10px; font-size: 12px; color: #a7b3cf}
.friend-tab.active {background: #32334f; border-color: rgba(139, 92, 246, .18); color: #e5d9ff}
.friend-tab span {font-size: 10px; opacity: .7; margin-left: 3px}
.friends-layout {display: grid; grid-template-columns: minmax(180px, 37%) minmax(0, 1fr); flex: 1; min-height: 0}
.friends-list {min-height: 0; overflow-y: auto; background: #171b2b; border-right: 1px solid var(--border); padding: 16px 12px}
.friend-request {display: flex; align-items: center; gap: 8px; padding: 12px 10px; border: 1px solid rgba(139, 92, 246, .2); border-radius: 10px; background: rgba(139, 92, 246, .1); margin-bottom: 28px}
.request-icon {font-size: 15px; color: var(--purple-light)}
.friend-request > div {min-width: 0; flex: 1}
.friend-request strong, .friend-request small {display: block; font-size: 10px}
.friend-request small {font-size: 9px; color: #a6b0ca}
.accept-button {border: 0; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: #187b61; color: white}
.accept-button svg {width: 17px; height: 17px}
.friends-list .list-caption {margin-bottom: 12px}
.friend-contact {display: flex; gap: 9px; align-items: center; width: 100%; padding: 9px; border: 1px solid transparent; border-radius: 9px; background: transparent; text-align: left}
.friend-contact:hover {background: var(--surface-hover)}
.friend-contact.selected {background: #292e48; border-color: rgba(139, 92, 246, .16)}
.friend-contact b, .friend-contact small {display: block; font-size: 11px}
.friend-contact small {color: var(--muted); font-size: 9px}
.friend-contact.offline-contact {opacity: .65}
.friend-alert {background: var(--purple); font-size: 9px; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 8px; margin-left: auto}
.dm-panel {min-height: 0; display: flex; flex-direction: column; background: #131727}
.dm-header {display: flex; align-items: center; gap: 11px; min-height: 68px; border-bottom: 1px solid var(--border); padding: 0 20px}
.dm-header strong, .dm-header small {display: block; font-size: 12px}
.dm-header small {font-size: 10px; color: var(--green)}
.dm-encrypted {margin-left: auto; color: var(--muted); font-size: 9px}
.dm-messages {flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 11px; padding: 22px; scrollbar-width: thin}
.dm-day {text-align: center; color: var(--muted); font-size: 10px; margin-bottom: 14px}
.bubble {position: relative; width: fit-content; max-width: min(92%, 325px); border-radius: 13px; padding: 11px 13px 9px; background: #262d43; font-size: 12px; color: #e3e9fa; overflow-wrap: anywhere}
.bubble.incoming {border-bottom-left-radius: 4px}
.bubble.outgoing {align-self: flex-end; border-bottom-right-radius: 4px; background: linear-gradient(135deg, #7347d5, #8e54ea); color: #fff}
.bubble time {display: block; text-align: right; color: #c1bce6; font-size: 9px; margin-top: 4px}
.dm-compose {display: flex; align-items: center; gap: 10px; margin: 15px; padding: 8px 10px 8px 16px; border-radius: 10px; border: 1px solid #3a4059; background: #292e44}
.mobile-bottom-nav {display: none}
.modal-overlay {position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(4, 7, 18, .76); backdrop-filter: blur(9px); padding: 20px; overflow-y: auto}
.modal-card {position: relative; width: min(100%, 415px); background: linear-gradient(135deg, rgba(39, 41, 73, .96), rgba(19, 23, 40, .98)); border: 1px solid rgba(159, 130, 255, .35); border-radius: 18px; padding: 33px; box-shadow: 0 25px 100px #050612b3, 0 0 48px rgba(139, 92, 246, .21)}
.modal-card.wide-modal {width: min(100%, 530px)}
.modal-card .modal-close {position: absolute; right: 13px; top: 13px}
.modal-icon, .modal-logo {display: grid; place-items: center; width: 47px; height: 47px; background: rgba(139, 92, 246, .17); border-radius: 12px; margin-bottom: 20px; color: #b69aff}
.modal-icon svg, .modal-logo svg {width: 25px; height: 25px}
.modal-logo {margin: 0 auto 23px; width: 58px; height: 58px; box-shadow: 0 0 25px rgba(139, 92, 246, .25)}
.modal-logo svg {width: 37px; height: 37px}
.modal-card h2 {font-size: 20px; margin: 0 0 6px; line-height: 1.35; letter-spacing: -.4px}
.modal-card > p {margin: 0 0 23px; font-size: 12px; color: #a8b0cc}
.login-card h2, .login-card > p {text-align: center}
.modal-card form label {display: block; margin: 13px 0 6px; font-size: 11px; font-weight: 750}
.modal-card form input {width: 100%; background: #222740; border: 1px solid #464765; padding: 11px 13px; border-radius: 9px; font-size: 12px; outline: none}
.modal-card form input:focus {border-color: var(--purple)}
.modal-under {text-align: center; font-size: 11px; color: var(--muted); margin-top: 19px}
.modal-under button {border: 0; background: transparent; color: var(--purple-light); padding: 0; font-size: 11px}
.modal-disclaimer {display: block; margin-top: 18px; color: #8693ad; font-size: 10px; line-height: 1.6}
.roles-layout {display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px}
.role-list {display: grid; align-content: start; gap: 7px}
.role-list > div {display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); padding: 10px; border-radius: 8px; font-size: 12px}
.role-dot {display: inline-block; width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%}
.role-dot.red {background: var(--red)}
.role-dot.cyan {background: var(--cyan)}
.role-dot.grey {background: #8191b5}
.permission-row {width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11px; text-align: left; background: rgba(255,255,255,.025); padding: 10px; border: 0; border-bottom: 1px solid var(--border)}
.permission-row:first-child {border-radius: 8px 8px 0 0}
.permission-row:last-child {border-radius: 0 0 8px 8px; border-bottom: none}
.switch {position: relative; width: 38px; height: 21px; flex: 0 0 38px; border-radius: 20px; background: #49506a; transition: background .2s}
.switch::after {content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%; top: 3px; left: 3px; background: white; transition: transform .2s}
.permission-row[aria-pressed="true"] .switch {background: #8556ef}
.permission-row[aria-pressed="true"] .switch::after {transform: translateX(17px)}
.profile-banner {height: 75px; margin: -33px -33px 0; border-radius: 18px 18px 0 0; background: linear-gradient(110deg, #5c32af, #2c76a4 80%)}
.profile-head {display: flex; align-items: center; gap: 14px; margin-top: -20px; position: relative}
.profile-avatar {width: 72px; height: 72px; flex: 0 0 72px; font-size: 25px; border: 4px solid #1b2034}
.profile-head h2 {font-size: 18px; margin: 10px 0 2px}
.profile-head h2 small {font-size: 11px; color: var(--muted); font-weight: 400}
.profile-options {display: grid; gap: 4px; margin-top: 18px}
.profile-options button {display: flex; gap: 12px; align-items: center; background: transparent; padding: 11px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; text-align: left}
.profile-options button:hover, .profile-options button[aria-pressed="true"] {background: rgba(139,92,246,.13); border-color: rgba(139,92,246,.25)}
.profile-options button svg {width: 15px; height: 15px; margin-left: auto; color: var(--cyan); opacity: 0}
.profile-options button[aria-pressed="true"] svg {opacity: 1}
.toast {position: fixed; z-index: 30; bottom: 32px; left: 50%; transform: translateX(-50%); max-width: min(92vw, 520px); background: #232940; color: #f6f8ff; border: 1px solid rgba(139, 92, 246, .6); border-radius: 12px; box-shadow: 0 14px 50px rgba(0,0,0,.4); padding: 13px 18px; font-size: 12px; text-align: center}
@media (max-width: 1250px) {
  .app-grid {grid-template-columns: 66px 220px minmax(0,1fr) 192px}
  .global-header {padding: 0 18px}
  .brand-words strong {font-size: 20px}
  .members-panel {padding: 22px 11px}
  .panel-title > span:not(.vertical-line) {display: none}
  .vertical-line {display: none}
}
@media (max-width: 1050px) {
  .app-grid {grid-template-columns: 66px 235px minmax(0,1fr)}
  .members-panel {display: none; z-index: 7}
  .app-shell.show-members .members-panel {display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 230px; box-shadow: -18px 0 50px rgba(0,0,0,.5)}
  .header-hint, .header-separator {display: none}
  .friends-layout {grid-template-columns: minmax(170px, 34%) minmax(0,1fr)}
}
@media (max-width: 760px) {
  .app-shell {width: calc(100% - 20px); height: calc(100dvh - 20px); min-height: 0}
  .header-center {display: none}
  .app-grid {grid-template-columns: 62px minmax(0,1fr)}
  .channel-sidebar {position: absolute; z-index: 9; top: 0; bottom: 0; left: 62px; width: min(270px, calc(100% - 62px)); transform: translateX(calc(-100% - 64px)); transition: transform .22s; box-shadow: 12px 0 30px rgba(0,0,0,.22)}
  .app-shell.sidebar-open .channel-sidebar {transform: translateX(0)}
  .menu-trigger {display: inline-grid}
  .message-scroll {padding-top: 18px}
  .panel-header {padding: 0 15px}
  .channel-welcome {margin: 0 19px 20px}
  .messages {padding: 0 9px}
  .composer-wrap {padding: 11px 13px 13px}
  .friend-tabs {padding: 11px}
}
@media (max-width: 560px) {
  .app-shell {width: 100%; height: 100dvh; border: 0; border-radius: 0}
  .global-header {flex: 0 0 63px; padding: 0 14px}
  .brand-icon {width: 34px; height: 34px}
  .brand-icon svg {width: 31px; height: 31px}
  .brand-words strong {font-size: 19px}
  .brand-words small {font-size: 8px; letter-spacing: .9px}
  .preview-pill, .sign-in-button {display: none}
  .app-grid {grid-template-columns: minmax(0,1fr)}
  .server-rail {display: none}
  .channel-sidebar {left: 0; width: min(290px, 85vw); transform: translateX(-103%)}
  .app-shell.sidebar-open .channel-sidebar {transform: translateX(0)}
  .panel-header {height: 58px; min-height: 58px}
  .panel-title h1 {font-size: 14px}
  .panel-title {gap: 8px}
  .panel-actions .icon-button {width: 30px}
  .mobile-bottom-nav {display: flex; flex: 0 0 62px; background: #15192b; border-top: 1px solid var(--border); justify-content: space-around; align-items: stretch}
  .mobile-bottom-nav button {border: 0; background: transparent; color: var(--muted); font-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 33%}
  .mobile-bottom-nav button.mobile-active {color: #b99dff}
  .mobile-bottom-nav svg {width: 20px; height: 20px}
  .channel-welcome {margin: 0 17px 14px}
  .welcome-icon {height: 42px; width: 42px; border-radius: 13px; margin-bottom: 10px}
  .welcome-icon svg {width: 23px; height: 23px}
  .channel-welcome h2 {font-size: 18px}
  .channel-welcome p {font-size: 11px}
  .message {gap: 9px; padding: 8px 4px}
  .message > .avatar {width: 32px; height: 32px; flex: 0 0 32px; font-size: 12px}
  .message-meta {gap: 6px}
  .message-main p {font-size: 11px}
  .role-chip {font-size: 7px}
  .composer-help {display: none}
  .friends-header .small-button {font-size: 10px; padding: 7px}
  .friends-layout {grid-template-columns: 120px minmax(0,1fr)}
  .friends-list {padding: 10px 6px}
  .friend-request {flex-wrap: wrap}
  .friend-request small, .friends-list .list-caption, .friend-contact small, .friend-alert {display: none}
  .friend-contact {gap: 5px; padding: 8px 4px}
  .friend-contact .avatar {width: 30px; height: 30px; flex: 0 0 30px; font-size: 12px}
  .friend-contact b {font-size: 10px}
  .dm-header {padding: 0 10px}
  .dm-encrypted {display: none}
  .dm-messages {padding: 12px; gap: 8px}
  .bubble {font-size: 11px; max-width: 98%}
  .dm-compose {margin: 9px}
  .modal-card {padding: 26px 20px}
  .profile-banner {margin: -26px -20px 0}
}
@media (max-height: 760px) and (min-width: 561px) {
  .app-shell {height: calc(100dvh - 18px)}
  .channel-welcome {margin-bottom: 15px}
  .message-scroll {padding-top: 15px}
  .sidebar-announcement {margin-bottom: 14px}
  .sidebar-tip {margin-top: 18px}
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important}
}

/* Otwieranie i zamykanie prawego panelu członków na desktopie. */
@media (min-width: 1251px) {
  .app-shell.members-hidden .members-panel {display: none}
  .app-shell.members-hidden .app-grid {grid-template-columns: 72px 250px minmax(0, 1fr)}
}
@media (min-width: 1051px) and (max-width: 1250px) {
  .app-shell.members-hidden .members-panel {display: none}
  .app-shell.members-hidden .app-grid {grid-template-columns: 66px 220px minmax(0, 1fr)}
}

/* Na aktywnym, rozgadanym kanale pokazuj rozmowę, nie ekran powitalny. */
.chat-view.is-busy-channel .channel-welcome {display: none}

@media (max-width: 560px) {
  .chat-view.is-busy-channel .day-divider {display: none}
  .chat-view.is-busy-channel .message {padding-block: 6px}
}