/* Web conversations stay beside the active chat, just like a messaging app. */
.conversation-sidebar,.workspace-mobile-back,.workspace-welcome{display:none}
.social-workspace{--rail-width:300px;--workspace-height:100dvh;background:#111315;overflow:hidden}
html:not(.native) body.social-workspace .app{display:grid!important;grid-template-columns:var(--rail-width) minmax(0,1fr);grid-template-rows:76px minmax(0,1fr);height:var(--workspace-height);min-height:0;max-height:var(--workspace-height);width:100%;overflow:hidden;background:#111315;transition:width .18s}
html:not(.native) body.social-workspace .app>header{grid-column:1;grid-row:1;height:76px;min-height:0;position:relative;top:auto;z-index:5;border-radius:0;padding:0 18px;background:#17191c;border-right:1px solid #ffffff0b;border-bottom:0;gap:8px}
.social-workspace .brand img{width:29px;height:29px;border-radius:7px}.social-workspace .brand small{display:none}.social-workspace .brand strong{font-size:15px}.social-workspace #identity{display:none}.social-workspace #open-desktop{display:none}.social-workspace .header-actions{gap:1px}.social-workspace #signout{font-size:10px;padding:0 5px}.social-workspace .brand{flex:1}
.social-workspace .conversation-sidebar{grid-column:1;grid-row:2;display:flex;flex-direction:column;min-height:0;background:#17191c;border-right:1px solid #ffffff0b;overflow:hidden}
.conversation-tools{display:flex;align-items:center;justify-content:space-between;padding:2px 18px 13px}.conversation-tools h1{font-size:23px;font-weight:600;letter-spacing:-.04em;margin:0}.conversation-tools .workspace-compose{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blue);color:white;padding:8px}.workspace-compose svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.conversation-search{margin:0 14px 15px;width:calc(100% - 28px);height:38px;min-height:38px;border:1px solid #ffffff12!important;border-radius:20px!important;background:#ffffff04!important;font-size:12px!important;padding:0 14px!important;box-shadow:none;color:#f4f4f2}
.conversation-list{flex:1;min-height:0;overflow:auto;padding:0 0 12px}.conversation-item{display:flex;align-items:center;min-height:82px;padding:0 10px 0 16px;border-bottom:1px solid #ffffff06;position:relative}.conversation-item.selected{background:#ffffff06}.conversation-item.selected::before{content:'';position:absolute;left:0;top:17px;bottom:17px;width:2px;background:var(--accent-soft);border-radius:3px}.conversation-open{display:flex;align-items:center;gap:12px;padding:14px 0;flex:1;min-width:0;text-align:left;background:transparent!important;border:0!important;border-radius:0!important}.conversation-open .avatar{width:43px;height:43px;flex:none;font-size:15px;border-radius:50%;background:#252a31;color:#dce3ed}.conversation-open .group-avatar{width:43px;flex:none}.conversation-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:7px}.conversation-copy>strong{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unread .conversation-copy>strong{font-weight:650}.conversation-meta{display:flex;align-items:center;gap:6px;font-size:10px;color:#929ba7;white-space:nowrap;min-width:0}.delivery-status{overflow:hidden;text-overflow:ellipsis}.delivery-symbol{font-size:15px;line-height:10px;color:#87919e}.conversation-time{font-size:10px;color:#7d8794}.conversation-time::before{content:'·';margin-right:6px}.conversation-meta.type-moment .delivery-symbol,.unread .conversation-meta.type-moment .delivery-status{color:#b69bef}.unread .conversation-meta.type-chat .delivery-symbol,.unread .conversation-meta.type-chat .delivery-status{color:var(--accent-soft)}.unread .conversation-meta.type-drop .delivery-symbol,.unread .conversation-meta.type-drop .delivery-status{color:var(--accent-soft)}
.conversation-camera{width:32px;height:32px;flex:none;display:grid;place-items:center;padding:7px;border-radius:9px;background:transparent!important;color:#838e9b}.conversation-camera svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.conversation-camera:hover{color:var(--accent-soft)}.conversation-open:hover .conversation-copy>strong{color:var(--accent-soft)}.sidebar-requests{margin:5px 14px 9px;padding:11px;border-radius:9px;background:color-mix(in srgb, var(--blue) 7.06%, transparent);font-size:11px;color:var(--accent-soft);text-align:left;width:calc(100% - 28px)}
html body.social-workspace .conversation-sidebar>.tabs{position:static!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));transform:none!important;left:auto;top:auto;bottom:auto;width:100%!important;max-width:none!important;margin:0!important;padding:9px 7px!important;gap:0;border:0!important;border-top:1px solid #ffffff0c!important;border-radius:0!important;background:#17191c!important;box-shadow:none;flex:none}
html body.social-workspace .conversation-sidebar>.tabs button{height:45px;min-width:0;padding:5px 0!important;flex-direction:column;gap:5px;font-size:8px!important;border-radius:8px!important;position:relative}.social-workspace .conversation-sidebar>.tabs svg{width:17px;height:17px}.social-workspace .conversation-sidebar>.tabs button span:not(:empty){position:absolute;top:0;right:6px;font-size:8px;min-width:12px;height:12px;padding:0 3px;margin:0}.social-workspace .conversation-sidebar>.tabs button.active{background:#ffffff06!important}
html body.social-workspace .app>main#dashboard{grid-column:2;grid-row:1/3;width:100%;max-width:none;min-height:0;height:100%;padding:32px 34px!important;margin:0;overflow:auto;display:block!important;flex:none}
html body.social-workspace .app>main#dashboard[hidden]{display:none!important}
.social-workspace #inbox-view>.section-heading,.social-workspace #inbox-view>#inbox-list,.social-workspace #inbox-together{display:none!important}.social-workspace #inbox-view{height:100%;display:flex;align-items:center;justify-content:center}.social-workspace .workspace-welcome{display:flex;align-items:center;text-align:center;flex-direction:column;max-width:390px;padding:30px}.workspace-welcome img{width:48px;height:48px;border-radius:12px;margin-bottom:24px}.workspace-welcome h1{font-size:27px;letter-spacing:-.045em;font-weight:550;margin:0 0 12px}.workspace-welcome p{font-size:13px;line-height:1.8;color:#929ba7;margin:0 0 24px}
html body.social-workspace .app>#interaction-view{grid-column:2;grid-row:1/3;max-width:none!important;width:100%!important;height:100%;min-height:0;display:flex!important;flex-direction:column;padding:0!important;margin:0!important;overflow:hidden;border:0;border-radius:0}
html body.social-workspace .app>#interaction-view[hidden]{display:none!important}
html body.social-workspace #interaction-view .interaction-heading{height:76px;min-height:76px;flex:none;padding:0 24px;margin:0;border:0;border-bottom:1px solid #ffffff0b;background:#111315;display:flex;align-items:center;gap:14px;position:relative;top:auto}
.social-workspace .interaction-heading>#back-to-main{width:31px;height:31px;padding:0;background:#ffffff05;border-radius:50%;font-size:0;flex:none}.social-workspace .interaction-heading>#back-to-main::before{content:'‹';font-size:25px;color:#c4cbd5;line-height:1}.social-workspace .interaction-heading>span{display:none}
.social-workspace #interaction-title{display:flex;align-items:center;gap:11px;flex:1;min-width:0;margin:0!important;font-size:15px;line-height:1.4}.social-workspace #interaction-title .avatar{width:36px;height:36px;flex:none}.social-workspace #interaction-title strong{font-size:14px;font-weight:550}.social-workspace #interaction-title small{font-size:10px!important;margin-top:3px}.social-workspace #interaction-title .conversation-person-details{flex:1;min-width:0}.social-workspace #interaction-title .call-action{width:33px;min-width:33px;background:#ffffff05!important;border-color:transparent!important;border-radius:50%!important}.social-workspace #interaction-title .call-action:hover{color:var(--accent-soft)!important}
html body.social-workspace #interaction-content{flex:1;min-height:0;overflow:auto;width:100%;padding:24px}.social-workspace #interaction-content:has(.chat-form){display:flex;overflow:hidden;padding:0 24px!important}.social-workspace .conversation-layout{min-height:0;min-width:0;width:100%}.social-workspace .conversation-layout .chat{padding:25px 0 20px!important}.social-workspace #interaction-content .conversation-layout .chat-form{padding:12px 0 20px!important;border-top:0!important}
/* Both web and Mac chat use sender labels and colored rails instead of bubbles. */
.chat .bubble.chat-message{float:none;align-self:flex-start;display:flex;flex-direction:column;gap:7px;border:0!important;background:transparent!important;box-shadow:none!important;color:#e8ebef!important;padding:0!important;border-radius:0!important;margin:0 0 22px!important;max-width:94%!important;min-width:0;clear:both;line-height:1.65;font-size:14px;white-space:normal}
.chat-message .message-author{font-size:10px;font-weight:650;color:#81cae0;letter-spacing:.05em}.chat-message.me .message-author{color:var(--accent-soft)}.chat-message .message-body{display:block;border-left:2px solid #6fb8d0;padding:0 0 0 10px;white-space:pre-wrap;overflow-wrap:anywhere}.chat-message.me .message-body{border-color:var(--accent-soft)}.chat .chat-message.message-continuation{margin-top:-15px!important}.message-continuation .message-author{display:none}.chat-message.sending{opacity:.5}
.chat-form.modern-composer{position:relative;display:flex!important;align-items:center!important;gap:8px!important}.modern-composer input{flex:1;min-width:0;border-radius:24px!important;height:43px!important;background:#ffffff04!important;border:1px solid #ffffff14!important;padding:0 15px!important;font-size:13px!important}.modern-composer button{flex:none!important;display:grid!important;place-items:center!important;border:0!important;border-radius:50%!important;width:34px!important;height:34px!important;min-height:0!important;padding:7px!important;margin:0!important;background:transparent!important;color:#9ca7b6!important}.modern-composer button:hover{color:var(--accent-soft)!important}.modern-composer button.primary{background:var(--blue)!important;color:white!important;width:36px!important;height:36px!important}.modern-composer button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.modern-composer .composer-emoji{font-size:23px}.modern-composer .composer-share{font-size:23px}.emoji-picker{position:absolute;bottom:70px;right:0;background:#24282e;border:1px solid #ffffff15;border-radius:14px;padding:10px;display:grid;grid-template-columns:repeat(6,32px);gap:5px;box-shadow:0 10px 30px #0004;z-index:20}.modern-composer .emoji-picker button{font-size:23px;background:transparent!important}
/* The third pane is dedicated to video on wide screens. */
@media(min-width:1100px){body.social-workspace.has-call{--call-width:clamp(380px,40vw,620px)}html:not(.native) body.social-workspace.has-call .app{width:calc(100% - var(--call-width))}.social-workspace.has-call .call-panel{position:fixed!important;top:12px;right:12px;bottom:12px;width:calc(var(--call-width) - 24px);border-radius:18px;display:flex;flex-direction:column;overflow:hidden;border:1px solid #ffffff10;background:#1b2029}.social-workspace.has-call .call-stage{flex:1;height:auto!important;min-height:0;background:radial-gradient(ellipse at 15% 20%,#253c60,#172131 70%)}.social-workspace.has-call .call-remote{width:100%;height:100%;object-fit:cover}.social-workspace.has-call .call-local{width:28%;height:26%;max-width:160px;max-height:220px;top:auto;right:18px;bottom:82px;border:1px solid #ffffff20;box-shadow:0 8px 25px #0005}.social-workspace.has-call .call-copy{top:22px;bottom:auto;left:22px}.social-workspace.has-call .call-controls{position:absolute;bottom:16px;left:0;right:0;z-index:2}.social-workspace.has-call .call-controls button{background:#1b2029d9;border-color:#ffffff16;color:white;backdrop-filter:blur(12px)}.social-workspace.has-call .call-controls .call-end{background:#b33746}.social-workspace.has-call .call-stage::after{content:'';position:absolute;bottom:0;left:0;right:0;height:100px;background:linear-gradient(transparent,#0008);pointer-events:none}}
@media(min-width:761px) and (max-width:1000px){.social-workspace{--rail-width:265px}.social-workspace #interaction-content:has(.chat-form){padding-left:18px!important;padding-right:18px!important}.social-workspace .interaction-heading{padding-left:18px!important;padding-right:18px!important}}
@media(max-width:760px){.social-workspace{--rail-width:100%}html:not(.native) body.social-workspace .app{grid-template-columns:minmax(0,1fr);grid-template-rows:68px minmax(0,1fr)}html:not(.native) body.social-workspace .app>header{height:68px}.social-workspace .conversation-sidebar{grid-column:1;grid-row:2}html body.social-workspace .app>main#dashboard,html body.social-workspace .app>#interaction-view{display:none!important}.social-workspace.workspace-detail .conversation-sidebar,.social-workspace.workspace-detail .app>header{display:none!important}html:not(.native) body.social-workspace.workspace-detail .app{grid-template-rows:minmax(0,1fr)}html body.social-workspace.workspace-detail .app>main#dashboard:not([hidden]),html body.social-workspace.workspace-detail .app>#interaction-view:not([hidden]){display:flex!important;grid-column:1;grid-row:1}.social-workspace.workspace-detail #dashboard{flex-direction:column;overflow:auto}.social-workspace .workspace-mobile-back{display:block;align-self:flex-start;padding:0 0 20px;color:var(--accent-soft);font-size:12px}.social-workspace .interaction-heading{height:72px!important;min-height:72px!important;padding:0 16px!important}.social-workspace #interaction-content:has(.chat-form){padding:0 16px!important}.social-workspace .conversation-tools{padding-top:5px}.social-workspace .conversation-sidebar>.tabs button{font-size:10px!important}.social-workspace .conversation-sidebar>.tabs{padding-bottom:max(10px,env(safe-area-inset-bottom))!important}.modern-composer{gap:5px!important}.modern-composer button{width:30px!important;height:30px!important}.modern-composer input{padding:0 12px!important}.social-workspace .call-panel{bottom:90px!important}}
@media(prefers-reduced-motion:reduce){html:not(.native) body.social-workspace .app{transition:none}}

.conversation-meta{min-height:15px;line-height:15px;padding:0!important;margin:0!important;flex-direction:row;overflow:hidden}.conversation-copy{gap:6px;overflow:hidden}.conversation-item{min-height:82px}.conversation-open{min-height:81px}
html body.social-workspace .conversation-sidebar>.tabs button{display:flex!important;align-items:center;justify-content:center;font-size:9px!important;color:#aab2be}.social-workspace .conversation-sidebar>.tabs svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

.chat .bubble.chat-message.me{align-self:flex-start!important;margin-left:0!important;margin-right:auto!important;text-align:left!important}.modern-composer button.primary{min-width:36px!important;max-width:36px!important}.modern-composer input:focus-visible{outline:1px solid var(--accent-soft)!important;outline-offset:0!important;box-shadow:none!important}.social-workspace #interaction-view .chat>.empty{align-self:center;margin:auto;color:#7f8996;background:none;border:0}

.conversation-meta.type-call .delivery-symbol,.conversation-meta.type-call .delivery-status{color:#75d4b4}.conversation-item:has(.type-call) .avatar{box-shadow:0 0 0 2px #68c9a72c}
html body.social-workspace .app:has(#interaction-view:not([hidden]) .chat-form)>#interaction-view{padding-bottom:0!important}
@media(max-width:760px){.chat-message .message-body{font-size:15px;line-height:1.65}.chat-message .message-author{font-size:10px}.social-workspace #interaction-content .conversation-layout .chat-form{padding-bottom:max(16px,env(safe-area-inset-bottom))!important}}

.conversation-time:empty{display:none}