/* Inline CSS for detached window */
 #newMainPage #nmpca-chatHeader {
     padding: 15px 20px;
     border-bottom: 1px solid #2A3844;
     display: flex;
     height: 48px;
     justify-content: space-between;
     align-items: center;
 }

 #newMainPage #p {
     margin: 0;
 }

 #newMainPage #chatTitle {
     font-size: 16px;
     font-weight: 500;
     color: #333;
 }

 #newMainPage #chatControls {
     display: flex;
     gap: 10px;
 }

 #newMainPage .chat-btn {
     background: none;
     border: none;
     color: #666;
     cursor: pointer;
     padding: 5px;
     border-radius: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 #newMainPage .chat-btn:hover {
     background: #e9ecef;
 }

 #newMainPage #chatMessages {
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
     padding: 10px;
     background: #fff;
     scroll-behavior: smooth;
     max-height: calc(100vh - 128px);
 }

 #newMainPage #chatMessages::-webkit-scrollbar {
     width: 8px;
 }

 #newMainPage #chatMessages::-webkit-scrollbar-track {
     background: #f1f1f1;
 }

 #newMainPage #chatMessages::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 4px;
 }

 #newMainPage #chatInput {
     padding: 15px;
     border-top: 1px solid #EAECED;
     background: #FEFEFE;
     height: 80px;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
     gap: 20px;
 }

 #newMainPage #attachFileBtn {
     cursor: pointer;
     margin-left: 12px;
 }

 #newMainPage #attachFileBtn:hover {
     background-color: rgba(219, 245, 255, 1);
     box-shadow: -4px -2px 0px 8px rgba(219, 245, 255, 1);
     border-radius: 20px;
 }

 #newMainPage #attachFileBtn:hover svg path {
     fill: rgba(2, 115, 156, 1);
 }

 #newMainPage #inputContainer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 5px;
     min-height: 40px;
     height: 40px;
     width: 90%;
     flex: 1;
     padding: 8px 8px 8px 16px;
     border: 1px solid #9FA6AC;
     border-radius: 10px;
     height: 40px;
     transition: height 0.2s ease;
 }

 #newMainPage #messageInput {
     background: transparent;
     border: none;
     font-family: 'Inter', sans-serif;
     font-size: 14px;
     width: 100%;
     min-height: 20px;
     height: 20px;
     max-height: 120px;
     resize: none;
     overflow-y: auto;
     line-height: 1.4;
 }

 #newMainPage #messageInput:focus {
     outline: none;
 }

 #newMainPage #sendButton {
     border: none;
     cursor: pointer;
 }

 #newMainPage #sendButton:disabled {
     background: #ccc;
     cursor: not-allowed;
 }

 #newMainPage #sendButton:hover {
     background-color: rgba(219, 245, 255, 1);
     box-shadow: -2px -2px 0px 8px rgba(219, 245, 255, 1);
     border-radius: 20px;
 }

 #newMainPage #sendButton:hover svg path {
     fill: rgba(2, 115, 156, 1);
 }

 #newMainPage .status-message {
     text-align: center;
     color: #666;
     padding: 20px;
     font-style: italic;
 }

 /* Messages CSS - simplified version */
 #newMainPage #chatMessages {
     display: flex;
     flex-direction: column;
 }

 #newMainPage .msg {
     margin-bottom: 10px;
     display: flex;
     flex-direction: column;
     width: fit-content;
     max-width: 90%;
     clear: both;
     position: relative;
 }

 /* Messages from other users (left) */
 #newMainPage .msg:not(.own) {
     align-self: flex-start;
     margin-left: 24px;
     margin-right: auto;
 }

 /* Messages from own user (right) */
 #newMainPage .msg.own {
     align-self: flex-end;
     margin-left: auto;
     margin-right: 24px;
 }

 #newMainPage .bubble {
     padding: 10px 14px 8px 14px;
     border-radius: 20px;
     max-width: 100%;
     min-height: 63px;
     word-wrap: break-word;
     position: relative;
     display: flex;
     flex-direction: column;
 }

 #newMainPage .bubble>* {
     display: block;
     width: 100%;
 }

 /* Message bubble from other users */
 #newMainPage .msg:not(.own) .bubble {
     background: #2E3E4B;
     color: #FEFEFE;
 }

 /* Message bubble from own user */
 #newMainPage .msg.own .bubble {
     background: #1A3975;
     color: #FEFEFE;
 }

 /* Grouping of consecutive messages from same user */
 #newMainPage .msg.grouped-with-prev {
     margin-top: 2px !important;
     margin-bottom: 2px !important;
 }

 #newMainPage .msg.grouped-with-next {
     margin-bottom: 2px;
 }

 /* For structure with .bubble */
 #newMainPage .msg:not(.own).grouped-with-next .bubble,
 #newMainPage .msg:not(.own).grouped-with-next .bubbleLeft {
     border-bottom-left-radius: 0px;
     margin-bottom: 0px;
 }

 #newMainPage .msg:not(.own).grouped-with-prev .bubble,
 #newMainPage .msg:not(.own).grouped-with-prev .bubbleLeft {
     border-top-left-radius: 0px;
     margin-top: 0px;
 }

 #newMainPage .msg:not(.own).grouped-with-prev.grouped-with-next .bubble,
 #newMainPage .msg:not(.own).grouped-with-prev.grouped-with-next .bubbleLeft {
     border-top-left-radius: 0px;
     border-bottom-left-radius: 0px;
 }

 /* Own messages (right side) */
 #newMainPage .msg.own.grouped-with-next .bubble,
 #newMainPage .msg.own.grouped-with-next .bubbleRight {
     border-bottom-right-radius: 0px;
     margin-bottom: 0px;
 }

 #newMainPage .msg.own.grouped-with-prev .bubble,
 #newMainPage .msg.own.grouped-with-prev .bubbleRight {
     border-top-right-radius: 0px;
     margin-top: 0px;
 }

 #newMainPage .msg.own.grouped-with-prev.grouped-with-next .bubble,
 #newMainPage .msg.own.grouped-with-prev.grouped-with-next .bubbleRight {
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px;
 }

 /* Hide username in own messages */
 #newMainPage .msg.own .msgUser {
     display: none;
 }

 #newMainPage .msgTime {
     font-size: 11px;
     position: absolute;
     bottom: 8px;
     right: 8px;
     margin-top: 2px;
     white-space: nowrap;
     color: #FEFEFE;
 }

 /* Greater spacing for messages from other users (left side) */
 #newMainPage .msg:not(.own) .msgTime {
     right: 16px;
 }

 /* File attachment modal */
 #newMainPage #attachModal {
     display: none;
     position: fixed;
     z-index: 1000;
     left: 5px;
     bottom: 35px;
 }

 #newMainPage #attachModal.show {
     display: block;
 }

 #newMainPage .modal-content {
     background-color: #fff;
     margin: 15% auto;
     padding: 0;
     border-radius: 12px;
     width: 300px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
     animation: modalFadeIn 0.3s ease-out;
 }

 @keyframes modalFadeIn {
     from {
         opacity: 0;
         transform: scale(0.9);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 #newMainPage .modal-header {
     padding: 20px 20px 10px 20px;
     border-bottom: 1px solid #EAECED;
 }

 #newMainPage .modal-title {
     font-size: 18px;
     font-weight: 600;
     color: #2E3E4B;
     margin: 0;
 }

 #newMainPage #newMainPage .modal-body {
     padding: 0;
 }

 #newMainPage #newMainPage .attach-option {
     display: flex;
     align-items: center;
     padding: 16px 20px;
     cursor: pointer;
     border: none;
     background: none;
     width: 100%;
     text-align: left;
     transition: background-color 0.2s ease;
 }

 #newMainPage .attach-option:hover {
     background-color: #F8F9FA;
 }

 #newMainPage .attach-option:first-child {
     border-top: none;
 }

 #newMainPage .attach-option:last-child {
     border-bottom-left-radius: 12px;
     border-bottom-right-radius: 12px;
 }

 #newMainPage .attach-icon {
     width: 24px;
     height: 24px;
     margin-right: 16px;
     flex-shrink: 0;
 }

 #newMainPage .attach-text {
     flex: 1;
 }

 #newMainPage .attach-title {
     font-size: 14px;
     font-weight: 500;
     color: #2E3E4B;
     margin: 0 0 2px 0;
 }

 #newMainPage .attach-subtitle {
     font-size: 12px;
     color: #58656F;
     margin: 0;
 }

 #newMainPage #emoticonPanel {
     display: none;
     position: absolute;
     bottom: 80px;
     right: 15px;
     width: 465px;
     height: 468px;
     background: #fff;
     border: 1px solid #EAECED;
     border-radius: 12px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
     z-index: 1000;
     animation: emoticonFadeIn 0.3s ease-out;
 }

 @keyframes emoticonFadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 #newMainPage #emoticonPanel.show {
     display: block;
 }

 #newMainPage .emoticon-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 8px 15px;
     border-bottom: 1px solid #EAECED;
     background: #FEFEFE;
     border-radius: 12px 12px 0 0;
     height: 50px;
 }

 #newMainPage .emoticon-categories {
     display: flex;
     gap: 8px;
     flex: 1;
     overflow-x: auto;
 }

 #newMainPage .emoticon-categories::-webkit-scrollbar {
     height: 4px;
 }

 #newMainPage .emoticon-categories::-webkit-scrollbar-track {
     background: transparent;
 }

 #newMainPage .emoticon-categories::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 2px;
 }

 #newMainPage .category-btn {
     background: none;
     border: none;
     padding: 6px 8px;
     border-radius: 6px;
     cursor: pointer;
     font-size: 18px;
     line-height: 1;
     transition: background-color 0.2s ease;
     flex-shrink: 0;
     min-width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 #newMainPage .category-btn:hover {
     background-color: #F0F0F0;
 }

 #newMainPage .category-btn.active {
     background-color: #EAECED;
     border-radius: 30px;
     color: #2E3E4B;
 }

 #newMainPage .emoticon-body {
     padding: 10px;
     height: calc(100% - 50px);
     overflow-y: auto;
     display: grid;
     grid-template-columns: repeat(8, 1fr);
     gap: 8px;
     align-content: start;
 }

 #newMainPage .emoticon-item {
     font-size: 30px;
     text-align: center;
     cursor: pointer;
     border-radius: 6px;
     transition: background-color 0.2s ease;
     user-select: none;
 }

 #newMainPage .emoticon-item:hover {
     background-color: #F8F9FA;
 }

 #newMainPage .emoticon-item:active {
     background-color: #EAECED;
 }

 #newMainPage #reactions-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 24px;
     height: 24px;
     flex-shrink: 0;
     cursor: pointer;
     transition: background-color 0.2s ease;
     border-radius: 4px;
     padding: 2px;
     transform: scale(1.35);
 }

 #newMainPage #reactions-btn:hover {
     background-color: rgba(219, 245, 255, 1);
     box-shadow: 0px 0px 0px 2px rgba(219, 245, 255, 1);
     border-radius: 20px;
 }

 #newMainPage #reactions-btn.active {
     background-color: rgba(0, 0, 0, 0.15);
 }

 #newMainPage #reactions-btn svg {
     width: 24px;
     height: 24px;
     display: block;
 }

 #newMainPage #reactions-btn:hover svg path {
     fill: rgba(2, 115, 156, 1);
 }

 #newMainPage .date-separator {
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 20px 0;
     position: relative;
 }

 #newMainPage .date-separator-text {
     background: #FEFEFE;
     color: #2E3E4B;
     padding: 6px 16px;
     border-radius: 8px;
     font-size: 14px;
     font-weight: 500;
     margin: 0 12px;
     border: 1px solid #E1E8ED;
     white-space: nowrap;
     box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
 }

 #newMainPage .scroll-to-bottom-btn {
     position: absolute;
     bottom: 90px;
     right: 20px;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: #FEFEFE;
     border: none;
     color: #2E3E4B;
     cursor: pointer;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
     transition: all 0.2s ease;
 }

 #newMainPage .scroll-to-bottom-btn:hover {
     transform: scale(1.1);
 }

 #newMainPage .scroll-to-bottom-btn svg {
     width: 20px;
     height: 20px;
 }