/* Results-only styles. The initial prompt, headline and app chrome keep their
   approved layout. All result surfaces inherit the existing AI theme. */
.zingoo-ai:has(> .zg-ai-results:not([hidden])) { flex-direction: column; align-items: center; gap: 28px; }
.content-scroll:has(.zg-ai-results:not([hidden])) { justify-content: flex-start; padding-top: var(--ai-results-top-offset, 24px); padding-bottom: 32px; }
.zingoo-ai .zg-ai-results { --result-muted-surface: #f7f5fc; --result-green-surface: #ecf8f1; --result-green: #177447; width: min(100%, 1280px); min-width: 0; color: var(--ai-ink); font: 400 14px/1.6 var(--body-font-family); }
.dark-mode .zingoo-ai .zg-ai-results { --result-muted-surface: #292037; --result-green-surface: #1b352c; --result-green: #94d8af; }
.zingoo-ai .zg-ai-results[hidden] { display: none; }
.zingoo-ai .zg-ai-history-entry + .zg-ai-history-entry { margin-top: 16px; }
.zingoo-ai .zg-ai-results-loading + .zg-ai-history-entry { margin-top: 16px; }
.zingoo-ai .zg-ai-history-pager button:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 2px; }
.zingoo-ai .zg-ai-history-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; }
.zingoo-ai .zg-ai-history-pager button { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; background: var(--ai-secondary-surface); color: var(--ai-ink); font: inherit; cursor: pointer; }
.zingoo-ai .zg-ai-history-pager button:disabled { opacity: .5; cursor: not-allowed; }
.zingoo-ai .zg-ai-results-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.zingoo-ai .zg-ai-results-heading h2 { margin: 0; color: var(--ai-muted); font: 600 14px/1.5 var(--body-font-family); }
.zingoo-ai .zg-ai-result-panel { padding: 24px; border: 1px solid var(--ai-pill-border); border-radius: 16px; background: var(--ai-surface); }
.zingoo-ai .zg-ai-approval-error { margin: 0 0 12px; color: #b42332; overflow-wrap: anywhere; }
.dark-mode .zingoo-ai .zg-ai-approval-error { color: #ffacb5; }
.zingoo-ai .zg-ai-approval-error[hidden] { display: none; }
.zingoo-ai .zg-ai-approval-spinner { display: inline-block; margin-right: 6px; animation: zg-ai-approval-spin 1s linear infinite; }
@keyframes zg-ai-approval-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .zingoo-ai .zg-ai-approval-spinner { animation: none; } }
.zingoo-ai .zg-ai-result-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }
.zingoo-ai .zg-ai-result-heading-text { flex: 1 1 200px; min-width: 0; }
.zingoo-ai .zg-ai-result-header h3 { margin: 0; font: 600 20px/1.4 var(--display-font-family); color: var(--ai-ink); overflow-wrap: anywhere; }
.zingoo-ai .zg-ai-overview { margin-bottom: 16px; }
.zingoo-ai .zg-ai-overview p { margin: 0; color: var(--ai-muted); font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.zingoo-ai .zg-ai-carousel { position: relative; min-width: 0; }
.zingoo-ai .zg-ai-question-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 56px) / 5); gap: 14px; margin: 0; padding: 3px 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.zingoo-ai .zg-ai-question-track::-webkit-scrollbar { display: none; }
.zingoo-ai .zg-ai-result-item { position: relative; display: flex; min-width: 0; scroll-snap-align: start; }
.zingoo-ai .zg-ai-question-actions { position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; opacity: 0; pointer-events: none; }
.zingoo-ai .zg-ai-result-item:hover .zg-ai-question-actions,
.zingoo-ai .zg-ai-result-item:focus-within .zg-ai-question-actions,
.zingoo-ai .zg-ai-question-actions:has(.zg-ai-question-menu:popover-open) { opacity: 1; visibility: visible; }
.zingoo-ai .zg-ai-result-item:hover .zg-ai-question-more,
.zingoo-ai .zg-ai-result-item:focus-within .zg-ai-question-more,
.zingoo-ai .zg-ai-question-actions:has(.zg-ai-question-menu:popover-open) .zg-ai-question-more { pointer-events: auto; }
.zingoo-ai .zg-ai-question-more { position: relative; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: linear-gradient(180deg, rgba(28, 24, 20, .36), rgba(18, 12, 8, .64)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .16); color: #fff; cursor: pointer; }
.zingoo-ai .zg-ai-more-dots { display: flex; align-items: center; justify-content: center; gap: 3px; }
.zingoo-ai .zg-ai-more-dots span { width: 3.5px; height: 3.5px; border-radius: 50%; background: currentColor; }
.zingoo-ai .zg-ai-question-more::before { content: ''; position: absolute; inset: -7px; }
.zingoo-ai .zg-ai-question-more:hover, .zingoo-ai .zg-ai-question-more[aria-expanded="true"] { background: linear-gradient(180deg, rgba(28, 24, 20, .48), rgba(18, 12, 8, .74)); }
.zingoo-ai .zg-ai-question-more:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 2px; }
.zingoo-ai .zg-ai-question-menu { position: fixed; inset: auto; box-sizing: border-box; width: 184px; max-width: calc(100vw - 16px); margin: 0; padding: 6px; border: 0; border-radius: 12px; background: var(--ai-surface); color: var(--ai-ink); box-shadow: 0 6px 24px rgba(24, 14, 43, .18); pointer-events: auto; }
.zingoo-ai .zg-ai-question-menu:popover-open { display: grid; gap: 0; }
.zingoo-ai .zg-ai-question-action { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 5px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ai-ink); text-align: left; font: 400 13px/1.4 var(--body-font-family); cursor: pointer; }
.zingoo-ai .zg-ai-question-action i { font-size: 20px; }
.zingoo-ai .zg-ai-question-action:hover { background: var(--ai-secondary-surface); }
.zingoo-ai .zg-ai-question-action:disabled { color: var(--ai-muted); cursor: not-allowed; }
.zingoo-ai .zg-ai-question-action:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 2px; }
.zingoo-ai .zg-ai-edit-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.zingoo-ai .zg-ai-edit-fields { display: grid; gap: 16px; min-height: 0; padding: 22px 24px 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.zingoo-ai .zg-ai-edit-fields::-webkit-scrollbar { display: none; }
.zingoo-ai .zg-ai-edit-footer { flex: 0 0 auto; padding: 12px 24px 20px; background: var(--ai-surface); border-top: 1px solid var(--ai-pill-border); }
.zingoo-ai .zg-ai-edit-footer .zg-ai-edit-save { width: 100%; }
.zingoo-ai .zg-ai-edit-field { display: grid; gap: 6px; font-size: 14px; }
.zingoo-ai .zg-ai-edit-control { position: relative; }
.zingoo-ai .zg-ai-edit-thumbnail { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: min(100%, 240px); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: var(--ai-secondary-surface); color: var(--ai-focus); }
.zingoo-ai .zg-ai-edit-thumbnail > i { font-size: 32px; }
.zingoo-ai .zg-ai-thumbnail-empty { color: var(--ai-muted); font-size: 12px; }
.zingoo-ai .zg-ai-edit-thumbnail img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.zingoo-ai .zg-ai-edit-thumbnail .zg-ai-field-generate { background: var(--ai-surface); }
.zingoo-ai .zg-ai-field-generate { position: absolute; right: 5px; bottom: 5px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ai-focus); font-size: 18px; cursor: not-allowed; }
.zingoo-ai .zg-ai-edit-field textarea { box-sizing: border-box; field-sizing: content; width: 100%; height: auto; min-height: calc(1lh + 22px); max-height: calc(3lh + 22px); padding: 10px 38px 10px 10px; border: 1px solid var(--ai-input-border); border-radius: 8px; background: var(--ai-surface); color: var(--ai-ink); font: inherit; line-height: 1.5; overflow-y: auto; resize: none; scrollbar-width: none; }
.zingoo-ai .zg-ai-edit-field textarea::-webkit-scrollbar { display: none; }
.zingoo-ai .zg-ai-edit-field textarea:focus-visible, .zingoo-ai .zg-ai-edit-save:focus-visible, .zingoo-ai .zg-ai-edit-choice-label input:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 2px; }
.zingoo-ai .zg-ai-edit-choice-label { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; }
.zingoo-ai .zg-ai-edit-choice-label input { accent-color: var(--ai-focus); }
.zingoo-ai .zg-ai-edit-choice-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.zingoo-ai .zg-ai-choices-generate { position: static; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; height: 30px; padding: 0 10px; background: var(--ai-secondary-surface); font: 500 12px/1.5 var(--body-font-family); }
.zingoo-ai .zg-ai-choices-generate i { font-size: 18px; }
.zingoo-ai .zg-ai-choices-generate[hidden] { display: none; }
.zingoo-ai .zg-ai-edit-choices { display: grid; gap: 12px; }
.zingoo-ai .zg-ai-edit-choices[hidden] { display: none; }
.zingoo-ai .zg-ai-edit-save { min-height: 44px; padding: 10px 16px; border: 0; border-radius: 8px; background: var(--ai-accent); color: #fff; font: inherit; cursor: pointer; }
@media (hover: none), (pointer: coarse) {
  .zingoo-ai .zg-ai-question-actions { opacity: 1; visibility: visible; }
  .zingoo-ai .zg-ai-question-more { pointer-events: auto; }
}
.zingoo-ai .zg-ai-question, .zingoo-ai .zg-ai-skeleton-card { position: relative; display: flex; flex-direction: column; align-items: stretch; box-sizing: border-box; width: 100%; padding: 8px 8px 12px; border: 1px solid var(--ai-pill-border); border-radius: 12px; background: var(--ai-surface); color: var(--ai-ink); text-align: center; font-family: var(--body-font-family); cursor: default; }
.zingoo-ai .zg-ai-result-item:hover .zg-ai-question { border-color: var(--ai-prompt-border); background: var(--result-muted-surface); }
.zingoo-ai .zg-ai-question-number { position: absolute; top: 12px; left: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--result-muted-surface); color: var(--ai-focus); font-size: 13px; font-weight: 600; }
.zingoo-ai .zg-ai-question-thumbnail { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 10px; overflow: hidden; border-radius: 6px; background: var(--ai-secondary-surface); color: var(--ai-focus); font-size: 40px; }
.zingoo-ai .zg-ai-question-thumbnail img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.zingoo-ai .zg-ai-question-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-bottom: 8px; font-size: 14px; font-weight: 600; line-height: 1.55; overflow-wrap: anywhere; }
.zingoo-ai .zg-ai-question-answer { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: var(--ai-muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.zingoo-ai .zg-ai-question[data-tone="green"] .zg-ai-question-thumbnail { color: var(--result-green); background: var(--result-green-surface); }
.zingoo-ai .zg-ai-carousel-arrow { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ai-pill-border); border-radius: 50%; background: var(--ai-surface); color: var(--ai-focus); font-size: 22px; cursor: pointer; transform: translateY(-50%); }
.zingoo-ai .zg-ai-carousel-previous { left: -20px; }
.zingoo-ai .zg-ai-carousel-next { right: -20px; }
.zingoo-ai .zg-ai-carousel-arrow:hover { background: var(--ai-secondary-surface); }
.zingoo-ai .zg-ai-carousel-arrow:disabled { opacity: 0.45; cursor: default; }
.zingoo-ai .zg-ai-carousel-arrow[hidden] { display: none; }
.zingoo-ai .zg-ai-visible-count { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.zingoo-ai .zg-ai-result-actions { display: flex; flex: 0 0 auto; margin-left: auto; gap: 8px; }
.zingoo-ai .zg-ai-result-actions button { min-height: 32px; padding: 5px 12px; border: 1px solid var(--ai-pill-border); border-radius: 999px; font: 500 12px/1.5 var(--body-font-family); }
.zingoo-ai .zg-ai-action-secondary { background: var(--result-muted-surface); color: var(--ai-ink); }
.zingoo-ai .zg-ai-result-actions .zg-ai-action-primary { background: var(--ai-accent); border-color: var(--ai-accent); color: #fff; }
.zingoo-ai .zg-ai-result-actions button:disabled { opacity: 1; cursor: not-allowed; }
.zingoo-ai .zg-ai-question-track:focus-visible, .zingoo-ai .zg-ai-carousel-arrow:focus-visible, .zingoo-ai .zg-ai-detail-close:focus-visible { outline: 2px solid var(--ai-focus); outline-offset: 2px; }
.zingoo-ai .zg-ai-question-dialog { box-sizing: border-box; width: min(600px, calc(100% - 32px)); max-height: min(720px, calc(100dvh - 48px)); overflow: hidden; padding: 0; border: 1px solid var(--ai-pill-border); border-radius: 16px; background: var(--ai-surface); color: var(--ai-ink); box-shadow: 0 16px 48px rgba(30, 18, 57, 0.2); font: 400 15px/1.7 var(--body-font-family); }
.zingoo-ai .zg-ai-question-dialog:not([open]) { display: none; }
.zingoo-ai .zg-ai-question-dialog[open] { display: flex; flex-direction: column; }
.zingoo-ai .zg-ai-question-dialog::backdrop { background: rgba(24, 14, 43, 0.45); }
.zingoo-ai .zg-ai-detail-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px 14px 24px; border-bottom: 1px solid var(--ai-pill-border); }
.zingoo-ai .zg-ai-detail-header h3 { margin: 0; font: 600 16px/1.5 var(--display-font-family); color: var(--ai-ink); }
.zingoo-ai .zg-ai-detail-close { display: grid; place-items: center; flex: 0 0 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: var(--ai-secondary-surface); color: var(--ai-focus); font-size: 20px; cursor: pointer; }
.zingoo-ai .zg-ai-detail-body { min-height: 0; padding: 22px 24px 28px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.zingoo-ai .zg-ai-detail-body:has(> .zg-ai-edit-form) { display: flex; flex: 1 1 auto; padding: 0; overflow: hidden; }
.zingoo-ai .zg-ai-detail-body::-webkit-scrollbar,
.zingoo-ai .zg-ai-question-dialog::-webkit-scrollbar { display: none; }
.zingoo-ai .zg-ai-question-dialog { scrollbar-width: none; }
.zingoo-ai .zg-ai-detail-type { margin: 12px 0 8px; color: var(--ai-focus); font-size: 13px; font-weight: 500; }
.zingoo-ai .zg-ai-detail-question { margin: 0 0 24px; font: 600 20px/1.55 var(--display-font-family); overflow-wrap: anywhere; }
.zingoo-ai .zg-ai-detail-section + .zg-ai-detail-section { margin-top: 22px; }
.zingoo-ai .zg-ai-detail-section h4 { margin: 0 0 8px; color: var(--ai-muted); font: 600 13px/1.5 var(--body-font-family); }
.zingoo-ai .zg-ai-detail-section p { margin: 0; color: var(--ai-ink); font-size: 15px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.zingoo-ai .zg-ai-detail-image { display: block; max-width: 100%; max-height: 280px; margin: 20px auto; object-fit: contain; }
.zingoo-ai .zg-ai-loading-status { margin: 0 0 22px; color: var(--ai-muted); font-size: 14px; }
.zingoo-ai .zg-ai-skeleton-title, .zingoo-ai .zg-ai-skeleton-overview, .zingoo-ai .zg-ai-skeleton-line { border-radius: 4px; background: var(--ai-secondary-surface); }
.zingoo-ai .zg-ai-skeleton-title { width: min(320px, 65%); height: 28px; margin-bottom: 10px; }
.zingoo-ai .zg-ai-skeleton-overview { width: 86%; height: 18px; margin-bottom: 22px; }
.zingoo-ai .zg-ai-skeleton-row { overflow: hidden; pointer-events: none; }
.zingoo-ai .zg-ai-skeleton-line { flex: 0 0 auto; height: 12px; width: 88%; margin: 5px auto; }
.zingoo-ai .zg-ai-skeleton-question { height: 14px; }
.zingoo-ai .zg-ai-skeleton-question:nth-child(3) { width: 66%; margin-bottom: 14px; }
.zingoo-ai .zg-ai-skeleton-answer:last-child { width: 58%; }
.zingoo-ai .zg-ai-skeleton { animation: zg-ai-skeleton-breathe 2.4s ease-in-out infinite; }
.zingoo-ai .zg-ai-result-enter { animation: zg-ai-result-appear 180ms ease-out both; }
@keyframes zg-ai-skeleton-breathe { 0%, 100% { opacity: .85; } 50% { opacity: .55; } }
@keyframes zg-ai-result-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .zingoo-ai .zg-ai-skeleton, .zingoo-ai .zg-ai-result-enter { animation: none; }
}
@media (max-width: 1200px) { .zingoo-ai .zg-ai-question-track { grid-auto-columns: calc((100% - 42px) / 4); } }
@media (max-width: 1000px) { .zingoo-ai .zg-ai-question-track { grid-auto-columns: calc((100% - 28px) / 3); } }
@media (max-width: 760px) {
  .zingoo-ai .zg-ai-question-track { grid-auto-columns: calc((100% - 14px) / 2); }
}
@media (max-width: 520px) {
  .zingoo-ai:has(> .zg-ai-results:not([hidden])) { gap: 24px; }
  .zingoo-ai .zg-ai-result-panel { padding: 18px 16px; border-radius: 14px; }
  .zingoo-ai .zg-ai-result-header { align-items: flex-start; gap: 12px; }
  .zingoo-ai .zg-ai-result-header h3 { font-size: 17px; }
  .zingoo-ai .zg-ai-overview p { font-size: 13px; }
  .zingoo-ai .zg-ai-question-track { grid-auto-columns: min(240px, 100%); }
  .zingoo-ai .zg-ai-carousel-previous { left: -14px; }
  .zingoo-ai .zg-ai-carousel-next { right: -14px; }
}
