:root{--background-color:#fff;--text-color:#333;--primary-color:#007bff;--secondary-background:#f0f2f5;--border-color:#ddd;--card-background:#fff;--input-background:#fff;--input-border:#ccc;--button-background:#007bff;--button-text:#fff;--hover-background:#e0e2e5;--post-background:#f9f9f9;--post-border:#eee;--message-received-background:#fff;--message-sent-background:#dcf8c6;--message-form-background:#f0f2f5;--button-secondary-background:#e9ecef;--button-secondary-text:#495057;--button-secondary-background-hover:#dee2e6}body.dark-mode{--background-color:#1a202c;--text-color:#e2e8f0;--primary-color:#63b3ed;--secondary-background:#2d3748;--border-color:#4a5568;--card-background:#2d3748;--input-background:#4a5568;--input-border:#636b7a;--button-background:#63b3ed;--button-text:#1a202c;--hover-background:#4a5568;--post-background:#2d3748;--post-border:#4a5568;--message-received-background:#4a5568;--message-sent-background:#63b3ed;--message-form-background:#2d3748;--button-secondary-background:#4a5568;--button-secondary-text:#e2e8f0;--button-secondary-background-hover:#5a6268}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;background-color:var(--background-color);color:#333;color:var(--text-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0;transition:background-color .3s ease,color .3s ease}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}input[type=email],input[type=password],input[type=text],textarea{background-color:#fff;background-color:var(--input-background);border:1px solid #ccc;border:1px solid var(--input-border);border-radius:8px;box-sizing:border-box;color:#333;color:var(--text-color);font-size:1em;padding:12px 15px;transition:border-color .3s ease,box-shadow .3s ease}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus,textarea:focus{border-color:#007bff;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(var(--primary-color-rgb),.2);outline:none}.signin-container{align-items:center;background-color:var(--background-color);display:flex;justify-content:center;min-height:100vh}.signin-card{background-color:var(--card-background);border-radius:10px;box-shadow:0 4px 15px #0000001a;color:var(--text-color);padding:40px;text-align:center}.signin-card h1{color:var(--primary-color);margin-bottom:30px}.profile-image,.profile-image-skeleton{background-color:#ccc;border-radius:50%;height:40px;object-fit:cover;width:40px}.profile-image-skeleton{display:inline-block}.shimmer{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%}.post .post-content p{margin:0;text-align:left;white-space:pre-wrap;word-break:break-word}.post{cursor:pointer}.skeleton{align-items:flex-start;background-color:var(--post-background);border:1px solid var(--post-border);border-radius:8px;display:flex;margin-bottom:8px;padding:10px}.skeleton-avatar{background-color:var(--hover-background);border-radius:50%;flex-shrink:0;height:28px;margin-right:10px;width:28px}.skeleton-content{flex-grow:1}.skeleton-line{background-color:var(--hover-background);border-radius:4px;height:14px;margin-bottom:6px}.skeleton-line.short{width:60%}.skeleton-line.long{width:90%}.skeleton-line:last-child{margin-bottom:0}.post-list{display:flex;flex-direction:column;gap:10px}.no-posts-message{color:#888;padding:20px;text-align:center}.tab-bar{display:flex;justify-content:center;margin-bottom:20px}.tab-button{background:none;border:none;border-radius:20px;color:#8e8e8e;cursor:pointer;font-size:16px;padding:10px 20px;transition:background-color .3s,color .3s}.tab-button.active{background-color:#efefef;color:#262626;font-weight:700}.chatter-container{display:flex;flex-direction:column}.post-form{margin-bottom:20px}.image-upload-button{background-color:var(--secondary-button-background);border:none;justify-content:center;padding:8px 12px;transition:background-color .2s ease-in-out}.image-upload-button:hover{background-color:var(--secondary-button-hover-background)}.image-upload-button img{filter:var(--icon-filter);height:24px;width:24px}.image-preview-container{background-color:var(--image-preview-background);max-height:200px}.image-preview{max-height:200px;max-width:100%}.remove-image-button{background-color:#0009}.timelines-container{align-items:center;display:flex;flex-direction:column;width:100%}.timeline-column{width:100%}.timeline-wrapper{display:none;width:100%}.timeline-wrapper.active{display:block}@media (max-width:768px){.timelines-container{flex-direction:column}.timeline-column{width:100%}}.create-profile-container{background-color:var(--background-color-secondary);border-radius:10px;box-shadow:0 4px 15px #0000001a;color:var(--text-color);margin:80px auto;max-width:400px;padding:30px;text-align:center}.create-profile-container h1{color:var(--primary-color);font-size:2em;margin-bottom:30px}.create-profile-form{display:flex;flex-direction:column;gap:20px}.create-profile-form input[type=text]{width:100%}.create-profile-form button{align-items:center;background-color:var(--primary-color);border:none;border-radius:5px;color:#fff;cursor:pointer;display:flex;font-size:1em;gap:8px;justify-content:center;padding:12px 25px;transition:background-color .3s ease,transform .2s ease}.create-profile-form button:hover{background-color:var(--primary-color-dark);transform:translateY(-2px)}@-webkit-keyframes marching-ants{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:20px 0,-20px 100%,0 -20px,100% 20px}}@keyframes marching-ants{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:20px 0,-20px 100%,0 -20px,100% 20px}}:root{--rc-drag-handle-size:12px;--rc-drag-handle-mobile-size:24px;--rc-drag-handle-bg-colour:#0003;--rc-drag-bar-size:6px;--rc-border-color:#ffffffb3;--rc-focus-color:#08f}.ReactCrop{cursor:crosshair;display:inline-block;max-width:100%;position:relative}.ReactCrop *,.ReactCrop :after,.ReactCrop :before{-webkit-box-sizing:border-box;box-sizing:border-box}.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}.ReactCrop__child-wrapper{max-height:inherit;overflow:hidden}.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{display:block;max-height:inherit;max-width:100%}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{-ms-touch-action:none;touch-action:none}.ReactCrop__crop-mask{bottom:0;height:calc(100% + .5px);left:0;pointer-events:none;position:absolute;right:0;top:0;width:calc(100% + .5px)}.ReactCrop__crop-selection{cursor:move;left:0;position:absolute;top:0;-webkit-transform:translateZ(0);transform:translateZ(0)}.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%}.ReactCrop--circular-crop .ReactCrop__crop-selection:after{border:1px solid #ffffffb3;border:1px solid var(--rc-border-color);bottom:-1px;content:"";left:-1px;opacity:.3;pointer-events:none;position:absolute;right:-1px;top:-1px}.ReactCrop--no-animate .ReactCrop__crop-selection{outline:1px dashed #fff}.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection){-webkit-animation:marching-ants 1s;animation:marching-ants 1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-timing-function:linear;animation-timing-function:linear;background-image:-webkit-gradient(linear,left top,right top,color-stop(50%,#fff),color-stop(50%,#444)),-webkit-gradient(linear,left top,right top,color-stop(50%,#fff),color-stop(50%,#444)),-webkit-gradient(linear,left top,left bottom,color-stop(50%,#fff),color-stop(50%,#444)),-webkit-gradient(linear,left top,left bottom,color-stop(50%,#fff),color-stop(50%,#444));background-image:linear-gradient(90deg,#fff 50%,#444 0),linear-gradient(90deg,#fff 50%,#444 0),linear-gradient(180deg,#fff 50%,#444 0),linear-gradient(180deg,#fff 50%,#444 0);background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;background-size:10px 1px,10px 1px,1px 10px,1px 10px;color:#fff}.ReactCrop__crop-selection:focus{outline:2px solid #08f;outline:2px solid var(--rc-focus-color);outline-offset:-1px}.ReactCrop--invisible-crop .ReactCrop__crop-mask,.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}.ReactCrop__rule-of-thirds-hz:after,.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-vt:before{background-color:#fff6;content:"";display:block;position:absolute}.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-vt:before{height:100%;width:1px}.ReactCrop__rule-of-thirds-vt:before{left:33.3333333333%}.ReactCrop__rule-of-thirds-vt:after{left:66.6666666667%}.ReactCrop__rule-of-thirds-hz:after,.ReactCrop__rule-of-thirds-hz:before{height:1px;width:100%}.ReactCrop__rule-of-thirds-hz:before{top:33.3333333333%}.ReactCrop__rule-of-thirds-hz:after{top:66.6666666667%}.ReactCrop__drag-handle{background-color:#0003;background-color:var(--rc-drag-handle-bg-colour);border:1px solid #ffffffb3;border:1px solid var(--rc-border-color);height:12px;height:var(--rc-drag-handle-size);position:absolute;width:12px;width:var(--rc-drag-handle-size)}.ReactCrop__drag-handle:focus{background:#08f;background:var(--rc-focus-color)}.ReactCrop .ord-nw{cursor:nw-resize;left:0}.ReactCrop .ord-n,.ReactCrop .ord-nw{top:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.ReactCrop .ord-n{cursor:n-resize;left:50%}.ReactCrop .ord-ne{cursor:ne-resize;top:0}.ReactCrop .ord-e,.ReactCrop .ord-ne{right:0;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%)}.ReactCrop .ord-e{cursor:e-resize;top:50%}.ReactCrop .ord-se{bottom:0;cursor:se-resize;right:0;-webkit-transform:translate(50%,50%);transform:translate(50%,50%)}.ReactCrop .ord-s{cursor:s-resize;left:50%}.ReactCrop .ord-s,.ReactCrop .ord-sw{bottom:0;-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%)}.ReactCrop .ord-sw{cursor:sw-resize;left:0}.ReactCrop .ord-w{cursor:w-resize;left:0;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}.ReactCrop__drag-bar{position:absolute}.ReactCrop__drag-bar.ord-n{height:6px;height:var(--rc-drag-bar-size);left:0;top:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:100%}.ReactCrop__drag-bar.ord-e{height:100%;right:0;top:0;-webkit-transform:translate(50%);transform:translate(50%);width:6px;width:var(--rc-drag-bar-size)}.ReactCrop__drag-bar.ord-s{bottom:0;height:6px;height:var(--rc-drag-bar-size);left:0;-webkit-transform:translateY(50%);transform:translateY(50%);width:100%}.ReactCrop__drag-bar.ord-w{height:100%;left:0;top:0;-webkit-transform:translate(-50%);transform:translate(-50%);width:6px;width:var(--rc-drag-bar-size)}.ReactCrop--fixed-aspect .ReactCrop__drag-bar,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w,.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle{display:none}@media (pointer:coarse){.ReactCrop .ord-e,.ReactCrop .ord-n,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{height:24px;height:var(--rc-drag-handle-mobile-size);width:24px;width:var(--rc-drag-handle-mobile-size)}}.edit-profile-container{background-color:var(--background-color-secondary);border-radius:10px;box-shadow:0 4px 15px #0000001a;color:var(--text-color);margin:40px auto;max-width:500px;padding:30px}.edit-profile-container h2{color:var(--primary-color);font-size:2em;margin-bottom:30px;text-align:center}.edit-profile-form div{margin-bottom:20px}.edit-profile-form label{color:var(--text-color-light);display:block;font-weight:700;margin-bottom:8px}.profile-picture-controls{align-items:center;display:flex;gap:20px}.profile-picture-preview{align-items:center;display:flex;flex-direction:column;gap:10px}.profile-picture-preview img{border:3px solid var(--primary-color);border-radius:50%;height:120px;object-fit:cover;width:120px}.image-buttons{display:flex;flex-direction:column;gap:10px}.image-buttons button{background-color:var(--button-secondary-background);border:1px solid var(--border-color);border-radius:5px;color:var(--button-secondary-text);cursor:pointer;padding:8px 16px;transition:background-color .3s}.image-buttons button:hover{background-color:var(--button-secondary-background-hover)}.edit-profile-buttons{display:flex;gap:15px;justify-content:flex-end;margin-top:30px}.edit-profile-buttons button{align-items:center;border:none;border-radius:5px;cursor:pointer;display:flex;font-size:1em;gap:8px;justify-content:center;padding:12px 25px;transition:background-color .3s ease,transform .2s ease,opacity .3s ease,visibility .3s ease}.edit-profile-buttons button[type=submit]{background-color:#6a99e0;color:#fff;min-width:150px}.edit-profile-buttons button[type=submit]:hover:not(:disabled){background-color:#5a88d0;transform:translateY(-2px)}.edit-profile-buttons button[type=submit].save-button-hidden{opacity:0;pointer-events:none;visibility:hidden}.edit-profile-buttons button[type=button]{background-color:var(--button-secondary-background);color:var(--button-secondary-text);min-width:120px}.edit-profile-buttons button[type=button]:hover:not(:disabled){background-color:var(--button-secondary-background-hover);transform:translateY(-2px)}.edit-profile-buttons button:disabled{cursor:not-allowed;opacity:.6}.cropper-section{background-color:var(--background-color);border:1px solid var(--border-color);border-radius:8px;margin-top:15px;padding:15px}.ReactCrop{margin-bottom:15px}.ReactCrop .ReactCrop__image{max-height:400px}.cropper-controls{align-items:center;display:flex;flex-direction:column;gap:15px}.cropper-controls label{color:var(--text-color-light);font-weight:700}.cropper-controls input[type=range]{cursor:pointer;width:80%}.cropper-controls button{background-color:var(--primary-color);border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:.9em;padding:10px 20px;transition:background-color .3s ease}.cropper-controls button:hover:not(:disabled){background-color:var(--primary-color-dark)}.cropper-controls button:disabled{background-color:#ccc;cursor:not-allowed}.profile-container{background-color:var(--background-color-secondary);border-radius:10px;box-shadow:0 4px 15px #0000001a;color:var(--text-color);margin:40px auto;max-width:800px;padding:30px;position:relative}.profile-container h1{color:var(--primary-color);font-size:2.5em;margin-bottom:20px;text-align:center}.profile-avatar{border:3px solid var(--primary-color);border-radius:50%;box-shadow:0 2px 10px #0000001a;display:block;height:120px;margin:0 auto 20px;object-fit:cover;width:120px}.profile-container p{color:var(--text-color-light);font-size:1.1em;margin-bottom:10px;text-align:center}.edit-profile-icon-button{align-items:center;background-color:var(--primary-color);border:none;border-radius:50%;box-shadow:0 2px 5px #0003;color:#fff;cursor:pointer;display:flex;height:40px;justify-content:center;position:absolute;right:30px;top:30px;transition:background-color .3s ease,transform .2s ease;width:40px}.edit-profile-icon-button:hover{background-color:var(--primary-color-dark);transform:translateY(-2px)}.edit-profile-icon-button svg{color:#fff;height:24px;width:24px}.watch-friend-section{display:flex;justify-content:center;margin-bottom:20px;margin-top:20px}.friend-status,.watch-button{border-radius:25px;font-size:1em;gap:8px;padding:10px 20px}.friend-status{align-items:center;background-color:#28a745;color:#fff;display:flex}.profile-stats{color:var(--text-color-light);display:flex;font-size:1.1em;gap:30px;justify-content:center;margin-top:20px}.profile-container h2{border-bottom:2px solid var(--border-color);color:var(--primary-color);font-size:2em;margin-bottom:20px;margin-top:40px;padding-bottom:10px;text-align:center}.user-posts{grid-gap:20px;display:grid;gap:20px}.user-posts p{color:var(--text-color-light);font-style:italic;text-align:center}.profile-skeleton{margin:40px auto;max-width:800px;padding:30px}.skeleton-avatar-large{border-radius:50%;height:120px;width:120px}.skeleton-avatar-large,.skeleton-line-large{background-color:var(--hover-background);margin:0 auto 20px}.skeleton-line-large{border-radius:4px;height:30px;width:40%}.skeleton-stats{display:flex;gap:30px;justify-content:center;margin-top:20px}.skeleton-stat-item{height:20px;width:80px}.skeleton-posts-header,.skeleton-stat-item{background-color:var(--hover-background);border-radius:4px}.skeleton-posts-header{height:30px;margin:40px auto 20px;width:200px}@keyframes shimmer{0%{background-position:-200px 0}to{background-position:200px 0}}.shimmer{animation:shimmer 1.5s infinite;background-image:linear-gradient(to right,var(--hover-background) 0,#f0f0f0 20%,var(--hover-background) 40%);background-size:200px 100%}.room-list-container{background-color:var(--background-color-secondary);border-radius:10px;box-shadow:0 4px 15px #0000001a;color:var(--text-color);margin:40px auto;max-width:700px;padding:30px}.room-list-container h1{color:var(--primary-color);font-size:2.5em;margin-bottom:30px;text-align:center}.create-room-form{background-color:var(--card-background);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 2px 8px #0000000d;gap:15px;margin-bottom:40px;padding:15px}.create-room-form button{align-items:center;background-color:var(--primary-color);border-radius:5px;color:#fff;display:flex;font-size:1em;gap:8px;padding:12px 25px;transition:background-color .3s ease,transform .2s ease}.create-room-form button:hover:not(:disabled){background-color:var(--primary-color-dark);transform:translateY(-2px)}.create-room-form button:disabled{cursor:not-allowed;opacity:.6}.rooms-list{gap:10px}.room-item{border-radius:8px;color:var(--text-color);display:block;font-size:1.1em;font-weight:700;padding:15px 20px;transition:background-color .2s ease,transform .2s ease}.room-item:hover{transform:translateX(5px)}.friend-list-overlay{align-items:center;background-color:#00000080;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.friend-list-popup{background-color:var(--background-color-secondary);border-radius:10px;box-shadow:0 4px 15px #0003;color:var(--text-color);max-height:90%;max-width:90%;overflow-y:auto;padding:20px;position:relative}.friend-list-popup h3{color:var(--primary-color);margin-bottom:15px;margin-top:0;text-align:center}.friend-list-popup .close-button{background:none;border:none;color:var(--text-color);cursor:pointer;font-size:1.5em;position:absolute;right:10px;top:10px}.friend-list-popup .close-button:hover{color:var(--primary-color)}.friends-list{list-style:none;margin:0;padding:0}.friend-item{align-items:center;border-bottom:1px solid var(--border-color);display:flex;padding:10px 0}.friend-item:last-child{border-bottom:none}.friend-avatar{border:1px solid var(--border-color);border-radius:50%;height:40px;margin-right:10px;object-fit:cover;width:40px}.friend-item span{font-size:1.1em}.room-link-section{background-color:var(--background-color);border:1px solid var(--border-color);border-radius:5px;margin-bottom:20px;padding:10px;text-align:center}.room-link-section p{color:var(--text-color-light);font-size:.9em;margin-bottom:10px;margin-top:0}.room-link-section input{background-color:var(--input-background);border:1px solid var(--input-border);border-radius:5px;color:var(--text-color);margin-bottom:10px;padding:8px;width:calc(100% - 20px)}.room-link-section button{background-color:var(--primary-color);border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:.9em;padding:8px 15px}.room-link-section button:hover{background-color:var(--primary-color-dark)}@media (min-width:768px){.friend-list-overlay{align-items:flex-start;background-color:initial;justify-content:flex-end;padding:20px;pointer-events:none}.friend-list-popup{border:1px solid var(--border-color);max-height:calc(100vh - 100px);pointer-events:auto;position:absolute;right:20px;top:80px;width:300px}.friend-list-popup .close-button{display:none}}.chat-room-container{background-color:var(--background-color-secondary);border-radius:10px;box-shadow:0 4px 15px #0000001a;color:var(--text-color);height:calc(100vh - 80px);margin:40px auto}.chat-room-header{align-items:center;background-color:var(--primary-color);border-bottom:1px solid var(--border-color);color:#fff;display:flex;font-size:1.2em;font-weight:700;justify-content:space-between;padding:10px 20px}.chat-room-header h2{margin:0}.invite-button{align-items:center;background-color:initial;border:1px solid #fff;border-radius:5px;color:#fff;cursor:pointer;display:flex;font-size:.9em;gap:5px;padding:8px 12px;transition:background-color .3s ease,border-color .3s ease}.invite-button:hover{background-color:#fff3;border-color:#ffffff80}.messages-list{display:flex;flex-direction:column;gap:15px;padding:20px}.message{gap:10px}.message-avatar{border:1px solid var(--border-color);height:36px;width:36px}.message-content-wrapper{display:flex;flex-direction:column;max-width:70%}.message.sent .message-content-wrapper{align-items:flex-end}.message.received .message-content-wrapper{align-items:flex-start}.message-sender{align-items:center;color:var(--text-color-light);display:flex;font-size:.85em;gap:8px;margin-bottom:4px}.message-time{color:var(--text-color-light);font-size:.7em;opacity:.7}.message-bubble{word-wrap:break-word;border-radius:20px;box-shadow:0 1px 3px #0000001a;padding:12px 15px}.message.received .message-bubble{background-color:var(--message-received-background);border-bottom-left-radius:5px;color:var(--text-color)}.message.sent .message-bubble{background-color:var(--message-sent-background);border-bottom-right-radius:5px;color:#fff}.message-form{gap:10px;padding:15px 20px}.message-form input{border-radius:25px}.message-form button{align-items:center;background-color:var(--primary-color);border-radius:25px;color:#fff;display:flex;gap:8px;padding:12px 20px;transition:background-color .3s ease,transform .2s ease}.message-form button:hover{background-color:var(--primary-color-dark);transform:translateY(-2px)}.message-form button:disabled{cursor:not-allowed;opacity:.6}.system-message{color:var(--text-color-light);font-size:.8em;margin:10px 0;text-align:center}.friend-item .add-friend-button{background-color:var(--primary-color);border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:.8em;margin-left:auto;padding:5px 10px}.friend-item .add-friend-button:hover{background-color:var(--primary-color-dark)}.join-room-container{align-items:center;background-color:var(--background-color);display:flex;flex-direction:column;flex-grow:1;justify-content:center;padding:20px;text-align:center}.join-room-container p{color:var(--text-color);font-size:1.1em;margin-bottom:20px}.join-room-button{background-color:var(--primary-color);border:none;border-radius:25px;box-shadow:0 4px 10px #0003;color:#fff;cursor:pointer;font-size:1.1em;font-weight:700;padding:12px 25px;transition:background-color .3s ease,transform .2s ease}.join-room-button:hover{background-color:var(--primary-color-dark);transform:translateY(-2px)}.room-details-before-join{background-color:var(--background-color-secondary);border-bottom:1px solid var(--border-color);padding:20px;text-align:center}.room-details-before-join h2{color:var(--primary-color);margin-bottom:10px}.room-details-before-join h3{color:var(--text-color);margin-bottom:10px;margin-top:20px}.room-members-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:10px}.room-member-item{align-items:center;color:var(--text-color-light);display:flex;flex-direction:column;font-size:.9em}.room-member-avatar{border:2px solid var(--primary-color);border-radius:50%;height:40px;margin-bottom:5px;object-fit:cover;width:40px}.user-list-container{background-color:var(--background-color-secondary);border-radius:10px;box-shadow:0 4px 15px #0000001a;color:var(--text-color);margin:40px auto;max-width:900px;padding:30px}.user-list-container h1{color:var(--primary-color);font-size:2.5em;margin-bottom:30px;text-align:center}.user-search-input{margin-bottom:30px;width:calc(100% - 30px)}.users-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.user-card{align-items:center;background-color:var(--card-background);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 2px 10px #00000014;color:var(--text-color);display:flex;flex-direction:column;padding:20px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}.user-card:hover{box-shadow:0 6px 20px #0000001f;transform:translateY(-5px)}.user-card-link{align-items:center;color:var(--text-color);display:flex;flex-direction:column;text-decoration:none;width:100%}.user-card-avatar{border:2px solid var(--primary-color);border-radius:50%;height:80px;margin-bottom:15px;object-fit:cover;width:80px}.user-card-username{color:var(--primary-color);font-size:1.1em;font-weight:700;margin-bottom:10px;text-align:center;word-break:break-word}.watch-button{margin-top:auto}.post-detail-container{margin:0 auto;max-width:600px;padding:20px}.post-detail-card{background-color:var(--post-background);border:1px solid var(--post-border);border-radius:8px;box-shadow:0 2px 4px #0000001a;color:var(--text-color);padding:20px}.post-header{margin-bottom:15px;position:relative}.post-author-avatar{height:40px;margin-right:10px;width:40px}.post-author-info{display:flex;flex-direction:column}.post-menu{position:absolute;right:0;top:0}.post-menu-icon{cursor:pointer;height:24px;width:24px}.post-menu-dropdown{background-color:var(--card-background);border:1px solid var(--border-color);border-radius:4px;box-shadow:0 2px 10px #0000001a;position:absolute;right:0;top:30px;z-index:10}.post-menu-dropdown button{background:none;border:none;color:var(--text-color);cursor:pointer;padding:10px 20px;text-align:left;width:100%}.post-menu-dropdown button:hover{background-color:var(--hover-background)}.post-text{margin-bottom:15px;white-space:pre-wrap}.post-image-container{width:100%}.post-image{max-width:100%}.post-form{background-color:var(--post-background);border:1px solid var(--post-border);border-radius:8px;box-shadow:0 2px 4px #0000001a;margin-top:20px;padding:15px}.post-form textarea{background-color:var(--input-background);border:1px solid var(--border-color);border-radius:4px;color:var(--text-color);min-height:80px;padding:10px}.post-form-actions{gap:10px;justify-content:flex-end}.char-count{color:var(--text-color-light);font-size:.9em}.post-form button{background-color:var(--primary-button-background);border-radius:5px;color:var(--primary-button-text);font-size:1em;padding:8px 15px;transition:background-color .2s ease-in-out}.post-form button:hover{background-color:var(--primary-button-hover-background)}.post-form button:disabled{background-color:var(--button-disabled-background);color:var(--button-disabled-text);cursor:not-allowed}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:var(--secondary-background);color:var(--text-color);display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:var(--primary-color)}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.App-container{display:flex;min-height:100vh}.main-content{flex-grow:1;margin-left:0;padding:20px;transition:margin-left .3s ease}.sidebar-toggle-button{align-items:center;background-color:initial;border:1px solid var(--border-color);border-radius:50%;box-shadow:0 2px 5px #0003;color:var(--text-color);cursor:pointer;display:block;display:flex;height:40px;justify-content:center;left:15px;position:fixed;top:15px;width:40px;z-index:9999}.sidebar-toggle-button svg{stroke:var(--text-color);height:24px;width:24px}@media (min-width:768px){.App-container.sidebar-open .main-content{margin-left:200px}}.home-container{padding-top:0;position:relative}.recommended-users-section{background-color:var(--background-color-secondary);border-radius:10px;box-shadow:0 4px 15px #0000001a;color:var(--text-color);margin-top:40px;padding:20px}.recommended-users-section h2{color:var(--primary-color);font-size:1.8em;margin-bottom:20px;text-align:center}.recommended-users-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));justify-content:center}.recommended-user-card{align-items:center;border-radius:8px;color:var(--text-color);display:flex;flex-direction:column;padding:10px;text-decoration:none;transition:background-color .2s ease,transform .2s ease}.recommended-user-card:hover{background-color:var(--hover-background);transform:translateY(-3px)}.recommended-user-card-link{align-items:center;color:var(--text-color);display:flex;flex-direction:column;text-decoration:none;width:100%}.recommended-user-avatar{border:2px solid var(--primary-color);border-radius:50%;height:70px;margin-bottom:8px;object-fit:cover;width:70px}.recommended-user-username{font-size:.9em;font-weight:700;text-align:center;word-break:break-word}.watch-button{align-items:center;background-color:var(--primary-color);border:none;border-radius:20px;color:#fff;cursor:pointer;display:flex;font-size:.9em;gap:5px;margin-top:10px;padding:8px 15px;transition:background-color .3s ease,transform .2s ease}.watch-button:hover{background-color:var(--primary-color-dark);transform:translateY(-2px)}.watch-button.watching{background-color:var(--button-secondary-background);color:var(--button-secondary-text)}.watch-button.watching:hover{background-color:var(--button-secondary-background-hover)}.chatter-container{background-color:var(--card-background);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 2px 4px #0000001a;margin:0 auto;max-width:600px;padding:20px}.post-form textarea{height:80px;margin-bottom:10px;resize:vertical;width:100%}.post-form-actions{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:10px}.image-upload-button{align-items:center;background-color:var(--button-secondary-background);border-radius:5px;color:var(--button-secondary-text);cursor:pointer;display:flex;flex-shrink:0;gap:5px;padding:6px 10px;transition:background-color .3s ease}.image-upload-button:hover{background-color:var(--button-secondary-background-hover)}.image-upload-button svg{fill:currentColor;stroke:none;height:20px;width:20px}.image-upload-button .material-symbols-outlined{font-size:28px}.image-preview-container{align-items:center;border:1px solid var(--border-color);border-radius:8px;display:flex;justify-content:center;margin-bottom:10px;max-height:300px;overflow:hidden;position:relative;width:100%}.image-preview{border-radius:8px;display:block;height:auto;max-height:300px;object-fit:contain;width:100%}.remove-image-button{align-items:center;background-color:#ff0000b3;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:.8em;font-weight:700;height:25px;justify-content:center;position:absolute;right:5px;top:5px;width:25px}.post-form button{background-color:var(--button-background);border:none;border-radius:4px;color:var(--button-text);cursor:pointer;padding:10px 15px}.post-form button:hover{background-color:var(--primary-color)}.timeline{margin-top:20px}.post{align-items:flex-start;background-color:var(--post-background);border:1px solid var(--post-border);border-radius:8px;display:flex;margin-bottom:8px;padding:10px;text-align:left}.post small{color:var(--text-color);font-size:11px}.post-avatar-link{flex-shrink:0;margin-right:10px}.post-content{flex-grow:1}.post-header{align-items:center;display:flex;margin-bottom:3px}.post-author-avatar{border-radius:50%;height:28px;object-fit:cover;width:28px}.post-author-username{font-weight:700;text-decoration:none}.post p,.post-author-username{color:var(--text-color);font-size:14px}.post p{line-height:1.4;margin:0 0 3px}.post-image-container{border-radius:8px;margin-top:10px;max-width:100%;overflow:hidden}.post-image{border-radius:8px;display:block;height:auto;width:100%}.sidebar{background-color:var(--secondary-background);box-shadow:2px 0 5px #0000001a;height:100vh;left:0;overflow-y:auto;padding:60px 20px 20px;position:fixed;top:0;transform:translateX(-100%);transition:transform .3s ease;width:200px;z-index:1000}.sidebar.open{transform:translateX(0)}.sidebar.closed{transform:translateX(-100%)}.sidebar ul{list-style:none;padding:0}.sidebar li{margin-bottom:10px}.sidebar a{border-radius:4px;color:var(--text-color);display:block;font-weight:700;padding:8px 10px;text-decoration:none}.sidebar a:hover{background-color:var(--hover-background)}.sidebar-profile{align-items:center;border-bottom:1px solid #ccc;display:flex;flex-direction:column;margin-bottom:20px;padding-bottom:20px}.sidebar-profile-avatar{border-radius:50%;height:60px;margin-bottom:10px;object-fit:cover;width:60px}.sidebar-profile-username{color:var(--text-color);font-size:16px;font-weight:700}.room-list-container{background-color:var(--card-background);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 2px 4px #0000001a;margin:20px auto;max-width:800px;padding:20px}.create-room-form{display:flex;margin-bottom:20px}.create-room-form input{background-color:var(--input-background);border:1px solid var(--input-border);border-radius:4px;color:var(--text-color);flex-grow:1;margin-right:10px;padding:10px}.create-room-form button{background-color:var(--button-background);border:none;border-radius:4px;color:var(--button-text);cursor:pointer;padding:10px 15px}.create-room-form button:hover{background-color:var(--primary-color)}.rooms-list{display:flex;flex-direction:column}.room-item{background-color:var(--card-background);border:1px solid var(--border-color);border-radius:4px;color:var(--primary-color);margin-bottom:8px;padding:10px;text-decoration:none;transition:background-color .2s ease}.room-item:hover{background-color:var(--hover-background)}.chat-room-container{border:1px solid var(--border-color);border-radius:8px;display:flex;flex-direction:column;height:calc(100vh - 40px);margin:0 auto;max-width:800px;overflow:hidden}.messages-list{background-color:var(--background-color);flex-grow:1;overflow-y:auto;padding:15px}.message{align-items:flex-end;display:flex;margin-bottom:10px}.message.sent{justify-content:flex-end}.message.received{justify-content:flex-start}.message-avatar{border-radius:50%;flex-shrink:0;height:32px;object-fit:cover;width:32px}.message.sent .message-avatar{margin-left:8px;margin-right:0;order:1}.message.received .message-avatar{margin-right:8px}.message-content{word-wrap:break-word;border-radius:15px;max-width:75%;padding:10px 12px;position:relative}.message.received .message-content{background-color:var(--message-received-background);border-bottom-left-radius:2px}.message.sent .message-content{background-color:var(--message-sent-background);border-bottom-right-radius:2px}.message-sender{color:var(--text-color);display:block;font-size:.8em;margin-bottom:2px}.message.sent .message-sender{color:var(--text-color);text-align:right}.message-text{font-size:.9em;line-height:1.4}.message-form{background-color:var(--message-form-background);border-top:1px solid var(--border-color);display:flex;padding:10px}.message-form input{background-color:var(--input-background);border:1px solid var(--input-border);border-radius:20px;color:var(--text-color);flex-grow:1;font-size:1em;margin-right:10px;padding:10px}.message-form button{background-color:var(--button-background);border:none;border-radius:20px;color:var(--button-text);cursor:pointer;font-size:1em;padding:10px 20px}.message-form button:hover{background-color:var(--primary-color)}.theme-toggle-container{bottom:20px;left:20px;position:absolute}.sidebar-bottom-actions{border-top:1px solid var(--border-color);display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-bottom:20px;padding-top:20px}.sidebar-action-button{align-items:center;background-color:var(--button-secondary-background);border:none;border-radius:5px;color:var(--button-secondary-text);cursor:pointer;display:flex;font-size:1em;gap:8px;padding:10px 15px;transition:background-color .3s ease}.sidebar-action-button:hover{background-color:var(--button-secondary-background-hover)}.sidebar-action-button svg{stroke:var(--button-secondary-text);height:20px;width:20px}.popup-overlay{align-items:center;background-color:#00000080;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:2000}.popup-content{background-color:var(--background-color-secondary);border-radius:10px;box-shadow:0 5px 15px #0000004d;color:var(--text-color);max-width:400px;padding:30px;text-align:center;width:90%}.popup-content h2{color:var(--primary-color);margin-bottom:20px}.popup-button{align-items:center;background-color:var(--primary-color);border:none;border-radius:5px;color:#fff;cursor:pointer;display:flex;font-size:.95em;gap:6px;justify-content:center;margin-bottom:10px;padding:8px 15px;transition:background-color .3s ease;width:100%}.popup-button:hover{background-color:var(--primary-color-dark)}.popup-close-button{background-color:var(--button-secondary-background);border:none;border-radius:5px;color:var(--button-secondary-text);cursor:pointer;font-size:1em;padding:10px 20px;transition:background-color .3s ease;width:100%}.popup-close-button:hover{background-color:var(--button-secondary-background-hover)}.theme-toggle-button{align-items:center;background-color:var(--secondary-background);border:1px solid var(--border-color);border-radius:50%;box-shadow:0 2px 4px #0000001a;color:var(--text-color);cursor:pointer;display:flex;height:40px;justify-content:center;transition:background-color .3s ease,color .3s ease;width:40px}.theme-toggle-button:hover{background-color:var(--hover-background)}.theme-toggle-button svg{stroke:var(--text-color);height:24px;width:24px}.dark-mode .post-author-username{color:#e0e0e0}
/*# sourceMappingURL=main.60906419.css.map*/