/* Keep the existing chat chrome in the viewport; only messages and sessions scroll. */
html:has(body.fx-chat-shell),
body.fx-chat-shell {
  height: 100%;
  overflow: hidden;
}

.fx-chat-shell .app {
  height: 100vh;
  height: 100dvh;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.fx-chat-shell .main,
.fx-chat-shell .sidebar {
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.fx-chat-shell .sidebar .brand,
.fx-chat-shell .sidebar .new-btn,
.fx-chat-shell .sidebar-foot,
.fx-chat-shell .topbar,
.fx-chat-shell .track-tabs,
.fx-chat-shell .duration-tabs,
.fx-chat-shell .cat-tabs {
  flex-shrink: 0;
}

.fx-chat-shell .messages,
.fx-chat-shell .sessions {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
}

.fx-chat-shell .topbar,
.fx-chat-shell .track-tabs,
.fx-chat-shell .duration-tabs,
.fx-chat-shell .cat-tabs {
  min-width: 0;
}

.fx-chat-shell .topbar h1 {
  flex: 1 1 0%;
  min-width: 0;
  text-align: center;
}

.fx-chat-shell .topbar-back,
.fx-chat-shell .topbar .help-btn,
.fx-chat-shell .topbar .menu-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.fx-chat-shell .topbar .scenes {
  min-width: 0;
  max-width: 45%;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.fx-chat-shell .scene-chip {
  flex-shrink: 0;
  white-space: nowrap;
}

.fx-chat-shell .track-tabs,
.fx-chat-shell .duration-tabs,
.fx-chat-shell .cat-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.fx-chat-shell .composer {
  flex: 0 0 auto;
  min-height: 0;
  max-height: 45%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.fx-chat-shell .composer textarea {
  max-height: 220px;
  max-height: min(220px, 28dvh);
  overflow-y: auto;
}

.fx-chat-shell .fx-documents,
.fx-chat-shell .images-preview {
  max-height: 160px;
  max-height: min(160px, 20dvh);
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

@media (max-width: 760px) {
  .fx-chat-shell .sidebar {
    top: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .fx-chat-shell .topbar {
    padding: 12px 16px;
    gap: 8px;
  }

  .fx-chat-shell .topbar h1 { font-size: 14px; }
  .fx-chat-shell .topbar-back { padding: 8px 12px; }

  .fx-chat-shell .topbar:has(.menu-btn) {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 36px;
  }

  .fx-chat-shell .topbar .menu-btn { grid-column: 1; grid-row: 1; }
  .fx-chat-shell .topbar:has(.menu-btn) h1 { grid-column: 2; grid-row: 1; }
  .fx-chat-shell .topbar:has(.menu-btn) .help-btn { grid-column: 3; grid-row: 1; }

  .fx-chat-shell .topbar .scenes {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: 100%;
  }

  .fx-chat-shell .track-tabs,
  .fx-chat-shell .duration-tabs,
  .fx-chat-shell .cat-tabs { padding-left: 16px; padding-right: 16px; }
}

@media (max-height: 540px) {
  .fx-chat-shell .topbar { padding: 8px 12px; }
  .fx-chat-shell .track-tabs,
  .fx-chat-shell .duration-tabs,
  .fx-chat-shell .cat-tabs { padding: 7px 12px; }
  .fx-chat-shell .composer { flex-shrink: 1; max-height: 40%; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .fx-chat-shell .messages { min-height: min(120px, 30dvh); padding-top: 12px; padding-bottom: 12px; }
}