@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#06101d;--panel:rgba(13,28,47,.82);--panel2:#10243a;--line:rgba(130,190,220,.13);--text:#e7f4fb;--muted:#7f9bad;--cyan:#48e0d2;--blue:#5aa8ff;--danger:#ff6d83;--glow:0 0 32px rgba(72,224,210,.13)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 0%,#102c42 0%,#071523 45%,#040b14 100%);color:var(--text);font-family:'DM Sans',sans-serif;overflow:hidden}button,input{font:inherit}.hidden{display:none!important}.ambient{position:fixed;border-radius:50%;filter:blur(85px);opacity:.16;pointer-events:none;animation:drift 12s ease-in-out infinite alternate}.ambient-one{width:340px;height:340px;background:#22d9c7;top:-130px;left:8%}.ambient-two{width:400px;height:400px;background:#276dd2;right:-180px;bottom:-170px;animation-delay:-5s}@keyframes drift{to{transform:translate(45px,35px) scale(1.13);opacity:.25}}.glass{background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(22px);box-shadow:0 22px 80px #0005}
.auth-shell{height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(440px,100%);padding:38px;border-radius:24px;position:relative;overflow:hidden}.auth-card:before{content:'';position:absolute;inset:0 15% auto;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 20px var(--cyan)}.brand-mark,.mini-mark{display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;color:var(--cyan);border:1px solid #48e0d255;background:#48e0d20c;box-shadow:var(--glow)}.brand-mark{width:48px;height:48px;border-radius:15px;font-size:24px;margin-bottom:24px}.brand-mark span{color:white}.eyebrow{font-size:9px;letter-spacing:2.2px;color:var(--cyan);font-weight:700;margin:0 0 8px}.auth-card h1{font:700 38px 'Space Grotesk';margin:0;letter-spacing:-1.8px}.auth-card h1 span{color:var(--cyan)}.subheading{color:var(--muted);margin:8px 0 26px;font-size:13px}.auth-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:22px}.tab{flex:1;padding:12px;background:none;border:0;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}.tab.active{color:var(--cyan);border-color:var(--cyan)}.auth-form{display:grid;gap:14px}.auth-form label{font-size:11px;color:#a9c0ce;display:grid;gap:7px}.auth-form input,.composer input{width:100%;background:#071522;border:1px solid #294157;border-radius:10px;padding:13px 14px;color:var(--text);outline:none;transition:.2s}.auth-form input:focus,.composer input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #48e0d21a}.primary-btn{border:0;border-radius:10px;background:linear-gradient(100deg,#35cbbd,#54aeea);color:#04121b;padding:14px;font-weight:700;cursor:pointer;margin-top:7px;box-shadow:0 8px 24px #35cbbd25;transition:.2s}.primary-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}.primary-btn span{float:right}.message-line{min-height:20px;font-size:12px;color:var(--cyan);margin:12px 0 0}.message-line.error{color:var(--danger)}.auth-foot{border-top:1px solid var(--line);padding-top:17px;margin:18px 0 0;color:#607e90;font-size:10px;text-align:center}
.app-shell{height:100vh;padding:20px;display:grid;grid-template-columns:245px minmax(320px,1fr) 280px;gap:14px;position:relative}.sidebar,.chat-area,.admin-panel{border-radius:18px;min-height:0}.sidebar{padding:20px 14px;display:flex;flex-direction:column}.sidebar-brand{display:flex;align-items:center;gap:11px;padding:0 6px 28px}.mini-mark{width:37px;height:37px;border-radius:11px;font-size:19px}.sidebar-brand b{font:600 17px 'Space Grotesk';display:block}.sidebar-brand small{font-size:8px;letter-spacing:1.5px;color:var(--muted)}.side-label{font-size:9px;letter-spacing:1.8px;color:#59788c;padding:0 10px 12px}.channel-list{display:grid;gap:5px}.channel-item{display:flex;gap:10px;align-items:center;padding:11px 12px;border:1px solid transparent;background:transparent;color:#9db3c1;border-radius:9px;text-align:left;cursor:pointer;font-size:13px}.channel-item:hover,.channel-item.active{background:#48e0d20c;border-color:#48e0d225;color:var(--cyan)}.channel-item span{font-size:16px}.sidebar-bottom{margin-top:auto;padding:15px 9px;color:#7190a1;font-size:10px;display:flex;gap:8px;align-items:center}.connection-dot,.header-pill i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:pulse 2s infinite}@keyframes pulse{50%{opacity:.35;box-shadow:0 0 3px var(--cyan)}}.user-card{display:flex;align-items:center;gap:10px;padding:12px 8px 0;border-top:1px solid var(--line)}.avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#176b77,#224d7e);font-weight:700}.user-meta{min-width:0;flex:1}.user-meta b{display:block;font-size:11px}.user-meta small{font-size:9px;color:var(--cyan)}.icon-btn{border:0;background:none;color:var(--muted);cursor:pointer;font-size:18px}.chat-area{display:flex;flex-direction:column;overflow:hidden}.chat-header{padding:23px 26px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.chat-header h2{font:600 21px 'Space Grotesk';margin:0 0 4px}.chat-header>div>p:last-child{margin:0;color:var(--muted);font-size:11px}.header-pill{display:flex;align-items:center;gap:8px;color:#81a9b8;font-size:9px;letter-spacing:1px}.header-pill i{display:inline-block}.messages{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:14px}.empty-state{margin:auto;text-align:center;max-width:300px;color:var(--muted)}.empty-orbit{width:58px;height:58px;border:1px solid #48e0d255;border-radius:50%;display:grid;place-items:center;color:var(--cyan);font-size:25px;margin:0 auto 16px;box-shadow:0 0 35px #48e0d218;animation:orbit 4s linear infinite}@keyframes orbit{to{transform:rotate(360deg)}}.empty-state h3{color:var(--text);font:600 18px 'Space Grotesk';margin:0 0 7px}.empty-state p{font-size:12px;line-height:1.6}.message{display:grid;grid-template-columns:34px 1fr;gap:10px;max-width:850px}.message .avatar{width:32px;height:32px}.message-top{display:flex;gap:9px;align-items:center;margin:0 0 5px}.message-top b{font-size:12px}.message-top small{font-size:9px;color:var(--muted)}.role-tag{font-size:8px;color:var(--cyan);border:1px solid #48e0d233;border-radius:4px;padding:2px 5px}.message-body{font-size:12px;line-height:1.55;color:#c5d8e2;white-space:pre-wrap;overflow-wrap:anywhere}.composer{display:flex;gap:10px;padding:16px 20px;border-top:1px solid var(--line)}.composer input{background:#081725}.composer button{width:44px;flex:none;border:0;border-radius:11px;background:var(--cyan);color:#06131b;font-size:22px;cursor:pointer}.admin-panel{padding:20px 15px;overflow-y:auto}.admin-head h3{font:600 18px 'Space Grotesk';margin:0 0 5px}.admin-head>p:last-child{font-size:10px;color:var(--muted);margin:0 0 18px}.admin-user{padding:12px 0;border-top:1px solid var(--line)}.admin-user b{font-size:11px;display:block}.admin-user small{font-size:9px;color:var(--muted)}.admin-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.admin-actions button{font-size:9px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#122a3d;color:#b9d1dc;cursor:pointer}.admin-actions button.danger{color:#ff9aa9;border-color:#ff6d8333}.admin-actions button:hover{border-color:var(--cyan)}
@media(max-width:1050px){.app-shell{grid-template-columns:210px minmax(280px,1fr)}.admin-panel{position:absolute;right:20px;top:20px;bottom:20px;width:280px;z-index:4;box-shadow:0 0 0 100vmax #0008}}@media(max-width:700px){body{overflow:auto}.auth-card{padding:28px 22px}.app-shell{height:100dvh;padding:8px;grid-template-columns:68px minmax(0,1fr);gap:8px}.sidebar{padding:13px 7px}.sidebar-brand{justify-content:center;padding:0 0 22px}.sidebar-brand>div:last-child,.side-label,.channel-item .channel-name,.sidebar-bottom span,.user-meta,.icon-btn{display:none}.channel-item{justify-content:center;padding:12px 5px}.channel-item span{font-size:18px}.user-card{justify-content:center;padding:12px 0 0}.chat-header{padding:17px 14px}.header-pill{display:none}.messages{padding:14px}.composer{padding:12px}.admin-panel{right:8px;top:8px;bottom:8px;width:min(280px,calc(100vw - 90px))}}

/* NordBook 1.1 — kanały, ustawienia i multimedia */
.side-label-row{display:flex;align-items:center;justify-content:space-between;padding:0 7px 10px 0}
.side-label-row .side-label{padding:0 0 0 10px}
.side-action{width:28px;height:28px;border:1px solid #48e0d244;border-radius:8px;background:#48e0d20d;color:var(--cyan);font-size:20px;line-height:1;cursor:pointer}
.side-action:hover,.attach-btn:hover,.icon-btn:hover{background:#48e0d21a;border-color:var(--cyan);color:var(--cyan)}
.channel-item{position:relative;padding-right:34px}
.channel-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.channel-more{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:25px;height:25px;border:0;border-radius:6px;background:transparent;color:#7895a7;cursor:pointer;opacity:0}
.channel-item:hover .channel-more,.channel-item:focus-within .channel-more{opacity:1}
.channel-more:hover{background:#48e0d21a;color:var(--cyan)}
.user-tools{display:flex;align-items:center;gap:3px}
.icon-btn{width:30px;height:30px;display:grid;place-items:center;border:1px solid transparent;border-radius:8px}
.attach-btn{width:42px;flex:none;border:1px solid #294157;border-radius:11px;background:#081725;color:#9bb7c6;font-size:22px;cursor:pointer}
.composer-status{min-height:17px;padding:0 20px 8px;color:var(--muted);font-size:10px}
.composer input:disabled,.composer button:disabled{opacity:.45;cursor:not-allowed}
.message-content{min-width:0}
.attachment-card{display:grid;gap:8px;margin-top:9px;max-width:min(680px,100%);padding:10px;border:1px solid #48e0d222;border-radius:12px;background:#071522aa}
.attachment-name{font-size:10px;color:#a9c3d0;overflow-wrap:anywhere}
.attachment-image{display:block;max-width:min(520px,100%);max-height:420px;object-fit:contain;border-radius:8px;cursor:zoom-in;background:#020912}
.attachment-video{display:block;width:min(620px,100%);max-height:420px;border-radius:8px;background:#000}
.attachment-audio{display:block;width:min(560px,100%)}
.media-volume{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:10px}
.media-volume input{width:140px;accent-color:var(--cyan)}
.attachment-link{display:flex;align-items:center;gap:10px;color:var(--cyan);text-decoration:none;font-size:12px;overflow-wrap:anywhere}
.attachment-link:hover{text-decoration:underline}
.attachment-file-icon{width:34px;height:38px;display:grid;place-items:center;flex:none;border:1px solid #48e0d244;border-radius:7px;background:#48e0d20c;color:var(--cyan);font-size:10px;font-weight:700}
.context-menu{position:fixed;z-index:1000;min-width:190px;padding:6px;border:1px solid #31536b;border-radius:10px;background:#0a1b2b;box-shadow:0 16px 45px #0009;backdrop-filter:blur(16px)}
.context-menu button{display:block;width:100%;padding:10px 11px;border:0;border-radius:7px;background:transparent;color:#d7e8ef;text-align:left;font-size:12px;cursor:pointer}
.context-menu button:hover{background:#48e0d21a;color:var(--cyan)}
.context-menu button.danger{color:#ff9aa9}
.modal-backdrop{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:18px;background:#020812c9;backdrop-filter:blur(8px)}
.app-modal{width:min(460px,100%);max-height:min(88vh,760px);overflow:auto;padding:22px;border:1px solid #31536b;border-radius:17px;background:#0b1c2d;box-shadow:0 25px 90px #000b}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.modal-head h3{margin:0;font:600 19px 'Space Grotesk';color:var(--text)}
.modal-close{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:#10243a;color:#a9c0ce;cursor:pointer}
.modal-form{display:grid;gap:13px}
.modal-form label{display:grid;gap:7px;color:#a9c0ce;font-size:11px}
.modal-form input:not([type=checkbox]):not([type=range]),.modal-form textarea{width:100%;padding:11px 12px;border:1px solid #294157;border-radius:9px;background:#071522;color:var(--text);outline:none}
.modal-form textarea{min-height:85px;resize:vertical}
.modal-form input:focus,.modal-form textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #48e0d21a}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.modal-actions button,.modal-button{padding:9px 13px;border:1px solid var(--line);border-radius:8px;background:#122a3d;color:#c9dce5;font-size:11px;cursor:pointer}
.modal-actions button.primary{border:0;background:linear-gradient(100deg,#35cbbd,#54aeea);color:#04121b;font-weight:700}
.modal-actions button.danger{border-color:#ff6d8355;color:#ff9aa9;background:#351a29}
.settings-section{padding:13px 0;border-top:1px solid var(--line)}
.settings-section h4{margin:0 0 10px;font:600 12px 'Space Grotesk';color:var(--cyan)}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:10px 0;color:#c5d8e2;font-size:12px}
.setting-row input[type=checkbox]{accent-color:var(--cyan);width:16px;height:16px}
.setting-row input[type=range]{width:130px;accent-color:var(--cyan)}
.settings-note,.danger-note{color:var(--muted);font-size:10px;line-height:1.5}
.danger-note{color:#e59aa7}
.modal-error{min-height:15px;color:#ff9aa9;font-size:11px}
.compact-view .message{gap:7px;margin-bottom:-6px}
.compact-view .message .avatar{width:27px;height:27px}
.compact-view .message-body{font-size:11px}
@media(max-width:1050px){.channel-more{opacity:1}}
@media(max-width:700px){
  .side-label-row{justify-content:center;padding:0 0 12px}
  .side-label-row .side-label{display:none}
  .side-action{display:grid;place-items:center;width:34px;height:34px}
  .channel-item{padding:11px 5px 11px 5px}
  .channel-item .channel-name{display:none}
  .channel-item span:first-child{font-size:18px}
  .channel-more{right:0;top:2px;transform:none;width:19px;height:18px;padding:0;font-size:13px;background:#071523;color:var(--cyan);opacity:1}
  .user-tools{width:100%;justify-content:center}
  .user-card{flex-wrap:wrap;gap:5px;justify-content:center}
  .icon-btn{display:grid;width:25px;height:25px;font-size:15px}
  .attach-btn{width:38px}
  .composer{gap:6px}
  .composer-status{padding:0 12px 7px}
  .media-volume input{width:105px}
  .app-modal{padding:18px}
}


/* Przyciski moderacji wiadomości */
.message-delete{
  margin-left:auto;
  padding:3px 7px;
  border:1px solid #ff6d8340;
  border-radius:6px;
  background:#351a291c;
  color:#ff9aa9;
  font-size:9px;
  cursor:pointer;
}
.message-delete:hover{background:#ff6d8320;border-color:#ff6d83}
.message-delete:disabled{opacity:.5;cursor:wait}
.message-top{width:100%;flex-wrap:wrap}


/* Avatary użytkowników */
.avatar{overflow:hidden;flex:none}
.avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.avatar-setting-label{display:grid;gap:8px;margin:12px 0;color:#a9c0ce;font-size:11px}
.avatar-file-input{width:100%;max-width:100%;font-size:10px;color:var(--muted)}


/* NordBook — profile cards, community directory and search */
.header-tools{display:flex;align-items:center;gap:15px}
.header-search-button{padding:9px 12px;border:1px solid #48e0d244;border-radius:9px;background:#48e0d20c;color:var(--cyan);font-size:10px;cursor:pointer;white-space:nowrap}
.header-search-button:hover{background:#48e0d21a;border-color:var(--cyan)}
.admin-panel{display:flex;flex-direction:column;overflow:hidden}
.panel-search{width:100%;margin:0 0 10px;padding:10px 11px;border:1px solid #294157;border-radius:9px;background:#071522;color:var(--text);font-size:11px;outline:none}
.panel-search:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #48e0d21a}
.admin-users{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
.community-user{padding:10px 0}
.community-user-identity{display:flex;align-items:center;gap:10px;min-width:0}
.user-list-avatar{width:36px;height:36px;border-radius:12px;font-size:13px}
.community-user-meta{display:grid;gap:3px;min-width:0}
.user-profile-name,.message-username{padding:0;border:0;background:none;color:var(--text);font-weight:700;text-align:left;cursor:pointer}
.user-profile-name{max-width:175px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.user-profile-name:hover,.message-username:hover{color:var(--cyan);text-decoration:underline}
.community-user-meta small,.admin-user-email{display:block;color:var(--muted);font-size:9px}
.admin-user-email{margin-top:5px;overflow-wrap:anywhere}
.profile-trigger{cursor:pointer;outline-offset:3px}
.profile-trigger:hover{filter:brightness(1.18);box-shadow:0 0 0 2px #48e0d244}
.message-username{font:inherit;font-size:12px}
.profile-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 5px 16px}
.profile-avatar-large{width:144px;height:144px;border-radius:34px;font-size:48px;margin:0 auto 18px;box-shadow:0 12px 35px #0007,0 0 0 1px #48e0d244}
.profile-name{margin:0 0 9px;font:600 22px 'Space Grotesk';overflow-wrap:anywhere}
.profile-role{font-size:10px;padding:5px 8px}
.profile-bio{max-width:340px;margin:18px 0 12px;color:#c5d8e2;font-size:12px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.profile-joined{color:var(--muted);font-size:10px}
.avatar-setting-label textarea{width:100%;padding:10px 12px;border:1px solid #294157;border-radius:9px;background:#071522;color:var(--text);resize:vertical;font:inherit;line-height:1.5}
.search-results{display:grid;gap:8px;max-height:45vh;overflow-y:auto;margin-top:8px}
.search-result{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:9px;background:#071522aa;color:inherit;text-align:left;cursor:pointer}
.search-result:hover,.search-result:focus-visible{border-color:var(--cyan);outline:none}
.message.search-target{padding:8px;border-radius:10px;background:#48e0d218;box-shadow:0 0 0 1px #48e0d266,0 0 24px #48e0d222;transition:background .3s ease,box-shadow .3s ease}
.search-result small{color:var(--cyan);font-size:9px}
.search-result p{margin:6px 0 0;color:#c5d8e2;font-size:11px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.message-search-form{gap:10px}
@media(max-width:1050px){.header-tools{gap:8px}.header-search-button{font-size:9px;padding:8px}}
@media(max-width:700px){.header-pill{display:none}.header-search-button{font-size:8px;padding:7px 8px}.admin-panel{display:flex}.profile-avatar-large{width:124px;height:124px}}

.channel-item.dragging{opacity:.55}
.user-name-row{display:flex;align-items:center;gap:7px;min-width:0}
.user-presence-dot{display:inline-block;flex:0 0 7px;width:7px;height:7px;border-radius:50%}
.user-presence-dot.active{background:#45df7b;box-shadow:0 0 9px #45df7b99}
.user-presence-dot.inactive{background:#657584;box-shadow:inset 0 0 2px #172431}
.profile-presence{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:10px}
.profile-presence.active{color:#71e99a}
.profile-presence.inactive{color:var(--muted)}

/* Większe avatary przy wiadomościach — nadal mieszczą się w układzie czatu. */
.message{grid-template-columns:42px minmax(0,1fr);gap:12px}
.message .avatar{width:42px;height:42px;border-radius:14px;font-size:15px}
.compact-view .message{grid-template-columns:34px minmax(0,1fr)}
.compact-view .message .avatar{width:34px;height:34px}

/* NordBook — pokoje głosowe i udostępnianie ekranu */
.voice-room{flex:1;min-height:0;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:18px}
.voice-room-intro{display:flex;align-items:center;gap:15px;padding:18px;border:1px solid #48e0d226;border-radius:15px;background:linear-gradient(120deg,#48e0d20d,#245f8a12)}
.voice-room-icon{width:54px;height:54px;flex:none;display:grid;place-items:center;border:1px solid #48e0d255;border-radius:16px;background:#48e0d210;color:var(--cyan);font-size:27px}
.voice-room-copy{min-width:0;flex:1}
.voice-room-copy h3{margin:0 0 5px;font:600 17px 'Space Grotesk';color:var(--text)}
.voice-room-copy p{margin:0 0 7px;color:var(--muted);font-size:11px;line-height:1.5}
.voice-room-copy strong{font-size:10px;color:var(--cyan)}
.voice-action{padding:10px 13px;border:1px solid #48e0d244;border-radius:9px;background:#102a3c;color:#bfe3e8;font-size:11px;font-weight:600;cursor:pointer;transition:.18s}
.voice-action:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan);background:#48e0d21a}
.voice-action.primary{border:0;background:linear-gradient(100deg,#35cbbd,#54aeea);color:#06131b}
.voice-action.danger{border-color:#ff6d8355;color:#ff9aa9;background:#351a29}
.voice-action:disabled{opacity:.45;cursor:not-allowed}
.voice-participants{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px}
.voice-participant{display:flex;align-items:center;gap:10px;min-width:0;padding:11px;border:1px solid var(--line);border-radius:12px;background:#07152288}
.voice-avatar{width:40px;height:40px;border-radius:13px;font-size:14px}
.voice-participant-details{display:grid;gap:3px;min-width:0;flex:1}
.voice-participant-details strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--text)}
.voice-participant-details small{font-size:9px;color:var(--muted)}
.voice-indicators{max-width:100px;color:var(--cyan);font-size:8px;line-height:1.4;text-align:right}
.voice-empty{grid-column:1/-1;margin:0;padding:22px;border:1px dashed #31536b;border-radius:12px;color:var(--muted);font-size:11px;text-align:center}
.voice-controls{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px;border-top:1px solid var(--line)}
.voice-status{min-height:16px;margin:0;color:var(--muted);font-size:10px;line-height:1.5}
.voice-status.error{color:#ff9aa9}
.voice-audio-root{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.modal-select{width:100%;padding:10px 11px;border:1px solid #294157;border-radius:9px;background:#071522;color:var(--text);outline:none}
.modal-select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #48e0d21a}
@media(max-width:700px){
  .voice-room{padding:14px;gap:13px}
  .voice-room-intro{align-items:flex-start;flex-wrap:wrap;padding:13px}
  .voice-room-icon{width:44px;height:44px}
  .voice-room-copy{min-width:calc(100% - 60px)}
  .voice-room-intro>.voice-action{width:100%}
  .voice-participants{grid-template-columns:1fr}
  .voice-indicators{max-width:120px}
  .voice-controls{display:grid;grid-template-columns:1fr}
}


/* NordBook — układ responsywny bez nachodzenia paneli */
.app-shell,
.sidebar,
.chat-area,
.admin-panel,
.chat-header,
.header-tools,
.voice-room-intro,
.composer { min-width: 0; }
.app-shell { grid-template-columns: minmax(190px, 245px) minmax(0, 1fr) minmax(220px, 280px); }
.chat-header > div:first-child { min-width: 0; }
.chat-header h2,
.chat-header > div > p:last-child { overflow-wrap: anywhere; }
.header-tools { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }

/* Przy średniej szerokości panel społeczności przechodzi pod główną część,
   zamiast zasłaniać czat. */
@media (min-width: 701px) and (max-width: 1120px) {
  .app-shell {
    height: 100dvh;
    grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(130px, 190px);
    gap: 10px;
    padding: 10px;
  }
  .sidebar { grid-column: 1; grid-row: 1; }
  .chat-area { grid-column: 2; grid-row: 1; }
  .admin-panel {
    position: static;
    grid-column: 1 / -1;
    grid-row: 2;
    width: auto;
    max-height: none;
    min-height: 0;
    padding: 12px 16px;
    box-shadow: none;
  }
  .admin-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 14px; }
  .admin-head .eyebrow,
  .admin-head h3,
  .admin-head > p:last-child { margin: 0; }
  .panel-search { max-width: 320px; }
  .admin-users { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .community-user { min-width: 180px; max-width: 240px; }
  .chat-header { padding: 16px 18px; gap: 12px; }
  .chat-header h2 { font-size: 18px; }
  .messages { padding: 16px; }
}

/* Na telefonach panel społeczności nie przykrywa czatu. */
@media (max-width: 700px) {
  body { overflow: hidden; }
  .app-shell {
    height: 100dvh;
    min-height: 0;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    padding: 6px;
    gap: 6px;
  }
  .sidebar, .chat-area { min-width: 0; min-height: 0; }
  .admin-panel { display: none !important; }
  .chat-header { align-items: flex-start; gap: 8px; padding: 13px 10px; }
  .chat-header h2 { font-size: 16px; overflow-wrap: anywhere; }
  .chat-header > div > p:last-child { font-size: 10px; }
  .header-tools { flex: 0 1 auto; }
  .header-search-button { white-space: normal; max-width: 112px; }
  .messages { min-width: 0; padding: 10px; }
  .message { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; }
  .message .avatar { width: 32px; height: 32px; }
  .composer { min-width: 0; gap: 5px; padding: 9px 8px; }
  .composer input { min-width: 0; padding: 11px 9px; }
  .composer button { width: 36px; }
  .voice-room { min-width: 0; padding: 10px; }
}

@media (max-width: 390px) {
  .app-shell { grid-template-columns: 50px minmax(0, 1fr); }
  .sidebar { padding-left: 4px; padding-right: 4px; }
  .chat-header { flex-direction: column; }
  .header-tools { width: 100%; justify-content: flex-start; }
  .header-search-button { max-width: none; }
  .auth-shell { min-height: 100dvh; height: auto; padding: 12px; }
  .auth-card { padding: 24px 18px; }
}

/* =========================================================
   NordBook — mobilne menu wysuwane z lewej i prawej strony
   ========================================================= */

.mobile-drawer-controls,
.mobile-drawer-backdrop {
  display: none;
}

@media (max-width: 700px) {

  /* Główny ekran: czat zajmuje całą dostępną szerokość. */
  .app-shell {
    height: 100dvh;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    padding: 6px;
  }

  .chat-area {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    width: 100%;
  }

  /* Panel kanałów — wysuwany z lewej strony. */
  .sidebar {
    position: fixed;
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: min(290px, calc(100vw - 56px));
    height: auto;
    z-index: 120;
    overflow-y: auto;
    border-radius: 16px;
    transform: translateX(calc(-100% - 14px));
    visibility: hidden;
    pointer-events: none;
    transition: transform .25s ease, visibility .25s ease;
    box-shadow: 0 20px 70px #000b;
  }

  .sidebar.mobile-drawer-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  /* Przywrócenie pełnych nazw kanałów w wysuwanym panelu. */
  .sidebar-brand {
    justify-content: flex-start;
    padding: 0 6px 24px;
  }

  .sidebar-brand > div:last-child {
    display: block;
  }

  .side-label-row {
    justify-content: space-between;
    padding: 0 7px 10px 0;
  }

  .side-label-row .side-label {
    display: block;
    padding: 0 0 0 10px;
  }

  .side-action {
    display: grid;
    place-items: center;
  }

  .channel-item {
    justify-content: flex-start;
    padding: 11px 34px 11px 12px;
  }

  .channel-item .channel-name {
    display: inline;
  }

  .channel-item span:first-child {
    font-size: 16px;
  }

  .channel-more {
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    padding: 0;
    font-size: 16px;
    background: transparent;
  }

  /* Przywrócenie dolnego panelu konta. */
  .sidebar-bottom {
    display: flex;
  }

  .sidebar-bottom span {
    display: inline;
  }

  .user-card {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 8px 0;
  }

  .user-meta {
    display: block;
    flex: 1;
  }

  .user-tools {
    width: auto;
    justify-content: flex-end;
  }

  .icon-btn {
    display: grid;
    width: 28px;
    height: 28px;
    font-size: 16px;
  }

  /* Panel użytkowników — wysuwany z prawej strony. */
  .admin-panel {
    position: fixed;
    top: 6px;
    right: 6px;
    bottom: 6px;
    left: auto;
    width: min(300px, calc(100vw - 56px));
    height: auto;
    max-height: none;
    z-index: 120;
    display: flex !important;
    overflow: hidden;
    border-radius: 16px;
    transform: translateX(calc(100% + 14px));
    visibility: hidden;
    pointer-events: none;
    transition: transform .25s ease, visibility .25s ease;
    box-shadow: 0 20px 70px #000b;
  }

  .admin-panel.mobile-drawer-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  /* Przyciemnienie tła za otwartym panelem. */
  .mobile-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 110;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #020812bd;
    cursor: pointer;
  }

  .mobile-drawer-backdrop[hidden] {
    display: none !important;
  }

  /* Przyciski menu umieszczone pod nagłówkiem czatu. */
  .mobile-drawer-controls {
    display: flex;
    order: 3;
    flex: 0 0 100%;
    gap: 8px;
    width: 100%;
  }

  .mobile-drawer-button {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #48e0d244;
    border-radius: 9px;
    background: #48e0d20d;
    color: var(--cyan);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
  }

  .mobile-drawer-button:hover,
  .mobile-drawer-button[aria-expanded="true"] {
    background: #48e0d21c;
    border-color: var(--cyan);
  }

  /* Lepsze rozłożenie nagłówka na wąskim ekranie. */
  .chat-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 13px 10px;
  }

  .chat-header > div:first-child {
    flex: 1 1 100%;
    min-width: 0;
  }

  .header-tools {
    flex: 1 1 100%;
    width: 100%;
    justify-content: flex-start;
  }

  .header-search-button {
    max-width: none;
    font-size: 9px;
    padding: 8px 10px;
  }

  .header-pill {
    display: none;
  }
}

@media (max-width: 390px) {
  .mobile-drawer-button {
    font-size: 10px;
    padding-left: 6px;
    padding-right: 6px;
  }

  .chat-header {
    padding: 11px 9px;
  }
}
/* Pomniejszona wersja NordBook (konkretnie: 2.0) */
.brand-version {
  font-size: 0.65em;
  vertical-align: super;
  font-weight: normal;
  opacity: 1;
  color: #48e0d2;
}