/* custom.css - V2.3 attachments thumbnails + larger picker thumbnails */

body { font-family: sans-serif; }
.prompt-textarea { resize: vertical; }

.core-image-thumb-wrapper, .slot-image-preview-wrapper {
  position: relative; display: inline-block; margin: 5px;
}
.delete-btn {
  position: absolute; top: -5px; right: -5px; padding: 0.1rem 0.3rem; font-size: 0.7rem; line-height: 1; z-index: 10; border-radius: 50%;
}
#loadingOverlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5); z-index: 9999; display: none; justify-content: center; align-items: center;
}
.local-loader { display: inline-block; margin-left: 8px; vertical-align: middle; }
.local-loader .spinner-border { width: 1rem; height: 1rem; border-width: 0.2em; }

/* Editor modal right panel scroll area */
.editor-chat-scroll {
  overflow-y: auto;
  max-height: 100%;
}

/* Chat bubbles */
.editor-msg {
  position: relative;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
  max-width: 100%;
  word-break: break-word;
}
.editor-msg.user {
  background: #007bff; color: #fff; align-self: flex-end;
}
.editor-msg.ai {
  background: #f1f3f5; color: #333; align-self: flex-start;
}

/* Chat images small; click to bring to left main image */
.editor-msg img {
  max-width: 160px;
  height: auto;
  border-radius: 6px;
  display: block;
  margin-top: 6px;
  cursor: pointer;
  border: 1px solid #ddd;
}

/* Hover tools (retry/edit/delete) */
.msg-tools {
  position: absolute;
  bottom: 6px;
  right: 8px;
  display: none;
  gap: 6px;
}
.editor-msg:hover .msg-tools { display: flex; }

.msg-tool-btn {
  width: 22px; height: 22px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.1); color: #333; font-size: 12px; line-height: 22px; text-align: center;
  cursor: pointer;
}
.msg-tool-btn:hover { background: rgba(0,0,0,0.2); }

/* Thumbnail bar */
.thumb-wrap { position: relative; }
.thumb-img {
  max-height: 70px; max-width: 120px; object-fit: contain; cursor: pointer; border: 1px solid #ccc; border-radius: 4px;
}
.thumb-delete {
  position: absolute; top: -6px; left: -6px; width: 18px; height: 18px;
  background: rgba(0,0,0,0.7); color: white; border: none; border-radius: 50%; font-size: 12px; line-height: 18px; cursor: pointer;
}
.thumb-selected { outline: 3px solid #0d6efd; }

/* GPT param toggle (hidden for Gemini) */
.gpt-only-param { /* display toggled by JS */ }

/* Attachments bar (显示缩略图) */
.attachment-bar {
  display: flex;
  gap: 8px;
  min-height: 86px;
  border: 1px dashed #ddd;
  padding: 6px;
  align-items: center;
  overflow-x: auto;
  background: #fafafa;
}
.attachment-item {
  position: relative;
  display: inline-block;
}
.attachment-thumb {
  max-height: 80px;
  max-width: 120px;
  object-fit: contain;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
}
.attachment-delete {
  position: absolute;
  top: -6px; left: -6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: none;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
}

/* Image Picker（更大的缩略图） */
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.picker-item {
  position: relative;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  transition: box-shadow .2s ease;
}
.picker-item:hover {
  box-shadow: 0 0 0 3px rgba(13,110,253,0.25);
}
.picker-thumb {
  width: 100%;
  height: 150px; /* 更大缩略图，便于查看 */
  object-fit: contain;
  display: block;
  background: #f8f9fa;
}
.picker-check {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  display: none;
}
.picker-item.picker-selected {
  outline: 3px solid #0d6efd;
}
.picker-item.picker-selected .picker-check {
  display: block;
}

/* Annotation UI (轻量样式，尽量少改动) */
#annotationToolbar { user-select: none; }
#annotationCanvas { z-index: 2; }
#editorViewerWrap img { z-index: 1; }
.annot-tool-btn.active { background-color: #0d6efd; color: #fff; }