/* Small/short screens keep the existing desk style, prioritizing message history. */
.compact-chat .chat-heading{height:auto;min-height:60px;padding:8px 14px;gap:6px 8px;flex-wrap:wrap}
.compact-chat .chat-heading .avatar{display:none}
.compact-chat .chat-heading .chat-contact{order:0;flex:1 1 150px;min-width:0}
.compact-chat .chat-heading #mobile-back{order:-1}
.compact-chat .chat-heading #contact-info,
.compact-chat .chat-heading #close-conversation,
.compact-chat .chat-heading #reopen-conversation,
.compact-chat .chat-heading #auto-reply-mute{order:0;min-height:32px;padding:5px 8px;font-size:12px}
.compact-chat .chat-heading #chat-find{order:0;flex:0 1 130px;width:130px;max-width:130px;min-width:0;min-height:30px;margin:0}
.compact-chat .target-strip{padding:5px 14px;max-height:50px;overflow:auto}
.compact-chat .target-strip>span{min-width:0;overflow-wrap:anywhere}
.compact-chat .message-list{flex:1 1 0;min-height:0;padding:14px 16px}
.compact-chat .composer{position:relative;padding:4px 12px max(8px,env(safe-area-inset-bottom));min-width:0}
.compact-chat .reply-window{padding:4px 0;font-size:11px;max-height:52px;overflow:auto}
.compact-composer-row{display:flex;align-items:center;gap:8px;min-width:0;padding:2px 0 4px}
.compact-composer-row>button{flex:none;min-height:34px;padding:5px 10px;border-radius:999px;font-size:12px}
.compact-composer-row .send-mode-label{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin:0;min-width:0;white-space:nowrap;font-size:11px}
.compact-composer-row .send-mode-label select{width:auto;min-width:0;max-width:180px;margin:0;padding:5px 6px;min-height:34px;font-size:12px}
.compact-composer-row #composer-tools-toggle{margin-left:auto}
.compact-chat .composer textarea{height:60px;min-height:40px;margin:2px 0 6px;padding:8px 10px}
.compact-chat .composer-footer{min-height:34px;gap:8px}
.compact-chat .composer-footer .primary{min-height:34px;padding:6px 16px}
.compact-draft-row{display:flex;align-items:center;gap:8px;min-width:0;max-height:28px;overflow:auto;font-size:11px}
.compact-draft-row:has(#media-draft:empty):not(:has(button:not([hidden]))){display:none}
.compact-draft-row #media-draft{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compact-draft-row button{flex:none}
.compact-chat .media-draft-preview{max-height:76px;overflow:auto;flex-wrap:nowrap;margin:4px 0;padding:4px 8px;gap:4px}
.compact-chat .media-draft-cell{flex-direction:row;gap:6px}
.compact-chat .media-draft-file{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compact-chat .media-draft-cell .media-draft-thumbnail{width:40px;height:36px}
.compact-chat .media-draft-preview>span{font-size:10px}
.compact-composer-panel{position:absolute;z-index:15;left:12px;right:12px;bottom:calc(100% + 6px);max-height:min(280px,45dvh);overflow:auto;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px #23344b24}
.compact-composer-panel .media-toolbar{flex-wrap:wrap;overflow:visible;padding:0;gap:8px}
.compact-composer-panel .media-toolbar button,.compact-composer-panel select{min-height:36px;font-size:12px}
.compact-composer-panel select{max-width:100%;border:1px solid var(--line);border-radius:6px;padding:5px 8px;background:var(--paper)}
.compact-composer-panel .media-input-help{margin:10px 0 0}
@media(min-width:761px) and (max-width:1280px){
 .compact-chat.inbox-layout{grid-template-columns:250px minmax(0,1fr)}
 .compact-chat .detail-panel{display:none}
}
@media(max-width:760px){
 #app.mobile-chat:has(#page-inbox.compact-chat:not([hidden])) .topbar nav{display:none}
 .compact-chat .chat-heading{padding:6px 10px;gap:4px 6px}
 .compact-chat .chat-heading .chat-contact{flex:1 1 120px}
 .compact-chat .chat-heading #chat-find{flex:1 1 100px;max-width:none;min-height:32px}
 .compact-chat .message-list{padding:12px 10px}
 .compact-chat .composer textarea{font-size:16px;height:56px}
 .compact-composer-row{gap:6px}
 .compact-composer-row>button{min-height:36px;padding:5px 8px}
 .compact-composer-row .send-mode-label select{max-width:120px;min-height:36px}
 .compact-chat .composer-footer .primary{min-height:38px}
 .compact-chat .media-draft-preview>span{display:none}
}
@media(max-width:420px){
 .compact-composer-row .send-mode-label{font-size:0;gap:0}
 .compact-composer-row .send-mode-label select{font-size:12px;max-width:132px}
}
@media(max-height:650px){
 .compact-chat .chat-heading{min-height:42px;padding-top:4px;padding-bottom:4px}
 .compact-chat .composer textarea{height:44px;margin-bottom:4px}
 .compact-chat .reply-window{padding:2px 0;max-height:38px}
 .compact-chat .media-draft-preview{max-height:40px}
 .compact-chat .media-draft-cell .media-draft-thumbnail{width:32px;height:24px}
 .compact-chat .compact-draft-row{max-height:22px}
}
/* Low landscape windows (or an on-screen keyboard): keep navigation reachable
   via the existing back-to-list action, rather than clipping the send button. */
@media(max-height:540px){
 .compact-chat .target-strip{padding-top:2px;padding-bottom:2px;max-height:26px}
 .compact-chat .chat-heading{padding-top:2px;padding-bottom:2px}
 #app:has(#page-inbox.compact-chat:not([hidden])) .topbar{height:46px;min-height:46px;padding-top:4px;padding-bottom:4px}
 #app:has(#page-inbox.compact-chat:not([hidden])) .workspace-bar{height:auto;min-height:36px}
 #app:has(#page-inbox.compact-chat:not([hidden])) .app-footer{display:none}
 .compact-chat #send-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
 .compact-chat .composer textarea{margin:2px 0 0}
 .compact-chat .composer-footer #compose-hint{display:none}
 .compact-chat .composer-footer .primary{min-height:44px}
}
@media(max-height:540px) and (max-width:760px){
 #app.mobile-chat:has(#page-inbox:not([hidden])) .topbar{display:none}
}