#ai-image-panel {
  z-index: 10000;
}

#ai-image-panel .modal-ai {
  --ai-type-caption: 9px;
  --ai-type-control: 10.5px;
  --ai-type-body: 11px;
  --ai-type-section: 11px;
  width: 1320px;
  height: min(860px, calc((100vh - 24px) / var(--ui-zoom, 1)));
  max-width: calc((100vw - 40px) / var(--ui-zoom, 1));
  padding: 0;
  gap: 0;
  overflow: hidden;
  font-size: var(--ai-type-body);
}

.ai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #30363d);
}

.ai-head .modal-title { font-size: 18px; }
.ai-title-line { display: flex; align-items: baseline; min-width: 0; gap: 12px; }
.ai-subtitle { margin: 0; overflow: hidden; color: var(--text-secondary, #8b949e); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ai-head-status { display: flex; align-items: center; gap: 10px; flex: none; }
.ai-status { font-size: 11px; color: #8b949e; }
.ai-status[data-kind="ok"] { color: var(--accent, #2f81f7); }
.ai-status[data-kind="warn"] { color: #d29922; }
.ai-status[data-kind="error"] { color: #f85149; }
.ai-status[data-kind="busy"] { color: #58a6ff; }
.ai-close { border: 0; background: transparent; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; opacity: .65; }
.ai-close:hover { opacity: 1; }

.ai-actions {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
}
.ai-account-summary {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  padding-right: 9px;
  border-right: 1px solid var(--border, #30363d);
  font-size: var(--ai-type-caption);
  line-height: 1.2;
  color: var(--text-secondary, #8b949e);
}
.ai-account-summary strong {
  max-width: 170px;
  overflow: hidden;
  color: var(--text-primary, #e6edf3);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-account-summary span { white-space: nowrap; }
.ai-actions-spacer { flex: 1; }
.ai-auto-connect { color: var(--text-secondary, #8b949e); font-size: 11px; }
.ai-setting-label { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary, #8b949e); font-size: var(--ai-type-control); white-space: nowrap; }
.ai-setting-label select {
  max-width: 138px;
  height: 28px;
  padding: 3px 22px 3px 7px;
  color: var(--text-primary, #e6edf3);
  background: var(--bg-input, #0d1117);
  border: 1px solid var(--border, #30363d);
  border-radius: 5px;
  font: inherit;
}
.ai-model-warning {
  max-width: 150px;
  padding: 3px 6px;
  color: var(--text-secondary, #8b949e);
  background: color-mix(in srgb, var(--accent, #2f81f7) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #2f81f7) 28%, var(--border, #30363d));
  border-radius: 5px;
  font-size: var(--ai-type-caption);
  line-height: 1.25;
}
.ai-model-warning[hidden] { display: none; }
.ai-actions button,
.ai-preview-card button,
.ai-attachment button,
.ai-send-row > button {
  padding: 5px 8px;
  color: var(--text-primary, #e6edf3);
  background: var(--btn-tool, #21262d);
  border: 1px solid var(--border, #30363d);
  border-radius: 5px;
  font: inherit;
  cursor: pointer;
  font-size: var(--ai-type-control);
}
.ai-actions button:hover,
.ai-preview-card button:hover,
.ai-attachment button:hover { background: var(--btn-tool-hover, #30363d); }
.ai-actions button:disabled,
.ai-send-row button:disabled { opacity: .5; cursor: not-allowed; }

.ai-workspace {
  display: grid;
  grid-template-columns: minmax(760px, 1fr) 330px;
  grid-template-areas: "results conversation";
  min-height: 0;
  flex: 1;
}
.ai-conversation,
.ai-results { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ai-results { grid-area: results; }
.ai-conversation {
  grid-area: conversation;
  border-left: 1px solid var(--border, #30363d);
  background: color-mix(in srgb, var(--bg-input, #0d1117) 56%, var(--bg-panel, #161b22));
}
.ai-media-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 14px;
  flex: none;
  background: color-mix(in srgb, var(--bg-panel, #161b22) 96%, var(--accent, #2f81f7) 4%);
  border-bottom: 1px solid var(--border, #30363d);
}
.ai-media-toolbar strong { font-size: var(--ai-type-section); }
.ai-media-toolbar span { color: var(--text-secondary, #8b949e); font-size: var(--ai-type-caption); }
.ai-media-toolbar .ai-source-group { flex: 0 0 auto; border-right: 1px solid var(--border, #30363d); padding-right: 8px; }
.ai-load-menu-wrap { position: relative; }
.ai-load-menu-wrap > button { height: 100%; }
.ai-load-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: grid;
  min-width: 150px;
  gap: 4px;
  padding: 6px;
  background: var(--bg-panel, #161b22);
  border: 1px solid var(--border-strong, #30363d);
  border-radius: 7px;
  box-shadow: 0 12px 34px rgba(0,0,0,.38);
}
.ai-load-menu[hidden] { display: none; }
.ai-load-menu > button,
.ai-load-menu .ai-file-button { justify-content: flex-start; width: 100%; padding: 7px 9px; font-size: var(--ai-type-control); }
.ai-section-label {
  padding: 10px 14px 8px;
  color: var(--text-secondary, #8b949e);
  font-size: var(--ai-type-section);
  font-weight: 700;
  letter-spacing: .02em;
}
.ai-log { min-height: 0; overflow: auto; padding: 0 14px 14px; }
.ai-conversation .ai-log { flex: 1 1 auto; font-size: var(--ai-type-control); }
.ai-conversation .ai-msg { padding: 7px 8px; line-height: 1.45; }
.ai-msg {
  max-width: 90%;
  margin: 8px 0;
  padding: 9px 10px;
  white-space: pre-wrap;
  border-radius: 9px 9px 9px 3px;
  background: color-mix(in srgb, var(--bg-panel, #161b22) 88%, #fff 12%);
  border: 1px solid var(--border, #30363d);
}
.ai-msg.user {
  margin-left: auto;
  color: var(--text-primary, #e6edf3);
  background: color-mix(in srgb, var(--accent, #2f81f7) 18%, var(--bg-input, #0d1117));
  border-color: color-mix(in srgb, var(--accent, #2f81f7) 58%, var(--border, #30363d));
  border-radius: 9px 9px 3px 9px;
}
.ai-msg.error { color: #f85149; }
.ai-turn-usage {
  clear: both;
  margin: 3px 2px 12px;
  color: var(--text-secondary, #8b949e);
  font-size: 9px;
  text-align: right;
}

.ai-previews {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  min-height: 0;
  padding: 0 14px 14px;
  overflow: auto;
  flex: 1 1 auto;
}
.ai-reference-section { flex: 0 0 auto; max-height: 42%; border-bottom: 1px solid var(--border-muted, #252b31); }
.ai-reference-section > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  color: var(--text-secondary, #8b949e);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.ai-reference-section > summary::before { content: "▸"; transition: transform .14s ease; }
.ai-reference-section[open] > summary::before { transform: rotate(90deg); }
.ai-reference-section > summary::marker { content: ""; }
.ai-reference-section > summary small { margin-left: auto; color: var(--text-secondary, #8b949e); font-size: 9px; font-weight: 400; }
.ai-reference-section > summary span {
  display: inline-grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  color: var(--text-primary, #e6edf3);
  background: var(--btn-tool, #21262d);
  border-radius: 999px;
  font-size: 9px;
}
.ai-reference-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 260px;
  padding: 0 14px 12px;
  overflow: auto;
}
.ai-reference-empty { grid-column: 1 / -1; margin: 12px 0; color: var(--text-secondary, #8b949e); font-size: 10px; text-align: center; }
.ai-empty { grid-column: 1 / -1; margin: 28px 0; text-align: center; color: var(--text-secondary, #8b949e); }
.ai-log-empty { margin: 18px 0; color: var(--text-secondary, #8b949e); font-size: 11px; text-align: center; }
.ai-generating {
  grid-column: 1 / -1;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 24px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--accent, #2f81f7) 35%, var(--border, #30363d));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent, #2f81f7) 6%, var(--bg-input, #0d1117));
}
.ai-generating[hidden] { display: none; }
.ai-generating strong { font-size: 14px; }
.ai-generating span,
.ai-generating small { color: var(--text-secondary, #8b949e); }
.ai-e-loader { position: relative; width: 118px; height: 52px; }
.ai-e-cloud,
.ai-e-cloud i,
.ai-e-core { position: absolute; left: 50%; top: 50%; }
.ai-e-cloud { width: 100%; height: 100%; transform: translate(-50%, -50%); }
.ai-e-cloud i {
  --ex: 0px;
  --ey: 0px;
  color: color-mix(in srgb, var(--accent, #2f81f7) 72%, #fff);
  font: 800 16px/1 ui-sans-serif, system-ui, sans-serif;
  animation: ai-e-merge 1.8s cubic-bezier(.45, 0, .2, 1) infinite;
}
.ai-e-cloud i:nth-child(1) { --ex: -45px; --ey: -12px; animation-delay: -.12s; }
.ai-e-cloud i:nth-child(2) { --ex: -24px; --ey: 15px; animation-delay: -.04s; }
.ai-e-cloud i:nth-child(3) { --ex: 2px; --ey: -20px; animation-delay: .04s; }
.ai-e-cloud i:nth-child(4) { --ex: 30px; --ey: 14px; animation-delay: .12s; }
.ai-e-cloud i:nth-child(5) { --ex: 47px; --ey: -9px; animation-delay: .2s; }
.ai-e-core {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #fff;
  background: color-mix(in srgb, var(--accent, #2f81f7) 46%, var(--bg-input, #0d1117));
  border: 1px solid var(--accent, #2f81f7);
  border-radius: 50%;
  font: 800 16px/1 ui-sans-serif, system-ui, sans-serif;
  transform: translate(-50%, -50%);
  animation: ai-e-core-pulse 1.8s ease-in-out infinite;
}
.ai-e-core span { position: absolute; right: -4px; bottom: -3px; min-width: 16px; height: 16px; color: #fff; background: var(--accent, #2f81f7); border-radius: 999px; font-size: 9px; line-height: 16px; }
.ai-progress-steps { display: grid; width: min(370px, 88%); grid-template-columns: repeat(4, 1fr); gap: 5px; }
.ai-progress-steps span {
  padding: 4px 6px;
  color: var(--text-secondary, #8b949e);
  background: var(--bg-panel, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: 999px;
  font-size: 9px;
}
.ai-progress-steps[data-ai-progress-stage="analyze"] [data-stage="analyze"],
.ai-progress-steps[data-ai-progress-stage="compose"] [data-stage="compose"],
.ai-progress-steps[data-ai-progress-stage="render"] [data-stage="render"],
.ai-progress-steps[data-ai-progress-stage="finish"] [data-stage="finish"] {
  color: #fff;
  background: color-mix(in srgb, var(--accent, #2f81f7) 38%, var(--bg-input, #0d1117));
  border-color: var(--accent, #2f81f7);
}
.ai-progress-track {
  width: min(280px, 85%);
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #2f81f7) 15%, var(--bg-panel, #161b22));
}
.ai-progress-track i {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent, #2f81f7);
  animation: ai-progress 1.35s ease-in-out infinite;
}
@keyframes ai-e-merge {
  0%, 18% { opacity: .78; transform: translate(-50%, -50%) translate(var(--ex), var(--ey)) scale(.9); }
  58%, 76% { opacity: .18; transform: translate(-50%, -50%) translate(0, 0) scale(.45); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.35); }
}
@keyframes ai-e-core-pulse {
  0%, 38%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #2f81f7) 0%, transparent); transform: translate(-50%, -50%) scale(.92); }
  62%, 78% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent, #2f81f7) 12%, transparent); transform: translate(-50%, -50%) scale(1.07); }
}
@keyframes ai-progress {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(360%); }
}
.ai-preview-card { display: flex; flex-direction: column; gap: 7px; padding: 9px; border: 1px solid var(--border, #30363d); border-radius: 7px; }
.ai-reference-card { min-width: 0; padding: 7px; }
.ai-reference-card .ai-preview-stage { min-height: 0; }
.ai-reference-card .ai-preview-stage > img { height: 145px; }
.ai-image-card-head { display: flex; align-items: center; gap: 7px; }
.ai-image-card-head strong { flex: 1; min-width: 0; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ai-image-card-head span { color: var(--text-secondary, #8b949e); font-size: 9px; }
.ai-image-card-head button { padding: 3px 6px; border: 0; background: transparent; }
.ai-preview-stage {
  position: relative;
  overflow: hidden;
  min-height: 0;
  background: #fff;
  border: 1px solid #d8dee4;
  border-radius: 5px;
}
.ai-preview-stage > img {
  display: block;
  width: 100%;
  height: min(430px, 48vh);
  object-fit: contain;
  background: #fff;
  cursor: zoom-in;
}
.ai-preview-stage.is-annotating > img { cursor: crosshair; }
.ai-canvas-output {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  color: #fff !important;
  background: var(--accent, #2f81f7) !important;
  border-color: var(--accent, #2f81f7) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}
.ai-annotation-marker {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  transform: translate(-50%, -50%);
  color: #fff;
  background: var(--accent, #2f81f7);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  font-size: 10px;
  font-weight: 700;
  pointer-events: none;
}
.ai-selection-box {
  position: absolute;
  z-index: 3;
  min-width: 6px;
  min-height: 6px;
  border: 2px solid var(--accent, #2f81f7);
  background: color-mix(in srgb, var(--accent, #2f81f7) 13%, transparent);
  box-shadow: 0 0 0 1px rgba(255,255,255,.8) inset;
  pointer-events: none;
}
.ai-selection-box > span {
  position: absolute;
  top: -12px;
  left: -12px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #fff;
  background: var(--accent, #2f81f7);
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
}
.ai-preview-note { color: var(--text-secondary, #8b949e); font-size: 10px; }
.ai-preview-card button { font-size: var(--ai-type-control); }
.ai-preview-actions { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.ai-preview-actions button {
  display: inline-grid;
  width: 27px;
  height: 25px;
  padding: 0;
  place-items: center;
  flex: 0 0 auto;
}
.ai-preview-actions .ai-zoom-value {
  min-width: 34px;
  color: var(--text-secondary, #8b949e);
  font-size: var(--ai-type-caption);
  text-align: center;
}
.ai-preview-actions button.is-on { color: #fff; background: var(--accent, #2f81f7); border-color: var(--accent, #2f81f7); }
.ai-preview-actions button svg { width: 14px; height: 14px; }
.ai-annotation-editor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 8px;
  background: color-mix(in srgb, var(--accent, #2f81f7) 8%, var(--bg-input, #0d1117));
  border: 1px solid color-mix(in srgb, var(--accent, #2f81f7) 45%, var(--border, #30363d));
  border-radius: 6px;
}
.ai-annotation-editor[hidden] { display: none; }
.ai-annotation-editor span { font-size: 10px; color: var(--text-secondary, #8b949e); }
.ai-annotation-editor input {
  min-width: 0;
  padding: 6px 8px;
  color: var(--text-primary, #e6edf3);
  background: var(--bg-input, #0d1117);
  border: 1px solid var(--border, #30363d);
  border-radius: 5px;
}
.ai-comment-list { display: flex; flex-direction: column; gap: 5px; }
.ai-comment-details { border-top: 1px solid var(--border-muted, #252b31); }
.ai-comment-details > summary {
  padding: 6px 2px 1px;
  color: var(--text-secondary, #8b949e);
  font-size: 9px;
  cursor: pointer;
  user-select: none;
}
.ai-comment-details > summary::marker { color: var(--accent, #2f81f7); }
.ai-comment-details .ai-comment-list { padding-top: 6px; }
.ai-comment-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
}
.ai-comment-row > span {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  color: #fff;
  background: var(--accent, #2f81f7);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
}
.ai-comment-row input {
  min-width: 0;
  padding: 5px 7px;
  color: var(--text-primary, #e6edf3);
  background: var(--bg-input, #0d1117);
  border: 1px solid var(--border, #30363d);
  border-radius: 5px;
  font-size: 10px;
}
.ai-comment-row button { padding: 4px 6px; }

.ai-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .76);
}
.ai-image-viewer img {
  max-width: calc(100vw - 80px);
  max-height: calc(100vh - 80px);
  object-fit: contain;
  background: #fff;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
  cursor: zoom-out;
}

.ai-input { flex: none; padding: 10px 12px 12px; border-top: 1px solid var(--border, #30363d); background: var(--bg-panel, #161b22); }
.ai-mode-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 9px;
}
.ai-mode-row > span { align-self: center; margin-right: 3px; color: var(--text-secondary, #8b949e); font-size: 10px; }
.ai-mode-row button {
  display: inline-flex;
  align-items: baseline;
  min-width: 66px;
  justify-content: center;
  padding: 6px 10px;
  font-size: var(--ai-type-control);
  color: var(--text-secondary, #8b949e);
  background: var(--bg-input, #0d1117);
  border: 1px solid var(--border, #30363d);
  border-radius: 5px;
  cursor: pointer;
}
.ai-quality-row button { flex-direction: column; align-items: center; line-height: 1.1; }
.ai-quality-row button small { margin-top: 3px; color: inherit; opacity: .72; font-size: 8px; }
.ai-mode-row button.is-on { color: #fff; background: color-mix(in srgb, var(--accent, #2f81f7) 28%, var(--bg-input, #0d1117)); border-color: var(--accent, #2f81f7); }
.ai-input textarea {
  width: 100%;
  min-height: 76px;
  max-height: 150px;
  resize: vertical;
  box-sizing: border-box;
  padding: 10px 11px;
  color: var(--text-primary, #e6edf3);
  background: var(--bg-input, #0d1117);
  border: 1px solid var(--border, #30363d);
  border-radius: 7px;
  font: inherit;
}
.ai-chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: end;
  gap: 7px;
}
.ai-chat-composer textarea { min-height: 76px; max-height: 150px; resize: vertical; }
.ai-chat-composer [data-ai-chat-send] {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  color: #fff;
  background: var(--accent, #2f81f7);
  border: 1px solid var(--accent, #2f81f7);
  border-radius: 8px;
  cursor: pointer;
}
.ai-chat-composer [data-ai-chat-send] svg { width: 18px; height: 18px; }
.ai-conversation-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.ai-conversation-actions > span { flex: 1; color: var(--text-secondary, #8b949e); font-size: 9px; }
.ai-conversation-actions button {
  padding: 6px 10px;
  color: var(--text-primary, #e6edf3);
  background: var(--btn-tool, #21262d);
  border: 1px solid var(--border, #30363d);
  border-radius: 5px;
  cursor: pointer;
}
.ai-input textarea:focus { outline: none; border-color: var(--accent, #2f81f7); }
.ai-send-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 8px; }
.ai-source-group { display: inline-flex; gap: 5px; padding-right: 7px; border-right: 1px solid var(--border, #30363d); }
.ai-file-button { display: inline-flex; padding: 6px 10px; border: 1px solid var(--border, #30363d); border-radius: 5px; cursor: pointer; }
.ai-file-button:hover { background: var(--btn-tool-hover, #30363d); }
.ai-file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ai-source-group > button {
  padding: 5px 8px;
  color: var(--text-primary, #e6edf3);
  background: var(--btn-tool, #21262d);
  border: 1px solid var(--border, #30363d);
  border-radius: 5px;
  font: inherit;
  cursor: pointer;
  font-size: var(--ai-type-control);
}
.ai-load-menu-wrap > button,
.ai-load-menu > button {
  padding: 5px 8px;
  color: var(--text-primary, #e6edf3);
  background: var(--btn-tool, #21262d);
  border: 1px solid var(--border, #30363d);
  border-radius: 5px;
  font: inherit;
  cursor: pointer;
  font-size: var(--ai-type-control);
}
.ai-source-group > button:hover { background: var(--btn-tool-hover, #30363d); }
.ai-input-hint { flex: 1; min-width: 0; color: var(--text-secondary, #8b949e); font-size: 10px; }
.ai-send-row [data-ai-send] { background: var(--accent, #2f81f7); border-color: var(--accent, #2f81f7); color: #fff; }
.ai-compare-overlay {
  position: fixed;
  inset: 0;
  z-index: 12500;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(0,0,0,.78);
}
.ai-compare-dialog {
  display: flex;
  width: min(1280px, calc(100vw - 56px));
  height: min(820px, calc(100vh - 56px));
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-panel, #161b22);
  border: 1px solid var(--border-strong, #30363d);
  border-radius: 10px;
  box-shadow: 0 20px 70px rgba(0,0,0,.55);
}
.ai-compare-head { display: flex; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--border, #30363d); }
.ai-compare-head strong { flex: 1; }
.ai-compare-head button { border: 0; color: inherit; background: transparent; font-size: 22px; cursor: pointer; }
.ai-compare-panes { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; flex: 1; }
.ai-compare-pane { display: flex; min-width: 0; flex-direction: column; padding: 12px; }
.ai-compare-pane + .ai-compare-pane { border-left: 1px solid var(--border, #30363d); }
.ai-compare-main { min-height: 0; flex: 1; width: 100%; object-fit: contain; background: #fff; border-radius: 6px; }
.ai-compare-picker { display: flex; gap: 7px; padding-top: 10px; overflow-x: auto; }
.ai-compare-picker button { position: relative; flex: 0 0 74px; height: 58px; padding: 2px; overflow: hidden; background: #fff; border: 2px solid transparent; border-radius: 5px; cursor: pointer; }
.ai-compare-picker button.is-on { border-color: var(--accent, #2f81f7); }
.ai-compare-picker img { width: 100%; height: 100%; object-fit: contain; }

.ai-attachment {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--accent, #2f81f7) 55%, var(--border, #30363d));
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent, #2f81f7) 8%, transparent);
}
.ai-attachment[hidden] { display: none; }
.ai-attachment img { width: 54px; height: 42px; object-fit: contain; background: #fff; border-radius: 4px; }
.ai-attachment > div { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.ai-attachment strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-attachment span { color: var(--text-secondary, #8b949e); font-size: 10px; }

@media (max-width: 760px) {
  #ai-image-panel .modal-ai { height: calc((100vh - 24px) / var(--ui-zoom, 1)); }
  .ai-workspace { grid-template-columns: 1fr; grid-template-areas: "results"; }
  .ai-conversation { display: none; }
  .ai-previews { grid-template-columns: 1fr; }
  .ai-head { padding: 15px; }
  .ai-actions, .ai-input { padding-left: 15px; padding-right: 15px; }
  .ai-input-hint { display: none; }
}

@media (max-width: 1080px) {
  .ai-account-summary span { display: none; }
  .ai-account-summary strong { max-width: 150px; }
  .ai-workspace { grid-template-columns: minmax(600px, 1fr) 310px; }
}

.ai-capture-dialog { width: min(900px, calc(100vw - 70px)); max-height: min(700px, calc(100vh - 70px)); }
.ai-capture-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-height: 0; padding: 12px; overflow: auto; }
.ai-capture-source {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  padding: 7px;
  color: var(--text-primary, #e6edf3);
  background: var(--bg-input, #0d1117);
  border: 1px solid var(--border, #30363d);
  border-radius: 7px;
  cursor: pointer;
}
.ai-capture-source:hover { border-color: var(--accent, #2f81f7); }
.ai-capture-source img { width: 100%; height: 180px; object-fit: contain; background: #080b0d; border-radius: 4px; }
.ai-capture-source span { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.ai-crop-dialog { width: min(1180px, calc(100vw - 50px)); height: min(790px, calc(100vh - 50px)); }
.ai-crop-stage {
  display: grid;
  min-height: 0;
  flex: 1;
  place-items: center;
  padding: 16px;
  overflow: hidden;
  background: #090c10;
}
.ai-crop-image-wrap { position: relative; max-width: 100%; max-height: 100%; line-height: 0; cursor: crosshair; user-select: none; }
.ai-crop-image-wrap > img { display: block; max-width: calc(100vw - 110px); max-height: calc(100vh - 170px); object-fit: contain; }
.ai-crop-mask { position: absolute; z-index: 2; background: rgba(25, 31, 39, .68); pointer-events: none; }
.ai-crop-selection { position: absolute; z-index: 3; display: none; border: 2px solid var(--accent, #2f81f7); box-shadow: 0 0 0 1px rgba(255,255,255,.78) inset; pointer-events: none; }
.ai-crop-foot { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-top: 1px solid var(--border, #30363d); }
.ai-crop-foot span { flex: 1; color: var(--text-secondary, #8b949e); font-size: 10px; }
.ai-crop-foot button { padding: 6px 11px; color: var(--text-primary, #e6edf3); background: var(--btn-tool, #21262d); border: 1px solid var(--border, #30363d); border-radius: 5px; cursor: pointer; }
.ai-crop-foot button[data-ai-crop-apply] { color: #fff; background: var(--accent, #2f81f7); border-color: var(--accent, #2f81f7); }

@media (prefers-reduced-motion: reduce) {
  .ai-e-cloud i, .ai-e-core, .ai-progress-track i { animation-duration: 2.5s; }
}
.ai-task-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 5px 10px;
  overflow-x: auto;
  background: color-mix(in srgb, var(--bg-panel, #161b22) 86%, #000);
  border-bottom: 1px solid var(--border, #30363d);
}
.ai-task-tab-list { display: flex; gap: 5px; min-width: 0; }
.ai-task-tab,
.ai-task-tabs > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 84px;
  max-width: 170px;
  padding: 5px 8px;
  color: var(--text-secondary, #8b949e);
  background: var(--bg-input, #0d1117);
  border: 1px solid var(--border, #30363d);
  border-radius: 6px;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.ai-task-tab > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-task-tab.is-on { color: #fff; border-color: var(--accent, #2f81f7); background: color-mix(in srgb, var(--accent, #2f81f7) 22%, var(--bg-input, #0d1117)); }
.ai-task-tab > i { font-style: normal; opacity: .75; }

.ai-batch-panel { padding: 8px; border-top: 1px solid var(--border, #30363d); }
.ai-batch-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 7px; font-size: 10px; }
.ai-batch-head span { color: var(--text-secondary, #8b949e); }
.ai-batch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 7px; }
.ai-batch-card { min-width: 0; padding: 6px; background: var(--bg-input, #0d1117); border: 1px solid var(--border, #30363d); border-radius: 7px; }
.ai-batch-card[data-state="complete"] { border-color: color-mix(in srgb, #3fb950 65%, var(--border, #30363d)); }
.ai-batch-card[data-state="failed"] { border-color: color-mix(in srgb, #f85149 70%, var(--border, #30363d)); }
.ai-batch-card strong,
.ai-batch-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.ai-batch-card span { margin-top: 3px; color: var(--text-secondary, #8b949e); }
.ai-batch-card img { display: block; width: 100%; height: 108px; margin-top: 5px; object-fit: contain; background: #fff; border-radius: 4px; }

.ai-source-group > .ai-file-button,
.ai-source-group > button { min-height: 30px; }
.ai-source-primary { display: inline-flex; align-items: center; cursor: pointer; }
.ai-search-trigger { min-width: 150px; justify-content: flex-start; color: var(--text-secondary, #8b949e); }
.ai-reference-search-overlay { z-index: 10040; }
.ai-reference-search-dialog {
  display: flex;
  width: min(1040px, calc(100vw - 60px));
  height: min(760px, calc(100vh - 60px));
  flex-direction: column;
  overflow: hidden;
  color: var(--text-primary, #e6edf3);
  background: var(--bg-panel, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}
.ai-reference-search-dialog > header,
.ai-reference-search-dialog > footer { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border, #30363d); }
.ai-reference-search-dialog > header strong { flex: 1; font-size: 14px; }
.ai-reference-search-dialog > header button { font-size: 18px; }
.ai-reference-search-dialog > nav { display: flex; gap: 6px; padding: 9px 14px 0; }
.ai-reference-search-dialog button,
.ai-local-folder button { padding: 6px 10px; color: var(--text-primary, #e6edf3); background: var(--btn-tool, #21262d); border: 1px solid var(--border, #30363d); border-radius: 6px; cursor: pointer; }
.ai-reference-search-dialog button.is-on { color: #fff; background: color-mix(in srgb, var(--accent, #2f81f7) 24%, var(--btn-tool, #21262d)); border-color: var(--accent, #2f81f7); }
.ai-reference-search-query { display: flex; align-items: center; gap: 8px; margin: 10px 14px 7px; padding: 8px 11px; background: var(--bg-input, #0d1117); border: 1px solid var(--border, #30363d); border-radius: 7px; }
.ai-reference-search-query:focus-within { border-color: var(--accent, #2f81f7); }
.ai-reference-search-query input { width: 100%; color: var(--text-primary, #e6edf3); background: transparent; border: 0; outline: 0; font: inherit; }
.ai-local-folder { display: flex; align-items: center; gap: 7px; padding: 0 14px 7px; }
.ai-local-folder[hidden] { display: none; }
.ai-local-folder span { flex: 1; overflow: hidden; color: var(--text-secondary, #8b949e); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ai-reference-search-summary { padding: 0 14px 7px; color: var(--text-secondary, #8b949e); font-size: 10px; }
.ai-reference-search-grid { display: grid; min-height: 0; flex: 1; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); align-content: start; gap: 8px; padding: 0 14px 14px; overflow: auto; }
.ai-reference-search-card { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding: 6px !important; text-align: left; }
.ai-reference-search-card.is-on { box-shadow: 0 0 0 2px var(--accent, #2f81f7) inset; }
.ai-reference-search-card img { width: 100%; height: 112px; object-fit: contain; background: #fff; border-radius: 4px; }
.ai-reference-search-card strong,
.ai-reference-search-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-reference-search-card strong { font-size: 10px; }
.ai-reference-search-card span { color: var(--text-secondary, #8b949e); font-size: 9px; }
.ai-reference-search-empty { grid-column: 1 / -1; padding: 60px 20px; color: var(--text-secondary, #8b949e); text-align: center; }
.ai-reference-search-dialog > footer { justify-content: flex-end; border-top: 1px solid var(--border, #30363d); border-bottom: 0; }
.ai-reference-search-dialog > footer span { flex: 1; color: var(--text-secondary, #8b949e); font-size: 10px; }
.ai-reference-search-dialog > footer button { color: #fff; background: var(--accent, #2f81f7); border-color: var(--accent, #2f81f7); }