.feedback-thread-modal {
  width: min(720px, 92vw);
  max-height: calc(100vh - 80px);
  background: #16161a;
  border-radius: 12px;
  border: 1px solid #2a2a2e;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.feedback-thread-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #2a2a2e;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.feedback-thread-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.feedback-thread-modal .feedback-thread-messages {
  max-height: none;
  flex: 1;
}

.modal-backdrop[data-close="feedback-thread"] {
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-backdrop[data-close="feedback-thread"].visible {
  display: flex;
}
.feedback-inbox-panel {
  border-top: 1px solid #2a2a2e;
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 360px;
  overflow: hidden;
}

.feedback-inbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feedback-inbox-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
}

.feedback-thread-item {
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #2a2a2e;
  background: #1b1b20;
  color: #f5f5f7;
  cursor: pointer;
}

.feedback-thread-item .meta,
.feedback-thread-item .preview {
  font-size: 12px;
  color: #a5a5b0;
}

.feedback-thread-view {
  border-top: 1px solid #2a2a2e;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.feedback-thread-messages {
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feedback-thread-message {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #2a2a2e;
}

.feedback-thread-message.from-admin {
  background: rgba(255, 165, 0, 0.08);
  border-color: rgba(255, 165, 0, 0.4);
}

.feedback-thread-message .message-body {
  font-size: 13px;
  line-height: 1.4;
}

.feedback-reply-actions {
  display: flex;
  justify-content: flex-end;
}

.canvas-viewport {
  position: relative;
  height: calc(85vh - 80px);
  min-height: 360px;
  border-radius: 12px;
  overflow: hidden;
}

#advancedBtn {
  background: linear-gradient(180deg, #ff9f43, #ff7b18);
  border: 1px solid rgba(255, 180, 90, 0.6);
  color: #1a0800;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
#advancedBtn:hover,
#advancedBtn:focus-visible {
  background: linear-gradient(180deg, #ffb566, #ff8e2a);
  border-color: rgba(255, 200, 120, 0.8);
  color: #0f0500;
}
.side-panel {
  --panel-tab-width: 28px;
  --panel-visible-gap: 4px;
  position: absolute;
  left: 0;
  width: 240px;
  max-width: calc(100% - 12px);
  background: rgba(11,14,20,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  color: #f2f5ff;
  display: flex;
  transform: translateX(calc(-100% + var(--panel-visible-gap)));
  transition: transform 0.24s ease;
  z-index: 103;
}
.side-panel.open { transform: translateX(0); }
.canvas-toolbar {
  position: sticky;
  bottom: 0;
  left: 0;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  background: rgba(10, 14, 23, 0.92);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  margin-top: 16px;
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  pointer-events: none;
  z-index: 101;
}
.draw-tool-wrap,
.grab-tool-wrap,
.image-tools-wrap {
  display: none !important;
}
.canvas-toolbar button { pointer-events: auto; }
.side-panel button { color: inherit; }
.side-panel .panel-toggle {
  position: absolute;
  left: 100%;
  right: auto;
  width: var(--panel-tab-width);
  height: 72px;
  border-radius: 0 10px 10px 0;
  background: rgba(18,22,33,0.95);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.side-panel .panel-toggle:hover,
.side-panel .panel-toggle:focus-visible { background: rgba(32,38,54,0.95); }
.side-panel[aria-hidden="true"] { pointer-events: none; }
.side-panel[aria-hidden="true"] .panel-toggle { pointer-events: auto; }
.side-panel .panel-toggle .panel-tab-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.side-panel .panel-toggle .panel-tab-icon .icon {
  position: absolute;
  background-size: contain;
  background-position: center;
  opacity: 0.9;
}
.draw-panel {
  top: 50px;
}
.draw-panel .panel-toggle { top: 18px; }
.draw-panel .panel-toggle .icon-pencil {
  width: 18px;
  height: 18px;
  transform: translate(-2px, -2px) rotate(-8deg);
}
.draw-panel .panel-toggle .icon-gear-mini {
  width: 14px;
  height: 14px;
  transform: translate(6px, 8px);
  opacity: 0.85;
}
.gr-image-panel {
  top: 50px;
}
.gr-image-panel .panel-toggle { top: 86px; height: 68px; }
.gr-image-panel .panel-toggle .icon-grab {
  width: 18px;
  height: 18px;
  transform: translate(-3px, -4px) rotate(-10deg);
}
.gr-image-panel .panel-toggle .icon-finish-extend {
  width: 16px;
  height: 16px;
}
.side-panel .panel-body {
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  overflow-y: auto;
  max-height: calc(80vh - 60px);
}
.side-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.side-panel .panel-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #f1f4ff;
}
.panel-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.panel-group h4 {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
  color: rgba(255,255,255,0.7);
}
.panel-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.panel-popover-anchor {
  position: relative;
  display: inline-flex;
}
.panel-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  min-width: 110px;
  border-radius: 10px;
  background: rgba(12, 17, 26, 0.96);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  z-index: 1500;
}
.panel-popover.hidden {
  display: none;
}
.panel-popover .small,
.panel-popover button {
  width: 100%;
  text-align: center;
}
.panel-icon-grid .icon-btn {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.panel-chip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.panel-chip-grid .small { text-align: center; }
.panel-slider {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.panel-slider label {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
}
.panel-slider label span { font-weight: 600; }
.panel-slider input[type="range"] { width: 100%; }
.draw-panel .icon-btn,
.gr-image-panel .icon-btn {
  width: 36px;
  height: 36px;
}
.panel-group label.inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.panel-group label.inline input { width: auto; }
@media (max-width: 900px) {
  .side-panel {
    --panel-tab-width: 32px;
    --panel-visible-gap: 4px;
    width: 220px;
  }
  .draw-panel .panel-toggle,
  .gr-image-panel .panel-toggle { width: var(--panel-tab-width); }
  .draw-panel .panel-toggle { height: 70px; }
  .gr-image-panel .panel-toggle { height: 68px; }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* public/css/styles.css */
:root {
  --bg: #0f1115;
  --panel: #151923;
  --text: #e6e6e6;
  --muted: #a0a3ac;
  --accent: #ff7a18;
  --accent-2: #ffb86b;
  --border: #232735;
  --viewer-bottom-offset: 84px; /* used to nudge canvas above bottom toolbar */
}
/* Viewer modal layout: image fits viewport, metadata in side column */
#viewerModal .modal-backdrop {
  background: rgba(0,0,0,0.92);
}
#viewerModal .modal-content.viewer {
  width: min(96vw, 1600px);
  height: min(96vh, 1000px);
  max-height: 96vh;
  background: transparent;
  box-shadow: none;
  position: relative;
}
#viewerModal .modal-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 102, 0, 0.9);
  color: #0c1018;
  border: none;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
#viewerModal .modal-close-btn:hover {
  background: #ff6600;
  transform: rotate(90deg);
}
#viewerModal .viewer-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
  padding: 20px;
  max-height: 100vh;
  overflow: hidden;
}
#viewerModal .viewer-image-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(12,16,24,0.7);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  width: 100%;
  height: calc(100vh - 80px);
  min-height: 400px;
}
#viewerModal #viewerImage {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  display: block;
  cursor: grab;
  user-select: none;
  transform-origin: center center;
  transition: transform 0.05s ease-out;
  position: absolute;
}
#viewerModal .viewer-image-wrap::after {
  content: 'Click or tap to close';
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.65);
  background: rgba(0,0,0,0.35);
  padding: 6px 12px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#viewerModal .viewer-image-wrap:hover::after {
  opacity: 1;
}
.modal#advancedModal { z-index: 11000; }
.modal#advancedModal .modal-backdrop { z-index: 11000; }
.modal#advancedModal .modal-content { z-index: 11001; }
.tool-menu.hidden { display: none !important; }

.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 165, 0, 0.5);
  background: rgba(255, 165, 0, 0.12);
  color: #ffa500;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.help-icon:hover,
.help-icon:focus-visible {
  background: rgba(255, 165, 0, 0.3);
  color: #111;
  border-color: rgba(255, 165, 0, 0.85);
}
.help-icon.small {
  width: 18px;
  height: 18px;
  font-size: 11px;
}

.help-popover {
  position: fixed;
  z-index: 12000;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(18, 22, 33, 0.96);
  border: 1px solid rgba(255, 165, 0, 0.4);
  color: #f4f5ff;
  font-size: 0.85rem;
  line-height: 1.4;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.help-popover.visible {
  opacity: 1;
  transform: translateY(0);
}

.help-figure,
.help-video {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 12px 0;
  max-width: min(420px, 100%);
}

.help-figure img,
.help-video video {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.35);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

.help-figure figcaption,
.help-video figcaption {
  font-size: 0.82rem;
  color: rgba(204, 209, 230, 0.9);
}
.help-popover.hidden {
  display: none;
}

.help-modal .modal-body {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  max-height: 70vh;
  overflow-y: auto;
}
.help-modal-content {
  line-height: 1.55;
  font-size: 0.95rem;
  color: var(--text);
}
.help-modal-content h4,
.help-modal-content h5 {
  color: #ffa500;
  margin-top: 20px;
  margin-bottom: 8px;
}
.help-modal-content p {
  margin: 10px 0;
}
.help-modal-content ul,
.help-modal-content ol {
  margin: 10px 0 10px 20px;
}
.help-modal-content code {
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.9em;
}
.help-modal-related {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
  font-size: 0.9rem;
}
.help-modal-related strong {
  display: block;
  margin-bottom: 6px;
}
.help-modal-related a {
  color: #ffa500;
  text-decoration: none;
}
.help-modal-related a:hover {
  text-decoration: underline;
}

@media (min-width: 960px) {
  .help-modal .modal-body {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: flex-start;
  }
  .help-modal-related {
    border-top: none;
    border-left: 1px solid rgba(255,255,255,0.08);
    padding-top: 0;
    padding-left: 16px;
  }
}

/* Logs modal styling */
#logsModal .modal-content {
  background: #0f141f;
  color: #e6eefc;
  border: 1px solid var(--border);
  border-radius: 12px;
}
#announcementsModal .modal-content {
  background: #0f141f;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}
#announcementsModal .modal-body {
  flex: 1 1 auto;
  min-height: 0; /* allow child to become scroll container */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Ensure touch scroll is enabled inside announcements modal on mobile */
#announcementsModal .modal-content,
#announcementsModal .modal-body {
  touch-action: pan-y;
}
#logsModal .modal-header h2 { color: #e6eefc; }
#logsModal .modal-body {
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
}
#logsModal .modal-body::-webkit-scrollbar {
  width: 10px;
}
#logsModal .modal-body::-webkit-scrollbar-track {
  background: #0b0f16;
}
#logsModal .modal-body::-webkit-scrollbar-thumb {
  background: #2a2f3a;
  border-radius: 5px;
}
#logsModal .modal-body::-webkit-scrollbar-thumb:hover {
  background: #3a4f6a;
}
#logsModal input, #logsModal select, #logsModal button {
  color: #e6eefc;
  background: #0b0f16;
  border: 1px solid #2a2f3a;
}
#logsModal button.secondary { background: #243148; border: 1px solid #2a3a5a; }
#logsModal button.danger { background: #5a2630; border: 1px solid #7a2a36; color: #ffdede; }

#logsList { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
#logsList .log-row {
  display: grid;
  grid-template-columns: 130px 58px 70px 1fr 70px 80px;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid #222836;
  cursor: pointer;
}
#logsList .log-row:hover { background: rgba(255,255,255,0.06); }
#logsList .log-row.ok .status { color: #86efac; }
#logsList .log-row.err .status { color: #fca5a5; font-weight: 600; }
#logsList .log-row .url { color: #d7e3ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#logsList .log-row .method { color: #d1d5db; }
#logsList .log-row .time, #logsList .log-row .dur, #logsList .log-row .cat { color: #9aa6bd; }

#logDetails {
  background: #1a1f2e;
  border: 1px solid #2a2f3a;
  border-radius: 4px;
  padding: 12px;
  margin-top: 12px;
}

#logDetails .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a2f3a;
}

#logDetails .panel-header strong {
  color: #d7e3ff;
  font-size: 14px;
}

#logDetailsPre {
  color: #e6eefc !important;
  background: #0b0f16 !important;
  border: 1px solid #2a2f3a !important;
  padding: 12px !important;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 40vh;
  overflow-y: auto;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
}

#logDetailsPre::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#logDetailsPre::-webkit-scrollbar-track {
  background: #0b0f16;
}

#logDetailsPre::-webkit-scrollbar-thumb {
  background: #2a2f3a;
  border-radius: 4px;
}

#logDetailsPre::-webkit-scrollbar-thumb:hover {
  background: #3a4f6a;
}

/* Row under the prompt with small icon tools (e.g., reference images) */
.prompt-tools-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
}
.prompt-tools-row .icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}
.prompt-tools-row .icon-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--primary);
  transform: translateY(-1px);
}
/* Canvas settings button needs to be wider for aspect ratio display */
#canvasSettingsBtn {
  width: auto !important;
  min-width: 140px;
  padding: 0 12px !important;
  white-space: nowrap;
  background: rgba(255, 102, 0, 0.1) !important;
  border: 1px solid rgba(255, 102, 0, 0.3) !important;
  font-size: 0.85rem;
}
#canvasSettingsBtn:hover {
  background: rgba(255, 102, 0, 0.2) !important;
  border-color: var(--primary) !important;
}
/* Mobile responsive: make button more compact */
@media (max-width: 768px) {
  #canvasSettingsBtn {
    min-width: 100px;
    font-size: 0.75rem;
    padding: 0 8px !important;
  }
  #canvasSettingsLabel {
    font-size: 0.7rem;
  }
}

.prompt-generator-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 32px;
  min-width: 120px;
  max-width: 130px;
}
.prompt-generator-wrap select {
  width: 100%;
  min-width: 0;
}
.prompt-generator-label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.status-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 12px;
}
.status-row .status {
  flex: 1;
}
.status-row button {
  align-self: center;
}

@media (max-width: 900px) {
  .prompt-generator-wrap {
    margin-left: 0;
    width: 100%;
    max-width: none;
  }
}

.prompt-select-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.prompt-select-row.image-model-row {
  grid-template-columns: 1fr;
}
.aspect-resolution-row {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.prompt-generator-row {
  grid-template-columns: 1fr;
}

.prompt-select {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.prompt-select label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fdd9a0;
}

.prompt-select select {
  width: 100%;
}

.model-generator-row {
  display: flex;
  gap: 14px;
  width: 100%;
  grid-column: 1 / -1;
  align-items: flex-end;
  flex-wrap: wrap;
}
.model-generator-row .prompt-select {
  flex: 1 1 240px;
  min-width: 220px;
}

.image-model-label {
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: rgba(255, 217, 160, 0.9);
}

.help-icon.pill {
  width: auto;
  min-width: 28px;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 182, 109, 0.4);
  background: radial-gradient(circle at 30% 30%, rgba(255, 205, 150, 0.35), rgba(255, 140, 0, 0.25));
  color: #fef2e6;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.35);
}
.help-icon.pill:hover,
.help-icon.pill:focus-visible {
  background: radial-gradient(circle at 30% 30%, rgba(255, 205, 150, 0.55), rgba(255, 140, 0, 0.45));
  color: #1b1207;
}

.image-model-info-btn {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.image-model-info-btn .icon {
  width: 16px;
  height: 16px;
}
.image-model-select select,
.prompt-generator-select select {
  min-height: 38px;
}

@media (max-width: 720px) {
  .model-generator-row {
    flex-direction: column;
    align-items: stretch;
  }
  .aspect-resolution-row {
    grid-template-columns: 1fr;
  }
  .model-generator-row .prompt-select {
    min-width: 0;
  }
  .image-model-label {
    justify-content: space-between;
  }
}

.advanced-section {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(20, 24, 34, 0.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.advanced-section #advancedToggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
  position: relative;
}
.advanced-section #advancedToggle::after {
  content: '\25BC';
  font-size: 0.75rem;
  opacity: 0.7;
  transition: transform 0.2s ease;
  position: absolute;
  right: 16px;
}
.advanced-section.open #advancedToggle::after {
  transform: rotate(180deg);
}
.advanced-content {
  margin-top: 14px;
}
.advanced-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.advanced-grid section {
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  background: rgba(15, 19, 28, 0.9);
}
.advanced-grid section h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: #ffb469;
}

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

/* Compact reference image preview below the prompt */
.preview.compact { margin-top: 8px; }
.preview.compact .preview-hero img { max-height: 180px; }
.preview.compact .preview-grid {
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
}
.preview.compact .preview-grid img { height: 56px; }
/* For the prompt's reference images, hide the large hero preview to keep things compact */
#imagesPreview .preview-hero { display: none; }

/* ---- Image Model Gallery (shared between app.css + this legacy bundle) ---- */
.image-model-info-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(8,11,18,0.85);
  color: #fbd49b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.image-model-info-btn:hover {
  border-color: rgba(255, 215, 150, 0.9);
  color: #2b1c04;
  transform: translateY(-1px);
}
.image-model-info-btn:focus-visible {
  outline: 2px solid var(--primary-orange);
  outline-offset: 2px;
}

.image-model-gallery {
  max-width: 1020px;
}

.image-model-gallery-intro {
  padding: 12px 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 20px;
}

.image-model-gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  align-content: flex-start;
  overflow-y: auto;
  max-height: calc(82vh - 150px);
  padding: 10px 20px 10px 10px;
}

.image-model-card {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: #0b0f19;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
  display: flex;
  flex-direction: column;
  width: 180px;
  height: auto;
  color: #f6f8ff;
  text-align: left;
  box-shadow: 0 6px 16px rgba(3,5,9,0.35);
}

.image-model-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(3,5,9,0.55);
  border-color: rgba(255,128,64,0.3);
}

.image-model-card-thumb {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #151823;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-model-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #151823;
  object-position: center;
}

.image-model-card-footer {
  background: #0d121f;
  padding: 12px 12px;
  display: flex;
  align-items: center;
  min-height: 55px;
}

.image-model-card-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: inherit;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .image-model-card {
    width: calc(50% - 18px);
    min-width: 150px;
  }
  .image-model-detail-thumb {
    max-width: 260px;
    margin-top: 64px;
  }
}

.image-model-gallery-empty {
  grid-column: 1 / -1;
  padding: 20px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  text-align: center;
  color: var(--muted, #ccd2e6);
  font-size: 0.95rem;
}

.image-model-detail-thumb {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  background: #151823;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  margin: 48px auto 24px;
}
.image-model-detail-thumb.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.45);
  font-size: 2.4rem;
}

/* Detail modal close button */
.modal-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}


* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { background-color: var(--bg); }
body {
  margin: 0;
  background: radial-gradient(1000px 600px at 0% 0%, #121828 0%, var(--bg) 40%) no-repeat;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

.container {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 32px 16px 64px;
}

header { margin-bottom: 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
header h1 {
  margin: 0;
  font-size: 1.8rem;
  letter-spacing: 0.3px;
}
header .title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
header .subtitle {
  margin: 0;
  font-size: 1rem;
  color: var(--muted, #ccd2e6);
}
header .account-controls {
  margin-left: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-right: 16px;
}
.btn-header-action {
  display: inline-block;
  padding: 8px 16px;
  background: #ff6600;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s ease;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.btn-header-action:hover {
  background: #ff7722;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 102, 0, 0.3);
}
.account-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.account-summary .sep { display: none; }

@media (max-width: 720px) {
  header { align-items: flex-start; }
  header .account-controls {
    margin-left: 0;
    right: 0;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .btn-header-action {
    font-size: 0.8rem;
    padding: 6px 12px;
  }
  .account-summary {
    align-items: flex-start;
  }
}

/* Hamburger button */
.hamburger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 18px;
  line-height: 1;
  background: transparent;
  color: #e6eefc;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.hamburger-btn:hover { background: rgba(255,255,255,0.06); }

/* Account dropdown menu */
.account-controls .menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0f141f;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 1200; /* above viewer layers and tool menus */
}
/* When hidden class is present, force-hide the menu */
.account-controls .menu.hidden { display: none; }
/* Ensure hidden takes effect for library panes even when other display rules exist */
.library-grid.hidden { display: none !important; }
#promptLibraryPane.hidden { display: none !important; }
#libraryModal .modal-content { display: flex; flex-direction: column; }
#libraryGrid, #promptLibraryPane {
  flex: 1 1 auto;
  min-height: 0; /* critical for nested scroll areas */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.account-controls .menu-username {
  color: #c8d4ec;
  font-size: 0.9rem;
  padding: 4px 6px 6px;
}
.account-controls .menu-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}
.account-controls .menu-item {
  appearance: none;
  border: none;
  background: transparent;
  color: #e6eefc;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.account-controls .menu-item:hover { background: rgba(255,255,255,0.06); }

/* Compact aspect ratio select next to Save button */
.aspect-compact {
  width: 110px;
}

.custom-aspect {
  position: fixed;
  z-index: 5000;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.55);
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.custom-aspect.hidden {
  display: none;
}

.custom-aspect-dialog {
  background: rgba(18, 22, 32, 0.97);
  color: var(--text, #f4f7ff);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  width: clamp(320px, 40vw, 480px);
  max-width: 520px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,0.14);
}

.custom-aspect-header,
.custom-aspect-footer {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.custom-aspect-header {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.custom-aspect-footer {
  border-top: 1px solid rgba(255,255,255,0.08);
}

.custom-aspect-body {
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(160px, 1fr);
  gap: 24px;
}

.custom-aspect-preview {
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  aspect-ratio: 1 / 1;
}

.custom-aspect-preview-inner {
  width: 160px;
  height: 160px;
  max-width: 220px;
  max-height: 220px;
  min-width: 40px;
  min-height: 40px;
  background: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0.08));
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.35);
  transition: width 0.2s ease, height 0.2s ease;
}

.custom-aspect-sliders label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  margin-bottom: 6px;
}
.custom-aspect-sliders input[type="range"] {
  width: 100%;
  accent-color: var(--accent, #ff8c42);
  margin-bottom: 14px;
  background-color: rgba(255,255,255,0.1);
  border-radius: 999px;
  height: 4px;
}

.custom-aspect-summary {
  font-weight: 600;
  font-size: 1.1rem;
}

.custom-aspect-close {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}

.custom-aspect-close:hover,
.custom-aspect-close:focus {
  background: rgba(255,255,255,0.1);
}

.range-label-stacked {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.range-label-stacked span {
  font-weight: 600;
}

.slider-compact {
  width: 110px;
}
.slider-compact input[type="range"] {
  flex: 1;
  min-width: 50px;
  max-width: 90px;
}

@media (max-width: 640px) {
  .custom-aspect {
    padding: 8px;
  }
  .custom-aspect-dialog {
    width: 100%;
    max-width: none;
    height: auto;
  }
  .custom-aspect-body {
    grid-template-columns: 1fr;
  }
  .custom-aspect-preview {
    min-height: 120px;
  }
}

/* Ensure the prompt aspect dropdown and options are legible */
#aspectRatio {
  color: var(--text);
  background: #0f141f;
  border: 1px solid var(--border);
}
#aspectRatio option {
  color: #000; /* native dropdown menus often use white background */
  background: #fff;
}

/* New Canvas tool wrapper positions its menu above the button */
.new-canvas-wrap { position: relative; display: inline-block; }

/* New Canvas popup: multi-column layout to avoid tall menu */
#newCanvasMenu .menu-group {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 6px 10px;
}
#newCanvasMenu .menu-group .muted.small {
  grid-column: 1 / -1; /* label spans all columns */
}
@media (max-width: 640px) {
  #newCanvasMenu .menu-group {
    grid-template-columns: repeat(2, max-content);
  }
}
.account-controls .menu-item.danger { color: #ff6b6b; }
.subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Announcements grid */
.ann-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .ann-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .ann-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.ann-card.card {
  padding: 14px 16px;
}
.ann-title { margin: 0 0 6px; font-size: 1.05rem; color: #e6eefc; }
.ann-date { margin-bottom: 10px; }
.ann-body p { margin: 0 0 8px; }
.ann-body a { color: #8ab4ff; text-decoration: underline; }
.ann-body a:hover { color: #b3ccff; }

.card {
  background: #1c1f2a;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Workspace layout */
.workspace { margin-top: 8px; }
.workspace-2col {
  display: grid;
  grid-template-columns: 420px 1fr; /* controls | viewer */
  gap: 16px;
  align-items: start;
}
.workspace-2col > * { min-width: 0; }
.workspace-grid {
  display: grid;
  grid-template-columns: 460px var(--viewer-col, 1fr);
  grid-template-areas: 'panel viewer';
  gap: 16px;
  align-items: start;
}
.workspace-grid #squareViewer { grid-area: viewer; }
.workspace-grid .panel { grid-area: panel; }
.workspace-grid > * { min-width: 0; } /* prevent grid item overflow causing horizontal scroll */
/* Square resizable viewer wrapper */
.square-viewer {
  position: relative;
  width: 100%;
  height: 86vh; /* auto-adjust to viewport height */
  max-height: calc(100vh - 140px);
  min-height: 420px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: #090b10;
  box-shadow: 0 20px 45px rgba(0,0,0,0.45);
  overflow: hidden; /* focus interactions within viewport */
}
/* Make the canvas viewport fill the square viewer */
.square-viewer .canvas-viewport {
  height: 100%;
  min-height: 320px; /* keep reasonable minimum */
  border: none; /* outer border handled by wrapper */
  border-radius: 0;
}
/* Image sizing within square viewer is handled in JS to avoid conflicts
   with absolute positioning of the canvas and large virtual stage. */
/* Resize handle on bottom-right corner */
.square-viewer .resize-handle {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.08));
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  cursor: nwse-resize;
  z-index: 30;
}
/* Add a subtle diagonal grip */
.square-viewer .resize-handle::after {
  content: '';
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.35) 50%);
  opacity: 0.6;
}
/* Right edge handle: width-only */
.square-viewer .resize-handle-right {
  right: 6px;
  top: 50%;
  bottom: auto;
  width: 10px;
  height: 46%;
  min-height: 48px;
  transform: translateY(-50%);
  cursor: ew-resize;
  border-radius: 6px;
}
.square-viewer .resize-handle-right::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 2px; height: 70%;
  background: rgba(0,0,0,0.35);
  transform: translate(-50%, -50%);
}
/* Bottom edge handle: height-only */
.square-viewer .resize-handle-bottom {
  left: 50%;
  bottom: 6px;
  right: auto; top: auto;
  width: 46%;
  min-width: 48px;
  height: 10px;
  transform: translateX(-50%);
  cursor: ns-resize;
  border-radius: 6px;
}
.square-viewer .resize-handle-bottom::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 70%; height: 2px;
  background: rgba(0,0,0,0.35);
  transform: translate(-50%, -50%);
}
.canvas-viewport {
  position: relative;
  height: calc(85vh - 80px);
  min-height: 360px;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* smooth momentum scrolling on iOS */
  overscroll-behavior: contain; /* avoid page rubber-banding while panning */
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #0b0d12;
}
/* Position the pixel dimensions label at the top right of the view window */
.square-viewer #canvasDims {
  position: absolute;
  top: 8px;
  right: 20px;
  z-index: 101;
  pointer-events: none;
  color: var(--muted);
  font-size: 0.95rem;
  padding: 4px 10px;
  background: rgba(12, 16, 24, 0.8);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.canvas-stage {
  position: relative;
  width: 8000px; /* very large virtual workspace */
  height: 8000px;
  transform-origin: center center; /* zoom anchor */
}
.canvas {
  position: absolute;
  top: calc(50% - var(--viewer-bottom-offset)); /* nudge up to avoid bottom toolbar overlap */
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #000;
  padding: 8px;
  min-height: 320px;
}
.canvas #frameBackdrop {
  position: absolute;
  top: 8px; /* will be overridden by JS */
  left: 8px;
  width: 0; height: 0; /* sized by JS */
  background: #ffffff; /* white to match new canvas background */
  border-radius: 8px;
  z-index: 0;
  pointer-events: none;
}
.canvas img {
  width: 100%;
  height: calc(85vh - 120px);
  max-height: 78vh;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  position: relative;
  z-index: 1; /* ensure above backdrop */
}
.canvas #paintOverlay {
  position: absolute;
  top: 8px; /* initial, updated by JS */
  left: 8px;
  border-radius: 8px;
  pointer-events: auto;
  cursor: crosshair;
  z-index: 2; /* paint overlay above image */
}
/* Mask overlay (Forge inpaint): must sit above paint overlay */
.canvas #maskOverlay {
  position: absolute;
  top: 8px; /* initial, updated by JS */
  left: 8px;
  border-radius: 8px;
  pointer-events: auto;
  z-index: 7; /* above paintOverlay (2) and image (1) */
}
.canvas-tools {
  margin-top: 8px;
}
.canvas-toolbar {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0));
  pointer-events: none; /* let inner buttons receive */
}
/* Top-left overlay history bar (Undo/Redo) */
.overlay-history-bar {
  position: sticky; /* stick to the top-left of the scrollable viewport */
  top: 8px;
  left: 8px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  padding: 6px;
  pointer-events: none; /* container doesn't capture */
  z-index: 100; /* above stage/toolbar */
}
.overlay-history-bar .icon-btn {
  pointer-events: auto; /* buttons clickable */
  width: 34px;
  height: 34px;
  border-radius: 8px;
  margin-top: 0; /* avoid global button margin */
}
.canvas-toolbar .icon-btn {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
/* Draw tool menu wrapper and popup */
.draw-tool-wrap { position: relative; display: inline-block; }
.grab-tool-wrap { position: relative; display: inline-block; }
.image-tools-wrap { position: relative; display: inline-block; }
.tool-menu {
  position: absolute;
  left: 0;
  transform: none;
  bottom: 48px; /* above the 40px button + 8px gap */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(auto, 140px);
  gap: 10px; /* spacing between columns */
  align-items: start;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  pointer-events: auto;
  z-index: 20;
}
.tool-menu::after {
  content: '';
  position: absolute;
  left: 20px; /* align caret roughly under the icon */
  transform: rotate(45deg);
  bottom: -6px;
  width: 10px; height: 10px;
  background: var(--panel);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform-origin: center;
}
.tool-menu .icon-btn { width: 32px; height: 32px; }

/* Generator selection menu: wider, vertical list, full-width buttons */
#genSelectMenu.tool-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: fit-content;        /* fit tightly to content */
  min-width: 0;              /* allow smaller width */
  max-width: 92vw;           /* safe on mobile */
  max-height: min(420px, calc(100vh - 24px));
  overflow-y: auto;
  padding: 8px 0 6px;        /* extra top so label isn't clipped */
  z-index: 1200;             /* ensure above nearby elements */
}
#genSelectMenu .menu-group {
  align-items: flex-start;   /* do not stretch buttons */
  gap: 8px;
  min-width: 0;
}
#genSelectMenu .icon-btn {
  width: auto;               /* size to text content */
  max-width: 100%;           /* do not overflow menu */
  height: auto;              /* allow multi-line if needed */
  padding: 4px 6px;          /* even tighter inner padding */
  line-height: 1.2;
  justify-content: flex-start;
  white-space: nowrap;       /* keep each option on one line */
  flex: 0 0 auto;            /* prevent stretching */
  align-self: flex-start;    /* ensure width stays to content */
}

/* Tighten the small section label inside the generator menu */
#genSelectMenu .menu-group .muted.small { padding: 2px 2px 0 !important; }
#genSelectMenu .menu-group .muted.small { margin: 0 !important; }

/* Position the caret (speech-bubble pointer) under the play button on the right */
#genSelectMenu.tool-menu::after {
  left: auto;
  right: 10px;                 /* align directly with play icon offset */
  top: -6px;                   /* caret on top of bubble */
  bottom: auto;                /* override default bottom caret */
  border-left: none;
  border-bottom: none;
  border-right: 1px solid var(--border); /* flip borders for top caret */
  border-top: 1px solid var(--border);
}

/* Edit generator selection menu: same styling as generation menu */
#editSelectMenu.tool-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: fit-content;
  min-width: 0;
  max-width: 92vw;
  max-height: min(420px, calc(100vh - 24px));
  overflow-y: auto;
  padding: 8px 0 8px;        /* extra padding bottom to prevent cutoff */
  z-index: 1200;
}
#editSelectMenu .menu-group {
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
#editSelectMenu .icon-btn {
  width: auto;
  max-width: 100%;
  height: auto;
  padding: 4px 6px;
  line-height: 1.2;
  justify-content: flex-start;
  white-space: nowrap;
  flex: 0 0 auto;
  align-self: flex-start;
}
#editSelectMenu .menu-group .muted.small { 
  padding: 2px 2px 0 !important; 
  margin: 0 !important; 
}
/* Position the caret under the edit play button */
#editSelectMenu.tool-menu::after {
  left: auto;
  right: 10px;              /* align with play button (offset by additional button width) */
  top: -6px;
  bottom: auto;
  border-left: none;
  border-bottom: none;
  border-right: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

/* Ensure the inline icon container doesn't clip popups */
.input-with-icons { overflow: visible; }

/* Menu layout helpers for grouped options and separators */
.tool-menu .menu-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: max-content;
}
.tool-menu .menu-group .small.muted { white-space: nowrap; }
.tool-menu .menu-sep {
  width: 1px;
  background: var(--border);
  margin: 0 2px;
  align-self: stretch; /* span the height of adjacent columns */
}

/* Image Tools menu: stack options vertically to avoid horizontal overflow on mobile */
#imageToolsMenu.tool-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 92vw; /* ensure no horizontal overflow */
}
#imageToolsMenu .menu-group { align-items: stretch; }
/* Convert separators to horizontal within the vertical image tools menu */
#imageToolsMenu .menu-sep {
  width: 100%;
  height: 1px;
  margin: 4px 0;
}

/* Quick Upscale submenu: fly out to the right of the Quick Upscale option */
#imageToolsMenu .menu-group { position: relative; }
#quickUpscaleMenu.tool-menu {
  position: absolute;
  left: calc(100% + 8px);
  top: 0;
  bottom: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 80vw; /* safety on small screens */
}
#quickUpscaleMenu .menu-group { align-items: stretch; }
.icon {
  display: inline-block;
  width: 20px; height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}
.icon-draw {
  /* Pencil icon */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/></svg>");
}
.icon-pencil {
  /* Simple pencil */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/></svg>");
}
.icon-gear-mini {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3.2'/><path d='M19.4 15a1.4 1.4 0 0 0 .28 1.54l.02.02a1.2 1.2 0 0 1-1.7 1.7l-.02-.02a1.4 1.4 0 0 0-1.54-.28 1.4 1.4 0 0 0-.78 1.26V19a1.2 1.2 0 0 1-2.4 0v-.04a1.4 1.4 0 0 0-.78-1.26 1.4 1.4 0 0 0-1.54.28l-.02.02a1.2 1.2 0 0 1-1.7-1.7l.02-.02a1.4 1.4 0 0 0 .28-1.54 1.4 1.4 0 0 0-1.26-.78H5a1.2 1.2 0 0 1 0-2.4h.04a1.4 1.4 0 0 0 1.26-.78 1.4 1.4 0 0 0-.28-1.54l-.02-.02a1.2 1.2 0 0 1 1.7-1.7l.02.02a1.4 1.4 0 0 0 1.54.28 1.4 1.4 0 0 0 .78-1.26V5a1.2 1.2 0 0 1 2.4 0v.04a1.4 1.4 0 0 0 .78 1.26 1.4 1.4 0 0 0 1.54-.28l.02-.02a1.2 1.2 0 0 1 1.7 1.7l-.02.02a1.4 1.4 0 0 0-.28 1.54 1.4 1.4 0 0 0 1.26.78H19a1.2 1.2 0 0 1 0 2.4h-.04a1.4 1.4 0 0 0-1.26.78z'/></svg>");
}
.icon-eraser {
  /* Eraser */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17l6-6 5 5-4 4H7z'/><path d='M14 6l7 7'/></svg>");
}
.icon-grab {
  /* Hand icon */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 11V5a2 2 0 0 1 4 0v6'/><path d='M12 11V4a2 2 0 1 1 4 0v7'/><path d='M16 11V6a2 2 0 1 1 4 0v6'/><path d='M2 15c2 4 5 6 10 6s8-4 8-8v-2'/></svg>");
}
.icon-cut {
  /* Scissors icon */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='6' r='3'/><circle cx='6' cy='18' r='3'/><path d='M20 4L8.5 15.5'/><path d='M20 20L4 4'/></svg>");
}
.icon-finish-extend {
  /* Outer dotted square + inner solid square */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2' ry='2' stroke-dasharray='2 2' /><rect x='7' y='7' width='10' height='10' rx='1' ry='1' fill='none'/></svg>");
}
/* New Canvas icon: square with a small plus */
.icon-new-canvas {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><path d='M12 7v10'/><path d='M7 12h10'/></svg>");
}
/* Remove Object icon: circle with an X */
.icon-remove-object {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9 9l6 6'/><path d='M15 9l-6 6'/></svg>");
}
/* Eye icon */
.icon-eye { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/><circle cx='12' cy='12' r='3'/></svg>"); }
/* Face icon */
.icon-face { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='9' cy='10' r='1'/><circle cx='15' cy='10' r='1'/><path d='M8 15c1.5 1 6.5 1 8 0'/></svg>"); }
/* Person icon */
.icon-person { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4 4-7 8-7s8 3 8 7'/></svg>"); }
/* Camera icon */
.icon-camera {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3l2-3h8l2 3h3a2 2 0 0 1 2 2z'/><circle cx='12' cy='13' r='4'/></svg>");
}
/* Upload icon: arrow up into a tray */
.icon-upload {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><path d='M7 10l5-5 5 5'/><path d='M12 15V5'/></svg>");
}
/* Library icon: open book */
.icon-library {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 4a2 2 0 0 1 2-2h6a4 4 0 0 1 4 4v14a4 4 0 0 0-4-4H4a2 2 0 0 0-2 2z'/><path d='M14 4a4 4 0 0 1 4-4h4v18h-4a4 4 0 0 0-4 4z'/></svg>");
}
.icon-undo {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 14l-5-5 5-5'/><path d='M20 20v-4a8 8 0 0 0-8-8H4'/></svg>");
}
.icon-redo {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 14l5-5-5-5'/><path d='M4 20v-4a8 8 0 0 1 8-8h8'/></svg>");
}
.canvas img.hidden { display: none; }
.panel {
  position: sticky;
  top: 16px;
  /* Let the page scroll instead of a nested scrollbar */
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
  padding: 4px 16px 8px 8px; /* add comfortable right padding */
}
.form-controls label { margin-top: 10px; }
.form-controls { padding-right: 12px; }
.row-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap; /* avoid overflow when space is tight */
}
.input-row select { flex: 1; min-width: 0; }

/* Collapsible Advanced section */
details {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px 10px;
  background: #0f141f;
}
details > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--muted);
  margin: 4px 0 8px;
}
details > summary::-webkit-details-marker { display: none; }
.form-controls input[type="file"] { margin-top: 4px; }

.draw-controls {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
label.inline {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
}
.buttons {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap; /* allow wrapping to avoid horizontal scroll */
}
.buttons button { white-space: normal; } /* allow multi-line labels to wrap */
.buttons.sticky {
  position: sticky;
  bottom: 0;
  padding-top: 8px;
  margin-top: 8px;
  background: linear-gradient(180deg, rgba(15,17,21,0), #0f141f 60%);
  backdrop-filter: blur(2px);
}

/* Button variants */
.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.secondary:hover {
  background: rgba(255,255,255,0.05);
}
.secondary.active {
  background: rgba(255,255,255,0.08);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,122,24,0.25);
  color: var(--text);
}
.danger {
  background: #a93a3a;
}
.danger:hover {
  background: #c74646;
}

/* Active toggle state for danger-styled buttons (e.g., Remove Object) */
.danger.active {
  background: #c74646;
  box-shadow: 0 0 0 2px rgba(201, 64, 64, 0.35), 0 6px 18px rgba(0,0,0,0.35);
  color: #fff;
}
/* retain hover feedback while active */
.danger.active:hover {
  background: #d35656;
}

.small { font-size: 12px; padding: 6px 8px; }

label { display: block; margin-bottom: 8px; color: var(--muted); }
textarea {
  width: 100%;
  resize: vertical;
  min-height: 100px;
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  background: #0f141f;
  border: 1px solid var(--border);
  outline: none;
}
textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,122,24,0.15); }
/* Drag-and-drop highlighting for textareas */
textarea.drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,122,24,0.25), inset 0 0 0 2px rgba(255,122,24,0.12);
  background: #121824;
}

/* Inline icon buttons embedded in textarea fields */
.input-with-icons { position: relative; }
.input-with-icons > textarea { padding-right: 14px; }
.inline-icon-btn {
  position: relative;
  top: auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.input-with-icons .inline-icon-btn {
  position: absolute;
  top: 10px;
}
/* spinner hidden by default */
.inline-icon-btn .spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); border-top-color: #fff; animation: spin .8s linear infinite; }
.inline-icon-btn.busy .spinner, .inline-icon-btn[aria-busy="true"] .spinner { display: inline-block; }
.inline-icon-btn.busy .icon, .inline-icon-btn[aria-busy="true"] .icon { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }
/* place buttons on the right edge, stacked horizontally */
.input-with-icons #promptRunBtn, .input-with-icons #editRunBtn { right: 10px; }
.input-with-icons #promptRandomBtn { right: 44px; }
.input-with-icons #promptEnhanceBtn { right: 78px; }

.prompt-tools-row .inline-icon-btn {
  width: 32px;
  height: 32px;
  margin-top: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text);
}
.prompt-tools-row .inline-icon-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--primary);
  transform: translateY(-1px);
}

.gen-tool-wrap,
.edit-tool-wrap {
  position: relative;
  display: inline-block;
}

/* Icons for play-in-circle and diamond */
.icon-play-circle {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polygon points='10,8 16,12 10,16 10,8' fill='white' stroke='white'/></svg>");
}
.icon-diamond {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 9-8 9-8-9 8-9z'/></svg>");
}
/* Dice icon for Random Prompt */
.icon-dice {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='3' ry='3'/><circle cx='8' cy='8' r='1.5' fill='white' stroke='white'/><circle cx='12' cy='12' r='1.5' fill='white' stroke='white'/><circle cx='16' cy='16' r='1.5' fill='white' stroke='white'/></svg>");
}

.icon-image-to-text {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3h7l3 3v15a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/><path d='M15 3v3h3'/><rect x='8' y='8' width='6.5' height='5' rx='1'/><path d='M8.6 12.5l1.9-2 1.6 1.6 1.3-1.1 1.1 1.5'/><path d='M8 15.5h8'/><path d='M8 18h8'/></svg>");
}

/* Layered images icon for reference image picker */
.icon-layers { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2L3 7l9 5 9-5-9-5z'/><path d='M3 12l9 5 9-5'/><path d='M3 17l9 5 9-5'/></svg>"); }

button {
  margin-top: 12px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border: none;
  color: #111;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
}
button:disabled { opacity: 0.7; cursor: not-allowed; }

.status, .error {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.95rem;
}
.status { background: #0f2a18; border: 1px solid #1c4b2e; color: #a8e6b2; }
.error { background: #2a0f10; border: 1px solid #4b1c1f; color: #ffb3b8; }
.hidden { display: none; }

.result { margin-top: 22px; }
.result h2 { margin: 0 0 12px; font-size: 1.2rem; color: var(--muted); }
.result img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 12px;
  background: #0e1118;
  border: 1px solid var(--border);
}

/* Previews for selected reference images */
.preview { margin-top: 10px; }
.preview-hero {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  background: #0e1118;
  margin-bottom: 8px;
}
.preview-hero img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}
.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}
.preview-grid img {
  width: 100%;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #0e1118;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.preview-grid img:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
/* Thumbnail wrapper to host remove overlay */
.preview-grid .thumb {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
.preview-grid .thumb img {
  width: 100%;
  height: 72px;
  object-fit: cover;
  display: block;
}
.preview.compact .preview-grid .thumb img { height: 56px; }
.preview-grid .thumb-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}
.preview-grid .thumb-remove:hover { background: rgba(0,0,0,0.85); }

footer { margin-top: 28px; color: var(--muted); }
footer a { color: var(--accent-2); text-decoration: none; }
footer a:hover { text-decoration: underline; }

.muted { color: var(--muted); }

/* Responsive: stack on smaller screens */
@media (max-width: 900px) {
  .workspace-2col { grid-template-columns: 1fr; }
  .panel {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }
  .canvas img {
    height: auto;
    max-height: 60vh;
  }
}

@media (max-width: 600px) {
  .modal-content {
    width: 100vw;
    height: 95vh;
    max-height: 95vh;
  }
  /* Use flex fill instead of fixed height to avoid clipping on small screens */
  #libraryModal .library-grid { height: auto; max-height: none; }
  .row-compact { grid-template-columns: 1fr; }
  .buttons { flex-wrap: wrap; }
  textarea { min-height: 80px; }

  /* Make the viewer taller on mobile */
  .square-viewer { height: 70vh; }
  .canvas img { height: auto; max-height: 85vh; }

  /* Library modal header – make actions compact and horizontally scrollable */
  #libraryModal .modal-header {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  #libraryModal .modal-header h3 { margin: 0; }
  #libraryModal .tabs button { font-size: 12px; padding: 4px 8px; }
  #libraryModal .modal-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;                /* allow two rows */
    row-gap: 4px;
    overflow-x: visible;            /* no horizontal scroll needed */
    padding-bottom: 2px;            /* keep tight */
    padding-left: 8px;              /* consistent padding */
    padding-right: 8px;
    white-space: normal;            /* allow wrapping */
    position: relative;
  }
  #libraryModal .modal-actions > * {
    flex: 0 0 auto;                 /* keep items inline */
    min-width: max-content;
    margin-top: 0;                  /* override global button margin */
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
  }
  #libraryModal #libraryDateFilter { min-width: 108px; font-size: 11px; }

  /* Ensure important actions visible first on mobile */
  #libraryModal #selectToggleBtn { order: -4; }
  #libraryModal #closeLibraryBtn { order: -3; }
  #libraryModal #clearLibraryBtn { order: -2; }
  #libraryModal #deleteSelectedBtn { order: -1; }

  /* Subtle scroll hint (fade edges) */
  /* Disable scroll hint gradients when wrapping */
  #libraryModal .modal-actions::before,
  #libraryModal .modal-actions::after { display: none; }
}

/* Modal styles */
.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10000;
}
.modal.hidden { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
  z-index: 10000;
}
.modal-content {
  position: relative;
  width: min(1100px, 92vw);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 10001;
}

/* Prevent background/body scroll when any modal is open (mobile-safe) */
html.modal-open, body.modal-open {
  overflow: hidden !important; /* lock background */
  height: 100vh;
  /* do not disable touch-action globally; allow inner modals to handle their own scrolling */
  overscroll-behavior: none;
}

/* Safety: ensure viewer wrappers never exceed modal stacking */
.square-viewer,
.canvas-viewport,
.canvas,
.canvas-toolbar,
.overlay-history-bar { z-index: 100 !important; }

/* When a modal is open, disable interactions with the viewer entirely */
body.modal-open .square-viewer,
body.modal-open .canvas-viewport,
body.modal-open .canvas,
body.modal-open .canvas-toolbar,
body.modal-open .overlay-history-bar { pointer-events: none !important; }
/* Also hide viewer scrollbars while modal is open to avoid drawing above modal */
body.modal-open .canvas-viewport { overflow: hidden !important; }
/* Ensure modal content has an opaque background for readability */
.modal-content.card {
  background: #0f141f; /* override translucent card gradient inside modals */
}

/* Feedback Modal Styles */
.feedback-modal {
  position: fixed;
  top: 40px;
  right: 20px;
  bottom: 40px;
  z-index: 9999;
  overflow-y: auto;
  display: flex;
  justify-content: flex-end;
  animation: slideInRight 0.3s ease-out;
}

.feedback-modal.hidden {
  display: none;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.feedback-card {
  width: 520px;
  max-width: 640px;
  background: #16161a;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}

.feedback-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #1a1a1e;
  border-bottom: 1px solid #2a2a2e;
}

.feedback-header h3 {
  margin: 0;
  color: #ffa500;
  font-size: 18px;
}

.feedback-header .close-btn {
  background: transparent;
  border: none;
  color: #9a9aa0;
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.feedback-header .close-btn:hover {
  background: #2a2a2e;
  color: #fff;
}

.feedback-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.feedback-body textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #2a2a2e;
  background: #0f0f13;
  color: #eaeaea;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
}
.feedback-body select {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #2a2a2e;
  background: #0f0f13;
  color: #eaeaea;
  font-family: inherit;
  font-size: 14px;
}

.feedback-body textarea:focus {
  outline: none;
  border-color: #ffa500;
}

.feedback-footer {
  padding: 16px 20px;
  background: #1a1a1e;
  border-top: 1px solid #2a2a2e;
  display: flex;
  justify-content: flex-end;
}

.feedback-footer .btn-primary {
  padding: 10px 20px;
  background: #ff8c00;
  color: #111;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.feedback-footer .btn-primary:hover {
  background: #ffa500;
  transform: translateY(-1px);
}

.feedback-footer .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.feedback-eyebrow {
  margin: 0;
  color: #9a9aa0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feedback-intent-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.intent-option {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #2a2a2e;
  border-radius: 10px;
  background: #111114;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.intent-option input[type="radio"] {
  margin-top: 4px;
}

.intent-option:hover,
.intent-option:has(input:checked) {
  border-color: #ffa500;
  background: #19191d;
}

.intent-title {
  display: block;
  font-weight: 600;
}

.intent-description {
  display: block;
  font-size: 12px;
  color: #9a9aa0;
}

.feedback-hint {
  margin-top: 12px;
  font-size: 13px;
  color: #9a9aa0;
}

.feedback-inbox-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.feedback-inbox-link .link-btn {
  background: none;
  border: none;
  padding: 0;
  color: #ffa500;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

.feedback-inbox-link .badge {
  background: #ff3b3b;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  padding: 2px 8px;
}

/* Interactive Star Rating */
.star-rating {
  display: flex;
  gap: 4px;
  font-size: 32px;
  cursor: pointer;
  user-select: none;
}

.star-rating .star {
  color: #2a2a2e;
  transition: color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.star-rating .star:hover,
.star-rating .star.hover {
  color: #ffa500;
  transform: scale(1.1);
}

.star-rating .star.selected {
  color: #ffa500;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .feedback-modal {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 12px;
    justify-content: center;
    align-items: flex-start;
  }
  
  .feedback-card {
    width: 100%;
    max-height: none;
  }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-header .header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-header .header-left .tabs {
  display: inline-flex;
  gap: 6px;
}
.modal-header .modal-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.modal-header {
  margin-bottom: 12px;
  position: sticky;
  top: 0;
  background: #0f141f;
  z-index: 2;
  padding: 10px 20px 8px;
  border-bottom: 1px solid var(--border);
}
.modal-actions { display: flex; gap: 8px; }
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  max-height: calc(86vh - 70px);
  padding-right: 16px;
  padding-bottom: 140px; /* allow space for action menus near bottom */
  touch-action: pan-y;
}
/* Ensure the grid flexes in the library modal specifically */
#libraryModal .library-grid { max-height: none; height: auto; flex: 1 1 auto; }

/* Advanced modal internal padding and section spacing */
#advancedModal .modal-body { padding: 8px 20px 20px; }
#advancedModal section { padding: 6px 0 12px; border-bottom: 1px solid var(--border); }
#advancedModal section:last-child { border-bottom: none; }

/* Preflight modal - two-column layout with text left, images right */
#preflightModal .modal-content {
  display: flex !important;
  flex-direction: column !important;
  max-height: 90vh !important;
  width: min(1400px, 95vw) !important;
}
#preflightModal .modal-header {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: #0f141f;
  z-index: 10;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
#preflightModal .preflight-body {
  flex: 1 1 auto !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  padding: 16px 20px !important;
  min-height: 0 !important;
}
#preflightModal .preflight-info {
  overflow-y: auto;
  padding-right: 8px;
}
#preflightModal .preflight-preview {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
#preflightModal .preflight-preview img {
  max-height: 50vh;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}
#preflightModal .preflight-info pre {
  max-height: 300px;
  overflow-y: auto;
}
/* Mobile: stack vertically with text on top, images below */
@media (max-width: 900px) {
  #preflightModal .modal-content {
    width: 100vw !important;
  }
  #preflightModal .preflight-body {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto;
  }
  #preflightModal .preflight-info {
    order: 1;
    padding-right: 0;
    max-height: 40vh;
  }
  #preflightModal .preflight-preview {
    order: 2;
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 12px;
    margin-top: 12px;
  }
  #preflightModal .preflight-preview img {
    max-height: 35vh !important;
  }
}

/* Viewer modal (full-screen image view) */
.modal-content.viewer {
  width: min(1200px, 96vw);
  max-height: 96vh;
  display: flex;
  flex-direction: column;
}
.modal#viewerModal .modal-content.viewer { overscroll-behavior: contain; }
/* Ensure the viewer uses a grid layout with a scrollable meta panel on larger screens */
#viewerModal .viewer-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 12px;
  align-items: start;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#viewerModal .viewer-meta {
  background: rgba(12,16,24,0.9);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 20px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#viewerModal .viewer-meta h4 {
  color: #ff6600;
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.1rem;
}
#viewerModal .viewer-meta > div > div {
  margin-bottom: 12px;
  line-height: 1.6;
  color: #c5c8d4;
  word-wrap: break-word;
}
#viewerModal .viewer-meta strong {
  color: #ff6600;
  display: block;
  margin-bottom: 4px;
}
@media (max-width: 900px) {
  #viewerModal .viewer-body { 
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100vh;
  }
  #viewerModal .viewer-image-wrap {
    height: auto;
    min-height: 300px;
    max-height: 60vh;
  }
  #viewerModal .viewer-meta { 
    max-height: none;
    position: relative;
  }
}
.viewer-body {
  flex: 1;
  overflow: auto;
  display: grid;
  place-items: center;
  background: #0f141f;
}
.viewer-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.library-grid .section-header {
  grid-column: 1 / -1;
  margin: 6px 0 2px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
}
.library-grid .item {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0e1118;
  overflow: visible; /* allow dropdown menus to overflow */
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.library-grid .item.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,122,24,0.25);
}
.library-grid .item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.library-grid img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.library-grid .meta {
  padding: 6px 8px;
  color: var(--muted);
  font-size: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
}
.library-grid .meta .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.library-grid .meta .actions { display: flex; gap: 6px; }
.library-grid .meta .actions input[type="checkbox"] { transform: translateY(1px); }

/* Library tile action dropdown */
.library-grid .meta .actions .action-group { position: relative; z-index: 1; }
.library-grid .meta .actions .action-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: #0e1118;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  padding: 6px;
  display: flex;
  flex-direction: column;
  z-index: 1000;
}
.library-grid .meta .actions .action-menu .menu-item {
  text-align: left;
  padding: 6px 8px;
}
.library-grid .meta .actions .action-menu .menu-item.danger {
  color: #ff6b6b;
}
.library-grid .meta .actions .action-menu .menu-separator {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Prompt library table selection */
.table.compact tr.selected {
  background: rgba(255,122,24,0.12);
}
.table.compact tr.selected td {
  border-color: rgba(255,122,24,0.3);
}

/* Prompt Library thumbnail */
#promptLibraryPane .prompt-lib-thumb {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0e1118;
  align-self: flex-start;
}

/* ===== Footer ===== */
.main-footer {
  background-color: #000;
  padding: 40px 0 20px;
  margin-top: 60px;
  border-top: 1px solid rgba(255, 102, 0, 0.2);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer-section h3 {
  color: var(--primary-orange, #ff6600);
  margin-bottom: 15px;
  font-size: 1.3rem;
}

.footer-section h4 {
  color: var(--primary-orange, #ff6600);
  margin-bottom: 12px;
  font-size: 1.1rem;
}

.footer-section p {
  color: #999;
  line-height: 1.6;
  font-size: 0.9rem;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section ul li {
  margin-bottom: 8px;
}

.footer-section ul li a {
  color: #999;
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 0.9rem;
}

.footer-section ul li a:hover {
  color: var(--primary-orange, #ff6600);
}

.social-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.social-links a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 102, 0, 0.1);
  border-radius: 50%;
  color: var(--primary-orange, #ff6600);
  font-size: 16px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-links a:hover {
  background-color: var(--primary-orange, #ff6600);
  color: white;
  transform: translateY(-2px);
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 102, 0, 0.1);
  color: #999;
}

.footer-bottom p {
  margin: 5px 0;
  font-size: 0.85rem;
}

.footer-legal-links {
  margin-top: 8px;
  font-size: 0.85rem;
}

.footer-legal-links a {
  color: #999;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-legal-links a:hover {
  color: var(--primary-orange, #ff6600);
}