/* Nabgol Chat Engine v3 — interactive components (dark + light safe) */

.nabgol-inline-components {
  margin: 10px 0 4px;
  padding: 10px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  direction: rtl;
  text-align: right;
}

.message-bubble > .nabgol-inline-components {
  margin-top: 12px;
  padding-top: 12px;
}

.message-bubble.ui-only > .text:empty {
  display: none;
  margin: 0;
  padding: 0;
  min-height: 0;
}

.nabgol-inline-doc {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.08);
  direction: rtl;
  text-align: right;
}

.nabgol-inline-doc-head {
  font-size: 13px;
  font-weight: 700;
  color: #6ee7b7;
  margin: 0 0 8px;
}

.nabgol-workflow-badge {
  direction: rtl;
  text-align: right;
}

.nabgol-component {
  box-sizing: border-box;
  max-width: 100%;
  margin: 12px 0 0;
  color: #e8edf3;
  font-size: 14px;
  line-height: 1.55;
  direction: rtl;
  text-align: right;
}

.nabgol-component button,
.nabgol-component input,
.nabgol-component textarea {
  font: inherit;
}

/* Interactive CTAs — compact responsive grid */
body:is(.desktop-chat, .mobile-chat) .nabgol-choice {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
}

/* Even quiz / pick grids — no orphan single button on last row */
body:is(.desktop-chat, .mobile-chat) .nabgol-choice[data-count="2"],
body:is(.desktop-chat, .mobile-chat) .nabgol-choice[data-count="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body:is(.desktop-chat, .mobile-chat) .nabgol-choice[data-count="3"],
body:is(.desktop-chat, .mobile-chat) .nabgol-choice[data-count="6"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body:is(.desktop-chat, .mobile-chat) .nabgol-choice[data-count="5"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body:is(.desktop-chat, .mobile-chat) .nabgol-choice[data-count] > .nabgol-choice-button {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  font-weight: 650;
  letter-spacing: 0.01em;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-choice legend {
  grid-column: 1 / -1;
}

.nabgol-choice {
  border: 0;
  padding: 0;
  margin: 0;
}

.nabgol-choice legend,
.nabgol-input-label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 10px;
  color: #f3f6fa;
}

.nabgol-choice-button,
.nabgol-text-input button,
.nabgol-multi-submit {
  display: block;
  width: 100%;
  text-align: right;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  padding: 11px 14px;
  margin: 0 0 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.nabgol-choice-button:hover,
.nabgol-text-input button:hover,
.nabgol-multi-submit:hover {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(52, 211, 153, 0.65);
  color: #fff;
}

.nabgol-choice-button:active,
.nabgol-text-input button:active,
.nabgol-multi-submit:active {
  transform: translateY(1px);
}

.nabgol-choice-button.is-selected {
  border-color: #34d399;
  background: rgba(16, 185, 129, 0.28);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35);
}

.nabgol-other-option {
  border-style: dashed;
  opacity: 0.92;
  grid-column: 1 / -1;
}

/* Cursor-like typeable option: full-width slot, not a mini form + green Send */
.nabgol-custom-input,
.nabgol-custom-input--composer {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.nabgol-custom-input.is-open,
.nabgol-custom-input--composer.is-open {
  opacity: 1;
  transform: translateY(0);
}

.nabgol-custom-input[hidden] {
  display: none !important;
}

.nabgol-custom-input-shell {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 48px;
  padding: 4px 4px 4px 6px;
  border: 1px solid rgba(52, 211, 153, 0.45);
  border-radius: 14px;
  background: rgba(16, 185, 129, 0.08);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.12), 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.nabgol-custom-input-shell:focus-within {
  border-color: rgba(52, 211, 153, 0.75);
  background: rgba(16, 185, 129, 0.12);
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.22), 0 10px 28px rgba(0, 0, 0, 0.22);
}

.nabgol-custom-input-shell.is-empty {
  animation: nabgolCustomShake 0.4s ease;
}

@keyframes nabgolCustomShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.nabgol-custom-input-field,
.nabgol-custom-input input.nabgol-custom-input-field {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: 40px;
  margin: 0;
  border: 0 !important;
  border-radius: 10px;
  background: transparent !important;
  color: #f8fafc;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  box-shadow: none !important;
  outline: none;
}

.nabgol-custom-input-field::placeholder {
  color: rgba(226, 232, 240, 0.52);
}

.nabgol-custom-input-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: #10b981;
  color: #042f2e;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, transform 0.12s ease, background 0.15s ease;
}

.nabgol-custom-input-shell.has-value .nabgol-custom-input-go {
  opacity: 1;
}

.nabgol-custom-input-go:hover {
  background: #34d399;
  transform: translateY(-1px);
}

.nabgol-custom-input-go:active {
  transform: translateY(1px);
}

.nabgol-custom-input-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.nabgol-custom-input-hint {
  font-size: 11px;
  line-height: 1.3;
  color: rgba(226, 232, 240, 0.45);
  letter-spacing: 0.01em;
}

.nabgol-custom-input-cancel {
  border: 0;
  background: transparent;
  color: rgba(226, 232, 240, 0.62);
  font: inherit;
  font-size: 12px;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 8px;
}

.nabgol-custom-input-cancel:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.06);
}

/* Legacy row (text_input / older mounts) */
.nabgol-custom-input:not(.nabgol-custom-input--composer) {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
  align-items: stretch;
  opacity: 1;
  transform: none;
}

.nabgol-multi-submit {
  margin-top: 4px;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.22);
  border-color: rgba(52, 211, 153, 0.55);
}

.nabgol-custom-input:not(.nabgol-custom-input--composer) input,
.nabgol-text-input-field {
  min-width: 0;
  flex: 1 1 auto;
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  color: #f8fafc;
  padding: 12px 14px;
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}

.nabgol-text-input-field--long {
  min-height: 120px;
  flex: 1 1 100%;
}

.nabgol-text-input-row:has(.nabgol-text-input-field--long) {
  flex-wrap: wrap;
}

.nabgol-text-input-row:has(.nabgol-text-input-field--long) .nabgol-text-input-field--long {
  flex: 1 1 100%;
}

.nabgol-text-input-row:has(.nabgol-text-input-field--long) button {
  margin-inline-start: auto;
}

.nabgol-custom-input-field::placeholder,
.nabgol-text-input-field::placeholder {
  color: rgba(226, 232, 240, 0.55);
}

.nabgol-custom-input:not(.nabgol-custom-input--composer) > button,
.nabgol-text-input button {
  width: auto;
  min-width: 72px;
  margin: 0;
  background: #10b981;
  border-color: #10b981;
  color: #fff;
  font-weight: 700;
}

.nabgol-text-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.nabgol-text-input-row {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: stretch;
}

.nabgol-text-input-field {
  flex: 1 1 auto;
  min-width: 0;
}

.nabgol-text-input-mic,
.nabgol-text-input-send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.55);
  color: #e2e8f0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nabgol-text-input-mic:hover,
.nabgol-text-input-send:hover {
  border-color: rgba(56, 189, 248, 0.55);
  color: #fff;
}

.nabgol-text-input-mic.is-recording {
  border-color: rgba(248, 113, 113, 0.8);
  color: #fecaca;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.25);
}

.nabgol-text-input-send {
  padding: 0 14px;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.35), rgba(56, 189, 248, 0.22));
}

.nabgol-text-input form,
.nabgol-confirmation {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nabgol-chat-reply-hint {
  display: none !important;
}

.nabgol-hint-body {
  margin: 0;
  color: #e2e8f0;
  font-size: 13px;
  line-height: 1.55;
}

.nabgol-hint-quiet {
  opacity: 0.75;
  font-size: 12px;
}

.nabgol-input-label {
  margin: 0;
  font-weight: 600;
  color: #f3f6fa;
}

.nabgol-confirmation p {
  margin: 0 0 4px;
  color: #f3f6fa;
  font-weight: 600;
}

.nabgol-slider {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.nabgol-slider-label,
.nabgol-slider span.nabgol-slider-label {
  color: #f3f6fa;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.5;
}

.nabgol-slider input[type="range"] {
  width: 100%;
  accent-color: #10b981;
  margin: 2px 0;
}

.nabgol-slider-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: #94a3b8;
}

.nabgol-slider-value,
.nabgol-slider output.nabgol-slider-value {
  font-weight: 800;
  color: #6ee7b7;
  font-size: 14px;
}

.nabgol-slider-min,
.nabgol-slider-max {
  font-variant-numeric: tabular-nums;
  min-width: 1.5em;
}

.nabgol-component[data-committed="true"] {
  opacity: 0.5;
}

.nabgol-component button:disabled,
.nabgol-component input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.nabgol-choice-button:focus-visible,
.nabgol-text-input button:focus-visible,
.nabgol-component input:focus-visible {
  outline: 3px solid rgba(52, 211, 153, 0.45);
  outline-offset: 2px;
}

.nabgol-workflow-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0 12px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.2);
  color: #a7f3d0;
  border: 1px solid rgba(52, 211, 153, 0.35);
}

.nabgol-workflow-badge[data-completed="true"] {
  background: rgba(59, 130, 246, 0.22);
  color: #bfdbfe;
  border-color: rgba(96, 165, 250, 0.4);
}

.nabgol-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.05);
}

.nabgol-card h3 {
  margin: 0 0 8px;
  color: #f3f6fa;
}

.nabgol-table-wrap {
  overflow: auto;
}

.nabgol-table-wrap table {
  width: 100%;
  border-collapse: collapse;
}

.nabgol-table-wrap th,
.nabgol-table-wrap td {
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 8px;
  text-align: right;
}

.nabgol-chart {
  height: 300px;
  margin-inline: 0;
}

.nabgol-chart figcaption {
  font-weight: 700;
  margin-bottom: 8px;
  color: #f3f6fa;
}

.nabgol-chart canvas {
  width: 100% !important;
  height: 260px !important;
}

.nabgol-chart-fallback {
  padding: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  color: #cbd5e1;
}

.nabgol-markdown-body {
  line-height: 1.8;
  word-break: break-word;
  color: #e8edf3;
}

.nabgol-markdown-body h1,
.nabgol-markdown-body h2,
.nabgol-markdown-body h3 {
  margin: 16px 0 8px;
  color: #f8fafc;
}

.nabgol-markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

.nabgol-markdown-body th,
.nabgol-markdown-body td {
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 8px;
  text-align: right;
}

.nabgol-markdown-body pre {
  background: rgba(0, 0, 0, 0.35);
  padding: 12px;
  border-radius: 10px;
  overflow: auto;
}

/* Light theme fallback (if ever used) */
html[data-theme="light"] .nabgol-component,
html.light .nabgol-component {
  color: #0f172a;
}

html[data-theme="light"] .nabgol-choice legend,
html[data-theme="light"] .nabgol-input-label,
html.light .nabgol-choice legend,
html.light .nabgol-input-label {
  color: #0f172a;
}

html[data-theme="light"] .nabgol-choice-button,
html.light .nabgol-choice-button {
  background: #fff;
  color: #0f172a;
  border-color: #cbd5e1;
}

html[data-theme="light"] .nabgol-custom-input-shell,
html.light .nabgol-custom-input-shell {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(5, 150, 105, 0.4);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.1), 0 6px 18px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .nabgol-custom-input-shell:focus-within,
html.light .nabgol-custom-input-shell:focus-within {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(5, 150, 105, 0.65);
}

html[data-theme="light"] .nabgol-custom-input-field,
html.light .nabgol-custom-input-field {
  color: #0f172a;
  background: transparent !important;
}

html[data-theme="light"] .nabgol-custom-input-field::placeholder,
html.light .nabgol-custom-input-field::placeholder {
  color: rgba(100, 116, 139, 0.75);
}

html[data-theme="light"] .nabgol-custom-input-hint,
html.light .nabgol-custom-input-hint {
  color: rgba(100, 116, 139, 0.7);
}

html[data-theme="light"] .nabgol-custom-input-cancel,
html.light .nabgol-custom-input-cancel {
  color: rgba(71, 85, 105, 0.85);
}

html[data-theme="light"] .nabgol-custom-input-cancel:hover,
html.light .nabgol-custom-input-cancel:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.05);
}

html[data-theme="light"] .nabgol-custom-input:not(.nabgol-custom-input--composer) input,
html.light .nabgol-custom-input:not(.nabgol-custom-input--composer) input {
  background: #fff;
  color: #0f172a;
  border-color: #cbd5e1;
}

/* Mobile — Material 3 chip style + thumb zone (Android parity) */
body.mobile-chat .nabgol-inline-components {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}

body.mobile-chat .nabgol-choice {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

body.mobile-chat .nabgol-choice legend {
  display: block;
  width: 100%;
  margin-bottom: 6px;
}

body.mobile-chat .nabgol-choice-button,
body.mobile-chat .nabgol-multi-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 16px;
  margin: 0;
  touch-action: manipulation;
}

body.mobile-chat .nabgol-panel-badge {
  position: sticky;
  bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 12;
}

body.mobile-chat .messages {
  padding-bottom: 8px;
}

body.mobile-chat .chat-input:focus-within ~ .nabgol-panel-badge,
body.mobile-chat .chat-input:focus-within .nabgol-panel-badge {
  transform: translateY(-4px);
}

/* Typing indicator — classic 3 dots (never break this) */
.typing-indicator.show {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.typing-indicator .typing-dots,
.typing-indicator .nabgol-skeleton.typing-dots {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 5px;
  margin: 0;
  max-width: none;
}

.typing-indicator .typing-dots span,
.typing-indicator.show .typing-dots span {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--text-secondary, #94a3b8) !important;
  animation: typing 1.4s infinite !important;
  background-image: none !important;
}

.typing-indicator .typing-dots span:nth-child(1) { animation-delay: 0s !important; width: 8px !important; }
.typing-indicator .typing-dots span:nth-child(2) { animation-delay: 0.2s !important; width: 8px !important; }
.typing-indicator .typing-dots span:nth-child(3) { animation-delay: 0.4s !important; width: 8px !important; }

/* Optional skeleton bars only if explicitly requested (not used on public chat) */
.typing-indicator .nabgol-skeleton:not(.typing-dots) {
  display: none;
}

@keyframes nabgol-skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Chat bubble markdown parity (tables + code copy) */
.message.assistant,
.message.user {
  direction: rtl;
}

.message-body {
  direction: rtl;
  text-align: right;
}

:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap),
.message.user .text {
  line-height: 1.75;
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: isolate;
}

body.desktop-chat .message,
body.desktop-chat .message-body,
body.desktop-chat .message-bubble,
body.desktop-chat .message .text,
body.mobile-chat .message,
body.mobile-chat .message-body,
body.mobile-chat .message-bubble,
body.mobile-chat .message .text {
  direction: rtl !important;
  text-align: right !important;
}

:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) p,
.message.user .text p,
:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) li,
.message.user .text li,
:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) h1,
:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) h2,
:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) h3,
:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) h4,
.message.user .text h1,
.message.user .text h2,
.message.user .text h3,
.message.user .text h4,
.nabgol-markdown-body,
.nabgol-markdown-body p,
.nabgol-inline-doc,
.nabgol-inline-doc p {
  direction: rtl !important;
  text-align: right !important;
}

:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) pre,
.message.user .text pre,
:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) code,
.message.user .text code {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) p,
.message.user .text p {
  margin: 0 0 0.9em;
}

:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) p:last-child,
.message.user .text p:last-child {
  margin-bottom: 0;
}

:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) li,
.message.user .text li {
  margin: 0.35em 0;
  line-height: 1.7;
}

:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) ol,
.message.user .text ol,
.nabgol-markdown-body ol {
  margin: 0.55em 0 0.9em;
  padding-inline-start: 1.5em;
  list-style-type: persian;
}

:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) ul,
.message.user .text ul,
.nabgol-markdown-body ul {
  margin: 0.55em 0 0.9em;
  padding-inline-start: 1.35em;
}

:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) ol > li::marker,
.message.user .text ol > li::marker,
.nabgol-markdown-body ol > li::marker {
  unicode-bidi: isolate;
  font-weight: 700;
  color: #86efac;
}

.nabgol-workflow-badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin: 16px 0 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.45);
  color: #bbf7d0;
  font-size: 12px;
  font-weight: 700;
  direction: rtl;
  text-align: right;
}

.nabgol-markdown-body {
  direction: rtl;
  text-align: right;
}

.nabgol-workspace-title,
#splitPanel .nabgol-markdown-body {
  direction: rtl;
  text-align: right;
}

:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 10px 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

/* Root-cause fix (2026-08-18): the wrapper above never had table/th/td rules of its own —
   the only border styling in this file targets `.nabgol-table-wrap`, a DIFFERENT class that
   chat-markdown.js's enhanceTables() never applies. Every chat-bubble table rendered with
   correct rows/columns but zero visible grid lines because of this exact name mismatch. */
:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-table-scroll table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-table-scroll th,
:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-table-scroll td {
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 9px 12px;
  text-align: right;
}

:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-table-scroll thead th {
  background: rgba(52, 211, 153, 0.14);
  border-bottom: 2px solid rgba(52, 211, 153, 0.55);
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
}

/* Zebra striping — legible across a long invoice/roster, not just a 2-row demo table. */
:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-table-scroll tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.035);
}

:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-table-scroll tbody tr:hover {
  background: rgba(52, 211, 153, 0.07);
}

/* A column where every data cell is a plain number/price/percent (quantity, unit price,
   total) reads better isolated + tabular than plain right-aligned prose. */
:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-table-scroll .nabgol-table-num {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Many-row tables (a multi-item invoice, a full roster) scroll internally with the header
   pinned, instead of stretching the whole chat bubble down the page. */
:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-table-scroll.nabgol-table-tall {
  max-height: 420px;
  overflow-y: auto;
}

:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-table-scroll.nabgol-table-tall thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  /* Solid, not translucent — a sticky header over scrolling rows needs its own opaque
     backdrop. Matches the assistant bubble's own dark-slate gradient tinted with the same
     accent green used above, so it doesn't read as a mismatched patch while pinned. */
  background: #14313a;
}

/* docs/TUTOR_TEACHER_MODE_PLAN.md §6/§7 — teacher_mode tables (lesson-plan timing grid,
   question banks) get their OWN class, never the bare `table` selector: a bare-tag rule
   inside #messages has shipped three prior styling bugs by restyling every nested
   component. Color only from --nbgc-* tokens (theme-aware, no hardcoded hex/rgba); font
   is intentionally unset here so it keeps inheriting the platform typeface. Reuses the
   same .nabgol-table-scroll wrapper/scroll/zebra rules above — this only adds the
   teacher-specific accent so the table reads as "this session's plan", not a generic
   markdown table. */
:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-table-scroll table.nbg-teach-table {
  border-color: var(--nbgc-accent-edge);
}

:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-table-scroll table.nbg-teach-table th,
:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-table-scroll table.nbg-teach-table td {
  border-color: var(--nbgc-hairline-strong);
}

:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-table-scroll table.nbg-teach-table thead th {
  background: var(--nbgc-accent-wash);
  border-bottom-color: var(--nbgc-accent-edge);
  color: var(--nbgc-ink-strong);
}

:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-table-scroll table.nbg-teach-table tbody tr:nth-child(even) {
  background: var(--nbgc-surface);
}

/* Mobile root cause (2026-08-20): `body.mobile-chat .message .text table` in
   style-mobile.css forces `display: block !important` — a pre-wrapper workaround for
   "wide table breaks the bubble", written before enhanceTables() started wrapping every
   table in a real .nabgol-table-scroll. `display: block` takes the <table> out of table
   layout: the rows get re-parented into an anonymous shrink-to-fit table box, so
   `width: 100%` sizes the outer block while the actual grid hugs its content — in RTL
   that is the start edge, leaving the empty half of the bubble the user photographed
   (measured: grid ≈207px inside a 445px frame). It looked correct in fullscreen only
   because the viewer moves the table OUT of `.message .text`, where this rule no longer
   matches — which is exactly the "fullscreen version is perfectly fine" clue in the
   report. The wrapper owns horizontal scrolling now, so a wrapped table is put back into
   real table layout here; `white-space` is reset with it, since inheriting nowrap from
   that rule is what made narrow tables demand the scroll in the first place. */
body:is(.desktop-chat, .mobile-chat) .message .text .nabgol-table-scroll > table {
  display: table !important;
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  overflow: visible !important;
  white-space: normal !important;
}

body:is(.desktop-chat, .mobile-chat) .message .text .nabgol-table-scroll > table :is(th, td) {
  white-space: normal;
}

/* Numeric cells and header labels still stay on one line — that is a deliberate
   typographic choice, not the legacy blanket nowrap. */
body:is(.desktop-chat, .mobile-chat) .message .text .nabgol-table-scroll > table thead th,
body:is(.desktop-chat, .mobile-chat) .message .text .nabgol-table-scroll > table .nabgol-table-num {
  white-space: nowrap;
}

@media (max-width: 520px) {
  :where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-table-scroll th,
  :where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-table-scroll td {
    padding: 7px 9px;
    font-size: 0.92em;
  }
}

/* Expand-to-fullscreen affordance for tables/diagrams (2026-08-19). A horizontal-scroll
   edge fade is easy to miss; an always-visible button in the corner isn't. Shared by both
   .nabgol-table-scroll and .nabgol-diagram-shell — see chat-markdown.js enhanceExpandable(). */
.nabgol-expandable-wrap {
  position: relative;
  /* The whole card opens fullscreen on click now (chat-markdown.js), not just the
     corner button — the pointer cursor is the hint. Table cells still select text
     normally: the click handler backs off the instant a selection exists. */
  cursor: pointer;
}
.nabgol-expandable-wrap .nabgol-media-expand-btn {
  cursor: pointer;
}

.nabgol-media-expand-btn {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(52, 211, 153, 0.4);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
  color: #bbf7d0;
  cursor: pointer;
  opacity: 0.82;
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.nabgol-expandable-wrap:hover .nabgol-media-expand-btn,
.nabgol-media-expand-btn:focus-visible {
  opacity: 1;
  background: rgba(52, 211, 153, 0.22);
}

.nabgol-media-expand-btn:active {
  transform: scale(0.92);
}

/* Fullscreen viewer overlay — one shared instance, content moved in/out (never cloned). */
.nabgol-media-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.nabgol-media-fullscreen[hidden] {
  display: none;
}

.nabgol-media-fullscreen__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 16, 0.72);
  backdrop-filter: blur(2px);
}

.nabgol-media-fullscreen__panel {
  position: relative;
  z-index: 1;
  /* Size to the CONTENT, not a fixed target — a small diagram should get a small
     panel; min(96vw,1100px) now only caps how big it's ALLOWED to grow (a wide
     table still gets clamped exactly as before), it no longer forces every panel
     to that size regardless of what's actually inside it. */
  width: fit-content;
  max-width: min(96vw, 1100px);
  min-width: min(90vw, 320px);
  max-height: min(92vh, 880px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  padding: 14px 18px 18px;
}

/* Title on the reading side, «بستن» facing it across the row. In RTL the title takes
   the start (right) edge and the button the end (left) — the same pairing every mobile
   sheet header uses, and it can never slide under the browser chrome the way the old
   absolutely-positioned corner ✕ did. */
.nabgol-media-fullscreen__head {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  direction: rtl;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.nabgol-media-fullscreen__title {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #6ee7b7;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.nabgol-media-fullscreen__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  /* Explicit, not inherited: a UA/base rule can leave buttons LTR, which puts the ✕
     after the Persian label instead of at the start of the reading order. */
  direction: rtl;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(110, 231, 183, 0.38);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.9), rgba(15, 23, 42, 0.9));
  color: #d1fae5;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.nabgol-media-fullscreen__close-label {
  line-height: 1;
}

.nabgol-media-fullscreen__close:hover,
.nabgol-media-fullscreen__close:focus-visible {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.32), rgba(15, 23, 42, 0.9));
  border-color: rgba(110, 231, 183, 0.75);
  color: #ecfdf5;
}

.nabgol-media-fullscreen__close:active {
  transform: scale(0.97);
}

/* The header already names the card, so the card's own kicker pill would just repeat it
   two lines below itself. */
.nabgol-media-fullscreen__zoomwrap .nabgol-diagram-kicker {
  display: none !important;
}

/* The viewer lifts the .nabgol-diagram-shell out of the chat and leaves its
   figure.nabgol-diagram behind — and the figure is what carries the card's padding,
   border and background. Without that, a lifted card's content sat flush against the
   panel edge (measured: legend rows spanning the panel's full 21→479px). Re-issue the
   same chrome on the shell itself so a fullscreened card looks like the card it came
   from. Tables keep their own frame, so they are not touched.
   The colours are the SAME --nbgd-* tokens the in-chat card uses (defined in
   chat-flagship-polish.css) — the viewer used to carry its own three near-duplicate
   alphas, so on a light page the lifted card stayed a black slab after the in-chat
   one was fixed. One source, or this drifts again. */
.nabgol-media-fullscreen__zoomwrap > .nabgol-diagram-shell {
  box-sizing: border-box;
  padding: 0.95em 0.85em 0.7em;
  /* The third layer is the card's own opaque base. --nbgd-card-b is a 5% tint
     in the light theme, so without it the card faded into the viewer's DARK
     backdrop toward the bottom, and the dark light-theme labels on the lower
     rows of a bar chart went dark-on-dark (seen 2026-09-13, 390px). In the chat
     the same gradient sits on the white answer, which is what this restores. */
  background:
    radial-gradient(120% 90% at 0% 0%, var(--nbgd-em-wash), transparent 55%),
    linear-gradient(160deg, var(--nbgd-card-a), var(--nbgd-card-b)),
    var(--nbgd-card-a);
  border: 1px solid var(--nbgd-card-edge);
  /* Was a standalone 16px while the in-chat card was 18px, so the "same" card
     changed shape on the way into the viewer. Both now read the one canvas token
     (chat-canvas.css), which is also what `pre`, the table scroller and the step
     accordion use — a lifted card is the card, not a lookalike. */
  border-radius: var(--nbgc-radius-sm, 12px);
}

.nabgol-media-fullscreen__body {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  touch-action: pan-y;
}

/* Zoomed in: our own JS owns panning via pointer events (see chat-markdown.js), so the
   browser's native touch scrolling must get out of the way instead of fighting it. */
.nabgol-media-fullscreen.is-zoomed .nabgol-media-fullscreen__body {
  touch-action: none;
  cursor: grab;
}

.nabgol-media-fullscreen.is-zoomed .nabgol-media-fullscreen__body:active {
  cursor: grabbing;
}

.nabgol-media-fullscreen__zoomwrap {
  width: 100%;
  transform-origin: 0 0;
  will-change: transform;
}

.nabgol-media-fullscreen__zoomwrap .nabgol-table-scroll,
.nabgol-media-fullscreen__zoomwrap .nabgol-diagram-shell {
  width: 100%;
  margin: 0;
}

/* The in-bubble tall-table cap exists to stop a long table from stretching the chat
   column; inside its own fullscreen panel that constraint no longer serves a purpose —
   the panel itself is the scroll surface. */
.nabgol-media-fullscreen__body .nabgol-table-scroll.nabgol-table-tall {
  max-height: none;
  overflow-y: visible;
}

body.nabgol-media-fullscreen-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .nabgol-media-fullscreen {
    padding: 0;
  }
  .nabgol-media-fullscreen__panel {
    width: 100vw;
    /* dvh, not vh: on mobile Chrome/Safari 100vh is the tallest the viewport gets with
       the toolbars retracted, so a 100vh panel starts ABOVE the visible area and its
       first row — the header — is hidden behind the browser's top bar. That is the
       clipped ✕ in the user's screenshot. dvh tracks the viewport that is actually on
       screen; the vh pair below it stays first as the fallback for anything without dvh. */
    max-height: 100vh;
    height: 100vh;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    padding: max(10px, env(safe-area-inset-top)) 10px max(14px, env(safe-area-inset-bottom));
  }
  .nabgol-media-fullscreen__head {
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
}

:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-code-block {
  position: relative;
  margin: 10px 0;
}

:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-code-block pre {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  padding: 12px;
  overflow-x: auto;
}

:where(.message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-copy-code {
  position: absolute;
  top: 8px;
  left: 8px;
  border: 0;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
}

/* Keyboard avoidance — mobile (Android parity step 9) */
body.mobile-chat {
  min-height: var(--app-height, 100dvh);
}

body.mobile-chat .chat-main {
  max-height: calc(var(--app-height, 100dvh) - 120px);
}

body.mobile-chat .chat-messages,
body.mobile-chat #messages {
  max-height: calc(var(--app-height, 100dvh) - 168px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.mobile-chat .chat-input {
  position: sticky;
  bottom: 0;
  z-index: 20;
  transition: transform 0.16s ease;
}

body.mobile-chat.nabgol-keyboard-open .chat-input {
  transform: translateY(calc(-1 * var(--keyboard-offset, 0px)));
}

body.mobile-chat.nabgol-keyboard-open .nabgol-inline-components {
  transform: translateY(calc(-1 * var(--keyboard-offset, 0px)));
  transition: transform 0.16s ease;
}

/* Nabgol plant DB card + organ / mode pickers */
.plant-organ-picker {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 0.35rem;
}
.plant-organ-label,
.plant-mode-label {
  display: block;
  font-size: 0.82rem;
  color: #143222;
  margin-bottom: 0.45rem;
  font-weight: 700;
}
.plant-organ-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.plant-mode-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}
@media (min-width: 560px) {
  .plant-mode-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.plant-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  text-align: right;
  border: 1.5px solid #b7cfc0;
  background: #fff;
  color: #13261a;
  border-radius: 14px;
  padding: 0.65rem 0.7rem;
  cursor: pointer;
  min-height: 64px;
  font-family: inherit;
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.plant-mode-card__title {
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.35;
}
.plant-mode-card__hint {
  font-size: 0.72rem;
  line-height: 1.4;
  color: #3d5c4a;
  font-weight: 600;
}
.plant-mode-card--species {
  border-color: #7cbc8e;
}
.plant-mode-card--disease {
  border-color: #e0a28a;
}
.plant-mode-card--both {
  border-color: #8bb8d8;
}
.plant-mode-card--chat {
  border-color: #c4b5a0;
}
.plant-mode-card.is-active {
  box-shadow: 0 0 0 2px rgba(27, 94, 42, 0.18);
  transform: translateY(-1px);
}
.plant-mode-card--species.is-active {
  background: linear-gradient(180deg, #e8f7ec, #d7efdf);
  border-color: #1b7a3a;
  color: #0b3a1c;
}
.plant-mode-card--disease.is-active {
  background: linear-gradient(180deg, #fff1ea, #ffe2d4);
  border-color: #c45a2e;
  color: #5a220e;
}
.plant-mode-card--both.is-active {
  background: linear-gradient(180deg, #eaf5ff, #d9ecfb);
  border-color: #2a6f9e;
  color: #123a52;
}
.plant-mode-card--chat.is-active {
  background: linear-gradient(180deg, #f7f1e8, #efe6d8);
  border-color: #8a6b3d;
  color: #3d2a12;
}
.plant-mode-card:hover {
  transform: translateY(-1px);
}
.plant-organ-chip {
  border: 1px solid #9ab89f;
  background: #ffffff;
  color: #14261a;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  cursor: pointer;
}
.plant-organ-chip.active {
  border-color: #1b5e2a;
  background: #dcefe0;
  color: #0d2f18;
  font-weight: 700;
}
.external-tool-card {
  margin: 0.5rem 0.75rem;
  padding: 0.95rem 1.05rem;
  border-radius: 16px;
  background: #ffffff;
  color: #13261a;
  border: 1px solid #2f6b3a;
  box-shadow: 0 2px 10px rgba(19, 38, 26, 0.1);
  max-width: 36rem;
}
.external-tool-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.45rem;
  background: #dcefe0;
  color: #0d3b1c;
}
.external-tool-card--disease .external-tool-badge {
  background: #ffe5d8;
  color: #7a2e14;
}
.external-tool-card.is-error {
  background: #fff8f6;
  border-color: #a03c28;
  color: #3a1a14;
}
.external-tool-title {
  font-weight: 800;
  font-size: 0.98rem;
  color: #0f3d1f;
  margin-bottom: 0.4rem;
  line-height: 1.45;
}
.external-tool-card.is-error .external-tool-title {
  color: #7a2418;
}
.external-tool-summary {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #1a2e22;
  font-weight: 600;
}
.external-tool-cands {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.external-tool-cand {
  background: #f3faf5;
  border: 1px solid #cfe3d5;
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
  color: #14261a;
}
.external-tool-cand-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.external-tool-cand-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f3d1f;
  line-height: 1.4;
}
.external-tool-cand-score {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 800;
  color: #0d3b1c;
  background: #dff3e6;
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
}
.external-tool-cand-meta {
  font-size: 0.78rem;
  color: #345040;
  margin-top: 0.28rem;
  line-height: 1.45;
  font-weight: 600;
}
.external-tool-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}
.external-tool-thumb {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #c5d9ca;
  background: #eef5f0;
}
.external-tool-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.plant-analysis-picker {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 0.45rem;
}

/* Telegram-like user media: file first, caption under it */
.message.user .tg-attachments {
  margin: 0;
  max-width: min(78vw, 420px);
}
.message.user .message-bubble.has-media {
  overflow: hidden;
  padding-top: 0;
}
.message.user .message-bubble.has-media .tg-attachments {
  margin: 0;
  border: 0;
  padding: 0;
}
.message.user .message-bubble.has-media .text {
  padding: 0.55rem 0.7rem 0.15rem;
  margin: 0;
}
.message.user .msg-attach-photo {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #0b1a10;
  line-height: 0;
}
.message.user .msg-attach-photo-img {
  display: block;
  width: 100%;
  max-width: min(78vw, 420px);
  max-height: min(62vh, 520px);
  height: auto;
  object-fit: contain;
  border-radius: 14px;
}
.message.user .msg-attach-doc {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.12);
  max-width: min(78vw, 420px);
}
.message.user .msg-attach-doc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #fff;
  background: linear-gradient(145deg, #3f8f55, #24663a);
}
.message.user .msg-attach-doc-icon[data-kind="pdf"] {
  background: linear-gradient(145deg, #e25555, #b42323);
}
.message.user .msg-attach-doc-icon[data-kind="audio"] {
  background: linear-gradient(145deg, #5b7cfa, #3550c7);
}
.message.user .msg-attach-doc-icon[data-kind="video"] {
  background: linear-gradient(145deg, #7a5cff, #4b2fc4);
}
.message.user .msg-attach-doc-icon .ico {
  width: 22px;
  height: 22px;
}

/* Laser scan while Nabgol DB runs */
.msg-attach-photo .photo-laser-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(8, 40, 18, 0.15), rgba(8, 40, 18, 0.35));
}
.msg-attach-photo .photo-laser-beam {
  position: absolute;
  left: 0;
  right: 0;
  height: 18%;
  top: -20%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(80, 255, 160, 0.15) 35%,
    rgba(120, 255, 190, 0.55) 50%,
    rgba(80, 255, 160, 0.15) 65%,
    transparent 100%
  );
  box-shadow: 0 0 18px rgba(90, 255, 170, 0.45);
  animation: nabgolLaserScan 1.6s ease-in-out infinite;
}
.msg-attach-photo .photo-scan-label {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 700;
  color: #f4fff8;
  background: rgba(10, 40, 20, 0.72);
  border: 1px solid rgba(140, 230, 170, 0.45);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  line-height: 1.3;
  backdrop-filter: blur(4px);
}
@keyframes nabgolLaserScan {
  0% { top: -22%; opacity: 0.35; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 105%; opacity: 0.25; }
}

/* Composer attachment — LARGE useful preview (never shrink images to a 72px strip).
   Caption lives in the composer under this card. Theme via html[data-theme] tokens. */
.chat-input .file-preview {
  display: none;
  width: 100%;
  box-sizing: border-box;
}
.chat-input .file-preview:not(.show) {
  display: none !important;
}
.chat-input .file-preview.show,
body:is(.desktop-chat, .mobile-chat) .chat-input .file-preview.show {
  display: flex !important;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.7rem !important;
  margin: 0 0 0.55rem !important;
  border-radius: 18px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-secondary) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
  align-items: stretch !important;
  color: var(--text) !important;
}

.chat-input .file-preview {
  position: relative;
}
.chat-input .file-preview .fp-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
}
/* Document/audio attach: × sits in the third grid column beside filename. */
.chat-input .file-preview:not([data-kind="image"]):not([data-kind="video"]) {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: center;
}
.chat-input .file-preview:not([data-kind="image"]):not([data-kind="video"]) .fp-main {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.chat-input .file-preview:not([data-kind="image"]):not([data-kind="video"]) .file-remove {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  position: static;
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
}
/* Image/video inline attach (non-sheet): × floats on photo corner. */
.chat-input .file-preview[data-kind="image"] .fp-main,
.chat-input .file-preview[data-kind="video"] .fp-main {
  display: block;
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
.chat-input .file-preview[data-kind="image"] .file-preview-info,
.chat-input .file-preview[data-kind="video"] .file-preview-info {
  display: none;
}
.chat-input .file-preview[data-kind="image"] .file-remove,
.chat-input .file-preview[data-kind="video"] .file-remove {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 4;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  background: rgba(15, 23, 42, 0.72) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.38) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.38);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.chat-input .file-preview[data-kind="image"] .file-remove .ico,
.chat-input .file-preview[data-kind="video"] .file-remove .ico {
  width: 18px !important;
  height: 18px !important;
}
.chat-input .file-preview[data-kind="image"] .file-remove:hover,
.chat-input .file-preview[data-kind="video"] .file-remove:hover {
  background: rgba(185, 28, 28, 0.92) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(185, 28, 28, 0.45);
}
.chat-input .file-preview[data-kind="image"] .file-remove:focus-visible,
.chat-input .file-preview[data-kind="video"] .file-remove:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

.chat-input .file-preview .fp-media {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--bg-hover);
}
/* Telegram-standard: the frame hugs the picture's own rendered size — it
   never stretches to the full composer width and shows blank canvas around
   a smaller/tall image. The container is a centered, shrink-to-fit box; only
   max-width/max-height clamp it, so there is no leftover background visible
   ("useless full white box behind the photo" — real user screenshot bug). */
.chat-input .file-preview[data-kind="image"] .fp-media,
.chat-input .file-preview[data-kind="video"] .fp-media {
  display: flex;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  background: transparent;
}
.chat-input .file-preview .fp-image,
.chat-input .file-preview #filePreviewImage {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: min(46vh, 360px) !important;
  object-fit: contain !important;
  border-radius: 14px !important;
  border: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}
.chat-input .file-preview .fp-image[hidden],
.chat-input .file-preview #filePreviewImage[hidden],
.chat-input .file-preview .fp-video[hidden],
.chat-input .file-preview #filePreviewVideo[hidden],
.chat-input .file-preview .fp-icon[hidden],
.chat-input .file-preview .file-preview-icon[hidden],
.chat-input .file-preview .fp-kind-badge[hidden] {
  display: none !important;
}
.chat-input .file-preview .fp-video,
.chat-input .file-preview #filePreviewVideo {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(46vh, 360px);
  object-fit: contain;
  border-radius: 14px;
  background: #000;
}

.chat-input .file-preview .fp-icon,
.chat-input .file-preview .file-preview-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #fff;
  background: linear-gradient(145deg, #3f8f55, #24663a);
}
.chat-input .file-preview .fp-icon[data-kind="pdf"],
.chat-input .file-preview .file-preview-icon[data-kind="pdf"] {
  background: linear-gradient(145deg, #e25555, #b42323);
}
.chat-input .file-preview .fp-icon[data-kind="audio"],
.chat-input .file-preview .file-preview-icon[data-kind="audio"] {
  background: linear-gradient(145deg, #5b7cfa, #3550c7);
}
.chat-input .file-preview .fp-icon[data-kind="video"],
.chat-input .file-preview .file-preview-icon[data-kind="video"] {
  background: linear-gradient(145deg, #7a5cff, #4b2fc4);
}
.chat-input .file-preview .fp-icon .ico,
.chat-input .file-preview .file-preview-icon .ico {
  width: 22px;
  height: 22px;
}

.chat-input .file-preview .fp-kind-badge {
  position: absolute;
  inset-inline-start: 10px;
  bottom: 10px;
  z-index: 2;
  max-width: calc(100% - 16px);
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.chat-input .file-preview:not([data-kind="image"]):not([data-kind="video"]) .fp-media {
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.chat-input .file-preview:not([data-kind="image"]):not([data-kind="video"]) .fp-kind-badge {
  display: none;
}

.chat-input .file-preview-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}
.chat-input .file-preview .file-name {
  display: block;
  font-weight: 750;
  color: var(--text) !important;
  font-size: 0.92rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-input .file-preview .file-meta {
  display: block;
  color: var(--text-secondary) !important;
  font-size: 0.74rem;
  font-weight: 600;
}
.chat-input .file-preview .fp-caption-hint {
  /* Retired: Telegram never explains "type below" — proximity + composer
     placeholder already say it. Kept in the DOM only for backward compat. */
  display: none !important;
}

.chat-input .file-preview .plant-analysis-picker,
.chat-input .file-preview .plant-organ-picker {
  grid-column: 1 / -1;
  width: 100%;
}
.chat-input .file-preview .file-remove {
  border: 0 !important;
  background: var(--bg-hover) !important;
  border-radius: 999px !important;
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
  flex-shrink: 0;
}
.chat-input .file-preview .file-remove:hover {
  color: var(--danger, #f85149) !important;
  background: var(--bg-input) !important;
}
.chat-input .file-preview .file-remove .ico {
  width: 15px;
  height: 15px;
}

.chat-input.composer-has-attach .input-wrapper {
  border-color: var(--border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

/* Telegram-standard: media/file + caption box read as ONE attached card, not
   two disconnected boxes. The outer frame carries the single border/shadow;
   the inner preview and input-wrapper go borderless/transparent so the seam
   between "photo" and "type here" disappears — exactly like every major
   messenger's attach sheet. */
.chat-input.composer-has-attach,
body:is(.desktop-chat, .mobile-chat) .chat-input.composer-has-attach {
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  background: var(--bg-secondary) !important;
  padding: 7px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
}
.chat-input.composer-has-attach .file-preview.show,
body:is(.desktop-chat, .mobile-chat) .chat-input.composer-has-attach .file-preview.show {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
}
.chat-input.composer-has-attach .input-wrapper,
body:is(.desktop-chat, .mobile-chat) .chat-input.composer-has-attach .input-wrapper {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
}

/* Compact attach (after Escape): file chip + caption box are TWO separate cards. */
.chat-input.composer-has-attach.composer-media-compact,
body:is(.desktop-chat, .mobile-chat) .chat-input.composer-has-attach.composer-media-compact {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  gap: 8px !important;
}
.chat-input.composer-has-attach.composer-media-compact .file-preview.show,
body:is(.desktop-chat, .mobile-chat) .chat-input.composer-has-attach.composer-media-compact .file-preview.show {
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16) !important;
  background: var(--bg-secondary) !important;
  padding: 10px 12px !important;
  margin: 0 0 8px !important;
  border-radius: 14px !important;
}
.chat-input.composer-has-attach.composer-media-compact .input-wrapper,
body:is(.desktop-chat, .mobile-chat) .chat-input.composer-has-attach.composer-media-compact .input-wrapper {
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  background: var(--bg-secondary) !important;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.16) !important;
  padding: 8px 10px 8px 12px !important;
  margin: 0 !important;
}
html[data-theme="light"] .chat-input.composer-has-attach.composer-media-compact .file-preview.show {
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1) !important;
}

/* Compact media chip — RTL: × on the right, thumb + name in a distinct card. */
.chat-input.composer-media-compact .file-preview[data-kind="image"],
.chat-input.composer-media-compact .file-preview[data-kind="video"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  margin: 0 0 8px !important;
  min-height: 68px;
}
.chat-input.composer-media-compact .file-preview[data-kind="image"] .fp-main,
.chat-input.composer-media-compact .file-preview[data-kind="video"] .fp-main {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  min-width: 0 !important;
  position: static !important;
  order: 2;
}
.chat-input.composer-media-compact .file-preview[data-kind="image"] .fp-media,
.chat-input.composer-media-compact .file-preview[data-kind="video"] .fp-media {
  width: 52px !important;
  height: 52px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: var(--bg-hover) !important;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent) !important;
  order: 1;
}
.chat-input.composer-media-compact .file-preview[data-kind="image"] .fp-image,
.chat-input.composer-media-compact .file-preview[data-kind="image"] #filePreviewImage,
.chat-input.composer-media-compact .file-preview[data-kind="video"] .fp-video,
.chat-input.composer-media-compact .file-preview[data-kind="video"] #filePreviewVideo {
  width: 100% !important;
  height: 100% !important;
  max-width: 52px !important;
  max-height: 52px !important;
  object-fit: cover !important;
  border-radius: 9px !important;
}
.chat-input.composer-media-compact .file-preview[data-kind="image"] .file-preview-info,
.chat-input.composer-media-compact .file-preview[data-kind="video"] .file-preview-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 0.15rem !important;
  order: 2;
}
.chat-input.composer-media-compact .file-preview[data-kind="image"] .file-name,
.chat-input.composer-media-compact .file-preview[data-kind="video"] .file-name {
  font-size: 0.88rem !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  color: var(--text) !important;
}
.chat-input.composer-media-compact .file-preview[data-kind="image"] .file-meta,
.chat-input.composer-media-compact .file-preview[data-kind="video"] .file-meta {
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
}
.chat-input.composer-media-compact .file-preview[data-kind="image"] .fp-kind-badge,
.chat-input.composer-media-compact .file-preview[data-kind="video"] .fp-kind-badge {
  display: none !important;
}
/* × sits on the visual right (first in DOM + order 0 in RTL row). */
.chat-input.composer-media-compact .file-preview[data-kind="image"] .file-remove,
.chat-input.composer-media-compact .file-preview[data-kind="video"] .file-remove {
  position: static !important;
  flex-shrink: 0 !important;
  order: 0 !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  background: var(--bg-hover) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}
.chat-input.composer-media-compact .file-preview[data-kind="image"] .file-remove:hover,
.chat-input.composer-media-compact .file-preview[data-kind="video"] .file-remove:hover {
  color: #fff !important;
  background: rgba(185, 28, 28, 0.92) !important;
  border-color: rgba(185, 28, 28, 0.55) !important;
  transform: none !important;
}
.chat-input.composer-media-compact .file-preview[data-kind="image"] .file-remove .ico,
.chat-input.composer-media-compact .file-preview[data-kind="video"] .file-remove .ico {
  width: 17px !important;
  height: 17px !important;
}

@media (max-width: 720px) {
  .chat-input.composer-media-compact .file-preview[data-kind="image"] .fp-media,
  .chat-input.composer-media-compact .file-preview[data-kind="video"] .fp-media {
    width: 48px !important;
    height: 48px !important;
  }
  .chat-input.composer-media-compact .file-preview[data-kind="image"] .fp-image,
  .chat-input.composer-media-compact .file-preview[data-kind="image"] #filePreviewImage,
  .chat-input.composer-media-compact .file-preview[data-kind="video"] .fp-video,
  .chat-input.composer-media-compact .file-preview[data-kind="video"] #filePreviewVideo {
    max-width: 48px !important;
    max-height: 48px !important;
  }
  .chat-input.composer-media-compact .file-preview[data-kind="image"] .file-remove,
  .chat-input.composer-media-compact .file-preview[data-kind="video"] .file-remove {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
}

/* Telegram Desktop "Send an image": centered card — media stage + caption footer. */
body.nabgol-composer-media-sheet-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 118;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
}
html[data-theme="light"] body.nabgol-composer-media-sheet-open::before {
  background: rgba(15, 23, 42, 0.42);
}
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 120 !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(440px, calc(100vw - 28px)) !important;
  max-width: min(440px, calc(100vw - 28px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: center !important;
  align-self: center !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  overflow: hidden !important;
}
/* Media stage — full card width, distinct from caption footer. */
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview.show {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="image"] .fp-main,
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="video"] .fp-main {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="image"] .fp-media,
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="video"] .fp-media {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, 0.28) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 160px;
  padding: 0 !important;
}
html[data-theme="light"] body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="image"] .fp-media,
html[data-theme="light"] body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="video"] .fp-media {
  background: rgba(15, 23, 42, 0.06) !important;
}
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="image"] .fp-image,
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="image"] #filePreviewImage,
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="video"] .fp-video,
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="video"] #filePreviewVideo {
  width: auto !important;
  max-width: 100% !important;
  max-height: min(52vh, 380px) !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}
/* × on the CARD corner — not on the photo (user screenshot v855 still wrong). */
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="image"] .file-remove,
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="video"] .file-remove {
  position: absolute !important;
  top: 0 !important;
  inset-inline-end: 0 !important;
  z-index: 6 !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  border-end-start-radius: 18px !important;
  background: rgba(15, 23, 42, 0.82) !important;
  color: #fff !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: -2px 2px 12px rgba(0, 0, 0, 0.28) !important;
  transition: background 0.15s ease, color 0.15s ease;
}
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="image"] .file-remove .ico,
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="video"] .file-remove .ico {
  width: 22px !important;
  height: 22px !important;
}
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="image"] .file-remove:hover,
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="video"] .file-remove:hover {
  background: rgba(185, 28, 28, 0.94) !important;
  color: #fff !important;
  transform: none !important;
}
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="image"] .file-remove:focus-visible,
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="video"] .file-remove:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: -2px;
}
html[data-theme="light"] body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="image"] .file-remove,
html[data-theme="light"] body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="video"] .file-remove {
  background: rgba(15, 23, 42, 0.88) !important;
  color: #fff !important;
}
/* Caption footer — clearly separated typing row. */
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .input-wrapper {
  flex-shrink: 0 !important;
  width: 100% !important;
  border: none !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--bg-secondary) !important;
  min-height: 0 !important;
  padding: 12px 14px 14px !important;
  gap: 10px !important;
  align-items: flex-end !important;
}
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .input-wrapper:focus-within {
  border-top-color: var(--border) !important;
  box-shadow: none !important;
  background: var(--bg-secondary) !important;
}
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet textarea,
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet #input {
  flex: 1 1 auto !important;
  min-height: 40px !important;
  max-height: 120px !important;
  padding: 10px 12px !important;
  font-size: 0.96rem !important;
  line-height: 1.45 !important;
  color: var(--text) !important;
  background: var(--bg-input, rgba(255, 255, 255, 0.04)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  resize: none !important;
}
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .input-wrapper:focus-within textarea,
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .input-wrapper:focus-within #input {
  border-color: color-mix(in srgb, var(--accent, #22c55e) 55%, var(--border)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #22c55e) 18%, transparent) !important;
}
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet textarea::placeholder,
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet #input::placeholder {
  color: var(--text-secondary) !important;
  opacity: 1;
}
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .send-btn {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  margin-bottom: 1px !important;
}
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .input-actions,
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .composer-hint,
body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .composer-ai-disclaimer {
  display: none !important;
}

@media (max-width: 720px) {
  body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet {
    width: min(400px, calc(100vw - 20px)) !important;
    max-width: min(400px, calc(100vw - 20px)) !important;
    top: max(46%, 50%) !important;
    border-radius: 16px !important;
  }
  body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="image"] .fp-image,
  body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="image"] #filePreviewImage,
  body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="video"] .fp-video,
  body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="video"] #filePreviewVideo {
    max-height: min(42vh, 280px) !important;
  }
  body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="image"] .file-remove,
  body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="video"] .file-remove {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-end-start-radius: 16px !important;
  }
  body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="image"] .file-remove .ico,
  body.nabgol-composer-media-sheet-open .chat-input.composer-media-sheet .file-preview[data-kind="video"] .file-remove .ico {
    width: 24px !important;
    height: 24px !important;
  }
  .chat-input .file-preview[data-kind="image"] .file-remove,
  .chat-input .file-preview[data-kind="video"] .file-remove {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
}

@media (max-width: 720px) {
  .chat-input .file-preview[data-kind="image"] .fp-media,
  .chat-input .file-preview[data-kind="video"] .fp-media {
    width: fit-content !important;
    max-width: 100% !important;
  }
  .chat-input .file-preview .fp-image,
  .chat-input .file-preview #filePreviewImage,
  .chat-input .file-preview .fp-video,
  .chat-input .file-preview #filePreviewVideo {
    max-height: min(36vh, 240px) !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
  }
  .chat-input .file-preview .fp-icon,
  .chat-input .file-preview .file-preview-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }
}

.plant-organ-chip {
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.plant-organ-chip:hover {
  transform: translateY(-1px);
  border-color: #2f6b3a;
}

/* ═══════════════════════════════════════════════════════════════════════════
   «اشکال» — the sheet a student gets after pressing the warning mark under an
   answer. It reuses the shell's sheet vocabulary (.bottom-sheet, .sheet-title,
   .sheet-item, and the --text / --text-secondary / --border / --bg-hover /
   --primary tokens) on purpose: the panel then inherits the theme, the scrim,
   the Escape and backdrop dismissal, and the contrast audit that
   test_controls_always_reachable.js runs over every label in an open panel.
   Only the pieces that vocabulary has no word for are defined here.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Same reason as the dialog above: the panel owns its direction, in both
   shells, rather than hoping to inherit it. */
.bottom-sheet#nabgolIssueSheet {
  direction: rtl;
  text-align: right;
}
.nabgol-issue-sub {
  padding: 0 4px 8px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-secondary);
}
.nabgol-issue-kinds { display: flex; flex-direction: column; gap: 2px; }
/* A reason is a CHOICE, so it looks chosen: two lines, and a real border when
   picked rather than a colour shift a colour-blind reader can miss. */
.bottom-sheet .sheet-item.nabgol-issue-kind {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border: 1px solid transparent;
}
.bottom-sheet .sheet-item.nabgol-issue-kind[aria-checked="true"] {
  border-color: var(--primary);
  background: var(--bg-hover);
}
.nabgol-issue-kind-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
/* A RADIO THE READER CAN SEE BEFORE TOUCHING IT. Without a marker these four
   rows look like plain text until one is tapped, and the selected state was the
   only thing that said they were choices at all. `::before` on the title puts
   it at the RTL start — the right — where a Persian reader looks for it. */
.nabgol-issue-kind-title::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-inline-end: 9px;
  vertical-align: -2px;
  border: 1.5px solid var(--text-secondary);
  border-radius: 50%;
  box-sizing: border-box;
}
.nabgol-issue-kind[aria-checked="true"] .nabgol-issue-kind-title::before {
  border-color: var(--text);
  background: var(--text);
  box-shadow: inset 0 0 0 3.5px var(--bg-secondary);
}
/* 400, CLAIMED. Measured on the real page: this line computed font-weight 650
   — something upstream weights text inside a sheet row — so the quiet
   explanation came out almost as loud as the choice above it, and the two-line
   hierarchy the row is built on disappeared. */
.nabgol-issue-kind-hint {
  font-size: 12.5px;
  line-height: 1.7;
  font-weight: 400;
  color: var(--text-secondary);
}
.nabgol-issue-note {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: none;
}
.nabgol-issue-actions { display: flex; gap: 8px; }
/* 46px on both, because this is the last thing a hand touches in the flow. */
.nabgol-issue-send {
  flex: 1 1 auto;
  min-height: 46px;
  border: 0;
  border-radius: var(--radius-sm);
  /* NOT the brand colour, and not white on it. Measured on the real page:
     --primary resolves to rgb(34,197,94) here and white on that is 2.28:1 —
     a primary button nobody can read. It is also the wrong colour to spend:
     green means "go / correct" everywhere else in this product, and this
     button means "something is wrong". Ink-on-background inverted is the one
     pairing that is guaranteed readable in both themes, because it IS the
     page's own body contrast turned inside out. */
  background: var(--text);
  color: var(--bg);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.nabgol-issue-send[disabled] { opacity: 0.45; cursor: default; }
.nabgol-issue-cancel {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE SAME SHEET, AS A DIALOG, ON A POINTER DEVICE.
   style-desktop.css:295 turns OFF every .bottom-sheet except #cameraSheet —
   `display: none !important; visibility: hidden !important` — because a
   screen-edge sheet is a touch pattern and desktop uses small anchored
   popovers instead. Reusing that vocabulary therefore bought the theme, the
   scrim and the dismissal on a phone and bought NOTHING on a desktop: the
   class went on, the panel stayed invisible, and the button did nothing.
   Measured on the live page with a real mouse click, 1280x900:
     hasShow: true · display: none · visibility: hidden · rect 0x0
   which is exactly what the owner reported. A programmatic element.click()
   in a 390px probe cannot see this; the same gesture at the same width can.

   A report form is not a menu, so the desktop answer is not an anchored
   popover pinned to a 32px chip — it is a centred dialog. The selector
   carries .bottom-sheet AND the id so it matches the specificity of the rule
   it has to beat (one id, two classes each); this file loads after
   style-desktop.css, so source order decides and this wins.
   ═══════════════════════════════════════════════════════════════════════════ */
body.desktop-chat .bottom-sheet#nabgolIssueSheet {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.desktop-chat .bottom-sheet#nabgolIssueSheet.show {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: 420px !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100vh - 96px) !important;
  overflow-y: auto !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45) !important;
  /* THE PANEL DECLARES ITS OWN DIRECTION. Measured on the live desktop page:
     the four reasons and their radios hugged the LEFT edge of the dialog and
     the sentences read as if the panel were an English form, because a panel
     on this page does not inherit rtl — the shell computes ltr under a
     dir="rtl" document, which this project has been bitten by before. Every
     panel says what it is. */
  direction: rtl !important;
  text-align: right !important;
  z-index: 200 !important;
}
/* ITS OWN BACKDROP, AS A REAL ELEMENT — the pseudo-element version did not
   paint at all, and the reason is worth keeping: the dialog is centred with
   `transform: translate(-50%, -50%)`, and a transform makes the element the
   containing block for its `position: fixed` descendants, so `inset: 0` on a
   ::before stopped meaning "the viewport" and started meaning "this box" —
   then `overflow-y: auto` clipped what was left. Measured on the live page:
   the dialog opened and the page behind it was not dimmed at all.
   style-desktop.css hides the shell's own .sheet-overlay, and switching that
   back on would change how #cameraSheet behaves, so this panel brings a
   backdrop of its own. On a phone the shell's scrim is already there, so this
   one stays out of the way. */
.nabgol-issue-backdrop {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
.nabgol-issue-backdrop.show { display: block; }
body.mobile-chat .nabgol-issue-backdrop { display: none !important; }
/* The drag handle is a touch affordance; a dialog has a cancel button. */
body.desktop-chat .bottom-sheet#nabgolIssueSheet .bottom-sheet-handle {
  display: none !important;
}

/* ============================================================================
   §N) CHAT INTERACTIVE: BATCH ANSWERING + MIC ON EVERY ROBOT-MADE FIELD
   2026-09-08.
   The bug this section dresses: a bubble that asked three questions sent the
   turn on the FIRST answer, so questions 2 and 3 could never be answered. The
   pack now carries one send bar (chat-components.js::mountAnswerBar) and each
   answer is RECORDED, changeable until the user presses send once.
   Nothing here is a second voice engine: the mic buttons all call
   nabgolDictateIntoField(), the same two-engine path as the main mic, so every
   later improvement to that button lands here too.
   ========================================================================== */

.nabgol-answer-batch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.5);
}

.nabgol-answer-batch.is-ready {
  border-color: rgba(52, 211, 153, 0.6);
  background: rgba(16, 185, 129, 0.14);
}

.nabgol-answer-batch-count {
  flex: 1 1 140px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #cbd5e1;
}

.nabgol-answer-batch.is-ready .nabgol-answer-batch-count {
  color: #a7f3d0;
  font-weight: 700;
}

.nabgol-answer-batch-send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 136px;
  padding: 0 18px;
  border: 1px solid #10b981;
  border-radius: 12px;
  background: #10b981;
  color: #04241b;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: box-shadow 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.nabgol-answer-batch-send:hover:not([disabled]) { background: #34d399; }
.nabgol-answer-batch-send:active:not([disabled]) { transform: translateY(1px); }

/* Disabled, but never mute: the counter beside it says exactly what is missing. */
.nabgol-answer-batch-send[disabled] {
  background: rgba(71, 85, 105, 0.55);
  border-color: rgba(148, 163, 184, 0.45);
  color: #e2e8f0;
  cursor: default;
}

.nabgol-answer-batch.is-ready .nabgol-answer-batch-send {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

/* A recorded answer, marked without moving anything (outline, not border). */
.nabgol-component.is-staged {
  outline: 1px solid rgba(52, 211, 153, 0.45);
  outline-offset: 4px;
  border-radius: 12px;
}

.nabgol-staged-flag {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #6ee7b7;
}

/* The «گزینهٔ دیگر» shell keeps its own 40px rhythm. */
.nabgol-custom-input-shell .nabgol-custom-input-mic {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: 0;
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.4);
  color: #a7f3d0;
}

.nabgol-custom-input-shell .nabgol-custom-input-mic:hover {
  background: rgba(15, 23, 42, 0.6);
  color: #d1fae5;
}

/* ---- light theme ---- */
html[data-theme="light"] .nabgol-answer-batch,
html.light .nabgol-answer-batch {
  border-color: #cbd5e1;
  background: #f8fafc;
}

html[data-theme="light"] .nabgol-answer-batch.is-ready,
html.light .nabgol-answer-batch.is-ready {
  border-color: rgba(5, 150, 105, 0.55);
  background: rgba(16, 185, 129, 0.1);
}

html[data-theme="light"] .nabgol-answer-batch-count,
html.light .nabgol-answer-batch-count {
  color: #475569;
}

html[data-theme="light"] .nabgol-answer-batch.is-ready .nabgol-answer-batch-count,
html.light .nabgol-answer-batch.is-ready .nabgol-answer-batch-count {
  color: #065f46;
}

html[data-theme="light"] .nabgol-answer-batch-send,
html.light .nabgol-answer-batch-send {
  background: #047857;
  border-color: #047857;
  color: #ffffff;
}

html[data-theme="light"] .nabgol-answer-batch-send:hover:not([disabled]),
html.light .nabgol-answer-batch-send:hover:not([disabled]) {
  background: #059669;
}

html[data-theme="light"] .nabgol-answer-batch-send[disabled],
html.light .nabgol-answer-batch-send[disabled] {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #475569;
}

html[data-theme="light"] .nabgol-staged-flag,
html.light .nabgol-staged-flag {
  color: #047857;
}

html[data-theme="light"] .nabgol-component.is-staged,
html.light .nabgol-component.is-staged {
  outline-color: rgba(5, 150, 105, 0.45);
}

html[data-theme="light"] .nabgol-text-input-mic,
html.light .nabgol-text-input-mic {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

/* Measured while widening the mic: in the light theme this button inherited
   `color:#fff` from `.nabgol-text-input button` and then had its solid emerald
   replaced by a pale sky gradient — white ink on near-white, unreadable. It is
   the primary action of the box, so it says so, in both themes. */
html[data-theme="light"] .nabgol-text-input-send,
html.light .nabgol-text-input-send {
  background: #047857;
  border-color: #047857;
  color: #ffffff;
}

html[data-theme="light"] .nabgol-custom-input-shell .nabgol-custom-input-mic,
html.light .nabgol-custom-input-shell .nabgol-custom-input-mic {
  background: rgba(16, 185, 129, 0.12);
  color: #065f46;
}

/* ---- phone ---- */
body.mobile-chat .nabgol-answer-batch {
  padding: 10px;
}

body.mobile-chat .nabgol-answer-batch-send {
  flex: 1 1 100%;
  min-width: 0;
}

/* A frozen older turn keeps its bar visible as a record, never as a button. */
.nabgol-inline-components.is-spent-pack .nabgol-answer-batch {
  border-style: dashed;
  background: transparent;
}

.nabgol-inline-components.is-spent-pack .nabgol-answer-batch-send {
  background: rgba(71, 85, 105, 0.45);
  border-color: rgba(148, 163, 184, 0.4);
  color: #e2e8f0;
  box-shadow: none;
}

html[data-theme="light"] .nabgol-inline-components.is-spent-pack .nabgol-answer-batch-send,
html.light .nabgol-inline-components.is-spent-pack .nabgol-answer-batch-send {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #475569;
}

/* The bar's two lines: the count leads, the reassurance follows once. */
.nabgol-answer-batch-count {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nabgol-answer-batch-head { font-weight: 700; }

.nabgol-answer-batch-hint {
  font-size: 12px;
  color: rgba(203, 213, 225, 0.72);
}

html[data-theme="light"] .nabgol-answer-batch-hint,
html.light .nabgol-answer-batch-hint {
  color: #64748b;
}

/* Phone: the field owns its own line, mic and «ثبت پاسخ» share the next one.
   Measured on the 390px shell: field + mic + button on one row squeezed the
   answer box to about a third of the width, which is the box the child types
   the actual answer into. */
body.mobile-chat .nabgol-text-input-row { flex-wrap: wrap; }

body.mobile-chat .nabgol-text-input-row .nabgol-text-input-field {
  flex: 1 1 100%;
}

body.mobile-chat .nabgol-text-input-row .nabgol-text-input-send {
  margin-inline-start: auto;
}

/* ---- light theme debts this section walked into ----
   Both were already in the file and both went from "rare" to "on screen every
   time a robot asks something", so they are fixed here rather than left:
   the answer box painted rgba(0,0,0,.28) with #f8fafc ink (a grey slab with
   white text on a white page), and the slider's own question was #f3f6fa —
   white on white, i.e. invisible. Measured on the light desktop shell. */
html[data-theme="light"] .nabgol-text-input-field,
html.light .nabgol-text-input-field {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

html[data-theme="light"] .nabgol-text-input-field::placeholder,
html.light .nabgol-text-input-field::placeholder {
  color: #64748b;
}

html[data-theme="light"] .nabgol-slider,
html.light .nabgol-slider {
  background: #f8fafc;
  border-color: #cbd5e1;
}

html[data-theme="light"] .nabgol-slider-label,
html[data-theme="light"] .nabgol-slider span.nabgol-slider-label,
html.light .nabgol-slider-label,
html.light .nabgol-slider span.nabgol-slider-label {
  color: #0f172a;
}

html[data-theme="light"] .nabgol-slider-scale,
html.light .nabgol-slider-scale {
  color: #475569;
}

html[data-theme="light"] .nabgol-slider-value,
html[data-theme="light"] .nabgol-slider output.nabgol-slider-value,
html.light .nabgol-slider-value,
html.light .nabgol-slider output.nabgol-slider-value {
  color: #047857;
}

/* Icon-only button reads as an icon button: on its own row the generic
   min-width:72px stretched it into an unlabelled slab. */
body.mobile-chat .nabgol-text-input-row .nabgol-text-input-mic {
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
}

/* ════════════════════════════════════════════════════════════════════════════
   نردبانِ تسلط (skill_dial) — نوارِ کشیدنیِ سنجشِ سطح
   جای پرسشِ چهارگزینه‌ای. یک نوارِ واحد که دانش‌آموز جلو می‌کشد (یا هرجایش
   می‌زند): پرشدن، رنگ، عددِ روی دستگیره و جملهٔ زیرش با هم حرکت می‌کنند.
   جهت: RTL — نوار از لبهٔ راست (شروعِ خواندن) پر می‌شود و رو به جلو می‌رود.
   تمامِ حرکت با transition است — نه کانواس، نه حلقهٔ rAF، نه کتابخانه.
   ستونِ چت روی دسکتاپ ~۵۰۶px و روی موبایل تا ~۳۲۶px می‌رسد.
   ════════════════════════════════════════════════════════════════════════════ */
.nabgol-skill-dial {
  --dial-accent: #64748b;
  --dial-accent-soft: rgba(100, 116, 139, 0.14);
  direction: rtl;
  text-align: right;
  position: relative;
  padding: 14px 15px 13px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background:
    radial-gradient(120% 120% at 100% 0%, var(--dial-accent-soft), transparent 60%),
    linear-gradient(180deg, rgba(30, 41, 59, 0.72), rgba(15, 23, 42, 0.60));
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transition: border-color .4s ease, box-shadow .4s ease, background-color .4s ease;
}
.nabgol-skill-dial[data-level="1"] { --dial-accent: #fbbf24; --dial-accent-soft: rgba(251, 191, 36, 0.17); }
.nabgol-skill-dial[data-level="2"] { --dial-accent: #2dd4bf; --dial-accent-soft: rgba(45, 212, 191, 0.17); }
.nabgol-skill-dial[data-level="3"] { --dial-accent: #a78bfa; --dial-accent-soft: rgba(167, 139, 250, 0.19); }
.nabgol-skill-dial.is-set { border-color: color-mix(in srgb, var(--dial-accent) 40%, transparent); }

.nabgol-dial-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.nabgol-dial-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--dial-accent);
  background: var(--dial-accent-soft);
  border-radius: 999px;
  padding: 3px 10px;
  transition: color .4s ease, background-color .4s ease;
}
/* «رد کردن» باید دیده شود ولی هم‌وزنِ نوار نباشد — همان اشتباهِ گزینهٔ چهارم. */
.nabgol-dial-skip {
  border: 0;
  background: transparent;
  color: rgba(148, 163, 184, 0.85);
  font: inherit;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.nabgol-dial-skip:hover { color: #e2e8f0; background: rgba(148, 163, 184, 0.14); }
.nabgol-dial-skip:focus-visible { outline: 2px solid var(--dial-accent); outline-offset: 2px; }

.nabgol-dial-question {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  color: #f1f5f9;
}

/* خوانشِ زنده — پیش از انتخاب یک دعوت، بعدش نامِ پله و معنایش. */
.nabgol-dial-readout {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 42px;
  margin-bottom: 10px;
}
.nabgol-dial-readout-name {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--dial-accent);
  transition: color .4s ease;
}
.nabgol-skill-dial:not(.is-set) .nabgol-dial-readout-name {
  color: rgba(148, 163, 184, 0.9);
  font-size: 15px;
}
.nabgol-dial-readout-caption {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(203, 213, 225, 0.88);
  transition: opacity .3s ease, transform .3s ease;
}
.nabgol-skill-dial.is-set .nabgol-dial-readout-caption { opacity: 0; transform: translateY(4px); }
.nabgol-skill-dial.is-set .nabgol-dial-readout-caption.is-in { opacity: 1; transform: none; }

/* ── نوار ─────────────────────────────────────────────────────────────────── */
.nabgol-dial-slider {
  position: relative;
  padding: 13px 0 11px;   /* ناحیهٔ لمسِ راحت بالای/زیرِ نوار */
  margin: 0 15px;         /* جا برای نصفِ دستگیره در دو سر */
  cursor: grab;
  touch-action: none;     /* کشیدنِ افقی نباید صفحه را اسکرول کند */
  -webkit-tap-highlight-color: transparent;
}
.nabgol-skill-dial.is-dragging .nabgol-dial-slider { cursor: grabbing; }
.nabgol-dial-slider:focus-visible { outline: 2px solid var(--dial-accent); outline-offset: 4px; border-radius: 12px; }
.nabgol-skill-dial.is-answered .nabgol-dial-slider { cursor: default; }

.nabgol-dial-track {
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.15);
  box-shadow: inset 0 1px 3px rgba(2, 6, 23, 0.4);
}
.nabgol-dial-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(to left,
    color-mix(in srgb, var(--dial-accent) 45%, transparent), var(--dial-accent));
  box-shadow: 0 0 16px color-mix(in srgb, var(--dial-accent) 50%, transparent);
  transition: width .34s cubic-bezier(.22, 1, .36, 1);
}
.nabgol-skill-dial.is-dragging .nabgol-dial-fill { transition-duration: .1s; }
.nabgol-dial-notch {
  position: absolute;
  inset-block: 3px;
  width: 2px;
  border-radius: 2px;
  background: rgba(15, 23, 42, 0.5);
  transform: translateX(-1px);
}
.nabgol-dial-thumb {
  position: absolute;
  top: 50%;
  inset-inline-start: 0;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  /* در RTL، inset-inline-start از راست می‌شمارد؛ نصفِ عرض برای مرکز کردن. */
  margin-inline-start: -15px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, #e2e8f0);
  box-shadow: 0 3px 10px rgba(2, 6, 23, 0.45), 0 0 0 3px color-mix(in srgb, var(--dial-accent) 30%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: inset-inline-start .34s cubic-bezier(.22, 1, .36, 1),
              box-shadow .3s ease, transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.nabgol-skill-dial.is-dragging .nabgol-dial-thumb { transition-duration: .1s, .3s, .18s; transform: scale(1.12); }
.nabgol-dial-thumb-num {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}
/* دعوت به کشیدن: تا وقتی دست نخورده، دستگیره آرام نفس می‌کشد. */
.nabgol-skill-dial:not(.is-set) .nabgol-dial-thumb {
  animation: nabgolDialInvite 2.2s ease-in-out infinite;
}
@keyframes nabgolDialInvite {
  0%, 100% { box-shadow: 0 3px 10px rgba(2, 6, 23, 0.45), 0 0 0 3px rgba(148, 163, 184, 0.22); }
  50%      { box-shadow: 0 3px 10px rgba(2, 6, 23, 0.45), 0 0 0 9px rgba(148, 163, 184, 0.10); }
}

/* برچسب‌های زیرِ نوار — خودشان دکمه‌اند، برای انگشتی که نمی‌خواهد بکشد. */
.nabgol-dial-ticks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 2px;
}
.nabgol-dial-ticks[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nabgol-dial-tick {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(148, 163, 184, 0.9);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  padding: 7px 2px;
  min-height: 34px;
  border-radius: 9px;
  cursor: pointer;
  transition: color .22s ease, background-color .22s ease;
}
.nabgol-dial-tick:hover:not(:disabled) { color: #e2e8f0; background: rgba(148, 163, 184, 0.1); }
.nabgol-dial-tick:focus-visible { outline: 2px solid var(--dial-accent); outline-offset: 2px; }
.nabgol-dial-tick.is-picked { color: var(--dial-accent); font-weight: 800; }

.nabgol-dial-starts {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px dashed rgba(148, 163, 184, 0.22);
  animation: nabgolDialReveal .34s cubic-bezier(.22, 1, .36, 1) both;
}
.nabgol-dial-starts-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(203, 213, 225, 0.82);
  margin-bottom: 7px;
}
.nabgol-dial-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nabgol-dial-chip {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.42);
  color: #cbd5e1;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  max-width: 100%;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.nabgol-dial-chip:hover:not(:disabled) { border-color: rgba(148, 163, 184, 0.55); color: #f1f5f9; }
.nabgol-dial-chip:focus-visible { outline: 2px solid var(--dial-accent); outline-offset: 2px; }
.nabgol-dial-chip.is-picked {
  border-color: var(--dial-accent);
  background: var(--dial-accent-soft);
  color: #f8fafc;
}

/* دکمهٔ تأیید همیشه هست، چون جای خالی و بعد ظاهرشدنِ ناگهانیِ دکمه، هم چیدمان
   را می‌پراند هم کاربر نمی‌داند بعدش کجا باید بزند. پیش از انتخاب صریحاً
   «غیرفعال» دیده می‌شود، نه نیمه‌محو. */
.nabgol-dial-foot { margin-top: 12px; display: flex; justify-content: flex-start; }
.nabgol-dial-confirm {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 10px 20px;
  min-height: 42px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  color: #0b1220;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--dial-accent) 92%, white), var(--dial-accent));
  cursor: pointer;
  transition: background-color .3s ease, color .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1),
              filter .2s ease, opacity .25s ease;
}
/* تخصص عمداً بالا و با نامِ رقیب: این اعلان باید از
   `body:is(.desktop-chat,.mobile-chat) .nabgol-component button:disabled:not(.is-chosen):not(.is-selected)`
   در chat-action-buttons.css (که `opacity:.44` و `saturate(.6)` می‌دهد و دیرتر
   لود می‌شود) بالاتر بایستد. اندازه‌گیری‌شده در _skill_dial_probe.js — نه حدس. */
body:is(.desktop-chat, .mobile-chat) .nabgol-skill-dial .nabgol-dial-confirm.nabgol-dial-confirm.nabgol-dial-confirm:disabled,
.nabgol-skill-dial .nabgol-dial-confirm:disabled {
  cursor: not-allowed;
  opacity: 1;
  filter: none;
  color: rgba(148, 163, 184, 0.85);
  background: rgba(148, 163, 184, 0.13);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.22);
  transform: scale(.98);
}
.nabgol-dial-confirm.is-ready { animation: nabgolDialPop .34s cubic-bezier(.34, 1.56, .64, 1) both; }
.nabgol-dial-confirm:hover:not(:disabled) { filter: brightness(1.07); }
.nabgol-dial-confirm:active:not(:disabled) { transform: scale(.97); }
.nabgol-dial-confirm:focus-visible { outline: 2px solid var(--dial-accent); outline-offset: 3px; }
@keyframes nabgolDialPop {
  from { transform: scale(.94); }
  60% { transform: scale(1.04); }
  to { transform: none; }
}

/* ابتدایی: همه‌چیز درشت‌تر — استانداردِ بصری همان، فقط کلمات ساده‌تر و
   هدفِ لمس بزرگ‌تر. والدین این صفحه را قضاوت می‌کنند، نه بچهٔ هفت‌ساله. */
.nabgol-skill-dial.is-elementary .nabgol-dial-question { font-size: 16px; }
.nabgol-skill-dial.is-elementary .nabgol-dial-readout-name { font-size: 21px; }
.nabgol-skill-dial.is-elementary .nabgol-dial-track { height: 20px; }
.nabgol-skill-dial.is-elementary .nabgol-dial-thumb { width: 36px; height: 36px; margin-top: -18px; margin-inline-start: -18px; }
.nabgol-skill-dial.is-elementary .nabgol-dial-slider { margin: 0 18px; padding: 15px 0 13px; }
.nabgol-skill-dial.is-elementary .nabgol-dial-tick { font-size: 14px; min-height: 40px; }

/* پاسخ‌داده‌شده (بازپخشِ تاریخچه): خوانا و آرام، نه خاکستریِ مرده. */
.nabgol-skill-dial.is-answered { opacity: .95; }
.nabgol-skill-dial.is-answered .nabgol-dial-foot,
.nabgol-skill-dial.is-answered .nabgol-dial-skip { display: none; }
.nabgol-skill-dial.is-answered .nabgol-dial-tick:not(.is-picked) { opacity: .5; }

@keyframes nabgolDialReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nabgol-skill-dial,
  .nabgol-skill-dial * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ستونِ باریک (موبایل ~۳۲۶px) */
@media (max-width: 400px) {
  .nabgol-skill-dial { padding: 12px 12px 11px; }
  .nabgol-dial-tick { font-size: 11.5px; padding: 7px 1px; }
  .nabgol-dial-readout-name { font-size: 18px; }
}

html[data-theme="light"] .nabgol-skill-dial,
html.light .nabgol-skill-dial {
  border-color: rgba(148, 163, 184, 0.38);
  background:
    radial-gradient(120% 120% at 100% 0%, var(--dial-accent-soft), transparent 60%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07), inset 0 1px 0 #fff;
}
html[data-theme="light"] .nabgol-dial-question,
html.light .nabgol-dial-question { color: #0f172a; }
html[data-theme="light"] .nabgol-dial-readout-caption,
html.light .nabgol-dial-readout-caption { color: #475569; }
html[data-theme="light"] .nabgol-skill-dial:not(.is-set) .nabgol-dial-readout-name,
html.light .nabgol-skill-dial:not(.is-set) .nabgol-dial-readout-name { color: #64748b; }
html[data-theme="light"] .nabgol-dial-track,
html.light .nabgol-dial-track {
  background: rgba(148, 163, 184, 0.28);
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] .nabgol-dial-notch,
html.light .nabgol-dial-notch { background: rgba(255, 255, 255, 0.92); }
html[data-theme="light"] .nabgol-dial-thumb,
html.light .nabgol-dial-thumb {
  background: linear-gradient(180deg, #fff, #f1f5f9);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22), 0 0 0 3px color-mix(in srgb, var(--dial-accent) 32%, transparent);
}
html[data-theme="light"] .nabgol-dial-tick,
html.light .nabgol-dial-tick { color: #64748b; }
html[data-theme="light"] .nabgol-dial-tick:hover:not(:disabled),
html.light .nabgol-dial-tick:hover:not(:disabled) { color: #0f172a; background: rgba(15, 23, 42, 0.05); }
html[data-theme="light"] .nabgol-dial-tick.is-picked,
html.light .nabgol-dial-tick.is-picked { color: color-mix(in srgb, var(--dial-accent) 72%, #0f172a); }
html[data-theme="light"] .nabgol-dial-starts-label,
html.light .nabgol-dial-starts-label { color: #475569; }
html[data-theme="light"] .nabgol-dial-chip,
html.light .nabgol-dial-chip { background: #fff; color: #334155; border-color: #cbd5e1; }
html[data-theme="light"] .nabgol-dial-skip,
html.light .nabgol-dial-skip { color: #64748b; }
html[data-theme="light"] .nabgol-dial-skip:hover,
html.light .nabgol-dial-skip:hover { color: #0f172a; background: rgba(15, 23, 42, 0.06); }
/* حالتِ انتخاب‌شده در تمِ روشن باید *بعد* از پایهٔ روشن بیاید، وگرنه هم‌تخصص و
   دیرتر بودنِ قاعدهٔ پایه انتخابِ کاربر را روی صفحه ناپیدا می‌کند. */
html[data-theme="light"] .nabgol-dial-chip.is-picked,
html.light .nabgol-dial-chip.is-picked {
  border-color: var(--dial-accent);
  background: var(--dial-accent-soft);
  color: #0f172a;
  font-weight: 700;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .nabgol-skill-dial .nabgol-dial-confirm.nabgol-dial-confirm.nabgol-dial-confirm:disabled,
html.light body:is(.desktop-chat, .mobile-chat) .nabgol-skill-dial .nabgol-dial-confirm.nabgol-dial-confirm.nabgol-dial-confirm:disabled,
html[data-theme="light"] .nabgol-skill-dial .nabgol-dial-confirm:disabled,
html.light .nabgol-skill-dial .nabgol-dial-confirm:disabled {
  color: #64748b;
  background: rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35);
}
html[data-theme="light"] .nabgol-dial-confirm,
html.light .nabgol-dial-confirm { color: #06202b; }

/* مقیاسِ عددیِ متوسطه — عدد کنارِ نامِ پله، و همان عدد روی دستگیره.
   ابتدایی این بخش را نمی‌گیرد (readPct پنهان می‌ماند): آن باند کیفی است. */
.nabgol-dial-readout-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.nabgol-dial-readout-pct {
  font-size: 13px;
  font-weight: 800;
  color: var(--dial-accent);
  background: var(--dial-accent-soft);
  border-radius: 999px;
  padding: 2px 9px;
  letter-spacing: .01em;
  transition: color .4s ease, background-color .4s ease;
}
/* دو رقم داخلِ دستگیره جا نمی‌شود مگر کمی ریزتر شود. */
.nabgol-dial-thumb-num { font-size: 11.5px; letter-spacing: -.02em; }
.nabgol-skill-dial.is-elementary .nabgol-dial-thumb-num { font-size: 13px; }


/* ═══ قفسهٔ کتاب (book_outline) ═══════════════════════════════════════════════
 * منوی مرحله‌ایِ فهرستِ کتاب: همیشه یک لایه روی صفحه.
 *
 * بازطراحیِ ۲۰۲۶-۰۹-۰۹ (خواستهٔ مالک، بعد از دیدنِ نسخهٔ اول روی سایت):
 *   ۱) **هیچ اسکرولِ داخلی.** نسخهٔ اول یک ناحیهٔ ۳۵۶ پیکسلیِ اسکرول‌شونده داشت.
 *      اسکرول داخلِ اسکرولِ چت غلط است — و ریشه‌اش هم نبودِ سقف نبود، بلکه
 *      ردیف‌های دوخطی بود. ردیف که تک‌خطی شد، ۹ فصل بی هیچ سقفی جا می‌شود.
 *   ۲) **ردیفِ تک‌خطی و جمع‌وجور.** عنوان و توضیح کنارِ هم، ارتفاعِ ۳۴ پیکسل
 *      به‌جای ۵۶. «دکمهٔ غول‌آسا» دقیقاً همین دوخطی‌بودن بود.
 *   ۳) **راهِ برگشت هم‌اندازهٔ راهِ ورود.** آیکنِ ۲۸ پیکسلیِ گوشهٔ کارت شد یک
 *      ردیفِ تمام‌عرضِ برچسب‌دار در بالای همان لایه.
 *
 * همهٔ رنگ‌ها متغیرند و فقط در یک بلوکِ روشن بازنویسی می‌شوند؛ هیچ رنگی جای
 * دیگری تعریف نمی‌شود. هر انتخابگر عمداً زیرِ .nabgol-book-outline است: قاعدهٔ
 * برهنه داخلِ #messages هر مؤلفهٔ تودرتو را هم بازطراحی می‌کند (سه نقصِ ثبت‌شده).
 */
.nabgol-book-outline {
  --bo-ink:        #f1f5f9;
  --bo-ink-soft:   rgba(148, 163, 184, .92);
  --bo-ink-faint:  rgba(148, 163, 184, .72);
  --bo-accent:     #34d399;
  --bo-wash:       rgba(52, 211, 153, .13);
  --bo-card:       linear-gradient(180deg, #1b2637, #141d2c);
  --bo-edge:       rgba(148, 163, 184, .22);
  --bo-row:        rgba(148, 163, 184, .07);
  --bo-row-edge:   rgba(148, 163, 184, .16);
  --bo-row-hover:  rgba(52, 211, 153, .12);
  --bo-shadow:     0 8px 24px rgba(2, 6, 23, .26), inset 0 1px 0 rgba(255, 255, 255, .05);

  direction: rtl;           /* پنل خودش جهتش را اعلام می‌کند؛ ارث‌بری قابل اتکا نیست */
  text-align: right;
  position: relative;
  /* ستونِ چت روی دسکتاپ پهن است و ردیفِ تمام‌عرض زمخت می‌شود. کارت عرضِ خودش
     را می‌گیرد، نه هرچه ستون بدهد. */
  max-width: 460px;
  padding: 10px 10px 8px;
  border-radius: 16px;
  border: 1px solid var(--bo-edge);
  background: radial-gradient(120% 120% at 100% 0%, var(--bo-wash), transparent 58%), var(--bo-card);
  box-shadow: var(--bo-shadow);
  color: var(--bo-ink);
  overflow: hidden;
}

/* ── سرِ کارت: پرسش + شمارِ فصل‌ها، یک سطر ──────────────────────────────────── */
.nabgol-book-outline .nabgol-bo-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 2px 8px;
}
.nabgol-book-outline .nabgol-bo-crumb {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--bo-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nabgol-book-outline .nabgol-bo-crumb.has-path { color: var(--bo-accent); }
.nabgol-book-outline .nabgol-bo-count {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--bo-accent);
  background: var(--bo-wash);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ── جست‌وجو ────────────────────────────────────────────────────────────────── */
.nabgol-book-outline .nabgol-bo-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  padding: 0 9px;
  height: 32px;
  border: 1px solid var(--bo-row-edge);
  border-radius: 9px;
  background: var(--bo-row);
  transition: border-color .18s ease, background-color .18s ease;
}
.nabgol-book-outline .nabgol-bo-search:focus-within {
  border-color: color-mix(in srgb, var(--bo-accent) 55%, transparent);
  background: var(--bo-row-hover);
}
.nabgol-book-outline .nabgol-bo-search-icon { flex: 0 0 auto; display: inline-flex; color: var(--bo-ink-faint); }
.nabgol-book-outline .nabgol-bo-search-field {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent !important;
  color: var(--bo-ink);
  font: inherit;
  font-size: 12.5px;
  padding: 0;
}
.nabgol-book-outline .nabgol-bo-search-field::placeholder { color: var(--bo-ink-faint); }
.nabgol-book-outline .nabgol-bo-search-field::-webkit-search-cancel-button { display: none; }
.nabgol-book-outline .nabgol-bo-search-clear {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--bo-ink-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.nabgol-book-outline .nabgol-bo-search-clear:hover { color: var(--bo-ink); background: var(--bo-row); }

/* ── بدنه: بدونِ سقف، بدونِ اسکرول ─────────────────────────────────────────── */
.nabgol-book-outline .nabgol-bo-scroll { overflow: visible; }
.nabgol-book-outline .nabgol-bo-level {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* حرکت فقط با animation و نه با کلاسی که rAF می‌گذارد: در تبِ پنهان rAF شلیک
   نمی‌کند و کارت نامرئی جا می‌ماند. حالتِ پایان همان حالتِ طبیعی است. */
@keyframes nabgol-bo-slide-in  { from { opacity: 0; transform: translateX(12px); } }
@keyframes nabgol-bo-slide-out { from { opacity: 0; transform: translateX(-12px); } }
.nabgol-book-outline .nabgol-bo-level.is-in  { animation: nabgol-bo-slide-in .22s cubic-bezier(.22,.7,.3,1); }
.nabgol-book-outline .nabgol-bo-level.is-out { animation: nabgol-bo-slide-out .22s cubic-bezier(.22,.7,.3,1); }

/* ── ردیف: یک خط ────────────────────────────────────────────────────────────── */
.nabgol-book-outline .nabgol-bo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid var(--bo-row-edge);
  border-radius: 9px;
  background: var(--bo-row);
  color: var(--bo-ink);
  font: inherit;
  text-align: right;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.nabgol-book-outline .nabgol-bo-row:hover:not(:disabled) {
  background: var(--bo-row-hover);
  border-color: color-mix(in srgb, var(--bo-accent) 40%, transparent);
}
.nabgol-book-outline .nabgol-bo-row:focus-visible { outline: 2px solid var(--bo-accent); outline-offset: 2px; }
.nabgol-book-outline .nabgol-bo-row:disabled { opacity: .55; cursor: default; }

.nabgol-book-outline .nabgol-bo-idx {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 6px;
  background: var(--bo-wash);
  color: var(--bo-accent);
  font-size: 10.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* عنوان و توضیح روی یک خط؛ توضیح فقط اگر جا باشد. */
.nabgol-book-outline .nabgol-bo-row-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.nabgol-book-outline .nabgol-bo-title {
  flex: 0 1 auto;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--bo-ink);
  /* نامِ بلند تا دو خط می‌شکند و بریده نمی‌شود: چیزی که خوانده نشود انتخاب هم
     نمی‌شود. بیشترِ ردیف‌ها یک‌خطی می‌مانند، پس ارتفاعِ کلی جمع‌وجور می‌ماند. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.nabgol-book-outline .nabgol-bo-meta {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--bo-ink-faint);
  white-space: nowrap;
}
.nabgol-book-outline .nabgol-bo-tail {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--bo-ink-faint);
  transition: color .15s ease, transform .15s ease;
}
.nabgol-book-outline .nabgol-bo-row:hover .nabgol-bo-tail { color: var(--bo-accent); }
.nabgol-book-outline .nabgol-bo-row.is-branch:hover .nabgol-bo-tail { transform: translateX(-2px); }
/* مثلثِ «شروع» کم‌رنگ نمی‌شود: روی لمس hover وجود ندارد، و این تنها نشانه‌ای
   است که می‌گوید کلیکِ این ردیف تدریس را شروع می‌کند، نه لایهٔ بعد را باز. */
.nabgol-book-outline .nabgol-bo-row.is-leaf .nabgol-bo-tail {
  color: color-mix(in srgb, var(--bo-accent) 78%, transparent);
}
.nabgol-book-outline .nabgol-bo-row.is-hit .nabgol-bo-row-main { flex-wrap: wrap; }

/* ── گامِ ۱۱ (سشنِ ۳): لایهٔ پیشرفت روی قفسه ─────────────────────────────────
 * نشانِ تسلط، درصدِ حجمی و پیشنهادِ بعدی تا امروز فقط روی پنلِ نقشه بودند و
 * حبابِ چت هیچ‌کدام را نداشت. حالا قفسه یکی است، پس هر دو جا دارندشان.
 * هر رنگ از متغیرهای همین کارت می‌آید؛ سه رنگِ حالت همان سه رنگِ نقشه‌اند
 * (tutor-quest.css) تا دانش‌آموز دو زبانِ رنگ یاد نگیرد. */
.nabgol-book-outline .nabgol-bo-progress {
  margin: 7px 2px 1px;
  font-size: 11.5px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--bo-ink-soft);
}
.nabgol-book-outline .nabgol-bo-row.has-status .nabgol-bo-row-main { flex-wrap: wrap; }
.nabgol-book-outline .nabgol-bo-status {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--bo-st-ink, var(--bo-ink-faint));
  background: var(--bo-st-bg, var(--bo-row));
  border: 1px solid var(--bo-st-edge, var(--bo-row-edge));
}
.nabgol-book-outline .nabgol-bo-row.is-learning { --bo-st-ink: #b8860b; --bo-st-bg: rgba(184, 134, 11, .15); --bo-st-edge: rgba(184, 134, 11, .38); }
.nabgol-book-outline .nabgol-bo-row.is-checking { --bo-st-ink: #3b8fe0; --bo-st-bg: rgba(59, 143, 224, .15); --bo-st-edge: rgba(59, 143, 224, .38); }
.nabgol-book-outline .nabgol-bo-row.is-mastered { --bo-st-ink: var(--bo-accent); --bo-st-bg: var(--bo-row-hover); --bo-st-edge: rgba(52, 211, 153, .4); }
html[data-theme="light"] .nabgol-book-outline .nabgol-bo-row.is-learning { --bo-st-ink: #8a6508; }
html[data-theme="light"] .nabgol-book-outline .nabgol-bo-row.is-checking { --bo-st-ink: #1f63a8; }
html[data-theme="light"] .nabgol-book-outline .nabgol-bo-row.is-mastered { --bo-st-edge: rgba(4, 120, 87, .4); }

/* پیشنهاد: یک ردیفِ هم‌اندازهٔ بقیه، فقط با لبه و رنگِ لهجه‌دار. کارتِ جدا
   نمی‌شود — ردیفی که شکلش با بقیه فرق کند، از «پیشنهاد» به «تبلیغ» می‌رسد. */
.nabgol-book-outline .nabgol-bo-suggest {
  border-color: var(--bo-st-edge, var(--bo-accent));
  background: var(--bo-wash);
  margin-bottom: 7px;
}
.nabgol-book-outline .nabgol-bo-suggest .nabgol-bo-title {
  color: var(--bo-accent);
  font-weight: 800;
}

/* ── ردیفِ برگشت ───────────────────────────────────────────────────────────── */
.nabgol-book-outline .nabgol-bo-backrow {
  justify-content: flex-start;
  gap: 6px;
  background: transparent;
  border-style: dashed;
  border-color: var(--bo-row-edge);
  color: var(--bo-ink-soft);
}
.nabgol-book-outline .nabgol-bo-backrow:hover:not(:disabled) {
  background: var(--bo-row);
  border-style: solid;
  color: var(--bo-ink);
}
.nabgol-book-outline .nabgol-bo-backrow-ic { display: inline-flex; flex: 0 0 auto; }
.nabgol-book-outline .nabgol-bo-backrow-tx {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── «شروع از اول تا آخر» ───────────────────────────────────────────────────── */
/* دو سطر، ولی فقط این یکی: تنها دکمه‌ای است که باید از بقیه بلندتر دیده شود،
   و سطرِ دومش نامِ دقیقِ همان چیزی است که شروع می‌شود — همان چیزی که جملهٔ
   ثابت را از ماشینی‌بودن درمی‌آورد. */
.nabgol-book-outline .nabgol-bo-all {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  margin-bottom: 1px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--bo-accent) 48%, transparent);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--bo-row-hover), var(--bo-wash));
  color: var(--bo-ink);
  font: inherit;
  text-align: right;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.nabgol-book-outline .nabgol-bo-all:hover:not(:disabled) {
  border-color: var(--bo-accent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--bo-accent) 20%, transparent);
}
.nabgol-book-outline .nabgol-bo-all:focus-visible { outline: 2px solid var(--bo-accent); outline-offset: 2px; }
.nabgol-book-outline .nabgol-bo-all:disabled { opacity: .55; cursor: default; }
.nabgol-book-outline .nabgol-bo-all-icon { flex: 0 0 auto; display: inline-flex; color: var(--bo-accent); }
.nabgol-book-outline .nabgol-bo-all-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.nabgol-book-outline .nabgol-bo-all-do {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--bo-accent);
}
.nabgol-book-outline .nabgol-bo-all-name {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--bo-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nabgol-book-outline .nabgol-bo-or {
  margin: 5px 3px 0;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--bo-ink-faint);
}
.nabgol-book-outline .nabgol-bo-empty {
  margin: 8px 4px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--bo-ink-faint);
}

/* ── حالتِ پاسخ‌داده‌شده: فهرست می‌ماند، فقط قفل ─────────────────────────── */
.nabgol-book-outline.is-answered { opacity: .96; }
.nabgol-book-outline.is-answered .nabgol-bo-row,
.nabgol-book-outline.is-answered .nabgol-bo-all { cursor: default; }
.nabgol-book-outline .nabgol-bo-chosen {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 2px 7px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--bo-wash);
}
.nabgol-book-outline .nabgol-bo-chosen-tick { color: var(--bo-accent); font-size: 12px; font-weight: 800; }
.nabgol-book-outline .nabgol-bo-chosen-tx {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--bo-accent);
  overflow-wrap: anywhere;
}

/* ── حالتِ روز ──────────────────────────────────────────────────────────────── */
html[data-theme="light"] .nabgol-book-outline,
html.light .nabgol-book-outline {
  --bo-ink:        #0f172a;
  --bo-ink-soft:   #475569;
  --bo-ink-faint:  #64748b;
  --bo-accent:     #047857;
  --bo-wash:       rgba(4, 120, 87, .09);
  --bo-card:       linear-gradient(180deg, #f7f9fc, #eef2f7);
  --bo-edge:       #d7dfe8;
  --bo-row:        #ffffff;
  --bo-row-edge:   #dbe3ec;
  --bo-row-hover:  rgba(4, 120, 87, .07);
  --bo-shadow:     0 5px 16px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* ── گوشیِ باریک ────────────────────────────────────────────────────────────── */
@media (max-width: 460px) {
  .nabgol-book-outline { max-width: none; padding: 9px 8px 7px; border-radius: 14px; }
  .nabgol-book-outline .nabgol-bo-row { gap: 7px; padding: 5px 8px; min-height: 36px; }
  .nabgol-book-outline .nabgol-bo-title { font-size: 12.5px; }
}

/* ── حرکتِ کمتر ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nabgol-book-outline .nabgol-bo-level.is-in,
  .nabgol-book-outline .nabgol-bo-level.is-out { animation: none; }
  .nabgol-book-outline .nabgol-bo-row,
  .nabgol-book-outline .nabgol-bo-all { transition: none; }
}

/* ══ «کادرِ کپی» — ```paste (docs/GAM-12-PANEL-SHAD.md §2-5) ════════════════
   TEXT to paste somewhere else, not code: right-to-left, the prose face (never
   monospace), wrapped lines, a title and «کپی متن». chat-markdown.js builds it
   in the one enhance chain, so a replayed chat draws the same box. */
.nabgol-paste {
  direction: rtl;
  text-align: right;
  margin: 12px 0;
  border: 1px solid rgba(52, 211, 153, 0.30);
  border-radius: 14px;
  background: rgba(16, 185, 129, 0.06);
  overflow: hidden;
}

.nabgol-paste-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border-bottom: 1px solid rgba(52, 211, 153, 0.18);
}

.nabgol-paste-title {
  font-weight: 750;
  font-size: 0.86rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.nabgol-paste-copy {
  appearance: none;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 4px 14px;
  border: 1px solid rgba(52, 211, 153, 0.45);
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.14);
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.nabgol-paste-copy.is-done {
  background: rgba(16, 185, 129, 0.28);
}

.nabgol-paste-copy:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

.nabgol-paste-text {
  padding: 10px 14px 12px;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.95;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
  user-select: text;
  -webkit-user-select: text;
}

html[data-theme="light"] .nabgol-paste {
  border-color: rgba(5, 150, 105, 0.28);
  background: #f3fdf9;
}

html[data-theme="light"] .nabgol-paste-head {
  border-bottom-color: rgba(5, 150, 105, 0.16);
}

html[data-theme="light"] .nabgol-paste-copy {
  border-color: rgba(5, 150, 105, 0.40);
  background: #e3f7ef;
  color: #064e3b;
}

@media print {
  .nabgol-paste { border: 1px solid #999; background: none; }
  .nabgol-paste-copy { display: none; }
  .nabgol-paste-head { border-bottom: 1px solid #ccc; }
}