@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap";:root{--bg-lowest:#0f0e0c;--bg-low:#1c1b19;--bg-base:#141311;--bg-container:#211f1d;--bg-container-high:#2b2a28;--bg-container-highest:#363432;--bg-bright:#3a393799;--primary:#ffbd64;--primary-container:#e89f34;--primary-glow:#ffbd6414;--text-main:#e6e2de;--text-muted:#d9c2b3;--text-inverse:#462a00;--border-ghost:#54443826;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-lowest);color:var(--text-main);width:100vw;height:100vh;font-family:Plus Jakarta Sans,sans-serif;overflow:hidden}#root{width:100%;height:100%}.app-container{background-color:var(--bg-lowest);gap:16px;width:100vw;height:100vh;padding:1rem;display:flex}.glass{background:var(--bg-bright);-webkit-backdrop-filter:blur(20px)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background-color:var(--bg-container-high);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background-color:var(--bg-container-highest)}.sidebar{background-color:var(--bg-container-low);border-radius:var(--radius-lg);flex-direction:column;gap:24px;width:25%;min-width:250px;padding:24px 16px;display:flex}.app-title{color:var(--primary);margin-bottom:24px;padding:0 8px;font-size:24px;font-weight:700}.search-bar{background-color:var(--bg-container);border-radius:var(--radius-full);margin-bottom:16px;padding:12px 16px}.search-bar input{color:var(--text-main);background:0 0;border:none;outline:none;width:100%;font-family:inherit;font-size:14px}.search-bar input::placeholder{color:var(--text-muted)}.friends-list{flex-direction:column;gap:12px;display:flex;overflow-y:auto}.friend-item{border-radius:var(--radius-md);cursor:pointer;align-items:center;gap:16px;padding:12px;transition:background-color .2s;display:flex}.friend-item:hover{background-color:var(--bg-container)}.friend-item.active{background-color:var(--bg-container-high)}.friend-avatar{border-radius:var(--radius-full);background-color:var(--primary-container);width:48px;height:48px;color:var(--text-inverse);justify-content:center;align-items:center;font-size:20px;font-weight:700;display:flex}.friend-info{flex-direction:column;gap:4px;display:flex;overflow:hidden}.friend-name{color:var(--text-main);margin-bottom:4px;font-size:15px;font-weight:600}.friend-last-msg{color:var(--text-muted);font-size:13px}.sidebar-footer{border-top:1px solid var(--border-ghost);margin-top:auto;padding:16px 24px}.logout-btn{border:1px solid var(--border-ghost);width:100%;color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;background:0 0;padding:10px;font-family:inherit;font-size:14px;font-weight:500;transition:all .2s}.logout-btn:hover{background:var(--bg-hover);color:var(--text-main);border-color:var(--text-muted)}.search-btn{background:var(--primary);color:var(--text-inverse);border-radius:var(--radius-sm);cursor:pointer;border:none;padding:0 16px;font-weight:600}.pending-inbox{background:var(--bg-hover);border:1px solid var(--border-ghost);border-radius:var(--radius-sm);margin-bottom:12px;padding:12px}.pending-item{border-bottom:1px solid var(--border-ghost);justify-content:space-between;align-items:center;padding:6px 0;display:flex}.pending-item:last-child{border-bottom:none;padding-bottom:0}.pending-name{color:var(--text-main);font-size:14px}.resolve-btn{background:var(--bg-container);border:1px solid var(--border-ghost);color:var(--text-muted);cursor:pointer;border-radius:4px;justify-content:center;align-items:center;width:24px;height:24px;display:flex}.resolve-btn.accept:hover{background:var(--primary);color:var(--text-inverse);border-color:var(--primary)}.resolve-btn.decline:hover{background:var(--error-container);color:var(--text-inverse);border-color:var(--error-container)}.search-result-box{background:var(--bg-hover);border-radius:var(--radius-sm);justify-content:space-between;align-items:center;margin-top:12px;padding:12px;display:flex}.search-res-info strong{color:var(--text-main);font-size:14px;display:block}.search-res-info small{color:var(--primary);font-size:12px}.add-friend-btn{background:var(--primary-container);color:var(--primary);cursor:pointer;border:none;border-radius:4px;padding:6px 12px;font-size:12px;font-weight:600}.add-friend-btn:hover{background:var(--primary);color:var(--text-inverse)}.search-status{color:var(--text-muted);text-align:center;margin-top:8px;font-size:12px}.chat-area{background-color:var(--bg-base);border-radius:var(--radius-lg);flex-direction:column;flex:1;display:flex;position:relative}.chat-header{background:var(--bg-bright);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom:1px solid var(--border-ghost);justify-content:space-between;align-items:center;padding:24px 32px;display:flex}.chat-header-info h2{margin-bottom:4px;font-size:20px;font-weight:600}.status-indicator{color:var(--primary);font-size:13px;font-weight:500}@media screen and (width<=768px){.app-container{flex-direction:column;height:100vh;display:flex;overflow:hidden}}.messages-container{flex-direction:column;flex:1;gap:24px;padding:32px;display:flex;overflow-y:auto}.message-bubble-wrapper{align-items:center;gap:8px;max-width:65%;display:flex}.message-bubble-wrapper.wrap-them{align-self:flex-start}.message-bubble-wrapper.wrap-me{flex-direction:row-reverse;align-self:flex-end}.message-bubble{word-wrap:break-word;padding:16px 20px;font-size:15px;line-height:1.5}.message-bubble.deleted{border:1px solid var(--border-ghost);color:var(--text-muted)!important;background:0 0!important}.message-bubble.them{background-color:var(--bg-container-highest);color:var(--text-main);border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px}.message-bubble.me{background:linear-gradient(135deg, var(--primary-container) 0%, var(--primary) 100%);color:var(--text-inverse);border-radius:var(--radius-lg) var(--radius-lg) 4px var(--radius-lg)}.delete-msg-btn{color:var(--text-muted);cursor:pointer;opacity:0;background:0 0;border:none;padding:4px;font-size:12px;transition:opacity .2s,color .2s}.message-bubble-wrapper:hover .delete-msg-btn{opacity:1}.delete-msg-btn:hover{color:var(--error-container)}.chat-input-area{background-color:var(--bg-container);border-radius:0 0 var(--radius-lg) var(--radius-lg);gap:16px;padding:24px 32px;display:flex}.chat-input-area input{background-color:var(--bg-container-highest);color:var(--text-main);border-radius:var(--radius-full);border:none;outline:none;flex:1;padding:16px 24px;font-family:inherit;font-size:15px;transition:box-shadow .2s}.chat-input-area input:focus{box-shadow:0 0 0 1px var(--border-ghost)}.chat-input-area input::placeholder{color:var(--text-muted)}.send-btn{background:linear-gradient(135deg, var(--primary-container) 0%, var(--primary) 100%);color:var(--text-inverse);border-radius:var(--radius-full);cursor:pointer;border:none;padding:0 32px;font-family:inherit;font-size:15px;font-weight:600;transition:opacity .2s}.send-btn:hover{opacity:.9}.profile-overview{background-color:var(--bg-container-low);border-radius:var(--radius-lg);flex-direction:column;gap:32px;width:20%;min-width:220px;padding:32px 24px;display:flex}.profile-card{text-align:center;flex-direction:column;align-items:center;display:flex}.profile-avatar-large{border-radius:var(--radius-full);background:linear-gradient(135deg, var(--primary-container) 0%, var(--primary) 100%);width:80px;height:80px;color:var(--text-inverse);box-shadow:0 4px 24px var(--primary-glow);justify-content:center;align-items:center;margin-bottom:16px;font-size:32px;font-weight:700;display:flex}.profile-name{margin-bottom:4px;font-size:20px;font-weight:600}.profile-status{color:var(--tertiary);font-size:14px}.profile-details{background-color:var(--bg-container);border-radius:var(--radius-md);flex-direction:column;gap:16px;padding:16px;display:flex}.detail-item{flex-direction:column;gap:4px;display:flex}.detail-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:12px}.profile-input{background:var(--bg-hover);border:1px solid var(--border-ghost);border-radius:var(--radius-sm);width:100%;color:var(--text-main);padding:8px 12px;font-family:inherit;font-size:14px}.profile-input:focus{border-color:var(--primary);outline:none}.profile-bio-textarea{background:var(--bg-hover);border:1px solid var(--border-ghost);border-radius:var(--radius-sm);width:100%;color:var(--text-main);resize:vertical;padding:12px;font-family:inherit;font-size:14px}.profile-bio-textarea:focus{border-color:var(--primary);outline:none}.edit-profile-btn,.save-profile-btn,.cancel-profile-btn{border-radius:var(--radius-sm);cursor:pointer;width:100%;padding:10px;font-family:inherit;font-size:14px;font-weight:500;transition:all .2s}.edit-profile-btn{border:1px solid var(--border-ghost);color:var(--text-main);background:0 0}.edit-profile-btn:hover{background:var(--bg-hover);border-color:var(--text-muted)}.save-profile-btn{background:var(--primary);color:var(--text-inverse);border:none;flex:2}.cancel-profile-btn{color:var(--text-muted);border:1px solid var(--border-ghost);background:0 0;flex:1}.profile-actions{margin-top:auto}.detail-value{color:var(--text-main);font-size:14px;font-weight:500}.primary-action-btn{border:1px solid var(--border-ghost);width:100%;color:var(--text-main);border-radius:var(--radius-full);cursor:pointer;background-color:#0000;padding:14px;font-family:inherit;font-size:14px;font-weight:600;transition:all .2s}.primary-action-btn:hover{background-color:var(--bg-container-highest)}.auth-container{background-color:var(--bg-lowest);justify-content:center;align-items:center;width:100vw;height:100vh;padding:24px;display:flex}.auth-card{background-color:var(--bg-container-low);border-radius:var(--radius-xl);width:100%;max-width:440px;padding:48px;box-shadow:0 24px 48px #0006}.auth-title{color:var(--primary);text-align:center;margin-bottom:8px;font-size:32px;font-weight:700}.auth-subtitle{color:var(--text-muted);text-align:center;margin-bottom:32px;font-size:15px}.auth-error{background-color:var(--error-container);color:var(--on-error-container);border-radius:var(--radius-md);text-align:center;margin-bottom:24px;padding:12px 16px;font-size:14px}.auth-form{flex-direction:column;gap:20px;display:flex}.input-group{flex-direction:column;gap:8px;display:flex}.input-group label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:13px;font-weight:600}.input-group input{background-color:var(--bg-container-highest);color:var(--text-main);border-radius:var(--radius-md);border:1px solid #0000;outline:none;padding:14px 16px;font-family:inherit;font-size:15px;transition:all .2s}.input-group input:focus{border-color:var(--primary);background-color:var(--bg-container)}.auth-btn{background:linear-gradient(135deg, var(--primary-container) 0%, var(--primary) 100%);color:var(--text-inverse);border-radius:var(--radius-full);cursor:pointer;border:none;margin-top:12px;padding:16px;font-size:16px;font-weight:700;transition:opacity .2s}.auth-btn:hover{opacity:.9}.auth-toggle{text-align:center;color:var(--text-muted);margin-top:32px;font-size:14px}.toggle-btn{color:var(--primary);cursor:pointer;background:0 0;border:none;margin-left:8px;font-family:inherit;font-weight:600;transition:color .2s}.toggle-btn:hover{color:var(--primary-container)}