/* ==========================================================================
   HIDDEN TERMINAL — a tmux-style shell that slides up from a bar at the bottom
   of every page. Pure presentation; all behaviour lives in terminal.js.
   ========================================================================== */

:root {
    --term-bg: #0b0f17;
    --term-fg: #c8d3e0;
    --term-dim: #5b6b7f;
    --term-green: #7ee787;
    --term-accent: #58a6ff;
    --term-status: #16a34a;
    --term-status-fg: #02130a;
    --term-height: 70vh;
}

/* ---- The slide-up handle bar (always visible, pinned to the bottom) ---- */
.term-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.25));
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    color: var(--term-dim);
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    cursor: grab;
    user-select: none;
    touch-action: none;
    transition: color 0.2s ease, background 0.2s ease;
}

.term-bar:hover {
    color: var(--term-fg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.3));
}

.term-bar.dragging {
    cursor: grabbing;
}

.term-bar-grip {
    letter-spacing: 0.2em;
    color: var(--term-dim);
}

/* Dark fill shown behind the panel while the on-screen keyboard is up, so the
   light page never peeks through (e.g. gaps in iOS's floating keyboard toolbar).
   Sits below the panel; only visible in regions the panel doesn't cover. */
.term-backdrop {
    position: fixed;
    inset: 0;
    z-index: 8999;
    background: var(--term-bg);
    display: none;
}

.term-backdrop.show {
    display: block;
}

/* While the mobile keyboard is open, paint the page's own background dark. The
   body always fills the whole screen (including behind the keyboard, where iOS
   renders the page through the gaps in its floating toolbar), so this is what
   reliably kills the light peek-through — fixed-position layers don't reach
   behind the keyboard on iOS. */
html.term-kbd-open body {
    background-color: var(--term-bg);
}

/* ---- The terminal panel itself ---- */
.term-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--term-height);
    max-height: 92vh;
    z-index: 9001;
    display: flex;
    flex-direction: column;
    background: var(--term-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.6);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: var(--font-mono, monospace);
}

.term-panel.open {
    transform: translateY(0);
}

/* While dragging we kill the transition so the panel tracks the pointer 1:1 */
.term-panel.no-anim {
    transition: none;
}

/* Drag handle along the top edge of the open panel.
   Drag to resize; click or pull it down to collapse the terminal. */
.term-resize {
    height: 16px;
    cursor: ns-resize;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
}

.term-resize-grip {
    width: 44px;
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.22);
    transition: background 0.2s ease, width 0.2s ease;
}

.term-resize:hover {
    background: rgba(88, 166, 255, 0.16);
}

.term-resize:hover .term-resize-grip {
    background: var(--term-accent);
    width: 60px;
}

/* Scrollback */
.term-screen {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.85rem 1rem 0.4rem;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--term-fg);
    white-space: pre-wrap;
    word-break: break-word;
}

.term-screen::-webkit-scrollbar {
    width: 9px;
}

.term-screen::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
}

.term-line {
    white-space: pre-wrap;
}

.term-prompt-user {
    color: var(--term-green);
}

.term-prompt-host {
    color: var(--term-green);
}

.term-prompt-path {
    color: var(--term-accent);
}

.term-err {
    color: #ff7b72;
}

.term-muted {
    color: var(--term-dim);
}

.term-ok {
    color: var(--term-green);
}

/* Active input row */
.term-inputrow {
    display: flex;
    align-items: baseline;
    padding: 0.1rem 1rem 0.9rem;
    font-size: 0.86rem;
}

.term-inputrow .term-ps1 {
    flex: 0 0 auto;
    white-space: pre;
}

.term-input {
    flex: 1 1 auto;
    background: transparent;
    border: none;
    outline: none;
    color: var(--term-fg);
    font-family: inherit;
    font-size: inherit;
    caret-color: var(--term-green);
    padding: 0;
    margin-left: 0.4ch;
}

/* tmux-style status bar */
.term-status {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 22px;
    padding: 0 0.6rem;
    background: var(--term-status);
    color: var(--term-status-fg);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.term-status .term-status-left {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.term-status .term-window {
    background: rgba(0, 0, 0, 0.22);
    padding: 0 0.45rem;
    border-radius: 2px;
}

.term-status .term-session {
    background: var(--term-status-fg);
    color: var(--term-green);
    padding: 0 0.5rem;
    font-weight: 700;
}

/* ---- nano editor overlay ---- */
.term-nano {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    background: var(--term-bg);
    z-index: 5;
}

.term-nano.open {
    display: flex;
}

.term-nano-top {
    flex: 0 0 auto;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c8d3e0;
    color: #0b0f17;
    font-size: 0.74rem;
    font-weight: 600;
}

.term-nano-area {
    flex: 1 1 auto;
    width: 100%;
    resize: none;
    border: none;
    outline: none;
    background: var(--term-bg);
    color: var(--term-fg);
    font-family: var(--font-mono, monospace);
    font-size: 0.86rem;
    line-height: 1.5;
    padding: 0.6rem 1rem;
}

.term-nano-area[readonly] {
    color: var(--term-dim);
}

.term-nano-msg {
    flex: 0 0 auto;
    min-height: 18px;
    padding: 0 1rem;
    font-size: 0.74rem;
    color: var(--term-green);
}

.term-nano-keys {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.4rem;
    padding: 0.3rem 1rem 0.5rem;
    font-size: 0.74rem;
    color: var(--term-fg);
}

.term-nano-keys b {
    background: #c8d3e0;
    color: #0b0f17;
    padding: 0 0.25rem;
    font-weight: 700;
    margin-right: 0.35rem;
}

/* ==========================================================================
   MARKDOWN RENDERING — shared by the in-terminal `cat` and the view.html page.
   ========================================================================== */
.markdown-body {
    color: var(--text-secondary, #94a3b8);
    line-height: 1.7;
    font-size: 0.95rem;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
    color: var(--text-primary, #e2e8f0);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 1.6rem 0 0.8rem;
    line-height: 1.3;
}

.markdown-body h1 {
    font-size: 1.7rem;
}

.markdown-body h2 {
    font-size: 1.3rem;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    padding-bottom: 0.35rem;
}

.markdown-body h3 {
    font-size: 1.1rem;
}

.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body blockquote,
.markdown-body table,
.markdown-body pre {
    margin: 0 0 1rem;
}

.markdown-body a {
    color: var(--term-accent, #58a6ff);
    text-decoration: none;
}

.markdown-body a:hover {
    text-decoration: underline;
}

.markdown-body strong {
    color: var(--text-primary, #e2e8f0);
    font-weight: 600;
}

.markdown-body ul,
.markdown-body ol {
    padding-left: 1.4rem;
}

.markdown-body li {
    margin-bottom: 0.35rem;
}

.markdown-body code {
    font-family: var(--font-mono, monospace);
    font-size: 0.85em;
    background: rgba(255, 255, 255, 0.06);
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
    color: var(--text-primary, #e2e8f0);
}

.markdown-body pre {
    background: #0b0f17;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    overflow-x: auto;
}

.markdown-body pre code {
    background: none;
    padding: 0;
}

.markdown-body blockquote {
    border-left: 3px solid var(--border-color, rgba(255, 255, 255, 0.12));
    padding-left: 1rem;
    color: var(--text-muted, #64748b);
    font-style: italic;
}

.markdown-body hr {
    border: none;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    margin: 1.5rem 0;
}

.markdown-body table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.88rem;
}

.markdown-body th,
.markdown-body td {
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    padding: 0.45rem 0.7rem;
    text-align: left;
}

.markdown-body th {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary, #e2e8f0);
}

/* Markdown rendered inside the terminal screen: trim the outer margins and
   re-skin to the dark terminal palette (the shared .markdown-body otherwise
   inherits the light page theme, which would be invisible on the dark shell). */
.term-screen .markdown-body {
    margin: 0.2rem 0 0.6rem;
    color: var(--term-fg);
    font-family: var(--font-mono, monospace);
    font-size: 0.86rem;
}

.term-screen .markdown-body> :first-child {
    margin-top: 0;
}

.term-screen .markdown-body h1,
.term-screen .markdown-body h2,
.term-screen .markdown-body h3,
.term-screen .markdown-body h4 {
    color: #fff;
}

.term-screen .markdown-body h2 {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.term-screen .markdown-body a {
    color: var(--term-accent);
}

.term-screen .markdown-body strong {
    color: #fff;
}

.term-screen .markdown-body code {
    background: rgba(255, 255, 255, 0.10);
    color: var(--term-green);
}

.term-screen .markdown-body pre {
    background: #060910;
    border-color: rgba(255, 255, 255, 0.12);
}

.term-screen .markdown-body pre code {
    color: var(--term-fg);
}

.term-screen .markdown-body blockquote {
    border-left-color: rgba(255, 255, 255, 0.2);
    color: var(--term-dim);
}

.term-screen .markdown-body hr {
    border-top-color: rgba(255, 255, 255, 0.12);
}

.term-screen .markdown-body th,
.term-screen .markdown-body td {
    border-color: rgba(255, 255, 255, 0.14);
}

.term-screen .markdown-body th {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

@media (max-width: 580px) {
    :root {
        --term-height: 80vh;
    }
}