/* Frame: the Emacs chrome — menu bar, mode line, and minibuffer. */

#frame { display: flex; flex-direction: column; height: 100vh; }

/* ---------- menu bar ---------- */

#menubar {
    display: flex; align-items: center; gap: 2px;
    background: var(--menubar-bg);
    border-bottom: 1px solid var(--border);
    padding: 3px 8px;
    z-index: 30;
}
.brand { color: var(--dim); padding: 0 10px 0 6px; font-weight: bold; }

.menu { position: relative; }
.menu-toggle {
    background: none; border: none; color: var(--fg);
    font: inherit; font-size: 13px; padding: 4px 10px;
    border-radius: 4px; cursor: pointer;
}
.menu-toggle:hover { background: var(--highlight); color: var(--accent); }
.menu-items {
    display: none; position: absolute; top: 100%; left: 0;
    min-width: 250px; background: var(--menubar-bg);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 4px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}
.menu.open .menu-items { display: block; }
.menu-items button {
    display: flex; justify-content: space-between; align-items: center;
    gap: 32px; width: 100%; text-align: left;
    background: none; border: none; color: var(--fg);
    font: inherit; font-size: 13px; padding: 6px 10px;
    border-radius: 3px; cursor: pointer;
}
.menu-items button:hover { background: var(--accent); color: #fff; }
.menu-item-name { white-space: nowrap; }
.menu-item-kbd { color: var(--dim); font-size: 12px; white-space: nowrap; }
.menu-items button:hover .menu-item-kbd { color: rgba(255, 255, 255, 0.75); }
.menu-sep { border-top: 1px solid var(--border); margin: 4px 0; }

/* ---------- mode line ---------- */

#modeline {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--modeline-bg); color: var(--modeline-fg);
    font-size: 13px; font-weight: bold;
    padding: 2px 10px; border-top: 1px solid #000;
    user-select: none; cursor: default;
}
#mode-left { white-space: pre; }
#mode-left:hover { text-decoration: underline; cursor: pointer; }
#mode-right { white-space: pre; opacity: 0.8; }

/* ---------- minibuffer ---------- */

#minibuffer {
    display: flex; align-items: center; gap: 8px;
    background: var(--window-bg); color: var(--fg);
    border-top: 1px solid var(--border);
    padding: 4px 10px; min-height: 32px;
}
#echo { color: var(--dim); flex: 1; white-space: pre; }
#echo:not(:empty) { color: #ffd28f; }
#prompt { color: var(--accent); }
#prompt, #prompt-input { display: none; }
#minibuffer.prompting #prompt { display: inline; }
#minibuffer.prompting #prompt-input { display: inline-block; }
#prompt-input {
    flex: 0 1 340px; min-width: 150px;
    background: #05070a; color: var(--fg);
    border: 1px solid var(--border); border-radius: 3px;
    font: inherit; font-size: 13px; padding: 2px 6px;
    outline: none;
}
#prompt-input:focus { border-color: var(--accent); }
#completions { flex: 1; color: var(--dim); white-space: pre; overflow: hidden; text-overflow: ellipsis; }

/* ---------- scroll bar toggle ---------- */

body.no-scrollbars .buffer { scrollbar-width: none; }
body.no-scrollbars .buffer::-webkit-scrollbar { display: none; }