/* Milo v0.4.9 — responsive layout */

/* Let the app use the real viewport instead of the old desktop-only minimum. */
html,body{width:100%;max-width:100%;height:100%;}
body{min-width:0;}
.app,.conversation{height:100vh;height:100dvh;}
.mobileBack{display:none;}

/* New header tools should always participate in responsive layout. */
.headerInfo{min-width:0;}
.chatSearchBtn{
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  margin-left:auto;
}
.messageSearchPanel{max-width:calc(100% - 28px);}

/* Compact desktop / tablet landscape. */
@media (max-width:1120px){
  .app{grid-template-columns:minmax(260px,300px) minmax(0,1fr);}
  .details{display:none;}
}

@media (max-width:900px) and (min-width:761px){
  .app{grid-template-columns:270px minmax(0,1fr);}
  .sidebar{padding-left:10px;padding-right:10px;}
  .header{padding-left:14px;padding-right:14px;}
  .chatSearchBtn{flex-basis:36px;width:36px;height:36px;}
  .messageSearchPanel{top:70px;right:10px;width:min(390px,calc(100% - 20px));}
  .messages{padding-left:22px;padding-right:22px;}
  .bubble{max-width:80%;}
  .composer{padding-left:12px;padding-right:12px;}
  .emojiPanel{left:285px;}
}

/* Phone / small tablet portrait: chats and conversation become two full screens. */
@media (max-width:760px){
  body{height:100vh;height:100dvh;overflow:hidden;}

  .app{
    position:relative;
    display:block;
    width:100%;
    height:100vh;
    height:100dvh;
    overflow:hidden;
    background:var(--bg);
  }

  .sidebar,.conversation{
    position:absolute;
    inset:0;
    width:100%;
    height:100vh;
    height:100dvh;
    transition:transform .22s ease,opacity .22s ease;
    will-change:transform;
  }

  .sidebar{
    z-index:2;
    padding:calc(12px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
    border-right:0;
    transform:translateX(0);
    opacity:1;
  }

  .conversation{
    z-index:3;
    transform:translateX(100%);
    background:#f7f6f2;
  }

  .app.mobile-chat-open .sidebar{
    transform:translateX(-18%);
    opacity:.45;
    pointer-events:none;
  }
  .app.mobile-chat-open .conversation{transform:translateX(0);}

  .details{display:none!important;}

  .brandRow{padding:0 6px 12px;}
  .brand{font-size:27px;}
  .search{margin-bottom:8px;}
  .chatRow{padding:10px 8px;border-radius:16px;}
  .avatar{width:46px;height:46px;flex-basis:46px;border-radius:16px;}
  .me{padding:10px 4px 0;gap:7px;}
  .meInfo{min-width:0;}
  .meInfo strong,.meInfo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
  .me .iconBtn{width:36px;height:36px;flex:0 0 36px;font-size:19px;}

  .header{
    height:64px;
    flex:0 0 64px;
    padding:calc(7px + env(safe-area-inset-top)) 8px 7px;
    gap:7px;
  }
  .header .avatar{width:40px;height:40px;flex-basis:40px;border-radius:14px;}
  .headerInfo{min-width:0;flex:1 1 auto;}
  .headerInfo strong,.headerInfo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}

  .mobileBack{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    flex:0 0 36px;
    border:0;
    border-radius:12px;
    background:transparent;
    color:#6f6c67;
    font-size:27px;
    line-height:1;
    cursor:pointer;
    padding:0 0 2px;
  }
  .mobileBack:active{background:#ece9e3;}

  .chatSearchBtn{
    display:grid!important;
    place-items:center;
    visibility:visible!important;
    opacity:1!important;
    flex:0 0 36px;
    width:36px;
    height:36px;
    margin-left:0;
    border-radius:12px;
    font-size:20px;
  }

  .messageSearchPanel{
    position:absolute;
    top:calc(64px + env(safe-area-inset-top));
    left:8px;
    right:8px;
    width:auto;
    max-width:none;
    border-radius:16px;
    z-index:25;
  }
  .messageSearchBar{height:44px;}
  .messageSearchResults{max-height:42vh;max-height:42dvh;}
  .messageSearchResult{padding:11px 10px;}
  .messageSearchResultText{font-size:14px;}

  .messages{
    padding:14px 10px 12px;
    scrollbar-gutter:auto;
    -webkit-overflow-scrolling:touch;
  }
  .day{margin-bottom:16px;}
  .msgLine{margin:7px auto;}
  .bubble{max-width:82%;padding:10px 11px 7px 12px;border-radius:17px 17px 17px 5px;}
  .mine .bubble{border-radius:17px 17px 5px 17px;}
  .bubble span{font-size:14px;max-width:none;}
  .attachmentImg{width:min(300px,72vw);height:auto;max-height:340px;aspect-ratio:3/2;object-fit:cover;}
  .fileCard{max-width:72vw;overflow-wrap:anywhere;}

  .composerWrap{padding-bottom:env(safe-area-inset-bottom);}
  .composer{
    min-height:62px;
    padding:8px 8px;
    gap:6px;
    border-top:0;
  }
  .composer textarea{
    min-height:42px;
    max-height:104px;
    border-radius:16px;
    padding:11px 12px;
  }
  .attachBtn,.emojiBtn{width:38px;height:38px;flex:0 0 38px;border-radius:13px;font-size:19px;}
  .send{width:40px;height:40px;flex:0 0 40px;border-radius:14px;}

  .replyDraft{margin:6px 9px -2px;padding:8px 34px 8px 11px;}
  .draftAttachments{padding:8px 9px 0;gap:6px;}
  .draftAttachment{width:72px;height:72px;border-radius:12px;}

  .newMessagesBtn{right:10px;bottom:calc(76px + env(safe-area-inset-bottom));padding:8px 11px;}

  .emojiPanel{
    left:8px;
    right:8px;
    bottom:calc(70px + env(safe-area-inset-bottom));
    grid-template-columns:repeat(6,minmax(36px,1fr));
    gap:3px;
    padding:8px;
  }
  .emojiPanel button{width:100%;height:38px;}

  .modalWrap{align-items:end;padding-top:env(safe-area-inset-top);}
  .modal{
    width:100%;
    max-width:none;
    max-height:88vh;
    max-height:88dvh;
    border-radius:24px 24px 0 0;
    padding:20px 16px calc(18px + env(safe-area-inset-bottom));
  }

  .toast{
    max-width:calc(100vw - 24px);
    bottom:calc(16px + env(safe-area-inset-bottom));
    text-align:center;
  }

  .dropOverlay{display:none!important;}

  .authScreen{
    min-height:100vh;
    min-height:100dvh;
    height:auto;
    padding:calc(16px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
  }
  .authCard{width:min(390px,100%);padding:26px 20px;border-radius:24px;}
  .authLogo{font-size:38px;}
}

/* Message controls must remain usable on touch devices where :hover doesn't exist. */
@media (hover:none),(pointer:coarse){
  .msgActions{
    opacity:1;
    pointer-events:auto;
    display:flex;
    flex-wrap:wrap;
    width:62px;
    gap:3px;
    margin-left:5px;
    margin-top:2px;
  }
  .msgActions button{width:28px;height:28px;}
  .bubble{max-width:calc(100% - 70px);}
  .mine .msgActions{order:-1;margin-left:0;margin-right:5px;}
}

@media (max-width:420px){
  .header{gap:5px;padding-left:5px;padding-right:5px;}
  .mobileBack,.chatSearchBtn{width:34px;height:34px;flex-basis:34px;}
  .header .avatar{width:38px;height:38px;flex-basis:38px;}
  .headerInfo strong{font-size:14px;}
  .headerInfo span{font-size:11px;}
}

@media (max-width:360px){
  .meInfo span{display:none;}
  .messages{padding-left:7px;padding-right:7px;}
  .composer{padding-left:6px;padding-right:6px;gap:4px;}
  .attachBtn,.emojiBtn{width:36px;height:36px;flex-basis:36px;}
  .send{width:38px;height:38px;flex-basis:38px;}
  .header .avatar{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .sidebar,.conversation{transition:none!important;}
}