
/* Beta feedback: stable media, compact reactions and theme-aware controls. */
#view-chat .chat-media-preview{width:180px;max-width:100%;background:var(--chat-canvas);border-radius:16px}
#view-chat .chat-media-preview img{display:block;width:100%;height:180px;max-height:180px;object-fit:contain;background:var(--chat-canvas)}
#view-chat .file-attachments{max-width:100%}
#view-chat .thread-part .message-meta,#view-chat .thread-part .profile-name-link{overflow:visible;clip-path:none}
#view-chat .message.thread-part{overflow:visible!important;padding-left:52px!important}
#view-chat .message.thread-part .message-meta .profile-avatar{left:5px!important;top:12px!important;box-shadow:0 0 0 3px var(--chat-canvas)}
#view-chat .message.thread-part::before{left:22px!important}
#view-chat .message.message-thread-root::after{left:37px!important}
#view-chat .chat-thread-heading{background:var(--chat-input)!important;color:var(--chat-received-ink)!important;border-color:var(--chat-line)!important}
#view-chat .chat-thread-heading button{width:auto;min-width:44px;height:auto;min-height:40px;font-size:13px;padding:8px 12px;border-radius:20px}
#view-chat .chat-team-avatar{background:transparent!important;width:46px;height:46px;flex:none}#view-chat .chat-team-avatar img{width:42px;height:42px;object-fit:contain}
.native-gallery-footer{display:grid!important;grid-template-columns:minmax(0,1fr) 44px;align-items:start!important;gap:8px;margin-top:auto;padding-top:10px}
.gallery-description{display:flex;flex-direction:column;flex:1;min-width:0}.gallery-card{display:flex;flex-direction:column}
.gallery-description .reaction-bar,.native-gallery-footer .reaction-bar{display:flex!important;flex-direction:row!important;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:5px!important;margin:0!important;min-width:0}
.gallery-description .reaction-bar>button{width:auto!important;flex:0 0 auto;min-height:30px}
.native-gallery-footer .native-gallery-options{margin:0!important;width:44px!important;height:44px!important;min-height:44px;border-radius:50%;padding:9px;display:grid;place-items:center}
.view-reactions{background:transparent!important;border:0!important;color:var(--blue);font-size:11px;padding:4px;min-height:30px}
dialog.compact-message-options,dialog.native-gallery-sheet{box-sizing:border-box;width:calc(100% - 32px);max-width:440px;border:1px solid var(--line);border-radius:24px;padding:20px;background:#fff;color:#14243b}
dialog.compact-message-options>button,dialog.native-gallery-sheet>button{display:flex;align-items:center;gap:12px;text-align:left;min-height:44px;width:100%;margin-top:8px;border-radius:16px;padding:10px 14px}
dialog.compact-message-options::backdrop,dialog.native-gallery-sheet::backdrop{background:#0006;backdrop-filter:blur(5px)}
html[data-theme=dark] dialog.compact-message-options,html[data-theme=dark] dialog.native-gallery-sheet{background:#172131;color:#f4f6fa;border-color:#46556b}
.danger,#live-stop,#delete-saved{background:#b42318!important;color:#fff!important;border:1px solid #b42318!important;border-radius:18px!important;padding:10px 16px!important;min-height:44px}
.dialog-actions:has(#delete-saved){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:stretch}
.dialog-actions:has(#delete-saved)>*{margin:0!important;min-width:0;min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center}
@media(max-width:360px){.dialog-actions:has(#delete-saved){grid-template-columns:1fr}}
.attendance-editors{display:grid;gap:12px}.rsvp-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.rsvp-form label{display:grid;gap:6px;flex:1;min-width:150px}
.file-pdf-preview{width:110px;height:145px;position:relative;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#edf1f7;color:#14243b;flex-shrink:0;padding:0}.file-pdf-preview img{width:100%;height:100%;object-fit:contain}.file-pdf-preview span{position:absolute;bottom:3px;right:3px;background:#14243b;color:white;padding:2px 5px;font-size:10px;border-radius:4px}

#view-chat .chat-photo-item{width:220px;max-width:100%;align-self:inherit}#view-chat .chat-photo-item .chat-media-preview{width:100%}#view-chat .chat-photo-item .chat-photo-actions{width:100%;flex-wrap:wrap;justify-content:flex-end}#view-chat .chat-photo-item .reaction-bar{flex-wrap:wrap}

dialog.compact-message-options>button:not(.danger),dialog.native-gallery-sheet>button:not(.danger){background:#edf3ff;color:#1262cd;border:1px solid #dce3ed}html[data-theme=dark] dialog.compact-message-options>button:not(.danger),html[data-theme=dark] dialog.native-gallery-sheet>button:not(.danger){background:#24364e;color:#9bc5ff;border:1px solid #46556b}

/* Profile navigation: same screen structure in both clients and appearance styles. */
.main-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-shrink:0}.profile-access{display:inline-grid;place-items:center;position:relative;width:44px;height:44px;min-width:44px;min-height:44px;padding:0!important;overflow:hidden;border-radius:50%!important;border:1px solid var(--line,#dce3ed);background:#e7eef9;color:#244e82;font-weight:700}.profile-access img{width:100%;height:100%;object-fit:cover;display:block}.profile-access span{font-size:14px}.chat-profile-access{display:none}.profile-screen-open .welcome{display:none}.profile-screen{max-width:760px;margin:0 auto}.profile-screen-heading{display:flex;align-items:center;gap:16px;margin:0 0 22px}.profile-screen-heading h2{font-size:26px}.profile-screen-heading button{min-height:44px;border-radius:20px}.profile-screen-summary{margin:0 0 22px}.profile-screen-summary p{font-size:13px;color:#66768a;overflow-wrap:anywhere}.profile-settings-entry{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px!important;border-radius:16px;margin:14px 0}.profile-settings-entry span:first-child{display:grid;gap:4px;text-align:left}.profile-settings-entry small{font-size:12px;font-weight:400}.profile-sign-out{width:100%;min-height:46px;margin:14px 0;border-radius:16px}.profile-screen details>summary{min-height:44px;align-content:center}.profile-screen .panel{margin-bottom:14px}
html[data-theme=dark] .profile-access{background:#24364e;color:#d6e6ff;border-color:#46556b}html[data-theme=dark] .profile-screen-summary p{color:#adb7c6}html[data-theme=dark] .profile-settings-entry{background:#24364e;color:#d6e6ff;border-color:#46556b}
body.chat-contained #view-chat .chat-profile-access{display:inline-grid;flex:0 0 44px}body.chat-contained #view-chat .chat-heading{gap:8px}body.chat-contained #view-chat .chat-title{min-width:0;flex:1}body.chat-contained .chat-live-link{font-size:9px;white-space:nowrap;padding:7px!important}body.chat-contained #view-chat .chat-title h2{font-size:17px}
@media(max-width:440px){.topbar .brand{font-size:18px;letter-spacing:0}.topbar .brand img{width:34px;height:34px}.topbar .brand small{font-size:7px}.topbar{gap:8px;padding-left:14px;padding-right:14px}.main-header-actions{gap:7px}.main-header-actions .live-link{font-size:10px;padding:7px}.profile-screen-heading h2{font-size:23px}.profile-screen{min-width:0}#view-chat .chat-team-avatar{width:36px;height:36px;flex:0 0 36px}#view-chat .chat-team-avatar img{width:34px;height:34px}}
html[data-interface-style=apple] .profile-settings-entry,html[data-interface-style=apple] .profile-screen .panel{border-radius:24px;backdrop-filter:blur(16px)}
.profile-screen .interface-style-buttons{display:flex;gap:10px;margin:12px 0}.profile-screen .interface-style-buttons button{flex:1;min-height:44px;padding:10px 14px;border:1px solid #dce3ed;border-radius:16px;background:#edf3ff;color:#1262cd;font-weight:600}.profile-screen .interface-style-buttons button[aria-pressed=true]{background:#1262cd;color:#fff;border-color:#1262cd}html[data-theme=dark] .profile-screen .interface-style-buttons button:not([aria-pressed=true]){background:#24364e;color:#d6e6ff;border-color:#46556b}
/* Moving existing panels preserves their former More-tab action treatments. */
:is(#view-profile,#view-settings) .panel :is(button.primary,button.secondary,button.subtle,a.primary,a.secondary){background:#1262cd;color:#fff;border-color:#1262cd}:is(#view-profile,#view-settings) .panel button.subtle{padding-inline:10px}html[data-theme=dark] :is(#view-profile,#view-settings) .panel :is(button.primary,button.secondary,button.subtle,a.primary,a.secondary){background:#2867bb;color:#fff;border-color:#6198e3}#view-settings button:is([data-remove-member],[data-phone-action="remove"],[data-phone-action="reset"]){background:#b42318!important;color:#fff!important;border-color:#b42318!important;border-radius:18px}

/* Reports 25–31: explicit geometry at phone widths, shared by both clients. */
#view-chat .message-content{display:flex;flex-direction:column;align-items:inherit;align-self:stretch;min-width:0;position:relative}
#view-chat .message .file-attachments{align-items:flex-start}
#view-chat .message.mine .file-attachments{align-items:flex-end}
#view-chat .chat-photo-item{align-self:auto;flex:none}
#view-chat .chat-photo-item .chat-photo-actions{justify-content:flex-end}
#view-chat .message:not(.mine) .chat-photo-item .chat-photo-actions{justify-content:flex-start}
.gallery-description .native-gallery-footer{display:flex!important;flex-direction:column;align-items:stretch!important;gap:8px;margin-top:auto}
.gallery-description .native-gallery-footer .reaction-bar{display:flex!important;width:100%;flex:0 0 auto;flex-flow:row nowrap!important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:2px 0!important;gap:4px!important;max-width:100%}
.gallery-description .native-gallery-footer .reaction-pill{flex:none;padding:4px 6px;min-height:32px;font-size:11px}
.gallery-description .native-gallery-footer .react-button{flex:none;min-width:32px;min-height:32px;padding:4px}
.gallery-description .native-gallery-footer .reaction-trigger-label{display:none}
.gallery-description .native-gallery-footer .native-gallery-options{align-self:flex-end;flex:0 0 44px}
.bottom-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:0;align-items:start}
.bottom-nav button{width:100%;min-width:0;margin:0;padding:1px 0;gap:5px;line-height:14px}
.bottom-nav button>span{display:grid;place-items:center;width:28px;height:28px;line-height:28px;flex:none}
.bottom-nav button>span>svg{width:25px;height:25px}.bottom-nav button>span>.native-soccer{width:22px;height:22px;object-fit:contain}
#view-chat .thread-header-back{flex:0 0 36px;width:36px;height:44px;padding:0;border:0;background:transparent;color:var(--chat-link);font:400 36px/1 system-ui;display:grid;place-items:center;border-radius:12px}
#view-chat.thread-focused .chat-team-avatar{display:none!important}
#view-chat .reply-quote{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:center;padding:8px 10px}
#view-chat .reply-quote strong{grid-column:1/-1;font-size:11px;margin-bottom:3px}
#view-chat .reply-quote .reply-photo-preview{width:44px;height:44px;max-width:44px;max-height:44px;object-fit:contain;margin:0;border-radius:7px}
#view-chat .reply-quote span{font-size:11px;line-height:1.35}
#view-chat .chat-reply-draft>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 8px;align-items:center;min-width:0}
#view-chat .chat-reply-draft strong{grid-column:1/-1;font-size:11px}
#view-chat .chat-reply-draft .reply-photo-preview{width:44px;height:44px;max-width:44px;max-height:44px;object-fit:contain;margin:0;border-radius:7px}
#view-chat .chat-reply-draft p{margin:0;font-size:11px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#view-chat .message.thread-part .message-content .profile-avatar{top:0!important;bottom:auto;left:-47px!important;width:36px;height:36px}
#view-chat .message.thread-part::before{top:0;bottom:-4px}
#view-chat .message.message-thread-root::before{top:calc(var(--thread-avatar-y,30px) + 18px)}
#view-chat .message.thread-last::before{top:-4px;bottom:calc(100% - var(--thread-avatar-y,30px))}
#view-chat .message.message-thread-root::after{top:calc(var(--thread-avatar-y,30px) - 3px)}
#view-chat .message.thread-collapsed::before,#view-chat .message.thread-collapsed::after{display:none}
#files .file-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:start}
#files .file-row .file-info{grid-column:2;min-width:0}
#files .file-row .file-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px}
#files .file-actions:has(>:only-child){grid-template-columns:1fr}
#files .file-actions>button{margin:0!important;width:100%;min-width:0;min-height:44px;padding:8px!important;font-size:12px;line-height:1.25;display:flex;align-items:center;justify-content:center;border-radius:18px}
#files .image-file-row .file-image-preview,#files .image-file-row .file-info{grid-column:1/-1}
#files .image-file-row .file-image-preview{max-height:220px}
#files [data-remove-file]{background:#b42318!important;color:white!important;border-color:#b42318!important}

/* Team polls use the existing chat/reply/permission model. */
#view-chat .message:has(.chat-poll){width:340px;max-width:94%}
#view-chat .chat-poll{align-self:stretch;width:100%;min-width:0;border:1px solid var(--chat-line);border-radius:22px;background:var(--chat-input);color:var(--chat-received-ink);padding:15px;text-align:left}
.poll-eyebrow{display:flex;justify-content:space-between;color:var(--chat-link);font-size:10px;font-weight:700;letter-spacing:1px;margin-bottom:9px}.poll-eyebrow span{letter-spacing:0;color:var(--chat-muted)}
#view-chat .chat-poll h3{font-size:17px;line-height:1.35;overflow-wrap:anywhere}
#view-chat .poll-hint{font-size:11px;line-height:1.4;color:var(--chat-muted);margin-top:7px}
.poll-choices{display:grid;gap:8px;margin:14px 0 12px}
#view-chat .poll-choice{position:relative;display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:44px;padding:10px;border:1px solid var(--chat-line);border-radius:13px;text-align:left;background:var(--chat-canvas);color:var(--chat-received-ink);overflow:hidden;font-size:13px}
#view-chat .poll-choice[aria-pressed=true]{border-color:var(--chat-link)}
#view-chat .poll-choice:disabled{opacity:1;cursor:default}.poll-choice>*:not(.poll-result-bar){position:relative}
.poll-choice-check{width:16px;flex:none;color:var(--chat-link)}.poll-choice-label{flex:1;min-width:0;overflow-wrap:anywhere}
.poll-result-bar{position:absolute;inset:0 auto 0 0;background:var(--chat-reply);pointer-events:none;transition:width .2s ease}
.poll-percent{font-size:12px;font-weight:600;white-space:nowrap}.poll-percent small{display:block;font-weight:400;text-align:right;font-size:10px;color:var(--chat-muted)}
#view-chat .poll-vote{width:100%;min-height:44px;border-radius:14px;background:var(--chat-sent);color:#fff;border:0}
#view-chat .poll-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:5px;margin-top:8px}
#view-chat .poll-footer button,#view-chat .poll-close{font-size:11px;color:var(--chat-link);padding:5px 0;min-height:32px;background:none;border:0}
#view-chat .poll-close{color:#b42318}html[data-theme=dark] #view-chat .poll-close{color:#ff9690}
.poll-editor,.poll-voters{box-sizing:border-box;width:calc(100% - 28px);max-width:440px;max-height:85dvh;overflow:auto;padding:20px;border:1px solid var(--line);border-radius:26px;background:#fff;color:#14243b}
.poll-editor::backdrop,.poll-voters::backdrop{background:#0006;backdrop-filter:blur(8px)}
.poll-editor header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.poll-editor h2,.poll-voters h2{font-size:20px}.poll-editor header button{background:none;border:0;color:#1262cd;padding:6px 0;min-height:40px}
.poll-editor label{display:grid;gap:6px;margin:16px 0;font-size:14px;font-weight:600}.poll-editor input:not([type=checkbox]){box-sizing:border-box;display:block;width:100%;min-width:0;padding:11px;border:1px solid var(--line);border-radius:12px;background:#f4f6fa;color:inherit;font:16px system-ui}
.poll-editor fieldset{border:0;padding:0;margin:0}.poll-editor legend{font-size:14px;font-weight:600;margin:8px 0}.poll-new-options{display:grid;gap:8px}.poll-editor .poll-setting{display:flex;align-items:center;justify-content:space-between}.poll-editor .poll-setting input{width:22px;height:22px;accent-color:#1262cd}.poll-editor .hint{font-size:12px;line-height:1.5}.poll-editor-error{font-size:13px;line-height:1.4;color:#b42318}
.poll-voters section{padding:15px 0;border-bottom:1px solid var(--line)}.poll-voters h3{font-size:15px}.poll-voters p{font-size:14px;margin-top:6px}.poll-voters>button{width:100%;min-height:44px;margin-top:14px;border-radius:16px;background:#1262cd;color:#fff;border:0}
html[data-theme=dark] :is(.poll-editor,.poll-voters){background:#172131;color:#f4f6fa;border-color:#46556b}html[data-theme=dark] .poll-editor input:not([type=checkbox]){background:#24364e;border-color:#46556b}html[data-theme=dark] .poll-editor header button{color:#9bc5ff}html[data-theme=dark] .poll-editor-error{color:#ff9690}
@media(prefers-reduced-motion:reduce){.poll-result-bar{transition:none}}

#view-chat .poll-footer [data-reply-chat]{display:inline-flex;align-items:center;gap:5px}#view-chat .poll-footer [data-reply-chat] svg{width:17px;height:17px}

/* Poll creation belongs to the same attachment action list. */
#chat-create-poll::before{content:'';display:block;width:24px;height:24px;flex:0 0 24px;background:center/24px 24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231262cd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M7 16v-4m5 4V8m5 8v-6'/%3E%3C/svg%3E")!important}

/* One shared nonwrapping control row in Chat and the gallery. */
/* One shared control row: chips yield space; emoji-plus and More never wrap. */
:is(#view-chat,#gallery-grid) .photo-reaction-controls{display:flex!important;align-items:center!important;justify-content:flex-end;gap:0!important;flex-wrap:nowrap!important;position:relative;min-width:0;max-width:100%;min-height:44px}
:is(#view-chat,#gallery-grid) .photo-reaction-controls>.reaction-bar{display:flex!important;flex:0 1 auto!important;width:auto;min-width:0;overflow:visible;padding:0!important;margin:0!important;gap:0!important;flex-flow:row nowrap!important}
:is(#view-chat,#gallery-grid) .photo-reaction-controls .reaction-pills-scroll{display:flex;align-items:center;gap:4px;flex:0 1 auto;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:18px}
:is(#view-chat,#gallery-grid) .photo-reaction-controls .reaction-pills-scroll::-webkit-scrollbar{display:none}
:is(#view-chat,#gallery-grid) .photo-reaction-controls .reaction-pills-scroll:empty{display:none}
:is(#view-chat,#gallery-grid) .photo-reaction-controls .reaction-pill{flex:none;white-space:nowrap}
:is(#view-chat,#gallery-grid) .photo-reaction-controls .react-button{margin:0!important;flex:0 0 40px;width:40px;min-width:40px;height:44px;padding:8px}
:is(#view-chat,#gallery-grid) .photo-reaction-controls>:is(.native-gallery-options,[data-photo-options],[data-message-menu],.dm-more){align-self:center;width:40px!important;height:44px;min-width:40px;min-height:44px;flex:0 0 40px;margin:0!important;padding:8px}
#view-chat .message .file-attachments{width:100%}
#view-chat .chat-photo-item{width:100%}
#view-chat .chat-photo-item .chat-media-preview{width:220px;max-width:100%}
#view-chat .message.mine .chat-photo-item .chat-media-preview{margin-left:auto}
.photo-reaction-controls.reactions-expanded>.reaction-bar{flex:1!important;width:100%;transition:flex-grow .18s ease}
.photo-reaction-controls.reactions-expanded .reaction-pills-scroll{flex:1}
.photo-reaction-controls.reactions-expanded .react-button,.photo-reaction-controls.reactions-expanded>:is([data-photo-options],[data-message-menu],.native-gallery-options,.dm-more){display:none!important}
.reply-photo-toggle{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0!important;border:0!important;border-radius:8px;background:transparent!important;transition:width .2s ease,height .2s ease}
.reply-photo-toggle[aria-expanded=true]{width:132px;height:132px}
#view-chat .chat-reply-draft .reply-photo-toggle img,.dm-reply-draft .reply-photo-toggle img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;border-radius:8px}
.poll-editor{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.poll-editor form,.poll-editor fieldset,.poll-editor label,.poll-new-options{min-width:0;max-width:100%;box-sizing:border-box}
.poll-editor input[type=datetime-local]{max-width:100%;inline-size:100%;min-inline-size:0}
.poll-option-editor{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:6px;align-items:center;min-width:0}
.poll-remove-option{width:40px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#b42318;font-size:24px}
.poll-remove-option:disabled{opacity:.3}
html[data-theme=dark] .poll-remove-option{color:#ff9690}
#status:not(:empty){background:#e8f1ff;color:#173b6e;border:1px solid #b9cee9}
html[data-theme=dark] #status:not(:empty){background:#22364e;color:#ecf4ff;border-color:#506783}
@media(prefers-reduced-motion:reduce){.reply-photo-toggle,.photo-reaction-controls.reactions-expanded>.reaction-bar{transition:none}}

/* Composer and scrolling content meet the real tab-bar edge at every width. */
body.chat-open main{padding-bottom:var(--chat-nav-height,68px)}
#view-chat .chat-compose{bottom:var(--chat-nav-height,68px)}
@media(max-width:650px){
 body.chat-contained:not(.chat-keyboard) #view-chat{height:calc(var(--chat-viewport-height,100dvh) - var(--chat-nav-height,68px) - var(--chat-top-inset,0px))}
 body.chat-contained #view-chat .chat-compose{padding-bottom:8px}
}

/* Keep the existing follow preference, presented as a labeled iOS-style switch. */
#watch-follow label:has(>input[role=switch]){display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
#watch-follow input[role=switch]{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;flex:0 0 44px;width:44px;height:26px;min-height:26px;margin:0;padding:0;border:0;border-radius:16px;background:#8d98a8;box-shadow:none;cursor:pointer;vertical-align:middle;transition:background .18s}
#watch-follow input[role=switch]::after{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .18s}
#watch-follow input[role=switch]:checked{background:#007aff}
#watch-follow input[role=switch]:checked::after{transform:translateX(18px)}
#watch-follow input[role=switch]:focus-visible{outline:2px solid #007aff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){#watch-follow input[role=switch],#watch-follow input[role=switch]::after{transition:none}}

/* Roster shortcuts in the existing goal-scorer dialog. */
#scorer-roster-choices{margin:0 0 18px}#scorer-roster-choices[hidden]{display:none}.scorer-player-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:220px;overflow-y:auto;overscroll-behavior:contain;margin-top:10px}.scorer-player-grid .scorer-player-choice{display:block;width:100%;min-width:0;min-height:44px;margin:0;padding:10px 12px;border:1px solid var(--line,#d6e1ed);border-radius:14px;white-space:normal;overflow-wrap:anywhere;text-align:left;font-size:14px;line-height:1.3;color:#0866d5;background:#edf4ff}.scorer-player-grid .scorer-player-choice[aria-pressed=true]{border-color:#0866d5;background:#dbeaff}.scorer-player-choice:focus-visible{outline:2px solid #0866d5;outline-offset:1px}html[data-theme=dark] .scorer-player-grid .scorer-player-choice{color:#a4caff;background:#24354d;border-color:#40536d}html[data-theme=dark] .scorer-player-grid .scorer-player-choice[aria-pressed=true]{background:#304c70;border-color:#90bfff}@media(max-width:360px){.scorer-player-grid .scorer-player-choice{font-size:13px;padding:10px 8px}}

/* Consistent photo and message controls, with reactions below gallery actions. */
#view-chat .message:not(.mine) .photo-reaction-controls{justify-content:flex-start!important;align-self:flex-start}
#view-chat .message.mine .photo-reaction-controls{justify-content:flex-end!important}
#view-chat .dm-message:not(.mine) .dm-footer{justify-content:flex-start!important;align-self:flex-start}
#view-chat .photo-reaction-controls :is(.react-button,[data-photo-options],[data-message-menu],.dm-more){color:var(--chat-muted,#65758a)!important}
#view-chat .photo-reaction-controls :is([data-photo-options],[data-message-menu],.dm-more)[aria-expanded=true]{color:var(--chat-link,#0962ca)!important}
#gallery-grid .gallery-description .native-gallery-footer{display:grid!important;grid-template-columns:40px 40px minmax(0,1fr);gap:0!important;align-items:center!important;min-height:44px}
#gallery-grid .gallery-description .native-gallery-footer>.reaction-bar{display:contents!important}
#gallery-grid .gallery-description .native-gallery-footer .react-button{grid-column:1;grid-row:1}
#gallery-grid .gallery-description .native-gallery-footer .native-gallery-options{grid-column:2;grid-row:1}
#gallery-grid .gallery-description .native-gallery-footer .reaction-pills-scroll{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;overflow:visible;gap:4px;padding-top:4px}
#gallery-grid .gallery-description .native-gallery-footer.reactions-expanded .react-button,#gallery-grid .gallery-description .native-gallery-footer.reactions-expanded .native-gallery-options{display:grid!important}
.gallery-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.gallery-controls .gallery-activity-switch{margin:0 auto 0 0}
:is(.chat-media-preview,.chat-media-preview img,.dm-photo,.dm-photo img,.gallery-preview,.gallery-preview img,.reaction-pill,.reaction-pill img){-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.profile-avatar>.profile-avatar-fallback,.profile-avatar>img{grid-area:1/1}

/* Finish dialog actions wrap without spilling outside their buttons. */
#confirm-dialog .dialog-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px}#confirm-dialog .dialog-actions button{height:auto;min-height:44px;white-space:normal;line-height:1.25;overflow-wrap:normal;text-align:center;flex:1 1 130px;padding:10px 14px}@media(max-width:420px){#confirm-dialog .dialog-actions button:first-child{flex-basis:100%}}

#gallery-grid .native-gallery-options{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--chat-muted,#65758a)!important}

/* Match report actions wrap instead of clipping labels at phone widths. */
#history-dialog .report-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
#history-dialog .report-actions button{flex:1 1 140px;min-width:0;min-height:44px;height:auto;white-space:normal;line-height:1.25;padding:10px 14px;text-align:center}
#history-dialog #share-saved{display:inline-flex;align-items:center;justify-content:center;gap:7px}
#history-dialog #share-saved svg{flex:none}
html[data-theme=dark] #history-dialog .event-title,html[data-theme=dark] #history-dialog .event-score{color:#e1eaf7}
html[data-theme=dark] #history-dialog .event-detail{color:#aebdd0}

#gallery-grid .native-gallery-footer :is(.react-button,.native-gallery-options){background:transparent!important;border:0!important;box-shadow:none!important;color:var(--muted,#65758a)!important}

.profile-access>span,.profile-access>img{grid-area:1/1}

/* Received-message actions unfold toward the conversation, not offscreen. */
#view-chat .photo-action-rail.opens-right{right:auto;flex-direction:row}
#view-chat .photo-action-rail.opens-right .photo-rail-action{transform:translateX(calc(var(--rail-step) * -46px)) scale(.72)}
#view-chat .photo-action-rail.opens-right.is-open .photo-rail-action{transform:translateX(0) scale(1)}

/* Keep gallery actions beside one another directly below the description. */
#gallery-grid .gallery-description .native-gallery-footer{margin-top:0!important;grid-template-rows:44px auto;align-content:start!important}
#gallery-grid .native-gallery-footer :is(.react-button,.native-gallery-options){box-sizing:border-box;display:inline-flex!important;align-items:center!important;justify-content:center!important;align-self:center!important;width:40px!important;min-width:40px!important;height:44px!important;min-height:44px!important;margin:0!important;padding:8px!important;line-height:1}
#gallery-grid .native-gallery-footer :is(.react-button,.native-gallery-options) svg{display:block;width:24px;height:24px}
#gallery-grid .native-gallery-footer .reaction-pills-scroll{align-self:start}
#gallery-grid .native-gallery-footer [data-gallery-options][aria-expanded=true]{color:var(--blue,#1262cd)!important}

/* The photo gallery keeps its existing menu layout. */
body>.gallery-action-rail{position:fixed;z-index:50;display:flex;flex-direction:row-reverse;align-items:center;gap:2px;max-width:calc(100vw - 16px);overflow-x:auto;overscroll-behavior-x:contain;padding:0 2px;border-radius:24px;background:var(--white,#fff);box-shadow:0 4px 18px #0003;scrollbar-width:none}
body>.gallery-action-rail.opens-right{flex-direction:row}
body>.gallery-action-rail::-webkit-scrollbar{display:none}
body>.gallery-action-rail .photo-rail-action{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:10px;border:0;border-radius:50%;color:var(--blue,#1262cd);background:var(--white,#fff);box-shadow:inset 0 0 0 1px var(--line,#dce3ed);opacity:0;transform:scale(.8);transition:transform .18s ease,opacity .15s ease}
body>.gallery-action-rail.is-open .photo-rail-action{opacity:1;transform:scale(1)}
body>.gallery-action-rail .photo-rail-danger{color:#c52a24;background:color-mix(in srgb,#c52a24 10%,var(--white,#fff));box-shadow:none}
body>.gallery-action-rail:not(.is-open){pointer-events:none}

/* Keep received Chat controls at the left; sent messages retain their right-aligned controls. */
#view-chat :is(.message:not(.mine),.dm-message:not(.mine)) .photo-reaction-controls{display:grid!important;grid-template-columns:40px 40px minmax(0,1fr);justify-content:start!important;align-self:stretch!important;width:100%;min-width:0}
#view-chat .message-footer:empty{display:none!important}
#view-chat :is(.message:not(.mine),.dm-message:not(.mine)) .photo-reaction-controls>.reaction-bar{display:contents!important}
#view-chat :is(.message:not(.mine),.dm-message:not(.mine)) .photo-reaction-controls .react-button{grid-column:1;grid-row:1;justify-self:start}
#view-chat :is(.message:not(.mine),.dm-message:not(.mine)) .photo-reaction-controls>:is([data-photo-options],[data-message-menu],.dm-more){grid-column:2;grid-row:1;justify-self:start}
#view-chat :is(.message:not(.mine),.dm-message:not(.mine)) .photo-reaction-controls .reaction-pills-scroll{grid-column:3;grid-row:1;justify-self:start;max-width:100%;overflow-x:auto}
#view-chat :is(.message:not(.mine),.dm-message:not(.mine)) .photo-reaction-controls.reactions-expanded .react-button,#view-chat :is(.message:not(.mine),.dm-message:not(.mine)) .photo-reaction-controls.reactions-expanded>:is([data-photo-options],[data-message-menu],.dm-more){display:grid!important}

/* Float Chat's action rail above message boundaries, wrapping only when necessary. */
body>.floating-photo-action-rail{position:fixed;z-index:50;box-sizing:border-box;display:flex;flex-flow:row-reverse wrap;align-items:center;gap:2px;max-width:calc(100vw - 16px);padding:0 2px;border-radius:24px;background:var(--chat-canvas,#fff);box-shadow:0 4px 18px #0003}
body>.floating-photo-action-rail.opens-right{flex-direction:row}
body>.floating-photo-action-rail .photo-rail-action{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:10px;border:0;border-radius:50%;color:var(--chat-link,#1262cd);background:var(--chat-input,#fff);box-shadow:inset 0 0 0 1px var(--chat-line,#dce3ed);opacity:0;transform:scale(.8);transition:transform .18s ease,opacity .15s ease}
body>.floating-photo-action-rail.is-open .photo-rail-action{opacity:1;transform:scale(1)}
body>.floating-photo-action-rail .photo-rail-danger{color:var(--danger,#c52a24);background:color-mix(in srgb,#c52a24 10%,var(--chat-canvas,#fff));box-shadow:none}
body>.floating-photo-action-rail:not(.is-open){pointer-events:none}
@media(prefers-reduced-motion:reduce){#view-chat .photo-action-rail.opens-right .photo-rail-action,body>.floating-photo-action-rail .photo-rail-action,body>.gallery-action-rail .photo-rail-action{transition:none;transform:none}}

/* Chat avatars share a consistent size; collapsed threads no longer indent their content. */
#view-chat .message-meta .profile-avatar,#view-chat .dm-message-meta .dm-avatar{width:36px!important;height:36px!important;font-size:12px}
#view-chat .message.thread-collapsed{padding-left:0!important}
#view-chat .message.thread-collapsed .message-content .profile-avatar{position:static!important;left:auto!important;top:auto!important;box-shadow:none;background:var(--chat-reply);color:var(--chat-link)}

/* Preserve each photo's aspect ratio instead of placing it inside a fixed square. */
#view-chat .chat-photo-item .chat-media-preview{width:fit-content;max-width:100%;height:auto;min-height:0;padding:0;border:0;background:transparent}
#view-chat .chat-photo-item .chat-media-preview img{width:auto;height:auto;max-width:min(220px,100%);max-height:220px;object-fit:contain;background:transparent;border-radius:16px}
#view-chat .dm-photo:not(.dm-file-document){width:fit-content;max-width:100%;background:transparent!important}
#view-chat .dm-photo:not(.dm-file-document) img{width:auto;height:auto;max-width:min(220px,100%);max-height:220px;object-fit:contain;background:transparent;border-radius:16px}

/* Keep initials readable while profile photos load or fail, including thread avatars. */
#view-chat .message.thread-part .message-meta .profile-avatar{background:var(--chat-reply)!important;color:var(--chat-link)!important}
.profile-avatar>img:not([src]),.profile-avatar>img[data-native-photo-error]{visibility:hidden}

/* A preview waiting for its private thumbnail keeps its space without showing a broken image icon. */
#view-chat .chat-media-preview img:not([src]){visibility:hidden}

/* Sent photos align with the right edge even when a landscape image is narrower than its button. */
#view-chat .message.mine .chat-photo-item .chat-media-preview{display:flex;flex-direction:column;align-items:flex-end;max-width:min(220px,100%)}
#view-chat .message.mine .chat-photo-item .chat-photo-caption{align-self:stretch}
