/* ==========================================================================
   Shared full-screen tool chrome — title bar (menus, theme, settings) and
   bottom status bar. Rendered by includes/header.php for every page that
   sets 'app_bar' in its app manifest; behaviour lives in
   js/shared/tool-chrome.js.

   Every colour comes from the site theme variables (site.css), so all
   eight themes — classic, mind-space, parchment, noir, corkboard,
   scarlet, blueprint, gaslight — style the chrome with no extra rules.
   ========================================================================== */

/* --------------------------------- Title bar --------------------------- */
.et-titlebar {
    position: sticky;
    top: 0;
    z-index: 220;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.3;
}
.et-tb-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    margin-right: 0.5rem;
    white-space: nowrap;
}
.et-tb-brand strong {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.et-tb-menus { display: flex; align-items: center; gap: 0.1rem; }
.et-tb-right { margin-left: auto; display: flex; align-items: center; gap: 0.35rem; }

.et-tb-menu { position: relative; }
.et-tb-menu > button {
    background: none;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--text-dim);
    font: inherit;
    font-size: 0.86rem;
    padding: 0.28rem 0.55rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.et-tb-menu > button:hover,
.et-tb-menu.open > button {
    color: var(--text);
    background: var(--accent-soft);
}
.et-tb-icon-menu > button { font-size: 1rem; padding: 0.24rem 0.45rem; }

/* The character chip doubles as "talk to the champion" */
.et-tb-char {
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-dim);
    font: inherit;
    font-size: 0.8rem;
    padding: 0.2rem 0.65rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.et-tb-char:hover { color: var(--accent); border-color: var(--accent); }

.et-tb-exit {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.95rem;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 0.2rem 0.55rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.et-tb-exit:hover { color: #ff6b6b; border-color: #ff6b6b; }

/* Dropdowns */
.et-tb-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 230;
    min-width: 215px;
    flex-direction: column;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.et-tb-menu.open .et-tb-dropdown { display: flex; }
.et-tb-right .et-tb-dropdown { left: auto; right: 0; }

.et-tb-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.42rem 0.6rem;
    border: none;
    border-radius: 7px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 0.86rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.et-tb-item:hover { background: var(--accent-soft); color: var(--accent); }
.et-tb-item.et-tb-danger:hover { background: rgba(255, 107, 107, 0.12); color: #ff6b6b; }
.et-tb-check { width: 1em; text-align: center; color: var(--accent); opacity: 0; }
.et-tb-item.checked .et-tb-check { opacity: 1; }
.et-tb-sep { height: 1px; margin: 5px 4px; background: var(--border); border: none; }

/* ⚙️ Settings dropdown */
.et-tb-settings { min-width: 250px; }
.et-tb-field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.42rem 0.6rem;
    color: var(--text-dim);
    font-size: 0.82rem;
}
.et-tb-field select {
    flex: 1;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    font: inherit;
    font-size: 0.84rem;
    padding: 0.28rem 0.4rem;
}
.et-tb-field select:focus { outline: none; border-color: var(--accent); }

/* --------------------------------- Status bar -------------------------- */
.et-statusbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 220;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.24rem 0.8rem;
    background: var(--bg-raised);
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.78rem;
    line-height: 1.4;
}
.et-sb-left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex: 1; }
.et-sb-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7ddf8a;
    box-shadow: 0 0 6px rgba(125, 223, 138, 0.8);
}
.et-sb-msg {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
}
.et-statusbar .warn { color: #ffb454; }
.et-statusbar .ok { color: #7ddf8a; }
.et-sb-right { display: flex; align-items: center; gap: 0.9rem; white-space: nowrap; }
.et-sb-seg { color: var(--text-dim); }
.et-sb-char {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-dim);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}
.et-sb-char:hover { color: var(--accent); }

/* Tool-provided widgets stay hidden until the chrome adopts them into the
   status bar (e.g. the Mind Palace "saved" indicator). */
[data-statusbar-slot]:not(.et-adopted),
[data-statusbar-message]:not(.et-adopted) { display: none; }

/* Corkboard's dim ink lands under 4.5:1 on the raised bars — brighten the
   chrome's secondary text there (scoped; the rest of the page keeps its own). */
:root[data-theme="corkboard"] .et-titlebar,
:root[data-theme="corkboard"] .et-statusbar { --text-dim: #f3e9d2; }

/* --------------------------------- Page fit ---------------------------- */
/* Flow pages get breathing room above the fixed status bar; full-canvas
   apps (overflow hidden) simply let the bar overlay the pan space. */
body.et-chrome { padding-bottom: 40px; }

/* The in-tool companion launcher sits above the status bar, not on it */
body.et-chrome #sc-launcher { bottom: 44px; }
body.et-chrome #sc-panel { bottom: 112px; }

@media (max-width: 760px) {
    .et-titlebar { padding: 0.28rem 0.5rem; }
    .et-tb-brand { margin-right: 0.15rem; }
    .et-tb-char, .et-sb-char { display: none; }
    .et-sb-right { gap: 0.6rem; }
}
@media (max-width: 560px) {
    .et-tb-brand strong { max-width: 32vw; }
    #et-sb-clock { display: none; }
}