/* ArealLyn Responsive Core V1.3.0 — integrated and observer-loop free */
:root {
  --arealyn-screen-width: 100vw;
  --arealyn-screen-height: 100dvh;
  --arealyn-responsive-gap: clamp(7px, .9vw, 14px);
}

html, body { max-width: 100%; }

.app {
  width: 100% !important;
  height: var(--arealyn-screen-height, 100dvh) !important;
  min-height: 0 !important;
}

.app, .chat-shell, .chat-viewport, .workspace, .workspace-content,
.workspace-card, .admin-rail, .rail-panel, .topbar, .message-list,
.message-row, .message-bubble, .composer-zone, .composer, .studio-split,
.notebook-shell, .notebook-main, .sql-layout, .sql-console {
  min-width: 0 !important;
  max-width: 100%;
}

.workspace { width: 100% !important; }
.workspace-content { gap: var(--arealyn-responsive-gap) !important; }
.workspace-card, .metric-card, .stream-card, .flow-traffic-card {
  min-width: 0 !important;
  max-width: 100% !important;
}
.workspace-card > *, .metric-card > *, .stream-card > * {
  min-width: 0;
  max-width: 100%;
}

.workspace-header, .workspace-actions, .flow-actions, .table-actions,
.plugin-toolbar, .developer-settings-actions, .notebook-export-actions,
.notebook-cell-toolbar, .notebook-cell-actions, .service-connector-actions,
.service-connector-toolbar {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.admin-table, .data-table-host, .tabulator, .sql-result,
.diagnostic-details, .message-content pre, .dbgpt-rendered-output,
.dbgpt-rendered-document, .notebook-cell-preview {
  max-width: 100% !important;
  overflow: auto !important;
  overscroll-behavior-inline: contain;
}

img, video, canvas, svg, iframe { max-width: 100%; }
iframe, .project-preview, .dbgpt-frame, .developer-frame,
.service-connector-frame, .terminal-stage iframe { width: 100% !important; }

.form-field, .form-select, .form-textarea, input, textarea, select {
  min-width: 0 !important;
  max-width: 100% !important;
}

.composer, .attachment-strip {
  width: min(100%, 860px) !important;
  max-width: calc(100% - 12px) !important;
  min-width: 0 !important;
}

.message-bubble {
  max-width: min(88%, 820px) !important;
  overflow-wrap: anywhere;
}

html.arealyn-core-dense .app {
  --rail-width: clamp(245px, 21vw, 300px);
  --composer-width: 84%;
}

html.arealyn-core-compact .app {
  --rail-width: clamp(210px, 25vw, 270px);
  --composer-width: 94%;
  grid-template-columns: minmax(210px, var(--rail-width)) 4px minmax(0, 1fr) !important;
}
html.arealyn-core-compact .rail-nav {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
html.arealyn-core-compact .status-indicator span { display: none; }
html.arealyn-core-compact .status-indicator {
  width: 30px;
  min-width: 30px;
  padding: 0;
  justify-content: center;
}
html.arealyn-core-compact .top-brand { min-width: 84px; }
html.arealyn-core-compact .connection-indicators {
  min-width: 0;
  overflow-x: auto;
}

html.arealyn-core-narrow .desktop-only { display: none !important; }
html.arealyn-core-narrow .mobile-only { display: inline-grid !important; }
html.arealyn-core-narrow .app {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  padding: 0 !important;
  --composer-width: 100%;
}
html.arealyn-core-narrow .admin-rail {
  position: fixed !important;
  z-index: 2147483000 !important;
  inset: 0 auto 0 0 !important;
  width: min(88vw, 360px) !important;
  height: var(--arealyn-screen-height, 100dvh) !important;
  transform: translateX(-105%);
  transition: transform .2s ease;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden !important;
  box-shadow: 18px 0 48px rgba(0, 0, 0, .48);
}
html.arealyn-core-narrow .admin-rail.open { transform: translateX(0); }
html.arealyn-core-narrow .rail-panel { overflow-y: auto !important; }
html.arealyn-core-narrow .rail-splitter { display: none !important; }
html.arealyn-core-narrow #mobileScrim {
  position: fixed;
  z-index: 2147482990;
  inset: 0;
}
html.arealyn-core-narrow .chat-shell {
  width: 100% !important;
  height: var(--arealyn-screen-height, 100dvh) !important;
  min-height: 0 !important;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
html.arealyn-core-narrow .topbar {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 52px;
  gap: 4px;
  padding: 4px max(6px, env(safe-area-inset-right)) 4px max(6px, env(safe-area-inset-left));
}
html.arealyn-core-narrow .top-brand {
  min-width: 0;
  max-width: 28vw;
  overflow: hidden;
}
html.arealyn-core-narrow .connection-indicators {
  min-width: 0;
  max-width: 30vw;
  overflow-x: auto;
  scrollbar-width: none;
}
html.arealyn-core-narrow .connection-indicators::-webkit-scrollbar { display: none; }
html.arealyn-core-narrow .status-indicator span { display: none; }
html.arealyn-core-narrow .status-indicator {
  width: 32px;
  min-width: 32px;
  padding: 0;
  justify-content: center;
}
html.arealyn-core-narrow .model-select {
  width: min(42vw, 220px);
  min-width: 90px !important;
  margin-left: auto;
}
html.arealyn-core-narrow .icon-button,
html.arealyn-core-narrow .composer-button,
html.arealyn-core-narrow .send-button,
html.arealyn-core-narrow .rail-link {
  min-width: 44px;
  min-height: 44px;
}
html.arealyn-core-narrow .chat-viewport {
  padding: 10px max(7px, env(safe-area-inset-right)) 12px max(7px, env(safe-area-inset-left)) !important;
}
html.arealyn-core-narrow .workspace-header {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
html.arealyn-core-narrow .workspace-actions > button { flex: 1 1 135px; }
html.arealyn-core-narrow .workspace-content {
  grid-template-columns: minmax(0, 1fr) !important;
}
html.arealyn-core-narrow .workspace-card { grid-column: 1 !important; }
html.arealyn-core-narrow .composer-zone {
  width: 100%;
  padding: 5px max(6px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
}
html.arealyn-core-narrow .composer,
html.arealyn-core-narrow .attachment-strip,
html.arealyn-core-narrow .message-bubble {
  width: 100% !important;
  max-width: 100% !important;
}
html.arealyn-core-narrow .studio-split,
html.arealyn-core-narrow .notebook-shell {
  grid-template-columns: minmax(0, 1fr) !important;
}
html.arealyn-core-narrow .notebook-sidebar { max-height: 210px; }
html.arealyn-core-narrow .developer-toolbar,
html.arealyn-core-narrow .terminal-controls,
html.arealyn-core-narrow .dbgpt-frame-toolbar,
html.arealyn-core-narrow .data-studio-toolbar,
html.arealyn-core-narrow .service-connector-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 7px !important;
}
html.arealyn-core-narrow .developer-toolbar > input,
html.arealyn-core-narrow .terminal-controls > input,
html.arealyn-core-narrow .dbgpt-frame-toolbar > input,
html.arealyn-core-narrow .dbgpt-frame-toolbar > select,
html.arealyn-core-narrow .data-studio-toolbar > select,
html.arealyn-core-narrow .service-connector-toolbar > input,
html.arealyn-core-narrow .service-connector-toolbar > select {
  grid-column: 1 / -1;
}
html.arealyn-core-narrow .developer-frame-stage,
html.arealyn-core-narrow .dbgpt-frame-stage,
html.arealyn-core-narrow .service-connector-frame-stage,
html.arealyn-core-narrow .terminal-stage,
html.arealyn-core-narrow .arealyn-drawflow-host {
  width: 100%;
  min-height: 410px;
  height: clamp(410px, calc(var(--arealyn-screen-height) - 235px), 820px) !important;
}

@media (max-width: 520px) {
  html.arealyn-core-narrow .top-brand { max-width: 22vw; }
  html.arealyn-core-narrow .developer-toolbar,
  html.arealyn-core-narrow .terminal-controls,
  html.arealyn-core-narrow .dbgpt-frame-toolbar,
  html.arealyn-core-narrow .data-studio-toolbar,
  html.arealyn-core-narrow .service-connector-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html.arealyn-core-narrow .developer-toolbar > *,
  html.arealyn-core-narrow .terminal-controls > *,
  html.arealyn-core-narrow .dbgpt-frame-toolbar > *,
  html.arealyn-core-narrow .data-studio-toolbar > *,
  html.arealyn-core-narrow .service-connector-toolbar > * {
    grid-column: 1 !important;
    width: 100%;
  }
}


/* ================================================================
   V5.2.9 MOBILE TOPBAR + TOUCH-SAFE OVERRIDES
   ================================================================ */

#mobileScrim {
  display: none;
  pointer-events: none !important;
}

#mobileScrim.open {
  display: block;
  pointer-events: auto !important;
}

dialog:not([open]) {
  pointer-events: none !important;
}

button,
select,
input[type="button"],
input[type="submit"] {
  touch-action: manipulation;
}

.topbar {
  position: relative;
  z-index: 40;
  overflow: visible;
}

.connection-indicators {
  max-width: none !important;
  overflow: visible !important;
}

.status-indicator {
  width: 26px !important;
  min-width: 26px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.flow-status-indicator {
  width: 26px !important;
  min-width: 26px !important;
}

html.arealyn-core-compact .status-indicator,
html.arealyn-core-narrow .status-indicator {
  width: 24px !important;
  min-width: 24px !important;
  height: 40px !important;
  padding: 0 !important;
}

html.arealyn-core-narrow body {
  font-size: 15px;
}

html.arealyn-core-narrow .topbar {
  display: grid !important;
  grid-template-columns:
    40px
    32px
    auto
    minmax(88px, 1fr)
    auto;
  align-items: center;
  column-gap: 4px;
  width: 100%;
  min-height: 54px;
  padding:
    4px
    max(6px, env(safe-area-inset-right))
    4px
    max(6px, env(safe-area-inset-left));
}

html.arealyn-core-narrow #menuButton {
  grid-column: 1;
  width: 40px !important;
  min-width: 40px !important;
  height: 44px !important;
  min-height: 44px !important;
}

html.arealyn-core-narrow .top-brand {
  grid-column: 2;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  overflow: visible;
}

html.arealyn-core-narrow .compact-brand-lockup {
  display: block;
}

html.arealyn-core-narrow .top-brand .brand-logo-image {
  width: 30px;
  height: 30px;
}

html.arealyn-core-narrow .compact-wordmark {
  display: none !important;
}

html.arealyn-core-narrow .connection-indicators {
  grid-column: 3;
  display: flex;
  gap: 0;
  width: auto;
}

html.arealyn-core-narrow .model-select {
  grid-column: 4;
  width: 100% !important;
  min-width: 88px !important;
  max-width: none !important;
  height: 40px;
  margin: 0 !important;
  padding-inline: 8px;
  font-size: 12px;
}

html.arealyn-core-narrow .layout-actions {
  grid-column: 5;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0;
}

html.arealyn-core-narrow .layout-actions .icon-button {
  width: 40px !important;
  min-width: 40px !important;
  height: 44px !important;
  min-height: 44px !important;
}

html.arealyn-core-narrow #bubbleButton {
  display: none !important;
}

html.arealyn-core-narrow #promptInput {
  min-height: 42px;
  font-size: 16px;
}

html.arealyn-core-narrow .composer-button,
html.arealyn-core-narrow .send-button {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}

html.arealyn-core-narrow .message-bubble {
  width: auto !important;
  max-width: 94% !important;
}

html.arealyn-core-narrow .micro-footer {
  min-height: 24px;
  font-size: 9px;
}

@media (max-width: 420px) {
  html.arealyn-core-narrow .topbar {
    grid-template-columns:
      40px
      30px
      auto
      minmax(76px, 1fr)
      40px;
    column-gap: 2px;
  }

  html.arealyn-core-narrow #themeToggleButton {
    display: none !important;
  }

  html.arealyn-core-narrow .layout-actions .icon-button {
    width: 40px !important;
    min-width: 40px !important;
  }

  html.arealyn-core-narrow .model-select {
    min-width: 76px !important;
    padding-inline: 5px;
    font-size: 11px;
  }
}


/* ================================================================
   V5.2.10 DESKTOP STABILITY
   ================================================================ */

html:not(.arealyn-core-narrow) #mobileScrim,
html.arealyn-core-wide #mobileScrim,
html.arealyn-core-dense #mobileScrim,
html.arealyn-core-compact #mobileScrim {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html:not(.arealyn-core-narrow) .admin-rail,
html.arealyn-core-wide .admin-rail,
html.arealyn-core-dense .admin-rail,
html.arealyn-core-compact .admin-rail {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html.arealyn-core-wide .app,
html.arealyn-core-dense .app,
html.arealyn-core-compact .app {
  display: grid !important;
  grid-template-columns:
    minmax(205px, var(--rail-width))
    4px
    minmax(0, 1fr) !important;
  width: 100% !important;
  height: var(--arealyn-screen-height) !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html.arealyn-core-wide .chat-shell,
html.arealyn-core-dense .chat-shell,
html.arealyn-core-compact .chat-shell {
  position: relative !important;
  width: auto !important;
  min-width: 0 !important;
  height: var(--arealyn-screen-height) !important;
  pointer-events: auto !important;
  overflow: hidden !important;
}

html.arealyn-core-wide .topbar,
html.arealyn-core-dense .topbar,
html.arealyn-core-compact .topbar,
html.arealyn-core-wide .chat-viewport,
html.arealyn-core-dense .chat-viewport,
html.arealyn-core-compact .chat-viewport,
html.arealyn-core-wide .composer-zone,
html.arealyn-core-dense .composer-zone,
html.arealyn-core-compact .composer-zone {
  pointer-events: auto !important;
}

html.arealyn-core-wide dialog:not([open]),
html.arealyn-core-dense dialog:not([open]),
html.arealyn-core-compact dialog:not([open]) {
  display: none !important;
  pointer-events: none !important;
}