/* image_create.css — the image card inside an assistant bubble (docs/IMAGE_ASSISTANT_PLAN.md, session 2a).
   Loaded only when the image_create extension is on (templates/partials/chat_extension_assets.php). Colours come from the chat canvas tokens
   (--nbgc-*, chat-canvas.css), so dark and light follow the chat itself. Gate: live/tools/test_image_assistant_ui.js. */

.nic {
  --nic-ink: var(--nbgc-ink, #e8eef6);
  --nic-soft: var(--nbgc-ink-soft, #94a3b6);
  --nic-face: var(--nbgc-surface, rgba(148, 168, 200, 0.07));
  --nic-face-2: var(--nbgc-surface-2, rgba(148, 168, 200, 0.11));
  --nic-edge: var(--nbgc-hairline-strong, rgba(148, 168, 200, 0.26));
  --nic-accent: var(--nbgc-accent, #34d399);
  --nic-accent-ink: var(--nbgc-accent-ink, #6ee7b7);
  --nic-on-accent: var(--nbgc-ink-on-accent, #000000);
  --nic-warn-face: rgba(251, 191, 36, 0.10);
  --nic-warn-edge: rgba(251, 191, 36, 0.40);
  --nic-warn-ink: #fcd34d;
  --nic-fail-ink: #fca5a5;
  direction: rtl;
  margin: 10px 0 4px;
  max-width: 440px;
  color: var(--nic-ink);
  font-size: 15px;
  line-height: 1.6;
}
[data-theme="light"] .nic, [data-theme="light"] .nic-dialog {
  --nic-warn-face: rgba(180, 83, 9, 0.07);
  --nic-warn-edge: rgba(180, 83, 9, 0.35);
  --nic-warn-ink: #92400e;
  --nic-fail-ink: #b91c1c;
}

.nic-media {
  position: relative;
  width: 100%;
  max-height: 72vh;
  border-radius: 14px;
  overflow: hidden;
  background: var(--nic-face-2) center / contain no-repeat;
  border: 1px solid var(--nic-edge);
}
.nic-media canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nic-media.is-drawn canvas, .nic-media.is-editing canvas { opacity: 1; }
.nic-media.is-editing canvas { cursor: grab; touch-action: none; }

.nic-wait {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  background: var(--nic-face);     /* t2d: no look of its own; the waiting mark is the chat's three dots */
}
.nic-wait-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 18px;
  text-align: center;
}
.nic-wait-t { font-weight: 700; font-size: 15.5px; color: var(--nic-ink); }
.nic-wait-s { font-size: 13px; color: var(--nic-soft); max-width: 30ch; }

.nic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  align-items: center;
}
.nic-btn {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--nic-edge);
  background: var(--nic-face-2);
  color: var(--nic-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nic-btn:hover { background: var(--nbgc-surface-raised, rgba(148, 168, 200, 0.17)); }
.nic-btn:focus-visible, .nic-chip:focus-visible { outline: 2px solid var(--nic-accent); outline-offset: 2px; }
.nic-btn:disabled { opacity: 0.6; cursor: progress; }
.nic-btn-main {
  background: var(--nic-accent);
  border-color: var(--nic-accent);
  color: var(--nic-on-accent);
}
.nic-btn-main:hover { background: var(--nic-accent); filter: brightness(1.06); }
.nic-btn-quiet { min-height: 32px; padding: 0 10px; font-size: 13px; font-weight: 600; }
/* the two votes travel together: when the row wraps they go to its end as a pair, never one alone */
.nic-votes { display: inline-flex; gap: 6px; margin-inline-start: auto; }
.nic-vote { min-width: 42px; padding: 0 8px; font-size: 17px; }
.nic-vote[aria-pressed="true"] { border-color: var(--nic-accent); background: var(--nbgc-accent-wash, rgba(52, 211, 153, 0.10)); }
.nic-saved { display: block; margin-top: 6px; font-size: 13px; color: var(--nic-accent-ink); }

.nic-fail { margin: 8px 0 0; color: var(--nic-fail-ink); font-weight: 600; }
.nic-warn {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--nic-warn-face);
  border: 1px solid var(--nic-warn-edge);
  color: var(--nic-warn-ink);
  font-size: 13.5px;
}
.nic-warn ul { margin: 4px 0 0; padding-inline-start: 18px; }

/* The owner's lab line: model, cost, time, the other model, report. Visually quieter than the card. */
.nic-lab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--nic-edge);
  color: var(--nic-soft);
  font-size: 13px;
}
.nic-tag {
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--nic-face-2);
  color: var(--nic-ink);
  font-family: var(--nbgc-mono, monospace);
  direction: ltr;
}

.nic-why, .nic-edit {
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--nic-face);
  border: 1px solid var(--nic-edge);
}
.nic-why-t, .nic-edit-hint { margin: 0 0 8px; font-size: 13.5px; color: var(--nic-soft); }
.nic-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.nic-chip {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--nic-edge);
  background: transparent;
  color: var(--nic-ink);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.nic-chip[aria-checked="true"] { background: var(--nic-accent); border-color: var(--nic-accent); color: var(--nic-on-accent); }
.nic textarea, .nic input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--nic-edge);
  background: var(--nbgc-canvas-face, transparent);
  color: var(--nic-ink);
  font: inherit;
  font-size: 16px;   /* under 16px a phone zooms the page on focus */
}
.nic textarea::placeholder { color: var(--nic-soft); opacity: 1; }
.nic-edit-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--nic-face-2);
}
.nic-edit-row:first-of-type { border-top: 0; }
.nic-edit-row label { font-size: 13.5px; color: var(--nic-soft); }
.nic-edit-row .nic-chips { grid-column: 1 / -1; margin: 0; }
.nic-edit-row input[type="range"] { width: 100%; accent-color: var(--nic-accent); }

/* Dialogs: the big view and the owner's report. dir/lang are set on the element (the chat body computes ltr). */
.nic-dialog {
  --nic-ink: var(--nbgc-ink, #e8eef6);
  --nic-soft: var(--nbgc-ink-soft, #94a3b6);
  --nic-face-2: var(--nbgc-surface-2, rgba(148, 168, 200, 0.11));
  --nic-edge: var(--nbgc-hairline-strong, rgba(148, 168, 200, 0.26));
  --nic-accent: var(--nbgc-accent, #34d399);
  --nic-on-accent: var(--nbgc-ink-on-accent, #000000);
  --nic-fail-ink: #fca5a5;
  direction: rtl;
  position: fixed;   /* centred whatever the chat's own resets say about margins */
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(96vw, 960px);
  max-height: 94vh;
  padding: 14px;
  border: 1px solid var(--nic-edge);
  border-radius: 18px;
  background: var(--nbgc-sheet-face, #0f172a);
  color: var(--nic-ink);
  font-family: var(--nbgc-font, Tahoma, sans-serif);
  box-sizing: border-box;
}
[data-theme="light"] .nic-dialog { background: #ffffff; }
.nic-dialog::backdrop { background: rgba(0, 0, 0, 0.72); }
.nic-view-img {
  display: block;
  max-width: 100%;
  max-height: 74vh;
  margin: 0 auto;
  border-radius: 10px;
  -webkit-touch-callout: default;
  user-select: auto;
}
.nic-view-hint { margin: 10px 0 0; text-align: center; color: var(--nic-soft); font-size: 14px; }
.nic-dialog .nic-actions { justify-content: center; }
.nic-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nic-dlg-head h3 { margin: 0; font-size: 17px; }
.nic-dialog h4 { margin: 14px 0 6px; font-size: 15px; }
.nic-dim { color: var(--nic-soft); }
.nic-table-wrap { overflow-x: auto; }
.nic-table { border-collapse: collapse; font-size: 13.5px; min-width: 100%; }
.nic-table th, .nic-table td { padding: 6px 8px; border-bottom: 1px solid var(--nic-face-2); text-align: start; white-space: nowrap; }
.nic-downs { margin: 0; padding-inline-start: 18px; font-size: 14px; }
.nic-downs li { margin-bottom: 8px; }

/* ONE ROW (t2a): the picture's actions are icon squares of the chat's own row (script.js::nabgolShapeImageMessageRow),
   on the chat's one line with the date (owner's rule, chat-canvas.css: the row never wraps). Only what that row has no
   style for is drawn here: a pressed vote and the labelled «دوباره بساز» after a failure. */
body:is(.desktop-chat, .mobile-chat) #messages .message[data-image-message] .message-actions > .action-chip[aria-pressed="true"] {
  opacity: 1;
  color: var(--nbgc-accent, #34d399);
  background: var(--nbgc-accent-wash, rgba(52, 211, 153, 0.14));
}
body:is(.desktop-chat, .mobile-chat) #messages .message[data-image-message] .message-actions > .regenerate-btn.is-error-primary {
  width: auto !important;
  min-width: 0 !important;
  padding: 0 12px !important;
  gap: 6px !important;
  opacity: 1 !important;
  border: 1px solid var(--nbgc-accent, #34d399) !important;
  color: var(--nbgc-accent-ink, #6ee7b7) !important;
  border-radius: 999px !important;
}
body:is(.desktop-chat, .mobile-chat) #messages .message[data-image-message] .message-actions > .regenerate-btn.is-error-primary > .action-label {
  display: inline !important;
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
[data-theme="light"] body:is(.desktop-chat, .mobile-chat) #messages .message[data-image-message] .message-actions > .regenerate-btn.is-error-primary { color: #047857 !important; border-color: #047857 !important; }
/* the picture filed into the dossier (ACT.dossier): image + its caption in one paragraph, never wider than the page */
.nabgol-markdown-body img[src*="image_studio_api.php"] { display: block; max-width: min(100%, 420px); height: auto; margin: 6px 0; border-radius: 12px; }

/* t2b: a new picture is asked once (نسخهٔ دیگر / دوباره بساز / با مدلِ دیگر), and a missing photo is one button */
.nic-confirm {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--nic-edge);
  background: var(--nic-face);
}
.nic-confirm-t { margin: 0 0 8px; font-size: 14px; line-height: 1.6; }
.nic-confirm .nic-actions, .nic-ask .nic-actions { margin-top: 0; }
.nic.nic-ask { margin-top: 8px; }

/* ---------- t2c: the task card (docs/IMAGE_ASSISTANT_PLAN.md 4-6) ----------
   No look of its own: the card is the chat's own component (.nabgol-component) and its parts are the chat's own
   pieces (.nabgol-choice, .nabgol-choice-button, .nabgol-text-input-field, .nabgol-multi-submit, .nabgol-input-label),
   so the site's theme and every future change of those pieces reach it. Below is layout only, colours are tokens. */
.nic-draft { display: grid; gap: 12px; }
.nic-d-head { display: flex; align-items: flex-start; gap: 10px; }
.nic-d-what { flex: 1 1 auto; margin: 0; color: var(--nic-soft); line-height: 1.7; }
.nic-d-head .nic-d-what:empty { visibility: hidden; }
.nic-d-head > .nabgol-choice-button.nic-d-x { flex: 0 0 auto; width: auto; min-height: 36px; margin: 0; padding: 0 12px; gap: 4px; white-space: nowrap; }
.nic-d-done { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nic-d-ok { display: flex; align-items: center; gap: 8px; color: var(--nic-ink); }
.nic-d-tick { color: var(--nic-accent); font-weight: 700; }
.nic-d-link { margin-inline-start: auto; min-height: 32px; padding: 0 6px; border: 0; background: transparent; box-shadow: none; color: var(--nic-accent-ink); font-weight: 650; cursor: pointer; }
.nic-d-step, .nic-d-sum { display: grid; gap: 10px; }
.nic-d-q { margin: 0; font-weight: 700; color: var(--nic-ink); }
.nic-d-what-line { margin: 0; color: var(--nic-ink); }
.nic-d-hint { margin: 0; font-size: .85rem; color: var(--nic-soft); }
.nic-d-warn { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--nic-warn-face); border: 1px solid var(--nic-warn-edge); color: var(--nic-warn-ink); }
.nic-draft .nabgol-choice.nic-d-choice { min-width: 0; }   /* columns: the platform decides (chat-button-fx.js stacks long options) */
.nic-draft .nabgol-choice.nic-d-choice > .nabgol-choice-button { margin: 0; }
.nic-draft .nabgol-choice.nic-d-choice.nic-d-photo { grid-template-columns: minmax(0, 1fr); }
.nic-d-line { display: flex; gap: 8px; margin: 0; }
.nic-d-line .nabgol-text-input-field { min-width: 0; flex: 1 1 auto; }
.nic-d-go { flex: 0 0 auto; width: auto; min-width: 84px; margin: 0; }
.nic-d-lab { display: grid; }
.nic-d-step > .nabgol-multi-submit, .nic-d-make { width: 100%; margin: 0; text-align: center; min-height: 48px; }
.nic-d-sum .nic-actions { display: grid; gap: 6px; justify-items: center; }
.nic-d-time { font-size: .82rem; color: var(--nic-soft); text-align: center; }
.nic-d-labrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nic-fail-why { margin: 0; font-size: .86rem; color: var(--nic-soft); }
.nic-fail-why:empty { display: none; }
/* «ویرایش ▾»: the studio's own centred dialog (.nic-dialog), list of the chat's choice buttons */
.nic-editmenu { width: min(340px, calc(100vw - 32px)); }
.nic-em-list { display: grid; gap: 8px; }
.nic-em { display: flex !important; justify-content: space-between; align-items: center; gap: 8px; margin: 0 !important; }
.nic-em small { color: var(--nic-soft); font-size: .78rem; }
/* a menu row: its name on one line, the quiet line under it (on a phone the two side by side broke both into two lines) */
.nic-editmenu .nic-em { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-align: start; }
.nic-editmenu .nic-em small { font-weight: 400; }
/* one row of seven equal squares under a picture, no scroll at 390px (د۱۰) */
.message[data-image-message] .message-actions { flex-wrap: nowrap; }
/* round 3 / t2d: every state is the platform's framed card (.nabgol-card); «✕ لغو» at its head (.nic-d-head) */
.nic-draft.nabgol-card { display: grid; gap: 12px; }
.nic-draft > .nabgol-component, .nic-d-step > .nabgol-component, .nic-d-sum > .nabgol-component { margin: 0; }
/* t2d: the free look's yellow line (before: in the task card; after: under the picture), the chat's own choices under it */
.nic-d-look { display: grid; gap: 8px; }
.nic-after p { margin: 0 0 8px; }
.nic-after > .nabgol-component { margin: 0; }
/* t2d «قبل/بعد»: the user's photo laid over the result while on; the chat's quiet choice button in the picture's corner */
.nic-media .nic-before { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--nic-face-2); display: none; }
.nic-media.is-before .nic-before { display: block; }
.nic-media > .nabgol-choice-button.nic-ba { position: absolute; top: 8px; inset-inline-start: 8px; width: auto; min-height: 34px; padding: 0 12px; margin: 0; z-index: 1; }
.nic-media .nic-edited { display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
/* t4a (accepted 4-6 design): under a picture every square carries its small name under the icon, no scroll at 390px */
body:is(.desktop-chat, .mobile-chat) #messages .message[data-image-message] .message-actions > .action-chip:not(.is-error-primary) {
  flex-direction: column !important;
  flex: 1 1 0 !important;     /* the accepted 4-6 row: equal cells (Google Photos) */
  width: auto !important;
  min-width: 0 !important;
  max-width: 64px !important;
  height: auto !important;
  padding: 4px 2px !important;
  gap: 2px !important;
}
body:is(.desktop-chat, .mobile-chat) #messages .message[data-image-message] .message-actions > .action-chip:not(.is-error-primary) > .action-label {
  display: block !important;
  position: static !important;
  transform: none !important;
  opacity: .85 !important;
  visibility: visible !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  max-width: 56px !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  text-align: center !important;
  color: inherit !important;
  pointer-events: none;
}
/* t4a: the card's small doors — «+ نوشتهٔ روی عکس», «+ توضیحِ اضافه», the photo's thumbnail, «حذفِ این نوشته» */
.nic-d-sum > .nic-d-more { width: auto !important; max-width: max-content; justify-self: start; min-height: 34px; padding: 0 12px !important; margin: 0 !important; font-size: .86rem; }
.nic-d-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; }
.nic-edit-row .nic-text-del { width: auto; min-height: 32px; padding: 0 10px; margin: 0; font-size: .82rem; }
.nic .nic-media, .nic { scroll-margin-top: 8px; scroll-margin-bottom: 96px; }   /* t4a: under the sticky header, above the composer */
/* t4a live 390: six named squares and the date do not share one 326px line — under a picture the row takes the whole
   width and the date goes under it (image messages only; every other bubble keeps its one line) */
body:is(.desktop-chat, .mobile-chat) #messages .message[data-image-message] .message-bubble > .footer { flex-wrap: wrap !important; row-gap: 2px; }
body:is(.desktop-chat, .mobile-chat) #messages .message[data-image-message] .message-bubble > .footer > .message-actions { flex: 1 1 100% !important; max-width: 100% !important; order: -1; }
/* t4b: sizes by destination — one row of the platform's small quiet buttons, the current one marked (wraps on a phone) */
.nic-d-sizes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nic-d-sizes-q { font-size: .86rem; color: var(--nic-soft); margin-inline-end: 2px; }
body:is(.desktop-chat, .mobile-chat) .nic-d-sizes > .nabgol-choice-button.nic-d-size { width: auto !important; min-height: 40px !important; height: auto !important; padding: 0 11px !important; margin: 0 !important; font-size: .8rem !important; border-radius: 12px; flex: 0 0 auto; }
/* the quiet ink is declared after the selected one in chat-action-buttons.css: the chosen size keeps the selected ink */
body:is(.desktop-chat, .mobile-chat) .nic-d-sizes > .nabgol-choice-button.nic-d-size.is-selected { color: var(--nab-btn-win-ink) !important; }
/* t4b: «دانلود ▾» — each size a direct download, «اشتراک» beside it where the device shares files */
.nic-dl-line { display: flex; gap: 6px; align-items: stretch; }
.nic-dl-line > .nic-em { flex: 1 1 auto; }
.nic-dl-line > .nic-dl-share { width: auto !important; flex: 0 0 auto; margin: 0 !important; padding: 0 12px !important; font-size: .84rem; }

/* §10: «درخواستِ شما» — what was asked stays on the card (wait, picture, failure, history) */
.nic-req{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px}
.nic-req-h{margin:0 0 2px;font-size:12px;font-weight:700;color:var(--nic-soft)}
.nic-req-pic{width:36px;height:36px;object-fit:cover;border-radius:6px;flex:none}
.nic-req-words{margin:0;color:var(--nic-ink);white-space:pre-line;overflow-wrap:anywhere}
.nic-req-set{margin:0;font-size:.85rem;color:var(--nic-soft)}
.nic .nic-d-chat{display:block;width:fit-content;max-width:100%;margin:-2px 0 10px;margin-inline-start:0;margin-inline-end:auto;padding:0 2px;min-height:32px;font-size:13px;font-weight:600;text-align:start}

/* §11 session 3: a work card — its pages, «what I made», the steps while it is being made */
.nic-pages { display: grid; gap: 8px; }
.nic-media .nic-page { display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.nic-say { margin: 8px 2px 0; font-size: .92rem; line-height: 1.8; color: var(--nic-ink); }
.nic-steps { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; gap: 2px; font-size: 13px; color: var(--nic-soft); text-align: start; }
.nic-steps li::before { content: '○'; display: inline-block; width: 1.4em; }
.nic-steps li.is-done::before { content: '✓'; color: var(--nic-ink); }
.nic-steps li.is-now { color: var(--nic-ink); font-weight: 600; }
.nic-steps li.is-now::before { content: '●'; }
/* «نوشته‌ها: تغییر یا حذف»: the page's words in the chat's own field look (tokens, 16px so a phone never zooms) */
.nic-editmenu .nic-edit-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 10px 0; }
.nic-editmenu .nic-edit-row input[type="text"] { width: 100%; min-height: 44px; box-sizing: border-box; padding: 8px 12px; font: inherit; font-size: 16px;
  color: var(--nic-ink); background: var(--nic-face); border: 1px solid var(--nic-edge); border-radius: 12px; }
.nic-editmenu .nic-edit-row input[type="text"]:focus { outline: 2px solid var(--nic-accent); outline-offset: 1px; }
.nic-editmenu .nic-edit > .nabgol-choice-button { margin-top: 10px !important; }