/* 프로젝트: 사이드바 버튼(새 대화와 나란히)·묶음, 입력창 위 목표 띠, 목표·기준 창 */
.sidebar-new { display:flex; align-items:center; gap:6px; }
.sidebar-head .sidebar-new .primary { margin:0; white-space:nowrap; }
.sidebar-head .project-new { border-color:#d9b46e80; color:#f3d69e; background:linear-gradient(135deg,#5a452e66,#3a2e3a66); }
.sidebar-head .project-new:hover { border-color:#ecc988cc; color:#ffe7bb; }

.conv-group-label { padding:10px 14px 4px; color:#a99cb0; font-size:10px; letter-spacing:1.5px; }
.conv-group-label.project { color:#dcbc82; padding-top:2px; }
.sidebar-tabs {
  position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center;
  margin:4px 14px 10px; padding:3px; border:1px solid #d8bedf38; border-radius:999px;
  background:#18111f8c; box-shadow:inset 0 2px 6px #0007, 0 1px 0 #fff1;
  cursor:pointer; user-select:none; transition:border-color .22s ease, background .22s ease;
}
.sidebar-tabs[hidden] { display:none; }
/* Fixed header and lower rim frame the scrolling list, including mid-card scroll positions. */
.sidebar-records {
  display:flex; flex-direction:column; flex:1; min-height:0; min-width:0;
  margin:0 10px 10px; overflow:hidden; border:1px solid #d8bedf40; border-radius:14px;
  background:#21192845; box-shadow:inset 0 1px #ffffff0d,0 5px 16px #140c2526;
}
.sidebar-records-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0;
  min-height:34px; padding:5px 12px; border-bottom:1px solid #d8bedf45;
  background:linear-gradient(110deg,#654d68,#443449); color:#e0cce3;
  font-size:10px; letter-spacing:.04em; box-shadow:0 3px 10px #140c2533; z-index:1;
}
.sidebar-records-head .sidebar-clear {
  margin:0; padding:4px 6px; font-size:10px; letter-spacing:0; color:#d1bdd4;
}
.sidebar-records .conversation-list { min-height:0; padding-top:8px; padding-bottom:8px; }
.sidebar-records::after {
  content:''; flex:0 0 7px; border-top:1px solid #d8bedf45;
  background:linear-gradient(110deg,#654d68,#443449);
}
.sidebar-tabs[data-active-tab="projects"] { border-color:#e2bd7866; background:#1e161d99; }
.sidebar-tab-thumb {
  position:absolute; top:3px; bottom:3px; left:3px; width:calc((100% - 6px) / 5); border-radius:999px;
  background:linear-gradient(135deg,#b99ad859,#7c5ea066); border:1px solid #dfc3e888;
  box-shadow:0 2px 10px #0006, inset 0 1px #fff3; pointer-events:none;
  transition:transform .22s cubic-bezier(.22,1,.36,1), background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.sidebar-tabs[data-active-tab="projects"] .sidebar-tab-thumb {
  transform:translateX(100%);
  background:linear-gradient(135deg,#c89d5473,#7a5a2f80); border-color:#ecc988aa;
  box-shadow:0 2px 12px #0007, 0 0 12px #e2bd7826, inset 0 1px #fff4;
}
.sidebar-tabs[data-active-tab="routines"] { border-color:#8fcfb366; }
.sidebar-tabs[data-active-tab="routines"] .sidebar-tab-thumb {
  transform:translateX(200%);
  background:linear-gradient(135deg,#7fbfa266,#3f6e5f80); border-color:#9fd8bdaa;
  box-shadow:0 2px 12px #0007, 0 0 12px #8fcfb326, inset 0 1px #fff4;
}
.sidebar-tabs[data-active-tab="dev"] { border-color:#8fb4e666; }
.sidebar-tabs[data-active-tab="dev"] .sidebar-tab-thumb {
  transform:translateX(300%);
  background:linear-gradient(135deg,#7f9fd466,#3f527a80); border-color:#a8c4f0aa;
  box-shadow:0 2px 12px #0007, 0 0 12px #8fb4e626, inset 0 1px #fff4;
}
.sidebar-tabs[data-active-tab="categories"] { border-color:#e6a8c866; }
.sidebar-tabs[data-active-tab="categories"] .sidebar-tab-thumb {
  transform:translateX(400%);
  background:linear-gradient(135deg,#d48fb466,#7a3f5f80); border-color:#f0b4d4aa;
  box-shadow:0 2px 12px #0007, 0 0 12px #e6a8c826, inset 0 1px #fff4;
}
.sidebar-tabs .tab-folder { font-size:10px; opacity:.5; filter:saturate(.6); transition:opacity .18s ease, transform .18s ease; }
.sidebar-tabs button[aria-selected="true"] .tab-folder { opacity:1; filter:none; transform:scale(1.1); }
.sidebar-tabs .tab-code { font:700 9px/1 ui-monospace,Menlo,monospace; color:#a8c4f0; opacity:.55; transition:opacity .18s ease; }
.sidebar-tabs button[aria-selected="true"] .tab-code { opacity:1; color:#cfe0ff; text-shadow:0 0 8px #8fb4e6aa; }
.project-dev-toggle { display:flex; align-items:center; gap:7px; font-size:13px; cursor:pointer; }
.project-dev-toggle input { width:auto; margin:0; }
.sidebar-tabs .tab-clock { font-size:10px; opacity:.5; filter:saturate(.6); transition:opacity .18s ease, transform .18s ease; }
.sidebar-tabs button[aria-selected="true"] .tab-clock { opacity:1; filter:none; transform:scale(1.1); }
.sidebar-tabs button {
  position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:5px;
  padding:7px 10px; border:0; border-radius:999px; background:transparent;
  color:#b5a1bc; font-size:12px; font-weight:500; cursor:pointer; transition:color .18s ease;
}
.sidebar-tabs button:hover { border-color:transparent; color:#e6d7ec; }
.sidebar-tabs button[aria-selected="true"] { color:#fff8ff; font-weight:700; text-shadow:0 1px 4px #0008; }
.sidebar-tabs button[data-sidebar-tab="projects"][aria-selected="true"] { color:#fff3dc; }
.sidebar-tabs .tab-dot {
  width:6px; height:6px; border-radius:50%; background:#cbb2e6; opacity:.4;
  transition:opacity .18s ease, box-shadow .18s ease, background .18s ease;
}
.sidebar-tabs button[aria-selected="true"] .tab-dot {
  opacity:1; background:#e8d4ff; box-shadow:0 0 7px #d7b8ff;
}
.sidebar-tabs .tab-sigil {
  font-size:10px; color:#e8c27c; opacity:.5;
  transition:opacity .18s ease, text-shadow .18s ease, transform .18s ease;
}
.sidebar-tabs button[aria-selected="true"] .tab-sigil {
  opacity:1; color:#ffd98e; text-shadow:0 0 8px #e8c27caa; transform:scale(1.1);
}
@media (max-width:600px) {
  .sidebar-tabs button { min-height:34px; padding:8px 10px; }
}
@media (prefers-reduced-motion:reduce) {
  .sidebar-tab-thumb, .sidebar-tabs, .sidebar-tabs button, .sidebar-tabs .tab-dot, .sidebar-tabs .tab-sigil, .sidebar-tabs .tab-clock, .sidebar-tabs .tab-code, .sidebar-tabs .tab-folder { transition:none; }
}
.conv-item.project .t::before { content:'◆ '; color:#e8c27c; font-size:10px; }
.conv-item .conv-goal { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; }

.project-bar {
  order:-2; flex:1 0 100%; display:flex; align-items:center; gap:9px; min-width:0;
  padding:7px 8px 7px 12px; border:1px solid #d9b46e66; border-left:3px solid #e2bd78; border-radius:11px;
  background:linear-gradient(110deg,#5a452ecc,#2e2634d9); color:#f1e2c8; font-size:12px;
}
.project-bar[hidden] { display:none; }
.project-bar-tag { flex-shrink:0; color:#efc982; font-size:10px; font-weight:700; letter-spacing:1px; }
.project-bar-title { flex-shrink:0; max-width:30%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#fff3dc; }
.project-bar-goal { flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#d8c5a6; }
.project-bar-edit {
  flex-shrink:0; margin-left:auto; padding:4px 10px; border:1px solid #e2bd7899; border-radius:99px;
  background:transparent; color:#f3d69e; font-size:11px; cursor:pointer;
}
.project-bar-edit:hover { background:#e2bd7826; }

.project-dialog label small { color:var(--muted); font-weight:400; }
.project-dialog .shortcut-form { border-top:0; }

@media (max-width:600px) {
  .project-bar { gap:7px; padding:6px 6px 6px 10px; font-size:11px; }
  .project-bar-tag { display:none; }
  .project-bar-title { max-width:45%; }
  .project-bar-edit { padding:4px 8px; font-size:10px; }
}

/* 대화 목록은 배경색으로 나누지 않는다: 카드는 모두 같고, 루틴(⏰)·프로젝트(◆)는 제목 앞 기호와 묶음 이름으로만 구분 */

/* 작업 중인 대화: 일하는 비서들의 초상화를 카드 오른쪽 아래에 크게 세우고, 고개를 까딱이며 빛 고리가 퍼지게 해
   멀리서도 '지금 일하는 중'이 보이게 한다. 여럿이 일하면 겹쳐 나란히 선다. */
.conv-item.working { grid-template-columns:minmax(0,1fr); }
.conv-item.working .s, .conv-item.working .t, .conv-item.working .conv-work-times { padding-right:70px; }
.conv-item.working .s { grid-column:1; }
.conv-item.working .conv-avatar { display:none; }
.conv-item.working .conv-crew {
  display:flex; flex-direction:row-reverse; position:absolute; right:30px; top:50%; bottom:auto; transform:translateY(-50%); pointer-events:none;
}
.conv-item.working .crew-face {
  width:46px; height:46px; margin-left:-16px; border-width:2px; background:#2a2131;
  animation:crew-bob 1.4s ease-in-out infinite, crew-ring 1.8s ease-out infinite;
}
.conv-item.working .crew-face:nth-child(2) { animation-delay:.25s, .6s; }
.conv-item.working .crew-face:nth-child(3) { animation-delay:.5s, 1.2s; }
.conv-item.working .crew-face.claude { border-color:#e7a275; }
.conv-item.working .crew-face.codex { border-color:#6fbba3; animation-name:crew-bob, crew-ring-codex; }
.conv-item.working .crew-face.gemini { border-color:#98a4e0; animation-name:crew-bob, crew-ring-gemini; }
.conv-item.working .crew-face.beiko { border-color:#dc9db4; animation-name:crew-bob, crew-ring-beiko; }
/* 전신 그림에서 얼굴(머리끝~턱)만 원 안에 오게 확대한다 */
.conv-item.working .crew-face img { position:absolute; left:50%; top:-9%; width:235%; height:auto; max-width:none; object-fit:fill; transform:translateX(-50%); }
/* 표정 그림(세로로 더 긴 1080×1920)은 얼굴 자리가 달라 따로 맞춘다 */
.conv-item.working .crew-face img[src*="/characters/codex/"] { top:-36%; width:257%; left:calc(50% + 9.5%); }
.conv-item.working .crew-face img[src*="/mascots-v1/"] { position:static; width:100%; height:100%; object-fit:contain; object-position:center; transform:none; }
@keyframes crew-ring-codex { 0% { box-shadow:0 0 0 0 #6fbba380, 0 3px 8px #0006; } 70%,100% { box-shadow:0 0 0 7px #6fbba300, 0 3px 8px #0006; } }
@keyframes crew-ring-gemini { 0% { box-shadow:0 0 0 0 #98a4e080, 0 3px 8px #0006; } 70%,100% { box-shadow:0 0 0 7px #98a4e000, 0 3px 8px #0006; } }
@keyframes crew-ring-beiko { 0% { box-shadow:0 0 0 0 #dc9db480, 0 3px 8px #0006; } 70%,100% { box-shadow:0 0 0 7px #dc9db400, 0 3px 8px #0006; } }
/* 순서만 기다리는 비서는 움직이지 않고 흐리게 */
.conv-item.working .crew-face.queued { animation:none; filter:saturate(.5) brightness(.85); }
@media (prefers-reduced-motion:reduce) { .conv-item.working .crew-face { animation:none; } }

/* 좁은 화면: 상단 'Duet' 자리에 프로젝트 이름과 목표를 올리고, 입력창 위 프로젝트 띠는 접는다 */
.conv-project { display:none; }
@media (max-width:1100px) {
  .conversation-heading { display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0; }
  .conversation-heading .conv-title { flex:none; order:0; max-width:100%; line-height:1.3; }
  .conversation-heading .conv-project { order:1; }
  .conv-project:not([hidden]) {
    display:flex; align-items:center; gap:6px; min-width:0; max-width:100%; margin:0; padding:0;
    border:0; background:none; color:#d8c5a6; font-size:11px; line-height:1.4; text-align:left; cursor:pointer;
  }
  .conv-project-tag { flex-shrink:0; color:#efc982; font-size:10px; font-weight:700; letter-spacing:.5px; }
  .conv-project-goal { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .conv-project:hover .conv-project-goal { color:#fff3dc; text-decoration:underline; text-underline-offset:2px; }
  .in-project .composer .project-bar { display:none; }
}

/* 프로젝트 목록 끌어서 순서 바꾸기 */
.conversation-list.projects-sortable .conv-row { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.conversation-list.rows-dragging { cursor:grabbing; }
/* 끌리는 줄은 손가락을 바로 따라와야 해서 transform 전환은 두지 않는다(움직임은 project-order.js 가 그린다) */
.conv-row.row-dragging { position:relative; z-index:5; opacity:.95; border-radius:12px; box-shadow:0 18px 34px -10px #000d, 0 0 0 1px #e8c27c99; background:#3a2d40; transition:box-shadow .18s ease, background .18s ease; will-change:transform; }

/* 탭 다섯 칸: 좁은 사이드바에서도 글자가 한 줄에 들어가게 여백·글자를 줄인다 */
.sidebar-tabs button { min-width:0; gap:2px; padding-left:2px; padding-right:2px; white-space:nowrap; font-size:11.5px; letter-spacing:-.02em; }

/* '분류' 탭: 사이드바 카테고리 줄 */
.category-item .t::before { content:'🗂 '; font-size:11px; }
.conv-row .category-rename { font-size:12px; }
.conv-categorize { margin-top:10px; }

/* 카테고리 채팅: 여러 대화방의 질문·답변을 시간순으로 이어 본다 */
.app.category-open .office-scene, .app.category-open .messages, .app.category-open .composer,
.app.category-open .agent-fab, .app.category-open .agent-fab-scrim { display:none !important; }
.category-view { flex:1; min-height:0; display:flex; flex-direction:column; }
.category-view[hidden] { display:none; }
.cat-head {
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-shrink:0;
  margin:8px 14px 0; padding:10px 14px; border:1px solid #e6a8c855; border-radius:14px;
  background:linear-gradient(110deg,#5a3a4ecc,#2e2634e6); color:#f6e3ef;
}
.cat-title { display:flex; flex-direction:column; min-width:0; }
.cat-title span { font-size:15px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-title small { color:#d6bccb; font-size:11px; }
.cat-close { flex-shrink:0; margin:0; padding:6px 10px; border:1px solid #e6a8c866; border-radius:999px; background:#00000033; color:#f6e3ef; font-size:12px; }
.cat-scroll { flex:1; min-height:0; overflow-y:auto; padding:10px 14px 24px; -webkit-overflow-scrolling:touch; }
.cat-q { margin:0 auto 18px; max-width:860px; }
.cat-q-meta { display:flex; align-items:center; gap:8px; margin:0 0 6px; font-size:11px; color:#bfa9b8; }
.cat-room { margin:0; padding:2px 8px; border:1px solid #d8bedf40; border-radius:999px; background:#2c2233aa; color:#e9cfe0; font-size:11px; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.cat-move { margin:0 0 0 auto; padding:2px 8px; border:0; background:transparent; color:#bfa9b8; font-size:11px; cursor:pointer; opacity:.75; }
.cat-move:hover, .cat-room:hover { opacity:1; color:#fff; }
.cat-bubble { position:relative; margin:0 0 8px; padding:10px 14px; border-radius:14px; line-height:1.6; font-size:14px; overflow-wrap:anywhere; }
.cat-user { margin-left:auto; max-width:88%; width:fit-content; background:linear-gradient(135deg,#7a5a2fcc,#5a452ecc); border:1px solid #e2bd7866; color:#fff3dc; }
.cat-answer { max-width:94%; background:#2a2030e6; border:1px solid #d8bedf33; color:#efe3f2; }
.cat-agent { margin-bottom:4px; color:#e8c2dc; font-size:11px; font-weight:700; }
.cat-bubble .body > :first-child { margin-top:0; }
.cat-bubble .body > :last-child { margin-bottom:0; }
.cat-answer.clamped .body { max-height:16em; overflow:hidden; -webkit-mask-image:linear-gradient(#000 70%,transparent); mask-image:linear-gradient(#000 70%,transparent); }
.cat-expand { display:block; margin:6px 0 0; padding:3px 10px; border:1px solid #d8bedf40; border-radius:999px; background:transparent; color:#d6bccb; font-size:11px; }
.cat-pending, .cat-empty { color:#a99cb0; font-size:12px; padding:6px 2px; }
.cat-empty { text-align:center; padding:40px 0; }
.cat-earlier { display:block; margin:0 auto 14px; }

/* 로그인 화면: 로그인 · 회원가입 탭, 관리자 토큰 로그인은 아래 작은 링크로 */
.login-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:3px; border:1px solid var(--border); border-radius:999px; background:var(--bg); }
.login-tabs[hidden] { display:none; }
.login-tabs button { padding:7px 0; border:0; border-radius:999px; background:transparent; color:var(--muted); font-size:13px; }
.login-tabs button[aria-selected="true"] { background:var(--accent); color:var(--accent-text); font-weight:600; }
.login-card label[hidden], .login-card input[hidden] { display:none; }
.login-card .login-switch { justify-self:center; padding:4px 6px; border:0; background:none; color:var(--muted); font-size:12px; text-decoration:underline; text-underline-offset:3px; }
#login-note:empty { display:none; }

.role-member .admin-only { display:none !important; }

/* 설정 > 회원 관리 */
.member-head { margin:16px 0 8px; font-size:13px; color:var(--muted); }
.member-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.member-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; }
.member-row.pending { border-color:#d9b46e99; }
.member-row.disabled { opacity:.65; }
.member-who { display:flex; flex-direction:column; gap:2px; min-width:0; }
.member-who strong { font-size:14px; }
.member-email, .member-meta { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.member-actions { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.member-actions button { padding:6px 10px; font-size:12px; border-radius:8px; }
@media (max-width:600px) { .member-row { flex-direction:column; align-items:stretch; } .member-actions { justify-content:flex-start; } }