.messages-app { position: relative; height: 100%; overflow: hidden; background: #000; }
.messages-app > .app-header { border-bottom: 1px solid #2c2c2e; }
.thread-list { height: calc(100% - 58px); overflow-y: auto; }
.thread-row { width: calc(100% - 16px); min-height: 72px; display: flex; align-items: center; gap: 11px; margin-left: 16px; padding: 9px 17px 9px 0; border-bottom: 1px solid #38383a; text-align: left; }
.thread-avatar { display: grid; place-items: center; flex: 0 0 46px; height: 46px; border-radius: 50%; background: linear-gradient(145deg, #707075, #303034); color: #e5e5ea; box-shadow: inset 0 0 0 1px #ffffff14; }
.thread-avatar svg { width: 25px; height: 25px; }
.thread-main { min-width: 0; flex: 1; }
.thread-top { display: flex; align-items: center; gap: 7px; }
.thread-number { flex: 1; font-size: 15px; font-weight: 620; }
.thread-time { color: #8e8e93; font-size: 11px; }
.thread-preview { display: block; overflow: hidden; margin-top: 3px; color: #8e8e93; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: #0a84ff; }
.conversation { position: absolute; z-index: 5; inset: 0; display: flex; flex-direction: column; background: #000; animation: screenIn .5s cubic-bezier(.18, 1.3, .25, 1); }
@keyframes screenIn { from { transform: translateX(45px); opacity: .25; } }
.conversation-header { flex: 0 0 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 4px 12px 0; border-bottom: 1px solid #2c2c2e; }
.conversation-header strong { font-size: 13px; font-weight: 620; }
.message-list { min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; overflow-y: auto; padding: 13px 11px 8px; }
.message-bubble { max-width: 78%; padding: 8px 11px; border-radius: 18px; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; white-space: pre-wrap; }
.message-bubble.incoming { align-self: flex-start; border-bottom-left-radius: 5px; background: #2c2c2e; }
.message-bubble.outgoing { align-self: flex-end; border-bottom-right-radius: 5px; background: #0a84ff; }
.message-form { display: flex; align-items: flex-end; gap: 7px; padding: 7px 10px 9px; border-top: 1px solid #1c1c1e; }
.message-form textarea { min-height: 34px; flex: 1; max-height: 82px; resize: none; border: 1px solid #3a3a3c; border-radius: 18px; padding: 8px 12px; background: #1c1c1e; font-size: 13px; line-height: 17px; }
.message-form button { flex: 0 0 31px; height: 31px; padding: 6px; border-radius: 50%; background: #0a84ff; }
.new-message-sheet { position: absolute; z-index: 8; inset: 50px 8px auto; padding: 0 13px 18px; border: 1px solid #ffffff17; border-radius: 20px; background: #1c1c1eF7; box-shadow: 0 26px 80px #000d; backdrop-filter: blur(30px); animation: sheetIn .5s cubic-bezier(.18, 1.4, .25, 1); }
@keyframes sheetIn { from { transform: translateY(-22px) scale(.92); opacity: 0; } }
.new-message-sheet header { height: 47px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.new-message-sheet header button:last-child { text-align: right; }
.new-message-sheet label { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid #38383a; border-bottom: 1px solid #38383a; color: #8e8e93; font-size: 13px; }
.new-message-sheet input { min-width: 0; flex: 1; background: transparent; }