/* mcp demo */

.mcp-help {
    max-width: 760px;
    margin: 1rem auto;
    padding: 1rem 1.4rem;
    text-align: left;
    background: #161b22;
    border: 1px solid #f0883e;
    border-radius: 8px;
}

.mcp-help h2 { margin: 0 0 0.5rem; font-size: 1.1rem; color: #f0883e; }
.mcp-help li { margin: 0.35rem 0; }

/* Password form for remote access */
.mcp-login { max-width: 460px; }
.mcp-login-row { display: flex; gap: 0.5rem; margin: 0.8rem 0 0.2rem; }
.mcp-login-row input {
    flex: 1;
    min-width: 0;
    padding: 0.45rem 0.6rem;
    background: #0d1117;
    color: #e6edf3;
    border: 1px solid #30363d;
    border-radius: 6px;
    font: inherit;
}
.mcp-login-row input:focus-visible { outline: 2px solid #58a6ff; outline-offset: 1px; }

.mcp-session {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.85rem;
    color: #8b949e;
}

.mcp-servers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin: 1rem auto;
}

.mcp-server {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 170px;
    padding: 0.6rem 0.9rem;
    text-align: left;
}

.mcp-server small { color: #8b949e; font-size: 0.72rem; }
.mcp-server.active { border-color: #f0883e; }
.mcp-server .state { margin-top: 0.2rem; font-size: 0.75rem; }
.mcp-server .state.ok { color: #3fb950; }
.mcp-server .state.err { color: #f85149; }

.mcp-info {
    max-width: 1100px;
    margin: 0 auto 0.8rem;
    padding: 0.6rem 0.9rem;
    text-align: left;
    font-size: 0.82rem;
    color: #8b949e;
    background: #161b22;
    border-radius: 6px;
}

.mcp-info b { color: #e6edf3; font-weight: 600; }
.mcp-info .warn { color: #e3b341; }

.mcp-tabs {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    margin-bottom: 0.8rem;
}

.mcp-tabs [aria-selected="true"] { border-color: #f0883e; color: #f0883e; }

.mcp-panel {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
}

/* The page's blocks set display: flex/grid, which would beat the hidden attribute */
#container [hidden] { display: none !important; }

.mcp-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 560px;
    overflow: auto;
    border: 1px solid #30363d;
    border-radius: 6px;
}

.mcp-list li {
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid #21262d;
    cursor: pointer;
}

.mcp-list li.active { background: rgba(240, 136, 62, 0.15); }
.mcp-list li b { display: block; font-size: 0.85rem; }
.mcp-list li small { color: #8b949e; font-size: 0.72rem; }
.mcp-list .section { padding: 0.35rem 0.7rem; color: #8b949e; font-size: 0.72rem; background: #161b22; cursor: default; }

.mcp-form {
    display: grid;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    border: 1px solid #30363d;
    border-radius: 6px;
}

.mcp-form h3 { margin: 0; font-size: 1rem; }
.mcp-form .desc { margin: 0; color: #8b949e; font-size: 0.8rem; }
.mcp-form label { display: grid; gap: 0.2rem; font-size: 0.82rem; }
.mcp-form label .req { color: #f85149; }
.mcp-form label small { color: #8b949e; }
.mcp-form input[type="text"], .mcp-form input[type="number"], .mcp-form select, .mcp-form textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 0.35rem 0.5rem;
    background: #0d1117;
    color: #e6edf3;
    border: 1px solid #30363d;
    border-radius: 4px;
    font: inherit;
}
.mcp-form textarea { font-family: 'Cascadia Code', 'Fira Code', monospace; font-size: 0.8rem; }
.mcp-form .check { display: flex; align-items: center; gap: 0.4rem; }
.mcp-form .field-error { color: #f85149; font-size: 0.75rem; }
.mcp-form .actions { display: flex; gap: 0.6rem; align-items: center; }

.mcp-result { margin-top: 0.8rem; }
.mcp-result .head { font-size: 0.8rem; color: #8b949e; margin-bottom: 0.4rem; }
.mcp-result .head.err { color: #f85149; }
.mcp-result pre {
    margin: 0 0 0.5rem;
    padding: 0.6rem 0.8rem;
    max-height: 360px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    font-size: 0.8rem;
}
.mcp-result img { max-width: 100%; image-rendering: pixelated; border: 1px solid #30363d; border-radius: 4px; }

.mcp-log-panel { grid-template-columns: 1fr; }
.mcp-log-tools { display: flex; gap: 0.8rem; align-items: center; font-size: 0.82rem; }
.mcp-log {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 480px;
    overflow: auto;
    border: 1px solid #30363d;
    border-radius: 6px;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.72rem;
}
.mcp-log li { padding: 0.3rem 0.6rem; border-bottom: 1px solid #21262d; white-space: pre-wrap; word-break: break-all; }
.mcp-log .dir { display: inline-block; min-width: 4.5em; color: #8b949e; }
.mcp-log .out .dir { color: #58a6ff; }
.mcp-log .in .dir { color: #3fb950; }
.mcp-log .event .dir { color: #e3b341; }
.mcp-raw { display: flex; gap: 0.6rem; align-items: flex-start; }
.mcp-raw textarea {
    flex: 1;
    box-sizing: border-box;
    padding: 0.4rem 0.6rem;
    background: #0d1117;
    color: #e6edf3;
    border: 1px solid #30363d;
    border-radius: 4px;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.78rem;
}

@media (max-width: 760px) {
    .mcp-panel { grid-template-columns: 1fr; }
    .mcp-list { max-height: 240px; }
    .mcp-raw { flex-direction: column; }
    .mcp-raw textarea { width: 100%; }
}