/* Agnibeena Graphden V148 — compact desktop-app shell */
:root {
  --ds-app-header-h: 66px;
  --ds-left-width: 372px;
  --ds-shell-gap: 8px;
  --ds-shell-radius: 10px;
  --ds-menu-bg: #171723;
  --ds-menu-border: rgba(207, 184, 255, .22);
}

html,
body.data-studio-page {
  min-height: 100%;
  background:
    radial-gradient(circle at 14% -10%, rgba(111, 63, 190, .16), transparent 32%),
    #090a10;
}

body.data-studio-page {
  overflow: hidden;
}

body.data-studio-page .site-header,
body.data-studio-page .agn-site-footer {
  display: none !important;
}

[hidden] { display: none !important; }

/* App title bar */
.ds-app-header.data-hero {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 3000;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 0;
  width: 100%;
  height: var(--ds-app-header-h);
  min-height: var(--ds-app-header-h);
  max-height: var(--ds-app-header-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(216, 197, 255, .16);
  border-radius: 0;
  background: rgba(24, 24, 36, .985);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
  backdrop-filter: blur(18px);
}

.ds-titlebar {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 12px;
  height: 38px;
  min-height: 38px;
  padding: 3px 8px 2px 10px;
}

.ds-app-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #fff;
  text-decoration: none;
}

.ds-app-brand img {
  display: block;
  width: auto;
  height: 25px;
  object-fit: contain;
}

.ds-app-brand h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.ds-document-title {
  min-width: 0;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, .09);
}

.ds-document-title strong,
.ds-document-title small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-document-title strong {
  color: #f5f1ff;
  font-size: 11px;
  font-weight: 850;
}

.ds-document-title small {
  margin-top: 1px;
  color: rgba(238, 232, 250, .48);
  font-size: 8px;
  font-weight: 700;
}

.ds-app-header .hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.ds-window-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 28px;
  padding: 0 0 2px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  font: 400 21px/1 system-ui, sans-serif;
  cursor: pointer;
}

.ds-window-close:hover,
.ds-window-close:focus-visible {
  border-color: rgba(255, 122, 139, .48);
  background: #c42b3e;
  color: #fff;
  outline: none;
}

/* Premium/account indicator becomes a title-bar status chip */
.ds-app-header .ds-access-card {
  width: auto;
  min-width: 150px;
  max-width: 230px;
  min-height: 27px;
  margin: 0;
  padding: 3px 7px;
  border-radius: 7px;
  box-shadow: none;
}

.ds-app-header .ds-access-card strong { font-size: 9px; }
.ds-app-header .ds-access-card span { display: none; }
.ds-app-header .ds-tier-badge { min-height: 17px; padding: 2px 6px; font-size: 6px; }

/* Menu bar */
.ds-menubar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  min-height: 28px;
  padding: 0 9px 2px;
}

.ds-menu-shell { position: relative; }

.ds-menu-button {
  min-width: 48px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: rgba(248, 245, 255, .88);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.ds-menu-button:hover,
.ds-menu-button:focus-visible,
.ds-menu-button[aria-expanded="true"] {
  border-color: rgba(188, 151, 255, .28);
  background: rgba(115, 70, 190, .24);
  color: #fff;
  outline: none;
}

.ds-menubar-divider {
  width: 1px;
  height: 17px;
  margin: 0 7px;
  background: rgba(255, 255, 255, .10);
}

.ds-menubar-hint {
  overflow: hidden;
  color: rgba(239, 233, 250, .40);
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-menu-dropdown {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  z-index: 3200;
  width: min(390px, calc(100vw - 16px));
  max-height: calc(100vh - var(--ds-app-header-h) - 14px);
  padding: 7px;
  overflow: auto;
  border: 1px solid var(--ds-menu-border);
  border-radius: 9px;
  background: var(--ds-menu-bg);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .58);
}

.ds-view-dropdown { width: min(260px, calc(100vw - 16px)); }

.ds-menu-heading {
  padding: 5px 8px 3px;
  color: rgba(235, 225, 255, .42);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ds-menu-command-list { display: grid; gap: 2px; }

.ds-menu-separator {
  height: 1px;
  margin: 6px 4px;
  background: rgba(255, 255, 255, .09);
}

.ds-menu-item,
.ds-menu-check {
  width: 100%;
  min-height: 31px;
  margin: 0;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: rgba(248, 245, 255, .90);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.2;
  text-align: left;
}

button.ds-menu-item { cursor: pointer; }

.ds-menu-item:hover:not(:disabled),
.ds-menu-item:focus-visible,
.ds-menu-check:hover {
  border-color: rgba(191, 155, 255, .24);
  background: rgba(122, 74, 203, .22);
  color: #fff;
  outline: none;
}

.ds-menu-item:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.ds-menu-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.ds-menu-check input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #8b54e4;
}

/* Existing export/project controls now live inside File */
.ds-file-tools.export-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ds-file-tools .panel-section {
  min-width: 0;
  margin: 0;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 7px;
  background: rgba(255, 255, 255, .025);
}

.ds-file-tools .panel-section h2 {
  margin: 0 0 2px;
  font-size: 10px;
}

.ds-file-tools .panel-section p {
  margin: 0 0 6px;
  color: rgba(239, 233, 250, .46);
  font-size: 7px;
  line-height: 1.35;
}

.ds-file-tools .full-width,
.ds-file-tools button {
  width: 100%;
  min-height: 30px;
  margin: 2px 0 0 !important;
  padding: 5px 7px;
  border-radius: 6px;
  font-size: 9px;
}

.ds-file-tools .privacy-note {
  grid-column: 1 / -1;
  padding: 7px 9px;
}

.ds-file-tools .privacy-note h2 { display: none; }
.ds-file-tools .privacy-note p { margin: 0; }
.ds-file-tools .ds-export-divider { grid-column: 1 / -1; }
.ds-file-tools .ds-export-label { margin: 5px 0 2px; }

/* Main application area */
.data-main {
  width: 100%;
  max-width: none;
  height: 100vh;
  min-height: 0;
  margin: 0;
  padding: calc(var(--ds-app-header-h) + var(--ds-shell-gap)) var(--ds-shell-gap) var(--ds-shell-gap);
  overflow: hidden;
}

.data-workspace {
  display: grid;
  grid-template-columns: var(--ds-left-width) minmax(0, 1fr);
  gap: var(--ds-shell-gap);
  width: 100%;
  height: calc(100vh - var(--ds-app-header-h) - (var(--ds-shell-gap) * 2));
  min-height: 0;
  align-items: stretch;
}

.control-panel,
.preview-card {
  min-width: 0;
  min-height: 0;
  height: 100%;
  border-radius: var(--ds-shell-radius);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .25);
}

/* Left controls: simple tabbed inspector */
.control-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.panel-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 3px;
  min-width: 0;
  padding: 6px;
  overflow: visible;
  border-right: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(8, 9, 14, .48);
}

.panel-tab {
  display: block;
  min-width: 0;
  min-height: 32px;
  padding: 5px 4px;
  overflow: hidden;
  border-radius: 7px;
  font-size: 8px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-tab::before,
.ds-nav-group,
.ds-nav-copy small { display: none !important; }

.panel-tab.active {
  border-color: rgba(190, 153, 255, .48);
  background: linear-gradient(145deg, rgba(128, 75, 216, .48), rgba(83, 43, 151, .42));
  color: #fff;
}

.panel-scroll {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: auto;
  background: rgba(14, 15, 23, .66);
  scrollbar-gutter: stable;
}

.panel-page { padding: 11px; }

/* Compact but readable controls */
.section-heading { margin-bottom: 7px; }
.section-heading h2,
.panel-section h2 { font-size: 14px; }
.section-heading p,
.panel-section p { margin-top: 2px; font-size: 9px; line-height: 1.35; }

.data-drop-zone {
  min-height: 82px;
  margin-bottom: 9px;
  padding: 10px;
  border-radius: 9px;
}
.data-drop-zone strong { font-size: 13px; }
.data-drop-zone span { font-size: 10px; }
.data-drop-zone small { font-size: 8px; }

input[type="text"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
  min-height: 33px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 10px;
}
input[type="color"] { height: 33px; border-radius: 7px; }
label { font-size: 9px; }

.primary-action,
.secondary-action,
.text-action,
.small-action,
.preview-actions button,
.sample-grid button,
.chart-type-button {
  min-height: 32px;
  border-radius: 7px;
}
.primary-action,
.secondary-action,
.small-action { padding-inline: 10px; font-size: 10px; }

#data-text-input { min-height: 105px; padding: 8px; font-size: 10px; }
.sample-grid { gap: 4px; margin: 7px 0 9px; }
.sample-grid button { min-height: 29px; font-size: 8px; }
.data-summary-card { gap: 4px; margin-bottom: 9px; }
.data-summary-card > div { padding: 6px; border-radius: 7px; }
.data-summary-card span { font-size: 6px; }
.data-summary-card strong { margin-top: 2px; font-size: 10px; }
.column-list { gap: 4px; }
.column-card { grid-template-columns: 25px minmax(0,1fr) auto; gap: 6px; padding: 6px; border-radius: 7px; }
.column-icon { width: 25px; height: 25px; border-radius: 6px; font-size: 8px; }
.column-name { font-size: 9px; }
.column-values { font-size: 7px; }

.control-section,
.mapping-field,
.ds-prep-card,
.ds-prep-source-card,
.ds-plugin-section,
.premium-tool-card,
.ds-premium-intro {
  margin-bottom: 7px;
  padding: 8px;
  border-radius: 8px;
}

.chart-gallery { grid-template-columns: 1fr; gap: 4px; }
.chart-type-button {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 7px;
  min-height: 47px;
  padding: 5px;
}
.chart-icon { width: 32px; height: 32px; border-radius: 7px; font-size: 11px; }
.chart-type-copy strong { font-size: 10px; }
.chart-type-copy span { margin-top: 1px; font-size: 7px; line-height: 1.25; }

/* Chart canvas */
.preview-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.preview-toolbar,
.preview-footer {
  padding: 7px 9px;
  gap: 7px;
}
.preview-title strong { font-size: 11px; }
.preview-title span { margin-top: 1px; font-size: 8px; }
.preview-actions { gap: 4px; align-items: center; }
.preview-actions button { min-height: 29px; padding: 0 8px; font-size: 8px; }
.zoom-controls { border-radius: 7px; }
.chart-stage { min-height: 0; height: auto; }
.chart-scroll { padding: 11px; }
.preview-footer { font-size: 8px; }

body.ds-view-hide-controls .data-workspace { grid-template-columns: minmax(0, 1fr); }
body.ds-view-hide-controls .control-panel { display: none; }
body.ds-view-hide-toolbar .preview-toolbar { display: none; }
body.ds-view-hide-footer .preview-footer { display: none; }
body.ds-view-hide-toolbar .preview-card { grid-template-rows: minmax(0, 1fr) auto; }
body.ds-view-hide-footer .preview-card { grid-template-rows: auto minmax(0, 1fr); }
body.ds-view-hide-toolbar.ds-view-hide-footer .preview-card { grid-template-rows: minmax(0, 1fr); }

.preview-card:fullscreen .preview-toolbar { display: flex !important; }
.preview-card:fullscreen .preview-footer { display: flex !important; }

/* Data table is a bottom app drawer */
.data-table-section {
  position: fixed;
  right: 8px;
  bottom: 8px;
  left: 8px;
  z-index: 2500;
  height: min(42vh, 430px);
  margin: 0;
  padding: 10px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(17, 18, 27, .99);
  box-shadow: 0 -16px 54px rgba(0, 0, 0, .56);
}
.data-table-section .table-wrap { height: calc(100% - 62px); overflow: auto; }
.data-table-section.hidden { display: none !important; }
.table-heading { margin-bottom: 6px; }
.table-heading h2 { font-size: 16px; }
#data-preview-table { font-size: 9px; }
#data-preview-table th,
#data-preview-table td { min-width: 95px; padding: 5px 7px; }

/* Shared preview banner remains visible below the app bar */
.ds-shared-banner {
  position: fixed;
  top: var(--ds-app-header-h);
  right: 8px;
  left: 8px;
  z-index: 2400;
}

@media (max-width: 1180px) {
  :root { --ds-left-width: 340px; }
  .ds-document-title { display: none; }
}

@media (max-width: 850px) {
  body.data-studio-page { overflow: auto; }
  .data-main {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .data-workspace {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .control-panel { height: min(52vh, 520px); }
  .preview-card { height: max(52vh, 430px); }
  .ds-menubar-hint { display: none; }
  .ds-app-header .ds-access-card { min-width: 0; max-width: 150px; }
}

@media (max-width: 560px) {
  :root { --ds-app-header-h: 62px; }
  .ds-titlebar { gap: 7px; padding-left: 8px; }
  .ds-app-brand img { height: 25px; }
  .ds-app-brand h1 { font-size: 14px; }
  .ds-app-header .ds-access-card { display: none; }
  .ds-window-close { width: 35px; height: 30px; }
  .ds-menubar { padding-inline: 6px; }
  .ds-menu-dropdown {
    position: fixed;
    top: var(--ds-app-header-h);
    right: 6px;
    left: 6px;
    width: auto;
    max-height: calc(100vh - var(--ds-app-header-h) - 8px);
  }
  .ds-file-tools.export-panel { grid-template-columns: 1fr; }
  .ds-file-tools .privacy-note { grid-column: auto; }
  .data-main { padding-inline: 5px; padding-bottom: 5px; }
  .data-workspace { gap: 5px; }
  .control-panel,
  .preview-card { border-radius: 8px; }
  .panel-tabs { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .panel-tab { min-height: 31px; font-size: 7px; }
  .preview-actions .zoom-controls { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-menu-dropdown { scroll-behavior: auto; }
}

/* Keep account state and window control on one title-bar line. */
.ds-app-header .hero-actions {
  flex-wrap: nowrap !important;
}
.ds-app-header .ds-access-card {
  flex: 0 1 230px;
}


/* V150 — compact title bar and correctly docked window controls */
.ds-titlebar {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-rows: 38px !important;
}
.ds-app-header .hero-actions {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
}
.ds-app-header .ds-access-card {
  order: 1 !important;
  flex: 0 1 210px !important;
  width: auto !important;
  min-width: 145px !important;
  max-width: 210px !important;
}
.ds-window-close {
  order: 2 !important;
  flex: 0 0 auto !important;
}
.ds-menubar {
  box-sizing: border-box;
}
@media (max-width: 760px) {
  .ds-app-header .ds-access-card { display: none !important; }
  .ds-document-title { display: none !important; }
}
@media (max-width: 560px) {
  .ds-titlebar { grid-template-rows: 34px !important; height: 34px; min-height: 34px; }
  .ds-menubar { height: 28px; min-height: 28px; }
}


/* V154 — account control is docked directly beside the Premium status chip. */
.ds-app-header .hero-actions > .agn-account-root {
  position: relative !important;
  z-index: 1 !important;
  order: 2 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.ds-app-header .hero-actions > .ds-access-card {
  order: 1 !important;
}

.ds-app-header .hero-actions > .ds-window-close {
  order: 3 !important;
}

.ds-app-header .agn-account-button,
.ds-app-header .agn-profile-button {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 2px;
  border-radius: 7px;
  box-shadow: none;
}

.ds-app-header .agn-account-button {
  width: auto;
  padding-inline: 9px;
  font-size: 10px;
}

.ds-app-header .agn-profile-avatar,
.ds-app-header .agn-profile-avatar-fallback {
  width: 22px;
  height: 22px;
}

.ds-app-header .agn-profile-hover-name {
  top: calc(100% + 5px);
  right: 0;
}

@media (max-width: 760px) {
  .ds-app-header .hero-actions { gap: 4px !important; }
  .ds-app-header .agn-account-button,
  .ds-app-header .agn-profile-button {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .ds-app-header .agn-account-button {
    width: auto;
    max-width: 76px;
    padding-inline: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}