/* 옆줄 '프로젝트' 구역과 그 창들 — templates/core/includes/sidebar_projects.html · static/js/sidebar_projects.js.
   색·여백은 옆줄 대화 목록(base-layout.css .sidebar-chat__*)의 토큰을 그대로 쓴다. */

.sidebar-projects {
    flex: 0 0 auto;
    /* '더 보기' 와 붙어 보이지 않게 위를 조금 띄운다. */
    margin-top: 14px;
    /* 프로젝트가 많아도 옆줄의 절반을 넘지 않게. 넘치면 이 안에서 굴린다. */
    max-height: 45%;
    overflow-y: auto;
    overflow-x: hidden;
    /* 가로 4px 은 위쪽 메뉴(.sidebar__groups)와 같다. 없으면 프로젝트 아이콘이 더 보기·파일보다 왼쪽으로 붙는다. */
    padding: 2px 4px 6px;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, .08));
    overscroll-behavior-y: contain;
}

.sidebar-projects__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    background: var(--sidebar-bg);
}

.sidebar-projects__toggle {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-color);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.sidebar-projects__toggle:hover {
    background: var(--sidebar-hover);
}

.sidebar-projects__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: currentColor;
}

.sidebar-projects__icon svg {
    width: 18px;
    height: 18px;
}

/* 1440 아래에서는 '더 보기'가 13px·16px 아이콘으로 줄어든다. 프로젝트 줄도 같이 줄인다.
   이 파일은 base-layout.css 보다 뒤에 읽히므로, 그 파일의 미디어 쿼리로는 못 이긴다. */
@media (max-width: 1440px) {
    .sidebar-projects__toggle {
        font-size: 13px;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .sidebar-projects__icon,
    .sidebar-projects__icon svg {
        width: 16px;
        height: 16px;
    }
}

.sidebar-projects__arrow {
    display: flex;
    margin-left: auto;
    color: var(--text-muted, #6b7280);
    transition: transform .18s ease;
}

.sidebar-projects.is-collapsed .sidebar-projects__arrow {
    transform: rotate(-90deg);
}

.sidebar-projects__add,
.sp-act {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 4px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted, #6b7280);
    text-decoration: none;
    cursor: pointer;
}

.sidebar-projects__add:hover,
.sp-act:hover {
    background: var(--sidebar-hover);
    color: var(--text-color);
}

.sp-row {
    display: flex;
    align-items: center;
    border-radius: 12px;
}

.sp-row:hover {
    background: var(--sidebar-hover);
}

.sp-row__main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px 8px 6px;
    border: 0;
    background: transparent;
    color: var(--text-color);
    font: inherit;
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.sp-row--folder .sp-row__main {
    font-size: 13.5px;
}

/* 프로젝트·폴더의 + 와 ⋯ 는 마우스를 올렸을 때만 — 대화 줄의 ⋯ 와 같은 결. */
.sp-row .sp-act {
    opacity: 0;
}

.sp-row:hover .sp-act,
.sp-row .sp-act:focus-visible {
    opacity: 1;
}

/* 손가락 화면에는 올릴 마우스가 없다 — 늘 보인다(대화 줄의 ⋯ 와 같다). */
@media (hover: none) {
    .sp-row .sp-act {
        opacity: 1;
    }
}

.sp-caret {
    flex-shrink: 0;
    display: flex;
    color: var(--text-muted, #6b7280);
    transition: transform .18s ease;
}

.sp-row.is-open > .sp-row__main > .sp-caret {
    transform: rotate(90deg);
}

.sp-glyph {
    flex-shrink: 0;
    display: flex;
    color: var(--text-muted, #6b7280);
}

.sp-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sp-children {
    margin-left: 14px;
    padding-left: 6px;
    border-left: 1px solid var(--border-color, rgba(0, 0, 0, .08));
}

.sp-children .sidebar-chat__open {
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 13.5px;
}

.sp-empty,
.sp-note {
    margin: 2px 0 6px 12px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-muted, #6b7280);
}

.sp-note .sidebar-chat__retry {
    margin-left: 4px;
}

/* 프로젝트 색 — 아이콘·고르기 칸이 같이 쓴다. */
.sp-glyph--blue { --sp-color: #3B82F6; }
.sp-glyph--green { --sp-color: #16A34A; }
.sp-glyph--orange { --sp-color: #EA580C; }
.sp-glyph--red { --sp-color: #DC2626; }
.sp-glyph--purple { --sp-color: #7C3AED; }
.sp-glyph--pink { --sp-color: #DB2777; }
.sp-glyph--teal { --sp-color: #0D9488; }
.sp-glyph--gray { --sp-color: #6B7280; }

.sp-glyph[class*="sp-glyph--"] {
    color: var(--sp-color);
}

/* ── 창 ── */
.sp-dialog {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--surface-color);
    color: var(--text-color);
    box-shadow: 0 24px 64px rgba(15, 23, 42, .22);
}

.sp-dialog::backdrop {
    background: rgba(15, 23, 42, .35);
}

.sp-dialog:not(.sp-dialog--editor) {
    width: min(400px, calc(100vw - 32px));
}

.sp-dialog__card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 20px 20px 16px;
}

.sp-dialog__title {
    margin: 0;
    font-size: 17px;
    font-weight: 650;
}

.sp-dialog__message {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-muted, #6b7280);
}

.sp-dialog__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.sp-dialog__spacer {
    flex: 1;
}

.sp-dialog__stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-field__label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
}

.sp-field__hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted, #6b7280);
}

.sp-field input[type="text"],
.sp-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: transparent;
    color: var(--text-color);
    font: inherit;
    font-size: 14px;
    resize: vertical;
}

.sp-field input[type="text"]:focus,
.sp-field textarea:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -1px;
}

.sp-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sp-swatch {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--sp-color);
    cursor: pointer;
}

.sp-swatch.is-picked {
    box-shadow: 0 0 0 2px var(--surface-color), 0 0 0 4px var(--sp-color);
}

.sp-iconpick {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: transparent;
    color: var(--sp-color);
    cursor: pointer;
}

.sp-iconpick.is-picked {
    border-color: var(--sp-color);
    background: var(--sidebar-hover);
}

.sp-files {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 180px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.sp-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    font-size: 13px;
}

.sp-file--empty {
    border-style: dashed;
    color: var(--text-muted, #6b7280);
}

.sp-file__name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sp-file__sub {
    flex-shrink: 0;
    max-width: 45%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11.5px;
    color: var(--text-muted, #6b7280);
}

.sp-file .sp-act {
    opacity: 1;
    margin-right: 0;
}

.sp-btn {
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-color);
    font: inherit;
    font-size: 13.5px;
    font-weight: 550;
    cursor: pointer;
}

.sp-btn:disabled {
    opacity: .6;
    cursor: default;
}

.sp-btn--go {
    background: var(--primary-color);
    color: #fff;
}

.sp-btn--go:hover {
    background: var(--primary-hover);
}

.sp-btn--ghost {
    border-color: var(--border-color);
}

.sp-btn--ghost:hover {
    background: var(--sidebar-hover);
}

.sp-btn--danger {
    background: #dc2626;
    color: #fff;
}

.sp-btn--danger-text {
    color: #dc2626;
}

.sp-targets {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
}

.sp-target {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-color);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.sp-target--folder {
    padding-left: 34px;
    font-size: 13.5px;
}

.sp-target:hover {
    background: var(--sidebar-hover);
}

.sp-target.is-current {
    background: var(--sidebar-active-bg);
    font-weight: 600;
}

/* 채팅 화면 머리의 '프로젝트 › 폴더' 표시(workspace_chatbot_workspace.html #ws-project-crumb). */
.ws-project-crumb {
    position: absolute;
    top: 14px;
    left: 16px;
    z-index: 46;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 120px);
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-color);
    color: var(--text-color);
    font-size: 12.5px;
    line-height: 1.2;
}

.ws-project-crumb[hidden] {
    display: none;
}

.ws-project-crumb__name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
}

.ws-project-crumb__sep {
    color: var(--text-muted, #6b7280);
}

.ws-project-crumb__folder {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-muted, #6b7280);
}

body.drawer-collapsed .sidebar-projects {
    display: none;
}

body.drawer-collapsed.mobile-sidebar-open .sidebar-projects {
    display: block;
}