/* =========================================================================
   Phase 11 — code-collab editor (Monaco + Yjs)
   ========================================================================= */

/* Two-column split: file tree (240) + editor pane (rest). Fills the
   workspace-body region without breaking the app shell's outer padding. */
.code-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0;
    height: calc(100vh - 64px);     /* topbar is ~64px */
    padding: 0 !important;          /* override workspace-body default */
}

/* --- File tree --- */
.code-tree {
    background: var(--color-bg-2, #f7f8fb);
    border-right: 1px solid var(--color-border, #e6e8ee);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.code-tree__head {
    padding: 14px 16px 6px;
    border-bottom: 1px solid var(--color-border);
}
.code-tree__head h3 {
    margin: 6px 0 0;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-fg-subtle);
}
.code-tree__new {
    display: flex;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
}
.code-tree__input {
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
}

.code-tree__list {
    list-style: none;
    padding: 8px 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
}
.code-tree__item a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--color-fg);
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.code-tree__item a:hover { background: rgba(255, 198, 39, 0.12); }
.code-tree__item--active a {
    background: rgba(255, 198, 39, 0.25);
    color: var(--color-fg);
    font-weight: 600;
}
.code-tree__lang {
    font-size: 10px;
    background: var(--color-panel, #e8eaf0);
    color: var(--color-fg-2);
    border-radius: 3px;
    padding: 1px 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.code-tree__path {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.code-tree__empty {
    padding: 16px;
    color: var(--color-fg-subtle);
    font-size: 13px;
    text-align: center;
}

/* --- Editor pane --- */
.code-pane {
    display: flex;
    flex-direction: column;
    background: #1e1e1e;
    overflow: hidden;
}
.code-pane__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #2b2b2b;
    color: #d4d4d4;
    border-bottom: 1px solid #1e1e1e;
    flex-shrink: 0;
}
.code-pane__title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.code-pane__path {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
}
.code-pane__lang {
    font-size: 11px;
    background: rgba(255, 198, 39, 0.20);
    color: #FFC627;
    border-radius: 3px;
    padding: 2px 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.code-pane__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.code-pane__presence,
.code-pane__save {
    font-size: 12px;
    color: #999;
}
.code-pane__menu {
    position: relative;
}
.code-pane__menu summary { list-style: none; cursor: pointer; }
.code-pane__menu summary::-webkit-details-marker { display: none; }
.code-pane__menu-body {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: #2b2b2b;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 10;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.code-pane__menu-body form { display: flex; gap: 6px; align-items: center; }
.code-pane__menu-input {
    flex: 1;
    background: #1e1e1e;
    color: #d4d4d4;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 4px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

.code-editor {
    flex: 1;
    width: 100%;
    min-height: 0;            /* allow Monaco's automaticLayout to fit */
}

.code-pane__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888;
    background: #1e1e1e;
    padding: 48px;
    text-align: center;
}
.code-pane__icon { font-size: 48px; margin-bottom: 12px; }
.code-pane__empty h2 { color: #d4d4d4; margin: 8px 0; }

/* --- Mobile fallback: stack tree above editor. --- */
@media (max-width: 720px) {
    .code-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: auto;
    }
    .code-tree {
        max-height: 240px;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }
    .code-editor {
        min-height: 50vh;
    }
}