/* Keep navigation labels readable without changing theme colors. */
html[data-language] .nav-icon svg { display: block; margin: auto; }
html[data-language="bi"] :is(.communication-tab,.chat-entry-arrow,.nav-btn,.option strong,.option small,.qmx-business-link strong,.qmx-business-link small) { white-space: pre-line; }
html[data-language] :is(.chat-entry-option > span,.qmx-business-head > div,.account-notice-copy,.person,.content-head > div) { min-width: 0; }
@media (min-width: 681px) {
  html[data-language] .composer { flex: 0 0 auto; padding: 10px 12px; }
  html[data-language] .compose-box { align-items: center; }
  html[data-language] .compose-box #input { height: 44px; min-height: 44px; padding: 4px; font-size: 14px; line-height: 20px; }
  html[data-language="bi"] .compose-box #input { height: 52px; min-height: 52px; }
}
@media (max-width: 680px) {
  html[data-language] { --chat-nav-height: 64px; }
  html[data-language="bi"] { --chat-nav-height: 76px; }
  html[data-language] .app { box-sizing: border-box; position: relative; height: var(--chat-screen-height,100vh); max-height: var(--chat-screen-height,100vh); min-height: 0; margin-block: 0; padding-top: var(--chat-safe-top,12px); padding-bottom: calc(var(--chat-nav-height) + var(--chat-nav-bottom,10px) + 16px); overflow: hidden; }
  html[data-language] .rail { box-sizing: border-box; position: absolute; inset-inline: max(8px,env(safe-area-inset-left,0px)) max(8px,env(safe-area-inset-right,0px)); top: auto; bottom: var(--chat-nav-bottom,10px); width: auto; height: var(--chat-nav-height); padding: 4px; gap: 2px; align-items: stretch; border-radius: 18px; }
  html[data-language] .nav-btn { flex: 1 1 0; width: auto; min-width: 0; min-height: 44px; height: auto; padding: 3px; gap: 2px; justify-content: center; font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }
  html[data-language] .nav-btn > span { max-width: 100%; white-space: inherit; overflow: visible; text-overflow: clip; }
  html[data-language] .nav-icon { flex: 0 0 20px; height: 20px; }
  html[data-language] .nav-icon svg { width: 20px; height: 20px; }
  html[data-language] .communication-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; padding: 8px 6px 0; overflow: visible; flex-shrink: 0; }
  html[data-language] .communication-tab { min-width: 0; width: 100%; min-height: 40px; padding: 6px 4px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; border-radius: 10px 10px 0 0; }
  html[data-language="bi"] .communication-tab { white-space: pre-line; min-height: 56px; }
  html[data-language] .chat-head { height: auto; min-height: 68px; flex: 0 0 auto; padding: 10px; gap: 8px; flex-wrap: wrap; }
  html[data-language] :is(.person p,.member-state,.account-notice-copy strong,.account-notice-copy small,.communication-ready span,.communication-ready small) { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; height: auto; }
  html[data-language] :is(.account-notice,.communication-ready) { flex-shrink: 0; flex-wrap: wrap; gap: 8px; }
  html[data-language] .communication-ready { padding: 8px 10px; }
  html[data-language] .account-notice-copy { flex: 1 1 160px; }
  html[data-language] .account-login { flex-shrink: 0; white-space: normal; }
  html[data-language] .content-view { padding: 18px 10px; }
  html[data-language] [data-panel="profile"] > .card { padding: 14px 10px; }
  html[data-language] :is(.option,.qmx-business-card,.chat-value-card) { padding: 16px 12px; }
  html[data-language] .chat-entry-option { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  html[data-language] .chat-entry-arrow { align-self: stretch; text-align: center; white-space: normal; padding: 12px; }
  html[data-language="bi"] .chat-entry-arrow { white-space: pre-line; }
  html[data-language] :is(.option strong,.option small,.qmx-business-link strong,.qmx-business-link small,.qmx-app-link span,.qmx-app-link small) { max-width: 100%; height: auto; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.55; }
  html[data-language] :is(.qmx-business-links,.qmx-app-switcher) { grid-template-columns: minmax(0,1fr); gap: 10px; }
  html[data-language] :is(.qmx-business-head,.qmx-business-rule,.content-head,.chat-value-head,.record-card-head) { flex-wrap: wrap; gap: 10px; }
  html[data-language] .qmx-business-rule { display: grid; grid-template-columns: minmax(0,1fr); }
  html[data-language] :is(.qmx-business-link,.qmx-app-link) { min-width: 0; padding: 14px; }
  html[data-language] .qmx-app-link > span { min-width: 0; flex: 1; }
  html[data-language] .qmx-app-link > b { flex-shrink: 0; }
  html[data-language] .language-choice { min-width: 0; overflow-wrap: anywhere; }
  html[data-language] .points-next { flex-wrap: wrap; }
  html[data-language] .composer { flex-shrink: 0; padding: 6px; }
  html[data-language] .compose-box { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 4px; padding: 5px; align-items: center; }
  html[data-language] .compose-box #input { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; height: 44px; min-height: 44px; margin: 0; padding: 4px; font-size: 14px; line-height: 20px; resize: none; overflow-y: auto; }
  html[data-language="bi"] .compose-box #input { height: 52px; min-height: 52px; }
  html[data-language] .compose-box .plus { grid-row: 1; grid-column: 1; width: 32px; min-width: 0; height: 40px; padding: 0; justify-self: start; }
  html[data-language] .compose-box .send { grid-row: 1; grid-column: 3; min-width: 48px; min-height: 40px; max-width: 72px; padding: 6px 8px; font-size: 12px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
  html[data-language="bi"] .compose-box .send { white-space: pre-line; }
}

/* Stable outer frame; only the content panes scroll behind the navigation. */
html[data-language] {
  --chat-screen-height: 100vh;
  --chat-safe-top: max(12px,env(safe-area-inset-top,0px));
  --chat-safe-bottom: max(16px,env(safe-area-inset-bottom,0px));
  --chat-nav-bottom: calc(10px + env(safe-area-inset-bottom,0px));
  overscroll-behavior-y: none;
}
@supports (height: 100svh) {
  html[data-language] { --chat-screen-height: 100svh; }
}
html[data-language] .app > :is(main,section,aside) { min-height: 0; min-width: 0; }
html[data-language] .view { min-height: 0; min-width: 0; }
html[data-language] :is(.content-view,.messages,.sidebar) {
  overscroll-behavior-y: contain;
  scroll-padding-top: 16px;
  scroll-padding-bottom: 24px;
}
@media (min-width: 681px) {
  html[data-language] body {
    box-sizing: border-box;
    height: var(--chat-screen-height);
    min-height: 0;
    padding-top: max(16px,var(--chat-safe-top));
    padding-bottom: var(--chat-safe-bottom);
    overflow: hidden;
  }
  html[data-language] .app {
    min-height: 0;
    max-height: calc(var(--chat-screen-height) - max(16px,var(--chat-safe-top)) - var(--chat-safe-bottom));
  }
}
@media (max-width: 680px) {
  html[data-language] { height: var(--chat-screen-height); overflow: hidden; }
  html[data-language] body {
    box-sizing: border-box;
    display: block;
    position: relative;
    height: var(--chat-screen-height);
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior-y: none;
  }
  html[data-language] .social-fab {
    position: absolute !important;
    bottom: calc(var(--chat-nav-height,76px) + var(--chat-nav-bottom) + 14px) !important;
  }
}