/* 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;
}

/* 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. */
.nabgol-media-fullscreen__zoomwrap > .nabgol-diagram-shell {
  box-sizing: border-box;
  padding: 0.95em 0.85em 0.7em;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(52, 211, 153, 0.14), transparent 55%),
    linear-gradient(160deg, rgba(15, 23, 42, 0.98), rgba(6, 78, 59, 0.28));
  border: 1px solid rgba(52, 211, 153, 0.34);
  border-radius: 16px;
}

.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;
}