:root {
    --editor-drawer-top: 0px;
    --editor-drawer-width: 380px;
    --editor-drawer-handle-width: 28px;
    --editor-drawer-bg: #2a2c2e;
    --editor-drawer-fg: #e0e0e0;
    --editor-drawer-border: #444;
    --editor-drawer-active: #6a9fd6;
    --editor-drawer-handle-bg: #3a3c3e;
    --editor-drawer-handle-bg-hover: #4a4c4e;
    --editor-drawer-header-bg: #1f2123;
    --editor-drawer-pane-bg: #f5f6f7;
    --editor-drawer-pane-fg: #333;
}

.editor-drawer {
    position: fixed;
    top: var(--editor-drawer-top, 0);
    bottom: var(--editor-drawer-bottom, 0);
    z-index: 50;
    display: flex;
    pointer-events: none;
    color: var(--editor-drawer-fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
}

.editor-drawer-left { left: 0; }
.editor-drawer-right { right: 0; flex-direction: row-reverse; }

.editor-drawer-handle {
    pointer-events: auto;
    width: var(--editor-drawer-handle-width);
    background: var(--editor-drawer-handle-bg);
    border-right: 1px solid var(--editor-drawer-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    transition: background-color 0.15s, color 0.15s;
    user-select: none;
}
.editor-drawer-right .editor-drawer-handle {
    border-right: none;
    border-left: 1px solid var(--editor-drawer-border);
}
.editor-drawer-handle:hover {
    background: var(--editor-drawer-handle-bg-hover);
    color: #fff;
}
.editor-drawer.open .editor-drawer-handle { display: none; }

.editor-drawer-handle-label {
    writing-mode: vertical-rl;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.editor-drawer-panel {
    pointer-events: auto;
    width: var(--editor-drawer-width);
    max-width: 95vw;
    background: var(--editor-drawer-bg);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 2px 0 8px rgba(0,0,0,0.35);
    overflow: hidden;
}
.editor-drawer-right .editor-drawer-panel {
    transform: translateX(100%);
    box-shadow: -2px 0 8px rgba(0,0,0,0.35);
}
.editor-drawer.open .editor-drawer-panel { transform: translateX(0); }

.editor-drawer-header {
    display: flex;
    align-items: stretch;
    background: var(--editor-drawer-header-bg);
    border-bottom: 1px solid var(--editor-drawer-border);
    flex: 0 0 auto;
}

.editor-drawer-tabs {
    flex: 1;
    display: flex;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.editor-drawer-tab {
    flex: 1 1 auto;
    background: transparent;
    border: none;
    color: #aaa;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
    white-space: nowrap;
    font-family: inherit;
}
.editor-drawer-tab:hover { color: #fff; background: #2a2c2e; }
.editor-drawer-tab.active {
    color: var(--editor-drawer-active);
    border-bottom-color: var(--editor-drawer-active);
}

.editor-drawer-actions {
    display: flex;
    align-items: center;
    padding: 0 4px;
    gap: 2px;
    flex: 0 0 auto;
}

.editor-drawer-actions button {
    background: transparent;
    border: none;
    color: #aaa;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 3px;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.editor-drawer-actions button:hover { background: #3a3c3e; color: #fff; }
.editor-drawer-actions button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.editor-drawer.pinned .editor-drawer-pin { color: var(--editor-drawer-active); }
.editor-drawer.pinned .editor-drawer-pin svg { transform: rotate(45deg); }

.editor-drawer-body {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    background: var(--editor-drawer-pane-bg);
    color: var(--editor-drawer-pane-fg);
}

.editor-drawer-pane {
    display: none;
    height: 100%;
    overflow-y: auto;
    padding: 0;
}
.editor-drawer-pane.active { display: block; }

.editor-drawer-pane-body { padding: 16px; }

/* File-share tab fills the pane edge to edge — the legacy CSS expects
   table-cell/300px which doesn't fit our drawer layout. */
.editor-drawer-pane-fileshare {
    padding: 0 !important;
}
.editor-drawer-pane-fileshare #file_share_container {
    display: block;
    width: auto;
    border-right: none;
    background-color: #545454;
    color: #fff;
}
.editor-drawer-pane-fileshare .file_share {
    color: #fff;
}

.editor-drawer-pane.loading .editor-drawer-pane-body::before {
    content: 'Loading…';
    display: block;
    padding: 20px 0;
    text-align: center;
    color: #888;
    font-style: italic;
}

.editor-drawer-stub {
    padding: 24px 20px;
    color: #777;
    font-style: italic;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
}
.editor-drawer-stub strong { color: #444; font-style: normal; display: block; margin-bottom: 6px; }

.drawer-form-feedback {
    padding: 8px 12px;
    border-radius: 3px;
    font-size: 13px;
    margin: 0 0 12px 0;
}
.drawer-form-feedback-success {
    background: #e8f5e9;
    border: 1px solid #b6d8b9;
    color: #2e6b32;
}
.drawer-form-feedback-error {
    background: #fdecea;
    border: 1px solid #f5c2bd;
    color: #b3261e;
}

body.editor-drawer-left-pinned #sheet_background {
    padding-left: calc(var(--editor-drawer-width) + var(--editor-drawer-handle-width));
}
body.editor-drawer-right-pinned #sheet_background {
    padding-right: calc(var(--editor-drawer-width) + var(--editor-drawer-handle-width));
}

@media (max-width: 900px) {
    body.editor-drawer-left-pinned #sheet_background,
    body.editor-drawer-right-pinned #sheet_background {
        padding-left: 0;
        padding-right: 0;
    }
}