.ms-topbar { height:62px; padding:0 36px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:white; }
.ms-brand { font-size:26px; font-weight:800; letter-spacing:-1px; color:var(--ink); }
.ms-brand span { color:var(--mint); }
.ms-topbar nav { display:flex; align-items:center; gap:24px; font-size:12px; }
.ms-topbar nav a { display:flex; align-items:center; gap:7px; }
.ms-topbar .icon { width:16px; }
.ms-page { max-width:1380px; margin:auto; padding:28px 36px 30px; }
.ms-page-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.ms-module-label { display:flex; align-items:center; gap:12px; margin-bottom:7px; }
.ms-local { font-size:11px; color:var(--muted); padding:3px 8px; background:white; border:1px solid var(--line); border-radius:5px; }
.ms-page h1 { font-size:30px; letter-spacing:-1px; }
.ms-provider { color:var(--muted); font-size:12px; padding-bottom:4px; }
.ms-layout { height:calc(100dvh - 216px); min-height:470px; max-height:850px; display:grid; grid-template-columns:320px minmax(0,1fr); border:1px solid var(--line); border-radius:15px; background:white; overflow:hidden; box-shadow:var(--shadow); }
.ms-inbox { min-width:0; display:flex; flex-direction:column; border-right:1px solid var(--line); background:white; }
.ms-inbox-heading { display:flex; align-items:center; justify-content:space-between; padding:22px 20px 16px; }
.ms-inbox-heading h2 { font-size:16px; }
.ms-inbox-heading > span { display:grid; place-items:center; width:23px; height:23px; border-radius:7px; background:var(--mint-light); color:var(--petrol); font-size:11px; }
.ms-inbox-heading > span[hidden] { display:none; }
.ms-search { display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; margin:0 16px 14px; color:#8a9a94; }
.ms-search .icon { width:16px; height:16px; }
.ms-search input { border:0; outline:0; min-width:0; width:100%; background:transparent; font-size:12px; }
.ms-thread-list { overflow:auto; padding:0 8px 10px; }
.ms-thread { display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:16px 12px; border-radius:10px; margin:2px 0; }
.ms-thread:hover { background:#f5f9f6; }
.ms-thread.active { background:#eaf4ef; }
.ms-thread .avatar { width:38px; height:38px; color:#437c6e; background:#e5efe9; }
.ms-thread-copy { flex:1; min-width:0; display:grid; gap:5px; }
.ms-thread-title { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ms-thread-title strong { font-size:13px; font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ms-thread-title time { font-size:10px; color:var(--muted); white-space:nowrap; }
.ms-thread-preview { font-size:11px; color:var(--muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ms-unread { display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:var(--petrol); color:white; font-size:10px; }
.ms-list-empty { padding:22px 12px; text-align:center; color:var(--muted); font-size:12px; }
.ms-conversation { min-width:0; min-height:0; display:flex; flex-direction:column; background:#f7faf8; }
.ms-conversation-heading { min-height:77px; padding:16px 25px; display:flex; align-items:center; gap:12px; background:white; border-bottom:1px solid var(--line); }
.ms-conversation-heading h2 { font-size:16px; }
.ms-conversation-heading span:not(.avatar) { color:var(--muted); font-size:11px; }
.ms-inbox-back { display:none; }
.ms-history { min-height:0; flex:1; overflow:auto; padding:16px 28px 24px; overscroll-behavior:contain; }
.ms-day { display:flex; justify-content:center; padding:7px 0 20px; color:#88988f; font-size:10px; }
.ms-message { display:flex; margin-bottom:16px; }
.ms-message.outgoing { justify-content:flex-end; }
.ms-bubble { max-width:min(75%,540px); min-width:68px; padding:12px 15px 8px; border:1px solid #e4eae5; border-radius:13px 13px 13px 4px; background:white; }
.ms-message.outgoing .ms-bubble { background:#e3f0e9; border-color:#dbece1; border-radius:13px 13px 4px 13px; }
.ms-bubble p { font-size:13px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
.ms-bubble time { display:block; text-align:right; margin-top:5px; color:#7b8e84; font-size:9px; }
.ms-message-photos { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:8px; }
.ms-photo { position:relative; flex:0 1 150px; min-width:0; }
.ms-photo > button:first-child { display:block; width:100%; border-radius:8px; overflow:hidden; }
.ms-photo img { width:150px; height:150px; object-fit:cover; }
.ms-composer { flex-shrink:0; border-top:1px solid var(--line); background:white; padding:16px 20px; }
.ms-compose-row { display:flex; align-items:flex-end; gap:12px; }
.ms-compose-row textarea { flex:1; min-width:0; height:42px; max-height:140px; resize:none; padding:10px 0; border:0; background:transparent; font-size:13px; line-height:22px; overflow-wrap:anywhere; }
.ms-compose-row textarea:focus-visible { outline-offset:1px; border-radius:6px; }
.ms-attach { height:42px; width:30px; display:grid; place-items:center; flex-shrink:0; color:var(--muted); }
.ms-attach:hover { color:var(--petrol); }
.ms-send { min-height:40px; align-self:flex-end; margin-bottom:1px; }
.ms-attachments { display:flex; gap:10px; flex-wrap:wrap; padding:2px 0 13px; }
.ms-attachments[hidden],.ms-error[hidden] { display:none; }
.ms-photo.draft { flex:0 0 76px; }
.ms-photo.draft img { width:76px; height:76px; }
.ms-remove-photo { position:absolute; top:-5px; right:-5px; display:grid; place-items:center; width:22px; height:22px; background:white; color:var(--danger); box-shadow:0 1px 6px #163d2930; border:1px solid var(--line); border-radius:50%; }
.ms-remove-photo .icon { width:12px; height:12px; }
.ms-error { font-size:12px; color:var(--danger); margin-bottom:10px; }
.ms-global-error { color:var(--danger); font-size:12px; margin-bottom:12px; }
.ms-global-error[hidden],.ms-readonly[hidden],.ms-page-heading [hidden] { display:none; }
.ms-readonly { color:var(--muted); font-size:12px; margin-bottom:10px; }
.ms-older { display:block; margin:0 auto 15px; padding:6px 12px; color:var(--petrol); font-size:11px; }
.ms-photo-preparing { position:absolute; inset:auto 0 0; background:#ffffffdd; color:var(--muted); font-size:9px; padding:3px; text-align:center; }
.ms-new-modal { width:min(440px,calc(100vw - 28px)); }
.ms-no-selection,.ms-conversation-empty { flex:1; min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#82968c; }
.ms-no-selection > .icon { width:35px; height:35px; stroke-width:1.1; color:#a1b6aa; }
.ms-no-selection h2 { font-size:16px; font-weight:500; }
.ms-conversation-empty { height:100%; font-size:12px; }
.ms-viewer { width:min(850px,calc(100vw - 36px)); max-height:calc(100dvh - 40px); border-radius:14px; overflow:hidden; background:white; box-shadow:var(--shadow); }
.ms-viewer > header { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:13px 18px; }
.ms-viewer h2 { font-size:14px; min-width:0; overflow-wrap:anywhere; }
.ms-viewer > img { max-height:calc(100dvh - 105px); width:100%; object-fit:contain; background:#edf1ee; }
@media(max-width:1000px) { .ms-layout { grid-template-columns:280px minmax(0,1fr); } .ms-history { padding:16px 20px; } .ms-bubble { max-width:90%; } }
@media(max-width:760px) { .ms-topbar { padding:0 18px; } .ms-topbar nav { gap:15px; } .ms-page { padding:24px 16px 20px; } .ms-page-heading { align-items:start; } .ms-page h1 { font-size:27px; } .ms-provider { font-size:11px; padding-top:4px; } .ms-layout { display:flex; height:calc(100dvh - 207px); min-height:420px; } .ms-inbox { width:100%; border:0; } .ms-conversation { display:none; width:100%; } .ms-layout.has-thread .ms-inbox { display:none; } .ms-layout.has-thread .ms-conversation { display:flex; } .ms-conversation-heading { padding:14px 16px; min-height:70px; } .ms-inbox-back { display:inline-flex; } .ms-composer { padding:12px; } .ms-compose-row { gap:8px; } .ms-send { padding:9px 12px; } .ms-send .icon { display:none; } .ms-history { padding:16px; } }