/* Opt-in mobile presentation. No rules apply without the mobile shell class. */
@media (max-width: 900px) {
    html:has(> body.mobile-v1-shell) { min-width: 0; }
    body.mobile-v1-shell {
        --canvas: #fafbfc; --surface: #fff; --surface-soft: #f5f7f8;
        --ink: #17191b; --ink-soft: #3d454b; --muted: #63717b; --line: #e4e8eb;
        --green: #0d7049; --green-soft: #eaf5ef; --mobile-nav-height: calc(68px + env(safe-area-inset-bottom));
        position: fixed; top: var(--staff-viewport-top, 0px); width: 100%;
        height: var(--staff-viewport-height, 100dvh); min-height: 0; min-width: 0; overflow: hidden;
        display: block; padding-bottom: 0; font-family: Arial, Helvetica, sans-serif;
    }
    .mobile-v1-shell .staff-topbar, .mobile-v1-shell #crmApp > .crm-nav { display: none; }
    .mobile-v1-shell #crmApp { display: block; height: 100%; min-height: 0; }
    .mobile-v1-layout { display: flex; flex-direction: column; height: 100%; min-height: 0; padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); background: var(--surface); }
    .mobile-v1-main { flex: 1; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); margin-bottom: var(--mobile-nav-height); }
    .mobile-v1-main > * { grid-area: 1 / 1; min-width: 0; min-height: 0; }
    .mobile-v1-shell #crmContent { display: none; padding: 0; height: 100%; }
    .mobile-v1-layout.has-workspace #crmContent { display: block; }
    .mobile-v1-layout.has-workspace #crmInbox, .mobile-v1-layout.has-conversation #crmInbox { display: none; }
    .mobile-v1-layout.has-conversation #crmContent { display: none; }
    .mobile-v1-shell #crmInbox { display: flex; flex-direction: column; border: 0; padding: 0; margin: 0; overflow: hidden; background: var(--surface); }
    .mobile-v1-shell .crm-inbox__header { padding: 12px 16px 8px; flex: 0 0 auto; }
    .mobile-v1-shell .crm-inbox__header h2 { font-size: 16px; }
    .mobile-v1-shell #crmInboxCount { display: none; }
    .mobile-v1-directory-tools { display: flex; flex-wrap: wrap; align-items: center; padding: 0 16px 8px; gap: 8px; }
    .mobile-v1-directory-tools .crm-nav__item { display: flex; height: 28px; min-height: 28px; border: 0; padding: 4px 8px; font-size: 12px; flex: 0 1 auto; white-space: nowrap; }
    .mobile-v1-directory-tools .crm-nav__item .icon { width: 14px; height: 14px; }
    .mobile-v1-directory-tools .crm-nav__count { position: static; margin: 0; flex-shrink: 0; background: #0d7049; color: #fff; font-size: 10px; }
    .mobile-v1-directory-tools .crm-nav__item > span { display: inline-flex; align-items: center; gap: 4px; }
    .mobile-v1-directory-tools #crmInboxNewGroup { margin-left: auto; width: 36px; min-width: 36px; height: 36px; }
    .mobile-v1-directory-tools #crmInboxNewGroup span { display: none; }
    .mobile-v1-search { display: flex; align-items: center; gap: 8px; margin: 0 16px 10px; border: 1px solid var(--line); background: var(--surface-soft); border-radius: 6px; padding: 0 10px; height: 40px; flex: 0 0 40px; }
    .mobile-v1-search .icon { width: 16px; height: 16px; color: var(--muted); }
    .mobile-v1-search input { font-size: 16px; min-width: 0; width: 100%; background: transparent; border: 0; padding: 0; height: 38px; }
    .mobile-v1-shell .crm-inbox__list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
    .mobile-v1-shell .crm-inbox-row { height: 72px; min-height: 72px; display: grid; grid-template-columns: 40px minmax(0, 1fr) 48px; gap: 10px; padding: 10px 16px; border: 0; }
    .mobile-v1-shell .crm-inbox-row__avatar { width: 40px; height: 40px; font-size: 13px; }
    .mobile-v1-shell .crm-inbox-row__copy { min-width: 0; gap: 4px; }
    .mobile-v1-shell .crm-inbox-row__copy strong { font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .mobile-v1-shell .crm-inbox-row__copy > span { font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .mobile-v1-shell .crm-inbox-row__meta { display: flex; flex-wrap: wrap; align-content: space-between; justify-content: flex-end; gap: 4px; }
    .mobile-v1-shell .crm-inbox-row__meta small { width: 100%; font-size: 10px; text-align: right; }
    .mobile-v1-shell .crm-inbox-row__badge, .mobile-v1-task-badge { min-width: 18px; height: 18px; padding: 0 4px; display: inline-grid; place-items: center; border-radius: 9px; font-size: 11px; line-height: 18px; }
    .mobile-v1-shell .crm-inbox-row__badge { background: #0d7049; color: white; }
    .mobile-v1-task-badge { background: #f4cf54; color: #3d454b; }
    .mobile-v1-shell .crm-inbox__list li { border-bottom: 1px solid #edf0f2; }
    .mobile-v1-nav { position: absolute; left: env(safe-area-inset-left); right: env(safe-area-inset-right); bottom: 0; height: var(--mobile-nav-height); padding: 5px 8px calc(5px + env(safe-area-inset-bottom)); display: flex; gap: 4px; border-top: 1px solid var(--line); background: var(--surface); z-index: 10; }
    .mobile-v1-control { border: 0; border-radius: 6px; background: transparent; color: var(--muted); min-height: 44px; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; font: inherit; }
    .mobile-v1-nav .mobile-v1-control { flex: 1; min-width: 0; flex-direction: column; gap: 4px; padding: 6px 2px; font-size: 10px; }
    .mobile-v1-nav .icon { width: 20px; height: 20px; }
    .mobile-v1-shell .icon { flex-shrink: 0; }
    .mobile-v1-nav .mobile-v1-control > span { max-width: 100%; overflow-wrap: anywhere; }
    .mobile-v1-control[aria-current="page"] { color: var(--green); background: var(--green-soft); }
    .mobile-v1-control:disabled { opacity: .6; cursor: not-allowed; }
    .mobile-v1-shell :is(button,a,input,textarea):focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
    .mobile-v1-more, .mobile-v1-bell-panel { position: absolute; z-index: 15; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 16px #17191b14; padding: 8px; max-height: 45%; overflow-y: auto; }
    .mobile-v1-more { right: 12px; bottom: var(--mobile-nav-height); width: 220px; }
    .mobile-v1-more .mobile-v1-control { justify-content: flex-start; width: 100%; font-size: 14px; }
    .mobile-v1-bell-panel { top: calc(52px + env(safe-area-inset-top)); right: 12px; left: 12px; font-size: 12px; }
    .mobile-v1-bell { position: absolute; top: calc(4px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); width: 40px; height: 44px; }
    .mobile-v1-layout.has-conversation .mobile-v1-bell, .mobile-v1-layout.has-workspace .mobile-v1-bell { display: none; }
    .mobile-v1-shell .crm-panel--calendar { flex: 0 0 auto; padding: 0; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
    .mobile-v1-shell .crm-panel--calendar > .crm-panel__heading, .mobile-v1-shell #crmDateTasks { display: none; }
    .mobile-v1-shell .staff-calendar { padding: 0; }
    .mobile-v1-shell .staff-calendar__toolbar { margin: 0; height: 56px; min-height: 56px; justify-content: center; gap: 0; padding-right: 38px; padding-left: 8px; border-bottom: 1px solid var(--line); }
    .mobile-v1-shell .staff-calendar__toolbar > .icon-button { width: 36px; height: 44px; min-height: 44px; }
    .mobile-v1-shell .staff-calendar__full-date { height: 44px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; font-size: 13px; font-weight: 600; }
    .mobile-v1-shell .staff-calendar__week { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); min-width: 0; padding: 0 8px; gap: 0; height: 76px; }
    .mobile-v1-shell .staff-calendar__column { border: 0; min-width: 0; }
    .mobile-v1-shell .staff-calendar__column.is-selected { background: #eaf5ef; box-shadow: inset 0 -2px #0d7049; border-radius: 4px; }
    .mobile-v1-shell .staff-calendar__day { height: 76px; width: 100%; padding: 8px 0; display: flex; flex-direction: column; gap: 5px; border: 0; background: transparent; }
    .mobile-v1-shell .staff-calendar__day-title { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; }
    .mobile-v1-shell .staff-calendar__day strong { font-size: 14px; }
    .mobile-v1-shell .staff-calendar__day[aria-current="date"]::after { display: none; }
    .mobile-v1-shell .staff-calendar__today { position: absolute; top: 5px; right: 6px; width: 4px; height: 4px; border-radius: 50%; background: #255c85; font-size: 0; }
    .mobile-v1-shell .staff-calendar__day { position: relative; }
    .mobile-v1-shell .staff-calendar__counts { display: flex; justify-content: center; align-items: center; gap: 2px; height: 16px; }
    .mobile-v1-shell .staff-calendar__count { display: inline-flex; align-items: center; gap: 1px; font-size: 9px; }
    .mobile-v1-shell .staff-calendar__count .icon { width: 10px; height: 10px; }
    .mobile-v1-shell .staff-calendar__count > span { min-width: 13px; height: 13px; line-height: 13px; padding: 0 2px; background: #edf0f2; border-radius: 7px; }
    .mobile-v1-shell .staff-calendar__choices { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-top: 1px solid var(--line); }
    .mobile-v1-shell .staff-calendar__choices button { height: 32px; font-size: 12px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
    .mobile-v1-shell .staff-calendar__choices button[aria-expanded="true"] { border-color: #9eabb4; background: var(--surface-soft); }
    .mobile-v1-shell .staff-calendar__detail { padding: 0 16px 6px; max-height: min(144px, 24dvh); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); }
    .mobile-v1-shell .staff-calendar__detail-heading { min-height: 26px; margin: 0; }
    .mobile-v1-shell .staff-calendar__detail-heading h3 { font-size: 11px; }
    .mobile-v1-shell .staff-calendar__detail-controls .icon-button { height: 26px; min-height: 26px; }
    .mobile-v1-shell .staff-calendar__agenda-row { padding: 4px 0; min-height: 34px; grid-template-columns: minmax(0,1fr) auto; font-size: 12px; gap: 2px 8px; }
    .mobile-v1-shell .staff-calendar__agenda-copy { grid-column: 1; grid-row: 1; }
    .mobile-v1-shell .staff-calendar__agenda-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-v1-shell .staff-calendar__agenda-time { grid-column: 1; grid-row: 2; font-size: 10px; color: var(--muted); }
    .mobile-v1-shell .staff-calendar__agenda-status { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #255c85; background: #eaf3fa; font-size: 10px; padding: 2px 4px; border-radius: 3px; }
    .mobile-v1-shell .staff-calendar__agenda-status.is-overdue { background: #fff0ef; color: #a13f38; }
    .mobile-v1-shell .staff-calendar__agenda-status.is-completed { background: #edf0f2; color: var(--muted); }
    .mobile-v1-shell .staff-calendar__agenda-people, .mobile-v1-shell .staff-calendar__agenda-type, .mobile-v1-shell .staff-calendar__overdue { display: none; }
    .mobile-v1-shell .staff-calendar__picker { top: 52px; max-height: min(360px,60dvh); overflow-y: auto; }
    .mobile-v1-shell #crmConversationDialog { position: static; inset: auto; width: 100%; max-width: none; height: 100%; max-height: none; padding: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
    .mobile-v1-shell #crmConversationDialog[open] { display: grid; grid-template-rows: 64px minmax(0,1fr); }
    .mobile-v1-shell #crmConversationNotice { display: none; }
    .mobile-v1-shell .crm-conversation-dialog__bar { height: 64px; min-height: 64px; padding: 8px; gap: 8px; position: relative; }
    .mobile-v1-shell .crm-chat-identity { padding-left: 36px; gap: 8px; flex: 1; min-width: 0; }
    .mobile-v1-shell #crmCloseConversationButton { position: absolute; left: 0; top: 10px; width: 36px; height: 44px; }
    .mobile-v1-shell .crm-chat-header-actions { gap: 0; flex: 0 0 auto; }
    .mobile-v1-shell .crm-chat-header-actions > .icon-button { width: 32px; min-width: 32px; }
    .mobile-v1-shell .crm-chat-identity h2 { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
    .mobile-v1-shell .crm-chat-identity > div { min-width: 0; }
    .mobile-v1-shell .crm-chat-identity #crmChatSubtitle { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
    .mobile-v1-shell #crmMessagesView { height: 100%; min-height: 0; padding: 0; }
    .mobile-v1-shell .crm-team-conversation, .mobile-v1-shell .conversation-pane { height: 100%; min-height: 0; }
    .mobile-v1-shell .crm-team-stream, .mobile-v1-shell .message-stream { padding: 12px 16px; background: var(--canvas); overscroll-behavior: contain; }
    .mobile-v1-shell .crm-team-message { max-width: 94%; }
    .mobile-v1-shell .crm-team-message__content, .mobile-v1-shell .message-bubble { border-radius: 6px; background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
    .mobile-v1-shell .crm-team-message.is-own .crm-team-message__content, .mobile-v1-shell .message-row--outgoing .message-bubble { background: var(--green-soft); }
    .mobile-v1-shell .crm-team-message__meta { flex-wrap: wrap; gap: 2px 8px; }
    .mobile-v1-shell .crm-team-message__meta strong { min-width: 0; overflow-wrap: anywhere; }
    .mobile-v1-shell .crm-team-message__meta time { flex: 0 0 auto; white-space: nowrap; }
    .mobile-v1-shell .crm-team-composer, .mobile-v1-shell .composer { padding: 8px; gap: 8px; border-top: 1px solid var(--line); background: var(--surface); }
    .mobile-v1-shell .crm-team-composer textarea, .mobile-v1-shell .composer textarea { font-size: 16px; border-radius: 6px; background: var(--surface-soft); }
    .mobile-v1-keyboard { --mobile-nav-height: 0px !important; }
    .mobile-v1-keyboard .mobile-v1-nav { display: none; }
}
@media (max-width: 900px) and (max-height: 450px) {
    .mobile-v1-shell .staff-calendar__toolbar { height: 44px; min-height: 44px; }
    .mobile-v1-shell .staff-calendar__week, .mobile-v1-shell .staff-calendar__day { height: 66px; }
    .mobile-v1-shell .staff-calendar__detail { max-height: 80px; }
    .mobile-v1-shell .crm-inbox__header { display: none; }
    .mobile-v1-directory-tools { padding-top: 4px; padding-bottom: 4px; }
    .mobile-v1-search { margin-bottom: 4px; }
}