/* 20260818 AI workbench layout: surface-only redesign, model and generation logic remain in app.js. */

body.ai-chat-mode .ai-chat-window {
  border-color: rgba(94, 214, 188, .22) !important;
  background:
    radial-gradient(circle at 30% 0%, rgba(54, 137, 132, .08), transparent 30%),
    linear-gradient(145deg, rgba(5, 15, 23, .98), rgba(3, 10, 17, .98)) !important;
}

body.ai-chat-mode .ai-chat-window-head {
  min-height: 68px !important;
  padding: 10px 18px !important;
  border-bottom-color: rgba(127, 203, 201, .14) !important;
  background: rgba(4, 13, 20, .78) !important;
}

body.ai-chat-mode .ai-chat-model-switch {
  min-width: 224px !important;
  min-height: 44px !important;
  padding: 0 10px 0 16px !important;
  border-color: rgba(92, 213, 188, .28) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(23, 99, 88, .7), rgba(11, 40, 47, .82)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 22px rgba(0, 0, 0, .18) !important;
}

body.ai-chat-mode .ai-chat-model-switch-action {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  margin-left: auto !important;
  border: 1px solid rgba(128, 229, 207, .22) !important;
  border-radius: 9px !important;
  color: rgba(218, 255, 244, .78) !important;
  background: rgba(4, 22, 28, .36) !important;
}

body.ai-chat-mode .ai-chat-model-switch-action > span { display: none !important; }

body.ai-chat-mode.ai-model-chat .ai-chat-workspace {
  grid-template-columns: 318px minmax(500px, 1fr) 296px !important;
  background: rgba(2, 9, 15, .2) !important;
}

body.ai-chat-mode:not(.ai-model-chat) .ai-chat-workspace {
  grid-template-columns: 318px minmax(0, 1fr) !important;
  background: rgba(2, 9, 15, .2) !important;
}

body.ai-chat-mode .ai-chat-history {
  display: grid !important;
  grid-template-rows: auto 1px auto auto minmax(0, 1fr) !important;
  gap: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  padding: 18px 14px 14px !important;
  border-right-color: rgba(116, 207, 200, .15) !important;
  background:
    linear-gradient(180deg, rgba(6, 23, 30, .74), rgba(3, 10, 17, .46)),
    rgba(3, 9, 17, .34) !important;
}

.ai-chat-model-rail { min-width: 0; }

.ai-chat-model-rail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 4px 12px;
}

.ai-chat-model-rail-mark {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(116, 233, 202, .3);
  border-radius: 11px;
  color: #9ef2d4;
  background: linear-gradient(145deg, rgba(55, 180, 157, .28), rgba(15, 72, 77, .48));
  box-shadow: 0 0 22px rgba(83, 216, 182, .12), inset 0 1px 0 rgba(255, 255, 255, .1);
  font-size: 17px;
}

.ai-chat-model-rail-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ai-chat-model-rail-head strong { color: rgba(239, 255, 250, .95); font-size: 15px; line-height: 1.2; }
.ai-chat-model-rail-head small { color: rgba(168, 202, 204, .56); font-size: 10px; }
.ai-chat-model-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.ai-chat-model-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 66px;
  padding: 9px 10px;
  border: 1px solid rgba(123, 177, 187, .14);
  border-radius: 13px;
  color: rgba(223, 237, 242, .82);
  background: linear-gradient(135deg, rgba(12, 29, 38, .8), rgba(6, 17, 25, .78));
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease;
}

.ai-chat-model-card:hover,
.ai-chat-model-card:focus-visible {
  border-color: rgba(106, 226, 195, .42);
  color: #f1fffb;
  background: linear-gradient(135deg, rgba(15, 54, 59, .92), rgba(7, 25, 31, .88));
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18), 0 0 20px rgba(71, 202, 172, .08);
  outline: 0;
  transform: translateX(2px);
}

.ai-chat-model-card.is-active {
  border-color: rgba(103, 231, 196, .58);
  background: linear-gradient(135deg, rgba(19, 88, 77, .86), rgba(8, 38, 43, .9));
  box-shadow: inset 3px 0 0 #76e5be, 0 10px 24px rgba(0, 0, 0, .2), 0 0 24px rgba(65, 209, 172, .1);
}

.ai-chat-model-card-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid rgba(145, 215, 217, .2);
  border-radius: 11px;
  background: rgba(244, 255, 252, .06);
}

.ai-chat-model-card-icon img { width: 100%; height: 100%; object-fit: contain; }
.ai-chat-model-card-copy { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.ai-chat-model-card-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.2; }
.ai-chat-model-card-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(172, 204, 207, .56); font-size: 10px; line-height: 1.2; }
.ai-chat-model-card-state { color: rgba(122, 224, 193, .82); font-size: 13px; text-align: center; }

.ai-chat-history-divider {
  height: 1px;
  margin: 16px 2px 13px;
  background: linear-gradient(90deg, transparent, rgba(121, 211, 202, .2), transparent);
}

body.ai-chat-mode .ai-chat-history-head { padding: 0 6px 10px !important; color: rgba(224, 241, 243, .72) !important; }
body.ai-chat-mode .ai-chat-history-list { min-height: 0; padding-right: 2px; }
body.ai-chat-mode .ai-chat-main { background: radial-gradient(circle at 50% 45%, rgba(37, 83, 88, .11), transparent 46%); }
body.ai-chat-mode.ai-model-chat .ai-chat-messages { padding: 24px 34px 28px !important; }
body.ai-chat-mode .ai-chat-composer-dock { padding-left: 20px !important; padding-right: 20px !important; }

@media (max-width: 1700px) and (min-width: 1181px) {
  body.ai-chat-mode.ai-model-chat .ai-chat-workspace { grid-template-columns: 290px minmax(400px, 1fr) 260px !important; }
  body.ai-chat-mode:not(.ai-model-chat) .ai-chat-workspace { grid-template-columns: 290px minmax(0, 1fr) !important; }
  body.ai-chat-mode .ai-chat-history { padding-left: 11px !important; padding-right: 11px !important; }
  .ai-chat-model-card { grid-template-columns: 36px minmax(0, 1fr) 14px; gap: 8px; min-height: 60px; padding: 8px; }
  .ai-chat-model-card-icon { width: 36px; height: 36px; padding: 7px; }
}

@media (max-width: 1180px) and (min-width: 761px) {
  body.ai-chat-mode.ai-model-chat .ai-chat-workspace { grid-template-columns: 242px minmax(330px, 1fr) 214px !important; }
  body.ai-chat-mode:not(.ai-model-chat) .ai-chat-workspace { grid-template-columns: 242px minmax(0, 1fr) !important; }
  .ai-chat-model-card-copy small { display: none; }
  .ai-chat-model-card { grid-template-columns: 34px minmax(0, 1fr) 12px; gap: 7px; min-height: 56px; padding: 7px; }
  .ai-chat-model-card-icon { width: 34px; height: 34px; padding: 6px; }
}

@media (max-width: 760px) {
  body.ai-chat-mode .ai-chat-window-head { min-height: 60px !important; padding: 8px 10px !important; }
  body.ai-chat-mode .ai-chat-model-switch { min-width: 0 !important; width: min(214px, calc(100vw - 116px)) !important; }
  body.ai-chat-mode .ai-chat-workspace { display: flex !important; flex-direction: column !important; overflow: auto !important; }
  body.ai-chat-mode .ai-chat-history { display: block !important; flex: 0 0 auto !important; width: 100% !important; max-height: none !important; padding: 12px 10px 10px !important; border-right: 0 !important; border-bottom: 1px solid rgba(116, 207, 200, .15) !important; }
  .ai-chat-model-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .ai-chat-model-card { min-height: 58px; padding: 7px; }
  .ai-chat-model-card-copy small { display: none; }
  .ai-chat-model-card-icon { width: 32px; height: 32px; padding: 6px; }
  .ai-chat-model-rail-head { padding-bottom: 9px; }
  .ai-chat-history-divider { margin: 12px 2px 11px; }
  body.ai-chat-mode .ai-chat-history-list { max-height: 150px; }
  body.ai-chat-mode .ai-chat-main { min-height: 520px; flex: 1 1 auto; }
  body.ai-chat-mode.ai-model-chat .ai-chat-messages { padding: 18px 14px 22px !important; }
}

/* 20260819 workbench visual correction: fixed three-region shell. */
body.ai-chat-mode .ai-chat-workspace {
  grid-template-columns: 286px minmax(0, 1fr) 286px !important;
  grid-template-rows: minmax(0, 1fr) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: rgba(2, 9, 15, .2) !important;
}

body.ai-chat-mode .ai-workbench-sidebar,
body.ai-chat-mode .ai-chat-main,
body.ai-chat-mode .ai-chat-history,
body.ai-chat-mode .ai-resource-library {
  grid-row: 1 !important;
  min-height: 0 !important;
}

body.ai-chat-mode .ai-workbench-sidebar {
  grid-column: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  padding: 18px 14px !important;
  overflow: auto !important;
  border-right: 1px solid rgba(116, 207, 200, .15) !important;
  background: linear-gradient(180deg, rgba(6, 23, 30, .8), rgba(3, 10, 17, .5)) !important;
}

body.ai-chat-mode .ai-chat-main {
  grid-column: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 50% 44%, rgba(37, 83, 88, .11), transparent 50%) !important;
}

body.ai-chat-mode .ai-chat-history {
  grid-column: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 18px 14px 14px !important;
  overflow: hidden !important;
  border-right: 0 !important;
  border-left: 1px solid rgba(116, 207, 200, .15) !important;
  background: linear-gradient(180deg, rgba(6, 23, 30, .72), rgba(3, 10, 17, .48)) !important;
}

body.ai-chat-mode .ai-chat-history[hidden],
body.ai-chat-mode .ai-resource-library[hidden] { display: none !important; }
body.ai-chat-mode .ai-resource-library {
  grid-column: 3 !important;
  display: none !important;
  width: auto !important;
  max-width: none !important;
  border-left: 1px solid rgba(116, 207, 200, .15) !important;
}
body.ai-chat-mode.ai-resource-panel-open .ai-chat-history { display: none !important; }
body.ai-chat-mode.ai-resource-panel-open .ai-resource-library { display: flex !important; }
body.ai-chat-mode:not(.ai-model-chat) .ai-resource-library { display: none !important; }

body.ai-chat-mode .ai-chat-model-rail { min-width: 0; }
body.ai-chat-mode .ai-chat-model-rail-head { padding: 0 4px 12px !important; }
body.ai-chat-mode .ai-chat-model-list { display: flex !important; flex-direction: column !important; gap: 8px !important; min-height: 0 !important; }
body.ai-chat-mode .ai-chat-model-card {
  grid-template-columns: 40px minmax(0, 1fr) 16px !important;
  min-height: 65px !important;
  padding: 9px 10px !important;
  border-radius: 13px !important;
}
body.ai-chat-mode .ai-chat-model-card-copy strong { font-size: 12px !important; }
body.ai-chat-mode .ai-chat-model-card-copy small { font-size: 10px !important; }
body.ai-chat-mode .ai-chat-canvas-card { margin-top: 4px; }
body.ai-chat-mode .ai-chat-canvas-icon { color: #9ef2d4; font-size: 22px; font-weight: 700; }

body.ai-chat-mode .ai-chat-history-head {
  flex: 0 0 auto !important;
  min-height: 40px !important;
  padding: 0 4px 11px !important;
  border-bottom: 1px solid rgba(121, 211, 202, .16) !important;
}
body.ai-chat-mode .ai-history-resource-toggle {
  min-height: 27px;
  padding: 0 9px;
  border: 1px solid rgba(111, 209, 192, .24);
  border-radius: 8px;
  color: rgba(192, 240, 226, .76);
  background: rgba(50, 135, 124, .12);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
body.ai-chat-mode .ai-history-resource-toggle:hover,
body.ai-chat-mode .ai-history-resource-toggle[aria-pressed="true"] {
  color: #f0fff9;
  border-color: rgba(111, 235, 203, .54);
  background: rgba(52, 158, 137, .28);
}
body.ai-chat-mode .ai-chat-history-batch { flex: 0 0 auto; }
body.ai-chat-mode .ai-chat-history-list {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 13px 0 0 !important;
  overflow: auto !important;
}
body.ai-chat-mode .ai-chat-history-item { min-height: 54px !important; }

body.ai-chat-mode .ai-chat-messages,
body.ai-chat-mode .ai-chat-studio {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
body.ai-chat-mode .ai-chat-messages { flex: 1 1 auto !important; padding: 26px 34px 28px !important; overflow: auto !important; }
body.ai-chat-mode .ai-chat-studio { flex: 1 1 auto !important; padding: 16px 20px 20px !important; overflow: auto !important; }
body.ai-chat-mode .ai-chat-composer-dock { flex: 0 0 auto !important; }

body.ai-chat-mode:is(.ai-model-image, .ai-model-video) .ai-chat-studio { overflow: auto !important; padding: 16px 22px 20px !important; }
body.ai-chat-mode.ai-model-music .ai-chat-studio { overflow: hidden !important; padding: 10px 12px 12px !important; }
body.ai-chat-mode.ai-model-music .music-studio {
  grid-template-columns: minmax(300px, .84fr) minmax(0, 1.16fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: 12px !important;
}
body.ai-chat-mode.ai-model-music .music-create-panel,
body.ai-chat-mode.ai-model-music .music-preview-panel { height: 100% !important; min-height: 0 !important; }
body.ai-chat-mode.ai-model-music .music-history-panel { display: none !important; }

.ai-recent-empty { display: grid; place-items: center; gap: 8px; min-height: 210px; padding: 18px; color: rgba(179, 205, 208, .56); text-align: center; }
.ai-recent-empty > span { color: rgba(112, 235, 204, .7); font-size: 32px; }
.ai-recent-empty strong { color: rgba(231, 247, 246, .78); font-size: 13px; }
.ai-recent-empty p { margin: 0; font-size: 10px; line-height: 1.5; }
.ai-recent-generation-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) 14px; align-items: center; gap: 9px; width: 100%; min-height: 70px; padding: 9px; border: 1px solid rgba(123, 177, 187, .14); border-radius: 12px; color: rgba(223, 237, 242, .82); background: linear-gradient(135deg, rgba(12, 29, 38, .8), rgba(6, 17, 25, .78)); text-align: left; cursor: pointer; }
.ai-recent-generation-item:hover, .ai-recent-generation-item:focus-visible, .ai-recent-generation-item.is-active { border-color: rgba(106, 226, 195, .48); color: #f1fffb; background: linear-gradient(135deg, rgba(15, 54, 59, .92), rgba(7, 25, 31, .88)); outline: 0; }
.ai-recent-generation-thumb { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(145, 215, 217, .2); border-radius: 11px; background: rgba(244, 255, 252, .06); }
.ai-music-recent-thumb { color: #7ce7ca; font-size: 22px; }
.ai-recent-generation-copy { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.ai-recent-generation-copy strong, .ai-recent-generation-copy small, .ai-recent-generation-copy time { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-recent-generation-copy strong { font-size: 12px; }
.ai-recent-generation-copy small { color: rgba(172, 204, 207, .65); font-size: 10px; }
.ai-recent-generation-copy time { color: rgba(169, 193, 197, .42); font-size: 9px; }
.ai-recent-generation-arrow { color: rgba(122, 224, 193, .82); font-size: 17px; }

@media (max-width: 1180px) and (min-width: 761px) {
  body.ai-chat-mode .ai-chat-workspace { grid-template-columns: 242px minmax(0, 1fr) 224px !important; }
  body.ai-chat-mode .ai-chat-model-card { grid-template-columns: 34px minmax(0, 1fr) 12px !important; min-height: 58px !important; padding: 7px !important; }
  body.ai-chat-mode .ai-chat-model-card-icon { width: 34px !important; height: 34px !important; padding: 6px !important; }
  body.ai-chat-mode .ai-chat-model-card-copy small { display: none !important; }
}

@media (max-width: 760px) {
  body.ai-chat-mode .ai-chat-workspace { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto minmax(520px, 1fr) auto !important; overflow: auto !important; }
  body.ai-chat-mode .ai-workbench-sidebar { grid-column: 1 !important; grid-row: 1 !important; padding: 12px 10px 10px !important; border-right: 0 !important; border-bottom: 1px solid rgba(116, 207, 200, .15) !important; }
  body.ai-chat-mode .ai-chat-main { grid-column: 1 !important; grid-row: 2 !important; min-height: 520px !important; }
  body.ai-chat-mode .ai-chat-history { grid-column: 1 !important; grid-row: 3 !important; min-height: 220px !important; max-height: 280px !important; padding: 12px 10px !important; border-left: 0 !important; border-top: 1px solid rgba(116, 207, 200, .15) !important; }
  body.ai-chat-mode .ai-resource-library { grid-column: 1 !important; grid-row: 3 !important; min-height: 220px !important; max-height: 280px !important; border-left: 0 !important; border-top: 1px solid rgba(116, 207, 200, .15) !important; }
  body.ai-chat-mode .ai-chat-model-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; }
  body.ai-chat-mode .ai-chat-model-card { min-height: 58px !important; padding: 7px !important; }
  body.ai-chat-mode .ai-chat-model-card-copy small { display: none !important; }
  body.ai-chat-mode .ai-chat-messages { padding: 18px 14px 22px !important; }
  body.ai-chat-mode.ai-model-music .ai-chat-studio { overflow: auto !important; }
  body.ai-chat-mode.ai-model-music .music-studio { grid-template-columns: 1fr !important; grid-template-rows: auto minmax(420px, 1fr) !important; height: auto !important; }
  body.ai-chat-mode.ai-model-music .music-create-panel, body.ai-chat-mode.ai-model-music .music-preview-panel { height: auto !important; min-height: 420px !important; }
}