/* Uply V2 final layout layer. Shared verbatim by website and Android assets. */
:root{--uply-ink:#18324d;--uply-surface:#fff;--uply-border:#e1e9f3;--visible-height:100dvh}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;color:var(--uply-ink)}
.hidden{display:none!important}
.app{height:var(--visible-height)!important;min-height:0!important;display:grid!important;grid-template-rows:auto auto minmax(0,1fr)!important;padding:0!important;gap:0!important}
.app.hidden{display:none!important}
#app>header{min-height:64px!important;height:auto!important;position:relative;z-index:60}
main{min-height:0;overflow:hidden;display:grid;grid-template-columns:350px minmax(0,1fr);margin:0!important;height:auto!important}
aside{display:flex;flex-direction:column;min-height:0}
.chatList{min-height:0;flex:1;overflow:auto}
.conversation{min-height:0;position:relative!important;inset:auto!important;overflow:hidden}
.chatPane{height:100%;min-height:0;display:flex;flex-direction:column}
.chatHeader{flex-shrink:0;min-height:64px}
.messages{min-height:0;flex:1 1 0;overflow:auto;overscroll-behavior:contain}
.msg{max-width:min(80%,740px)!important;word-break:break-word}
.msgActions{position:static!important;opacity:1!important;display:flex;justify-content:flex-end;gap:3px;margin:0 0 3px!important;transform:none!important}
.msgActionBtn{height:26px!important;width:28px!important;min-height:26px!important;border:0!important;background:transparent!important;box-shadow:none!important;font-size:13px!important}
.composer{flex:0 0 auto;display:flex!important;gap:8px!important;align-items:stretch!important}
.composer textarea{min-width:0;flex:1;max-height:120px;min-height:48px!important;margin:0!important}
.composer>button,.composerEmojiBtn{margin:0!important;height:48px!important;min-height:48px!important;align-self:flex-end!important;display:flex!important;align-items:center;justify-content:center;padding:0 12px!important}
.composerEmojiWrap{align-self:flex-end!important;height:48px!important}
.composer>.attachBtn,.composerEmojiBtn{width:44px!important;min-width:44px!important}
#mobileBack,#mobileMenu{display:none}
#syncSummary{flex:0 0 auto;font-size:11px;line-height:1.4;padding:6px 16px;color:#697f96;max-height:74px;overflow:auto;border-bottom:1px solid var(--uply-border)}
#syncSummary.syncProblem{background:#fff5e9;color:#885016}
#historyStatus{font-size:12px;color:#886016;background:#fff9eb;padding:0 12px;flex:0 0 auto}
#historyStatus:empty{display:none}
#historyStatus:not(:empty){padding:8px 12px}
.buildLabel{display:block;color:#7990a8;margin-top:16px;font-size:11px}
.loginWrap{height:var(--visible-height);min-height:0!important;overflow:auto;padding:24px}
.loginCard{width:min(420px,100%)!important;box-sizing:border-box}
.loginCard input{width:100%;font-size:16px}
.loginCard button{min-height:44px}
.imageDraftTray{flex:0 0 auto;max-height:160px;overflow:auto}
.imageDraftList{padding:10px 4px!important}
.draftFilename{display:block;word-break:break-all;font-size:11px;padding:6px;color:#355979}
.imageViewer{z-index:1000!important}.imageViewerPanel{width:100%;height:100%}
.imageViewerImg{max-height:85vh!important;max-width:95vw!important;object-fit:contain!important}
.imageViewerClose{min-width:44px;min-height:44px}
#connectionReport{width:100%;font:12px monospace;white-space:pre;resize:vertical}
#checkConnectionBtn{margin-top:8px}
#chatTitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filters{overflow-x:auto!important;flex-wrap:nowrap!important;min-height:54px;scrollbar-width:thin}
.filter{flex:0 0 auto}
.headerActions{display:flex;gap:6px}
.headerActions button{font-size:12px}
.pinnedMessagesBar{flex-shrink:0;max-height:92px;overflow:auto}
@media(max-width:800px){
  #app>header{min-height:52px!important;height:52px!important;padding:0 12px!important;gap:8px!important}
  #app>header .logo{font-size:22px!important;min-width:0}
  #app>header .logo span{display:none!important}
  #mobileMenu{display:flex!important;margin-left:auto;align-items:center;justify-content:center;width:42px;height:40px;font-size:28px;padding:0;background:#edf3ff;color:#204473;box-shadow:none}
  .headerActions{display:none!important}
  #app>header.menuOpen .headerActions{display:flex!important;position:absolute;right:8px;top:49px;flex-direction:column;align-items:stretch;width:230px;background:white;padding:12px;z-index:70;border:1px solid var(--uply-border);border-radius:12px;box-shadow:0 8px 25px #18324d26}
  .headerActions button{min-height:42px!important;font-size:14px}
  .filters{height:50px!important;min-height:50px!important;padding:6px 8px!important;gap:6px!important;scrollbar-width:none}
  .filter{padding:8px 12px!important;font-size:12px!important;margin:0!important;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  main{display:block!important;position:relative!important;min-height:0}
  aside{height:100%!important;width:100%!important;border-radius:0!important}
  .conversation{display:none!important}
  body.mobileChatOpen .conversation{display:block!important;position:absolute!important;inset:0!important;height:100%!important;width:100%!important;z-index:40;background:#f1f5fa}
  body.mobileChatOpen aside{visibility:hidden}
  #mobileBack{display:flex!important;align-items:center;justify-content:center;flex:0 0 38px;min-width:38px;width:38px;height:42px;background:#edf3fe;color:#244d7e;box-shadow:none;font-size:30px;padding:0}
  .chatHeader{padding:6px 8px!important;gap:7px!important;height:60px!important;min-height:60px!important}
  .chatHeader>div:first-of-type{flex:1;min-width:0}
  .chatHeader strong{font-size:15px!important}
  .chatHeaderActions{margin:0!important;gap:2px!important;flex-shrink:0}
  .chatActionBtn{width:32px!important;height:34px!important;min-width:32px!important;padding:0!important}
  .replyVia{display:none!important}
  .sideTop{padding:10px!important}
  .chatRow{border-radius:0!important;padding:12px!important}
  .messages{padding:10px 8px!important;gap:9px!important}
  .msg{max-width:92%!important;padding:8px 10px!important}
  .messageImage{max-width:100%!important;max-height:320px!important}
  .attachments audio{width:min(250px,100%)}
  .composer{padding:8px!important;gap:5px!important;flex-wrap:nowrap!important}
  .composer textarea{font-size:16px!important;min-height:44px!important;padding:10px!important;max-height:90px!important;border-radius:12px!important}
  .composer>button,.composerEmojiBtn{height:44px!important;min-height:44px!important;border-radius:12px!important}
  .composerEmojiWrap{height:44px!important}
  .composer>.attachBtn,.composerEmojiBtn{width:38px!important;min-width:38px!important;padding:0!important}
  #sendBtn{max-width:92px;font-size:12px!important;min-width:66px;padding:0 8px!important}
  .composerEmojiPicker{right:-40px!important;bottom:52px!important;grid-template-columns:repeat(5,36px)!important}
  .reactionPicker{position:static!important;max-width:100%;gap:2px!important;flex-wrap:wrap;margin-bottom:5px}
  .reactionChoice{width:32px!important;min-width:32px!important}
  .imageDraftHeader span{font-size:10px}
  .imageDraftTray{padding:8px!important;max-height:148px}
  .imageDraftItem,.imageDraftPreview{width:68px!important;height:68px!important;flex-basis:68px}
  .modal{width:calc(100vw - 20px)!important;max-height:calc(var(--visible-height) - 30px);padding:20px!important;overflow:auto}
  .toast{left:12px!important;right:12px!important;top:10px!important;max-width:none!important;z-index:1200!important}
  .loginWrap{padding:20px!important;align-items:center}
  .loginCard{padding:26px!important;border-radius:20px!important}
}

/* Status toasts must never intercept close/send/back taps. */
.toast{pointer-events:none!important}

/* ID-specific overrides beat inherited v1 attachment and send sizing. */
#chatPane .composer > #attachBtn,#chatPane .composer > #sendBtn,
#chatPane .composer .composerEmojiWrap,#chatPane .composer #composerEmojiBtn{
 height:48px!important;min-height:48px!important;max-height:48px!important;align-self:flex-end!important;
}
#chatPane .composer > #sendBtn{white-space:nowrap!important;max-width:none!important}
@media(max-width:800px){
 #chatPane .composer > #attachBtn,#chatPane .composer > #sendBtn,
 #chatPane .composer .composerEmojiWrap,#chatPane .composer #composerEmojiBtn{
  height:44px!important;min-height:44px!important;max-height:44px!important;align-self:flex-end!important;
 }
 #chatPane .composer > #sendBtn{font-size:11px!important;min-width:78px!important}
}