/* Inbox and chat use one conversation-first layout across screen sizes. */
body.experience-messaging #messages-view { box-sizing: border-box; max-width: none; width: calc(100% - var(--experience-rail, 224px)); min-width: 0; margin-left: var(--experience-rail, 224px); padding: 16px 20px; }
body.experience-messaging #experience-inbox-panel { display: grid; gap: 0; min-width: 0; }
body.experience-messaging #experience-inbox-panel > .messaging-inbox-brand { margin: 0; padding: 14px 18px; border: 1px solid #d9e2e6; border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: none; }
body.experience-messaging .messaging-inbox-brand > .flex { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px 16px; min-width: 0; }
body.experience-messaging .messaging-inbox-brand > .flex > div:first-child { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; }
body.experience-messaging .messaging-inbox-brand .retro-header-container { display: flex; align-items: center; gap: 12px; }
body.experience-messaging .messaging-inbox-brand .retro-header-text { font-size: 24px; line-height: 1.2; }
body.experience-messaging .messaging-inbox-brand .retro-header-container > p,
body.experience-messaging .messaging-inbox-brand .retro-underline-hook { display: none; }
body.experience-messaging .messaging-inbox-brand #messages-weekly-summary { margin-left: auto; padding: 8px 12px; }
body.experience-messaging .messaging-inbox-brand #messages-weekly-summary > p:not(:first-child) { display: none; }
body.experience-messaging #back-from-messages-btn { min-height: 40px; padding: 8px 12px; }
body.experience-messaging .messaging-inbox-list { min-width: 0; margin: 0; padding: 0 16px 16px; border: 1px solid #d9e2e6; border-top: 0; border-radius: 0 0 14px 14px; box-shadow: none; }
body.experience-messaging .messaging-inbox-list .experience-conversation-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; margin: 0; padding: 4px 0 14px; }
body.experience-messaging .inbox-title { display: none; }
body.experience-messaging .messaging-compose-actions { position: relative; flex: 0 0 auto; margin-left: auto; }
body.experience-messaging .messaging-compose-actions > summary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 13px; border: 1px solid #d9e2e6; border-radius: 10px; background: #fff; color: #203843; font-size: 14px; font-weight: 650; cursor: pointer; list-style: none; }
body.experience-messaging .messaging-compose-actions > summary::-webkit-details-marker { display: none; }
body.experience-messaging .messaging-compose-actions > summary:hover { background: #f6f8f8; border-color: #a9b8be; }
body.experience-messaging .messaging-compose-icon,body.experience-messaging .messaging-compose-option-icon { width: 19px; height: 19px; flex: 0 0 19px; }
body.experience-messaging .messaging-compose-chevron { width: 16px; height: 16px; flex: 0 0 16px; margin-left: 2px; }
body.experience-messaging .messaging-compose-menu { position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; width: 236px; display: none; padding: 6px; border: 1px solid #d9e2e6; border-radius: 12px; background: #fff; box-shadow: 0 14px 34px rgb(25 45 56 / 16%); }
body.experience-messaging .messaging-compose-actions[open] .messaging-compose-menu { display: grid; gap: 2px; }
body.experience-messaging .messaging-compose-menu > [data-new-message-source] { display: block; min-width: 0; }
body.experience-messaging .messaging-compose-menu > [data-new-message-source] > button { width: 100%; }
body.experience-messaging .messaging-compose-option { display: flex; align-items: center; justify-content: flex-start; gap: 11px; width: 100%; min-height: 44px; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: #203843; text-align: left; font: inherit; font-size: 14px; cursor: pointer; }
body.experience-messaging .messaging-compose-option:hover,
body.experience-messaging .messaging-compose-option:focus-visible { background: #f1f5f6; outline: none; }
body.experience-messaging .messaging-compose-option[hidden],body.experience-messaging .messaging-compose-option.hidden { display: none !important; }
body.experience-messaging .messaging-search { position: relative; display: block; margin: 0 0 12px; }
body.experience-messaging .messaging-search-icon { display: none; }
body.experience-messaging .messaging-search input { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 9px 12px 9px 41px !important; border: 1px solid #d1dce0; border-radius: 10px; background-color: #fff; color: #203843; font-size: 14px; }
body.experience-messaging .messaging-search input:focus { border-color: #607d88; outline: 3px solid rgb(96 125 136 / 17%); }
body.experience-messaging #user-list { display: grid; gap: 2px; }
body.experience-messaging #user-list > .unread-conversations,
body.experience-messaging #user-list > .recent-conversations { display: grid; gap: 2px; padding: 4px 0 10px; border-bottom: 1px solid #e5eaeb; }
body.experience-messaging #user-list > .unread-conversations > h3,
body.experience-messaging #user-list > .recent-conversations > h3 { margin: 8px 7px 4px; color: #665a29; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
body.experience-messaging #user-list > .msg-section-head { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; padding: 0 7px; color: #75858c; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
body.experience-messaging #user-list > .msg-section-head:first-child { margin-top: 2px; }
body.experience-messaging .msg-section-count { display: inline-grid; min-width: 20px; height: 20px; place-items: center; padding: 0 5px; border-radius: 99px; background: #eef2f3; color: #61747c; font-size: 11px; letter-spacing: 0; }
body.experience-messaging #app-container.experience-shell #user-list .conversation-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 8px; align-items: center; gap: 11px; width: 100%; min-width: 0; min-height: 65px; margin: 0 !important; padding: 9px 10px !important; border: 1px solid transparent !important; border-radius: 10px !important; background: #fff; color: #203843; text-align: left; cursor: pointer; transition: background-color .14s ease, border-color .14s ease; }
body.experience-messaging #app-container.experience-shell #user-list .conversation-row:hover { border-color: #e6ecee !important; background: #f6f8f8; }
body.experience-messaging #app-container.experience-shell #user-list .conversation-row:focus-visible { outline: 3px solid rgb(96 125 136 / 24%); outline-offset: 1px; }
body.experience-messaging #app-container.experience-shell #user-list .conversation-row[aria-current="page"] { border-color: #e1e8ea !important; background: #edf3f4; }
body.experience-messaging .conversation-avatar,body.experience-messaging .conversation-avatar-icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 50%; background: #eef2f3; object-fit: cover; color: #45616d; }
body.experience-messaging .conversation-avatar-fallback { align-content: center; justify-content: center; background: #f2f0e6; color: #665a29; font-size: 12px; font-weight: 750; letter-spacing: .035em; }
body.experience-messaging .conversation-avatar-fallback > svg { width: 20px; height: 20px; }
body.experience-messaging .conversation-avatar-icon { width: 20px; height: 20px; margin: 10px; }
body.experience-messaging #app-container.experience-shell #user-list .conversation-row > .conversation-copy { display: grid; grid-column: 2; grid-row: 1; min-width: 0; gap: 3px; }
body.experience-messaging #app-container.experience-shell #user-list .conversation-copy .chat-partner-name { grid-column: auto; grid-row: auto; min-width: 0; }
body.experience-messaging .conversation-time { grid-column: 3; grid-row: 1; color: #819096; font-size: 11px; white-space: nowrap; }
body.experience-messaging #app-container.experience-shell #user-list .conversation-row > .unread-dot { grid-column: 4; grid-row: 1; justify-self: center; align-self: center; }
body.experience-messaging .chat-partner-name { overflow: hidden; color: #243b46; font-size: 14px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
body.experience-messaging .chat-partner-name.is-unread { font-weight: 750; }
body.experience-messaging .conversation-preview { overflow: hidden; color: #7a8a91; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
body.experience-messaging .unread-dot { width: 8px; height: 8px; border-radius: 50%; background: #a84a3b; }
body.experience-messaging .conversation-search-empty { padding: 20px 10px; color: #77878e; font-size: 14px; text-align: center; }
body.experience-messaging .conversation-search-empty[hidden] { display: none; }
body.experience-messaging #experience-inbox-panel.has-chat { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "brand chat" "list chat"; height: calc(100dvh - 100px); min-height: 440px; border: 1px solid #d9e2e6; border-radius: 14px; overflow: hidden; background: #fff; }
body.experience-messaging #experience-inbox-panel.has-chat > .messaging-inbox-brand { grid-area: brand; padding: 14px; border: 0; border-right: 1px solid #e2e8ea; border-radius: 0; }
body.experience-messaging #experience-inbox-panel.has-chat .messaging-inbox-brand .retro-header-text { font-size: 19px; }
body.experience-messaging #experience-inbox-panel.has-chat .messaging-inbox-brand #messages-weekly-summary { display: none !important; }
body.experience-messaging #experience-inbox-panel.has-chat #back-from-messages-btn { display: none; }
body.experience-messaging #experience-inbox-panel.has-chat > .messaging-inbox-list { grid-area: list; overflow-y: auto; min-height: 0; padding: 12px; border: 0; border-right: 1px solid #e2e8ea; border-radius: 0; }
body.experience-messaging #experience-inbox-panel.has-chat > #chat-view { grid-area: chat; display: block !important; min-width: 0; width: auto; max-width: none; height: 100%; min-height: 0; margin: 0; padding: 0; overflow: hidden; }
body.experience-messaging #experience-inbox-panel.has-chat > #chat-view.hidden { display: block !important; }
body.experience-messaging #experience-inbox-panel.has-chat #chat-view > .bg-white { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; max-height: none !important; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; }
body.experience-messaging #experience-inbox-panel.has-chat #chat-view > .bg-white > .p-4.border-b { position: relative; z-index: 3; display: flex; flex: 0 0 auto; min-height: 68px; padding: 12px 16px; border-bottom: 1px solid #e0e7e9; background: #fff; }
body.experience-messaging #experience-inbox-panel.has-chat .v1-conversation-header { align-items: center; gap: 8px; min-height: 56px; padding: 8px 12px; }
body.experience-messaging #experience-inbox-panel.has-chat .v1-conversation-header { flex-wrap: nowrap; }
body.experience-messaging #experience-inbox-panel.has-chat .v1-conversation-header > div:first-child { flex: 1 1 0; flex-wrap: nowrap; gap: 8px; min-width: 0; }
body.experience-messaging #experience-inbox-panel.has-chat #chat-with-user { min-width: 0; margin: 0; color: #203843; font-size: 17px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.experience-messaging #experience-inbox-panel.has-chat #chat-message-count { display: none !important; }
body.experience-messaging #experience-inbox-panel.has-chat #chat-weekly-chart { display: none !important; }
body.experience-messaging #experience-inbox-panel.has-chat #chat-members-btn { flex: 0 0 auto; min-width: max-content; white-space: nowrap; }
body.experience-messaging #experience-inbox-panel.has-chat #back-to-messages-btn { display: none; min-height: 38px; padding: 7px 10px; white-space: nowrap; }
body.experience-messaging #experience-inbox-panel.has-chat #back-to-messages-btn::before { content: none !important; }
body.experience-messaging #experience-inbox-panel.has-chat .chat-selection-toolbar { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 42px; padding: 4px 12px; border-bottom: 1px solid #edf0f1; }
body.experience-messaging #experience-inbox-panel.has-chat #select-messages-btn,body.experience-messaging #experience-inbox-panel.has-chat #delete-messages-btn,body.experience-messaging #experience-inbox-panel.has-chat #cancel-message-selection-btn { min-height: 36px; padding: 6px 10px; font-size: 13px; }
body.experience-messaging #experience-inbox-panel.has-chat #message-list { display: flex; flex: 1 1 auto; flex-direction: column; gap: 7px; min-height: 0; max-height: none !important; height: auto; padding: 18px; overflow: auto; overscroll-behavior: contain; background: #f5f7f8; }
body.experience-messaging #experience-inbox-panel.has-chat #message-list > [data-message-id] { position: relative; width: fit-content; max-width: min(78%, 620px); min-width: 100px; margin: 0 0 4px !important; padding: 11px 13px !important; border: 1px solid #e1e7e9; border-radius: 14px; background: #fff; color: #243a44; box-shadow: 0 1px 2px rgb(20 40 50 / 4%); }
body.experience-messaging #experience-inbox-panel.has-chat #message-list > [data-message-id].self-end { align-self: flex-end; border-color: #d6e3e7; background: #eaf2f4; }
body.experience-messaging #experience-inbox-panel.has-chat #message-list > [data-message-id].self-start { align-self: flex-start; }
body.experience-messaging #experience-inbox-panel.has-chat #message-list > [data-message-id] > p { margin: 0; line-height: 1.48; white-space: pre-wrap; overflow-wrap: anywhere; }
body.experience-messaging #experience-inbox-panel.has-chat #message-list > [data-message-id] .message-body { overflow-wrap: anywhere; }
body.experience-messaging #experience-inbox-panel.has-chat #message-list > [data-message-id] > .block.text-xs { display: block; margin-top: 6px; color: #819096; font-size: 10px; }
body.experience-messaging #experience-inbox-panel.has-chat #message-form { position: relative; display: flex; align-items: end; gap: 8px; }
body.experience-messaging #experience-inbox-panel.has-chat #message-form label[for="message-input"] { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
body.experience-messaging #experience-inbox-panel.has-chat #message-form button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; }
body.experience-messaging .messaging-button-icon { width: 19px; height: 19px; flex: 0 0 19px; }
body.experience-messaging #attach-file-btn { flex: 0 0 42px; width: 42px; height: 42px; margin: 0; padding: 10px; border: 1px solid #dce4e7; border-radius: 10px; background: #fff; color: #526a74; }
body.experience-messaging #send-message-btn { flex: 0 0 auto; padding: 9px 15px; border: 0; border-radius: 10px; background: var(--btn-primary-bg, #76682b); color: #fff; }
body.experience-messaging #message-input { box-sizing: border-box; min-height: 48px; max-height: 140px; resize: none; border: 1px solid #d4dee1; border-radius: 12px; background: #fff; padding: 10px 12px; font-size: 14px; }
body.experience-messaging #message-input:focus { outline: 3px solid rgb(96 125 136 / 18%); border-color: #607d88; }
body.experience-messaging #experience-inbox-panel.has-chat #chat-view > .bg-white > .p-4.border-t { position: relative; z-index: 3; flex: 0 0 auto; padding: 12px 14px; border-top: 1px solid #e0e7e9; background: #fff; }
body.experience-messaging #experience-inbox-panel.has-chat #file-preview-container:not(.hidden) { flex: 0 0 auto; max-height: 180px; overflow: auto; }
body.experience-messaging #experience-inbox-panel.has-chat #chat-view > .bg-white > .px-4.py-2 { flex: 0 0 auto; padding: 2px 14px; }
body.experience-messaging #experience-inbox-panel.has-chat #chat-history-btn { min-height: 30px; }
body.experience-messaging #experience-inbox-panel.has-chat .message-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-height: 28px; margin: 4px 0 0; }
body.experience-messaging .message-actions-menu,.experience-messaging .reaction-picker { position: relative; order: 2; }
body.experience-messaging .message-actions-menu > summary,.experience-messaging .reaction-picker > summary { display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #627780; cursor: pointer; list-style: none; }
body.experience-messaging .message-actions-menu > summary::-webkit-details-marker,.experience-messaging .reaction-picker > summary::-webkit-details-marker { display: none; }
body.experience-messaging .message-actions-menu > summary:hover,.experience-messaging .reaction-picker > summary:hover { background: #e8eef0; color: #263e48; }
body.experience-messaging .message-action-icon { width: 18px; height: 18px; }
body.experience-messaging .message-actions-popover,.experience-messaging .reaction-choices { display: none; position: fixed; z-index: 1000; max-width: calc(100vw - 16px); padding: 5px; border: 1px solid #d9e2e6; border-radius: 11px; background: #fff; box-shadow: 0 12px 30px rgb(23 45 58 / 18%); }
body.experience-messaging .message-actions-menu[open] > .message-actions-popover,.experience-messaging .reaction-picker[open] > .reaction-choices { display: grid; }
body.experience-messaging .message-actions-popover { min-width: 176px; gap: 2px; }
body.experience-messaging .message-actions-popover button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: #263e48; text-align: left; font: inherit; font-size: 13px; cursor: pointer; }
body.experience-messaging .message-actions-popover button:hover,.experience-messaging .message-actions-popover button:focus-visible { background: #f1f5f6; outline: none; }
body.experience-messaging .message-menu-icon { width: 17px; height: 17px; }
body.experience-messaging .reaction-picker { order: 3; }
body.experience-messaging .reaction-choices { grid-template-columns: repeat(6, 38px); gap: 2px; }
body.experience-messaging .reaction-choices button { display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 8px; background: transparent; font-size: 19px; cursor: pointer; }
body.experience-messaging .reaction-choices button:hover,body.experience-messaging .reaction-choices button:focus-visible { background: #f1f5f6; outline: none; }
body.experience-messaging .reaction-pill { min-height: 28px; padding: 3px 8px; border: 1px solid #d9e2e6; border-radius: 999px; background: #fff; color: #405b66; font-size: 12px; }
body.experience-messaging #chat-view #message-list .reaction-picker > summary { display: grid; width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #627780; line-height: 1; }
body.experience-messaging #chat-view #message-list .reaction-choices button { display: grid; width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #203843; line-height: 1; }
body.experience-messaging .message-select-label { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px 6px; color: #627780; font-size: 11px; }
body.experience-messaging .message-select-label[hidden] { display: none; }
body.experience-messaging .message-edit-form { display: grid; gap: 8px; width: 100%; margin-top: 8px; }
body.experience-messaging .message-edit-form textarea { width: 100%; min-height: 92px; padding: 9px 10px; border: 1px solid #cbd8dd; border-radius: 9px; background: #fff; color: #203843; font-size: 14px; line-height: 1.45; }
body.experience-messaging .message-edit-controls { display: flex; justify-content: flex-end; gap: 7px; }
body.experience-messaging .message-edit-controls button { min-height: 34px; padding: 6px 11px; border-radius: 8px; font-size: 12px; }
body.experience-messaging .message-edit-form [role="alert"] { margin: 0; color: #a32626; font-size: 12px; }
body.experience-messaging .message-edit-form:has([disabled]) { opacity: .82; }
body.experience-messaging #chat-view #message-list > [data-message-id].is-editing > .message-body,
body.experience-messaging #chat-view #message-list > [data-message-id].is-editing > .message-actions,
body.experience-messaging #chat-view #message-list > [data-message-id].is-editing > .block.text-xs { display: none !important; }
body.experience-messaging #family-chat-modal .bg-white.rounded-lg { max-width: 560px; max-height: min(82dvh, 720px); overflow: hidden; }
body.experience-messaging #family-chat-modal .bg-white.rounded-lg > .p-5:last-child { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 20px 24px; }
body.experience-messaging #family-chat-modal #family-chat-picker-context { margin: 0; color: #61747c; font-size: 14px; line-height: 1.5; }
body.experience-messaging #family-chat-modal #family-chat-student-list { width: 100%; max-height: min(48dvh, 420px); overflow: auto; border-top: 1px solid #e3e9eb; }
body.experience-messaging .family-chat-student-row { display: flex; align-items: center; justify-content: flex-start; gap: 13px; width: 100%; min-height: 64px; padding: 10px 8px; border: 0; border-bottom: 1px solid #e8edef; background: #fff; color: #203843; text-align: left; cursor: pointer; }
body.experience-messaging .family-chat-student-row:hover:not(:disabled),body.experience-messaging .family-chat-student-row:focus-visible { background: #f4f7f8; outline: none; }
body.experience-messaging .family-chat-student-row:disabled { cursor: not-allowed; opacity: .6; }
body.experience-messaging .family-chat-student-icon { width: 22px; height: 22px; flex: 0 0 22px; color: #526c76; }
body.experience-messaging .family-chat-student-copy { display: grid; min-width: 0; gap: 3px; }
body.experience-messaging .family-chat-student-name { overflow: hidden; font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
body.experience-messaging .family-chat-student-detail { color: #7a8a91; font-size: 12px; }
body.experience-messaging .family-chat-student-row[disabled] { opacity: .55; }
#announcements-list > [data-announcement-id] { position: relative; padding: 1.25rem; }
#announcements-list > [data-announcement-id] > div:first-child { padding-right: .25rem; }
#announcements-list > [data-announcement-id] h3 { overflow-wrap: anywhere; }
.announcement-actions-menu { position: relative; flex: 0 0 auto; }
.announcement-actions-menu > summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #526773; font-size: 1.75rem; line-height: 1; }
.announcement-actions-menu > summary::-webkit-details-marker { display: none; }
.announcement-actions-menu > summary:hover { background: #f1f5f6; }
.announcement-actions-popover { position: absolute; z-index: 20; min-width: 12rem; right: 0; top: calc(100% + .35rem); display: grid; gap: .2rem; padding: .35rem; border: 1px solid #d7e0e3; border-radius: .7rem; background: #fff; box-shadow: 0 10px 26px rgb(23 45 58 / 16%); }
.announcement-actions-popover button { min-height: 44px; border: 0; border-radius: .4rem; background: transparent; padding: .65rem .8rem; color: #a4262c; text-align: left; font: inherit; cursor: pointer; }

@media (min-width: 1024px) {
    body.experience-messaging.messaging-chat-active #messages-view.hidden { display: block !important; }
    body.experience-messaging.messaging-chat-active #messages-view > :not(#experience-inbox-panel) { display: none !important; }
}
@media (max-width: 1023px) {
    /* The app's desktop container/rail sizing can survive inside the teacher
       shell at phone widths. Bound the whole inbox chain to the visual viewport
       so a wide child cannot shift the page sideways or crop its left edge. */
    body.experience-messaging,
    body.experience-messaging #app-container { box-sizing: border-box; max-width: 100vw; overflow-x: clip; }
    body.experience-messaging #messages-view { box-sizing: border-box; width: 100vw; max-width: 100vw; min-width: 0; margin: 0; padding: 10px 10px 18px; overflow-x: clip; }
    body.experience-messaging.messaging-chat-active #messages-view { position: fixed; z-index: 5; inset: var(--mobile-nav-header-height, 52px) 0 calc(84px + env(safe-area-inset-bottom)) 0; width: auto; margin: 0; padding: 0 10px; overflow: hidden; }
    body.experience-messaging #experience-inbox-panel,
    body.experience-messaging #experience-inbox-panel > * { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; }
    body.experience-messaging .messaging-search,
    body.experience-messaging .messaging-search input { box-sizing: border-box; max-width: 100%; min-width: 0; }
    body.experience-messaging .messaging-inbox-brand .retro-header-text { font-size: 20px; }
    body.experience-messaging .messaging-inbox-list { padding: 0 12px 12px; }
body.experience-messaging .messaging-inbox-list .experience-conversation-toolbar { align-items: center; }
    body.experience-messaging .messaging-compose-actions > summary { min-height: 40px; padding-inline: 10px; }
    body.experience-messaging .messaging-compose-menu { right: 0; width: min(236px, calc(100vw - 30px)); }
    body.experience-messaging #experience-inbox-panel.has-chat { display: block; height: 100%; min-height: 0; margin: 0; border: 0; border-radius: 0; overflow: hidden; }
    body.experience-messaging.messaging-chat-active #messages-view.hidden { display: block !important; }
    body.experience-messaging.messaging-chat-active #messages-view > :not(#experience-inbox-panel) { display: none !important; }
    body.experience-messaging.messaging-chat-active #experience-inbox-panel.has-chat > .messaging-inbox-brand,
    body.experience-messaging.messaging-chat-active #experience-inbox-panel.has-chat > .messaging-inbox-list { display: none !important; }
    body.experience-messaging #experience-inbox-panel.has-chat > #chat-view,
    body.experience-messaging #experience-inbox-panel.has-chat > #chat-view.hidden { display: none !important; }
    body.experience-messaging.messaging-chat-active #experience-inbox-panel.has-chat > #chat-view,
    body.experience-messaging.messaging-chat-active #experience-inbox-panel.has-chat > #chat-view.hidden { display: block !important; height: 100%; }
    body.experience-messaging #experience-inbox-panel.has-chat > #chat-view { position: relative; }
body.experience-messaging #experience-inbox-panel.has-chat #chat-view > .bg-white { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none !important; margin: 0 !important; border: 1px solid #d9e2e6; border-radius: 12px; }
    body.experience-messaging #experience-inbox-panel.has-chat #chat-view > .bg-white > .p-4.border-b { min-height: 60px; padding: 8px 10px; }
    body.experience-messaging #experience-inbox-panel.has-chat .v1-conversation-header { display: grid !important; grid-template-columns: minmax(0, 1fr) 40px; justify-content: initial; gap: 6px; }
    body.experience-messaging #experience-inbox-panel.has-chat .v1-conversation-header > div:first-child { flex: 1 1 0; width: auto; flex-wrap: nowrap; gap: 6px; min-width: 0; }
    body.experience-messaging #experience-inbox-panel.has-chat #chat-with-user { flex: 1 1 0; min-width: 0; font-size: 15px; }
    body.experience-messaging #experience-inbox-panel.has-chat #chat-members-btn { flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; overflow: hidden; font-size: 0 !important; line-height: 0 !important; white-space: nowrap !important; }
    body.experience-messaging #experience-inbox-panel.has-chat #chat-members-btn .messaging-button-icon { width: 20px; height: 20px; flex-basis: 20px; }
    body.experience-messaging.messaging-chat-active #experience-inbox-panel.has-chat #back-to-messages-btn { display: inline-flex; justify-self: end; flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; overflow: hidden; gap: 0; padding: 8px !important; font-size: 0 !important; line-height: 0 !important; white-space: nowrap !important; }
    body.experience-messaging #experience-inbox-panel.has-chat #back-to-messages-btn::before { content: none !important; }
    body.experience-messaging #experience-inbox-panel.has-chat #back-to-messages-btn .messaging-button-icon { width: 22px; height: 22px; flex: 0 0 22px; }
    body.experience-messaging #experience-inbox-panel.has-chat .chat-selection-toolbar { min-height: 44px; padding: 4px 8px; }
    body.experience-messaging #experience-inbox-panel.has-chat #message-list { padding: 12px 9px; }
    body.experience-messaging #experience-inbox-panel.has-chat #message-list > [data-message-id] { max-width: 88%; padding: 9px 10px !important; }
    body.experience-messaging #experience-inbox-panel.has-chat #message-form { gap: 6px; }
    body.experience-messaging #experience-inbox-panel.has-chat #message-input { min-width: 0; font-size: 16px; }
    body.experience-messaging #experience-inbox-panel.has-chat #send-message-btn { width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; flex: 0 0 42px !important; overflow: hidden; gap: 0; padding: 8px !important; font-size: 0 !important; line-height: 0 !important; white-space: nowrap !important; }
    body.experience-messaging #experience-inbox-panel.has-chat #send-message-btn .messaging-button-icon { width: 21px; height: 21px; flex-basis: 21px; }
    body.experience-messaging #family-chat-modal .bg-white.rounded-lg { width: calc(100vw - 28px); max-height: 84dvh; margin: 14px; }
    body.experience-messaging #family-chat-modal .bg-white.rounded-lg > .p-5:last-child { padding: 16px; }
}
@media (max-width: 380px) {
    body.experience-messaging #experience-inbox-panel.has-chat #chat-with-user { font-size: 14px; }
    body.experience-messaging #app-container.experience-shell #user-list .conversation-row { grid-template-columns: 38px minmax(0,1fr) auto 8px; gap: 8px; }
    body.experience-messaging .conversation-avatar { width: 36px; height: 36px; }
}
/* Earlier communication tokens used ID selectors that otherwise overrode
   this compact interaction layer. Keep the actual menu and emoji targets small. */
body.experience-messaging #chat-view #message-list .message-actions-menu > summary,
body.experience-messaging #chat-view #message-list .reaction-picker > summary { width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 50%; }
body.experience-messaging #chat-view #message-list .reaction-choices button { width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; border: 0; }
body.experience-messaging .messaging-search input.experience-search-field { padding-left: 41px !important; }

/* Compact conversation header and its overflow/selection actions. */
body.experience-messaging #experience-inbox-panel.has-chat .messaging-chat-header { display: flex; align-items: center; gap: 12px; }
body.experience-messaging #experience-inbox-panel.has-chat .messaging-chat-header > div:first-child { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; }
body.experience-messaging #experience-inbox-panel.has-chat #back-to-messages-btn { display: inline-flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; margin: 0 8px 0 0 !important; padding: 8px !important; overflow: hidden; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: #405b66 !important; font-size: 0 !important; line-height: 0 !important; white-space: nowrap !important; box-shadow: none !important; }
body.experience-messaging #experience-inbox-panel.has-chat #back-to-messages-btn:hover { background: #f1f5f6; }
body.experience-messaging #experience-inbox-panel.has-chat #back-to-messages-btn .messaging-button-icon { width: 22px; height: 22px; flex: 0 0 22px; }
body.experience-messaging #experience-inbox-panel.has-chat .chat-header-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
body.experience-messaging #experience-inbox-panel.has-chat .chat-conversation-menu { position: relative; }
body.experience-messaging #experience-inbox-panel.has-chat .chat-conversation-menu > summary { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: #526a74; cursor: pointer; list-style: none; }
body.experience-messaging #experience-inbox-panel.has-chat .chat-conversation-menu > summary::-webkit-details-marker { display: none; }
body.experience-messaging #experience-inbox-panel.has-chat .chat-conversation-menu > summary:hover,
body.experience-messaging #experience-inbox-panel.has-chat .chat-conversation-menu > summary:focus-visible { background: #f1f5f6; outline: none; }
body.experience-messaging .messaging-header-menu-icon { width: 21px; height: 21px; }
body.experience-messaging .chat-conversation-menu-panel { position: absolute; z-index: 50; top: calc(100% + 5px); right: 0; display: none; min-width: 190px; padding: 5px; border: 1px solid #d9e2e6; border-radius: 11px; background: #fff; box-shadow: 0 12px 30px rgb(23 45 58 / 16%); }
body.experience-messaging .chat-conversation-menu[open] .chat-conversation-menu-panel { display: grid; gap: 2px; }
body.experience-messaging .chat-conversation-menu-panel button { display: flex; align-items: center; justify-content: flex-start !important; width: 100%; min-height: 44px !important; padding: 8px 10px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: #263e48 !important; text-align: left; font: inherit; font-size: 13px !important; font-weight: 500 !important; line-height: 1.4 !important; white-space: nowrap !important; box-shadow: none !important; }
body.experience-messaging .chat-conversation-menu-panel button:hover,
body.experience-messaging .chat-conversation-menu-panel button:focus-visible { background: #f1f5f6; outline: none; }
body.experience-messaging #experience-inbox-panel.has-chat .chat-selection-actions { display: none; align-items: center; gap: 6px; }
body.experience-messaging #experience-inbox-panel.has-chat .messaging-chat-header.is-selecting-messages .chat-selection-actions { display: flex; }
body.experience-messaging #experience-inbox-panel.has-chat #selected-message-count { color: #627780; font-size: 13px; white-space: nowrap; }
body.experience-messaging #experience-inbox-panel.has-chat #delete-messages-btn,
body.experience-messaging #experience-inbox-panel.has-chat #cancel-message-selection-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 8px !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: #526a74 !important; font-size: 0 !important; line-height: 0 !important; white-space: nowrap !important; box-shadow: none !important; }
body.experience-messaging #experience-inbox-panel.has-chat #delete-messages-btn:not(:disabled):hover,
body.experience-messaging #experience-inbox-panel.has-chat #cancel-message-selection-btn:hover { background: #f1f5f6; }
body.experience-messaging #experience-inbox-panel.has-chat #delete-messages-btn:disabled { opacity: .4; }
body.experience-messaging #experience-inbox-panel.has-chat #delete-messages-btn.hidden,
body.experience-messaging #experience-inbox-panel.has-chat #cancel-message-selection-btn.hidden { display: none !important; }
body.experience-messaging #experience-inbox-panel.has-chat #message-list.message-selection-mode { padding-left: 42px; }
body.experience-messaging #experience-inbox-panel.has-chat .message-select-label { position: absolute; z-index: 1; top: 50%; left: -34px; display: grid; width: 28px; height: 28px; place-items: center; transform: translateY(-50%); }
body.experience-messaging #experience-inbox-panel.has-chat .message-select-label[hidden] { display: none !important; }
body.experience-messaging #experience-inbox-panel.has-chat .message-select-label input { width: 19px; height: 19px; accent-color: #176b66; }
body.experience-messaging #experience-inbox-panel.has-chat #message-list > [data-message-id] { border-left: 1px solid #e1e7e9 !important; }

/* One small inline footer carries the message time and actions. */
body.experience-messaging #experience-inbox-panel.has-chat .message-actions { display: flex; align-items: center; justify-content: flex-end; gap: 3px; min-height: 28px; margin: 5px 0 0; }
body.experience-messaging #experience-inbox-panel.has-chat .message-timestamp { flex: 1 1 auto; min-width: 0; margin-right: auto; color: #819096; font-size: 10px; line-height: 1.3; }
body.experience-messaging #experience-inbox-panel.has-chat .reaction-pill,
body.experience-messaging #experience-inbox-panel.has-chat #message-list .reaction-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; padding: 2px 4px; border: 0; border-radius: 99px; background: transparent; color: #405b66; font-size: 12px; }
body.experience-messaging #experience-inbox-panel.has-chat .reaction-pill:hover,
body.experience-messaging #experience-inbox-panel.has-chat .reaction-pill[aria-pressed="true"] { background: #dfeaec; }
body.experience-messaging #experience-inbox-panel.has-chat .reaction-picker > summary { font-size: 17px; }

/* A single-row composer avoids the large blank footer seen in the old grid form. */
body.experience-messaging #experience-inbox-panel.has-chat #chat-view > .bg-white > .p-4.border-t { padding: 8px 12px; }
body.experience-messaging #experience-inbox-panel.has-chat #message-form { display: flex; align-items: center; gap: 7px; min-height: 48px; margin: 0; }
body.experience-messaging #experience-inbox-panel.has-chat #attach-file-btn { flex: 0 0 40px; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 9px; }
body.experience-messaging #experience-inbox-panel.has-chat #message-input { flex: 1 1 auto; width: 0; min-width: 0; min-height: 44px; max-height: 112px; margin: 0; }
body.experience-messaging #experience-inbox-panel.has-chat #send-message-btn { flex: 0 0 auto; min-height: 40px; margin: 0; }

/* Keep the inbox search/report area useful without consuming a full card row. */
body.experience-messaging .messaging-inbox-list .experience-conversation-toolbar { padding-top: 10px; padding-bottom: 8px; }
body.experience-messaging #experience-inbox-panel:not(.has-chat) .messaging-search { margin: 12px 0 10px; }
body.experience-messaging #experience-communication-reports { margin: 8px 0 10px; padding: 8px 12px; }
body.experience-messaging #experience-communication-reports > summary { min-height: 34px; padding: 5px 0; font-size: 14px; }
body.experience-messaging #experience-communication-reports > p { margin: 4px 0 8px; font-size: 12px; line-height: 1.4; }
body.experience-messaging #experience-communication-reports > div { padding: 10px 0 !important; }

@media (max-width: 1023px) {
    body.experience-messaging #experience-inbox-panel.has-chat .messaging-chat-header { grid-template-columns: minmax(0, 1fr) auto; gap: 4px; }
    body.experience-messaging #experience-inbox-panel.has-chat .messaging-chat-header > div:first-child { gap: 4px; }
    body.experience-messaging #experience-inbox-panel.has-chat #back-to-messages-btn { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; margin-right: 2px !important; padding: 8px !important; }
    body.experience-messaging #experience-inbox-panel.has-chat #chat-with-user { flex: 1 1 auto; min-width: 0; }
    body.experience-messaging #experience-inbox-panel.has-chat .chat-header-actions { gap: 2px; }
    body.experience-messaging #experience-inbox-panel.has-chat #message-list.message-selection-mode { padding-left: 38px; }
    body.experience-messaging #experience-inbox-panel.has-chat #chat-view > .bg-white > .p-4.border-t { padding: 7px 8px; }
    body.experience-messaging #experience-inbox-panel.has-chat #message-form { gap: 5px; }
    body.experience-messaging #experience-inbox-panel.has-chat #attach-file-btn { flex-basis: 36px; width: 36px; min-width: 36px; height: 38px; min-height: 38px; padding: 8px; }
    body.experience-messaging #experience-inbox-panel.has-chat #message-input { min-height: 42px; padding: 9px 10px; }
    body.experience-messaging #experience-inbox-panel.has-chat #send-message-btn { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; flex-basis: 40px !important; padding: 8px !important; }
}
@media (pointer: coarse) {
    body.experience-messaging #chat-view #message-list .message-actions-menu > summary,
    body.experience-messaging #chat-view #message-list .reaction-picker > summary { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
    body.experience-messaging #chat-view #message-list .reaction-choices { grid-template-columns: repeat(6, 44px); }
    body.experience-messaging #chat-view #message-list .reaction-choices button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    body.experience-messaging .conversation-row { transition: none; }
}