.host { display: grid; grid-template-columns: 224px minmax(0, 1fr); width: 100vw; height: 100vh; min-height: 680px; overflow: hidden; }
.primary-nav { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 18px; width: 224px; height: 100vh; padding: 20px 14px 16px; background: var(--nav); color: #dce4f1; }
.brand-lockup { display: flex; align-items: center; gap: 11px; padding: 0 7px; }
.brand-lockup > span:last-child { display: grid; }
.brand-lockup strong { color: #fff; font-size: 17px; }
.brand-lockup small { color: #92a0b7; letter-spacing: 0; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 20px; font-weight: 800; }
.nav-project { display: grid; gap: 3px; margin: 4px 6px 0; padding: 13px 12px; border: 1px solid #334055; border-radius: 10px; background: #182235; }
.nav-project small, .nav-project span { color: #91a0ba; }
.primary-nav nav { display: grid; gap: 5px; }
.primary-nav nav button { display: grid; gap: 1px; width: 100%; border-color: transparent; background: transparent; color: #c4cfe0; text-align: left; }
.primary-nav nav button small { color: #7f90ac; letter-spacing: 0; }
.primary-nav nav button[aria-current="page"] { border-color: #394a67; background: var(--nav-soft); color: #fff; box-shadow: inset 3px 0 #8194ff; }
.primary-nav nav button[aria-current="page"] small { color: #b7c2d4; }
.legacy-exit { display: grid; gap: 3px; margin-top: auto; border-color: #344054; background: transparent; color: #d9e1ee; text-align: left; }
.legacy-exit span { color: #91a0b6; font-size: 11px; line-height: 1.35; }
.workspace-shell { position: relative; min-width: 0; height: 100vh; background: var(--canvas); }
.project-header { display: flex; align-items: center; gap: 22px; height: 76px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.project-identity { display: grid; min-width: 0; }
.project-identity > div { display: flex; align-items: baseline; gap: 7px; }
.project-identity strong { font-size: 18px; }
.project-identity > span { color: var(--muted); font-size: 11px; }
.dot { color: #9aa4b5; }
.project-picker { display: grid; gap: 2px; margin-left: auto; color: var(--muted); font-size: 11px; }
.project-picker select { min-width: 154px; }
.freshness { display: grid; min-width: 205px; }
.freshness strong { color: #364158; font-size: 10px; }
.freshness span { color: var(--muted); font-size: 11px; }
.mobile-context-controls { position: absolute; top: 10px; right: 245px; z-index: 11; display: grid; grid-template-columns: 154px 154px; gap: 10px; }
.project-picker, .truth-picker { display: grid; gap: 2px; color: var(--muted); font-size: 11px; }
.project-picker select, .truth-picker select { width: 100%; }
.menu-button { display: none; }
.truth-strip { display: flex; align-items: center; gap: 16px; height: 44px; padding: 5px 20px; border-bottom: 1px solid #ead79c; background: #fff8e6; color: #73520d; font-size: 11px; }
.truth-strip span { padding-left: 16px; border-left: 1px solid #ddca91; }
.truth-button { min-height: 32px; margin-left: auto; padding: 4px 10px; border-color: #cfb86d; background: #fffdf6; color: #73520d; font-size: 11px; }
.workspace-body { display: grid; grid-template-columns: minmax(0, 1fr) 8px var(--conversation-width); height: calc(100vh - 120px); min-width: 0; }
.canvas { min-width: 0; height: 100%; overflow: auto; background: var(--canvas); scroll-behavior: auto; }
.rail-divider { position: relative; z-index: 15; height: 100%; cursor: col-resize; background: #e4e8f0; }
.rail-divider::after { content: ""; position: absolute; inset: 0 2px; background: #c5cbd7; }
.conversation { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; width: var(--conversation-width); min-width: 0; height: 100%; border-left: 1px solid var(--line); background: #fbfcff; }
.conversation-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 8px; min-height: 70px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.conversation-header > div { min-width: 0; margin-right: auto; }
.conversation-header h2 { margin: 2px 0 0; font-size: 20px; }
.conversation-header button { min-height: 36px; padding: 5px 9px; font-size: 11px; }
.canvas-return { display: none; }
.conversation-truth { display: grid; gap: 2px; padding: 10px 14px; border-bottom: 1px solid #d4dfd9; background: var(--green-soft); color: var(--green); font-size: 11px; }
.conversation-scroll { min-height: 0; overflow: auto; padding: 14px; }
.context-card, .history-card, .citation-card { margin-bottom: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.context-card h3 { margin: 4px 0; font-size: 15px; }
.context-card p, .history-card p { margin: 7px 0; }
.citation-card { display: grid; gap: 8px; }
.citation-card a { overflow-wrap: anywhere; }
.composer { padding: 12px 14px; border-top: 1px solid var(--line); background: var(--surface); }
.composer label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 700; }
.composer > div { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.composer span { margin-right: auto; color: var(--muted); font-size: 10px; }
.composer button { background: #eef0f5; }
.rail-controls { display: flex; gap: 6px; padding: 8px 14px; border-top: 1px solid var(--line); background: #f7f9fc; }
.rail-controls button { flex: 1; min-height: 36px; padding: 5px; font-size: 10px; }
.conversation.context-unavailable .conversation-scroll, .conversation.context-unavailable .composer { visibility: hidden; }
.conversation.context-unavailable::after { content: "Conversation ถูกพักไว้ · Project นี้ไม่มี context ที่รับรอง"; grid-row: 3; align-self: start; margin: 18px; padding: 16px; border: 1px dashed #d29ba7; border-radius: 10px; background: var(--red-soft); color: var(--red); }