:root {
    --sidebar-w: 460px;
    --tool-canvas: #f6f7f9;
    --tool-panel: #ffffff;
    --tool-panel-subtle: #fafbfc;
    --tool-border: #e2e5e9;
    --tool-border-strong: #d2d7de;
    --tool-ink: #17191d;
    --tool-muted: #747b86;
    --tool-accent: #2864dc;
    --tool-accent-soft: #edf3ff;
}

/* ─── 登录弹窗 ────────────────────────────────────────────── */
.modal {
    display: flex;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(99,102,241,0.10);
    backdrop-filter: blur(6px);
    z-index: 9999;
}
.modal-content {
    background: #fff;
    border-radius: 20px;
    padding: 40px 36px;
    width: 360px;
    box-shadow: 0 8px 40px rgba(99,102,241,0.18), 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.modal-brand { text-align: center; }
.modal-logo {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
}
.modal-tagline { margin: 0; font-size: 13px; color: #9ca3af; }
.modal-form { display: flex; flex-direction: column; gap: 14px; }
.input-group { display: flex; flex-direction: column; gap: 5px; }
.input-label { font-size: 12px; font-weight: 600; color: #6b7280; }
.login-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
    color: #111827;
}
.login-input:focus { border-color: #6366f1; }
#user-id-confirm {
    width: 100%;
    padding: 12px;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    margin-top: 4px;
}
#user-id-confirm:hover { opacity: 0.88; transform: translateY(-1px); }
#user-id-confirm:active { transform: translateY(0); }

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: #f5f7fb;
}

/* ─── 主布局容器：左侧画布 + 右侧功能栏 ─────────────────── */
#app-layout {
    display: flex;
    width: 100%;
    height: 100%;
}

#board {
    --canvas-app-underlay-opacity: 0.18;
    --canvas-titlebar-height: 0px;
    position: relative;
    flex: 1;
    height: 100%;
    background-color: #f5f7fb;
    background-image: radial-gradient(circle, rgba(99,102,241,0.18) 1.2px, transparent 1.2px);
    background-size: 24px 24px;
    background-repeat: repeat;
    background-position: 0 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: margin-right 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
#board.has-canvas-app::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: var(--canvas-titlebar-height);
    z-index: 20;
    pointer-events: none;
    background: rgba(248, 250, 252, 0.94);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.canvas-app-layer {
    position: absolute;
    inset: var(--canvas-titlebar-height) 0 0;
    z-index: 0;
    overflow: hidden;
    background: #fff;
    opacity: var(--canvas-app-underlay-opacity);
    pointer-events: none;
    transition: opacity 180ms ease;
}
.canvas-app-layer[hidden] { display: none !important; }
.canvas-app-framebar {
    display: none;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    box-sizing: border-box;
    color: #667085;
    background: #f8fafc;
    border-bottom: 1px solid #e4e7ec;
    user-select: none;
}
.canvas-app-framebar-dots {
    display: inline-flex;
    gap: 5px;
}
.canvas-app-framebar-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cbd5e1;
}
.canvas-app-framebar-dots i:nth-child(1) { background: #fda4af; }
.canvas-app-framebar-dots i:nth-child(2) { background: #fcd34d; }
.canvas-app-framebar-dots i:nth-child(3) { background: #86efac; }
.canvas-app-framebar-title {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}
.canvas-app-framebar-title strong {
    color: #344054;
    font-size: 12px;
    font-weight: 700;
}
.canvas-app-framebar-title span {
    color: #98a2b3;
    font-size: 10px;
}
.canvas-app-framebar-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    color: #667085;
    font-size: 10px;
}
.canvas-app-framebar-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
}
.canvas-app-layer iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}
#board.app-interaction-mode .canvas-app-layer {
    inset: calc(var(--canvas-titlebar-height) + 12px) 12px 12px;
    display: flex;
    flex-direction: column;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.14);
}
#board.app-interaction-mode .canvas-app-framebar {
    display: flex;
}
#board.app-interaction-mode .canvas-app-layer iframe {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}
#board.app-interaction-mode {
    background-color: #e9edf3;
    background-image: none;
}

.note {
    position: absolute;
    width: 360px;
    height: 160px;
    background: transparent;
    box-shadow: 0 4px 16px rgba(23, 28, 38, 0.035);
    padding: 15px 17px;
    box-sizing: border-box;
    font-size: 16px;
    resize: none;
    overflow: visible !important;
    border: 2px solid color-mix(
        in srgb,
        var(--note-color, #A88AF7) 78%,
        var(--note-accent, #7C5CE0)
    );
    border-radius: 20px;
    z-index: 10;
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.note.conn-border-conflict {
    border-color: #ef4444;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 0 0 2px rgba(239,68,68,0.2);
}

.note.conn-border-similarity {
    border-color: #8b5cf6;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 0 0 2px rgba(139,92,246,0.2);
}

/* 非关联便签在连线显示时淡化并沉入关联线下层 */
.note.conn-dim {
    opacity: 0.2;
    z-index: 2;
}

/* 便利贴右上角小鸟装饰：底部紧贴便利贴上边缘 */
.note-bird {
    position: absolute;
    bottom: 100%;   /* 小鸟底边对齐便利贴顶边 */
    right: 8px;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 3;
    transform-origin: center bottom;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
    transition: transform 0.2s ease;
    display: none;   /* 默认隐藏，仅未读连接时显示（红点逻辑） */
}

.note-bird svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* 未读红点：便签参与了尚未打开过的 AI 连接 */
.note.note-has-unread .note-bird {
    display: block;
}

.note:hover .note-bird {
    transform: scale(1.12) rotate(-6deg);
}

.note:hover .note-bird.is-readonly {
    transform: none;
}

.note-bird.is-readonly {
    filter: none;
}

html[data-shell-theme="dark"] .note-bird.is-readonly {
    color: #45484e;
}

html[data-shell-theme="light"] .note-bird.is-readonly {
    color: #d9dce1;
}

/* 笔记ID标签样式 */
.note-id-label {
    position: absolute;
    top: 13px;
    left: 17px;
    padding: 0;
    font-size: 9px;
    line-height: 14px;
    font-weight: 650;
    color: rgba(23, 32, 51, 0.55);
    letter-spacing: 0.025em;
    text-transform: uppercase;
    user-select: none;
    pointer-events: none;
    z-index: 2;
}

.note-structured-editor {
    height: 130px;
    max-height: 130px;
    min-height: 130px;
    box-sizing: border-box;
    padding-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

.note.selected .note-structured-editor,
.note.is-editing .note-structured-editor {
    height: auto;
    max-height: none;
}

.note-field {
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    overflow: hidden;
}

.note-problem-field {
    position: relative;
    flex: 0 0 auto;
    min-height: 42px;
    display: flex;
    flex-direction: column;
    background: transparent;
    box-shadow: none;
    padding-left: 11px;
}

.note-problem-field::before {
    content: '';
    position: absolute;
    left: 1px;
    top: 3px;
    bottom: 5px;
    width: 3px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--note-accent, #7C5CE0) 48%, transparent);
}

.note-solution-field {
    flex: 0 0 auto;
    min-height: 70px;
    background: transparent;
    box-shadow: none;
}

.note-field-label {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 6px 8px 2px 10px;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: rgba(30, 41, 59, 0.68);
    pointer-events: none;
}

.note-field-label span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 15px;
    border-radius: 4px;
    font-size: 8px;
    letter-spacing: 0;
    color: #fff;
    background: rgba(71, 85, 105, 0.65);
}

.note-problem-field .note-field-label {
    display: none;
}

.note-problem-field .note-field-label span {
    display: none;
}

.note-solution-field .note-field-label {
    display: none;
}

.note-solution-field .note-field-label span {
    display: none;
}

.note-editor-field {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 3px 9px 7px 10px;
    border: 0;
    outline: 0;
    resize: none;
    overflow: hidden;
    overflow-x: hidden;
    scrollbar-width: none;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.34;
    font-weight: 600;
    color: #172033;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.note-editor-field::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.note-solution-input {
    padding: 9px 2px 8px;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
}

.note-problem-input {
    height: 40px;
    padding: 7px 7px 6px 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 400;
    font-style: normal;
    color: rgba(23, 32, 51, 0.58);
    white-space: pre-wrap;
}

.note-editor-field::placeholder {
    color: rgba(51, 65, 85, 0.48);
    font-style: normal;
    font-weight: 450;
}

.note.is-editing {
    border-color: var(--note-accent, #7C5CE0);
    box-shadow:
        0 16px 38px rgba(23, 28, 38, 0.11),
        0 0 0 3px color-mix(in srgb, var(--note-color, #A88AF7) 25%, transparent);
    transform: translateY(-2px);
}

.note.is-editing .note-editor-field {
    cursor: text;
    overflow-y: hidden;
    -webkit-user-select: text;
    user-select: text;
}

.note:not(.is-editing) .note-editor-field {
    pointer-events: none;
}


#content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    transform-origin: top left;
    transition: opacity 180ms ease;
}
#board.app-interaction-mode #content {
    opacity: 0;
    visibility: hidden;
}
#board.app-interaction-mode #content,
#board.app-interaction-mode #content * {
    pointer-events: none !important;
}

.selection-rect {
    position: absolute;
    border: 2px dashed #2196f3;
    background: rgba(33,150,243,0.08);
    pointer-events: none;
    z-index: 10;
}

.note.selected {
    border-color: var(--note-accent, #7C5CE0);
    box-shadow:
        0 16px 38px rgba(23, 28, 38, 0.10),
        0 0 0 3px color-mix(in srgb, var(--note-color, #A88AF7) 26%, transparent);
    transform: translateY(-2px);
    z-index: 100;
}

/* ─── 他人便签：只读可见，不可交互 ─────────────────────── */
.note.other-user-note {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
    transition: opacity 0.4s ease;
}
.note.other-user-note .note-editor-field {
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: transparent;
    pointer-events: none;
    user-select: none;
}
.note.other-user-note .note-editor-field::placeholder {
    color: transparent;
}
.note.other-user-note.fog-revealed {
    opacity: 1;
}
.note.other-user-note.fog-revealed .note-editor-field {
    color: #172033;
    -webkit-text-fill-color: #172033;
}
.note.other-user-note.fog-revealed .note-editor-field::placeholder {
    color: rgba(51, 65, 85, 0.48);
}

/* 组队列表面板（画布区左上角） */
.user-navigation-circles {
    display: none !important;
    position: fixed;
    top: 68px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 150;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-radius: 12px;
    padding: 10px 12px;
    border: 1.5px solid #e8eaf0;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.08);
    min-width: 148px;
}

.team-list-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #9ca3af;
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f8;
    user-select: none;
}

.team-member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.team-member:hover {
    background: #f5f3ff;
}

.team-member.is-me {
    cursor: default;
}

.team-member-tag {
    width: 10px;
    height: 28px;
    border-radius: 3px;
    flex-shrink: 0;
}

.team-member-name {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    user-select: none;
}

.team-member.is-me .team-member-name {
    color: #6366f1;
}

.team-member-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d1d5db;
    flex-shrink: 0;
    margin-left: auto;
    transition: background 0.3s;
}

.team-member-online-dot.online {
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}



/* 实时光标共享样式 */
.user-cursor {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    display: none;
    transition: transform 0.2s ease-out;
}

.cursor-icon {
    width: 20px;
    height: 20px;
    clip-path: polygon(0 0, 0 12px, 4px 9px, 7px 15px, 9px 14px, 6px 8px, 12px 8px);
    transform: rotate(-90deg);
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
    transition: all 0.2s ease-out;
}

.cursor-label {
    position: absolute;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 15px;
    margin-top: -2px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.2s ease-out;
}

/* 光标淡入淡出效果 */
.user-cursor.fade-in {
    animation: cursorFadeIn 0.3s ease-out;
}

.user-cursor.fade-out {
    animation: cursorFadeOut 0.5s ease-out forwards;
}

@keyframes cursorFadeIn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes cursorFadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.5); }
}

/* 空格键拖拽模式的最高优先级cursor样式 */
body.spacebar-panning,
body.spacebar-panning * {
    cursor: grab !important;
}

body.spacebar-panning.is-panning,
body.spacebar-panning.is-panning * {
    cursor: grabbing !important;
}

/* ═══════════════════════════════════════════════
   LOBBY
   ═══════════════════════════════════════════════ */

#lobby-overlay {
    position: fixed; inset: 0; z-index: 500;
    background: #f5f7fb;
    display: flex; flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.canvas-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 8000;
    align-items: center;
    justify-content: center;
    background: #f5f7fb;
}
.canvas-loading-card {
    display: flex;
    min-width: 240px;
    align-items: center;
    flex-direction: column;
    gap: 9px;
    padding: 26px 30px;
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    background: #fff;
    color: #344054;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08);
}
.canvas-loading-card strong {
    margin-top: 3px;
    font-size: 14px;
}
.canvas-loading-card > span:last-child {
    color: #98a2b3;
    font-size: 12px;
}
.canvas-loading-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid #e0e7ff;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: runSpin 0.8s linear infinite;
}

/* Header */
.lobby-header {
    height: 60px; background: #fff;
    border-bottom: 1px solid #e8eaf0;
    display: flex; align-items: center;
    padding: 0 32px; gap: 16px;
    flex-shrink: 0;
}
.lobby-logo {
    font-size: 18px; font-weight: 800;
    letter-spacing: .5px;
}
.lobby-user-info {
    margin-left: auto; display: flex; align-items: center; gap: 10px;
}
.lobby-user-info .lobby-avatar-img {
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid #e8eaf0;
}
.lobby-user-info span {
    font-size: 14px; font-weight: 600; color: #374151;
}
.lobby-logout-btn {
    font-size: 13px; color: #9ca3af;
    background: none; border: none; cursor: pointer; padding: 4px 8px;
    border-radius: 6px; transition: background .15s;
}
.lobby-logout-btn:hover { background: #f3f4f6; color: #374151; }

/* Body */
.lobby-body {
    flex: 1; overflow-y: auto;
    padding: 32px 40px; max-width: 1100px; margin: 0 auto; width: 100%;
}

/* Create button */
.lobby-create-area { margin-bottom: 32px; }
.lobby-create-btn {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 24px;
    background: #fff; border: 2px dashed #c7d2fe;
    border-radius: 14px; width: 100%;
    font-size: 15px; font-weight: 600; color: #6366f1;
    cursor: pointer; transition: all .2s;
}
.lobby-create-btn:hover {
    background: #f5f3ff; border-color: #a5b4fc;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(99,102,241,.12);
}
.lobby-create-icon {
    width: 32px; height: 32px; border-radius: 8px;
    color: #fff; font-size: 20px; font-weight: 400;
    display: flex; align-items: center; justify-content: center;
}

/* Section label */
.lobby-section-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: #9ca3af; margin-bottom: 16px;
}

/* Canvas grid */
.canvas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.canvas-loading, .canvas-empty {
    color: #9ca3af; font-size: 14px; grid-column: 1/-1;
    text-align: center; padding: 48px;
}

/* Canvas card */
.canvas-card {
    background: #fff; border-radius: 14px;
    padding: 20px; cursor: pointer;
    border: 1.5px solid #e8eaf0;
    transition: all .2s;
    display: flex; flex-direction: column; gap: 10px;
}
.canvas-card:hover {
    border-color: #a5b4fc;
    box-shadow: 0 8px 24px rgba(99,102,241,.12);
    transform: translateY(-2px);
}
.canvas-card-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.canvas-card-name { font-size: 16px; font-weight: 700; color: #1a1d2e; }
.canvas-card-id   { font-size: 11px; color: #d1d5db; flex-shrink: 0; margin-top: 3px; }
.canvas-card-topic {
    font-size: 13px; color: #6b7280; line-height: 1.5;
    flex: 1;
}
.canvas-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 4px;
}
.canvas-user-dots { display: flex; gap: 5px; align-items: center; }
.canvas-user-dot {
    width: 10px; height: 10px; border-radius: 50%;
    opacity: .3; transition: opacity .15s;
}
.canvas-user-dot.on { opacity: 1; box-shadow: 0 0 0 2px rgba(255,255,255,.8); }
.canvas-note-count { font-size: 12px; color: #9ca3af; }
.canvas-card-enter {
    font-size: 13px; font-weight: 600; color: #6366f1;
    text-align: right; margin-top: 2px;
}

/* ─── Create Canvas Modal ─── */
#create-canvas-modal {
    position: fixed; inset: 0; z-index: 600;
    display: flex; align-items: center; justify-content: center;
}
.create-modal-backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,.35);
}
.create-modal-card {
    position: relative; z-index: 1;
    background: #fff; border-radius: 16px;
    padding: 32px 36px; width: 480px; max-width: 94vw;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.create-modal-title {
    font-size: 18px; font-weight: 700; color: #1a1d2e;
    margin-bottom: 24px;
}
.create-modal-field { margin-bottom: 18px; }
.create-modal-field label {
    display: block; font-size: 13px; font-weight: 600;
    color: #374151; margin-bottom: 6px;
}
.create-modal-input,
.create-modal-textarea {
    width: 100%; padding: 10px 14px;
    border: 1.5px solid #e5e7eb; border-radius: 8px;
    font-size: 14px; font-family: inherit; outline: none;
    transition: border-color .2s;
    resize: vertical;
}
.create-modal-input:focus,
.create-modal-textarea:focus { border-color: #6366f1; }
.create-modal-actions {
    display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px;
}
.create-modal-cancel {
    padding: 9px 20px; background: #f3f4f6;
    color: #374151; border: none; border-radius: 8px;
    font-size: 14px; cursor: pointer; font-weight: 500;
}
.create-modal-cancel:hover { background: #e5e7eb; }
.create-modal-submit {
    padding: 9px 22px;
    color: #fff; border: none; border-radius: 8px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: opacity .15s;
}
.create-modal-submit:hover:not(:disabled) { opacity: .88; }
.create-modal-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ─── 左上角控件区 ────────────────────────────────────── */
.top-left-controls {
    position: fixed;
    top: 24px;
    left: 20px;
    z-index: 1000;
}
.controls-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.online-user-tags {
    position: fixed;
    top: 24px;
    right: calc(var(--sidebar-w) + 18px);
    z-index: 1000;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    max-width: calc(100vw - var(--sidebar-w) - 600px);
    height: 38px;
    overflow: hidden;
}
.online-user-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 9px 0 5px;
    box-sizing: border-box;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #475467;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}
.online-user-avatar {
    display: inline-flex;
    width: 21px;
    height: 21px;
    align-items: center;
    justify-content: center;
    flex: 0 0 21px;
    border-radius: 50%;
    color: rgba(30, 41, 59, 0.72);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}
.online-user-tag.is-me {
    color: #4f46e5;
    border-color: rgba(99, 102, 241, 0.24);
}
.canvas-layer-controls {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 4px;
    border: 1px solid rgba(23, 28, 38, 0.09);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 8px 24px rgba(23, 28, 38, 0.07);
    backdrop-filter: blur(14px);
}
.canvas-layer-switch {
    display: inline-flex;
    padding: 2px;
    border-radius: 10px;
    background: #eceef1;
}
.canvas-layer-mode {
    min-width: 48px;
    padding: 5px 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #667085;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.canvas-layer-mode.is-active {
    color: #1d2026;
    background: #fff;
    box-shadow: 0 1px 4px rgba(23, 28, 38, 0.12);
}
.canvas-app-opacity-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-right: 5px;
    color: #667085;
    font-size: 11px;
    white-space: nowrap;
}
.canvas-app-opacity-control:not(.is-visible) {
    display: none;
}
.canvas-app-opacity-control input {
    width: 68px;
    accent-color: #6366f1;
    cursor: pointer;
}
.canvas-app-opacity-control output {
    width: 28px;
    color: #475467;
    font-variant-numeric: tabular-nums;
}
body.canvas-app-interaction-mode .canvas-toolbar,
body.canvas-app-interaction-mode .user-navigation-circles {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease;
}
body.canvas-app-interaction-mode .user-cursor {
    display: none !important;
}


/* ─── Canvas 底部工具栏（居中于画布区域）────────────────── */
.canvas-toolbar {
    position: fixed;
    bottom: 28px;
    left: calc((100vw - var(--sidebar-w)) / 2);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(23, 28, 38, 0.09);
    border-radius: 20px;
    box-shadow: 0 12px 34px rgba(23, 28, 38, 0.10);
    z-index: 1000;
    backdrop-filter: blur(16px);
    user-select: none;
}
.toolbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 54px;
    padding: 7px 10px;
    border-radius: 13px;
    cursor: pointer;
    color: #343941;
    transition: color 0.15s, background 0.15s;
}
.toolbar-item:hover { background: #eceef1; }
.toolbar-item-icon { display: flex; align-items: center; justify-content: center; }
.toolbar-item-label { font-size: 11px; font-weight: 550; color: #747b86; }

/* ─── 锚点未读呼吸动效（小鸟态） ───────────────────────── */
@keyframes anchorBreath {
    0%, 100% { transform: scale(1);   opacity: 0.45; }
    50%       { transform: scale(2.2); opacity: 0;    }
}
.anchor-glow-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: anchorBreath 2s ease-out infinite;
}
g[data-conn-id].anchor-seen .anchor-glow-ring {
    display: none;
}

/* ─── 测试工具面板 ──────────────────────────────────────── */
.dev-panel {
    position: fixed;
    bottom: 28px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.95);
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.09);
    z-index: 1000;
    backdrop-filter: blur(8px);
    user-select: none;
}
.dev-panel-label {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-bottom: 2px;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 2px;
}
.dev-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    white-space: nowrap;
}
.dev-btn:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); }
.dev-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.dev-btn-ai {
    color: #fff;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
}
.dev-btn-clear {
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
}
.dev-btn-clear:hover:not(:disabled) { background: #fde68a; }
.dev-btn-reset {
    color: #be123c;
    background: #fff1f2;
    border: 1px solid #fecdd3;
}
.dev-btn-reset:hover:not(:disabled) { background: #ffe4e6; }

/* ─── Ghost Elements ─────────────────────────────────────── */
.ghost-element {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.78;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 6px;
}
.ghost-element[data-type="note"] {
    width: 200px;
    height: 200px;
    border: 2px dashed #6366f1;
    background: rgba(99,102,241,0.08);
}
.ghost-icon {
    color: #6366f1;
    opacity: 0.7;
}
.ghost-label {
    font-size: 13px;
    font-weight: 600;
    color: #6366f1;
    opacity: 0.8;
}

/* 便利贴工具栏项的 AI 提问红点 */
.toolbar-item.has-question {
    position: relative;
}
.toolbar-item.has-question::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    border: 1.5px solid #fff;
    animation: qPulse 1.4s ease-in-out infinite;
}
@keyframes qPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.35); opacity: 0.7; }
}

/* ─── AI 提问 Tips 弹窗 ──────────────────────────────────── */
.ai-question-tips {
    position: fixed;
    z-index: 2000;
    background: #fff;
    border-radius: 14px;
    padding: 16px 16px 12px;
    box-shadow: 0 8px 40px rgba(99,102,241,0.18), 0 2px 12px rgba(0,0,0,0.1);
    border: 1.5px solid #e0e7ff;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: aqtSlideUp 0.2s ease;
}
@keyframes aqtSlideUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.aqt-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.aqt-profile {
    font-size: 11px;
    font-weight: 700;
    color: #6366f1;
    background: #eef2ff;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.02em;
}
.aqt-gap {
    font-size: 11px;
    font-weight: 600;
    color: #d97706;
    background: #fffbeb;
    padding: 3px 8px;
    border-radius: 20px;
    border: 1px solid #fde68a;
}
.aqt-question {
    font-size: 14.5px;
    color: #1f2937;
    font-weight: 600;
    line-height: 1.65;
}
.aqt-actions {
    display: flex;
    gap: 8px;
}
.aqt-btn {
    flex: 1;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s;
    font-family: inherit;
}
.aqt-btn:hover { filter: brightness(0.95); }
.aqt-respond { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }
.aqt-defer   { background: #f3f4f6; color: #6b7280; }

/* ─── 连线详情侧边栏 ──────────────────────────────────────── */
#conn-detail-sidebar {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    background: #fff;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
#conn-detail-sidebar.open {
    display: flex;
}
.conn-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    padding: 0 18px;
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f8;
    flex-shrink: 0;
}
.conn-sidebar-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    margin-left: -8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #667085;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.conn-sidebar-back:hover {
    color: #4f46e5;
    background: rgba(99, 102, 241, 0.08);
}
.conn-sidebar-header .conn-sidebar-type-badge {
    margin-left: auto;
}
.conn-sidebar-header.conflict { background: linear-gradient(135deg, #fef2f2, #fff8f8); }
.conn-sidebar-header.similarity { background: linear-gradient(135deg, #f5f3ff, #faf8ff); }
.conn-sidebar-type-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.conn-sidebar-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
    padding: 12px 14px;
    background: #f9fafb;
    border-radius: 8px;
}
.conn-sidebar-type-badge.conflict { color: #dc2626; }
.conn-sidebar-type-badge.similarity { color: #7c3aed; }
.conn-sidebar-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s;
}
.conn-sidebar-close:hover { color: #374151; }
.conn-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
/* 行动背景：中性白底，作为信息起点 */
.conn-sidebar-context-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    border-top: 3px solid #94a3b8;
    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.045);
}
.conn-sidebar-context-title {
    font-size: 14px;
    font-weight: 750;
    color: #334155;
    letter-spacing: 0.01em;
}
.conn-sidebar-desc {
    font-size: 14px;
    color: #374151;
    line-height: 1.75;
}
.conn-sidebar-notes {
    display: flex;
    flex-direction: row;
    gap: 12px;
}
/* 侧边栏内的便签卡片：自适应等宽，避免超出容器 */
.sidebar-note-card {
    flex: 1 1 0;
    min-width: 0;
    height: 180px;
    border-radius: 4px;
    border: 1.5px solid rgba(0,0,0,0.07);
    padding: 15px;
    box-sizing: border-box;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
}
.sidebar-note-card-user {
    font-size: 10px;
    font-weight: 700;
    color: rgba(0,0,0,0.4);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.sidebar-note-card-content {
    font-size: 14px;
    color: #1f2937;
    line-height: 1.65;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    white-space: pre-wrap;
    word-break: break-word;
}
.conn-sidebar-directions-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #9ca3af;
}
.conn-sidebar-direction-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #f5f3ff;
    border: 1px solid #ede9fe;
    border-radius: 8px;
    font-size: 13px;
    color: #4c1d95;
    line-height: 1.6;
}
.conn-sidebar-direction-card:hover { background: #ede9fe; border-color: #c4b5fd; }
.conn-sidebar-direction-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: #8b5cf6;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    margin-top: 1px;
}

/* ─── 开发功能项侧边栏 ───────────────────────────────────── */
.connections-history-panel {
    flex-shrink: 0;
    width: var(--sidebar-w);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-left: 1.5px solid #e8eaf0;
    box-shadow: -4px 0 24px rgba(99, 102, 241, 0.08);
    overflow: hidden;
    z-index: 150;
}
.connections-history-panel.sidebar-open > .connections-history-list {
    display: none;
}
.connections-history-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #6366f1;
    height: 72px;
    padding: 0 18px;
    box-sizing: border-box;
    border-bottom: 1.5px solid #eef0f6;
    user-select: none;
    flex-shrink: 0;
    background: linear-gradient(160deg, #f5f3ff 0%, #fefeff 100%);
    letter-spacing: 0.01em;
}
.connections-history-list {
    overflow-y: auto;
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.connections-history-list::-webkit-scrollbar { width: 4px; }
.connections-history-list::-webkit-scrollbar-track { background: transparent; }
.connections-history-list::-webkit-scrollbar-thumb { background: #e0e0e8; border-radius: 2px; }
.connections-history-empty {
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
    padding: 32px 14px;
    font-style: italic;
    line-height: 1.8;
}

/* ─── 历史卡片（大卡 + 便签 chip）────────────────────────── */
.conn-history-item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 12px 12px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
    border: 1.5px solid #eef0f6;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.conn-history-item > * {
    position: relative;
    z-index: 1;
}
.conn-history-item.is-running,
.conn-history-item.is-running:hover {
    border-color: #aebfce;
    background: linear-gradient(180deg, #fbfcfd 0%, #edf3f6 100%);
    box-shadow: 0 0 0 2px rgba(63, 89, 108, 0.07);
}
.conn-history-item.is-running::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: -35%;
    bottom: -35%;
    left: 0;
    width: 42%;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.12) 22%,
        rgba(255, 255, 255, 0.86) 48%,
        rgba(118, 145, 163, 0.18) 58%,
        transparent 100%
    );
    transform: translateX(-150%) skewX(-12deg);
    animation: developmentPromptSweep 1.75s cubic-bezier(0.42, 0, 0.25, 1) infinite;
}
.conn-agent-run-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    color: #3f596c;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.conn-agent-run-badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5f7d91;
    box-shadow: 0 0 0 3px rgba(95, 125, 145, 0.12);
}
.conn-history-item:hover { background: #f5f3ff; border-color: #ddd6fe; box-shadow: 0 2px 8px rgba(99,102,241,0.08); }
.conn-history-item.type-conflict:hover { background: #fef2f2; border-color: #fecaca; box-shadow: 0 2px 8px rgba(239,68,68,0.08); }
.conn-history-item.detail-locked,
.conn-history-item.detail-locked:hover {
    cursor: pointer;
    background: #fafafa;
    border-color: #eef0f6;
    box-shadow: none;
}
.conn-history-item.detail-locked .conn-history-desc {
    color: #9ca3af;
}
/* 虚线聚焦态：点击便签时，相关连线项高亮但未选中 */
.conn-history-item.soft { border-style: dashed; border-color: #c4b5fd; background: rgba(237,233,254,0.4); }
.conn-history-item.soft.type-conflict { border-color: #fca5a5; background: rgba(254,226,226,0.4); }
/* 实线选中态：点击连接点或直接点击列表项 */
.conn-history-item.active { background: #ede9fe; border-color: #c4b5fd; border-style: solid; box-shadow: 0 2px 10px rgba(99,102,241,0.12); }
.conn-history-item.active.type-conflict { background: #fee2e2; border-color: #fca5a5; border-style: solid; }
.conn-history-item.has-app-entry {
    border-color: rgba(99, 102, 241, 0.3);
}
.conn-history-item.feature-entry-active {
    background: #eef2ff;
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.14);
}
.conn-feature-entry-badge {
    display: inline-flex;
    align-items: center;
    height: 18px;
    margin-left: auto;
    padding: 0 6px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #15803d;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.conn-history-item-header .conn-feature-entry-badge + .conn-history-time {
    margin-left: 0;
}

/* 其他用户正在查看该连线：高亮 + 脉冲边框 */
.conn-history-item.peer-focus {
    border-color: #f59e0b;
    border-style: solid;
    background: #fffbeb;
    box-shadow: 0 0 0 2px rgba(245,158,11,0.25);
    animation: peerFocusPulse 1.8s ease-in-out infinite;
    position: relative;
}
@keyframes peerFocusPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(245,158,11,0.25); }
    50%       { box-shadow: 0 0 0 5px rgba(245,158,11,0.12); }
}
.peer-focus-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 4px;
    padding: 2px 7px;
}
.peer-focus-badge::before {
    content: '👁';
    font-size: 10px;
}

/* 讨论来电：提示固定在行动项列表一侧，列表重绘后仍由状态恢复。 */
.conn-history-item.is-ringing {
    position: relative;
    border-color: #22c55e;
    background: linear-gradient(105deg, #ecfdf5 0%, #f0fdf4 58%, #dcfce7 100%);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2), 0 8px 22px rgba(22, 163, 74, 0.12);
    animation: incomingCallItem 1.35s ease-in-out infinite;
}
.conn-answer-call {
    appearance: none;
    display: inline-flex;
    min-width: 72px;
    min-height: 30px;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 9px;
    border: 0;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    box-shadow: 0 5px 14px rgba(22, 163, 74, 0.3);
    font: inherit;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}
.conn-answer-call:hover { background: #15803d; }
.conn-answer-call-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    animation: incomingCallPhone 0.7s ease-in-out infinite;
}
.conn-answer-call-icon svg { width: 15px; height: 15px; }
@keyframes incomingCallItem {
    0%, 100% { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18), 0 8px 22px rgba(22, 163, 74, 0.1); }
    50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.1), 0 10px 26px rgba(22, 163, 74, 0.18); }
}
@keyframes incomingCallPhone {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-16deg); }
    40% { transform: rotate(14deg); }
    60% { transform: rotate(-10deg); }
    80% { transform: rotate(7deg); }
}
html[data-shell-theme="dark"] .conn-history-item.is-ringing {
    border-color: #4ade80;
    background: linear-gradient(105deg, rgba(20, 83, 45, 0.78), rgba(21, 128, 61, 0.34));
}
@media (prefers-reduced-motion: reduce) {
    .conn-history-item.is-ringing,
    .conn-answer-call-icon { animation: none; }
}

.conn-history-item-header {
    display: flex;
    align-items: center;
    gap: 6px;
}
.conn-history-type-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 5px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.conn-history-type-badge svg { flex-shrink: 0; }
.type-conflict .conn-history-type-badge { background: #fee2e2; color: #dc2626; }
.type-similarity .conn-history-type-badge { background: #ede9fe; color: #7c3aed; }
.conn-history-time {
    font-size: 10px;
    color: #9ca3af;
    margin-left: auto;
    flex-shrink: 0;
}
.conn-history-desc {
    font-size: 12.5px;
    color: #374151;
    line-height: 1.6;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ─── 便签示意 chip 区域（叠放，左对齐）──────────────────── */
.conn-history-notes {
    display: flex;
    align-items: center;
    padding: 2px 0 0 2px;
}
.conn-history-note-chip {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 2.5px solid rgba(255, 255, 255, 0.88);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    position: relative;
}
.conn-history-note-chip + .conn-history-note-chip {
    margin-left: -12px;
}
/* 左边的 chip 层级最高，越往右越低（最多6个） */
.conn-history-notes .conn-history-note-chip:nth-child(1) { z-index: 6; }
.conn-history-notes .conn-history-note-chip:nth-child(2) { z-index: 5; }
.conn-history-notes .conn-history-note-chip:nth-child(3) { z-index: 4; }
.conn-history-notes .conn-history-note-chip:nth-child(4) { z-index: 3; }
.conn-history-notes .conn-history-note-chip:nth-child(5) { z-index: 2; }
.conn-history-notes .conn-history-note-chip:nth-child(6) { z-index: 1; }

/* 信鸽把便签扔进槽位的落下动画（慢节奏） */
@keyframes chipDropIn {
    0%   { opacity: 0; transform: translateY(-28px) scale(0.82); }
    60%  { opacity: 1; transform: translateY(4px) scale(1.06); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.conn-history-note-chip.chip-drop-in {
    animation: chipDropIn 0.58s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* ─── 列表项滑入（AI 新建连接时）────────────────────────── */
@keyframes itemSlideIn {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}
.conn-history-item.item-new {
    animation: itemSlideIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* ─── 等待小鸟点击：呼吸辉光边框 ─────────────────────────── */
@keyframes itemBreathSimilarity {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); border-color: #eef0f6; }
    50%       { box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.14); border-color: rgba(99, 102, 241, 0.35); }
}
@keyframes itemBreathConflict {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); border-color: #eef0f6; }
    50%       { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.32); }
}
.conn-history-item.item-pending.type-similarity {
    animation: itemBreathSimilarity 2.4s ease-in-out infinite;
}
.conn-history-item.item-pending.type-conflict {
    animation: itemBreathConflict 2.4s ease-in-out infinite;
}

/* ─── 红点脉冲指示器 ──────────────────────────────────────── */
.conn-item-pending-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6366f1;
    flex-shrink: 0;
    animation: dotPulse 1.8s ease-in-out infinite;
}
.type-conflict .conn-item-pending-dot {
    background: #ef4444;
}
@keyframes dotPulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%       { transform: scale(1.5); opacity: 0.5; }
}

/* 小鸟在自己便签上可点击 */
.note-bird {
    cursor: default;
}
.note:not(.other-user-note) .note-bird {
    cursor: pointer;
}

/* ─── 第三步内的 Coding Agent 操作区 ─────────────────── */
.conn-sidebar-action-bar {
    flex-shrink: 0;
    padding: 12px 20px 16px;
    border-top: 1px solid #eef0f6;
    background: rgba(255,255,255,0.98);
}
/* ─── 讨论记录区（关联线侧边栏内）─────────────────────── */
.conn-discussion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: #f8f7ff;
    border: 1px solid #dddaf7;
    border-top: 3px solid #8b5cf6;
    border-radius: 14px;
    box-shadow: 0 3px 14px rgba(99, 102, 241, 0.065);
}
.conn-discussion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.conn-discussion-title {
    font-size: 14px;
    font-weight: 750;
    color: #4338ca;
}
.conn-discussion-directions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.conn-discussion-transcript-label {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}
.conn-discussion-badge {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 600;
}
.conn-discussion-badge.active {
    color: #dc2626;
    animation: discPulse 1.2s ease-in-out infinite;
}
.conn-discussion-badge.waiting {
    color: #d97706;
    animation: discPulse 1.8s ease-in-out infinite;
}
.conn-discussion-badge.ready {
    color: #16a34a;
}
@keyframes discPulse { 0%,100%{opacity:1;} 50%{opacity:0.45;} }

.conn-discussion-transcript {
    max-height: 280px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid #e4e1f5;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.6;
}
.conn-discussion-transcript:empty::before {
    content: '通话接通后，实时转写会显示在这里';
    color: #b6bcc8;
    font-size: 12.5px;
}
.discussion-line {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.discussion-line.anim { animation: discFadeIn 0.25s ease; }
@keyframes discFadeIn { from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }
.discussion-speaker {
    font-size: 12px;
    font-weight: 700;
}
.discussion-text {
    color: #1f2937;
    white-space: pre-wrap;
    word-break: break-word;
}
.discussion-interim .discussion-text { color: #9ca3af; font-style: italic; }

.conn-discussion-actions {
    display: flex;
    gap: 8px;
}
.discussion-btn {
    flex: 1 1 auto;
    min-width: 92px;
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s, opacity 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.discussion-btn:hover { filter: brightness(0.96); }
.discussion-btn:disabled { opacity: 0.55; cursor: default; }
.discussion-btn-enter  { background: linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; }
.discussion-btn-join   { background: linear-gradient(135deg,#059669,#10b981); color:#fff; }
.discussion-btn-cancel { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
.discussion-btn-start  { background: linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; }
.discussion-btn-stop   { background: linear-gradient(135deg,#ef4444,#f97316); color:#fff; }

/* ─── 详情页开发指令与 Coding Agent 执行 ───────────────── */
.conn-development {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: #f3f8fb;
    border: 1px solid #d8e5ed;
    border-top: 3px solid #3b82a0;
    border-radius: 14px;
    box-shadow: 0 3px 14px rgba(30, 100, 125, 0.065);
}
.conn-development-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.conn-development-title {
    font-size: 14px;
    font-weight: 750;
    color: #155e75;
}
.conn-development-meta {
    font-size: 10.5px;
    color: #64748b;
    text-align: right;
}
.conn-development.is-stale .conn-development-meta { color: #d97706; }
.conn-development-instruction {
    position: relative;
    isolation: isolate;
    margin: 0;
    max-height: 300px;
    overflow: auto;
    padding: 13px 14px;
    border-radius: 10px;
    border: 1px solid #d5e0e8;
    border-left: 3px solid #7b9aaa;
    background: linear-gradient(180deg, #f9fbfc 0%, #edf3f6 100%);
    color: #334155;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
    font: 11.5px/1.68 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.conn-development.is-refreshing .conn-development-instruction { opacity: 0.58; }
.conn-development.is-running.is-refreshing .conn-development-instruction { opacity: 1; }
.conn-development.is-running .conn-development-instruction {
    border-color: #b9c7d3;
    border-left-color: #3f596c;
    background:
        linear-gradient(180deg, rgba(250, 252, 253, 0.98), rgba(235, 242, 246, 0.98));
    box-shadow:
        inset 0 1px 2px rgba(15, 23, 42, 0.04),
        0 0 0 2px rgba(63, 89, 108, 0.07);
}
.conn-development.is-running .conn-development-instruction::after {
    content: '';
    position: absolute;
    z-index: 2;
    top: -30%;
    bottom: -30%;
    left: 0;
    width: 42%;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.12) 22%,
        rgba(255, 255, 255, 0.82) 48%,
        rgba(118, 145, 163, 0.16) 58%,
        transparent 100%
    );
    filter: blur(0.2px);
    transform: translateX(-150%) skewX(-12deg);
    animation: developmentPromptSweep 1.75s cubic-bezier(0.42, 0, 0.25, 1) infinite;
}
.conn-development.is-running .conn-development-meta {
    color: #3f596c;
    font-weight: 650;
}
@keyframes developmentPromptSweep {
    0% { transform: translateX(-150%) skewX(-12deg); opacity: 0; }
    12% { opacity: 1; }
    76% { opacity: 1; }
    100% { transform: translateX(310%) skewX(-12deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .conn-development.is-running .conn-development-instruction::after,
    .conn-history-item.is-running::after {
        animation: none;
        display: none;
    }
}
.conn-development-status {
    padding: 8px 10px;
    border-radius: 8px;
    background: #eef2ff;
    color: #4f46e5;
    font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.conn-development-status.done { background: #ecfdf5; color: #059669; }
.conn-development-status.error { background: #fef2f2; color: #dc2626; }
.conn-development-result a {
    color: #059669;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.conn-development-result a:hover { text-decoration: underline; }
.conn-develop-btn {
    width: 100%;
    min-height: 44px;
    border: none;
    border-radius: 11px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter 0.15s, opacity 0.15s;
}
.conn-develop-btn:hover { filter: brightness(0.96); }
.conn-develop-btn:disabled { cursor: not-allowed; opacity: 0.52; filter: none; }
.run-spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid #c7d2fe;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: runSpin 0.8s linear infinite;
}
@keyframes runSpin { to { transform: rotate(360deg); } }

/* ─── CoGraph light workspace skin ─────────────────────────
   Keep the collaboration tool visually separate from generated apps. */
body,
html {
    color: var(--tool-ink);
    background: var(--tool-canvas);
}

#board {
    background-color: #f1f2f4;
    background-image: none;
}
#board::before,
#board.has-canvas-app::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: var(--canvas-titlebar-height);
    z-index: 20;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--tool-border);
    box-shadow: 0 1px 0 rgba(17, 24, 39, 0.02);
    backdrop-filter: blur(14px);
}

.top-left-controls {
    top: 0;
    left: 18px;
    height: 72px;
    display: flex;
    align-items: center;
}
.controls-row {
    gap: 8px;
}
.workspace-identity {
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--tool-ink);
    user-select: none;
}
.workspace-mark {
    position: relative;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 8px;
    background: #17191d;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.2);
}
.workspace-mark::before,
.workspace-mark::after {
    content: '';
    position: absolute;
    height: 1px;
    background: rgba(255, 255, 255, 0.55);
    transform-origin: left center;
}
.workspace-mark::before {
    width: 11px;
    left: 8px;
    top: 10px;
    transform: rotate(28deg);
}
.workspace-mark::after {
    width: 10px;
    left: 7px;
    top: 19px;
    transform: rotate(-48deg);
}
.workspace-mark i {
    position: absolute;
    z-index: 1;
    width: 5px;
    height: 5px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    background: #17191d;
    box-sizing: border-box;
}
.workspace-mark i:nth-child(1) { left: 6px; top: 6px; }
.workspace-mark i:nth-child(2) { right: 6px; top: 11px; }
.workspace-mark i:nth-child(3) { left: 7px; bottom: 5px; }
.workspace-name {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}
.workspace-name strong {
    font-size: 13px;
    font-weight: 750;
    letter-spacing: -0.01em;
}
.workspace-name small {
    margin-top: 4px;
    color: #8a9099;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
}
.canvas-layer-controls {
    min-height: 34px;
    box-sizing: border-box;
    gap: 8px;
    padding: 3px;
    border: 1px solid var(--tool-border);
    border-radius: 8px;
    background: var(--tool-panel);
    box-shadow: none;
    backdrop-filter: none;
}
.canvas-layer-switch {
    padding: 2px;
    border-radius: 6px;
    background: #f0f2f4;
}
.canvas-layer-mode {
    min-width: 45px;
    padding: 5px 9px;
    border-radius: 5px;
    color: #6b727d;
    font-size: 11px;
}
.canvas-layer-mode.is-active {
    color: #fff;
    background: #24272d;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.2);
}
.canvas-app-opacity-control {
    color: #7a818c;
    font-size: 10px;
}
.canvas-app-opacity-control input {
    accent-color: #343941;
}
.canvas-app-opacity-control output {
    color: #59606b;
}

.online-user-tags {
    top: 17px;
    right: calc(var(--sidebar-w) + 58px);
    height: 38px;
}
.online-user-tag {
    height: 32px;
    border: 1px solid var(--tool-border);
    border-radius: 8px;
    background: var(--tool-panel);
    color: #515862;
    box-shadow: none;
}
.online-user-tag.is-me {
    color: #2455ac;
    border-color: #cad9f5;
    background: #f7faff;
}

.connections-history-panel {
    background: var(--tool-panel-subtle);
    border-left: 1px solid var(--tool-border);
    box-shadow: none;
}
.connections-history-header {
    gap: 10px;
    height: 72px;
    padding: 0 16px;
    color: var(--tool-ink);
    background: var(--tool-panel);
    border-bottom: 1px solid var(--tool-border);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
}
.connections-history-header-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: #fff;
    background: #24272d;
}
.connections-history-list {
    gap: 7px;
    padding: 10px;
}
.conn-history-item {
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--tool-border);
    border-radius: 9px;
    background: var(--tool-panel);
    box-shadow: 0 1px 1px rgba(17, 24, 39, 0.02);
}
.conn-history-item:hover {
    background: #fff;
    border-color: #cdd3db;
    box-shadow: 0 3px 10px rgba(17, 24, 39, 0.06);
}
.conn-history-item.has-app-entry {
    border-color: #ced8e8;
}
.conn-history-item.feature-entry-active {
    background: var(--tool-accent-soft);
    border-color: #8eade6;
    box-shadow: 0 0 0 2px rgba(40, 100, 220, 0.08);
}
.conn-feature-entry-badge {
    border-radius: 5px;
    background: #eef8f2;
    color: #248154;
}
.conn-history-type-badge {
    border-radius: 5px;
    font-weight: 650;
}
.type-similarity .conn-history-type-badge {
    background: #f0edfb;
    color: #6853a6;
}
.conn-history-desc {
    color: #343941;
}

#conn-detail-sidebar {
    background: var(--tool-panel-subtle);
}
.conn-sidebar-header,
.conn-sidebar-header.conflict,
.conn-sidebar-header.similarity {
    height: 72px;
    padding: 0 16px;
    background: var(--tool-panel);
    border-bottom: 1px solid var(--tool-border);
}
.conn-sidebar-back {
    color: #59606b;
}
.conn-sidebar-back:hover {
    color: var(--tool-ink);
    background: #f1f3f5;
}
.conn-sidebar-body {
    padding: 16px;
}

/* ─── 行动项详情：统一的三阶段主流程 ───────────────────── */
.conn-sidebar-body {
    gap: 0;
    padding: 14px 16px 20px;
    background: #f7f8fa;
}
.conn-flow-step {
    position: relative;
    gap: 12px;
    padding: 14px;
    border: 1px solid #dde1e6;
    border-top: 1px solid #dde1e6;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.025);
}
.conn-flow-step + .conn-flow-step {
    margin-top: 22px;
}
.conn-flow-step + .conn-flow-step::before {
    content: '';
    position: absolute;
    left: 28px;
    bottom: 100%;
    width: 1px;
    height: 23px;
    background: #cfd5dc;
}
.conn-flow-step-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 30px;
}
.conn-flow-step-index {
    display: inline-flex;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eef1f4;
    color: #59616c;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.02em;
}
.conn-flow-step-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}
.conn-flow-step-copy strong {
    color: #24272d;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}
.conn-flow-step-copy small {
    overflow: hidden;
    color: #8a919b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conn-sidebar-notes {
    gap: 8px;
}
.sidebar-note-card {
    height: 126px;
    padding: 12px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 7px;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.07);
}
.sidebar-note-card-user {
    margin-bottom: 6px;
    font-size: 10.5px;
}
.sidebar-note-card-content {
    font-size: 14px;
    line-height: 1.5;
    -webkit-line-clamp: 5;
}
.conn-sidebar-desc {
    padding: 9px 10px;
    border-left: 2px solid #b8c0ca;
    background: #f7f8fa;
    color: #505762;
    font-size: 13.5px;
    line-height: 1.55;
}
.conn-discussion {
    background: #fff;
    border-color: #dde1e6;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.025);
}
.conn-discussion-badge {
    margin-left: auto;
    font-size: 11.5px;
}
.conn-discussion-directions {
    gap: 6px;
}
.conn-sidebar-directions-label,
.conn-discussion-transcript-label {
    margin: 0;
    color: #8a919b;
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: none;
}
.conn-sidebar-direction-card {
    gap: 9px;
    padding: 9px 10px;
    border-color: #e4e7eb;
    border-radius: 7px;
    background: #f7f8fa;
    color: #444b55;
    font-size: 13px;
    line-height: 1.45;
}
.conn-sidebar-direction-card:hover {
    border-color: #d6dbe1;
    background: #f2f4f6;
}
.conn-sidebar-direction-num {
    width: 19px;
    height: 19px;
    border-radius: 5px;
    background: #e4e8ed;
    color: #535b66;
    font-size: 10.5px;
}
.conn-discussion-transcript {
    min-height: 44px;
    max-height: 180px;
    padding: 10px;
    border-color: #e1e5ea;
    border-radius: 7px;
    background: #fafbfc;
    font-size: 13px;
}
.conn-discussion-transcript:empty::before {
    color: #a3a9b2;
    font-size: 12px;
}
.discussion-btn {
    min-height: 38px;
    border-radius: 7px;
    font-size: 13px;
}
.discussion-btn-enter,
.discussion-btn-start {
    background: #282c32;
    color: #fff;
}
.discussion-btn-enter:hover,
.discussion-btn-start:hover {
    background: #16191d;
}
.conn-development {
    background: #fff;
    border-color: #dde1e6;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.025);
}
.conn-development-head {
    justify-content: flex-start;
}
.conn-development-meta {
    margin-left: auto;
    font-size: 10.5px;
}
.conn-development-instruction {
    max-height: 220px;
    padding: 11px 12px;
    border: 1px solid #dfe4e9;
    border-left: 2px solid #9ba8b3;
    border-radius: 7px;
    background: #f7f9fa;
    color: #414954;
    box-shadow: none;
    font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.conn-sidebar-action-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 124px;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top-color: #dfe3e8;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -5px 16px rgba(17, 24, 39, 0.035);
}
.conn-action-bar-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}
.conn-action-bar-copy strong {
    color: #262a30;
    font-size: 12.5px;
    font-weight: 700;
}
.conn-action-bar-copy small {
    overflow: hidden;
    color: #8b929c;
    font-size: 10.5px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conn-develop-btn {
    width: auto;
    min-height: 38px;
    border-radius: 7px;
    background: #2864dc;
    box-shadow: none;
    font-size: 13px;
    font-weight: 700;
}
.conn-develop-btn:hover:not(:disabled) {
    background: #1f55c0;
}

.canvas-toolbar {
    bottom: 22px;
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--tool-border-strong);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 7px 22px rgba(17, 24, 39, 0.1);
    backdrop-filter: blur(14px);
}
.toolbar-item {
    min-width: 54px;
    gap: 3px;
    padding: 7px 9px 6px;
    border-radius: 7px;
    color: #343941;
}
.toolbar-item:hover {
    background: #eef1f4;
}
.toolbar-item-icon svg {
    width: 19px;
    height: 19px;
}
.toolbar-item-label {
    color: #626975;
    font-size: 10px;
    font-weight: 600;
}

.dev-panel {
    right: calc(var(--sidebar-w) + 20px);
    bottom: 22px;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--tool-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 7px 22px rgba(17, 24, 39, 0.08);
    backdrop-filter: blur(14px);
}
.dev-panel-label {
    color: #8b929c;
    border-bottom-color: #eceef1;
}
.dev-btn {
    border-radius: 6px;
    font-weight: 600;
}
.dev-btn-ai {
    color: #fff;
    background: #24272d;
}
.dev-btn-clear {
    color: #7a5813;
    background: #fffaf0;
    border-color: #ebdfbf;
}
.dev-btn-reset {
    color: #a3424a;
    background: #fff7f7;
    border-color: #ead1d3;
}

#board.app-interaction-mode {
    background-color: #eceef1;
}
#board.app-interaction-mode .canvas-app-layer {
    border-color: #cdd2d9;
    border-radius: 9px;
    box-shadow: 0 14px 34px rgba(17, 24, 39, 0.12);
}
.canvas-app-framebar {
    color: #747b86;
    background: #f7f8fa;
    border-bottom-color: #dfe3e7;
}
.canvas-app-framebar-title strong {
    color: #343941;
}

@media (max-width: 1280px) {
    .workspace-name small { display: none; }
}
@media (max-width: 1120px) {
    .workspace-name {
        display: none;
    }
}

/* ─── Entry surfaces: login, lobby and create-space flow ─── */
.modal {
    padding: 24px;
    background-color: var(--tool-canvas);
    background-image: radial-gradient(circle, rgba(80, 89, 104, 0.14) 1px, transparent 1.15px);
    background-size: 22px 22px;
    backdrop-filter: none;
}
.modal::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 72px;
    background: rgba(255, 255, 255, 0.82);
    border-bottom: 1px solid var(--tool-border);
    backdrop-filter: blur(14px);
}
.modal-content {
    position: relative;
    width: 400px;
    padding: 30px;
    gap: 24px;
    border: 1px solid var(--tool-border-strong);
    border-radius: 12px;
    background: var(--tool-panel);
    box-shadow: 0 18px 48px rgba(17, 24, 39, 0.1), 0 2px 8px rgba(17, 24, 39, 0.04);
}
.modal-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}
.modal-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}
.modal-logo {
    margin: 0;
    color: var(--tool-ink);
    background: none;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: -0.01em;
    -webkit-text-fill-color: currentColor;
}
.modal-tagline {
    margin-top: 5px;
    color: #8a9099;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
}
.modal-welcome {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 22px;
    border-top: 1px solid #eceef1;
}
.modal-welcome strong {
    color: var(--tool-ink);
    font-size: 22px;
    font-weight: 720;
    letter-spacing: -0.025em;
}
.modal-welcome span {
    color: var(--tool-muted);
    font-size: 12px;
    line-height: 1.5;
}
.modal-form {
    gap: 16px;
}
.input-group {
    gap: 7px;
}
.input-label {
    color: #4f5662;
    font-size: 11px;
    font-weight: 650;
}
.login-input {
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--tool-border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--tool-ink);
    font-size: 13px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.login-input::placeholder {
    color: #a0a6af;
}
.login-input:hover {
    border-color: #bfc5cd;
}
.login-input:focus {
    border-color: #7f8792;
    box-shadow: 0 0 0 3px rgba(36, 39, 45, 0.08);
}
#user-id-confirm {
    min-height: 42px;
    margin-top: 4px;
    padding: 0 16px;
    border-radius: 8px;
    background: #24272d;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.18);
    font-size: 13px;
    font-weight: 650;
    transition: background 0.15s, transform 0.1s;
}
#user-id-confirm:hover {
    background: #111318;
    opacity: 1;
}

#lobby-overlay {
    z-index: 1500;
    background-color: var(--tool-canvas);
    background-image: radial-gradient(circle, rgba(80, 89, 104, 0.12) 1px, transparent 1.15px);
    background-size: 22px 22px;
    color: var(--tool-ink);
}
.lobby-header {
    height: 72px;
    padding: 0 28px;
    border-bottom: 1px solid var(--tool-border);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
}
.lobby-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.lobby-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}
.lobby-logo {
    color: var(--tool-ink);
    background: none;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: -0.01em;
    -webkit-text-fill-color: currentColor;
}
.lobby-brand-copy small {
    margin-top: 4px;
    color: #8a9099;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
}
.lobby-user-info {
    gap: 8px;
    padding: 4px 4px 4px 6px;
    border: 1px solid var(--tool-border);
    border-radius: 9px;
    background: #fff;
}
.lobby-avatar-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 7px;
    background: #edf1f5;
    color: #555d68;
    font-size: 10px;
    font-weight: 750;
}
.lobby-user-info span {
    color: #3f454e;
    font-size: 12px;
    font-weight: 650;
}
.lobby-logout-btn {
    min-height: 26px;
    padding: 0 8px;
    border-left: 1px solid var(--tool-border);
    border-radius: 0 6px 6px 0;
    color: #7d848f;
    font-size: 11px;
}
.lobby-logout-btn:hover {
    color: var(--tool-ink);
    background: #f2f4f6;
}
.lobby-body {
    max-width: 1160px;
    padding: 52px 40px 60px;
}
.lobby-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 44px;
}
.lobby-intro h1 {
    margin: 0;
    color: var(--tool-ink);
    font-size: 30px;
    font-weight: 720;
    letter-spacing: -0.035em;
}
.lobby-intro p {
    margin: 9px 0 0;
    color: var(--tool-muted);
    font-size: 13px;
}
.lobby-create-btn {
    width: auto;
    min-height: 38px;
    gap: 8px;
    padding: 0 14px 0 9px;
    border: 1px solid #24272d;
    border-radius: 8px;
    background: #24272d;
    color: #fff;
    font-size: 12px;
    font-weight: 650;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.16);
}
.lobby-create-btn:hover {
    border-color: #111318;
    background: #111318;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.12);
    transform: translateY(-1px);
}
.lobby-create-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 17px;
}
.lobby-section-label {
    margin-bottom: 12px;
    color: #737a85;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
}
.canvas-grid {
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 12px;
}
.canvas-card {
    position: relative;
    min-height: 168px;
    gap: 11px;
    padding: 18px;
    border: 1px solid var(--tool-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.025);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.canvas-card::before {
    content: '';
    width: 26px;
    height: 26px;
    margin-bottom: 4px;
    border-radius: 7px;
    background-color: #f0f2f4;
    background-image:
        linear-gradient(90deg, transparent 48%, #aeb4bd 48%, #aeb4bd 52%, transparent 52%),
        linear-gradient(transparent 48%, #aeb4bd 48%, #aeb4bd 52%, transparent 52%);
    background-size: 9px 9px;
    background-position: center;
    background-repeat: no-repeat;
}
.canvas-card:hover {
    border-color: #bfc5cd;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
    transform: translateY(-2px);
}
.canvas-card-name {
    color: var(--tool-ink);
    font-size: 14px;
    font-weight: 700;
}
.canvas-card-id {
    color: #a1a7b0;
    font-size: 10px;
}
.canvas-card-topic {
    color: #69717c;
    font-size: 12px;
    line-height: 1.55;
}
.canvas-note-count {
    color: #9299a3;
    font-size: 10px;
}
.canvas-card-enter {
    color: #343941;
    font-size: 11px;
    font-weight: 650;
}
.canvas-card:hover .canvas-card-enter {
    color: var(--tool-accent);
}
.canvas-empty,
.canvas-loading {
    padding: 64px 24px;
    border: 1px dashed var(--tool-border-strong);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.65);
    color: #8c939d;
}

.canvas-loading-overlay {
    background-color: var(--tool-canvas);
    background-image: radial-gradient(circle, rgba(80, 89, 104, 0.12) 1px, transparent 1.15px);
    background-size: 22px 22px;
}
.canvas-loading-card {
    min-width: 260px;
    padding: 28px 32px;
    border: 1px solid var(--tool-border-strong);
    border-radius: 11px;
    color: var(--tool-ink);
    box-shadow: 0 16px 42px rgba(17, 24, 39, 0.1);
}
.canvas-loading-spinner {
    border-color: #e3e6ea;
    border-top-color: #24272d;
}

.create-modal-backdrop {
    background: rgba(17, 24, 39, 0.34);
    backdrop-filter: blur(3px);
}
#create-canvas-modal {
    z-index: 1600;
}
.create-modal-card {
    width: 460px;
    padding: 28px;
    border: 1px solid var(--tool-border-strong);
    border-radius: 12px;
    box-shadow: 0 22px 56px rgba(17, 24, 39, 0.18);
}
.create-modal-title {
    margin: 0 0 24px;
    color: var(--tool-ink);
    font-size: 19px;
    font-weight: 720;
    letter-spacing: -0.02em;
}
.create-modal-field label {
    margin-bottom: 7px;
    color: #4f5662;
    font-size: 11px;
    font-weight: 650;
}
.create-modal-input,
.create-modal-textarea {
    padding: 11px 12px;
    border: 1px solid var(--tool-border-strong);
    border-radius: 8px;
    color: var(--tool-ink);
    font-size: 13px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.create-modal-input:focus,
.create-modal-textarea:focus {
    border-color: #7f8792;
    box-shadow: 0 0 0 3px rgba(36, 39, 45, 0.08);
}
.create-modal-actions {
    gap: 8px;
    padding-top: 8px;
}
.create-modal-cancel,
.create-modal-submit {
    min-height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 650;
}
.create-modal-cancel {
    border: 1px solid var(--tool-border);
    background: #fff;
    color: #5d6470;
}
.create-modal-cancel:hover {
    background: #f3f5f7;
}
.create-modal-submit {
    background: #24272d;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.16);
}
.create-modal-submit:hover:not(:disabled) {
    background: #111318;
    opacity: 1;
}

@media (max-width: 680px) {
    .modal {
        padding: 16px;
    }
    .modal-content {
        width: 100%;
        padding: 24px;
    }
    .lobby-header {
        padding: 0 16px;
    }
    .lobby-brand-copy small,
    .lobby-user-info span {
        display: none;
    }
    .lobby-body {
        padding: 32px 18px 48px;
    }
    .lobby-intro {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 32px;
    }
    .lobby-intro h1 {
        font-size: 26px;
    }
}

/* ─── CoGraph shell theme ─────────────────────────────────
   Only the workspace chrome changes theme. The board content and target-app
   iframe deliberately remain outside these selectors. */
.shell-theme-toggle {
    position: fixed;
    z-index: 1001;
    top: 20px;
    right: calc(var(--sidebar-w) + 18px);
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--tool-border);
    border-radius: 8px;
    background: var(--tool-panel);
    color: #626975;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.shell-theme-toggle:hover {
    color: #343941;
    border-color: #cdd3db;
    background: #f0f2f4;
}
.shell-theme-icon {
    display: block;
}
.shell-theme-icon-sun {
    display: none;
}
html[data-shell-theme="dark"] .shell-theme-icon-moon {
    display: none;
}
html[data-shell-theme="dark"] .shell-theme-icon-sun {
    display: block;
}

html[data-shell-theme="dark"] {
    --shell-bg: #0E1011;
    --shell-surface: #151719;
    --shell-surface-2: #1B1D20;
    --shell-surface-3: #24272B;
    --shell-sunken: #090A0B;
    --shell-border: #292C30;
    --shell-border-strong: #383C42;
    --shell-text: #F1F2F3;
    --shell-muted: #9A9FA7;
    --shell-faint: #61666E;
    --shell-accent: #C8765A;
    --shell-accent-hover: #D8896F;
    --shell-accent-ink: #111315;
    --shell-accent-soft: rgba(200, 118, 90, 0.15);
    --shell-accent-border: rgba(200, 118, 90, 0.38);
    --shell-ok: #6BB585;
}

/* Top workspace chrome */
html[data-shell-theme="dark"] #board::before,
html[data-shell-theme="dark"] #board.has-canvas-app::before {
    background: var(--shell-surface);
    border-bottom-color: var(--shell-border);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}
html[data-shell-theme="dark"] .workspace-identity {
    color: var(--shell-text);
}
html[data-shell-theme="dark"] .workspace-mark,
html[data-shell-theme="dark"] .workspace-mark i {
    background: var(--shell-accent);
}
html[data-shell-theme="dark"] .workspace-mark {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.38);
}
html[data-shell-theme="dark"] .workspace-name small {
    color: var(--shell-muted);
}
html[data-shell-theme="dark"] .canvas-layer-controls {
    border-color: var(--shell-border-strong);
    background: var(--shell-surface);
}
html[data-shell-theme="dark"] .canvas-layer-switch {
    background: var(--shell-surface-2);
}
html[data-shell-theme="dark"] .canvas-layer-mode,
html[data-shell-theme="dark"] .canvas-app-opacity-control,
html[data-shell-theme="dark"] .canvas-app-opacity-control output {
    color: var(--shell-muted);
}
html[data-shell-theme="dark"] .canvas-layer-mode:hover {
    color: var(--shell-text);
    background: rgba(255, 255, 255, 0.05);
}
html[data-shell-theme="dark"] .canvas-layer-mode.is-active {
    color: var(--shell-accent-ink);
    background: var(--shell-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32);
}
html[data-shell-theme="dark"] .shell-theme-toggle {
    color: var(--shell-accent-hover);
    border-color: var(--shell-border-strong);
    background: var(--shell-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
html[data-shell-theme="dark"] .shell-theme-toggle:hover {
    color: var(--shell-text);
    border-color: var(--shell-accent-border);
    background: var(--shell-surface-2);
}
html[data-shell-theme="dark"] .canvas-app-opacity-control input {
    accent-color: var(--shell-accent);
}
html[data-shell-theme="dark"] .online-user-tag {
    border-color: var(--shell-border-strong);
    background: var(--shell-surface);
    color: var(--shell-text);
}
html[data-shell-theme="dark"] .online-user-tag.is-me {
    border-color: var(--shell-accent-border);
    background: var(--shell-accent-soft);
    color: var(--shell-accent-hover);
}

/* Right sidebar and action list */
html[data-shell-theme="dark"] .connections-history-panel {
    background: var(--shell-surface);
    border-left-color: var(--shell-border);
}
html[data-shell-theme="dark"] .connections-history-header,
html[data-shell-theme="dark"] .conn-sidebar-header,
html[data-shell-theme="dark"] .conn-sidebar-header.conflict,
html[data-shell-theme="dark"] .conn-sidebar-header.similarity {
    color: var(--shell-text);
    background: var(--shell-surface);
    border-bottom-color: var(--shell-border);
}
html[data-shell-theme="dark"] .connections-history-header-icon {
    color: var(--shell-accent-ink);
    background: var(--shell-accent);
}
html[data-shell-theme="dark"] .connections-history-list,
html[data-shell-theme="dark"] #conn-detail-sidebar,
html[data-shell-theme="dark"] .conn-sidebar-body {
    background: var(--shell-surface);
}
html[data-shell-theme="dark"] .connections-history-empty,
html[data-shell-theme="dark"] .conn-history-time {
    color: var(--shell-faint);
}
html[data-shell-theme="dark"] .conn-history-item,
html[data-shell-theme="dark"] .conn-history-item:hover {
    border-color: var(--shell-border);
    background: var(--shell-surface-2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
html[data-shell-theme="dark"] .conn-history-item:hover {
    border-color: var(--shell-border-strong);
    background: var(--shell-surface-3);
}
html[data-shell-theme="dark"] .conn-history-item.active,
html[data-shell-theme="dark"] .conn-history-item.feature-entry-active {
    border-color: var(--shell-accent-border);
    background: var(--shell-accent-soft);
    box-shadow: 0 0 0 2px rgba(200, 118, 90, 0.08);
}
html[data-shell-theme="dark"] .conn-history-item.is-running,
html[data-shell-theme="dark"] .conn-history-item.is-running:hover {
    border-color: var(--shell-accent-border);
    background: linear-gradient(180deg, var(--shell-surface-2), var(--shell-surface));
}
html[data-shell-theme="dark"] .conn-history-desc {
    color: var(--shell-text);
}
html[data-shell-theme="dark"] .type-similarity .conn-history-type-badge,
html[data-shell-theme="dark"] .conn-sidebar-type-badge.similarity {
    color: var(--shell-accent-hover);
    background: var(--shell-accent-soft);
}
html[data-shell-theme="dark"] .conn-feature-entry-badge {
    color: #84C79F;
    background: rgba(107, 181, 133, 0.14);
}
html[data-shell-theme="dark"] .conn-agent-run-badge {
    color: var(--shell-accent-hover);
}
html[data-shell-theme="dark"] .conn-agent-run-badge i {
    background: var(--shell-accent);
    box-shadow: 0 0 0 3px var(--shell-accent-soft);
}
html[data-shell-theme="dark"] .conn-sidebar-back {
    color: var(--shell-muted);
}
html[data-shell-theme="dark"] .conn-sidebar-back:hover {
    color: var(--shell-text);
    background: rgba(255, 255, 255, 0.05);
}

/* Detail flow */
html[data-shell-theme="dark"] .conn-flow-step,
html[data-shell-theme="dark"] .conn-discussion,
html[data-shell-theme="dark"] .conn-development {
    border-color: var(--shell-border);
    background: var(--shell-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
}
html[data-shell-theme="dark"] .conn-flow-step + .conn-flow-step::before {
    background: var(--shell-border-strong);
}
html[data-shell-theme="dark"] .conn-flow-step-index {
    color: var(--shell-accent-hover);
    background: var(--shell-accent-soft);
}
html[data-shell-theme="dark"] .conn-flow-step-copy strong,
html[data-shell-theme="dark"] .conn-sidebar-context-title,
html[data-shell-theme="dark"] .conn-discussion-title,
html[data-shell-theme="dark"] .conn-development-title {
    color: var(--shell-text);
}
html[data-shell-theme="dark"] .conn-flow-step-copy small,
html[data-shell-theme="dark"] .conn-development-meta,
html[data-shell-theme="dark"] .conn-sidebar-directions-label,
html[data-shell-theme="dark"] .conn-discussion-transcript-label {
    color: var(--shell-muted);
}
html[data-shell-theme="dark"] .conn-sidebar-desc {
    border-left-color: var(--shell-accent);
    background: var(--shell-surface-2);
    color: var(--shell-muted);
}
html[data-shell-theme="dark"] .conn-sidebar-direction-card {
    border-color: var(--shell-border);
    background: var(--shell-surface-2);
    color: var(--shell-text);
}
html[data-shell-theme="dark"] .conn-sidebar-direction-card:hover {
    border-color: var(--shell-border-strong);
    background: var(--shell-surface-3);
}
html[data-shell-theme="dark"] .conn-sidebar-direction-num {
    color: var(--shell-accent-hover);
    background: var(--shell-accent-soft);
}
html[data-shell-theme="dark"] .conn-discussion-transcript,
html[data-shell-theme="dark"] .conn-development-instruction {
    border-color: var(--shell-border);
    background: var(--shell-sunken);
    color: var(--shell-text);
}
html[data-shell-theme="dark"] .conn-discussion-transcript:empty::before {
    color: var(--shell-faint);
}
html[data-shell-theme="dark"] .discussion-btn-enter,
html[data-shell-theme="dark"] .discussion-btn-start,
html[data-shell-theme="dark"] .conn-develop-btn {
    color: var(--shell-accent-ink);
    background: var(--shell-accent);
}
html[data-shell-theme="dark"] .discussion-btn-enter:hover,
html[data-shell-theme="dark"] .discussion-btn-start:hover,
html[data-shell-theme="dark"] .conn-develop-btn:hover:not(:disabled) {
    background: var(--shell-accent-hover);
}
html[data-shell-theme="dark"] .conn-development-status {
    background: var(--shell-surface-2);
    color: var(--shell-accent-hover);
}
html[data-shell-theme="dark"] .conn-sidebar-action-bar {
    border-top-color: var(--shell-border);
    background: rgba(45, 42, 36, 0.98);
    box-shadow: 0 -5px 16px rgba(0, 0, 0, 0.22);
}
html[data-shell-theme="dark"] .conn-action-bar-copy strong {
    color: var(--shell-text);
}
html[data-shell-theme="dark"] .conn-action-bar-copy small {
    color: var(--shell-muted);
}

/* Bottom shell tools */
html[data-shell-theme="dark"] .canvas-toolbar,
html[data-shell-theme="dark"] .dev-panel {
    border-color: var(--shell-border-strong);
    background: rgba(45, 42, 36, 0.97);
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.34);
}
html[data-shell-theme="dark"] .toolbar-item,
html[data-shell-theme="dark"] .toolbar-item-label,
html[data-shell-theme="dark"] .dev-panel-label {
    color: var(--shell-muted);
}
html[data-shell-theme="dark"] .toolbar-item:hover {
    background: var(--shell-surface-3);
}
html[data-shell-theme="dark"] .dev-panel-label {
    border-bottom-color: var(--shell-border);
}
html[data-shell-theme="dark"] .dev-btn-ai {
    color: var(--shell-accent-ink);
    background: var(--shell-accent);
}
html[data-shell-theme="dark"] .dev-btn-clear {
    color: #E4C38A;
    background: #2D281E;
    border-color: #4A402A;
}
html[data-shell-theme="dark"] .dev-btn-reset {
    color: #E08A7F;
    background: #30201E;
    border-color: #54302A;
}

/* The simulated target-app window remains light, including its three-dot frame bar. */
html[data-shell-theme="dark"] .canvas-app-framebar {
    color: #747b86;
    background: #f7f8fa;
    border-bottom-color: #dfe3e7;
}
html[data-shell-theme="dark"] .canvas-app-framebar-title strong {
    color: #343941;
}
/* Only the recessed panel behind the target-app window follows the dark shell. */
html[data-shell-theme="dark"] #board.app-interaction-mode {
    background-color: var(--shell-surface-3);
}
html[data-shell-theme="dark"] #board.app-interaction-mode .canvas-app-layer {
    border-color: var(--shell-border-strong);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}

/* ─── Flowith reference restoration: canvas, nodes and composer ─── */
html[data-shell-theme="dark"] #board:not(.app-interaction-mode) {
    background-color: #0e1011;
    background-image: none;
    box-shadow: inset 0 0 0 1px #292c30;
}

html[data-shell-theme="light"] #board:not(.app-interaction-mode) {
    background-color: #f2f3f4;
    background-image: none;
    box-shadow: inset 0 0 0 1px #dfe1e4;
}

html[data-shell-theme="dark"] #board:not(.app-interaction-mode) .canvas-app-layer {
    filter: saturate(0.72) brightness(0.58);
}

html[data-shell-theme="light"] #board:not(.app-interaction-mode) .canvas-app-layer {
    filter: saturate(0.78) brightness(0.98);
}

html[data-shell-theme="dark"] {
    --flowith-note-bg: rgba(42, 44, 47, 0.48);
    --flowith-note-hover: rgba(49, 52, 56, 0.62);
    --flowith-note-selected: rgba(42, 44, 47, 0.96);
    --flowith-note-text: #f0f1f2;
    --flowith-note-problem: #aeb2b9;
    --flowith-note-placeholder: #666b73;
}

html[data-shell-theme="light"] {
    --flowith-note-bg: rgba(224, 227, 232, 0.72);
    --flowith-note-hover: rgba(218, 222, 228, 0.84);
    --flowith-note-selected: rgba(218, 222, 228, 0.96);
    --flowith-note-text: #17191c;
    --flowith-note-problem: #69707a;
    --flowith-note-placeholder: #9a9fa7;
}

.note {
    width: 360px;
    height: 160px;
    padding: 20px 24px 18px;
    border-width: 2px;
    border-color: color-mix(in srgb, #686c73 84%, var(--note-color, #A88AF7));
    border-radius: 28px;
    background: var(--flowith-note-bg);
    box-shadow: none;
}

html[data-shell-theme="light"] .note {
    border-color: #d2d5da;
}

html[data-shell-theme="light"] .note.selected,
html[data-shell-theme="light"] .note.is-editing {
    border-color: color-mix(in srgb, #d2d5da 68%, var(--note-color, #A88AF7));
}

.note:hover {
    background: var(--flowith-note-hover);
}

.note.selected,
.note.is-editing {
    border-color: var(--note-color, #A88AF7);
    background: var(--flowith-note-selected);
    transform: none;
    box-shadow:
        0 18px 44px color-mix(in srgb, var(--note-color, #A88AF7) 24%, transparent),
        0 0 0 4px color-mix(in srgb, var(--note-color, #A88AF7) 20%, transparent);
}

.note-id-label {
    top: auto;
    bottom: 11px;
    left: 24px;
    min-height: 20px;
    padding: 3px 8px;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--note-color, #A88AF7) 46%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--note-color, #A88AF7) 16%, transparent);
    color: var(--note-color, #A88AF7);
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
    letter-spacing: 0.035em;
}

.note-structured-editor {
    height: 124px;
    min-height: 124px;
    max-height: none;
    padding: 0 0 22px;
}

.note.selected .note-structured-editor,
.note.is-editing .note-structured-editor {
    min-height: 124px;
    max-height: none;
}

.note-problem-field {
    min-height: 36px;
    padding-left: 13px;
}

.note-problem-field::before {
    left: 0;
    top: 5px;
    bottom: 4px;
    width: 2px;
    background: color-mix(in srgb, var(--note-color, #A88AF7) 76%, transparent);
}

.note.other-user-note:not(.fog-revealed) .note-problem-field::before {
    opacity: 0;
}

.note-solution-field {
    min-height: 44px;
}

.note-editor-field,
.note.other-user-note.fog-revealed .note-editor-field {
    color: var(--flowith-note-text);
    -webkit-text-fill-color: var(--flowith-note-text);
}

.note-problem-input {
    color: var(--flowith-note-problem);
    -webkit-text-fill-color: var(--flowith-note-problem);
}

.note-editor-field::placeholder,
.note.other-user-note.fog-revealed .note-editor-field::placeholder {
    color: var(--flowith-note-placeholder);
}

.note.other-user-note:not(.fog-revealed) {
    opacity: 1;
}

.note.other-user-note:not(.fog-revealed) .note-id-label {
    opacity: 1;
}

.note-composer.canvas-toolbar {
    bottom: 18px;
    left: calc((100vw - var(--sidebar-w)) / 2);
    display: none;
    width: min(620px, calc(100vw - var(--sidebar-w) - 210px));
    min-width: 420px;
    max-width: 620px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.composer-question-card {
    padding: 15px 17px 14px;
    border: 1px solid #373a3f;
    border-radius: 18px;
    background: rgba(24, 26, 28, 0.97);
    color: #f2f3f4;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(18px);
}

.composer-question-card[hidden] {
    display: none;
}

.composer-question-heading,
.note-composer-heading,
.note-composer-footer,
.composer-question-actions {
    display: flex;
    align-items: center;
}

.composer-question-heading,
.note-composer-heading,
.note-composer-footer {
    justify-content: space-between;
}

.composer-question-kicker {
    color: #f1f2f3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.composer-question-source {
    color: #777c84;
    font-size: 10px;
}

.composer-question-text {
    margin: 10px 0 13px;
    color: #d9dce0;
    font-size: 14px;
    font-weight: 540;
    line-height: 1.55;
}

.composer-question-actions {
    gap: 7px;
}

.composer-question-action {
    padding: 6px 10px;
    border: 1px solid #3a3d42;
    border-radius: 9px;
    background: #202225;
    color: #aeb2b8;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.composer-question-action:hover {
    border-color: #555a62;
    color: #f1f2f3;
}

.composer-question-action.is-primary,
.composer-question-action.is-active {
    border-color: #e6e8eb;
    background: #e6e8eb;
    color: #16181a;
}

.note-composer-form {
    padding: 13px 14px 11px;
    border: 1px solid #373a3f;
    border-radius: 20px;
    background: rgba(16, 18, 20, 0.97);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(20px);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.note-composer-form:focus-within {
    border-color: #62666e;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

.note-composer-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d8dade;
    font-size: 11px;
    font-weight: 650;
}

.note-composer-mode {
    color: #656a72;
    font-size: 10px;
}

.note-composer-problem-wrap {
    position: relative;
    margin: 10px 0 3px;
    padding-left: 14px;
}

.note-composer-problem-wrap::before {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 1px;
    width: 2px;
    border-radius: 2px;
    background: color-mix(
        in srgb,
        var(--composer-note-color, #F39A62) 72%,
        transparent
    );
}

.note-composer-problem {
    display: block;
    width: 100%;
    min-height: 30px;
    max-height: 82px;
    padding: 4px 2px;
    box-sizing: border-box;
    border: 0;
    outline: 0;
    resize: none;
    overflow-y: auto;
    background: transparent;
    color: #aeb2b9;
    caret-color: #f2f3f4;
    font: inherit;
    font-size: 13px;
    line-height: 1.55;
}

.note-composer-problem::placeholder {
    color: #626770;
}

.note-composer-problem:read-only {
    cursor: default;
}

.note-composer-problem.is-required-missing {
    color: #fecaca;
}
.note-composer-problem-wrap:has(.note-composer-problem.is-required-missing)::before {
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
}

.note-composer-input {
    display: block;
    width: 100%;
    min-height: 62px;
    max-height: 144px;
    margin: 2px 0 5px;
    padding: 5px 2px;
    box-sizing: border-box;
    border: 0;
    outline: 0;
    resize: none;
    overflow-y: auto;
    background: transparent;
    color: #f2f3f4;
    caret-color: #f2f3f4;
    font: inherit;
    font-size: 15px;
    line-height: 1.55;
}

.note-composer-input::placeholder {
    color: #555a62;
}

.note-composer-footer {
    min-height: 34px;
    color: #5e636b;
    font-size: 10px;
}

.note-composer-submit {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e8eaed;
    color: #17191b;
    cursor: pointer;
    transition: transform 120ms ease, background 120ms ease;
}

.note-composer-submit:hover {
    background: #fff;
    transform: translateY(-1px);
}

html[data-shell-theme="dark"] .note-composer.canvas-toolbar {
    border: 0;
    background: transparent;
    box-shadow: none;
}

html[data-shell-theme="light"] .composer-question-card {
    border-color: #d8dbe0;
    background: rgba(249, 250, 251, 0.97);
    color: #17191c;
    box-shadow: 0 14px 38px rgba(42, 47, 55, 0.12);
}

html[data-shell-theme="light"] .composer-question-kicker {
    color: #17191c;
}

html[data-shell-theme="light"] .composer-question-source,
html[data-shell-theme="light"] .note-composer-mode,
html[data-shell-theme="light"] .note-composer-footer {
    color: #838993;
}

html[data-shell-theme="light"] .composer-question-text {
    color: #3f444c;
}

html[data-shell-theme="light"] .composer-question-action {
    border-color: #d8dbe0;
    background: #eef0f3;
    color: #5c626c;
}

html[data-shell-theme="light"] .composer-question-action.is-primary,
html[data-shell-theme="light"] .composer-question-action.is-active {
    border-color: #24272b;
    background: #24272b;
    color: #fff;
}

html[data-shell-theme="light"] .note-composer-form {
    border-color: #d7dade;
    background: rgba(250, 251, 252, 0.97);
    box-shadow: 0 18px 46px rgba(42, 47, 55, 0.13);
}

html[data-shell-theme="light"] .note-composer-form:focus-within {
    border-color: #aeb3bb;
    box-shadow:
        0 20px 50px rgba(42, 47, 55, 0.15),
        0 0 0 1px rgba(20, 24, 30, 0.03);
}

html[data-shell-theme="light"] .note-composer-type,
html[data-shell-theme="light"] .note-composer-problem,
html[data-shell-theme="light"] .note-composer-input {
    color: #202329;
    caret-color: #202329;
}

html[data-shell-theme="light"] .note-composer-problem {
    color: #69707a;
}

html[data-shell-theme="light"] .note-composer-problem::placeholder,
html[data-shell-theme="light"] .note-composer-input::placeholder {
    color: #969ca5;
}

html[data-shell-theme="light"] .note-composer-submit {
    background: #24272b;
    color: #fff;
}

html[data-shell-theme="light"] .note-composer-submit:hover {
    background: #111315;
}

@media (max-width: 900px) {
    .note-composer.canvas-toolbar {
        width: calc(100vw - var(--sidebar-w) - 32px);
        min-width: 0;
    }
}

/* ─── Unified sidebar workspace header ───────────────────── */
#board::before,
#board.has-canvas-app::before {
    display: none;
}

.connections-history-header {
    min-height: 54px;
    height: 54px;
    flex: 0 0 auto;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    gap: 7px;
    padding: 8px 10px;
}

.sidebar-workspace-actions {
    display: flex;
    align-items: center;
}

.sidebar-workspace-row {
    display: contents;
}

.sidebar-workspace-actions {
    order: 3;
    margin-left: auto;
    flex: 0 0 auto;
    gap: 5px;
}

.connections-history-header .workspace-identity {
    order: 1;
    height: 30px;
    min-width: 0;
}

.connections-history-header .workspace-mark {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    border-radius: 7px;
}

.connections-history-header .online-user-tags {
    position: static;
    width: auto;
    max-width: none;
    height: 30px;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    overflow: visible;
}

.connections-history-header .online-user-tag {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    justify-content: center;
    gap: 0;
    padding: 2px;
    border: 1.5px solid transparent;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
}

.connections-history-header .online-user-avatar {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    border-radius: 6px;
    color: rgba(23, 25, 28, 0.78);
    font-size: 10px;
    font-weight: 800;
}

.connections-history-header .online-user-tag.is-me {
    border-color: var(--user-color);
    background: transparent;
    box-shadow: none;
}

.connections-history-header .shell-theme-toggle {
    position: static;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 8px;
}

.connections-history-header .canvas-layer-controls {
    order: 2;
    width: auto;
    min-height: 32px;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: space-between;
    gap: 6px;
    padding: 2px;
}

.connections-history-header .canvas-layer-switch {
    flex: 0 0 auto;
}

.connections-history-header .canvas-layer-mode {
    min-width: 43px;
    padding: 4px 8px;
}

.connections-history-header .canvas-app-opacity-control {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    padding-right: 3px;
}

.connections-history-header .canvas-app-opacity-control input {
    width: 72px;
}

html[data-shell-theme="dark"] .connections-history-header .online-user-tag,
html[data-shell-theme="dark"] .connections-history-header .online-user-tag.is-me {
    background: transparent;
    color: inherit;
}

html[data-shell-theme="dark"] .connections-history-header .online-user-tag {
    border-color: transparent;
}

html[data-shell-theme="dark"] .connections-history-header .online-user-tag.is-me {
    border-color: var(--user-color);
}

/* ─── Floating canvas sidebar ───────────────────────────── */
#app-layout {
    position: relative;
}

.connections-history-panel {
    position: absolute;
    top: 14px;
    right: 14px;
    bottom: 14px;
    height: auto;
    box-sizing: border-box;
    border: 1px solid rgba(211, 215, 221, 0.86);
    border-radius: 20px;
    background: rgba(250, 251, 252, 0.94);
    box-shadow:
        0 18px 48px rgba(27, 31, 38, 0.12),
        0 2px 10px rgba(27, 31, 38, 0.05);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.connections-history-header {
    background: rgba(255, 255, 255, 0.74);
}

.connections-history-list,
#conn-detail-sidebar,
.conn-sidebar-body {
    background: transparent;
}

html[data-shell-theme="dark"] .connections-history-panel {
    border: 1px solid rgba(78, 81, 86, 0.82);
    background: rgba(35, 37, 40, 0.94);
    box-shadow:
        0 20px 54px rgba(0, 0, 0, 0.34),
        0 2px 12px rgba(0, 0, 0, 0.22);
}

html[data-shell-theme="dark"] .connections-history-header {
    background: rgba(35, 37, 40, 0.78);
}

html[data-shell-theme="dark"] .connections-history-list,
html[data-shell-theme="dark"] #conn-detail-sidebar,
html[data-shell-theme="dark"] .conn-sidebar-body {
    background: transparent;
}

/* Application interaction uses the remaining stage instead of sitting under
   the floating sidebar. Board mode intentionally remains full-width. */
#board.app-interaction-mode .canvas-app-layer {
    top: 14px;
    right: calc(var(--sidebar-w) + 28px);
    bottom: 14px;
    left: 14px;
    border-radius: 20px;
}

.connections-history-header {
    position: relative;
}

.connections-history-header .workspace-menu-trigger {
    appearance: none;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
}

.connections-history-header .workspace-menu-trigger:hover,
.connections-history-header .workspace-menu-trigger.is-open {
    background: rgba(127, 132, 140, 0.12);
}

.connections-history-header .workspace-menu-trigger:focus-visible {
    outline: 2px solid var(--tool-border-strong);
    outline-offset: 2px;
}

.workspace-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 10px;
    width: 210px;
    padding: 7px;
    box-sizing: border-box;
    border: 1px solid rgba(211, 215, 221, 0.9);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    color: var(--tool-ink);
    box-shadow: 0 14px 34px rgba(27, 31, 38, 0.16);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.workspace-menu[hidden] {
    display: none;
}

.workspace-menu-item {
    appearance: none;
    display: flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    gap: 10px;
    padding: 8px 9px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.workspace-menu-item:hover {
    background: rgba(127, 132, 140, 0.1);
}

.workspace-menu-item svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

.workspace-menu-item em {
    margin-left: auto;
    color: var(--tool-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
}

.workspace-menu-divider {
    height: 1px;
    margin: 5px 7px;
    background: var(--tool-border);
}

.workspace-menu .shell-theme-toggle {
    position: static;
    width: 100%;
    height: auto;
    flex: none;
    justify-content: flex-start;
    padding: 8px 9px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

html[data-shell-theme="dark"] .workspace-menu {
    border-color: rgba(78, 81, 86, 0.9);
    background: rgba(40, 42, 45, 0.98);
    color: var(--shell-text);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
}

html[data-shell-theme="dark"] .workspace-menu-item:hover {
    background: rgba(255, 255, 255, 0.07);
}

html[data-shell-theme="dark"] .workspace-menu .shell-theme-toggle {
    border: 0;
    background: transparent;
    color: var(--shell-text);
    box-shadow: none;
}

html[data-shell-theme="dark"] .workspace-menu .shell-theme-toggle:hover {
    border: 0;
    background: rgba(255, 255, 255, 0.07);
    color: var(--shell-text);
}

html[data-shell-theme="dark"] .workspace-menu-divider {
    background: var(--shell-border);
}

html[data-shell-theme="dark"] .workspace-menu-item em {
    color: var(--shell-muted);
}

.connections-history-header .online-user-tags {
    padding-left: 7px;
}

.connections-history-header .online-user-tag {
    position: relative;
    border-radius: 50%;
    border-color: rgba(255, 255, 255, 0.82);
}

.connections-history-header .online-user-avatar {
    border-radius: 50%;
}

.connections-history-header .online-user-tag + .online-user-tag {
    margin-left: -9px;
}

.connections-history-header .online-user-tag:nth-child(1) {
    z-index: 10;
}

.connections-history-header .online-user-tag:nth-child(2) {
    z-index: 9;
}

html[data-shell-theme="dark"] .connections-history-header .online-user-tag {
    border-color: rgba(35, 37, 40, 0.9);
}

html[data-shell-theme="dark"] .connections-history-header .online-user-tag.is-me,
.connections-history-header .online-user-tag.is-me {
    border-color: var(--user-color);
}

html[data-shell-theme="dark"] #board:not(.app-interaction-mode) {
    background-color: #0e1011;
    background-image: radial-gradient(circle, rgba(156, 160, 168, 0.22) 1.15px, transparent 1.15px);
    background-size: 24px 24px;
    background-repeat: repeat;
}

html[data-shell-theme="light"] #board:not(.app-interaction-mode) {
    background-color: #f5f7fb;
    background-image: radial-gradient(circle, rgba(99, 102, 241, 0.18) 1.2px, transparent 1.2px);
    background-size: 24px 24px;
    background-repeat: repeat;
}

#board.app-interaction-mode .canvas-app-framebar {
    height: 54px;
    flex-basis: 54px;
    padding: 0 16px;
}

/* Detail view replaces the primary sidebar chrome instead of stacking below it. */
.connections-history-panel.sidebar-open > .connections-history-header {
    display: none;
}

.connections-history-panel.sidebar-open > #conn-detail-sidebar {
    height: 100%;
}

.conn-sidebar-header,
.conn-sidebar-header.conflict,
.conn-sidebar-header.similarity {
    height: 54px;
    min-height: 54px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.74);
    border-bottom-color: var(--tool-border);
}

.conn-sidebar-back {
    min-height: 34px;
    margin-left: -3px;
    padding: 7px 9px;
    border-radius: 9px;
    font-size: 12px;
}

.conn-sidebar-header .conn-sidebar-type-badge {
    font-size: 12.5px;
    font-weight: 650;
}

html[data-shell-theme="dark"] .conn-sidebar-header,
html[data-shell-theme="dark"] .conn-sidebar-header.conflict,
html[data-shell-theme="dark"] .conn-sidebar-header.similarity {
    background: rgba(35, 37, 40, 0.78);
    border-bottom-color: var(--shell-border);
}

/* Detail note previews share the current Flowith note language. */
.conn-sidebar-notes {
    align-items: stretch;
    gap: 10px;
}

.sidebar-note-card {
    position: relative;
    display: flex;
    height: auto;
    min-height: 152px;
    flex: 1 1 0;
    flex-direction: column;
    gap: 10px;
    padding: 16px 16px 40px;
    border: 1.5px solid color-mix(in srgb, #686c73 82%, var(--note-color, #A88AF7));
    border-radius: 20px;
    background: var(--flowith-note-bg) !important;
    box-shadow: none;
    color: var(--flowith-note-text);
}

html[data-shell-theme="light"] .sidebar-note-card {
    border-color: color-mix(in srgb, #d2d5da 82%, var(--note-color, #A88AF7));
}

.sidebar-note-card-problem {
    position: relative;
    padding-left: 12px;
    color: var(--flowith-note-problem);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.sidebar-note-card-problem::before {
    content: '';
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 2px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--note-color, #A88AF7) 60%, transparent);
}

.sidebar-note-card-content {
    display: -webkit-box;
    overflow: hidden;
    color: var(--flowith-note-text);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

.sidebar-note-card-user {
    position: absolute;
    bottom: 13px;
    left: 16px;
    min-height: 20px;
    margin: 0;
    padding: 3px 8px;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--note-color, #A88AF7) 46%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--note-color, #A88AF7) 16%, transparent);
    color: var(--note-color, #A88AF7);
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
    letter-spacing: 0.035em;
    text-transform: none;
}

/* Keep the detail hierarchy quiet: whitespace and tone replace nested outlines. */
.conn-flow-step,
.conn-sidebar-context-group,
.conn-discussion,
.conn-development {
    padding-right: 2px;
    padding-left: 2px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.conn-flow-step + .conn-flow-step {
    margin-top: 18px;
}

.sidebar-note-card,
html[data-shell-theme="light"] .sidebar-note-card {
    border: 0;
}

.conn-sidebar-direction-card,
.conn-sidebar-direction-card:hover {
    border: 0;
    background: rgba(127, 132, 140, 0.08);
}

.conn-discussion-transcript {
    border: 0;
    background: rgba(127, 132, 140, 0.07);
}

.conn-development-instruction {
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    background: rgba(127, 132, 140, 0.07);
    box-shadow: none;
}

html[data-shell-theme="dark"] .conn-flow-step,
html[data-shell-theme="dark"] .conn-sidebar-context-group,
html[data-shell-theme="dark"] .conn-discussion,
html[data-shell-theme="dark"] .conn-development {
    border: 0;
    background: transparent;
    box-shadow: none;
}

html[data-shell-theme="dark"] .conn-sidebar-direction-card,
html[data-shell-theme="dark"] .conn-sidebar-direction-card:hover,
html[data-shell-theme="dark"] .conn-discussion-transcript {
    border: 0;
    background: rgba(255, 255, 255, 0.045);
}

html[data-shell-theme="dark"] .conn-development-instruction {
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: none;
}

/* The three primary phases keep one clear outer boundary. */
.conn-flow-step,
.conn-sidebar-context-group,
.conn-discussion,
.conn-development {
    padding: 14px;
    border: 1px solid rgba(190, 195, 202, 0.72);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.56);
    box-shadow: none;
}

html[data-shell-theme="dark"] .conn-flow-step,
html[data-shell-theme="dark"] .conn-sidebar-context-group,
html[data-shell-theme="dark"] .conn-discussion,
html[data-shell-theme="dark"] .conn-development {
    border: 1px solid var(--shell-border);
    background: rgba(255, 255, 255, 0.018);
    box-shadow: none;
}

.conn-develop-btn,
html[data-shell-theme="dark"] .conn-develop-btn {
    border: 1px solid #090a0b;
    background: #17191d;
    color: #ffffff;
}

.conn-develop-btn:hover:not(:disabled),
html[data-shell-theme="dark"] .conn-develop-btn:hover:not(:disabled) {
    border-color: #000000;
    background: #000000;
    color: #ffffff;
}

html[data-shell-theme="dark"] .note.other-user-note:not(.fog-revealed),
html[data-shell-theme="dark"] .note.other-user-note:not(.fog-revealed):hover {
    border-color: rgba(104, 108, 115, 0.42);
    background: rgba(42, 44, 47, 0.22);
    box-shadow: none;
}

html[data-shell-theme="light"] .note.other-user-note:not(.fog-revealed),
html[data-shell-theme="light"] .note.other-user-note:not(.fog-revealed):hover {
    border-color: rgba(210, 213, 218, 0.52);
    background: rgba(224, 227, 232, 0.34);
    box-shadow: none;
}

@media (max-width: 760px) {
    .connections-history-panel {
        top: 10px;
        right: 10px;
        bottom: 10px;
        width: min(var(--sidebar-w), calc(100vw - 20px));
        border-radius: 18px;
    }

    #board.app-interaction-mode .canvas-app-layer {
        right: calc(min(var(--sidebar-w), calc(100vw - 20px)) + 20px);
    }
}

/* Discussion and Code Editor can temporarily float above the complete sidebar. */
.conn-panel-size-toggle {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    padding: 0;
    border: 1px solid rgba(190, 195, 202, 0.76);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    color: #69717c;
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.conn-panel-size-toggle:hover {
    border-color: rgba(125, 132, 142, 0.78);
    background: #fff;
    color: #20242a;
    transform: translateY(-1px);
}

.conn-panel-size-toggle:focus-visible {
    outline: 2px solid rgba(99, 102, 241, 0.72);
    outline-offset: 2px;
}

.conn-panel-size-toggle svg {
    width: 15px;
    height: 15px;
}

.conn-panel-collapse-icon {
    display: none;
}

.conn-flow-step.is-panel-expanded .conn-panel-expand-icon {
    display: none;
}

.conn-flow-step.is-panel-expanded .conn-panel-collapse-icon {
    display: block;
}

#conn-detail-sidebar.has-expanded-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 18;
    background: rgba(31, 35, 42, 0.12);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    pointer-events: none;
    animation: connPanelBackdropIn 180ms ease-out both;
}

#conn-detail-sidebar > .conn-flow-step.is-panel-expanded,
html[data-shell-theme="dark"] #conn-detail-sidebar > .conn-flow-step.is-panel-expanded {
    position: absolute;
    inset: 10px;
    z-index: 20;
    display: flex;
    min-height: 0;
    margin: 0;
    padding: 18px;
    overflow: auto;
    border: 1px solid rgba(190, 195, 202, 0.9);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow:
        0 28px 70px rgba(16, 20, 27, 0.24),
        0 8px 24px rgba(16, 20, 27, 0.14),
        0 0 0 1px rgba(255, 255, 255, 0.72) inset;
    animation: connPanelExpandIn 220ms cubic-bezier(.2, .75, .25, 1) both;
}

#conn-detail-sidebar > .conn-flow-step.is-panel-expanded.is-panel-collapsing,
html[data-shell-theme="dark"] #conn-detail-sidebar > .conn-flow-step.is-panel-expanded.is-panel-collapsing {
    pointer-events: none;
    animation: connPanelCollapseOut 180ms cubic-bezier(.55, .05, .75, .25) both;
}

#conn-detail-sidebar > .conn-discussion.is-panel-expanded .conn-discussion-transcript {
    min-height: 0;
    max-height: none;
    flex: 1 1 160px;
}

#conn-detail-sidebar > .conn-development.is-panel-expanded .conn-development-instruction {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
}

html[data-shell-theme="dark"] .conn-panel-size-toggle {
    border-color: rgba(95, 99, 106, 0.9);
    background: rgba(255, 255, 255, 0.045);
    color: #aeb4bd;
}

html[data-shell-theme="dark"] .conn-panel-size-toggle:hover {
    border-color: rgba(145, 150, 158, 0.9);
    background: rgba(255, 255, 255, 0.09);
    color: #f1f3f5;
}

html[data-shell-theme="dark"] #conn-detail-sidebar.has-expanded-panel::after {
    background: rgba(0, 0, 0, 0.3);
}

html[data-shell-theme="dark"] #conn-detail-sidebar > .conn-flow-step.is-panel-expanded {
    border-color: rgba(92, 96, 103, 0.95);
    background: rgba(39, 41, 45, 0.985);
    box-shadow:
        0 30px 76px rgba(0, 0, 0, 0.58),
        0 8px 26px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.035) inset;
}

@keyframes connPanelExpandIn {
    from { opacity: 0; transform: scale(0.965) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes connPanelBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes connPanelCollapseOut {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(0.965) translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
    #conn-detail-sidebar > .conn-flow-step.is-panel-expanded,
    #conn-detail-sidebar.has-expanded-panel::after {
        animation: none;
    }
}

/* 运行 instruction 属于 Code Editor 步骤，不作为侧边栏顶层 Action。 */
.conn-development > .conn-sidebar-action-bar {
    display: block;
    width: 100%;
    margin-top: 2px;
    padding: 12px 0 0;
    border-top: 1px solid rgba(190, 195, 202, 0.62);
    background: transparent;
    box-shadow: none;
}

.conn-development-action .conn-develop-btn,
html[data-shell-theme="dark"] .conn-development-action .conn-develop-btn {
    display: inline-flex;
    width: 100%;
    min-width: 92px;
    min-height: 0;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}

.conn-development-meta,
.conn-development-result {
    display: none !important;
}

html[data-shell-theme="dark"] .conn-development > .conn-sidebar-action-bar {
    border-top-color: var(--shell-border);
    background: transparent;
    box-shadow: none;
}

/* Keep the three sidebar stages on one visual grid and fill the available height. */
.conn-sidebar-body {
    min-height: 0;
}

.conn-sidebar-body > .conn-flow-step {
    flex: 1 1 0;
    min-height: 0;
    box-sizing: border-box;
}

.conn-sidebar-body > .conn-flow-step-context {
    flex: 0 0 auto;
}

.conn-sidebar-body > .conn-flow-step-discussion,
.conn-sidebar-body > .conn-flow-step-development {
    min-height: 220px;
}

.conn-sidebar-body > .conn-flow-step::after {
    content: '';
    position: absolute;
    top: -1px;
    right: 14px;
    left: 14px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: rgba(105, 113, 124, 0.48);
}

.conn-sidebar-body > .conn-flow-step-discussion::after {
    background: rgba(99, 102, 241, 0.58);
}

.conn-sidebar-body > .conn-flow-step-development::after {
    background: rgba(59, 130, 160, 0.62);
}

html[data-shell-theme="dark"] .conn-sidebar-body > .conn-flow-step::after {
    background: rgba(190, 195, 202, 0.42);
}

.conn-sidebar-desc.conn-context-keywords {
    /* 暂时隐藏行动项详情中的“共同点 / 探索点”，保留数据与 DOM 便于恢复。 */
    display: none;
    min-height: 0;
    flex-direction: column;
    gap: 7px;
    padding: 10px 11px;
}

.conn-context-keyword-row {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 8px;
}

.conn-context-keyword-row > span {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 2px 7px;
    border: 1px solid rgba(139, 146, 157, 0.28);
    border-radius: 999px;
    background: rgba(127, 132, 140, 0.09);
    color: #737b86;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.4;
}

.conn-context-keyword-row > strong {
    min-width: 0;
    flex: 1 1 auto;
    overflow: visible;
    color: #3f4650;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.conn-discussion-transcript {
    min-height: 80px;
    max-height: none;
    flex: 1 1 80px;
}

.conn-discussion-actions {
    flex: 0 0 auto;
    margin-top: auto;
}

.conn-development-instruction {
    min-height: 96px;
    max-height: none;
    flex: 1 1 110px;
}

.conn-development > .conn-sidebar-action-bar {
    flex: 0 0 auto;
    margin-top: auto;
}

html[data-shell-theme="dark"] .conn-context-keyword-row > span {
    border-color: var(--shell-border);
    background: rgba(255, 255, 255, 0.045);
    color: var(--shell-muted);
}

html[data-shell-theme="dark"] .conn-context-keyword-row > strong {
    color: var(--shell-text);
}

.conn-history-overlap {
    min-width: 0;
    overflow: hidden;
    color: #59616c;
    font-size: 12px;
    font-weight: 550;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conn-history-title {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: #303640;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conn-history-time-placeholder {
    width: 34px;
    height: 1px;
    flex: 0 0 34px;
    margin-left: 0;
    visibility: hidden;
}

html[data-shell-theme="dark"] .conn-history-overlap {
    color: var(--shell-muted);
}

html[data-shell-theme="dark"] .conn-history-title {
    color: var(--shell-text);
}

.conn-development-title {
    display: inline-flex;
    align-items: center;
}

.conn-development-head .conn-panel-size-toggle {
    margin-left: auto;
}

.conn-development-action .conn-develop-btn > svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

.conn-development-action .conn-develop-btn:disabled {
    border: 1px solid rgba(154, 160, 169, 0.46);
    background: rgba(154, 160, 169, 0.16);
    color: #9298a1;
    cursor: not-allowed;
}

.conn-instruction-history {
    display: none;
    min-height: 0;
    flex-direction: column;
    gap: 9px;
}

.conn-development.has-instruction-history .conn-instruction-history {
    display: flex;
    flex: 0 1 auto;
    max-height: 220px;
    overflow: auto;
}

#conn-detail-sidebar > .conn-development.is-panel-expanded.has-instruction-history .conn-instruction-history {
    display: flex;
    flex: 1 1 50%;
    max-height: none;
    overflow: auto;
}

#conn-detail-sidebar > .conn-development.is-panel-expanded.has-instruction-history .conn-development-instruction {
    flex: 0 1 42%;
}

.conn-instruction-history-title {
    color: #7d848e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.conn-instruction-history-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.conn-instruction-history-item {
    border: 1px solid rgba(190, 195, 202, 0.64);
    border-radius: 9px;
    background: rgba(127, 132, 140, 0.065);
    overflow: clip;
}

.conn-instruction-history-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 7px 9px 7px 11px;
    box-sizing: border-box;
    color: #7d848e;
    font-size: 10.5px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.conn-instruction-history-item-head::-webkit-details-marker { display: none; }
.conn-instruction-history-item-head:hover { background: rgba(127, 132, 140, 0.07); }

.conn-instruction-history-item-head strong {
    flex: 0 0 auto;
    color: #414954;
    font-size: 11.5px;
}

.conn-implementation-status {
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
}
.conn-implementation-status.running { background: #e8eefb; color: #2864dc; }
.conn-implementation-status.error { background: #fef2f2; color: #dc2626; }
.conn-implementation-time {
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conn-implementation-chevron {
    display: inline-flex;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    align-items: center;
    justify-content: center;
    transition: transform 150ms ease;
}
.conn-implementation-chevron svg { width: 13px; height: 13px; }
.conn-instruction-history-item[open] .conn-implementation-chevron { transform: rotate(90deg); }

.conn-instruction-history-item pre {
    margin: 0;
    padding: 10px 11px 12px;
    border-top: 1px solid rgba(190, 195, 202, 0.5);
    color: #59616c;
    font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

html[data-shell-theme="dark"] .conn-instruction-history-item {
    border-color: var(--shell-border);
    background: rgba(255, 255, 255, 0.035);
}

html[data-shell-theme="dark"] .conn-instruction-history-item-head strong,
html[data-shell-theme="dark"] .conn-instruction-history-item pre {
    color: var(--shell-text);
}
html[data-shell-theme="dark"] .conn-instruction-history-item-head:hover {
    background: rgba(255, 255, 255, 0.045);
}
html[data-shell-theme="dark"] .conn-instruction-history-item pre {
    border-top-color: var(--shell-border);
}
html[data-shell-theme="dark"] .conn-implementation-status.running {
    background: rgba(40, 100, 220, 0.18);
    color: #8eb0f0;
}

/* 从未收录行动项定位到便签后，短暂强调应点击的小鸟与所属便签。 */
.note.note-collection-target {
    z-index: 90 !important;
    outline: 3px solid color-mix(in srgb, var(--note-accent, #7c5ce0) 72%, white);
    outline-offset: 6px;
    animation: noteCollectionTargetPulse 1.05s ease-in-out 3;
}

.note.note-collection-target .note-bird {
    display: block;
    animation: noteCollectionBirdPulse 0.7s ease-in-out infinite alternate;
}

@keyframes noteCollectionTargetPulse {
    0%, 100% {
        box-shadow: 0 4px 16px rgba(23, 28, 38, 0.05), 0 0 0 0 color-mix(in srgb, var(--note-accent, #7c5ce0) 0%, transparent);
    }
    50% {
        box-shadow: 0 10px 28px rgba(23, 28, 38, 0.14), 0 0 0 10px color-mix(in srgb, var(--note-accent, #7c5ce0) 18%, transparent);
    }
}

@keyframes noteCollectionBirdPulse {
    from { transform: translateY(0) scale(1); }
    to { transform: translateY(-5px) scale(1.22) rotate(-7deg); }
}

.conn-history-item > .conn-peer-thinking-bubble {
    position: absolute;
    z-index: 8;
    left: 50%;
    top: 50%;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: calc(100% - 24px);
    padding: 7px 11px;
    border: 1px solid rgba(177, 183, 193, 0.68);
    border-radius: 999px;
    color: #59616c;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 18px rgba(31, 38, 48, 0.12);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    animation: peerThinkingBubbleFade 2.6s ease forwards;
}

.conn-peer-thinking-bubble span {
    margin-right: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conn-peer-thinking-bubble i {
    width: 3px;
    height: 3px;
    flex: 0 0 3px;
    border-radius: 50%;
    background: currentColor;
    animation: peerThinkingDot 0.9s ease-in-out infinite alternate;
}

.conn-peer-thinking-bubble i:nth-of-type(2) { animation-delay: 0.15s; }
.conn-peer-thinking-bubble i:nth-of-type(3) { animation-delay: 0.3s; }

html[data-shell-theme="dark"] .conn-peer-thinking-bubble {
    border-color: rgba(255, 255, 255, 0.14);
    color: #d1d5db;
    background: rgba(42, 46, 53, 0.96);
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.28);
}

@keyframes peerThinkingBubbleFade {
    0% { opacity: 0; transform: translate(-50%, -38%) scale(0.96); }
    14%, 68% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -62%) scale(0.98); }
}

@keyframes peerThinkingDot {
    from { opacity: 0.32; transform: translateY(0); }
    to { opacity: 1; transform: translateY(-2px); }
}

/* Detail view: requirement alignment / development execution tabs. */
.conn-sidebar-body {
    gap: 14px;
}

.conn-stage-tabs {
    position: sticky;
    top: -14px;
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    gap: 5px;
    margin: -14px -2px 0;
    padding: 12px 2px 10px;
    background: color-mix(in srgb, var(--tool-panel-subtle) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.conn-stage-flow-arrow {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-self: center;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(127, 132, 140, 0.1);
    color: #7b838e;
}

.conn-stage-flow-arrow svg {
    width: 14px;
    height: 14px;
}

.conn-stage-tab {
    display: flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 1px solid rgba(190, 195, 202, 0.7);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5);
    color: #747c87;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.conn-stage-tab:hover {
    border-color: rgba(139, 146, 157, 0.72);
    background: rgba(255, 255, 255, 0.86);
    color: #3f4650;
}

.conn-stage-tab.is-active {
    border-color: #272b31;
    background: #272b31;
    color: #fff;
    box-shadow: 0 4px 12px rgba(27, 31, 38, 0.14);
}

.conn-stage-tab:focus-visible {
    outline: 2px solid rgba(99, 102, 241, 0.7);
    outline-offset: 2px;
}

.conn-stage-tab-index {
    display: inline-flex;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(127, 132, 140, 0.12);
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: 0.03em;
}

.conn-stage-tab.is-active .conn-stage-tab-index {
    background: rgba(255, 255, 255, 0.14);
}

.conn-stage-tab-label {
    min-width: 0;
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conn-sidebar-body > .conn-shared-context {
    flex: 0 0 auto;
    margin: 0;
}

.conn-shared-context .conn-sidebar-context-title {
    font-size: 13px;
}

.conn-sidebar-body > .conn-tab-panel {
    flex: 1 0 auto;
    min-height: 220px;
    margin-top: 0;
    box-sizing: border-box;
}

.conn-sidebar-body > .conn-tab-panel[hidden] {
    display: none !important;
}

.conn-sidebar-body > .conn-tab-panel::before {
    display: none;
}

html[data-shell-theme="dark"] .conn-stage-tabs {
    background: rgba(35, 37, 40, 0.96);
}

html[data-shell-theme="dark"] .conn-stage-tab {
    border-color: var(--shell-border);
    background: rgba(255, 255, 255, 0.025);
    color: var(--shell-muted);
}

html[data-shell-theme="dark"] .conn-stage-flow-arrow {
    background: rgba(255, 255, 255, 0.055);
    color: #a8aeb7;
}

html[data-shell-theme="dark"] .conn-stage-tab:hover {
    border-color: rgba(145, 150, 158, 0.72);
    background: rgba(255, 255, 255, 0.06);
    color: var(--shell-text);
}

html[data-shell-theme="dark"] .conn-stage-tab.is-active {
    border-color: rgba(228, 231, 235, 0.46);
    background: #111317;
    color: #f4f5f7;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24);
}

html[data-shell-theme="dark"] .conn-stage-tab.is-active .conn-stage-tab-index {
    background: rgba(255, 255, 255, 0.12);
}