.add-friend{margin-top:14px;height:34px;padding:0 12px;border:0;border-radius:17px;background:var(--md-primary-container);color:var(--md-on-primary-container);font:700 9px 'DM Sans';cursor:pointer;display:inline-flex;align-items:center;gap:5px}.add-friend .material-symbols-rounded{font-size:15px}.add-friend.added{background:var(--md-primary);color:var(--md-on-primary)}.messages-fab,.notifications-fab{position:fixed;right:24px;z-index:84;width:58px;height:58px;border:0;border-radius:18px;color:var(--md-on-primary);box-shadow:0 8px 24px rgba(30,54,38,.28);display:grid;place-items:center;cursor:pointer}.messages-fab{bottom:24px;background:var(--md-primary)}.notifications-fab{bottom:92px;background:#2f4f3a}.messages-fab i,.notifications-fab i{position:absolute;right:-5px;top:-5px;min-width:22px;height:22px;border-radius:12px;padding:0 6px;background:#ba1a1a;color:#fff;border:2px solid var(--md-surface,#fff);font:900 10px 'DM Sans';display:grid;place-items:center;box-shadow:0 5px 12px rgba(186,26,26,.32)}.messages-fab i[hidden],.notifications-fab i[hidden]{display:none}.notifications-panel{position:fixed;right:16px;bottom:160px;z-index:121;width:min(390px,calc(100% - 32px));max-height:min(560px,calc(100vh - 180px));border:1px solid rgba(255,255,255,.42);border-radius:28px;background:rgba(246,251,246,.95);color:var(--md-on-surface);backdrop-filter:blur(24px);box-shadow:0 22px 70px rgba(20,34,25,.3);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(16px) scale(.98);transition:.23s}.notifications-panel.open{opacity:1;visibility:visible;transform:none}.notifications-panel>header{height:68px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--md-outline-variant)}.notifications-panel>header>div{display:flex;align-items:center;gap:10px}.notifications-panel>header h2{font-size:17px}.notifications-panel>header small{font-size:9px;color:var(--md-primary)}.notifications-panel>header button{width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}.notifications-list{max-height:390px;overflow:auto;padding:12px;display:grid;gap:8px}.notifications-list>p{margin:0;padding:22px 12px;color:var(--md-on-surface-variant);font-size:12px;line-height:1.5}.notification-item{display:grid;grid-template-columns:38px 1fr;gap:10px;padding:11px;border-radius:18px;background:rgba(255,255,255,.48);border:1px solid rgba(255,255,255,.54);cursor:pointer}.notification-item.unread{box-shadow:inset 3px 0 0 #ba1a1a}.notification-item>.material-symbols-rounded{width:38px;height:38px;border-radius:14px;background:var(--md-primary-container);color:var(--md-on-primary-container);display:grid;place-items:center}.notification-item b{font-size:12px}.notification-item p{margin:3px 0;color:var(--md-on-surface-variant);font-size:10px;line-height:1.4}.notification-item small{font-size:8px;color:var(--md-outline)}.notification-item.read{opacity:.7}.notifications-panel>footer{height:54px;padding:8px 12px;display:flex;gap:8px;border-top:1px solid var(--md-outline-variant)}.notifications-panel>footer button{flex:1;border:0;border-radius:16px;background:var(--md-surface-container);color:var(--md-on-surface);font:800 10px 'DM Sans';cursor:pointer}.friend-chat{position:fixed;right:16px;bottom:16px;z-index:120;width:min(720px,calc(100% - 32px));height:min(600px,calc(100vh - 32px));border:1px solid rgba(255,255,255,.4);border-radius:28px;background:rgba(246,251,246,.94);color:var(--md-on-surface);backdrop-filter:blur(24px);box-shadow:0 22px 70px rgba(20,34,25,.3);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(20px) scale(.98);transition:.23s}.friend-chat.open{opacity:1;visibility:visible;transform:none}.friend-chat>header{height:68px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--md-outline-variant)}.friend-chat>header>div{display:flex;align-items:center;gap:10px}.friend-chat>header h2{font-size:17px}.friend-chat>header small{font-size:9px;color:#39804c}.friend-chat>header button{width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}.friend-chat-body{height:calc(100% - 68px);display:grid;grid-template-columns:210px 1fr}.friends-list{padding:12px;border-right:1px solid var(--md-outline-variant);overflow:auto}.friends-list>p{padding:18px 10px;color:var(--md-on-surface-variant);font-size:11px;line-height:1.5}.friends-list button{width:100%;padding:9px;border:0;border-radius:16px;background:transparent;color:inherit;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer}.friends-list button:hover,.friends-list button.active{background:var(--md-primary-container)}.friends-list button>span:last-child{display:flex;flex-direction:column}.friends-list b{font-size:11px}.friends-list small{font-size:8px;color:var(--md-on-surface-variant)}.friend-avatar{width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:var(--md-secondary-container);display:grid;place-items:center;font:800 10px Manrope}.conversation{min-width:0}.conversation-empty{height:100%;display:grid;place-content:center;text-align:center;color:var(--md-on-surface-variant)}.conversation-empty .material-symbols-rounded{font-size:38px}.conversation-empty h3{margin:8px 0 2px}.conversation-empty p{font-size:10px}.conversation-active{height:100%;display:grid;grid-template-rows:58px 1fr auto auto}.conversation-person{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--md-outline-variant)}.conversation-person h3{font-size:12px}.conversation-person small{font-size:8px;color:var(--md-on-surface-variant)}.direct-messages{padding:16px;overflow:auto;display:flex;flex-direction:column;gap:8px}.direct-message{max-width:78%;padding:10px 13px;border-radius:17px;font-size:11px;line-height:1.4;overflow-wrap:anywhere}.direct-message.mine{align-self:flex-end;background:var(--md-primary);color:var(--md-on-primary);border-bottom-right-radius:5px}.direct-message.theirs{align-self:flex-start;background:var(--md-surface-container);border-bottom-left-radius:5px}.direct-message a{color:inherit;font-weight:700}.direct-message img{display:block;max-width:220px;max-height:160px;margin-bottom:7px;border-radius:10px}.emoji-picker{padding:8px 12px;border-top:1px solid var(--md-outline-variant);background:var(--md-surface-container)}.emoji-picker button{border:0;background:transparent;padding:5px;font-size:18px;cursor:pointer}.direct-compose{height:58px;padding:8px;display:flex;align-items:center;gap:4px;border-top:1px solid var(--md-outline-variant)}.direct-compose button{width:38px;height:38px;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--md-on-surface-variant);cursor:pointer}.direct-compose button:hover{background:var(--md-surface-container)}.direct-compose input{flex:1;min-width:0;height:40px;border:0;outline:0;border-radius:20px;padding:0 14px;background:var(--md-surface-container);color:var(--md-on-surface);font:500 11px 'DM Sans'}.direct-compose .send-direct{background:var(--md-primary);color:var(--md-on-primary)}:root[data-theme="dark"] .friend-chat,:root[data-theme="dark"] .notifications-panel{background:rgba(26,33,28,.95);border-color:rgba(255,255,255,.08)}:root[data-theme="dark"] .notification-item{background:rgba(18,24,20,.72);border-color:rgba(255,255,255,.08)}@media(max-width:600px){.friend-chat{inset:8px;width:auto;height:auto;border-radius:22px}.friend-chat-body{grid-template-columns:82px 1fr}.friends-list{padding:7px}.friends-list button{justify-content:center}.friends-list button>span:last-child{display:none}.messages-fab{right:16px;bottom:16px}.notifications-fab{right:16px;bottom:84px}.notifications-panel{right:8px;left:8px;bottom:150px;width:auto}}
.friends-sidebar{padding:12px;border-right:1px solid var(--md-outline-variant);overflow:auto}.friends-sidebar .friends-list{padding:0;border:0;overflow:visible}.user-search label{display:block;margin:2px 4px 7px;color:var(--md-on-surface-variant);font:700 8px 'DM Sans';text-transform:uppercase;letter-spacing:.6px}.user-search>div{height:38px;display:flex;align-items:center;border:1px solid var(--md-outline-variant);border-radius:13px;padding-left:10px;background:var(--md-surface-container)}.user-search>div>span{font-size:11px;font-weight:800;color:var(--md-primary)}.user-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--md-on-surface);font:600 10px 'DM Sans'}.user-search button{width:34px;height:34px;border:0;background:transparent;color:var(--md-on-surface-variant);display:grid;place-items:center;cursor:pointer}.user-search button span{font-size:18px}.user-results{margin:8px 0;border-bottom:1px solid var(--md-outline-variant)}.user-result{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:7px;padding:8px 3px}.user-result .friend-avatar{width:34px;height:34px}.user-result>span{min-width:0}.user-result b,.user-result small{display:block;overflow:hidden;text-overflow:ellipsis}.user-result small{color:var(--md-primary)}.user-result button{width:28px;height:28px;border:0;border-radius:50%;background:var(--md-primary);color:var(--md-on-primary);display:grid;place-items:center;cursor:pointer}.user-result button span{font-size:16px}.search-feedback{padding:8px 4px;color:var(--md-on-surface-variant);font-size:9px}@media(max-width:600px){.friend-chat-body{grid-template-columns:106px 1fr}.friends-sidebar{padding:7px}.user-search label{display:none}.user-search>div{padding-left:6px}.user-result{grid-template-columns:1fr}.user-result>span,.user-result>.friend-avatar{display:none}.user-result button{margin:auto}}
.user-result .friend-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}

/* Stable media/emoji chat layout */
.friend-chat,.friend-chat *{box-sizing:border-box}
.friend-chat-body{min-height:0;grid-template-columns:210px minmax(0,1fr)}
.conversation{min-width:0;min-height:0;overflow:hidden}
.conversation-active{min-height:0;grid-template-rows:58px minmax(0,1fr) auto auto auto auto}
.conversation-person{min-width:0}
.conversation-person-copy{min-width:0}
.conversation-person h3,.conversation-person small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.direct-messages{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain}
.direct-message{max-width:min(78%,320px);min-width:0;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;contain:layout paint}
.direct-message a{display:inline-flex;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.direct-message img{display:block;width:min(100%,240px);max-width:100%;max-height:180px;object-fit:cover;border-radius:12px;background:rgba(0,0,0,.08)}
.direct-message.file-message{padding:7px}
.direct-message.file-message a{margin:2px 6px 5px}
.direct-message.emoji-only{font-size:26px;line-height:1.15;letter-spacing:.02em;padding:9px 12px}
.emoji-picker{max-height:96px;overflow:auto;display:flex;flex-wrap:wrap;gap:3px}
.emoji-picker[hidden]{display:none}
.emoji-picker button{line-height:1;border-radius:10px}
.direct-compose{min-height:58px;box-sizing:border-box}
.direct-compose button{flex:0 0 38px}
.friends-list button>span:last-child{min-width:0}
.friends-list b,.friends-list small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){.friend-chat-body{grid-template-columns:106px minmax(0,1fr)}.direct-message{max-width:min(86%,260px)}.direct-message img{width:min(100%,210px);max-height:150px}}