/* Kin UI — standalone tokens (aligns with workspace --KinPen* when host loads theme.css) */
:host, .kin-ui-root {
    /* Base palette fallbacks */
    --timberwolf: #C9C5BA;
    --timberwolf-highlight: #F6F5F3;
    --timberwolf-shade: #9C9581;
    --air-force-blue: #688996;
    --air-force-blue-highlight: #A4B8C0;
    --air-force-blue-shade: #3E525A;
    --cambridge-blue: #96B0A5;
    --cambridge-blue-shade: #607F72;
    --caribbean-current: #407077;
    --caribbean-current-shade: #1C3235;

    --KinPenText: #000000;
    --KinPenBackground: var(--timberwolf);
    --KinPenFrameShine: var(--timberwolf-highlight);
    --KinPenFrameShadow: var(--caribbean-current);
    --KinPenFrameHalfShine: var(--timberwolf);
    --KinPenFrameHalfShadow: var(--timberwolf-shade);
    --KinPenButtonBackground: var(--timberwolf);
    --KinPenButtonText: var(--air-force-blue);
    --KinPenButtonShine: var(--timberwolf-highlight);
    --KinPenButtonShadow: var(--timberwolf-shade);
    --KinPenButtonFill: var(--air-force-blue-highlight);
    --KinPenInputBackground: var(--timberwolf-shade);
    --KinPenInputText: var(--air-force-blue);
    --KinPenInputBorderShine: var(--timberwolf);
    --KinPenInputBorderShadow: var(--timberwolf-shade);
    --KinPenInputFocusMark: var(--cambridge-blue);
    --KinPenMark: var(--cambridge-blue);
    --KinPenGadgetBackground: var(--timberwolf);
    --KinPenGadgetText: var(--air-force-blue);
    --KinPenBorderRadius: 6px;
    --KinPenBorderWidth: 1px;

    --kin-ui-scale: 1;
    --kin-ui-gap: calc(0.5rem * var(--kin-ui-scale));
    --kin-ui-pad: calc(0.65rem * var(--kin-ui-scale));
    --kin-ui-min-hit: calc(2.25rem * var(--kin-ui-scale));
    --kin-ui-font: system-ui, sans-serif;
    --kin-ui-font-size: calc(0.9375rem * var(--kin-ui-scale));
    --kin-scrollbar-thumb: rgba(104, 137, 150, 0.55);
    --kin-scrollbar-track: rgba(201, 197, 186, 0.35);
    --kin-window-background: #e8f1f7bf;
}

.kin-ui-root[data-kin-density="compact"] {
    --kin-ui-gap: calc(0.35rem * var(--kin-ui-scale));
    --kin-ui-pad: calc(0.45rem * var(--kin-ui-scale));
    --kin-ui-min-hit: calc(1.85rem * var(--kin-ui-scale));
}

kin-ui-app[data-kin-input-touch="true"] {
    --kin-ui-min-hit: calc(2.5rem * var(--kin-ui-scale));
}

/* Light glass — matches workspace default shell (frosted, not timberwolf/beige) */
.kin-ui-root[data-kin-theme="light-glass"] {
    --KinPenText: #152028;
    --KinPenBackground: #e8eef6;
    --KinPenFrameShine: #ffffff;
    --KinPenFrameShadow: rgba(62, 82, 90, 0.28);
    --KinPenFrameHalfShine: #f2f6fb;
    --KinPenFrameHalfShadow: rgba(100, 120, 140, 0.22);
    --KinPenInputBackground: rgba(255, 255, 255, 0.92);
    --KinPenInputText: #1a2832;
    --KinPenInputBorderShine: #ffffff;
    --KinPenInputBorderShadow: rgba(62, 82, 90, 0.2);
    --KinPenInputFocusMark: #4a90b8;
    --KinPenButtonBackground: rgba(255, 255, 255, 0.78);
    --KinPenButtonText: #2a4050;
    --KinPenButtonShine: #ffffff;
    --KinPenButtonShadow: rgba(62, 82, 90, 0.15);
    --KinPenButtonFill: #7eb0d0;
    --KinPenMark: #4a8a9e;
    --KinPenGadgetBackground: rgba(255, 255, 255, 0.55);
    --KinPenGadgetText: #3e525a;
    --kin-scrollbar-track: rgba(255, 255, 255, 0.35);
    --kin-scrollbar-thumb: rgba(104, 137, 150, 0.45);
    --kin-window-background: #e8f1f7bf;
}

.kin-ui-root[data-kin-theme="dark"] {
    --KinPenText: #e8ecee;
    --KinPenBackground: #2a3236;
    --KinPenFrameShine: #4a565c;
    --KinPenFrameShadow: #121618;
    --KinPenInputBackground: #1e2428;
    --KinPenInputText: #d0d8dc;
    --KinPenButtonBackground: #3a444a;
    --KinPenButtonText: #e0e8ec;
    --KinPenButtonShine: #505a60;
    --KinPenButtonShadow: #1a2024;
    --KinPenButtonFill: #4a6a72;
    --kin-scrollbar-track: rgba(30, 36, 40, 0.5);
    --kin-scrollbar-thumb: rgba(160, 180, 190, 0.45);
    --kin-window-background: rgba(18, 24, 34, 0.8);
}

/* Match workspace dark-glass shell (repository iframes) — sci-fi bevel + legible text */
.kin-ui-root[data-kin-theme="dark-glass"] {
    --kin-ui-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92), 0 0 1px rgba(0, 0, 0, 0.75);
    --KinPenText: #e8edf2;
    --KinPenBackground: #1e252d;
    --KinPenFrameShine: #5a6e82;
    --KinPenFrameShadow: #080a0e;
    --KinPenFrameHalfShine: #3d4a58;
    --KinPenFrameHalfShadow: #1a2028;
    --KinPenFrameInsetShine: rgba(200, 220, 240, 0.16);
    --KinPenFrameInsetShadow: rgba(0, 0, 0, 0.45);
    --KinPenInputBackground: #151b22;
    --KinPenInputText: #e0e8f0;
    --KinPenInputBorderShine: #4a5c70;
    --KinPenInputBorderShadow: #0a0d12;
    --KinPenInputFocusMark: #7ec8e8;
    --KinPenButtonBackground: #2a3848;
    --KinPenButtonText: #f2f6fa;
    --KinPenButtonShine: #4a5f78;
    --KinPenButtonShadow: #0e1218;
    --KinPenButtonFill: #3d5c72;
    --KinPenButtonOuterShadow: 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --KinPenMark: #6da8b0;
    --KinPenGadgetBackground: rgba(30, 38, 50, 0.92);
    --KinPenGadgetText: #d0dce8;
    --kin-scrollbar-track: rgba(255, 255, 255, 0.06);
    --kin-scrollbar-thumb: rgba(120, 150, 180, 0.45);
    --kin-window-background: rgba(17, 24, 34, 0.8);
}

/* GTK theme ids — align with workspace [data-kin-workspace-theme]; use kin_theme query + themeName in createApp */
.kin-ui-root[data-kin-theme="Adwaita"] {
    --KinPenText: #2e3436;
    --KinPenBackground: #f6f5f4;
    --KinPenFrameShine: #ffffff;
    --KinPenFrameShadow: #c0bfbc;
    --KinPenFrameHalfShine: #f6f5f4;
    --KinPenFrameHalfShadow: #deddda;
    --KinPenInputBackground: #ffffff;
    --KinPenInputText: #2e3436;
    --KinPenInputBorderShine: #ffffff;
    --KinPenInputBorderShadow: #c0bfbc;
    --KinPenInputFocusMark: #3584e7;
    --KinPenButtonBackground: #f6f5f4;
    --KinPenButtonText: #2e3436;
    --KinPenButtonShine: #ffffff;
    --KinPenButtonShadow: #c0bfbc;
    --KinPenButtonFill: #3584e7;
    --KinPenMark: #3584e7;
    --KinPenGadgetBackground: #f6f5f4;
    --KinPenGadgetText: #2e3436;
    --KinPenBorderRadius: 8px;
    --kin-ui-font: Cantarell, system-ui, sans-serif;
    --kin-scrollbar-track: rgba(246, 245, 244, 0.5);
    --kin-scrollbar-thumb: rgba(46, 52, 54, 0.35);
    --kin-window-background: rgba(250, 250, 249, 0.92);
}

.kin-ui-root[data-kin-theme="Adwaita-dark"] {
    --KinPenText: #eeeeec;
    --KinPenBackground: #242424;
    --KinPenFrameShine: #3d3d3d;
    --KinPenFrameShadow: #0d0d0d;
    --KinPenFrameHalfShine: #303030;
    --KinPenFrameHalfShadow: #1a1a1a;
    --KinPenInputBackground: #1e1e1e;
    --KinPenInputText: #eeeeec;
    --KinPenInputBorderShine: #3d3d3d;
    --KinPenInputBorderShadow: #0d0d0d;
    --KinPenInputFocusMark: #78aeed;
    --KinPenButtonBackground: #353535;
    --KinPenButtonText: #eeeeec;
    --KinPenButtonShine: #454545;
    --KinPenButtonShadow: #141414;
    --KinPenButtonFill: #3584e7;
    --KinPenMark: #78aeed;
    --KinPenGadgetBackground: #303030;
    --KinPenGadgetText: #d0d0d0;
    --KinPenBorderRadius: 8px;
    --kin-ui-font: Cantarell, system-ui, sans-serif;
    --kin-scrollbar-track: rgba(255, 255, 255, 0.05);
    --kin-scrollbar-thumb: rgba(238, 238, 236, 0.35);
    --kin-window-background: rgba(30, 30, 30, 0.9);
}

.kin-ui-root[data-kin-theme="Yaru"] {
    --KinPenText: #111111;
    --KinPenBackground: #f7f7f7;
    --KinPenFrameShine: #ffffff;
    --KinPenFrameShadow: #b0b0b0;
    --KinPenFrameHalfShine: #f7f7f7;
    --KinPenFrameHalfShadow: #d9d9d9;
    --KinPenInputBackground: #ffffff;
    --KinPenInputText: #111111;
    --KinPenInputBorderShine: #ffffff;
    --KinPenInputBorderShadow: #b0b0b0;
    --KinPenInputFocusMark: #109a26;
    --KinPenButtonBackground: #f7f7f7;
    --KinPenButtonText: #111111;
    --KinPenButtonShine: #ffffff;
    --KinPenButtonShadow: #c8c8c8;
    --KinPenButtonFill: #109a26;
    --KinPenMark: #109a26;
    --KinPenGadgetBackground: #f0f0f0;
    --KinPenGadgetText: #3d3d3d;
    --KinPenBorderRadius: 6px;
    --kin-ui-font: Cantarell, 'Ubuntu', system-ui, sans-serif;
    --kin-scrollbar-track: rgba(247, 247, 247, 0.45);
    --kin-scrollbar-thumb: rgba(17, 17, 17, 0.32);
    --kin-window-background: rgba(247, 247, 247, 0.92);
}

.kin-ui-root[data-kin-theme="Yaru-dark"] {
    --KinPenText: #f7f7f7;
    --KinPenBackground: #2b2b2b;
    --KinPenFrameShine: #404040;
    --KinPenFrameShadow: #121212;
    --KinPenFrameHalfShine: #353535;
    --KinPenFrameHalfShadow: #222222;
    --KinPenInputBackground: #242424;
    --KinPenInputText: #f7f7f7;
    --KinPenInputBorderShine: #404040;
    --KinPenInputBorderShadow: #121212;
    --KinPenInputFocusMark: #19a354;
    --KinPenButtonBackground: #333333;
    --KinPenButtonText: #f7f7f7;
    --KinPenButtonShine: #454545;
    --KinPenButtonShadow: #141414;
    --KinPenButtonFill: #19a354;
    --KinPenMark: #19a354;
    --KinPenGadgetBackground: #303030;
    --KinPenGadgetText: #d0d0d0;
    --KinPenBorderRadius: 6px;
    --kin-ui-font: Cantarell, 'Ubuntu', system-ui, sans-serif;
    --kin-scrollbar-track: rgba(255, 255, 255, 0.04);
    --kin-scrollbar-thumb: rgba(247, 247, 247, 0.32);
    --kin-window-background: rgba(36, 36, 36, 0.9);
}

.kin-ui-root[data-kin-theme="Breeze"] {
    --KinPenText: #232629;
    --KinPenBackground: #eff0f1;
    --KinPenFrameShine: #fcfcfc;
    --KinPenFrameShadow: #a0a4a8;
    --KinPenFrameHalfShine: #eff0f1;
    --KinPenFrameHalfShadow: #bdc3c7;
    --KinPenInputBackground: #fcfcfc;
    --KinPenInputText: #232629;
    --KinPenInputBorderShine: #fcfcfc;
    --KinPenInputBorderShadow: #a0a4a8;
    --KinPenInputFocusMark: #3daee9;
    --KinPenButtonBackground: #eff0f1;
    --KinPenButtonText: #232629;
    --KinPenButtonShine: #fcfcfc;
    --KinPenButtonShadow: #bdc3c7;
    --KinPenButtonFill: #3daee9;
    --KinPenMark: #3daee9;
    --KinPenGadgetBackground: #e8eaec;
    --KinPenGadgetText: #31363b;
    --KinPenBorderRadius: 4px;
    --kin-ui-font: Cantarell, 'Noto Sans', system-ui, sans-serif;
    --kin-scrollbar-track: rgba(239, 240, 241, 0.5);
    --kin-scrollbar-thumb: rgba(35, 38, 41, 0.35);
    --kin-window-background: rgba(239, 240, 241, 0.93);
}

.kin-ui-root[data-kin-theme="Breeze-Dark"] {
    --KinPenText: #eff0f1;
    --KinPenBackground: #31363b;
    --KinPenFrameShine: #45494e;
    --KinPenFrameShadow: #141619;
    --KinPenFrameHalfShine: #383c41;
    --KinPenFrameHalfShadow: #25292d;
    --KinPenInputBackground: #2a2e32;
    --KinPenInputText: #eff0f1;
    --KinPenInputBorderShine: #45494e;
    --KinPenInputBorderShadow: #141619;
    --KinPenInputFocusMark: #3daee9;
    --KinPenButtonBackground: #383c41;
    --KinPenButtonText: #eff0f1;
    --KinPenButtonShine: #4a4f55;
    --KinPenButtonShadow: #141619;
    --KinPenButtonFill: #3daee9;
    --KinPenMark: #3daee9;
    --KinPenGadgetBackground: #35393e;
    --KinPenGadgetText: #c8cdd1;
    --KinPenBorderRadius: 4px;
    --kin-ui-font: Cantarell, 'Noto Sans', system-ui, sans-serif;
    --kin-scrollbar-track: rgba(255, 255, 255, 0.04);
    --kin-scrollbar-thumb: rgba(239, 240, 241, 0.32);
    --kin-window-background: rgba(42, 46, 50, 0.92);
}

/*
 * Repository app viewport: --KinPen* on .kin-ui-root does not cascade to body.
 * createApp sets html.kin-ui-repo-page and data-kin-repo-theme (synced on workspace postMessage).
 */
html.kin-ui-repo-page,
html.kin-ui-repo-page body {
    margin: 0;
    min-height: 100%;
}

html.kin-ui-repo-page body {
    background: transparent;
}

html.kin-ui-repo-page[data-kin-repo-theme="default"] {
    background: #c9c5ba;
    color: #000;
}

html.kin-ui-repo-page[data-kin-repo-theme="light-glass"] {
    background: #d8e4f0;
    color: #152028;
}

html.kin-ui-repo-page[data-kin-repo-theme="dark-glass"],
html.kin-ui-repo-page[data-kin-repo-theme="dark"] {
    background: #12161c;
    color: #e8edf2;
}

html.kin-ui-repo-page[data-kin-repo-theme="Adwaita"] {
    background: #ebebeb;
    color: #2e3436;
}

html.kin-ui-repo-page[data-kin-repo-theme="Adwaita-dark"] {
    background: #1e1e1e;
    color: #eeeeec;
}

html.kin-ui-repo-page[data-kin-repo-theme="Yaru"] {
    background: #e6e6e6;
    color: #111;
}

html.kin-ui-repo-page[data-kin-repo-theme="Yaru-dark"] {
    background: #242424;
    color: #f7f7f7;
}

html.kin-ui-repo-page[data-kin-repo-theme="Breeze"] {
    background: #e3e5e7;
    color: #232629;
}

html.kin-ui-repo-page[data-kin-repo-theme="Breeze-Dark"] {
    background: #2a2e32;
    color: #eff0f1;
}

/* Chat (kin-ui-chat-log / kin-ui-chat-message) */
.kin-ui-chat-pane {
    --kin-chat-sidebar-w: 11rem;
    --kin-chat-rail-w: 2.75rem;
    --kin-chat-rail-bg: var(--KinPenFrameHalfShine, #f2f6fb);
    --kin-chat-main-bg: var(--KinPenBackground, #e8eef6);
    --kin-chat-thread-divider: color-mix(in srgb, var(--KinPenFrameShadow, #888) 22%, transparent);
}

/* Kin UI component helpers: mirror workspace theme helpers so apps inside iframes
   receive the same button/panel/action-bar visuals as the host workspace. */
.kin-ui-button {
    background: var(--KinPenButtonBackground);
    color: var(--KinPenButtonText);
    border-radius: var(--KinPenBorderRadius);
    box-shadow: inset 0 1px 0 var(--KinPenButtonShine), 0 2px 8px var(--KinPenButtonShadow);
    border: var(--KinPenBorderWidth) solid transparent;
    padding: 0.4rem 0.8rem;
    min-height: var(--kin-ui-min-hit);
    font-family: var(--kin-ui-font);
}
.kin-ui-button:hover {
    box-shadow: inset 0 1px 0 var(--KinPenButtonShine), 0 6px 18px var(--KinPenButtonShadow);
}
.kin-ui-button:active {
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.18), 0 0 0 transparent;
}

.kin-ui-panel,
.kin-ui-group {
    background: var(--KinPenBackground);
    border-radius: var(--KinPenBorderRadius);
    border-top: var(--KinPenBorderWidth) solid var(--KinPenFrameShine);
    border-left: var(--KinPenBorderWidth) solid var(--KinPenFrameShine);
    border-bottom: var(--KinPenBorderWidth) solid var(--KinPenFrameHalfShadow);
    border-right: var(--KinPenBorderWidth) solid var(--KinPenFrameHalfShadow);
    box-shadow: inset 0 1px 0 var(--KinPenFrameShine), inset 0 -1px 0 var(--KinPenFrameHalfShadow), 0 6px 18px var(--KinPenFrameShadow);
    padding: 8px;
}

/* Reusable action bar for apps: place this element outside any scrollable area so buttons stay visible */
.kin-action-bar {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    padding: 8px;
    flex-shrink: 0; /* do not collapse when parent flex container shrinks */
    border-top: var(--KinPenBorderWidth) solid var(--KinPenFrameHalfShadow);
    background: transparent;
}