:root{
  --blue:#1877ff;--blue2:#315cff;--ink:#18243b;--muted:#7d899d;--line:#e1e8f1;--bg:#f4f7fc;--danger:#ef4662;
  font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg)
}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,input,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.auth-screen{height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 0,#e9f4ff,transparent 40%),linear-gradient(135deg,#f8fbff,#edf4ff)}
.auth-card{width:min(440px,100%);background:rgba(255,255,255,.95);padding:28px;border:1px solid #e7eef7;border-radius:28px;box-shadow:0 28px 90px rgba(40,76,130,.15)}
.brand-lockup{display:flex;align-items:center;gap:16px;margin-bottom:24px}.auth-logo{width:72px;height:72px;border-radius:20px;box-shadow:0 14px 30px rgba(18,100,255,.25)}
h1{font-size:32px;margin:0 0 3px;letter-spacing:-1px}.brand-lockup p{margin:0;color:var(--muted)}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:#f0f4fa;border-radius:14px;padding:4px;margin-bottom:20px}.tab{border:0;border-radius:11px;padding:10px;background:transparent;color:#6f7b90;font-weight:700}.tab.active{background:white;color:var(--blue);box-shadow:0 4px 12px rgba(30,57,100,.08)}
label{display:block;color:#58657b;font-size:13px;font-weight:700;margin:14px 0 7px}input,textarea{border:1px solid var(--line);outline:0;background:#fbfdff;color:var(--ink);transition:.15s}input:focus,textarea:focus{border-color:#90bcff;box-shadow:0 0 0 4px rgba(24,119,255,.08);background:#fff}.auth-card input,.modal-card>input,.modal-card>textarea{width:100%;padding:13px 14px;border-radius:13px}
.primary{width:100%;border:0;margin-top:20px;padding:13px;border-radius:14px;color:#fff;font-weight:800;background:linear-gradient(135deg,var(--blue),var(--blue2));box-shadow:0 10px 24px rgba(22,105,255,.24)}.compact-primary{margin-top:16px}.secondary{border:1px solid var(--line);background:white;border-radius:11px;padding:10px 12px;font-weight:700;color:var(--ink)}
.auth-error{margin-top:14px;padding:11px 12px;border-radius:12px;background:#fff0f2;color:#c52d43;font-size:13px}.link-button{display:block;border:0;background:transparent;color:var(--blue);font-weight:800;margin:10px auto 0}.server-details{margin-top:18px;border-top:1px solid var(--line);padding-top:13px;color:var(--muted);font-size:13px}.server-details summary{cursor:pointer;user-select:none}.server-row{display:flex;gap:8px;margin:10px 0 4px}.server-row input{flex:1}
.app-shell{height:100vh;display:grid;grid-template-columns:330px 1fr;background:#f4f7fc}.sidebar{position:relative;background:#fff;border-right:1px solid var(--line);padding:18px 14px;overflow:hidden}.sidebar-top{display:flex;align-items:center;gap:8px;padding:0 5px 14px}.mini-logo{width:38px;height:38px;border-radius:11px}.brand-name{font-size:22px;font-weight:900;letter-spacing:-.5px;flex:1}.icon-button{width:34px;height:34px;border:0;background:#f2f6fc;color:#68758a;border-radius:10px;font-size:18px}.icon-button:hover{background:#e8f1ff;color:var(--blue)}
.me-card{width:100%;border:0;display:flex;gap:11px;align-items:center;padding:12px;border-radius:17px;background:linear-gradient(135deg,#edf5ff,#f8fbff);margin-bottom:14px;text-align:left;color:var(--ink)}.me-card:hover{box-shadow:inset 0 0 0 1px #d7e6fb}.me-text{min-width:0;flex:1}.me-name,.peer-name{font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.me-login{font-size:12px;color:#8692a5;margin-top:3px}.profile-chevron{font-size:24px;color:#9aa7b9}
.avatar{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:900;background:linear-gradient(135deg,var(--blue),var(--blue2));box-shadow:0 8px 18px rgba(38,104,230,.17);text-transform:uppercase;background-size:cover;background-position:center;flex:none}.avatar.big{width:86px;height:86px;border-radius:28px;font-size:34px}.avatar.profile-avatar{width:104px;height:104px;border-radius:34px;font-size:38px;margin:0 auto 14px}.group-avatar{background:linear-gradient(135deg,#6d7cff,#8458e8);font-size:20px}
.search-box{height:44px;border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#f8fbff}.search-box span{color:#8c98ab;font-size:22px}.search-box input{border:0;box-shadow:none;background:transparent;flex:1;min-width:0}.search-results{position:absolute;z-index:5;left:14px;right:14px;top:190px;max-height:330px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 45px rgba(25,55,100,.16);padding:7px}
.search-user,.conversation{width:100%;display:flex;gap:11px;align-items:center;border:0;background:transparent;border-radius:13px;padding:10px;text-align:left;color:var(--ink)}.search-user:hover,.conversation:hover,.conversation.active{background:#eef5ff}.search-main{display:flex;gap:10px;align-items:center;min-width:0;flex:1}.search-meta{min-width:0;flex:1}.search-title{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-login{font-size:11px;color:#8995a7;margin-top:2px}.search-profile-btn{border:0;background:#eef4fd;color:#64748b;width:32px;height:32px;border-radius:10px}.section-title{margin:18px 8px 8px;color:#98a3b5;text-transform:uppercase;letter-spacing:.9px;font-size:11px;font-weight:900}.conversation-list{overflow:auto;height:calc(100vh - 250px)}.conversation .avatar{width:40px;height:40px;border-radius:12px}.conv-text{min-width:0;flex:1}.conv-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conv-preview{margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#8792a5;font-size:12px}
.chat-panel{position:relative;min-width:0}.empty-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#7e8a9d}.empty-state img{width:100px;height:100px;border-radius:27px;box-shadow:0 18px 40px rgba(30,103,240,.2);margin-bottom:18px}.empty-state h2{color:#25324b;margin:0 0 6px}.empty-state p{margin:0}.chat-view{height:100%;display:grid;grid-template-rows:76px 1fr auto}.chat-header{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);padding:0 22px;backdrop-filter:blur(10px)}.peer-wrap{border:0;background:transparent;display:flex;align-items:center;gap:11px;text-align:left;color:var(--ink);padding:6px;border-radius:14px;min-width:0}.peer-wrap:hover{background:#f3f7fc}.peer-copy{min-width:0}.peer-sub{color:#94a0b2;font-size:12px;margin-top:2px}.header-actions{display:flex;gap:8px}.call-button{border:0;background:#eaf4ff;color:var(--blue);border-radius:13px;padding:10px 14px;font-weight:800}
.messages{overflow:auto;padding:22px 28px;display:flex;flex-direction:column;gap:7px}.message-row{display:flex;align-items:flex-end;gap:5px}.message-row.mine{justify-content:flex-end}.message-stack{max-width:min(650px,78%);position:relative}.bubble{border-radius:18px;padding:10px 13px 7px;background:#fff;box-shadow:0 5px 18px rgba(30,60,100,.06);border:1px solid #e8edf5;overflow:hidden}.mine .bubble{color:#fff;background:linear-gradient(135deg,#1485ff,#315cff);border:0}.sender-label{font-size:11px;color:#3978d8;font-weight:800;margin:0 0 5px 2px}.mine .sender-label{display:none}.bubble-text{white-space:pre-wrap;overflow-wrap:anywhere}.bubble-time{text-align:right;font-size:10px;opacity:.65;margin-top:5px}.react-add{width:27px;height:27px;border:0;border-radius:9px;background:#eef3f9;color:#68778d;opacity:0;transition:.15s}.message-row:hover .react-add{opacity:1}.reactions{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}.reaction-chip{border:1px solid #dce6f3;background:#fff;border-radius:999px;padding:3px 7px;font-size:12px;color:#33435d}.reaction-chip.mine{border-color:#8cbcff;background:#edf5ff;color:#175ec6}
.file-bubble{display:flex;align-items:center;gap:10px;min-width:220px}.file-icon{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:20px}.message-row:not(.mine) .file-icon{background:#eef5ff}.file-name{font-weight:800;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-size:11px;opacity:.7;margin-top:2px}.download-btn{margin-left:auto;border:0;border-radius:9px;padding:6px 8px;background:rgba(255,255,255,.2);color:inherit}.message-row:not(.mine) .download-btn{background:#edf4ff;color:var(--blue)}.media-bubble{padding:4px;max-width:min(480px,70vw)}.media-bubble img,.media-bubble video{display:block;max-width:100%;max-height:430px;border-radius:14px;background:#111}.media-bubble img{cursor:zoom-in}.media-meta{display:flex;align-items:center;gap:8px;padding:5px 8px 2px}.media-meta .bubble-time{margin-left:auto}.media-filename{font-size:11px;opacity:.72;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer-wrap{position:relative}.composer{margin:0 22px 18px;min-height:58px;display:flex;gap:8px;align-items:flex-end;padding:8px;background:#fff;border:1px solid var(--line);border-radius:19px;box-shadow:0 12px 30px rgba(30,60,100,.08)}.composer textarea{flex:1;resize:none;max-height:140px;min-height:40px;border:0;box-shadow:none;background:transparent;padding:10px 4px;line-height:20px}.attach-button,.send-button{flex:none;width:42px;height:42px;border:0;border-radius:13px;font-size:22px}.attach-button{background:#eef4fd;color:#5f6e84}.attach-button:hover{background:#e3edfb;color:var(--blue)}.send-button{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;box-shadow:0 8px 18px rgba(29,104,240,.22)}
.emoji-picker{position:absolute;z-index:12;left:72px;bottom:78px;width:290px;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 48px rgba(20,50,95,.18)}.emoji-cell{border:0;background:transparent;font-size:23px;padding:5px;border-radius:8px}.emoji-cell:hover{background:#edf4ff}.reaction-picker{position:fixed;z-index:70;display:flex;gap:3px;padding:7px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 38px rgba(20,50,95,.2)}.reaction-picker button{border:0;background:transparent;font-size:20px;padding:5px;border-radius:8px}.reaction-picker button:hover{background:#eef5ff}
.toast{position:fixed;z-index:100;left:50%;top:20px;transform:translateX(-50%);padding:10px 16px;border-radius:12px;background:#18243b;color:#fff;box-shadow:0 12px 28px rgba(0,0,0,.15)}
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(10,25,50,.38);backdrop-filter:blur(9px);padding:24px}.modal-card{position:relative;background:#fff;border-radius:26px;box-shadow:0 30px 90px rgba(15,45,100,.25);padding:28px}.modal-card h2{margin:0 0 8px}.modal-close{position:absolute;right:14px;top:14px;width:34px;height:34px;border:0;border-radius:11px;background:#f1f5fa;color:#617086}.profile-card{width:min(430px,100%);text-align:center}.profile-login{color:#8a96a8;font-size:13px}.profile-bio{white-space:pre-wrap;color:#56657b;line-height:1.45;min-height:20px;margin:16px 0}.profile-edit{text-align:left;margin-top:18px;border-top:1px solid var(--line);padding-top:12px}.profile-buttons{display:flex;gap:8px;justify-content:center}.ghost-danger{border:0;background:#fff0f2;color:#c93b51;border-radius:11px;padding:10px 12px;font-weight:700}
.group-create-card{width:min(480px,100%)}.modal-search{margin-top:7px}.member-results{max-height:170px;overflow:auto;margin-top:8px}.member-result{width:100%;border:0;background:#f7f9fc;border-radius:12px;padding:9px;display:flex;align-items:center;gap:9px;text-align:left;margin-bottom:5px}.member-result:hover{background:#edf4ff}.member-result .avatar{width:34px;height:34px;border-radius:10px}.selected-members{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.member-chip{border:0;background:#eaf3ff;color:#2465bf;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:700}.group-info-card{width:min(430px,100%);text-align:center}.group-big-avatar{width:92px;height:92px;border-radius:30px;display:grid;place-items:center;margin:0 auto 14px;background:linear-gradient(135deg,#687bff,#8753e8);font-size:38px}.modal-section{text-align:left;margin-top:22px}.group-member-list{max-height:320px;overflow:auto}.group-member{display:flex;align-items:center;gap:10px;padding:9px;text-align:left;border-radius:13px}.group-member:hover{background:#f5f8fc}.group-member .avatar{width:38px;height:38px;border-radius:12px}.member-copy{min-width:0;flex:1}.member-role{font-size:11px;color:#8c98a9}.modal-hint{color:#7b8799;margin:0 0 16px}
.call-card{width:min(760px,96vw);text-align:center;padding:28px;border-radius:28px;background:#fff;box-shadow:0 30px 90px rgba(15,45,100,.25)}.call-rings{display:grid;place-items:center;margin:10px auto 22px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#eaf4ff 40%,#dbeaff 41% 58%,#edf5ff 59%)}.call-card h2{margin:0 0 6px}.call-card p{color:var(--muted);margin:0 0 20px}.call-actions{display:flex;justify-content:center;gap:18px}.round,.danger-round,.accept-round{width:58px;height:58px;border:0;border-radius:50%;font-size:22px;color:#fff}.round{background:#66758b}.screen-round.active{background:var(--blue)}.danger-round{background:var(--danger)}.accept-round{background:#26c66c}.call-video-stage{position:relative;width:100%;height:min(54vh,460px);background:#10141d;border-radius:22px;overflow:hidden;margin-bottom:18px}.call-video-stage>video#remoteVideo{width:100%;height:100%;object-fit:contain}.local-screen-preview{position:absolute;right:14px;bottom:14px;width:180px;max-height:120px;border-radius:12px;border:2px solid rgba(255,255,255,.8);background:#111;object-fit:cover}.call-video-stage:not(.hidden)+.call-identity{display:none}
.screen-picker-card{width:min(900px,96vw);max-height:88vh}.screen-sources{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;max-height:65vh;overflow:auto}.screen-source{border:1px solid var(--line);background:#f8faff;border-radius:16px;padding:9px;text-align:left;color:var(--ink)}.screen-source:hover{border-color:#90bfff;background:#eef5ff}.screen-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:#dfe5ed;display:block}.screen-source-name{padding:8px 3px 2px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-close{position:absolute;right:24px;top:24px;z-index:2;width:44px;height:44px;border:0;border-radius:14px;background:rgba(0,0,0,.55);color:#fff;font-size:20px}.media-stage{max-width:92vw;max-height:90vh;display:grid;place-items:center}.media-stage img,.media-stage video{max-width:92vw;max-height:88vh;border-radius:16px;box-shadow:0 20px 80px rgba(0,0,0,.35)}
@media(max-width:980px){.app-shell{grid-template-columns:290px 1fr}.call-button span{display:none}.messages{padding:18px}.composer{margin-left:14px;margin-right:14px}.message-stack{max-width:84%}}

.search-main{border:0;background:transparent;color:inherit;text-align:left;padding:0;min-width:0;flex:1}.file-info{min-width:0;flex:1}.group-member{width:100%;border:0;background:transparent;color:inherit}.sharing-local-full{width:100%!important;height:100%!important;right:0!important;bottom:0!important;border:0!important;border-radius:0!important;object-fit:contain!important}

/* Rodnik layout hardening: header/composer must never scroll out of view. */
.app-shell,.chat-panel,.chat-view{min-height:0;overflow:hidden}
.chat-panel{height:100vh}
.chat-view{height:100%;grid-template-rows:minmax(68px,76px) minmax(0,1fr) minmax(76px,auto)}
.chat-header{min-width:0;min-height:68px;z-index:4}
.peer-wrap{min-width:0;flex:1}.peer-copy{min-width:0}.header-actions{flex:none}
.messages{min-height:0;overscroll-behavior:contain;scrollbar-gutter:stable}
.composer-wrap{min-height:76px;z-index:5;background:linear-gradient(to top,#f4f7fc 70%,rgba(244,247,252,0));padding-top:6px}
.composer{margin-bottom:12px}
.typing-status{color:var(--blue)!important;font-weight:750}
.online-ring{box-shadow:0 0 0 2px #fff,0 0 0 4px #28c76f,0 8px 18px rgba(38,104,230,.17)}

.update-banner{position:fixed;z-index:120;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:#16233a;color:#fff;border-radius:14px;padding:10px 12px 10px 16px;box-shadow:0 14px 36px rgba(8,25,55,.28);font-size:13px;font-weight:700}
.update-banner button{border:0;border-radius:10px;padding:8px 11px;background:#fff;color:#1769df;font-weight:850}
.update-banner .update-later{background:transparent;color:#dbe7ff;border:1px solid rgba(255,255,255,.28)}

/* Screen sharing is a primary call surface, not a tiny preview. */
#callModal{padding:12px}
.call-card.has-video{width:min(1480px,97vw);height:min(940px,94vh);padding:14px 16px 16px;display:flex;flex-direction:column}
.call-card.has-video .call-video-stage{height:auto;min-height:0;flex:1;margin-bottom:10px;border-radius:18px}
.call-card.has-video .call-identity{display:none!important}
.call-card.has-video #callStatus{margin:2px 0 10px;flex:none}
.call-card.has-video .call-actions{flex:none}
.call-video-stage>video#remoteVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0d1118}
.group-video-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,45%),1fr));grid-auto-rows:minmax(0,1fr);gap:8px;padding:8px;background:#0d1118;overflow:auto}
.group-video-tile{position:relative;min-height:220px;background:#111722;border-radius:14px;overflow:hidden}
.group-video-tile video{width:100%;height:100%;object-fit:contain;background:#090d13}
.group-video-label{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.56);color:#fff;border-radius:9px;padding:6px 9px;font-size:12px;font-weight:750;backdrop-filter:blur(6px)}
.local-screen-preview{z-index:3;width:min(260px,24vw);max-height:160px;object-fit:contain;background:#0b0f15}
.sharing-local-full{z-index:2}

.screen-picker-card{width:min(1120px,97vw);max-height:92vh;padding:24px}
.screen-sources{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;max-height:72vh}
.screen-source{position:relative;padding:7px}
.screen-source-kind{position:absolute;left:13px;top:13px;background:rgba(0,0,0,.58);color:#fff;border-radius:8px;padding:4px 7px;font-size:10px;font-weight:800;backdrop-filter:blur(5px)}
.screen-loading{grid-column:1/-1;display:grid;place-items:center;min-height:170px;color:#7b8799;font-weight:700}

@media(max-width:760px){
  .app-shell{grid-template-columns:240px minmax(0,1fr)}
  .sidebar{padding-left:9px;padding-right:9px}.brand-name{display:none}
  .chat-header{padding:0 10px}.call-button{padding:9px 11px}
  .messages{padding:12px 10px}.composer{margin-left:8px;margin-right:8px}
  .message-stack{max-width:90%}
}
.profile-status{display:inline-flex;align-items:center;gap:6px;margin-top:7px;font-size:12px;font-weight:750;color:#8a96a8}.profile-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#aab4c3}.profile-status.online{color:#1ca55d}.profile-status.online::before{background:#28c76f}

/* Rodnik 0.4 — message receipts, group management and call polish. */
.bubble-meta{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:5px;min-height:13px}
.bubble-meta .bubble-time{margin:0;text-align:initial;line-height:13px}
.message-status{display:inline-flex;align-items:center;justify-content:center;min-width:14px;font-size:11px;font-weight:850;line-height:13px;letter-spacing:-2px;opacity:.82}
.message-status.read{color:#d8f2ff;opacity:1}.message-row:not(.mine) .message-status.read{color:#1883ff}
.message-status.failed{width:15px;height:15px;min-width:15px;border:1.7px solid currentColor;border-radius:50%;font-size:10px;letter-spacing:0;opacity:1;cursor:help}
.message-status.sending{letter-spacing:0;font-size:12px;opacity:.62}
.media-meta .bubble-meta{margin-left:auto;flex:none}.media-meta>.bubble-time{display:none}
.message-row[data-local-failed="true"] .bubble{outline:1px solid rgba(239,70,98,.35)}

.group-manage{border-top:1px solid var(--line);margin-top:16px;padding-top:2px;text-align:left}
.group-manage .modal-section{margin-top:14px}.danger-wide{width:100%;border:0;background:#fff0f2;color:#c7364f;border-radius:13px;padding:11px 14px;font-weight:850;margin-top:15px}
.danger-wide:hover{background:#ffe3e7}.group-info-card{max-height:90vh;overflow:auto}.member-result.add-member-result{align-items:center}.member-add-mark{margin-left:auto;color:var(--blue);font-weight:900;font-size:20px}

.call-event-toast{position:absolute;z-index:12;top:18px;left:50%;transform:translateX(-50%);background:rgba(10,16,28,.78);color:#fff;border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(10px);border-radius:999px;padding:8px 13px;font-size:12px;font-weight:800;pointer-events:none;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.call-card{position:relative}
.call-card.has-video{width:calc(100vw - 20px)!important;height:calc(100vh - 20px)!important;max-width:none!important;max-height:none!important;background:#0b1018;color:#fff;border-radius:20px!important;padding:10px 12px 12px!important}
.call-card.has-video .call-video-stage{flex:1 1 auto!important;height:0!important;min-height:0!important;margin:0 0 8px!important;background:#070a0f!important;border-radius:16px!important}
.call-card.has-video #callStatus{color:#c8d2df!important;margin:2px 0 8px!important}
.call-card.has-video .call-actions{padding-bottom:1px}
.call-card.has-video .round{background:#303b4c}.call-card.has-video .screen-round.active{background:var(--blue)}
.call-card.has-video .danger-round{box-shadow:0 8px 24px rgba(239,70,98,.22)}

/* A local screen share is always the primary surface. This fixes the tiny PiP bug. */
.call-video-stage.local-share-primary .local-screen-preview{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;border:0!important;border-radius:0!important;object-fit:contain!important;background:#070a0f!important;z-index:2!important}
.call-video-stage.local-share-primary>video#remoteVideo:not(.hidden){position:absolute!important;inset:auto 14px 14px auto!important;width:min(300px,24vw)!important;height:auto!important;aspect-ratio:16/9;max-height:180px!important;border:2px solid rgba(255,255,255,.8);border-radius:12px!important;object-fit:contain!important;background:#0b0f15!important;z-index:6!important;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.call-video-stage.local-share-primary .group-video-grid:not(.hidden){position:absolute!important;inset:14px 14px 14px auto!important;width:min(300px,25vw)!important;height:auto!important;display:flex!important;flex-direction:column!important;gap:8px!important;padding:0!important;background:transparent!important;z-index:6!important;overflow:auto!important}
.call-video-stage.local-share-primary .group-video-tile{min-height:120px;height:150px;flex:0 0 150px;border:2px solid rgba(255,255,255,.72);box-shadow:0 12px 28px rgba(0,0,0,.28)}
.call-video-stage:not(.local-share-primary) .local-screen-preview:not(.hidden){position:absolute;right:14px;bottom:14px;width:min(300px,24vw);height:auto;max-height:180px;border-radius:12px;border:2px solid rgba(255,255,255,.8);object-fit:contain;z-index:6;background:#0b0f15}

/* One remote shared screen fills the group-call stage instead of becoming a small tile. */
.group-video-grid:has(.group-video-tile:only-child){grid-template-columns:1fr!important;grid-template-rows:1fr!important}
.group-video-grid:has(.group-video-tile:only-child) .group-video-tile{min-height:0;height:100%}
.group-video-grid:has(.group-video-tile:only-child) .group-video-tile video{object-fit:contain}

@media(max-width:760px){
  .call-card.has-video{width:100vw!important;height:100vh!important;border-radius:0!important}
  .call-video-stage.local-share-primary>video#remoteVideo:not(.hidden),.call-video-stage.local-share-primary .group-video-grid:not(.hidden){width:34vw!important}
}

/* Rodnik 0.5 — settings, minimized calls, stable reactions and dark theme. */
.messages{overflow-anchor:none}
.reactions,.reaction-chip,.react-add{overflow-anchor:none}

.settings-card{width:min(520px,94vw);text-align:left}
.settings-section{margin-top:8px}
.settings-card select{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:13px;background:#fbfdff;color:var(--ink);outline:0}
.setting-note{margin-top:7px;color:var(--muted);font-size:12px}
.setting-toggle{display:flex;align-items:flex-start;gap:11px;margin:20px 0 0;padding:14px;border:1px solid var(--line);border-radius:15px;background:#f8fbff;cursor:pointer}
.setting-toggle input{width:19px;height:19px;margin:2px 0 0;accent-color:var(--blue);flex:none}
.setting-toggle span{display:flex;flex-direction:column;gap:4px;color:var(--ink)}
.setting-toggle small{color:var(--muted);line-height:1.35;font-weight:500}

.minimize-round{font-size:24px;line-height:1}
.mini-call{position:fixed;z-index:95;right:18px;bottom:18px;display:flex;align-items:center;gap:7px;min-width:330px;max-width:min(520px,calc(100vw - 36px));padding:8px;border:1px solid rgba(255,255,255,.12);border-radius:19px;background:rgba(38,43,52,.96);color:#fff;box-shadow:0 18px 55px rgba(0,0,0,.32);backdrop-filter:blur(18px)}
.mini-call-main{min-width:0;flex:1;border:0;background:transparent;color:inherit;display:flex;align-items:center;gap:10px;text-align:left;padding:5px 7px;border-radius:12px}
.mini-call-main:hover{background:rgba(255,255,255,.07)}
.mini-call-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--blue2));font-size:17px;flex:none}
.mini-call-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.mini-call-copy strong,.mini-call-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-call-copy strong{font-size:13px}.mini-call-copy small{color:#b8c1cf;font-size:11px}
.mini-call-control{width:36px;height:36px;flex:none;border:0;border-radius:11px;background:#444b57;color:#fff;font-size:16px}.mini-call-control:hover{background:#525b69}.mini-call-control.active{background:var(--blue)}.mini-call-control.danger-mini{background:#b43d50}.mini-call-control.danger-mini:hover{background:#d3465d}

/* Dark is the default Rodnik palette: gray surfaces, not pure black. */
body[data-theme="dark"]{
  --ink:#eef1f5;--muted:#9ba5b3;--line:#424954;--bg:#24282f;--danger:#f05a70;
  color:var(--ink);background:var(--bg)
}
body[data-theme="dark"] .auth-screen{background:radial-gradient(circle at 18% 0,#333b4a,transparent 42%),linear-gradient(135deg,#24282f,#2b3038)}
body[data-theme="dark"] .auth-card,
body[data-theme="dark"] .sidebar,
body[data-theme="dark"] .modal-card{background:rgba(47,52,61,.98);border-color:#444b57;box-shadow:0 28px 90px rgba(0,0,0,.28)}
body[data-theme="dark"] .app-shell{background:#24282f}
body[data-theme="dark"] .sidebar{border-right-color:#3f4651}
body[data-theme="dark"] .auth-tabs{background:#262b33}
body[data-theme="dark"] .tab{color:#9ca6b4}
body[data-theme="dark"] .tab.active{background:#3a404a;color:#7eb8ff;box-shadow:none}
body[data-theme="dark"] input,
body[data-theme="dark"] textarea,
body[data-theme="dark"] .settings-card select{background:#292e36;color:#eef1f5;border-color:#454d59}
body[data-theme="dark"] input:focus,
body[data-theme="dark"] textarea:focus,
body[data-theme="dark"] .settings-card select:focus{background:#2d333c;border-color:#5f92d8;box-shadow:0 0 0 4px rgba(24,119,255,.12)}
body[data-theme="dark"] label{color:#bbc3ce}
body[data-theme="dark"] .secondary{background:#383e48;border-color:#4a525e;color:#edf1f5}
body[data-theme="dark"] .icon-button{background:#353b45;color:#aeb7c5}
body[data-theme="dark"] .icon-button:hover{background:#3e4755;color:#7db7ff}
body[data-theme="dark"] .me-card{background:linear-gradient(135deg,#333b48,#30363f);color:#f0f3f7}
body[data-theme="dark"] .me-card:hover{box-shadow:inset 0 0 0 1px #4b5869}
body[data-theme="dark"] .search-box{background:#2a3038;border-color:#414956}
body[data-theme="dark"] .search-box input{background:transparent}
body[data-theme="dark"] .search-results{background:#303640;border-color:#454d59;box-shadow:0 18px 45px rgba(0,0,0,.35)}
body[data-theme="dark"] .search-user:hover,
body[data-theme="dark"] .conversation:hover,
body[data-theme="dark"] .conversation.active{background:#39414d}
body[data-theme="dark"] .search-profile-btn{background:#3a424e;color:#bdc7d4}
body[data-theme="dark"] .empty-state{color:#98a2b0}
body[data-theme="dark"] .empty-state h2{color:#e7ebf1}
body[data-theme="dark"] .chat-header{background:rgba(45,50,59,.94);border-bottom-color:#404752}
body[data-theme="dark"] .peer-wrap{color:#edf1f5}
body[data-theme="dark"] .peer-wrap:hover{background:#383f49}
body[data-theme="dark"] .call-button{background:#35475e;color:#7fb9ff}
body[data-theme="dark"] .messages{background:#24282f}
body[data-theme="dark"] .bubble{background:#353b45;border-color:#434b57;color:#edf1f5;box-shadow:0 5px 18px rgba(0,0,0,.12)}
body[data-theme="dark"] .mine .bubble{background:linear-gradient(135deg,#1679e9,#365fdf);color:#fff}
body[data-theme="dark"] .react-add{background:#343b45;color:#aeb8c6}
body[data-theme="dark"] .reaction-chip{background:#333a44;border-color:#4a5360;color:#dce2e9}
body[data-theme="dark"] .reaction-chip.mine{background:#274766;border-color:#4d85bd;color:#dceeff}
body[data-theme="dark"] .composer-wrap{background:linear-gradient(to top,#24282f 70%,rgba(36,40,47,0))}
body[data-theme="dark"] .composer{background:#303640;border-color:#454d59;box-shadow:0 12px 30px rgba(0,0,0,.18)}
body[data-theme="dark"] .attach-button{background:#3a424d;color:#bac4d2}
body[data-theme="dark"] .attach-button:hover{background:#435064;color:#7db7ff}
body[data-theme="dark"] .emoji-picker,
body[data-theme="dark"] .reaction-picker{background:#303640;border-color:#454d59;box-shadow:0 18px 48px rgba(0,0,0,.38)}
body[data-theme="dark"] .emoji-cell:hover,
body[data-theme="dark"] .reaction-picker button:hover{background:#414a56}
body[data-theme="dark"] .file-icon,
body[data-theme="dark"] .message-row:not(.mine) .file-icon,
body[data-theme="dark"] .message-row:not(.mine) .download-btn{background:#414955;color:#9bc6ff}
body[data-theme="dark"] .setting-toggle{background:#2a3038;border-color:#454d59}
body[data-theme="dark"] .danger-wide{background:#4a3038;color:#ff9bab}
body[data-theme="dark"] .danger-wide:hover{background:#58343f}
body[data-theme="dark"] .screen-source{background:#2b3139;border-color:#454d59;color:#edf1f5}
body[data-theme="dark"] .screen-source:hover{background:#374354;border-color:#638ec3}
body[data-theme="dark"] .screen-thumb{background:#1f2329}
body[data-theme="dark"] .profile-status{color:#a8b1be}
body[data-theme="dark"] .server-details{border-top-color:#424954}
body[data-theme="dark"] .auth-error{background:#4b3037;color:#ffacb8}

@media(max-width:640px){.mini-call{left:10px;right:10px;bottom:10px;min-width:0}.mini-call-copy{max-width:130px}}
body[data-theme="dark"] .call-card:not(.has-video){background:#303640;color:#eef1f5;box-shadow:0 30px 90px rgba(0,0,0,.35)}
body[data-theme="dark"] .call-card:not(.has-video) p{color:#aeb8c5}
body[data-theme="dark"] .call-rings{background:radial-gradient(circle,#394552 40%,#34414f 41% 58%,#303842 59%)}
body[data-theme="dark"] .modal{background:rgba(17,20,25,.58)}

/* Rodnik 0.7 — modern interface refresh */
:root{
  --rodnik-surface:rgba(255,255,255,.82);
  --rodnik-surface-strong:#ffffff;
  --rodnik-border:rgba(126,145,174,.18);
  --rodnik-shadow:0 18px 52px rgba(24,52,92,.11);
  --emoji-font:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button{transition:transform .14s ease,background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}
button:active{transform:scale(.975)}

.app-shell{grid-template-columns:318px minmax(0,1fr);background:
  radial-gradient(circle at 77% -15%,rgba(44,128,255,.09),transparent 32%),
  #f3f6fb}
.sidebar{padding:16px 12px;background:rgba(255,255,255,.88);backdrop-filter:blur(24px) saturate(125%);border-right:1px solid var(--rodnik-border)}
.sidebar-top{padding:0 4px 13px;gap:7px}.mini-logo{width:36px;height:36px;border-radius:12px}.brand-name{font-size:20px;letter-spacing:-.65px}
.icon-button{border:1px solid transparent;background:rgba(126,145,174,.08);border-radius:12px;color:#6e7c91}.icon-button:hover{transform:translateY(-1px);border-color:#d9e7fb;background:#eef5ff;box-shadow:0 8px 18px rgba(47,103,179,.08)}
.me-card{margin:2px 0 12px;padding:11px;border:1px solid rgba(70,128,210,.10);border-radius:18px;background:linear-gradient(135deg,rgba(229,241,255,.94),rgba(249,252,255,.94));box-shadow:0 10px 24px rgba(29,77,137,.05)}
.avatar{border-radius:15px}.conversation .avatar{width:42px;height:42px;border-radius:14px}
.search-box{height:42px;border-radius:14px;background:rgba(244,248,253,.86);border-color:rgba(132,153,181,.16)}
.search-box:focus-within{border-color:#87b9ff;box-shadow:0 0 0 4px rgba(33,123,255,.08);background:#fff}
.section-title{margin-top:16px;color:#9aa6b8;letter-spacing:1.1px}
.conversation-list{height:calc(100vh - 240px);padding:0 1px}
.conversation{position:relative;padding:10px 9px;border:1px solid transparent;border-radius:16px}
.conversation:hover{background:rgba(232,241,254,.72)}
.conversation.active{background:linear-gradient(135deg,rgba(221,237,255,.98),rgba(237,246,255,.95));border-color:rgba(77,145,236,.12);box-shadow:0 7px 20px rgba(38,91,163,.07)}
.conversation.active:before{content:"";position:absolute;left:-4px;top:14px;bottom:14px;width:3px;border-radius:999px;background:linear-gradient(#49b6ff,#176fff);box-shadow:0 0 12px rgba(31,129,255,.34)}
.conv-name{font-size:13.5px}.conv-preview{font-size:11.5px;color:#8a96a8}

.chat-panel{background:radial-gradient(circle at 72% 0,rgba(58,138,255,.055),transparent 40%)}
.chat-header{min-height:72px;padding:0 19px;background:rgba(249,251,254,.78);backdrop-filter:blur(24px) saturate(130%);border-bottom-color:rgba(133,151,178,.13)}
.peer-wrap{padding:7px 9px;border-radius:16px}.peer-wrap:hover{background:rgba(128,150,180,.07)}
.peer-name{font-size:14.5px;letter-spacing:-.15px}.peer-sub{font-size:11.5px}
.call-button{border:1px solid rgba(69,137,228,.11);background:rgba(228,241,255,.9);border-radius:14px;padding:10px 15px;box-shadow:0 6px 18px rgba(36,113,218,.07)}
.call-button:hover{transform:translateY(-1px);background:#dcebff;box-shadow:0 9px 22px rgba(36,113,218,.12)}

.messages{padding:21px 28px 15px;gap:6px}
.message-stack{max-width:min(680px,76%)}
.bubble{border-radius:19px 19px 19px 7px;padding:10px 13px 7px;border-color:rgba(137,154,179,.12);box-shadow:0 5px 18px rgba(27,54,90,.045)}
.mine .bubble{border-radius:19px 19px 7px 19px;background:linear-gradient(135deg,#1688ff,#315ee8);box-shadow:0 8px 22px rgba(37,103,225,.16)}
.bubble-text{font-size:14px;line-height:1.42;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",var(--emoji-font);font-variant-emoji:emoji}
.react-add{border:1px solid rgba(130,151,181,.10);background:rgba(244,248,252,.94);border-radius:10px}
.reaction-chip{display:inline-flex;align-items:center;gap:3px;min-height:28px;padding:3px 8px;border-color:rgba(122,146,178,.16);box-shadow:0 3px 10px rgba(38,61,94,.035)}
.reaction-chip.mine{background:#e7f2ff;border-color:#8fbdff}

.composer-wrap{padding-top:10px;background:linear-gradient(to top,#f3f6fb 66%,rgba(243,246,251,0))}
.composer{margin:0 18px 14px;min-height:60px;padding:8px;border-radius:21px;border-color:rgba(125,146,176,.15);background:rgba(255,255,255,.90);backdrop-filter:blur(22px);box-shadow:0 15px 38px rgba(34,65,106,.085)}
.composer:focus-within{border-color:rgba(80,149,244,.36);box-shadow:0 16px 40px rgba(34,86,155,.11),0 0 0 4px rgba(35,124,255,.045)}
.composer textarea{font-size:14px;line-height:21px;padding:9px 5px}
.attach-button,.send-button{width:41px;height:41px;border-radius:13px}.attach-button{background:rgba(127,149,180,.09)}
.send-button{box-shadow:0 8px 20px rgba(29,105,241,.24)}.send-button:hover{transform:translateY(-1px);box-shadow:0 11px 25px rgba(29,105,241,.30)}

/* Emoji picker: native color glyphs with an Apple-first font stack. */
.emoji-glyph{font-family:var(--emoji-font);font-variant-emoji:emoji;line-height:1;display:inline-block;vertical-align:-.08em}
.emoji-picker{left:66px;bottom:78px;width:354px;display:block;padding:0;overflow:hidden;border-radius:22px;border:1px solid rgba(121,145,178,.16);background:rgba(255,255,255,.96);backdrop-filter:blur(28px) saturate(140%);box-shadow:0 22px 70px rgba(21,48,86,.19)}
.emoji-picker-top{display:flex;align-items:center;gap:10px;padding:12px 12px 9px;border-bottom:1px solid rgba(130,151,178,.11)}
.emoji-picker-title{font-size:13px;font-weight:850;letter-spacing:-.15px;white-space:nowrap}
.emoji-search{height:34px;min-width:0;flex:1;border:1px solid rgba(130,151,178,.13)!important;border-radius:11px!important;padding:0 10px!important;background:#f4f7fb!important;font-size:12px!important;box-shadow:none!important}
.emoji-tabs{display:flex;gap:4px;padding:8px 10px 5px;overflow-x:auto;scrollbar-width:none}.emoji-tabs::-webkit-scrollbar{display:none}
.emoji-tab{flex:1;min-width:44px;height:34px;border:0;border-radius:11px;background:transparent;font-size:19px}.emoji-tab:hover{background:#f1f6fc}.emoji-tab.active{background:#e7f2ff;box-shadow:inset 0 0 0 1px rgba(77,145,236,.11)}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:226px;overflow:auto;padding:6px 10px 12px}
.emoji-cell{display:grid;place-items:center;width:100%;aspect-ratio:1;border:0;background:transparent;font-size:25px;padding:3px;border-radius:11px}
.emoji-cell:hover{background:#edf4ff;transform:scale(1.08)}
.reaction-picker{padding:6px;border-radius:16px;gap:2px;background:rgba(255,255,255,.97);backdrop-filter:blur(22px);border-color:rgba(122,146,178,.15)}
.reaction-picker button{display:grid;place-items:center;width:36px;height:36px;padding:0;font-size:21px;border-radius:11px}

.modal{background:rgba(14,24,39,.34);backdrop-filter:blur(12px) saturate(115%)}
.modal-card{border:1px solid rgba(135,154,181,.14);background:rgba(255,255,255,.96);border-radius:28px;box-shadow:0 34px 100px rgba(14,42,80,.23)}
.settings-card{width:min(540px,94vw)}
.setting-toggle{border-radius:17px!important;padding:14px!important;transition:.16s ease}.setting-toggle:hover{transform:translateY(-1px)}
.setting-toggle-child{margin-top:-5px;margin-left:18px;border-radius:15px!important}.disabled-setting{opacity:.48;filter:saturate(.6)}
.toast{top:18px;border:1px solid rgba(255,255,255,.10);background:rgba(25,34,49,.94);backdrop-filter:blur(18px);border-radius:14px;box-shadow:0 14px 36px rgba(0,0,0,.20);font-size:13px}

/* Dark theme refinements */
body[data-theme="dark"]{
  --rodnik-surface:rgba(43,48,57,.86);
  --rodnik-surface-strong:#2c313a;
  --rodnik-border:rgba(183,198,218,.10);
}
body[data-theme="dark"] .app-shell{background:radial-gradient(circle at 74% -10%,rgba(28,116,255,.10),transparent 34%),#20242a}
body[data-theme="dark"] .sidebar{background:rgba(38,43,51,.88);border-right-color:rgba(177,193,215,.09)}
body[data-theme="dark"] .icon-button{background:rgba(185,200,220,.07);color:#aab5c3}
body[data-theme="dark"] .icon-button:hover{background:#343d49;border-color:#455568;color:#8dc3ff}
body[data-theme="dark"] .me-card{background:linear-gradient(135deg,rgba(50,60,73,.96),rgba(45,51,60,.96));border-color:rgba(140,172,214,.10);box-shadow:none}
body[data-theme="dark"] .search-box{background:#292f37;border-color:rgba(175,195,219,.10)}
body[data-theme="dark"] .search-box:focus-within{background:#2e3540;border-color:#507db6;box-shadow:0 0 0 4px rgba(37,125,255,.09)}
body[data-theme="dark"] .conversation:hover{background:rgba(65,75,89,.62)}
body[data-theme="dark"] .conversation.active{background:linear-gradient(135deg,rgba(54,68,85,.98),rgba(47,56,68,.98));border-color:rgba(104,159,229,.10);box-shadow:0 9px 22px rgba(0,0,0,.09)}
body[data-theme="dark"] .chat-panel{background:radial-gradient(circle at 73% 0,rgba(30,113,234,.055),transparent 44%),#20242a}
body[data-theme="dark"] .chat-header{background:rgba(42,47,55,.76);border-bottom-color:rgba(174,193,216,.09)}
body[data-theme="dark"] .peer-wrap:hover{background:rgba(188,202,219,.06)}
body[data-theme="dark"] .messages{background:transparent}
body[data-theme="dark"] .bubble{background:#30363f;border-color:rgba(192,205,221,.09);box-shadow:0 6px 18px rgba(0,0,0,.08)}
body[data-theme="dark"] .mine .bubble{background:linear-gradient(135deg,#147cf0,#315ed9);box-shadow:0 8px 22px rgba(7,61,155,.20)}
body[data-theme="dark"] .composer-wrap{background:linear-gradient(to top,#20242a 68%,rgba(32,36,42,0))}
body[data-theme="dark"] .composer{background:rgba(45,51,60,.91);border-color:rgba(184,200,220,.11);box-shadow:0 15px 38px rgba(0,0,0,.17)}
body[data-theme="dark"] .composer:focus-within{border-color:rgba(94,149,221,.35);box-shadow:0 15px 38px rgba(0,0,0,.17),0 0 0 4px rgba(33,118,239,.055)}
body[data-theme="dark"] .attach-button{background:rgba(192,207,226,.07);color:#b1bdcb}
body[data-theme="dark"] .emoji-picker,body[data-theme="dark"] .reaction-picker{background:rgba(45,51,60,.97);border-color:rgba(189,205,225,.11)}
body[data-theme="dark"] .emoji-picker-top{border-bottom-color:rgba(190,205,225,.08)}
body[data-theme="dark"] .emoji-search{background:#272d35!important;color:#edf1f5!important;border-color:rgba(190,205,225,.08)!important}
body[data-theme="dark"] .emoji-tab:hover,body[data-theme="dark"] .emoji-cell:hover,body[data-theme="dark"] .reaction-picker button:hover{background:#3a4350}
body[data-theme="dark"] .emoji-tab.active{background:#35475d;box-shadow:inset 0 0 0 1px rgba(110,170,241,.10)}
body[data-theme="dark"] .reaction-chip{background:#2d343d;border-color:rgba(187,203,222,.10);color:#dce4ed}
body[data-theme="dark"] .reaction-chip.mine{background:#30465f;border-color:#4f83bf;color:#b9d9ff}
body[data-theme="dark"] .setting-toggle-child{background:#272d35!important}

@media(max-width:980px){.app-shell{grid-template-columns:278px minmax(0,1fr)}.emoji-picker{left:52px;width:334px}.emoji-grid{grid-template-columns:repeat(7,1fr)}}