/* AI 创作首页：轻量创作台 */
    #page-creation .ai-shell { background: #fff; }
    #page-creation .conversation-panel { padding: 20px 14px; color: #30313a; background: #fbfbfc; border-right-color: #ececef; }
    #page-creation .conversation-panel .panel-label { margin: 2px 2px 14px; color: #24252c; font-size: 14px; }
    #page-creation .new-chat { padding: 12px; margin-bottom: 0; border: 0; color: #fff; background: #181818; border-radius: 13px; box-shadow: 0 5px 13px rgba(25,25,25,.12); }
    .session-history-head { margin-top:18px; padding:16px 4px 9px; border-top:1px solid #e8e8ec; color:#777982; font-size:12px; font-weight:700; }
    #page-creation .chat-list { gap: 4px; }
    #page-creation .chat-row { position:relative; padding:11px 36px 11px 10px; border-radius:10px; cursor:pointer; }
    #page-creation .chat-row strong { color: #42434a; font-size: 12px; }
    #page-creation .chat-row small { display:none; }
    #page-creation .chat-row:hover, #page-creation .chat-row.active { background: #eeeeF0; }
    #page-creation .chat-row.active strong { color: #26272d; }
    #page-creation .conversation-panel .panel-label { justify-content:flex-start; }
    .session-more { display:none; position:absolute; top:50%; right:8px; width:24px; height:24px; padding:0; border:0; border-radius:6px; color:#6e6d75; background:transparent; cursor:pointer; transform:translateY(-50%); font-size:16px; line-height:20px; }
    .chat-row:hover .session-more, .chat-row.menu-open .session-more { display:block; }
    .session-more:hover { background:#dedee2; }
    .session-menu { display:none; position:absolute; z-index:30; top:36px; right:6px; width:120px; padding:5px; border:1px solid #e3e2e7; border-radius:9px; background:#fff; box-shadow:0 12px 26px rgba(27,25,34,.16); }
    .chat-row.menu-open .session-menu { display:grid; gap:2px; }
    .session-menu button { padding:8px 10px; border:0; border-radius:6px; color:#55535d; background:transparent; text-align:left; cursor:pointer; }
    .session-menu button:hover { background:#f3f2f5; }
    .session-menu button.danger { color:#e44f55; }
    .session-menu button.danger:hover { background:#fff0f1; }
    #page-creation .chat-row strong.session-title-editing { display:block; padding:3px 6px; margin:-4px -7px; overflow:visible; border:1px solid #8b70e6; border-radius:6px; outline:0; background:#fff; white-space:nowrap; cursor:text; box-shadow:0 0 0 3px rgba(139,112,230,.1); }
    #page-creation .creation-stage { background: #fff; }
    #page-creation .ai-hero {
      order: 1;
      margin-top: auto;
      padding: 0 0 28px;
    }
    #page-creation .ai-hero .spark {
      width: auto;
      height: auto;
      margin-bottom: 14px;
      color: #8f3dff;
      background: transparent;
      box-shadow: none;
      font-size: 18px;
    }
    #page-creation .ai-hero h1 { color: #252936; font-size: clamp(28px, 2.2vw, 38px); letter-spacing: -.8px; }
    #page-creation .ai-hero p { color: #858897; font-size: 15px; }
    #page-creation .chat-output {
      order: 1;
      max-width: 1240px;
      width: min(1240px, calc(100% - 48px));
      padding: 28px 70px 16px;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    #page-creation .chat-output::-webkit-scrollbar { width: 0; height: 0; }
    #page-creation .chat-output.show { flex: 1 1 auto; width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
    #page-creation .composer-wrap { order: 2; width: min(780px, 94%); margin: 0 auto 14px; }
    #page-creation .creation-stage:has(.chat-output.show) .composer-wrap { width: min(1040px, calc(100% - 48px)); margin-bottom: 24px; }
    #page-creation .creation-stage:has(.chat-output.show) .composer { border-radius: 20px; }
    #page-creation .chat-output .message { margin-bottom: 18px; }
    #page-creation .chat-output .message.assistant {
      width: calc(100% - 46px);
      margin-left: 46px;
      padding: 15px 18px;
      box-sizing: border-box;
      background: #fafafa;
    }
    #page-creation .chat-output .message.user { margin-right: 46px; margin-bottom: 22px; padding: 14px 16px; }
    #page-creation .chat-output .message.assistant::before { left: -40px; top: 14px; }
    #page-creation .chat-output .message.user::after { right: -40px; top: 14px; }
    #page-creation .conversation-locator {
      display: none;
      position: absolute;
      z-index: 3;
      top: 32px;
      bottom: 146px;
      left: 18px;
      width: 12px;
      pointer-events: none;
    }
    #page-creation .creation-stage:has(.chat-output.show) .conversation-locator { display: block; }
    #page-creation .locator-dot {
      position: absolute;
      left: 0;
      width: 8px;
      height: 3px;
      padding: 0;
      border: 0;
      border-radius: 1px;
      cursor: pointer;
      pointer-events: auto;
      background: #d2d5dd;
      transition: width .16s ease, background .16s ease;
    }
    #page-creation .locator-dot:hover,
    #page-creation .locator-dot.is-active { width: 16px; background: #757b8c; }
    #page-creation .locator-preview {
      position: absolute;
      left: 24px;
      top: 50%;
      width: 270px;
      padding: 10px 12px;
      border: 1px solid #e3e5eb;
      border-radius: 10px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-50%) translateX(-4px);
      pointer-events: none;
      color: #555a68;
      background: rgba(255,255,255,.98);
      box-shadow: 0 10px 28px rgba(31, 36, 51, .12);
      transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    }
    #page-creation .locator-dot:hover .locator-preview,
    #page-creation .locator-dot:focus-visible .locator-preview { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
    #page-creation .locator-preview strong,
    #page-creation .locator-preview span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    #page-creation .locator-preview strong { margin-bottom: 5px; color: #343845; font-size: 12px; }
    #page-creation .locator-preview span { font-size: 11px; line-height: 1.6; }
    #page-creation .locator-preview span:last-child { color: #9297a4; }
    #page-creation .chat-output .generated-assets { gap: 10px; }
    #page-creation .chat-output .generated-asset { padding: 13px; border-radius: 12px; }
    #page-creation .chat-output .guided-prompts { margin-top: 12px; padding-top: 10px; border-top: 1px solid #ececf0; }
    #page-creation .composer {
      padding: 11px;
      border: 1px solid rgba(220, 220, 225, .9);
      border-radius: 26px;
      background: rgba(255,255,255,.94);
      box-shadow: 0 16px 46px rgba(32, 33, 45, .1), inset 0 1px 0 rgba(255,255,255,.94);
    }
    #page-creation .composer:focus-within { border-color: rgba(136, 89, 255, .45); box-shadow: 0 0 0 4px rgba(136, 89, 255, .08), 0 18px 48px rgba(32, 33, 45, .11); }
    #page-creation .composer textarea { min-height: 84px; padding: 15px 17px 7px; color: #34353d; font-size: 14px; line-height: 1.65; }
    #page-creation .composer textarea::placeholder { color: #aaaeb8; }
    #page-creation .composer-foot { padding: 0 4px 3px; }
    #page-creation .composer-selectors { gap: 7px; }
    #page-creation .agent-pill {
      min-height: 36px;
      padding: 6px 12px 6px 7px;
      border-color: #e2e2e7;
      border-radius: 999px;
      color: #30313a;
      background: linear-gradient(180deg, #fff, #f7f7f9);
      box-shadow: 0 2px 7px rgba(32, 32, 40, .05);
      font-size: 12px;
      font-weight: 720;
    }
    #page-creation .agent-pill.required { color: #363740; border-style: solid; }
    #page-creation .agent-pill:hover { border-color: #c9bded; background: #fff; }
    #page-creation .agent-pill-icon {
      width: 24px;
      height: 24px;
      border-radius: 9px;
      color: #fff;
      background: linear-gradient(135deg, #4e57db, #a45ae9);
      box-shadow: 0 3px 8px rgba(110, 80, 210, .28);
    }
    #page-creation .model-trigger {
      height: 36px;
      padding: 5px 12px 5px 7px;
      border-color: #e2e2e7;
      border-radius: 999px;
      color: #30313a;
      background: linear-gradient(180deg, #fff, #f7f7f9);
      box-shadow: 0 2px 7px rgba(32, 32, 40, .05);
    }
    #page-creation .model-trigger:hover { border-color: #c9bded; background: #fff; }
    #page-creation .model-trigger-icon {
      width: 24px;
      height: 24px;
      border-radius: 9px;
      background: linear-gradient(135deg, #342e4b, #6d5d91);
      box-shadow: 0 3px 8px rgba(67, 57, 94, .2);
    }
    #page-creation .model-trigger-copy { gap: 6px; }
    #page-creation .model-trigger-copy small { color: #9697a1; font-size: 10px; }
    #page-creation .model-trigger-copy strong { color: #454650; font-size: 12px; }
    #page-creation .send-btn {
      width: 42px;
      height: 42px;
      border-radius: 15px;
      color: #fff;
      background: linear-gradient(150deg, #242424, #0d0d0e);
      box-shadow: 0 5px 13px rgba(16, 16, 18, .22);
    }
    #page-creation .send-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 17px rgba(16, 16, 18, .27); }
    #page-creation .send-btn:disabled { color: #fff; background: #c5c5c8; }
    #page-creation .agent-grid {
      order: 3;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 9px;
      max-width: 900px;
      margin: 0 auto clamp(32px, 5.5vh, 74px);
    }
    #page-creation .agent-card {
      min-height: 0;
      width: auto;
      padding: 8px 13px 8px 8px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border-color: rgba(228, 228, 234, .96);
      border-radius: 999px;
      color: #535561;
      background: rgba(255,255,255,.72);
      box-shadow: 0 3px 12px rgba(42, 43, 55, .035);
    }
    #page-creation .agent-card .agent-icon { display: none; }
    #page-creation .agent-card strong { margin: 0; font-size: 12px; }
    #page-creation .agent-card small, #page-creation .agent-card .agent-foot { display: none; }
    #page-creation .agent-card:hover {
      transform: translateY(-1px);
      border-color: #bea1ff;
      color: #6e37cd;
      box-shadow: 0 8px 18px rgba(102, 61, 192, .13);
    }
    #page-creation .agent-card.selected { transform: translateY(-1px); border-color: #9f7dff; color: #332d4b; background: linear-gradient(135deg, #fcfaff, #f3eeff); box-shadow: 0 8px 18px rgba(114, 84, 210, .12); }
    #page-creation .agent-card.tool-card { border-style: solid; background: rgba(255,255,255,.82); }
    #page-creation .agent-popover, #page-creation .model-popover {
      border: 1px solid rgba(225, 225, 230, .95);
      border-radius: 18px;
      background: rgba(255,255,255,.98);
      box-shadow: 0 18px 48px rgba(37, 38, 50, .16);
    }
    #page-creation .agent-option, #page-creation .model-option { border-radius: 12px; }
    #page-creation .agent-option:hover, #page-creation .model-option:hover { background: #f6f3ff; }
    #page-creation .agent-option.selected, #page-creation .model-option.selected { background: #f1ecff; }

    /* 输入框下方的专业 Agent：信息型小卡片，而非标签 */
    #page-creation .agent-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      max-width: 780px;
      width: min(780px, 94%);
      margin-bottom: clamp(28px, 4.5vh, 58px);
    }
    #page-creation .agent-card {
      min-height: 108px;
      width: 100%;
      position: relative;
      padding: 14px 14px 13px;
      display: block;
      border-radius: 16px;
      background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(249,249,252,.82));
      box-shadow: 0 6px 18px rgba(42, 43, 55, .045);
    }
    #page-creation .agent-card .agent-icon {
      display: none;
    }
    #page-creation .agent-card::before {
      content: "";
      position: absolute;
      top: 14px;
      left: 14px;
      width: 22px;
      height: 3px;
      border-radius: 99px;
      background: linear-gradient(90deg, #8469ed, #d197ff);
    }
    #page-creation .agent-card strong { margin: 13px 0 4px; color: #343540; font-size: 13px; }
    #page-creation .agent-card small {
      display: -webkit-box;
      overflow: hidden;
      color: #92949f;
      font-size: 10px;
      line-height: 1.45;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    #page-creation .agent-card .agent-foot { display: flex; margin-top: 7px; }
    #page-creation .agent-card .agent-chip { padding: 2px 6px; color: #85838f; background: #f1f1f4; font-size: 9px; }
    #page-creation .agent-card .agent-chip:not(:first-child) { display: none; }
    #page-creation .agent-card:hover { transform: translateY(-3px); }
    #page-creation .agent-card.selected {
      border-color: #bba5ff;
      color: #5137a6;
      background: linear-gradient(145deg, #fbfaff, #efeaff);
      box-shadow: 0 10px 22px rgba(115, 78, 213, .14);
    }
    #page-creation .agent-card.selected strong { color: #5137a6; }
    #page-creation .agent-card.selected small { color: #8370b8; }
    #page-creation .agent-card.selected::before { background: linear-gradient(90deg, #5b41c8, #9863e9); }
    #page-creation .agent-card.selected .agent-chip { color: #7157af; background: #e6ddff; }
    #page-creation .agent-card.tool-card { border-style: solid; background: linear-gradient(145deg, #fbfaff, #f6f4ff); }
    #page-creation .agent-card.tool-card.selected { background: linear-gradient(145deg, #fbfaff, #efeaff); }
    @media (max-width: 1040px) { #page-creation .agent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (max-width: 640px) { #page-creation .agent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

    /* 轻量化侧栏：与 AI 创作首页保持一致的白底体系 */
    .sidebar {
      color: #5f6069;
      background: #fafafa;
      box-shadow: 1px 0 0 #ececef;
    }
    .sidebar-menu-scroll { scrollbar-color: transparent transparent; }
    .sidebar-menu-scroll:hover { scrollbar-color: transparent transparent; }
    .sidebar-menu-scroll::-webkit-scrollbar { width: 4px; }
    .sidebar-menu-scroll::-webkit-scrollbar-track { margin: 12px 0; }
    .sidebar-menu-scroll::-webkit-scrollbar-thumb {
      min-height: 40px;
      border: 0;
      border-radius: 99px;
      background: transparent;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
    }
    .sidebar-menu-scroll:hover::-webkit-scrollbar-thumb { background: transparent; }
    .sidebar-menu-scroll.is-scrolling { scrollbar-color: rgba(147, 148, 156, .2) transparent; }
    .sidebar-menu-scroll.is-scrolling::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(174, 174, 181, .2), rgba(120, 120, 129, .28)); }
    .sidebar-menu-scroll.is-scrolling::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(145, 145, 153, .32), rgba(94, 94, 104, .4)); }
    .brand-mark { background: linear-gradient(145deg, #262627, #09090a); box-shadow: 0 8px 18px rgba(24,24,24,.17); }
    .brand strong { color: #252529; }
    .brand small { color: #9a9aa2; }
    .nav-label { color: #a0a0a8; }
    .nav-group summary { color: #55565e; }
    .nav-group summary:hover { color: #24252b; background: #f0f0f2; }
    .nav-group-caret, .nav-child-group > summary span:last-child { color: #9b9ba3; }
    .nav-sublist { padding-left: 34px; }
    .nav-item.nav-sub, .nav-child-group summary { color: #777880; }
    .nav-item.nav-sub:hover, .nav-child-group summary:hover { color: #222329; background: #efeff1; }
    .nav-item.nav-sub.active { color: #171719; background: #e9e9eb; box-shadow: inset 2px 0 0 #222; }
    .nav-item.nav-sub.planned { color: #aaaab1; }
    .nav-item.nav-sub.planned::after { color: #b4b4ba; }
    .nav-config, .nav-child-list { border-left-color: #e3e3e6; }
    .nav-item { color: #666770; }
    .nav-item:hover { color: #222329; background: #efeff1; }
    .nav-item.active { color: #171719; background: #e9e9eb; box-shadow: inset 3px 0 0 #222; }
    .nav-icon { color: #666770; background: #eeeeef; }
    .nav-item.active .nav-icon { color: #fff; background: #242425; }
    .sidebar-spacer { flex: 1 0 24px; }
    .account {
      position: relative;
      z-index: 2;
      flex: 0 0 auto;
      bottom: auto;
      margin-top: auto;
      padding: 13px 10px 16px;
      border-top-color: #e8e8ea;
      background: linear-gradient(180deg, rgba(250,250,250,0), #fafafa 16px, #fafafa);
    }
    .account strong { color: #393a40; }
    .account small { color: #96969e; }

    @media (min-width: 861px) {
      .app.sidebar-collapsed { --sidebar: 72px; }
      .sidebar.is-collapsed { padding-left: 10px; padding-right: 10px; }
      .sidebar.is-collapsed .brand { justify-content: center; padding-left: 0; padding-right: 0; }
      .sidebar.is-collapsed .brand-copy,
      .sidebar.is-collapsed .nav-group-caret,
      .sidebar.is-collapsed .nav-sublist { display: none; }
      .sidebar.is-collapsed .nav-group.is-flyout-open > .nav-sublist {
        position: fixed;
        z-index: 4;
        top: var(--flyout-top, 72px);
        left: calc(var(--sidebar) + 8px);
        display: grid;
        width: 224px;
        max-height: min(560px, calc(100vh - var(--flyout-top, 72px) - 14px));
        padding: 8px;
        overflow: auto;
        border: 1px solid #e5e4e9;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 14px 34px rgba(32,33,41,.16);
      }
      .sidebar.is-collapsed .nav-group.is-flyout-open > .nav-sublist .nav-item.nav-sub { min-height: 36px; padding: 8px 10px; color: #666871; }
      .sidebar.is-collapsed .nav-group.is-flyout-open > .nav-sublist .nav-item.nav-sub:hover { color: #292a30; background: #f1f1f4; }
      .sidebar.is-collapsed .nav-group.is-flyout-open > .nav-sublist .nav-item.nav-sub.active { color: #24252a; background: #e9e9ed; box-shadow: inset 2px 0 0 #242425; }
      .sidebar.is-collapsed .nav-group.is-flyout-open > .nav-sublist .nav-child-group > summary { display:flex; justify-content:space-between; min-height: 36px; padding: 8px 10px; color: #55565e; background: transparent; font-weight: 650; text-align:left; }
      .sidebar.is-collapsed .nav-group.is-flyout-open > .nav-sublist .nav-child-group > summary:hover { color: #292a30; background: #f1f1f4; }
      .sidebar.is-collapsed .nav-group.is-flyout-open > .nav-sublist .nav-child-group > summary span:last-child { color: #9697a0; }
      .sidebar.is-collapsed .nav-group.is-flyout-open > .nav-sublist .nav-item.nav-sub.nested { min-height: 34px; margin-left: 0; padding: 7px 10px; color: #71727a; font-size: 12px; }
      .sidebar.is-collapsed .nav-group.is-flyout-open > .nav-sublist .nav-child-list { gap: 1px; margin: 2px 0 6px 14px; padding-left: 9px; border-left: 1px solid #e5e5e9; }
      .sidebar.is-collapsed .brand { gap: 4px; }
      .sidebar.is-collapsed .brand-mark { width: 28px; height: 28px; border-radius: 9px; font-size: 15px; }
      .sidebar.is-collapsed .sidebar-collapse { width: 20px; height: 20px; margin-left: 0; border-radius: 6px; font-size: 14px; }
      .sidebar.is-collapsed .nav-group { margin-bottom: 7px; }
      .sidebar.is-collapsed .nav-group summary { justify-content: center; padding: 9px 0; }
      .sidebar.is-collapsed .nav-group-title { gap: 0; font-size: 0; }
      .sidebar.is-collapsed .nav-group-title .nav-icon { font-size: 13px; }
      .sidebar.is-collapsed .nav-group:has(.nav-item.active) summary { background: #e9e9eb; }
      .sidebar.is-collapsed .nav-group:has(.nav-item.active) .nav-icon { color: #fff; background: #242425; }
      .sidebar.is-collapsed .account { justify-content: center; padding-left: 0; padding-right: 0; }
      .sidebar.is-collapsed .account > div:last-child { display: none; }
      .sidebar.is-collapsed .nav > .nav-item { justify-content: center; padding-left: 0; padding-right: 0; font-size: 0; }
      .sidebar.is-collapsed .nav > .nav-item .nav-icon { font-size: 13px; }
    }
    #page-creation .asset-toggle { border-radius: 999px; }
    #page-creation .creation-stage:has(.chat-output.show) .asset-toggle { top: 17px; right: 22px; }

    .chat-output {
      display: none;
      flex: 1;
      min-height: 0;
      max-width: 1200px;
      width: 100%;
      margin: 12px auto 0;
      padding: 2px 42px 14px;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
    }

    .chat-output.show { display: block; }

    .message {
      position: relative;
      margin-bottom: 12px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
    }

    .message.user {
      width: fit-content;
      max-width: 72%;
      margin-left: auto;
      margin-right: 0;
      border-color: #d8d9ff;
      border-top-right-radius: 4px;
      background: #f1f1ff;
    }

    .message.assistant {
      width: 100%;
      margin-left: 0;
      margin-right: auto;
      border-top-left-radius: 4px;
      box-shadow: 0 4px 14px rgba(37, 41, 67, .035);
    }

    .message.user::after,
    .message.assistant::before {
      position: absolute;
      top: 2px;
      width: 29px;
      height: 29px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      font-size: 10px;
      font-weight: 800;
    }

    .message.user::after {
      content: "我";
      right: -37px;
      color: #fff;
      background: #696be3;
    }

    .message.assistant::before {
      content: "AI";
      left: -37px;
      color: #5b5ee2;
      background: #e9eaff;
    }

    .message-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
    .message-head strong { font-size: 13px; }

    .message.assistant {
      padding: 11px 13px;
      border: 0;
      border-radius: 13px;
      background: #f7f7f8;
      box-shadow: none;
    }

    .message.assistant.located {
      animation: locatedMessage 1.5s ease;
    }

    @keyframes locatedMessage {
      0%, 100% { box-shadow: none; }
      35% { box-shadow: 0 0 0 4px rgba(91, 92, 226, .2); }
    }

    .assistant-summary {
      margin: 0 0 9px;
      color: #454958;
      font-size: 12px;
      line-height: 1.65;
    }
    .mix-chat-copy-result { position:relative; margin-top:10px; padding:12px 14px; border:1px solid #e5def8; border-radius:10px; background:#fbfaff; }
    .mix-chat-copy-result strong { display:block; color:#5d46bd; font-size:12px; }
    .mix-chat-copy-result p { margin:7px 0 0; color:#454958; font-size:12px; line-height:1.7; white-space:pre-wrap; }
    .mix-chat-copy-btn { position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:1px solid #e0d8f5; border-radius:6px; color:#6c5cf0; background:#fff; cursor:pointer; transition:.15s; }
    .mix-chat-copy-btn:hover { border-color:#6c5cf0; background:#f4f2ff; color:#5d4ee8; }

    .generated-assets { display: grid; gap: 8px; }
    .generated-asset {
      padding: 10px 11px;
      border: 1px solid #e4e5ea;
      border-radius: 11px;
      background: #fff;
    }

    .generated-asset-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 6px;
    }

    .generated-asset-head strong { color: #303442; font-size: 12px; }
    .generated-asset-head small { color: #9a9eab; font-size: 9px; }
    .generated-asset-body { color: #454957; font-size: 12px; line-height: 1.7; white-space: pre-line; }

    .generated-video {
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      gap: 11px;
      align-items: center;
    }

    .generated-video-cover {
      width: 72px;
      aspect-ratio: 9 / 16;
      display: grid;
      place-items: center;
      border-radius: 9px;
      color: #fff;
      background: linear-gradient(145deg, #292c42, #7072df);
      font-size: 22px;
    }

    .asset-inline-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 8px;
    }

    .asset-action {
      padding: 5px 8px;
      border: 1px solid #dedfe7;
      border-radius: 7px;
      color: #5e6373;
      background: #fff;
      font-size: 10px;
    }

    .asset-action:hover { color: var(--brand-strong); border-color: #c6c8ef; background: #f8f8ff; }
    .asset-action.primary { color: #fff; border-color: var(--brand); background: var(--brand); }
    .asset-action.saved { color: #278568; border-color: #bfe1d5; background: #eef9f5; }

    .guided-prompts {
      display: grid;
      grid-template-columns: 1fr;
      justify-items: start;
      gap: 6px;
      padding-top: 9px;
      margin-top: 9px;
      border-top: 1px solid #e4e5e9;
    }

    .guided-prompts span { color: #9a9eaa; font-size: 9px; }
    .guided-prompt {
      width: fit-content;
      padding: 6px 9px;
      border: 1px solid #dfe0e7;
      border-radius: 16px;
      color: #636879;
      background: #fff;
      font-size: 10px;
      text-align: left;
    }

    .guided-prompt:hover { color: var(--brand-strong); border-color: #c3c5ef; }

    .copy-result {
      margin-top: 10px;
      padding: 13px;
      border: 1px solid #ececf5;
      border-radius: 11px;
      background: #fafaff;
    }

    .result-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
    .copy-result p { margin: 0; color: #383b4c; }
    .result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
    .result-card {
      padding: 13px;
      border: 1px solid #e7e8f1;
      border-radius: 12px;
      background: #fbfbfe;
    }
    .result-card p { margin: 7px 0 0; color: #3d4050; line-height: 1.65; font-size: 12px; }
    .result-section-title { margin: 15px 0 8px; font-size: 13px; font-weight: 760; color: #303344; }
    .result-note {
      margin-top: 10px;
      padding: 10px 12px;
      border-left: 3px solid #7375e8;
      border-radius: 7px;
      color: #555a6c;
      background: #f5f5ff;
      font-size: 12px;
      line-height: 1.6;
    }
    .structure-line, .compare-row {
      display: grid;
      grid-template-columns: 112px 1fr;
      gap: 10px;
      padding: 8px 0;
      border-bottom: 1px dashed #e6e7ee;
      font-size: 12px;
    }
    .structure-line:last-child, .compare-row:last-child { border-bottom: 0; }
    .structure-line strong, .compare-row strong { color: #5b5ee2; }
    .diff-old { color: #8b5160; text-decoration: line-through; }
    .diff-new { color: #27785b; font-weight: 650; }
    .story-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 11px;
    }
    .story-table th, .story-table td {
      padding: 8px 7px;
      border: 1px solid #e4e6ee;
      text-align: left;
      vertical-align: top;
      line-height: 1.45;
      word-break: break-word;
    }
    .story-table th { color: #666b7b; background: #f5f6f9; }
    .story-table th:nth-child(1), .story-table td:nth-child(1) { width: 64px; }
    .story-table th:nth-child(2), .story-table td:nth-child(2) { width: 74px; }
    .mix-preview {
      display: grid;
      grid-template-columns: 155px 1fr;
      gap: 14px;
      margin-top: 12px;
      padding: 13px;
      border: 1px solid #e4e5f0;
      border-radius: 13px;
      background: #f9f9fd;
    }
    .mix-cover {
      min-height: 205px;
      display: grid;
      place-items: center;
      border-radius: 11px;
      color: #fff;
      background: linear-gradient(155deg, #272a48, #5b5ee2 60%, #24b8c4);
      font-weight: 750;
    }
    .mix-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .mix-stat { padding: 10px; border-radius: 9px; background: #fff; border: 1px solid #e8e9f0; }
    .mix-stat strong { display: block; margin-bottom: 3px; color: #343746; font-size: 15px; }
    .mix-stat small { color: #808596; }
    .timeline-mini { display: flex; gap: 3px; height: 32px; margin-top: 11px; }
    .timeline-segment { display: grid; place-items: center; border-radius: 5px; color: #fff; font-size: 9px; background: #686be5; }
    .timeline-segment.alt { background: #26aeb8; }

    .composer-wrap {
      flex: 0 0 auto;
      width: min(1200px, 100%);
      margin: auto auto 0;
      padding-top: 18px;
    }

    .composer {
      padding: 10px;
      border: 1px solid #d9dce7;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 12px 32px rgba(35, 38, 63, .09);
    }
    .followup-hint {
      display: none;
      align-items: center;
      gap: 7px;
      padding: 2px 6px 9px;
      color: #85899a;
      font-size: 10px;
      line-height: 1.4;
    }
    .followup-hint.show { display: flex; }
    .followup-hint strong { flex: 0 0 auto; color: #5b5ee2; }

    .composer textarea {
      width: 100%;
      min-height: 58px;
      max-height: 150px;
      padding: 4px 7px;
      resize: vertical;
      border: 0;
      outline: 0;
      color: var(--ink);
    }

    .composer textarea:disabled {
      color: #999eae;
      background: #f3f4f7;
      cursor: not-allowed;
      resize: none;
    }

    .composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .composer-selectors { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
    .agent-picker { position: relative; }

    .agent-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 10px;
      border: 1px solid var(--line);
      border-radius: 9px;
      color: var(--brand-strong);
      background: #f8f8ff;
      font-weight: 700;
    }

    .agent-pill-icon {
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      border-radius: 7px;
      color: #fff;
      background: linear-gradient(135deg, #5f62dd, #37b6c8);
      font-size: 10px;
    }

    .agent-chevron { margin-left: 2px; transition: transform .18s ease; }
    .agent-picker.open .agent-chevron { transform: rotate(180deg); }

    .agent-pill.required {
      color: #fff;
      border-color: var(--brand);
      background: linear-gradient(135deg, #6b6dea, #5556d7);
      box-shadow: 0 0 0 4px rgba(91, 92, 226, .11), 0 7px 16px rgba(91, 92, 226, .18);
      animation: requiredPulse 1.8s ease-in-out infinite;
    }

    .agent-popover {
      position: absolute;
      z-index: 82;
      left: 0;
      bottom: calc(100% + 10px);
      width: 360px;
      max-height: 470px;
      display: none;
      padding: 8px;
      overflow-y: auto;
      border: 1px solid #e4e5eb;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 18px 52px rgba(31, 34, 54, .18);
    }

    .agent-picker.open .agent-popover { display: block; animation: modelPopoverIn .16s ease-out; }
    .agent-popover-title { padding: 6px 8px 8px; color: #9a9eab; font-size: 10px; }
    .agent-group-title { padding: 8px 9px 4px; color: #a1a5b1; font-size: 9px; font-weight: 700; }

    .agent-option {
      width: 100%;
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) 22px;
      align-items: center;
      gap: 9px;
      padding: 8px;
      border: 0;
      border-radius: 10px;
      color: #3b3f4f;
      background: transparent;
      text-align: left;
    }

    .agent-option:hover { background: #f6f7fa; }
    .agent-option.selected { background: #f0f1f5; }
    .agent-option-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid #e5e6ec;
      border-radius: 9px;
      color: #565b72;
      background: #fff;
      font-size: 12px;
      font-weight: 750;
    }

    .agent-option-copy { min-width: 0; }
    .agent-option-copy strong { display: block; color: #363a49; font-size: 12px; }
    .agent-option-copy small {
      display: block;
      overflow: hidden;
      margin-top: 2px;
      color: #999daa;
      font-size: 9px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .agent-option-check { color: var(--brand); font-size: 15px; font-weight: 800; text-align: center; }

    .model-picker { position: relative; min-width: 0; }
    .model-native { display: none; }

    .model-trigger {
      height: 34px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      max-width: 250px;
      padding: 4px 9px 4px 6px;
      border: 1px solid var(--line);
      border-radius: 9px;
      color: #3e4354;
      background: #fff;
      font-size: 12px;
      text-align: left;
    }

    .model-trigger:hover:not(:disabled) { border-color: #bfc2ee; background: #fafaff; }
    .model-trigger:disabled { color: #a2a6b3; background: #f6f7f9; cursor: not-allowed; }

    .model-trigger-icon {
      width: 24px;
      height: 24px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 7px;
      color: #fff;
      background: linear-gradient(135deg, #373a55, #6b6dea);
      font-size: 11px;
    }

    .model-trigger-copy {
      min-width: 0;
      display: flex;
      align-items: baseline;
      gap: 5px;
    }

    .model-trigger-copy small { color: #9296a6; font-size: 10px; font-weight: 500; }
    .model-trigger-copy strong {
      overflow: hidden;
      color: inherit;
      font-size: 12px;
      font-weight: 650;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .model-chevron { margin-left: auto; color: #858a9b; transition: transform .18s ease; }
    .model-picker.open .model-chevron { transform: rotate(180deg); }

    .model-popover {
      position: absolute;
      z-index: 80;
      left: 0;
      bottom: calc(100% + 10px);
      width: min(430px, calc(100vw - 320px));
      max-height: 440px;
      display: none;
      padding: 8px;
      overflow-y: auto;
      border: 1px solid #e5e6ec;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 18px 52px rgba(31, 34, 54, .18);
    }

    .model-picker.open .model-popover { display: block; animation: modelPopoverIn .16s ease-out; }

    @keyframes modelPopoverIn {
      from { opacity: 0; transform: translateY(7px) scale(.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .model-popover-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 8px 9px;
      color: #33384a;
      font-size: 13px;
      font-weight: 750;
    }

    .model-popover-head small { color: #969baa; font-size: 10px; font-weight: 500; }
    .model-group-title {
      padding: 9px 9px 4px;
      color: #a0a4b1;
      font-size: 10px;
      font-weight: 700;
    }

    .model-option {
      width: 100%;
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr) 22px;
      align-items: center;
      gap: 9px;
      padding: 8px;
      border: 0;
      border-radius: 11px;
      color: #353a4c;
      background: transparent;
      text-align: left;
    }

    .model-option:hover { background: #f6f7fa; }
    .model-option.selected { background: #f1f2f6; }

    .model-option-icon {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border: 1px solid #e5e6ed;
      border-radius: 10px;
      color: #545a72;
      background: #fff;
      font-size: 15px;
    }

    .model-option-copy { min-width: 0; }
    .model-option-name {
      display: flex;
      align-items: center;
      gap: 6px;
      overflow: hidden;
      font-size: 13px;
      font-weight: 680;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .model-option-name em {
      padding: 1px 5px;
      border-radius: 7px;
      color: #538796;
      background: #e9f6f8;
      font-size: 8px;
      font-style: normal;
      font-weight: 700;
    }

    .model-option-desc {
      display: block;
      overflow: hidden;
      margin-top: 2px;
      color: #9b9fad;
      font-size: 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .model-option-check { color: var(--brand); font-size: 16px; font-weight: 800; text-align: center; }

    @keyframes requiredPulse {
      0%, 100% { box-shadow: 0 0 0 3px rgba(91, 92, 226, .09), 0 7px 16px rgba(91, 92, 226, .16); }
      50% { box-shadow: 0 0 0 6px rgba(91, 92, 226, .13), 0 9px 22px rgba(91, 92, 226, .23); }
    }

    .send-btn {
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 11px;
      color: #fff;
      background: var(--brand);
      font-size: 18px;
    }

    .send-btn:disabled {
      color: #a8acb9;
      background: #e1e3e9;
      cursor: not-allowed;
    }

    .asset-empty {
      padding: 30px 12px;
      color: #9a9ead;
      text-align: center;
      border: 1px dashed #d7d9e5;
      border-radius: 12px;
    }

    .asset-type-tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 5px;
      padding: 4px;
      margin-bottom: 13px;
      border-radius: 10px;
      background: #f2f3f7;
    }

    .asset-type-tab {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 8px 6px;
      border: 0;
      border-radius: 8px;
      color: #767b8d;
      background: transparent;
      font-size: 12px;
      font-weight: 700;
    }

    .asset-type-tab.active {
      color: var(--brand-strong);
      background: #fff;
      box-shadow: 0 2px 8px rgba(39, 42, 70, .08);
    }

    .asset-type-tab b {
      min-width: 18px;
      padding: 1px 5px;
      border-radius: 9px;
      color: #858a9b;
      background: #e8e9ef;
      font-size: 10px;
    }

    .asset-type-tab.active b { color: #fff; background: var(--brand); }
    .asset-type-panel { display: none; }
    .asset-type-panel.active { display: block; }
    .asset-drawer-list { display: grid; gap: 9px; }
    .asset-drawer-card {
      padding: 10px;
      border: 1px solid #e3e4eb;
      border-radius: 11px;
      background: #fff;
    }

    .asset-drawer-main {
      width: 100%;
      display: grid;
      grid-template-columns: 35px minmax(0, 1fr);
      gap: 9px;
      padding: 0;
      border: 0;
      background: transparent;
      text-align: left;
    }

    .asset-drawer-icon {
      width: 35px;
      height: 35px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      color: var(--brand-strong);
      background: #eeeeff;
      font-size: 12px;
      font-weight: 800;
    }

    .asset-drawer-copy { min-width: 0; }
    .asset-drawer-copy strong {
      display: block;
      overflow: hidden;
      color: #363a49;
      font-size: 11px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .asset-drawer-copy small { display: block; margin-top: 2px; color: #a0a4b0; font-size: 9px; }
    .asset-drawer-copy p {
      display: -webkit-box;
      overflow: hidden;
      margin: 5px 0 0;
      color: #787d8d;
      font-size: 10px;
      line-height: 1.45;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .asset-drawer-card .asset-inline-actions { margin-top: 9px; }
    .video-source-detail {
      display: none;
      padding: 8px;
      margin-top: 8px;
      border-radius: 8px;
      color: #6e7382;
      background: #f6f7f9;
      font-size: 10px;
      line-height: 1.55;
    }
    .asset-drawer-card.show-detail .video-source-detail,
    .generated-asset.show-detail .video-source-detail { display: block; }

    .script-table-wrap {
      width: 100%;
      overflow-x: auto;
      border: 1px solid #e3e4e9;
      border-radius: 9px;
    }

    .compact-script-table {
      width: 100%;
      min-width: 880px;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 10px;
    }

    .compact-script-table th,
    .compact-script-table td {
      padding: 9px 8px;
      border-right: 1px solid #e7e8ed;
      border-bottom: 1px solid #e7e8ed;
      color: #555968;
      line-height: 1.6;
      text-align: left;
      vertical-align: top;
      overflow-wrap: anywhere;
      white-space: normal;
      word-break: break-word;
    }

    .compact-script-table th { color: #6d7282; background: #f5f6f8; font-weight: 700; }
    .compact-script-table tr:last-child td { border-bottom: 0; }
    .compact-script-table th:last-child,
    .compact-script-table td:last-child { border-right: 0; }
    .compact-script-table th:nth-child(1) { width: 62px; }
    .compact-script-table th:nth-child(2) { width: 210px; }
    .compact-script-table th:nth-child(3) { width: 235px; }
    .compact-script-table th:nth-child(4) { width: 170px; }
    .compact-script-table th:nth-child(5) { width: 205px; }

    .video-source-detail .compact-script-table { min-width: 820px; background: #fff; }

    .asset-item {
      display: none;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: #fff;
    }

    .asset-item.show { display: block; }
    .asset-thumb {
      height: 76px;
      display: grid;
      place-items: center;
      margin-bottom: 10px;
      border-radius: 9px;
      color: #6d6fd7;
      background: linear-gradient(135deg, #f2f2ff, #e8f8fa);
      font-size: 24px;
      font-weight: 800;
    }