/* Update 35: phone navigation keeps the app's neutral shortcut styling. */
@media (max-width: 999px) {
  #seafix-demo .sf-bottom-nav,
  #seafix-demo[data-theme] .sf-bottom-nav {
    --sf-nav-surface: light-dark(#ededf1, #242427);
    background: var(--sf-nav-surface);
    border-color: light-dark(rgb(140 143 153 / .2), rgb(180 183 193 / .22));
    box-shadow: 0 3px 18px rgb(15 18 25 / .09);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #seafix-demo .sf-bottom-nav,
    #seafix-demo[data-theme] .sf-bottom-nav {
      --sf-nav-surface: light-dark(rgb(245 245 249 / .62), rgb(35 35 39 / .68));
      backdrop-filter: blur(20px) saturate(135%);
      -webkit-backdrop-filter: blur(20px) saturate(135%);
    }
  }
  @media (prefers-reduced-transparency: reduce) {
    #seafix-demo .sf-bottom-nav,
    #seafix-demo[data-theme] .sf-bottom-nav {
      --sf-nav-surface: light-dark(#ededf1, #242427);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }
}

@media (max-width: 759px) {
  #seafix-demo .sf-crew-nav,
  #seafix-demo .sf-top-actions #sf-logout,
  #seafix-demo.sf-chat-view .sf-top-actions { display: none; }

  #seafix-demo #sf-theme-panel > #sf-logout {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    width: 100%; min-height: 46px; margin: 10px 0 0; padding: 13px 10px 4px;
    border: 0; border-top: 1px solid var(--sf-line); border-radius: 0;
    background: transparent; color: var(--sf-danger); font-size: .875rem; font-weight: 550;
  }
  #seafix-demo #sf-theme-panel > #sf-logout:focus-visible {
    outline: 2px solid var(--sf-danger); outline-offset: 2px;
  }
  #seafix-demo #sf-theme-panel > #sf-logout-message {
    position: static; max-width: none; margin: 8px 0 0; padding: 10px;
    border: 0; border-radius: 9px;
    background: color-mix(in srgb, var(--sf-danger) 7%, transparent);
  }

  /* Three compact filters and an expandable search share one phone row. */
  #seafix-demo .sf-chat-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 10px;
  }
  #seafix-demo .sf-chat-sections {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-column: 1; grid-row: 1; gap: 5px; padding: 4px 0 0; overflow: visible;
  }
  #seafix-demo .sf-chat-sections button {
    flex-direction: row; gap: 4px; width: 100%; min-width: 0; min-height: 42px;
    padding: 7px 3px; border-radius: 9px; font-size: 10px; line-height: 1.2;
    background: var(--sf-surface); color: var(--sf-muted);
  }
  #seafix-demo .sf-chat-sections button svg {
    width: 15px !important; height: 15px !important; flex: 0 0 auto;
  }
  #seafix-demo .sf-chat-sections button[aria-pressed="true"],
  #seafix-demo .sf-chat-sections button[aria-expanded="true"] {
    background: light-dark(#e2e3e7, #38393e);
    color: var(--sf-heading); border-color: light-dark(#d4d5db, #4b4c53);
  }
  #seafix-demo .sf-chat-roster { grid-column: 1; grid-row: 2; padding: 0; }
  #seafix-demo .sf-chat-sections .sf-chat-search-toggle { display:flex; }
  #seafix-demo .sf-chat-page #sf-chat-search { padding-right:44px; }
  #seafix-demo .sf-chat-page #sf-chat-search::-webkit-search-cancel-button { display:none; }
  #seafix-demo #sf-chat-search-close { display:grid; }
  #seafix-demo.sf-chat-peer-open .sf-chat-layout {
    grid-template-rows: minmax(0, 1fr); row-gap: 0;
  }
  #seafix-demo.sf-chat-peer-open .sf-chat-conversation { grid-column: 1; grid-row: 1; }
  #seafix-demo.sf-chat-peer-open :is(.sf-chat-sections, .sf-chat-roster) { display: none; }

  /* The report action keeps its familiar footprint with the shortcut's icon and finish. */
  #seafix-demo [data-screen="home"] > .sf-report {
    min-height: 80px; padding: 16px; gap: 13px; border-radius: 14px;
    border-color: light-dark(#17191d, #515761);
    background: var(--sf-report-bg); color: var(--sf-report-text); box-shadow: none;
  }
  #seafix-demo [data-screen="home"] > .sf-report .sf-report-icon {
    width: 32px; height: 32px; border-radius: 0; background: transparent;
  }
  #seafix-demo [data-screen="home"] > .sf-report .sf-report-icon svg {
    --icon-size: 28px;
    width: 28px; height: 28px; stroke-width: 1.75;
  }
  #seafix-demo [data-screen="home"] > .sf-report strong {
    font-size: .9375rem; line-height: 1.4; font-weight: 600;
  }
  #seafix-demo [data-screen="home"] > .sf-report small {
    margin-top: 4px; color: #d4d5d8; opacity: 1; font-size: .75rem; line-height: 1.4;
  }
  #seafix-demo [data-screen="home"] > .sf-report > svg {
    width: 16px; height: 16px; opacity: .72;
  }
  #seafix-demo [data-screen="home"] > .sf-report:focus-visible {
    outline: 2px solid var(--sf-heading); outline-offset: 3px;
  }
}