* {
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}
html,body {
margin:0;
padding:0;
width:100%;
height:100%;
min-width: 300px;
overflow:hidden;
position:fixed;
}
body {
background-color:#f0f2f5;
min-height:100vh;
min-height:-webkit-fill-available;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
overflow:hidden;
}
.hidden {
display:none!important;
}
.app-container {
display:flex;
width:100vw;
height:100vh;
min-width: 300px;
height:-webkit-fill-available;
background-color:#fff;
overflow:hidden;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}
.sidebar {
width:25%;
background-color:white;
color:#555555;
display:flex;
flex-direction:column;
min-width:250px;
transition:all 0.3s ease-in-out;
overflow:hidden;
position:relative;
z-index:100;
border-right:1px solid #e0e0e0;
}
.sidebar-header {
padding:20px;
border-bottom:1px solid #e0e0e0;
flex-direction:column;
}
.room-info {
font-size:1.0rem;
color:#454545;
margin-bottom:10px;
font-weight:bold;
}
.user-info {
font-size:1.0rem;
color:#707070;
}
.users-list {
padding:10px;
overflow-y:auto;
flex-grow:1;
}
.user-item::before {
content:"✪ ";
margin-right:5px;
color:#ffd700;
}
.chat-container {
flex-grow:1;
display:flex;
flex-direction:column;
height:100%;
transition:all 0.3s ease-in-out;
}
.chat-header {
padding:5px 10px;
border-bottom:1px solid #e0e0e0;
display:flex;
align-items:center;
flex-shrink:0;
min-height:60px;
}
.header-content {
display:flex;
align-items:center;
gap:15px;
width:100%;
min-width:0;
}
.encryption-input-wrapper {
position:relative;
flex:1 1 auto;
min-width:150px;
max-width:500px;
}
.call-buttons-container {
display:flex;
gap:10px;
flex-shrink:0;
margin-left:auto;
}
.encryption-input-header {
width:100%;
padding-right:40px!important;
padding:11px 14px;
border:none;
border-radius:20px;
outline:none;
font-size:1.0rem;
transition:all 0.23s ease-in-out;
min-width:50px;
outline:1px solid rgb(230,230,230);
background-color:#ededed;
caret-color:#bbbbbb;
color:#bbbbbb;
}
.messages-container {
flex-grow:1;
padding:20px;
overflow-y:auto;
background:linear-gradient(to bottom,#d0d58c,#76aa89);
-webkit-overflow-scrolling:touch;
scroll-behavior:smooth;
scrollbar-width:thin;
scrollbar-color:rgba(0,0,0,0.3) rgba(0,0,0,0.1);
}
.messages-container::-webkit-scrollbar {
width:8px;
}
.messages-container::-webkit-scrollbar-track {
background:rgba(0,0,0,0.1);
border-radius:4px;
}
.messages-container::-webkit-scrollbar-thumb {
background:rgba(0,0,0,0.3);
border-radius:4px;
}
.messages-container::-webkit-scrollbar-thumb:hover {
background:rgba(0,0,0,0.5);
}
.messages-container::-webkit-scrollbar-button {
display:none;
}
.message-input-container {
display:flex;
padding:5px 10px;
background-color:#fff;
border-top:1px solid #e0e0e0;
align-items:center;
flex-shrink:0;
position:relative;
gap:5px;
transition:all 0.23s ease-in-out;
}
#messageInput {
flex-grow:1;
padding:11px 14px;
border:none;
border-radius:20px;
outline:none;
font-size:1.0rem;
transition:all 0.23s ease-in-out;
min-width:50px;
outline:1px solid rgb(230,230,230);
background-color:#ededed;
caret-color:#000;
}
#messageInput::after {
content:'';
position:absolute;
left:15px;
top:50%;
transform:translateY(-50%);
width:2px;
height:20px;
background-color:#2d3e50;
animation:blink 1s infinite;
opacity:0;
pointer-events:none;
}
.message-input-container:not(.has-text) #messageInput::after {
opacity:1;
}
.message-input-container.has-text #messageInput::after,
#messageInput:focus::after {
opacity:0;
}
@keyframes blink {
0%,50%{opacity:1;}
51%,100%{opacity:0;}
}
.message-input-container:not(.has-text) #messageInput::placeholder {
color:transparent;
}
.record-buttons-container {
display:flex;
gap:5px;
transition:opacity 0.23s ease-in-out;
opacity:1;
position:relative;
z-index:1;
}
.send-file-container {
position:relative;
width:45px;
height:45px;
z-index:2;
}
.record-btn {
width:45px;
height:45px;
padding:0;
border:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
z-index:1;
transition:transform 0.23s ease-in-out;
transform:scale(0.7);
}
.record-btn:hover {
transform:scale(0.75);
}
.record-btn:active {
transform:scale(0.7);
}
.file-input-label {
position:absolute;
top:0;
right:0;
display:flex;
align-items:center;
justify-content:center;
z-index:2;
cursor:pointer;
transform:scale(0.7);
transition:all 0.23s ease-in-out;
}
.file-input-label:hover {
transform:scale(0.75);
}
.file-input-label:active {
transform:scale(0.7);
}
#sendMessageBtn {
position:absolute;
top:0;
right:0;
width:45px;
height:45px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
font-size:1.2rem;
z-index:3;
border:none;
cursor:pointer;
transition:all 0.23s ease-in-out;
transform:scale(0.7);
background-color:white;
}
#sendMessageBtn:hover:not(:disabled) {
transform:scale(0.75);
}
#sendMessageBtn:active:not(:disabled) {
transform:scale(0.7);
}
.call-btn,
.sidebar-toggle-btn {
padding:0;
border:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
transition:all 0.23s ease-in-out;
transform:scale(0.9);
background-color:white;
}
.call-btn:hover,
.sidebar-toggle-btn:hover {
transform:scale(0.95);
}
.call-btn:active,
.sidebar-toggle-btn:active {
transform:scale(0.9);
}
.clear-key-btn {
position:absolute;
right:12px;
top:50%;
transform:translateY(-50%);
background:none;
border:none;
font-size:1.2rem;
cursor:pointer;
color:#999;
padding:0;
width:20px;
height:20px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
min-height:auto;
background-color:transparent!important;
box-shadow:none!important;
outline:none!important;
}
.clear-key-btn:hover {
background-color:#f0f0f0!important;
color:#666;
}
.cancel-quote {
background:none;
border:none;
font-size:1.2rem;
cursor:pointer;
color:#999;
padding:0;
width:24px;
height:24px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
transition:all 0.23s ease-in-out;
}
.cancel-quote:hover {
background-color:#f0f0f0;
color:#666;
}
.message-input-container.has-text .record-buttons-container {
opacity:0;
pointer-events:none;
width:0;
overflow:hidden;
}
.message-input-container.has-text .file-input-label {
opacity:0;
pointer-events:none;
}
.message-input-container.has-text #sendMessageBtn {
opacity:1;
pointer-events:auto;
}
.message-input-container:not(.has-text) #sendMessageBtn {
opacity:0;
pointer-events:none;
}
.message-input-container:not(.has-text) .record-buttons-container,
.message-input-container:not(.has-text) .file-input-label {
opacity:1;
pointer-events:auto;
}
.message {
margin-bottom:15px;
max-width:70%;
padding:0px;
border-radius:7.5px;
position:relative;
word-wrap:break-word;
animation:messageAppear 0.3s ease-out;
transform-origin:center top;
}
@keyframes messageAppear {
0%{opacity:0;transform:translateY(10px) scale(0.95);}
100%{opacity:1;transform:translateY(0) scale(1);}
}
.message.my-message {
background-color:#DCF8C6;
margin-left:auto;
border-top-right-radius:0;
}
.message.other-message {
background-color:white;
margin-right:auto;
border-top-left-radius:0;
}
.message-info {
display:flex;
justify-content:space-between;
margin-bottom:5px;
font-size:0.8rem;
padding:5px 6px 0px 10px;
color:#666;
}
.message-sender {
font-weight:bold;
margin-right:10px;
}
.message-time {
color:#999;
}
.message-text {
line-height:1.4;
padding:0px 10px 10px 10px;
}
.message-file {
display:flex;
flex-direction:column;
align-items:center;
padding:10px;
background-color:rgba(255,255,255,0.7);
border-radius:0px;
margin-top:5px;
cursor:pointer;
background-color:transparent!important;
padding:0;
margin-top:5px;
width:100%;
text-align:center;
}
.message-file img,
.message-file video {
max-width:100%;
max-height:200px;
border-radius:0px;
cursor:pointer;
object-fit:contain;
transition:none!important;
transform:none!important;
}
.message.my-message .message-file img,
.message.my-message .message-file video,
.message.other-message .message-file img,
.message.other-message .message-file video {
width:100%;
height:auto;
max-height:none;
border-radius:0px;
margin:0;
padding:0;
}
.message-file:has(img) .file-size,
.message-file:has(video) .file-size {
display:none;
}
.message-file a {
color:#2d3e50;
text-decoration:none;
font-weight:bold;
margin-bottom:5px;
}
.message-file a:hover {
text-decoration:underline;
}
.file-size {
font-size:12px;
color:#bbbbbb;
margin-bottom:5px;
text-align:center;
}
.message-audio {
display:flex;
align-items:center;
padding:10px;
background-color:rgba(255,255,255,0.7);
border-radius:0px 0px 10px 10px;
padding:10px 0px 10px 0px;
margin-top:5px;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
width:100%;
}
.audio-play-btn {
background-color:white;
border:none;
border-radius:50%;
cursor:pointer;
width:40px;
height:40px;
align-items:center;
justify-content:center;
margin-right:10px;
transition:all 0.23s ease-in-out;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto;
background-image: url("../icons/play.svg");
}
.audio-play-btn:hover {
background-color:white;
transform:scale(1.05);
}
.audio-play-btn:active {
transform:scale(0.95);
background-image: url("../icons/pause.svg");
}
.audio-play-btn.playing {
transform:scale(1.2);
background-image: url("../icons/pause.svg");
}

.audio-duration {
font-size:12px;
color:#666;
margin-top:5px;
text-align:center;
width:100%;
}
.system-message {
background-color:#e6e6e6!important;
margin:10px auto;
max-width:80%;
text-align:center;
font-style:italic;
border-radius:10px;
}
.killall-message {
background-color:#ff0000!important;
color:white;
font-weight:bold;
font-size:1.2rem;
text-align:center;
margin:10px auto;
max-width:80%;
padding:20px;
border-radius:10px;
}
.warning-message {
background-color:#ffebee!important;
border:2px solid #f44336!important;
color:#c62828!important;
font-weight:bold;
margin:10px auto;
max-width:80%;
text-align:center;
border-radius:10px;
padding:15px;
animation:pulse-warning 2s infinite;
}
@keyframes pulse-warning {
0%{box-shadow:0 0 0 0 rgba(244,67,54,0.7);}
70%{box-shadow:0 0 0 10px rgba(244,67,54,0);}
100%{box-shadow:0 0 0 0 rgba(244,67,54,0);}
}
.warning-message .message-sender {
color:#c62828!important;
}
.warning-message .message-text {
color:#c62828!important;
font-weight:bold;
}
.message.quoted {
border:2px solid #4CAF50;
border-radius:7.5px;
}
.quote-block {
display:flex;
align-items:flex-start;
background-color:#f0f2f5;
border-left:4px solid #4CAF50;
padding:10px;
}
.quote-content {
flex-grow:1;
margin-right:10px;
}
.quote-username {
font-weight:bold;
font-size:0.9rem;
color:#4CAF50;
margin-bottom:5px;
}
.quote-text {
font-size:0.9rem;
color:#666;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.message-quote {
background-color:#f0f2f5;
border-left:4px solid #4CAF50;
padding:8px 12px;
margin-bottom:8px;
border-radius:4px;
}
.message-quote .quote-username {
font-weight:bold;
font-size:0.9rem;
color:#4CAF50;
margin-bottom:4px;
}
.message-quote .quote-text {
font-size:0.9rem;
color:#666;
}
.encrypted-file-btn {
background-color:#5fbe67;
color:white;
border:none;
border-radius:25px;
padding:12px 20px;
cursor:pointer;
text-align:center;
transition:all 0.23s ease-in-out;
display:block;
margin:4px auto;
font-size:1rem;
min-width:200px;
max-width:100%;
word-wrap:break-word;
white-space:normal;
outline:none;
margin:0px 10px 0px 10px;
box-shadow:none;
}
.encrypted-file-btn:hover {
background-color:#4caa55;
}
.encrypted-file-btn.error {
background-color:#cd5047;
}
.encrypted-file-btn.error:hover {
background-color:#b8463f;
}
.file-info {
padding:10px;
font-size:12px;
}
.message-file,
.message-audio,
.message-file img,
.message-file video,
.message-file a,
.audio-play-btn,
.message-file button,
.message-file a {
border:none!important;
outline:none!important;
box-shadow:none!important;
text-decoration:none!important;
}
.modal {
position:fixed;
top:1%;
left:2%;
width:96%;
height:90%;
background-color:rgba(0,0,0,0.0);
display:flex;
border-radius:10px;
justify-content:center;
align-items:center;
z-index:1000;
}
.modal.hidden {
display:none;
}
.modal-content {
background-color:white;
padding:20px;
border-radius:10px;
max-width:90%;
text-align:center;
z-index:1101!important;
margin-bottom:20%;
box-shadow:0px 0px 20px #38685894;
}
.modal-content h2 {
margin-bottom:20px;
color:#2d3e50;
}
.modal-content input {
width:100%;
padding:12px;
margin-bottom:15px;
border:1px solid #ddd;
border-radius:5px;
font-size:1rem;
}
.modal-content input[type="password"] {
margin-bottom:5px;
}
.modal-content button {
padding:12px 25px;
background-color:#2d3e50;
color:white;
border:none;
border-radius:5px;
cursor:pointer;
font-size:1rem;
border-radius:25px!important;
min-height:45px;
display:flex;
align-items:center;
justify-content:center;
transition:all 0.23s ease-in-out;
outline:none!important;
border:none!important;
}
.modal-content button:hover {
background-color:#3c5065;
}
.image-modal {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.95);
display:flex;
justify-content:center;
align-items:center;
z-index:1100;
opacity:0;
transition:opacity 0.3s ease-in-out;
pointer-events:none;
padding:20px;
box-sizing:border-box;
cursor:pointer;
}
.image-modal.active {
opacity:1;
pointer-events:auto;
}
.image-modal-overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
cursor:pointer;
}
.image-modal-content {
position:relative;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
max-width:100%;
max-height:100%;
z-index:2;
cursor:default;
}
#modalImage {
max-width:100%;
max-height:100%;
width:auto;
height:auto;
object-fit:contain;
border-radius:5px;
box-shadow:0 4px 20px rgba(0,0,0,0.5);
transition:none!important;
transform:none!important;
cursor:default;
}
.image-close-btn {
display:none!important;
}
.video-modal {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.95);
display:flex;
justify-content:center;
align-items:center;
z-index:1100;
opacity:0;
transition:opacity 0.3s ease-in-out;
pointer-events:none;
padding:40px;
box-sizing:border-box;
}
.video-modal.active {
opacity:1;
pointer-events:auto;
}
.video-modal-overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
cursor:pointer;
}
.video-modal-content {
position:relative;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
max-width:100%;
max-height:100%;
z-index:2;
}
#modalVideo {
max-width:100%;
max-height:100%;
width:auto;
height:auto;
border-radius:5px;
box-shadow:0 4px 20px rgba(0,0,0,0.5);
background:black;
cursor:default;
}
.video-close-btn {
position:absolute;
top:20px;
right:20px;
border:none;
border-radius:50%;
width:40px;
height:40px;
cursor:pointer;
z-index:3;
display:flex!important;
align-items:center;
justify-content:center;
transition:all 0.3s ease;
background-image: url("../icons/cancel.svg");
background-color: #bbbbbb;
background-position: center;
}
.video-close-btn:hover {
transform:scale(1.1);
}
.camera-preview {
width:100%;
height:100%;
display:flex;
flex-direction:column;
align-items:center;
position:relative;
}
#cameraPreview {
width:100%;
height:100%;
object-fit:cover;
}
.recording-timer {
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
font-size:1.2rem;
color:#f44336;
font-weight:bold;
background-color:rgba(0,0,0,0.7);
padding:5px 10px;
border-radius:5px;
z-index:10;
}
.call-container {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.8);
z-index:1002;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.video-container {
display:flex;
width:100%;
gap:6px;
}
.video-container video {
width:50%;
height:100%;
object-fit:cover;
}
#localVideo {
transform:scaleX(-1);
}
.call-controls {
margin-top:20px;
}
.recording-indicator {
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background-color:#f44336;
color:white;
padding:20px 30px;
border-radius:10px;
z-index:1005;
display:flex;
align-items:center;
gap:10px;
font-size:1.2rem;
box-shadow:0 4px 6px rgba(0,0,0,0.1);
}
#videoRecordingIndicator {
background-color:#2196F3;
}
.recording-dot {
width:12px;
height:12px;
background-color:white;
border-radius:50%;
animation:pulse 1.5s infinite;
}
@keyframes pulse {
0%{opacity:1;}
50%{opacity:0.5;}
100%{opacity:1;}
}
#availableUsersList {
margin:20px 0;
max-height:200px;
overflow-y:auto;
}
.user-call-btn {
display:block;
width:100%;
padding:10px;
margin-bottom:10px;
background-color:#f0f2f5;
border:1px solid #ddd;
border-radius:5px;
cursor:pointer;
text-align:left;
}
.user-call-btn:hover {
background-color:#e0e0e0;
}
.modal-ok-btn {
display:block;
margin:20px auto 0 auto;
width:200px;
padding:12px 20px;
background-color:#2d3e50;
color:white;
border:none;
border-radius:25px;
cursor:pointer;
font-size:1rem;
text-align:center;
transition:all 0.23s ease-in-out;
}
.modal-ok-btn:hover {
background-color:#3c5065;
transform:scale(1.05);
}
.modal-ok-btn:active {
transform:scale(0.95);
}
.call-end-btn {
width:200px;
padding:12px 20px;
background-color:#f44336;
color:white;
border:none;
border-radius:25px;
cursor:pointer;
font-size:1rem;
text-align:center;
transition:all 0.23s ease-in-out;
margin-top:20px;
}
.call-end-btn:hover {
background-color:#da190b;
transform:scale(1.05);
}
.call-end-btn:active {
transform:scale(0.95);
}
#acceptCallBtn {
background-color:#4CAF50;
color:white;
border:none;
border-radius:25px;
cursor:pointer;
font-size:1rem;
transition:all 0.23s ease-in-out;
width:200px;
padding:12px 20px;
}
#acceptCallBtn:hover {
background-color:#45a049;
transform:scale(1.05);
}
#acceptCallBtn:active {
transform:scale(0.95);
}
#rejectCallBtn {
background-color:#f44336;
color:white;
border:none;
border-radius:25px;
cursor:pointer;
font-size:1rem;
transition:all 0.23s ease-in-out;
width:200px;
padding:12px 20px;
}
#rejectCallBtn:hover {
background-color:#da190b;
transform:scale(1.05);
}
#rejectCallBtn:active {
transform:scale(0.95);
}
.call-buttons {
display:flex;
flex-direction:column;
align-items:center;
gap:15px;
margin-top:20px;
width:100%;
}
#loginModal .modal-content {
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}
#loginModal .modal-content h2 {
width:100%;
text-align:center;
margin-bottom:20px;
}
#loginModal .modal-content input {
width:100%;
margin-bottom:15px;
}
#loginModal #joinChatBtn {
width:200px;
padding:12px 20px;
background-color:#2d3e50;
color:white;
border:none;
border-radius:25px;
cursor:pointer;
font-size:1rem;
transition:all 0.23s ease-in-out;
margin-top:10px;
display:block;
margin-left:auto;
margin-right:auto;
}
#loginModal #joinChatBtn:hover {
background-color:#3c5065;
transform:scale(1.05);
}
#loginModal #joinChatBtn:active {
transform:scale(0.95);
}
#loginModal .error-message {
text-align:center;
width:100%;
margin-top:10px;
}
#messageModal .modal-content {
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
}
#messageModal .modal-content h2 {
width:100%;
text-align:center;
}
#messageModal .modal-content p {
width:100%;
text-align:center;
margin:15px 0;
line-height:1.5;
}
.modal-buttons-container {
display:flex;
flex-direction:column;
align-items:center;
gap:15px;
margin-top:20px;
width:100%;
}
@media (min-aspect-ratio:1/1){
.sidebar{transform:translateX(0);opacity:1;}
.chat-container{width:80%;}
.sidebar-toggle-btn{display:none!important;}
.image-modal{padding:40px;}
}
#hideSidebarBtn {
background-color:#ffffff;
}
@media (max-aspect-ratio:1/1){
.sidebar{position:fixed;left:0;top:0;height:100%;transform:translateX(-100%);opacity:0;max-width:300px;z-index:1002;transition:all 0.3s ease-in-out;}
.sidebar.active{transform:translateX(0);opacity:1;z-index:1002;}
.chat-container{width:100%;}
.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:1001;display:none;}
.sidebar-overlay.active{display:block;}
#showSidebarBtn{display:flex!important;z-index:1000;}
.messages-container{padding-bottom:env(safe-area-inset-bottom);}
.image-modal{padding:20px;}
.video-modal{padding:20px;}
.video-close-btn{width:40px;height:40px;font-size:20px;}
}
@media (max-width:480px){
.modal-content .modal-ok-btn,
.call-end-btn,
#acceptCallBtn,
#rejectCallBtn,
#loginModal #joinChatBtn{width:180px;padding:10px 15px;font-size:0.9rem;}
.image-modal{padding:10px;}
.video-modal{padding:10px;}
.video-close-btn{width:40px;height:40px;font-size:18px;top:5px;right:5px;}
}
::-webkit-scrollbar-button {
display:none;
}
@keyframes imageModalAppear {
from{opacity:0;transform:scale(0.8);}
to{opacity:1;transform:scale(1);}
}
.image-modal.active .image-modal-content,
.video-modal.active .video-modal-content {
animation:imageModalAppear 0.3s ease-in-out;
}
#modalImage[src=""],
#modalImage[alt="Ошибка загрузки изображения"] {
min-width:200px;
min-height:200px;
}
#modalImage[src=""] {
background:#f0f0f0 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Arial" font-size="10" fill="%23666">Загрузка...</text></svg>') no-repeat center;
}
#modalImage[alt="Ошибка загрузки изображения"] {
background:#f0f0f0 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Arial" font-size="10" fill="%23f00">Ошибка загрузки</text></svg>') no-repeat center;
}
#modalVideo[src=""] {
background:#000 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Arial" font-size="10" fill="%23fff">Загрузка видео...</text></svg>') no-repeat center;
min-width:300px;
min-height:200px;
}
#preparingModal {
z-index:1003;
}
#cameraPreviewModal {
z-index:1004;
}
.modal {
z-index:1100!important;
}
.image-close-btn {
position:absolute;
top:20px;
right:20px;
border:none;
border-radius:50%;
width:40px;
height:40px;
cursor:pointer;
z-index:3;
display:flex!important;
align-items:center;
justify-content:center;
transition:all 0.3s ease;
background-image: url("../icons/cancel.svg");
background-color: #bbbbbb;
}
.image-close-btn:hover {
transform:scale(1.1);
background-color: #fff;
}
.message-file img,
.message-file video {
max-width:100%;
border-radius:0px;
cursor:pointer;
object-fit:contain;
transition:none!important;
transform:none!important;
max-height:90vh;
}
.message.my-message .message-file img,
.message.my-message .message-file video,
.message.other-message .message-file img,
.message.other-message .message-file video {
height:auto;
border-radius:0px 0px 0px 0px;
margin:0px;
padding:0px;
text-align:left;
max-height:80%;
}
.message-file.media-large img,
.message-file.media-large video {
max-height:80%!important;
width:auto!important;
max-width:100%!important;
object-fit:contain;
}
.message-reactions {
display:flex;
flex-wrap:wrap;
gap:4px;
align-items:center;
min-height:32px;
margin-left:4px;
padding-bottom:6px;
padding-top:8px;
}
.message-reaction {
display:flex;
align-items:center;
background:rgba(255,255,255,0.9);
border-radius:12px;
padding:2px 6px;
font-size:12px;
line-height:1;
animation:reactionAppear 0.2s ease-out;
}
@keyframes reactionAppear {
from{opacity:0;transform:scale(0.8);}
to{opacity:1;transform:scale(1);}
}
.reaction-btn {
position:absolute;
bottom:3px;
right:3px;
width:22px;
height:22px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
opacity:0;
transition:all 0.2s ease;
z-index:10;
font-size:20px;
}
.message:hover .reaction-btn {
opacity:1;
}
.reaction-btn:hover {
background:rgba(255,205,113,0.5);
}
.message-file, .message-audio {
position:relative;
}
.message-file .reaction-btn,
.message-audio .reaction-btn {
opacity:0.7;
}
.message-file:hover .reaction-btn,
.message-audio:hover .reaction-btn {
opacity:1;
}
.reaction-picker {
position:fixed;
background:white;
border:1px solid #e0e0e0;
border-radius:8px;
box-shadow:0 4px 12px rgba(0,0,0,0.15);
z-index:10000;
padding:8px;
animation:pickerAppear 0.2s ease-out;
}
@keyframes pickerAppear {
from{opacity:0;transform:translateY(10px) scale(0.95);}
to{opacity:1;transform:translateY(0) scale(1);}
}
.reaction-picker-header {
font-size:12px;
color:#666;
margin-bottom:8px;
text-align:center;
padding-bottom:4px;
border-bottom:1px solid #f0f0f0;
}
.reaction-options {
display:flex;
flex-direction:column;
gap:4px;
}
.reaction-option {
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
cursor:pointer;
border-radius:4px;
transition:all 0.2s ease;
}
.reaction-option:hover {
background:#f0f0f0;
transform:scale(1.1);
}
@media (max-width:768px){
.reaction-btn{opacity:0.7!important;width:28px;height:28px;font-size:23px;}
.reaction-picker{padding:12px;}
.reaction-option{width:36px;height:36px;font-size:18px;}
}
.users-popup {
position:fixed;
background:white;
border:1px solid #e0e0e0;
border-radius:8px;
box-shadow:0 4px 12px rgba(0,0,0,0.15);
z-index:10001;
padding:10px;
max-width:200px;
max-height:300px;
overflow-y:auto;
animation:popupAppear 0.2s ease-out;
}
@keyframes popupAppear {
from{opacity:0;transform:translateY(10px) scale(0.95);}
to{opacity:1;transform:translateY(0) scale(1);}
}
.users-popup-header {
font-size:12px;
color:#666;
margin-bottom:8px;
text-align:center;
padding-bottom:4px;
border-bottom:1px solid #f0f0f0;
font-weight:bold;
}
.users-popup-content {
display:flex;
flex-direction:column;
gap:4px;
}
.users-popup .user-item {
background:#ffffff;
border-radius:4px;
font-size:12px;
color:#333;
}
.message-reaction {
display:flex;
align-items:center;
background:rgba(255,255,255,0.9);
border-radius:12px;
padding:2px 6px;
font-size:12px;
line-height:1;
animation:reactionAppear 0.2s ease-out;
cursor:pointer;
transition:all 0.2s ease;
}
.message-reaction:hover {
background:rgba(245,245,245,0.95);
transform:scale(1.05);
}
@media (max-width:768px){
.users-popup{max-width:180px;max-height:250px;padding:10px;}
.users-popup .user-item{font-size:13px;}
.message-reaction{padding:4px 8px;font-size:13px;}
}
.reaction-picker,
.users-popup {
transition:opacity 0.2s ease,transform 0.2s ease;
}
.reaction-picker.hidden,
.users-popup.hidden {
opacity:0;
transform:translateY(10px) scale(0.95);
pointer-events:none;
}
.file-input-label {
display:inline-block;
cursor:pointer;
}
.file-icon{
width:40px;
height:40px;
-webkit-touch-callout:none;
-webkit-user-select:none;
user-select:none;
}
.record-btn{
width:45px;
height:45px;
}
.message-time-container {
display:flex;
align-items:center;
gap:8px;
}
.message-delete-btn {
width:20px;
height:20px;
border:none;
border-radius:50%;
color:white;
cursor:pointer;
display:flex;
justify-content:center;
opacity:0;
transition:all 0.2s ease;
flex-shrink:0;
}
.message:hover .message-delete-btn {
opacity:0.7;
}
.message-delete-btn:hover {
opacity:1!important;
background-color:#cc0000;
}
@media (max-width:768px){
.message-delete-btn{opacity:0.5;width:20px;height:20px;}
}
.modal-buttons-container {
display:flex;
gap:10px;
justify-content:center;
margin-top:20px;
}
.modal-buttons-container .modal-ok-btn {
min-width:120px;
margin:0;
}
.file-upload-indicator {
display:flex;
align-items:center;
background-color:#f0f2f5;
padding:10px;
border-radius:0px;
min-height:50px;
position:relative;
overflow:hidden;
}
.upload-progress-bar {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:linear-gradient(90deg,transparent,rgba(0,141,160,0.5),transparent);
background-size:200% 100%;
animation:loading 3.5s infinite;
border-radius:0px;
}
@keyframes loading {
0%{background-position:-200% 0;}
100%{background-position:200% 0;}
}
.upload-text {
flex-grow:1;
margin-right:10px;
text-align:center;
z-index:1;
color:#6e6e6e
}
.cancel-upload {
background:none;
border:none;
font-size:1.2rem;
cursor:pointer;
color:#999;
padding:0;
width:24px;
height:24px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
transition:all 0.23s ease-in-out;
z-index:1;
}
.cancel-upload:hover {
background-color:#f0f0f0;
color:#666;
}
.file-upload-indicator.error {
background-color:#ffebee;
border-left-color:#f44336;
color:#c62828;
}
.file-upload-indicator.error .upload-progress-bar {
display:none;
}


.language-selector-input {
width:100%;
padding:12px;
margin-bottom:15px;
border:1px solid #ddd;
border-radius:5px;
font-size:1rem;
background-color:#fff;
color:#333;
cursor:pointer;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
background-image:url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
background-repeat:no-repeat;
background-position:right 10px center;
background-size:16px;
padding-right:30px;
}
.language-selector-input:focus {
outline:none;
border-color:#2d3e50;
}


.message-link {
    color: #0066cc;
    text-decoration: none;
    word-break: break-all;
    border-bottom: 1px dotted #0066cc;
    transition: all 0.2s ease;
}

.message-link:hover {
    text-decoration: underline;
    text-decoration-color: #0066cc;
    border-bottom-color: transparent;
}


.message-link.email {
    color: #009688;
    border-bottom-color: #009688;
}

.message-link.email:hover {
    color: #00796b;
    text-decoration-color: #009688;
}


.message-link.phone {
    color: #3f51b5;
    border-bottom-color: #3f51b5;
}

.message-link.phone:hover {
    color: #303f9f;
    text-decoration-color: #3f51b5;
}


.system-message .message-link,
.killall-message .message-link,
.warning-message .message-link {
    color: #666;
    border-bottom-color: #666;
}

.system-message .message-link:hover,
.killall-message .message-link:hover,
.warning-message .message-link:hover {
    color: #333;
    text-decoration-color: #666;
}


.message-text {
    word-wrap: break-word;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    line-height: 1.5;
}

.message-text a {
    word-break: break-all;
}


.file-download-link {
    color: #4a6fa5;
    text-decoration: none;
    display: inline-block;
    padding: 2px 4px;
    border-radius: 3px;
    background-color: rgba(74, 111, 165, 0.1);
}

.file-download-link:hover {
    background-color: rgba(74, 111, 165, 0.2);
    text-decoration: underline;
}

.file-info, .file-download-link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
}

.file-download-link {
    cursor: pointer;
    text-decoration: none;
    color: #007bff;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.file-download-link:hover {
    background-color: rgba(0, 123, 255, 0.1);
    text-decoration: underline;
}


@media (max-width: 768px) {
    .file-info, .file-download-link {
        max-width: calc(100vw - 100px);
        font-size: 14px;
    }

    .message-file .file-size {
        font-size: 12px;
        opacity: 0.8;
    }
}


.file-download-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: #007bff;
    background-color: rgba(0, 123, 255, 0.08);
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 123, 255, 0.2);
    font-size: 14px;
}

.file-download-link:hover {
    background-color: rgba(0, 123, 255, 0.15);
    border-color: rgba(0, 123, 255, 0.3);
    text-decoration: none;
    color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.2);
}

.file-download-link:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 123, 255, 0.2);
}


.file-download-link.unsupported-image {
    border-color: rgba(255, 193, 7, 0.3);
    background-color: rgba(255, 193, 7, 0.08);
}

.file-download-link.unsupported-image:hover {
    background-color: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.4);
}


.file-icon-emoji {
    font-size: 16px;
    line-height: 1;
}


.unsupported-format-hint {
    font-size: 11px;
    color: #888;
    font-style: italic;
    margin-top: 2px;
}


.video-error-container,
.image-error-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-align: center;
    box-sizing: border-box;
    padding: 20px;
}

.video-error-container {
    background: #000;
    color: #fff;
}

.image-error-container {
    background: #f4f4f4;
    color: #666;
}

.video-error-container div,
.image-error-container div {
    margin-bottom: 8px;
}

.video-error-container div:last-child,
.image-error-container div:last-child {
    margin-bottom: 0;
}


video::after {
    content: attr(data-error);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 14px;
}