/* Responsive navigation starts on compact desktop/tablet widths. */
.sf-mobile-nav-toggle,
.sf-mobile-nav-backdrop { display:none; }

@media (max-width:1100px) {
  .sf-sidebar {
    display:flex;
    position:fixed;
    inset:0 auto 0 0;
    width:min(308px, 86vw);
    min-width:0;
    height:100dvh;
    z-index:120;
    transform:translateX(-104%);
    transition:transform .22s ease;
    box-shadow:20px 0 50px rgba(0,0,0,.42);
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  .sf-app.sf-mobile-nav-open .sf-sidebar { transform:translateX(0); }

  .sf-mobile-nav-backdrop {
    display:block;
    position:fixed;
    inset:0;
    z-index:110;
    border:0;
    padding:0;
    background:rgba(2,6,18,.68);
    backdrop-filter:blur(2px);
  }

  .sf-mobile-nav-backdrop[hidden] { display:none; }

  .sf-mobile-nav-toggle {
    width:44px;
    height:44px;
    flex:0 0 44px;
    display:inline-grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
    background:rgba(255,255,255,.045);
    color:#edf2ff;
    cursor:pointer;
  }

  .sf-mobile-nav-toggle svg {
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
  }

  .sf-sidebar .sf-item { min-height:44px; }
  .sf-app.sf-mobile-nav-open { overflow:hidden; }
}

@media (max-width:900px) {
  html, body {
    width:100%;
    min-width:0;
    max-width:100%;
    overflow-x:hidden;
  }

  body { overscroll-behavior-x:none; }

  .sf-app {
    display:block;
    width:100%;
    max-width:100vw;
    min-height:100dvh;
    overflow:hidden;
  }

  .sf-workspace,
  .sf-main,
  .sf-topbar,
  .sf-canvas,
  .sf-overview,
  .sf-overview-grid,
  .sf-overview-card {
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }

  .sf-topbar {
    min-height:56px;
    height:auto;
    padding:8px 10px;
    gap:8px;
    align-items:center;
    overflow:visible;
  }

  .sf-top-left {
    width:100%;
    min-width:0;
    gap:8px;
    flex-wrap:nowrap;
    align-items:center;
  }

  .sf-crumbs {
    min-width:0;
    min-height:40px;
    flex:1 1 auto;
    overflow:hidden;
  }

  .sf-crumbs .sf-label,
  .sf-top-metrics { display:none; }

  .sf-top-right {
    min-width:0;
    flex:0 0 auto;
    gap:6px;
    margin:0;
    flex-wrap:nowrap;
  }

  .sf-top-right > .sf-top-btn:not(#sfAddWindowBtn),
  .sf-top-right > .sf-add-window-wrap + .sf-top-btn,
  #sfSaveLayoutBtn { display:none; }

  .sf-add-window-menu {
    position:fixed;
    top:58px;
    right:8px;
    left:8px;
    width:auto;
    max-height:calc(100dvh - 74px);
    overflow:auto;
  }

  .sf-canvas {
    height:calc(100dvh - 56px);
    min-height:0;
    padding:10px 10px calc(20px + env(safe-area-inset-bottom));
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-gutter:auto;
    -webkit-overflow-scrolling:touch;
  }

  .sf-overview { gap:10px; overflow:visible; }
  .sf-overview-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .sf-overview-row-main,
  .sf-overview-row-secondary,
  .sf-overview-row-bottom { grid-template-columns:minmax(0,1fr); gap:10px; }

  .sf-overview-card { overflow:hidden; }
  .sf-traffic-card,
  .sf-events-card { overflow:visible; }

  .sf-kpi-card { height:106px; padding:12px; }
  .sf-kpi-value { font-size:21px; }
  .sf-card-title-row { min-width:0; flex-wrap:wrap; }
  .sf-card-title-row > * { min-width:0; }

  .sf-chart-wrap,
  .sf-device-body,
  .sf-mini-list,
  .sf-ranked-list,
  .sf-ref-list,
  .sf-feed-list,
  .sf-event-grid { min-width:0; max-width:100%; }

  .sf-country-card { height:auto; min-height:260px; }
  .sf-country-body {
    grid-template-columns:minmax(0,1fr);
    height:auto;
    min-height:0;
    align-items:stretch;
    gap:10px;
  }
  .sf-world {
    width:100%;
    max-width:100%;
    height:150px;
    transform:none;
  }
  .sf-country-list { width:100%; min-width:0; padding-left:0; }

  .sf-feed-card { height:auto; min-height:194px; }
  .sf-feed-list > div { min-width:0; }
  .sf-feed-list > div > * { min-width:0; }

  .sf-event-grid { grid-template-columns:minmax(0,1fr); }
  .sf-event-grid > div { width:100%; min-width:0; }

  .sf-settings-drawer,
  .sf-settings-window,
  .sf-visitor-window,
  .sf-dashboard-float-window {
    inset:8px !important;
    width:auto !important;
    height:auto !important;
    max-width:none !important;
    max-height:none !important;
    min-width:0 !important;
    min-height:0 !important;
    border-radius:12px !important;
    resize:none !important;
  }

  .sf-dashboard-float-window.minimized,
  .sf-livechat-window.minimized {
    right:8px !important;
    left:auto !important;
    width:min(320px,calc(100vw - 16px)) !important;
  }

  .sf-workspace.drawer-open .sf-visitor-drawer,
  .sf-visitor-drawer-inner { width:min(92vw,420px); }

  .sf-visitor-drawer {
    top:56px;
    height:calc(100dvh - 56px);
    z-index:80;
  }

  .sf-livechat-window { inset:8px !important; }
  .sf-livechat-body { grid-template-columns:minmax(0,1fr); position:relative; }
  .sf-livechat-list {
    position:static;
    width:100%;
    max-height:230px;
    overflow:auto;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:none;
  }
  .sf-livechat-message { max-width:92%; }

  .sf-seo-tabs {
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap;
    scrollbar-width:thin;
  }
  .sf-seo-tabs button { flex:0 0 auto; }
  .sf-seo-toolbar-actions { flex-direction:column; align-items:stretch; }
  .sf-seo-list-controls,
  .sc-table-head .sc-controls { align-items:stretch; flex-direction:column; }
  .sf-seo-list-search,
  .sc-table-head .sc-controls input { width:100%; flex:1 1 auto; }

  .sf-seo-pages-table-wrap,
  .sf-seo-query-table-wrap,
  .sf-seo-country-table-wrap,
  .sf-seo-ranking-table-wrap,
  .sf-seo-chance-table-wrap,
  .sf-seo-table-card {
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  button,
  [role="button"],
  .sf-item,
  a { touch-action:manipulation; }

  button:not(.sf-mobile-nav-backdrop),
  [role="button"] { min-height:44px; }

  .sf-app :where(.sf-dashboard-float-window, .sf-visitor-window, .sf-seo-shell)
  :where(small, label, input, select, textarea, button, td, th) {
    font-size:max(12px, 1em) !important;
  }

  .sf-seo-pages-table-wrap,
  .sf-seo-query-table-wrap,
  .sf-seo-country-table-wrap,
  .sf-seo-ranking-table-wrap,
  .sf-seo-chance-table-wrap { scroll-snap-type:x proximity; }

  .sf-seo-pages-table-wrap th:first-child,
  .sf-seo-pages-table-wrap td:first-child,
  .sf-seo-query-table-wrap th:first-child,
  .sf-seo-query-table-wrap td:first-child,
  .sf-seo-country-table-wrap th:first-child,
  .sf-seo-country-table-wrap td:first-child,
  .sf-seo-ranking-table-wrap th:first-child,
  .sf-seo-ranking-table-wrap td:first-child,
  .sf-seo-chance-table-wrap th:first-child,
  .sf-seo-chance-table-wrap td:first-child {
    position:sticky;
    left:0;
    z-index:2;
    background:#0d1c2b;
  }
}

@media (max-width:560px) {
  .sf-topbar { min-height:54px; padding:7px 8px; }
  .sf-mobile-nav-toggle { width:44px; height:44px; flex-basis:44px; }

  .sf-top-left { gap:6px; }
  .sf-crumbs { min-height:40px; }
  .sf-crumbs .sf-refresh-ico { display:none; }

  /* Keep the add-window action reachable while desktop-only controls stay hidden. */
  .sf-top-right { display:flex; }

  .sf-canvas {
    height:calc(100dvh - 54px);
    padding:8px 8px calc(18px + env(safe-area-inset-bottom));
  }

  .sf-overview { gap:12px; }
  .sf-overview-kpis { grid-template-columns:minmax(0,1fr); gap:10px; }
  .sf-kpi-card { height:128px; padding:14px 14px 10px; }
  .sf-kpi-head { font-size:12px; }
  .sf-kpi-icon { width:32px; height:32px; }
  .sf-kpi-value { margin-top:1px; font-size:25px; }
  .sf-kpi-sub { margin-top:2px; font-size:9px; }
  .sf-spark { left:12px; right:12px; bottom:7px; width:calc(100% - 24px); height:36px; }

  .sf-traffic-card,
  .sf-list-card,
  .sf-device-card,
  .sf-compact-card,
  .sf-country-card,
  .sf-feed-card,
  .sf-events-card { padding:14px; }

  .sf-card-title-row { align-items:center; }
  .sf-period-btn { min-width:96px; height:36px; }
  .sf-period-menu { max-width:calc(100vw - 44px); }

  .sf-country-card { min-height:330px; }
  .sf-country-body {
    display:flex !important;
    flex-direction:column;
    width:100%;
    height:auto !important;
    min-height:0;
    gap:8px;
    margin-top:8px;
  }
  .sf-world {
    flex:0 0 auto;
    width:100%;
    height:150px;
    max-height:150px;
    transform:none !important;
    overflow:hidden;
  }
  .sf-country-list { gap:8px; font-size:10px; }
  .sf-country-list > div { min-height:20px; }

  /* Activity rows become two-line records instead of overflowing horizontally. */
  .sf-feed-list { margin-top:10px; }
  .sf-feed-list > div {
    display:grid;
    grid-template-columns:24px minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    column-gap:8px;
    row-gap:2px;
    min-height:46px;
    padding:7px 0;
    box-sizing:border-box;
  }
  .sf-feed-list i {
    grid-column:1;
    grid-row:1 / 3;
    align-self:center;
  }
  .sf-feed-list span {
    grid-column:2;
    grid-row:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .sf-feed-list em {
    grid-column:2;
    grid-row:2;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:8px;
  }
  .sf-feed-list b {
    grid-column:3;
    grid-row:1 / 3;
    align-self:center;
    max-width:54px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .sf-events-card .sf-card-title-row { flex-wrap:nowrap; }
  .sf-events-card .sf-card-title-row h2 { flex:1 1 auto; }
  .sf-event-grid { margin-top:12px; gap:9px; }
  .sf-event-grid > div { height:112px; padding:12px; }
  .sf-event-value { margin-top:18px; }
  .sf-event-icon { top:18px; }

  .sf-settings-drawer { inset:6px !important; }
  .sf-settings-content,
  .sf-settings-main { min-width:0; }
  .sf-settings-layout { grid-template-columns:1fr !important; }
  .sf-settings-sidebar { max-height:180px; overflow:auto; }

  .sf-settings-test-view { padding-left:10px; padding-right:10px; }
  .sf-settings-test-head h1 { overflow-wrap:anywhere; }
  .sf-settings-test-tabs {
    width:100%;
    gap:8px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
  }
  .sf-settings-test-tab { flex:0 0 auto; scroll-snap-align:start; }
  .sf-settings-test-badges {
    align-items:flex-start;
    flex-direction:column;
  }
  .sf-settings-test-badge {
    width:max-content;
    max-width:100%;
    height:auto;
    min-height:32px;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .sf-settings-test-section-intro {
    align-items:stretch;
    flex-direction:column;
  }
  .sf-settings-test-section-intro .sf-settings-test-integration-button {
    width:100%;
    top:0;
  }
  .sf-settings-test-integration-featured,
  .sf-settings-test-integration-card,
  .sf-settings-test-more-integrations { padding:14px 12px !important; }
  .sf-settings-test-integration-head {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    gap:10px;
  }
  .sf-settings-test-integration-title { overflow-wrap:anywhere; }
  .sf-settings-test-integration-title h3,
  .sf-settings-test-integration-title p { max-width:100%; overflow-wrap:anywhere; }
  .sf-settings-test-status-pill {
    grid-column:1 / -1;
    justify-self:start;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .sf-settings-test-integration-domain { padding:12px; }
  .sf-settings-test-integration-domain strong {
    max-width:100%;
    font-size:15px;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .sf-settings-test-integration-stats { grid-template-columns:1fr; }
  .sf-settings-test-integration-stats > div {
    border-right:0;
    min-width:0;
  }
  .sf-settings-test-integration-actions {
    align-items:stretch;
    flex-direction:column;
  }
  .sf-settings-test-integration-actions button { width:100%; padding:8px 12px; }
  .sf-settings-test-integration-rows > div {
    align-items:flex-start;
    flex-wrap:wrap;
    gap:5px 10px;
    padding:8px 0;
  }
  .sf-settings-test-integration-rows strong {
    min-width:0;
    max-width:100%;
    margin-left:auto;
    overflow-wrap:anywhere;
  }

  .sf-seo-toolbar { gap:12px; padding-top:14px; }
  .sf-seo-title p { line-height:1.45; }
  .sf-seo-controls .sf-ahrefs-card {
    width:100%;
    flex:0 0 auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) 76px;
    grid-template-areas:
      "heading ring"
      "attribution ring"
      "date ring"
      "note note"
      "action action";
    align-items:center;
    gap:4px 12px;
    padding:12px 14px;
  }
  .sf-seo-controls .sf-ahrefs-heading { grid-area:heading; }
  .sf-seo-controls .sf-ahrefs-ring {
    grid-area:ring;
    width:72px;
    height:72px;
    margin:0;
  }
  .sf-seo-controls .sf-ahrefs-ring span { width:60px; height:60px; font-size:24px; }
  .sf-seo-controls .sf-ahrefs-attribution { grid-area:attribution; }
  .sf-seo-controls .sf-ahrefs-date { grid-area:date; margin-top:0; }
  .sf-seo-controls .sf-ahrefs-note { grid-area:note; margin-top:2px; }
  .sf-seo-controls .sf-ahrefs-connect {
    grid-area:action;
    justify-self:start;
    width:auto;
    margin-top:4px;
  }
  .sf-seo-tabs {
    scroll-padding-inline:10px;
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:calc(50% - 4px);
    gap:8px;
    scroll-snap-type:x mandatory;
  }
  .sf-seo-tabs button,
  .sf-seo-tabs .sf-seo-future {
    width:100%;
    min-width:0;
    margin:0;
    padding-inline:8px;
    scroll-snap-align:start;
  }

  .sf-seo-metrics,
  .sf-seo-page-metrics { grid-template-columns:1fr; }
  .sf-seo-title h1 { font-size:21px; }
  .sf-seo-module-placeholder { min-height:360px; padding:28px 18px; }
}

@media (max-width:380px) {
  .sf-canvas { padding-left:7px; padding-right:7px; }
  .sf-kpi-card { height:122px; }
  .sf-country-card,
  .sf-feed-card,
  .sf-events-card { padding:12px; }
  .sf-period-btn { min-width:88px; padding:0 10px; gap:10px; }
  .sf-feed-list b { max-width:46px; font-size:8px; }
}