* { box-sizing: border-box; }

    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: #090a0f;
      color: #fff;
      font-family: Arial, "Microsoft YaHei", sans-serif;
    }

    button, input, textarea { font-family: inherit; }
    button { user-select: none; }

    .topbar {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      height: 64px;
      z-index: 50;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 18px;
      background: rgba(8, 9, 14, 0.88);
      border-bottom: 1px solid rgba(255, 255, 255, 0.09);
      backdrop-filter: blur(14px);
    }

    .topbar button,
    .box button,
    .floatingAdd,
    .startCard button,
    .contextMenu button,
    .composer button,
    .helpPanel button {
      border: none;
      border-radius: 12px;
      padding: 9px 13px;
      background: #f4f4f5;
      color: #101014;
      cursor: pointer;
      font-weight: 800;
      transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
    }

    .topbar button:hover,
    .box button:hover,
    .floatingAdd:hover,
    .startCard button:hover,
    .contextMenu button:hover,
    .composer button:hover,
    .helpPanel button:hover { transform: translateY(-1px); }

    .topbar button.secondary,
    .startCard button.secondary,
    .composer button.secondary,
    .helpPanel button.secondary {
      background: #20222d;
      color: #ddd;
      border: 1px solid #3b3e4d;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 9px;
      font-weight: 900;
      white-space: nowrap;
      letter-spacing: 0.2px;
    }

    .brandMark {
      width: 26px;
      height: 26px;
      border-radius: 10px;
      background: radial-gradient(circle at 30% 20%, #fff, #9ca3ff 42%, #3a3dff 72%, #191a2f);
      box-shadow: 0 0 24px rgba(132, 140, 255, 0.35);
    }

    .status {
      min-width: 0;
      color: #aaa;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .status.warn { color: #ffd27a; }
    .status.ok { color: #9ff5b8; }
    .status.info { color: #b9c6ff; }

    .tips {
      color: rgba(255,255,255,0.44);
      font-size: 13px;
      margin-left: auto;
      white-space: nowrap;
    }

    .viewport {
      position: fixed;
      left: 0;
      right: 0;
      top: 64px;
      bottom: 0;
      overflow: hidden;
      cursor: grab;
      background-color: #0e1018;
      background-image:
        radial-gradient(circle at center, rgba(255,255,255,0.055) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
      background-size: 32px 32px, 32px 32px, 32px 32px;
      background-position: 0 0, 0 0, 0 0;
    }

    .viewport.panning { cursor: grabbing; }

    .connections {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
      overflow: visible;
      transform-origin: 0 0;
    }

    .connectionHitLine {
      stroke: rgba(255,255,255,0);
      stroke-width: 24;
      fill: none;
      pointer-events: stroke;
      cursor: pointer;
    }

    .connectionLine {
      stroke: rgba(255, 255, 255, 0.82);
      stroke-width: 4.5;
      fill: none;
      pointer-events: none;
      filter: drop-shadow(0 0 7px rgba(255,255,255,0.18));
      transition: stroke-width 0.12s ease, stroke 0.12s ease;
    }

    .connectionLine.selected {
      stroke: #fff;
      stroke-width: 6.5;
      filter: drop-shadow(0 0 12px rgba(255,255,255,0.45));
    }

    .tempLine {
      stroke: rgba(255,255,255,0.94);
      stroke-width: 4.5;
      fill: none;
      stroke-dasharray: 9 7;
      filter: drop-shadow(0 0 8px rgba(255,255,255,0.24));
    }

    .canvas {
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      transform-origin: 0 0;
      z-index: 2;
    }

    .box {
      position: absolute;
      width: 340px;
      height: 300px;
      min-width: 250px;
      min-height: 220px;
      max-width: 980px;
      max-height: 920px;
      resize: none;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(45, 48, 64, 0.98), rgba(24, 25, 34, 0.98)),
        radial-gradient(circle at 20% 0%, rgba(255,255,255,0.16), transparent 42%);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 22px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: 0 24px 70px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.06);
      cursor: default;
    }

    .box::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: 22px;
      background: radial-gradient(circle at 18% 0%, rgba(152,162,255,0.24), transparent 34%);
      opacity: 0.85;
    }

    .box:hover { border-color: rgba(255, 255, 255, 0.34); }
    .box.dragTarget { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.16), 0 24px 70px rgba(0,0,0,0.36); }

    .boxHeader {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      cursor: move;
      user-select: none;
      flex: 0 0 auto;
      padding-left: 2px;
    }

    .dragName {
      flex: 1;
      min-width: 0;
      color: #f4f4f5;
      font-size: 14px;
      font-weight: 900;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      letter-spacing: 0.2px;
    }


    .titleWrap {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .cardTitleInput {
      width: 100%;
      min-width: 0;
      border: 1px solid transparent;
      outline: none;
      border-radius: 10px;
      padding: 4px 7px;
      color: #f4f4f5;
      background: transparent;
      font-size: 14px;
      font-weight: 900;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      letter-spacing: 0.2px;
    }

    .cardTitleInput:hover,
    .cardTitleInput:focus {
      background: rgba(255,255,255,0.075);
      border-color: rgba(255,255,255,0.16);
    }

    .cardTitleDisplay {
      width: 100%;
      min-width: 0;
      padding: 4px 7px;
      border-radius: 10px;
      color: #f4f4f5;
      font-size: 15px;
      font-weight: 900;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      letter-spacing: 0.2px;
      cursor: text;
    }

    .cardTitleDisplay:hover { background: rgba(255,255,255,0.075); }
    .titleWrap.editing .cardTitleDisplay { display: none; }
    .titleWrap:not(.editing) .cardTitleInput { display: none; }

    .boxHint {
      display: block;
      margin-top: 2px;
      color: rgba(255,255,255,0.45);
      font-size: 11px;
      font-weight: 500;
    }

    .boxHeader button {
      position: relative;
      z-index: 3;
      padding: 7px 9px;
      border-radius: 10px;
      font-size: 12px;
      background: rgba(255,255,255,0.08);
      color: #f3f3f3;
      border: 1px solid rgba(255,255,255,0.12);
      backdrop-filter: blur(8px);
    }

    .boxHeader button.danger {
      color: #fff;
      background: rgba(116, 31, 31, 0.72);
      border-color: rgba(255, 117, 117, 0.3);
    }

    .nodeDot {
      position: absolute;
      top: 50%;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #fff;
      border: 4px solid #11131d;
      box-shadow: 0 0 0 6px rgba(255,255,255,0.18), 0 0 26px rgba(255,255,255,0.42);
      transform: translateY(-50%);
      cursor: crosshair;
      z-index: 5;
    }

    .nodeDot::after {
      content: "";
      position: absolute;
      inset: -14px;
      border-radius: 50%;
    }

    .nodeDot.left { left: -18px; }
    .nodeDot.right { right: -18px; }
    .nodeDot:hover { transform: translateY(-50%) scale(1.12); }
    .nodeDot.active { box-shadow: 0 0 0 7px rgba(255,255,255,0.35), 0 0 34px rgba(255,255,255,0.72); }

    .boxBody {
      position: relative;
      z-index: 2;
      min-height: 0;
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .text {
      width: 100%;
      min-height: 78px;
      flex: 1 1 110px;
      resize: none;
      overflow-y: auto;
      overflow-x: hidden;
      border: 1px solid rgba(255,255,255,0.08);
      outline: none;
      border-radius: 16px;
      padding: 12px 13px;
      color: #fff;
      background: rgba(12, 14, 22, 0.56);
      font-size: 15px;
      line-height: 1.6;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }

    .text::placeholder { color: rgba(255,255,255,0.34); }

    .text::-webkit-scrollbar,
    .imageGrid::-webkit-scrollbar,
    .composerText::-webkit-scrollbar { width: 8px; height: 8px; }
    .text::-webkit-scrollbar-thumb,
    .imageGrid::-webkit-scrollbar-thumb,
    .composerText::-webkit-scrollbar-thumb { background: #555a6d; border-radius: 8px; }
    .text::-webkit-scrollbar-track,
    .imageGrid::-webkit-scrollbar-track,
    .composerText::-webkit-scrollbar-track { background: rgba(0,0,0,0.18); border-radius: 8px; }

    .imageTools {
      display: flex;
      gap: 8px;
      align-items: center;
      flex: 0 0 auto;
    }

    .upload { display: none; }

    .uploadBtn {
      flex: 1;
      border: 1px dashed rgba(255,255,255,0.28);
      border-radius: 13px;
      padding: 8px;
      text-align: center;
      color: rgba(255,255,255,0.72);
      cursor: pointer;
      user-select: none;
      font-size: 13px;
      background: rgba(255,255,255,0.045);
    }

    .uploadBtn:hover {
      color: #fff;
      border-color: rgba(255,255,255,0.55);
    }

    .imageCount {
      color: rgba(255,255,255,0.48);
      font-size: 12px;
      white-space: nowrap;
    }

    .imageGrid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      max-height: 42%;
      min-height: 34px;
      overflow: auto;
      padding-right: 2px;
      flex: 0 1 190px;
    }

    .imageItem {
      position: relative;
      border-radius: 14px;
      background: #050505;
      overflow: hidden;
      min-height: 82px;
      border: 1px solid rgba(255,255,255,0.1);
    }

    .imageItem img,
    .imageItem video {
      width: 100%;
      height: 96px;
      object-fit: cover;
      display: block;
      background: #050505;
    }

    .mediaBadge {
      position: absolute;
      left: 6px;
      top: 6px;
      z-index: 2;
      padding: 3px 7px;
      border-radius: 999px;
      background: rgba(0,0,0,0.64);
      border: 1px solid rgba(255,255,255,0.18);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
    }

    .mediaLocalState,
    .composerMediaLocalState {
      position: absolute;
      right: 38px;
      top: 6px;
      z-index: 2;
      padding: 3px 7px;
      border-radius: 999px;
      background: rgba(0,0,0,0.64);
      border: 1px solid rgba(255,255,255,0.18);
      color: #fff;
      font-size: 11px;
      font-weight: 900;
      max-width: 92px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .mediaLocalState.saved,
    .composerMediaLocalState.saved {
      background: rgba(25, 108, 55, 0.76);
      border-color: rgba(120,255,170,0.28);
    }

    .mediaLocalState.remote,
    .composerMediaLocalState.remote {
      background: rgba(133, 88, 23, 0.76);
      border-color: rgba(255,211,120,0.3);
    }

    .mediaLocalState.failed,
    .composerMediaLocalState.failed {
      background: rgba(130, 38, 38, 0.76);
      border-color: rgba(255,125,125,0.32);
    }

    .removeImage {
      position: absolute;
      right: 6px;
      top: 6px;
      width: 25px;
      height: 25px;
      padding: 0 !important;
      border-radius: 50% !important;
      background: rgba(0,0,0,0.72) !important;
      color: #fff !important;
      border: 1px solid rgba(255,255,255,0.22) !important;
      font-size: 17px !important;
      line-height: 23px;
    }

    .imageActions {
      position: absolute;
      left: 6px;
      bottom: 6px;
      display: flex;
      gap: 5px;
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .imageItem:hover .imageActions { opacity: 1; }

    .imageActionBtn {
      width: 30px;
      height: 30px;
      padding: 0 !important;
      border-radius: 10px !important;
      background: rgba(0,0,0,0.72) !important;
      color: #fff !important;
      border: 1px solid rgba(255,255,255,0.22) !important;
      font-size: 14px !important;
      line-height: 28px;
    }

    .emptyImages {
      color: rgba(255,255,255,0.38);
      font-size: 12px;
      text-align: center;
      padding: 5px 0 3px;
      grid-column: 1 / -1;
    }

    .floatingAdd {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 60;
      width: 62px;
      height: 62px;
      border-radius: 50%;
      padding: 0;
      font-size: 38px;
      line-height: 62px;
      box-shadow: 0 10px 34px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.15);
    }

    .floatingAdd.active {
      transform: rotate(45deg);
      background: #222431;
      color: #fff;
      border: 1px solid rgba(255,255,255,0.18);
    }

    .miniHelp {
      position: fixed;
      left: 18px;
      bottom: 16px;
      z-index: 40;
      color: rgba(255,255,255,0.42);
      font-size: 12px;
      pointer-events: none;
    }

    .contextMenu {
      position: fixed;
      z-index: 120;
      width: 180px;
      padding: 8px;
      border-radius: 16px;
      background: rgba(24, 25, 34, 0.96);
      border: 1px solid rgba(255,255,255,0.13);
      box-shadow: 0 18px 50px rgba(0,0,0,0.46);
      backdrop-filter: blur(14px);
      display: none;
    }

    .contextMenu.show { display: block; }
    .contextMenu button {
      width: 100%;
      display: block;
      text-align: left;
      margin: 3px 0;
      background: transparent;
      color: #f2f2f2;
      border: 1px solid transparent;
      font-weight: 700;
    }
    .contextMenu button:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.08);
    }

    .composer {
      position: fixed;
      left: 50%;
      bottom: 22px;
      transform: translateX(-50%) translateY(130%);
      z-index: 90;
      width: min(850px, calc(100vw - 130px));
      padding: 12px;
      border-radius: 24px;
      background: rgba(19, 21, 30, 0.96);
      border: 1px solid rgba(255,255,255,0.13);
      box-shadow: 0 24px 70px rgba(0,0,0,0.5);
      backdrop-filter: blur(16px);
      transition: transform 0.2s ease;
    }

    .composer.show { transform: translateX(-50%) translateY(0); }

    .composerInner {
      display: flex;
      gap: 10px;
      align-items: flex-end;
    }

    .composerText {
      flex: 1;
      min-height: 48px;
      max-height: 145px;
      resize: none;
      border: 1px solid rgba(255,255,255,0.1);
      outline: none;
      border-radius: 18px;
      padding: 13px 14px;
      background: rgba(255,255,255,0.07);
      color: #fff;
      font-size: 15px;
      line-height: 1.55;
      overflow-y: auto;
    }

    .composerText::placeholder { color: rgba(255,255,255,0.42); }

    .composerImgLabel {
      width: 46px;
      height: 46px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      font-size: 20px;
    }

    .composerMeta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin: 0 4px 8px;
      color: rgba(255,255,255,0.56);
      font-size: 12px;
      max-height: 88px;
      overflow-y: auto;
      padding-right: 4px;
    }

    .imageChip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.1);
      max-width: 230px;
      overflow: hidden;
      white-space: nowrap;
    }

    .imageChip span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .imageChip button {
      flex: 0 0 auto;
      width: 20px;
      height: 20px;
      padding: 0 !important;
      border-radius: 50% !important;
      background: rgba(255,255,255,0.12) !important;
      color: #fff !important;
      border: 1px solid rgba(255,255,255,0.12) !important;
      line-height: 18px;
      font-size: 13px;
    }


    .composerModelBtn {
      min-width: 46px;
      width: 46px;
      height: 46px;
      padding: 0 12px !important;
      border-radius: 16px !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: rgba(255,255,255,0.08) !important;
      color: #f4f4f5 !important;
      border: 1px solid rgba(255,255,255,0.12) !important;
      flex: 0 0 auto;
      overflow: hidden;
      transition: width 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    }

    .composerModelBtn.selected {
      width: 168px;
      justify-content: flex-start;
      background: rgba(143, 151, 255, 0.15) !important;
      border-color: rgba(167, 174, 255, 0.34) !important;
      color: #fff !important;
    }

    .composerModelBtn .gearIcon {
      font-size: 18px;
      line-height: 1;
      flex: 0 0 auto;
    }

    .composerModelBtn .modelBtnLabel {
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 12px;
      font-weight: 800;
      display: none;
    }

    .composerModelBtn.selected .modelBtnLabel { display: inline; }

    .composerModelPicker {
      position: fixed;
      left: 24px;
      bottom: 118px;
      z-index: 260;
      width: min(520px, calc(100vw - 48px));
      max-height: calc(100vh - 150px);
      padding: 12px;
      border-radius: 22px;
      background: rgba(18, 20, 29, 0.985);
      border: 1px solid rgba(255,255,255,0.14);
      box-shadow: 0 28px 90px rgba(0,0,0,0.68);
      backdrop-filter: blur(14px);
      display: none;
      overflow: hidden;
    }

    .composerModelPicker.show { display: block; }

    .composerModelPickerHeader {
      padding: 2px 4px 10px;
    }

    .composerModelPickerHeader b {
      display: block;
      font-size: 15px;
      margin-bottom: 5px;
    }

    .composerModelPickerHeader span {
      color: rgba(255,255,255,0.58);
      font-size: 12px;
      line-height: 1.55;
    }

    .composerModelList {
      display: grid;
      gap: 8px;
      max-height: min(52vh, 430px);
      overflow-y: auto;
      padding-right: 6px;
    }

    .composerModelCard {
      width: 100%;
      text-align: left;
      padding: 12px 13px !important;
      border-radius: 16px !important;
      background: rgba(255,255,255,0.05) !important;
      color: #f4f4f5 !important;
      border: 1px solid rgba(255,255,255,0.08) !important;
      display: block;
    }

    .composerModelCard.active {
      background: rgba(140, 149, 255, 0.16) !important;
      border-color: rgba(167,174,255,0.34) !important;
      box-shadow: 0 0 0 1px rgba(167,174,255,0.12) inset;
    }

    .composerModelTopRow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }

    .composerModelName {
      font-size: 14px;
      font-weight: 900;
      color: #fff;
    }

    .composerModelType {
      flex: 0 0 auto;
      font-size: 11px;
      font-weight: 900;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.09);
      border: 1px solid rgba(255,255,255,0.12);
      color: #f4f4f5;
    }

    .composerModelDesc {
      color: rgba(255,255,255,0.64);
      font-size: 12px;
      line-height: 1.55;
      margin-bottom: 8px;
    }

    .composerModelTags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .composerModelTag {
      font-size: 11px;
      font-weight: 800;
      padding: 4px 7px;
      border-radius: 999px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.88);
    }

    .composerModelPickerActions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      padding-top: 10px;
      margin-top: 10px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }

    .composerModelPickerActions button {
      background: rgba(255,255,255,0.08) !important;
      color: #f4f4f5 !important;
      border: 1px solid rgba(255,255,255,0.12) !important;
    }

    .composerRatioSelect {
      width: 104px;
      height: 46px;
      border-radius: 16px;
      padding: 0 10px;
      border: 1px solid rgba(255,255,255,0.12);
      outline: none;
      background: rgba(255,255,255,0.08);
      color: #f4f4f5;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
      flex: 0 0 auto;
    }

    .composerRatioSelect:disabled {
      opacity: 0.48;
      cursor: not-allowed;
    }

    .composerRatioSelect option {
      background: #181a25;
      color: #f4f4f5;
    }

    /* v14：底部生成对话框升级为更大气的控制台样式 */
    .composer {
      width: min(1120px, calc(100vw - 96px));
      min-width: min(860px, calc(100vw - 34px));
      min-height: 230px;
      max-width: calc(100vw - 24px);
      max-height: calc(100vh - 94px);
      padding: 16px;
      border-radius: 30px;
      resize: both;
      overflow: auto;
      background:
        radial-gradient(circle at 12% 0%, rgba(155, 166, 255, 0.22), transparent 36%),
        linear-gradient(180deg, rgba(24, 27, 40, 0.98), rgba(12, 14, 22, 0.98));
      border: 1px solid rgba(255,255,255,0.16);
      box-shadow: 0 30px 90px rgba(0,0,0,0.56), inset 0 1px 0 rgba(255,255,255,0.06);
    }

    .composerMeta {
      margin: 0 6px 12px;
      font-size: 13px;
      color: rgba(255,255,255,0.62);
      display: block;
      max-height: 240px;
      overflow-y: auto;
    }

    .composerTipLine {
      display: block;
      margin-bottom: 10px;
      color: rgba(255,255,255,0.66);
      line-height: 1.6;
    }

    .composerMediaTray {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
      gap: 10px;
      width: 100%;
    }

    .composerMediaCard {
      position: relative;
      min-height: 138px;
      border-radius: 18px;
      overflow: hidden;
      background: rgba(255,255,255,0.055);
      border: 1px solid rgba(255,255,255,0.12);
      cursor: pointer;
      transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .composerMediaCard:hover {
      transform: translateY(-1px);
      border-color: rgba(176,184,255,0.34);
      box-shadow: 0 10px 28px rgba(0,0,0,0.24);
    }

    .composerMediaThumb {
      width: 100%;
      height: 102px;
      display: block;
      object-fit: cover;
      background: #040506;
    }

    .composerMediaInfo {
      padding: 8px 10px 10px;
      font-size: 12px;
      line-height: 1.5;
      color: rgba(255,255,255,0.74);
    }

    .composerMediaName {
      display: block;
      font-weight: 800;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 3px;
    }

    .composerMediaHint {
      color: rgba(255,255,255,0.5);
      font-size: 11px;
    }

    .composerMediaType {
      position: absolute;
      left: 8px;
      top: 8px;
      z-index: 2;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(0,0,0,0.62);
      border: 1px solid rgba(255,255,255,0.18);
      color: #fff;
      font-size: 11px;
      font-weight: 900;
    }

    .composerMediaRemove {
      position: absolute;
      right: 8px;
      top: 8px;
      z-index: 2;
      width: 26px;
      height: 26px;
      padding: 0 !important;
      border-radius: 50% !important;
      background: rgba(0,0,0,0.72) !important;
      color: #fff !important;
      border: 1px solid rgba(255,255,255,0.22) !important;
      font-size: 16px !important;
      line-height: 24px;
    }

    .composerInner {
      display: grid;
      grid-template-columns: auto 118px 118px minmax(280px, 1fr) auto auto auto auto;
      gap: 12px;
      align-items: end;
    }

    .composerText {
      min-height: 78px;
      max-height: 235px;
      border-radius: 22px;
      padding: 17px 18px;
      font-size: 16px;
      line-height: 1.65;
      background: rgba(5, 7, 13, 0.62);
      border-color: rgba(255,255,255,0.14);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(255,255,255,0.02);
    }

    .composerText:focus {
      border-color: rgba(176, 184, 255, 0.42);
      box-shadow: 0 0 0 3px rgba(140,149,255,0.14), inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .composerControlGroup {
      min-width: 118px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .composerControlLabel {
      padding-left: 3px;
      color: rgba(255,255,255,0.58);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.4px;
    }

    .composerQualitySelect,
    .composerRatioSelect,
    .composerDurationSelect {
      width: 82px;
      min-width: 82px;
      padding: 0 10px;
    }

    .composerQualitySelect:disabled,
    .composerRatioSelect:disabled,
    .composerDurationSelect:disabled {
      opacity: 0.48;
      cursor: not-allowed;
    }

    .composerQualitySelect option,
    .composerRatioSelect option,
    .composerDurationSelect option {
      background: #181a25;
      color: #f4f4f5;
    }

    .composerModelBtn,
    .composerImgLabel,
    .composerInner > button {
      height: 54px;
      border-radius: 18px !important;
    }

    .composerDurationGroup.hidden {
      display: none;
    }


    .composerModelBtn.selected { width: 190px; }

    .composerResizeHandle {
      position: absolute;
      z-index: 4;
      width: 34px;
      height: 34px;
      top: 0;
      opacity: 0.78;
      pointer-events: auto;
    }

    .composerResizeHandle::before {
      content: "";
      position: absolute;
      inset: 8px;
      border-top: 2px solid rgba(255,255,255,0.52);
      filter: drop-shadow(0 0 5px rgba(140,149,255,0.35));
    }

    .composerResizeHandle.left {
      left: 0;
      cursor: nwse-resize;
    }

    .composerResizeHandle.left::before {
      border-left: 2px solid rgba(255,255,255,0.52);
      border-top-left-radius: 10px;
    }

    .composerResizeHandle.right {
      right: 0;
      cursor: nesw-resize;
    }

    .composerResizeHandle.right::before {
      border-right: 2px solid rgba(255,255,255,0.52);
      border-top-right-radius: 10px;
    }

    .composerResizeHandle:hover { opacity: 1; }


    .composerImgLabel {
      width: 54px;
      font-size: 22px;
      background: rgba(255,255,255,0.09);
      border-color: rgba(255,255,255,0.15);
    }

    .composerInner > button {
      padding-left: 16px !important;
      padding-right: 16px !important;
      font-size: 14px;
    }

    @media (max-width: 1080px) {
      .composerInner {
        grid-template-columns: auto 1fr 1fr;
        align-items: stretch;
      }
      .composerText { grid-column: 1 / -1; }
      .composerImgLabel,
      .composerAIBtn,
      #composerAIBtn,
      #composerSendBtn,
      #composerCloseBtn { min-width: 100%; }
    }

    @media (max-width: 760px) {
      .composer { width: calc(100vw - 34px); padding: 12px; }
      .composerInner { grid-template-columns: 1fr 1fr; }
      .composerModelBtn { width: 100%; }
      .composerModelBtn.selected { width: 100%; }
      .composerControlGroup,
      .composerQualitySelect,
      .composerRatioSelect { width: 100%; min-width: 0; }
      .composerText { min-height: 92px; }
    }
    .startGate {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: radial-gradient(circle at center, rgba(48, 52, 76, 0.88), rgba(6, 7, 11, 0.96));
      backdrop-filter: blur(14px);
    }

    .startGate.hidden { display: none; }

    .startCard {
      width: min(640px, 100%);
      padding: 30px;
      border-radius: 26px;
      background: linear-gradient(180deg, rgba(29, 31, 43, 0.98), rgba(18, 19, 27, 0.98));
      border: 1px solid rgba(255,255,255,0.13);
      box-shadow: 0 28px 90px rgba(0,0,0,0.55);
    }

    .startCard h1 {
      margin: 0 0 12px;
      font-size: 28px;
      line-height: 1.25;
    }

    .startCard p {
      margin: 8px 0;
      color: #c9c9d2;
      line-height: 1.7;
      font-size: 15px;
    }

    .startActions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
    }

    .startNote {
      margin-top: 16px;
      padding: 12px;
      border-radius: 14px;
      background: rgba(255,255,255,0.06);
      color: #aaa !important;
      font-size: 13px !important;
    }

    .helpPanelBackdrop {
      position: fixed;
      inset: 0;
      z-index: 180;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(0,0,0,0.45);
      backdrop-filter: blur(8px);
    }

    .helpPanelBackdrop.show { display: flex; }

    .helpPanel {
      width: min(560px, 100%);
      border-radius: 24px;
      padding: 24px;
      background: rgba(25, 27, 38, 0.98);
      border: 1px solid rgba(255,255,255,0.13);
      box-shadow: 0 24px 80px rgba(0,0,0,0.55);
    }

    .helpPanel h2 { margin: 0 0 14px; }
    .helpPanel ul { margin: 0; padding-left: 20px; color: #d7d7df; line-height: 1.9; }
    .helpPanel .helpActions { margin-top: 18px; text-align: right; }

    .imageModalBackdrop {
      position: fixed;
      inset: 0;
      z-index: 220;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 28px;
      background: rgba(0,0,0,0.74);
      backdrop-filter: blur(10px);
    }

    .imageModalBackdrop.show { display: flex; }

    .imageModal {
      width: min(1100px, 96vw);
      max-height: 92vh;
      border-radius: 24px;
      padding: 14px;
      background: rgba(18, 20, 29, 0.98);
      border: 1px solid rgba(255,255,255,0.14);
      box-shadow: 0 28px 90px rgba(0,0,0,0.7);
    }

    .imageModal img,
    .imageModal video {
      width: 100%;
      max-height: calc(92vh - 90px);
      object-fit: contain;
      display: block;
      border-radius: 16px;
      background: #050505;
    }

    .imageModal img.hidden,
    .imageModal video.hidden { display: none; }

    .imageModalActions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 10px;
      margin-top: 12px;
    }

    .imageModalActions button,
    .imageModalActions a {
      border: none;
      border-radius: 12px;
      padding: 9px 13px;
      background: #f4f4f5;
      color: #101014;
      cursor: pointer;
      font-weight: 800;
      text-decoration: none;
    }

    .imageModalActions button.secondary {
      background: #20222d;
      color: #ddd;
      border: 1px solid #3b3e4d;
    }



    .remoteImportBackdrop {
      position: fixed;
      inset: 0;
      z-index: 280;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 22px;
      background: rgba(0,0,0,0.64);
      backdrop-filter: blur(10px);
    }

    .remoteImportBackdrop.show { display: flex; }

    .remoteImportPanel {
      width: min(520px, 94vw);
      border-radius: 24px;
      padding: 22px;
      background: linear-gradient(180deg, rgba(28, 31, 45, 0.99), rgba(13, 15, 23, 0.99));
      border: 1px solid rgba(255,255,255,0.15);
      box-shadow: 0 28px 90px rgba(0,0,0,0.7);
    }

    .remoteImportPanel h3 {
      margin: 0 0 10px;
      font-size: 20px;
    }

    .remoteImportPanel p {
      margin: 8px 0;
      color: rgba(255,255,255,0.72);
      line-height: 1.7;
      font-size: 14px;
    }

    .remoteImportUrl {
      margin: 12px 0;
      padding: 10px;
      border-radius: 14px;
      background: rgba(0,0,0,0.34);
      color: rgba(255,255,255,0.62);
      font-size: 12px;
      word-break: break-all;
      max-height: 88px;
      overflow: auto;
    }

    .remoteImportActions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 16px;
    }

    .remoteImportActions button {
      border: none;
      border-radius: 13px;
      padding: 10px 14px;
      background: #f4f4f5;
      color: #101014;
      cursor: pointer;
      font-weight: 900;
    }

    .remoteImportActions button.secondary {
      background: #20222d;
      color: #ddd;
      border: 1px solid #3b3e4d;
    }

    .aiPanelBackdrop {
      position: fixed;
      inset: 0;
      z-index: 230;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 22px;
      background: rgba(0,0,0,0.58);
      backdrop-filter: blur(10px);
    }

    .aiPanelBackdrop.show { display: flex; }

    .aiPanel {
      width: min(980px, 96vw);
      max-height: 92vh;
      overflow: auto;
      border-radius: 26px;
      padding: 22px;
      background: linear-gradient(180deg, rgba(26, 28, 41, 0.99), rgba(14, 16, 24, 0.99));
      border: 1px solid rgba(255,255,255,0.14);
      box-shadow: 0 28px 90px rgba(0,0,0,0.62);
    }

    .aiPanel h2 { margin: 0 0 6px; }
    .aiPanel p { margin: 7px 0; color: rgba(255,255,255,0.66); line-height: 1.65; }

    .aiPanelGrid {
      display: grid;
      grid-template-columns: 1.05fr 1.2fr;
      gap: 16px;
      margin-top: 14px;
    }

    .aiSection {
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 20px;
      padding: 14px;
      background: rgba(255,255,255,0.045);
    }

    .aiSection h3 { margin: 0 0 10px; font-size: 16px; }

    .presetList {
      display: grid;
      gap: 8px;
      max-height: 385px;
      overflow-y: auto;
      padding-right: 3px;
    }

    .presetBtn {
      width: 100%;
      text-align: left;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 14px;
      padding: 10px 11px;
      color: #f5f5f7;
      background: rgba(255,255,255,0.055);
      cursor: pointer;
    }

    .presetBtn:hover,
    .presetBtn.active {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.24);
    }

    .presetBtn b { display: block; margin-bottom: 3px; }
    .presetBtn span { display: block; color: rgba(255,255,255,0.54); font-size: 12px; line-height: 1.45; }

    .aiForm {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .aiField { display: flex; flex-direction: column; gap: 6px; }
    .aiField.full { grid-column: 1 / -1; }
    .aiField label { color: rgba(255,255,255,0.68); font-size: 12px; font-weight: 800; }

    .aiField input,
    .aiField select,
    .aiField textarea {
      width: 100%;
      border: 1px solid rgba(255,255,255,0.12);
      outline: none;
      border-radius: 12px;
      padding: 10px 11px;
      color: #fff;
      background: rgba(6, 7, 12, 0.58);
      font-size: 13px;
    }

    .aiField textarea {
      min-height: 86px;
      resize: vertical;
      font-family: Consolas, Monaco, monospace;
      line-height: 1.5;
    }

    .aiFieldHint {
      color: rgba(255,255,255,0.44);
      font-size: 11px;
      line-height: 1.5;
    }

    .advancedBox {
      margin-top: 10px;
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 12px;
    }

    .advancedBox summary {
      cursor: pointer;
      color: #fff;
      font-weight: 900;
      margin-bottom: 10px;
    }

    .aiActions {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 10px;
      margin-top: 15px;
    }

    .aiActions .leftActions,
    .aiActions .rightActions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .aiDocs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 10px;
    }

    .aiDocs a {
      display: block;
      border-radius: 12px;
      padding: 9px 10px;
      color: #fff;
      text-decoration: none;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.1);
      font-size: 13px;
    }

    .aiDocs a:hover { background: rgba(255,255,255,0.13); }

    .aiNote {
      margin-top: 10px;
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(255,210,122,0.1);
      border: 1px solid rgba(255,210,122,0.18);
      color: #ffd27a !important;
      font-size: 12px;
    }

    .composer button.aiGenerateBtn {
      background: linear-gradient(135deg, #ffffff, #bfc7ff);
      color: #0d1020;
    }

    @media (max-width: 900px) {
      .aiPanelGrid { grid-template-columns: 1fr; }
      .aiForm { grid-template-columns: 1fr; }
      .aiDocs { grid-template-columns: 1fr; }
    }

    @media (max-width: 760px) {
      .topbar { gap: 6px; padding: 10px; height: 64px; }
      .brand span:not(.brandMark) { display: none; }
      .topbar button { padding: 8px 9px; font-size: 12px; }
      .tips { display: none; }
      .box { min-width: 230px; }
      .startCard { padding: 22px; }
      .composer { width: calc(100vw - 34px); }
      .miniHelp { display: none; }
    }

/* =========================
   Pro 优化层：画布性能 + 底部编辑器可用性
   说明：保留原 UI 风格，只增强大量卡片/连线时的拖拽与缩放体验。
========================= */
.viewport {
  touch-action: none;
  overscroll-behavior: none;
}

.canvas {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.connections {
  contain: strict;
}

.box {
  contain: layout paint style;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.box.dragging {
  will-change: transform;
}

.viewport.panning .box {
  box-shadow: none !important;
}

.viewport.panning .box::before {
  opacity: 0.28 !important;
}

.viewport.panning .connectionLine,
.viewport.panning .connectionLine.selected,
.viewport.panning .tempLine {
  filter: none !important;
  transition: none !important;
}

.viewport.panning .imageItem img,
.viewport.panning .imageItem video {
  opacity: 0.92;
}

.imageItem img,
.imageItem video,
.composerMediaThumb {
  content-visibility: auto;
}

/* 底部编辑器增强：文字多时不再憋在一条小输入框里 */
.composer {
  min-height: min(560px, calc(100vh - 94px));
  width: min(1240px, calc(100vw - 64px));
}

.composerInner {
  grid-template-columns: auto 118px 118px minmax(520px, 1fr) auto auto auto auto;
  align-items: stretch;
}

.composerText {
  min-height: 180px !important;
  max-height: min(50vh, 560px) !important;
  resize: vertical;
  overflow-y: auto;
}

.composerMeta {
  max-height: min(30vh, 300px) !important;
}

.composer.show .composerText:focus {
  min-height: 220px !important;
}

@media (max-width: 1080px) {
  .composer {
    min-height: min(620px, calc(100vh - 82px));
    width: calc(100vw - 34px);
  }
  .composerInner {
    grid-template-columns: 1fr 1fr;
  }
  .composerText {
    grid-column: 1 / -1;
    min-height: 220px !important;
  }
}

@media (max-width: 760px) {
  .composer {
    width: calc(100vw - 18px);
    min-height: min(640px, calc(100vh - 72px));
    bottom: 10px;
  }
  .composerText {
    min-height: 240px !important;
    max-height: 54vh !important;
  }
}


/* v15：修正底部编辑器尺寸——保持原本紧凑宽度，只优化输入区舒适度，避免整个面板铺满屏幕 */
.composer {
  width: min(900px, calc(100vw - 120px)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-width: calc(100vw - 48px) !important;
  max-height: min(56vh, 520px) !important;
  padding: 12px !important;
  border-radius: 24px !important;
  resize: none !important;
  overflow: visible !important;
}

.composerMeta {
  margin: 0 4px 8px !important;
  max-height: 118px !important;
  overflow-y: auto !important;
  font-size: 12px !important;
  display: block !important;
}

.composerTipLine {
  margin-bottom: 8px !important;
  line-height: 1.55 !important;
}

.composerInner {
  display: grid !important;
  grid-template-columns: 190px 118px 118px minmax(280px, 1fr) 54px auto auto auto !important;
  gap: 10px !important;
  align-items: end !important;
}

.composerText {
  min-height: 118px !important;
  max-height: min(34vh, 260px) !important;
  height: 118px;
  padding: 15px 16px !important;
  border-radius: 20px !important;
  font-size: 15px !important;
  line-height: 1.62 !important;
  resize: vertical !important;
  overflow-y: auto !important;
}

.composerModelBtn,
.composerImgLabel,
.composerInner > button,
.composerQualitySelect,
.composerRatioSelect {
  height: 52px !important;
  border-radius: 16px !important;
}

.composerModelBtn,
.composerModelBtn.selected {
  width: 190px !important;
}

.composerMediaTray {
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)) !important;
  gap: 8px !important;
}

.composerMediaCard {
  min-height: 104px !important;
  border-radius: 15px !important;
}

.composerMediaThumb {
  height: 72px !important;
}

.composerMediaInfo {
  padding: 6px 8px 8px !important;
  font-size: 11px !important;
}

.composerResizeHandle {
  display: none !important;
}

@media (max-width: 1180px) {
  .composer {
    width: calc(100vw - 48px) !important;
  }
  .composerInner {
    grid-template-columns: 190px 1fr 1fr 54px auto auto auto !important;
  }
  .composerText {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  .composer {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 72vh !important;
    padding: 10px !important;
    overflow-y: auto !important;
  }
  .composerInner {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .composerText {
    min-height: 130px !important;
    max-height: 40vh !important;
    grid-column: 1 / -1 !important;
  }
  .composerModelBtn,
  .composerModelBtn.selected,
  .composerControlGroup,
  .composerQualitySelect,
  .composerRatioSelect,
  .composerImgLabel,
  #composerAIBtn,
  #composerSendBtn,
  #composerCloseBtn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* v16：既梦式底部输入栏修正
   目标：不再把整个编辑器撑成大控制台；输入区更宽、更舒服；媒体预览变成小缩略图条；按钮固定在底部工具栏，不再挤压变形。 */
.composer {
  width: min(1120px, calc(100vw - 72px)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: calc(100vw - 40px) !important;
  max-height: min(42vh, 420px) !important;
  height: auto !important;
  bottom: 18px !important;
  padding: 10px 12px 12px !important;
  border-radius: 22px !important;
  resize: none !important;
  overflow: hidden !important;
  background: rgba(18, 20, 31, 0.96) !important;
  border: 1px solid rgba(145, 153, 206, 0.34) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

.composerMeta {
  height: auto !important;
  min-height: 0 !important;
  max-height: 66px !important;
  margin: 0 2px 8px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.62) !important;
}

.composerTipLine {
  flex: 1 1 auto !important;
  min-width: 180px !important;
  margin: 0 !important;
  line-height: 1.45 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.composerMediaTray {
  flex: 0 1 min(420px, 42vw) !important;
  width: auto !important;
  max-width: min(420px, 42vw) !important;
  max-height: 58px !important;
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 1px 2px 4px !important;
}

.composerMediaCard {
  flex: 0 0 56px !important;
  width: 56px !important;
  height: 56px !important;
  min-height: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
}

.composerMediaThumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.composerMediaInfo,
.composerMediaHint,
.composerMediaName {
  display: none !important;
}

.composerMediaType {
  left: 4px !important;
  top: 4px !important;
  padding: 2px 5px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  max-width: 48px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.composerMediaRemove {
  right: 3px !important;
  top: 3px !important;
  width: 18px !important;
  height: 18px !important;
  line-height: 16px !important;
  font-size: 13px !important;
}

.composerMediaLocalState {
  display: none !important;
}

.composerInner {
  display: grid !important;
  grid-template-columns: 174px 88px 88px minmax(0, 1fr) 44px 68px 56px 52px !important;
  grid-template-rows: auto 42px !important;
  grid-template-areas:
    "text text text text text text text text"
    "model quality ratio spacer image ai send close" !important;
  gap: 8px !important;
  align-items: end !important;
}

.composerText {
  grid-area: text !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 92px !important;
  height: 92px;
  max-height: min(26vh, 190px) !important;
  resize: vertical !important;
  overflow-y: auto !important;
  padding: 13px 15px !important;
  border-radius: 18px !important;
  font-size: 15px !important;
  line-height: 1.62 !important;
  background: rgba(4, 6, 13, 0.72) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.composerText:focus {
  border-color: rgba(174, 184, 255, 0.46) !important;
  box-shadow: 0 0 0 3px rgba(130, 140, 255, 0.12), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.composerModelBtn {
  grid-area: model !important;
}

.composerInner > .composerControlGroup:nth-of-type(1) {
  grid-area: quality !important;
}

.composerInner > .composerControlGroup:nth-of-type(2) {
  grid-area: ratio !important;
}

.composerImgLabel {
  grid-area: image !important;
}

#composerAIBtn {
  grid-area: ai !important;
}

#composerSendBtn {
  grid-area: send !important;
}

#composerCloseBtn {
  grid-area: close !important;
}

.composerControlLabel {
  display: none !important;
}

.composerControlGroup {
  min-width: 0 !important;
  width: 100% !important;
  height: 42px !important;
  display: block !important;
}

.composerQualitySelect,
.composerRatioSelect {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 10px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
}

.composerModelBtn,
.composerModelBtn.selected {
  width: 174px !important;
  min-width: 0 !important;
  height: 42px !important;
  border-radius: 14px !important;
}

.composerModelBtn .modelBtnLabel {
  font-size: 12px !important;
}

.composerImgLabel,
.composerInner > button {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 14px !important;
}

.composerImgLabel {
  width: 44px !important;
  min-width: 44px !important;
  font-size: 19px !important;
}

#composerAIBtn,
#composerSendBtn,
#composerCloseBtn {
  width: 100% !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

#composerAIBtn {
  font-weight: 900 !important;
}

.composerResizeHandle {
  display: none !important;
}

@media (max-width: 1080px) {
  .composer {
    width: calc(100vw - 34px) !important;
    bottom: 12px !important;
    max-height: 58vh !important;
    overflow-y: auto !important;
  }
  .composerMeta {
    max-height: 96px !important;
    align-items: flex-start !important;
    flex-direction: column !important;
  }
  .composerTipLine {
    width: 100% !important;
  }
  .composerMediaTray {
    max-width: 100% !important;
    flex-basis: auto !important;
  }
  .composerInner {
    grid-template-columns: 1fr 1fr 1fr 44px 68px 56px 52px !important;
    grid-template-areas:
      "text text text text text text text"
      "model model quality ratio image ai send"
      "close close close close close close close" !important;
    grid-template-rows: auto 42px 38px !important;
  }
  #composerCloseBtn {
    height: 38px !important;
    min-height: 38px !important;
  }
}

@media (max-width: 720px) {
  .composer {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    max-height: 72vh !important;
    padding: 9px !important;
  }
  .composerInner {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "text text"
      "model model"
      "quality ratio"
      "image ai"
      "send close" !important;
    grid-template-rows: auto 40px 40px 40px 40px !important;
    gap: 7px !important;
  }
  .composerText {
    min-height: 112px !important;
    max-height: 36vh !important;
  }
  .composerModelBtn,
  .composerModelBtn.selected,
  .composerQualitySelect,
  .composerRatioSelect,
  .composerImgLabel,
  #composerAIBtn,
  #composerSendBtn,
  #composerCloseBtn {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* v17：最终修正底部编辑器 —— 参考既梦的紧凑输入栏
   重点：外框只包住内容，不再出现巨大空白面板；按钮固定尺寸不换行；媒体变成横向小缩略图。 */
#composer.composer {
  width: min(840px, calc(100vw - 56px)) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  left: 50% !important;
  bottom: 18px !important;
  transform: translateX(-50%) translateY(130%) !important;
  padding: 10px !important;
  border-radius: 20px !important;
  resize: none !important;
  overflow: visible !important;
  background: rgba(15, 17, 25, 0.97) !important;
  border: 1px solid rgba(129, 139, 194, 0.36) !important;
  box-shadow: 0 16px 46px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.055) !important;
  backdrop-filter: blur(16px) !important;
}

#composer.composer.show {
  transform: translateX(-50%) translateY(0) !important;
}

/* 顶部说明不再占空间；只保留媒体缩略图条 */
#composer .composerMeta {
  margin: 0 0 8px !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: 58px !important;
  display: block !important;
  overflow: visible !important;
  color: rgba(255,255,255,0.58) !important;
  font-size: 12px !important;
}

#composer .composerTipLine {
  display: none !important;
}

#composer .composerMediaTray {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 58px !important;
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 2px 4px !important;
}

#composer .composerMediaCard {
  flex: 0 0 56px !important;
  width: 56px !important;
  height: 56px !important;
  min-height: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}

#composer .composerMediaThumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

#composer .composerMediaInfo,
#composer .composerMediaHint,
#composer .composerMediaName,
#composer .composerMediaLocalState {
  display: none !important;
}

#composer .composerMediaType {
  left: 4px !important;
  top: 4px !important;
  padding: 2px 5px !important;
  max-width: 48px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#composer .composerMediaRemove {
  right: 3px !important;
  top: 3px !important;
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  line-height: 16px !important;
  font-size: 13px !important;
}

/* 输入区 + 底部工具栏：既梦式结构 */
#composer .composerInner {
  display: grid !important;
  grid-template-columns: 150px 72px 72px minmax(12px, 1fr) 42px 76px 58px 58px !important;
  grid-template-rows: auto 42px !important;
  grid-template-areas:
    "text text text text text text text text"
    "model quality ratio spacer image ai send close" !important;
  gap: 8px !important;
  align-items: end !important;
}

#composer .composerText {
  grid-area: text !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 128px !important;
  height: 128px;
  max-height: min(34vh, 230px) !important;
  resize: vertical !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 14px 15px !important;
  border-radius: 18px !important;
  font-size: 15px !important;
  line-height: 1.62 !important;
  color: #f4f4f5 !important;
  background: rgba(5, 7, 13, 0.74) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045) !important;
}

#composer .composerText:focus {
  border-color: rgba(174, 184, 255, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(130, 140, 255, 0.12), inset 0 1px 0 rgba(255,255,255,0.045) !important;
}

#composer .composerModelBtn { grid-area: model !important; }
#composer .composerInner > .composerControlGroup:nth-of-type(1) { grid-area: quality !important; }
#composer .composerInner > .composerControlGroup:nth-of-type(2) { grid-area: ratio !important; }
#composer .composerImgLabel { grid-area: image !important; }
#composer #composerAIBtn { grid-area: ai !important; }
#composer #composerSendBtn { grid-area: send !important; }
#composer #composerCloseBtn { grid-area: close !important; }

#composer .composerControlLabel {
  display: none !important;
}

#composer .composerControlGroup {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  display: block !important;
}

#composer .composerQualitySelect,
#composer .composerRatioSelect,
#composer .composerModelBtn,
#composer .composerModelBtn.selected,
#composer .composerImgLabel,
#composer .composerInner > button {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}

#composer .composerQualitySelect,
#composer .composerRatioSelect {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 9px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#composer .composerModelBtn,
#composer .composerModelBtn.selected {
  width: 150px !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  justify-content: flex-start !important;
  gap: 7px !important;
}

#composer .composerModelBtn .modelBtnLabel {
  display: inline !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: 12px !important;
}

#composer .composerImgLabel {
  width: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}

#composer #composerAIBtn,
#composer #composerSendBtn,
#composer #composerCloseBtn {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 42px !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  writing-mode: horizontal-tb !important;
  text-align: center !important;
}

#composer #composerAIBtn {
  min-width: 76px !important;
}

#composer .composerResizeHandle {
  display: none !important;
}

/* 模型选择浮层跟随紧凑输入栏，不再从屏幕左下角冒出来 */
#composer .composerModelPicker {
  left: 10px !important;
  bottom: calc(100% + 10px) !important;
  width: min(480px, calc(100vw - 64px)) !important;
  max-height: min(58vh, 430px) !important;
}

@media (max-width: 920px) {
  #composer.composer {
    width: calc(100vw - 28px) !important;
    bottom: 12px !important;
  }
  #composer .composerInner {
    grid-template-columns: 1fr 1fr 1fr 42px 76px 58px !important;
    grid-template-rows: auto 42px 40px !important;
    grid-template-areas:
      "text text text text text text"
      "model model quality ratio image ai"
      "send send send close close close" !important;
  }
  #composer .composerModelBtn,
  #composer .composerModelBtn.selected {
    width: 100% !important;
  }
}

@media (max-width: 620px) {
  #composer.composer {
    width: calc(100vw - 16px) !important;
    padding: 8px !important;
    max-height: 72vh !important;
    overflow-y: auto !important;
  }
  #composer .composerInner {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto 40px 40px 40px 40px !important;
    grid-template-areas:
      "text text"
      "model model"
      "quality ratio"
      "image ai"
      "send close" !important;
    gap: 7px !important;
  }
  #composer .composerText {
    min-height: 120px !important;
    max-height: 38vh !important;
  }
  #composer .composerQualitySelect,
  #composer .composerRatioSelect,
  #composer .composerModelBtn,
  #composer .composerModelBtn.selected,
  #composer .composerImgLabel,
  #composer .composerInner > button {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    line-height: 40px !important;
  }
}


/* v18：根据反馈最终压扁底部编辑器
   目标：外层大框只包住内容；输入框扁宽；按钮回到原先圆角胶囊形，不再变形；整体不再占大面积。 */
#composer.composer {
  width: min(980px, calc(100vw - 72px)) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(36vh, 300px) !important;
  left: 50% !important;
  bottom: 18px !important;
  padding: 10px 12px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  resize: none !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(143,151,255,0.16), transparent 34%),
    rgba(17, 19, 29, 0.965) !important;
  border: 1px solid rgba(130, 140, 195, 0.42) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.055) !important;
}

#composer.composer.show {
  transform: translateX(-50%) translateY(0) !important;
}

/* 顶部只放参考图缩略图，不出现大片说明文字 */
#composer .composerMeta {
  margin: 0 0 8px !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: 52px !important;
  display: block !important;
  overflow: hidden !important;
}

#composer .composerTipLine {
  display: none !important;
}

#composer .composerMediaTray {
  width: 100% !important;
  max-width: 100% !important;
  height: 48px !important;
  max-height: 48px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 2px 3px !important;
}

#composer .composerMediaCard {
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
  min-height: 0 !important;
  border-radius: 11px !important;
  overflow: hidden !important;
}

#composer .composerMediaThumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#composer .composerMediaInfo,
#composer .composerMediaHint,
#composer .composerMediaName,
#composer .composerMediaLocalState {
  display: none !important;
}

#composer .composerMediaType {
  left: 4px !important;
  top: 4px !important;
  padding: 2px 5px !important;
  max-width: 42px !important;
  font-size: 10px !important;
}

#composer .composerMediaRemove {
  right: 3px !important;
  top: 3px !important;
  width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  line-height: 15px !important;
  font-size: 12px !important;
  padding: 0 !important;
}

/* 输入框在上，工具条在下：扁宽，不再高大空心 */
#composer .composerInner {
  display: grid !important;
  grid-template-columns: 150px 74px 74px minmax(18px, 1fr) 38px 66px 54px 54px !important;
  grid-template-rows: 92px 38px !important;
  grid-template-areas:
    "text text text text text text text text"
    "model quality ratio spacer image ai send close" !important;
  gap: 8px !important;
  align-items: end !important;
}

#composer .composerText {
  grid-area: text !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 92px !important;
  min-height: 92px !important;
  max-height: 155px !important;
  resize: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  font-size: 15px !important;
  line-height: 1.58 !important;
  color: #f4f4f5 !important;
  background: rgba(5, 7, 13, 0.76) !important;
  border: 1px solid rgba(152, 162, 225, 0.34) !important;
  box-shadow: 0 0 0 1px rgba(116, 126, 190, 0.08), inset 0 1px 0 rgba(255,255,255,0.045) !important;
}

#composer .composerText:focus {
  border-color: rgba(179, 188, 255, 0.58) !important;
  box-shadow: 0 0 0 3px rgba(130, 140, 255, 0.14), inset 0 1px 0 rgba(255,255,255,0.045) !important;
}

#composer .composerModelBtn { grid-area: model !important; }
#composer .composerInner > .composerControlGroup:nth-of-type(1) { grid-area: quality !important; }
#composer .composerInner > .composerControlGroup:nth-of-type(2) { grid-area: ratio !important; }
#composer .composerImgLabel { grid-area: image !important; }
#composer #composerAIBtn { grid-area: ai !important; }
#composer #composerSendBtn { grid-area: send !important; }
#composer #composerCloseBtn { grid-area: close !important; }

#composer .composerControlLabel {
  display: none !important;
}

#composer .composerControlGroup {
  height: 38px !important;
  min-width: 0 !important;
  width: 100% !important;
  display: block !important;
}

#composer .composerQualitySelect,
#composer .composerRatioSelect,
#composer .composerModelBtn,
#composer .composerModelBtn.selected,
#composer .composerImgLabel,
#composer .composerInner > button {
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 15px !important;
  box-sizing: border-box !important;
}

#composer .composerQualitySelect,
#composer .composerRatioSelect {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#composer .composerModelBtn,
#composer .composerModelBtn.selected {
  width: 150px !important;
  min-width: 0 !important;
  padding: 0 9px !important;
  justify-content: flex-start !important;
  gap: 7px !important;
}

#composer .composerModelBtn .modelBtnLabel {
  display: inline !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: 12px !important;
}

#composer .composerImgLabel {
  width: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
}

#composer #composerAIBtn,
#composer #composerSendBtn,
#composer #composerCloseBtn {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 38px !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  writing-mode: horizontal-tb !important;
  text-align: center !important;
}

#composer #composerAIBtn {
  background: #dfe3ff !important;
  color: #080a14 !important;
}

#composer #composerSendBtn {
  background: #f5f5f7 !important;
  color: #090a10 !important;
}

#composer #composerCloseBtn {
  background: rgba(255,255,255,0.07) !important;
  color: #e6e7ee !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

#composer .composerResizeHandle {
  display: none !important;
}

@media (max-width: 920px) {
  #composer.composer {
    width: calc(100vw - 24px) !important;
    bottom: 12px !important;
    max-height: 44vh !important;
  }
  #composer .composerInner {
    grid-template-columns: 1fr 1fr 1fr 38px 66px 54px !important;
    grid-template-rows: 92px 38px 38px !important;
    grid-template-areas:
      "text text text text text text"
      "model model quality ratio image ai"
      "send send send close close close" !important;
  }
  #composer .composerModelBtn,
  #composer .composerModelBtn.selected {
    width: 100% !important;
  }
}

@media (max-width: 620px) {
  #composer.composer {
    width: calc(100vw - 14px) !important;
    padding: 8px !important;
    max-height: 58vh !important;
    overflow-y: auto !important;
  }
  #composer .composerInner {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 100px 38px 38px 38px 38px !important;
    grid-template-areas:
      "text text"
      "model model"
      "quality ratio"
      "image ai"
      "send close" !important;
    gap: 7px !important;
  }
  #composer .composerText {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 34vh !important;
  }
  #composer .composerQualitySelect,
  #composer .composerRatioSelect,
  #composer .composerModelBtn,
  #composer .composerModelBtn.selected,
  #composer .composerImgLabel,
  #composer .composerInner > button {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    line-height: 38px !important;
  }
}

/* v19：修正底部输入框按钮布局 + 大量画布时更丝滑
   - AI生成 / 发送 / 收起不再挤成竖排，也不会跑出外层框。
   - 小屏幕下工具条保持横向一排，必要时只压缩文字，不拆成上下两行。
   - SVG 连线使用非缩放描边，配合 JS 中的单层 transform，拖动画布更流畅。 */
.connectionsLayer,
.connectionLine,
.connectionHitLine,
.tempLine {
  vector-effect: non-scaling-stroke;
}

#composer.composer {
  width: min(940px, calc(100vw - 56px)) !important;
  max-width: calc(100vw - 18px) !important;
  max-height: min(34vh, 280px) !important;
  padding: 10px 12px 12px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(143,151,255,0.18), transparent 34%),
    rgba(17, 19, 29, 0.972) !important;
  border: 1px solid rgba(143, 153, 218, 0.48) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

#composer .composerMeta {
  margin: 0 0 7px !important;
  max-height: 50px !important;
  overflow: hidden !important;
}

#composer .composerInner {
  display: grid !important;
  grid-template-columns: 156px 78px 78px minmax(20px, 1fr) 40px 86px 62px 62px !important;
  grid-template-rows: 88px 40px !important;
  grid-template-areas:
    "text text text text text text text text"
    "model quality ratio spacer image ai send close" !important;
  gap: 8px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

#composer .composerText {
  grid-area: text !important;
  height: 88px !important;
  min-height: 88px !important;
  max-height: 138px !important;
  resize: none !important;
}

#composer .composerModelBtn { grid-area: model !important; }
#composer .composerInner > .composerControlGroup:nth-of-type(1) { grid-area: quality !important; }
#composer .composerInner > .composerControlGroup:nth-of-type(2) { grid-area: ratio !important; }
#composer .composerImgLabel { grid-area: image !important; }
#composer #composerAIBtn { grid-area: ai !important; }
#composer #composerSendBtn { grid-area: send !important; }
#composer #composerCloseBtn { grid-area: close !important; }

#composer .composerControlGroup,
#composer .composerQualitySelect,
#composer .composerRatioSelect,
#composer .composerModelBtn,
#composer .composerModelBtn.selected,
#composer .composerImgLabel,
#composer .composerInner > button {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  border-radius: 15px !important;
  box-sizing: border-box !important;
}

#composer .composerModelBtn,
#composer .composerModelBtn.selected {
  width: 156px !important;
  min-width: 0 !important;
}

#composer .composerImgLabel {
  width: 40px !important;
  min-width: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#composer #composerAIBtn,
#composer #composerSendBtn,
#composer #composerCloseBtn {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  writing-mode: horizontal-tb !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
}

@media (max-width: 700px) {
  #composer.composer {
    width: calc(100vw - 14px) !important;
    max-height: 48vh !important;
    padding: 8px !important;
    bottom: 10px !important;
  }

  #composer .composerInner {
    grid-template-columns: 40px 80px 58px 58px !important;
    grid-template-rows: 88px 38px 38px !important;
    grid-template-areas:
      "text text text text"
      "model model quality ratio"
      "image ai send close" !important;
    gap: 7px !important;
    justify-content: center !important;
  }

  #composer .composerText {
    height: 88px !important;
    min-height: 88px !important;
    max-height: 32vh !important;
  }

  #composer .composerControlGroup,
  #composer .composerQualitySelect,
  #composer .composerRatioSelect,
  #composer .composerModelBtn,
  #composer .composerModelBtn.selected,
  #composer .composerImgLabel,
  #composer .composerInner > button {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 1 !important;
  }

  #composer .composerModelBtn,
  #composer .composerModelBtn.selected {
    width: 100% !important;
  }

  #composer .composerImgLabel {
    width: 40px !important;
    min-width: 40px !important;
  }

  #composer #composerAIBtn,
  #composer #composerSendBtn,
  #composer #composerCloseBtn {
    font-size: 12px !important;
    padding: 0 4px !important;
  }
}

@media (max-width: 340px) {
  #composer .composerInner {
    grid-template-columns: 38px 76px 56px 56px !important;
    gap: 6px !important;
  }
  #composer #composerAIBtn,
  #composer #composerSendBtn,
  #composer #composerCloseBtn {
    font-size: 11px !important;
  }
}


/* =========================
   v22 极速拖动画布补丁
   核心：拖动主画布时，不再让浏览器同时合成 SVG 长连线、卡片内容、图片缩略图、按钮阴影。
   画布多卡片时会临时进入 fastPanning，只保留卡片外形；松手后全部恢复。
========================= */
.box {
  /* 取消每张卡片常驻 GPU 图层。卡片多时，常驻 translateZ(0) 反而会让合成压力更大。 */
  transform: none;
  backface-visibility: visible;
  will-change: auto;
}

.box.dragging {
  will-change: transform;
}

.viewport.panning {
  user-select: none;
}

.viewport.panning .connections {
  /* 拖动主画布时先隐藏 SVG 连线层。
     长曲线 + 透明命中线 + 发光效果是掉帧大头，松手后立即恢复重绘。 */
  visibility: hidden !important;
}

.viewport.fastPanning .box {
  background: rgba(36, 39, 54, 0.96) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}

.viewport.fastPanning .boxBody,
.viewport.fastPanning .nodeDot,
.viewport.fastPanning .danger,
.viewport.fastPanning .boxHint,
.viewport.fastPanning .imageTools,
.viewport.fastPanning .imageGrid,
.viewport.fastPanning .mediaBadge,
.viewport.fastPanning .imageActions,
.viewport.fastPanning .removeImage {
  visibility: hidden !important;
}

.viewport.fastPanning .boxHeader {
  opacity: 0.78 !important;
}

.viewport.fastPanning .cardTitleDisplay {
  color: rgba(255,255,255,0.86) !important;
}

.viewport.fastPanning .box::before {
  opacity: 0 !important;
}

.viewport.fastPanning .box:hover,
.viewport.fastPanning .box.dragTarget {
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  .viewport.panning .canvas {
    transition: none !important;
  }
}

/* =========================
   v23 真正拖动优化：Canvas 轻量预览层
   拖动画布时直接隐藏真实 DOM 卡片层与 SVG 连线层，只移动/重绘一个轻量 canvas。
   松手后再恢复真实卡片与可点击连线。
========================= */
.panPreviewCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
  display: none;
}

.viewport.previewPanning .panPreviewCanvas {
  display: block !important;
}

.viewport.previewPanning .canvas,
.viewport.previewPanning .connections {
  visibility: hidden !important;
}

.viewport.previewPanning {
  cursor: grabbing;
}




/* =========================
   v33 右上角 AI 任务浮动卡片
   多任务分开弹出；默认 30 秒后自动滑走；可锁定直到任务结束。
========================= */
.aiTaskPanel {
  position: fixed;
  top: 76px;
  right: 22px;
  width: 292px;
  max-width: calc(100vw - 24px);
  z-index: 2400;
  pointer-events: none;
}

.aiTaskPanel.show {
  display: block;
}

.aiTaskList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.aiTaskItem {
  pointer-events: auto;
  padding: 12px 13px 11px;
  border-radius: 14px;
  border: 1px solid rgba(33, 255, 136, 0.62);
  background: linear-gradient(135deg, rgba(10, 30, 24, 0.96), rgba(7, 12, 22, 0.96));
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(20, 255, 126, 0.08) inset,
    0 0 28px rgba(28, 255, 134, 0.16);
  backdrop-filter: blur(12px);
  user-select: none;
  transform: translate3d(0,0,0);
  animation: aiTaskCardIn .22s ease-out;
}

@keyframes aiTaskCardIn {
  from { opacity: 0; transform: translate3d(18px, -8px, 0) scale(.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.aiTaskItem.processing,
.aiTaskItem.polling,
.aiTaskItem.creating,
.aiTaskItem.queued {
  border-color: rgba(35, 232, 132, 0.70);
}

.aiTaskItem.success {
  border-color: rgba(35, 255, 136, 0.88);
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(36, 255, 135, 0.14) inset,
    0 0 34px rgba(36, 255, 135, 0.24);
}

.aiTaskItem.warning {
  border-color: rgba(255, 194, 74, 0.74);
  background: linear-gradient(135deg, rgba(39, 29, 8, 0.96), rgba(9, 13, 23, 0.96));
  box-shadow: 0 14px 38px rgba(0,0,0,.42), 0 0 28px rgba(255, 184, 54, .15);
}

.aiTaskItem.error {
  border-color: rgba(255, 91, 91, 0.78);
  background: linear-gradient(135deg, rgba(40, 10, 14, 0.96), rgba(9, 13, 23, 0.96));
  box-shadow: 0 14px 38px rgba(0,0,0,.42), 0 0 28px rgba(255, 73, 73, .16);
}

.aiTaskTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
}

.aiTaskTopMain {
  min-width: 0;
  flex: 1;
}

.aiTaskMiniLabel {
  display: block;
  font-size: 10px;
  color: rgba(190, 255, 221, 0.76);
  margin-bottom: 4px;
}

.aiTaskTitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
}

.aiTaskActions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.aiTaskIconBtn,
.aiTaskBadge {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.88);
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
}

.aiTaskBadge {
  padding: 4px 7px;
}

.aiTaskIconBtn {
  padding: 4px 7px;
  cursor: pointer;
}

.aiTaskIconBtn:hover {
  background: rgba(255,255,255,.13);
}

.aiTaskIconBtn.pinned {
  border-color: rgba(96, 196, 255, .56);
  background: rgba(96, 196, 255, .16);
  color: #dff4ff;
}

.aiTaskBadge.processing,
.aiTaskBadge.creating,
.aiTaskBadge.polling,
.aiTaskBadge.queued {
  background: rgba(22, 255, 126, .12);
  color: #d8ffe9;
}

.aiTaskBadge.success {
  background: rgba(22, 255, 126, .18);
  color: #ddffeb;
}

.aiTaskBadge.warning {
  background: rgba(255, 190, 72, .16);
  color: #fff1c8;
}

.aiTaskBadge.error {
  background: rgba(255, 82, 82, .18);
  color: #ffdada;
}

.aiTaskBigPercent {
  margin-top: 2px;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #24ff8d;
  text-shadow: 0 0 14px rgba(36, 255, 141, .38);
}

.aiTaskItem.warning .aiTaskBigPercent {
  color: #ffd166;
  text-shadow: 0 0 14px rgba(255, 209, 102, .28);
}

.aiTaskItem.error .aiTaskBigPercent {
  color: #ff6868;
  text-shadow: 0 0 14px rgba(255, 104, 104, .28);
}

.aiTaskMessage {
  margin: 6px 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(226, 239, 255, .76);
}

.aiTaskProgressBar {
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.11);
}

.aiTaskProgressBar > i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(31, 255, 126, .95), rgba(87, 226, 255, .95));
  transition: width .25s ease;
}

.aiTaskMetaLine {
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  color: rgba(184, 255, 219, .62);
}

.aiTaskTaskId,
.aiTaskCountdown {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiTaskTaskId {
  max-width: 138px;
}

.aiTaskCountdown {
  color: rgba(208, 236, 255, .72);
}

@media (max-width: 720px) {
  .aiTaskPanel {
    top: 68px;
    right: 10px;
    width: 244px;
  }

  .aiTaskBigPercent {
    font-size: 23px;
  }
}


.aiTaskIconBtn[data-action="query"] {
  border-color: rgba(35, 255, 136, .42);
  background: rgba(35, 255, 136, .12);
  color: #dfffea;
}

.aiTaskIconBtn[data-action="query"]:hover {
  background: rgba(35, 255, 136, .2);
}

.viewport[data-zoom]::after {
  content: attr(data-zoom) "%";
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255,255,255,0.86);
  background: rgba(10,14,28,0.72);
  border: 1px solid rgba(255,255,255,0.12);
  pointer-events: none;
  opacity: 0.9;
  z-index: 6;
}

/* v49：输入框 @ 本地图片引用菜单 */
.composerMentionPicker {
  position: fixed;
  z-index: 120;
  max-height: 292px;
  overflow: auto;
  padding: 8px;
  border-radius: 18px;
  background: rgba(16, 18, 28, 0.96);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 18px 60px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(18px);
}

.composerMentionPicker[hidden] {
  display: none !important;
}

.composerMentionItem {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 8px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  background: transparent;
  color: #f4f4f5;
  cursor: pointer;
  text-align: left;
}

.composerMentionItem:hover,
.composerMentionItem.active {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.16);
}

.composerMentionThumb {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  display: block;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}

.composerMentionThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.composerMentionText {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.composerMentionText b,
.composerMentionText small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composerMentionText b {
  font-size: 13px;
  color: #fff;
}

.composerMentionText small {
  font-size: 12px;
  color: rgba(255,255,255,0.58);
}

.composerMentionUse {
  font-size: 12px;
  color: rgba(185, 198, 255, 0.9);
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(120, 130, 255, 0.13);
}

.composerMentionEmpty {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: rgba(255,255,255,0.82);
}

.composerMentionEmpty span {
  color: rgba(255,255,255,0.58);
  font-size: 12px;
}

/* =========================
   v51 大画布性能补丁
   远景模式只保留卡片轮廓/标题，避免缩到很小还渲染大量图片、滚动区、按钮。
========================= */
.viewport.farZoom .box {
  box-shadow: none !important;
  background: rgba(36, 39, 54, 0.96) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.viewport.farZoom .boxBody,
.viewport.farZoom .nodeDot,
.viewport.farZoom .danger,
.viewport.farZoom .boxHint,
.viewport.farZoom .imageTools,
.viewport.farZoom .imageGrid,
.viewport.farZoom .mediaBadge,
.viewport.farZoom .imageActions,
.viewport.farZoom .removeImage,
.viewport.farZoom .box::before {
  visibility: hidden !important;
}

.viewport.farZoom .boxHeader {
  opacity: 0.86 !important;
}

.viewport.farZoom .cardTitleDisplay {
  color: rgba(255,255,255,0.9) !important;
}


/* =========================
   v52 继续向参考画布靠拢：减少图片解码和重排
   - 卡片自身做 layout/paint 隔离
   - 图片格子按需绘制，拖动/缩放时少解码
========================= */
.box {
  contain: layout style paint;
}

.imageGrid {
  contain: layout style paint;
}

.imageItem {
  content-visibility: auto;
  contain-intrinsic-size: 128px 96px;
}

.panPreviewCanvas {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.viewport.previewPanning .panPreviewCanvas {
  transform-origin: 0 0;
}



/* =========================
   v53 参考画布坐标体系：卡片尺寸也改成世界尺寸
   - 禁用浏览器原生 resize，避免在父级 scale 下拖拽比例异常
   - 自定义右下角 resize handle，JS 内部用 screenDelta / scale 换成世界尺寸
========================= */
.box {
  resize: none !important;
}

.boxResizeHandle {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  cursor: nwse-resize;
  z-index: 8;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(255,255,255,.18) 42% 52%, transparent 52%),
    linear-gradient(135deg, transparent 0 62%, rgba(255,255,255,.34) 62% 72%, transparent 72%);
  opacity: .76;
  pointer-events: auto;
}

.boxResizeHandle:hover,
.box.resizing .boxResizeHandle {
  opacity: 1;
  background-color: rgba(255,255,255,.08);
}

.box.resizing {
  will-change: width, height, transform;
  user-select: none;
}

.viewport.panning .connections {
  pointer-events: none;
}


/* =========================
   v55 参考画布世界层结构
   viewport 是固定窗口；world 是唯一会 translate + scale 的世界层；
   卡片和连线都只保存/渲染世界坐标，不跟着单独缩放。
========================= */
.world {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transform-origin: 0 0;
      overflow: visible;
      will-change: transform;
    }

.world .connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
  pointer-events: none;
  contain: none;
}

.world .canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform: none !important;
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}

.world .box,
.world .connectionHitLine,
.world .connectionLine,
.world .tempLine {
  pointer-events: auto;
}

/* v55：移动世界层已经足够轻，不再像旧版一样拖动时隐藏真实卡片/连线。 */
.viewport.panning .connections,
.viewport.previewPanning .connections,
.viewport.previewPanning .canvas,
.viewport.fastPanning .boxBody,
.viewport.fastPanning .nodeDot,
.viewport.fastPanning .danger,
.viewport.fastPanning .boxHint,
.viewport.fastPanning .imageTools,
.viewport.fastPanning .imageGrid,
.viewport.fastPanning .mediaBadge,
.viewport.fastPanning .imageActions,
.viewport.fastPanning .removeImage {
  visibility: visible !important;
}

.viewport.previewPanning .panPreviewCanvas {
  display: none !important;
}

/* v57：盒子真实尺寸只由右下角手柄修改；滚轮缩放/DOM 重排不能触发浏览器原生 resize。 */
.box {
  resize: none !important;
  box-sizing: border-box;
  transform-origin: 0 0;
}


/* v61：模型分类标签，避免图片/视频模型误选 */
.composerModelTabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0 2px 10px;
  padding: 4px;
  border-radius: 15px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.075);
}
.composerModelTabs button {
  min-width: 0;
  padding: 9px 8px !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: rgba(255,255,255,0.62) !important;
  border: 1px solid transparent !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap;
}
.composerModelTabs button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  margin-left: 3px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10px;
  background: rgba(255,255,255,0.08);
}
.composerModelTabs button.active {
  color: #fff !important;
  background: rgba(132,143,255,0.2) !important;
  border-color: rgba(158,167,255,0.38) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.composerModelCategoryHint {
  margin: -2px 5px 9px;
  color: rgba(255,255,255,0.52);
  font-size: 11px;
  line-height: 1.45;
}
.composerModelListEmpty {
  padding: 28px 18px;
  border-radius: 15px;
  text-align: center;
  color: rgba(255,255,255,0.54);
  background: rgba(255,255,255,0.035);
  border: 1px dashed rgba(255,255,255,0.12);
}

/* v61：连线落空后的快速创建菜单 */
.connectionDropMenu {
  position: fixed;
  z-index: 310;
  width: min(310px, calc(100vw - 24px));
  padding: 10px;
  border-radius: 18px;
  background: rgba(20,22,31,0.985);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 24px 74px rgba(0,0,0,0.62);
  backdrop-filter: blur(16px);
  display: none;
}
.connectionDropMenu.show { display: block; }
.connectionDropMenuHeader {
  padding: 5px 7px 9px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 6px;
}
.connectionDropMenuHeader b {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 3px;
}
.connectionDropMenuHeader span {
  display: block;
  color: rgba(255,255,255,0.52);
  font-size: 11px;
  line-height: 1.45;
}
.connectionDropMenu > button {
  width: 100%;
  display: block;
  text-align: left;
  padding: 10px 11px !important;
  margin: 3px 0;
  border-radius: 12px !important;
  background: transparent !important;
  color: #f5f5f7 !important;
  border: 1px solid transparent !important;
}
.connectionDropMenu > button:hover {
  background: rgba(255,255,255,0.075) !important;
  border-color: rgba(255,255,255,0.09) !important;
}
.connectionDropMenu > button b {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}
.connectionDropMenu > button span {
  display: block;
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  line-height: 1.4;
}
.connectionDropMenu > button.secondary {
  text-align: center;
  color: rgba(255,255,255,0.62) !important;
}

.contextMenu #menuOrganizeBoxesBtn {
  color: #dfe3ff;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 6px;
  padding-top: 10px;
}

/* =========================
   v64：底部生成器显式创作类型 + Seedance 参考模式
   - 参考即梦交互：直接切换“图片生成 / 视频生成”
   - 视频模型支持“智能参考 / 首尾模式”，不再藏在设置面板
========================= */
#composer.composer {
  width: min(1160px, calc(100vw - 40px)) !important;
  max-width: calc(100vw - 18px) !important;
}

#composer .composerCreationTypeGroup { grid-area: creation !important; }
#composer .composerModelBtn { grid-area: model !important; }
#composer .composerReferenceModeGroup { grid-area: reference !important; }
#composer .composerQualityGroup { grid-area: quality !important; }
#composer .composerRatioGroup { grid-area: ratio !important; }
#composer .composerDurationGroup { grid-area: duration !important; }
#composer .composerImgLabel { grid-area: image !important; }
#composer #composerAIBtn { grid-area: ai !important; }
#composer #composerSendBtn { grid-area: send !important; }
#composer #composerCloseBtn { grid-area: close !important; }

#composer.is-image-generation .composerInner {
  grid-template-columns: 116px 156px 78px 78px minmax(20px, 1fr) 40px 86px 62px 62px !important;
  grid-template-rows: 88px 40px !important;
  grid-template-areas:
    "text text text text text text text text text"
    "creation model quality ratio spacer image ai send close" !important;
}

#composer.is-video-generation .composerInner {
  grid-template-columns: 116px 156px 118px 78px 78px 72px minmax(16px, 1fr) 40px 86px 62px 62px !important;
  grid-template-rows: 88px 40px !important;
  grid-template-areas:
    "text text text text text text text text text text text"
    "creation model reference quality ratio duration spacer image ai send close" !important;
}

#composer .composerReferenceModeGroup.hidden,
#composer .composerDurationGroup.hidden {
  display: none !important;
}

#composer .composerCreationTypeSelect,
#composer .composerReferenceModeSelect,
#composer .composerQualitySelect,
#composer .composerRatioSelect,
#composer .composerDurationSelect {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 24px 0 9px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  background: rgba(255,255,255,0.075) !important;
  color: #f3f4f8 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  text-overflow: ellipsis !important;
}

#composer .composerCreationTypeSelect {
  color: #70eaff !important;
  border-color: rgba(65,214,239,0.28) !important;
  background: rgba(17,104,122,0.18) !important;
}

#composer .composerReferenceModeSelect {
  color: #f3f4f8 !important;
  border-color: rgba(184,192,255,0.24) !important;
  background: rgba(118,129,211,0.13) !important;
}

#composer .composerCreationTypeSelect option,
#composer .composerReferenceModeSelect option,
#composer .composerQualitySelect option,
#composer .composerRatioSelect option,
#composer .composerDurationSelect option {
  background: #20232d !important;
  color: #f5f5f7 !important;
}

@media (max-width: 1040px) {
  #composer.composer {
    width: calc(100vw - 22px) !important;
    max-height: min(46vh, 360px) !important;
  }

  #composer.is-image-generation .composerInner {
    grid-template-columns: 116px minmax(150px, 1fr) 78px 78px 40px 86px 62px 62px !important;
    grid-template-rows: 88px 40px !important;
    grid-template-areas:
      "text text text text text text text text"
      "creation model quality ratio image ai send close" !important;
  }

  #composer.is-video-generation .composerInner {
    grid-template-columns: 116px minmax(142px, 1fr) 118px 78px 78px 72px 40px 72px !important;
    grid-template-rows: 88px 40px 40px !important;
    grid-template-areas:
      "text text text text text text text text"
      "creation model reference quality ratio duration image ai"
      "send send send send close close close close" !important;
  }
}

@media (max-width: 700px) {
  #composer.composer {
    width: calc(100vw - 14px) !important;
    max-height: 62vh !important;
    overflow-y: auto !important;
  }

  #composer.is-image-generation .composerInner,
  #composer.is-video-generation .composerInner {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 92px 40px 40px 40px 40px 40px !important;
    grid-template-areas:
      "text text"
      "creation creation"
      "model model"
      "reference duration"
      "quality ratio"
      "image ai"
      "send close" !important;
  }

  #composer.is-image-generation .composerInner {
    grid-template-rows: 92px 40px 40px 40px 40px 40px !important;
    grid-template-areas:
      "text text"
      "creation creation"
      "model model"
      "quality ratio"
      "image ai"
      "send close" !important;
  }

  #composer .composerModelBtn,
  #composer .composerModelBtn.selected,
  #composer .composerCreationTypeSelect,
  #composer .composerReferenceModeSelect,
  #composer .composerQualitySelect,
  #composer .composerRatioSelect,
  #composer .composerDurationSelect,
  #composer .composerImgLabel,
  #composer .composerInner > button {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }
}

/* v64.1：覆盖旧版 nth-of-type 网格定位，避免新增控件被误放到画质/比例区域 */
#composer .composerInner > .composerControlGroup.composerCreationTypeGroup { grid-area: creation !important; }
#composer .composerInner > .composerControlGroup.composerReferenceModeGroup { grid-area: reference !important; }
#composer .composerInner > .composerControlGroup.composerQualityGroup { grid-area: quality !important; }
#composer .composerInner > .composerControlGroup.composerRatioGroup { grid-area: ratio !important; }
#composer .composerInner > .composerControlGroup.composerDurationGroup { grid-area: duration !important; }

@media (max-width: 700px) {
  #composer.is-video-generation .composerInner {
    grid-template-rows: 92px 40px 40px 40px 40px 40px 40px !important;
  }
}

/* v64.2：给下拉选项留足文字宽度，避免只显示“1...”或图标 */
#composer.is-video-generation .composerInner {
  grid-template-columns: 132px 166px 140px 92px 88px 84px minmax(10px, 1fr) 40px 86px 62px 62px !important;
}
#composer.is-image-generation .composerInner {
  grid-template-columns: 132px 166px 92px 88px minmax(16px, 1fr) 40px 86px 62px 62px !important;
}
#composer .composerCreationTypeSelect,
#composer .composerReferenceModeSelect,
#composer .composerQualitySelect,
#composer .composerRatioSelect,
#composer .composerDurationSelect {
  padding-left: 10px !important;
  padding-right: 18px !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}

@media (max-width: 1040px) {
  #composer.is-image-generation .composerInner {
    grid-template-columns: 124px minmax(150px, 1fr) 88px 84px 40px 82px 60px 60px !important;
  }
  #composer.is-video-generation .composerInner {
    grid-template-columns: 124px minmax(150px, 1fr) 132px 88px 84px 80px 40px 76px !important;
  }
}

@media (max-width: 700px) {
  #composer.is-image-generation .composerInner,
  #composer.is-video-generation .composerInner {
    grid-template-columns: 1fr 1fr !important;
  }
}