/* ─── KI CHAT WINDOW ───────────────────────────────────────────────── */
    .ki-window {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 420px;
      height: 540px;
      background: rgba(11,12,14,0.94);
      backdrop-filter: blur(24px) saturate(1.4);
      border: 1px solid rgba(212,160,56,0.2);
      border-radius: 16px;
      box-shadow: 0 10px 50px rgba(0,0,0,0.6), 0 0 30px rgba(212,160,56,0.08);
      display: flex;
      flex-direction: column;
      z-index: 2000;
      transform: translateY(20px) scale(0.95);
      opacity: 0;
      pointer-events: none;
      transition: all 0.35s var(--ease-out);
    }
    .ki-window.open {
      transform: translateY(0) scale(1);
      opacity: 1;
      pointer-events: auto;
      animation: borderGlow 3s ease-in-out infinite;
      box-shadow: 0 10px 50px rgba(0,0,0,0.6), 0 0 40px rgba(212,160,56,0.1), inset 0 1px 0 rgba(212,160,56,0.1);
    }

    .ki-window-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(135deg, rgba(22,24,32,0.9), rgba(17,19,22,0.95));
      border-radius: 16px 16px 0 0;
      position: relative;
    }
    .ki-window-header::after {
      content: '';
      position: absolute;
      bottom: 0; left: 16px; right: 16px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(212,160,56,0.2), transparent);
    }
    .ki-window-title {
      display: flex; align-items: center; gap: 10px;
      font-weight: 600; font-size: 0.9rem;
    }
    .ki-window-title img { width: 20px; height: 20px; border-radius: 4px; }
    .ki-window-actions { display: flex; gap: 8px; align-items: center; }
    .ki-settings-btn, .ki-window-close {
      background: none; border: none;
      color: var(--muted); font-size: 1.1rem; cursor: pointer;
      padding: 4px 6px; line-height: 1; border-radius: 4px;
      transition: all 0.2s;
    }
    .ki-settings-btn:hover, .ki-window-close:hover {
      color: var(--accent);
      background: var(--accent-lo);
    }

    /* KI Settings Panel */
    .ki-settings-panel {
      padding: 24px 20px;
      display: none;
      flex-direction: column; gap: 12px;
      flex: 1;
      justify-content: center;
    }
    .ki-settings-panel.visible { display: flex; }
    .ki-settings-label {
      font-size: 0.8rem; color: var(--text); font-weight: 500;
    }
    .ki-settings-input {
      width: 100%;
      padding: 10px 14px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-family: var(--font-mono);
      font-size: 0.85rem;
      transition: border-color 0.3s;
    }
    .ki-settings-input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-lo);
    }
    .ki-settings-hint {
      font-size: 0.7rem; color: var(--muted);
      display: flex; align-items: center; gap: 6px;
    }

    /* KI Chat History */
    .ki-chat-history {
      display: none; flex-direction: column; gap: 4px;
      padding: 10px; background: var(--surface);
      border-bottom: 1px solid var(--border);
      max-height: 200px; overflow-y: auto;
    }
    .ki-chat-history.visible { display: flex; }
    .ki-history-list { display: flex; flex-direction: column; gap: 3px; }
    .ki-history-item {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 10px; border-radius: 6px;
      font-size: 0.75rem; font-family: var(--font-mono);
      color: var(--text); cursor: pointer;
      background: transparent; border: none; text-align: left;
      transition: background 0.15s;
      width: 100%;
    }
    .ki-history-item:hover { background: var(--surface2); }
    .ki-history-item.active { background: var(--accent-lo); color: var(--accent); }
    .ki-history-item-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ki-history-item-date { font-size: 0.6rem; color: var(--muted); flex-shrink: 0; }
    .ki-history-item-delete {
      opacity: 0; background: none; border: none; color: var(--muted);
      cursor: pointer; font-size: 0.8rem; padding: 0 4px; transition: all 0.15s;
    }
    .ki-history-item:hover .ki-history-item-delete { opacity: 1; }
    .ki-history-item-delete:hover { color: var(--red); }
    .ki-history-new {
      padding: 7px 10px; border-radius: 6px; border: 1px dashed var(--border);
      background: transparent; color: var(--muted); font-family: var(--font-mono);
      font-size: 0.73rem; cursor: pointer; transition: all 0.2s; margin-top: 2px;
    }
    .ki-history-new:hover { border-color: var(--accent); color: var(--accent); }

    /* KI Messages */
    .ki-messages {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      scroll-behavior: smooth;
    }
    .ki-messages::-webkit-scrollbar { width: 4px; }
    .ki-messages::-webkit-scrollbar-track { background: transparent; }
    .ki-messages::-webkit-scrollbar-thumb {
      background: var(--border); border-radius: 2px;
    }

    .ki-msg {
      max-width: 85%;
      padding: 10px 14px;
      border-radius: 12px;
      font-size: 0.82rem;
      line-height: 1.6;
      animation: slideUp 0.25s var(--ease-out);
    }
    .ki-msg.user {
      align-self: flex-end;
      background: linear-gradient(135deg, var(--accent-hi), var(--accent), var(--accent-dk));
      color: #0b0c0e;
      border-bottom-right-radius: 4px;
      box-shadow: 0 2px 12px rgba(212,160,56,0.2);
      font-weight: 500;
    }
    .ki-msg.ai {
      align-self: flex-start;
      background: linear-gradient(135deg, var(--surface2), rgba(30,33,40,0.9));
      border: 1px solid var(--border);
      color: var(--text);
      border-bottom-left-radius: 4px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    .ki-msg.ai pre {
      background: var(--surface);
      padding: 8px 10px; border-radius: 6px;
      margin: 6px 0; overflow-x: auto;
      font-size: 0.78rem;
    }
    .ki-msg.ai code {
      background: var(--surface); padding: 1px 4px;
      border-radius: 3px; font-size: 0.78rem;
    }
    .ki-msg.system {
      align-self: center;
      background: none;
      color: var(--muted);
      font-size: 0.72rem;
      text-align: center;
      padding: 4px 8px;
    }
    .ki-msg.error {
      align-self: center;
      background: var(--red-lo);
      color: var(--red);
      font-size: 0.75rem;
      text-align: center;
    }

    /* Typing indicator */
    .ki-typing {
      display: flex; gap: 4px; padding: 12px 16px;
      align-self: flex-start;
    }
    .ki-typing span {
      width: 6px; height: 6px;
      background: var(--accent);
      border-radius: 50%;
      animation: dotBounce 1.2s infinite;
    }
    .ki-typing span:nth-child(2) { animation-delay: 0.15s; }
    .ki-typing span:nth-child(3) { animation-delay: 0.3s; }

    /* KI Input Bar */
    .ki-input-bar {
      display: flex; gap: 8px; align-items: flex-end;
      padding: 12px 16px;
      border-top: 1px solid var(--border);
      background: rgba(22,24,32,0.6);
      border-radius: 0 0 16px 16px;
    }
    .ki-input {
      flex: 1;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 12px;
      color: var(--text);
      font-family: var(--font-mono);
      font-size: 0.82rem;
      resize: none;
      max-height: 100px;
      line-height: 1.4;
      transition: border-color 0.3s;
    }
    .ki-input:focus {
      outline: none;
      border-color: var(--accent);
    }
    .ki-input::placeholder { color: var(--muted); }
    .ki-token-display {
      font-size: 10px; color: var(--muted); padding: 4px 8px;
      font-family: var(--font-body); display: flex; gap: 6px; align-items: center;
      white-space: nowrap;
    }
    .ki-cost { color: var(--accent); font-weight: 600; }

    .ki-send-btn {
      width: 36px; height: 36px;
      background: linear-gradient(135deg, var(--accent), var(--accent-dk));
      border: none; border-radius: 8px;
      color: #0b0c0e; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.3s var(--ease-out);
      flex-shrink: 0;
    }
    .ki-send-btn:hover {
      background: linear-gradient(135deg, var(--accent-hi), var(--accent));
      box-shadow: 0 2px 12px rgba(212,160,56,0.4);
      transform: translateY(-1px);
    }
    .ki-send-btn:disabled {
      opacity: 0.5; cursor: not-allowed;
      transform: none; box-shadow: none;
    }

    /* ─── SKILL CARDS ──────────────────────────────────────────────────── */
    .skill-card {
      background: linear-gradient(145deg, var(--surface2), rgba(22,24,32,0.8));
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 20px;
      transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    .skill-card::before {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(212,160,56,0.04), transparent);
      transition: left 0.6s var(--ease-out);
    }
    .skill-card:hover::before { left: 150%; }
    .skill-card:hover {
      border-color: var(--accent);
      transform: translateY(-4px);
      box-shadow: 0 0 calc(20px * var(--skill-glow-intensity)) rgba(212, 160, 56, calc(0.15 * var(--skill-glow-intensity))),
                  0 0 calc(40px * var(--skill-glow-intensity)) rgba(212, 160, 56, calc(0.05 * var(--skill-glow-intensity))),
                  0 12px 40px rgba(0,0,0,0.4);
    }
    .skill-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
    .skill-icon-wrap { display: flex; align-items: center; gap: 12px; }
    .skill-icon {
      width: 40px; height: 40px; border-radius: 10px;
      background: var(--accent-lo); color: var(--accent);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.2rem;
      transition: transform 0.3s var(--ease-out);
    }
    .skill-card:hover .skill-icon { transform: scale(1.1) rotate(-3deg); }
    .skill-name { font-weight: 600; font-size: 1rem; color: var(--text); margin-bottom: 2px; }
    .skill-oneliner { font-size: 0.78rem; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
    .skill-commands { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
    .skill-cmd {
      font-size: 0.68rem; font-family: var(--font-mono);
      padding: 3px 8px; border-radius: 4px;
      background: var(--surface); border: 1px solid var(--border);
      color: var(--accent);
      transition: all 0.2s;
    }
    .skill-cmd:hover { border-color: var(--accent-dk); background: var(--accent-lo); }
    .skill-compat { display: flex; gap: 8px; margin-bottom: 14px; }
    .compat-badge { font-size: 0.65rem; padding: 3px 8px; border-radius: 6px; font-weight: 500; }
    .compat-badge.ok { background: #3ecf8e20; color: #3ecf8e; }
    .compat-badge.warn { background: #f0b42920; color: #f0b429; }

    /* Tool Badges */
    .tool-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
    .tool-badge {
      font-size: 0.62rem; padding: 2px 7px; border-radius: 10px;
      font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em;
    }
    .tool-badge.bash { background: #3ecf8e20; color: #3ecf8e; }
    .tool-badge.websearch { background: #5b9cf620; color: #5b9cf6; }
    .tool-badge.webfetch { background: #5b9cf620; color: #5b9cf6; }
    .tool-badge.read { background: #f0b42920; color: #f0b429; }
    .tool-badge.write { background: #f0b42920; color: #f0b429; }
    .tool-badge.grep { background: #e86c2f20; color: #e86c2f; }
    .tool-badge.edit { background: #a78bfa20; color: #a78bfa; }
    .tool-badge.glob { background: #22d3ee20; color: #22d3ee; }

    /* Accordion */
    .skill-details-toggle {
      width: 100%; padding: 8px 0;
      background: none; border: none;
      color: var(--muted); font-family: var(--font-mono);
      font-size: 0.75rem; cursor: pointer;
      display: flex; align-items: center; gap: 6px;
      transition: color 0.3s var(--ease-out);
    }
    .skill-details-toggle:hover { color: var(--accent); }
    .skill-details-toggle .toggle-chevron {
      transition: transform 0.3s var(--ease-out);
      display: inline-flex;
    }
    .skill-details-toggle.open .toggle-chevron { transform: rotate(180deg); }
    .skill-details {
      max-height: 0; overflow: hidden;
      transition: max-height 0.4s var(--ease-out), opacity 0.3s var(--ease-out);
      opacity: 0;
    }
    .skill-details.open { max-height: 900px; opacity: 1; }
    .skill-details-inner { padding-top: 12px; border-top: 1px solid var(--border); }
    .skill-detail-label {
      font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--muted); margin-bottom: 6px; margin-top: 10px;
    }
    .skill-detail-label:first-child { margin-top: 0; }
    .skill-detail-text { font-size: 0.78rem; color: var(--text); line-height: 1.6; }
    .workflow-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
    .workflow-step {
      font-size: 0.7rem; padding: 3px 8px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 4px; color: var(--text); white-space: nowrap;
    }
    .workflow-arrow { color: var(--accent); font-size: 0.8rem; }
    .skills-hint {
      font-size: 0.75rem; color: var(--muted);
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 8px; padding: 10px 16px;
      margin: 0 16px 4px;
      display: flex; align-items: center; gap: 8px;
    }
    .skills-hint code {
      background: var(--surface2); padding: 1px 6px;
      border-radius: 4px; color: var(--accent);
    }