/* Kivanto visual system. Layout foundations live in kivanto.css.
   Local assets only; module colours complement the original Kivanto mark. */
:root {
  /* Farben von kivanto.ai (Landing): Paper, Ink, Kivanto-Teal. */
  --ground: #fafaf8;
  --surface: #f1f0eb;
  --surface-raised: #fff;
  --text: #101418;
  --text-quiet: #4a5560;
  --accent: #1e8a80;
  --accent-soft: #e3f0ee;
  --line: #e3e1da;
  --warning: #a14324;
  --ok: #15645d;
  --attention: #90620c;
  --teal: #1e8a80;
  --violet: #7252bf;
  --coral: #c85048;
  --radius: 1rem;
  --radius-sm: 0.625rem;
  --shadow-card: 0 4px 20px rgb(16 20 24 / 0.045), 0 1px 3px rgb(16 20 24 / 0.025);
  --topbar-height: 4.25rem;
  --header-height: 4.75rem;
  --rail-width: 14rem;
  --panel-width: 16rem;
  --duration: 160ms;
}

/* Shell and navigation */
.topbar { padding: 0 1.5rem; box-shadow: 0 1px 12px rgb(16 20 24 / 0.035); z-index: 12; }
.topbar__brand { font-size: 1.3rem; font-weight: 750; }
.topbar .brand { gap: 0.7rem; }
.topbar .brand-mark { width: 2rem; height: 2rem; }
.topbar__picker select { background: var(--surface); border-color: transparent; min-height: 2.5rem; }
.topbar__avatar { display: grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.85rem; font-weight: 700; }
.topbar__role { margin-top: 0.2rem; }
.rail { background: #101418; border-color: #232b33; padding: 1.25rem 0.75rem 0.85rem; color: #e5edfa; }
.rail__items { gap: 1.15rem; scrollbar-width: thin; scrollbar-color: #3a4550 transparent; padding-bottom: 1rem; }
.rail__group { min-width: 0; }
.rail__label { margin: 0 0 0.4rem; padding: 0 0.7rem; font-size: 0.625rem; font-weight: 650; letter-spacing: 0.1em; line-height: 1.5; text-transform: uppercase; color: #8a96a2; }
.rail__links { display: grid; gap: 0.15rem; }
.rail__group[data-nav-group='administration'] { border-top: 1px solid #26303a; padding-top: 1rem; }
.rail__item[data-module='agents'] .rail__glyph { color: #c4afff; }
.rail__item[data-module='desktop'] .rail__glyph { color: #84d8e8; }
.rail__item { color: #c9d0d6; padding: 0.45rem 0.7rem; border-radius: 0.75rem; gap: 0.75rem; font-size: 0.8125rem; min-height: 2.75rem; }
.rail__item:hover { background: #1b242c; color: #fff; }
.rail__item[aria-current='true'] { background: #1e8a80; color: #fff; box-shadow: 0 4px 14px rgb(0 0 0 / 0.14); }
.rail__glyph { width: 1.9rem; height: 1.9rem; border-radius: 0.55rem; background: rgb(255 255 255 / 0.055); color: #7fd3c8; }
.rail__item[data-module='files'] .rail__glyph { color: #f0c781; }
.rail__item[data-module='graph'] .rail__glyph { color: #bba6ff; }
.rail__item[data-module='crm'] .rail__glyph { color: #77d8c4; }
.rail__item[data-module='projects'] .rail__glyph { color: #99c5ff; }
.rail__item[data-module='roles'] .rail__glyph { color: #efa8b1; }
.rail__item[aria-current='true'] .rail__glyph { color: #fff; background: rgb(255 255 255 / 0.13); }
.rail__foot { border-color: #26303a; padding-top: 0.8rem; }
.rail__foot .button { color: #c9d0d6; }
.rail__foot .button:hover { background: #1b242c; color: #fff; }
.rail__version, .rail__foot .update-controls__status { color: #a8b3be; }
.rail :focus-visible { outline-color: #9fe0d7; }
.panel__head { padding: 1.35rem 1rem 1.1rem; }
.panel__title { font-size: 1.15rem; }
.panel__item { min-height: 2.5rem; }
.panel__item[aria-current='true'] { box-shadow: inset 3px 0 var(--accent); }
.main__header { background: var(--ground); border-bottom-color: transparent; padding: 0 2rem; }
.main { grid-template-columns: minmax(0, 1fr); }
.main__footer { min-width: 0; }
.main__left { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.main__module { display: grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 0.75rem; }
.main__title { font-size: 1.35rem; letter-spacing: -0.035em; line-height: 1.3; min-width: 0; }
.main__middle { padding: 0.5rem clamp(1rem, 2vw, 2rem) 2rem; scrollbar-gutter: stable; }
.main__footer { background: var(--ground); border-top-color: transparent; padding: 1rem 2rem 1.4rem; }

/* Shared controls and content surfaces */
.button { min-height: 2.5rem; font-weight: 600; border-radius: 0.625rem; transition: background var(--duration), border-color var(--duration), box-shadow var(--duration); }
.button:hover:not(:disabled) { box-shadow: 0 2px 7px rgb(16 20 24 / 0.07); }
.button--primary { background: #1e8a80; border-color: #1e8a80; color: #fff; box-shadow: 0 3px 8px rgb(30 138 128 / 0.2); }
.button--primary:hover:not(:disabled) { background: #15645d; border-color: #15645d; opacity: 1; }
.button--quiet:hover:not(:disabled) { box-shadow: none; background: var(--accent-soft); color: var(--accent); }
input:where(:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file'])), select, textarea, .field {
  max-width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 0.625rem;
  padding: 0.65rem 0.8rem; background: var(--surface-raised); color: var(--text); font: inherit; font-size: 0.875rem;
  transition: border-color var(--duration), box-shadow var(--duration);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type='checkbox'], input[type='radio'] { accent-color: #1e8a80; }
input::placeholder, textarea::placeholder { color: var(--text-quiet); opacity: 0.8; }
label { min-width: 0; }
.card, .crm-panel, .crm-form, .crm-detail, .kg-form, .kg-community { padding: 1.4rem; }
.notice { border-radius: 0.8rem; background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
.notice--error, .notice--warn { color: var(--warning); background: color-mix(in srgb, var(--warning) 9%, var(--surface-raised)); }
.matrix thead th, .crm-table thead th, .kg-table thead th { background: var(--surface); color: var(--text-quiet); padding-top: 0.85rem; padding-bottom: 0.85rem; }
.crm-table tbody tr:hover, .kg-table tbody tr:hover { background: var(--accent-soft); }
.crm-chip, .panel__badge, .project__access { border-radius: 999px; }

/* Project overview */
.projects { gap: 1.2rem; }
.workspace-intro { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.8rem 2rem; border-radius: 1.2rem; background: linear-gradient(110deg, #101418, #15645d); color: #fff; position: relative; overflow: hidden; }
.workspace-intro__eyebrow { color: #7fd3c8; font-size: 0.65rem; letter-spacing: 0.16em; font-weight: 700; }
.workspace-intro h2 { margin: 0.45rem 0 0.55rem; font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.25; letter-spacing: -0.035em; }
.workspace-intro p { color: #d3dcdf; margin: 0; font-size: 0.85rem; max-width: 34rem; }
.workspace-intro__art { display: flex; align-items: center; gap: 1.25rem; flex: none; padding: 0 0.5rem; }
.workspace-intro__node { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 0.8rem; border: 1px solid #2f7d75; background: #1a4d48; color: #a8e2da; }
.workspace-intro__node:last-child { color: #dbd0ff; transform: translateY(1rem); }
.workspace-intro__hub { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; border-radius: 1.1rem; background: #fff; box-shadow: 0 0 0 8px rgb(255 255 255 / 0.08), 0 6px 20px rgb(0 0 0 / 0.15); transform: rotate(-5deg); }
.workspace-intro__hub .brand-mark { width: 2.6rem; height: 2.6rem; background-image: url('/brand/kivanto-mark.png'); }
.projects__list { gap: 1rem; }
.project { padding: 1.3rem; gap: 1.1rem; }
.project[aria-current='true'] { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: inset 0 3px var(--accent), var(--shadow-card); }
.project__line { gap: 1rem; }
.project__symbol { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 0.85rem; flex: none; background: var(--accent-soft); color: var(--accent); }
.project__symbol .icon { width: 1.5rem; height: 1.5rem; }
.project__name { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.25rem; letter-spacing: -0.02em; }
.project__path { font-size: 0.7rem; line-height: 1.6; }
.project__access { background: var(--accent-soft); color: var(--accent); padding: 0.15rem 0.55rem; }
.project__stores { color: var(--teal); font-weight: 600; }
.project__actions { padding-top: 0.85rem; gap: 0.35rem; }
.project__actions .button { font-size: 0.8rem; }
.project__actions .button[aria-expanded='true'] { background: var(--accent-soft); color: var(--accent); }
.project__actions .button[data-open] { margin-left: auto; color: var(--accent); }

/* Project sources and vendor identities. Scope to .project so chat citations
   keep their compact layout despite the legacy shared .sources class. */
.project > .sources { padding: 1.25rem; margin: 0; border: 1px solid var(--line); background: var(--ground); border-radius: 0.9rem; gap: 1rem; }
.project > .sources h4 { margin: 0; font-size: 1rem; letter-spacing: -0.015em; }
.project > .sources h5 { font-size: 0.72rem; color: var(--text-quiet); letter-spacing: 0.055em; text-transform: uppercase; }
.sources__lead { font-size: 0.8rem; line-height: 1.7; max-width: 65rem; }
.sources__provider-grid { gap: 0.75rem; }
.sources__provider.button { --provider-color: #1e8a80; position: relative; padding: 1.15rem; gap: 0.4rem; min-height: 10.5rem; border-radius: 0.85rem; border-top: 3px solid var(--provider-color); background: var(--surface-raised); box-shadow: var(--shadow-card); }
.sources__provider[data-provider='hubspot'] { --provider-color: #f34d28; }
.sources__provider[data-provider='brevo'] { --provider-color: #0b996e; }
.sources__provider[data-provider='pipedrive'] { --provider-color: #087c53; }
.sources__provider[data-provider='monday'] { --provider-color: #7761e8; }
.sources__provider.button:hover, .sources__provider.button:focus-visible { border-color: var(--provider-color); background: color-mix(in srgb, var(--provider-color) 5%, var(--surface-raised)); box-shadow: 0 5px 18px color-mix(in srgb, var(--provider-color) 12%, transparent); }
.sources__provider-logo { height: 2.75rem; max-width: 100%; display: flex; align-items: center; margin-bottom: 0.5rem; padding: 0.45rem 0.6rem; border-radius: 0.55rem; background: #fff; }
.sources__provider-logo img { display: block; width: auto; height: auto; max-height: 1.6rem; max-width: min(7.5rem, 100%); object-fit: contain; }
.sources__provider[data-provider='brevo'] .sources__provider-logo img { width: 1.8rem; max-height: 1.8rem; }
.sources__provider strong { font-size: 0.9rem; color: var(--text); }
.sources__provider-summary { font-size: 0.75rem; font-weight: 400; line-height: 1.5; padding-right: 0.5rem; }
.sources__provider .sources__provider-arrow { position: absolute; right: 0.7rem; top: 0.7rem; color: var(--text-quiet); }
.project .sources__item { padding: 0.85rem 1rem; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 0.75rem; gap: 0.7rem; }
.project .sources__list { gap: 0.7rem; }
.sources__main { flex-wrap: wrap; }
.sources__name { overflow-wrap: anywhere; }
.sources__kind { background: var(--accent-soft); color: var(--accent); font-size: 0.64rem; text-transform: uppercase; border-radius: 0.35rem; padding: 0.15rem 0.35rem; }
.sources__scope { color: var(--teal); font-size: 0.68rem; font-weight: 650; }
.sources__form { padding: 1.25rem; background: var(--surface-raised); gap: 1rem; border-radius: 0.85rem; }
.sources__form--connection { border-left: 3px solid var(--accent); }
.sources__form label { display: grid; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; }
.sources__form label.sources__personal { display: flex; }
.sources__form label input, .sources__form label select { width: 100%; }
.sources__form label input[type='checkbox'] { width: auto; }
.sources__provider-details { background: var(--accent-soft); padding: 1rem; border-radius: 0.65rem; }
.sources__provider-details a { color: var(--accent); font-size: 0.8rem; }
.sources__warn { padding: 0.8rem 1rem; background: color-mix(in srgb, var(--attention) 8%, var(--surface-raised)); border: 1px solid color-mix(in srgb, var(--attention) 24%, var(--line)); border-radius: 0.65rem; color: var(--text-quiet); line-height: 1.65; }
.sources__account-actions .button { font-size: 0.75rem; min-height: 2.1rem; }
.sources__result { color: var(--teal); }

/* Chat, search, file browser, CRM and settings */
.empty { max-width: 35rem; margin: clamp(1.5rem, 7vh, 5rem) auto; text-align: center; padding: 1.5rem; }
.empty__visual { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin: 0 auto 1.5rem; border-radius: 1.4rem; background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 4%, transparent); }
.empty__visual .brand-mark { width: 2.6rem; height: 2.6rem; }
.empty__visual .icon { width: 2rem; height: 2rem; }
.empty__title { color: var(--text); font-family: var(--font-ui); font-weight: 650; font-size: 1.7rem; line-height: 1.25; letter-spacing: -0.04em; }
.empty p { line-height: 1.75; }
.turn__question { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent); padding: 0.9rem 1.15rem; }
.history, .turn { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.turn__answer { min-width: 0; overflow-wrap: anywhere; }
.step-chip { max-width: min(22rem, 100%); min-width: 0; }
.step-chip__input { min-width: 0; }
.turn__answer { padding: 1.2rem 1.4rem; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow-card); }
.composer { background: var(--surface-raised); padding: 0.65rem; border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 4px 22px rgb(16 20 24 / 0.06); }
textarea.composer__field { border-color: transparent; background: transparent; min-height: 2.6rem; }
.hit { padding: 1.1rem; margin-bottom: 0.65rem; }
.file-view__head, .files__head { background: var(--surface); }
.crm-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 1rem; }
.crm-tile { padding: 1.2rem; position: relative; overflow: hidden; border-top: 3px solid var(--accent); }
.crm-tile__icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 0.6rem; background: var(--accent-soft); color: var(--accent); margin-bottom: 0.85rem; }
.crm-tile__value { font-size: 1.8rem; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.crm-tile__label { margin-top: 0.4rem; line-height: 1.4; }
.crm-tile:nth-child(3n+2) { border-top-color: var(--teal); }
.crm-tile:nth-child(3n+2) .crm-tile__icon { color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, var(--surface-raised)); }
.crm-tile:nth-child(3n) { border-top-color: var(--violet); }
.crm-tile:nth-child(3n) .crm-tile__icon { color: var(--violet); background: color-mix(in srgb, var(--violet) 10%, var(--surface-raised)); }
.crm-tile[data-tone='good'] { border-top-color: var(--ok); }
.crm-tile[data-tone='good'] .crm-tile__value { color: var(--ok); }
.crm-tile[data-tone='bad'] { border-top-color: var(--warning); }
.crm-tile[data-tone='bad'] .crm-tile__icon { color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, var(--surface-raised)); }
.crm-columns-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.crm-bars__fill { background: var(--teal); }
.crm-bars__row:nth-child(3n) .crm-bars__fill { background: var(--violet); }
.crm-bars__row:nth-child(3n+2) .crm-bars__fill { background: var(--accent); }
.crm-graph-block { background: color-mix(in srgb, var(--teal) 7%, var(--surface-raised)); border-color: color-mix(in srgb, var(--teal) 20%, var(--line)); padding: 1.2rem; }
.settings__row { padding: 1.2rem 0; }
.settings__origin { background: var(--surface); border-radius: 999px; padding: 0.15rem 0.55rem; }

@media (max-width: 1100px) {
  .workspace-intro__art { gap: 0.7rem; }
  .workspace-intro__node { display: none; }
  .topbar__avatar { display: none; }
}
@media (max-width: 768px) {
  :root { --topbar-height: 3.75rem; --header-height: 4rem; }
  .topbar { padding: 0 0.8rem; }
  .topbar__tools { gap: 0.45rem; }
  .topbar .brand-mark { width: 1.65rem; height: 1.65rem; }
  .topbar__picker select { min-height: 2.2rem; padding: 0.4rem; }
  .topbar__me .button { padding: 0.45rem; font-size: 0.75rem; }
  .main__header { padding: 0 1rem; gap: 0.6rem; }
  .main__middle { padding: 0.35rem 1rem 1.5rem; scrollbar-gutter: auto; }
  .main__footer { padding: 0.7rem 1rem; }
  .composer { flex-wrap: wrap; }
  textarea.composer__field { flex: 1 1 100%; width: 100%; }
  .main__title { font-size: 1.1rem; }
  .main__module { width: 2rem; height: 2rem; }
  .workspace-intro { padding: 1.35rem; }
  .workspace-intro__art { display: none; }
  .project { padding: 1rem; }
  .project__main { flex-basis: calc(100% - 4rem); }
  .project__meta { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; gap: 0.4rem 0.7rem; }
  .project__symbol { width: 2.5rem; height: 2.5rem; }
  .project > .sources { padding: 0.85rem; }
  .project__actions .button { flex: 1 1 auto; padding: 0.5rem; }
  .sources__provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sources__provider.button { min-height: 10rem; padding: 0.85rem; }
  .sources__provider-logo { padding: 0.3rem; }
  .sources__form, .project .sources__item { padding: 0.85rem; }
  .sources__provider-details { padding: 0.8rem; }
  .turn__answer { padding: 1rem; }
  .source__main { flex-direction: column; align-items: stretch; }
  .source__row { flex-basis: auto; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: 0.35rem; }
  .source__open { align-self: flex-end; min-height: 2.25rem; }
  .empty { padding: 1rem; }
  .empty__title { font-size: 1.45rem; }
  .crm-bars__row { grid-template-columns: minmax(5rem, 1fr) 1fr 2rem; }
}
@media (max-width: 420px) {
  .main__middle { padding-left: 0.75rem; padding-right: 0.75rem; }
  .project { padding: 0.85rem; }
  .sources__provider-grid { grid-template-columns: 1fr; }
  .sources__provider.button { min-height: auto; display: grid; grid-template-columns: 1fr; padding: 1rem; }
  .sources__provider-logo { justify-self: start; margin-bottom: 0.25rem; }
  .sources__provider-logo img { max-width: 7.5rem; }
  .main__left { gap: 0.5rem; }
  .main__module { width: 1.8rem; height: 1.8rem; }
}
/* File explorer: frequent actions above the workspace, maintenance folded away. */
.files-browser { display: grid; gap: 1rem; min-width: 0; }
.files-browser__toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.files-browser__toolbar h2 { margin: 0 0 0.25rem; font-size: 1rem; letter-spacing: -0.025em; }
.files-browser__toolbar .files__actions { margin: 0; gap: 0.5rem; }
.files-browser__toolbar .files__actions .button { font-size: 0.8rem; }
.files__upload[aria-disabled='true'] { opacity: 0.5; cursor: default; }
.files-browser__maintenance { border-bottom: 1px solid var(--line); padding-bottom: 0.75rem; color: var(--text-quiet); }
.files-browser__maintenance > summary { cursor: pointer; font-size: 0.75rem; width: fit-content; }
.files-browser__maintenance .index-run { margin: 0.75rem 0 0; }
.files-browser .files { grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); gap: 1.25rem; }
.files-browser .files__tree { padding: 0.75rem; max-height: calc(100dvh - var(--topbar-height) - var(--header-height) - 12rem); position: sticky; top: 0; }
.files__breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; min-width: 0; padding: 0.2rem 0 0.7rem; }
.files__breadcrumbs span { display: inline-flex; align-items: center; gap: 0.15rem; min-width: 0; }
.files__breadcrumbs .icon { width: 0.8rem; color: var(--text-quiet); }
.files__breadcrumbs button { border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 0.75rem; padding: 0.25rem 0.2rem; cursor: pointer; overflow-wrap: anywhere; text-align: left; border-radius: 0.25rem; }
.files__breadcrumbs button:hover { background: var(--accent-soft); }
.files-browser__search { display: flex; align-items: center; gap: 0.35rem; position: relative; }
.files-browser__search > .icon { position: absolute; left: 0.65rem; color: var(--text-quiet); pointer-events: none; }
.files-browser__search input[type='search'] { width: 100%; padding-left: 2rem; font-size: 0.78rem; background: var(--ground); }
.files-browser__tree-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem; padding: 0.55rem 0; }
.files-browser__tree-tools button { font: inherit; font-size: 0.68rem; color: var(--text-quiet); background: transparent; border: 0; padding: 0.3rem; border-radius: 0.3rem; cursor: pointer; }
.files-browser__tree-tools button:hover { background: var(--accent-soft); color: var(--accent); }
.files-browser__tree-tools button:disabled { opacity: 0.5; cursor: default; }
.files-browser__matches, .files-browser__no-files { font-size: 0.78rem; color: var(--text-quiet); margin: 0.5rem 0; line-height: 1.6; }
.files-browser .tree__row { padding-top: 0.55rem; padding-bottom: 0.55rem; gap: 0.45rem; min-height: 2.6rem; font-size: 0.8rem; }
.files-browser .tree__row:disabled { cursor: default; }
.files-browser .tree__row[aria-current='true'] { box-shadow: inset 3px 0 var(--accent); font-weight: 600; }
.files-browser .tree__zip { opacity: 1; min-width: 1.8rem; min-height: 2rem; }
.files-browser .tree__name { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.files-browser .file__nodes { display: none; }
.files-browser .file__marks { flex-wrap: wrap; justify-content: flex-end; flex: 0 0 auto; max-width: 5rem; }
.file-type { display: inline-grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 0.4rem; color: var(--text-quiet); background: var(--surface); }
.file-type--folder { color: var(--attention); background: color-mix(in srgb, var(--attention) 10%, var(--surface-raised)); }
.file-type[data-type='document'] { color: var(--accent); background: var(--accent-soft); }
.file-type[data-type='code'] { color: var(--violet); background: color-mix(in srgb, var(--violet) 10%, var(--surface-raised)); }
.file-type[data-type='table'] { color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, var(--surface-raised)); }
.file-type[data-type='image'] { color: var(--coral); background: color-mix(in srgb, var(--coral) 10%, var(--surface-raised)); }
.file-type .icon { width: 1rem; height: 1rem; }
.files-browser .file-view { padding: 1.25rem; }
.files-browser .file-view__head { background: transparent; padding: 0 0 0.85rem; gap: 0.6rem; }
.file-view__name { flex: 1 1 auto; min-width: 0; font-size: 1rem; margin: 0; overflow-wrap: anywhere; line-height: 1.4; letter-spacing: -0.02em; }
.file-view__actions { display: flex; flex-wrap: wrap; flex: 1 1 100%; gap: 0.25rem; }
.file-view__actions .button { font-size: 0.75rem; }
.file-view__actions [data-action='delete-file'] { margin-left: auto; color: var(--warning); }
.file-view__tabs { display: flex; gap: 0.2rem; width: fit-content; padding: 0.25rem; margin-bottom: 1rem; border-radius: 0.65rem; background: var(--surface); }
.file-view__tabs button { display: flex; align-items: center; gap: 0.35rem; font: inherit; font-size: 0.75rem; padding: 0.4rem 0.65rem; border: 0; border-radius: 0.45rem; color: var(--text-quiet); background: transparent; cursor: pointer; }
.file-view__tabs [aria-pressed='true'] { background: var(--surface-raised); box-shadow: var(--shadow-card); color: var(--accent); font-weight: 600; }
.editor__modes { margin-bottom: 0; }
.editor__modes button[aria-pressed='true'] { color: var(--accent); }
.file-view__document { font-family: var(--font-ui); font-size: 0.9rem; line-height: 1.8; padding: 0.25rem 0.5rem; overflow-wrap: anywhere; overflow-x: auto; }
.file-view__document :is(h1,h2,h3) { letter-spacing: -0.025em; line-height: 1.4; }
.file-view__document h1 { font-size: 1.6rem; }
.file-view__document h2 { font-size: 1.2rem; }
.file-view__document pre { max-width: 100%; overflow: auto; }
.files-browser textarea.editor__field { font-family: var(--font-code); min-height: 18rem; width: 100%; }
.files-browser__back { display: none; }
.files-browser .files__content > .empty { margin: 2rem auto; }
@media (max-width: 1000px) and (min-width: 769px) {
  .files-browser .files { grid-template-columns: minmax(13rem, 0.8fr) minmax(0, 1fr); gap: 0.75rem; }
}
@media (max-width: 768px) {
  .files-browser .files { grid-template-columns: minmax(0, 1fr); }
  .files-browser .files__tree { position: static; max-height: none; }
  .files-browser .files[data-mobile-pane='preview'] .files__tree { display: none; }
  .files-browser .files[data-mobile-pane='list'] .files__content { display: none; }
  .files-browser:has(.files[data-mobile-pane='preview']) .files-browser__toolbar .files__actions { display: none; }
  .files-browser__back { display: inline-flex; margin-bottom: 0.7rem; }
  .files-browser .file-view { padding: 0.85rem; }
  .files-browser .file-view__body { max-height: 65dvh; padding: 0.55rem; }
  .files-browser .files__confirm { flex-wrap: wrap; }
  .files-browser__toolbar .files__actions { width: 100%; }
  .files-browser__toolbar .files__actions .button { flex: 1 1 auto; }
  .files-browser .files__new-dir { flex-wrap: wrap; }
  .files-browser__tree-tools button { min-height: 2.5rem; }
}

/* Start dashboard */
.home { display: grid; gap: 1.35rem; min-width: 0; }
.home-welcome { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.8rem 2rem; color: #fff; background: linear-gradient(110deg, #101418, #15645d); border-radius: 1.2rem; }
.home-welcome__eyebrow, .home-connect__eyebrow { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; color: #7fd3c8; }
.home-welcome h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); line-height: 1.25; letter-spacing: -0.04em; margin: 0.45rem 0 0.55rem; }
.home-welcome p { color: #d3dcdf; font-size: 0.87rem; margin: 0; }
.home-welcome__project { display: inline-flex; align-items: center; gap: 0.4rem; background: rgb(255 255 255 / 0.1); color: #e3f0ee; border: 1px solid rgb(255 255 255 / 0.13); border-radius: 999px; padding: 0.3rem 0.65rem; margin-top: 1rem; font-size: 0.72rem; overflow-wrap: anywhere; }
.home-welcome__mark { display: grid; place-items: center; width: 4.7rem; height: 4.7rem; flex: none; margin: 0 0.5rem; border-radius: 1.2rem; background: #fff; box-shadow: 0 0 0 10px rgb(255 255 255 / 0.06), 0 0 0 22px rgb(255 255 255 / 0.03); }
.home-welcome__mark .brand-mark { width: 3rem; height: 3rem; background-image: url('/brand/kivanto-mark.png'); }
.home-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.home-metric { position: relative; padding: 1.3rem; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow-card); min-width: 0; }
.home-metric__icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 0.65rem; margin-bottom: 0.85rem; background: var(--accent-soft); color: var(--accent); }
.home-metric[data-tone='teal'] .home-metric__icon { background: color-mix(in srgb, var(--teal) 10%, var(--surface-raised)); color: var(--teal); }
.home-metric[data-tone='violet'] .home-metric__icon { background: color-mix(in srgb, var(--violet) 10%, var(--surface-raised)); color: var(--violet); }
.home-metric[data-tone='warning'] .home-metric__icon { background: color-mix(in srgb, var(--warning) 10%, var(--surface-raised)); color: var(--warning); }
.home-metric__value { font-size: clamp(1.2rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.3; overflow-wrap: anywhere; }
.home-metric__label { font-size: 0.8rem; font-weight: 600; margin-top: 0.35rem; }
.home-metric__note { color: var(--text-quiet); font-size: 0.7rem; margin-top: 0.25rem; overflow-wrap: anywhere; }
.home-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0.75rem; }
.home-shortcut { display: flex; align-items: center; gap: 0.65rem; min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 0.85rem; background: var(--surface-raised); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background var(--duration), border-color var(--duration); }
.home-shortcut:hover { border-color: var(--accent); background: var(--accent-soft); }
.home-shortcut__icon { display: grid; place-items: center; flex: none; color: var(--accent); }
.home-shortcut[data-view='files'] .home-shortcut__icon { color: var(--attention); }
.home-shortcut[data-view='crm'] .home-shortcut__icon { color: var(--teal); }
.home-shortcut__copy { display: grid; gap: 0.25rem; min-width: 0; flex: 1; }
.home-shortcut__copy strong { font-size: 0.8rem; }
.home-shortcut__copy > span { font-size: 0.68rem; line-height: 1.5; color: var(--text-quiet); }
.home-shortcut > .icon { width: 0.85rem; color: var(--text-quiet); }
.home-columns { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; }
.home-panel { min-width: 0; padding: 1.25rem; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow-card); }
.home-panel__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.home-panel__head h3 { font-size: 0.95rem; margin: 0; letter-spacing: -0.02em; }
.home-panel__head .button { font-size: 0.7rem; padding: 0.4rem; }
.home-projects { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.home-project { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.85rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--surface-raised); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.home-project:hover { border-color: var(--accent); }
.home-project[aria-current='true'] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
.home-project__icon { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 0.65rem; color: var(--accent); background: var(--surface-raised); flex: none; }
.home-project__copy { display: grid; gap: 0.2rem; flex: 1; min-width: 0; }
.home-project__copy strong { font-size: 0.85rem; overflow-wrap: anywhere; }
.home-project__copy > span { font-size: 0.7rem; color: var(--text-quiet); }
.home-project__active { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.65rem; color: var(--accent); }
.home-panel__link { margin-top: 0.7rem; font-size: 0.75rem; color: var(--accent); }
.home-knowledge { display: grid; }
.home-knowledge__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border-bottom: 1px solid var(--line); padding: 0.6rem 0; font-size: 0.82rem; }
.home-knowledge__row strong { font-variant-numeric: tabular-nums; color: var(--teal); }
.home-status { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.9rem; border-radius: 0.7rem; background: color-mix(in srgb, var(--teal) 7%, var(--surface-raised)); margin-top: 1rem; color: var(--teal); }
.home-status strong { font-size: 0.75rem; }
.home-status p { color: var(--text-quiet); font-size: 0.72rem; line-height: 1.6; margin: 0.3rem 0 0; }
.home-status[data-state='failed'] { color: var(--warning); background: color-mix(in srgb, var(--warning) 9%, var(--surface-raised)); }
.home-status[data-state='running'] { color: var(--violet); background: color-mix(in srgb, var(--violet) 9%, var(--surface-raised)); }
.home-status[data-state='pending'] { color: var(--text-quiet); background: var(--surface); }
.home-empty { padding: 0.75rem 0; color: var(--text-quiet); font-size: 0.85rem; line-height: 1.7; }
.home-empty h4 { color: var(--text); margin: 0.75rem 0 0.4rem; font-size: 1.1rem; }
.home-empty p { margin: 0 0 1rem; }
.home-empty__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; color: var(--accent); background: var(--accent-soft); }
.home-connect { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem; border: 1px solid color-mix(in srgb, var(--teal) 20%, var(--line)); border-radius: 1rem; background: color-mix(in srgb, var(--teal) 5%, var(--surface-raised)); }
.home-connect__eyebrow { color: var(--teal); }
.home-connect h3 { font-size: 1.15rem; margin: 0.4rem 0; letter-spacing: -0.025em; }
.home-connect p { color: var(--text-quiet); font-size: 0.8rem; margin: 0 0 1rem; max-width: 28rem; }
.home-connect .button { font-size: 0.8rem; }
.home-connect__logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; flex: 0 0 17rem; }
.home-connect__logo { display: flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 0; height: 3.7rem; padding: 0.75rem; background: #fff; border: 1px solid #e3e1da; border-radius: 0.75rem; }
.home-connect__logo img { display: block; max-width: 100%; width: auto; max-height: 1.5rem; object-fit: contain; }
.home-connect__logo span { font-size: 0.9rem; font-weight: 700; color: #101418; }
@media (max-width: 768px) {
  .home { gap: 1rem; }
  .home-welcome { padding: 1.3rem; }
  .home-welcome__mark { display: none; }
  .home-metrics { gap: 0.6rem; }
  .home-metric { padding: 1rem; }
  .home-columns { grid-template-columns: minmax(0, 1fr); }
  .home-connect { flex-direction: column; align-items: stretch; padding: 1.2rem; }
  .home-connect__logos { flex-basis: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-connect__logo { padding: 0.5rem; }
}
@media (max-width: 480px) {
  .home-metrics { grid-template-columns: minmax(0, 1fr); }
  .home-metric { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 0.7rem; }
  .home-metric__icon { grid-row: 1 / 4; margin: 0; }
  .home-metric__value, .home-metric__label, .home-metric__note { grid-column: 2; }
  .home-project { flex-wrap: wrap; }
  .home-connect__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0ms; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Project data sources: service accounts contain their imports. */
.source-workspace__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.source-workspace__head > div { flex: 1 1 18rem; min-width: 0; }
.source-workspace__head .sources__lead { margin-top: 0.35rem; max-width: 43rem; }
.source-services { display: grid; gap: 1rem; min-width: 0; }
.source-service { border: 1px solid var(--line); background: var(--surface-raised); border-radius: 0.85rem; overflow: hidden; min-width: 0; }
.source-service__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 1rem; }
.project .source-service h5, .project .source-setup h5, .project .source-workspace__empty h5 { margin: 0; font-size: 0.95rem; letter-spacing: -0.01em; text-transform: none; color: var(--text); overflow-wrap: anywhere; }
.source-service__title { flex: 1 1 10rem; min-width: 0; }
.source-service__title > span { display: block; margin-top: 0.2rem; color: var(--text-quiet); font-size: 0.75rem; }
.source-service__logo { flex: 0 0 3rem; height: 2.7rem; display: flex; align-items: center; justify-content: center; padding: 0.35rem; border-radius: 0.65rem; color: var(--accent); background: var(--accent-soft); }
.source-service__logo:has(img) { background: white; flex-basis: 5rem; border: 1px solid #e3e1da; }
.source-service__logo img { max-width: 100%; max-height: 1.8rem; object-fit: contain; }
.source-badge { display: inline-flex; align-items: center; font-size: 0.7rem; padding: 0.2rem 0.5rem; border-radius: 0.35rem; background: color-mix(in srgb, var(--teal) 10%, var(--surface-raised)); color: var(--teal); overflow-wrap: anywhere; }
.source-badge[data-tone='quiet'] { color: var(--text-quiet); background: var(--ground); }
.source-badge[data-tone='warning'] { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface-raised)); }
.source-imports { margin: 0; padding: 0 1rem; list-style: none; }
.source-import { padding: 1rem 0; border-top: 1px solid var(--line); }
.source-import__head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.source-import__icon { display: grid; place-items: center; color: var(--teal); width: 2rem; flex-shrink: 0; }
.source-import__copy { flex: 1 1 12rem; min-width: 0; }
.source-import__copy strong { display: block; font-size: 0.85rem; overflow-wrap: anywhere; }
.source-import__copy > span { color: var(--text-quiet); font-size: 0.73rem; }
.source-import__head .button, .source-service__head .button { font-size: 0.75rem; }
.source-import__details { margin: 0.65rem 0 0 2.7rem; }
.source-import__details summary, .source-service__settings summary { cursor: pointer; color: var(--text-quiet); font-size: 0.75rem; width: fit-content; }
.source-import__details summary:hover, .source-service__settings summary:hover { color: var(--accent); }
.source-service__settings { padding: 0.85rem 1rem; background: color-mix(in srgb, var(--ground) 60%, var(--surface-raised)); border-top: 1px solid var(--line); }
.source-service__settings summary svg { display: inline-block; vertical-align: middle; width: 1rem; height: 1rem; margin: 0 0.3rem; }
.source-facts { margin: 1rem 0; display: grid; gap: 0.6rem; font-size: 0.75rem; }
.source-facts > div { display: grid; grid-template-columns: minmax(7rem, 0.4fr) minmax(0, 1fr); gap: 1rem; }
.source-facts dt { color: var(--text-quiet); }
.source-facts dd { margin: 0; overflow-wrap: anywhere; }
.source-facts code { white-space: normal; font-size: 0.72rem; }
.source-import__remove { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.source-import__remove p { flex-basis: 100%; color: var(--text-quiet); font-size: 0.78rem; }
.source-service__empty { margin: 0; padding: 0 1rem 1rem; color: var(--text-quiet); font-size: 0.8rem; }
.source-service__next { padding: 1rem; margin: 0 1rem 1rem; background: var(--accent-soft); border-radius: 0.65rem; font-size: 0.8rem; }
.source-service__next p { color: var(--text-quiet); margin: 0.35rem 0 0.7rem; }
.source-setup { display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 0.85rem; background: var(--surface-raised); min-width: 0; }
.source-setup .sources__form { padding: 0; border: 0; }
.source-steps { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 0 0 0.25rem; padding: 0 0 1rem; list-style: none; border-bottom: 1px solid var(--line); }
.source-steps li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--text-quiet); }
.source-steps li > span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; background: var(--ground); border-radius: 50%; }
.source-steps li[aria-current] { color: var(--accent); font-weight: 650; }
.source-steps li[aria-current] > span { background: var(--accent); color: #fff; }
.source-steps li[data-complete='true'] > span { color: var(--teal); }
.source-steps svg { width: 0.9rem; height: 0.9rem; }
.source-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.source-option { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--surface-raised); color: var(--text); text-align: left; cursor: pointer; }
.source-option:hover { border-color: var(--accent); background: var(--accent-soft); }
.source-option > span { display: grid; gap: 0.3rem; flex: 1; min-width: 0; }
.source-option strong { font-size: 0.85rem; }
.source-option span span { font-size: 0.75rem; color: var(--text-quiet); }
.source-option > svg { flex-shrink: 0; color: var(--accent); }
.source-selected { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: var(--accent-soft); border-radius: 0.65rem; }
.source-workspace__empty { padding: 2rem 1rem; display: grid; justify-items: center; gap: 0.75rem; text-align: center; }
.source-workspace__empty > span { color: var(--accent); }
.source-workspace__empty p { margin: 0; color: var(--text-quiet); font-size: 0.8rem; max-width: 30rem; }
.sources-workspace .sources__result { padding: 0.85rem; border: 1px solid var(--line); border-radius: 0.65rem; background: var(--surface-raised); }
@media (max-width: 600px) {
  .source-options { grid-template-columns: minmax(0, 1fr); }
  .source-steps { gap: 0.6rem; }
  .source-steps li { flex: 1 1 100%; }
  .source-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .source-import__details { margin-left: 0; }
  .source-import__copy { flex-basis: calc(100% - 3rem); }
  .source-service__head, .source-service__settings, .source-setup { padding: 0.85rem; }
  .source-service__head .button { flex-basis: 100%; justify-content: center; }
  .source-import__head .button { margin-left: auto; }
  .source-service__title { flex-basis: calc(100% - 6.5rem); }
  .source-service__logo:has(img) { flex-basis: 4rem; }
}
.source-tool-fields { display: grid; gap: 0.85rem; min-width: 0; }
.source-tool-fields input { max-width: 100%; box-sizing: border-box; }
.sources-workspace details summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 0.2rem; }

/* Personal agent connections */
.agents-page { display: grid; gap: 1.25rem; min-width: 0; }
.agents-page .home-panel > h3 { margin: 0 0 0.75rem; font-size: 1.05rem; }
.agents-page .sources__form { padding: 1rem 0; }
.agents-instructions { padding-left: 1.3rem; color: var(--text-quiet); font-size: 0.85rem; }
.agents-instructions li { margin-bottom: 0.65rem; padding-left: 0.2rem; }
.agents-endpoint, .agents-secret label { display: grid; gap: 0.4rem; font-size: 0.8rem; margin: 1rem 0; }
.agents-page input, .agents-page select { width: 100%; min-width: 0; box-sizing: border-box; }
.agents-secret { padding: 1rem; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 0.75rem; font-size: 0.8rem; }
.agents-config { margin: 1rem 0; font-size: 0.8rem; }
.agents-config summary { cursor: pointer; color: var(--accent); font-weight: 650; }
.agents-config pre { padding: 0.8rem; border-radius: 0.6rem; background: var(--ground); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.72rem; }
.agents-keys { padding: 0; margin: 0; list-style: none; display: grid; gap: 0.5rem; }
.agents-keys li { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem; border: 1px solid var(--line); border-radius: 0.7rem; flex-wrap: wrap; }
.agents-key__copy { flex: 1 1 12rem; min-width: 0; display: grid; gap: 0.15rem; }
.agents-key__copy strong { font-size: 0.85rem; overflow-wrap: anywhere; }
.agents-key__copy span { color: var(--text-quiet); font-size: 0.75rem; }
.agents-page .sources__form { border: 0; }

/* Mobile navigation uses the drawer's full width; module panels follow below. */
@media (max-width: 68rem) {
  .drawer { width: min(22rem, 92vw); flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: #101418; }
  .drawer > .rail { width: 100%; flex: 0 0 auto; min-height: 100%; overflow: visible; }
  .drawer .rail__items { overflow: visible; }
  .drawer > .panel { width: 100%; flex: 0 0 auto; min-height: 18rem; max-height: 65dvh; }
  .rail__item { min-height: 2.875rem; }
}

/* Graph export workspace */
.gexport { container: graph-export / inline-size; max-width: 1500px; margin: 0 auto; display: grid; gap: 1.1rem; min-width: 0; }
.gexport__hero { display: flex; align-items: center; gap: 1.1rem; padding: 1.5rem; border-radius: 18px; background: linear-gradient(115deg, color-mix(in srgb, var(--accent, #426a80) 15%, transparent), color-mix(in srgb, #8b5cf6 10%, transparent)); }
.gexport__hero h2 { margin: .2rem 0 .4rem; font-size: clamp(1.35rem, 2.5vw, 1.9rem); }
.gexport__hero > div { min-width: 0; }
.gexport__hero p { margin: 0; max-width: 65ch; }
.gexport__hero-icon { flex: 0 0 auto; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 15px; color: #fff; background: linear-gradient(135deg, #1e8a80, #7958ae); }
.gexport__eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.gexport .card { min-width: 0; display: grid; align-content: start; gap: 1rem; padding: 1.2rem; }
.gexport h3, .gexport h4 { margin: 0; }
.gexport .form__hint { margin: 0; }
.gexport__section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.gexport__formats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.gexport__format { cursor: pointer; text-align: left; color: inherit; background: transparent; border: 1px solid var(--line, #ccd1d6); border-radius: 12px; padding: 1rem; display: grid; gap: .4rem; min-width: 0; }
.gexport__format strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.gexport__format span { font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere; }
.gexport__format:nth-child(1) { border-top: 4px solid #7970c7; }
.gexport__format:nth-child(2) { border-top: 4px solid #ca944c; }
.gexport__format:nth-child(3) { border-top: 4px solid #408d70; }
.gexport__format:nth-child(4) { border-top: 4px solid #4b8daa; }
.gexport__format.is-selected { background: color-mix(in srgb, #1e8a80 12%, transparent); box-shadow: 0 0 0 2px #1e8a80; }
.gexport__layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: 1.1rem; }
.gexport__settings { display: grid; gap: 1.1rem; min-width: 0; }
.gexport__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); align-items: end; gap: .85rem; }
.gexport__field { display: grid; min-width: 0; gap: .4rem; font-size: .85rem; }
.gexport__field .field { width: 100%; min-width: 0; box-sizing: border-box; }
.gexport__check { display: flex; gap: .6rem; align-items: start; font-size: .85rem; }
.gexport input[type=checkbox] { accent-color: #1e8a80; width: 1rem; height: 1rem; flex-shrink: 0; }
.gexport__choices { border: 0; padding: 0; margin: 0; min-width: 0; }
.gexport__choices legend { font-size: .85rem; font-weight: 600; margin-bottom: .5rem; }
.gexport__chips { display: flex; flex-wrap: wrap; gap: .4rem; max-height: 12rem; overflow: auto; margin-top: .5rem; }
.gexport__chip { display: flex; align-items: center; gap: .4rem; padding: .35rem .55rem; border: 1px solid var(--line, #ccd1d6); border-radius: 8px; font-size: .78rem; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.gexport__chip.is-selected { background: color-mix(in srgb, #1e8a80 15%, transparent); border-color: #1e8a80; }
.gexport__advanced summary { cursor: pointer; font-weight: 600; padding: .4rem 0; }
.gexport__advanced[open] { display: grid; gap: 1rem; }
.gexport__order { padding-left: 1.5rem; font-size: .8rem; }
.gexport__order li { padding: .15rem; }
.gexport__order li span { display: inline-block; min-width: 8rem; }
.gexport__order .button { padding: .15rem .45rem; min-height: 28px; }
.gexport__counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.gexport__counts > div { display: grid; gap: .3rem; padding: 1rem; border-radius: 12px; background: color-mix(in srgb, #1e8a80 9%, transparent); }
.gexport__counts strong { font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.gexport__counts span { font-size: .8rem; }
.gexport__download { width: 100%; display: flex; justify-content: center; align-items: center; gap: .5rem; }
.gexport__samples { display: grid; gap: 1rem; min-width: 0; }
.gexport__samples > div { min-width: 0; }
.gexport__table-scroll { overflow: auto; max-height: 19rem; max-width: 100%; margin-top: .6rem; border: 1px solid var(--line, #ccd1d6); border-radius: 8px; }
.gexport__table-scroll table { width: max-content; min-width: 100%; font-size: .75rem; }
.gexport__table-scroll td, .gexport__table-scroll th { padding: .55rem .7rem; max-width: 18rem; overflow-wrap: anywhere; }
.gexport__table-scroll th { white-space: nowrap; }
/* Export breakpoints measure the workspace, excluding both navigation rails.
   Browser zoom and embedded panes reduce this width independently of viewport. */
@container graph-export (max-width: 50rem) {
  .gexport__layout { grid-template-columns: minmax(0, 1fr); }
  .gexport__preview { grid-row: 1; }
}
@container graph-export (max-width: 42rem) {
  .gexport__formats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container graph-export (max-width: 30rem) {
  .gexport__hero { padding: 1rem; align-items: flex-start; }
  .gexport__hero-icon { display: none; }
  .gexport__hero h2 { font-size: 1.35rem; overflow-wrap: anywhere; }
  .gexport__fields { grid-template-columns: minmax(0, 1fr); }
  .gexport .card { padding: .9rem; }
  .gexport__section-head > .button { white-space: normal; text-align: left; }
}
@container graph-export (max-width: 20rem) {
  .gexport__formats { grid-template-columns: minmax(0, 1fr); }
}

/* Query export uses the editor's content width, including narrow workspaces. */
.sparql-export { display: grid; gap: .85rem; min-width: 0; }
.sparql-export h3, .sparql-export p { margin: 0; }
.sparql-export__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); align-items: end; gap: .85rem; }
.sparql-export > .button { justify-self: start; white-space: normal; }
.gexport .kg-sparql__field { width: 100%; min-width: 0; box-sizing: border-box; font-family: var(--font-mono, monospace); }
.kg-query-workspace { container: sparql-workspace / inline-size; min-width: 0; }
@container sparql-workspace (max-width: 48rem) {
  .kg-sparql { grid-template-columns: minmax(0, 1fr); }
  .kg-sparql__result { order: 1; }
  .kg-sparql__examples { order: 2; }
}

/* Personal scheduled prompts */
.routines { width: 100%; min-width: 0; }
.routines-dialog { box-sizing: border-box; width: min(52rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-raised); color: var(--text); }
.routines-dialog::backdrop { background: #10141880; }
.routines-dialog .routines__editor { border: 0; box-shadow: none; margin: 0; padding: 0; }
.chat__actions, .turn__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.turn__actions { justify-content: flex-end; margin: .35rem 0 .75rem; }
.routines__created { color: var(--text-quiet); font-size: .85rem; }
.routines__hint { color: var(--text-quiet); font-size: .875rem; line-height: 1.55; }
.routines__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.routines__editor, .routines__card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-raised); padding: 1.4rem; margin: 1.25rem 0; box-shadow: var(--shadow-card); }
.routines__editor { border-color: var(--accent); }
.routines__editor h2, .routines__card h2 { font-size: 1.15rem; margin: 0 0 1rem; }
.routines__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: .4rem 1rem; }
.routines .form__row { display: flex; flex-direction: column; gap: .4rem; margin: .85rem 0; }
.routines .field { width: 100%; min-width: 0; }
.routines textarea { resize: vertical; }
.routines__toggle { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; }
.routines__heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .8rem; }
.routines__badge { color: var(--accent); background: var(--accent-soft); border-radius: 2rem; padding: .3rem .7rem; font-size: .8rem; }
.routines__prompt { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 10rem; overflow: auto; line-height: 1.6; }
.routines__history, .routines__confirmation { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.routines__run { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.routines__run p { margin: .3rem 0; font-size: .85rem; color: var(--text-quiet); }
.routines__empty { padding: 2rem; background: var(--surface); border-radius: var(--radius); text-align: center; }
.routines__example { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .8rem; }

/* Apps: Fachmodule als Kacheln, darunter die eigenen Prompt-Apps */
.apps__hub { display: grid; gap: 2rem; }
.apps__section-title { margin: 0 0 0.85rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-quiet); }
.apps__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.85rem; }
.apps__tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.85rem; row-gap: 0.25rem; align-items: center; padding: 1rem 1.1rem; text-align: left; font: inherit; color: var(--text); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); cursor: pointer; transition: border-color var(--duration), transform var(--duration); }
.apps__tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.apps__tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.apps__tile-glyph { grid-row: 1 / 3; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 0.7rem; background: var(--accent-soft); color: var(--accent); }
.apps__tile-name { font-weight: 650; font-size: 0.95rem; }
.apps__tile-about { font-size: 0.8rem; color: var(--text-quiet); line-height: 1.4; }

/* Connectors and local extension setup. */
.source-extension, .source-local-setup { display: grid; gap: 1rem; min-width: 0; }
.source-extension__drop { display: grid; justify-items: center; gap: 0.65rem; padding: 1.5rem; text-align: center; border: 2px dashed var(--line); border-radius: 0.85rem; background: var(--ground); cursor: pointer; }
.source-extension__drop:hover, .source-extension__drop:focus-within { border-color: var(--accent); background: var(--accent-soft); }
.source-extension__drop > svg { color: var(--accent); }
.source-extension__drop input { max-width: 100%; }
.source-advanced { margin: 0.5rem 0; padding: 0.85rem; border: 1px solid var(--line); border-radius: 0.65rem; }
.source-advanced > summary { cursor: pointer; color: var(--text-quiet); font-size: 0.8rem; }
.source-advanced[open] > summary { margin-bottom: 1rem; }
.source-advanced > .button { margin-bottom: 1rem; }
.source-env-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: 0.5rem; align-items: center; }
.source-env-row input { width: 100%; min-width: 0; }
.source-group-title { margin: 0.5rem 0 0; color: var(--text-quiet); }
.source-local-setup > .button { justify-self: start; }
.source-extension label, .source-local-setup label { display: grid; gap: 0.45rem; }
.source-extension input[type='checkbox'] { justify-self: start; width: auto; }
@media (max-width: 480px) {
  .source-env-row { grid-template-columns: minmax(0, 1fr) auto; }
  .source-env-row input:first-child { grid-column: 1 / -1; }
}
.source-extension__drop[data-loaded='true'] { padding: 0.85rem; }
.source-extension__file { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; overflow: hidden; }
.source-extension__drop strong { overflow-wrap: anywhere; max-width: 100%; }