` 안 유효) — 블록 레이아웃은 여기서 부여. */
/* ── Citation passage drawer ─────────────────────────────────────── */
.nb-cite__backdrop {
position: fixed;
inset: 0;
z-index: 80;
background: color-mix(in srgb, var(--ink) 30%, transparent);
backdrop-filter: blur(1px);
}
.nb-cite {
position: fixed;
z-index: 81;
right: 0;
top: 0;
bottom: 0;
width: min(440px, calc(100vw - 40px));
padding: 22px 24px 24px;
background: var(--bone);
border-left: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
box-shadow: -8px 0 24px color-mix(in srgb, var(--ink) 14%, transparent);
overflow-y: auto;
animation: nb-cite-slide-in 0.18s ease-out;
}
@keyframes nb-cite-slide-in {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
.nb-cite__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.nb-cite__kicker {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
color: var(--amber);
}
.nb-cite__close {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 22px;
line-height: 1;
color: var(--ink-3);
background: transparent;
border: none;
border-radius: 999px;
}
.nb-cite__close:hover {
color: var(--ink);
background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.nb-cite__source {
margin: 0 0 6px;
font-family: var(--serif);
font-size: 20px;
font-weight: 700;
line-height: 1.3;
color: var(--ink);
word-break: break-word;
}
.nb-cite__meta {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 18px;
}
.nb-cite__passage {
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px;
background: color-mix(in srgb, var(--bone-2) 50%, var(--bone));
border-left: 3px solid color-mix(in srgb, var(--amber) 60%, transparent);
border-radius: 4px;
}
.nb-cite__passage-line {
margin: 0;
font-family: var(--serif);
font-size: 14px;
line-height: 1.7;
color: var(--ink-2);
}
.nb-cite__passage-line--before,
.nb-cite__passage-line--after {
font-style: italic;
color: var(--ink-3);
}
.nb-cite__passage-line--highlight {
position: relative;
padding: 10px 12px 10px 36px;
font-style: normal;
color: var(--ink);
background: color-mix(in srgb, var(--amber) 16%, var(--bone));
border-radius: 6px;
}
.nb-cite__highlight-mark {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--amber);
font-size: 14px;
}
.nb-cite__nav {
display: flex;
justify-content: space-between;
gap: 8px;
margin-top: 18px;
}
.nb-cite__nav-btn {
cursor: pointer;
padding: 8px 14px;
font-family: var(--sans);
font-size: 13px;
color: var(--ink-2);
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 999px;
transition:
background 0.12s ease,
border-color 0.12s ease;
}
.nb-cite__nav-btn:hover {
color: var(--ink);
border-color: color-mix(in srgb, var(--amber) 55%, transparent);
background: color-mix(in srgb, var(--amber) 6%, var(--bone));
}
/* ==========================================================================
Xyren Notebook (independent flow)
========================================================================== */
.nb-home {
min-height: 100vh;
background: var(--bone);
}
.nb-home__content {
max-width: 1280px;
margin: 0 auto;
padding: 28px 28px 56px;
}
/* ── Toolbar (전체 / 내 노트북 / search / sort / 새로 만들기) ──────────── */
.nb-home__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 28px;
}
.nb-home__pills {
display: flex;
align-items: center;
gap: 6px;
}
.nb-pill {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
padding: 8px 16px;
font-family: var(--sans);
font-size: 14px;
color: var(--ink-2);
background: transparent;
border: 1px solid transparent;
border-radius: 999px;
transition:
background 0.12s ease,
border-color 0.12s ease,
color 0.12s ease;
}
.nb-pill:hover {
background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.nb-pill.is-active {
color: var(--ink);
background: color-mix(in srgb, var(--amber) 14%, var(--bone));
border-color: color-mix(in srgb, var(--amber) 50%, transparent);
}
.nb-pill--all.is-active {
color: var(--bone);
background: var(--ink);
border-color: var(--ink);
}
.nb-pill__check {
font-size: 12px;
font-weight: 700;
color: var(--amber);
}
.nb-pill--all.is-active .nb-pill__check {
color: var(--bone);
}
.nb-home__actions {
display: flex;
align-items: center;
gap: 8px;
}
.nb-icon-btn {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--ink-2);
background: transparent;
border: 1px solid transparent;
border-radius: 999px;
transition:
background 0.12s ease,
color 0.12s ease;
}
.nb-icon-btn:hover {
color: var(--ink);
background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.nb-search {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 12px;
color: var(--ink-3);
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 999px;
transition:
border-color 0.12s ease,
color 0.12s ease;
}
.nb-search:focus-within {
color: var(--amber);
border-color: var(--amber);
}
.nb-search__input {
width: 180px;
padding: 8px 0;
font-family: var(--sans);
font-size: 13px;
color: var(--ink);
background: transparent;
border: none;
outline: none;
}
.nb-sort {
position: relative;
}
.nb-sort__select {
appearance: none;
cursor: pointer;
padding: 8px 30px 8px 14px;
font-family: var(--sans);
font-size: 13px;
color: var(--ink-2);
background:
linear-gradient(45deg, transparent 50%, var(--ink-3) 50%) calc(100% - 14px)
50% / 5px 5px no-repeat,
linear-gradient(135deg, var(--ink-3) 50%, transparent 50%) calc(100% - 9px)
50% / 5px 5px no-repeat,
var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 999px;
}
.nb-sort__select:hover {
border-color: color-mix(in srgb, var(--ink) 28%, transparent);
}
.nb-cta {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
padding: 10px 18px;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
color: var(--bone);
background: var(--terra-ink);
border: 1px solid var(--terra-ink);
border-radius: 999px;
box-shadow: 2px 2px 0 var(--amber);
transition:
transform 0.12s ease,
box-shadow 0.12s ease;
}
.nb-cta:hover {
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 var(--amber);
}
/* ── 헤딩 ─────────────────────────────────────────────────────────── */
.nb-home__heading {
margin: 0 0 16px;
font-family: var(--serif);
font-size: 24px;
font-weight: 700;
color: var(--ink);
}
/* ── Grid ────────────────────────────────────────────────────────── */
.nb-home__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
/* ── Card (NotebookLM 라이트 라벤더 스타일 → editorial bone-2 톤) ── */
.nb-card {
position: relative;
cursor: pointer;
min-height: 168px;
padding: 18px 18px 16px;
display: flex;
flex-direction: column;
text-align: left;
background: var(--bone-2);
border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
border-radius: 14px;
transition:
transform 0.12s ease,
box-shadow 0.12s ease,
border-color 0.12s ease;
outline: none;
}
.nb-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px color-mix(in srgb, var(--ink) 10%, transparent);
border-color: color-mix(in srgb, var(--amber) 38%, transparent);
}
.nb-card:focus-visible {
outline: 2px solid var(--terra-ink);
outline-offset: 2px;
}
.nb-card.is-pinned {
background: color-mix(in srgb, var(--amber) 14%, var(--bone));
border-color: color-mix(in srgb, var(--amber) 40%, transparent);
}
.nb-card__head {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 36px;
}
.nb-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
font-size: 18px;
color: var(--amber);
background: color-mix(in srgb, var(--bone) 60%, transparent);
border-radius: 8px;
}
.nb-card.is-pinned .nb-card__icon {
color: var(--amber);
background: color-mix(in srgb, var(--amber) 24%, transparent);
}
.nb-card__menu-btn {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 18px;
font-weight: 700;
line-height: 1;
color: var(--ink-3);
background: transparent;
border: none;
border-radius: 4px;
opacity: 0;
transition:
opacity 0.12s ease,
background 0.12s ease;
}
.nb-card:hover .nb-card__menu-btn,
.nb-card.is-menu-open .nb-card__menu-btn,
.nb-card:focus-within .nb-card__menu-btn {
opacity: 1;
}
.nb-card__menu-btn:hover {
background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.nb-card__title {
font-family: var(--serif);
font-size: 17px;
font-weight: 700;
line-height: 1.3;
color: var(--ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nb-card__rename {
width: 100%;
box-sizing: border-box;
padding: 4px 8px;
font-family: var(--serif);
font-size: 17px;
font-weight: 700;
line-height: 1.3;
color: var(--ink);
background: var(--bone);
border: 1px solid var(--terra-ink);
border-radius: 4px;
outline: none;
}
.nb-card__meta {
margin-top: auto;
padding-top: 12px;
font-family: var(--sans);
font-size: 12px;
color: var(--ink-3);
}
/* "새 노트 만들기" 카드 — dashed + 중앙 + plus */
.nb-card--create {
align-items: center;
justify-content: center;
text-align: center;
background: color-mix(in srgb, var(--amber) 4%, var(--bone));
border-style: dashed;
border-color: color-mix(in srgb, var(--ink) 22%, transparent);
}
.nb-card--create:hover {
background: color-mix(in srgb, var(--amber) 10%, var(--bone));
border-color: color-mix(in srgb, var(--amber) 60%, transparent);
}
.nb-card__plus {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
color: var(--bone);
background: var(--terra-ink);
border-radius: 999px;
box-shadow: 0 2px 0 var(--amber);
}
.nb-card__create-label {
font-family: var(--serif);
font-size: 16px;
font-weight: 700;
color: var(--ink);
}
/* Context 메뉴 (삭제 / 제목 수정 / 맨 위에 고정) */
.nb-menu__backdrop {
position: fixed;
inset: 0;
z-index: 90;
}
.nb-menu {
position: absolute;
top: 32px;
right: 0;
z-index: 91;
min-width: 160px;
padding: 6px 0;
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 6px;
box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 18%, transparent);
}
.nb-menu__item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
text-align: left;
cursor: pointer;
padding: 8px 14px;
font-family: var(--sans);
font-size: 13px;
color: var(--ink);
background: transparent;
border: none;
}
.nb-menu__item:hover {
background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.nb-menu__item:disabled {
opacity: 0.5;
cursor: default;
}
.nb-menu__item:disabled:hover {
background: transparent;
}
.nb-menu__item--danger {
color: var(--terra);
}
.nb-menu__item--danger:hover {
background: color-mix(in srgb, var(--terra) 8%, transparent);
}
.nb-workspace {
min-height: 100vh;
background: var(--bone);
}
.nb-workspace__main {
display: grid;
grid-template-columns: minmax(280px, 22fr) minmax(640px, 50fr) minmax(
300px,
28fr
);
gap: 0;
height: calc(100vh - 74px);
transition: grid-template-columns 0.18s ease;
}
.nb-workspace__main.is-left-collapsed {
grid-template-columns: 44px minmax(640px, 1fr) minmax(300px, 28fr);
}
.nb-workspace__main.is-right-collapsed {
grid-template-columns: minmax(280px, 22fr) minmax(640px, 1fr) 44px;
}
.nb-workspace__main.is-left-collapsed.is-right-collapsed {
grid-template-columns: 44px 1fr 44px;
}
.nb-workspace__main.is-studio-editing {
grid-template-columns: minmax(260px, 20fr) minmax(460px, 38fr) minmax(
460px,
42fr
);
}
.nb-workspace__main.is-left-collapsed.is-studio-editing {
grid-template-columns: 44px minmax(460px, 40fr) minmax(460px, 42fr);
}
.nb-workspace__left.is-collapsed,
.nb-workspace__right.is-collapsed {
overflow: hidden;
}
.nb-workspace__left {
border-right: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
background: var(--bone-2);
overflow: auto;
}
.nb-workspace__center {
min-width: 0;
display: flex;
flex-direction: column;
border-right: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
/* 메인 채팅의 column 래퍼처럼 pane 전체를 bone 으로 — chat/composer 사이
HITL 패널·칩 등 빈틈으로 html/body 의 다크가 비치지 않게. */
background: var(--bone);
}
.nb-workspace__empty-chat {
max-width: 760px;
margin: 28px auto;
padding: 16px;
border: 1px dashed color-mix(in srgb, var(--ink) 16%, transparent);
font-family: var(--sans);
font-size: 13px;
color: var(--ink-3);
background: color-mix(in srgb, var(--bone-2) 65%, var(--bone));
}
/* ── NotebookOverviewHeader (NotebookLM식 중앙 상단 헤더) ─────────────
히어로 배너 + 통합 요약 + 액션(placeholder) + 추천 질문. 스크롤 최상단
상시 블록 (대화가 그 아래로 흐름). */
.nb-overview {
/* 채팅 메시지(.pg-msg)와 *동일한* 폭 모델 — max-width 880 + width 100% +
margin auto. width:100% 가 없으면 flex column 에서 섹션이 내용 폭(요약
카드 760)으로 줄어 히어로가 메시지보다 좁아진다. 이 박스의 왼쪽 끝이
메시지의 № 마커(gutter), 오른쪽 끝이 시각 표시 — 히어로가 № → 시각 폭에
정확히 일치. 요약/추천 등 텍스트 섹션만 가독 폭(760)으로 안쪽 제한. */
max-width: 880px;
width: 100%;
margin: 4px auto 18px;
}
/* ① 히어로 배너 — coverImageUrl 없으면 기본 에디토리얼 그라데이션. */
.nb-overview__hero {
position: relative;
min-height: 156px;
display: flex;
align-items: flex-end;
border-radius: 14px;
overflow: hidden;
background:
radial-gradient(
120% 140% at 12% 18%,
color-mix(in srgb, var(--terra) 55%, var(--ink)) 0%,
transparent 55%
),
radial-gradient(
120% 130% at 88% 10%,
color-mix(in srgb, var(--amber) 48%, var(--ink)) 0%,
transparent 52%
),
linear-gradient(
135deg,
var(--ink) 0%,
color-mix(in srgb, var(--ink) 72%, var(--terra)) 100%
);
}
.nb-overview__hero.has-cover {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.nb-overview__hero-scrim {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
color-mix(in srgb, var(--ink) 80%, transparent) 0%,
color-mix(in srgb, var(--ink) 34%, transparent) 46%,
transparent 100%
);
}
.nb-overview__hero-inner {
position: relative;
z-index: 1;
padding: 18px 20px 16px;
width: 100%;
}
.nb-overview__kicker {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
color: color-mix(in srgb, var(--bone) 80%, transparent);
margin-bottom: 6px;
}
.nb-overview__title {
margin: 0 0 8px;
font-family: var(--serif);
font-size: 26px;
font-weight: 700;
line-height: 1.18;
color: var(--bone);
}
.nb-overview__meta {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
color: color-mix(in srgb, var(--bone) 78%, transparent);
}
.nb-overview__meta-sep {
opacity: 0.6;
}
/* ② 통합 요약 카드 — 히어로(880)보다 좁게 중앙정렬해 영역 구분을 명확히. */
.nb-overview__guide {
width: min(600px, calc(100% - 96px));
margin: 12px auto 0;
padding: 16px 18px 12px;
background: color-mix(in srgb, var(--ink) 5%, var(--bone));
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 12px;
}
.nb-overview__guide-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--amber);
margin-bottom: 10px;
}
.nb-overview__summary {
margin: 0 0 12px;
font-family: var(--serif);
font-size: 14px;
line-height: 1.7;
color: var(--ink);
}
.nb-overview__topics {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 10px;
}
.nb-overview__topic {
padding: 4px 10px;
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
color: var(--ink);
background: #fff;
border: 1px solid color-mix(in srgb, var(--terra) 30%, transparent);
border-radius: 999px;
}
.nb-overview__note {
margin-bottom: 10px;
padding: 7px 10px;
font-family: var(--sans);
font-size: 11px;
line-height: 1.5;
color: var(--ink-3);
background: color-mix(in srgb, var(--ink) 4%, var(--bone));
border-left: 2px solid color-mix(in srgb, var(--amber) 50%, transparent);
border-radius: 4px;
}
.nb-overview__placeholder {
margin: 0 0 12px;
font-family: var(--serif);
font-style: italic;
font-size: 13px;
line-height: 1.6;
color: var(--ink-3);
}
.nb-overview__skeleton {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.nb-overview__skeleton span {
height: 12px;
border-radius: 3px;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--ink) 8%, var(--bone)) 0%,
color-mix(in srgb, var(--ink) 16%, var(--bone)) 50%,
color-mix(in srgb, var(--ink) 8%, var(--bone)) 100%
);
background-size: 200% 100%;
animation: nb-overview-shimmer 1.4s ease-in-out infinite;
}
@keyframes nb-overview-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* ③ 턴 공통 액션 바 — 요약 카드와 같은 좁은 폭으로 중앙정렬. 메모저장(라벨) +
복사·피드백(아이콘 전용). 현재는 placeholder (disabled). */
.nb-overview__actionbar {
display: flex;
align-items: center;
gap: 6px;
width: min(600px, calc(100% - 96px));
margin: 10px auto 0;
}
.nb-overview__actionbar-spacer {
flex: 1;
}
.nb-overview__action {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-family: var(--sans);
font-size: 12px;
color: var(--ink-2);
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 999px;
cursor: pointer;
transition:
border-color 0.12s ease,
color 0.12s ease,
background 0.12s ease;
}
.nb-overview__icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: var(--ink-3);
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 8px;
cursor: pointer;
transition:
border-color 0.12s ease,
color 0.12s ease,
background 0.12s ease;
}
.nb-overview__action:hover:not(:disabled),
.nb-overview__icon-btn:hover:not(:disabled) {
color: var(--ink);
border-color: color-mix(in srgb, var(--amber) 55%, transparent);
background: color-mix(in srgb, var(--amber) 6%, var(--bone));
}
.nb-overview__action:disabled,
.nb-overview__icon-btn:disabled {
cursor: not-allowed;
opacity: 0.55;
}
/* ④ 추천 질문 — 요약 카드와 같은 좁은 폭으로 중앙정렬. */
.nb-overview__suggest {
width: min(600px, calc(100% - 96px));
margin: 16px auto 0;
padding: 0 2px;
}
.nb-overview__suggest-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 8px;
}
.nb-overview__suggest-chips {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 8px;
}
.nb-overview__suggest-chip {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 11px 13px;
text-align: left;
font-family: var(--serif);
font-size: 13px;
line-height: 1.45;
color: var(--ink);
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
border-radius: 10px;
cursor: pointer;
transition:
transform 0.12s ease,
border-color 0.12s ease,
background 0.12s ease;
}
.nb-overview__suggest-chip:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--amber) 55%, transparent);
background: color-mix(in srgb, var(--amber) 6%, var(--bone));
}
.nb-overview__suggest-arrow {
flex-shrink: 0;
color: var(--amber);
font-weight: 700;
}
/* Source context indicator above the notebook chat input. */
.nb-ctxchip {
flex: 0 0 auto;
align-self: center;
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 auto 10px;
padding: 6px 12px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
color: var(--ink-2);
background: color-mix(in srgb, var(--amber) 12%, var(--bone));
border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
border-radius: 999px;
}
.nb-ctxchip__dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--amber);
}
.nb-ctxchip--warn {
color: var(--ink-3);
background: color-mix(in srgb, var(--ink) 4%, var(--bone));
border-color: color-mix(in srgb, var(--ink) 18%, transparent);
}
.nb-ctxchip--warn .nb-ctxchip__dot {
background: var(--ink-3);
}
/* Notebook-only minimal chat composer: input + send button. */
.nb-chat-composer {
flex: 0 0 auto;
display: flex;
align-items: flex-end;
gap: 8px;
padding: 12px 16px 16px;
background: var(--bone);
border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.nb-chat-composer__input {
flex: 1;
min-width: 0;
min-height: 40px;
max-height: 120px;
resize: none;
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 8px;
background: var(--bone);
color: var(--ink);
font-family: var(--sans);
font-size: 14px;
line-height: 1.45;
padding: 10px 12px;
}
.nb-chat-composer__input:focus {
outline: none;
border-color: color-mix(in srgb, var(--amber) 70%, var(--ink) 10%);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 16%, transparent);
}
.nb-chat-composer__send {
flex: 0 0 auto;
min-width: 64px;
height: 40px;
border: 1px solid var(--ink);
border-radius: 8px;
background: var(--ink);
color: var(--bone);
font-family: var(--sans);
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.nb-chat-composer__send:disabled {
cursor: not-allowed;
opacity: 0.45;
}
/* Notebook chat fixed bottom: keep composer visible, scroll messages only. */
.nb-workspace {
height: 100vh;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.nb-workspace__main {
flex: 1 1 auto;
height: auto;
min-height: 0;
overflow: hidden;
}
.nb-workspace__center {
height: 100%;
min-height: 0;
overflow: hidden;
}
.nb-workspace__center > .pg-composer,
.nb-workspace__center > .nb-chat-composer,
.nb-workspace__center > .nb-ctxchip,
.nb-workspace__center > .pg-hitl-slot {
flex: 0 0 auto;
}
.nb-workspace__right {
background: var(--bone-2);
}
.nb-studio {
position: relative;
background: var(--bone);
}
.nb-studio__head .nb-studio__title {
flex: 1;
text-align: left;
}
.nb-studio__head-btn {
border: none;
background: transparent;
color: var(--ink-3);
font-family: var(--mono);
font-size: 10px;
cursor: pointer;
}
.nb-studio__tiles {
padding: 10px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.nb-studio__tile {
height: 56px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 10px 0 12px;
font-family: var(--sans);
font-size: 12px;
text-align: left;
color: var(--ink);
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
border-radius: 10px;
cursor: pointer;
transition:
transform 0.12s ease,
border-color 0.12s ease,
background 0.12s ease;
}
.nb-studio__tile:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--amber) 55%, transparent);
background: color-mix(in srgb, var(--amber) 5%, var(--bone));
}
.nb-studio__tile-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--amber);
background: color-mix(in srgb, var(--amber) 14%, var(--bone-2));
border-radius: 8px;
font-family: var(--serif);
font-size: 14px;
font-weight: 700;
}
.nb-studio__tile-label {
flex: 1;
min-width: 0;
font-family: var(--serif);
font-size: 13px;
font-weight: 600;
color: var(--ink);
line-height: 1.2;
}
.nb-studio__tile-arrow {
flex-shrink: 0;
font-size: 14px;
color: var(--ink-3);
}
.nb-studio__running-list {
display: grid;
gap: 6px;
margin: 4px 10px 0;
}
.nb-studio__running {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: color-mix(in srgb, var(--amber) 8%, var(--bone));
border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
border-radius: 10px;
}
.nb-studio__running-spinner,
.nb-studio__result-spinner {
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: 999px;
border: 2px solid color-mix(in srgb, var(--terra-ink) 30%, transparent);
border-top-color: var(--amber);
animation: nb-studio-spin 0.8s linear infinite;
}
@keyframes nb-studio-spin {
to {
transform: rotate(360deg);
}
}
.nb-studio__running-body {
min-width: 0;
}
.nb-studio__running-title {
font-family: var(--serif);
font-size: 13px;
font-weight: 700;
color: var(--ink);
}
.nb-studio__running-sub {
margin-top: 2px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
}
.nb-studio__result-item--running {
border-color: color-mix(in srgb, var(--amber) 34%, transparent);
background: color-mix(in srgb, var(--amber) 8%, var(--bone));
}
.nb-studio__result-item--running .nb-studio__result-hit {
cursor: wait;
}
/* ── Studio generate modal ───────────────────────────────────────── */
.nb-gen__backdrop {
position: fixed;
inset: 0;
z-index: 100;
background: color-mix(in srgb, var(--ink) 45%, transparent);
backdrop-filter: blur(2px);
}
.nb-gen {
position: fixed;
z-index: 101;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(880px, calc(100vw - 48px));
max-height: calc(100vh - 80px);
overflow: auto;
padding: 26px 30px 22px;
background: var(--bone);
border-radius: 14px;
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
box-shadow: 0 20px 50px color-mix(in srgb, var(--ink) 30%, transparent);
}
.nb-gen__head {
display: flex;
align-items: center;
justify-content: space-between;
}
.nb-gen__title {
margin: 0;
font-family: var(--serif);
font-size: 20px;
font-weight: 700;
color: var(--ink);
}
.nb-gen__close {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 22px;
line-height: 1;
color: var(--ink-3);
background: transparent;
border: none;
border-radius: 999px;
}
.nb-gen__close:hover {
color: var(--ink);
background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.nb-gen__desc {
margin: 4px 0 18px;
font-family: var(--sans);
font-size: 13px;
line-height: 1.55;
color: var(--ink-3);
}
.nb-gen__fields {
display: flex;
flex-direction: column;
gap: 14px;
}
.nb-gen__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.nb-gen__field-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--ink-3);
}
.nb-gen__select,
.nb-gen__input,
.nb-gen__textarea {
padding: 10px 12px;
font-family: var(--sans);
font-size: 13px;
color: var(--ink);
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 6px;
outline: none;
}
.nb-gen__select {
appearance: none;
padding-right: 32px;
background:
linear-gradient(45deg, transparent 50%, var(--ink-3) 50%) calc(100% - 14px)
50% / 5px 5px no-repeat,
linear-gradient(135deg, var(--ink-3) 50%, transparent 50%) calc(100% - 9px)
50% / 5px 5px no-repeat,
var(--bone);
}
.nb-gen__textarea {
min-height: 96px;
resize: vertical;
line-height: 1.45;
}
.nb-gen__hint {
font-family: var(--sans);
font-size: 12px;
line-height: 1.45;
color: var(--ink-3);
}
.nb-gen__select:focus,
.nb-gen__input:focus,
.nb-gen__textarea:focus {
border-color: var(--amber);
}
.nb-gen__close:disabled,
.nb-gen__cancel:disabled,
.nb-gen__submit:disabled,
.nb-gen__select:disabled,
.nb-gen__input:disabled,
.nb-gen__textarea:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.nb-gen__manage-btn {
min-height: 30px;
padding: 0 10px;
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 999px;
background: var(--bone);
color: var(--ink-2);
cursor: pointer;
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
}
.nb-gen__manage-btn:hover {
border-color: var(--ink);
color: var(--ink);
background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.nb-gen__advanced {
padding-top: 10px;
border-top: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent);
}
.nb-gen__advanced summary {
cursor: pointer;
font-family: var(--sans);
font-size: 12px;
color: var(--ink-3);
user-select: none;
}
.nb-gen__advanced[open] summary {
margin-bottom: 8px;
}
.nb-gen__foot {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 22px;
}
.nb-gen__cancel {
cursor: pointer;
padding: 8px 16px;
font-family: var(--sans);
font-size: 13px;
color: var(--ink-2);
background: transparent;
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 999px;
}
.nb-gen__cancel:hover {
background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.nb-gen__submit {
cursor: pointer;
padding: 8px 18px;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
color: var(--bone);
background: var(--terra-ink);
border: 1px solid var(--terra-ink);
border-radius: 999px;
box-shadow: 2px 2px 0 var(--amber);
transition:
transform 0.12s ease,
box-shadow 0.12s ease;
}
.nb-gen__submit:hover {
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 var(--amber);
}
/* ── nb-gen inline checkbox field ───────────────────────────────────── */
.nb-gen__field--inline {
flex-direction: row;
align-items: center;
gap: 8px;
}
.nb-gen__field--inline input[type="checkbox"] {
flex-shrink: 0;
width: 15px;
height: 15px;
accent-color: var(--terra);
cursor: pointer;
}
.nb-gen__field--inline span {
font-family: var(--sans);
font-size: 13px;
color: var(--ink-2);
cursor: pointer;
}
/* ── nb-gen 2-column short-field grid ───────────────────────────────── */
.nb-gen__grid2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 559px) {
.nb-gen__grid2 {
grid-template-columns: 1fr;
}
}
/* ── nb-gen template tile grid ──────────────────────────────────────── */
.nb-gen__tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
}
.nb-gen__tile {
display: flex;
flex-direction: column;
gap: 4px;
text-align: left;
padding: 12px 14px;
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 10px;
cursor: pointer;
transition:
border-color 0.15s,
background 0.15s,
transform 0.12s;
}
.nb-gen__tile:hover {
border-color: color-mix(in srgb, var(--ink) 32%, transparent);
transform: translateY(-1px);
}
.nb-gen__tile[aria-checked="true"] {
border-color: var(--terra);
background: color-mix(in srgb, var(--terra) 8%, var(--bone));
box-shadow: inset 0 0 0 1px var(--terra);
}
.nb-gen__tile:focus-visible {
outline: 2px solid var(--amber);
outline-offset: 2px;
}
.nb-gen__tile-name {
font-family: var(--serif);
font-size: 14px;
font-weight: 700;
color: var(--ink);
line-height: 1.25;
}
.nb-gen__tile-desc {
font-family: var(--sans);
font-size: 11.5px;
color: var(--ink-3);
line-height: 1.4;
}
.nb-gen__tile-id {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.9px;
text-transform: uppercase;
color: color-mix(in srgb, var(--ink) 28%, transparent);
margin-top: 2px;
}
.nb-studio__results {
flex: 1;
overflow: auto;
padding: 6px 10px 10px;
}
.nb-studio__result-item {
display: flex;
position: relative;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 4px;
border: none;
border-radius: 8px;
background: transparent;
text-align: left;
cursor: pointer;
transition: background 0.12s ease;
}
.nb-studio__result-item:hover {
background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.nb-studio__result-item:hover .nb-studio__result-title {
color: var(--blue);
}
.nb-studio__result-item.is-pending {
cursor: progress;
opacity: 0.82;
}
.nb-studio__result-item.is-pending:hover {
background: transparent;
}
.nb-studio__result-item.is-pending .nb-studio__result-title {
color: var(--ink-3);
}
.nb-studio__result-item:disabled {
color: inherit;
}
.nb-studio__result-item.is-failed {
cursor: default;
opacity: 0.9;
}
.nb-studio__result-item.is-failed:hover {
background: transparent;
}
.nb-studio__result-item.is-failed .nb-studio__result-title {
color: var(--ink);
}
.nb-studio__result-item--podcast .nb-studio__result-icon {
color: var(--amber);
}
.nb-studio__result-icon {
flex: 0 0 auto;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: var(--ink-2);
background: color-mix(in srgb, var(--ink) 6%, var(--bone-2));
}
.nb-studio__result-main {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
}
.nb-studio__result-title {
font-family: var(--serif);
font-size: 13px;
font-weight: 800;
color: var(--ink);
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nb-studio__result-sub {
margin-top: 2px;
font-family: var(--sans);
font-size: 11px;
color: var(--ink-4);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nb-studio__result-more {
flex: 0 0 auto;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 4px;
background: transparent;
color: var(--ink);
cursor: pointer;
font: inherit;
font-size: 18px;
font-weight: 900;
line-height: 1;
}
.nb-studio__result-item:hover .nb-studio__result-more {
background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.nb-studio__result-item.is-menu-open .nb-studio__result-more {
background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.nb-studio__result-menu {
position: fixed;
top: auto;
right: auto;
z-index: 120;
min-width: 180px;
}
.nb-studio__result-item.is-selected {
background: color-mix(in srgb, var(--amber) 12%, var(--bone));
}
.nb-studio__result-item.is-selected .nb-studio__result-title {
color: var(--ink);
}
.nb-studio__result-item.is-selected .nb-studio__result-icon {
color: var(--ink);
background: color-mix(in srgb, var(--amber) 38%, var(--bone));
}
.nb-studio__audio-player {
flex: 0 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) 30px;
gap: 8px;
padding: 10px 12px 12px;
border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
background: color-mix(in srgb, var(--bone) 92%, var(--amber) 8%);
}
.nb-studio__audio-meta {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.nb-studio__audio-kicker {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
color: var(--amber);
text-transform: uppercase;
}
.nb-studio__audio-title {
overflow: hidden;
color: var(--ink);
font-family: var(--serif);
font-size: 13px;
font-weight: 800;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.nb-studio__audio-close {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 8px;
background: var(--bone);
color: var(--ink-2);
cursor: pointer;
font-family: var(--sans);
font-size: 18px;
line-height: 1;
}
.nb-studio__audio-close:hover {
border-color: color-mix(in srgb, var(--amber) 55%, var(--ink) 12%);
color: var(--ink);
}
.nb-studio__audio-control {
grid-column: 1 / -1;
min-height: 36px;
}
.nb-studio__audio-control audio {
display: block;
width: 100%;
height: 36px;
}
.nb-studio__audio-loading,
.nb-studio__audio-error {
min-height: 36px;
display: flex;
align-items: center;
padding: 0 10px;
border-radius: 8px;
font-family: var(--sans);
font-size: 12px;
}
.nb-studio__audio-loading {
color: var(--ink-3);
background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.nb-studio__audio-error {
color: color-mix(in srgb, #b42318 78%, var(--ink));
background: color-mix(in srgb, #f04438 9%, var(--bone));
}
.nb-studio__empty {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
}
.nb-studio__add-wrap {
display: flex;
justify-content: center;
padding: 12px 0;
border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.nb-studio__add-btn {
border: none;
background: var(--ink);
color: var(--bone);
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
border-radius: 999px;
padding: 8px 14px;
cursor: pointer;
}
.nb-studio__editor-breadcrumb {
font-family: var(--sans);
font-size: 13px;
color: var(--ink-2);
}
.nb-studio__editor-back {
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
background: var(--bone);
color: var(--ink);
font-family: var(--sans);
font-size: 12px;
font-weight: 650;
border-radius: 999px;
padding: 5px 10px;
cursor: pointer;
}
.nb-studio__editor-back:hover {
border-color: color-mix(in srgb, var(--amber) 55%, var(--ink) 12%);
background: color-mix(in srgb, var(--amber) 12%, var(--bone));
}
.nb-studio__editor-title-wrap {
display: flex;
align-items: center;
gap: 8px;
padding: 10px;
}
.nb-studio__editor-title {
flex: 1;
min-width: 0;
border: none;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
background: transparent;
font-family: var(--sans);
font-size: 32px;
color: var(--ink);
padding: 2px 0 8px;
}
.nb-studio__editor-title:focus,
.nb-studio__editor-body:focus {
outline: none;
}
.nb-studio__editor-trash {
border: none;
background: transparent;
font-family: var(--sans);
font-size: 12px;
color: var(--ink-4);
cursor: pointer;
}
.nb-studio__editor-body {
flex: 1;
min-height: 0;
border: none;
background: transparent;
font-family: var(--sans);
font-size: 14px;
line-height: 1.6;
color: var(--ink-2);
padding: 0 10px 10px;
}
.nb-mdx-editor-shell {
overflow: auto;
}
.nb-mdx-editor {
min-height: 100%;
background: transparent;
color: var(--ink-2);
--baseTextContrast: var(--ink);
--baseTextContrastHex: var(--ink);
}
.nb-mdx-editor__toolbar {
position: sticky;
top: 0;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 2px;
overflow: visible;
padding: 4px 0 6px;
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
background: var(--bone);
box-shadow: none;
}
.nb-mdx-editor__toolbar,
.nb-mdx-editor__toolbar * {
box-sizing: border-box;
}
.nb-mdx-editor__toolbar :where([role="toolbar"]) {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2px;
width: 100%;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.nb-mdx-editor__toolbar button,
.nb-mdx-editor__toolbar [role="button"] {
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
padding: 2px;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--ink-3);
}
.nb-mdx-editor__toolbar button:hover,
.nb-mdx-editor__toolbar [role="button"]:hover {
background: color-mix(in srgb, var(--ink) 8%, transparent) !important;
}
.nb-mdx-editor__toolbar button[data-state="on"],
.nb-mdx-editor__toolbar [role="button"][data-state="on"],
.nb-mdx-editor__toolbar button[aria-pressed="true"],
.nb-mdx-editor__toolbar [role="button"][aria-pressed="true"] {
background: color-mix(in srgb, var(--amber) 22%, transparent) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 42%, transparent) !important;
color: var(--ink) !important;
}
.nb-mdx-editor__toolbar button[data-state="on"] svg,
.nb-mdx-editor__toolbar [role="button"][data-state="on"] svg,
.nb-mdx-editor__toolbar button[aria-pressed="true"] svg,
.nb-mdx-editor__toolbar [role="button"][aria-pressed="true"] svg {
color: var(--amber);
}
.nb-mdx-editor__toolbar svg {
width: 14px;
height: 14px;
}
.nb-mdx-editor__toolbar button.nb-mdx-editor__preview-toggle {
width: auto !important;
min-width: 58px !important;
max-width: none !important;
padding: 0 8px !important;
border-radius: 7px !important;
font-size: 11px !important;
font-weight: 650 !important;
}
.nb-mdx-editor-shell.is-previewing .nb-mdx-editor__content {
display: none;
}
.nb-mdx-editor__toolbar-break {
flex-basis: 100%;
width: 0;
height: 0;
}
.nb-mdx-editor__block-select {
display: inline-flex;
flex: 0 0 auto;
max-width: 100%;
}
.nb-mdx-editor__block-select button,
.nb-mdx-editor__block-select [role="button"] {
width: auto !important;
min-width: 86px !important;
max-width: 118px !important;
height: 24px !important;
min-height: 24px !important;
justify-content: space-between;
padding: 0 7px !important;
background: transparent !important;
font-size: 11px !important;
line-height: 1;
}
.nb-mdx-editor__block-select svg {
width: 12px;
height: 12px;
}
.nb-mdx-editor__content {
min-height: 360px;
padding: 12px 2px 24px;
font-family: var(--sans);
font-size: 14px;
line-height: 1.65;
color: var(--ink-2);
}
.nb-mdx-editor__content:focus {
outline: none;
}
.nb-mdx-editor__content p {
margin: 0 0 10px;
}
.nb-studio__editor-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
padding: 8px 10px;
}
.nb-studio__source-btn {
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
background: var(--bone);
color: var(--ink-3);
font-family: var(--sans);
font-size: 11px;
border-radius: 999px;
padding: 4px 10px;
cursor: pointer;
}
.nb-studio__save-btn {
border: 1px solid var(--ink);
background: var(--ink);
color: var(--bone);
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
border-radius: 999px;
padding: 5px 12px;
cursor: pointer;
}
/* Notebook 3-panel fixed chrome: shared headers stay fixed, panel bodies scroll. */
.nb-workspace__left,
.nb-workspace__right {
min-height: 0;
overflow: hidden;
}
.nb-sources,
.nb-studio {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
}
.nb-sources__head,
.nb-sources__detail-head,
.nb-chat__header,
.nb-studio__head,
.nb-studio__editor-breadcrumb {
flex: 0 0 52px;
min-height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 0 16px;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
background: var(--bone);
}
.nb-sources__title,
.nb-chat__title,
.nb-studio__title,
.nb-sources__detail-title {
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
color: var(--ink);
}
.nb-sources.is-collapsed .nb-sources__head,
.nb-studio.is-collapsed .nb-studio__head {
justify-content: center;
padding: 0;
}
.nb-sources__body,
.nb-studio__body,
.nb-studio__editor-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
.nb-studio__body,
.nb-studio__editor-scroll {
background: color-mix(in srgb, var(--bone-2) 70%, var(--bone));
}
.nb-studio__body,
.nb-studio__editor-scroll {
display: flex;
flex-direction: column;
}
.nb-studio__add-wrap,
.nb-studio__editor-footer {
flex: 0 0 auto;
background: var(--bone);
}
@media (max-width: 1280px) {
.nb-home__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.nb-workspace__main {
grid-template-columns: minmax(240px, 22fr) minmax(0, 50fr) minmax(
260px,
28fr
);
}
.nb-workspace__main.is-studio-editing {
grid-template-columns: minmax(220px, 18fr) minmax(380px, 36fr) minmax(
420px,
46fr
);
}
}
@media (max-width: 980px) {
.nb-home__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nb-workspace {
height: auto;
min-height: 100vh;
overflow: visible;
}
.nb-workspace__main {
grid-template-columns: 1fr;
height: auto;
overflow: visible;
}
.nb-workspace__left,
.nb-workspace__center,
.nb-workspace__right {
border-right: none;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
}
/* ── User / AI message ──────────────────────────────────────────────── */
/* Option B — 중간과정(preamble/중간/sub-agent) 텍스트. 답변 버블 chrome
(gutter №, head) 은 JSX 에서 이미 제외. 여기선 gap/패딩만 줄여 MagazineStepRow
draft 안에서 가벼운 본문처럼 보이게. 최종답변(standalone)은 compact 없이 풀 버블. */
/* 마크다운 본문(AI 답변) — pg-msg__content 의 pre-wrap 을 상속하면 마크다운
소스의 soft break(\n)가 하드 개행으로 렌더돼 줄간격/줄바꿈이 디자인과
달라진다. normal 로 되돌림. 코드 블록은 / 가 자체 white-space
를 지정하므로 영향 없음. */
.md-body {
white-space: normal;
}
/* AI 답변 마크다운 첫 문단 첫 글자 = 드롭캡. JSX 수정 없이 ::first-letter
로 자동 적용. mock 의 ```` 와 동일 효과. */
.pg-msg--ai .md-body > p:first-child::first-letter {
float: left;
margin-top: 2px;
margin-right: 8px;
font-family: var(--serif);
font-size: 2.4em;
font-weight: 700;
line-height: 0.88;
color: var(--ink);
}
/* 답변 본문(.ws-msg-ai)의 30px 하단 여백이 액션 바를 멀리 밀어냄 → 액션 바가
있는 메시지에서만 답변 하단을 좁혀 바를 답변에 붙인다(:has). 액션 바 없는
메시지의 메시지 간격(30px)은 그대로. */
/* 답변/질문 액션 바 — 상시 노출이 아니라 메시지 hover/focus 시에만(마우스 근처).
터치/키보드 접근성: focus-within 도 노출. opacity 만 토글(레이아웃 고정 —
height 를 hover 로 바꾸면 아래 콘텐츠가 밀려 떨린다). 중간 문구엔 애초에
액션 바를 렌더하지 않으므로(ChatTimeline showActions) 빈 공간도 없다. */
.ws-msg-ai-wrap .pg-msg__actions,
.ws-msg-user-wrap .pg-msg__actions {
opacity: 0;
transition: opacity 0.14s ease;
}
.ws-msg-ai-wrap:hover .pg-msg__actions,
.ws-msg-ai-wrap:focus-within .pg-msg__actions,
.ws-msg-user-wrap:hover .pg-msg__actions,
.ws-msg-user-wrap:focus-within .pg-msg__actions {
opacity: 1;
}
/* 질문(사용자) 복사 — 우측 정렬, 컴팩트한 위 여백. */
/* 피드백 선택 표시(👍/👎) — 테라코타. */
/* ── 스트리밍 로더 / fleuron ─────────────────────────────────────────── */
.pg-streamloader {
display: flex;
gap: 20px;
max-width: 880px;
width: 100%;
margin: 0 auto;
animation: fadeIn 0.3s ease;
}
.pg-streamloader__body {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
}
.pg-streamloader__text {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
color: var(--terra);
}
/* AI 응답 준비중 skeleton — message row 레이아웃(gutter+body) 유지,
디자인의 mono/terra 표현으로 통일. shimmer 키프레임은 globals.css. */
.pg-skel {
display: flex;
gap: 20px;
max-width: 880px;
width: 100%;
margin: 0 auto;
animation: fadeIn 0.3s ease;
}
.pg-skel__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 6px;
}
.pg-skel-bar {
position: relative;
height: 12px;
border-radius: 2px;
background: color-mix(in srgb, var(--ink) 6%, transparent);
overflow: hidden;
}
.pg-skel-bar__shimmer {
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent 0%,
color-mix(in srgb, var(--terra) 22%, transparent) 50%,
transparent 100%
);
animation: shimmer 1.4s infinite;
}
/* ==========================================================================
MockReasoning — 우측 슬라이딩 서랍
========================================================================== */
/* push 레이아웃 — 닫힘 시 margin-right:-380 으로 폭 0 소비(.pg-shell
overflow:hidden 가 클리핑), 열림 시 margin-right:0 → 컨텐츠 영역을 밀어냄. */
.pg-rag-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.pg-rag-card {
position: relative;
padding: 14px;
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 2px;
}
.pg-rag-card__stamp {
position: absolute;
right: 12px;
top: 10px;
display: flex;
align-items: center;
gap: 3px;
font-family: var(--mono);
font-size: 8px;
font-weight: 900;
padding: 2px 5px;
border: 1px solid;
border-radius: 1px;
transform: rotate(5deg);
opacity: 0.8;
user-select: none;
}
.pg-rag-card__stamp--web {
color: var(--moss);
border-color: var(--moss);
}
.pg-rag-card__stamp--rag {
color: var(--terra);
border-color: var(--terra);
}
.pg-rag-card__meta {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
}
.pg-rag-card__match {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
color: var(--ink-3);
}
.pg-rag-card__score {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
color: var(--moss);
}
.pg-rag-card__title {
margin-bottom: 8px;
max-width: 80%;
font-family: var(--serif);
font-size: 13px;
font-weight: 700;
line-height: 1.25;
color: var(--ink);
}
.pg-rag-card__snippet {
padding: 10px;
font-family: var(--mono);
font-size: 11px;
line-height: 1.5;
color: var(--ink-2);
background: var(--bone-2);
border-left: 2px solid var(--ink-4);
white-space: pre-wrap;
overflow-x: auto;
}
.pg-parse-meta {
padding: 16px;
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 2px;
}
.pg-parse-meta__label {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 8px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
color: var(--terra);
}
.pg-parse-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.pg-parse-table tr {
border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.pg-parse-table tr:last-child {
border-bottom: none;
}
.pg-parse-table td {
padding: 6px 0;
}
.pg-parse-table__k {
font-family: var(--mono);
color: var(--ink-3);
}
.pg-parse-table__v {
text-align: right;
}
.pg-parse-table__v--name {
font-family: var(--sans);
font-weight: 700;
color: var(--ink);
}
.pg-parse-table__v--mono {
font-family: var(--mono);
color: var(--ink-2);
}
.pg-parse-table__v--tok {
font-family: var(--mono);
font-weight: 700;
color: var(--moss);
}
.pg-parse-block {
display: flex;
flex-direction: column;
gap: 6px;
}
.pg-parse-block__label {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
color: var(--ink-3);
}
.pg-parse-abstract {
padding: 14px;
font-family: var(--serif);
font-size: 13px;
font-style: italic;
line-height: 1.6;
color: var(--ink-2);
background: var(--bone);
border: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent);
border-radius: 2px;
}
.pg-parse-ent-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.pg-parse-ent {
padding: 10px 12px;
background: var(--bone-2);
border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
border-radius: 2px;
}
.pg-parse-ent__row {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
}
.pg-parse-ent__key {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
color: var(--terra);
}
.pg-parse-ent__val {
font-family: var(--mono);
font-size: 9px;
color: var(--ink-3);
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 5%, transparent);
padding: 1px 4px;
border-radius: 2px;
}
.pg-parse-ent__desc {
font-family: var(--sans);
font-size: 11px;
color: var(--ink-3);
}
.pg-parse-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 20px;
padding: 40px 20px;
text-align: center;
background: color-mix(in srgb, var(--bone-3) 10%, transparent);
border: 1px dashed var(--ink-4);
border-radius: 2px;
}
.pg-parse-empty__icon {
margin-bottom: 12px;
line-height: 0;
color: var(--ink-4);
}
.pg-parse-empty__title {
margin-bottom: 6px;
font-family: var(--serif);
font-size: 16px;
font-weight: 700;
color: var(--ink);
}
.pg-parse-empty__copy {
max-width: 25ch;
margin-bottom: 20px;
font-family: var(--sans);
font-size: 12px;
line-height: 1.5;
color: var(--ink-3);
}
.pg-parse-empty__mark {
font-family: var(--serif);
font-size: 20px;
color: var(--ink-4);
opacity: 0.4;
}
/* ==========================================================================
MockHitlPanel — 인적 검증 결재판
상태(pending/approved/declined)별 accent 색을 --pg-accent 한 곳에서 결정,
하위 요소는 모두 var(--pg-accent) 를 참조한다.
========================================================================== */
/* HITL 공통 셸(HitlDecisionShell) — "허용 (이 세션)" 버튼. 기존
ToolPermissionRequestCard 의 inline 스타일을 클래스로 승격 (moss outline
으로 primary 승인(filled moss)과 시각 구분). */
/* 거부 → 인라인 피드백 모드 (CC No-input 대응): 텍스트필드 + 거부 전송 + 취소 */
/* ==========================================================================
Message (실제 컴포넌트) 재스킨 — MockMessageList 에 없던 표면 보강
(agent 작성자 / flash / 도구호출 / 코드 / 첨부 / 반응 / 영수증 /
날짜 구분선 / 컨텍스트 메뉴 / 드롭캡)
========================================================================== */
/* AI 답변 첫 글자 드롭캡 — markdown 본문이라 ::first-letter 로 처리 */
/* Option B — 중간과정(compact) 텍스트는 드롭캡(첫 글자 확대)을 끈다. 드롭캡은
최종답변 전용 매거진 리딩 스타일이라, sub-agent/preamble 펼침에선 일반 본문
첫 글자로 보이게. 위 두 드롭캡 규칙(.md-body / .pg-msg__content) 모두 무효화. */
.pg-msg--ai.pg-msg--compact .pg-msg__content::first-letter,
.pg-msg--ai.pg-msg--compact .md-body > p:first-child::first-letter {
float: none;
margin: 0;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
}
/* 날짜 구분선 */
/* 메시지 컨텍스트 메뉴 (길게 누르기 / 우클릭) */
/* 추론 버블 — ReasoningMessage 재스킨 보강 (collapsed 요약 / 다음 단계 표시) */
.pg-think__summary {
margin-top: 10px;
font-family: var(--serif);
font-size: 16px;
font-style: italic;
line-height: 1.5;
color: var(--ink-2);
}
.pg-think__next {
display: flex;
align-items: center;
gap: 8px;
margin-left: 24px;
margin-top: 6px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
}
.pg-think__next-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--terra);
animation: pulse 1s infinite;
}
/* Notebook settings drawer: notebook-scoped management surface. */
.pg-chrome__settings-icon {
width: 12px;
height: 12px;
position: relative;
display: inline-block;
border: 2px solid currentColor;
border-radius: 50%;
}
.pg-chrome__settings-icon::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: currentColor;
}
.nb-settings__backdrop {
position: fixed;
inset: 0;
z-index: 102;
background: color-mix(in srgb, var(--ink) 32%, transparent);
backdrop-filter: blur(2px);
}
.nb-settings {
position: fixed;
z-index: 103;
top: 0;
right: 0;
width: min(620px, calc(100vw - 24px));
height: 100vh;
display: flex;
flex-direction: column;
background: var(--bone);
color: var(--ink);
border-left: 2px solid var(--ink);
box-shadow: -18px 0 42px color-mix(in srgb, var(--ink) 24%, transparent);
}
.nb-settings__head {
flex: 0 0 auto;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 22px 22px 16px;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
background: var(--bone-2);
}
.nb-settings__eyebrow {
margin: 0 0 5px;
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
color: var(--terra);
text-transform: uppercase;
}
.nb-settings__title {
margin: 0;
max-width: 320px;
font-family: var(--serif);
font-size: 20px;
font-weight: 900;
line-height: 1.25;
color: var(--ink);
}
.nb-settings__close {
width: 36px;
height: 36px;
flex: 0 0 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
border-radius: 4px;
background: var(--bone);
color: var(--ink);
cursor: pointer;
font-size: 22px;
line-height: 1;
}
.nb-settings__tabs {
flex: 0 0 auto;
display: flex;
gap: 6px;
overflow-x: auto;
padding: 10px 14px;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
background: var(--bone);
}
.nb-settings__tab {
min-height: 36px;
padding: 0 12px;
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 4px;
background: color-mix(in srgb, var(--bone-2) 70%, var(--bone));
color: var(--ink-2);
cursor: pointer;
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
white-space: nowrap;
}
.nb-settings__tab.is-active {
border-color: var(--amber);
background: color-mix(in srgb, var(--amber) 24%, var(--bone));
color: var(--ink);
box-shadow: inset 0 -2px 0 var(--amber);
}
.nb-settings__body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 18px;
background: color-mix(in srgb, var(--bone-2) 70%, var(--bone));
}
.nb-settings__section {
display: flex;
flex-direction: column;
gap: 12px;
}
.nb-settings__section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.nb-settings__section-title {
margin: 0;
font-family: var(--serif);
font-size: 18px;
font-weight: 900;
color: var(--ink);
}
.nb-settings__status,
.nb-settings__badge {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--amber) 22%, var(--bone));
color: var(--ink);
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
white-space: nowrap;
}
.nb-settings__row {
display: grid;
grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
gap: 12px;
align-items: start;
padding: 9px 0;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.nb-settings__row-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
color: var(--ink-3);
}
.nb-settings__row-value {
min-width: 0;
overflow-wrap: anywhere;
font-size: 13px;
font-weight: 700;
color: var(--ink);
line-height: 1.45;
}
.nb-settings__row-value.is-muted {
color: var(--ink-3);
}
.nb-settings__profile-card,
.nb-settings__placeholder {
padding: 14px;
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 8px;
background: var(--bone);
}
.nb-settings__profile-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.nb-settings__profile-kind {
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
color: var(--terra);
}
.nb-settings__profile-card h4,
.nb-settings__placeholder h3 {
margin: 0 0 6px;
font-family: var(--serif);
font-size: 16px;
font-weight: 900;
color: var(--ink);
}
.nb-settings__profile-card p,
.nb-settings__placeholder p,
.nb-settings__empty {
margin: 0;
color: var(--ink-3);
font-size: 13px;
line-height: 1.55;
}
.nb-settings__warning {
margin-top: 10px !important;
padding: 9px 10px;
border-radius: 6px;
background: color-mix(in srgb, var(--amber) 24%, var(--bone));
color: var(--ink);
font-weight: 800;
}
@media (max-width: 720px) {
.nb-settings {
width: 100vw;
}
.nb-settings__row {
grid-template-columns: 1fr;
gap: 4px;
}
}
/* Enhanced studio result icons and audio player controls. */
.nb-studio__result-item {
padding: 10px 6px;
}
.nb-studio__result-icon {
width: 36px;
height: 36px;
border: 2px solid color-mix(in srgb, var(--ink) 18%, transparent);
background: var(--bone);
color: var(--ink);
}
.nb-studio__result-item--podcast .nb-studio__result-icon {
border-color: color-mix(in srgb, var(--blue) 55%, var(--ink) 10%);
background: color-mix(in srgb, var(--blue) 9%, var(--bone));
color: var(--blue);
}
.nb-studio__result-item.is-selected .nb-studio__result-icon {
border-color: var(--amber);
background: color-mix(in srgb, var(--amber) 28%, var(--bone));
}
.nb-studio__wave-icon {
width: 20px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px;
}
.nb-studio__wave-icon span {
width: 3px;
border-radius: 999px;
background: currentColor;
}
.nb-studio__wave-icon span:nth-child(1) {
height: 8px;
}
.nb-studio__wave-icon span:nth-child(2) {
height: 15px;
}
.nb-studio__wave-icon span:nth-child(3) {
height: 11px;
}
.nb-studio__wave-icon span:nth-child(4) {
height: 18px;
}
.nb-studio__audio-player {
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 14px 16px;
border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
background: var(--bone);
box-shadow: 0 -8px 24px color-mix(in srgb, var(--ink) 9%, transparent);
}
.nb-studio__audio-topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.nb-studio__audio-actions {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 4px;
}
.nb-studio__audio-title {
font-size: 15px;
line-height: 1.25;
}
.nb-studio__audio-kicker {
color: var(--ink-3);
text-transform: none;
}
.nb-studio__audio-icon-btn,
.nb-studio__audio-close {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 8px;
background: transparent;
color: var(--ink-2);
cursor: pointer;
font-size: 24px;
font-weight: 800;
line-height: 1;
}
.nb-studio__audio-icon-btn:hover,
.nb-studio__audio-close:hover {
background: color-mix(in srgb, var(--ink) 7%, transparent);
color: var(--ink);
}
.nb-studio__audio-control {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 0;
}
.nb-studio__audio-control audio {
display: none;
}
.nb-studio__audio-progress {
width: 100%;
height: 22px;
accent-color: var(--blue);
cursor: pointer;
}
.nb-studio__audio-progress:disabled {
cursor: wait;
opacity: 0.55;
}
.nb-studio__audio-time {
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--mono);
font-size: 11px;
font-weight: 800;
color: var(--ink-3);
}
.nb-studio__audio-controls {
display: grid;
grid-template-columns: 50px 44px 56px 44px;
justify-content: center;
align-items: center;
gap: 12px;
}
.nb-studio__audio-rate,
.nb-studio__audio-skip,
.nb-studio__audio-play {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
font-family: var(--mono);
font-weight: 900;
}
.nb-studio__audio-rate {
background: transparent;
color: var(--blue);
font-size: 14px;
}
.nb-studio__audio-skip {
border-radius: 999px;
background: transparent;
color: var(--blue);
font-size: 15px;
}
.nb-studio__audio-skip:hover,
.nb-studio__audio-rate:hover {
background: color-mix(in srgb, var(--blue) 9%, transparent);
}
.nb-studio__audio-play {
width: 56px;
height: 56px;
border-radius: 999px;
background: var(--blue);
color: white;
font-size: 24px;
box-shadow: 0 8px 18px color-mix(in srgb, var(--blue) 30%, transparent);
}
@media (max-width: 520px) {
.nb-studio__audio-controls {
gap: 8px;
}
}
.nb-settings__create-btn {
min-height: 40px;
align-self: flex-start;
padding: 0 13px;
border: 1px solid var(--amber);
border-radius: 6px;
background: color-mix(in srgb, var(--amber) 18%, var(--bone));
color: var(--ink);
cursor: pointer;
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
}
.nb-settings__create-btn:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.nb-settings__profile-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.nb-settings__profile-actions {
display: flex;
justify-content: flex-end;
gap: 6px;
margin-top: 12px;
}
.nb-settings__profile-actions button,
.nb-settings__form-actions button {
min-height: 34px;
padding: 0 10px;
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 6px;
background: var(--bone);
color: var(--ink);
cursor: pointer;
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
}
.nb-settings__profile-actions button:hover,
.nb-settings__form-actions button:hover {
background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.nb-settings__profile-actions button:disabled,
.nb-settings__form-actions button:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.nb-settings__profile-actions button.is-danger {
color: color-mix(in srgb, #b42318 80%, var(--ink));
}
.nb-settings__form {
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px;
border: 1px solid color-mix(in srgb, var(--amber) 44%, var(--ink) 10%);
border-radius: 8px;
background: var(--bone);
}
.nb-settings__form-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.nb-settings__form-head h3 {
margin: 0;
font-family: var(--serif);
font-size: 16px;
font-weight: 900;
}
.nb-settings__form-head button {
width: 32px;
height: 32px;
border: none;
border-radius: 6px;
background: transparent;
color: var(--ink-2);
cursor: pointer;
font-size: 20px;
}
.nb-settings__field {
display: flex;
flex-direction: column;
gap: 5px;
}
.nb-settings__field span {
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
color: var(--ink-3);
}
.nb-settings__field input,
.nb-settings__field select,
.nb-settings__field textarea {
width: 100%;
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 6px;
background: color-mix(in srgb, var(--bone-2) 45%, var(--bone));
color: var(--ink);
font-family: var(--sans);
font-size: 13px;
}
.nb-settings__field input,
.nb-settings__field select {
height: 38px;
padding: 0 10px;
}
.nb-settings__field textarea {
padding: 9px 10px;
resize: vertical;
line-height: 1.45;
}
.nb-settings__field-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.nb-settings__advanced-fields summary {
cursor: pointer;
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
color: var(--ink-3);
}
.nb-settings__advanced-fields .nb-settings__field-grid {
margin-top: 10px;
}
.nb-settings__form-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.nb-settings__form-actions button:last-child {
border-color: var(--ink);
background: var(--ink);
color: var(--bone);
}
@media (max-width: 720px) {
.nb-settings__field-grid {
grid-template-columns: 1fr;
}
}
/* Studio audio playback actions and details dialog. */
.nb-studio__audio-player {
border-top: 2px solid color-mix(in srgb, var(--ink) 14%, transparent);
background: color-mix(in srgb, var(--bone) 88%, var(--amber) 12%);
}
.nb-studio__audio-topline {
padding-bottom: 2px;
}
.nb-studio__audio-actions {
gap: 2px;
}
.nb-studio__audio-icon-btn,
.nb-studio__audio-close {
width: 34px;
height: 34px;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
background: color-mix(in srgb, var(--bone) 82%, white);
}
.nb-studio__audio-icon-btn svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.nb-studio__audio-icon-btn:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.nb-studio__audio-icon-btn.is-danger {
color: color-mix(in srgb, #b42318 78%, var(--ink));
}
.nb-studio__audio-progress {
height: 18px;
}
.nb-studio__audio-progress::-webkit-slider-runnable-track {
height: 5px;
border-radius: 999px;
background: color-mix(in srgb, var(--ink) 26%, transparent);
}
.nb-studio__audio-progress::-webkit-slider-thumb {
width: 18px;
height: 18px;
margin-top: -6px;
}
.nb-studio__audio-controls {
grid-template-columns: 54px 48px 58px 48px;
gap: 14px;
}
.nb-studio__audio-rate {
border-radius: 999px;
color: var(--blue);
background: color-mix(in srgb, var(--blue) 8%, transparent);
}
.nb-studio__audio-skip {
color: var(--blue);
}
.nb-studio__audio-skip svg {
width: 34px;
height: 34px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.nb-studio__audio-skip text {
fill: currentColor;
stroke: none;
font-family: var(--mono);
font-size: 6px;
font-weight: 900;
}
.nb-studio__audio-play {
width: 58px;
height: 58px;
background: var(--blue);
box-shadow:
0 8px 18px color-mix(in srgb, var(--blue) 28%, transparent),
inset 0 -2px 0 color-mix(in srgb, var(--ink) 18%, transparent);
}
.nb-studio__details-backdrop {
position: fixed;
inset: 0;
z-index: 104;
background: color-mix(in srgb, var(--ink) 36%, transparent);
backdrop-filter: blur(2px);
}
.nb-studio__details {
position: fixed;
z-index: 105;
top: 50%;
left: 50%;
width: min(680px, calc(100vw - 40px));
max-height: min(760px, calc(100vh - 56px));
display: flex;
flex-direction: column;
transform: translate(-50%, -50%);
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 10px;
background: var(--bone);
box-shadow: 0 22px 54px color-mix(in srgb, var(--ink) 28%, transparent);
overflow: hidden;
}
.nb-studio__details-head {
flex: 0 0 auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 16px 18px;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
background: var(--bone-2);
}
.nb-studio__details-head p {
margin: 0 0 4px;
color: var(--terra);
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
}
.nb-studio__details-head h2 {
margin: 0;
font-family: var(--serif);
font-size: 18px;
font-weight: 900;
color: var(--ink);
}
.nb-studio__details-head button {
width: 34px;
height: 34px;
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 6px;
background: var(--bone);
color: var(--ink);
cursor: pointer;
font-size: 22px;
line-height: 1;
}
.nb-studio__details-body {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
padding: 16px 18px 18px;
}
.nb-studio__details-body section + section {
margin-top: 16px;
}
.nb-studio__details-body h3 {
margin: 0 0 6px;
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
color: var(--ink-3);
}
.nb-studio__details-body pre {
margin: 0;
max-height: 220px;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--bone-2) 68%, var(--bone));
color: var(--ink);
padding: 10px;
font-family: var(--mono);
font-size: 11px;
line-height: 1.5;
}
/* Notebook settings speaker management and studio retry actions. */
.nb-settings__subsection {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 10px;
padding-top: 14px;
border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.nb-settings__speaker-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 2px;
}
.nb-settings__speaker-head span {
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
color: var(--ink-3);
text-transform: uppercase;
}
.nb-settings__speaker-head button,
.nb-settings__speaker-card-head button {
min-height: 30px;
padding: 0 9px;
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 6px;
background: var(--bone);
color: var(--ink);
cursor: pointer;
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
}
.nb-settings__speaker-head button:disabled,
.nb-settings__speaker-card-head button:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.nb-settings__speaker-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.nb-settings__speaker-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--bone-2) 42%, var(--bone));
}
.nb-settings__speaker-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.nb-settings__speaker-card-head strong {
font-family: var(--serif);
font-size: 14px;
color: var(--ink);
}
.nb-settings__speaker-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.nb-settings__speaker-tags span {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--ink) 7%, var(--bone));
color: var(--ink-2);
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
}
.nb-studio__result-hit {
min-width: 0;
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 10px;
border: none;
background: transparent;
color: inherit;
cursor: pointer;
text-align: left;
padding: 0;
}
.nb-studio__result-hit:disabled {
cursor: default;
}
.nb-studio__result-retry {
flex: 0 0 auto;
min-height: 30px;
padding: 0 9px;
border: 1px solid var(--amber);
border-radius: 6px;
background: color-mix(in srgb, var(--amber) 18%, var(--bone));
color: var(--ink);
cursor: pointer;
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
}
.nb-studio__result-retry:disabled {
cursor: wait;
opacity: 0.6;
}
.nb-studio__result-item--infographic {
align-items: flex-start;
}
.nb-studio__result-item--infographic .nb-studio__result-hit {
align-items: flex-start;
}
.nb-studio__infographic-glyph {
font-family: var(--mono);
font-size: 16px;
line-height: 1;
}
.nb-studio__infographic-preview {
display: block;
width: min(100%, 220px);
aspect-ratio: 16 / 9;
margin-top: 7px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--ink) 5%, var(--bone));
}
.nb-studio__infographic-preview img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.nb-studio__infographic-error {
display: block;
max-width: 220px;
margin-top: 7px;
padding: 7px 8px;
font-family: var(--sans);
font-size: 11px;
line-height: 1.35;
color: color-mix(in srgb, var(--terra-ink) 88%, var(--ink));
background: color-mix(in srgb, var(--amber) 18%, var(--bone));
border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
border-radius: 8px;
white-space: normal;
}
/* ── Infographic viewer modal ─────────────────────────────────────── */
.nb-infoview__backdrop {
position: fixed;
inset: 0;
z-index: 110;
background: color-mix(in srgb, var(--ink) 52%, transparent);
backdrop-filter: blur(2px);
}
.nb-infoview {
position: fixed;
z-index: 111;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(1040px, calc(100vw - 44px));
max-height: calc(100vh - 56px);
overflow: auto;
padding: 22px;
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 12px;
background: var(--bone);
box-shadow: 0 24px 70px color-mix(in srgb, var(--ink) 34%, transparent);
}
.nb-infoview__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.nb-infoview__titlebox {
min-width: 0;
}
.nb-infoview__title {
margin: 0;
font-family: var(--serif);
font-size: 21px;
line-height: 1.25;
color: var(--ink);
}
.nb-infoview__meta {
display: block;
margin-top: 4px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.8px;
color: var(--ink-3);
text-transform: uppercase;
}
.nb-infoview__close {
flex: 0 0 auto;
width: 34px;
height: 34px;
border: none;
border-radius: 999px;
background: transparent;
color: var(--ink-3);
cursor: pointer;
font-size: 24px;
line-height: 1;
}
.nb-infoview__close:hover {
background: color-mix(in srgb, var(--ink) 6%, transparent);
color: var(--ink);
}
.nb-infoview__image-wrap {
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--ink) 5%, var(--bone));
}
.nb-infoview__image {
display: block;
width: 100%;
height: auto;
max-height: calc(100vh - 260px);
object-fit: contain;
}
.nb-infoview__error,
.nb-infoview__empty {
margin-bottom: 12px;
padding: 10px 12px;
border-radius: 8px;
font-family: var(--sans);
font-size: 13px;
line-height: 1.45;
}
.nb-infoview__error {
border: 1px solid color-mix(in srgb, var(--amber) 42%, transparent);
background: color-mix(in srgb, var(--amber) 18%, var(--bone));
color: color-mix(in srgb, var(--terra-ink) 88%, var(--ink));
}
.nb-infoview__empty {
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
background: color-mix(in srgb, var(--ink) 4%, var(--bone));
color: var(--ink-3);
}
.nb-infoview__prompt {
margin-top: 14px;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--ink) 3%, var(--bone));
}
.nb-infoview__prompt summary {
cursor: pointer;
padding: 10px 12px;
font-family: var(--mono);
font-size: 10px;
font-weight: 900;
letter-spacing: 0.9px;
text-transform: uppercase;
color: var(--ink-2);
}
.nb-infoview__prompt pre {
max-height: 220px;
overflow: auto;
margin: 0;
padding: 0 12px 12px;
white-space: pre-wrap;
word-break: break-word;
font-family: var(--mono);
font-size: 11px;
line-height: 1.45;
color: var(--ink-2);
}
.nb-infoview__foot {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 16px;
}
.nb-infoview__primary,
.nb-infoview__secondary {
min-height: 36px;
padding: 8px 14px;
border-radius: 999px;
cursor: pointer;
font-family: var(--sans);
font-size: 13px;
font-weight: 700;
}
.nb-infoview__primary {
border: 1px solid var(--terra-ink);
background: var(--terra-ink);
color: var(--bone);
}
.nb-infoview__secondary {
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
background: transparent;
color: var(--ink-2);
}
@media (max-width: 640px) {
.nb-infoview {
width: calc(100vw - 22px);
max-height: calc(100vh - 22px);
padding: 16px;
}
.nb-infoview__foot {
flex-direction: column-reverse;
}
.nb-infoview__primary,
.nb-infoview__secondary {
width: 100%;
}
}
/* ── Deep research 보고서 (Studio) ───────────────────────────────── */
.nb-report-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.nb-report__badge {
font-size: 11px;
padding: 1px 7px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--ink, #1d1d1f) 20%, transparent);
}
.nb-report__badge--strict {
background: color-mix(in srgb, #2563eb 12%, transparent);
}
.nb-report__badge--hybrid {
background: color-mix(in srgb, #16a34a 12%, transparent);
}
.nb-report__badge--insight {
background: color-mix(in srgb, #9333ea 12%, transparent);
}
.nb-report__badge--warn {
background: color-mix(in srgb, #d97706 16%, transparent);
border-color: color-mix(in srgb, #d97706 45%, transparent);
}
.nb-report-viewer__backdrop {
position: fixed;
inset: 0;
background: color-mix(in srgb, #000 45%, transparent);
z-index: 104;
}
.nb-report-viewer {
position: fixed;
inset: 4% 8%;
background: var(--paper, #fff);
border-radius: 12px;
z-index: 105;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 24px 60px color-mix(in srgb, #000 25%, transparent);
}
.nb-report-viewer__head {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid color-mix(in srgb, var(--ink, #1d1d1f) 10%, transparent);
flex-wrap: wrap;
}
.nb-report-viewer__title-wrap {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1;
}
.nb-report-viewer__title {
font-weight: 700;
font-size: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nb-report-viewer__meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: color-mix(in srgb, var(--ink, #1d1d1f) 60%, transparent);
}
.nb-report-viewer__actions {
display: flex;
gap: 6px;
}
.nb-report-viewer__btn {
font-size: 12px;
padding: 4px 12px;
border: 1px solid color-mix(in srgb, var(--ink, #1d1d1f) 20%, transparent);
border-radius: 8px;
background: transparent;
cursor: pointer;
}
.nb-report-viewer__notice {
padding: 8px 18px;
font-size: 12px;
background: color-mix(in srgb, #d97706 10%, transparent);
}
.nb-report-viewer__body {
flex: 1;
overflow-y: auto;
padding: 20px 28px;
}
/* ── Notebook mind map viewer ────────────────────────────────────── */
.nb-mindmap-dialog {
position: fixed;
z-index: 101;
inset: 42px;
display: flex;
flex-direction: column;
min-height: 0;
padding: 18px;
background: var(--bone);
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 10px;
box-shadow: 0 24px 60px color-mix(in srgb, var(--ink) 34%, transparent);
}
.nb-mindmap-dialog__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 14px;
}
.nb-mindmap-dialog__head h2 {
margin: 0;
color: var(--ink);
font-family: var(--serif);
font-size: 21px;
line-height: 1.25;
}
.nb-mindmap-dialog__kicker {
margin: 0 0 4px;
color: var(--ink-3);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.nb-mindmap {
position: relative;
display: flex;
flex: 1;
min-height: 420px;
overflow: hidden;
background:
linear-gradient(
color-mix(in srgb, var(--ink) 5%, transparent) 1px,
transparent 1px
),
linear-gradient(
90deg,
color-mix(in srgb, var(--ink) 5%, transparent) 1px,
transparent 1px
),
color-mix(in srgb, var(--bone) 84%, #fff);
background-size: 28px 28px;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 8px;
}
.nb-mindmap__toolbar {
position: absolute;
z-index: 2;
top: 12px;
right: 12px;
display: inline-flex;
gap: 4px;
padding: 4px;
background: color-mix(in srgb, var(--bone) 92%, #fff);
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 8px;
box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 12%, transparent);
}
.nb-mindmap__toolbar button {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
cursor: pointer;
background: transparent;
border: 0;
border-radius: 6px;
}
.nb-mindmap__toolbar button:hover,
.nb-mindmap__toolbar button:focus-visible {
color: var(--ink);
background: color-mix(in srgb, var(--ink) 7%, transparent);
outline: none;
}
.nb-mindmap__export {
position: relative;
display: inline-flex;
}
.nb-mindmap__export > button {
width: auto;
gap: 2px;
padding: 0 6px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
cursor: pointer;
background: transparent;
border: 0;
border-radius: 6px;
}
.nb-mindmap__export > button:hover,
.nb-mindmap__export > button:focus-visible {
color: var(--ink);
background: color-mix(in srgb, var(--ink) 7%, transparent);
outline: none;
}
.nb-mindmap__export > button:disabled {
opacity: 0.5;
cursor: default;
}
.nb-mindmap__export-backdrop {
position: fixed;
inset: 0;
z-index: 3;
}
.nb-mindmap__export-menu {
position: absolute;
z-index: 4;
top: calc(100% + 6px);
right: 0;
min-width: 132px;
display: flex;
flex-direction: column;
padding: 4px;
background: color-mix(in srgb, var(--bone) 96%, #fff);
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 8px;
box-shadow: 0 10px 26px color-mix(in srgb, var(--ink) 16%, transparent);
}
.nb-mindmap__export-menu button {
width: 100%;
justify-content: flex-start;
padding: 7px 10px;
font-family: var(--sans);
font-size: 13px;
color: var(--ink);
text-align: left;
background: transparent;
border: 0;
border-radius: 6px;
cursor: pointer;
}
.nb-mindmap__export-menu button:hover,
.nb-mindmap__export-menu button:focus-visible {
background: color-mix(in srgb, var(--ink) 7%, transparent);
outline: none;
}
.nb-mindmap__toolbar button.nb-mindmap__edit-save {
color: var(--accent, #2563eb);
}
.nb-mindmap__toolbar button.nb-mindmap__edit-save:hover,
.nb-mindmap__toolbar button.nb-mindmap__edit-save:focus-visible {
color: #fff;
background: var(--accent, #2563eb);
}
.nb-mindmap__toolbar button:disabled {
opacity: 0.4;
cursor: default;
}
/* 리치텍스트 포맷 툴바 — 편집모드 상단 고정바(좌측). 공용 .nb-rt-* 는
마인드맵 스코프(.nb-mindmap__rt-toolbar) 하위에서만 스타일링해 전역 누수 방지. */
.nb-mindmap__rt-toolbar {
position: absolute;
z-index: 2;
top: 12px;
left: 12px;
max-width: calc(100% - 200px);
}
.nb-mindmap__rt-toolbar.nb-rt-toolbar {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 3px;
padding: 4px 6px;
background: color-mix(in srgb, var(--bone) 92%, #fff);
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 8px;
box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 12%, transparent);
}
.nb-mindmap__rt-toolbar .nb-rt-btn {
min-width: 28px;
height: 28px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: var(--ink-2);
background: transparent;
border: 0;
border-radius: 6px;
cursor: pointer;
}
.nb-mindmap__rt-toolbar .nb-rt-btn:hover:not(:disabled) {
color: var(--ink);
background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.nb-mindmap__rt-toolbar .nb-rt-btn.is-active {
color: var(--ink);
background: color-mix(in srgb, var(--accent, #549688) 18%, transparent);
}
.nb-mindmap__rt-toolbar .nb-rt-btn:disabled,
.nb-mindmap__rt-toolbar .nb-rt-select:disabled,
.nb-mindmap__rt-toolbar .nb-rt-color input:disabled {
opacity: 0.4;
cursor: default;
}
.nb-mindmap__rt-toolbar .nb-rt-select {
height: 28px;
font-size: 12px;
color: var(--ink-2);
background: transparent;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 6px;
cursor: pointer;
}
.nb-mindmap__rt-toolbar .nb-rt-color {
position: relative;
display: inline-flex;
align-items: center;
}
/* 색 버튼: 아이콘 아래 현재 색 막대. */
.nb-mindmap__rt-toolbar .nb-rt-color-btn {
flex-direction: column;
gap: 1px;
height: auto;
padding: 3px 5px;
}
.nb-mindmap__rt-toolbar .nb-rt-color-bar {
width: 15px;
height: 3px;
border-radius: 1px;
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
/* 인페이지 색 팔레트 팝오버(네이티브 OS 색 다이얼로그 대체 — lastRange 유지). */
.nb-mindmap__rt-toolbar .nb-rt-swatches {
position: absolute;
z-index: 3;
top: calc(100% + 4px);
left: 0;
display: grid;
grid-template-columns: repeat(6, 16px);
gap: 4px;
padding: 6px;
background: color-mix(in srgb, var(--bone) 96%, #fff);
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 8px;
box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 16%, transparent);
}
.nb-mindmap__rt-toolbar .nb-rt-swatch {
width: 16px;
height: 16px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 4px;
cursor: pointer;
}
.nb-mindmap__rt-toolbar .nb-rt-swatch:hover {
outline: 2px solid color-mix(in srgb, var(--accent, #549688) 60%, transparent);
}
.nb-mindmap__canvas {
width: 100%;
min-height: 100%;
}
/* rich 노드 텍스트가 블록 기본 여백(p/div margin·padding)으로 아래로 밀려 박스
하단이 잘리는 것(위끝만 보임) 방지. 측정 div(.nb-mindmap__canvas 하위)와 실제
foreignObject 양쪽에 동일 적용돼 측정-렌더 높이가 일치한다. 마인드맵 스코프라
전역 누수 없음. */
.nb-mindmap .smm-richtext-node-wrap,
.nb-mindmap .smm-richtext-node-wrap p,
.nb-mindmap .smm-richtext-node-wrap div {
margin: 0;
padding: 0;
}
.nb-mindmap__error {
position: absolute;
inset: auto 16px 16px 16px;
padding: 10px 12px;
color: var(--danger);
font-family: var(--sans);
font-size: 13px;
background: color-mix(in srgb, var(--danger) 8%, var(--bone));
border: 1px solid color-mix(in srgb, var(--danger) 24%, transparent);
border-radius: 8px;
}
@media (max-width: 760px) {
.nb-mindmap-dialog {
inset: 14px;
padding: 14px;
}
.nb-mindmap-dialog__head h2 {
font-size: 18px;
}
.nb-mindmap {
min-height: 520px;
}
}
/* RAG 출처 드로어 본문의 표(RAGFlow HTML, colspan/rowspan 보존). 노트북 출처
본문(.nb-sources__doc-body table)과 동일 정책 — table-layout: fixed + cell wrap
으로 좁은 드로어 폭에서도 가로 스크롤 대신 셀이 아래로 흐른다. */
/* ── 오디오 프리셋 다이얼로그(정본=chat-core PodcastGenerateDialog) 클래스 패리티 이식 ── */
.nb-gen__heading {
display: flex;
flex-direction: column;
gap: 5px;
}
.nb-gen__lead {
margin: 0;
padding: 9px 13px;
font-family: var(--sans);
font-size: 13px;
line-height: 1.45;
color: var(--ink-2);
background: var(--bone-2);
border-left: 3px solid var(--amber);
border-radius: 0 5px 5px 0;
}
.nb-gen__lead strong {
font-weight: 700;
color: var(--ink);
}
.nb-gen__choice-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.nb-gen__choice {
position: relative;
display: flex;
min-height: 128px;
flex-direction: column;
align-items: flex-start;
gap: 5px;
padding: 11px 12px;
text-align: left;
font-family: var(--sans);
color: var(--ink-2);
background: var(--bone);
border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
border-radius: 6px;
cursor: pointer;
transition:
transform 0.12s ease,
box-shadow 0.12s ease,
border-color 0.12s ease;
}
.nb-gen__choice:hover {
border-color: var(--ink);
transform: translate(-2px, -2px);
box-shadow: 3px 3px 0 var(--ink);
}
.nb-gen__choice strong {
font-size: 13px;
color: var(--ink);
}
.nb-gen__choice small {
font-size: 11px;
line-height: 1.35;
color: var(--ink-3);
}
.nb-gen__choice.is-selected {
border-color: var(--amber);
background: color-mix(in srgb, var(--amber) 8%, var(--bone));
transform: translate(-2px, -2px);
box-shadow: 4px 4px 0 var(--amber);
}
/* 형식 카드 — 썸네일 없는 낮은 변형 (.nb-gen__choice 재사용) */
.nb-gen__choice--flat {
min-height: 84px;
}
.nb-gen__seg {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.nb-gen__seg-btn {
padding: 8px 10px;
font-family: var(--sans);
font-size: 12.5px;
color: var(--ink-2);
background: var(--bone);
border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
border-radius: 6px;
cursor: pointer;
transition: border-color 0.12s ease, background 0.12s ease;
}
.nb-gen__seg-btn:disabled {
opacity: 0.45;
cursor: default;
}
.nb-gen__seg-btn.is-selected {
border-color: var(--amber);
background: color-mix(in srgb, var(--amber) 10%, var(--bone));
color: var(--ink);
font-weight: 700;
}
.nb-gen__eyebrow {
font-family: var(--sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
color: var(--ws-terra);
text-transform: none;
}
.nb-gen__lead,
.nb-gen__hint {
color: var(--ws-ink-3);
}
.nb-gen__choice {
background: var(--ws-card);
border: 1px solid var(--ws-line);
border-radius: 12px;
color: var(--ws-ink-2);
box-shadow: none;
}
.nb-gen__choice:hover {
border-color: color-mix(in srgb, var(--ws-terra) 45%, var(--ws-line));
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(40, 35, 25, 0.08);
}
.nb-gen__choice.is-selected {
border: 1.5px solid var(--ws-terra);
background: color-mix(in srgb, var(--ws-terra) 5%, var(--ws-card));
transform: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-terra) 12%, transparent);
}
.nb-gen__choice.is-selected::after {
/* 체크 표시는 글리프가 아니라 SVG(ws FE 규칙: 이모지·딩벳 금지). */
content: "";
position: absolute;
top: 8px;
right: 8px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--ws-terra);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 11px 11px;
}
.nb-gen__choice strong {
color: var(--ws-ink);
}
.nb-gen__choice small {
color: var(--ws-ink-3);
}
.nb-gen__lead {
background: color-mix(in srgb, var(--ws-terra) 4%, var(--ws-bg));
border-left: 3px solid var(--ws-terra);
color: var(--ws-ink-2);
}
/* ── 칠판(자유 그리기) 다이얼로그 — 2026-09-11 craftnote 보드 이식 ─────────────── */
.wb-dialog {
position: fixed;
inset: 0;
z-index: 80;
display: flex;
align-items: center;
justify-content: center;
padding: 28px;
}
.wb-dialog__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.42);
}
.wb-dialog__panel {
position: relative;
z-index: 1;
width: min(1180px, 100%);
height: min(820px, calc(100vh - 56px));
min-height: 520px;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
overflow: hidden;
border: 1px solid var(--ws-line, #e5e7eb);
border-radius: 8px;
background: #fff;
box-shadow: 0 22px 70px rgba(15, 23, 42, 0.24);
}
.wb-dialog__panel:fullscreen {
width: 100vw;
height: 100vh;
min-height: 0;
border-radius: 0;
}
.wb-dialog__header {
min-height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid var(--ws-line, #e5e7eb);
}
.wb-dialog__title {
min-width: 0;
flex: 1;
display: flex;
align-items: center;
gap: 8px;
color: var(--ws-ink, #111827);
}
.wb-dialog__title-input {
min-width: 0;
flex: 1;
max-width: 420px;
padding: 6px 8px;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: var(--ws-ink, #111827);
font: inherit;
font-size: 14px;
font-weight: 700;
}
.wb-dialog__title-input:hover,
.wb-dialog__title-input:focus {
border-color: var(--ws-line, #e5e7eb);
background: #fff;
outline: none;
}
.wb-dialog__status {
flex-shrink: 0;
color: var(--ws-ink-3, #6b7280);
font-size: 12px;
font-weight: 500;
}
.wb-dialog__actions {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.wb-dialog__button {
min-height: 34px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 10px;
border: 1px solid var(--ws-line, #e5e7eb);
border-radius: 7px;
background: #fff;
color: var(--ws-ink, #111827);
font: inherit;
font-size: 12px;
font-weight: 650;
cursor: pointer;
transition:
background-color 160ms ease,
border-color 160ms ease;
}
.wb-dialog__button:hover:not(:disabled) {
background: var(--ws-hover, #f8fafc);
}
.wb-dialog__button:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.wb-dialog__button--primary {
border-color: #111827;
background: #111827;
color: #fff;
}
.wb-dialog__button--primary:hover:not(:disabled) {
background: #1f2937;
}
.wb-dialog__button:focus-visible,
.wb-dialog__icon:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
.wb-dialog__icon {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 7px;
background: transparent;
color: var(--ws-ink-2, #374151);
cursor: pointer;
}
.wb-dialog__icon:hover {
background: var(--ws-hover, #f8fafc);
}
.wb-dialog__canvas {
min-height: 0;
}
.wb-dialog__canvas .wb-canvas {
height: 100%;
}
.wb-dialog__spin {
animation: wb-spin 800ms linear infinite;
}
@keyframes wb-spin {
to {
transform: rotate(360deg);
}
}
.wb-canvas,
.wb-canvas .excalidraw {
width: 100%;
height: 100%;
}
/* Excalidraw 기본 크롬 중 노트북에서 뜻이 없는 것(파일 메뉴·라이브러리·프레임·임베드·마법 도구·우측 하단 도움말 ?) 숨김 */
.wb-canvas .main-menu-trigger,
.wb-canvas .default-sidebar-trigger,
.wb-canvas .sidebar-trigger.default-sidebar-trigger,
.wb-canvas .help-icon,
.wb-canvas [data-testid="toolbar-frame"],
.wb-canvas [data-testid="toolbar-embeddable"],
.wb-canvas [data-testid="toolbar-magicframe"] {
display: none !important;
}
.wb-canvas__loading {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--ws-ink-3, #6b7280);
font-size: 13px;
}
@media (max-width: 760px) {
.wb-dialog {
padding: 8px;
}
.wb-dialog__panel {
min-height: 0;
height: calc(100vh - 16px);
}
.wb-dialog__button span,
.wb-dialog__status {
display: none;
}
}
/* 칠판 시작점 템플릿 칩(백로그 6번) — 빈 캔버스일 때만 헤더 아래. 행은 3개(헤더·칩·캔버스)로 고정하고 캔버스를
3행에 **명시 배치**한다 — 칩 행이 빠지면(첫 획·기존 칠판 열기) 캔버스가 2행(auto)으로 올라와 높이 0 이 되던 결함
(2026-09-12: 손글씨 첫 획에 백지가 되고 도구 아이콘이 사라짐). 빈 2행은 0px 라 캔버스가 그대로 1fr 를 받는다. */
.wb-dialog__panel {
grid-template-rows: auto auto minmax(0, 1fr);
}
.wb-dialog__canvas {
grid-row: 3;
}
.wb-dialog__templates {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-bottom: 1px solid var(--ws-line, #e5e7eb);
background: #f8fafc;
}
.wb-dialog__templates-label {
margin-right: 4px;
color: var(--ws-ink-3, #6b7280);
font-size: 12px;
font-weight: 600;
}
.wb-dialog__template-chip {
min-height: 28px;
padding: 0 10px;
border: 1px solid var(--ws-line, #e5e7eb);
border-radius: 999px;
background: #fff;
color: var(--ws-ink, #111827);
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.wb-dialog__template-chip:hover:not(:disabled) {
background: var(--ws-hover, #f1f5f9);
}
.wb-dialog__template-chip:disabled {
opacity: 0.55;
cursor: default;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/chat-refresh.css ***!
\******************************************************************************************************************************************************************************************************************************************************************************/
/* Workspace chat only. Notebook, file pages and embedded chat hosts keep their styles. */
.xyren-chat,
.xyren-chat .xc-panel {
--ws-bg: #fcfbf9;
--ws-panel: #f2f1ed;
--ws-card: #ffffff;
--ws-line: #e4e4dc;
--ws-line-2: #dddcd0;
--ws-ink: #2e302c;
--ws-ink-2: #646e58;
--ws-ink-3: #777970;
--ws-ink-4: #838a77;
--ws-terra: #b65f3f;
--ws-terra-deep: #a95536;
--ws-terra-wash: #f1e4dc;
--ws-terra-wash-2: #f8f3ee;
--ws-ok: #5e704c;
--ws-user-bubble: #eeeee7;
--bone: var(--ws-bg);
--bone-2: var(--ws-panel);
--ink: var(--ws-ink);
--ink-2: var(--ws-ink-2);
--ink-3: var(--ws-ink-3);
--ink-4: var(--ws-ink-4);
--terra: var(--ws-terra);
--terra-deep: var(--ws-terra-deep);
min-width: 0;
color: var(--ws-ink);
font-family: var(--sans);
}
.xyren-chat { height: 100dvh; }
.xyren-chat .ws-shell { min-width: 0; overflow: hidden; }
.xyren-chat .ws-sidebar-wrap { padding: 0; }
.xyren-chat .ws-sidebar {
background: var(--ws-panel);
border-width: 0 1px 0 0;
border-radius: 0;
box-shadow: none;
}
.xyren-chat .ws-sidebar.is-closed { border-width: 0; }
.xyren-chat .ws-sidebar__head { padding: 24px 18px 20px; }
.xyren-chat .ws-brand { min-width: 0; gap: 6px; }
.xyren-chat .ws-brand__name { font-size: 16px; line-height: 1.25; white-space: nowrap; }
.xyren-chat .ws-sidebar__head > :last-child { flex-shrink: 0; }
.xyren-chat .ws-sidebar__nav { padding: 0 15px; }
.xyren-chat .ws-navrow {
min-height: 40px;
padding: 8px 10px;
gap: 9px;
font-family: inherit;
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
border-radius: 7px;
color: #60665b;
}
.xyren-chat .ws-navrow:hover { background: #e9e9e1; }
.xyren-chat .ws-navrow:first-child {
margin-bottom: 10px;
background: #fffefa;
border: 1px solid #dedfd5;
border-radius: 8px;
color: var(--ws-ink);
font-weight: 550;
}
.xyren-chat .ws-navrow:first-child svg { color: var(--ws-terra); }
.xyren-chat .ws-sidebar__list { padding: 0 15px; }
.xyren-chat .ws-conv { min-height: 37px; border-radius: 6px; color: #676e60; }
.xyren-chat .ws-conv__label { font-size: 14px; line-height: 1.5; }
.xyren-chat .ws-conv:hover { background: #e9e9e1; }
.xyren-chat .ws-conv.is-active { background: #e7e8e0; color: #343e2c; }
.xyren-chat .ws-group { color: var(--ws-ink-3); font-size: 11px; letter-spacing: .02em; }
.xyren-chat .ws-group__empty { color: var(--ws-ink-3); }
.xyren-chat .ws-top {
min-height: 64px;
padding: 0 32px;
border-bottom: 1px solid #edede6;
}
.xyren-chat .ws-top__title { font-size: 14px; color: var(--ws-ink); }
.xyren-chat .ws-top__left { min-width: 0; }
.xyren-chat .ws-top__right { flex-shrink: 0; }
.xyren-chat .ws-shell:has(.ws-sidebar.is-closed) .ws-top { padding-left: 58px; }
.xyren-chat .ws-sidebar-restore { top: 17px; left: 16px; }
.xyren-chat .pg-msglist { background: var(--ws-bg); padding: 28px 36px; }
.xyren-chat .pg-msglist > *,
.xyren-chat .ws-msg-user-wrap,
.xyren-chat .ws-msg-ai-wrap { max-width: 768px; }
.xyren-chat .ws-msg-user__bubble {
border: 1px solid #e5e6dd;
border-radius: 14px 14px 4px 14px;
padding: 14px 18px;
font-size: 14px;
line-height: 1.8;
color: #44483b;
}
.xyren-chat .ws-msg-ai { color: var(--ws-ink-2); font-size: 15px; line-height: 1.8; font-weight: 400; }
.xyren-chat .md-body :is(h1,h2,h3,h4,h5,h6) { font-family: var(--sans); color: #3a4231; line-height: 1.65; }
.xyren-chat .md-body :is(h1,h2) { font-size: 20px; letter-spacing: -.3px; font-weight: 600; }
.xyren-chat .md-body h3 { font-size: 16px; font-weight: 600; }
.xyren-chat .md-body strong { color: #3a4231; font-weight: 600; }
.xyren-chat .md-body blockquote { background: #f1f2eb; border-color: #c5ceba; color: #646e58; }
.xyren-chat .ws-composer-wrap { padding: 14px 32px 16px; }
.xyren-chat .ws-dscope-chip-slot { width: calc(100% - 64px); max-width: 768px; }
.xyren-chat .ws-composer,
.xyren-chat .ws-thread.is-empty .ws-composer {
max-width: 768px;
border-color: var(--ws-line-2);
border-radius: 14px;
padding: 12px 15px;
box-shadow: 0 5px 20px #39391d05, 0 1px 2px #39391d04;
}
.xyren-chat .ws-composer:focus-within { border-color: #c1b5a0; box-shadow: 0 0 0 3px #c4a3850c, 0 5px 20px #39391d05; }
.xyren-chat .ws-composer__textarea { font-size: 15px; line-height: 1.6; color: #39432f; }
.xyren-chat .ws-composer__textarea::placeholder { color: var(--ws-ink-4); }
.xyren-chat .ws-composer__send { width: 32px; height: 32px; border-radius: 9px; bottom: 12px; }
.xyren-chat .ws-composer__send:disabled { background: #c99276; color: #fff7f1; }
.xyren-chat .ws-composer-bar { max-width: 768px; margin-left: auto; margin-right: auto; }
.xyren-chat .ws-thread.is-empty::before { background: none; }
.xyren-chat .ws-welcome__title { font: 500 29px/1.5 var(--sans); letter-spacing: -1px; color: #3c4533; }
.xyren-chat .ws-welcome__sub { color: var(--ws-ink-3); font-size: 13px; line-height: 1.8; }
@media (max-width: 760px) {
.xyren-chat .ws-sidebar-wrap { position: absolute; inset: 0 auto 0 0; z-index: 30; }
.xyren-chat .ws-sidebar:not(.is-closed) { box-shadow: 12px 0 32px #36402726; }
.xyren-chat .ws-top { padding: 0 16px; min-height: 58px; }
.xyren-chat .ws-shell:has(.ws-sidebar.is-closed) .ws-top { padding-left: 52px; }
.xyren-chat .pg-msglist { padding: 22px 18px; }
.xyren-chat .ws-msg-ai { font-size: 14px; }
.xyren-chat .ws-msg-user__bubble { max-width: 92%; font-size: 13px; padding: 12px 15px; }
.xyren-chat .md-body :is(h1,h2) { font-size: 18px; }
.xyren-chat .ws-composer-wrap { padding: 10px 13px 12px; }
.xyren-chat .ws-dscope-chip-slot { width: calc(100% - 26px); }
.xyren-chat .ws-composer__textarea { font-size: 14px; }
.xyren-chat .ws-welcome__title { font-size: 25px; }
}
@media (max-width: 820px) {
.xyren-chat:has(.ws-schedule-panel) .ws-sidebar-restore { display: none; }
}
/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/hitl-refresh.css ***!
\******************************************************************************************************************************************************************************************************************************************************************************/
/* Questions and approvals in the current chat theme, including worker cards. */
.xyren-chat .ws-hitl-slot {
padding: 0 32px 8px;
max-height: min(66dvh, 640px);
overflow-y: auto;
flex-shrink: 1;
}
.xyren-chat .ws-hitl-slot__inner { max-width: 768px; }
.xyren-chat .pg-hitl {
--pg-accent: var(--ws-primary);
--terra: var(--ws-primary);
--hitl-label-font: var(--sans);
--hitl-label-size: 12px;
--hitl-label-tracking: 0;
--hitl-detail-radius: 8px;
background: var(--ws-card);
border: 1px solid var(--ws-line);
border-radius: 14px;
box-shadow: 0 4px 18px #343c2b08;
font-family: var(--sans);
min-width: 0;
}
.xyren-chat .pg-hitl__slip { display: none; }
.xyren-chat .pg-hitl__head {
padding: 13px 18px;
gap: 12px;
background: #f7f8f3;
border-bottom: 1px solid var(--ws-line);
}
.xyren-chat .pg-hitl__head-title { min-width: 0; flex-wrap: wrap; gap: 8px; }
.xyren-chat .pg-hitl__head-label {
font: 550 13px/1.6 var(--sans);
letter-spacing: 0;
color: var(--ws-ink);
overflow-wrap: anywhere;
}
.xyren-chat .pg-hitl__status {
flex-shrink: 0;
margin-right: 0;
padding: 3px 8px;
border-radius: 6px;
font: 500 11px/1.5 var(--sans);
letter-spacing: 0;
text-transform: none;
background: #e9eee3;
color: var(--ws-primary);
}
.xyren-chat .pg-hitl__body { padding: 18px; }
.xyren-chat .pg-hitl__desc { margin: 0 0 14px; font: 400 13px/1.6 var(--sans); color: var(--ws-ink-2); }
.xyren-chat .pg-ask__question { font-size: 15px; color: var(--ws-ink); }
.xyren-chat .pg-ask__topic { background: #eeefe8; color: var(--ws-ink-2); }
.xyren-chat .pg-hitl__actions { gap: 8px; flex-wrap: wrap; align-items: center; }
.xyren-chat .pg-hitl__actions:not(.pg-hitl__feedback) {
padding-top: 14px;
border-top: 1px solid var(--ws-line);
}
.xyren-chat .pg-hitl__actions:not(.pg-hitl__feedback) > .pg-hitl__btn--decline { margin-right: auto; }
.xyren-chat .pg-hitl__btn {
min-height: 36px;
padding: 7px 13px;
border: 1px solid var(--ws-line-2);
border-radius: 8px;
font: 500 13px/1.5 var(--sans);
color: var(--ws-ink-2);
background: var(--ws-card);
box-shadow: none;
white-space: normal;
overflow-wrap: anywhere;
transform: none;
}
.xyren-chat .pg-hitl__btn:hover:not(:disabled) {
background: var(--ws-panel);
border-color: #c9cec1;
box-shadow: none;
transform: none;
}
.xyren-chat .pg-hitl__btn--approve {
background: var(--ws-primary);
border-color: var(--ws-primary);
color: var(--ws-primary-foreground);
padding-inline: 19px;
}
.xyren-chat .pg-hitl__btn--approve:hover:not(:disabled) {
background: var(--ws-primary-hover);
border-color: var(--ws-primary-hover);
}
.xyren-chat .pg-hitl__btn--decline { color: var(--ws-danger); }
.xyren-chat .pg-hitl__btn--decline:hover:not(:disabled) { background: #fcf4f2; border-color: #e4c8c2; }
.xyren-chat .pg-hitl__btn--session { color: var(--ws-primary); }
.xyren-chat .pg-hitl__btn--always { color: var(--ws-ink-2); }
.xyren-chat .pg-hitl__btn:focus-visible,
.xyren-chat .pg-ask__option > input:focus-visible {
outline: 2px solid var(--ws-primary);
outline-offset: 3px;
}
.xyren-chat .pg-hitl__feedback-input {
min-height: 36px;
box-sizing: border-box;
border-radius: 8px;
border-color: var(--ws-line-2);
background: var(--ws-card);
font: 400 13px/1.5 var(--sans);
padding: 8px 11px;
}
.xyren-chat .pg-hitl__btn:disabled { transform: none; box-shadow: none; }
@media (max-width: 760px) {
.xyren-chat .ws-hitl-slot { padding: 0 13px 6px; max-height: 60dvh; }
.xyren-chat .pg-hitl__head { padding: 11px 13px; }
.xyren-chat .pg-hitl__body { padding: 14px; }
.xyren-chat .pg-hitl__btn { flex-grow: 1; }
.xyren-chat .pg-hitl__feedback-input { flex-basis: 100%; }
.xyren-chat .pg-ask__option { padding: 10px; }
}
/* Older interrupt envelopes use the compact ws-hitl shell. */
.xyren-chat .ws-hitl {
max-width: none;
margin: 0;
background: var(--ws-card);
border-color: var(--ws-line);
box-shadow: 0 4px 18px #343c2b08;
font-family: var(--sans);
}
.xyren-chat .ws-hitl__icon { background: #e9eee3; color: var(--ws-primary); }
.xyren-chat .ws-hitl__head { font-weight: 550; }
.xyren-chat .ws-hitl .ws-btn-primary,
.xyren-chat .ws-hitl-slot .ws-btn-primary {
background: var(--ws-primary);
border-radius: 8px;
min-height: 36px;
font-weight: 500;
}
.xyren-chat .ws-hitl .ws-btn-primary:hover:not(:disabled),
.xyren-chat .ws-hitl-slot .ws-btn-primary:hover:not(:disabled) { background: var(--ws-primary-hover); }
.xyren-chat .ws-hitl .ws-btn-secondary,
.xyren-chat .ws-hitl-slot .ws-btn-secondary { border-radius: 8px; min-height: 36px; font-weight: 500; }
/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/scheduled-start.css ***!
\*********************************************************************************************************************************************************************************************************************************************************************************/
.xyren-chat .ws-navrow.is-active { background: #e7e8e0; color: #343e2c; }
.xyren-chat .ws-scheduled { display: flex; flex-direction: column; width: 100%; min-width: 0; min-height: 0; background: var(--ws-bg); }
.xyren-chat .ws-scheduled__top { justify-content: space-between; flex-shrink: 0; gap: 16px; }
.xyren-chat .ws-scheduled__label { font-size: 14px; color: var(--ws-ink); }
.xyren-chat .ws-scheduled__back { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--ws-ink-3); font: 13px var(--sans); cursor: pointer; }
.xyren-chat .ws-scheduled__back:hover { background: var(--ws-panel); color: var(--ws-ink); }
.xyren-chat .ws-scheduled__scroll { flex: 1; min-height: 0; overflow-y: auto; }
.xyren-chat .ws-scheduled__content { width: min(100%, 756px); margin: 0 auto; padding: clamp(32px, 8vh, 84px) 24px 40px; }
.xyren-chat .ws-scheduled__intro { text-align: center; margin-bottom: 28px; }
.xyren-chat .ws-scheduled__symbol { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 15px; margin-bottom: 19px; color: var(--ws-terra); background: var(--ws-terra-wash); }
.xyren-chat .ws-scheduled__intro h1 { margin: 0 0 12px; color: #3c4533; font: 500 29px/1.5 var(--sans); letter-spacing: -1px; }
.xyren-chat .ws-scheduled__intro p { margin: 0; color: var(--ws-ink-3); font-size: 14px; line-height: 1.85; }
.xyren-chat .ws-scheduled__form { padding: 18px 18px 12px; border: 1px solid var(--ws-line-2); border-radius: 16px; background: #fffefa; box-shadow: 0 5px 20px #39391d05; }
.xyren-chat .ws-scheduled__form:focus-within { border-color: #c1b5a0; box-shadow: 0 0 0 3px #c4a3850c; }
.xyren-chat .ws-scheduled__form textarea { display: block; width: 100%; resize: none; padding: 0; border: 0; outline: none; background: transparent; color: #39432f; font: 15px/1.7 var(--sans); }
.xyren-chat .ws-scheduled__form textarea::placeholder { color: var(--ws-ink-4); }
.xyren-chat .ws-scheduled__form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.xyren-chat .ws-scheduled__form-foot > span { color: var(--ws-ink-3); font-size: 12px; line-height: 1.5; }
.xyren-chat .ws-scheduled__form-foot > button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; color: #fff; background: var(--ws-terra); cursor: pointer; }
.xyren-chat .ws-scheduled__form-foot > button:hover:not(:disabled) { background: var(--ws-terra-deep); }
.xyren-chat .ws-scheduled__form-foot > button:disabled { background: #c99276; opacity: .65; cursor: default; }
.xyren-chat .ws-scheduled__feedback p { margin: 10px 4px 0; color: var(--ws-ink-3); font-size: 12px; line-height: 1.6; }
.xyren-chat .ws-scheduled__feedback [role="alert"] { color: var(--ws-terra-deep); }
.xyren-chat .ws-scheduled__examples { margin-top: 32px; }
.xyren-chat .ws-scheduled__examples h2 { margin: 0 0 13px; font: 500 12px/1.6 var(--sans); color: var(--ws-ink-3); }
.xyren-chat .ws-scheduled__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.xyren-chat .ws-scheduled__example { display: flex; align-items: flex-start; gap: 13px; padding: 19px 17px; text-align: left; border: 1px solid var(--ws-line); border-radius: 12px; background: transparent; color: var(--ws-ink-2); font-family: var(--sans); cursor: pointer; transition: background .15s, border-color .15s; }
.xyren-chat .ws-scheduled__example:hover:not(:disabled) { background: #f2f3ec; border-color: #cdd3c3; }
.xyren-chat .ws-scheduled__example > svg { flex-shrink: 0; margin-top: 2px; color: #7c876e; }
.xyren-chat .ws-scheduled__example-body { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.xyren-chat .ws-scheduled__example strong { color: #444d3a; font-size: 14px; font-weight: 500; line-height: 1.5; }
.xyren-chat .ws-scheduled__example-body > span { color: var(--ws-ink-3); font-size: 12px; line-height: 1.6; word-break: keep-all; }
.xyren-chat .ws-scheduled__example small { margin-top: 8px; color: #6f7865; font-size: 11px; }
.xyren-chat .ws-scheduled__example:disabled { opacity: .5; cursor: default; }
.xyren-chat .ws-scheduled__hint { margin: 18px 0 0; text-align: center; color: var(--ws-ink-3); font-size: 12px; line-height: 1.7; }
.xyren-chat .ws-scheduled button:focus-visible { outline: 2px solid var(--ws-terra); outline-offset: 3px; }
.xyren-chat .ws-scheduled__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px) {
.xyren-chat .ws-scheduled__content { padding: 32px 20px; }
.xyren-chat .ws-scheduled__intro h1 { font-size: 25px; }
.xyren-chat .ws-scheduled__intro p { font-size: 13px; }
.xyren-chat .ws-scheduled__back { font-size: 12px; padding-right: 0; }
.xyren-chat .ws-scheduled__form textarea { font-size: 16px; }
}
@media (max-width: 520px) {
.xyren-chat .ws-scheduled__grid { grid-template-columns: 1fr; }
.xyren-chat .ws-scheduled__example { padding: 16px; }
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/action-colors.css ***!
\*******************************************************************************************************************************************************************************************************************************************************************************/
/* Workspace action colors. Shared packages and embedded hosts keep their own theme. */
:root {
--ws-primary: #4f6042;
--ws-primary-hover: #3e4d33;
--ws-primary-muted: #a5ad9d;
--ws-primary-foreground: #ffffff;
--ws-danger: #ad493e;
}
/* Explicit primary actions only: secondary/back/pause and destructive actions
* keep their semantic treatments. This also covers dialogs in body portals. */
:root :is(
.ws-composer__send,
.ws-scheduled__form-foot > button,
button.is-primary,
.ws-pill--primary,
.ws-login-submit,
.ws-login-submit-btn,
.nb-gen__submit,
.nb-add__submit,
.nb-confirm__confirm,
.nb-slides__textbtn--primary,
.wb-dialog__button--primary
):not(.is-danger) {
background: var(--ws-primary);
border-color: var(--ws-primary);
color: var(--ws-primary-foreground);
box-shadow: none;
}
:root :is(
.ws-composer__send,
.ws-scheduled__form-foot > button,
button.is-primary,
.ws-pill--primary,
.ws-login-submit,
.ws-login-submit-btn,
.nb-gen__submit,
.nb-add__submit,
.nb-confirm__confirm,
.nb-slides__textbtn--primary,
.wb-dialog__button--primary
):not(.is-danger):hover:not(:disabled) {
background: var(--ws-primary-hover);
border-color: var(--ws-primary-hover);
}
:root :is(
.ws-composer__send,
.ws-scheduled__form-foot > button,
button.is-primary,
.ws-pill--primary,
.ws-login-submit,
.ws-login-submit-btn,
.nb-gen__submit,
.nb-add__submit,
.nb-confirm__confirm,
.nb-slides__textbtn--primary,
.wb-dialog__button--primary
):not(.is-danger):disabled {
background: var(--ws-primary-muted);
border-color: var(--ws-primary-muted);
color: var(--ws-primary-foreground);
}
/* Keyboard focus follows the action color; fields use their existing border. */
button:focus-visible,
a:focus-visible,
summary:focus-visible {
outline-color: var(--ws-primary) !important;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/field-focus.css ***!
\*****************************************************************************************************************************************************************************************************************************************************************************/
/* Workspace-wide field focus, including dialogs rendered through portals.
* Keep the existing border geometry. Component/CSS-module focus rings may load
* later, so these visual properties intentionally take precedence.
* Buttons, checkboxes and radios retain their keyboard focus indicators.
*/
:is(
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
textarea,
select,
[role="combobox"]
):focus {
outline: none !important;
box-shadow: none !important;
}
:is(
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
textarea,
select,
[role="combobox"]
):focus:not([aria-invalid="true"]) {
border-color: var(--ws-primary) !important;
}
/* These controls put their border on the enclosing box, not the input itself. */
:is(.pg-search, .nb-search, .pg-composer__box, .ws-composer, .ws-scheduled__form):focus-within {
outline: none !important;
box-shadow: none !important;
border-color: var(--ws-primary) !important;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/files-refresh.css ***!
\*******************************************************************************************************************************************************************************************************************************************************************************/
/* Files uses the chat palette and keeps the list as the primary surface. */
.ws-files {
container: files / inline-size;
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
min-height: 0;
height: 100%;
overflow: hidden;
background: var(--ws-bg, #fcfbf9);
color: var(--ws-ink, #2e302c);
font: 14px/1.5 var(--sans);
}
.ws-files button,
.ws-files input,
.ws-files select {
font-family: inherit;
}
.ws-files-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 23px 28px 19px;
}
.ws-files-header h1 {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.5px;
margin: 0;
}
.ws-files-header p {
font-size: 12px;
color: var(--ws-ink-3);
margin: 4px 0 0;
}
.ws-files-header-actions {
display: flex;
align-items: center;
gap: 12px;
}
.ws-files-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
flex-shrink: 0;
border: 1px solid var(--ws-line-2, #dddcd0);
border-radius: 8px;
background: #fff;
color: var(--ws-ink-2, #646e58);
font-size: 13px;
line-height: 20px;
padding: 8px 12px;
cursor: pointer;
white-space: nowrap;
}
.ws-files-button:hover:not(:disabled) {
background: var(--ws-panel, #f2f1ed);
}
.ws-files-button:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.ws-files-button.is-selected {
border-color: #bcc7b3;
background: #eef1e9;
color: #465738;
}
.ws-files-back {
background: none;
border: 0;
padding: 6px 0;
color: var(--ws-ink-2);
font-size: 12px;
cursor: pointer;
}
.ws-files-back:hover {
text-decoration: underline;
}
.ws-files-summary {
padding: 18px 28px 0;
display: flex;
justify-content: space-between;
gap: 16px;
align-items: center;
}
.ws-files-scope {
font-size: 14px;
font-weight: 600;
color: #465738;
}
.ws-files-usage {
display: flex;
align-items: center;
gap: 10px;
font-size: 11px;
color: var(--ws-ink-3);
}
.ws-files-meter {
display: block;
width: 64px;
height: 4px;
border-radius: 4px;
background: #e9ebe3;
overflow: hidden;
}
.ws-files-meter i {
display: block;
height: 100%;
background: #7e916c;
}
.ws-files-usage.is-warning {
color: #925127;
}
.ws-files-usage.is-warning i {
background: #a9723d;
}
.ws-files-toolbar {
display: flex;
gap: 8px;
padding: 16px 28px;
align-items: center;
}
.ws-files-search {
display: flex;
align-items: center;
flex: 1;
min-width: 80px;
max-width: 400px;
gap: 8px;
padding: 7px 11px;
height: 38px;
background: #fff;
border: 1px solid var(--ws-line-2);
border-radius: 8px;
color: var(--ws-ink-3);
}
.ws-files-search:focus-within {
border-color: var(--ws-primary, #4f6042);
}
.ws-files-search input {
width: 100%;
min-width: 0;
border: 0 !important;
background: none;
outline: none;
box-shadow: none !important;
font-size: 13px;
color: var(--ws-ink);
padding: 0;
}
.ws-files-search input::placeholder {
color: var(--ws-ink-4);
}
.ws-files-sort {
height: 38px;
padding: 6px 26px 6px 9px;
border: 1px solid var(--ws-line-2);
border-radius: 8px;
background: #fff;
color: var(--ws-ink-2);
font-size: 12px;
max-width: 150px;
}
.ws-files-body {
display: grid;
grid-template-columns: minmax(0, 1fr);
flex: 1;
min-height: 0;
min-width: 0;
position: relative;
}
.ws-files-body.has-tree {
grid-template-columns: 200px minmax(0, 1fr);
}
.ws-files-body.has-preview {
grid-template-columns: minmax(0, 1fr) 340px;
}
.ws-files-body.has-tree.has-preview {
grid-template-columns: 200px minmax(0, 1fr) 340px;
}
.ws-files-tree {
overflow: auto;
padding: 16px 8px;
background: #f7f7f2;
border-right: 1px solid var(--ws-line);
}
.ws-files-tree-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 6px 10px;
font-size: 12px;
color: var(--ws-ink-3);
}
.ws-files-tree ul {
margin: 0;
padding: 0;
list-style: none;
}
.ws-files-folder {
display: flex;
align-items: center;
border-radius: 6px;
min-height: 36px;
gap: 2px;
}
.ws-files-folder:hover,
.ws-files-root:hover {
background: #eceee6;
}
.ws-files-folder.is-current,
.ws-files-root.is-current {
background: #e8ede1;
color: #455638;
}
.ws-files-folder-name {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 0;
background: none;
border: 0;
padding: 6px 0;
color: inherit;
font-size: 12px;
text-align: left;
cursor: pointer;
}
.ws-files-folder-name span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ws-files-tree-spacer {
width: 22px;
flex: none;
}
.ws-files-root {
display: flex;
width: 100%;
align-items: center;
gap: 8px;
background: none;
border: 0;
padding: 9px 10px;
border-radius: 6px;
font-size: 13px;
color: var(--ws-ink-2);
text-align: left;
cursor: pointer;
}
.ws-files .ws-iconbtn {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 6px;
font-size: 18px;
}
.ws-files-main {
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
position: relative;
background: var(--ws-bg);
}
.ws-files-path-row {
padding: 15px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--ws-ink-3);
font-size: 12px;
}
.ws-files-path-row nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
min-width: 0;
}
.ws-files-path-row nav span {
display: inline-flex;
align-items: center;
gap: 4px;
min-width: 0;
}
.ws-files-path-row nav button {
border: 0;
background: none;
padding: 3px;
cursor: pointer;
font-size: 13px;
color: var(--ws-ink-2);
word-break: break-word;
text-align: left;
}
.ws-files-path-row nav button:hover {
color: var(--ws-primary);
text-decoration: underline;
}
.ws-files-path-row > span {
flex: none;
}
.ws-files-list-scroll {
flex: 1;
overflow: auto;
min-height: 0;
padding: 0 18px 18px;
}
.ws-files-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
}
.ws-files-table th {
text-align: left;
font-weight: 500;
color: var(--ws-ink-3);
background: var(--ws-bg);
position: sticky;
top: 0;
z-index: 1;
font-size: 11px;
padding: 9px 8px;
border-bottom: 1px solid var(--ws-line);
}
.ws-files-table td {
padding: 9px 8px;
border-bottom: 1px solid #eeeee7;
color: var(--ws-ink-2);
vertical-align: middle;
height: 51px;
}
.ws-files-table tbody tr:hover {
background: #f3f5ee;
}
.ws-files-table tr.is-preview,
.ws-files-table tr.is-selected {
background: #eef2e7;
}
.ws-files-check {
width: 36px;
}
.ws-files-check input {
width: 15px;
height: 15px;
accent-color: var(--ws-primary);
cursor: pointer;
vertical-align: middle;
}
.ws-files-size {
width: 70px;
white-space: nowrap;
font-size: 12px;
}
.ws-files-status-col {
width: 78px;
}
.ws-files-date {
width: 110px;
white-space: nowrap;
font-size: 12px;
}
.ws-files-actions {
width: 38px;
}
.ws-files-name {
border: 0;
background: none;
padding: 3px 0;
display: flex;
gap: 9px;
align-items: center;
width: 100%;
min-width: 0;
text-align: left;
cursor: pointer;
color: var(--ws-ink);
font-size: 13px;
}
.ws-files-name svg {
flex: none;
color: #8a967d;
}
.ws-files-name > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ws-files-name small {
display: none;
font-size: 11px;
font-weight: 400;
color: var(--ws-ink-3);
margin-top: 3px;
}
.ws-files-folder-row .ws-files-name > span:last-child {
margin-left: auto;
color: var(--ws-ink-3);
}
.ws-files-status {
display: inline-block;
white-space: nowrap;
font-size: 11px;
padding: 3px 7px;
line-height: 1.35;
border-radius: 5px;
background: #eeeee8;
color: #777970;
}
.ws-files-status.is-ready {
color: #5a714b;
background: #edf2e6;
}
.ws-files-status.is-failed {
color: #a14f43;
background: #faf0ed;
}
.ws-files-status.is-running {
color: #856526;
background: #f5f1e4;
}
.ws-files-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
text-align: center;
min-height: 240px;
padding: 32px 20px;
color: var(--ws-ink-3);
}
.ws-files-empty > svg {
color: #acb7a1;
}
.ws-files-empty strong {
font-size: 15px;
color: var(--ws-ink-2);
font-weight: 500;
}
.ws-files-empty p {
font-size: 12px;
margin: 0;
}
.ws-files-empty button {
border: 0;
background: none;
color: var(--ws-primary);
cursor: pointer;
}
.ws-files-preview {
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
min-width: 0;
background: #fff;
border-left: 1px solid var(--ws-line);
padding: 18px 20px;
overflow: auto;
}
.ws-files-preview-heading {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
color: var(--ws-ink-3);
}
.ws-files-preview h2 {
font-size: 16px;
line-height: 1.5;
margin: 0;
overflow-wrap: anywhere;
font-weight: 600;
}
.ws-files-preview-meta {
font-size: 11px;
color: var(--ws-ink-3);
margin: 0;
}
.ws-files-preview > .ws-files-status {
align-self: flex-start;
white-space: normal;
}
.ws-files-preview > .ws-files-button {
align-self: flex-start;
}
.ws-files-preview h3 {
font-size: 13px;
margin: 10px 0 0;
font-weight: 600;
}
.ws-files-preview-note {
font-size: 11px;
color: var(--ws-ink-3);
margin: -7px 0 0;
}
.ws-files-preview-text {
white-space: pre-wrap;
overflow-wrap: anywhere;
font-size: 13px;
line-height: 1.85;
color: var(--ws-ink-2);
border-top: 1px solid var(--ws-line);
padding-top: 14px;
}
.ws-files-selection {
display: flex;
gap: 16px;
align-items: center;
padding: 8px 24px;
background: #eef2e7;
color: #465738;
font-size: 12px;
border-block: 1px solid #dce5d4;
}
.ws-files-selection button {
border: 0;
background: none;
color: inherit;
font-size: 12px;
cursor: pointer;
padding: 5px 0;
}
.ws-files-selection button:last-child {
margin-left: auto;
}
.ws-files-notice {
display: flex;
align-items: center;
gap: 8px;
margin: 10px 24px 0;
padding: 8px 12px;
font-size: 12px;
background: #edf2e7;
color: #465738;
border-radius: 6px;
}
.ws-files-notice > span {
flex: 1;
}
.ws-files-notice.is-error,
.ws-files-dialog-error {
background: #fbf0ed;
color: #9d4438;
}
.ws-files-uploads {
max-height: 130px;
overflow: auto;
padding: 10px 28px;
background: #f5f7ef;
font-size: 12px;
}
.ws-files-uploads > div {
display: flex;
align-items: center;
gap: 12px;
padding: 5px 0;
}
.ws-files-uploads > div > span:first-child {
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
}
.ws-files-uploads strong {
font-weight: 500;
}
.ws-files-uploads small {
display: block;
color: var(--ws-ink-3);
}
.ws-files-uploads button,
.ws-files-missing button {
border: 0;
background: none;
color: var(--ws-primary);
cursor: pointer;
}
.ws-files-drop {
position: absolute;
inset: 4px;
z-index: 5;
border: 2px dashed #7b9168;
display: flex;
align-items: center;
justify-content: center;
background: #f2f6eeed;
color: #465738;
pointer-events: none;
border-radius: 8px;
}
.ws-files-missing {
position: absolute;
inset: auto 16px 16px;
padding: 12px;
background: #fff7e6;
color: #815e27;
font-size: 12px;
border: 1px solid #edddb8;
border-radius: 8px;
}
.ws-files-sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.ws-files-menu-backdrop {
position: fixed;
inset: 0;
z-index: 100;
}
.ws-files-menu {
position: fixed;
width: 184px;
padding: 6px;
border: 1px solid #e0e3d9;
border-radius: 9px;
background: #fff;
box-shadow: 0 8px 28px #24301818;
color: #384032;
}
.ws-files-menu button {
display: block;
width: 100%;
border: 0;
border-radius: 5px;
background: none;
padding: 9px 10px;
text-align: left;
font: 13px/20px var(--sans);
color: inherit;
cursor: pointer;
}
.ws-files-menu button:hover,
.ws-files-menu button:focus-visible {
background: #f0f3ea;
}
.ws-files-menu button.is-danger {
color: #ad493e;
}
.ws-files-dialog-backdrop {
position: fixed;
inset: 0;
z-index: 110;
background: #26302040;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
}
.ws-files-dialog {
position: relative;
background: #fff;
color: #343d2d;
width: min(430px, 100%);
max-height: 85dvh;
overflow: auto;
border-radius: 12px;
border: 1px solid #e0e3d9;
padding: 24px;
box-shadow: 0 16px 48px #25301922;
font: 13px/1.6 var(--sans);
}
.ws-files-dialog h2 {
margin: 0 30px 18px 0;
font-size: 17px;
font-weight: 600;
}
.ws-files-dialog p {
margin: 0 0 16px;
}
.ws-files-dialog label {
display: block;
font-size: 12px;
color: #68725e;
}
.ws-files-dialog :is(input, select) {
width: 100%;
margin-top: 6px;
border: 1px solid #d6dccd;
border-radius: 7px;
padding: 10px;
font: 14px var(--sans);
background: #fafbf7;
color: #343d2d;
}
.ws-files-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 22px;
}
.ws-files-dialog-close {
position: absolute;
right: 18px;
top: 19px;
}
.ws-files-dialog-error {
white-space: pre-wrap;
padding: 10px;
border-radius: 6px;
margin-top: 12px !important;
max-height: 150px;
overflow: auto;
}
.ws-files-button.is-danger {
background: #ad493e;
color: #fff;
border-color: #ad493e;
}
.ws-files-delete-list {
max-height: 140px;
overflow: auto;
padding-left: 20px;
}
.xyren-chat .ws-navrow.is-active {
background: #e7ece0;
color: #465738;
}
.xyren-chat .ws-shell:has(.ws-sidebar.is-closed) .ws-files-header {
padding-left: 58px;
}
@container files (max-width:1000px) {
.ws-files-body.has-tree.has-preview {
grid-template-columns: minmax(0, 1fr) 320px;
}
.ws-files-body.has-tree.has-preview .ws-files-tree {
position: absolute;
inset: 0 auto 0 0;
width: 210px;
z-index: 8;
box-shadow: 8px 0 24px #24301810;
}
.ws-files-date {
display: none;
}
.ws-files-name small {
display: block;
}
}
@container files (max-width:760px) {
.ws-files-header {
padding: 18px;
}
.ws-files-summary {
padding: 14px 18px 0;
}
.ws-files-toolbar {
padding: 14px 18px;
flex-wrap: wrap;
}
.ws-files-search {
max-width: none;
}
.ws-files-body.has-preview,
.ws-files-body.has-tree.has-preview,
.ws-files-body.has-tree {
grid-template-columns: minmax(0, 1fr);
}
.ws-files-tree {
position: absolute;
inset: 0 auto 0 0;
width: 210px;
z-index: 8;
box-shadow: 8px 0 24px #24301810;
}
.ws-files-preview {
position: absolute;
inset: 0 0 0 auto;
width: min(420px, 100%);
z-index: 9;
box-shadow: -12px 0 36px #24301815;
}
.ws-files-size {
display: none;
}
.ws-files-path-row {
padding: 12px 16px;
}
.ws-files-list-scroll {
padding: 0 10px 12px;
}
}
@container files (max-width:500px) {
.ws-files-header h1 {
font-size: 18px;
}
.ws-files-header p,
.ws-files-meter {
display: none;
}
.ws-files-header-actions {
gap: 8px;
}
.ws-files-back {
font-size: 11px;
white-space: nowrap;
}
.ws-files-header .ws-files-button {
padding: 7px 9px;
font-size: 12px;
}
.ws-files-toolbar .ws-files-search {
order: 3;
flex-basis: 100%;
}
.ws-files-toolbar > .ws-files-button:last-child {
margin-left: auto;
}
.ws-files-usage {
font-size: 10px;
}
.ws-files-table td {
padding: 9px 4px;
}
.ws-files-check {
width: 27px;
}
.ws-files-status-col {
width: 64px;
}
.ws-files-actions {
width: 30px;
}
.ws-files-name {
gap: 6px;
}
.ws-files-name > span {
white-space: normal;
overflow-wrap: anywhere;
}
.ws-files-name svg {
width: 15px;
}
.ws-files-status {
font-size: 10px;
padding: 3px 5px;
}
.ws-files-preview {
width: 100%;
}
}
/* Personal state stays mounted while browsing the read-only company library. */
.ws-files-personal,
.ws-files-company {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
min-width: 0;
}
.ws-files-tabs {
display: flex;
gap: 22px;
}
.ws-files-tabs button {
border: 0;
border-bottom: 2px solid transparent;
padding: 7px 0;
color: var(--ws-ink-3);
font-size: 14px;
background: none;
cursor: pointer;
white-space: nowrap;
}
.ws-files-tabs button[aria-current="page"] {
border-color: var(--ws-primary);
color: var(--ws-ink);
font-weight: 600;
}
.ws-files-usage[hidden] {
display: none;
}
.ws-files-company-note,
.ws-files-company-description {
margin: 0;
padding: 10px 28px 0;
font-size: 12px;
color: var(--ws-ink-3);
}
.ws-files-company-description:empty {
display: none;
}
.ws-files-company-description {
padding: 0 24px 12px;
}
.ws-files-company-filter {
max-width: 240px;
min-width: 0;
flex-shrink: 1;
text-overflow: ellipsis;
}
.ws-files-company-category {
width: 180px;
color: var(--ws-ink-3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
}
.ws-files-company-table .ws-files-name small {
display: none;
}
@container files (max-width:1000px) {
.ws-files-company-category {
width: 130px;
}
}
@container files (max-width:760px) {
.ws-files-company-category {
display: none;
}
.ws-files-company-table .ws-files-name small {
display: block;
}
.ws-files-company-note {
padding: 10px 18px 0;
}
}
.ws-files-pagination {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding: 10px 18px;
border-top: 1px solid var(--ws-line);
font-size: 12px;
color: var(--ws-ink-3);
flex-wrap: wrap;
}
.ws-files-pagination > span:first-child {
margin-right: auto;
}
.ws-files-pagination .ws-files-button {
padding: 4px 10px;
}
.ws-files-company-content {
min-width: 0;
font-size: 13px;
line-height: 1.8;
color: var(--ws-ink-2);
}
.ws-files-document-modes {
display: inline-flex;
gap: 2px;
padding: 3px;
margin: 0 0 16px;
border: 1px solid var(--ws-line);
border-radius: 8px;
background: var(--ws-panel, #f2f1ed);
}
.ws-files-document-modes button {
border: 0;
border-radius: 5px;
padding: 5px 11px;
background: transparent;
font-size: 12px;
color: var(--ws-ink-3);
cursor: pointer;
}
.ws-files-document-modes button[aria-pressed="true"] {
background: #fff;
color: var(--ws-primary);
box-shadow: 0 1px 3px #24301814;
font-weight: 600;
}
.ws-files-document-markdown {
white-space: normal;
overflow-wrap: anywhere;
}
.ws-files-document-markdown > :first-child {
margin-top: 0;
}
.ws-files-document-markdown :is(h1, h2, h3, h4, h5, h6) {
color: var(--ws-ink);
margin: 22px 0 10px;
line-height: 1.5;
font-weight: 600;
}
.ws-files-document-markdown h1 {
font-size: 20px;
}
.ws-files-document-markdown h2 {
font-size: 17px;
}
.ws-files-document-markdown h3 {
font-size: 15px;
}
.ws-files-document-markdown :is(h4, h5, h6) {
font-size: 14px;
}
.ws-files-document-markdown p {
margin: 10px 0;
}
.ws-files-document-markdown :is(ul, ol) {
margin: 10px 0;
padding-left: 22px;
}
.ws-files-document-markdown ul {
list-style: disc;
}
.ws-files-document-markdown ol {
list-style: decimal;
}
.ws-files-document-markdown li {
margin: 4px 0;
}
.ws-files-document-markdown .contains-task-list {
padding-left: 0;
list-style: none;
}
.ws-files-document-markdown .task-list-item input {
margin-right: 6px;
accent-color: var(--ws-primary);
}
.ws-files-document-markdown blockquote {
margin: 14px 0;
padding: 4px 12px;
border-left: 3px solid #b5c0a9;
background: #f6f7f2;
}
.ws-files-document-markdown a {
color: var(--ws-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.ws-files-document-markdown :not(pre) > code {
background: #f1f2ed;
padding: 2px 4px;
border-radius: 4px;
font-size: 12px;
}
.ws-files-document-markdown pre {
max-width: 100%;
overflow: auto;
padding: 12px;
background: #f5f5f1;
border: 1px solid var(--ws-line);
border-radius: 6px;
font-size: 12px;
line-height: 1.65;
white-space: pre;
overflow-wrap: normal;
}
.ws-files-document-markdown hr {
margin: 20px 0;
border: 0;
border-top: 1px solid var(--ws-line);
}
.ws-files-document-markdown img {
max-width: 100%;
height: auto;
}
.ws-files-document-table {
max-width: 100%;
overflow-x: auto;
margin: 14px 0;
}
.ws-files-document-table table {
border-collapse: collapse;
width: 100%;
font-size: 12px;
}
.ws-files-document-table :is(th, td) {
border: 1px solid var(--ws-line);
padding: 7px 9px;
min-width: 80px;
text-align: left;
overflow-wrap: normal;
}
.ws-files-document-table th {
font-weight: 600;
color: var(--ws-ink);
background: #f3f5ee;
}
.ws-files-document-raw {
white-space: pre-wrap;
overflow-wrap: anywhere;
margin: 0;
padding: 12px;
border: 1px solid var(--ws-line);
border-radius: 6px;
background: #f8f8f5;
font: 12px/1.85 var(--mono, monospace);
}
.ws-files-notebook-link {
color: var(--ws-primary);
text-decoration: underline;
text-underline-offset: 3px;
flex-shrink: 0;
}
.ws-files-material-tabs {
display: flex;
gap: 6px;
overflow-x: auto;
flex-shrink: 0;
padding: 16px 28px 0;
}
.ws-files-material-tabs button {
flex-shrink: 0;
padding: 7px 13px;
border: 1px solid var(--ws-line);
border-radius: 7px;
background: transparent;
color: var(--ws-ink-3);
font-size: 12px;
cursor: pointer;
}
.ws-files-material-tabs button[aria-selected="true"] {
background: #eaf0e2;
border-color: #b7c5ab;
color: var(--ws-primary);
font-weight: 600;
}
.ws-files-material-table .ws-files-name small {
display: block;
font-size: 11px;
font-weight: 400;
color: var(--ws-ink-3);
margin-top: 4px;
}
.ws-files-material-content {
display: flex;
flex-direction: column;
gap: 14px;
}
.ws-files-material-content > .ws-files-button {
align-self: flex-start;
}
.ws-files-material-image {
display: block;
width: 100%;
height: auto;
object-fit: contain;
border: 1px solid var(--ws-line);
border-radius: 6px;
}
.ws-files-material-audio {
width: 100%;
}
.ws-files-material-mindmap {
height: 430px;
min-height: 300px;
}
.ws-files-material-mindmap > div {
height: 100%;
}
.ws-files-material-slide {
min-width: 0;
overflow: hidden;
}
@container files (min-width:1001px) {
.ws-files-material-body.has-preview {
grid-template-columns: minmax(0, 1fr) minmax(420px, 48%);
}
}
@container files (max-width:760px) {
.ws-files-material-tabs {
padding: 12px 18px 0;
}
}
@container files (max-width:500px) {
.ws-files-material-toolbar {
flex-wrap: nowrap;
}
.ws-files-material-toolbar .ws-files-search {
order: 0;
flex-basis: auto;
}
}
/* Personal library: compact folders, scan-friendly files, reading space on demand. */
.ws-personal-folders {
padding: 4px 0 12px;
}
.ws-personal-folder-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 8px;
}
.ws-personal-folder {
display: flex;
align-items: center;
min-width: 0;
padding: 4px 6px;
border: 1px solid var(--ws-line);
border-radius: 10px;
background: var(--ws-bg);
}
.ws-personal-folder:hover {
background: var(--ws-panel, #f2f1ed);
}
.ws-personal-folder-open {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
padding: 10px 6px;
border: 0;
background: none;
color: var(--ws-ink-2);
font-size: 13px;
text-align: left;
cursor: pointer;
}
.ws-personal-folder-open svg {
flex: none;
color: var(--ws-primary);
}
.ws-personal-folder-open span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ws-personal-preview-actions {
display: flex;
align-items: center;
gap: 6px;
}
.ws-personal-preview-content {
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
font-size: 13px;
}
.ws-personal-preview-content > .ws-files-document-modes {
flex: none;
}
.ws-personal-original-pdf {
width: 100%;
height: max(460px, 60vh);
border: 1px solid var(--ws-line);
border-radius: 8px;
background: white;
}
.ws-personal-original-image {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
.ws-files-personal.is-wide-preview .ws-files-body {
grid-template-columns: minmax(0, 1fr);
}
.ws-files-personal .ws-files-main[hidden],
.ws-files-personal .ws-files-toolbar[hidden] {
display: none;
}
.ws-files-personal.is-wide-preview .ws-personal-preview {
position: static;
width: auto;
max-width: none;
border-left: 0;
box-shadow: none;
padding: 20px clamp(16px, 4vw, 64px);
}
.ws-files-personal.is-wide-preview .ws-personal-preview-content {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
.ws-files-personal.is-wide-preview .ws-personal-original-image {
max-height: 75vh;
}
.ws-files-personal.is-wide-preview .ws-personal-original-pdf {
height: 70vh;
}
.ws-files-personal .ws-files-path-row.is-root {
justify-content: flex-end;
padding-block: 8px;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/plugins-refresh.css ***!
\*********************************************************************************************************************************************************************************************************************************************************************************/
.ws-plugins {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
min-height: 0;
background: var(--ws-bg);
color: var(--ws-ink);
font: 14px/1.6 var(--sans);
container: plugins / inline-size;
}
.ws-plugins button {
font-family: inherit;
}
.ws-plugins-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 23px 28px 19px;
}
.ws-plugins-header h1 {
margin: 0;
font-size: 20px;
font-weight: 600;
letter-spacing: -0.5px;
outline: none;
}
.ws-plugins-header p {
margin: 4px 0 0;
color: var(--ws-ink-3);
font-size: 12px;
}
.ws-plugins-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 10px 28px 32px;
}
.ws-plugins h2 {
font-size: 15px;
font-weight: 600;
margin: 0 0 10px;
}
.ws-plugins-group + .ws-plugins-group {
margin-top: 28px;
}
.ws-plugins-note {
color: var(--ws-ink-3);
font-size: 12px;
margin: 0 0 18px;
}
.ws-plugins-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
gap: 16px;
}
.ws-plugin-card {
display: flex;
flex-direction: column;
min-width: 0;
border: 1px solid var(--ws-line);
border-radius: 14px;
padding: 20px;
background: var(--ws-card, #fff);
}
.ws-plugin-card-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.ws-plugin-card-head > svg {
flex: none;
}
.ws-plugin-card h3 {
font-size: 15px;
font-weight: 600;
margin: 0;
}
.ws-plugin-card-head > .xc-connector-status {
margin-left: auto;
}
.ws-plugin-card-description {
color: var(--ws-ink-2);
font-size: 13px;
min-height: 3.2em;
margin: 16px 0 12px;
}
.ws-plugin-card-example {
font-size: 12px;
color: var(--ws-ink-3);
margin: 0 0 20px;
}
.ws-plugin-card > button {
margin-top: auto;
align-self: flex-start;
}
.ws-plugins-back {
margin: 0 0 24px;
}
.ws-plugins-detail {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
gap: 36px;
max-width: 1200px;
}
.ws-plugins-guide {
min-width: 0;
}
.ws-plugins-description {
margin: 0 0 28px;
font-size: 15px;
}
.ws-plugins-guide ul {
margin: 0 0 28px;
padding-left: 22px;
font-size: 13px;
color: var(--ws-ink-2);
}
.ws-plugins-guide li {
margin: 8px 0;
}
.ws-plugins-example {
padding: 14px 16px;
border-radius: 10px;
background: var(--ws-panel);
font-size: 13px;
margin: 0 0 10px;
}
.ws-plugins-guide > .ws-plugins-note {
margin-top: 24px;
}
.ws-plugins-connection {
min-width: 0;
}
.ws-plugins .ws-conn-grid {
grid-template-columns: minmax(0, 1fr);
}
.ws-plugins .ws-conn-card {
box-shadow: none;
border-radius: 12px;
}
.ws-plugins .ws-btn-primary {
background: var(--ws-primary);
border-color: var(--ws-primary);
color: #fff;
}
.ws-plugins .ws-btn-primary:hover {
background: var(--ws-primary-hover);
}
@container plugins (max-width: 780px) {
.ws-plugins-detail {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
.ws-plugins-connection {
grid-row: 1;
}
}
@container plugins (max-width: 500px) {
.ws-plugins-header {
padding: 20px 18px 12px 58px;
}
.ws-plugins-header .ws-files-back {
font-size: 11px;
}
.ws-plugins-scroll {
padding: 12px 18px 24px;
}
.ws-plugin-card {
padding: 16px;
}
}