.friends-page h2{font-size:18px;color:#76425f}.friend-discovery,.friend-requests,.friend-list,.friend-chat{background:#fffdfd;border:1px solid var(--border);border-radius:22px;padding:22px}.friend-discovery{margin-bottom:18px}.friend-discovery form{max-width:540px}.friend-discovery label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}.friend-discovery input{min-width:0;flex:1;border:1px solid var(--border);border-radius:13px;padding:11px 13px;color:#613e54;background:#fffafd}.friend-discovery>p{margin-top:12px}.friend-result{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid #f0e2ea}.friend-results{margin-top:18px}.friend-result strong{overflow-wrap:anywhere}.friend-requests{margin-bottom:18px}.friend-requests h2{margin-bottom:8px}.friends-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;align-items:start}.friend-list{padding:17px;max-height:660px;overflow:auto}.friend-list>h2{margin:4px 5px 18px}.friend-list>p{padding:10px}.friend-item{display:flex;gap:10px;align-items:center;text-align:left;width:100%;border:1px solid transparent;border-radius:16px;background:none;color:#614052;padding:12px 10px;margin-top:5px}.friend-item:hover{background:#fff3f8}.friend-item.selected{background:#fbe5ef;border-color:#edcddd}.friend-item .avatar{flex-shrink:0;width:38px;height:38px}.friend-info{display:grid;min-width:0;flex:1}.friend-info strong{overflow-wrap:anywhere;font-size:14px}.friend-status{font-size:12px;color:#8f7888}.friend-status::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#b8a8b2;margin-right:5px}.friend-status.online{color:#437863}.friend-status.online::before{background:#6b9b83}.friend-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#987888;font-size:12px}.friend-unread{border-radius:20px;background:#ac4775;color:white;font-size:11px;padding:1px 7px;flex-shrink:0}.friend-chat{min-width:0;padding:0;overflow:hidden}.friend-chat-heading{padding:19px 22px;display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border);align-items:center}.friend-chat-heading h2{overflow-wrap:anywhere}.friend-messages{height:365px;overflow:auto;overscroll-behavior:contain;padding:20px;display:flex;flex-direction:column;gap:14px;background:#fff9fc}.friend-bubble{align-self:flex-start;max-width:85%;padding:11px 15px;border-radius:16px 16px 16px 4px;background:#f0e8f8;color:#644b73;flex-shrink:0}.friend-bubble.own{align-self:flex-end;background:#f9dfeb;border-radius:16px 16px 4px 16px;color:#74445d}.friend-bubble p{font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}.friend-bubble time{display:block;font-size:10px;color:#896d80;margin-top:5px}.friend-chat form{padding:17px 20px;border-top:1px solid var(--border)}.friend-chat textarea{width:100%;min-height:85px;max-height:200px;resize:vertical;border:1px solid var(--border);border-radius:13px;background:#fffafd;padding:12px;color:#624052;margin-bottom:9px}.friend-welcome{min-height:440px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:24px;text-align:center}.friend-welcome>span{font-size:65px;color:#dfa8c3}.friend-welcome p{color:var(--muted);font-size:14px}.nav-count{font-style:normal;background:#a64b78;color:white;border-radius:12px;padding:0 6px;font-size:10px;margin-left:4px}
@media(max-width:1000px){.friends-layout{grid-template-columns:220px minmax(0,1fr)}}
@media(max-width:700px){.friends-layout{grid-template-columns:1fr}.friend-list{max-height:260px}.friend-discovery,.friend-requests{padding:18px}.friend-result{flex-wrap:wrap}.friend-messages{height:340px;padding:15px}.friend-chat-heading{padding:17px}.friend-chat form{padding:15px}.friend-chat form .small{font-size:11px}.friend-welcome{min-height:200px}.friend-bubble{max-width:92%}}

.friend-back{display:none}.is-conversation>.friend-back{display:inline-block}.is-conversation>.page-heading,.is-conversation>.friend-discovery,.is-conversation>.friend-requests,.is-conversation .friend-list{display:none}.is-conversation .friends-layout{display:block}.is-conversation .friend-chat{max-width:1000px;margin:auto}.is-conversation .friend-messages{height:clamp(280px,48vh,600px)}.voice-compose{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:15px 20px;background:#fff7fb}.voice-compose audio{max-width:100%;height:36px}.voice-message{display:grid;gap:7px;max-width:100%}.voice-message audio{width:260px;max-width:100%;height:36px}.voice-message>span{font-size:12px}.direct-call-panel{margin-bottom:24px}.direct-call-panel h2{font-size:18px}.direct-call-panel .discussion-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:650px}.direct-call-panel [data-call-status]{margin:12px 0}.direct-call-panel [data-ringing]{margin-bottom:12px}@media(max-width:600px){.friend-chat-heading{flex-wrap:wrap}.voice-message audio{width:210px}.voice-compose{padding:12px}.is-conversation .friend-messages{height:42vh}}
.friends-page:not(.is-conversation) .friend-chat{display:none}.friends-page:not(.is-conversation) .friends-layout{display:block}.friends-page:not(.is-conversation) .friend-list{max-width:760px}.direct-call-panel [hidden]{display:none!important}
.friend-attachment{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}.friend-attachment>span{overflow-wrap:anywhere;min-width:0;flex:1}.friend-file-link{display:block;overflow-wrap:anywhere;color:inherit;text-decoration:underline}.friend-file-link small{display:block;margin-top:6px}.library-item-actions{margin-top:12px}

/* Shared spacing for attachment and voice controls. */
.chat-compose-tools{display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px 24px;padding:14px 20px 4px;border-top:1px solid var(--border);background:#fffafd}
.chat-compose-tools .friend-attachment,.chat-compose-tools .voice-compose{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;flex:1 1 265px;min-width:0;margin:0;padding:0;background:transparent}
.chat-compose-tools .btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;margin:0;padding:7px 12px;font-size:13px;line-height:20px;border-radius:12px;white-space:nowrap;cursor:pointer;box-shadow:none}
.chat-compose-tools .small,.chat-compose-tools [role=status]{font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.chat-compose-tools .friend-attachment>span{flex:1 1 150px}
.chat-compose-tools .voice-compose audio{width:240px;max-width:100%;min-width:0}
.chat-compose-tools+#friend-message-form{border-top:0;padding-top:12px;background:#fffafd}
@media(max-width:700px){.chat-compose-tools{padding:12px 15px 0;gap:10px 16px}.chat-compose-tools .friend-attachment,.chat-compose-tools .voice-compose{flex-basis:100%}.chat-compose-tools .friend-attachment>span{flex-basis:130px}}