/*
 * Apps gallery (/apps) and runner (/apps/:id). Layout only: every control, card, chip and header comes from
 * lum-ui.css (Luminous's own classes). The gallery follows Luminous's Integration Catalog (search + chip
 * filters + card grid) with Automation-card style status badges.
 */

.apps-root { min-height: 100%; }
.apps-gate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; min-height: 60vh; padding: 1rem; text-align: center; color: var(--col-cloud-600); }
.apps-gate__logo { height: 28px; }

/* ---------------------------------------------------------------- gallery */
.apps-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.apps-search { position: relative; flex: 1 1 20rem; max-width: 28rem; }
.apps-search .lum-icon { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--col-cloud-600); pointer-events: none; }
.apps-search .lum-input { padding-left: 2.5rem; }
.apps-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.apps-section + .apps-section { margin-top: 2rem; }
.apps-grid { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1rem; }

.apps-card { position: relative; display: flex; }
.apps-card > .lum-page__card { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; padding: 1rem 1.25rem; }
.apps-card > div.lum-page__card { cursor: default; }
.apps-card__top { display: flex; align-items: flex-start; gap: 0.75rem; padding-right: 2rem; }
.apps-card__icon { width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: 4px; background: var(--col-purple-100); color: var(--col-primary); display: inline-flex; align-items: center; justify-content: center; }
.apps-card__icon .lum-icon { width: 22px; height: 22px; }
.apps-card__heading { min-width: 0; }
.apps-card__heading .lum-page__card-title { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.apps-card__meta { font-size: var(--text-xs); color: var(--col-muted); margin-top: 0.125rem; }
.apps-card__desc { margin: 0; color: var(--col-cloud-600); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3em; }
.apps-card__desc.is-empty { font-style: italic; color: var(--col-muted); }
.apps-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: auto; }
.apps-card__foot .lum-chip .lum-icon { width: 12px; height: 12px; }
.apps-card__menu { position: absolute; top: 0.75rem; right: 0.75rem; }
.apps-card__menu > .lum-button { color: var(--col-cloud-600); }

.apps-empty { background: #fff; border-radius: var(--lum-radius); box-shadow: var(--lum-shadow); }
.apps-empty--inline { padding: 1.5rem; text-align: center; color: var(--col-cloud-600); }

.apps-banner { display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: 1.25rem; }
.apps-banner__row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.apps-banner__row .lum-input { flex: 1; min-width: 14rem; max-width: 28rem; }
.apps-banner code { font-size: var(--text-sm); background: rgba(255,255,255,.6); padding: 0 0.25rem; border-radius: 3px; }

/* ---------------------------------------------------------------- runner */
.apps-runner { display: flex; flex-direction: column; height: 100vh; }
.apps-runner .lum-page-header { flex-shrink: 0; }
.apps-runner__frame { flex: 1; position: relative; min-height: 0; }
.lk-app-frame { border: 0; width: 100%; height: 100%; display: block; background: var(--app-background); }
.apps-runner__error { margin: var(--sectioning-space); }

@media (max-width: 640px) {
  .apps-grid { grid-template-columns: 1fr; }
  .apps-search { max-width: none; }
}
.lk-app-stopped { margin: var(--sectioning-space); padding: 10px 15px; border-radius: 5px; border: 1px solid var(--col-red-300); background: var(--col-red-100); color: var(--col-red-800); }

/* ---------------------------------------------------------------- usage (/apps/usage) */
.usage-body { display: flex; flex-direction: column; gap: 1.5rem; }
.usage-kicker { font-size: var(--text-xs); color: var(--col-cloud-600); font-weight: 600; letter-spacing: 0.02em; }
.usage-muted { color: var(--col-cloud-600); }
.usage-budget { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem 1.5rem; }
.usage-budget p { margin: 0; }
.usage-budget__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.usage-budget__amount { font-size: 1.125rem; margin-top: 0.25rem; }
.usage-budget__amount strong { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.usage-budget__side { text-align: right; font-variant-numeric: tabular-nums; }
.usage-meter { height: 0.625rem; border-radius: 999px; background: var(--col-purple-100); overflow: hidden; }
.usage-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--col-primary); }
.usage-meter.is-high > span { background: var(--col-yellow-500); }
.usage-meter.is-over > span { background: var(--col-red-500); }

.usage-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; }
.usage-tile { background: #fff; border-radius: var(--lum-radius); box-shadow: var(--lum-shadow); padding: 0.875rem 1rem; }
.usage-tile__value { font-size: 1.375rem; font-weight: 600; margin-top: 0.25rem; font-variant-numeric: tabular-nums; }
.usage-tile.is-zero .usage-tile__value { color: var(--col-cloud-600); font-weight: 400; }

.usage-block .lum-section-heading { margin-bottom: 0.25rem; }
.usage-block > p { margin: 0 0 0.75rem; }
.usage-table-wrap { overflow-x: auto; background: #fff; border-radius: var(--lum-radius); box-shadow: var(--lum-shadow); }
.usage-table { width: 100%; min-width: 44rem; } /* scrolls inside its box on phones instead of squeezing */
.usage-table .is-nowrap { white-space: nowrap; }
.usage-table th.is-num, .usage-table td.is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage-table td { vertical-align: top; }
.usage-empty { text-align: center; color: var(--col-cloud-600); padding: 1.25rem; }
.usage-detail { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 28rem; color: var(--col-cloud-600); }
.usage-flag { margin-left: 0.5rem; }

.usage-days { display: flex; align-items: flex-end; gap: 0.25rem; height: 9rem; padding: 0.75rem 1rem 0; background: #fff; border-radius: var(--lum-radius) var(--lum-radius) 0 0; box-shadow: var(--lum-shadow); overflow-x: auto; }
.usage-day { flex: 1 0 1.25rem; max-width: 3rem; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.usage-day__bar { display: flex; flex-direction: column-reverse; border-radius: 3px 3px 0 0; overflow: hidden; min-height: 2px; }
.usage-day__bar > span { display: block; min-height: 1px; }
.usage-day__label { text-align: center; font-size: var(--text-xs); color: var(--col-cloud-600); padding: 0.25rem 0; }
.usage-legend { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0.5rem 1rem 0.75rem; background: #fff; border-radius: 0 0 var(--lum-radius) var(--lum-radius); box-shadow: var(--lum-shadow); font-size: var(--text-xs); color: var(--col-cloud-600); }
.usage-legend i { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 2px; margin-right: 0.375rem; vertical-align: -1px; }
.usage-seg--builder { background: var(--col-purple-600); }
.usage-seg--app_ai { background: var(--col-purple-300); }
.usage-seg--chat { background: var(--col-blue-600); }
.usage-seg--supplier_docs { background: var(--col-green-500); }

/* ---------------------------------------------------------------- AI credits (usage page) */
.usage-credits { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem 1.5rem; border-left: 3px solid var(--col-primary); }
.usage-credits__body { display: flex; flex-direction: column; gap: 0.75rem; }
.usage-credits__body p { margin: 0; }
.usage-credits__free { display: flex; flex-direction: column; gap: 0.5rem; }
.usage-meter--free > span { background: var(--col-purple-300); }
.usage-credits__balance { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.usage-credits__amount { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.usage-credits__row, .usage-credits__confirm { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.usage-credits__num { width: 6rem; }
.usage-credits__row .lum-select { width: auto; min-width: 6rem; }
.usage-credits__status:empty { display: none; }
.usage-credits__status.is-error { color: var(--col-red-600); }

/* ---- Page override host (public/page-host.js): a customized Luminous page's content area ---- */
.page-host { height: 100vh; }
.page-host__body { display: flex; flex-direction: column; height: 100%; }
/* One quiet row: the chip is the only sign the page is custom, and the way back to Original. */
.page-host__bar { display: flex; justify-content: flex-end; padding: 0.375rem 0.75rem 0; }
.page-host__chip { gap: 0.375rem; font-size: var(--text-xs); }
.page-host__spark { color: var(--col-purple-500, #6c4cf1); }
.page-host__menu { min-width: 17rem; }
.page-host__item { height: auto; min-height: 3rem; padding: 0.5rem 1rem; white-space: normal; }
.page-host__check { width: 1rem; flex: none; text-align: center; color: var(--col-purple-500, #6c4cf1); }
.page-host__label { display: flex; flex-direction: column; gap: 0.125rem; }
.page-host__sub { font-size: var(--text-xs); color: var(--col-cloud-600, #6b7280); }
.page-host__divider { height: 1px; margin: 0.25rem 0; background: var(--col-cloud-200, #e5e7eb); }

/* ---- "Share & defaults" panel (public/page-rules.js), shown in a Luminous dialog ---- */
.page-rules-body { background: #fff; }
.page-rules__panel { display: flex; flex-direction: column; height: 100vh; }
.page-rules__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--col-cloud-200, #e5e7eb); }
.page-rules__title { margin: 0; font-size: var(--text-lg, 1.125rem); font-weight: 600; }
.page-rules__body { flex: 1; overflow: auto; padding: 1rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.page-rules__version { width: 100%; }
.page-rules__help { margin: 0; color: var(--col-cloud-700, #374151); }
.page-rules__muted { color: var(--col-cloud-600, #6b7280); margin: 0; }
.page-rules__empty { color: var(--col-cloud-600, #6b7280); }
.page-rules__group { display: flex; flex-direction: column; gap: 0.25rem; }
.page-rules__h { margin: 0 0 0.25rem; font-size: var(--text-sm, 0.875rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--col-cloud-600, #6b7280); }
.page-rules__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.375rem 0; border-bottom: 1px solid var(--col-cloud-100, #f3f4f6); }
.page-rules__who { display: flex; flex-direction: column; }
.page-rules__who small { color: var(--col-cloud-600, #6b7280); font-size: var(--text-xs); }
.page-rules__ctl { display: flex; align-items: center; gap: 0.5rem; }
.page-rules__seg { display: inline-flex; border: 1px solid var(--col-cloud-300, #d1d5db); border-radius: 0.5rem; overflow: hidden; }
.page-rules__seg-btn { border: 0; background: #fff; padding: 0.25rem 0.75rem; font: inherit; font-size: var(--text-sm, 0.875rem); cursor: pointer; }
.page-rules__seg-btn + .page-rules__seg-btn { border-left: 1px solid var(--col-cloud-300, #d1d5db); }
.page-rules__seg-btn.is-on { background: var(--col-purple-100, #ede9fe); color: var(--col-purple-700, #5b3fd6); font-weight: 600; }
.page-rules__seg-btn--default.is-on { background: var(--col-purple-500, #6c4cf1); color: #fff; }
.page-rules__status { color: var(--col-cloud-600, #6b7280); min-width: 3.5rem; }
.page-rules__add { max-width: 22rem; }

/* ---------------------------------------------------------------- Settings → Connectors (public/connectors.js) */
.connectors__content { display: flex; flex-direction: column; gap: 1.25rem; max-width: 980px; }
.connectors__section { display: flex; flex-direction: column; gap: 0.75rem; }
.connectors__card { display: flex; flex-direction: column; gap: 0.75rem; }
.connectors__card-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.connectors__card-title { flex: 1 1 14rem; min-width: 0; }
.connectors__badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: var(--lum-radius-control); background: var(--col-purple-100); color: var(--col-purple-700); font-weight: 700; }
.connectors__actions { display: flex; align-items: center; gap: 0.5rem; }
.connectors__body { display: flex; flex-direction: column; gap: 0.75rem; border-top: 1px solid var(--lum-border-subtle); padding-top: 0.75rem; }
.connectors__admin { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; }
.connectors__group { display: flex; flex-direction: column; }
.connectors__group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; padding: 0.25rem 0; }
.connectors__group-head h4 { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--col-cloud-700); }
.connectors__set-all { display: flex; align-items: center; gap: 0.25rem; color: var(--col-muted); }
.connectors__tool { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0.625rem 0; border-top: 1px solid var(--lum-border-subtler); flex-wrap: wrap; }
.connectors__tool.is-removed { opacity: 0.6; }
.connectors__tool-main { flex: 1 1 18rem; min-width: 0; }
.connectors__tool-name { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-weight: 600; }
.connectors__tool-name code { font-family: var(--lum-font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--col-muted); }
.connectors__tool-desc { color: var(--col-cloud-600); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.connectors__chip--warn { background: var(--col-yellow-100); color: var(--col-yellow-800); }
.connectors__tier-ro { display: flex; align-items: center; gap: 0.5rem; }
.connectors__seg { display: inline-flex; border: 1px solid var(--col-cloud-300); border-radius: var(--lum-radius-control); overflow: hidden; flex-shrink: 0; }
.connectors__seg-btn { border: 0; background: #fff; padding: 0.25rem 0.625rem; font-size: var(--text-sm); cursor: pointer; white-space: nowrap; }
.connectors__seg-btn + .connectors__seg-btn { border-left: 1px solid var(--col-cloud-300); }
.connectors__seg-btn:disabled { cursor: progress; }
.connectors__seg-btn--allow.is-on { background: var(--col-green-100); color: var(--col-green-800); font-weight: 600; }
.connectors__seg-btn--ask.is-on { background: var(--col-purple-100); color: var(--col-purple-700); font-weight: 600; }
.connectors__seg-btn--block.is-on { background: var(--col-red-100); color: var(--col-red-600); font-weight: 600; }
.connectors__dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.75rem; }
.connectors__dir-item { display: flex; flex-direction: column; justify-content: space-between; gap: 0.75rem; }
.connectors__custom { display: flex; flex-direction: column; gap: 0.5rem; }
.connectors__row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.connectors__row .lum-input { flex: 1 1 12rem; min-width: 0; }
.connectors__url { flex-basis: 20rem !important; }
.connectors__key { display: flex; flex-direction: column; gap: 0.25rem; }
@media (max-width: 640px) {
  .connectors__seg { width: 100%; }
  .connectors__seg-btn { flex: 1; padding: 0.375rem 0.25rem; }
}

/* Connector sheet over a running app (public/apps-host.js showConnectorSheet): connect / allow, on the agent origin. */
.lk-connector-sheet { position: fixed; right: 16px; bottom: 16px; z-index: 50; width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 0.625rem; padding: 0.875rem 1rem; background: #fff; border: 1px solid var(--lum-border); border-radius: var(--lum-radius-control); box-shadow: var(--lum-shadow-overlay); }
.lk-connector-sheet__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.lk-connector-sheet__name { font-weight: 600; }
.lk-connector-sheet__tools { font-size: var(--text-sm); color: var(--col-cloud-600); overflow-wrap: anywhere; }
.lk-connector-sheet__note { font-size: var(--text-sm); color: var(--col-cloud-600); }
.lk-connector-sheet > .lum-button--link { align-self: flex-end; }
.ab-side-effect { color: var(--col-yellow-800); }
.connectors .lum-page-header__heading-group { flex-direction: column; align-items: flex-start; gap: 0.125rem; }
.connectors__email { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; border-radius: var(--lum-radius-control); background: var(--col-cloud-100); }
.connectors__email h4 { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.connectors__email .connectors__row { align-items: center; }
.connectors__cap { flex: 0 0 6rem !important; }