:root {
    --editor-drawer-top: 0px;
    --editor-drawer-width: 380px;
    --editor-drawer-left-width: 380px;
    --editor-drawer-right-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;
}

/* The drawer wrapper itself is just a logical group — its handle and
   panel children each use their own position:fixed so they don't fight
   over a shared flex container (which caused the right-drawer panel to
   overlap and steal clicks from its handle). */
.editor-drawer {
    pointer-events: none;
    color: var(--editor-drawer-fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
}

.editor-drawer-handle {
    position: fixed;
    top: var(--editor-drawer-top, 0);
    bottom: var(--editor-drawer-bottom, 0);
    width: var(--editor-drawer-handle-width);
    background: var(--editor-drawer-handle-bg);
    z-index: 50;
    pointer-events: auto;
    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-left .editor-drawer-handle {
    left: 0;
    border-right: 1px solid var(--editor-drawer-border);
}
.editor-drawer-right .editor-drawer-handle {
    right: 0;
    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 {
    position: fixed;
    top: var(--editor-drawer-top, 0);
    bottom: var(--editor-drawer-bottom, 0);
    max-width: 95vw;
    background: var(--editor-drawer-bg);
    z-index: 51;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease;
    overflow: hidden;
}
.editor-drawer-left .editor-drawer-panel {
    left: 0;
    width: var(--editor-drawer-left-width);
    transform: translateX(-100%);
    box-shadow: 2px 0 8px rgba(0,0,0,0.35);
}
.editor-drawer-right .editor-drawer-panel {
    right: 0;
    width: var(--editor-drawer-right-width);
    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.resizing .editor-drawer-panel { transition: none; }

.editor-drawer-resize {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 60;
    background: transparent;
    transition: background-color 0.15s;
}
.editor-drawer-left .editor-drawer-resize { right: 0; }
.editor-drawer-right .editor-drawer-resize { left: 0; }
.editor-drawer-resize:hover,
.editor-drawer.resizing .editor-drawer-resize {
    background: rgba(106, 159, 214, 0.5);
}

.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; }

/* Back to the record the quote belongs to.
   The editor is a full-page takeover with no chrome of its own, so this is the only way
   back that does not go through the browser's history. Pinned to the top of the pane and
   sticky, because the embedded record form is as tall as its type makes it. */
.editor-drawer-backbar {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: -16px -16px 12px;
    padding: 8px 12px;
    background: #f5f6f7;
    border-bottom: 1px solid #ddd;
}
.editor-drawer-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #222222;
    text-decoration: none;
}
.editor-drawer-back:hover { text-decoration: underline; }
.editor-drawer-back svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

/* 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;
}

/* Pinned: the panel covers the handle area at the edge, so the canvas
   only needs to clear the panel's width (not handle + panel). */
body.editor-drawer-left-pinned #sheet_background {
    padding-left: var(--editor-drawer-left-width);
}
body.editor-drawer-right-pinned #sheet_background {
    padding-right: var(--editor-drawer-right-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;
    }
}

/* Indeterminate progress bar — used while the usage heatmap is computing
   (a single server call with no real % to report). */
.inh-progress {
    height: 6px;
    background: #d8dde2;
    border-radius: 3px;
    overflow: hidden;
}
.inh-progress > .inh-progress-bar {
    height: 100%;
    width: 40%;
    border-radius: 3px;
    background: var(--editor-drawer-active, #6a9fd6);
    animation: inh-progress-slide 1.1s ease-in-out infinite;
}
@keyframes inh-progress-slide {
    0%   { margin-left: -40%; }
    100% { margin-left: 100%; }
}