/* aliases.css - alias dropdown UI - split from index.html */

        /* ── ALIAS DROPDOWN ── */
        .cmd-row-wrapper { position: relative; margin-bottom: 8px; }
        .cmd-row-wrapper .cmd-row { margin-bottom: 0; cursor: pointer; user-select: none; }
        .cmd-row-wrapper .cmd-row:hover { background: rgba(255,255,255,0.065); }
        .alias-dropdown-panel {
            display: none;
            background: #111;
            border: 1px solid rgba(122,0,0,0.35);
            border-top: none;
            border-radius: 0 0 10px 10px;
            padding: 12px 14px;
            animation: aliasDropFade 0.18s ease;
        }
        .alias-dropdown-panel.open { display: block; }
        @keyframes aliasDropFade {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .alias-item-row {
            display: flex; align-items: center; gap: 8px;
            padding: 7px 10px; border-radius: 8px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.05);
            margin-bottom: 6px;
            transition: background 0.15s;
        }
        .alias-item-row:hover { background: rgba(255,255,255,0.06); }
        .alias-item-trigger {
            font-family: 'JetBrains Mono', monospace;
            font-size: 13px; color: #ff6b6b; font-weight: 700;
            min-width: 80px;
        }
        .alias-item-cmd {
            font-size: 12px; color: #aaa; flex: 1;
        }
        .alias-item-meta {
            font-size: 11px; color: #666;
        }
        .alias-action-btn {
            background: transparent; border: 1px solid transparent;
            border-radius: 6px; padding: 4px 8px;
            font-size: 12px; cursor: pointer;
            transition: all 0.15s; font-family: 'Syne', sans-serif;
        }
        .alias-action-btn.edit { color: #5599ff; }
        .alias-action-btn.edit:hover { background: rgba(85,153,255,0.12); border-color: rgba(85,153,255,0.3); }
        .alias-action-btn.del  { color: #9a0000; }
        .alias-action-btn.del:hover  { background: rgba(122,0,0,0.18); border-color: rgba(122,0,0,0.3); }
        .alias-add-inline-btn {
            display: flex; align-items: center; gap: 6px;
            background: rgba(122,0,0,0.12);
            border: 1px dashed rgba(122,0,0,0.35);
            color: var(--red); border-radius: 8px;
            padding: 7px 14px; font-size: 12px;
            cursor: pointer; font-family: 'Syne', sans-serif;
            font-weight: 600; transition: all 0.18s; width: 100%;
            justify-content: center; margin-top: 4px;
        }
        .alias-add-inline-btn:hover { background: rgba(122,0,0,0.25); border-color: rgba(122,0,0,0.6); }
        .alias-inline-form {
            display: none;
            background: rgba(122,0,0,0.06);
            border: 1px solid rgba(122,0,0,0.2);
            border-radius: 10px; padding: 12px; margin-top: 8px;
        }
        .alias-inline-form.open { display: block; animation: aliasDropFade 0.18s ease; }
        .alias-inline-form input, .alias-inline-form select {
            background: rgba(0,0,0,0.5); border: 1px solid rgba(122,0,0,0.28);
            border-radius: 7px; color: white; padding: 6px 10px;
            font-size: 12px; font-family: 'JetBrains Mono', monospace;
            width: 100%; margin-bottom: 7px; outline: none;
            transition: border-color 0.2s;
        }
        .alias-inline-form input:focus, .alias-inline-form select:focus { border-color: var(--red); }
        .alias-inline-form label { font-size: 11px; color: #888; display: block; margin-bottom: 3px; }
        .alias-inline-save-btn {
            background: linear-gradient(135deg,#5a0000,#7a0000);
            border: none; color: white; border-radius: 7px;
            padding: 6px 16px; font-size: 12px; font-weight: 700;
            cursor: pointer; font-family: 'Syne', sans-serif;
            transition: opacity 0.2s;
        }
        .alias-inline-save-btn:hover { opacity: 0.85; }
        .alias-inline-cancel-btn {
            background: transparent; border: 1px solid rgba(255,255,255,0.1);
            color: #888; border-radius: 7px; padding: 6px 14px;
            font-size: 12px; cursor: pointer; font-family: 'Syne', sans-serif;
            transition: 0.2s; margin-left: 6px;
        }
        .alias-inline-cancel-btn:hover { background: rgba(255,255,255,0.06); color: #ccc; }
        .cmd-row-expand-icon {
            font-size: 10px; color: #555; margin-left: auto;
            transition: transform 0.2s; flex-shrink: 0;
        }
        .cmd-row-wrapper.expanded .cmd-row { border-radius: 10px 10px 0 0; background: rgba(122,0,0,0.08); }
        .cmd-row-wrapper.expanded .cmd-row-expand-icon { transform: rotate(180deg); color: var(--red); }