@import url('/releases/20261020-classrooms-qa46-r1/messenger-layout.css');
/* Load after chat-refresh.css / experience.css. All rules stay in messenger. */
/* Use the intended panel width, not its animated/measured opening width. This
   also overrides the legacy ResizeObserver's inline --chat-font updates while
   preserving manual width changes and mobile viewport sizing. */
body.cl-guest-v2 .cl-chat{--chat-font:clamp(17px,calc(var(--chat-width,390px) / 19),30px)!important}
@media(max-width:850px){body.cl-guest-v2 .cl-chat{--chat-font:clamp(17px,calc(100vw / 19),30px)!important}}
.cm-chat{position:relative}
/* The message log flexes smaller as a wrapped draft grows; never overlay it. */
.cm-chat #room-form{align-items:flex-end}
body.cl-guest-v2 .cl-chat .cl-composer #room-text,.cl-chat #room-text{box-sizing:border-box;display:block;flex:1;min-width:0;width:100%;min-height:46px;max-height:160px;margin:0;padding:11px 12px;border:0;border-radius:18px;background:#ffffffcf;color:#273752;font:inherit;font-size:var(--chat-font,16px);line-height:24px;resize:none;overflow-y:hidden;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal}
.cm-chat .cm-compose-field{position:relative;flex:1;min-width:0}
.cm-chat .cm-compose-hint{position:absolute;inset:11px 12px auto;display:flex;align-items:baseline;pointer-events:none;color:#687382;line-height:24px;font-size:var(--chat-font,16px);white-space:nowrap;overflow:hidden}
.cm-chat .cm-compose-hint>span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.cm-chat .cm-compose-hint i{flex:none;font-style:normal;animation:cm-compose-dot 1.8s ease-in-out infinite;animation-delay:calc(var(--dot-order)*.18s)}
.cm-chat .cm-compose-field.has-text .cm-compose-hint,.cm-chat #room-text:disabled+.cm-compose-hint{display:none}
.cm-chat .cm-compose-field #room-text:not(:disabled)::placeholder{color:transparent}
@keyframes cm-compose-dot{0%,75%,100%{opacity:.2}30%,55%{opacity:1}}
@media(prefers-reduced-motion:reduce){.cm-chat .cm-compose-hint i{animation:none}}
.cm-chat #room-form>button{align-self:flex-end;margin-bottom:3px}
.cm-chat .cm-inline-edit{display:grid;gap:8px;min-width:0;width:clamp(160px,58vw,280px);max-width:100%}
.cm-chat .cm-inline-edit-text{box-sizing:border-box;width:100%;min-width:0;min-height:46px;max-height:220px;resize:none;overflow-y:hidden;padding:7px 8px;border:1px solid #b69d5b;border-radius:10px;background:#ffffffeb;color:#273752;font:inherit;font-size:inherit;line-height:24px;white-space:pre-wrap;overflow-wrap:anywhere}
.cm-chat .cm-inline-edit-actions{display:flex;justify-content:flex-end;gap:7px}
.cm-chat .cm-inline-edit-actions>button{width:auto;min-width:0;min-height:25px;height:auto;padding:3px 7px;margin:0;border:1px solid #a98a40;border-radius:8px;background:#fffdf3;color:#684a0a;font:inherit;font-size:12px;line-height:18px;cursor:pointer}
.cm-chat .cm-inline-edit-actions>.cm-inline-edit-done{background:#e4b633;color:#382704;font-weight:700}
.cm-chat .cm-inline-edit-actions>button:hover:not(:disabled){background:#ffdf7c}.cm-chat .cm-inline-edit-actions>button:active:not(:disabled){transform:translateY(1px)}
.cm-chat .cm-inline-edit-actions>button:disabled{opacity:.55;cursor:default}.cm-chat .cm-inline-edit-status{font-size:12px;line-height:1.4;color:#6f4712;white-space:normal}.cm-chat .cm-inline-edit-status:empty{display:none}
.cm-chat :is(#room-text,.cm-inline-edit-text,.cm-inline-edit-actions>button):focus-visible{outline:2px solid #9a6c0c;outline-offset:2px}
/* One layout at desktop and mobile widths: identity above four equal actions. */
.cm-chat .cm-head.is-group{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 42px;grid-template-areas:"back back avatar avatar name name name name name name close close" "participants participants participants invite invite invite friend friend friend security security security";gap:6px 4px;align-items:center;min-height:0;padding:8px}
.cm-chat .cm-head.is-group>button{width:42px;max-width:100%;height:42px;margin:0;padding:4px;justify-self:center}
.cm-chat .cm-head.is-group>button:first-child{grid-area:back}
.cm-chat .cm-head.is-group>.cm-profile{grid-area:avatar}
.cm-chat .cm-head.is-group>.cm-person{grid-area:name;min-width:0;flex:initial}
.cm-chat .cm-head.is-group .cm-person strong{white-space:nowrap}
.cm-chat .cm-head.is-group>.cm-close{grid-area:close}
.cm-chat .cm-head.is-group>.cm-person+button{grid-area:participants;margin-left:0}
.cm-chat .cm-head.is-group>.cm-invite{grid-area:invite}
.cm-chat .cm-head.is-group>.cm-friend-action{grid-area:friend}
.cm-chat .cm-head.is-group>button.cm-danger{grid-area:security}
.cm-chat .cm-head>.cm-back{width:30px;height:34px;border:0;border-radius:12px;background:transparent;color:#946710;display:grid;place-items:center;padding:4px;cursor:pointer}
.cm-chat .cm-unblock{min-width:42px;min-height:42px;border:0;border-radius:12px;background:#fff3cd;color:#946710;display:grid;place-items:center;cursor:pointer;margin-left:auto;flex:none;padding:10px}
.cm-chat .cm-unblock svg{width:22px;height:22px}
.cm-chat .cm-unblock:hover{background:#ffe39a;color:#735009}
.cm-chat .cm-head>.cm-back:focus-visible,.cm-chat .cm-unblock:focus-visible,.cm-chat .cm-live-chat:focus-visible,.cm-chat .cm-retry-file:focus-visible,.cm-chat .cm-profile:focus-visible{outline:2px solid #956b17;outline-offset:3px}
.cm-chat .cm-head>.cm-live-chat{width:36px;height:36px;border:0;border-radius:12px;background:transparent;color:#805309;cursor:pointer;transition:background 140ms ease,box-shadow 140ms ease}
.cm-chat .cm-head>.cm-live-chat:active{background:#ffe39a;transform:scale(.96)}
.cm-chat .cm-head>.cm-live-chat svg{width:22px;height:22px}
/* Clip only the photo, never its separate online indicator. */
.cm-chat .cm-avatar,.cm-chat .cm-profile{overflow:visible}
.cm-chat .cm-avatar img{display:block;border-radius:50%;object-fit:cover}
.cm-chat .cm-avatar>.cm-online{box-sizing:border-box;position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border:2px solid #fff;border-radius:50%;background:#20ca7b;z-index:1;pointer-events:none}
.cm-chat .cm-avatar>.cm-offline{box-sizing:border-box;position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border:2px solid #fff;border-radius:50%;background:#9ca3af;z-index:1;pointer-events:none}
.cm-chat .cm-presence{display:inline-flex;align-items:center;flex:none;color:#717985;font-size:11px;font-weight:700;line-height:1.3;white-space:nowrap}
.cm-chat .cm-presence::before{content:none}
.cm-chat .cm-presence:empty{display:none}
.cm-chat .cm-avatar>.cm-avatar-age{position:absolute;top:calc(100% + 5px);right:-8px;min-width:24px;display:block;text-align:center;font:750 10px/1.15 system-ui;color:#626b76;pointer-events:none}
.cm-chat .cm-profile:has(.cm-avatar-age){margin-bottom:12px}
.cm-chat .cm-contact:has(.cm-avatar-age){min-height:70px}
.cm-chat .cm-person>div{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
.cm-chat .cm-person>.cm-person-name{flex-wrap:nowrap}
.cm-chat .cm-person-name>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-chat .cm-person>.cm-person-meta{flex-wrap:nowrap;align-items:flex-start;justify-content:space-between;margin-top:5px}
.cm-chat .cm-person-meta>.cm-flags{min-width:0;flex:1;margin-top:0}
.cm-chat .cm-language-code{font-size:11px;color:#617084}
.cm-chat .cm-profile img{cursor:pointer}
.cm-chat .cm-flags .cm-language-info::before,.cm-chat .cm-flags .cm-language-info::after{content:none!important}
.cm-chat .cm-date-separator{align-self:center;flex:none;position:relative;margin:6px 0;padding:5px 12px;border-radius:12px;background:#edf1f5;color:#5a6878;font-size:12px;font-weight:600;text-align:center;max-width:100%}
.cm-chat .cm-scroll-date{position:absolute;left:50%;transform:translateX(-50%) translateY(-4px);z-index:4;max-width:90%;padding:6px 13px;border:1px solid #e0e6ee;border-radius:14px;background:#f5f8fc;color:#526173;font-size:12px;box-shadow:0 2px 8px #20344b14;pointer-events:none;opacity:0;transition:opacity 180ms ease,transform 180ms ease}
.cm-chat .cm-scroll-date.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
.cm-chat:has(>#room-messages[hidden],>.cm-directory:not([hidden])) .cm-scroll-date,.cl-chat-closed .cm-chat .cm-scroll-date{display:none}
.cm-chat .cm-file-message{position:relative;flex-shrink:0;min-width:0;max-width:96%}
.cm-chat .cm-file-message .cm-bubble{background:#edf2f8;color:#26364a;padding:8px;white-space:normal}
.cm-chat .cm-file-message.me .cm-bubble{background:#fff5d7;color:#5c481e}
.cm-chat .cm-file-message .cl-attachment-image{display:block;position:static;width:260px;max-width:100%;height:195px;object-fit:contain;border-radius:12px;background:#ffffffa6;cursor:zoom-in}
.cm-chat .cm-file-link{display:block;max-width:260px;padding:8px 4px;color:inherit;overflow-wrap:anywhere;font-size:12px;text-decoration:underline}
.cm-chat .cm-file-state{font-size:12px;color:#66768a}.cm-chat .cm-file-state.is-failed{color:#946419}
.cm-chat .cm-retry-file{min-height:36px;border:0;border-radius:9px;background:#ffe8a9;color:#765418;padding:7px 10px;font:inherit;cursor:pointer}.cm-chat .cm-retry-file:hover{background:#ffdd83}
.cm-chat .cm-load-older{display:inline-flex;align-self:center;align-items:center;justify-content:center;gap:9px;min-height:40px;max-width:100%;padding:9px 15px;border:1px solid #e5c263;border-radius:22px;background:linear-gradient(125deg,#fff5cb,#ffe49b);color:#755008;font:inherit;font-size:13px;font-weight:650;box-shadow:0 3px 10px #b6801614;cursor:pointer;transition:background .15s,box-shadow .15s,transform .15s}
.cm-chat .cm-load-older svg{width:18px;height:18px}.cm-chat .cm-load-older:hover:not(:disabled){background:#ffe184;box-shadow:0 0 0 2px #ffc92848,0 4px 13px #a9751421;transform:translateY(-1px)}.cm-chat .cm-load-older:active:not(:disabled){background:#ffd568;transform:translateY(0)}.cm-chat .cm-load-older[aria-busy=true]{opacity:.7;cursor:progress}
.cm-chat .cm-new-messages{position:absolute;left:50%;transform:translateX(-50%);z-index:7;display:flex;align-items:center;justify-content:center;gap:8px;max-width:calc(100% - 32px);min-height:42px;padding:9px 17px;border:1px solid #d5a81d;border-radius:24px;background:linear-gradient(125deg,#ffde72,#ffc928);color:#3e2b06;font:inherit;font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 4px 18px #62461130;cursor:pointer;transition:background .15s,box-shadow .15s}
.cm-chat .cm-new-messages svg{width:19px;height:19px}.cm-chat .cm-new-messages:hover{background:#ffd44c;box-shadow:0 0 0 3px #ffc92840,0 6px 20px #62461130}.cm-chat .cm-new-messages:active{background:#f4bb1b}.cm-chat .cm-new-messages[hidden],.cm-chat:has(>#room-messages[hidden],>.cm-directory:not([hidden])) .cm-new-messages,.cl-chat-closed .cm-chat .cm-new-messages{display:none}
.cm-chat :is(.cm-new-messages,.cm-load-older,.cm-referral):focus-visible{outline:3px solid #8b6108;outline-offset:3px}
.cm-chat .cm-referral{display:flex;align-items:center;justify-content:center;gap:12px;min-height:78px;width:100%;padding:15px 18px;border:1px solid #e6bd43;border-radius:20px;background:linear-gradient(120deg,#ffedaa,#ffd652);color:#644207;text-align:left;box-shadow:inset 0 1px 0 #fff9e9,0 4px 14px #a7771118;transition:background .15s,box-shadow .15s,transform .15s}.cm-chat .cm-referral>svg{width:29px;height:29px}.cm-chat .cm-referral>span{display:grid;gap:4px}.cm-chat .cm-referral strong{font-size:16px;font-weight:700}.cm-chat .cm-referral small{font-size:12px;color:#79540c}.cm-chat .cm-referral:hover{background:linear-gradient(120deg,#ffe69a,#ffce35);box-shadow:0 0 0 2px #ffc92840,0 6px 18px #a7771121;transform:translateY(-1px)}.cm-chat .cm-referral:active{transform:translateY(0);background:#ffd45c}
.cm-chat .cm-head>button:not(.cm-profile){border-radius:12px;transition:background .15s,box-shadow .15s,transform .15s}.cm-chat .cm-head>button:not(.cm-close,.cm-profile):active{background:#ffd965}
/* Exact home interaction palette from qa9.css, including directory arrows. */
body.cl-guest-v2 .cm-chat .cm-head>button:not(.cm-profile):not(:disabled):hover{background:#fff2a8;box-shadow:0 0 0 2px #edc12c;transform:translateY(-1px)}
/* A close action stays red in every state, never the general gold hover. */
body.cl-guest-v2 .cm-chat :is(.cm-close,.cm-invite-close):not(:disabled):hover,.cm-chat :is(.cm-close,.cm-invite-close):not(:disabled):hover{background:#ffe7eb!important;color:#c82840!important;box-shadow:0 0 0 2px #df46644d!important}
body.cl-guest-v2 .cm-chat :is(.cm-close,.cm-invite-close):not(:disabled):active,.cm-chat :is(.cm-close,.cm-invite-close):not(:disabled):active{background:#ffd1d9!important;color:#a8152c!important;box-shadow:inset 0 2px 5px #941b2b26!important;transform:translateY(1px)}
.cm-chat :is(.cm-close,.cm-invite-close):focus-visible{outline-color:#d73142!important}
.cm-invite-dialog .cm-invite-close:hover:not(:disabled){background:#ffe7eb!important;color:#c82840!important;box-shadow:0 0 0 2px #df46644d!important}.cm-invite-dialog .cm-invite-close:active:not(:disabled){background:#ffd1d9!important;color:#a8152c!important;transform:translateY(1px)}.cm-invite-dialog .cm-invite-close:focus-visible{outline-color:#d73142!important}
body.cl-guest-v2 .cm-chat .clm-chat-row.me .cm-bubble,body.cl-guest-v2[data-theme="light"] .cm-chat .clm-chat-row.me .cm-bubble{background:#fff9de!important;color:#392f13!important}
.cm-chat .cm-inline-emoji{background:transparent!important;box-shadow:none!important;border:0;padding:0;vertical-align:baseline}
.cm-chat .cm-person>div:first-child{font-size:16px;min-width:0;flex-wrap:nowrap}
.cm-chat .cm-person strong{min-width:0;font-size:16px}
.cm-chat .cm-peer-time{font-size:13px;color:#788399;margin-left:auto;white-space:nowrap;font-weight:500;flex:none;text-align:right;line-height:16px}
@media(prefers-reduced-motion:reduce){.cm-chat .cm-scroll-date{transition:none}.cm-chat .cm-head>button:not(.cm-profile){transition:none}body.cl-guest-v2 .cm-chat .cm-head>button:not(.cm-profile):not(:disabled):hover{transform:none}}
@media(prefers-reduced-motion:reduce){.cm-chat :is(.cm-new-messages,.cm-load-older,.cm-referral){transition:none;transform:none}.cm-chat .cm-new-messages{transform:translateX(-50%)}}
/* Private conversation search: one flow, contacts before newest message matches. */
.cm-chat .cm-search-box{display:flex;align-items:center;gap:8px;flex:none;min-height:46px;padding:3px 8px 3px 13px;border:1px solid #e7e9ed;border-radius:12px;background:transparent;box-shadow:none;transition:background .15s,border-color .15s}
.cm-chat .cm-search-box:hover{background:#fff8df;border-color:#ead59a}
.cm-chat .cm-search-box>span{display:grid;place-items:center;color:#986707}.cm-chat .cm-search-box svg{width:20px;height:20px}
.cm-chat .cm-search-box input{flex:1;min-width:0;width:100%;min-height:40px;margin:0;padding:6px 0;border:0;border-radius:0;background:transparent;color:#233047;font:inherit;font-size:14px;outline:0}.cm-chat .cm-search-box input::-webkit-search-cancel-button{display:none}
.cm-chat .cm-search-box:focus-within{border-color:#c89611;box-shadow:0 0 0 3px #ffcb2d35}.cm-chat .cm-search-clear{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:11px;background:transparent;color:#95640a;cursor:pointer}.cm-chat .cm-search-clear:hover{background:#ffe699}.cm-chat .cm-search-clear[hidden]{display:none}
.cm-chat .cm-search-results{display:grid;gap:9px;min-width:0}.cm-chat .cm-search-section{display:grid;gap:7px;min-width:0}.cm-chat .cm-search-section h3{margin:14px 7px 3px;color:#3d3010;font-size:14px;font-weight:750}.cm-chat .cm-search-status{margin:5px 8px 13px;color:#657183;font-size:13px;line-height:1.55}
.cm-chat .cm-search-result{display:grid;grid-template-columns:38px minmax(0,1fr);gap:5px 10px;align-items:start;width:100%;padding:12px;border:1px solid transparent;border-radius:17px;background:#fffef9;color:#223047;text-align:left;font:inherit;cursor:pointer;box-shadow:0 2px 7px #25314408;transition:background .15s,box-shadow .15s,border-color .15s}
.cm-chat .cm-search-result>span:not(.cm-avatar){display:grid;gap:5px;min-width:0}.cm-chat .cm-search-result strong{font-size:14px;overflow-wrap:anywhere}.cm-chat .cm-search-preview{font-size:13px;line-height:1.45;overflow-wrap:anywhere;color:#57657b}.cm-chat .cm-search-result time{grid-column:2;color:#856726;font-size:11px}.cm-chat .cm-search-result:hover{background:#fff4ca;border-color:#edcf74;box-shadow:0 0 0 2px #ffd2392e}.cm-chat .cm-search-result:active{background:#ffe8a1}.cm-chat .cm-search-result:disabled{opacity:.65;cursor:progress}
.cm-chat .cm-contacts-toggle{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:6px;border:0;border-radius:11px;background:#f1f3f6;color:#475467;cursor:pointer}.cm-chat .cm-contacts-toggle:hover{background:#e5e9ef}.cm-chat .cm-contacts-toggle:active{transform:scale(.94)}
.cm-chat .cm-contact>div{overflow:hidden}.cm-chat .cm-contact small{max-width:none;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cm-chat .cm-contact-meta{flex:none;display:grid;justify-items:end;align-self:stretch;gap:5px;min-width:0;color:#758096;font-size:10px}.cm-chat .cm-contact-meta time{display:grid;text-align:right;line-height:1.4;white-space:nowrap}.cm-chat .cm-contact-meta .cm-badge{align-self:start}
.cm-chat .cm-contact[data-member-id]{min-width:0;gap:10px}
.cm-chat .cm-contact>.cm-contact-summary{flex:1 1 0;min-width:0}
.cm-chat .cm-contact-name{display:flex;align-items:center;gap:6px;min-width:0}
.cm-chat .cm-contact-name>strong{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cm-chat .cm-search-preview{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;overflow-wrap:normal}.cm-chat .cm-search-result{grid-template-columns:34px minmax(0,1fr) minmax(0,92px);gap:5px 8px}.cm-chat .cm-search-result time{grid-column:3;grid-row:1;text-align:right;line-height:1.4}
.cm-chat .cm-history{padding-top:0}.cm-chat .cm-history-day>h3{top:0;margin-top:0;background:#fff;border-radius:0 0 10px 10px}.cm-chat .cm-history-friend,.cm-chat .cm-friend-action{flex:none;display:grid;place-items:center;width:34px;min-width:34px;height:34px;padding:6px;border:0;border-radius:11px;background:#f4f5f7;color:#5b6470;cursor:pointer}.cm-chat :is(.cm-history-friend,.cm-friend-action) svg{width:21px;height:21px}.cm-chat :is(.cm-history-friend,.cm-friend-action)[data-friend-state=pending]{color:#766630;background:#fff8e5}.cm-chat :is(.cm-history-friend,.cm-friend-action):disabled{opacity:.65;cursor:default}
.cm-chat .cm-search-highlight{padding:0 1px;border-radius:3px;background:#ffe177;color:#332700;font:inherit;font-weight:750}.cm-chat .me .cm-search-highlight{background:#fffcda;box-shadow:0 0 0 1px #99710945}
.cm-chat :is(.cm-history-upgrade,.cm-history-more){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 16px;border:1px solid #d8ac2b;border-radius:15px;background:linear-gradient(125deg,#ffe797,#ffc72a);color:#4b3306;font:inherit;font-size:14px;font-weight:700;box-shadow:0 3px 12px #a7751518;cursor:pointer;transition:background .15s,box-shadow .15s}.cm-chat :is(.cm-history-upgrade,.cm-history-more):hover:not(:disabled){background:#ffd24e;box-shadow:0 0 0 3px #ffc92840}.cm-chat :is(.cm-history-upgrade,.cm-history-more):active{background:#f4bd22}.cm-chat :is(.cm-history-upgrade,.cm-history-more):disabled{opacity:.55;cursor:default}
.cm-chat .cm-message-menu button{display:flex;align-items:center;gap:9px;min-height:40px;width:100%;border:0;border-radius:10px;background:transparent;color:#6c4b0c;font:inherit;cursor:pointer}.cm-chat .cm-message-menu button:hover{background:#ffe59a}.cm-chat .cm-menu-icon{display:grid;place-items:center;width:20px}.cm-chat .cm-menu-icon svg{width:18px;height:18px}
.cm-chat :is(.cm-search-clear,.cm-search-result,.cm-history-upgrade,.cm-history-more,.cm-message-menu button):focus-visible{outline:3px solid #9a6c0c;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.cm-chat :is(.cm-search-result,.cm-history-upgrade,.cm-history-more){transition:none}}
.cm-chat .cm-send-state{font-size:11px;color:#80610e}.cm-chat .clm-chat-row[data-delivery=failed] .cm-send-state{color:#ab3040}.cm-chat .clm-chat-row[data-delivery=sending] .cm-bubble{opacity:.85}
.cm-chat .cm-load-warning{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px;padding:10px;border:1px solid #eadba6;border-radius:12px;background:#fff8df;color:#715410;font-size:12px;line-height:1.5}
/* Media feedback belongs to its bubble, so it never covers the composer. */
.cm-chat .cm-image-preview{position:relative;width:260px;max-width:100%;min-height:195px;overflow:hidden;border-radius:12px;background:#e5eaf0}
.cm-chat .cm-image-placeholder{display:grid;place-items:center;background:linear-gradient(135deg,#e6e3d8,#dfe8f0)}
.cm-chat .cm-image-preview.is-pending>.cl-attachment-image{filter:blur(9px);opacity:.58;pointer-events:none}
.cm-chat .cm-media-loading{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:14px;background:#ffffff18;color:#47390c;font-size:12px;text-align:center}
.cm-chat .cm-media-spinner{width:31px;height:31px;flex:none;border-radius:50%;background:conic-gradient(#8b6517 calc(var(--cm-media-progress,4)*1%),#a4813033 0);mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));animation:cm-media-spin 1.1s linear infinite;transition:--cm-media-progress .18s linear}
@property --cm-media-progress{syntax:"<number>";inherits:false;initial-value:4}
.cm-chat .cm-media-loading progress{display:block;width:100%;height:5px;max-width:100%;border:0;border-radius:6px;overflow:hidden;accent-color:#d29b1e;background:#fff8}.cm-chat .cm-media-loading progress::-webkit-progress-bar{background:#fff8;border-radius:6px}.cm-chat .cm-media-loading progress::-webkit-progress-value{background:#d29b1e;border-radius:6px;transition:width .16s linear}.cm-chat .cm-media-loading progress::-moz-progress-bar{background:#d29b1e;border-radius:6px}
@keyframes cm-media-spin{to{transform:rotate(360deg)}}
.cm-chat #room-emoji .cm-sticker-icon{display:block;width:100%;height:100%;max-width:26px;max-height:26px;object-fit:contain;margin:auto;pointer-events:none}
/* Borderless emoji choices, with separate top-level Emoji/GIF tabs. */
.cm-chat .cm-emoji-picker{box-sizing:border-box;width:min(460px,calc(100vw - 20px));max-width:calc(100% - 20px);max-height:min(560px,68dvh);bottom:72px;padding:14px;background:#fff;border-color:#e1e5eb;color:#344054}
.cm-chat .cm-emoji-picker .cm-picker-modes{gap:8px;padding:0 0 10px;overflow:visible}
.cm-chat .cm-picker-modes button{flex:1;min-height:42px;padding:8px 14px;border:0;background:transparent;font-size:15px;font-weight:700;color:#755008}
.cm-chat .cm-picker-modes button[aria-selected=true]{background:#eef0f3;box-shadow:none;color:#283548}
.cm-chat .cm-emoji-picker nav button[aria-pressed=true]{background:#eef0f3;box-shadow:none}.cm-chat .cm-emoji-picker header button{background:#f4f5f7;color:#d73142}.cm-chat .cm-emoji-picker>input[type=search]{border-color:#dde3eb;color:#344054}
.cm-chat .cm-emoji-categories{gap:3px;justify-content:space-between}
.cm-chat .cm-emoji-categories button{border:0;background:transparent;box-shadow:none}
.cm-chat .cm-emoji-grid{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-height:100px;overflow-y:auto;align-content:flex-start;padding:5px}
.cm-chat .cm-emoji-grid button:not(.cm-gif-upload){box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:calc((100% - 24px)/7);min-height:48px;margin:0;padding:4px;border:0;border-radius:14px;background:transparent;box-shadow:none;font-size:33px;line-height:1.2}
.cm-chat .cm-emoji-grid button:hover{background:#fff0c0;box-shadow:none;transform:none}
.cm-chat .cm-emoji-grid{overscroll-behavior:contain;scrollbar-width:none}.cm-chat .cm-emoji-grid::-webkit-scrollbar{display:none}.cm-chat .cm-emoji-grid button:hover{background:#f0f2f5}.cm-chat .cm-emoji-flag{display:inline-block;width:1.15em;height:.78em;vertical-align:-.04em;object-fit:contain}.cm-chat .cm-emoji-grid .cm-emoji-flag{width:32px;height:23px}
.cm-chat .cm-emoji-picker [hidden]{display:none}
/* QA57: panel-motion is the single entrance/exit owner. The legacy generic
   CSS scale-from-zero also ran on normal opening, but not while editing. */
body .cm-chat .cm-emoji-picker{animation:none!important;transition:none!important}
.cm-chat .cm-giphy-panel{min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding-top:8px}
.cm-chat .cm-giphy-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cm-chat .cm-giphy-result{min-width:0;padding:0;overflow:hidden;border:0;border-radius:12px;background:#f0eadb;cursor:pointer}
.cm-chat .cm-giphy-result img{display:block;width:100%;height:140px;object-fit:contain}
.cm-chat .cm-giphy-result:disabled{opacity:.6;cursor:default}
.cm-chat .cm-giphy-status{color:#715410;font-size:13px;line-height:1.5;margin:4px 0}
.cm-chat .cm-giphy-status:empty{display:none}
.cm-chat .cm-gif-upload,.cm-chat .cm-gif-retry{min-height:42px;border:0;border-radius:12px;padding:8px 12px;background:#fff0c6;color:#684908;font:inherit;cursor:pointer}
.cm-chat .cm-gif-upload:disabled{opacity:.55;cursor:default}
.cm-chat .cm-giphy-attribution{align-self:center;display:block;padding:5px;color:#2e2e2e;font-size:12px;font-weight:750;text-decoration:none;text-align:center}
.cm-chat .cm-giphy-attribution img{display:block;width:200px;max-width:100%;height:auto}
.cm-chat .cm-giphy-link{display:block;color:inherit;font-size:13px;overflow-wrap:anywhere}
.cm-chat .cm-giphy-message .cm-bubble{white-space:normal}
.cm-chat .cm-giphy-image{display:block;width:260px;max-width:100%;max-height:260px;object-fit:contain;border-radius:12px}
.cm-chat .cm-emoji-picker button:focus-visible{outline:3px solid #9a6c0c;outline-offset:1px}
@media(max-width:420px){.cm-chat .cm-emoji-grid button:not(.cm-gif-upload){width:calc((100% - 20px)/6);font-size:32px}.cm-chat .cm-emoji-categories button{padding:6px 4px;font-size:19px}.cm-chat .cm-giphy-result img{height:110px}}
@media(prefers-reduced-motion:reduce){.cm-chat .cm-media-spinner{animation:none}.cm-chat .cm-emoji-grid button{transition:none}}
/* Call-only unread count. It never implies friendship or out-of-call presence. */
#chat-toggle{position:relative}#chat-toggle .cm-call-unread{position:absolute;right:-4px;top:-4px;min-width:17px;padding:2px 4px;border-radius:20px;background:#c73141;color:#fff;font-size:11px;line-height:1.2;text-align:center}#chat-toggle .cm-call-unread[hidden]{display:none}
/* The authorized persistent unread badge wins if it is already visible. */
#chat-toggle:has(.ce-count:not([hidden])) .cm-call-unread{display:none}
.cm-chat .cm-receipt.is-read{color:#267bb5}
/* A narrow panel keeps the time beside the name, and flags on one compact row. */
.cm-chat .cm-person-name{display:flex;align-items:center;gap:6px;min-width:0}
.cm-chat .cm-person-name>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.cm-chat .cm-person-name>.cm-peer-time{margin-inline-start:auto;flex:none;white-space:nowrap;font-size:13px;font-weight:650}
.cm-chat .cm-person-meta{display:flex;min-width:0;width:100%}
.cm-chat .cm-person-meta>.cm-flags{display:flex;flex-wrap:nowrap;align-items:center;gap:3px;max-width:100%;min-width:0;overflow:hidden}
.cm-chat .cm-person-meta .cm-language-info{display:grid;place-items:center;flex:0 1 28px;min-width:14px;padding:0;border:0;background:none;box-shadow:none}
.cm-chat .cm-person-meta .cm-language-info img{display:block;width:100%;max-width:28px;height:18px;object-fit:cover;border-radius:2px}
/* Only the header requests an age label, centered under its avatar. */
.cm-chat .cm-head .cm-avatar>.cm-avatar-age{left:50%;right:auto;transform:translateX(-50%);width:max-content;min-width:0;white-space:nowrap;font-weight:750}
.cm-chat .cm-person-meta>.cm-flags{gap:clamp(5px,1.6cqi,9px);width:100%;flex-wrap:nowrap;justify-content:flex-start}
.cm-chat{container-type:inline-size}
.cm-chat .cm-person-meta .cm-language-info{flex:0 1 23px;min-width:12px}
.cm-chat .cm-person-meta .cm-language-info img{width:100%;max-width:23px;height:auto;aspect-ratio:1.5;object-fit:contain}
/* The panel, not the viewport, controls the header layout while dragging. */
.cm-chat .cm-head:has(>.cm-person):not(.is-group){display:grid;grid-template-columns:30px 40px minmax(0,1fr) repeat(4,32px);gap:6px;align-items:center}
.cm-chat .cm-head:has(>.cm-person):not(.is-group)>.cm-person{min-width:0;grid-column:3;grid-row:1}
.cm-chat .cm-head:has(>.cm-person):not(.is-group)>.cm-profile{grid-column:2;grid-row:1}
.cm-chat .cm-head:has(>.cm-person):not(.is-group)>.cm-close{grid-column:7;grid-row:1}
.cm-chat .cm-head:has(>.cm-person):not(.is-group)>button:not(.cm-profile){width:30px;min-width:0;height:34px;padding:4px;margin:0}
.cm-chat .cm-head:has(>.cm-person):not(.is-group)>.cm-invite{grid-column:4;grid-row:1}
.cm-chat .cm-head:has(>.cm-person):not(.is-group)>.cm-friend-action{grid-column:5;grid-row:1}
.cm-chat .cm-head:has(>.cm-person):not(.is-group)>.cm-danger{grid-column:6;grid-row:1}
.cm-chat .cm-quote-compose>.cm-close{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:6px;border:0;border-radius:10px;background:transparent;cursor:pointer;transition:background .15s,box-shadow .15s}
.cm-chat .cm-quote-compose>.cm-close svg{width:20px;height:20px;pointer-events:none}

/* QA58: native wheel/middle-button scrolling must not compete with animated
   scrollTop writes. Messenger restores the visible row when older rows load. */
body.cl-guest-v2 .cm-chat .cl-messages{scroll-behavior:auto!important;overflow-anchor:none}
.cm-chat .cm-is-editing .cm-message-body{flex:0 1 auto;min-width:0;max-width:100%}
.cm-chat .cm-head>button:not(.cm-profile) svg{pointer-events:none}
.cm-image-edit-dialog{width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #e5d7ad;border-radius:20px;padding:18px;color:#26344a;background:#fff;box-shadow:0 18px 60px #1b253933}
.cm-image-edit-dialog form{display:flex;flex-direction:column;gap:12px}.cm-image-edit-dialog h3{margin:0;font-size:18px}.cm-image-edit-dialog img{width:100%;max-height:36dvh;object-fit:contain;border-radius:12px}.cm-image-edit-dialog textarea{width:100%;resize:vertical;min-height:80px;border:1px solid #dfd4ad;border-radius:10px;padding:10px;font:inherit}.cm-image-edit-actions{display:flex;justify-content:flex-end;gap:8px}.cm-image-replace{background:#fff5d4;border:1px solid #e9cf7b;border-radius:10px;padding:8px;cursor:pointer}.cm-image-edit-dialog::backdrop{background:#25324766}.cl-attachment-image{-webkit-user-drag:none;touch-action:pan-y}
.cl-chat .cl-composer:not([data-cm-ready=true]){visibility:hidden}