:root {
        --page-bg: var(--novo-bg-page, #f4f7ff);
        --surface: rgba(255, 255, 255, 0.92);
        --surface-strong: var(--novo-bg-primary, #ffffff);
        --line-soft: var(--novo-border-light, rgba(199, 213, 241, 0.9));
        --line-hair: var(--novo-border, rgba(182, 197, 226, 0.72));
        --ink: var(--novo-text-primary, #1a1a2e);
        --ink-soft: var(--novo-text-secondary, #4a4a6a);
        --primary: var(--novo-primary, #0b4db3);
        --primary-accent: var(--novo-info, #3b82f6);
        --shadow-lg: var(--novo-shadow-md, 0 16px 36px rgba(40, 74, 140, 0.1));
        --shadow-sm: var(--novo-shadow-sm, 0 8px 18px rgba(40, 74, 140, 0.06));
        --right-rail-width: 336px;
        --right-rail-compact-width: 336px;
        --right-rail-standard-width: 400px;
        --right-rail-workbench-width: 480px;
        --side-rail-width: 176px;
        --splitter-hit-width: 14px;
        --composer-shell-height: 164px;
        --composer-shell-min-height: 132px;
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        min-height: 100%;
        background:
          radial-gradient(circle at left top, rgba(63, 111, 214, 0.14), transparent 24%),
          radial-gradient(circle at right 18%, rgba(45, 146, 136, 0.1), transparent 20%),
          linear-gradient(180deg, #fbfdff 0%, var(--page-bg) 100%);
        color: var(--ink);
        font-family: var(--novo-font-sans, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif);
      }

      body {
        min-height: 100dvh;
        overflow: hidden;
      }

      button,
      input,
      textarea {
        font: inherit;
      }

      .material-symbols-outlined {
        font-variation-settings: "FILL" 0, "wght" 420, "GRAD" 0, "opsz" 24;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1em;
        min-height: 1em;
      }

      .material-symbols-pending .material-symbols-outlined {
        visibility: hidden;
      }

      .material-symbols-ready .material-symbols-outlined,
      .material-symbols-fallback .material-symbols-outlined {
        visibility: visible;
      }

      .page-shell {
        width: min(100%, 1680px);
        height: 100dvh;
        margin: 0 auto;
        padding: 10px 12px 12px;
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        gap: 0;
        overflow: hidden;
      }

      .brand-row {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }

      .brand-badge {
        width: 34px;
        height: 34px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: linear-gradient(180deg, rgba(23, 59, 120, 0.12), rgba(63, 111, 214, 0.08));
        color: var(--primary);
        border: 1px solid rgba(23, 59, 120, 0.08);
      }

      .brand-title {
        min-width: 0;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: -0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .account-menu {
        position: relative;
        z-index: 620;
      }

      .utility-menu {
        position: relative;
        z-index: 620;
      }

      .ghost-icon-button,
      .member-anchor {
        border: 1px solid var(--line-soft);
        background: rgba(255, 255, 255, 0.96);
        border-radius: 999px;
        box-shadow: var(--shadow-sm);
      }

      .ghost-icon-button {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        padding: 0;
        color: var(--ink);
      }

      .member-anchor {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        padding: 5px 10px 5px 5px;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
      }

      .member-avatar {
        width: 30px;
        height: 30px;
        border-radius: 11px;
        display: grid;
        place-items: center;
        background: linear-gradient(180deg, rgba(23, 59, 120, 0.12), rgba(63, 111, 214, 0.18));
        color: var(--primary);
        font-size: 14px;
        font-weight: 800;
      }

      .member-copy {
        min-width: 0;
      }

      .member-name {
        font-size: 12px;
        font-weight: 800;
        line-height: 1.2;
      }

      .member-meta {
        margin-top: 2px;
        font-size: 10px;
        color: var(--ink-soft);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .account-menu-panel {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 3200;
        width: 172px;
        border-radius: 20px;
        border: 1px solid rgba(216, 226, 246, 0.96);
        background: rgba(255, 255, 255, 0.99);
        box-shadow: 0 18px 45px rgba(29, 55, 122, 0.14);
        padding: 8px;
        display: grid;
        gap: 6px;
      }

      .utility-menu-panel {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: auto;
        transform: none;
        z-index: 3200;
        width: 172px;
        border-radius: 20px;
        border: 1px solid rgba(216, 226, 246, 0.96);
        background: rgba(255, 255, 255, 0.99);
        box-shadow: 0 18px 45px rgba(29, 55, 122, 0.14);
        padding: 8px;
        display: grid;
        gap: 6px;
      }

      .account-menu-panel.is-hidden {
        display: none;
      }

      .utility-menu-panel.is-hidden {
        display: none;
      }

      .account-menu-summary {
        padding: 7px 8px 8px;
        border-bottom: 1px solid rgba(216, 226, 246, 0.8);
        display: grid;
        gap: 2px;
      }

      .utility-menu-summary {
        padding: 7px 8px 8px;
        border-bottom: 1px solid rgba(216, 226, 246, 0.8);
        display: grid;
        gap: 2px;
      }

      .account-menu-name {
        font-size: 11px;
        font-weight: 800;
      }

      .account-menu-meta {
        font-size: 10px;
        color: var(--ink-soft);
      }

      .utility-menu-name {
        font-size: 11px;
        font-weight: 800;
        color: var(--primary);
      }

      .utility-menu-meta {
        font-size: 10px;
        color: var(--ink-soft);
      }

      .account-menu-items {
        display: grid;
        gap: 2px;
      }

      .utility-menu-items {
        display: grid;
        gap: 2px;
      }

      .account-menu-item {
        display: flex;
        align-items: center;
        gap: 7px;
        width: 100%;
        border: none;
        background: transparent;
        border-radius: 12px;
        padding: 8px 8px;
        text-decoration: none;
        color: var(--ink-soft);
        font-size: 11px;
        font-weight: 700;
      }

      .account-menu-item:hover {
        background: rgba(248, 251, 255, 0.98);
        color: var(--primary);
      }

      .account-menu-item.is-danger {
        color: #d24949;
      }

      .account-menu-item.is-danger:hover {
        background: rgba(255, 242, 242, 0.98);
        color: #c13d3d;
      }

      .workspace-grid {
        display: grid;
        grid-template-columns: var(--side-rail-width) minmax(0, 1fr) var(--splitter-hit-width) var(--right-rail-width);
        gap: 0;
        min-height: 0;
        overflow: hidden;
        transition: grid-template-columns 220ms ease;
      }

      .panel {
        min-height: 0;
        overflow: hidden;
        border-radius: 22px;
        border: none;
        box-shadow: none;
      }

      .sidebar,
      .context-rail {
        padding: 8px 8px 10px;
        display: grid;
        gap: 10px;
        align-content: start;
        grid-auto-rows: max-content;
        overflow-y: auto;
        overflow-x: hidden;
        background: rgba(242, 245, 250, 0.96);
      }

      .context-rail {
        position: relative;
        z-index: 1400;
        overflow: visible;
        content-visibility: visible;
        contain-intrinsic-size: auto;
        transition: width 220ms ease, padding 160ms ease;
      }

      .page-shell.is-rail-workbench .context-rail {
        padding-inline: 10px;
      }

      .page-shell.is-rail-standard .context-rail,
      .page-shell.is-rail-compact .context-rail {
        padding-inline: 8px;
      }

      .conversation-shell {
        margin: 0 4px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--shadow-lg);
      }

      .section-card {
        border-radius: 16px;
        border: none;
        background: transparent;
        padding: 0;
      }

      .brand-card {
        padding: 3px 1px 9px;
        overflow: hidden;
        border-bottom: 1px solid var(--line-hair);
      }

      .brand-row {
        min-width: 0;
        gap: 9px;
      }

      .brand-badge {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
      }

      .brand-title {
        min-width: 0;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.01em;
        line-height: 1.08;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .panel-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .panel-title {
        font-size: 12px;
        font-weight: 800;
      }

      .panel-count {
        font-size: 11px;
        color: var(--ink-soft);
      }

      .category-strip {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 2px;
        align-items: end;
      }

      .category-tab {
        border: none;
        border-bottom: 1px solid transparent;
        background: transparent;
        color: var(--ink-soft);
        padding: 0 0 2px;
        font-size: 9px;
        font-weight: 800;
        line-height: 1.05;
        text-align: center;
        white-space: nowrap;
      }

      .category-tab.is-active {
        color: var(--primary);
        border-bottom-color: var(--primary-accent);
      }

      .robot-list {
        display: grid;
        gap: 4px;
        margin-top: 12px;
      }

      .robot-entry {
        width: 100%;
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr);
        align-items: center;
        gap: 4px;
        border-radius: 12px;
        border: none;
        background: transparent;
        padding: 6px 3px 6px 1px;
        text-align: left;
        color: inherit;
      }

      .robot-entry.is-active {
        background: rgba(228, 237, 255, 0.86);
      }

      .robot-entry.is-locked {
        opacity: 0.72;
        cursor: not-allowed;
      }

      .robot-avatar {
        width: 22px;
        height: 22px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        background: linear-gradient(180deg, rgba(23, 59, 120, 0.12), rgba(63, 111, 214, 0.08));
        color: var(--primary);
        font-size: 11px;
        font-weight: 800;
      }

      .robot-avatar.has-avatar-image,
      .member-avatar.has-avatar-image,
      .topic-robot-avatar.has-avatar-image,
      .robot-card-avatar.has-avatar-image {
        color: transparent;
      }

      .robot-entry-copy {
        min-width: 0;
      }

      .robot-entry-name-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px;
        min-width: 0;
      }

      .robot-entry-name-wrap {
        min-width: 0;
        display: block;
        flex: 1 1 auto;
      }

      .robot-entry-name {
        font-size: 11px;
        font-weight: 800;
        white-space: nowrap;
        flex: 0 0 auto;
        min-width: 1em;
        max-width: 100%;
        overflow: visible;
      }

      .robot-entry-role-inline {
        font-size: 9px;
        color: rgba(91, 109, 136, 0.78);
        display: none;
      }

      .robot-entry-grade {
        flex: 0 0 auto;
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
        color: rgba(75, 96, 132, 0.94);
        background: rgba(229, 236, 247, 0.96);
        border-radius: 999px;
        padding: 3px 6px;
      }

      .robot-entry-preview-row {
        margin-top: 2px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px;
      }

      .robot-entry-preview {
        font-size: 9px;
        color: var(--ink-soft);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .robot-entry-role-text {
        font-size: 9px;
        color: rgba(91, 109, 136, 0.82);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .robot-entry-meta-group {
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }

      .robot-entry-unread-badge,
      .history-topic-unread-badge {
        min-width: 15px;
        height: 15px;
        border-radius: 999px;
        padding: 0 4px;
        display: inline-grid;
        place-items: center;
        background: #df2f45;
        color: #fff;
        font-size: 9px;
        font-weight: 800;
        line-height: 1;
      }

      .history-topic-total-badge {
        min-width: 18px;
        height: 15px;
        border-radius: 999px;
        padding: 0 5px;
        display: inline-grid;
        place-items: center;
        background: rgba(74, 163, 96, 0.14);
        color: #2d7a43;
        font-size: 9px;
        font-weight: 800;
        line-height: 1;
      }

      .history-card {
        min-height: 0;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
      }

      .history-tree {
        min-height: 0;
        overflow: auto;
        display: grid;
        gap: 5px;
        margin-top: 2px;
        padding-right: 1px;
      }

      .history-header-actions {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .history-new-button {
        width: 24px;
        height: 24px;
        padding: 0;
        display: inline-grid;
        place-items: center;
        border-radius: 7px;
        border: 1px solid rgba(216, 226, 246, 0.78);
        background: rgba(255, 255, 255, 0.96);
        color: var(--primary);
      }

      .history-group {
        display: grid;
        gap: 2px;
      }

      .history-group-header {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 5px;
        border: none;
        background: transparent;
        padding: 3px 2px;
        text-align: left;
        color: inherit;
      }

      .history-group-header.is-active .history-group-name {
        color: var(--primary);
      }

      .history-group-copy {
        min-width: 0;
        display: flex;
        align-items: baseline;
        gap: 6px;
        white-space: nowrap;
      }

      .history-group-name {
        font-size: 11px;
        font-weight: 700;
        color: rgba(20, 35, 60, 0.66);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .history-group-role {
        font-size: 9px;
        color: rgba(91, 109, 136, 0.74);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1;
      }

      .history-group-toggle {
        color: rgba(91, 109, 136, 0.78);
        display: inline-grid;
        place-items: center;
      }

      .history-group-unread-dot {
        width: 5px;
        height: 5px;
        border-radius: 999px;
        background: #e54848;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.82);
        justify-self: center;
      }

      .history-topic-list {
        display: none;
        gap: 2px;
        margin-left: 0;
        padding-left: 0;
        max-height: 180px;
        overflow: auto;
      }

      .history-topic-list.is-open {
        display: grid;
      }

      .history-topic-item {
        width: 100%;
        border: none;
        background: transparent;
        color: rgba(91, 109, 136, 0.84);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        text-align: left;
        border-radius: 10px;
        padding: 3px 0 3px 0;
        font-size: 10px;
        line-height: 1.12;
      }

      .history-topic-item.is-active {
        background: rgba(233, 240, 255, 0.86);
        color: rgba(91, 109, 136, 0.84);
      }

      .history-topic-label {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .history-topic-time {
        font-size: 9px;
        font-weight: 700;
        color: rgba(91, 109, 136, 0.62);
        line-height: 1;
        white-space: nowrap;
      }

      .history-topic-meta {
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }

      .history-topic-item.is-pinned::before,
      .topic-tab.is-pinned::before {
        content: "•";
        display: inline-block;
        margin-right: 4px;
        color: var(--primary);
      }

      .conversation-shell {
        padding: 8px 10px 10px;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto auto;
        gap: 6px;
        overflow: hidden;
        border-radius: 0;
        box-shadow: none;
      }

      .conversation-topbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto minmax(178px, auto);
        align-items: center;
        gap: 10px;
        min-width: 0;
        padding: 2px 2px 6px;
      }

      .topic-robot-inline {
        min-width: 0;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: var(--ink);
      }

      .topic-robot-avatar {
        width: 20px;
        height: 20px;
        min-width: 20px;
        border-radius: 6px;
        display: grid;
        place-items: center;
        background: linear-gradient(180deg, rgba(23, 59, 120, 0.1), rgba(63, 111, 214, 0.16));
        color: var(--primary);
        font-size: 10px;
        font-weight: 800;
      }

      .topic-robot-copy {
        min-width: 0;
        display: inline-flex;
        align-items: baseline;
        gap: 6px;
        white-space: nowrap;
      }

      .topic-robot-name {
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
      }

      .topic-robot-role {
        font-size: 10px;
        color: var(--ink-soft);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .topic-tabs {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        overflow: visible;
        position: relative;
        padding-bottom: 1px;
      }

      .topic-tab {
        border: 1px solid rgba(216, 226, 246, 0.88);
        background: rgba(250, 252, 255, 0.96);
        color: rgba(91, 109, 136, 0.88);
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.64);
      }

      .topic-tab-code {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        padding: 0 7px;
        min-height: 18px;
        border-radius: 999px;
        background: rgba(235, 241, 251, 0.92);
        color: var(--primary);
        font-size: 10px;
        font-weight: 800;
      }

      .topic-tab-label {
        max-width: 168px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .conversation-topbar .history-new-button {
        width: 26px;
        height: 26px;
      }

      .knowledge-dock {
        min-width: 0;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        justify-self: end;
      }

      .knowledge-brain-button,
      .knowledge-clear-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 999px;
        border: 1px solid rgba(216, 226, 246, 0.94);
        background: rgba(248, 251, 255, 0.98);
        color: var(--primary);
        flex: 0 0 auto;
      }

      .knowledge-brain-button {
        background: linear-gradient(180deg, rgba(238, 247, 255, 0.98), rgba(247, 250, 255, 0.98));
        box-shadow: 0 8px 18px rgba(78, 111, 181, 0.1);
      }

      .knowledge-clear-button {
        width: 26px;
        height: 26px;
        color: var(--ink-soft);
      }

      .knowledge-clear-button:disabled {
        opacity: 0.36;
        cursor: default;
      }

      .knowledge-dock .toolbar-path {
        min-width: 92px;
        max-width: 240px;
        flex: 0 1 auto;
        font-size: 11px;
      }

      .topic-tab.is-active {
        color: var(--primary);
        border-color: rgba(91, 132, 224, 0.28);
        background: rgba(240, 246, 255, 0.98);
        box-shadow: 0 10px 22px rgba(78, 111, 181, 0.12);
      }

      .topic-tab.is-active .topic-tab-code {
        background: linear-gradient(135deg, rgba(90, 134, 235, 0.18) 0%, rgba(46, 95, 203, 0.14) 100%);
      }

      .topic-switcher-button {
        min-width: 0;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        border: 1px solid rgba(216, 226, 246, 0.92);
        background: rgba(248, 251, 255, 0.96);
        color: var(--ink-soft);
        border-radius: 999px;
        padding: 3px 9px;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
      }

      .topic-switcher-button.is-open {
        color: var(--primary);
        border-color: rgba(89, 132, 224, 0.3);
        background: rgba(239, 245, 255, 0.98);
      }

      .topic-switcher-panel {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        min-width: min(320px, 100%);
        width: min(360px, calc(100vw - 56px));
        max-height: min(460px, calc(100dvh - 210px));
        overflow: auto;
        border-radius: 14px;
        border: 1px solid rgba(216, 226, 246, 0.96);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 18px 36px rgba(40, 74, 140, 0.16);
        padding: 6px;
        display: grid;
        gap: 2px;
        z-index: 28;
      }

      .topic-switcher-header {
        padding: 6px 8px 4px;
      }

      .topic-switcher-summary {
        font-size: 10px;
        line-height: 1.4;
        color: var(--ink-soft);
      }

      .topic-switcher-panel.is-hidden {
        display: none;
      }

      .topic-switcher-item {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        text-align: left;
        border: none;
        border-radius: 10px;
        background: transparent;
        padding: 8px 10px;
        color: var(--ink);
      }

      .topic-switcher-item:hover {
        background: rgba(242, 247, 255, 0.96);
      }

      .topic-switcher-item.is-active {
        background: rgba(233, 240, 255, 0.92);
      }

      .topic-switcher-copy {
        min-width: 0;
      }

      .topic-switcher-title {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
      }

      .topic-switcher-code {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 34px;
        min-height: 18px;
        padding: 0 6px;
        border-radius: 999px;
        background: rgba(235, 241, 251, 0.92);
        color: var(--primary);
        font-size: 10px;
        font-weight: 800;
      }

      .topic-switcher-title-text {
        min-width: 0;
        font-size: 12px;
        font-weight: 800;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .topic-switcher-meta {
        margin-top: 2px;
        font-size: 10px;
        line-height: 1.4;
        color: var(--ink-soft);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .topic-switcher-badge {
        display: inline-flex;
        align-items: center;
        min-height: 18px;
        padding: 0 7px;
        border-radius: 999px;
        background: rgba(239, 245, 255, 0.98);
        color: var(--primary);
        font-size: 10px;
        font-weight: 800;
        white-space: nowrap;
      }

      .topic-switcher-badge.is-unread {
        background: rgba(255, 238, 238, 0.98);
        color: #c44848;
      }

      .topic-switcher-badge.is-total {
        background: rgba(236, 247, 238, 0.98);
        color: #2d7a43;
      }

      .topic-switcher-badge.is-capacity {
        background: rgba(239, 245, 255, 0.98);
        color: var(--primary);
      }

      .topic-switcher-trailing {
        min-width: 88px;
        display: grid;
        justify-items: end;
        gap: 5px;
      }

      .topic-switcher-badge-row {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        flex-wrap: wrap;
      }

      .topic-switcher-progress-label {
        font-size: 10px;
        font-weight: 800;
        color: var(--primary);
        white-space: nowrap;
      }

      .topic-switcher-progress-track {
        width: 62px;
        height: 6px;
        border-radius: 999px;
        overflow: hidden;
        background: rgba(224, 232, 246, 0.96);
        box-shadow: inset 0 0 0 1px rgba(212, 222, 241, 0.82);
      }

      .topic-switcher-progress-fill {
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #5a86eb 0%, #2e5fcb 68%, #f59e0b 100%);
      }

      .topic-context-menu {
        position: fixed;
        z-index: 50;
        min-width: 112px;
        border: 1px solid rgba(216, 226, 246, 0.92);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 12px 28px rgba(40, 74, 140, 0.14);
        border-radius: 10px;
        padding: 5px;
        display: grid;
        gap: 2px;
      }

      .topic-context-menu.is-hidden {
        display: none;
      }

      .topic-context-menu-button {
        width: 100%;
        border: none;
        background: transparent;
        color: var(--ink-soft);
        text-align: left;
        border-radius: 8px;
        padding: 7px 8px;
        font-size: 11px;
        font-weight: 700;
      }

      .topic-context-menu-button:hover {
        background: rgba(233, 240, 255, 0.9);
        color: var(--primary);
      }

      .topic-context-menu-button.is-danger {
        color: #c34c4c;
      }

      .topic-context-menu-button.is-danger:hover {
        background: rgba(255, 242, 242, 0.98);
        color: #c34c4c;
      }

      .primary-button,
      .secondary-button,
      .toolbar-button,
      .toolbar-clear-button,
      .copy-icon-button,
      .doc-link {
        font: inherit;
      }

      .primary-button,
      .secondary-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 999px;
        padding: 9px 13px;
        font-size: 12px;
        font-weight: 800;
        text-decoration: none;
        white-space: nowrap;
      }

      .primary-button {
        background: linear-gradient(180deg, var(--primary-accent), #2859bf);
        color: #ffffff;
        border: 1px solid rgba(40, 89, 191, 0.2);
        box-shadow: 0 10px 22px rgba(46, 92, 186, 0.14);
      }

      .primary-button.is-warning {
        background: linear-gradient(180deg, #f59e0b, #d97706);
        border-color: rgba(217, 119, 6, 0.22);
        box-shadow: 0 10px 22px rgba(217, 119, 6, 0.16);
      }

      .secondary-button {
        background: rgba(255, 255, 255, 0.96);
        color: var(--ink);
        border: 1px solid var(--line-soft);
      }

      .message-board {
        min-height: 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border-radius: 0;
        border: none;
        background: transparent;
        padding: 2px 2px 4px;
      }

      .message-stack {
        display: grid;
        gap: 12px;
      }

      .message.is-loading-shell {
        justify-self: stretch;
        max-width: 100%;
      }

      .loading-shell-card {
        border-radius: 18px;
        border: 1px solid rgba(196, 210, 238, 0.92);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.96));
        padding: 16px 18px;
        box-shadow: 0 10px 24px rgba(27, 60, 120, 0.06);
      }

      .loading-shell-title {
        font-size: 14px;
        font-weight: 800;
        color: var(--primary);
      }

      .loading-shell-copy {
        margin-top: 6px;
        font-size: 12px;
        line-height: 1.7;
        color: var(--ink-soft);
      }

      .loading-shell-lines {
        display: grid;
        gap: 8px;
        margin-top: 14px;
      }

      .loading-shell-line {
        display: block;
        height: 10px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(214, 224, 245, 0.78), rgba(255, 255, 255, 0.95), rgba(214, 224, 245, 0.78));
        background-size: 220% 100%;
        animation: loadingShellSweep 1.8s ease-in-out infinite;
      }

      .loading-shell-line.is-long {
        width: 92%;
      }

      .loading-shell-line.is-short {
        width: 56%;
      }

      .message {
        display: grid;
        max-width: min(960px, 97%);
      }

      .message.is-user {
        justify-self: end;
      }

      .message-bubble {
        border-radius: var(--novo-radius-2xl, 22px);
        padding: var(--novo-spacing-sm, 8px) var(--novo-spacing-md, 12px);
        font-size: var(--novo-text-base, 14px);
        line-height: 1.82;
        box-shadow: none;
      }

      .message.is-assistant .message-bubble {
        border-radius: 0;
        background: var(--novo-bg-primary, #ffffff);
        border: 1px solid var(--novo-border-light, rgba(216, 226, 246, 0.96));
        color: var(--novo-text-primary, #1a1a2e);
      }

      .message.is-user .message-bubble {
        border-top-right-radius: var(--novo-radius-md, 8px);
        background: var(--novo-bg-tertiary, #eef0f5);
        color: var(--novo-text-primary, #1a1a2e);
      }

      .message-bubble-body {
        white-space: pre-wrap;
        word-break: break-word;
      }
      .message-bubble-body .doc-markdown {
        white-space: normal;
      }
      .message-bubble-body table {
        border-collapse: collapse;
        margin: 4px 0;
        font-size: 13px;
        width: 100%;
      }
      .message-bubble-body th,
      .message-bubble-body td {
        border: 1px solid var(--border-color, #d0d7de);
        padding: 4px 8px;
        text-align: left;
      }
      .message-bubble-body th {
        background: var(--bg-muted, #f6f8fa);
        font-weight: 600;
      }
      .message-bubble-body pre {
        background: var(--bg-muted, #f6f8fa);
        border-radius: 4px;
        padding: 8px;
        overflow-x: auto;
        font-size: 12px;
        line-height: 1.4;
      }
      .message-bubble-body code {
        background: var(--bg-muted, #f6f8fa);
        border-radius: 3px;
        padding: 1px 4px;
        font-size: 12px;
      }
      .message-bubble-body blockquote {
        border-left: 3px solid var(--border-color, #d0d7de);
        padding-left: 8px;
        margin: 4px 0;
        color: var(--text-muted, #656d76);
      }

      .message-history-gate {
        width: 100%;
        display: grid;
        justify-items: start;
        gap: 8px;
        margin: 4px 0 10px;
        padding-bottom: 2px;
      }

      .message-history-gate-copy {
        font-size: 11px;
        line-height: 1.6;
        color: rgba(91, 109, 136, 0.88);
      }

      .message-history-gate-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: 1px solid rgba(216, 226, 246, 0.92);
        background: rgba(248, 251, 255, 0.98);
        color: var(--primary);
        border-radius: 999px;
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 700;
      }

      .message-history-gate-button[disabled] {
        opacity: 0.68;
        cursor: wait;
      }

      .message-inline-meta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-left: 10px;
        font-size: 11px;
        vertical-align: baseline;
        color: rgba(91, 109, 136, 0.82);
      }

      .message.is-user .message-inline-meta {
        color: rgba(255, 255, 255, 0.82);
      }

      .message-source-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-height: 18px;
        border-radius: 999px;
        padding: 0 7px;
        background: rgba(231, 235, 241, 0.96);
        color: rgba(98, 106, 119, 0.94);
        vertical-align: middle;
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
      }

      .message-source-badge.is-pc {
        background: rgba(224, 234, 255, 0.96);
        color: #1d4fb6;
      }

      .message-source-badge.is-h5 {
        background: rgba(219, 244, 236, 0.98);
        color: #0d7b5a;
      }

      .message-source-badge.is-wechat-app {
        background: rgba(224, 246, 252, 0.98);
        color: #0b6f8f;
      }

      .message-source-badge.is-wechat-bot {
        background: rgba(255, 236, 217, 0.98);
        color: #b15e0f;
      }

      .message-source-badge-text {
        white-space: nowrap;
      }

      .message-pending-indicator {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        font-size: 12px;
        font-weight: 700;
        color: #4f6f9f;
      }

      .message-pending-indicator.is-quiet {
        margin-top: 6px;
        gap: 0;
        color: rgba(63, 111, 214, 0.72);
      }

      .message-stage-indicator {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        font-size: 12px;
        font-weight: 700;
      }

      .message-stage-indicator.is-complete {
        color: #1e6a4a;
      }

      .message-unreplied-indicator {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        padding: 3px 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.18);
        color: rgba(255, 255, 255, 0.9);
        font-size: 11px;
        font-weight: 700;
      }

      .message-pending-dots {
        display: inline-flex;
        align-items: center;
        gap: 4px;
      }

      .message-pending-dots span {
        width: 5px;
        height: 5px;
        border-radius: 999px;
        background: rgba(63, 111, 214, 0.58);
        animation: pending-dot-pulse 1.05s ease-in-out infinite;
      }

      .message-pending-dots span:nth-child(2) {
        animation-delay: 0.16s;
      }

      .message-pending-dots span:nth-child(3) {
        animation-delay: 0.32s;
      }

      .message.is-typing-shell .message-bubble {
        min-width: 42px;
        padding: 10px 14px;
        box-shadow: 0 8px 22px rgba(31, 72, 150, 0.1);
      }

      .message.is-typing-shell.is-waiting-long .message-bubble {
        min-width: 38px;
        padding: 9px 13px;
      }

      .message-typing-dots {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-height: 10px;
      }

      .message-typing-dots span {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: rgba(63, 111, 214, 0.62);
        animation: pending-dot-pulse 1.05s ease-in-out infinite;
      }

      .message-typing-dots span:nth-child(2) {
        animation-delay: 0.16s;
      }

      .message-typing-dots span:nth-child(3) {
        animation-delay: 0.32s;
      }

      .message-wait-spinner {
        width: 13px;
        height: 13px;
        border-radius: 999px;
        border: 2px solid rgba(63, 111, 214, 0.2);
        border-top-color: rgba(63, 111, 214, 0.72);
        animation: waiting-spinner-spin 0.78s linear infinite;
        display: inline-block;
      }

      @keyframes pending-dot-pulse {
        0%,
        80%,
        100% {
          transform: translateY(0);
          opacity: 0.35;
        }
        40% {
          transform: translateY(-2px);
          opacity: 1;
        }
      }

      @keyframes waiting-spinner-spin {
        to {
          transform: rotate(360deg);
        }
      }

      .copy-icon-button {
        width: 16px;
        height: 16px;
        padding: 0;
        border: none;
        background: transparent;
        color: inherit;
        display: inline-grid;
        place-items: center;
      }

      .doc-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        border: 1px solid rgba(63, 111, 214, 0.18);
        background: rgba(233, 240, 255, 0.96);
        color: var(--primary);
        border-radius: 999px;
        padding: 6px 10px;
        font-size: 12px;
        font-weight: 700;
      }

      .message-attachment-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
      }

      .message-attachment-chip {
        min-width: 0;
        display: inline-grid;
        grid-template-columns: 22px minmax(0, 1fr);
        align-items: center;
        gap: 5px;
        max-width: 188px;
        padding: 4px 6px;
        border: 1px solid rgba(216, 226, 246, 0.92);
        background: rgba(248, 251, 255, 0.98);
        color: inherit;
        text-align: left;
      }

      .message.is-user .message-attachment-chip {
        border-color: rgba(255, 255, 255, 0.26);
        background: rgba(255, 255, 255, 0.14);
        color: #ffffff;
      }

      .message-attachment-thumb {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        background: rgba(23, 59, 120, 0.08);
        display: inline-grid;
        place-items: center;
        overflow: hidden;
        color: var(--primary);
      }

      .message.is-user .message-attachment-thumb {
        background: rgba(255, 255, 255, 0.18);
        color: #ffffff;
      }

      .message-attachment-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .message-attachment-copy {
        min-width: 0;
      }

      .message-attachment-title {
        display: block;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .composer-shell {
        border-radius: 0;
        border: 1px solid rgba(216, 226, 246, 0.72);
        background: rgba(255, 255, 255, 0.98);
        padding: var(--novo-spacing-sm, 8px) var(--novo-spacing-md, 12px);
        box-shadow: none;
        position: relative;
        min-height: var(--composer-shell-min-height);
        height: var(--composer-shell-height);
      }

      .composer-box {
        display: grid;
        gap: var(--novo-spacing-sm, 8px);
        min-height: 0;
      }

      .composer-attachment-strip {
        min-width: 0;
        flex: 0 1 420px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
        margin-left: 1px;
      }

      .composer-attachment-strip.is-hidden {
        display: none;
      }

      .voice-live-strip {
        position: absolute;
        left: 12px;
        right: 12px;
        top: 10px;
        z-index: 6;
        display: grid;
        gap: 4px;
        padding: 6px 10px;
        border: 1px solid rgba(208, 220, 244, 0.92);
        border-radius: 12px;
        background:
          linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(244, 248, 255, 0.96)),
          rgba(248, 251, 255, 0.96);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
        pointer-events: none;
      }

      .voice-live-strip.is-hidden {
        display: none;
      }

      .voice-live-strip.is-live {
        border-color: rgba(89, 132, 224, 0.34);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.88),
          0 0 0 1px rgba(89, 132, 224, 0.08);
      }

      .voice-live-strip.is-fallback {
        border-color: rgba(204, 176, 103, 0.34);
        background:
          linear-gradient(180deg, rgba(255, 252, 245, 0.98), rgba(255, 248, 236, 0.96)),
          rgba(255, 250, 241, 0.96);
      }

      .voice-live-strip.is-pending {
        border-color: rgba(119, 149, 204, 0.3);
      }

      .emoji-panel {
        display: grid;
        gap: 8px;
        padding: 8px 10px;
        border: 1px solid rgba(208, 220, 244, 0.92);
        border-radius: 12px;
        background: rgba(248, 251, 255, 0.98);
      }

      .emoji-panel.is-hidden {
        display: none;
      }

      .emoji-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: 11px;
        font-weight: 800;
        color: var(--primary);
      }

      .emoji-panel-tip {
        font-size: 10px;
        color: var(--ink-soft);
      }

      .emoji-panel-close {
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(208, 220, 244, 0.92);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.98);
        color: var(--ink-soft);
        cursor: pointer;
      }

      .emoji-panel-close:hover {
        color: var(--primary);
        border-color: rgba(89, 132, 224, 0.34);
      }

      .emoji-panel-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .emoji-chip {
        border: 1px solid rgba(216, 226, 246, 0.96);
        background: rgba(255, 255, 255, 0.98);
        color: var(--ink);
        border-radius: 999px;
        padding: 6px 10px;
        font-size: 18px;
        line-height: 1;
      }

      .voice-live-label-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .voice-live-label {
        font-size: 10px;
        font-weight: 800;
        color: var(--primary);
        letter-spacing: 0.08em;
      }

      .voice-live-mode {
        display: inline-flex;
        align-items: center;
        min-height: 18px;
        padding: 0 7px;
        border-radius: 999px;
        border: 1px solid rgba(182, 197, 226, 0.7);
        background: rgba(255, 255, 255, 0.76);
        font-size: 10px;
        font-weight: 700;
        color: var(--ink-soft);
      }

      .voice-live-text {
        font-size: 11px;
        line-height: 1.35;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 0;
      }

      .attachment-preview-grid {
        display: flex;
        align-items: center;
        gap: 5px;
        overflow-x: auto;
        width: 100%;
        padding-top: 1px;
        padding-bottom: 1px;
      }

      .attachment-preview-grid::-webkit-scrollbar {
        height: 4px;
      }

      .attachment-preview-item {
        min-width: 0;
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr) auto;
        align-items: center;
        gap: 5px;
        padding: 4px 5px;
        border-radius: 8px;
        border: 1px solid rgba(216, 226, 246, 0.96);
        background: rgba(248, 251, 255, 0.98);
        color: inherit;
        text-align: left;
        flex: 0 0 148px;
      }

      .attachment-preview-thumb {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        background: rgba(23, 59, 120, 0.08);
        display: grid;
        place-items: center;
        overflow: hidden;
        color: var(--primary);
      }

      .attachment-preview-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .attachment-preview-copy {
        min-width: 0;
      }

      .attachment-preview-title {
        font-size: 10px;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .attachment-preview-meta {
        margin-top: 1px;
        font-size: 8.5px;
        color: var(--ink-soft);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .attachment-preview-remove {
        width: 16px;
        height: 16px;
        border: none;
        background: transparent;
        color: rgba(91, 109, 136, 0.78);
        display: inline-grid;
        place-items: center;
        padding: 0;
        border-radius: 999px;
      }

      .attachment-preview-remove:hover {
        background: rgba(233, 240, 255, 0.88);
        color: var(--primary);
      }

      .composer-input-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 0;
      }

      .quick-library-panel {
        position: absolute;
        left: 12px;
        right: auto;
        width: min(300px, 24vw);
        min-width: 280px;
        max-width: calc(100vw - 32px);
        bottom: calc(100% + 10px);
        border-radius: 16px;
        border: 1px solid rgba(216, 226, 246, 0.96);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 22px 44px rgba(32, 63, 122, 0.16);
        padding: 10px;
        display: grid;
        gap: 8px;
        z-index: 8;
      }

      .quick-library-panel.is-hidden {
        display: none;
      }

      .quick-library-header {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 6px;
      }

      .quick-library-title {
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
      }

      .quick-library-close {
        width: 26px;
        height: 26px;
        border: 1px solid rgba(216, 226, 246, 0.96);
        background: rgba(248, 251, 255, 0.98);
        color: var(--ink-soft);
        border-radius: 999px;
        display: grid;
        place-items: center;
        padding: 0;
      }

      .quick-library-search {
        width: 100%;
        border-radius: 12px;
        border: 1px solid rgba(216, 226, 246, 0.96);
        background: rgba(248, 251, 255, 0.98);
        padding: 7px 10px;
        font-size: 12px;
        color: var(--ink);
        outline: none;
      }

      .quick-library-search-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
        align-items: center;
        min-width: 0;
      }

      .quick-library-search-button {
        border: 1px solid rgba(216, 226, 246, 0.96);
        background: rgba(248, 251, 255, 0.98);
        color: var(--primary);
        border-radius: 12px;
        padding: 7px 10px;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
      }

      .quick-library-meta {
        display: none;
      }

      .quick-library-list {
        max-height: 240px;
        overflow: auto;
        display: grid;
        gap: 0;
      }

      .quick-library-item {
        width: 100%;
        display: block;
        text-align: left;
        border: none;
        border-bottom: 1px solid rgba(216, 226, 246, 0.82);
        border-radius: 0;
        background: transparent;
        padding: 8px 2px;
      }

      .quick-library-item-title {
        font-size: 12px;
        font-weight: 800;
        color: var(--primary);
      }

      .quick-library-empty {
        border-radius: 16px;
        border: 1px dashed rgba(216, 226, 246, 0.96);
        padding: 14px 12px;
        font-size: 12px;
        color: var(--ink-soft);
        text-align: center;
      }

      .quick-library-empty.is-hidden {
        display: none;
      }

      .composer-input {
        width: 100%;
        min-height: clamp(52px, calc(var(--composer-shell-height) - 112px), 320px);
        max-height: clamp(52px, calc(var(--composer-shell-height) - 112px), 320px);
        resize: none;
        border: none;
        outline: none;
        background: transparent;
        font-size: var(--novo-text-base, 14px);
        line-height: 1.65;
        color: var(--ink);
        padding: 2px 0;
      }

      .quick-launch-button {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        border-radius: 999px;
        border: 1px solid rgba(216, 226, 246, 0.96);
        background: rgba(248, 251, 255, 0.98);
        color: var(--primary);
        display: grid;
        place-items: center;
        padding: 0;
      }

      .composer-input::placeholder {
        color: var(--novo-text-tertiary, #8e8ea0);
      }

      .composer-resize-handle {
        position: relative;
        height: 14px;
        border: none;
        border-radius: 999px;
        background: transparent;
        cursor: row-resize;
        touch-action: none;
      }

      .composer-resize-handle::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 64px;
        height: 4px;
        border-radius: 999px;
        background: rgba(182, 197, 226, 0.92);
        transform: translate(-50%, -50%);
        transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
      }

      .composer-resize-handle:hover::before,
      .composer-resize-handle:focus-visible::before,
      .composer-resize-handle.is-dragging::before {
        background: rgba(63, 111, 214, 0.92);
        box-shadow: 0 0 0 4px rgba(63, 111, 214, 0.12);
        transform: translate(-50%, -50%) scaleX(1.06);
      }

      .composer-resize-handle:focus-visible {
        outline: none;
      }

      .composer-footer {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "toolbar actions";
        align-items: center;
        justify-content: space-between;
        column-gap: var(--novo-spacing-md, 12px);
        min-width: 0;
      }

      .composer-actions {
        grid-area: actions;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
      }

      .attachment-capability-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
      }

      .attachment-capability-panel {
        position: absolute;
        left: 0;
        bottom: calc(100% + 8px);
        z-index: 30;
        display: none;
        pointer-events: none;
      }

      .attachment-capability-wrap:hover .attachment-capability-panel,
      .attachment-capability-wrap:focus-within .attachment-capability-panel {
        display: inline-flex;
      }

      .composer-status {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 18px;
        padding: 0 2px;
        font-size: 11px;
        line-height: 1.45;
        font-weight: 700;
        color: var(--ink-soft);
      }

      .composer-status.is-hidden {
        display: none;
      }

      .composer-status.is-warning {
        color: #a46b12;
      }

      .composer-status.is-danger {
        color: #c44848;
      }

      .composer-status.is-info {
        color: var(--primary);
      }

      .composer-status-copy {
        min-width: 0;
        flex: 1 1 auto;
      }

      .composer-status.is-pulsing .composer-status-copy {
        animation: status-chip-pulse 1.8s ease-in-out infinite;
      }

      .composer-status.is-danger.is-pulsing .composer-status-copy {
        animation-name: status-chip-pulse-danger;
      }

      .composer-status-action {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        border: 1px solid currentColor;
        border-radius: 999px;
        padding: 4px 10px;
        background: rgba(255, 255, 255, 0.92);
        color: inherit;
        font-size: 11px;
        font-weight: 800;
        cursor: pointer;
      }

      .composer-status-action:hover {
        background: rgba(255, 255, 255, 1);
      }

      .composer-status-action:disabled {
        cursor: default;
        opacity: 0.6;
      }

      .composer-inline-notice {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-top: 8px;
        padding: 10px 12px;
        border-radius: 16px;
        border: 1px solid rgba(219, 228, 245, 0.96);
        background: linear-gradient(180deg, rgba(247, 250, 255, 0.98), rgba(240, 246, 255, 0.96));
        box-shadow: 0 10px 22px rgba(39, 83, 170, 0.08);
      }

      .composer-inline-notice.is-hidden {
        display: none;
      }

      .composer-inline-notice.is-warning {
        border-color: rgba(232, 184, 87, 0.42);
        background: linear-gradient(180deg, rgba(255, 250, 239, 0.98), rgba(255, 246, 227, 0.96));
        box-shadow: 0 10px 22px rgba(214, 153, 29, 0.11);
      }

      .composer-inline-notice.is-info {
        border-color: rgba(101, 140, 224, 0.3);
      }

      @keyframes status-chip-pulse {
        0%,
        100% {
          opacity: 1;
          transform: translateZ(0);
          box-shadow: 0 0 0 0 rgba(183, 132, 18, 0);
        }
        50% {
          opacity: 0.74;
          transform: translateZ(0);
          box-shadow: 0 0 0 4px rgba(183, 132, 18, 0.08);
        }
      }

      @keyframes status-chip-pulse-danger {
        0%,
        100% {
          opacity: 1;
          transform: translateZ(0);
          box-shadow: 0 0 0 0 rgba(195, 76, 76, 0);
        }
        50% {
          opacity: 0.68;
          transform: translateZ(0);
          box-shadow: 0 0 0 4px rgba(195, 76, 76, 0.1);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .status-chip-compact-value.is-pulsing,
        .composer-status.is-pulsing .composer-status-copy,
        .composer-status.is-danger.is-pulsing .composer-status-copy {
          animation: none;
        }
      }

      .composer-inline-notice__copy {
        display: grid;
        gap: 4px;
        min-width: 0;
        flex: 1 1 auto;
      }

      .composer-inline-notice__title {
        font-size: 12px;
        font-weight: 800;
        color: var(--ink);
      }

      .composer-inline-notice__message {
        font-size: 11px;
        line-height: 1.55;
        color: var(--ink-soft);
      }

      .composer-inline-notice__actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
      }

      .composer-inline-notice__button {
        border: none;
        border-radius: 999px;
        padding: 7px 12px;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        cursor: pointer;
      }

      .composer-inline-notice__button.is-primary {
        background: linear-gradient(180deg, var(--primary-accent), #2859bf);
        color: #ffffff;
        box-shadow: 0 8px 18px rgba(40, 89, 191, 0.14);
      }

      .composer-inline-notice__button.is-secondary {
        background: rgba(255, 255, 255, 0.95);
        color: var(--ink);
        border: 1px solid rgba(212, 223, 241, 0.96);
      }

      .toolbar {
        grid-area: toolbar;
        display: flex;
        align-items: center;
        gap: 5px;
        flex-wrap: nowrap;
        min-width: 0;
        flex: 1 1 auto;
        position: relative;
        z-index: 2;
        transform: translate(var(--toolbar-offset-x, 0px), var(--toolbar-offset-y, 0px));
        transform-origin: left center;
        transition: box-shadow 120ms ease, background-color 120ms ease;
      }

      .toolbar.is-draggable {
        cursor: grab;
      }

.toolbar.is-draggable > * {
  cursor: inherit;
}
.toolbar.is-draggable > :is(button, input, label, a, [role="button"]) {
  cursor: pointer;
}

      .toolbar.is-detached {
        width: fit-content;
        flex: 0 0 auto;
        padding: 4px 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: var(--shadow-sm);
        backdrop-filter: blur(8px);
      }

      .toolbar.is-dragging {
        cursor: grabbing;
      }

      .toolbar-button,
      .toolbar-clear-button {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        border: 1px solid rgba(216, 226, 246, 0.96);
        background: rgba(248, 251, 255, 0.98);
        color: var(--ink-soft);
        padding: 0;
        width: 32px;
        height: 32px;
        justify-content: center;
        flex-shrink: 0;
      }

      .toolbar-path {
        min-width: 120px;
        max-width: 420px;
        flex: 0 1 420px;
        font-size: 12px;
        font-weight: 700;
        color: var(--ink-soft);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .send-button {
        min-width: 132px;
        align-self: center;
        flex-shrink: 0;
      }

      .composer-clear-button {
        min-width: 44px;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 999px;
      }

      .composer-workbench-button {
        min-width: 44px;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 999px;
      }

      .composer-workbench-button.is-active {
        border-color: rgba(20, 88, 184, 0.46);
        background: rgba(231, 239, 255, 0.92);
        color: #173b78;
      }

      .composer-clear-button:disabled {
        opacity: 0.46;
        cursor: default;
      }

      .splitter {
        position: relative;
        width: var(--splitter-hit-width);
        margin: 0;
        cursor: col-resize;
        touch-action: none;
      }

      .splitter::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        transform: translateX(-50%);
        border-radius: 999px;
        background: rgba(182, 197, 226, 0.8);
        transition: background-color 120ms ease, box-shadow 120ms ease;
      }

      .splitter:hover::before,
      .splitter.is-dragging::before {
        background: rgba(23, 59, 120, 0.42);
        box-shadow: 0 0 0 3px rgba(63, 111, 214, 0.08);
      }

      .context-card {
        border-radius: 0;
        border: none;
        background: transparent;
        padding: 2px 1px;
        display: grid;
        gap: 6px;
      }

      .context-card.has-divider {
        border-top: 1px solid var(--line-hair);
        padding-top: 10px;
        margin-top: 2px;
      }

      .context-rail-view {
        display: grid;
        gap: 10px;
        align-content: start;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
      }

      .context-rail-view.is-hidden {
        display: none;
      }

      .design-workbench-card {
        min-height: 0;
        height: calc(100dvh - 94px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      .page-shell.is-design-fullscreen .design-workbench-card {
        height: calc(100dvh - 38px);
      }

      .design-workbench-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 2px 0 10px;
        border-bottom: 1px solid rgba(188, 202, 229, 0.58);
      }

      .design-workbench-title {
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
        flex: 1 1 auto;
        color: #173b78;
        font-size: 13px;
        font-weight: 900;
      }

      .design-workbench-title-select-wrap {
        min-width: 0;
        max-width: 100%;
      }

      .design-workbench-title-select-wrap select {
        width: 100%;
        max-width: 100%;
      }

      .design-title-stack {
        position: relative;
        width: 100%;
        display: grid;
        gap: 8px;
      }

      .design-task-group-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
      }

      .design-task-group-select,
      .design-task-search-row input {
        min-width: 0;
        width: 100%;
        height: 38px;
        border: 1px solid rgba(148, 163, 184, 0.62);
        border-radius: 8px;
        background: #fff;
        color: #173b78;
        font-size: 13px;
        font-weight: 900;
        padding: 0 34px 0 12px;
        outline: none;
      }

      .design-task-create-button {
        height: 36px;
        border: 1px solid rgba(188, 202, 229, 0.78);
        border-radius: 999px;
        background: #fff;
        color: #173b78;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 0 11px 0 9px;
        font-size: 12px;
        font-weight: 900;
        white-space: nowrap;
        cursor: pointer;
      }

      .design-task-create-button .material-symbols-outlined {
        font-size: 18px;
      }

      .design-task-search-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        position: relative;
        color: #64748b;
      }

      .design-task-search-row .material-symbols-outlined {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        pointer-events: none;
      }

      .design-task-search-row input {
        border-radius: 12px;
        padding: 0 14px 0 38px;
      }

      .design-task-create-menu,
      .design-task-search-results {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        z-index: 2600;
        border: 1px solid rgba(188, 202, 229, 0.86);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 16px 36px rgba(40, 74, 140, 0.16);
        padding: 8px;
        display: grid;
        gap: 6px;
      }

      .design-task-create-title {
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
        padding: 2px 4px 4px;
      }

      .design-task-create-menu button,
      .design-task-search-results button {
        width: 100%;
        border: 1px solid rgba(226, 232, 240, 0.92);
        border-radius: 9px;
        background: #f8fbff;
        color: #173b78;
        padding: 8px 10px;
        display: grid;
        gap: 2px;
        text-align: left;
        cursor: pointer;
      }

      .design-task-create-menu button strong,
      .design-task-search-results button strong {
        font-size: 12px;
        line-height: 1.2;
      }

      .design-task-create-menu button small,
      .design-task-search-results button small {
        color: #64748b;
        font-size: 10px;
        line-height: 1.35;
      }

      .design-workbench-actions {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
      }

      .design-workbench-icon-button {
        width: 30px;
        height: 30px;
        border: 1px solid rgba(188, 202, 229, 0.72);
        border-radius: 999px;
        background: #fff;
        color: #355071;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .design-workbench-video-button {
        min-height: 30px;
        padding: 0 11px;
        border: 1px solid rgba(104, 137, 198, 0.46);
        border-radius: 999px;
        background: #edf4ff;
        color: #173b78;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
      }

      .design-workbench-video-button:hover {
        border-color: rgba(48, 93, 170, 0.68);
        background: #e0ebff;
      }

      .design-workbench-video-button.is-hidden {
        display: none;
      }

      .design-workbench-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        padding: 10px 0 8px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .page-shell.is-design-fullscreen .design-workbench-body {
        display: grid;
        grid-template-columns: minmax(340px, 1.25fr) minmax(230px, 0.75fr);
        align-items: start;
        gap: 12px;
      }

      .design-workbench-stage {
        border: 1px solid rgba(188, 202, 229, 0.72);
        border-radius: 12px;
        background: linear-gradient(180deg, #ffffff, #f7fbff);
        padding: 9px;
        display: grid;
        gap: 8px;
        min-width: 0;
      }

      .design-workbench-stage-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        color: #18345f;
        font-size: 12px;
        font-weight: 850;
      }

      .design-workbench-chip {
        border-radius: 999px;
        background: rgba(18, 132, 122, 0.1);
        color: #0f766e;
        padding: 3px 7px;
        font-size: 10px;
        font-weight: 850;
        white-space: nowrap;
      }

      .design-workbench-preview {
        position: relative;
        aspect-ratio: var(--design-preview-ratio, 1 / 1);
        width: 100%;
        min-height: 220px;
        max-height: min(46vh, 390px);
        border: 1px solid rgba(188, 202, 229, 0.72);
        border-radius: 12px;
        background:
          radial-gradient(circle at 52% 35%, rgba(18, 132, 122, 0.18), transparent 30%),
          linear-gradient(135deg, rgba(20, 88, 184, 0.12), rgba(255, 255, 255, 0.94));
        display: grid;
        place-items: center;
        overflow: hidden;
      }

      .page-shell.is-design-fullscreen .design-workbench-preview {
        aspect-ratio: 16 / 10;
        min-height: 300px;
      }

      .design-workbench-preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
      }

      .design-workbench-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(96px, 112px);
        gap: 10px;
        align-items: start;
        min-width: 0;
      }

      .design-preview-column {
        min-width: 0;
        display: grid;
        gap: 6px;
      }

      .design-preview-toolbar {
        position: relative;
        display: flex;
        justify-content: flex-start;
        min-height: 32px;
        z-index: 5;
      }

      .design-preview-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
        justify-content: flex-start;
        min-width: 0;
      }

      .design-preview-action {
        width: 28px;
        height: 28px;
        border: 1px solid rgba(188, 202, 229, 0.78);
        border-radius: 999px;
        background: #fff;
        color: #1458b8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
        transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease;
      }

      .design-preview-action:hover,
      .design-preview-action.is-touched {
        background: rgba(238, 245, 255, 0.96);
        border-color: rgba(20, 88, 184, 0.5);
        transform: translateY(-1px);
      }

      .design-preview-action:active {
        transform: translateY(0) scale(0.96);
      }

      .design-preview-action:disabled {
        cursor: not-allowed;
        opacity: 0.48;
        transform: none;
      }

      .design-preview-action .material-symbols-outlined {
        font-size: 16px;
      }

      .design-preview-action.is-danger {
        color: #b42318;
      }

      .design-preview-export-menu {
        position: absolute;
        left: 0;
        top: calc(100% + 6px);
        z-index: 12;
        min-width: 176px;
        max-width: min(260px, calc(100vw - 48px));
        border: 1px solid rgba(188, 202, 229, 0.86);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
        padding: 6px;
        display: none;
        gap: 4px;
      }

      .design-preview-toolbar.is-export-menu-open .design-preview-export-menu {
        display: grid;
      }

      .design-export-preset {
        width: 100%;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #172033;
        padding: 7px 8px;
        display: grid;
        gap: 2px;
        text-align: left;
        cursor: pointer;
      }

      .design-export-preset:hover,
      .design-export-preset.is-touched {
        background: rgba(238, 245, 255, 0.95);
      }

      .design-export-preset span {
        min-width: 0;
        font-size: 11px;
        font-weight: 900;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .design-export-preset small {
        min-width: 0;
        color: #64748b;
        font-size: 10px;
        font-weight: 800;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .design-delete-popover {
        position: absolute;
        left: 0;
        top: calc(100% + 6px);
        z-index: 13;
        width: min(220px, calc(100vw - 48px));
        border: 1px solid rgba(188, 202, 229, 0.9);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
        padding: 10px;
        display: grid;
        gap: 6px;
      }

      .design-delete-popover-title {
        color: #172033;
        font-size: 13px;
        font-weight: 950;
        line-height: 1.2;
      }

      .design-delete-popover-text {
        color: #64748b;
        font-size: 11px;
        font-weight: 800;
        line-height: 1.35;
      }

      .design-delete-popover-actions {
        display: flex;
        justify-content: flex-end;
        gap: 6px;
      }

      .design-delete-popover-action {
        border: 1px solid rgba(188, 202, 229, 0.9);
        border-radius: 999px;
        background: #fff;
        color: #18345f;
        padding: 6px 10px;
        font-size: 11px;
        font-weight: 900;
        line-height: 1;
        cursor: pointer;
      }

      .design-delete-popover-action.is-danger {
        border-color: rgba(180, 35, 24, 0.26);
        background: #b42318;
        color: #fff;
      }

      .design-preview-loading-badge {
        position: absolute;
        left: 10px;
        top: 10px;
        z-index: 2;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.72);
        color: #fff;
        padding: 5px 8px;
        font-size: 10px;
        font-weight: 850;
        pointer-events: none;
      }

      .design-preview-loading-badge.is-delete {
        background: rgba(180, 35, 24, 0.74);
      }

      .design-thumb-rail {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        max-height: min(60vh, 560px);
        overflow-y: auto;
        padding: 2px 3px 2px 2px;
        min-width: 0;
      }

      .design-thumb-card {
        min-width: 0;
        border: 1px solid rgba(188, 202, 229, 0.72);
        border-radius: 8px;
        background: #fff;
        color: #18345f;
        padding: 4px;
        display: grid;
        gap: 3px;
        cursor: pointer;
        min-height: 86px;
      }

      .design-thumb-card.is-active {
        border-color: rgba(20, 88, 184, 0.82);
        box-shadow: 0 0 0 2px rgba(20, 88, 184, 0.13);
      }

      .design-thumb-card.is-missing {
        border-style: dashed;
        background: rgba(248, 251, 255, 0.78);
      }

      .design-thumb-card.is-loading .design-thumb-image {
        background: linear-gradient(90deg, rgba(238, 245, 255, 0.75), rgba(255, 255, 255, 0.95), rgba(238, 245, 255, 0.75));
        background-size: 220% 100%;
        animation: design-skeleton-shimmer 1.2s ease-in-out infinite;
      }

      .design-thumb-image {
        aspect-ratio: 1 / 1;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        border-radius: 6px;
        background: rgba(238, 245, 255, 0.86);
        display: grid;
        place-items: center;
        overflow: hidden;
        box-sizing: border-box;
      }

      .design-thumb-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
      }

      .design-thumb-title {
        min-width: 0;
        color: #173b78;
        font-size: 10px;
        font-weight: 900;
        line-height: 1.18;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .design-thumb-meta {
        color: #64748b;
        font-size: 9px;
        font-weight: 800;
        line-height: 1;
        text-align: center;
      }

      .design-thumb-skeleton {
        width: 58%;
        height: 42%;
        border-radius: 10px;
        background: rgba(203, 213, 225, 0.35);
      }

      @keyframes design-skeleton-shimmer {
        0% {
          background-position: 120% 0;
        }
        100% {
          background-position: -120% 0;
        }
      }

      .design-media-placeholder,
      .design-media-placeholder-inline {
        width: 100%;
        height: 100%;
        min-height: 48px;
        display: grid;
        place-items: center;
        gap: 3px;
        color: #64748b;
        background: rgba(238, 245, 255, 0.86);
        font-size: 10px;
        font-weight: 800;
        text-align: center;
      }

      .design-media-placeholder .material-symbols-outlined {
        font-size: 22px;
      }

      .design-current-info {
        min-width: 0;
        border-radius: 12px;
        background: rgba(238, 245, 255, 0.72);
        padding: 8px 10px;
        display: grid;
        gap: 7px;
      }

      .design-current-info-main {
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .design-current-info-main strong {
        min-width: 0;
        color: #172033;
        font-size: 12px;
        font-weight: 950;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .design-current-info-main span {
        border-radius: 999px;
        background: #fff;
        color: #1458b8;
        padding: 3px 7px;
        font-size: 10px;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
      }

      .design-current-info-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
      }

      .design-current-info-grid span {
        min-width: 0;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.78);
        color: #18345f;
        padding: 5px 6px;
        display: grid;
        gap: 2px;
        font-size: 10px;
        font-weight: 900;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .design-current-info-grid em {
        color: #64748b;
        font-style: normal;
        font-size: 9px;
        font-weight: 850;
      }

      .design-version-number-strip {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 5px;
        flex-wrap: wrap;
        color: #172033;
        font-size: 11px;
        font-weight: 850;
      }

      .design-version-number-strip > span {
        margin-right: 1px;
        font-weight: 900;
      }

      .design-version-number {
        min-width: 22px;
        height: 22px;
        border: 1px solid transparent;
        border-radius: 999px;
        background: transparent;
        color: #172033;
        font: inherit;
        font-weight: 850;
        cursor: pointer;
      }

      .design-version-number:hover {
        border-color: rgba(20, 88, 184, 0.42);
        background: rgba(238, 245, 255, 0.9);
        color: #1458b8;
      }

      .design-version-number.is-active {
        border-color: rgba(20, 88, 184, 0.7);
        background: rgba(20, 88, 184, 0.1);
        color: #1458b8;
        box-shadow: 0 0 0 2px rgba(20, 88, 184, 0.08);
        font-weight: 950;
      }

      .design-info-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        align-items: start;
      }

      .design-info-panel {
        min-width: 0;
        border: 1px solid rgba(188, 202, 229, 0.68);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.92);
        padding: 10px;
        display: grid;
        gap: 8px;
        align-content: start;
      }

      .design-info-panel + .design-info-panel {
        margin-top: 2px;
      }

      .design-info-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-width: 0;
      }

      .design-info-head h3 {
        margin: 0;
        color: #173b78;
        font-size: 13px;
        font-weight: 950;
        line-height: 1.2;
      }

      .design-inline-edit {
        border: 1px solid rgba(20, 88, 184, 0.34);
        border-radius: 999px;
        background: #1458b8;
        color: #fff;
        padding: 5px 9px;
        font-size: 11px;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
      }

      .design-inline-edit.is-light {
        background: #fff;
        color: #1458b8;
      }

      .design-description-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
      }

      .design-description-table tbody {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
      }

      .design-description-table tr {
        min-width: 0;
        border-radius: 8px;
        background: rgba(238, 245, 255, 0.68);
        padding: 7px 8px;
        display: grid;
        grid-template-columns: minmax(58px, 92px) minmax(0, 1fr);
        gap: 8px;
        align-items: start;
      }

      .design-description-table th,
      .design-description-table td {
        padding: 0;
        border: 0;
        text-align: left;
        vertical-align: top;
      }

      .design-description-table th {
        color: #64748b;
        font-size: 10px;
        font-weight: 900;
        line-height: 1.25;
      }

      .design-description-table td {
        min-width: 0;
        color: #172033;
        font-size: 11px;
        font-weight: 850;
        line-height: 1.45;
        word-break: break-word;
        white-space: pre-wrap;
      }

      .design-prompt-actions {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        flex-wrap: wrap;
      }

      .design-prompt-editor {
        width: 100%;
        min-height: 84px;
        max-height: 280px;
        resize: vertical;
        border: 1px solid rgba(188, 202, 229, 0.78);
        border-radius: 10px;
        background: #fff;
        color: #172033;
        padding: 9px 10px;
        font-size: 12px;
        line-height: 1.55;
        outline: none;
        overflow-y: auto;
      }

      .design-prompt-rule-viewer {
        width: 100%;
        min-height: 0;
        margin: 0;
        border: 1px solid rgba(188, 202, 229, 0.78);
        border-radius: 10px;
        background: #fff;
        color: #172033;
        padding: 12px 13px;
        font-size: 12px;
        line-height: 1.6;
        outline: none;
        overflow: visible;
        white-space: pre-wrap;
      }

      .design-supplement-block {
        display: grid;
        gap: 6px;
        padding-top: 2px;
      }

      .design-supplement-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        color: #173b78;
      }

      .design-supplement-head span {
        font-size: 12px;
        font-weight: 950;
        line-height: 1.2;
      }

      .design-supplement-input-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        align-items: stretch;
      }

      .design-supplement-actions {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        min-width: 0;
        white-space: nowrap;
      }

      .design-supplement-voice-chip {
        border: 1px solid rgba(188, 202, 229, 0.9);
        border-radius: 999px;
        background: #fff;
        color: #1458b8;
        padding: 4px 8px;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 10px;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
      }

      .design-supplement-voice-chip.is-recording,
      .design-supplement-voice-chip.is-touched {
        background: rgba(255, 238, 238, 0.98);
        border-color: rgba(227, 87, 87, 0.28);
        color: #cf3c3c;
      }

      .design-supplement-editor {
        width: 100%;
        height: 88px;
        min-height: 88px;
        max-height: 120px;
        resize: none;
        border: 1px solid rgba(188, 202, 229, 0.78);
        border-radius: 10px;
        background: rgba(248, 251, 255, 0.96);
        color: #172033;
        padding: 8px 9px;
        font-size: 12px;
        line-height: 1.45;
        outline: none;
        overflow-y: auto;
        overflow-x: hidden;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-break: break-word;
        box-sizing: border-box;
      }

      .design-supplement-merge-button {
        border: 1px solid rgba(20, 88, 184, 0.28);
        border-radius: 999px;
        background: #fff;
        color: #1458b8;
        padding: 4px 8px;
        font-size: 10px;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
      }

      .design-empty-info {
        min-height: 76px;
        border-radius: 10px;
        background: rgba(238, 245, 255, 0.68);
        color: #64748b;
        display: grid;
        place-items: center;
        font-size: 12px;
        font-weight: 900;
      }

      .design-save-latest {
        border-radius: 10px;
        background: rgba(20, 88, 184, 0.08);
        color: #173b78;
        padding: 7px 9px;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        font-weight: 850;
      }

      .design-save-latest a {
        margin-left: auto;
        color: #1458b8;
        font-weight: 950;
        text-decoration: none;
      }

      .design-standard-modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 29000;
        background: rgba(15, 23, 42, 0.24);
        display: grid;
        place-items: center;
        padding: 24px;
      }

      .design-standard-modal {
        width: min(920px, 92vw);
        max-height: min(820px, 90vh);
        border: 1px solid rgba(188, 202, 229, 0.82);
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 24px 80px rgba(15, 23, 42, 0.22);
        padding: 14px;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: 12px;
        overflow: hidden;
      }

      .design-standard-modal.design-prompt-rule-modal {
        width: min(760px, 92vw);
        max-height: 94vh;
        grid-template-rows: auto auto auto;
        overflow: auto;
      }

      .design-standard-modal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(188, 202, 229, 0.58);
        cursor: move;
      }

      .design-standard-modal-title {
        color: #173b78;
        font-size: 16px;
        font-weight: 950;
      }

      .design-standard-modal-close {
        width: 30px;
        height: 30px;
        border: 1px solid rgba(188, 202, 229, 0.78);
        border-radius: 999px;
        background: #fff;
        color: #173b78;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .design-standard-table {
        min-height: 0;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        display: block;
        overflow: auto;
      }

      .design-standard-table tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .design-standard-table tr {
        min-width: 0;
        border: 1px solid rgba(226, 232, 240, 0.92);
        border-radius: 11px;
        background: rgba(248, 251, 255, 0.86);
        padding: 9px;
        display: grid;
        gap: 6px;
      }

      .design-standard-table tr:has(textarea),
      .design-standard-table tr:has(.design-standard-options) {
        grid-column: 1 / -1;
      }

      .design-standard-table tr.design-standard-paired-row {
        grid-column: 1 / -1;
      }

      .design-standard-table th,
      .design-standard-table td {
        padding: 0;
        border: 0;
        text-align: left;
      }

      .design-standard-table th {
        color: #173b78;
        font-size: 12px;
        font-weight: 950;
        line-height: 1.2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .design-standard-field-asset {
        flex: 0 0 auto;
        border: 1px solid rgba(20, 88, 184, 0.22);
        border-radius: 999px;
        background: #fff;
        color: #1458b8;
        font-size: 11px;
        font-weight: 900;
        line-height: 1;
        padding: 5px 8px;
        cursor: pointer;
      }

      .design-standard-field-asset:hover {
        border-color: rgba(20, 88, 184, 0.45);
        background: #edf5ff;
      }

      .design-standard-field-assets {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: flex-end;
      }

      .design-standard-asset-value {
        margin-top: 7px;
      }

      .design-standard-asset-thumb {
        display: block;
        width: 54px;
        height: 54px;
        object-fit: cover;
        border: 1px solid rgba(188, 202, 229, 0.78);
        border-radius: 8px;
        background: #fff;
        margin-top: 7px;
      }

      .design-standard-asset-thumb.is-wide {
        width: 118px;
        height: 54px;
      }

      .design-standard-field-pair {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr);
        gap: 10px;
        align-items: stretch;
      }

      .design-standard-field-block {
        min-width: 0;
        display: grid;
        gap: 5px;
      }

      .design-standard-field-block > span {
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
      }

      .design-standard-table input,
      .design-standard-table textarea,
      .design-standard-table select {
        width: 100%;
        border: 1px solid rgba(188, 202, 229, 0.78);
        border-radius: 9px;
        background: #fff;
        color: #172033;
        padding: 8px 9px;
        font-size: 12px;
        line-height: 1.45;
        outline: none;
      }

      .design-standard-table textarea {
        min-height: 82px;
        resize: vertical;
      }

      .design-standard-options {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .design-standard-option {
        border: 1px solid rgba(188, 202, 229, 0.78);
        border-radius: 999px;
        background: #fff;
        color: #173b78;
        padding: 6px 9px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        font-weight: 850;
        cursor: pointer;
      }

      .design-standard-option input {
        width: auto;
      }

      .design-standard-option.is-checked {
        border-color: rgba(20, 88, 184, 0.55);
        background: rgba(231, 239, 255, 0.95);
      }

      .design-standard-modal-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        padding-top: 10px;
        border-top: 1px solid rgba(188, 202, 229, 0.58);
      }

      .design-standard-modal-action {
        border: 1px solid rgba(188, 202, 229, 0.78);
        border-radius: 999px;
        background: #fff;
        color: #173b78;
        padding: 8px 14px;
        font-size: 12px;
        font-weight: 950;
        cursor: pointer;
      }

      .design-standard-modal-action.is-primary {
        border-color: rgba(20, 88, 184, 0.55);
        background: #1458b8;
        color: #fff;
      }

      .design-generate-confirm-backdrop {
        background: rgba(15, 23, 42, 0.1);
      }

      .design-generate-confirm-modal {
        width: min(560px, 92vw);
        max-height: min(620px, 82vh);
      }

      .design-generate-confirm-modal .design-standard-table tbody {
        grid-template-columns: 1fr;
      }

      .design-generate-reference-note {
        border: 1px solid rgba(188, 202, 229, 0.78);
        border-radius: 9px;
        background: rgba(248, 251, 255, 0.92);
        color: #334155;
        padding: 9px 10px;
        font-size: 12px;
        font-weight: 850;
        line-height: 1.45;
        word-break: break-word;
      }

      @media (max-width: 1320px) {
        .design-workbench-hero {
          grid-template-columns: minmax(0, 1fr);
        }

        .design-thumb-rail {
          grid-template-columns: repeat(6, minmax(86px, 1fr));
          max-height: none;
          overflow-x: auto;
          overflow-y: hidden;
          padding-bottom: 4px;
        }

        .design-thumb-card {
          min-width: 86px;
        }

        .design-info-grid {
          grid-template-columns: minmax(0, 1fr);
        }
      }

      .design-global-preview-zoom {
        position: fixed;
        inset: 0;
        z-index: 30000;
        background: rgba(15, 23, 42, 0.32);
      }

      .design-global-preview-zoom-inner {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(920px, 92vw);
        height: min(760px, 88vh);
        border: 1px solid rgba(188, 202, 229, 0.78);
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
        padding: 12px;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 10px;
      }

      .design-global-preview-zoom-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border-bottom: 1px solid rgba(188, 202, 229, 0.58);
        padding-bottom: 9px;
        cursor: move;
      }

      .design-global-preview-zoom-title {
        min-width: 0;
        color: #18345f;
        font-size: 15px;
        font-weight: 900;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .design-global-preview-zoom-close {
        width: 28px;
        height: 28px;
        border: 1px solid rgba(188, 202, 229, 0.78);
        border-radius: 999px;
        background: #fff;
        color: #173b78;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .design-global-preview-zoom-body {
        min-height: 0;
        display: grid;
        place-items: center;
        overflow: auto;
        overscroll-behavior: contain;
      }

      .design-global-preview-zoom-body img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
      }

      .design-workbench-steps {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
      }

      .page-shell.is-design-fullscreen .design-workbench-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .design-workbench-step {
        min-height: 28px;
        border-radius: 8px;
        background: rgba(231, 239, 255, 0.72);
        color: #46628d;
        font-size: 10px;
        font-weight: 850;
        display: grid;
        place-items: center;
      }

      .design-workbench-step.is-active {
        background: rgba(18, 132, 122, 0.12);
        color: #0f766e;
      }

      .design-workbench-footer {
        flex: 0 0 auto;
        display: grid;
        gap: 7px;
        margin-top: auto;
        padding: 10px 0 0;
        border-top: 1px solid rgba(188, 202, 229, 0.58);
        background: rgba(248, 251, 255, 0.96);
        position: sticky;
        bottom: 0;
        z-index: 6;
      }

      .design-footer-process {
        display: grid;
        gap: 7px;
        min-width: 0;
        padding: 8px 10px;
        border: 1px solid rgba(188, 202, 229, 0.72);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.82);
      }

      .design-footer-process.is-hidden {
        display: none;
      }

      .design-footer-process-line {
        min-width: 0;
        min-height: 32px;
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) minmax(0, 0.72fr) auto;
        align-items: center;
        gap: 8px;
        color: #27456f;
      }

      .design-move-output-select {
        width: 100%;
        min-height: 34px;
        border: 1px solid rgba(188, 202, 229, 0.9);
        border-radius: 8px;
        background: #fff;
        color: #173b78;
        font-size: 12px;
        font-weight: 850;
        padding: 5px 8px;
      }

      .design-footer-process-line > .material-symbols-outlined {
        width: 32px;
        height: 32px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        background: rgba(20, 88, 184, 0.1);
        color: #1458b8;
        font-size: 18px;
      }

      .design-footer-process-line strong,
      .design-footer-process-line span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .design-footer-process-line strong {
        font-size: 12px;
        font-weight: 900;
      }

      .design-footer-process-line span {
        font-size: 11px;
        color: #60718f;
      }

      .design-footer-process-line time {
        min-width: 38px;
        text-align: right;
        font-size: 10px;
        font-weight: 850;
        color: #7b8ba5;
        font-variant-numeric: tabular-nums;
      }

      .design-footer-process-thumb {
        width: 32px;
        height: 32px;
        border-radius: 999px;
        object-fit: cover;
        border: 2px solid rgba(20, 88, 184, 0.18);
        box-shadow: 0 5px 16px rgba(20, 88, 184, 0.16);
        animation: design-process-spin 1.6s linear infinite;
      }

      .design-footer-progress {
        height: 5px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(188, 202, 229, 0.42);
      }

      .design-footer-progress span {
        display: block;
        height: 100%;
        min-width: 10%;
        border-radius: inherit;
        background: linear-gradient(90deg, #1d64d8, #22a7a1);
        transition: width 0.32s ease;
      }

      @keyframes design-process-spin {
        to {
          transform: rotate(360deg);
        }
      }

      .page-shell.is-design-fullscreen .design-workbench-footer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .design-workbench-action {
        width: 100%;
        border: 1px solid rgba(188, 202, 229, 0.76);
        border-radius: 10px;
        background: #fff;
        color: #29425f;
        padding: 9px 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 850;
      }

      .design-workbench-action.is-primary {
        border-color: rgba(20, 88, 184, 0.5);
        background: #1458b8;
        color: #fff;
      }

      .context-card-title {
        font-size: 12px;
        font-weight: 800;
      }

      .context-card-heading {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--primary);
      }

      .context-card-heading .material-symbols-outlined {
        font-size: 24px;
      }

      .session-card-inner {
        border-radius: 12px;
        border: none;
        background: rgba(255, 255, 255, 0.82);
        padding: 9px 8px 10px;
        display: grid;
        gap: 8px;
      }

      .session-card-top {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
      }

      .robot-card-avatar {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: linear-gradient(180deg, rgba(23, 59, 120, 0.1), rgba(63, 111, 214, 0.16));
        color: var(--primary);
        font-size: 13px;
        font-weight: 800;
      }

      .robot-card-name {
        font-size: 17px;
        font-weight: 800;
        line-height: 1.15;
      }

      .robot-card-role {
        margin-top: 2px;
        font-size: 12px;
        color: var(--ink-soft);
      }

      .robot-grade {
        display: inline-flex;
        align-items: center;
        color: var(--primary);
        font-size: 14px;
        font-weight: 800;
        white-space: nowrap;
        letter-spacing: 0.04em;
      }

      .session-card-badge-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
      }

      .session-card-body {
        display: grid;
        gap: 5px;
        justify-items: center;
        text-align: center;
      }

      .session-card-identity {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 0;
      }

      .session-card-name {
        font-size: 13px;
        font-weight: 800;
        line-height: 1.15;
      }

      .session-card-role {
        font-size: 9px;
        color: var(--primary);
        font-weight: 700;
        line-height: 1;
      }

      .session-card-meta {
        font-size: 9px;
        color: var(--ink-soft);
        line-height: 1.1;
        font-weight: 700;
        word-break: break-word;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
      }

      .session-card-meta.is-healthy {
        color: #1c8c53;
      }

      .session-card-meta.is-warning {
        color: #b78412;
      }

      .session-card-meta.is-danger {
        color: #c34c4c;
      }

      .session-card-status-strip,
      .topic-robot-status-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
      }

      .session-card-status-strip {
        justify-content: center;
      }

      .status-chip-compact {
        display: inline-flex;
        align-items: center;
        font-size: 9px;
        font-weight: 700;
        line-height: 1;
      }

      .status-chip-compact-value {
        display: inline-flex;
        align-items: center;
        padding: 3px 8px;
        border-radius: 999px;
        transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
      }

      .status-chip-compact-value.is-healthy {
        color: #1c8c53;
        background: rgba(28, 140, 83, 0.08);
      }

      .status-chip-compact-value.is-warning {
        color: #b78412;
        background: rgba(183, 132, 18, 0.1);
      }

      .status-chip-compact-value.is-danger {
        color: #c34c4c;
        background: rgba(195, 76, 76, 0.1);
      }

      .status-chip-compact-value.is-pulsing {
        animation: status-chip-pulse 1.8s ease-in-out infinite;
      }

      .status-chip-compact-value.is-danger.is-pulsing {
        animation-name: status-chip-pulse-danger;
      }

      .key-value-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .key-value-item {
        display: grid;
        gap: 3px;
      }

      .key-value-item.is-wide {
        grid-column: 1 / -1;
      }

      .key-value-label {
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(91, 109, 136, 0.74);
      }

      .key-value-value {
        font-size: 12px;
        line-height: 1.6;
        font-weight: 700;
      }

      .doc-viewer {
        min-height: 0;
        height: 100%;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 10px;
      }

      .doc-viewer-header {
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 10px;
      }

      .doc-viewer-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        width: 100%;
        gap: 8px;
      }

      .doc-viewer-action {
        border: 1px solid rgba(216, 226, 246, 0.96);
        background: rgba(248, 251, 255, 0.98);
        color: var(--ink-soft);
        border-radius: 999px;
        padding: 6px 10px;
        font-size: 11px;
        font-weight: 700;
        min-height: 32px;
        width: 100%;
        text-align: center;
      }

      .doc-viewer-action:hover {
        border-color: rgba(176, 195, 231, 0.96);
        background: rgba(239, 245, 255, 0.98);
        color: var(--primary);
      }

      .doc-viewer-body {
        min-height: 0;
        overflow: auto;
        border-radius: 16px;
        border: 1px solid rgba(216, 226, 246, 0.94);
        background: rgba(248, 251, 255, 0.98);
        padding: 12px;
        font-size: 12px;
        line-height: 1.72;
        white-space: pre-wrap;
        word-break: break-word;
      }

      .doc-markdown {
        color: #17304f;
        white-space: normal;
      }

      .doc-markdown h1,
      .doc-markdown h2,
      .doc-markdown h3 {
        margin: 0 0 10px;
        color: #173b78;
        letter-spacing: -0.02em;
        line-height: 1.3;
      }

      .doc-markdown h1 {
        font-size: 19px;
        font-weight: 900;
      }

      .doc-markdown h2 {
        margin-top: 18px;
        font-size: 16px;
        font-weight: 800;
      }

      .doc-markdown h3 {
        margin-top: 14px;
        font-size: 14px;
        font-weight: 800;
      }

      .doc-markdown p {
        margin: 0 0 12px;
        color: #29425f;
        line-height: 1.85;
      }

      .doc-markdown ul,
      .doc-markdown ol {
        margin: 0 0 14px;
        padding-left: 18px;
        color: #29425f;
      }

      .doc-markdown li {
        margin: 0 0 8px;
        line-height: 1.78;
      }

      .doc-markdown blockquote {
        margin: 0 0 14px;
        padding: 9px 12px;
        border-left: 3px solid rgba(63, 111, 214, 0.32);
        background: rgba(234, 241, 255, 0.72);
        border-radius: 10px;
        color: #365172;
      }

      .doc-markdown code {
        padding: 1px 5px;
        border-radius: 6px;
        background: rgba(226, 234, 249, 0.88);
        color: #18345f;
        font-family: "SFMono-Regular", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
        font-size: 11px;
      }

      .doc-viewer-image {
        width: 100%;
        max-height: 52dvh;
        object-fit: contain;
        border-radius: 12px;
        display: block;
        margin-bottom: 10px;
        background: #f8fbff;
      }

      .document-mode-card {
        min-height: 0;
        height: calc(100dvh - 130px);
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
      }

      .doc-placeholder {
        color: var(--ink-soft);
      }

      .resource-list {
        display: grid;
        gap: 0;
      }

      .resource-item {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 6px;
        align-items: start;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid rgba(188, 202, 229, 0.48);
        background: transparent;
        padding: 8px 1px 8px 0;
      }

      .resource-item.is-recent-opened {
        border-radius: 12px;
        background: rgba(231, 239, 255, 0.7);
        border-bottom-color: rgba(168, 188, 227, 0.4);
        padding: 8px 6px 8px 2px;
        margin-bottom: 2px;
      }

      .resource-item.is-recent-opened .resource-item-title {
        color: #173b78;
      }

      .resource-item.is-recent-opened .resource-item-meta {
        color: #46628d;
      }

      .resource-item-leading {
        width: 28px;
        min-width: 28px;
        display: grid;
        justify-items: center;
        align-content: start;
        gap: 4px;
        padding-top: 1px;
      }

      .resource-item-button {
        width: 100%;
        text-align: left;
        cursor: pointer;
        border: none;
        background: transparent;
        padding: 0;
        color: inherit;
      }

      .resource-item-main {
        min-width: 0;
      }

      .resource-item:last-child {
        border-bottom: none;
      }

      .resource-item-icon {
        width: 22px;
        height: 22px;
        display: grid;
        place-items: center;
        border-radius: 0;
        background: transparent;
        color: var(--primary);
      }

      .resource-item-title {
        font-size: 10px;
        font-weight: 800;
        line-height: 1.32;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        word-break: break-word;
      }

      .resource-item-meta {
        margin-top: 2px;
        font-size: 9px;
        color: var(--ink-soft);
        line-height: 1.38;
        word-break: break-word;
      }

      .resource-item-remove {
        width: 26px;
        min-width: 26px;
        min-height: 20px;
        display: inline-grid;
        place-items: center;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--ink-soft);
        padding: 1px 1px 0;
        font-size: 8px;
        font-weight: 700;
        text-align: center;
        line-height: 1;
      }

      .resource-item-remove:hover {
        background: rgba(231, 239, 255, 0.86);
        color: var(--primary);
      }

      .resource-item-remove .material-symbols-outlined {
        font-size: 11px;
        line-height: 1;
      }

      .resource-item-remove-label {
        display: block;
        font-size: 8px;
        letter-spacing: 0;
        white-space: nowrap;
      }

      .resource-section-label {
        padding: 8px 0 6px;
        border-bottom: 1px solid rgba(188, 202, 229, 0.28);
      }

      .resource-section-title {
        font-size: 11px;
        font-weight: 800;
        color: #214178;
      }

      .resource-section-desc,
      .resource-empty-state {
        margin-top: 2px;
        font-size: 10px;
        line-height: 1.45;
        color: var(--ink-soft);
      }

      .assistant-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .rail-access-card {
        position: relative;
        z-index: 600;
        overflow: visible;
        padding: 0 0 9px;
        border-bottom: 1px solid var(--line-hair);
      }

      .rail-access-row {
        position: relative;
        z-index: 600;
        overflow: visible;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 3px;
        min-width: 0;
        width: 100%;
      }

      .rail-access-row .member-anchor {
        padding: 4px 6px 4px 4px;
        min-width: 0;
        max-width: 100%;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: none;
      }

      .rail-access-row .member-copy {
        min-width: 0;
      }

      .rail-access-row .member-name {
        font-size: 10px;
      }

      .rail-access-row .member-meta {
        font-size: 8px;
      }

      .rail-access-row .member-avatar {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 11px;
      }

      .rail-access-row .ghost-icon-button {
        width: 30px;
        height: 30px;
        min-width: 30px;
        padding: 0;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: none;
      }

      .rail-access-row .ghost-icon-button .material-symbols-outlined,
      .rail-access-row .member-anchor .material-symbols-outlined {
        font-size: 17px;
      }

      .rail-access-row .member-anchor > .material-symbols-outlined:last-child {
        font-size: 15px;
      }

      .assistant-actions .primary-button,
      .assistant-actions .secondary-button {
        width: 100%;
        min-width: 0;
        padding: 8px 9px;
        font-size: 11px;
        gap: 5px;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: none;
      }

      .assistant-actions .primary-button .material-symbols-outlined,
      .assistant-actions .secondary-button .material-symbols-outlined {
        font-size: 16px;
      }

      .toolbar-button.is-recording {
        background: rgba(255, 238, 238, 0.98);
        border-color: rgba(227, 87, 87, 0.28);
        color: #cf3c3c;
        animation: mic-pulse 1.1s ease-in-out infinite;
      }

      @keyframes mic-pulse {
        0%,
        100% {
          box-shadow: 0 0 0 0 rgba(227, 87, 87, 0.12);
        }
        50% {
          box-shadow: 0 0 0 8px rgba(227, 87, 87, 0);
        }
      }

      .left-browser-switch {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        align-items: center;
      }

      .left-browser-button {
        border: 1px solid rgba(216, 226, 246, 0.54);
        background: rgba(255, 255, 255, 0.52);
        color: var(--ink-soft);
        border-radius: 7px;
        padding: 5px 4px;
        font-size: 10px;
        font-weight: 800;
        text-align: center;
      }

      .left-browser-button.is-active {
        background: rgba(228, 237, 255, 0.94);
        color: var(--primary);
        border-color: rgba(182, 201, 240, 0.82);
      }

      .left-browser-panel.is-hidden {
        display: none;
      }

      .left-browser-header {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        margin-bottom: 4px;
      }

      .left-session-card {
        padding-top: 2px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--line-hair);
      }

      .left-browser-card {
        padding-top: 2px;
      }

      .left-session-card .context-card-heading {
        justify-content: center;
        gap: 6px;
      }

      .left-session-card .context-card-title {
        color: var(--primary);
        text-align: center;
      }

      .left-session-card .context-card-heading .material-symbols-outlined {
        font-size: 20px;
      }

      .sidebar::-webkit-scrollbar,
      .context-rail::-webkit-scrollbar,
      .message-board::-webkit-scrollbar,
      .history-tree::-webkit-scrollbar,
      .doc-viewer-body::-webkit-scrollbar,
      .context-rail-view::-webkit-scrollbar {
        width: 4px;
        height: 4px;
      }

      .sidebar::-webkit-scrollbar-thumb,
      .context-rail::-webkit-scrollbar-thumb,
      .message-board::-webkit-scrollbar-thumb,
      .history-tree::-webkit-scrollbar-thumb,
      .doc-viewer-body::-webkit-scrollbar-thumb,
      .context-rail-view::-webkit-scrollbar-thumb {
        background: rgba(153, 168, 197, 0.42);
        border-radius: 999px;
      }

      @media (max-width: 1440px) {
        :root {
          --right-rail-width: 320px;
          --side-rail-width: 162px;
        }
      }

      @media (max-width: 1280px) {
        :root {
          --right-rail-width: 300px;
          --side-rail-width: 148px;
        }
      }

      @media (max-width: 980px) {
        .page-shell {
          padding: 10px;
          height: auto;
          overflow: visible;
        }

        body {
          overflow: auto;
        }

        .workspace-grid {
          grid-template-columns: minmax(0, 1fr);
          height: auto;
          overflow: visible;
        }

        .conversation-shell {
          min-height: 720px;
          margin: 10px 0;
        }

        .conversation-topbar {
          grid-template-columns: minmax(0, 1fr) auto;
          grid-template-areas:
            "robot knowledge"
            "topics add";
          align-items: center;
        }

        .topic-robot-inline {
          grid-area: robot;
        }

        .topic-tabs {
          grid-area: topics;
        }

        .conversation-topbar .history-new-button {
          grid-area: add;
          justify-self: end;
        }

        .knowledge-dock {
          grid-area: knowledge;
          max-width: min(260px, 48vw);
        }

        .knowledge-dock .toolbar-path {
          max-width: min(188px, 34vw);
        }

        .splitter {
          display: none;
        }
      }

      @media (max-width: 800px), (max-height: 720px) {
        :root {
          --composer-shell-height: 136px;
          --composer-shell-min-height: 118px;
        }

        .composer-shell {
          padding: var(--novo-spacing-sm, 8px);
        }

        .composer-footer {
          grid-template-columns: minmax(0, 1fr) 138px;
          column-gap: var(--novo-spacing-sm, 8px);
        }

        .composer-actions {
          gap: var(--novo-spacing-xs, 4px);
          justify-content: flex-end;
          min-width: 0;
        }

        .composer-actions .secondary-button {
          width: 36px;
          min-width: 36px;
          padding-left: 0;
          padding-right: 0;
        }

        .composer-actions .primary-button {
          min-width: 72px;
        }

        .toolbar {
          min-width: 0;
          overflow-x: auto;
          scrollbar-width: none;
          white-space: nowrap;
        }

        .toolbar::-webkit-scrollbar {
          display: none;
        }

        .attachment-capability-panel {
          max-width: min(260px, calc(100vw - 32px));
        }
      }

      @media (max-width: 420px) {
        :root {
          --composer-shell-height: 128px;
          --composer-shell-min-height: 112px;
        }

        .conversation-shell {
          min-height: 680px;
        }

        .message {
          max-width: 100%;
        }

        .message-bubble {
          padding: var(--novo-spacing-sm, 8px);
        }

        .composer-footer {
          grid-template-columns: minmax(0, 1fr) 120px;
        }

        .composer-actions .secondary-button {
          width: 32px;
          min-width: 32px;
        }

        .composer-actions .primary-button {
          min-width: 64px;
        }

        .composer-input {
          font-size: var(--novo-text-base, 14px);
          min-height: 44px;
        }
      }

      @keyframes loadingShellSweep {
        0% {
          background-position: 120% 0;
        }
        100% {
          background-position: -120% 0;
        }
      }