html,body{margin:0;padding:0;width:100%;font-family:sans-serif;background-color:#000;color:white}
.video-container{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000}
#remoteVideo{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.timer{position:absolute;top:calc(25px + 18vh + 10px);left:20px;width:20vw;max-width:180px;background-color:transparent;color:#4CAF50;text-align:center;padding:5px;border-radius:5px;font-family:monospace;font-size:16px;font-weight:bold;z-index:15}
.timer.warning{color:#f44336}
.controls{position:absolute;top:20px;right:20px;left:auto;display:flex;flex-direction:row;gap:10px;z-index:20;flex-wrap:wrap;justify-content:flex-end}
.control-button{width:50px;height:50px;border:none;border-radius:50%;background-color:rgba(255,255,255,0.2);color:white;font-size:1.2em;cursor:pointer;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(5px)}
.control-button:active{transform:scale(0.95)}
.bottom-controls{position:fixed;bottom:10px;left:20px;display:flex;gap:15px;z-index:1000}
.bottom-controls .control-button{width:40px;height:40px;font-size:18px}
.status-notifications{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:30;text-align:center}
.status-notification{background-color:rgba(0,0,0,0.7);color:white;padding:10px 20px;border-radius:20px;margin:5px 0;font-size:14px;backdrop-filter:blur(5px)}
.persistent-notifications{position:absolute;bottom:150px;right:10px;z-index:30;display:flex;flex-direction:column;align-items:flex-end}
.persistent-notification{background-color:rgba(0,0,0,0.7);color:white;padding:8px 15px;border-radius:15px;margin:5px 0;font-size:14px;backdrop-filter:blur(5px);display:flex;align-items:center;gap:8px}
.persistent-notification.audio-muted{border-left:4px solid #f44336}
.reload-button{padding:12px 24px;background-color:#4CAF50;color:white;border:none;border-radius:8px;cursor:pointer;font-size:16px;margin-top:20px;transition:background-color 0.3s}
.reload-button:hover{background-color:#4CAF50}
.mobile-alert{position:fixed;bottom:150px;left:10px;right:10px;background:rgba(0,0,0,0.8);color:white;padding:12px;z-index:1000;text-align:center;border-radius:8px;font-size:14px}
.share-pulse{animation:pulse-share 1s infinite alternate}
@keyframes pulse-share{0%{outline:2px solid rgba(0,150,255,0.8);outline-offset:0px}100%{outline:2px solid rgba(0,150,255,0);outline-offset:8px}}
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:10000;display:flex;justify-content:center;align-items:center}
.modal-content{background:#1a1a1a;border-radius:15px;width:90%;max-width:800px;max-height:90vh;overflow-y:auto;color:white}
.modal-header{padding:20px;border-bottom:1px solid #333;display:flex;justify-content:space-between;align-items:center}
.modal-header h2{color:#4CAF50;margin:0}
.modal-close-btn{background:none;border:none;color:white;font-size:24px;cursor:pointer;padding:0;width:30px;height:30px}
.modal-body{padding:20px}
.modal-return-button{width:100%;padding:15px;background-color:#4CAF50;color:white;border:none;border-radius:10px;font-size:18px;cursor:pointer;margin-top:30px;text-align:center;text-decoration:none;display:block}
.modal-return-button:hover{background-color:#4CAF50}
.dialpad-digit,#dialpadBackspace,#dialpadOk{width:80px;height:80px;font-size:32px;border:none;border-radius:50%;cursor:pointer;transition:all 0.1s;display:flex;justify-content:center;align-items:center;color:white}
.dialpad-digit{background:#4CAF50;font-weight:bold;user-select:none}
#dialpadBackspace.dialpad-digit,#dialpadBackspace{background:#2196F3}
#dialpadOk.dialpad-digit,#dialpadOk{background:#f44336;font-size:22px;font-weight:bold}
.dialpad-digit:active,#dialpadBackspace:active{background:#f44336!important;transform:scale(0.95)}
#dialpadOk:active{background:#4CAF50!important;transform:scale(0.95)}
#vipGuestButton:disabled{background:#667!important;cursor:not-allowed!important;opacity:0.6}
#dialpadButton[style*="display: none"]{display:none!important}
#vipRoomStatusText{transition:color 0.3s ease}
#vipPasswordButton:not(:disabled){background:#4CAF50!important;color:white!important;cursor:pointer!important}
#vipPasswordButton:not(:disabled):hover{background:#4CAF50!important}
#vipPasswordInput:focus{border-color:#4CAF50!important;box-shadow:0 0 0 2px rgba(76,175,80,0.2)!important}
#vipPasswordErrorText{transition:all 0.3s ease}
.bottom-links a:hover{color:#4CAF50!important;text-decoration:underline}
.vip-login-screen{width:100%;height:100%;background:black;color:white;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;box-sizing:border-box;position:relative;overflow-y:auto}
.vip-room-name{color:#ffd900;font-size:18px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;font-weight:bold;margin:40px 0 30px 0;text-align:center;word-break:break-word;max-width:100%;line-height:1.2}
.vip-status-text{color:#4CAF50;font-size:22px;line-height:1.4;padding:15px;text-align:center;min-height:60px;display:flex;align-items:center;justify-content:center;margin-bottom:30px;width:100%;max-width:600px}
.vip-room-id-label{color:#ffd900;font-size:22px;text-align:center;margin-bottom:15px;width:100%;max-width:400px}
.vip-password-container{width:100%;max-width:400px;margin-bottom:30px}
.vip-password-row{display:flex;margin-bottom:10px;width:100%}
.vip-password-input{flex:1;padding:15px;background:#333;border:2px solid #444;border-radius:8px 0 0 8px;color:white;font-size:16px;min-width:0;outline:none;box-sizing:border-box}
.vip-password-input:focus{border-color:#4CAF50;box-shadow:0 0 0 2px rgba(76,175,80,0.2)}
.vip-password-button{padding:15px 25px;background:#4CAF50;color:white;border:none;border-radius:0 8px 8px 0;font-size:16px;cursor:pointer;white-space:nowrap;min-width:100px;box-sizing:border-box;transition:background-color 0.3s}
.vip-password-button:hover:not(:disabled){background:#4CAF50}
.vip-password-button:disabled{background:#666;color:#999;cursor:not-allowed}
.vip-password-error{color:#f44336;font-size:14px;line-height:1.4;padding:8px;text-align:center;min-height:30px;display:none}
.vip-buttons-container{width:100%;max-width:400px;display:flex;flex-direction:row;gap:15px;margin-bottom:50px}
.vip-action-button{flex:1;min-width:0;padding:18px 10px;background:#4CAF50;color:white;border:none;border-radius:8px;font-size:16px;cursor:pointer;font-weight:bold;line-height:1.3;height:85px;white-space:normal;word-break:break-word;display:flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;transition:background-color 0.3s}
.vip-action-button:hover{background:#4CAF50}
.media-status-message{position:absolute;left:20px;bottom:100px;color:#888;font-size:14px;text-align:left;max-width:300px;line-height:1.3;background:transparent;border:none;padding:5px}
.vip-bottom-links{position:absolute;bottom:15px;left:0;width:100%;display:flex;justify-content:center;gap:25px;flex-wrap:wrap}
.vip-bottom-link{color:#667;text-decoration:none;font-size:14px;transition:color 0.3s}
.vip-bottom-link:hover{color:#4CAF50;text-decoration:underline}
.modal-center-buttons button,.settings-buttons button,#errorButtons button,.modal-simple-buttons button,.session-buttons button,.install-modal-buttons button,.btn-primary,.btn-secondary,.btn-danger{min-height:44px;padding:12px 24px;font-size:16px;border-radius:8px;border:none;cursor:pointer;font-weight:500;transition:background-color 0.2s ease;display:flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;width:100%}
.btn-primary{background:#4CAF50;color:white}
.btn-primary:hover{background:#4CAF50}
.btn-secondary{background:#667;color:white}
.btn-secondary:hover{background:#556}
.btn-danger{background:#f44336;color:white}
.btn-danger:hover{background:#d32f2f}
.modal-center-buttons,.settings-buttons,#errorButtons,.modal-simple-buttons,.session-buttons,.install-modal-buttons{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:20px}
.modal-center-buttons.horizontal,.settings-buttons.horizontal,.modal-simple-buttons.horizontal{flex-direction:row;gap:15px}
.modal-center-buttons.horizontal button,.settings-buttons.horizontal button,.modal-simple-buttons.horizontal button{flex:1}
.modal-simple{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:10000;display:flex;justify-content:center;align-items:center}
.modal-simple-content{background:#2a2a2a;padding:30px;border-radius:10px;text-align:center;max-width:500px;margin:20px;width:90%;box-sizing:border-box}
.modal-simple-header{margin-bottom:20px}
.modal-simple-title{color:white;margin:0;font-size:20px}
.modal-simple-body{margin-bottom:30px;font-size:16px;color:#ccc;line-height:1.5}
.session-modal-content{background:#2a2a2a;padding:30px;border-radius:10px;text-align:center;max-width:500px;margin:20px;width:90%;box-sizing:border-box}
.session-modal-message{margin-bottom:30px;font-size:16px;color:#ccc}
.install-modal-content{background:#2a2a2a;border-radius:15px;width:90%;max-width:500px;color:white;padding:0;overflow:hidden}
.install-modal-header{padding:20px;border-bottom:1px solid #333;background:#1a1a1a}
.install-modal-title{color:#4CAF50;margin:0;font-size:20px;text-align:center}
.install-modal-body{padding:20px;font-size:16px;line-height:1.5;color:#ccc}
.install-step strong{color:#f44336}
.hidden{display:none!important}
.modal-center-content{background:#2a2a2a;border-radius:15px;width:90%;max-width:500px;color:white;padding:0;overflow:hidden}
.modal-center-header{padding:20px;border-bottom:1px solid #333;text-align:center}
.modal-center-title{color:#4CAF50;margin:0;font-size:24px}
.modal-center-body{padding:20px;font-size:16px;line-height:1.5;color:#ccc;text-align:center}
.blocked-modal-content{max-width:500px;text-align:center}
.blocked-message{margin-bottom:30px;font-size:18px}
.blocked-submessage{margin-bottom:30px;color:#ccc}
#errorModal .modal-content{max-width:500px;text-align:center}
.error-message{margin-bottom:30px;font-size:16px}
.endcall-modal-content{max-width:500px;text-align:center}
.endcall-message{margin-bottom:30px;font-size:16px}
.install-steps-list{margin-bottom:20px;text-align:left}
.install-step{margin-bottom:10px;line-height:1.5}
.dialpad-modal-content{max-width:320px;text-align:center}
.dialpad-display{font-size:32px;font-family:monospace;background:#222;color:#4CAF50;padding:15px;margin:15px 0;border-radius:8px;min-height:50px;letter-spacing:2px;border:2px solid #333;box-sizing:border-box}
.dialpad-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
.dialpad-cancel{width:100%;padding:15px;background:#667;color:white;border:none;border-radius:8px;font-size:18px;margin-top:10px;cursor:pointer;transition:background-color 0.3s}
.dialpad-cancel:hover{background:#556}
.settings-modal-content{background:#2a2a2a;border-radius:15px;width:90%;max-width:400px;color:white;padding:0;overflow:hidden;max-height:90vh;overflow-y:auto}
.settings-field{margin-bottom:25px;text-align:left}
.settings-label{display:block;color:#ccc;font-size:16px;margin-bottom:8px}
.settings-input-container{position:relative;margin-bottom:5px}
.settings-input{width:100%;padding:12px;background:#333;border:2px solid #444;border-radius:8px;color:white;font-size:16px;box-sizing:border-box;outline:none;transition:border-color 0.3s}
.settings-input:focus{border-color:#4CAF50;box-shadow:0 0 0 2px rgba(76,175,80,0.2)}
.settings-input.error{border-color:#f44336}
.char-counter{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#888;font-size:14px;font-family:monospace;user-select:none}
.char-counter.warning{color:#ff9800}
.char-counter.error{color:#f44336}
.settings-hint{color:#888;font-size:14px;margin-top:5px}
.settings-section-title{color:#4CAF50;font-size:18px;margin:25px 0 15px 0;padding-bottom:8px;border-bottom:1px solid #444}
.password-change-container{margin-top:10px}
.password-input-container{display:flex;gap:10px;margin-bottom:8px}
.password-change-input{flex:1;margin:0}
.password-submit-btn{min-width:80px;height:44px;padding:0 20px;background:#4CAF50;color:white;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:background-color 0.2s;white-space:nowrap}
.password-submit-btn:hover{background:#4CAF50}
.password-submit-btn:disabled{background:#666;color:#999;cursor:not-allowed}
.password-change-hint{color:#888;font-size:14px;margin-bottom:10px;min-height:20px}
.password-change-message{min-height:30px;padding:8px 12px;border-radius:6px;font-size:14px;margin-top:10px;display:none}
.password-change-message.success{display:block;background:rgba(76,175,80,0.1);color:#4CAF50;border-left:4px solid #4CAF50}
.password-change-message.error{display:block;background:rgba(244,67,54,0.1);color:#f44336;border-left:4px solid #f44336}
.password-change-message.info{display:block;background:rgba(33,150,243,0.1);color:#2196F3;border-left:4px solid #2196F3}
.vip-sidebar{position:absolute;top:calc(25px + 18vh + 10px + 30px + 30px);left:20px;display:flex;flex-direction:column;gap:15px;z-index:20;padding-top:10px;animation:sidebarSlideIn 0.3s ease-out forwards;opacity:0;transform:translateX(-10px)}
.vip-sidebar-btn{width:40px;height:40px;font-size:18px;border:none;border-radius:50%;background-color:rgba(255,255,255,0.2);color:white;cursor:pointer;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(5px);transition:all 0.2s ease;opacity:0;transform:scale(0.8);animation:buttonFadeIn 0.2s ease-out forwards}
.vip-sidebar-btn:active{transform:scale(0.95)}
.vip-sidebar-btn.removing{animation:buttonFadeOut 0.2s ease-out forwards;pointer-events:none}
.vip-sidebar-btn:disabled,.vip-sidebar-btn[disabled],.vip-sidebar-btn.disabled{opacity:0.5!important;cursor:not-allowed!important;pointer-events:auto!important}
.vip-sidebar-btn.enabled{opacity:1!important;cursor:pointer!important;pointer-events:auto}
@keyframes sidebarSlideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@keyframes buttonFadeIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}
@keyframes buttonFadeOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.8)}}
body.screen-sharing-mode #localVideo,body.screen-sharing-mode #cameraSwitchSvg,body.screen-sharing-mode .timer,body.screen-sharing-mode .controls,body.screen-sharing-mode .vip-sidebar,body.screen-sharing-mode .bottom-controls,body.screen-sharing-mode .persistent-notifications,body.screen-sharing-mode .status-notifications{display:none!important;opacity:0!important;visibility:hidden!important}
body.screen-sharing-mode #remoteVideo{width:100%!important;height:100%!important;top:0!important;left:0!important;object-fit:contain!important}
#screenShareRefreshButton{position:fixed!important;bottom:10px!important;left:10px!important;z-index:1000!important;width:35px!important;height:35px!important;border:none!important;border-radius:50%!important;background-color:rgba(255,255,255,0.2)!important;color:white!important;cursor:pointer!important;display:none!important;opacity:0!important;visibility:hidden!important;transition:opacity 0.3s ease,visibility 0.3s ease!important;justify-content:center;align-items:center;backdrop-filter:blur(5px)!important}
body.screen-sharing-mode #screenShareRefreshButton{display:flex!important;opacity:1!important;visibility:visible!important}
#screenShareRefreshButton:active{transform:scale(0.95)!important}
.persistent-notification.recording-active{border-left:4px solid #f44336;background-color:rgba(244,67,54,0.2);animation:pulse-red 1.5s infinite;font-weight:bold}
@keyframes pulse-red{0%{opacity:1;box-shadow:0 0 0 0 rgba(244,67,54,0.4)}50%{opacity:0.8;box-shadow:0 0 0 4px rgba(244,67,54,0.2)}100%{opacity:1;box-shadow:0 0 0 0 rgba(244,67,54,0)}}
.status-notification.status-warning{background-color:rgba(244,67,54,0.3);border-left:4px solid #f44336;font-weight:bold;animation:pulse-warning 1s infinite}
@keyframes pulse-warning{0%{opacity:1}50%{opacity:0.7}100%{opacity:1}}
#recordButton{background-color:rgba(255,255,255,0.2)}
#recordButton.recording{background-color:rgba(244,67,54,0.8);animation:pulse-record-button 1s infinite}
#recordButton.recording-active{animation:pulse-red 1.5s infinite;background-color:rgba(244,67,54,0.3)!important}
#recordButton.disabled,#recordButton:disabled{opacity:0.5;cursor:pointer;pointer-events:auto}
#recordButton.enabled{opacity:1;cursor:pointer;pointer-events:auto}
@keyframes pulse-record-button{0%{box-shadow:0 0 0 0 rgba(244,67,54,0.7)}70%{box-shadow:0 0 0 6px rgba(244,67,54,0)}100%{box-shadow:0 0 0 0 rgba(244,67,54,0)}}
#highQualityCheckbox,#allowMessagesCheckbox{width:18px;height:18px;cursor:pointer;accent-color:#4CAF50}
#highQualityCheckbox+label,#allowMessagesCheckbox+label{cursor:pointer;user-select:none}
#highQualityCheckbox:checked+label,#allowMessagesCheckbox:checked+label{color:#4CAF50}
#vipChatContainer{position:absolute;top:0;left:0;width:100%;height:100%;display:none;flex-direction:column;justify-content:flex-end;pointer-events:none;z-index:15}
#chatMessagesArea{position:absolute;top:80px;left:160px;right:40px;bottom:130px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:6px;pointer-events:auto;box-sizing:border-box}
#chatInputContainer{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);width:min(900px,calc(100% - 50px));display:flex;align-items:center;padding:6px 16px;background:rgba(0,0,0,0.2);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);border-radius:30px;pointer-events:auto;box-sizing:border-box;z-index:16;height:48px;box-shadow:0 4px 12px rgba(0,0,0,0.3)}
#chatInput{flex:1;background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.1);border-radius:30px;color:white;font-size:16px;padding:8px 16px;font-family:inherit;outline:none;margin-right:10px;height:36px;line-height:normal;transition:border-color 0.2s}
#chatInput:focus{border-color:#4CAF50;background:rgba(0,0,0,1)}
#chatInput.vip-chat-input{color:#fefefe;caret-color:#ffffff;font-weight:bold;background:rgba(0,0,0,0.2)}
#chatInput.vip-chat-input::placeholder,#chatInput.vip-chat-input::-webkit-input-placeholder,#chatInput.vip-chat-input::-moz-placeholder,#chatInput.vip-chat-input:-ms-input-placeholder{color:#ffffff;opacity:1}
#chatSendButton{background:#4CAF50;color:white;border:none;border-radius:50%;width:36px;height:36px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0;padding:0;line-height:1;box-shadow:0 2px 8px rgba(76,175,80,0.3)}
#chatSendButton:hover{background:#4CAF50;transform:scale(1.05)}
#chatSendButton:active{transform:scale(0.95)}
.chat-message{max-width:90%;margin-bottom:4px;animation:fadeIn 0.2s ease}
.chat-message.my{align-self:flex-end}
.chat-message.them{align-self:flex-start}
.chat-message-content{padding:2px 3px;border-radius:16px;line-height:1.4;font-size:18px;font-weight:bold;word-break:break-word;backdrop-filter:blur(5px)}
.chat-message.my .chat-message-content{background:rgba(0,0,0,0.5);color:#ffffff;border-radius:16px 16px 4px 16px;border:none}
.chat-message.them .chat-message-content{background:rgba(255,255,255,0.5);color:#000000;border-radius:16px 16px 16px 4px;border:none}
.chat-message-time{font-size:10px;color:rgba(255,255,255,0.6);margin-top:2px;padding-left:6px}
.chat-message.my .chat-message-time{text-align:right}
#chatMessagesArea::-webkit-scrollbar{width:6px}
#chatMessagesArea::-webkit-scrollbar-track{background:rgba(255,255,255,0.1);border-radius:3px}
#chatMessagesArea::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);border-radius:3px}
#chatMessagesArea::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.4)}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.seo-content{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;color:transparent;background:transparent;user-select:none;pointer-events:none;font-size:0;line-height:0}
#vipLoginModal{pointer-events:none}
#vipLoginModal .modal-center-content{pointer-events:auto;max-width:500px;width:90%;background:#1a1a1a;max-height:90vh;display:flex;flex-direction:column}
#vipLoginModal .modal-center-header{flex-shrink:0;position:relative;padding:15px 20px;border-bottom:1px solid #333}
#vipLoginModal .modal-center-title{font-size:24px;margin:0;padding-right:30px;color:#4CAF50}
#vipLoginModal .modal-close-btn{position:absolute;right:15px;top:15px;background:none;border:none;color:white;font-size:28px;cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:opacity 0.2s}
#vipLoginModal .modal-close-btn:hover{opacity:0.8}
#vipLoginModal .modal-center-body{flex:1;overflow-y:auto;padding:20px}
#vipLoginModal .vip-room-name{color:#ffd900;font-size:18px;text-align:center;margin:10px 0 20px 0;word-break:break-word;font-weight:normal}
#vipLoginModal .vip-status-text{color:#4CAF50;font-size:18px;line-height:1.4;padding:10px;text-align:center;min-height:50px;margin-bottom:20px}
#vipLoginModal .vip-room-id-label{color:#ffd900;font-size:16px;text-align:center;margin-bottom:15px}
#vipLoginModal .vip-password-container{width:100%;max-width:400px;margin:0 auto 20px auto}
#vipLoginModal .vip-password-row{display:flex}
#vipLoginModal .vip-password-input{flex:1;padding:12px;background:#333;border:2px solid #444;border-radius:8px 0 0 8px;color:white;font-size:16px;outline:none;transition:border-color 0.3s}
#vipLoginModal .vip-password-input:focus{border-color:#4CAF50;box-shadow:0 0 0 2px rgba(76,175,80,0.2)}
#vipLoginModal .vip-password-button{padding:12px 20px;background:#4CAF50;color:white;border:none;border-radius:0 8px 8px 0;font-size:16px;cursor:pointer;min-width:80px;transition:background-color 0.2s}
#vipLoginModal .vip-password-button:hover:not(:disabled){background:#4CAF50}
#vipLoginModal .vip-password-button:disabled{background:#666;color:#999;cursor:not-allowed}
#vipLoginModal .vip-password-error{color:#f44336;font-size:14px;text-align:center;min-height:30px;margin-top:8px;display:none}
#vipLoginModal .vip-action-button{width:100%;background:#4CAF50;color:white;border:none;border-radius:8px;font-size:16px;cursor:pointer;margin-bottom:10px;height:auto;display:flex;align-items:center;justify-content:center;transition:background-color 0.2s}
#vipLoginModal .vip-action-button:hover{background:#4CAF50}
#vipLoginModal .vip-action-button:last-child{margin-bottom:0}
#vipLoginModal .media-status-message{color:#888;font-size:14px;text-align:center;margin-top:20px}
#vipMessageForm{padding:10px 0}
#vipMessageFrom,#vipMessageText{width:100%;padding:12px;background:#333;border:2px solid #444;border-radius:8px;color:white;font-size:16px;box-sizing:border-box;outline:none;transition:border-color 0.3s;font-family:inherit}
#vipMessageFrom:focus,#vipMessageText:focus{border-color:#4CAF50;box-shadow:0 0 0 2px rgba(76,175,80,0.2)}
#vipMessageText{resize:none;line-height:1.5}
#vipMessageForm .modal-center-buttons.horizontal{display:flex;flex-direction:row;gap:10px;margin-top:20px}
#vipMessageSendBtn:disabled{background:#666;color:#999;cursor:not-allowed}
#vipMessageStatus{min-height:30px;text-align:center;font-size:18px;transition:color 0.3s}
#vipMessageStatus.success{color:#4CAF50}
#vipMessageStatus.error{color:#f44336}
#vipMessageFromCounter,#vipMessageTextCounter{color:#888;font-size:12px;font-family:monospace}
#vipLeaveMessageBtn{background:#4CAF50!important;margin-top:10px}
#vipLeaveMessageBtn:hover{background:#4CAF50!important}
#vipMessageForm .vip-field-label{color:#ffd900;font-size:16px;margin-bottom:8px;text-align:left;display:block}
.vip-field-container{margin-bottom:20px}
.vip-field-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.vip-field-header .vip-field-label{margin-bottom:0}
.extra-buttons{display:flex;gap:15px}
.extra-buttons .control-button{animation:buttonFadeIn 0.3s ease-out forwards}
.base-buttons{display:flex;gap:15px}
.base-control-buttons{display:flex;gap:10px;order:2}
.dynamic-control-buttons{display:flex;gap:10px;order:1}
.dynamic-control-buttons .control-button{animation:buttonSlideInRight 0.3s ease-out forwards;opacity:0;transform:translateX(10px)}
.dynamic-control-buttons .control-button:nth-last-child(1){animation-delay:0.05s}
.dynamic-control-buttons .control-button:nth-last-child(2){animation-delay:0.1s}
.dynamic-control-buttons .control-button:nth-last-child(3){animation-delay:0.15s}
.dynamic-control-buttons .control-button:nth-last-child(4){animation-delay:0.2s}
@keyframes buttonSlideInRight{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
.file-transfer-panel{position:absolute;bottom:130px;left:50%;transform:translateX(-50%);width:min(900px,calc(100% - 50px));display:flex;align-items:center;padding:8px 16px;background:rgba(0,0,0,0.2);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);border-radius:30px;pointer-events:auto;box-sizing:border-box;z-index:16;height:48px;box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.file-transfer-progress{display:flex;align-items:center;gap:6px;width:100%}
.file-transfer-bar-container{flex:1;position:relative;height:36px;background:rgba(0,0,0,0.2);border-radius:18px;overflow:hidden}
.file-transfer-bar{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,rgba(84,254,90,0.01),rgba(53,164,59,0.5));width:0%;transition:width 0.3s ease;border-radius:18px}
.file-transfer-filename-overlay{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:white;text-shadow:0 1px 2px rgba(0,0,0,0.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 16px;pointer-events:none;z-index:1}
.file-transfer-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}
.file-transfer-speed{font-size:12px;color:rgba(255,255,255,1);font-family:monospace;min-width:60px;text-align:right}
.file-transfer-btn{background:#4CAF50;color:white;border:none;border-radius:50%;width:36px;height:36px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0;padding:0;line-height:1;box-shadow:0 2px 8px rgba(76,175,80,0.3)}
.file-transfer-btn:active{transform:scale(0.95)}
.file-transfer-btn:hover{background:rgba(255,255,255,0.35)}
.file-accept-info{text-align:center;margin-bottom:20px}
.file-accept-info p{margin:10px 0}
.file-accept-info strong{color:#4CAF50;word-break:break-all}
.file-cancel-info{text-align:center;margin-bottom:20px}
.file-cancel-info p{margin:10px 0}
.toast-notification{position:fixed;top:80px;right:20px;color:rgb(255,255,255);padding:12px 20px;border-radius:8px;z-index:10001;font-size:16px;font-weight:bold;box-shadow:0 4px 12px rgba(0,0,0,0.3);max-width:350px;word-wrap:break-word;font-family:sans-serif;pointer-events:auto;animation:toastSlideIn 0.3s ease-out}
.toast-notification.info{background:rgba(0,140,255,0.7)}
.toast-notification.success{background:rgba(55,172,59,0.7)}
.toast-notification.warning{background:rgba(255, 152, 0, 0.7);border-left:none;border-radius:8px}
.toast-notification.error{background:rgba(250,17,0,0.7)}
.toast-notification .refresh-symbol{font-size:24px;font-weight:bold;color:#fb1100;display:inline-block}
@keyframes toastSlideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastFadeOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}
.local-video-wrapper{position:absolute;top:20px;left:20px;width:25vw;max-width:180px;height:18vh;max-height:150px;z-index:10;overflow:visible}
#localVideo{width:100%;height:100%;border:2px solid white;border-radius:10px;object-fit:cover;cursor:pointer}
.camera-switch-hint{position:absolute;top:1px;left:1px;width:40px;height:40px;border-radius:50%;background:transparent;border:none;color:rgba(255,255,255,0.5);font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:11;pointer-events:auto;transition:all 0.2s ease;text-shadow:0 1px 2px rgba(0,0,0,0.5)}
.camera-switch-hint:active{transform:scale(0.95);color:rgba(255,255,255,0.8)}
#cameraSwitchSvg{transition:all 3s cubic-bezier(0.4,0,0.2,1);pointer-events:none;z-index:12}
#refreshButton{font-size:46px;font-weight:bold;color:#ff0000;align-items:center;justify-content:center}
.button-text .refresh-highlight{font-size:24px;font-weight:bold;color:#fb1100;display:inline-block}
.help-container{background-color:#1a1a1a;border-radius:15px;padding:14px;margin-top:20px}
h1{color:#4CAF50;text-align:center;margin-bottom:30px;font-size:28px}
h2{color:#4CAF50;margin:25px 0 15px 0;font-size:22px;border-left:4px solid #4CAF50;padding-left:5px}
h3{color:#FF9800;margin:20px 0 10px 0;font-size:22px}
.button-description{background-color:#2a2a2a;padding:5px;border-radius:10px;margin:10px 0}
.button-item{display:flex;align-items:flex-start;gap:5px;margin-bottom:5px;padding:1px;background-color:#2a2a2a;border-radius:12px}
.button-icon{flex-shrink:0;width:50px;text-align:center}
.button-text{flex:1}
.warning{background-color:#332222;border-left:4px solid #f44336;padding:15px;margin:15px 0;border-radius:0 8px 8px 0}
.tip{background-color:#223322;border-left:4px solid #4CAF50;padding:5px;margin:15px 0;border-radius:0 8px 8px 0}
.back-button{display:block;width:100%;padding:15px;background-color:#4CAF50;color:white;border:none;border-radius:10px;font-size:18px;cursor:pointer;margin-top:30px;text-align:center;text-decoration:none}
.back-button:hover{background-color:#4CAF50}
ul{margin:10px 0 10px 20px}
li{margin-bottom:8px}
.modal-reminder-text{color:white;font-size:16px;margin-bottom:25px;line-height:1.4}
.chat-save-dialog-text{margin-bottom:25px;line-height:1.6}
.chat-save-dialog-buttons{flex-direction:column;gap:10px}
.chat-save-dialog-buttons button{width:100%}
.settings-modal-content .modal-center-body{overflow-y:auto;max-height:calc(90vh - 80px)}
.settings-modal-content .modal-center-header{flex-shrink:0;position:sticky;top:0;background:#2a2a2a;z-index:1;border-bottom:1px solid #444}
#noMediaStreamModal .modal-center-buttons.horizontal{display:flex;flex-direction:row;justify-content:center;gap:15px;margin-top:10px}
#noMediaStreamModal .modal-center-body{font-size:15px;color:#ccc;text-align:left}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:sans-serif;background-color:#000;color:white;line-height:1.6;padding:10px;max-width:800px;margin:0 auto}
@media (max-width:400px){.dialpad-digit,#dialpadBackspace,#dialpadOk{width:70px;height:70px;font-size:28px}#dialpadOk.dialpad-digit,#dialpadOk{font-size:20px}}
@media (max-width:350px){.dialpad-digit,#dialpadBackspace,#dialpadOk{width:60px;height:60px;font-size:24px}#dialpadOk.dialpad-digit,#dialpadOk{font-size:18px}}
@media (max-width:768px){.vip-room-name{font-size:48px;margin:30px 0 20px 0}.vip-status-text{font-size:20px;padding:12px;margin-bottom:25px;max-width:90%}.vip-room-id-label{font-size:20px;max-width:90%}.vip-sidebar-btn,.bottom-controls .control-button{width:40px;height:40px;font-size:18px}.camera-switch-hint{width:36px;height:36px;font-size:20px;top:1px;left:1px}#refreshButton{font-size:46px}#chatMessagesArea{top:70px;left:120px;right:30px;bottom:120px;padding:14px}#chatInputContainer{width:min(600px,calc(100% - 30px));bottom:70px;height:46px;padding:5px 14px}#chatInput{font-size:15px;height:34px;padding:6px 14px}#chatSendButton{width:34px;height:34px;font-size:19px}.chat-message-content{font-size:15px;padding:2px 4px}.file-transfer-panel{bottom:120px;width:calc(100% - 30px);padding:6px 12px;height:auto;min-height:44px}.file-transfer-bar-container{height:32px}.file-transfer-filename-overlay{font-size:14px;padding:0 12px;line-height:32px}.file-transfer-speed{font-size:10px;min-width:45px;line-height:1}.file-transfer-btn{width:32px;height:32px;font-size:18px}.toast-notification{top:70px;right:15px;padding:10px 16px;font-size:15px;max-width:300px}.controls{top:15px;right:15px;gap:8px}.base-control-buttons,.dynamic-control-buttons{gap:8px}#screenShareRefreshButton{bottom:10px!important;left:10px!important}#vipLoginModal .modal-center-content{width:95%;max-height:85vh}#vipLoginModal .vip-room-name{font-size:16px;margin:5px 0 15px 0}#vipLoginModal .vip-status-text{font-size:16px;padding:8px;margin-bottom:15px}#vipLoginModal .vip-room-id-label{font-size:14px;margin-bottom:10px}#vipLoginModal .vip-password-input{padding:10px;font-size:14px}#vipLoginModal .vip-password-button{padding:10px 15px;font-size:14px;min-width:70px}#vipLoginModal .vip-action-button{padding:12px;font-size:14px}#vipLoginModal .media-status-message{font-size:12px;margin-top:15px}}
@media (max-width:480px){.vip-room-name{font-size:36px;margin:20px 0 15px 0}.vip-status-text{font-size:18px;padding:10px;margin-bottom:20px}.vip-room-id-label{font-size:18px}.vip-password-input{padding:12px;font-size:14px}.vip-password-button{padding:12px 20px;font-size:14px;min-width:80px}.vip-action-button{padding:15px 8px;font-size:14px;height:75px}.vip-buttons-container{max-width:90%;gap:10px;margin-bottom:30px}.media-status-message{bottom:80px;left:10px;max-width:200px;font-size:12px}.vip-bottom-links{gap:15px}.vip-bottom-link{font-size:12px}.vip-sidebar-btn,.bottom-controls .control-button{width:35px;height:35px;font-size:16px}.dialpad-display{font-size:28px;padding:12px}.dialpad-buttons{gap:8px}.dialpad-cancel{padding:12px;font-size:16px}.modal-center-buttons button,.settings-buttons button,#errorButtons button,.modal-simple-buttons button,.session-buttons button,.install-modal-buttons button,.btn-primary,.btn-secondary,.btn-danger{min-height:40px;padding:10px 20px;font-size:14px;border-radius:6px}.modal-center-buttons,.settings-buttons,#errorButtons,.modal-simple-buttons,.session-buttons,.install-modal-buttons{gap:10px}.settings-modal-content{max-width:350px}.settings-input{padding:10px;font-size:14px}.char-counter{font-size:12px;right:10px}.password-input-container{flex-direction:column;gap:8px}.password-submit-btn{width:100%;height:40px}.password-change-input{width:100%}#vipRoomNameDisplay{font-size:24px!important;margin:20px 0!important}#vipRoomStatusText{font-size:18px!important;padding:10px!important;margin-bottom:20px!important}#vipRoomIdLabel{font-size:12px!important;margin-bottom:10px!important}#vipPasswordInput{padding:12px!important;font-size:14px!important}#vipPasswordButton{padding:12px 20px!important;font-size:14px!important;min-width:80px!important}button[onclick="createNewRoom()"]{padding:12px!important;font-size:14px!important;margin-bottom:30px!important}#mediaStatusMessage{font-size:10px!important;bottom:40px!important;left:10px!important;max-width:200px!important}.bottom-links{gap:15px!important}.bottom-links a{font-size:12px!important}#mediaStatusMessage{bottom:80px!important}.vip-buttons-container{max-width:90%!important;gap:10px!important;margin-bottom:30px!important}.button-item{gap:5px;padding:1px}.button-icon{width:40px}#refreshButton{font-size:32px}#chatMessagesArea{top:60px;left:90px;right:20px;bottom:110px;padding:12px}#chatInputContainer{width:min(500px,calc(100% - 30px));bottom:60px;height:44px;padding:4px 12px}#chatInput{font-size:14px;height:32px;padding:5px 12px;margin-right:8px}#chatSendButton{width:32px;height:32px;font-size:18px}.chat-message-content{font-size:14px;padding:2px 4px}.file-transfer-panel{bottom:110px;padding:5px 10px;min-height:42px}.file-transfer-bar-container{height:30px}.file-transfer-filename-overlay{font-size:12px;padding:0 10px;line-height:30px}.file-transfer-speed{font-size:9px;min-width:45px}.file-transfer-btn{width:30px;height:30px;font-size:16px}.toast-notification{top:60px;right:10px;left:auto;max-width:calc(100% - 20px);padding:10px 14px;font-size:13px;border-radius:6px}.controls{top:10px;right:10px;gap:6px}.base-control-buttons,.dynamic-control-buttons{gap:6px}#screenShareRefreshButton{bottom:8px!important;left:8px!important;width:24px!important;height:24px!important;font-size:13px!important}#noMediaStreamModal .modal-center-body{font-size:14px}#noMediaStreamModal .btn-primary{min-width:100px;padding:10px 20px}#vipLoginModal .modal-center-content{width:98%;max-height:90vh}#vipLoginModal .modal-center-body{padding:15px}#vipLoginModal .vip-room-name{font-size:15px}#vipLoginModal .vip-status-text{font-size:15px;padding:6px}#vipLoginModal .vip-room-id-label{font-size:13px}#vipLoginModal .vip-password-row{flex-direction:row;gap:0}#vipLoginModal .vip-password-input{border-radius:8px 0 0 8px;width:auto;flex:7;padding:10px}#vipLoginModal .vip-password-button{border-radius:0 8px 8px 0;width:auto;flex:3;padding:10px}.modal-center-content{max-width:400px}.modal-center-title{font-size:20px}.modal-center-body{padding:15px;font-size:14px}.blocked-message{font-size:16px}}
@media (max-width:320px){.vip-room-name{font-size:28px}.vip-status-text{font-size:16px}.vip-password-input{padding:10px}.vip-password-button{padding:10px 15px;min-width:70px}.vip-buttons-container{flex-direction:column;gap:8px}.vip-action-button{height:60px}.vip-sidebar-btn,.bottom-controls .control-button{width:30px;height:30px;font-size:14px}.modal-center-content{max-width:300px}.modal-center-title{font-size:18px}.dialpad-display{font-size:24px;padding:10px}.modal-center-buttons button,.settings-buttons button,#errorButtons button,.modal-simple-buttons button,.session-buttons button,.install-modal-buttons button,.btn-primary,.btn-secondary,.btn-danger{min-height:36px;padding:8px 16px;font-size:13px}#vipRoomNameDisplay{font-size:16px!important}#vipRoomStatusText{font-size:16px!important}#vipPasswordInput{padding:10px!important}#vipPasswordButton{padding:10px 15px!important;min-width:70px!important}.bottom-links{flex-direction:column;gap:8px!important}#chatMessagesArea{top:50px;left:70px;right:15px;bottom:100px;padding:8px}#chatInputContainer{width:min(400px,calc(100% - 30px));bottom:50px;height:40px;padding:3px 8px}#chatInput{font-size:13px;height:28px;padding:4px 8px;margin-right:6px}#chatSendButton{width:28px;height:28px;font-size:16px}.chat-message-content{font-size:13px;padding:2px 4px}.file-transfer-panel{bottom:100px;padding:4px 8px;min-height:38px}.file-transfer-bar-container{height:28px}.file-transfer-filename-overlay{font-size:10px;padding:0 8px;line-height:28px}.file-transfer-speed{font-size:8px;min-width:45px}.file-transfer-btn{width:28px;height:28px;font-size:14px}.toast-notification{top:55px;right:8px;left:auto;padding:8px 12px;font-size:11px}#vipLoginModal .vip-room-name{font-size:14px}#vipLoginModal .vip-status-text{font-size:14px}#vipLoginModal .vip-action-button{padding:10px;font-size:13px}#vipLoginModal .vip-password-row{flex-direction:row;gap:0}#vipLoginModal .vip-password-input{border-radius:8px 0 0 8px;width:auto;flex:7}#vipLoginModal .vip-password-button{border-radius:0 8px 8px 0;width:auto;flex:3}}
@media (min-width:768px){#vipRoomNameDisplay{font-size:48px!important;margin:60px 0 40px 0!important}#vipRoomStatusText{font-size:26px!important;max-width:800px!important}button[onclick="createNewRoom()"]{max-width:500px!important;padding:18px!important;font-size:18px!important}}
@media (max-height:700px){.settings-modal-content{max-height:80vh;display:flex;flex-direction:column}.settings-modal-content .modal-center-body{overflow-y:auto;max-height:calc(85vh - 80px);padding-bottom:20px}}
@media (max-height:600px){.settings-modal-content{max-height:90vh}.settings-modal-content .modal-center-body{max-height:calc(90vh - 70px);padding:10px}.settings-field{margin-bottom:15px}.settings-section-title{margin:15px 0 10px 0;font-size:16px}.password-input-container{gap:5px}.password-submit-btn{height:40px;font-size:14px;min-width:70px}}
@media (max-height:500px) and (orientation:landscape){.settings-modal-content{max-height:95vh;width:95%}.settings-modal-content .modal-center-body{max-height:calc(95vh - 60px);padding:8px}.settings-input{padding:8px}.password-change-label{font-size:13px;margin-bottom:4px}.settings-field{margin-bottom:10px}#vipLoginModal .modal-center-content{max-height:95vh}#vipLoginModal .modal-center-body{padding:10px}#vipLoginModal .vip-room-name{margin:0 0 10px 0}#vipLoginModal .vip-status-text{margin-bottom:10px;min-height:40px}#vipLoginModal .vip-password-container{margin-bottom:10px}}
@media (max-width:600px){body{padding:5px}.help-container{padding:10px}h1{font-size:24px}}
.settings-modal-content .modal-center-body::-webkit-scrollbar{width:6px}
.settings-modal-content .modal-center-body::-webkit-scrollbar-track{background:rgba(255,255,255,0.1);border-radius:3px}
.settings-modal-content .modal-center-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);border-radius:3px}
.settings-modal-content .modal-center-body::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.4)}
.vip-welcome-message {
    color: #ffd700;
    font-size: 14px;
    text-align: center;
    margin: 10px 0;
    padding: 8px 12px;
    word-wrap: break-word;
    line-height: 1.4;
}

.vip-welcome-message a {
    color: #ffd700;
    text-decoration: underline;
}

.vip-welcome-message a:hover {
    color: #ffcc00;
}
/* Пульсация локального видео — подсказка о переключении камеры */
.local-video-wrapper.camera-pulse {
    animation: camera-switch-pulse 0.7s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

@keyframes camera-switch-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 150, 255, 0.9);
        border-radius: 10px;
    }
    50% {
        box-shadow: 0 0 0 12px rgba(0, 150, 255, 0.6);
        border-radius: 10px;
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 150, 255, 0);
        border-radius: 10px;
    }
}
.push-subscribe-settings-btn {
    width: 100%;
    padding: 12px 20px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    text-align: center;
}
.push-subscribe-settings-btn:hover {
    background: #45a049;
}
.push-subscribe-settings-btn.unsubscribed {
    background: #4CAF50;
}
.push-subscribe-settings-btn.subscribed {
    background: #f44336;
}
.push-subscribe-settings-btn.subscribed:hover {
    background: #d32f2f;
}
.push-subscribe-status {
    margin-top: 8px;
    font-size: 13px;
    text-align: center;
}
.push-subscribe-status.success {
    color: #4CAF50;
}
.push-subscribe-status.error {
    color: #f44336;
}
.image-view-content {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
}

.image-view-body {
    flex: 1 !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: #000 !important;
    position: relative !important;
}

.image-view-body img {
    position: absolute;
    top: 0;
    left: 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    transform-origin: 0 0;
}

.image-view-body img:active {
    cursor: grabbing;
}

.image-view-buttons {
    padding: 15px 20px !important;
    margin-top: 0 !important;
}