:root{color-scheme:dark;--back:#111c29;--sidebar:#152536;--head:#132131;--pane:#202f41;--hover:#29415b;--border:#324355;--muted:#92a8c0;--text:#edf4fb;--incoming:#304155;--blue:#0876ea;--field:#26394e;--soft:#192a3d}*{box-sizing:border-box}html,body{height:100%;margin:0;font:15px/1.4 'Segoe UI',system-ui,sans-serif;background:var(--back);color:var(--text)}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #49c9ff;outline-offset:2px}.hidden{display:none!important}.app{display:flex;width:100%;height:100dvh;min-height:0}.sidebar{width:345px;flex:none;background:var(--sidebar);display:flex;flex-direction:column;border-right:1px solid var(--border);min-height:0}.brand{display:flex;align-items:center;gap:10px;padding:15px 18px}.brand img{width:103px;height:47px;object-fit:contain;object-position:left}.brand strong{font-size:16px}.brand .square{margin-left:auto}.square{background:transparent;border:0;color:var(--muted);font-size:22px;width:36px;height:36px;border-radius:10px;display:grid;place-items:center}.square:hover,.person:hover,.chat-item:hover{background:var(--hover);color:var(--text)}.searchwrap{display:flex;align-items:center;background:var(--field);margin:9px 13px 18px;padding:9px 12px;border-radius:12px;font-size:20px;color:var(--muted)}.searchwrap input{background:none;border:0;color:var(--text);outline:0;width:100%;font-size:13px}.sidebar-title{font-size:11px;font-weight:800;letter-spacing:2px;padding:11px 18px;color:var(--muted)}.chats{overflow:auto;max-height:46%;min-height:100px}.chat-item,.person{border:0;color:var(--text);display:flex;align-items:center;gap:12px;background:transparent;width:calc(100% - 18px);margin:3px 9px;padding:11px;border-radius:12px;text-align:left}.chat-item.selected{background:#204c78}.chat-item span,.person span{display:flex;flex-direction:column;overflow:hidden}.chat-item b,.person b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-item small,.person small{font-size:12px;color:var(--muted);margin-top:3px}.person small.on{color:#3dd99e}.avatar{display:grid;place-items:center;background:#1684ec;color:white;font-weight:700;font-size:18px;border-radius:50%;width:40px;height:40px;flex:none}.avatar.small{width:39px;height:39px}.people-label{display:flex;justify-content:space-between}.people-label button{background:transparent;border:0;color:var(--muted)}.people{overflow-y:auto;flex:1;min-height:50px}.account{padding:15px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}.my-details{flex:1;min-width:0}.my-details small{display:block;color:#45dfac;font-size:11px}.conversation{flex:1;min-width:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at center,#243349 0%,#182638 70%,#121d2d 100%)}.chat-top{display:flex;align-items:center;gap:12px;background:#101c2ad9;border-bottom:1px solid var(--border);padding:14px 24px;min-height:74px}.chat-heading{flex:1;display:flex;flex-direction:column}.chat-heading strong{font-size:17px}.chat-heading small{font-size:12px;color:var(--muted)}.messages{flex:1;padding:22px 32px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}.msg{max-width:min(75%,510px);display:flex;flex-direction:column;align-items:flex-start}.msg.mine{align-self:flex-end;align-items:flex-end}.msg.theirs{align-self:flex-start}.author{font-size:11px;color:var(--muted);margin:0 9px 5px}.bubble{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--incoming);padding:11px 15px;border-radius:17px;border-bottom-left-radius:5px;max-width:100%}.mine .bubble{background:var(--blue);border-radius:17px;border-bottom-right-radius:5px;color:white}.msg time{font-size:10px;color:var(--muted);padding:3px 7px}.file-card{max-width:100%;overflow:hidden;border-radius:14px;background:var(--incoming);margin-top:5px}.file-card img{max-width:min(340px,65vw);max-height:300px;display:block;object-fit:contain}.file-card a{display:block;color:#b9e2ff;text-decoration:none;padding:13px;overflow-wrap:anywhere}.typing{height:31px;flex:none;font-size:12px;color:var(--muted);padding:6px 32px}.composer{display:flex;align-items:center;gap:8px;background:var(--head);padding:14px 23px;border-top:1px solid var(--border)}.composer textarea{background:var(--field);border:1px solid var(--border);color:var(--text);border-radius:17px;padding:13px 16px;flex:1;min-width:0;outline:none}.composer textarea:focus{border-color:#2b8bff}.gifbutton{font-size:12px;font-weight:900;border:1px solid var(--muted);width:33px;height:28px}.send,.primary{border:0;background:var(--blue);color:white;border-radius:12px;padding:12px 18px;font-weight:700}.send{font-size:22px;padding:8px 15px}.notice{position:fixed;bottom:84px;right:24px;font-size:12px;color:#b9e2ff;pointer-events:none}.login{height:100dvh;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#25445f,#101b2a)}.login-card{width:min(92vw,390px);display:flex;flex-direction:column;gap:13px;padding:32px;background:var(--sidebar);border:1px solid var(--border);border-radius:22px;box-shadow:0 30px 70px #0006}.login-logo{width:170px;height:85px;object-fit:contain;object-position:left}.login h1{margin:0;font-size:28px}.login p{color:var(--muted);margin:0 0 12px}.login label,dialog label{font-size:12px;display:flex;flex-direction:column;gap:6px;color:var(--muted)}.login input,dialog input,dialog select{background:var(--field);color:var(--text);border:1px solid var(--border);padding:12px;border-radius:10px}.error{color:#ff8484;font-size:12px;min-height:12px}dialog{border:1px solid var(--border);border-radius:19px;background:var(--sidebar);color:var(--text);width:min(94vw,430px);padding:25px;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#0009}dialog form{display:flex;flex-direction:column;gap:15px}dialog h2{margin:0}dialog p{color:var(--muted);margin:0}.pick-users{max-height:240px;overflow:auto}.pick{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;padding:8px}.actions{display:flex;justify-content:flex-end;gap:10px}.secondary{border:1px solid var(--border);border-radius:10px;background:var(--field);color:var(--text);padding:12px}.mobile-only{display:none}[data-theme=light]{color-scheme:light;--back:#e8eff6;--sidebar:#f3f6fa;--head:#f5f8fc;--pane:#f3f6fa;--hover:#dce8f5;--border:#ccd9e6;--muted:#59708a;--text:#1a2c40;--incoming:#dfe7ef;--field:#e7edf5;--soft:#e9eff7}[data-theme=light] .conversation{background:linear-gradient(145deg,#f6f9fd,#edf3fa)}[data-theme=light] .chat-top{background:#fafcff}[data-theme=light] .chat-item.selected{background:#c4dfff}[data-theme=light] .file-card a{color:#1261a5}
@media(max-width:720px){.sidebar{width:100%;border-right:0}.app:not(.in-chat) .conversation{display:none}.app.in-chat .sidebar{display:none}.chat-top{padding:9px 12px;min-height:62px}.messages{padding:14px 12px}.msg{max-width:88%}.composer{padding:9px 7px calc(9px + env(safe-area-inset-bottom));gap:2px}.composer .square{width:31px;flex:none}.composer textarea{padding:12px 9px}.composer .send{padding:8px 11px}.typing{padding-left:14px}.mobile-only{display:grid}.chat-heading strong{font-size:15px}.account{padding-bottom:calc(15px + env(safe-area-inset-bottom))}}

.install-banner{position:relative;z-index:20;background:#183b50;color:white;padding:12px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}.install-banner small{width:100%}.install-banner button{padding:8px;border-radius:8px}.copyright{display:block;text-align:center;padding:10px;font-size:10px;opacity:.7}.unread{background:#147eb3;color:white;border-radius:20px;padding:3px 8px;margin-left:auto}.shared-gif{max-width:min(280px,75vw);border-radius:12px}.sidebar>#notifications,.sidebar>#disableNotifications{margin:4px 10px;padding:8px}.hidden{display:none!important}body{min-height:100dvh}.install-banner:not(.hidden)~.app{height:calc(100dvh - 110px)}
body{display:flex;flex-direction:column;height:100dvh;overflow:hidden}.install-banner{flex:none;max-height:30dvh;overflow:auto}.app,.install-banner:not(.hidden)~.app{flex:1;min-height:0;height:auto}.login{flex:1;min-height:0;height:auto;overflow:auto;padding:20px 0}.login-card{margin:auto}.conversation{min-height:0}.composer{flex:none}

/* OLI Messenger v0.4: keep mobile form text large enough to avoid focus zoom.
   Preserve pinch-to-zoom and the existing viewport accessibility settings. */
@media (max-width: 1024px), (pointer: coarse) {
  input,
  textarea,
  select,
  .searchwrap input,
  .login input,
  dialog input,
  dialog select,
  .composer textarea {
    font-size: 16px;
  }
}

.inbox-button{border:1px solid var(--border);border-radius:12px;background:var(--field);color:var(--text);padding:8px;white-space:nowrap;font-size:12px;flex:none}.inbox-button.has-unread{background:#0876ea;color:#fff;border-color:#49c9ff}.inbox-button span{font-weight:800}.message-alert{display:flex;flex:none;gap:8px;background:var(--sidebar);border-bottom:2px solid #1684ec;padding:10px 12px}.message-alert button{border:0;background:none;color:var(--text);text-align:left}.message-alert #openMessageAlert{flex:1;min-width:0}.message-alert strong,.message-alert span{display:block;overflow-wrap:anywhere}.message-alert span{font-size:13px;color:var(--muted);max-height:4em;overflow:hidden}.message-alert #dismissMessageAlert{font-size:24px;align-self:flex-start;min-width:40px;min-height:40px}.preview-setting{margin:8px 12px;font-size:12px;flex:none}.preview-setting label{display:flex;gap:8px;align-items:center}.preview-setting small,.preview-setting #previewStatus{display:block;font-size:11px;color:var(--muted);margin-top:5px}.preview-setting input{flex:none;width:18px;height:18px}.inbox-row{display:block;width:100%;padding:14px;margin:8px 0;text-align:left;background:var(--field);color:var(--text);border:1px solid var(--border);border-radius:10px}#inboxDialog{max-height:80dvh;overflow:auto}.chat-heading{min-width:0}.chat-heading strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:720px){.chat-top{gap:7px}.chat-top .avatar{display:none}.inbox-button{min-height:40px}.preview-setting{margin:5px 12px}.sidebar{overflow-y:auto}.chats,.people{flex-shrink:0}}

.update-banner{display:flex;flex:none;gap:10px;align-items:center;flex-wrap:wrap;padding:12px max(12px,env(safe-area-inset-left));background:#17456b;color:#fff;max-height:35dvh;overflow:auto}.update-banner>div{flex:1;min-width:160px}.update-banner strong,.update-banner span,.update-banner small{display:block}.update-banner span,.update-banner small{font-size:12px}.update-banner small:not(:empty){margin-top:6px;color:#ffe29a}.update-banner button{padding:10px 12px;min-height:44px;border:1px solid #b9e2ff;border-radius:10px;background:#fff;color:#12304b;font-weight:700}.update-banner #updateLater{background:transparent;color:#fff}

/* v0.5: settings live in a modal; the mobile sidebar is reserved for chats/people. */
.sidebar{overflow:hidden}.chats{flex:0 1 42%;max-height:42%;min-height:90px}.people{flex:1 1 0;overflow:auto;min-height:60px}.account{flex:none}.sidebar>.copyright{padding:4px}.setting-row{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;margin:10px 0}.setting-row input{width:20px;height:20px;padding:0;flex:none}#settingsDialog,#adminDialog{width:min(94vw,620px);max-height:88dvh;overflow:auto}dialog section{padding:14px 0;border-bottom:1px solid var(--border)}dialog h3{margin:0 0 12px}dialog small{display:block;color:var(--muted);margin:7px 0}dialog button{min-height:44px}dialog textarea{font:inherit;font-size:16px;max-width:100%;background:var(--field);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px}.modal-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.modal-heading button{background:none;border:0;color:var(--text);font-size:26px;padding:6px 12px}.text-button{background:none;border:0;color:var(--muted);padding:8px;cursor:pointer}.attachment-choices{display:grid;gap:10px;margin:14px 0}.attachment-choices button{background:var(--field);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:left}.avatar{overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.profile-avatar{width:72px;height:72px;margin:8px 0}.message-person{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin-bottom:4px}.message-person .avatar{width:24px;height:24px;font-size:12px}.msg .message-menu{background:none;border:0;color:var(--muted);padding:5px 9px;font-size:18px;min-width:36px}.message-bottom{display:flex;gap:6px;align-items:center}.reply-quote{border-left:3px solid #1684ec;background:var(--field);color:var(--muted);padding:8px;border-radius:6px;font-size:12px;text-align:left;max-width:100%;overflow-wrap:anywhere;cursor:pointer}.reply-bar{display:flex;justify-content:space-between;gap:8px;padding:8px 16px;background:var(--field);font-size:12px}.reply-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reply-bar button{background:none;border:0;color:var(--text);font-size:20px}.mention{color:#66d4ff;font-weight:700}.mention-suggestions{background:var(--sidebar);max-height:150px;overflow:auto;padding:5px}.mention-suggestions button{padding:9px;background:var(--field);border:0;color:var(--text);margin:3px;border-radius:8px}.pending{opacity:.8}.pending.failed{border:1px solid #ff8484;border-radius:12px;padding:8px}.pending-status{font-size:12px}.retry-actions button{margin:4px;background:var(--field);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px}.unread-divider{align-self:stretch;text-align:center;border-top:1px solid #1684ec;color:var(--muted);padding:8px;font-size:12px}.highlight-message{outline:2px solid #49c9ff;border-radius:10px}.search-result{display:block;width:100%;text-align:left;padding:12px;background:var(--field);color:var(--text);border:1px solid var(--border);border-radius:8px;margin:8px 0;overflow-wrap:anywhere}.private-code{overflow-wrap:anywhere;user-select:all;font-family:monospace;background:var(--field);padding:10px;border-radius:8px}.private-code:empty{display:none}.wrap{flex-wrap:wrap}.notice{max-width:calc(100vw - 30px);background:var(--sidebar);border-radius:8px;padding:6px 10px;z-index:30}.notice:empty{display:none}#imageDialog{width:min(96vw,1000px);height:min(92dvh,900px);max-height:94dvh;padding:12px}#imageViewport{overflow:auto;height:calc(100% - 110px);touch-action:pan-x pan-y pinch-zoom;background:#07111a;border-radius:8px;padding:8px}#fullImage{display:block;max-width:none;transform-origin:top left}.image-controls{display:flex;gap:12px;align-items:center;margin:8px 0}.image-controls a{color:#66d4ff}.file-card img,.shared-gif{cursor:zoom-in}.file-card .image-open{background:none;border:0;padding:0;display:block}.file-card .image-open:focus-visible{outline:2px solid #49c9ff}.full-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-label input{max-width:100%}#profileForm{gap:10px}#settingsDialog .preview-setting{margin:0}#settingsDialog .secondary{margin:4px 0}#adminDialog .pick-users{max-height:240px}#adminDialog .pick-users label{margin:6px 0}#channelMembers input{padding:0;width:20px;height:20px}.composer textarea{font-size:16px}@media(max-width:720px){.sidebar{overflow:hidden}.chats{flex:0 1 42%;flex-shrink:1}.people{flex:1 1 0;flex-shrink:1}.chat-top{gap:4px}.chat-top .square{width:32px;flex:none}.chat-heading strong{font-size:14px}.inbox-button{padding:7px 5px;font-size:11px}.account{padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}.message-alert span{max-height:3em}dialog{max-height:88dvh;overflow:auto}.login-card{padding:24px}.image-controls{gap:8px;font-size:12px}}

/* 0.5.5: restrained OLI surfaces, clear sections, consistent touch targets. */
:root{--back:#101b29;--sidebar:#142335;--head:#142335;--border:#2a3e54;--muted:#a0b4ca;--field:#20354b;--blue:#1877e8}button{transition:background-color .15s,border-color .15s}button:disabled{opacity:.55;cursor:wait}.brand{padding:16px 18px}.brand strong{font-weight:600;letter-spacing:.2px}.sidebar-title{font-size:10px;letter-spacing:1.8px;padding:10px 18px 5px}.channel-list{flex:0 1 27%;min-height:45px;max-height:27%;overflow:auto}.chats{flex:0 1 27%;min-height:45px;max-height:27%}.people{min-height:60px}.chat-item,.person{gap:10px;padding:9px 10px;border-radius:10px}.chat-item b,.person b{font-size:13px;font-weight:600}.chat-item small,.person small{font-size:11px}.chat-item.selected{background:#21486d}.channel-list .avatar{border-radius:10px;background:#234a6c;font-size:20px}.brand .square,.account .square,.chat-top .square{border:1px solid transparent;min-height:40px}.brand .square:hover,.account .square:hover,.chat-top .square:hover{border-color:var(--border)}.account{gap:9px}.copyright{line-height:1.5;font-size:9px;opacity:.8}.app-version{display:block;font-size:10px;color:var(--muted);margin:2px 0}.chat-top{background:var(--head)}.messages{gap:16px}.bubble{line-height:1.5}.primary,.secondary{font-size:13px;font-weight:600}.primary{box-shadow:0 2px 8px #0002}.settings-dialog section{padding:18px 0}.muted{color:var(--muted);font-size:12px}dialog{border-radius:16px}dialog label{font-weight:500}dialog h2{font-size:20px}dialog h3{font-size:14px;letter-spacing:.2px}dialog textarea{width:100%}.announcement-banner{display:flex;align-items:center;gap:8px;flex:none;padding:9px 16px;background:#163d55;border-bottom:1px solid #34748b}.announcement-banner button{background:transparent;border:0;color:var(--text);text-align:left;min-height:40px}.announcement-banner #openAnnouncement{flex:1;min-width:0}.announcement-banner small{display:block;font-size:9px;letter-spacing:1.6px;color:#79d3ea}.announcement-banner strong{display:block;font-size:13px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.announcement-banner #dismissAnnouncement{font-size:24px;width:40px;text-align:center}.announcement-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65;margin:16px 0}.reaction-choices{display:flex;gap:8px;flex-wrap:wrap;padding:15px 0}.reaction-choices button{font-size:26px;min-width:48px;min-height:48px;background:var(--field);border:1px solid var(--border);border-radius:12px}.reaction-strip{display:flex;gap:5px;flex-wrap:wrap;margin:5px 0}.reaction-pill{font-size:12px;color:var(--text);background:var(--field);border:1px solid var(--border);border-radius:14px;padding:4px 8px;min-height:32px}.reaction-pill.is-mine{border-color:#56b9ff;background:#184b71}.react-button{font-size:12px;color:var(--muted);background:transparent;border:0;padding:5px 8px;min-height:32px}.bubble a{color:inherit;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}.link-card{display:block;color:var(--text);text-decoration:none;border:1px solid var(--border);border-radius:12px;overflow:hidden;width:min(340px,68vw);margin-top:8px;background:var(--sidebar)}.link-card img{width:100%;max-height:180px;object-fit:cover;display:block}.link-card .link-copy{padding:10px 12px}.link-card strong{display:block;font-size:13px;line-height:1.4;overflow-wrap:anywhere}.link-card small{display:block;color:var(--muted);font-size:11px;margin-top:5px;overflow-wrap:anywhere}.link-card p{font-size:12px;color:var(--muted);line-height:1.45;margin:6px 0;overflow-wrap:anywhere}.participant-list{max-height:240px;overflow:auto;margin:10px 0}.participant{display:flex;align-items:center;gap:10px;padding:8px 0}.participant span{display:block;font-size:13px}.participant small{font-size:11px;margin:0}.danger{background:#642d3a;border:1px solid #ba6375;color:#fff;border-radius:10px;padding:11px 15px;min-height:44px;margin-top:16px}#groupDialog{width:min(94vw,500px);max-height:88dvh;overflow:auto}#groupAvatarPreview .avatar{width:64px;height:64px;font-size:26px}#groupForm{gap:12px}#groupMemberPicker input{width:20px;height:20px;padding:0}.empty-list{font-size:12px;color:var(--muted);padding:8px 18px}.inbox-button{border-radius:9px}.message-alert{border-bottom-width:1px}.msg.mine .link-card{align-self:flex-end}[data-theme=light] .announcement-banner{background:#e0f1f8;border-color:#9fc9da}[data-theme=light] .announcement-banner small{color:#245b72}[data-theme=light] .channel-list .avatar{background:#d6e6f4;color:#20486c}[data-theme=light] .reaction-pill.is-mine{background:#d3eaff;color:#173b5b}@media(max-width:720px){.brand{padding:12px 14px}.channel-list,.chats{max-height:25%;flex-basis:25%}.account{padding-top:9px}.sidebar-title{padding-top:7px}.chat-top .square{width:31px;min-width:31px}.chat-heading strong{font-size:13px}.chat-item,.person{padding:8px 10px}.composer{padding-top:10px}.reaction-strip{max-width:100%}.link-card{width:min(310px,74vw)}.announcement-banner{padding:6px 10px}.announcement-banner strong{font-size:12px}}

/* Square wave identity; preserve the complete supplied artwork. */
.login-logo{width:104px;height:104px;object-fit:contain;border-radius:22px}.brand img{width:44px;height:44px;object-fit:contain;border-radius:10px}#installHelp{white-space:normal;line-height:1.5}#groupOwnerField select{width:100%}

/* v0.5.6.1: one directory at a time, with a stable account footer. */
.directory-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0 12px 10px;padding:4px;background:var(--head);border:1px solid var(--border);border-radius:12px;flex:none}
.directory-tabs button{min-height:40px;display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;background:transparent;border:0;border-radius:8px;color:var(--muted);font-size:12px;font-weight:650;padding:7px 3px}
.directory-tabs button[aria-selected=true]{background:var(--hover);color:var(--text);box-shadow:0 1px 3px #0002}.directory-tabs button:hover{color:var(--text)}
.tab-count{display:inline-flex!important;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--blue);color:#fff;font-size:10px;font-weight:750}.tab-count.hidden{display:none!important}
.directory-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 0 12px}.directory-list .chats,.directory-list .channel-list,.directory-list .people{overflow:visible;max-height:none;min-height:0;flex:none}.directory-list section{min-height:100%}
.directory-heading{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px;padding:0 15px 7px}.directory-heading .square{font-size:18px}
.directory-empty{padding:28px 24px;color:var(--muted);text-align:center;line-height:1.7;font-size:13px}.sidebar>.copyright{flex:none;margin:0;padding:6px 12px 9px}.sidebar>.account{flex:none}.sidebar .searchwrap{margin-bottom:12px}
.chat-item,.person{min-height:62px;transition:background-color .12s ease}.chat-item.selected{box-shadow:inset 3px 0 0 #4ab6ff}.chat-item .unread{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;flex:none;min-width:23px;font-weight:700}.chat-item>span:not(.unread),.person>span{flex:1;min-width:0}
dialog{max-height:88dvh;overflow-y:auto;overscroll-behavior:contain}dialog button{min-height:40px}button:disabled{cursor:default;opacity:.5}button:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #49c9ff;outline-offset:3px}
.emoji-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding-top:18px}.emoji-choices button{font-size:28px;min-height:58px}.desktop-emoji{font-size:26px;flex:none}.composer{position:relative}.message-bottom{gap:10px;align-items:center;flex-wrap:wrap}.react-button,.message-menu{min-height:28px}.reaction-pill{min-height:30px}
@media(max-width:720px){.desktop-emoji{display:none!important}.directory-tabs{margin:0 12px 10px}.directory-tabs button{min-height:44px;font-size:13px}.directory-list .chat-item,.directory-list .person{min-height:68px}.sidebar>.copyright{font-size:10px}.brand{padding-top:12px;padding-bottom:10px}.message-bottom{gap:8px}.reaction-pill{min-height:34px}dialog{padding:18px;max-height:90dvh}.composer textarea{font-size:16px}.sidebar>.account{padding-top:11px;padding-bottom:calc(11px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.conversation-empty{margin:auto;text-align:center;color:var(--muted);padding:25px;line-height:1.6;font-size:14px}

@media(pointer:coarse){.desktop-emoji{display:none!important}}

/* v0.5.7: compact message groups and a multiline composer. */
textarea{font:inherit}.composer{align-items:flex-end}.composer textarea{display:block;resize:none;min-height:42px;max-height:160px;line-height:22px;padding:9px 12px;font-size:16px;border-radius:17px;overflow-y:hidden}.composer .send,.composer>.square{flex:none;min-height:42px}.messages{gap:3px;padding-top:16px;padding-bottom:14px;overflow-anchor:auto}.msg{margin-top:9px;flex:none;gap:2px}.msg.continued{margin-top:0}.msg.continued .message-person{display:none}.message-person{min-height:18px;font-size:10px;gap:5px;margin-bottom:1px}.message-person .avatar{width:19px;height:19px;font-size:10px}.bubble{padding:7px 12px;line-height:1.35;border-radius:17px}.message-bottom{height:0;min-height:0;opacity:0;overflow:hidden;gap:7px;padding:0;margin:0;font-size:10px;transition:opacity .12s ease}.msg:hover .message-bottom,.msg:focus-within .message-bottom,.msg:last-child .message-bottom{height:22px;opacity:1;overflow:visible}.message-bottom button{min-height:20px;padding:0 5px;font-size:10px}.message-bottom time{font-size:10px;padding:0 3px}.reaction-strip{gap:4px;margin:1px 0}.reaction-pill{min-height:25px;padding:2px 7px;font-size:12px}.file-card{margin-top:2px}.link-card{margin-top:3px}.message-person span{line-height:18px}.msg .bubble{cursor:pointer}#reactionMore{width:100%;margin-top:12px}
.notification-intro{display:flex;gap:12px;align-items:center;flex-wrap:wrap;flex:none;max-height:32dvh;overflow:auto;padding:12px 18px;border-bottom:1px solid var(--border);background:var(--sidebar)}.notification-intro>div{flex:1;min-width:220px}.notification-intro p{font-size:12px;color:var(--muted);margin:3px 0}.notification-intro small{display:block;line-height:1.6;color:var(--text)}.notification-intro button{min-height:42px}.encryption-disclosure{background:transparent;color:var(--muted);border:0;font-size:11px;line-height:1.5;padding:8px 0;text-align:left;cursor:pointer}#encryptionDialog p{line-height:1.7;margin-top:14px}.reaction-alert{position:fixed;right:18px;bottom:95px;max-width:min(420px,calc(100vw - 24px));z-index:35;display:flex;background:var(--sidebar);color:var(--text);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 30px #0005}.reaction-alert button{border:0;background:transparent;color:inherit;padding:13px;text-align:left;min-height:44px}.reaction-alert button:first-child{flex:1}.avatar,.tab-count{background:var(--blue)}.chat-item.selected{background:color-mix(in srgb,var(--blue) 28%,var(--sidebar));box-shadow:inset 3px 0 0 var(--blue)}.composer textarea:focus{border-color:var(--blue)}.directory-tabs button[aria-selected=true]{box-shadow:inset 0 -2px 0 var(--blue)}
@keyframes conversation-enter{from{opacity:.92;transform:translateY(2px)}to{opacity:1;transform:none}}.app.in-chat .conversation{animation:conversation-enter .12s ease-out}
@media(max-width:720px){.notification-intro{padding:10px 12px;gap:8px}.notification-intro button{flex:1}.notification-intro>div{min-width:100%}.messages{gap:2px;padding:12px 10px}.msg{margin-top:7px;max-width:88%}.bubble{padding:7px 11px}.composer{gap:4px}.composer textarea{padding:9px 11px}.reaction-alert{bottom:90px;right:12px}.reaction-choice{min-height:48px}.chat-top{min-height:60px}}
@media(prefers-reduced-motion:reduce){.app.in-chat .conversation{animation:none}.message-bottom{transition:none}}

/* Keep message tools out of the document flow so hover cannot shift history. */
.msg{position:relative}.message-bottom,.msg:hover .message-bottom,.msg:focus-within .message-bottom,.msg:last-child .message-bottom{position:absolute;top:0;right:calc(100% + 6px);width:88px;height:auto;min-height:20px;overflow:visible;border-radius:8px;background:var(--soft);padding:3px;z-index:2;pointer-events:none}.msg.theirs .message-bottom{right:auto;left:calc(100% + 6px)}.msg:hover .message-bottom,.msg:focus-within .message-bottom,.msg:last-child .message-bottom{pointer-events:auto}.message-bottom{opacity:0}.messages.loading-conversation>*,.messages.loading-conversation .message-bottom{visibility:hidden}.messages.loading-conversation::before{content:'Loading conversation…';color:var(--muted);font-size:12px;align-self:center;padding:15px}[data-theme=light] .chat-item.selected{background:color-mix(in srgb,var(--blue) 18%,var(--sidebar))}
@media(max-width:720px),(pointer:coarse){.message-bottom,.msg:hover .message-bottom,.msg:focus-within .message-bottom,.msg:last-child .message-bottom{display:none}}

/* Independently selected message-pane backgrounds keep controls and bubbles readable. */
.conversation{background:var(--conversation-bg-dark,radial-gradient(ellipse at center,#243349,#121d2d))}[data-theme=light] .conversation{background:var(--conversation-bg-light,linear-gradient(145deg,#f6f9fd,#edf3fa))}.channel-manager-item{display:block;width:100%;text-align:left;margin:7px 0;overflow-wrap:anywhere}.channel-manager-item:hover{background:var(--hover)}#channelParticipants{max-height:230px;overflow:auto}#channelDetailsDialog section{margin-top:16px}#channelEditControls .actions{margin-top:12px;gap:8px}#channelSummary{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted);line-height:1.6}#channelDetailsStatus,#channelCreateStatus{font-size:12px;line-height:1.6}#channelCreateDialog textarea,#channelDetailsDialog textarea{width:100%;resize:vertical;min-height:65px;background:var(--field);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px}

.my-status{display:block;max-width:100%;border:0;background:transparent;font-size:11px;padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;cursor:pointer}.my-status:hover{text-decoration:underline}.presence-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.presence-message{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-style:italic}.presence-label.status-available,.presence-label.status-elsewhere,.my-status.status-available,.my-status.status-elsewhere,.chat-heading small.status-available,.chat-heading small.status-elsewhere{color:#37ce91}.presence-label.status-away,.my-status.status-away,.chat-heading small.status-away{color:#e8bc48}.presence-label.status-out_of_office,.my-status.status-out_of_office,.chat-heading small.status-out_of_office{color:#bc9dff}.presence-label.status-offline,.my-status.status-offline,.chat-heading small.status-offline{color:var(--muted)}[data-theme=light] .status-available,[data-theme=light] .status-elsewhere{color:#087a50}[data-theme=light] .status-away{color:#946800}[data-theme=light] .status-out_of_office{color:#7745b7}#statusDialog small{display:block;line-height:1.7;color:var(--muted)}#statusDialog textarea{background:var(--field);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px;resize:vertical}#statusSaveResult{font-size:12px;line-height:1.5}

[data-theme=light] :is(.presence-label,.my-status,.chat-heading small).status-available,[data-theme=light] :is(.presence-label,.my-status,.chat-heading small).status-elsewhere{color:#087a50}[data-theme=light] :is(.presence-label,.my-status,.chat-heading small).status-away{color:#946800}[data-theme=light] :is(.presence-label,.my-status,.chat-heading small).status-out_of_office{color:#7745b7}

/* Account surfaces and conversation-scoped shared themes. */
:root{--back:var(--app-dark-back);--sidebar:var(--app-dark-sidebar);--head:var(--app-dark-head);--pane:var(--app-dark-pane);--hover:var(--app-dark-hover);--border:var(--app-dark-border);--muted:var(--app-dark-muted);--text:var(--app-dark-text);--incoming:var(--app-dark-incoming);--field:var(--app-dark-field);--soft:var(--app-dark-soft);}
[data-theme=light]{--back:var(--app-light-back);--sidebar:var(--app-light-sidebar);--head:var(--app-light-head);--pane:var(--app-light-pane);--hover:var(--app-light-hover);--border:var(--app-light-border);--muted:var(--app-light-muted);--text:var(--app-light-text);--incoming:var(--app-light-incoming);--field:var(--app-light-field);--soft:var(--app-light-soft);}
.conversation.has-shared-theme{--back:var(--chat-dark-back);--sidebar:var(--chat-dark-sidebar);--head:var(--chat-dark-head);--pane:var(--chat-dark-pane);--hover:var(--chat-dark-hover);--border:var(--chat-dark-border);--muted:var(--chat-dark-muted);--text:var(--chat-dark-text);--incoming:var(--chat-dark-incoming);--field:var(--chat-dark-field);--soft:var(--chat-dark-soft);}
[data-theme=light] .conversation.has-shared-theme{--back:var(--chat-light-back);--sidebar:var(--chat-light-sidebar);--head:var(--chat-light-head);--pane:var(--chat-light-pane);--hover:var(--chat-light-hover);--border:var(--chat-light-border);--muted:var(--chat-light-muted);--text:var(--chat-light-text);--incoming:var(--chat-light-incoming);--field:var(--chat-light-field);--soft:var(--chat-light-soft);}
.conversation,[data-theme=light] .conversation{background:var(--pane);color:var(--text)}.chat-top,[data-theme=light] .chat-top{background:var(--head)}.login{background:var(--back)}.chat-item.selected{background:var(--hover)}.message-alert,.announcement-banner,[data-theme=light] .announcement-banner{background:var(--head)}.dm-theme-notice{font-size:11px;color:var(--muted);text-align:center;padding:5px 12px;flex:none}.new-messages-button{align-self:center;flex:none;border:1px solid var(--border);background:var(--blue);color:white;border-radius:20px;padding:9px 16px;margin:4px;min-height:40px}.receipt-status{border:0;background:transparent;color:var(--muted);font-size:10px;padding:2px 7px;min-height:24px}.receipt-status:hover{text-decoration:underline}.msg.mine:has(+.msg.mine.continued)>.receipt-status{display:none}#receiptsDialog,#dmThemeDialog{width:min(94vw,480px)}#receiptsList{max-height:50dvh;overflow:auto}#dmThemeForm{display:flex;flex-direction:column;gap:12px}

/* v0.5.7.3 — layered OLI surfaces, compact conversations and restrained depth. */
:root{--shadow-panel:0 16px 48px #0003;--shadow-control:0 4px 12px #0002;--focus-ring:#4ebaff}
html{background:var(--back)}body{font-family:Inter,'Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.sidebar{background:linear-gradient(165deg,color-mix(in srgb,var(--sidebar) 96%,white),var(--sidebar) 42%);box-shadow:8px 0 26px #0000000c;z-index:3}
.brand{padding:22px 20px 18px;gap:12px}.brand img{width:46px;height:46px;border-radius:13px;object-fit:contain;box-shadow:0 2px 10px #0002}.brand strong{font-size:17px;letter-spacing:-.3px}
.searchwrap{margin:4px 16px 16px;padding:11px 13px;border:1px solid var(--border);border-radius:14px;box-shadow:inset 0 1px 0 #ffffff05}.searchwrap:focus-within{border-color:var(--blue);outline:2px solid color-mix(in srgb,var(--blue) 20%,transparent)}
.directory-tabs{margin:0 16px 15px;padding:4px;gap:3px;border-radius:14px;background:var(--head);box-shadow:inset 0 1px 4px #0001}.directory-tabs button{min-height:38px;border-radius:10px;font-weight:600}.directory-tabs button[aria-selected=true]{background:var(--blue);color:white;box-shadow:0 3px 9px #0002}
.chat-item,.person{position:relative;border:1px solid transparent;border-radius:12px;margin:4px 12px;width:calc(100% - 24px);padding:10px 12px;gap:11px;min-height:58px}.chat-item:hover,.person:hover{background:var(--hover)}.chat-item.selected,[data-theme=light] .chat-item.selected{background:color-mix(in srgb,var(--blue) 16%,var(--sidebar));border-color:color-mix(in srgb,var(--blue) 38%,var(--border));box-shadow:inset 3px 0 0 var(--blue),0 3px 10px #0000000a}.chat-item b,.person b{font-weight:600;font-size:13px}.chat-item small,.person small{font-size:11px;line-height:1.5}
.avatar{box-shadow:inset 0 0 0 1px #ffffff15,0 2px 7px #0001}.channel-list .avatar,[data-theme=light] .channel-list .avatar{background:var(--field);color:var(--text);border-radius:12px;border:1px solid var(--border)}
.account{padding:16px;background:var(--head);gap:10px}.my-details b{font-size:13px}.sidebar>.copyright{padding:10px 14px;font-size:10px;line-height:1.7}.directory-heading{padding:3px 18px 8px}
.conversation,[data-theme=light] .conversation{background:radial-gradient(ellipse at 75% 15%,color-mix(in srgb,var(--pane) 97%,var(--blue)),var(--pane) 75%);isolation:isolate}.chat-top,[data-theme=light] .chat-top{background:var(--head);box-shadow:0 4px 16px #0000000b;padding:16px 24px;gap:12px;z-index:4}.chat-heading strong{font-size:17px;font-weight:650;letter-spacing:-.25px}.chat-heading small{font-size:11px;margin-top:3px}.chat-top .avatar{border-radius:14px}.chat-heading{min-width:0}.chat-heading strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.square{border:1px solid transparent;border-radius:11px;transition:background .14s ease,border-color .14s ease,box-shadow .14s ease}.square:hover{border-color:var(--border)}.inbox-button{background:var(--soft);color:var(--text);border:1px solid var(--border);min-height:36px;border-radius:10px;font-size:11px}
.messages{padding:22px 30px 16px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.msg{max-width:min(76%,540px);margin-top:11px}.msg.continued{margin-top:0}.message-person{font-size:11px;gap:7px;margin-bottom:4px}.message-person .avatar{width:23px;height:23px;font-size:11px}.bubble{padding:8px 13px;border:1px solid color-mix(in srgb,var(--border) 70%,transparent);background:var(--incoming);box-shadow:0 2px 5px #0000000c;line-height:1.4;border-radius:16px;border-bottom-left-radius:5px}.mine .bubble{border-color:#ffffff12;border-bottom-left-radius:16px;border-bottom-right-radius:5px;background:var(--blue);color:white;box-shadow:0 3px 9px #0002}.bubble a{color:inherit;text-decoration:underline;text-underline-offset:3px}.reaction-pill{background:var(--head);color:var(--text);border:1px solid var(--border);box-shadow:0 2px 5px #00000009}.reaction-pill.is-mine,[data-theme=light] .reaction-pill.is-mine{background:var(--soft);color:var(--text);border-color:var(--blue)}.receipt-status{color:var(--muted);letter-spacing:.1px}.message-bottom{border:1px solid var(--border);box-shadow:var(--shadow-control)}
.file-card,.link-card{background:var(--head);border:1px solid var(--border);box-shadow:0 3px 12px #00000012}.file-card a{color:var(--text)}.link-card small,.link-card p{color:var(--muted)}
.composer{margin:0 20px 18px;padding:9px;border:1px solid var(--border);border-radius:22px;background:var(--head);box-shadow:0 8px 24px #0002,inset 0 1px 0 #ffffff05;gap:8px}.composer textarea{background:var(--field);border:1px solid var(--border);border-radius:16px;padding:10px 13px;min-height:44px;line-height:22px}.composer textarea:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 15%,transparent)}.composer>.square{width:42px;height:44px;background:var(--soft);border:1px solid var(--border);border-radius:14px}.composer .send{width:46px;height:44px;padding:0;display:grid;place-items:center;border-radius:15px;box-shadow:0 3px 9px #0002}.typing{height:25px;padding-top:3px}.send,.primary,.secondary{transition:filter .14s ease,box-shadow .14s ease}.send:hover,.primary:hover{filter:brightness(1.08)}button:active:not(:disabled){filter:brightness(.92)}button:disabled{cursor:wait;opacity:.65}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.composer[aria-busy=true]{border-color:var(--blue)}.pending-status{font-size:11px;color:var(--muted);padding:4px 7px}.pending.failed .pending-status{color:var(--text)}
dialog{background:var(--sidebar);color:var(--text);border:1px solid var(--border);border-radius:20px;box-shadow:0 24px 80px #0006;padding:24px;max-height:calc(100dvh - 32px)}dialog::backdrop{background:#02081499;backdrop-filter:blur(3px)}.modal-heading{padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--border)}dialog h2{font-size:20px;letter-spacing:-.4px}dialog section{border-color:var(--border)}dialog input,dialog select,dialog textarea{color:var(--text);background:var(--field)}dialog .secondary{border-color:var(--border);background:var(--soft);color:var(--text)}.new-messages-button{box-shadow:0 5px 18px #0003;margin:6px auto}.dm-theme-notice{font-size:10px;padding:6px 12px;color:var(--muted)}.reaction-alert,.message-alert,.notification-intro,.announcement-banner{box-shadow:0 4px 18px #0001}.login-card{box-shadow:0 24px 80px #0004,inset 0 1px 0 #ffffff08}
:is(.presence-label,.my-status,.chat-heading small).status-available,:is(.presence-label,.my-status,.chat-heading small).status-elsewhere{color:var(--presence-green)!important}:is(.presence-label,.my-status,.chat-heading small).status-away{color:var(--presence-yellow)!important}:is(.presence-label,.my-status,.chat-heading small).status-out_of_office{color:var(--presence-purple)!important}
form[aria-busy=true] .primary{cursor:wait;opacity:.7}.send{color:white}.send:focus-visible{outline-color:var(--focus-ring)}
@media(max-width:1100px){.sidebar{width:300px}.chat-top{gap:8px;padding:13px 18px}.messages{padding-left:20px;padding-right:20px}}
@media(max-width:720px){.sidebar{width:100%}.brand{padding:calc(14px + env(safe-area-inset-top)) 18px 14px}.searchwrap{margin-bottom:12px}.chat-top,[data-theme=light] .chat-top{padding:calc(9px + env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 9px max(8px,env(safe-area-inset-left));gap:4px;flex-wrap:wrap;min-height:64px}.chat-top .avatar{width:30px;height:30px;font-size:15px;border-radius:10px}.chat-heading{flex:1 1 72px}.chat-heading strong{font-size:14px}.chat-heading small{font-size:10px}.chat-top .square{min-width:40px;width:40px;height:44px;font-size:20px}.chat-top .inbox-button{min-width:44px;min-height:44px;padding:4px 7px;font-size:10px}.messages{padding:14px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left))}.msg{max-width:88%;margin-top:9px}.msg.continued{margin-top:0}.bubble{font-size:15px;padding:7px 11px}.composer{margin:0 max(7px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));padding:6px;gap:5px;border-radius:21px}.composer textarea{padding:10px;min-height:44px;font-size:16px}.composer>.square{width:44px;min-width:44px;height:44px}.composer .send{width:44px;min-width:44px;height:44px}.account{padding-bottom:max(16px,env(safe-area-inset-bottom))}.typing{height:22px;padding:2px 14px}.receipt-status{min-height:28px}.reaction-pill{min-height:32px;padding:4px 9px}.reaction-choice{min-width:44px;min-height:44px}dialog{padding:18px;max-width:calc(100vw - 20px);max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.reaction-alert{bottom:calc(90px + env(safe-area-inset-bottom))}}
@media(pointer:coarse){.secondary,.text-button,dialog button,.my-status{min-height:44px}.directory-tabs button{min-height:44px}.receipt-status{min-height:32px}.my-status{padding:4px 0;min-height:32px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}dialog::backdrop{backdrop-filter:none}}
/* Follow the usable viewport when the phone keyboard opens, without disabling zoom. */
body{height:100dvh;min-height:0}.conversation{min-height:0}.composer{flex-shrink:0}#messages{min-height:0}
.file-card a,[data-theme=light] .file-card a{color:var(--text)}.announcement-banner small,[data-theme=light] .announcement-banner small{color:var(--muted)}

/* Resolve presence palette tokens on account and shared conversation surfaces. */
:root{--presence-green:var(--app-dark-presence-green);--presence-yellow:var(--app-dark-presence-yellow);--presence-purple:var(--app-dark-presence-purple);}
[data-theme=light]{--presence-green:var(--app-light-presence-green);--presence-yellow:var(--app-light-presence-yellow);--presence-purple:var(--app-light-presence-purple);}
.conversation.has-shared-theme{--presence-green:var(--chat-dark-presence-green);--presence-yellow:var(--chat-dark-presence-yellow);--presence-purple:var(--chat-dark-presence-purple);}
[data-theme=light] .conversation.has-shared-theme{--presence-green:var(--chat-light-presence-green);--presence-yellow:var(--chat-light-presence-yellow);--presence-purple:var(--chat-light-presence-purple);}

/* A single viewport shell: the composer remains in flex flow, never keyboard-positioned. */
@media(max-width:720px){
 html[data-oli-viewport=mobile]{height:100%;overflow:hidden;overscroll-behavior:none}
 html[data-oli-viewport=mobile] body{position:fixed;top:var(--oli-visible-top,0px);left:0;right:0;width:100%;height:var(--oli-visible-height,100dvh);min-height:0;margin:0;overflow:hidden}
 html[data-oli-viewport=mobile] .app{flex:1 1 0%;height:auto;min-height:0}
 html[data-oli-viewport=mobile] .conversation{flex:1 1 0%;min-height:0;overflow:hidden}
 html[data-oli-viewport=mobile] .messages{flex:1 1 0%;min-height:0;overflow-y:auto;overscroll-behavior-y:contain}
 html[data-oli-viewport=mobile] .composer{position:static;flex:0 0 auto}
}