/* ================================================================
   Codexa AI Plugin Generator v4 – Minimal Dark UI
   ================================================================ */

/* ── Reset ──────────────────────────────────────────────────── */
#codexa-app,
#codexa-app *,
#codexa-app *::before,
#codexa-app *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Container — fullscreen ─────────────────────────────────── */
#codexa-app {
    display: flex;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    color: #c9d1d9;
    background: #0d1117;
    overflow: hidden;
}

/* ================================================================
   CODE PANEL — 70% — LEFT SIDE
   ================================================================ */
.codexa-code {
    width: 70%;
    display: flex;
    flex-direction: column;
    background: #0d1117;
    border-right: 1px solid #21262d;
}

/* ── Code Header (logo + actions + tabs) ────────────────────── */
.codexa-code__header {
    display: flex;
    flex-direction: column;
    background: #161b22;
    border-bottom: 1px solid #21262d;
    min-height: 0;
}

.codexa-code__header-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid #21262d;
}

.codexa-code__logo {
    font-size: 13px;
    font-weight: 700;
    color: #58a6ff;
    letter-spacing: .3px;
}

.codexa-code__actions {
    display: flex;
    gap: 4px;
}

.codexa-btn--ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #8b949e;
    cursor: pointer;
    transition: all .15s;
}
.codexa-btn--ghost:hover {
    background: #21262d;
    color: #c9d1d9;
}

/* ── Tabs row ───────────────────────────────────────────────── */
.codexa-code__tabs {
    display: flex;
    align-items: center;
    overflow-x: auto;
    gap: 0;
    min-height: 36px;
}

.codexa-code__placeholder-tab {
    padding: 8px 16px;
    font-size: 12px;
    color: #484f58;
    letter-spacing: .2px;
}

.codexa-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 12px;
    color: #8b949e;
    cursor: pointer;
    border-right: 1px solid #21262d;
    white-space: nowrap;
    transition: all .12s;
    user-select: none;
    position: relative;
}
.codexa-tab:hover {
    color: #c9d1d9;
    background: #0d1117;
}
.codexa-tab--active {
    color: #c9d1d9;
    background: #0d1117;
}
.codexa-tab--active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #58a6ff;
}
.codexa-tab__icon { font-size: 14px; }

/* ── Workspace (filetree + code) ────────────────────────────── */
.codexa-code__workspace {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── File tree ──────────────────────────────────────────────── */
.codexa-filetree {
    width: 220px;
    min-width: 180px;
    background: #0d1117;
    border-right: 1px solid #21262d;
    overflow-y: auto;
    padding: 0;
    flex-shrink: 0;
}

.codexa-filetree__title {
    padding: 10px 16px 6px;
    font-size: 11px;
    font-weight: 600;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.codexa-filetree__empty {
    padding: 20px 16px;
    color: #484f58;
    font-size: 12px;
}

.codexa-filetree__folder {
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 600;
    color: #8b949e;
    margin-top: 4px;
}
.codexa-filetree__folder:first-child { margin-top: 0; }

.codexa-filetree__file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px 4px 28px;
    font-size: 12px;
    color: #8b949e;
    cursor: pointer;
    transition: all .1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 2px solid transparent;
}
.codexa-filetree__file:hover {
    background: #161b22;
    color: #c9d1d9;
}
.codexa-filetree__file--active {
    background: #161b22;
    color: #c9d1d9;
    border-left-color: #58a6ff;
}

.codexa-filetree__file-icon {
    font-size: 13px;
    flex-shrink: 0;
}

/* ── Code body ──────────────────────────────────────────────── */
.codexa-code__body {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    background: #0d1117;
}

.codexa-code__filepath {
    padding: 6px 20px;
    font-size: 11px;
    color: #484f58;
    background: #0d1117;
    border-bottom: 1px solid #21262d;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    display: none;
}
.codexa-code__filepath.visible { display: block; }

#codexaCode {
    flex: 1;
    margin: 0;
    padding: 20px 24px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.75;
    color: #c9d1d9;
    white-space: pre-wrap;
    word-break: break-word;
    tab-size: 4;
    background: transparent;
}
#codexaCode code { font-family: inherit; color: inherit; }

/* ── Status bar ─────────────────────────────────────────────── */
.codexa-code__statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 24px;
    background: #161b22;
    border-top: 1px solid #21262d;
    font-size: 11px;
    color: #484f58;
}

/* ================================================================
   CHAT PANEL — 30% — RIGHT SIDE
   ================================================================ */
.codexa-chat {
    width: 30%;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    background: #161b22;
}

/* ── Chat Header ────────────────────────────────────────────── */
.codexa-chat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #21262d;
    min-height: 44px;
}

.codexa-chat__header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.codexa-chat__title {
    font-size: 13px;
    font-weight: 600;
    color: #c9d1d9;
}

.codexa-credits-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    background: #21262d;
    border: 1px solid #30363d;
    border-radius: 20px;
    font-size: 11px;
    color: #8b949e;
    font-weight: 500;
    white-space: nowrap;
}
.codexa-credits--low {
    color: #f85149 !important;
    border-color: rgba(248,81,73,.4) !important;
    background: rgba(248,81,73,.1) !important;
    animation: codexaPulse 2s infinite;
}
@keyframes codexaPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
}

.codexa-btn--new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #30363d;
    border-radius: 6px;
    background: transparent;
    color: #8b949e;
    cursor: pointer;
    transition: all .15s;
}
.codexa-btn--new:hover {
    background: #21262d;
    color: #c9d1d9;
    border-color: #8b949e;
}

/* ── Messages ───────────────────────────────────────────────── */
.codexa-chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.codexa-msg {
    display: flex;
    max-width: 100%;
}
.codexa-msg--user { justify-content: flex-end; }
.codexa-msg--ai   { justify-content: flex-start; }

.codexa-msg__bubble {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
    word-break: break-word;
    white-space: pre-wrap;
    max-width: 90%;
}

.codexa-msg--user .codexa-msg__bubble {
    background: #1f6feb;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.codexa-msg--ai .codexa-msg__bubble {
    background: #21262d;
    color: #c9d1d9;
    border: 1px solid #30363d;
    border-bottom-left-radius: 4px;
}

.codexa-msg--ai .codexa-msg__bubble small {
    display: block;
    margin-top: 6px;
    color: #8b949e;
    font-size: 11px;
}

/* ── Typing indicator ───────────────────────────────────────── */
.codexa-typing {
    display: flex;
    gap: 5px;
    padding: 12px 16px;
    background: #21262d;
    border: 1px solid #30363d;
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    width: fit-content;
}
.codexa-typing span {
    width: 6px;
    height: 6px;
    background: #58a6ff;
    border-radius: 50%;
    animation: codexaBounce .6s infinite alternate;
}
.codexa-typing span:nth-child(2) { animation-delay: .2s; }
.codexa-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes codexaBounce {
    to { opacity: .2; transform: translateY(-5px); }
}

/* ── Progress bar ───────────────────────────────────────────── */
.codexa-progress {
    padding: 10px 16px;
    background: #0d1117;
    border-top: 1px solid #21262d;
}

.codexa-progress__bar {
    height: 3px;
    background: #21262d;
    border-radius: 2px;
    overflow: hidden;
}

.codexa-progress__fill {
    height: 100%;
    width: 0%;
    background: #58a6ff;
    border-radius: 2px;
    transition: width .5s ease;
}

.codexa-progress__text {
    font-size: 11px;
    color: #58a6ff;
    margin-top: 6px;
    font-weight: 500;
}

/* ── Input area ─────────────────────────────────────────────── */
.codexa-chat__input-wrapper {
    padding: 12px 16px;
    border-top: 1px solid #21262d;
    background: #0d1117;
}

.codexa-chat__input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 12px;
    padding: 8px 8px 8px 14px;
    transition: border-color .2s;
}
.codexa-chat__input-row:focus-within {
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(88,166,255,.12);
}

.codexa-chat__textarea {
    flex: 1;
    min-height: 20px;
    max-height: 120px;
    resize: none;
    border: none;
    background: transparent;
    color: #c9d1d9;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    outline: none;
    padding: 2px 0;
}
.codexa-chat__textarea::placeholder { color: #484f58; }

.codexa-chat__send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #1f6feb;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}
.codexa-chat__send:hover { background: #388bfd; }
.codexa-chat__send:active { transform: scale(.94); }
.codexa-chat__send:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* ── Footer (model) ─────────────────────────────────────────── */
.codexa-chat__footer {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.codexa-chat__model-select {
    width: 100%;
    font-size: 11px;
    padding: 5px 8px;
    border: 1px solid #30363d;
    border-radius: 6px;
    background: #161b22;
    color: #8b949e;
    cursor: pointer;
    outline: none;
    font-family: inherit;
    transition: border-color .2s;
}
.codexa-chat__model-select:focus { border-color: #58a6ff; }

/* ── Scrollbars (thin) ──────────────────────────────────────── */
.codexa-chat__messages::-webkit-scrollbar,
.codexa-code__body::-webkit-scrollbar,
.codexa-filetree::-webkit-scrollbar,
.codexa-code__tabs::-webkit-scrollbar {
    width: 5px; height: 5px;
}
.codexa-chat__messages::-webkit-scrollbar-track,
.codexa-code__body::-webkit-scrollbar-track,
.codexa-filetree::-webkit-scrollbar-track {
    background: transparent;
}
.codexa-chat__messages::-webkit-scrollbar-thumb,
.codexa-code__body::-webkit-scrollbar-thumb,
.codexa-filetree::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 3px;
}
.codexa-code__tabs::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 3px;
}

/* ================================================================
   DIFF VIEW — inline diff with red/green lines
   ================================================================ */

/* ── Diff container ─────────────────────────────────────────── */
.codexa-diff {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.7;
    padding: 0;
    background: #0d1117;
}

.codexa-diff__nochange {
    display: block;
    padding: 40px 24px;
    color: #484f58;
    font-family: inherit;
    text-align: center;
}

/* ── Diff lines ─────────────────────────────────────────────── */
.codexa-diff__line {
    display: flex;
    min-height: 22px;
    white-space: pre;
}

.codexa-diff__line--equal {
    background: transparent;
    color: #8b949e;
}

.codexa-diff__line--removed {
    background: rgba(248, 81, 73, .12);
    color: #ffa198;
}

.codexa-diff__line--added {
    background: rgba(63, 185, 80, .12);
    color: #7ee787;
}

.codexa-diff__gutter {
    display: inline-block;
    width: 48px;
    min-width: 48px;
    padding: 0 8px 0 12px;
    text-align: right;
    color: #484f58;
    font-size: 12px;
    user-select: none;
    flex-shrink: 0;
}

.codexa-diff__line--removed .codexa-diff__gutter {
    color: #f8514980;
}
.codexa-diff__line--added .codexa-diff__gutter {
    color: #3fb95080;
}

.codexa-diff__prefix {
    display: inline-block;
    width: 20px;
    min-width: 20px;
    text-align: center;
    font-weight: 700;
    user-select: none;
    flex-shrink: 0;
}

.codexa-diff__line--removed .codexa-diff__prefix { color: #f85149; }
.codexa-diff__line--added .codexa-diff__prefix   { color: #3fb950; }
.codexa-diff__line--equal .codexa-diff__prefix    { color: transparent; }

.codexa-diff__text {
    flex: 1;
    padding-right: 16px;
    tab-size: 4;
}

.codexa-diff__separator {
    padding: 4px 0;
    text-align: center;
    color: #30363d;
    font-size: 12px;
    background: #161b22;
    border-top: 1px solid #21262d;
    border-bottom: 1px solid #21262d;
    user-select: none;
}

/* ── Diff scrollbar ─────────────────────────────────────────── */
.codexa-diff::-webkit-scrollbar { width: 5px; height: 5px; }
.codexa-diff::-webkit-scrollbar-track { background: transparent; }
.codexa-diff::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }

/* ── Tab badges (N = new, M = modified) ─────────────────────── */
.codexa-tab__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 6px;
    line-height: 1;
}

.codexa-tab__badge--new {
    background: rgba(63, 185, 80, .2);
    color: #3fb950;
}

.codexa-tab__badge--mod {
    background: rgba(210, 153, 34, .2);
    color: #d29922;
}

/* ── File tree in diff mode ─────────────────────────────────── */
.codexa-filetree__file--modified {
    color: #d29922 !important;
}

.codexa-filetree__file--new {
    color: #3fb950 !important;
}

/* ── Review bar (replaces status bar during diff) ───────────── */
.codexa-code__statusbar--review {
    height: auto;
    padding: 0;
    background: #161b22;
    border-top: 1px solid #30363d;
}

.codexa-review {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    gap: 12px;
}

.codexa-review__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #8b949e;
    font-weight: 500;
}

.codexa-review__label svg {
    color: #58a6ff;
    flex-shrink: 0;
}

.codexa-review__actions {
    display: flex;
    gap: 8px;
}

.codexa-review__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border: 1px solid #30363d;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all .15s;
}

.codexa-review__btn--accept {
    background: rgba(63, 185, 80, .15);
    color: #3fb950;
    border-color: rgba(63, 185, 80, .4);
}
.codexa-review__btn--accept:hover {
    background: rgba(63, 185, 80, .25);
    border-color: #3fb950;
}

.codexa-review__btn--reject {
    background: rgba(248, 81, 73, .1);
    color: #f85149;
    border-color: rgba(248, 81, 73, .3);
}
.codexa-review__btn--reject:hover {
    background: rgba(248, 81, 73, .2);
    border-color: #f85149;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    #codexa-app {
        flex-direction: column;
        height: 100vh;
    }
    .codexa-code {
        width: 100%;
        height: 60%;
        border-right: none;
        border-bottom: 1px solid #21262d;
    }
    .codexa-chat {
        width: 100%;
        height: 40%;
        min-width: 0;
    }
    .codexa-filetree {
        width: 140px;
        min-width: 120px;
    }
}