:root{--bg:#f5f4f1;--panel:#fff;--panel2:#efede8;--text:#1e1e1e;--muted:#8b8882;--accent:#6d5dfb;--soft:#e9e5ff;--border:#e5e2dc;--ok:#36b37e;--danger:#d94d4d}
*{box-sizing:border-box}
body{margin:0;min-width:980px;height:100vh;overflow:hidden;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}
button,input,textarea{font:inherit}
.hidden{display:none!important}
.authScreen{height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,rgba(109,93,251,.10),transparent 32%),#f7f6f2}
.authCard{width:390px;background:white;padding:34px;border-radius:28px;box-shadow:0 18px 60px rgba(0,0,0,.08)}
.authLogo{font-size:42px;font-weight:800;letter-spacing:-3px;margin-bottom:8px}
.authCard p{color:var(--muted);margin:0 0 24px}
.tabs{display:flex;background:#efede8;border-radius:14px;padding:4px;margin-bottom:18px}
.tabs button{flex:1;border:0;background:transparent;padding:9px;border-radius:10px;cursor:pointer}
.tabs button.active{background:white;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.field{margin:11px 0}
.field label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px 4px}
.field input{width:100%;border:1px solid var(--border);outline:none;border-radius:14px;padding:12px 14px;background:#faf9f6}
.primary{width:100%;border:0;background:var(--accent);color:white;border-radius:14px;padding:13px;cursor:pointer;font-weight:700;margin-top:8px}
.error{font-size:12px;color:var(--danger);margin-top:12px;min-height:17px}
.note{font-size:11px!important;margin-top:14px!important}
.app{height:100vh;display:grid;grid-template-columns:320px minmax(420px,1fr) 280px}
.sidebar{display:flex;flex-direction:column;padding:20px 14px 14px;background:rgba(255,255,255,.82);border-right:1px solid var(--border)}
.brandRow{display:flex;align-items:center;justify-content:space-between;padding:0 8px 18px}
.brand{font-size:28px;font-weight:800;letter-spacing:-1.8px}
.iconBtn{border:0;background:transparent;width:38px;height:38px;border-radius:12px;cursor:pointer;color:#6f6c67;font-size:22px}
.iconBtn:hover{background:#ece9e3}
.search{height:42px;margin:0 4px 12px;padding:0 12px;display:flex;align-items:center;gap:8px;background:#eeece7;border-radius:14px;color:#8d8a84}
.search input{border:0;outline:0;background:transparent;width:100%;color:var(--text)}
.chatList{flex:1;overflow:auto}
.chatRow{width:100%;border:0;background:transparent;display:flex;gap:11px;padding:11px 10px;margin-bottom:2px;border-radius:18px;cursor:pointer;text-align:left}
.chatRow:hover{background:#f0efeb}.chatRow.active{background:var(--soft)}
.avatar{width:48px;height:48px;flex:0 0 48px;border-radius:18px;background:#ddd9ff;display:grid;place-items:center;font-weight:700;position:relative}
.chatText{min-width:0;flex:1}.topline,.bottomline{display:flex;align-items:center;justify-content:space-between;gap:8px}
.topline strong{font-size:14px}.topline span{font-size:11px;color:#98958f}.bottomline{margin-top:5px;font-size:13px;color:#85827c}
.preview{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:white;display:grid;place-items:center;font-size:11px;font-weight:700}
.empty{padding:30px 18px;color:var(--muted);font-size:13px;text-align:center;line-height:1.5}
.me{display:flex;align-items:center;gap:10px;padding:12px 8px 2px;border-top:1px solid #eeeae3}
.meInfo{display:flex;flex-direction:column;flex:1}.meInfo strong{font-size:14px}.meInfo span{font-size:12px;color:#96938d;margin-top:2px}
.conversation{min-width:0;display:flex;flex-direction:column;background:#f7f6f2;min-height:0;overflow:hidden}
.header{height:74px;padding:12px 20px;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.67);border-bottom:1px solid var(--border)}
.headerInfo{display:flex;flex-direction:column;flex:1}.headerInfo strong{font-size:15px}.headerInfo span{font-size:12px;color:var(--muted);margin-top:3px}
.messages{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:24px 32px;background:radial-gradient(circle at 15% 20%,rgba(109,93,251,.05),transparent 28%),radial-gradient(circle at 85% 70%,rgba(240,174,134,.07),transparent 26%),#f7f6f2}
.day{width:max-content;margin:0 auto 24px;padding:6px 10px;border-radius:12px;background:#eae8e1;color:#86837e;font-size:11px}
.msgLine{display:flex;margin:8px auto;max-width:920px}.msgLine.mine{justify-content:flex-end}
.bubble{max-width:72%;padding:11px 12px 7px 14px;border-radius:18px 18px 18px 6px;background:white;box-shadow:0 1px 1px rgba(0,0,0,.04)}
.mine .bubble{background:var(--accent);color:white;border-radius:18px 18px 6px 18px}
.bubble span{font-size:14px;line-height:1.4;display:block;max-width:50ch;white-space:pre-wrap;overflow-wrap:anywhere}.bubble time{font-size:9px;opacity:.62;margin-left:10px;white-space:nowrap}.readMark{font-size:10px;margin-left:4px;opacity:.72}.typing{color:var(--accent)!important;font-weight:600}
.composer{min-height:76px;padding:12px 18px;max-width:980px;margin:0 auto;width:100%;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.77);border-top:1px solid var(--border)}
.composer textarea{flex:1;resize:none;min-height:46px;max-height:120px;border:0;outline:0;background:var(--panel2);border-radius:18px;padding:13px 15px}
.send{width:42px;height:42px;border:0;border-radius:16px;background:var(--accent);color:#fff;cursor:pointer;font-size:21px}
.details{border-left:1px solid var(--border);background:#fbfaf7;padding:28px 22px;text-align:center}
.bigAvatar{width:86px;height:86px;margin:12px auto 13px;border-radius:30px;background:#ddd9ff;display:grid;place-items:center;font-size:25px;font-weight:800}
.details h2{font-size:18px;margin:0}.details>p{font-size:12px;color:var(--muted);margin:6px 0 24px}
.modalWrap{position:fixed;inset:0;background:rgba(0,0,0,.25);display:grid;place-items:center;z-index:30}
.modal{width:430px;max-height:70vh;overflow:auto;background:white;border-radius:24px;padding:22px;box-shadow:0 30px 90px rgba(0,0,0,.2)}
.modalHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.userRow{display:flex;align-items:center;gap:11px;width:100%;border:0;background:#f7f5f1;border-radius:16px;padding:10px;margin:7px 0;cursor:pointer;text-align:left}
.userRow:hover{background:var(--soft)}.userRow .avatar{width:42px;height:42px;flex-basis:42px;border-radius:15px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#1f1f1f;color:white;padding:10px 14px;border-radius:14px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.msgActions{display:inline-flex;gap:4px;margin-left:7px;opacity:0;transition:.15s}
.msgLine:hover .msgActions{opacity:1}
.msgActions button{border:0;background:#ebe8e2;border-radius:9px;width:27px;height:27px;font-size:12px}
.replyBox{border-left:3px solid rgba(109,93,251,.55);padding:5px 8px;margin-bottom:6px;background:rgba(109,93,251,.08);border-radius:7px;font-size:11px}
.mine .replyBox{border-left-color:rgba(255,255,255,.7);background:rgba(255,255,255,.12)}
.reactions{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.reaction{border:0;background:#eeeafc;border-radius:12px;padding:3px 7px;font-size:12px}
.mine .reaction{background:rgba(255,255,255,.16);color:white}
.draftAttachments{display:none;gap:8px;flex-wrap:wrap;padding:10px 18px 0;max-width:980px;margin:0 auto;width:100%}
.draftAttachments.hasFiles{display:flex}
.draftAttachment{position:relative;width:92px;height:92px;border-radius:14px;overflow:hidden;background:#eceae5;border:1px solid #ddd9d2}
.draftAttachment img{width:100%;height:100%;object-fit:cover;display:block}
.draftAttachment .fileFallback{height:100%;display:flex;align-items:center;justify-content:center;padding:8px;text-align:center;font-size:11px;color:#666}
.draftAttachment .removeDraftFile{position:absolute;top:5px;right:5px;width:24px;height:24px;border:0;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;cursor:pointer;font-size:16px;line-height:24px;padding:0}
.draftAttachment .draftFileName{position:absolute;left:5px;right:5px;bottom:5px;background:rgba(0,0,0,.55);color:#fff;border-radius:7px;padding:3px 5px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.replyDraft{display:none;max-width:940px;margin:8px auto -3px;padding:8px 14px;background:#eeeafc;border-radius:12px;font-size:12px;position:relative}
.replyDraft.show{display:block}
.replyDraft button{position:absolute;right:8px;top:5px;border:0;background:transparent;font-size:17px}
.composerWrap{background:rgba(255,255,255,.77);border-top:1px solid var(--border)}
.attachBtn,.emojiBtn{width:40px;height:40px;border:0;background:#efede8;border-radius:14px;font-size:20px;color:#68645f}
.emojiPanel{position:fixed;bottom:84px;left:355px;background:white;border:1px solid var(--border);box-shadow:0 14px 40px rgba(0,0,0,.12);border-radius:18px;padding:10px;display:grid;grid-template-columns:repeat(6,38px);gap:4px;z-index:20}
.emojiPanel button{border:0;background:transparent;font-size:22px;border-radius:10px;height:38px}
.savedIcon{background:#f7e7a8!important;font-size:20px}
.fileCard{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.06);padding:8px 10px;border-radius:11px;text-decoration:none;color:inherit;margin-top:7px}
.mine .fileCard{background:rgba(255,255,255,.14)}
.attachmentImg{display:block;width:min(360px,50vw);height:240px;object-fit:cover;border-radius:12px;margin-top:7px;background:#eceae5}

@media(max-width:1120px){.app{grid-template-columns:300px 1fr}.details{display:none}}

/* === Milo v0.2.1 layout hotfix === */
.app{
  height:100vh;
  min-height:0;
}
.conversation{
  min-height:0;
  height:100vh;
  overflow:hidden;
}
.messages{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto !important;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  overflow-anchor:none;
}
.composerWrap{
  flex:0 0 auto;
}
.header{
  flex:0 0 74px;
}
.replyDraft{
  flex:0 0 auto;
}
.msgLine{
  width:100%;
}


.chatRow.unread .topline strong{font-weight:800}
.chatRow.unread .preview{font-weight:700;color:#3c3935}
.newDivider{display:flex;align-items:center;gap:10px;max-width:920px;margin:18px auto;color:var(--accent);font-size:11px;font-weight:700}
.newDivider::before,.newDivider::after{content:"";height:1px;background:rgba(109,93,251,.28);flex:1}
.newMessagesBtn{position:absolute;right:28px;bottom:96px;z-index:8;border:0;background:var(--accent);color:#fff;border-radius:18px;padding:9px 13px;box-shadow:0 8px 24px rgba(0,0,0,.15);cursor:pointer;font-size:12px;font-weight:700}
.newMessagesBtn.hidden{display:none}
.conversation{position:relative}


.msgLine{position:relative;align-items:flex-start}
.msgActions{
  position:static;
  display:inline-flex;
  gap:4px;
  margin-left:8px;
  margin-top:3px;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s;
  flex:0 0 auto;
}
.msgLine:hover .msgActions,.msgActions:hover{
  opacity:1;
  pointer-events:auto;
}
.msgActions button{cursor:pointer}
.msgMoreBtn{width:30px;height:30px;border:1px solid #ddd9d2;background:#fff;border-radius:10px;cursor:pointer;color:#6d6963;font-size:17px;box-shadow:0 4px 12px rgba(0,0,0,.06)}
.messageMenu{position:fixed;z-index:1000;width:178px;background:#fff;border:1px solid #dedbd5;border-radius:14px;padding:6px;box-shadow:0 14px 40px rgba(0,0,0,.16)}
.messageMenu button{width:100%;border:0;background:transparent;border-radius:9px;padding:9px 10px;text-align:left;cursor:pointer;font:inherit;font-size:13px;color:#393632}
.messageMenu button:hover{background:#f2f0eb}
.messageMenu button.danger{color:#c94747}
.reactionPicker{position:fixed;z-index:1001;pointer-events:auto;background:#fff;border:1px solid #dedbd5;border-radius:18px;padding:7px;display:flex;gap:3px;box-shadow:0 14px 40px rgba(0,0,0,.16)}
.reactionPicker button{border:0;background:transparent;border-radius:10px;width:36px;height:36px;font-size:20px;cursor:pointer}
.reactionPicker button:hover{background:#f2f0eb;transform:scale(1.08)}


.msgTools{display:none!important}


/* v0.3.4 — drag & drop */
.dropOverlay{
  position:absolute;
  inset:74px 0 76px 0;
  z-index:40;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(247,246,242,.82);
  backdrop-filter:blur(4px);
  pointer-events:none;
}
.dropOverlay.show{display:flex}
.dropCard{
  padding:26px 34px;
  border:2px dashed var(--accent);
  border-radius:22px;
  background:rgba(255,255,255,.9);
  color:var(--accent);
  font-size:15px;
  font-weight:700;
  box-shadow:0 12px 38px rgba(0,0,0,.08);
}
.dropCard span{
  display:block;
  margin-top:6px;
  color:#8b8780;
  font-size:12px;
  font-weight:500;
  text-align:center;
}


/* v0.3.5 — avatars */
.avatar,.bigAvatar{overflow:hidden}
.avatar img,.bigAvatar img{width:100%;height:100%;object-fit:cover;display:block}
#meAvatar{cursor:pointer}
#meAvatar::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.28);
  opacity:0;
  transition:.15s ease;
}
#meAvatar::before{
  content:"✎";
  position:absolute;
  z-index:2;
  color:#fff;
  font-size:14px;
  opacity:0;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  transition:.15s ease;
}
#meAvatar:hover::after,#meAvatar:hover::before{opacity:1}
.avatarUploading{opacity:.55;pointer-events:none}


.groupChoice{display:flex;gap:8px;margin-bottom:10px}.groupChoice button{flex:1;border:1px solid #ddd9d2;background:#f7f6f2;border-radius:12px;padding:9px;cursor:pointer;font-weight:700}.groupChoice button.active{background:#ebe8ff;border-color:#b8afff;color:var(--accent)}
.groupSetup{display:flex;flex-direction:column;gap:9px}.groupNameInput{border:1px solid #ddd9d2;border-radius:12px;padding:11px;outline:0;font:inherit}.memberPick{display:flex;align-items:center;gap:10px;padding:8px;border-radius:11px}.memberPick:hover{background:#f4f2ee}.memberPick input{margin-left:auto}.createGroupBtn{border:0;background:var(--accent);color:#fff;border-radius:12px;padding:11px;font-weight:700;cursor:pointer}.createGroupBtn:disabled{opacity:.45}.senderLabel{font-size:11px;font-weight:700;color:#6f69b7;margin-bottom:4px}.groupAvatar{background:#e9e5ff!important;color:var(--accent)!important}

.searchHint{padding:18px 10px;text-align:center;color:#98938b;font-size:13px;line-height:1.4}

.soundBtn{position:relative}
.soundBtn.muted{opacity:.45}
.soundBtn.muted::after{
  content:"";
  position:absolute;
  width:18px;
  height:2px;
  background:currentColor;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-42deg);
  border-radius:2px;
}