.kme-host {
    --kme-blue: #1768e5;
    --kme-blue-strong: #0f4fbf;
    --kme-blue-soft: #eef5ff;
    --kme-cyan: #0e9f9a;
    --kme-ink: #172033;
    --kme-muted: #66758c;
    --kme-line: #dce5f0;
    --kme-panel: #ffffff;
    --kme-bg: #f5f8fc;
    display: block;
    width: 100%;
    min-width: 0;
    color: var(--kme-ink);
    font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

/* The production workspace now uses KnowledgeMapExplorer as a headless data
   controller and paints its projection inside the single visual canvas. The
   legacy shell styles below remain for isolated compatibility/demo renders. */

.kme-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: clamp(620px, calc(100dvh - 132px), 1040px);
    min-height: 620px;
    overflow: hidden;
    border: 1px solid var(--kme-line);
    border-radius: 20px;
    background: var(--kme-bg);
    box-shadow: 0 18px 52px rgba(34, 58, 95, .12);
}

.kme-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 86px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--kme-line);
    background: rgba(255, 255, 255, .98);
}

.kme-toolbar > div:first-child > span,
.kme-context section > span,
.kme-current-node > span,
.kme-section-heading span,
.kme-inspector header > span,
.kme-recommendation > span,
.kme-confirm > span {
    color: var(--kme-blue);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.kme-toolbar h2 { margin: 2px 0; font-size: 20px; line-height: 1.2; font-weight: 900; }
.kme-toolbar p { margin: 0; color: var(--kme-muted); font-size: 12px; }

.kme-map-picker {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
    max-width: 52%;
}

.kme-map-picker button,
.kme-breadcrumb button,
.kme-related-list button,
.kme-current-node button,
.kme-load-more {
    border: 1px solid var(--kme-line);
    border-radius: 10px;
    color: #32415a;
    background: #fff;
    cursor: pointer;
}

.kme-map-picker button { padding: 8px 11px; font-size: 11px; font-weight: 800; }
.kme-map-picker button[aria-current="true"] { border-color: #93b9f4; color: var(--kme-blue-strong); background: var(--kme-blue-soft); }

.kme-layout {
    display: grid;
    grid-template-columns: minmax(210px, 250px) minmax(380px, 1fr) minmax(320px, 370px);
    min-height: 0;
    overflow: hidden;
}

.kme-context,
.kme-inspector {
    min-height: 0;
    overflow: auto;
    background: var(--kme-panel);
    scrollbar-width: thin;
}

.kme-context {
    padding: 18px;
    border-right: 1px solid var(--kme-line);
}

.kme-context section + section,
.kme-context dl + section,
.kme-context section + dl {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e9eef5;
}

.kme-context h3 { margin: 5px 0 7px; font-size: 17px; line-height: 1.35; }
.kme-context p { margin: 0; color: var(--kme-muted); font-size: 12px; line-height: 1.65; }
.kme-context dl, .kme-node-facts { display: grid; gap: 9px; margin: 0; }
.kme-context dl div, .kme-node-facts div { display: grid; gap: 2px; }
.kme-context dt, .kme-node-facts dt { color: #8491a4; font-size: 10px; font-weight: 800; }
.kme-context dd, .kme-node-facts dd { margin: 0; color: #35425a; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }

.kme-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.kme-breadcrumb button,
.kme-breadcrumb span {
    padding: 4px 6px;
    color: #4a5c77;
    font-size: 11px;
    line-height: 1.3;
}

.kme-breadcrumb button { border-color: transparent; background: #f5f8fc; }
.kme-breadcrumb span[aria-current="page"] { color: var(--kme-blue-strong); font-weight: 900; background: var(--kme-blue-soft); border-radius: 7px; }
.kme-breadcrumb i { color: #9aa7b8; font-size: 12px; font-style: normal; }

.kme-center {
    min-width: 0;
    min-height: 0;
    padding: 20px;
    overflow: auto;
    background:
        linear-gradient(rgba(233, 240, 249, .62) 1px, transparent 1px),
        linear-gradient(90deg, rgba(233, 240, 249, .62) 1px, transparent 1px),
        #f8fbff;
    background-size: 28px 28px;
    scrollbar-width: thin;
}

.kme-current-node {
    position: relative;
    padding: 19px 20px;
    border: 1px solid #a9c9f8;
    border-radius: 17px;
    background: linear-gradient(145deg, #ffffff, #eef5ff);
    box-shadow: 0 12px 32px rgba(23, 104, 229, .11);
}

.kme-current-node h3 { margin: 5px 0 6px; padding-right: 80px; font-size: 21px; line-height: 1.3; }
.kme-current-node p { max-width: 760px; margin: 0; color: #56677f; font-size: 13px; line-height: 1.65; }
.kme-current-node button { position: absolute; top: 16px; right: 16px; padding: 7px 9px; font-size: 10px; font-weight: 800; }

.kme-children,
.kme-related { margin-top: 22px; }

.kme-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.kme-section-heading h4 { margin: 2px 0 0; color: #25334a; font-size: 14px; }
.kme-section-heading small { color: var(--kme-muted); font-size: 10px; }

.kme-child-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.kme-node-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 152px;
    padding: 15px;
    text-align: left;
    border: 1px solid #d3deec;
    border-radius: 15px;
    color: var(--kme-ink);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 8px 22px rgba(31, 52, 83, .07);
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.kme-node-card:hover { transform: translateY(-2px); border-color: #79aaf0; box-shadow: 0 13px 29px rgba(23, 104, 229, .13); }
.kme-node-card > span { color: var(--kme-cyan); font-size: 9px; font-weight: 900; letter-spacing: .07em; }
.kme-node-card > strong { margin-top: 5px; font-size: 15px; line-height: 1.35; }
.kme-node-card > p { margin: 6px 0 13px; color: var(--kme-muted); font-size: 11px; line-height: 1.55; }
.kme-node-card > em { margin-top: auto; color: var(--kme-blue); font-size: 10px; font-style: normal; font-weight: 900; }

.kme-load-more { display: block; margin: 13px auto 0; padding: 9px 13px; color: var(--kme-blue-strong); font-size: 11px; font-weight: 800; }

.kme-related-list { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.kme-related-list button { padding: 8px 10px; font-size: 11px; font-weight: 700; }
.kme-related-list button span { margin-right: 6px; color: var(--kme-cyan); font-size: 9px; font-weight: 900; }

.kme-inspector {
    padding: 18px;
    border-left: 1px solid var(--kme-line);
}

.kme-inspector > header h3 { margin: 5px 0 6px; font-size: 19px; line-height: 1.32; }
.kme-inspector > header p { margin: 0; color: var(--kme-muted); font-size: 12px; line-height: 1.62; }
.kme-node-facts { margin-top: 15px; padding: 12px; border-radius: 12px; background: #f7f9fc; }
.kme-level-section, .kme-mode-section, .kme-primary-actions { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e7edf5; }

.kme-level-list { display: grid; gap: 6px; }
.kme-level-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 54px;
    padding: 7px 9px;
    text-align: left;
    border: 1px solid #dce5f0;
    border-radius: 11px;
    color: #2b3a52;
    background: #fff;
    cursor: pointer;
}

.kme-level-card > b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #4c627f; background: #eef2f7; font-size: 11px; }
.kme-level-card span { display: grid; gap: 2px; }
.kme-level-card span strong { font-size: 11px; }
.kme-level-card span small { color: var(--kme-muted); font-size: 9px; line-height: 1.35; }
.kme-level-card > em { color: #8391a5; font-size: 8px; font-style: normal; }
.kme-level-card.is-selected { border-color: #78a9ef; background: var(--kme-blue-soft); box-shadow: 0 0 0 2px rgba(23, 104, 229, .07); }
.kme-level-card.is-selected > b { color: #fff; background: var(--kme-blue); }
.kme-level-card.is-restricted { border-style: dashed; background: #fafafa; }
.kme-level-card.is-restricted > b, .kme-level-card.is-restricted span { opacity: .62; }

.kme-guide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
    padding: 10px;
    border: 1px solid #d9e5f5;
    border-radius: 12px;
    background: #f8fbff;
}

.kme-guide div { min-width: 0; }
.kme-guide strong { color: #526681; font-size: 9px; }
.kme-guide p { margin: 2px 0 0; color: #33445e; font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.kme-guide.is-restricted { border-color: #ebc56e; background: #fffaf0; }
.kme-restriction-note { grid-column: 1 / -1; padding-top: 7px; border-top: 1px solid #f0ddb1; color: #8a5a00 !important; font-weight: 800; }

.kme-method-tabs { display: grid; grid-template-columns: 1fr 1.35fr; gap: 6px; padding: 4px; border-radius: 11px; background: #edf2f8; }
.kme-method-tabs button { padding: 8px 7px; border: 0; border-radius: 8px; color: #576980; background: transparent; font-size: 10px; font-weight: 900; cursor: pointer; }
.kme-method-tabs button[aria-selected="true"] { color: var(--kme-blue-strong); background: #fff; box-shadow: 0 3px 10px rgba(31, 52, 83, .1); }

.kme-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.kme-mode-grid button {
    display: grid;
    gap: 3px;
    min-height: 64px;
    padding: 9px;
    text-align: left;
    border: 1px solid #dce5f0;
    border-radius: 11px;
    color: #34445c;
    background: #fff;
    cursor: pointer;
}
.kme-mode-grid strong { font-size: 10px; }
.kme-mode-grid small { color: var(--kme-muted); font-size: 8px; line-height: 1.4; }
.kme-mode-grid button.is-selected { border-color: #64a0ee; color: var(--kme-blue-strong); background: var(--kme-blue-soft); }

.kme-recommendation { position: relative; margin-top: 8px; padding: 11px; border: 1px solid #b8d7ce; border-radius: 12px; background: #f1fbf8; }
.kme-recommendation strong { display: block; margin-top: 3px; color: #12665e; font-size: 13px; }
.kme-recommendation p { margin: 5px 0; color: #44645f; font-size: 9px; line-height: 1.5; }
.kme-recommendation small { color: #5e7772; font-size: 8px; }
.kme-recommendation button { position: absolute; top: 9px; right: 9px; padding: 5px 7px; border: 1px solid #b4d5cc; border-radius: 7px; color: #176e65; background: #fff; font-size: 8px; font-weight: 800; cursor: pointer; }

.kme-confirm { margin-top: 13px; padding: 12px; border: 1px solid #f0c56c; border-radius: 13px; background: #fffbef; }
.kme-confirm > strong { display: block; margin-top: 4px; color: #66460d; font-size: 11px; line-height: 1.5; }
.kme-confirm > p { margin: 5px 0 0; color: #765a26; font-size: 9px; line-height: 1.5; }
.kme-confirm > div { display: flex; justify-content: flex-end; gap: 7px; margin-top: 10px; }
.kme-confirm button { padding: 7px 9px; border: 1px solid #e1c47d; border-radius: 8px; color: #6d531b; background: #fff; font-size: 9px; font-weight: 900; cursor: pointer; }
.kme-confirm button.is-primary { border-color: #d69e2e; color: #fff; background: #b97810; }

.kme-primary-actions { display: grid; gap: 7px; }
.kme-primary-button { width: 100%; min-height: 40px; padding: 9px 12px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--kme-blue), var(--kme-blue-strong)); font-size: 11px; font-weight: 900; cursor: pointer; box-shadow: 0 8px 19px rgba(23, 104, 229, .22); }
.kme-primary-actions > small { color: var(--kme-muted); font-size: 8px; line-height: 1.5; text-align: center; }

.kme-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
    padding: 7px 15px;
    border-top: 1px solid var(--kme-line);
    color: #64758b;
    background: #fff;
    font-size: 10px;
}

.kme-status small { color: #8b98aa; font-size: 9px; }
.kme-muted { color: var(--kme-muted); font-size: 11px; }
.kme-loading, .kme-error, .kme-empty, .kme-disabled { padding: 26px; text-align: center; border: 1px dashed #ccd8e7; border-radius: 14px; color: #4a5c73; background: rgba(255, 255, 255, .9); }
.kme-loading { margin-bottom: 14px; }
.kme-error { margin-bottom: 14px; border-color: #edb4b4; color: #8f3030; background: #fff7f7; }
.kme-empty p, .kme-error p, .kme-disabled p { margin: 5px 0 0; color: var(--kme-muted); font-size: 11px; line-height: 1.55; }
.kme-disabled { margin: 18px; }

/* M2 owns the conversation surface; this compact bridge only carries the
   knowledge-map origin and the explicit return action. */
.kme-m2-bridge {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 10px 13px;
    border: 1px solid #b9d2f5;
    border-radius: 12px;
    color: #29415f;
    background: linear-gradient(90deg, #f1f7ff, #f8fbff);
    box-shadow: 0 5px 16px rgba(23, 104, 229, .08);
}

.kme-m2-bridge[hidden] { display: none !important; }
.kme-m2-bridge > div { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.kme-m2-bridge #kme-m2-bridge-path,
.kme-m2-bridge #kme-m2-bridge-config,
.kme-m2-bridge [data-kme-bridge-path],
.kme-m2-bridge [data-kme-bridge-config] { padding: 5px 8px; border-radius: 999px; color: #24518a; background: #fff; font-size: 10px; font-weight: 800; }
.kme-m2-bridge #kme-return-to-map,
.kme-m2-bridge [data-kme-bridge-return] { margin-left: auto; padding: 7px 10px; border: 1px solid #8bb5ef; border-radius: 9px; color: var(--kme-blue-strong); background: #fff; font-size: 10px; font-weight: 900; cursor: pointer; }

.kme-host button:focus-visible,
.kme-m2-bridge button:focus-visible { outline: 3px solid rgba(14, 159, 154, .34); outline-offset: 2px; }
.kme-host button:disabled { opacity: .5; cursor: not-allowed; transform: none; }

@media (max-width: 1180px) {
    .kme-layout { grid-template-columns: 195px minmax(330px, 1fr) 310px; }
    .kme-context, .kme-inspector { padding: 14px; }
    .kme-child-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .kme-shell { height: auto; min-height: 0; max-height: none; overflow: visible; }
    .kme-toolbar { align-items: flex-start; flex-direction: column; }
    .kme-map-picker { justify-content: flex-start; max-width: 100%; }
    .kme-layout { grid-template-columns: 1fr; overflow: visible; }
    .kme-context, .kme-center, .kme-inspector { max-height: none; overflow: visible; border: 0; }
    .kme-context { border-bottom: 1px solid var(--kme-line); }
    .kme-inspector { border-top: 1px solid var(--kme-line); }
    .kme-context > section:last-child { display: none; }
}

@media (max-width: 560px) {
    .kme-shell { border-radius: 12px; }
    .kme-toolbar, .kme-center, .kme-context, .kme-inspector { padding: 12px; }
    .kme-toolbar h2 { font-size: 18px; }
    .kme-current-node h3 { padding-right: 0; font-size: 18px; }
    .kme-current-node button { position: static; margin-top: 10px; }
    .kme-guide, .kme-mode-grid { grid-template-columns: 1fr; }
    .kme-m2-bridge #kme-return-to-map,
    .kme-m2-bridge [data-kme-bridge-return] { width: 100%; margin-left: 0; }
}

@media (max-height: 700px) and (min-width: 901px) {
    .kme-shell {
        height: max(420px, calc(100dvh - 112px));
        min-height: max(420px, calc(100dvh - 112px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .kme-host *, .kme-host *::before, .kme-host *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}