body{margin:0;font-family:Arial,sans-serif;color:#333;overflow-x:hidden}.App{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden;background-color:#f0f0f0}.background-carousel{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:0}.background-carousel img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:fadeImages 20s infinite}.background-carousel img:nth-child(1){animation-delay:0s}.background-carousel img:nth-child(2){animation-delay:5s}.background-carousel img:nth-child(3){animation-delay:10s}.background-carousel img:nth-child(4){animation-delay:15s}@keyframes fadeImages{0%{opacity:0;transform:scale(1)}5%{opacity:1}20%{opacity:1}25%{opacity:0;transform:scale(1.05)}to{opacity:0;transform:scale(1)}}.message-form-container{position:relative;z-index:1;background-color:#ffffffd9;padding:25px;border-radius:10px;box-shadow:0 4px 15px #0003;width:90%;max-width:500px;margin:20px auto;box-sizing:border-box}.message-form-container h1{text-align:center;color:#0056b3;margin-bottom:20px}.message-type-selection{display:flex;flex-wrap:wrap;justify-content:space-around;gap:10px;margin-bottom:25px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.1)}.type-button{flex:1 1 22%;min-width:80px;max-width:100px;height:90px;background-color:#f0f0f0e6;color:#555;border:2px solid rgba(0,0,0,.1);border-radius:8px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;transition:all .3s ease;font-size:.9em;font-weight:700;text-align:center;box-shadow:0 2px 5px #0000001a}.type-button:hover{background-color:#dcdcdcf2;border-color:#007bff;transform:translateY(-2px)}.type-button.active{background-color:#007bff;color:#fff;border-color:#0056b3;box-shadow:0 4px 10px #007bff4d}.type-button .type-icon{font-size:2.2em;margin-bottom:5px}.type-button.active .type-icon{color:#fff}.recipient-selection{margin-bottom:25px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.1)}.recipient-selection label{display:block;text-align:center;margin-bottom:15px;font-size:1.1em;color:#0056b3;font-weight:700}.recipient-buttons-container{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;margin-top:10px}.recipient-button{flex:0 0 calc(50% - 15px);max-width:150px;height:120px;background-color:#f0f0f0e6;color:#555;border:2px solid rgba(0,0,0,.1);border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;transition:all .3s ease;font-size:1em;font-weight:700;text-align:center;box-shadow:0 2px 5px #0000001a;padding:10px}.recipient-button:hover{background-color:#dcdcdcf2;border-color:#007bff;transform:translateY(-2px)}.recipient-button.active{background-color:#28a745;color:#fff;border-color:#1e7e34;box-shadow:0 4px 10px #28a7454d}.recipient-button .recipient-photo{width:60px;height:60px;border-radius:50%;object-fit:cover;margin-bottom:8px;border:2px solid rgba(0,0,0,.1)}.recipient-button.active .recipient-photo{border-color:#fff}label{display:block;margin-bottom:8px;font-weight:700;color:#555}input[type=text],textarea{width:100%;padding:10px;margin-bottom:15px;border:1px solid #ddd;border-radius:5px;box-sizing:border-box;font-size:1em}input[type=file]{display:none}.custom-file-upload-button{display:block;width:100%;padding:12px;background-color:#28a745;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:1.1em;transition:background-color .3s ease;margin-bottom:15px}.custom-file-upload-button:hover{background-color:#218838}.custom-file-upload-button:disabled{background-color:#ccc;cursor:not-allowed}button[type=submit]{display:block;width:100%;padding:12px;background-color:#007bff;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:1.1em;transition:background-color .3s ease}button[type=submit]:hover{background-color:#0056b3}button[type=submit]:disabled{background-color:#ccc;cursor:not-allowed}p{text-align:center;font-size:.9em;color:#666}@media (max-width: 600px){.message-form-container{width:100%;max-width:unset;padding:15px;margin:0;border-radius:0}.message-type-selection{flex-wrap:nowrap;justify-content:space-between;gap:5px;overflow-x:auto;padding:10px 0}.type-button{flex:0 0 23%;min-width:65px;height:60px;font-size:.75em;padding:5px}.type-button .type-icon{font-size:1.5em;margin-bottom:3px}.recipient-selection label{font-size:1em}.recipient-buttons-container{gap:10px}.recipient-button{flex:1 1 calc(50% - 10px);height:100px;max-width:unset;font-size:.9em}.recipient-button .recipient-photo{width:50px;height:50px}input[type=text],textarea{font-size:.9em;padding:8px}.custom-file-upload-button,button[type=submit]{font-size:1em;padding:10px}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.login-container{background-color:#ffffffe6;padding:30px;border-radius:10px;box-shadow:0 4px 20px #0003;width:90%;max-width:400px;margin:50px auto;text-align:center;box-sizing:border-box}.login-container h2{color:#007bff;margin-bottom:25px}.form-group{margin-bottom:20px;text-align:left}.form-group label{display:block;margin-bottom:8px;font-weight:700;color:#555}.form-group input{width:100%;padding:10px;border:1px solid #ddd;border-radius:5px;box-sizing:border-box;font-size:1em}.login-container button{width:100%;padding:12px;background-color:#007bff;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:1.1em;transition:background-color .3s ease}.login-container button:hover{background-color:#0056b3}.login-container button:disabled{background-color:#ccc;cursor:not-allowed}.error-message{color:#dc3545;margin-bottom:15px;font-size:.9em}@media (max-width: 600px){.login-container{width:100%;margin:0;border-radius:0;padding:20px}}.media-viewer-overall-container{display:flex;flex-direction:column;height:100vh;background-color:#f0f2f5;overflow:hidden}.viewer-header-fixed{background-color:#fff;padding:15px 30px;border-bottom:1px solid #e0e0e0;box-shadow:0 2px 10px #00000014;z-index:500;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;position:relative;padding:0 1rem;min-height:56px}.viewer-header-fixed h2,.header-title{color:#007bff;margin:0;font-size:1.8em}.header-left-spacer{flex:1}.header-right-menu{position:relative;display:flex;align-items:center;justify-content:flex-end;min-width:0}.avatar-button{background:none;border:none;font-size:2em;color:#007bff;cursor:pointer;padding:5px;border-radius:50%;transition:background-color .3s ease}.avatar-button:hover{background-color:#007bff1a}.avatar-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 4px 15px #0000001a;padding:15px;min-width:200px;z-index:1000}.user-email-display{margin:0 0 10px;font-size:.9em;color:#666;font-weight:500}.dropdown-logout-button{width:100%;padding:8px 12px;background-color:#dc3545;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.9em;display:flex;align-items:center;gap:8px;transition:background-color .3s ease}.dropdown-logout-button:hover{background-color:#c82333}.logout-icon{font-size:.8em}.user-info{display:flex;align-items:center;gap:15px}.user-info p{margin:0;color:#555;font-size:1em;font-weight:500}.logout-button{padding:8px 18px;background-color:#dc3545;color:#fff;border:none;border-radius:25px;cursor:pointer;font-size:.95em;font-weight:600;transition:background-color .3s ease,transform .2s ease}.logout-button:hover{background-color:#c82333;transform:translateY(-2px)}.media-content-scrollable{flex-grow:1;overflow-y:auto;padding:20px;-webkit-overflow-scrolling:touch}.masonry-wrapper{padding:0}.media-grid{width:100%}.media-brick{background-color:#fff;border:1px solid #f0f0f0;border-radius:8px;overflow:hidden;box-shadow:0 4px 15px #00000014;cursor:pointer;position:relative;transition:transform .2s ease,box-shadow .2s ease;margin-bottom:15px;min-height:100px;break-inside:avoid}.media-brick:hover{transform:translateY(-5px);box-shadow:0 8px 20px #00000026}.media-thumbnail-img,.media-thumbnail-video{width:100%;height:auto;display:block;object-fit:cover;min-height:150px;max-height:400px}.media-thumbnail-audio{width:100%;padding:15px;box-sizing:border-box}.text-thumbnail{padding:15px;background-color:#eaf6ff;color:#333}.text-thumbnail h3{margin-top:0;color:#007bff;font-size:1.1em}.text-thumbnail p{font-size:.9em;line-height:1.4;color:#666}.media-overlay{position:absolute;bottom:0;left:0;width:100%;background:linear-gradient(to top,#000c,#0000);color:#fff;padding:10px;opacity:0;transition:opacity .3s ease;text-align:left}.media-brick:hover .media-overlay{opacity:1}.media-overlay p{margin:0;font-size:.85em;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.media-overlay-sender{font-weight:700}.media-overlay-comment{font-style:italic;font-size:.8em}.media-viewer-container p{text-align:center;color:#666;margin-top:20px}.error-message{color:#dc3545;font-weight:700}@media (max-width: 768px){.viewer-header-fixed{flex-direction:column;align-items:flex-start;gap:10px;padding:10px 15px}.viewer-header-fixed h2{font-size:1.5em}.user-info{flex-direction:column;align-items:flex-start;gap:5px;width:100%}.user-info p{font-size:.9em}.logout-button{margin-left:0;width:100%}.media-content-scrollable{padding:10px}.media-brick{margin-bottom:10px}.media-overlay{padding:8px}.media-overlay p{font-size:.75em}}.header-left-group{display:flex;align-items:center;gap:1rem;flex:1 1 0;min-width:0}.header-title{flex:1 1 0;text-align:center;font-size:1.5rem;font-weight:700;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recipient-filter-container{display:flex;align-items:center;background:#fff;border-radius:20px;box-shadow:0 1px 6px #00000012;padding:2px 10px 2px 8px;margin-right:.5rem}.recipient-filter-label{font-size:1rem;color:#444;margin-right:.3em;font-weight:500}.recipient-filter-select{border:none;background:#f3f3f3;border-radius:14px;padding:4px 16px 4px 8px;font-size:1rem;color:#222;outline:none;box-shadow:0 1px 3px #0000000a;transition:box-shadow .2s}.recipient-filter-select:focus{box-shadow:0 0 0 2px #b3d4fc}@media (max-width: 600px){.header-left-group{gap:.5rem}.recipient-filter-label{font-size:.95rem}.recipient-filter-select{font-size:.95rem;padding:3px 10px 3px 6px}.recipient-filter-container{padding:1px 6px 1px 5px}.header-title{font-size:1.1rem}.viewer-header-fixed{padding:0 .3rem}}.media-detail-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000fa;display:flex;flex-direction:column;z-index:1000;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);animation:fadeInOverlay .3s ease-out forwards;overflow:hidden}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.modal-top-navbar{width:100%;height:56px;background-color:#000000b3;display:flex;align-items:center;padding:0 10px;box-sizing:border-box;position:relative;z-index:110;flex-shrink:0;justify-content:flex-start}.back-button{background:none;border:none;color:#fff;font-size:1.6em;cursor:pointer;display:flex;align-items:center;padding:10px;transition:color .2s ease}.back-button:hover{color:#a0a0a0}.fit-mode-button{background:none;border:none;color:#fff;font-size:1.4em;cursor:pointer;display:flex;align-items:center;padding:10px;margin-left:10px;border-radius:50%;transition:background-color .2s ease,color .2s ease}.fit-mode-button:hover{background-color:#ffffff1a;color:#a0a0a0}.modal-media-carousel{display:flex;width:100%;flex-grow:1;transition:transform .3s cubic-bezier(.25,.46,.45,.94);position:relative;will-change:transform}.modal-media-page{flex-shrink:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:10px 0;box-sizing:border-box;position:relative;opacity:1;transition:opacity .3s ease-in-out;overflow:hidden}.nav-button{position:absolute;top:50%;transform:translateY(-50%);background:#ffffff26;border:none;border-radius:50%;width:48px;height:48px;display:flex;justify-content:center;align-items:center;font-size:1.8em;color:#fff;cursor:pointer;z-index:105;transition:background-color .2s ease,transform .2s ease;box-shadow:0 2px 8px #0006}.nav-button:hover{background-color:#ffffff4d;transform:translateY(-50%) scale(1.05)}.nav-button:disabled{opacity:.3;cursor:not-allowed;background-color:#ffffff0d}.nav-button-prev{left:10px}.nav-button-next{right:10px}.modal-media-date{position:absolute;top:10px;left:10px;right:10px;text-align:right;color:#fffffff2;font-size:.9em;font-weight:500;text-shadow:0 0 5px rgba(0,0,0,1);z-index:10;background-color:#0006;padding:5px 10px;border-radius:5px;box-sizing:border-box}.modal-media-viewer{flex-grow:1;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:0;box-sizing:border-box;overflow:hidden;position:relative;min-height:0}.modal-media-viewer img,.modal-media-viewer video,.modal-media-viewer audio{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;margin:auto}.modal-media-viewer img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;object-position:center}.modal-image-fit-cover,.modal-video-fit-cover{object-fit:cover!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important}.modal-image-fit-contain,.modal-video-fit-contain{object-fit:contain!important;max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important}.modal-media-viewer video{background-color:#000;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.modal-media-viewer audio{width:90%;max-width:600px;margin:0 auto;background-color:#ffffff1a;border-radius:10px;padding:10px}.modal-full-text-content{background-color:#fffffffa;border-radius:12px;padding:25px;margin:15px;max-width:90%;max-height:90%;overflow-y:auto;text-align:left;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 4px 20px #0006}.modal-text-content-title{color:#007bff;font-size:1.6em;font-weight:700;margin-bottom:15px;text-align:center;border-bottom:2px solid #007bff;padding-bottom:8px;width:100%}.modal-text-content{font-size:1em;line-height:1.6;color:#333;white-space:pre-wrap;word-break:break-word}.modal-media-info{width:100%;padding:15px 20px;background:linear-gradient(to top,#000c,#0000);color:#fff;text-align:center;z-index:10;box-sizing:border-box;flex-shrink:0}.modal-info-sender{margin-bottom:3px;font-size:1.1em;font-weight:600;text-shadow:0 0 5px rgba(0,0,0,1)}.modal-info-comment{font-style:italic;font-size:.95em;margin-bottom:0;text-shadow:0 0 5px rgba(0,0,0,1)}@media (min-width: 769px){.modal-media-viewer{padding:20px}.modal-media-viewer img,.modal-media-viewer video{max-width:90%;max-height:90%}.modal-full-text-content{max-width:80%;max-height:80%}}@media (max-width: 768px){.modal-top-navbar{height:50px;padding:0 8px}.back-button{font-size:1.5em;padding:8px}.fit-mode-button{font-size:1.3em;padding:8px;margin-left:8px}.nav-button{width:44px;height:44px;font-size:1.6em}.nav-button-prev{left:8px}.nav-button-next{right:8px}.modal-media-date{top:8px;left:8px;font-size:.75em;padding:4px 8px;background-color:#00000080}.modal-full-text-content{padding:20px;margin:10px;max-width:95%;max-height:95%}.modal-text-content-title{font-size:1.4em;margin-bottom:10px}.modal-text-content{font-size:.95em}.modal-media-info{padding:12px 15px}.modal-info-sender{font-size:1em}.modal-info-comment{font-size:.85em}}@media (max-width: 400px){.modal-top-navbar{height:45px;padding:0 5px}.back-button{font-size:1.4em;padding:6px}.fit-mode-button{font-size:1.2em;padding:6px;margin-left:6px}.nav-button{width:40px;height:40px;font-size:1.4em}.nav-button-prev{left:5px}.nav-button-next{right:5px}.modal-media-date{font-size:.7em;padding:3px 6px}.modal-media-info{padding:10px}.modal-info-sender{font-size:.95em}.modal-info-comment{font-size:.8em}}.projection-root{width:100vw;height:100vh;background:#111;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;position:fixed;top:0;left:0;z-index:9999}.projection-media{flex:1;display:flex;justify-content:center;align-items:center;width:100vw;height:80vh}.projection-text{font-size:3vw;text-align:center;max-width:80vw;word-break:break-word}.projection-text-large{font-size:3vw}.projection-text-medium{font-size:2.2vw}.projection-text-small{font-size:1.5vw}.projection-text-xsmall{font-size:1vw}.projection-img{max-width:80vw;max-height:70vh;border-radius:1vw;box-shadow:0 0 40px #000a}.projection-audio{width:60vw;height:5vh}.projection-video{max-width:80vw;max-height:70vh;border-radius:1vw;box-shadow:0 0 40px #000a;background:#000}.projection-footer{width:100vw;padding:2vh 0 3vh;background:linear-gradient(0deg,#111 80%,#111a 100%,transparent 100%);position:absolute;bottom:0;left:0;text-align:center}.projection-author{font-size:2vw;font-weight:700;margin-bottom:1vh}.projection-comment{font-size:1.5vw;max-width:80vw;margin:0 auto;word-break:break-word}.projection-loading{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;font-size:3vw;background:#111;color:#fff}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}