:root{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#202b3a;background:#fff;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}.hidden{display:none!important}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #2874d0;outline-offset:2px}.login-shell{min-height:100dvh;display:grid;place-items:center;background:#f6f8fc;padding:20px}.login-card{background:white;border:1px solid #e5eaf0;border-radius:20px;box-shadow:0 18px 65px #19385c17;width:min(100%,400px);padding:36px;display:flex;flex-direction:column;gap:12px}.brand{background:linear-gradient(135deg,#1162b0,#2886d7);color:#fff;border-radius:15px;font-size:29px;font-weight:800;width:54px;height:54px;display:grid;place-items:center;letter-spacing:-5px;padding-right:5px}.brand span{color:#c4e5ff;font-size:13px;letter-spacing:0}.brand.small{width:39px;height:39px;font-size:22px;border-radius:12px;flex-shrink:0}.login-card h1{font-size:24px;margin:9px 0 0}.login-card p,.login-card small{color:#79899b;margin:0 0 9px}.login-card label{font-size:13px;font-weight:600}.login-card input,.search-wrap input,.composer textarea{width:100%;border:1px solid #d9e1ea;border-radius:11px;padding:12px;outline-offset:2px;background:#fff}.login-card button,.composer button{background:#1266b5;color:#fff;border:0;border-radius:11px;padding:12px 19px;font-weight:650}.error{color:#b72d3b;font-size:13px;min-height:0}.workspace{height:100dvh;display:flex;background:#fff;overflow:hidden}.rail{width:72px;flex-shrink:0;border-right:1px solid #edf0f5;background:#fafbfe;display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 7px 14px}.rail-logo{margin-bottom:23px}.rail-action{position:relative;border:0;background:transparent;border-radius:13px;color:#7b899d;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 5px;min-width:56px;font-size:10px}.rail-action svg,.icon-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.rail-action.selected,.rail-action:hover{background:#e8f1fd;color:#1766b2}.rail-spacer{flex:1}.rail-badge{position:absolute;right:0;top:3px;min-width:16px;height:16px;padding:1px 4px;border-radius:10px;background:#dc2626;color:white;font-size:10px}#sidebar{width:325px;max-width:38vw;display:flex;flex-direction:column;border-right:1px solid #e9edf3;flex-shrink:0;min-width:0}.side-head,.chat-head{height:75px;display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #eef1f5}.side-head .sidebar-title,.chat-heading{flex:1;min-width:0}.sidebar-title h1{font-size:22px;margin:0;font-weight:750;letter-spacing:-.5px}.side-head small,.chat-head small{display:block;font-size:12px;color:#93a0af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.icon-button{background:transparent;border:0;color:#738399;padding:7px;display:grid;place-items:center;border-radius:9px;font-size:23px;flex-shrink:0}.icon-button:hover{background:#eef3f9;color:#1c6bb5}.search-wrap{position:relative;padding:15px 14px 11px}.search-wrap input{background:#f4f6fa;border-color:#f4f6fa;padding:11px 12px 11px 36px;font-size:13px}.search-icon{position:absolute;top:22px;left:25px;color:#93a0b1;font-size:22px;line-height:24px}.section-label{font-size:11px;color:#99a5b5;font-weight:650;padding:8px 18px 10px;text-transform:uppercase;letter-spacing:.7px}.conversation-list{overflow:auto;flex:1}.conversation{width:100%;text-align:left;border:0;background:white;display:flex;gap:12px;padding:13px 14px;align-items:center;min-height:70px;position:relative}.conversation:hover{background:#f6f9fe}.conversation.active{background:#eaf3ff}.conversation.active:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:#1c70c4}.avatar{background:#e0edfc;color:#1767b5;border-radius:50%;width:43px;height:43px;display:grid;place-items:center;font-weight:750;flex-shrink:0;font-size:16px}.conv-text{min-width:0;flex:1}.conv-text strong,.conv-text small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.conv-text strong{font-size:13px;font-weight:650}.conv-text small{font-size:12px;color:#8b98aa;margin-top:6px}.count{background:#176dbd;color:white;border-radius:20px;font-size:10px;min-width:19px;text-align:center;padding:4px 6px}footer{text-align:center;padding:11px;color:#9ba8b7;font-size:10px;border-top:1px solid #f0f3f7}footer span{color:#b6c1cc}.chat{flex:1;display:flex;flex-direction:column;min-width:0;background:#f7f9fc}.chat-head{background:#fff}.chat-heading strong{font-size:15px;font-weight:700}.chat-avatar{width:38px;height:38px;font-size:14px}.messages{flex:1;overflow-y:auto;padding:24px clamp(16px,4vw,64px);display:flex;flex-direction:column;gap:13px;background:#f8fafd}.empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:10px;color:#9aa7b8;text-align:center;font-size:13px}.empty strong{font-size:17px;color:#62758d}.empty-icon{width:60px;height:60px;border-radius:20px;display:grid;place-items:center;background:#e9f2ff;color:#3b85ce;font-size:30px;margin-bottom:8px}.message{max-width:min(72%,630px);align-self:flex-start}.message.mine{align-self:flex-end}.bubble{white-space:pre-wrap;overflow-wrap:anywhere;background:#fff;border:1px solid #e9edf2;border-radius:16px 16px 16px 5px;padding:11px 15px;line-height:1.5;font-size:13px;box-shadow:0 1px 3px #203e5b08}.mine .bubble{background:#1972c5;color:#fff;border-color:#1972c5;border-radius:16px 16px 5px 16px}.meta{font-size:10px;color:#9aa7b5;margin:5px 5px 0}.mine .meta{text-align:right}.composer{padding:12px clamp(16px,4vw,64px) 16px;display:flex;gap:10px;align-items:end;border-top:1px solid #e9eef4;background:#fff}.compose-field{flex:1}.composer textarea{display:block;resize:none;max-height:140px;min-height:44px;background:#f6f8fb;border-color:#edf0f5;font-size:13px}.composer button{height:44px;width:44px;padding:10px;display:grid;place-items:center}.composer button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.chat>.error{padding:0 16px;background:#fff}.back{display:none}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#233950;color:#fff;border-radius:11px;padding:12px 18px;box-shadow:0 7px 25px #23395033;font-size:13px;z-index:10;max-width:90vw;text-align:center}@media(max-width:900px){.rail{width:62px}.rail-action{min-width:48px}#sidebar{width:285px;max-width:39vw}.messages{padding:18px}.composer{padding:12px 16px}}@media(max-width:700px){.rail{width:58px;padding:12px 4px}.rail-logo{margin-bottom:12px}.rail-action{min-width:47px;font-size:9px}#sidebar{flex:1;width:auto;max-width:none}.chat{display:none}.workspace.chat-open .rail,.workspace.chat-open #sidebar{display:none}.workspace.chat-open .chat{display:flex}.back{display:grid}.side-head,.chat-head{height:66px}.messages{padding:13px}.message{max-width:87%}.login-card{padding:25px}.section-label{padding-top:3px}}@media(max-width:360px){.rail{width:51px}.rail-action{min-width:42px}.conversation{padding:11px 9px}.side-head{padding:9px}.search-wrap{padding:10px}}@media(prefers-reduced-motion:no-preference){.conversation,.rail-action,.icon-button{transition:background .12s ease}}

/* Frennect desktop parity: people, avatars, directory and new-chat dialog */
.web-tabs{display:flex;gap:5px;padding:4px 12px 8px;border-bottom:1px solid #e8edf4}.web-tab{border:0;background:transparent;color:#6b7f99;padding:9px 15px;border-radius:9px;cursor:pointer;font-weight:650}.web-tab.active{background:#e9f2ff;color:#1766b4}.avatar{position:relative;flex-shrink:0;overflow:visible}.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}.presence{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;background:#a0aaba;border:2px solid white;border-radius:50%}.presence.online{background:#31b976}.presence.idle{background:#f5b942}.people-row{min-height:62px}.web-modal-backdrop{position:fixed;inset:0;background:rgba(15,31,51,.43);z-index:50;display:grid;place-items:center;padding:15px}.web-modal-backdrop.hidden{display:none}.web-modal{width:min(430px,100%);max-height:min(660px,90vh);display:flex;flex-direction:column;background:white;border-radius:16px;padding:18px;box-shadow:0 16px 70px #172e4d3d}.web-modal header{display:flex;align-items:center;justify-content:space-between}.web-modal h2{font-size:18px;margin:0 0 12px}.web-modal>input{border:1px solid #d6dfeb;border-radius:10px;padding:12px;margin-bottom:9px}.web-modal-people{overflow:auto;min-height:90px;flex:1}.web-modal-people .conversation{width:100%;text-align:left;display:flex;align-items:center;gap:10px}.web-modal-people .conversation strong{flex:1}.web-modal-bottom{display:grid;gap:10px;padding-top:12px}.web-modal-bottom label{display:flex;gap:9px;align-items:center}.web-modal-bottom>input{border:1px solid #d6dfeb;border-radius:9px;padding:10px}.web-modal-bottom>button{background:#176bb9;color:white;border:0;border-radius:9px;padding:11px;cursor:pointer}.web-reactions{display:flex;gap:4px;flex-wrap:wrap;margin:2px 0 8px}.web-reactions button{border:1px solid #e0e8f2;background:#fff;border-radius:16px;padding:3px 7px;cursor:pointer;font-size:12px}.web-reactions button.web-reacted{background:#e4f0ff;border-color:#a3c8f6}.web-reaction-picker{display:inline-flex;gap:2px}.web-attachment{display:block;background:#e9f2ff;border:0;border-radius:9px;padding:9px;margin-top:7px;cursor:pointer;color:#125b9c;text-align:left;max-width:100%;overflow-wrap:anywhere}.web-quote{border-left:3px solid #6a9bd4;padding:6px 9px;margin-bottom:8px;background:#f0f5fc;border-radius:4px;font-size:12px}.chat-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}#attach-button{flex-shrink:0;font-size:23px}@media(max-width:600px){.web-modal{max-height:86dvh}.web-tabs{padding-inline:7px}}

/* Department directory matching the desktop hierarchy. */
.department-heading{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:11px 16px 8px;background:#f6f8fc;border-bottom:1px solid #e6ebf3;color:#4c607a;font-size:11px;font-weight:750;letter-spacing:.4px;text-transform:uppercase}
.department-count{color:#7e90a6;background:#e8edf5;border-radius:12px;padding:2px 7px;font-size:10px}
.people-row{min-height:60px;padding-top:9px;padding-bottom:9px}
.brand{letter-spacing:0;padding-right:0}.brand img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
.rail-logo{overflow:hidden}

/* Dedicated Groups tab beside People. */
.web-tabs{display:flex;gap:4px;min-width:0}
.web-tab{flex:1;min-width:0;text-align:center}
.group-avatar{display:flex;align-items:center;justify-content:center;font-size:16px;background:#e4edfa}

/* Conversation usability: paging, reply composer and compact message actions. */
.messages{scroll-behavior:auto;overscroll-behavior:contain}
.message-day{align-self:center;position:relative;margin:17px auto 13px;padding:5px 12px;border-radius:14px;background:#eaf0f7;color:#6a7d93;font-size:11px;font-weight:650;text-align:center}
.load-older{display:block;margin:10px auto 15px;border:1px solid #d9e5f3;background:#fff;color:#2666a1;padding:8px 15px;border-radius:20px;font-size:12px}
.conversation-loading{margin:auto;color:#8192a7;font-size:13px}
.message-actions{display:flex;gap:5px;opacity:.7;margin-top:3px}
.message-actions button{border:0;background:transparent;color:#637f9e;padding:3px 7px;font-size:11px;border-radius:7px}
.message-actions button:hover{background:#e9f1fa;color:#1766b2}
.reply-draft{display:flex;align-items:center;justify-content:space-between;gap:10px;border-left:3px solid #2a78c4;background:#eef5fd;padding:6px 10px;margin-bottom:6px;border-radius:6px;font-size:12px;color:#315d8b}
.reply-draft span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reply-draft button{background:transparent;color:#315d8b;border:0;padding:2px 5px;font-size:20px}
.message .bubble{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:600px){.message-day{margin:12px auto}.message-actions{opacity:1}}

/* v1.1.20: clean compact chat bubbles, hover/focus action toolbar. */
.message{position:relative;max-width:min(78%,660px);width:max-content;min-width:0;margin-bottom:7px}
.message .bubble{display:block;max-width:100%;min-width:64px;padding:10px 14px;border-radius:16px 16px 16px 5px;font-size:13px;line-height:1.48;box-shadow:0 1px 2px #2444630a}
.message.mine .bubble{border-radius:16px 16px 5px 16px}
.message .meta{font-size:10px;line-height:1.3;margin:4px 4px 0;color:#8394a9}
.message.mine .meta{text-align:right}
.message .message-actions{position:absolute;z-index:4;top:-17px;right:0;display:flex;gap:2px;align-items:center;padding:3px 5px;background:#fff;border:1px solid #e3eaf2;border-radius:22px;box-shadow:0 3px 12px #2444631c;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .12s,transform .12s,visibility .12s}
.message.mine .message-actions{right:0;left:auto}
.message:hover .message-actions,.message:focus-within .message-actions{opacity:1;visibility:visible;transform:translateY(0)}
.message .message-actions button{display:grid;place-items:center;min-width:28px;height:26px;padding:0 6px;border:0;border-radius:16px;background:transparent;color:#526d8a;font-size:16px;line-height:1}
.message .message-actions button:hover,.message .message-actions button:focus-visible{background:#e9f2fc;color:#1466b4}
.message .web-reactions{display:flex;gap:4px;margin:5px 2px 0;flex-wrap:wrap}
.message.mine .web-reactions{justify-content:flex-end}
.message .web-reactions button{border-radius:14px;padding:3px 8px;font-size:11px;line-height:1.3;box-shadow:0 1px 2px #1b365013}
@media(hover:none),(pointer:coarse){.message .message-actions{position:static;visibility:visible;opacity:1;transform:none;box-shadow:none;border:0;background:transparent;padding:1px 0;justify-content:flex-start}.message.mine .message-actions{justify-content:flex-end}.message .message-actions button{font-size:15px;min-width:30px}}
@media(max-width:600px){.message{max-width:88%}.message .bubble{font-size:13px}}

/* Inline editing, matching the desktop message-edit flow. */
.web-edit-box{width:clamp(220px,35vw,420px);max-width:100%;color:#24344b}
.web-edit-input{display:block;width:100%;min-height:72px;resize:vertical;border:1px solid #a6c7ea;background:#fff;color:#1c2938;border-radius:9px;padding:9px 11px;line-height:1.45;font:inherit;outline-offset:2px}
.web-edit-controls{display:flex;justify-content:flex-end;gap:7px;margin-top:7px}
.web-edit-controls button{padding:6px 13px;border:1px solid #cbd8e8;border-radius:8px;background:#fff;color:#315475;font-size:12px;font-weight:600}
.web-edit-controls .web-edit-save{background:#176dc0;border-color:#176dc0;color:white}
.web-edit-controls button:disabled{opacity:.55}
@media(max-width:600px){.web-edit-box{width:min(70vw,340px)}}

/* Formatting and delivery states in web conversations */
.bubble strong{font-weight:750}.bubble em{font-style:italic}
.web-edited{font-style:italic;color:#8493a6}
.web-delivery{font-weight:550;color:#788ca3}
.web-delivery.web-seen{color:#2174cc}
.web-send-status{font-size:11px;color:#71849a;text-align:right;padding:0 18px;min-height:0}
.web-send-status:empty{display:none}

/* Presence labels and desktop-style collapsible Offline directory */
.chat-presence-label{display:block;color:#7a899c;font-size:11px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.offline-directory{display:block}.offline-directory>summary{cursor:pointer;list-style:none;user-select:none}.offline-directory>summary::-webkit-details-marker{display:none}.offline-directory>summary::before{content:"›";display:inline-block;font-size:16px;margin-right:8px;color:#8391a3;transition:transform .12s}.offline-directory[open]>summary::before{transform:rotate(90deg)}
.avatar img{max-width:100%;max-height:100%;object-fit:cover}

/* Keep directory headings left-aligned, with only Offline's count on the right. */
.offline-directory > summary.department-heading{justify-content:flex-start;gap:7px;text-align:left}
.offline-directory > summary.department-heading > span:first-child{margin-right:auto;text-align:left}
.offline-directory > summary.department-heading > .department-count{margin-left:auto;flex-shrink:0}

/* Conversation details, accessible search and compact browser layouts */
.web-details-backdrop{position:fixed;inset:0;z-index:110;background:rgba(20,31,48,.38);display:flex;justify-content:flex-end}
.web-details-backdrop.hidden{display:none}
.web-details-panel{background:var(--panel,#fff);color:inherit;width:min(420px,100%);height:100%;box-shadow:-8px 0 35px #0002;display:flex;flex-direction:column;gap:12px;padding:20px;overflow:auto}
.web-details-panel header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.web-details-panel header h2{margin:0;font-size:19px}.web-details-panel header small{display:block;color:#72809a;margin-top:4px}
.web-details-label,.web-details-heading{font-weight:700;font-size:13px}
#details-search{width:100%;padding:11px 13px;border-radius:11px;border:1px solid #d9e2ee;background:#f7f9fd;color:inherit}
#details-scope{color:#738199;line-height:1.4}
.web-details-results{overflow-y:auto;min-height:80px;flex:1}
.web-details-result{display:flex;flex-direction:column;align-items:stretch;gap:5px;width:100%;padding:11px;border:0;border-bottom:1px solid #e8edf4;background:transparent;text-align:left;cursor:pointer;color:inherit;overflow-wrap:anywhere}
.web-details-result:hover{background:#eef4fc}.web-details-result small{color:#77869a}
.web-notify-button{border:0;border-radius:9px;padding:11px;background:#e8f1ff;color:#235ca0;cursor:pointer;font-weight:600}
.web-highlight{outline:2px solid #4a9cff;outline-offset:3px;border-radius:10px}
@media(max-width:800px){.web-details-panel{width:min(380px,100%);padding:14px}.web-details-backdrop{z-index:200}}
@media(max-height:600px){.web-details-panel{gap:8px;padding-top:10px;padding-bottom:10px}}

/* In-conversation image viewer matching Frennect desktop */
.fv-overlay{position:fixed;inset:0;z-index:100000;background:rgba(12,18,30,.61);color:#fff;display:grid;grid-template-rows:54px minmax(0,1fr) auto;overflow:hidden}.fv-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 16px;background:rgba(20,27,40,.75);min-width:0}.fv-filename{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:14px}.fv-close{border:0;background:transparent;color:white;font-size:30px;cursor:pointer;line-height:1;padding:3px 9px}.fv-stage{grid-row:2;grid-column:1;overflow:auto;display:flex;align-items:safe center;justify-content:safe center;min-width:0;min-height:0;cursor:grab;touch-action:pan-x pan-y}.fv-stage:active{cursor:grabbing}.fv-image{max-width:none;max-height:none;object-fit:contain;flex-shrink:0;user-select:none;pointer-events:none}.fv-nav{position:absolute;top:50%;transform:translateY(-50%);height:44px;width:42px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(20,27,40,.76);color:white;font-size:32px;cursor:pointer;z-index:2}.fv-prev{left:12px}.fv-next{right:12px}.fv-nav[hidden]{display:none}.fv-toolbar{grid-row:3;grid-column:1;display:flex;align-items:center;justify-content:center;gap:5px;max-width:min(850px,calc(100vw - 24px));margin:0 auto 12px;padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:rgba(20,27,40,.78);overflow-x:auto;white-space:nowrap}.fv-toolbar button{color:#fff;border:0;border-radius:7px;background:rgba(255,255,255,.1);min-height:34px;min-width:36px;padding:5px 10px;cursor:pointer}.fv-toolbar button:hover,.fv-nav:hover{background:rgba(255,255,255,.23)}.fv-zoom{min-width:47px;text-align:center;font-size:13px;font-weight:600}@media(max-width:480px){.fv-header{padding:4px 10px}.fv-toolbar{justify-content:flex-start;padding:6px;margin-bottom:6px}.fv-nav{width:32px;height:38px}.fv-prev{left:4px}.fv-next{right:4px}}

/* Inline photo previews in chat; files remain attachment buttons. */
.web-image-preview{display:block;max-width:min(340px,70vw);width:fit-content;min-width:100px;min-height:70px;padding:0;margin:5px 0 2px;border:0;border-radius:12px;overflow:hidden;background:#e7edf5;cursor:zoom-in;text-align:center}
.web-image-preview img{display:block;max-width:100%;max-height:320px;width:auto;height:auto;object-fit:contain}
.web-image-preview img:not([src]){display:none}
.web-image-loading{display:block;padding:18px 12px;color:#62758a;font-size:12px}
.web-image-preview img[src]+.web-image-loading{display:none}
@media(max-width:800px){.web-image-preview{max-width:min(260px,66vw)}.web-image-preview img{max-height:240px}}

/* Preserve original rectangular edge arrows; center the arrow glyph inside each button. */
.fv-nav{display:flex;align-items:center;justify-content:center;line-height:1;padding:0;text-align:center;font-family:Arial,sans-serif}
.fv-nav[hidden]{display:none}

/* Keep chat position stable while asynchronous image previews load. */
.web-image-preview{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:min(320px,68vw);height:210px;min-width:0;min-height:0;max-width:100%;flex-shrink:0;position:relative}
.web-image-preview img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.web-image-preview .web-image-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px}
.web-image-preview img[src]+.web-image-loading{display:none}
@media(max-width:800px){.web-image-preview{width:min(260px,66vw);height:175px}}

/* Frennect attachment tiles and clean inline photos. */
.message.attachment-only .bubble{padding:5px;background:#fff;border:1px solid #e3eaf2;box-shadow:0 2px 8px #1b35500b}
.message.mine.attachment-only .bubble{background:#fff;color:#24354b;border-color:#dce7f3}
.message.attachment-only .web-image-preview{margin:0;border-radius:11px;min-width:0;min-height:0;background:#eef3fa}
.web-image-preview{border:1px solid #e5ebf3;box-shadow:0 1px 5px #162f4b12;transition:filter .15s ease,box-shadow .15s ease}
.web-image-preview:hover{filter:brightness(.96);box-shadow:0 3px 12px #162f4b20}
.web-image-preview:focus-visible,.web-attachment:focus-visible{outline:2px solid #2874d0;outline-offset:3px}
.web-attachment{display:flex;align-items:center;gap:12px;width:min(330px,68vw);max-width:100%;min-width:0;padding:10px 12px;margin:5px 0 2px;border:1px solid #dfe8f4;border-radius:12px;background:#f5f8fd;color:#20354e;text-align:left;white-space:normal;overflow:hidden;transition:background .15s ease,border-color .15s ease}
.web-attachment:hover{background:#eaf2fc;border-color:#bdd7f3}
.message.attachment-only .web-attachment{margin:0;border:0;background:#f5f8fd}
.message.attachment-only .web-attachment:hover{background:#eaf2fc}
.web-file-icon{display:grid;place-items:center;flex:0 0 45px;width:45px;height:49px;border-radius:9px;background:#e2edfc;color:#1769b6;font-size:11px;font-weight:800;letter-spacing:.25px}
.web-file-details{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.web-file-name{font-size:12px;font-weight:650;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.web-file-hint{font-size:10px;color:#71849b;line-height:1.3}
.web-file-download{display:grid;place-items:center;flex:0 0 27px;width:27px;height:27px;border-radius:8px;background:#e5effb;color:#236bb1;font-size:20px;font-weight:600;line-height:1}
@media(max-width:600px){.web-attachment{width:min(295px,75vw);gap:9px;padding:8px}.web-file-icon{flex-basis:40px;width:40px;height:43px}}

/* Keep chat position stable while asynchronous image previews load. */
.web-image-preview{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:min(320px,68vw);height:210px;min-width:0;min-height:0;max-width:100%;flex-shrink:0;position:relative}
.web-image-preview img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.web-image-preview .web-image-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px}
.web-image-preview img[src]+.web-image-loading{display:none}
@media(max-width:800px){.web-image-preview{width:min(260px,66vw);height:175px}}

/* Empty conversation state: hide placeholder avatar and header actions until a chat is selected. */
.chat-head:has(#chat-title:empty) #chat-avatar,
.chat-head:has(#chat-title:empty) #chat-details,
.chat-head:has(#chat-title:empty) #refresh,
.chat-head:has(#chat-title:empty) #back { display:none !important; }
/* Desktop-style conversation controls, keyboard use and file drop affordance. */
.chat{position:relative}
.web-jump-latest{position:absolute;right:24px;bottom:94px;z-index:8;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border:1px solid #c9daee;border-radius:22px;background:#fff;color:#2466ac;box-shadow:0 3px 15px #153b6226;font:600 12px/1.3 inherit;cursor:pointer}
.web-jump-latest:hover{background:#eef5ff}
.web-jump-latest.hidden{display:none}
.web-drag-active::after{content:"Drop a file to send";position:absolute;inset:66px 14px 86px;z-index:50;display:grid;place-items:center;border:2px dashed #4386d3;border-radius:14px;background:#eaf3ffed;color:#195b9c;font-size:18px;font-weight:700;pointer-events:none}
#message-input{resize:none;max-height:140px;overflow-y:auto}
@media(max-width:800px){.web-jump-latest{right:12px;bottom:86px;padding:8px 11px}.web-drag-active::after{inset:58px 8px 80px;font-size:14px}}
@media(max-height:600px){.web-jump-latest{bottom:76px}}

/* Frennect conversation information: use the app's identity, presence and existing media/search features. */
.web-details-profile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:16px 8px 8px}
.web-details-avatar{width:76px;height:76px;display:flex;align-items:center;justify-content:center;margin-bottom:5px}
.web-details-avatar .avatar{width:76px;height:76px;font-size:26px}
.web-details-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
#details-person-name{font-size:17px;line-height:1.35;overflow-wrap:anywhere}
#details-presence{font-size:12px;color:var(--muted,#8190a5)}
.web-details-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:5px 0 12px}
.web-details-action{border:1px solid var(--border,#dce4ed);border-radius:12px;background:var(--surface,#f3f6fb);color:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 6px;font-size:12px;font-weight:600}
.web-details-action span{font-size:20px;line-height:1}
.web-details-action:hover{filter:brightness(.95)}
@media(max-height:600px){.web-details-profile{padding:5px 8px}.web-details-avatar,.web-details-avatar .avatar{width:52px;height:52px}.web-details-actions{margin:0 0 5px}}

/* Compact Frennect conversation details: panels are collapsed until chosen. */
.web-details-content.hidden{display:none!important}
.web-details-content{display:flex;flex-direction:column;gap:11px;min-height:0;flex:1;padding:14px;border:1px solid #e4ebf4;border-radius:16px;background:linear-gradient(180deg,#f9fbff,#fff);animation:web-details-reveal .16s ease-out}
@keyframes web-details-reveal{from{opacity:.5;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.web-details-content[data-mode="media"] .web-details-label,.web-details-content[data-mode="media"] #details-search{display:none}
.web-details-content[data-mode="search"] #details-scope{display:none}
.web-details-panel{gap:14px}
.web-details-panel header{padding-bottom:12px;border-bottom:1px solid #edf1f6}
.web-details-profile{padding:18px 8px 14px}
.web-details-actions{margin:0 0 5px;gap:10px}
.web-details-action{min-height:47px;border-radius:13px;border:1px solid #dce6f2;background:#f6f9fd;transition:background .15s,border-color .15s,box-shadow .15s}
.web-details-action:hover{background:#edf5ff;border-color:#c8dcf5;filter:none}
.web-details-action.active{background:#e7f1ff;color:#1763ac;border-color:#a8c9f0;box-shadow:0 2px 8px #226bb214}
.web-details-label,.web-details-heading{font-size:12px;font-weight:750;color:#344962}
#details-search{background:#fff;border-color:#d8e3f1;outline:none;min-height:43px}
#details-search:focus{border-color:#448bdb;box-shadow:0 0 0 3px #4386d319}
.web-details-results{flex:1;min-height:0;max-height:min(43vh,370px);overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding-right:3px}
.web-details-result{border:1px solid #e7edf5;border-radius:11px;background:#fff;padding:12px 13px;gap:6px;font-size:12px;transition:background .15s,border-color .15s}
.web-details-result:hover{background:#f0f6ff;border-color:#c9def7}
.web-details-result small{font-size:10px}
#details-scope{font-size:11px;line-height:1.5}
@media(max-width:600px){.web-details-content{padding:11px}.web-details-panel{gap:10px}}
@media(max-height:600px){.web-details-profile{padding:5px 8px}.web-details-content{padding:9px}.web-details-results{max-height:27vh}}
@media(prefers-reduced-motion:reduce){.web-details-content{animation:none}}

/* Consistent lightweight outline icons across the Frennect Web interface. */
.web-icon{display:block;width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.icon-button .web-icon,.rail-action .web-icon{width:21px;height:21px}
.search-icon{display:flex;align-items:center;justify-content:center;top:24px;font-size:initial}
.search-icon .web-icon{width:18px;height:18px}
.web-details-action .web-icon{width:19px;height:19px}
.message-actions button .web-icon{width:17px;height:17px;margin:auto}
.empty-icon .web-icon{width:30px;height:30px}
.web-jump-latest .web-icon{width:16px;height:16px;display:inline-block;vertical-align:-3px;margin-right:5px}
.fv-toolbar button .web-icon{width:18px;height:18px;margin:auto}
.fv-close .web-icon{width:22px;height:22px}
.fv-nav .web-icon{width:25px;height:25px}
#cancel-reply .web-icon{width:16px;height:16px}
@media(max-width:700px){.web-icon{width:19px;height:19px}}

/* Desktop-aligned formatting and emoji composer. */
.compose-field{min-width:0}
.web-format-toolbar{display:flex;align-items:center;gap:5px;position:relative;padding:0 0 7px}
.composer .web-format-button{width:30px;height:28px;min-width:30px;padding:4px;border:1px solid transparent;border-radius:8px;background:transparent;color:#65758a;font-size:14px;box-shadow:none}
.composer .web-format-button:hover,.composer .web-format-button:focus-visible{background:#edf4fd;border-color:#d7e5f7;color:#1967b3}
.web-format-button svg{width:18px!important;height:18px!important;stroke-width:1.8!important}
.web-emoji-picker{position:absolute;left:0;bottom:calc(100% + 7px);width:min(322px,calc(100vw - 70px));max-height:285px;overflow:hidden;background:#fff;border:1px solid #dce5f0;border-radius:15px;box-shadow:0 14px 40px #1e385c2b;z-index:30;padding:13px;color:#29394c}
.web-emoji-title{font-size:13px;font-weight:750;margin:0 0 9px}
.web-emoji-grid{max-height:228px;overflow-y:auto;overscroll-behavior:contain}
.web-emoji-category{font-size:11px;color:#7a8ca4;font-weight:700;padding:8px 0 5px}
.web-emoji-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.composer .web-emoji-choice{width:100%;height:36px;padding:5px;background:transparent;border:0;border-radius:9px;color:#253951;font-size:22px;font-weight:400}
.composer .web-emoji-choice:hover{background:#eaf2fd}
.web-emoji-choice img{display:block;width:24px;height:24px;object-fit:contain;margin:auto}
.web-inline-emoji{width:1.35em;height:1.35em;vertical-align:-.24em;object-fit:contain;display:inline-block}
@media(max-width:700px){.web-emoji-picker{width:min(310px,calc(100vw - 90px))}}

/* The draft's PNG preview and textarea share the same font and geometry. */
.compose-field{position:relative}
#message-input{position:relative;z-index:2;background:transparent!important;color:transparent!important;caret-color:#24364b;}
#message-input::placeholder{color:#8392a6!important}
#message-input::selection{background:rgba(72,132,218,.3)}
.web-emoji-draft-mirror{position:absolute;z-index:1;pointer-events:none;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;color:#24364b;box-sizing:border-box;}
.web-emoji-draft-mirror .web-inline-emoji{width:1.15em;height:1.15em;vertical-align:-.15em}

/* Consistent desktop PNG emoji in Chats and Groups recent-message previews. */
.conv-text small .web-preview-emoji{width:1.12em;height:1.12em;vertical-align:-.16em;object-fit:contain;display:inline-block;margin:0 1px}

/* Keep message actions outside even the shortest bubble; never stretch the bubble to fit the toolbar. */
.message .message-actions{top:-38px;right:0;left:auto;width:max-content;max-width:calc(100vw - 30px);white-space:nowrap;flex-wrap:nowrap;isolation:isolate}
.message .message-actions:has(.web-reaction-picker){z-index:12;opacity:1;visibility:visible;transform:none}
.message .web-reaction-picker{position:absolute;right:0;bottom:calc(100% + 7px);display:flex;align-items:center;gap:3px;width:max-content;max-width:min(280px,calc(100vw - 28px));padding:5px 7px;border:1px solid #e4eaf3;border-radius:999px;background:#fff;box-shadow:0 6px 22px #213b5b24;white-space:nowrap}
.message .web-reaction-picker button{display:grid;place-items:center;width:35px;min-width:35px;height:34px;padding:3px;border-radius:50%;font-size:20px;line-height:1}
.message .web-reaction-picker button:hover{background:#eef5ff;transform:scale(1.08)}
/* Leave room for hover controls without obscuring neighboring short messages. */
.message{margin-top:7px}
@media(hover:none),(pointer:coarse){
 .message .message-actions{position:relative;top:auto;right:auto;max-width:100%;width:max-content;margin-top:5px}
 .message .web-reaction-picker{bottom:calc(100% + 5px);right:0}
 .message{margin-top:0}
}

/* Compact, bubble-attached reaction badges, matching the desktop conversation. */
.message .web-reactions{display:flex;position:relative;justify-content:flex-start;align-items:center;gap:3px;flex-wrap:wrap;margin:-7px 8px 3px;z-index:2;pointer-events:none}
.message.mine .web-reactions{justify-content:flex-end}
.message .web-reactions .web-reaction-badge{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:23px;height:23px;padding:1px 4px;border:1px solid rgba(255,255,255,.8);border-radius:999px;background:#fff;box-shadow:0 2px 6px rgba(20,32,52,.18);font-size:15px;line-height:1;cursor:pointer;pointer-events:auto;vertical-align:middle}
.message .web-reactions .web-reaction-badge-emoji{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.message .web-reactions .web-reaction-badge-count{font-size:10px;line-height:1;color:#65748b;font-weight:600}
.message .web-reactions .web-reaction-badge:disabled{cursor:default;opacity:1}
.message .web-reactions .web-reaction-badge:hover:not(:disabled){background:#f5f9ff;transform:translateY(-1px)}

/* Keep the compact reaction attached to the bubble, before the sender/time label.
   The reaction must not cover metadata on short or emoji-only messages. */
.message .web-reactions{margin:-11px 8px 11px;min-height:23px;position:relative;z-index:3}
.message .web-reactions + .meta{margin-top:0;clear:both}
.message .web-reactions .web-reaction-badge{flex-shrink:0}


/* Frennect Web 1.1.20 — adaptive visual system, layered on existing functional UI. */
:root{
  color-scheme:light;
  --fw-bg:#f3f6fb;--fw-surface:#fff;--fw-ink:#1c2a3e;--fw-muted:#7a899e;
  --fw-line:#e6ecf4;--fw-blue:#246fce;--fw-blue-dark:#155cae;
  --fw-soft:#eaf3ff;--fw-shadow:0 10px 34px rgba(28,55,93,.08);
  font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
html,body,#app{width:100%;min-width:0;min-height:100%;overflow-x:hidden}
body{color:var(--fw-ink);background:var(--fw-bg)}
button,input,textarea{touch-action:manipulation}
button{-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--fw-blue);outline-offset:2px}
.workspace{height:100vh;height:100dvh;min-height:0;background:var(--fw-bg)}
.rail{width:76px;gap:8px;padding:19px 10px 15px;background:#f6f9fe;border-right:1px solid var(--fw-line)}
.rail-logo{margin-bottom:23px;box-shadow:0 5px 14px #195ca421}
.rail-action{min-width:54px;min-height:56px;padding:9px 5px;border-radius:15px;color:#7789a3;transition:background .2s,color .2s,transform .2s}
.rail-action.selected{background:#e4efff;color:#1d68bd}
.rail-action:hover{background:#e9f2ff;color:#1c68b9}
#sidebar{width:clamp(280px,25vw,374px);max-width:none;background:var(--fw-surface);border-right:1px solid var(--fw-line)}
.side-head,.chat-head{height:78px;min-height:78px;padding:13px 20px;border-bottom:1px solid var(--fw-line)}
.sidebar-title h1{font-size:24px;letter-spacing:-.7px}
.side-head small,.chat-head small{color:var(--fw-muted)}
.icon-button{width:37px;height:37px;padding:7px;border-radius:12px;transition:background .18s,color .18s,transform .18s}
.icon-button:hover{background:#eaf2fc;color:var(--fw-blue-dark)}
.search-wrap{padding:15px 16px 12px}
.search-wrap input{height:44px;border:1px solid #e9eef5;border-radius:13px;background:#f4f7fb;padding-left:40px;font-size:13px;transition:background .2s,border-color .2s,box-shadow .2s}
.search-wrap input:focus{background:#fff;border-color:#aacdf4;box-shadow:0 0 0 4px #2674cc13;outline:0}
.search-icon{top:26px;left:29px}
.web-tabs{gap:5px;padding:2px 15px 12px;border-bottom:1px solid var(--fw-line)}
.web-tab{flex:1;min-width:0;padding:10px 4px;border-radius:11px;font-size:12px;transition:background .18s,color .18s}
.web-tab.active{background:#e8f2ff;color:#1a64b4}
.conversation-list{min-height:0;overscroll-behavior:contain;scrollbar-gutter:stable}
.conversation{min-height:75px;padding:12px 17px;gap:12px;border-bottom:1px solid #f4f6fa;transition:background .18s}
.conversation.active{background:#ebf4ff}
.conversation.active:before{left:0;top:14px;bottom:14px;width:3px;border-radius:0 5px 5px 0}
.conversation:hover{background:#f4f8ff}
.avatar{width:45px;height:45px;background:#e8f1ff;color:#1c69b8}
.conv-text strong{font-size:13px;color:#25364e}
.conv-text small{font-size:12px;color:#8795a9}
#sidebar footer{background:#fff;padding:12px}
.chat{min-height:0;background:#f6f9fd}
.chat-head{background:rgba(255,255,255,.96);gap:12px;flex-shrink:0}
.chat-heading strong{font-size:15px;color:#24354b}
.messages{min-height:0;gap:14px;padding:25px clamp(18px,3.8vw,64px);background:radial-gradient(ellipse at 75% 0%,#f1f6ff 0%,transparent 48%),#f8fafd;overscroll-behavior:contain;scrollbar-gutter:stable}
.message{max-width:min(75%,660px);min-width:0}
.bubble{border:1px solid #e6edf5;border-radius:17px 17px 17px 6px;box-shadow:0 3px 12px #203b5a09;font-size:13px;line-height:1.55;padding:11px 15px}
.mine .bubble{background:linear-gradient(135deg,#267cd4,#1b69c0);border-color:#1e6cc3;border-radius:17px 17px 6px 17px}
.meta{color:#8d9bb0}
.composer{position:relative;flex-shrink:0;align-items:flex-end;gap:11px;padding:13px clamp(18px,3.8vw,64px) max(15px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--fw-line)}
.compose-field{min-width:0;padding:8px 11px 9px;background:#f5f8fc;border:1px solid #e5ebf4;border-radius:17px;transition:border-color .2s,box-shadow .2s}
.compose-field:focus-within{border-color:#b8d4f5;box-shadow:0 0 0 3px #2874d010}
.web-format-toolbar{padding-bottom:4px}
#message-input{width:100%;min-height:37px;padding:9px 4px;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;line-height:1.5}
.composer #attach-button{flex-shrink:0;width:43px;height:43px;border:1px solid #e4ecf6;border-radius:13px;background:#f0f5fc;color:#276ebd}
.composer #send{flex-shrink:0;width:43px;height:43px;border-radius:13px;background:linear-gradient(135deg,#2b80d8,#1965ba);box-shadow:0 4px 12px #1c68bb30}
.composer #send:hover{filter:brightness(1.06)}
.web-jump-latest{border-radius:999px;box-shadow:var(--fw-shadow)}
.empty-icon{width:70px;height:70px;border-radius:23px;background:#e6f0ff}
.login-shell{min-height:100vh;min-height:100dvh;background:radial-gradient(circle at 80% 10%,#e3efff,transparent 40%),linear-gradient(145deg,#f4f8ff,#edf3fa)}
.login-card{width:min(100%,420px);border-radius:25px;padding:clamp(25px,4vw,39px);border:1px solid #e3ebf6;box-shadow:0 25px 80px #173c6b16}
.login-card h1{font-size:clamp(22px,3vw,27px)}
.login-card input{min-height:45px}
.login-card button[type=submit]{min-height:45px;border-radius:12px;background:linear-gradient(135deg,#2c7bd2,#1763b5)}
.web-modal-backdrop,.web-details-backdrop{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.web-modal{border:1px solid #e7edf5;border-radius:22px;box-shadow:0 25px 80px #1b355038}
.web-details-panel{box-shadow:-14px 0 50px #21395716}
.web-details-action{transition:background .2s,border-color .2s,transform .2s}
.web-details-action:active{transform:scale(.98)}
.web-image-preview,.web-attachment{max-width:100%}
.web-emoji-picker{z-index:40}
@media(min-width:1400px){#sidebar{width:360px}.message{max-width:min(70%,700px)}}
@media(max-width:1100px){.rail{width:66px;padding-inline:6px}#sidebar{width:300px}.side-head,.chat-head{padding-inline:14px}.messages{padding-inline:24px}.composer{padding-inline:22px}}
@media(max-width:800px) and (min-width:701px){.rail{width:59px}.rail-action{min-width:46px}#sidebar{width:260px}.side-head,.chat-head{height:66px;min-height:66px}.side-head{padding-inline:10px}.search-wrap{padding-inline:10px}.web-tabs{padding-inline:8px}.conversation{padding:10px 9px;gap:9px}.messages{padding:16px}.composer{padding:10px 12px}.message{max-width:85%}}
@media(max-width:700px){
 .workspace{position:relative;display:flex}
 .rail{width:clamp(53px,13vw,64px);padding:12px 4px max(10px,env(safe-area-inset-bottom));gap:7px}
 .rail-action{min-width:44px;min-height:52px;padding:8px 3px}
 .rail-logo{margin-bottom:15px}
 #sidebar{flex:1;width:auto;min-width:0;max-width:none}
 .side-head,.chat-head{height:66px;min-height:66px;padding:9px 13px}
 .search-wrap{padding:12px 12px 9px}
 .search-icon{top:23px;left:25px}
 .web-tabs{padding:2px 11px 10px}
 .conversation{min-height:69px;padding:11px 13px}
 .chat{display:none;width:100%;min-width:0}
 .workspace.chat-open .rail,.workspace.chat-open #sidebar{display:none}
 .workspace.chat-open .chat{display:flex}
 .back{display:grid}
 .messages{padding:15px clamp(10px,3.5vw,22px);gap:12px;scrollbar-gutter:auto}
 .message{max-width:88%}
 .composer{padding:9px 10px max(10px,env(safe-area-inset-bottom));gap:7px}
 .compose-field{padding:5px 8px 7px;border-radius:15px}
 .composer #attach-button,.composer #send{width:40px;height:40px;padding:8px}
 .web-jump-latest{bottom:88px;right:12px}
 .web-details-panel{max-width:100vw}
}
@media(max-width:400px){
 .rail{width:51px}.rail-action{min-width:41px}
 .sidebar-title h1{font-size:21px}
 .side-head{gap:5px;padding-inline:9px}
 .side-head .icon-button{width:33px;height:35px}
 .conversation{gap:9px;padding-inline:9px}
 .avatar{width:40px;height:40px}
 .message{max-width:92%}
 .bubble{padding:9px 12px}
 .web-format-toolbar{gap:1px}
 .composer .web-format-button{width:28px;min-width:28px}
 .web-emoji-picker{max-width:calc(100vw - 65px)}
}
@media(max-height:540px){
 .rail{padding-top:7px;gap:2px}.rail-logo{margin-bottom:3px}
 .rail-action{min-height:43px;padding:5px 3px}
 .side-head,.chat-head{height:54px;min-height:54px}
 .search-wrap{padding-top:7px;padding-bottom:6px}.search-icon{top:18px}
 .web-tabs{padding-bottom:5px}.conversation{min-height:59px}
 .messages{padding-block:10px}.composer{padding-top:7px;padding-bottom:7px}
 .login-shell{padding:10px}.login-card{padding:18px;gap:8px}
}
@media(hover:none){.icon-button,.rail-action,.conversation,.web-tab{transition:none}}
@media(prefers-reduced-motion:no-preference){
 .login-card{animation:fw-enter .32s ease-out both}
 .empty{animation:fw-enter .3s ease-out both}
 @keyframes fw-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Composer refinement: compact toolbar + real inline text formatting. */
.compose-field{background:#f7f9fd;border:1px solid #e2eaf4;border-radius:17px;padding:8px 12px 10px;min-width:0;transition:border-color .2s,box-shadow .2s}
.compose-field:focus-within{background:#fff;border-color:#a6c9ef;box-shadow:0 0 0 3px #2874d010}
.web-format-toolbar{padding:0 0 6px;gap:6px;border-bottom:1px solid #eaf0f7;margin-bottom:6px}
.composer .web-format-button{width:30px;height:29px;min-width:30px;border-radius:9px;color:#6c809a;font-size:13px}
.composer .web-format-button.is-active{background:#e2efff!important;border-color:#b5d2f6!important;color:#1464bb!important;box-shadow:inset 0 0 0 1px #c5ddf8}
#message-input{display:none!important}
.web-emoji-draft-mirror{display:none!important}
#web-rich-draft{min-height:34px;max-height:min(150px,35dvh);overflow-y:auto;outline:0;border:0;background:transparent;color:#253750;font-size:13px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;padding:7px 2px 3px;scrollbar-width:thin}
#web-rich-draft:empty:before{content:attr(data-placeholder);color:#96a4b5;pointer-events:none}
#web-rich-draft strong,#web-rich-draft b{font-weight:750}
#web-rich-draft em,#web-rich-draft i{font-style:italic}
#web-rich-draft::selection{background:#bed9ff}
.composer #attach-button,.composer #send{align-self:flex-end;margin-bottom:3px}
@media(max-width:700px){.compose-field{padding:6px 9px 8px}.web-format-toolbar{padding-bottom:4px;margin-bottom:3px}#web-rich-draft{min-height:31px;padding-top:5px}.composer{align-items:flex-end}}

/* Emoji images inside the rich composer match the picker and conversation. */
#web-rich-draft img.web-rich-emoji{display:inline-block!important;width:1.28em!important;height:1.28em!important;max-width:none!important;object-fit:contain;vertical-align:-.22em;margin:0 1px;user-select:all;-webkit-user-drag:none}
#web-rich-draft{font-variant-emoji:text}

/* Outgoing message reactions: avoid the bright white badge on blue bubbles. */
.message.mine .web-reactions .web-reaction-badge{
  background:#1e6fc7;
  border:1px solid #4b98e6;
  box-shadow:0 2px 6px rgba(20,54,101,.19);
  color:#fff;
}
.message.mine .web-reactions .web-reaction-badge-count{color:#fff}
.message.mine .web-reactions .web-reaction-badge:disabled{opacity:1}

/* Frennect v1.1.21: web welcome and navigation refresh */
.fw-opening{position:fixed;inset:0;z-index:999999;background:linear-gradient(145deg,#f5f9ff,#e6f0ff);display:grid;place-items:center;transition:opacity .35s ease,visibility .35s ease}.fw-opening.is-done{opacity:0;visibility:hidden;pointer-events:none}.fw-opening-inner{display:flex;flex-direction:column;align-items:center;gap:12px;color:#142a48;font-weight:800;font-size:25px;letter-spacing:-.7px}.fw-opening-gif{width:108px;height:108px;object-fit:contain;border-radius:22px}.fw-opening-inner small{font-size:12px;font-weight:500;color:#7890ac;letter-spacing:0}.fw-opening-progress{width:130px;height:3px;border-radius:4px;background:#d4e5fa;overflow:hidden;margin-top:10px}.fw-opening-progress:after{content:"";display:block;width:45%;height:100%;background:#2375ce;border-radius:4px;animation:fw-progress 1.1s ease-in-out infinite alternate}@keyframes fw-progress{from{transform:translateX(0)}to{transform:translateX(155%)}}
.login-shell{padding:clamp(16px,4vw,52px);background:radial-gradient(ellipse at 15% 20%,#dbeaff 0,transparent 50%),linear-gradient(130deg,#edf5ff,#f7faff 55%,#e9f2fe)}.fw-login-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,440px);align-items:center;gap:clamp(30px,6vw,95px);width:min(1050px,100%)}.fw-login-intro{padding:24px 0 24px clamp(0px,2vw,22px)}.fw-intro-mark{width:72px;height:72px;border-radius:19px;box-shadow:0 15px 30px #1262b42b;overflow:hidden;margin-bottom:42px}.fw-intro-mark img{width:100%;height:100%;object-fit:contain}.fw-eyebrow,.fw-login-kicker{font-size:11px;font-weight:800;letter-spacing:1.8px;color:#2274c7}.fw-login-intro h2{font-size:clamp(32px,4vw,53px);line-height:1.13;letter-spacing:-1.9px;color:#152b4b;max-width:530px;margin:15px 0 20px}.fw-login-intro p{max-width:430px;color:#6d819c;line-height:1.75;font-size:15px}.fw-intro-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}.fw-intro-pills span{border:1px solid #d5e4f7;background:#ffffffa8;border-radius:20px;padding:9px 12px;color:#47688f;font-size:11px;font-weight:650}.login-card{width:100%;border:1px solid #fff;border-radius:27px;padding:clamp(25px,4vw,43px);box-shadow:0 22px 80px #173f721b;background:#ffffffed;gap:13px}.login-card>.brand{width:59px;height:59px;border-radius:16px;margin-bottom:7px}.fw-login-heading{margin:4px 0 10px}.fw-login-heading h1{margin:10px 0 7px;font-size:clamp(24px,2.7vw,29px);letter-spacing:-.8px;color:#172d4c}.fw-login-heading p{margin:0;color:#8292a8;font-size:14px}.login-card label{color:#344760;font-size:12px}.login-card input{border:1px solid #d9e3f0;border-radius:12px;min-height:48px;background:#fbfdff;transition:border-color .18s,box-shadow .18s}.login-card input:focus{border-color:#438cda;box-shadow:0 0 0 3px #3987d519;outline:none}.login-card button[type=submit]{min-height:48px;margin-top:5px;border-radius:12px;background:linear-gradient(110deg,#3186df,#1761b6);box-shadow:0 7px 17px #1b70c42b}.login-card button[type=submit]:hover:not(:disabled){filter:brightness(1.06)}.fw-login-footnote{margin:11px 0 0!important;text-align:center;color:#91a0b4!important;font-size:11px}.rail{background:linear-gradient(180deg,#f8fbff,#f1f6fe);border-right:1px solid #e4ebf5;padding-top:20px}.rail-logo{border-radius:14px!important;margin-bottom:25px}.rail-action{border-radius:14px;gap:6px;min-height:60px}.rail-action.selected{background:#e2efff;color:#1568bd;box-shadow:inset 0 0 0 1px #d5e6fb}.rail-action:hover{background:#e9f3ff}.rail-action svg{width:22px;height:22px}.rail-action span{font-size:10px;font-weight:600}.rail-spacer{min-height:10px}
@media(max-width:780px){.fw-login-layout{grid-template-columns:minmax(0,440px);justify-content:center}.fw-login-intro{display:none}.login-shell{padding:20px}.login-card{padding:clamp(24px,5vw,39px)}}@media(max-height:620px){.login-shell{padding:12px}.login-card{padding:22px;gap:9px}.fw-login-heading{margin:0 0 3px}.fw-login-heading h1{margin:6px 0}.fw-login-footnote{margin:3px 0 0!important}.fw-intro-mark{margin-bottom:20px}.fw-login-intro h2{font-size:clamp(28px,3vw,39px)}}@media(max-width:700px){.rail{padding-top:12px}.rail-action{min-height:52px}.rail-logo{margin-bottom:14px}}@media(prefers-reduced-motion:reduce){.fw-opening,.fw-opening-progress:after{animation:none;transition:none}}

/* v1.1.21 — consistent soft-blue Frennect logo tiles across login and navigation. */
.fw-intro-mark,
.login-card > .brand,
.rail .rail-logo {
  background: #e4f0ff;
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 8px 24px rgba(42,105,177,.10);
  box-sizing: border-box;
  overflow: hidden;
  padding: 5px;
}
.fw-intro-mark { border-radius: 20px; padding: 7px; }
.login-card > .brand { border-radius: 16px; }
.rail .rail-logo { border-radius: 12px !important; padding: 3px; flex-shrink: 0; }
.fw-intro-mark img,
.login-card > .brand img,
.rail .rail-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

/* Center the login form without the promotional panel. */
.fw-login-layout{display:flex;justify-content:center;align-items:center;width:100%;max-width:100%}
.fw-login-layout>.login-card{width:min(100%,440px)}

/* Signed-in identity replaces the Chats heading in the sidebar. */
.side-head .sidebar-title{display:flex;flex-direction:column;justify-content:center;min-width:0}
.side-head #identity-name{font-size:16px;font-weight:750;line-height:1.3;letter-spacing:-.25px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
.side-head #identity-department{display:block;margin-top:3px;font-size:12px;line-height:1.3;font-weight:450;color:#778aa3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* v1.1.21: readable reply previews on outgoing blue and incoming white bubbles.
   The reply panel has a light background, so its text must not inherit white. */
.message .bubble .web-quote {
  display:block; box-sizing:border-box; max-width:100%; min-width:0;
  background:#edf4ff; color:#203b5a; border-left:3px solid #4189db;
  border-radius:5px; padding:7px 10px; margin:0 0 8px;
  font-size:12px; font-weight:400; font-style:normal; line-height:1.45;
  white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word;
  opacity:1; text-shadow:none;
}
.message.mine .bubble .web-quote {
  background:#e9f3ff; color:#173a61; border-left-color:#82b7ef;
}

/* Reply previews render bold/italic markup, and remain legible in both bubble types. */
.web-quote .web-quote-sender{font-weight:600}
.web-quote .web-quote-text{white-space:pre-wrap;overflow-wrap:anywhere}
.web-quote .web-quote-text strong{font-weight:700}
.web-quote .web-quote-text em{font-style:italic}
.web-quote .web-inline-emoji{vertical-align:-.16em}

/* v1.1.21: web presence of mentions, links and settings */
.web-message-link{color:inherit;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.web-message-link:hover{opacity:.8}
.web-mention{font-weight:700;background:rgba(42,128,230,.13);border-radius:4px;padding:0 2px}
.mine .web-mention{background:rgba(255,255,255,.18)}
.web-mention-popup{position:absolute;bottom:calc(100% + 6px);left:0;right:0;max-height:220px;overflow:auto;background:#fff;border:1px solid #dbe5f2;border-radius:12px;box-shadow:0 10px 30px #183d6525;z-index:30;padding:5px}
.compose-field{position:relative}
.web-mention-popup button{display:block;width:100%;height:auto;text-align:left;background:transparent;color:#213b5e;border:0;border-radius:7px;padding:9px 12px;font-size:13px}
.web-mention-popup button:hover{background:#eaf3ff}
.rail #logout{width:49px;height:49px;min-height:49px;margin:0 auto 4px;display:grid;place-items:center}
.web-settings-backdrop{position:fixed;inset:0;background:#112a4859;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.web-settings-panel{background:#fff;border-radius:17px;width:min(440px,100%);box-shadow:0 20px 60px #183b6330;overflow:hidden}
.web-settings-panel header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e6edf5}
.web-settings-panel h2{font-size:18px;margin:0}
.web-settings-content{padding:20px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.web-settings-content p{font-size:13px;color:#6c7f97;line-height:1.5;margin:0}


/* Frennect Web 1.1.21 settings - compact, scrollable and accessible at 800x600. */
.web-settings-backdrop{z-index:100;padding:12px;overflow:auto}
.web-settings-panel{width:min(520px,100%);max-height:min(92dvh,850px);display:flex;flex-direction:column;background:#fff;color:#203450;border-radius:19px;overflow:hidden}
.web-settings-panel>header{flex:none;padding:17px 20px;background:#fff}
.web-settings-panel>header small{display:block;color:#7c8da3;font-size:12px;margin-top:4px}
.web-settings-content{display:block;overflow:auto;overscroll-behavior:contain;padding:0 20px 18px}
.web-settings-section{padding:17px 0;border-bottom:1px solid #e9eef6}
.web-settings-section:last-child{border-bottom:0}
.web-settings-section h3{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#2771bd;margin:0 0 11px}
.web-settings-account{display:flex;align-items:center;gap:13px}
.web-settings-avatar{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#e5f1ff;color:#1c70c4;font-size:20px;font-weight:800;flex:none}
.web-settings-account>div{min-width:0;display:flex;flex-direction:column;gap:3px}
.web-settings-account strong,.web-settings-account small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.web-settings-account small,.web-setting-row small{display:block;font-size:11px;color:#8190a4;line-height:1.4;margin-top:3px}
.web-setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:49px;padding:8px 0;font-size:12px}
.web-setting-row>span:first-child{min-width:0;flex:1}
.web-setting-row strong{font-size:13px;font-weight:650}
.web-setting-row input[type=checkbox]{appearance:auto;width:17px;height:17px;accent-color:#1d75ca;flex:none;cursor:pointer}
.web-setting-row select{max-width:145px;min-width:100px;padding:8px;border:1px solid #d8e3f0;border-radius:9px;background:#fff;color:#253a55;font-size:12px}
.web-settings-permission{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:0 0 8px;font-size:11px;color:#7c8da3}
.web-settings-link{border:0;background:transparent;color:#176bc0;font-weight:650;padding:6px 0;font-size:12px}
.web-session-chip{background:#e8f3ff;color:#2069b2;border-radius:20px;padding:5px 9px;font-size:10px;white-space:nowrap}
.web-settings-signout{border:1px solid #f2d5d5;background:#fff7f7;color:#a62934;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:700;margin:8px 0}
.web-settings-note{display:block;font-size:11px;color:#7f8da1;line-height:1.5}
html[data-web-compact=yes] .conversation{min-height:52px;padding-top:7px;padding-bottom:7px}
html[data-web-compact=yes] .messages{gap:6px;padding-top:12px;padding-bottom:12px}
html[data-web-compact=yes] .message .bubble{padding:7px 11px}
html[data-web-font=small] .message .bubble{font-size:12px}
html[data-web-font=normal] .message .bubble{font-size:13px}
html[data-web-font=large] .message .bubble{font-size:16px}
html[data-web-wallpaper=soft-blue] .messages{background:#e8f3ff}
html[data-web-wallpaper=plain] .messages{background:#fff}
html[data-web-theme=dark] .workspace{background:#121c2b;color:#e6edf7}
html[data-web-theme=dark] .rail,html[data-web-theme=dark] #sidebar,html[data-web-theme=dark] .chat,html[data-web-theme=dark] .chat-head,html[data-web-theme=dark] .side-head,html[data-web-theme=dark] .composer{background:#192638;color:#e6edf7;border-color:#304056}
html[data-web-theme=dark] .messages{background:#141f2e}
html[data-web-theme=dark] .conversation{background:#192638;color:#e6edf7}
html[data-web-theme=dark] .conversation:hover,html[data-web-theme=dark] .conversation.active{background:#253b55}
html[data-web-theme=dark] .bubble:not(.mine .bubble){background:#25364b;color:#eef3fc;border-color:#354963}
html[data-web-theme=dark] .web-settings-panel,html[data-web-theme=dark] .web-settings-panel>header{background:#1d2b40;color:#eaf2ff}
html[data-web-theme=dark] .web-settings-section{border-color:#33465e}
html[data-web-theme=dark] .web-setting-row select{background:#263a53;color:#f0f6ff;border-color:#415875}
html[data-web-theme=dark] .web-settings-signout{background:#3b2733;color:#ffc9c9;border-color:#704151}
html[data-web-theme=dark] .web-settings-panel small{color:#afbed1}
html[data-web-theme=dark] .search-wrap input,html[data-web-theme=dark] .composer textarea{background:#25364b;color:#edf3ff;border-color:#354963}
html[data-web-theme=dark] .message-actions{background:#25364b;border-color:#354963}
html[data-web-theme=dark] .message-actions button{color:#e2ecf8}
html[data-web-theme=dark][data-web-wallpaper=soft-blue] .messages{background:#203750}
html[data-web-theme=dark][data-web-wallpaper=plain] .messages{background:#192638}
@media(max-height:620px){.web-settings-panel{max-height:95dvh}.web-settings-section{padding:10px 0}.web-settings-panel>header{padding:10px 16px}}
@media(max-width:450px){.web-settings-backdrop{padding:6px}.web-settings-panel{max-height:98dvh;border-radius:13px}.web-settings-content{padding:0 13px 13px}.web-setting-row select{min-width:86px}}

/* Frennect Web 1.1.21: explicit notification action controls */
.web-settings-action{flex:none;min-width:76px;border:1px solid #c9d9ee;background:#eff6ff;color:#1457a3;border-radius:9px;padding:8px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.web-settings-action[aria-pressed="true"]{background:#fff;color:#41536d;border-color:#d8e0eb}
.web-settings-action:disabled{opacity:.55;cursor:not-allowed}

/* Notification permission guidance: visible inside Settings when the browser blocks prompts. */
.web-notification-help{margin:6px 0 16px;padding:13px 15px;border:1px solid #c9dcf5;background:#f1f7ff;border-radius:12px;color:#203c60;font-size:13px;line-height:1.5}
.web-notification-help.hidden{display:none!important}
.web-notification-help strong{display:block;margin-bottom:5px}
.web-notification-help p{margin:0 0 12px;white-space:normal}
.web-notification-help button{max-width:100%;white-space:normal}

/* Account avatar editor */
.web-settings-avatar{position:relative;border:0;cursor:pointer;overflow:visible;padding:0;isolation:isolate}
.web-settings-avatar>img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.web-settings-avatar>.web-avatar-edit{position:absolute;bottom:-3px;right:-5px;border-radius:50%;background:#1976d2;color:#fff;font-size:12px;width:20px;height:20px;display:grid;place-items:center;border:2px solid white}
.web-avatar-crop-backdrop{position:fixed;inset:0;z-index:99999;background:#13233b99;display:flex;align-items:center;justify-content:center;padding:16px}
.web-avatar-crop-backdrop.hidden{display:none}
.web-avatar-crop-panel{background:white;color:#172b4d;border-radius:18px;padding:22px;width:min(100%,390px);box-shadow:0 18px 55px #0003}
.web-avatar-crop-panel h3{margin:0 0 7px}.web-avatar-crop-panel p{font-size:13px;color:#60738d}
.web-avatar-crop-viewport{position:relative;width:280px;height:280px;max-width:100%;margin:18px auto;overflow:hidden;background:#e7eef7;touch-action:none;cursor:grab;border-radius:12px}
.web-avatar-crop-viewport img{position:absolute;left:0;top:0;max-width:none;user-select:none;pointer-events:none;transform-origin:top left}
.web-avatar-crop-ring{position:absolute;inset:0;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 60px #0005;pointer-events:none}
.web-avatar-zoom-label{display:flex;align-items:center;gap:15px;font-size:13px}.web-avatar-zoom-label input{flex:1}
.web-avatar-crop-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}
.web-avatar-crop-actions button{border:1px solid #cbd8e7;border-radius:8px;padding:9px 14px;cursor:pointer;background:white}
#web-avatar-save{background:#1d72ca;color:white;border-color:#1d72ca}
#web-avatar-error{color:#c23535}

/* v1.1.21: signed-in profile beside the chat list header */
.sidebar-identity{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.sidebar-identity .sidebar-title{min-width:0;flex:1}
.sidebar-identity .sidebar-title h1,.sidebar-identity .sidebar-title small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.sidebar-self-avatar{position:relative;flex:0 0 36px;width:36px;height:36px;border-radius:50%;overflow:hidden;background:#e5f0ff;color:#1b65b8;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.sidebar-self-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.sidebar-self-avatar img.hidden{display:none}
@media(max-width:800px){.sidebar-identity{gap:7px}.sidebar-self-avatar{flex-basis:30px;width:30px;height:30px}}


/* v1.1.21: responsive safety pass for phones, tablets and small Windows screens. */
html,body{max-width:100%;min-width:0}
body{overflow-x:hidden}
#app,.workspace,.conversation,.messages,.sidebar,.chat,.chat-head,.side-head{min-width:0}
img,video,canvas{max-width:100%}
.message,.bubble,.web-quote,.web-quote-text,.conv-text,.chat-heading{overflow-wrap:anywhere;word-break:normal}
.message a,.bubble a,.web-message-link{overflow-wrap:anywhere;word-break:break-word}
.messages{overscroll-behavior:contain;min-height:0}
.composer{min-width:0;max-width:100%;padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}
.compose-field,.composer textarea,.composer input{min-width:0;max-width:100%}
.web-settings-content,.web-modal,.web-details-content{min-height:0;overscroll-behavior:contain}
.web-settings-panel,.web-modal,.web-details-panel,.web-avatar-crop-panel{box-sizing:border-box;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
.web-settings-panel,.web-details-panel,.web-avatar-crop-panel{overflow-y:auto;overscroll-behavior:contain}
.web-avatar-crop-viewport{max-width:min(100%,calc(100vw - 68px));max-height:min(42dvh,320px);aspect-ratio:1/1}
.web-avatar-crop-actions{flex-wrap:wrap;gap:8px}
.web-emoji-picker,.web-reaction-picker,.web-mention-popup{max-width:min(95vw,360px)}
.fv-overlay,.web-settings-backdrop,.web-modal-backdrop,.web-avatar-crop-backdrop{box-sizing:border-box}
.fv-image{max-width:100%;max-height:calc(100dvh - 130px);object-fit:contain}
@media(max-width:700px){
  .login-shell{min-height:100dvh;padding:max(16px,env(safe-area-inset-top,0px)) 12px max(16px,env(safe-area-inset-bottom,0px));overflow-y:auto}
  .fw-login-layout{width:100%;max-width:100%;min-width:0}
  .login-card{width:min(100%,440px);max-width:100%;padding:clamp(20px,5vw,32px)}
  .workspace{height:100dvh;max-height:100dvh;overflow:hidden}
  .conversation,.messages{min-height:0}
  .chat-head,.side-head{flex-shrink:0}
  .web-settings-panel,.web-details-panel{width:calc(100vw - 16px);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  .web-settings-content{overflow-y:auto;min-height:0}
  .web-setting-row{min-width:0;flex-wrap:wrap;row-gap:8px}
  .web-setting-row>*{min-width:0}
  .web-avatar-crop-panel{width:calc(100vw - 20px);padding:16px;max-height:calc(100dvh - 20px)}
  .web-emoji-picker{max-height:min(55dvh,420px);overflow-y:auto}
  .fv-toolbar{flex-wrap:wrap;justify-content:center}
}
@media(max-width:400px){
  .login-shell{padding-inline:8px}
  .login-card{padding:18px}
  .chat-head,.side-head{gap:6px}
  .web-settings-panel,.web-details-panel{max-width:calc(100vw - 8px);width:calc(100vw - 8px)}
  .web-avatar-crop-viewport{max-height:35dvh}
}
@media(max-height:620px){
  .login-shell{align-items:flex-start;overflow-y:auto}
  .web-settings-panel,.web-modal,.web-details-panel,.web-avatar-crop-panel{max-height:calc(100dvh - 12px)}
  .web-avatar-crop-viewport{max-height:35dvh}
  .fv-image{max-height:calc(100dvh - 95px)}
}
@supports not (height:100dvh){
  @media(max-width:700px){.workspace{height:100vh;max-height:100vh}.login-shell{min-height:100vh}}
}


/* v1.1.21: compact mobile login, preserve desktop layout. */
@media (max-width:700px){
  .login-shell{padding:12px 14px;min-height:100dvh;}
  .fw-login-layout>.login-card{width:min(100%,360px);padding:23px 22px 20px;gap:9px;border-radius:22px;}
  .login-card>.brand{width:48px;height:48px;border-radius:13px;margin-bottom:2px;}
  .fw-login-heading{margin:0 0 5px;}
  .fw-login-heading h1{font-size:23px;line-height:1.18;margin:5px 0 7px;}
  .fw-login-heading p{font-size:13px;}
  .login-card label{font-size:12px;}
  .login-card input{min-height:43px;}
  .login-card button[type=submit]{min-height:44px;}
  .fw-login-footnote{margin:5px 0 0!important;font-size:10px;}
}
@media (max-width:360px){
  .fw-login-layout>.login-card{padding:18px 17px 16px;}
  .fw-login-heading h1{font-size:21px;}
}
/* On touch devices the action toolbar stays hidden until its bubble is tapped. */
@media (hover:none),(pointer:coarse){
  .message .message-actions,
  .message:focus-within .message-actions,
  .message:hover .message-actions{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    transform:none!important;
  }
  .message.web-actions-open .message-actions,
  .message.web-actions-open:focus-within .message-actions{
    display:flex!important;
    opacity:1!important;
    visibility:visible!important;
    position:relative;
    top:auto;
    right:auto;
    margin-top:5px;
    width:max-content;
    max-width:100%;
  }
  .message .bubble{cursor:pointer;}
}

/* Mobile action toolbar: viewport fallback for iOS Safari, regardless of hover reporting. */
@media (max-width:700px), (hover:none), (pointer:coarse){
  #messages .message .message-actions,
  #messages .message:hover .message-actions,
  #messages .message:focus-within .message-actions,
  #messages .message .message-actions:has(.web-reaction-picker){
    display:none!important;visibility:hidden!important;opacity:0!important;
    pointer-events:none!important;transform:none!important;
  }
  #messages .message.web-actions-open .message-actions,
  #messages .message.web-actions-open:hover .message-actions,
  #messages .message.web-actions-open:focus-within .message-actions{
    display:flex!important;visibility:visible!important;opacity:1!important;
    pointer-events:auto!important;position:relative;top:auto;right:auto;left:auto;
    margin-top:5px;width:max-content;max-width:100%;
  }
  #messages .message .bubble{cursor:pointer;-webkit-tap-highlight-color:transparent}
}

/* v1.1.21: show tapped message actions as an overlay ABOVE the bubble, not below. */
@media (max-width:700px), (hover:none), (pointer:coarse){
  #messages .message{position:relative;isolation:isolate;}
  #messages .message.web-actions-open{z-index:20;}
  #messages .message.web-actions-open .message-actions,
  #messages .message.web-actions-open:hover .message-actions,
  #messages .message.web-actions-open:focus-within .message-actions{
    position:absolute!important;
    top:0!important;
    bottom:auto!important;
    left:0!important;
    right:auto!important;
    transform:translateY(calc(-100% - 5px))!important;
    margin:0!important;
    padding:3px 5px!important;
    width:max-content!important;
    max-width:min(100%,calc(100vw - 28px))!important;
    background:#fff!important;
    border:1px solid #e3eaf2!important;
    border-radius:22px!important;
    box-shadow:0 5px 18px #24446330!important;
    justify-content:flex-start!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    z-index:25!important;
  }
  #messages .message.mine.web-actions-open .message-actions,
  #messages .message.mine.web-actions-open:hover .message-actions,
  #messages .message.mine.web-actions-open:focus-within .message-actions{
    left:auto!important;
    right:0!important;
  }
}

/* Mobile message actions v2: tap-only floating toolbar; no reserved row. */
@media screen and (max-width:700px), screen and (hover:none), screen and (pointer:coarse) {
  #messages .message > .message-actions,
  #messages .message:hover > .message-actions,
  #messages .message:focus-within > .message-actions {
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  #messages .message {position:relative!important;isolation:isolate;}
  #messages .message.web-actions-open {z-index:50!important;}
  #messages .message.web-actions-open > .message-actions,
  #messages .message.web-actions-open:hover > .message-actions,
  #messages .message.web-actions-open:focus-within > .message-actions {
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    position:absolute!important;
    top:-7px!important;
    bottom:auto!important;
    left:0!important;
    right:auto!important;
    transform:translateY(-100%)!important;
    margin:0!important;
    padding:4px 6px!important;
    width:max-content!important;
    max-width:calc(100vw - 24px)!important;
    border:1px solid #e3eaf2!important;
    border-radius:22px!important;
    background:#fff!important;
    box-shadow:0 5px 18px rgba(36,68,99,.19)!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    z-index:55!important;
  }
  #messages .message.mine.web-actions-open > .message-actions {
    left:auto!important;
    right:0!important;
  }
}


/* v1.1.21 mobile: anchor the action strip to the tapped bubble and
   keep the emoji chooser inside the available viewport width. */
@media screen and (max-width:700px), screen and (hover:none), screen and (pointer:coarse) {
  #messages .message.web-actions-open > .message-actions {
    top:-5px!important;
    left:0!important;
    right:auto!important;
    transform:translateY(-100%)!important;
  }
  #messages .message.mine.web-actions-open > .message-actions {
    left:auto!important;
    right:0!important;
  }
  #messages .message .web-reaction-picker {
    left:0;
    right:auto;
    bottom:calc(100% + 5px);
    max-width:calc(100vw - 24px);
    box-sizing:border-box;
    z-index:100;
  }
  #messages .message.mine .web-reaction-picker {
    left:auto;
    right:0;
  }
  #messages .message .web-reaction-picker.web-picker-below {
    top:calc(100% + 5px);
    bottom:auto;
  }
  #messages .message.web-actions-open {isolation:auto!important;}
}

/* iOS Safari zooms focused editable controls below 16px. Preserve desktop sizing. */
@media (max-width:700px){
 #web-rich-draft, #message-input, .web-edit-input,
 .composer textarea, .composer input, .composer [contenteditable="true"]{font-size:16px!important;}
}

/* All mobile text-entry controls: prevent automatic focus zoom in iOS Safari. */
@media screen and (max-width:700px){
  input, textarea, select, [contenteditable="true"], [contenteditable=""] { font-size:16px!important; }
}

/* v1.1.21: consistent yellow Idle presence in Chats and People. */
.chat-presence-label.is-idle, #chat-subtitle.is-idle, #details-presence.is-idle, .people-row .is-idle { color: #b47a00 !important; }
.presence.idle { background-color: #f5b942; }

/* v1.1.21: slightly larger status indicators in chat avatars and people. */
.avatar .presence, .people-row .presence { width: 14px; height: 14px; right: -2px; bottom: -2px; box-sizing: border-box; }

/* Mobile image viewer: pinch-to-zoom replaces +/- controls; desktop stays unchanged. */
@media (max-width:700px), (pointer:coarse){
 .fv-overlay .fv-minus,.fv-overlay .fv-plus{display:none!important}
 .fv-overlay .fv-stage{touch-action:none;overscroll-behavior:contain}
 .fv-overlay .fv-image{user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
}

/* Image viewer: the global responsive image cap previously overrode explicit zoom sizes. */
.fv-overlay .fv-image{max-width:none!important;max-height:none!important;width:auto;height:auto;object-fit:contain;flex-shrink:0}
.fv-overlay .fv-stage{min-width:0;min-height:0;overscroll-behavior:contain}
@media(max-width:700px), (pointer:coarse){.fv-overlay .fv-stage{touch-action:none}}

/* v1.1.21: group sender avatars and compact floating new-message button */
#sidebar{position:relative}
#new-chat{position:absolute;right:16px;bottom:19px;z-index:7;width:39px;height:39px;min-width:39px;padding:9px;border-radius:50%;background:#176dbd;color:#fff;box-shadow:0 4px 14px #1c46764a}
#new-chat:hover{background:#125b9c;color:#fff}
#new-chat svg{width:19px;height:19px}
.message:has(>.web-group-sender-avatar){position:relative;margin-left:35px}
.web-group-sender-avatar{position:absolute;left:-35px;bottom:18px;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#e0edfc;overflow:hidden}
.web-group-sender-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
@media(max-width:700px){#new-chat{right:14px;bottom:16px;width:36px;height:36px;min-width:36px;padding:8px}.web-group-sender-avatar{width:24px;height:24px;left:-30px}.message:has(>.web-group-sender-avatar){margin-left:30px}}
/* Group sender names sit above bubbles; DMs show only message timestamps. */
.web-group-message-sender{font-size:11px;font-weight:650;line-height:1.25;color:var(--muted,#667a94);margin:0 0 4px 2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.message.mine .web-group-message-sender{text-align:right;margin-left:0;margin-right:2px}
@media(max-width:700px){
 #new-chat{width:29px;height:29px;min-width:29px;min-height:29px;padding:6px;right:12px;bottom:14px}
 #new-chat svg{width:15px;height:15px}
}

/* Group replies: sender's display name on its own line above the quoted
   message, matching the compact desktop-style reply preview. DMs unchanged. */
.message .bubble .web-quote.web-group-quote{padding:5px 8px 6px;margin-bottom:6px;line-height:1.35}
.web-group-quote .web-group-quote-sender{display:block;color:#1766bf;font-size:11px;font-weight:700;line-height:1.3;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.web-group-quote .web-quote-text{display:block;font-size:12px;line-height:1.35}

/* Website presence is a solid blue dot, with no PNG dependency. */
.presence.webonline, .avatar .presence.webonline, .people-row .presence.webonline{background:#1683D8!important;background-image:none!important;}

/* Mobile attachment actions: first tap opens toolbar, next tap opens file. */
@media(max-width:700px),(hover:none),(pointer:coarse){
 .message .web-image-preview,.message .web-attachment{touch-action:manipulation}
 .message.web-actions-open .web-image-preview,.message.web-actions-open .web-attachment{outline:2px solid #4285cf;outline-offset:1px}
}
.web-forward-backdrop{position:fixed;inset:0;z-index:250;background:#101c3080;display:flex;align-items:center;justify-content:center;padding:16px}
.web-forward-backdrop.hidden{display:none}
.web-forward-panel{box-sizing:border-box;width:min(420px,100%);max-height:min(650px,90dvh);display:flex;flex-direction:column;gap:12px;background:var(--panel,#fff);color:var(--text,#1b2b43);border-radius:17px;padding:18px;box-shadow:0 15px 50px #101c3044}
.web-forward-panel header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.web-forward-panel h2{font-size:18px;margin:0}
.web-forward-panel p{font-size:13px;margin:0;color:var(--muted,#687b94)}
#web-forward-search{box-sizing:border-box;width:100%;padding:11px 12px;border:1px solid #d6e0ec;border-radius:10px;background:var(--panel,#fff);color:inherit;font-size:16px}
.web-forward-people{min-height:80px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:4px}
.web-forward-person{display:flex;align-items:center;gap:12px;padding:9px 7px;border-radius:10px;cursor:pointer;font-size:13px}
.web-forward-person:hover{background:#d6e8fc30}
.web-forward-person .avatar{width:32px;height:32px;flex:none}
.web-forward-person input{width:17px;height:17px;flex:none;accent-color:#2874d0}
.web-forward-panel footer{display:flex;justify-content:flex-end;gap:10px}
.web-forward-panel footer button{padding:9px 16px;border-radius:9px;border:1px solid #cdd9e7;background:#f2f6fc;color:#1d4e88;font-weight:600}
#web-forward-send{background:#2874d0;color:white;border-color:#2874d0}
#web-forward-send:disabled{opacity:.5}
@media(max-width:700px){.web-forward-backdrop{align-items:flex-end;padding:0}.web-forward-panel{width:100%;max-height:82dvh;border-radius:20px 20px 0 0;padding:18px 18px max(18px,env(safe-area-inset-bottom))}}

/* Forwarded messages: server stores original content separately from content. */
.web-forwarded-card{border-left:3px solid #5b96e3;background:#edf4ff;color:#203854;padding:7px 10px;border-radius:5px;max-width:100%;min-width:0;overflow-wrap:anywhere}
.web-forwarded-heading{font-size:10px;font-style:italic;color:#61748d;margin-bottom:3px}
.web-forwarded-origin{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;font-size:11px}
.web-forwarded-origin strong{font-weight:650;color:#255b9f}
.web-forwarded-origin span{font-size:10px;color:#72859c}
.web-forwarded-content{margin-top:4px;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
.web-forwarded-filename{margin-top:5px;font-size:11px;color:#236bb5;overflow-wrap:anywhere}