/* ==========================================================================
   Roboflight – Bot editor (#view-editor)
   Template: docs/mockups/bot-editor (without skin selection). Only tokens from css/colors.css.
   Logic: js/ui/editor/
   Contents: 1 Topbar · 2 Library · 3 Metadata · 4 Code · 5 Status bar & console
             6 Quick reference · 7 Round logs · 8 Opponent menu
   ========================================================================== */

#view-editor .rf-workspace
{
  grid-template-columns: 300px minmax(0, 1fr) 360px;
}

/* --------------------------------------------------------------------------
   1. TOPBAR (status & actions)
   -------------------------------------------------------------------------- */
#topbar-center-editor
{
  min-width: 0;
  max-width: 100%;
}

#editor-status
{
  max-width: 100%;
}

#editor-status > i
{
  flex-shrink: 0;
}

#editor-status-text
{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#editor-status-text strong
{
  color: var(--text-main);
}

#editor-status-text code
{
  color: var(--color-tertiary-text);
}

#editor-status.is-info > i
{
  color: var(--color-info);
}

.rf-caret
{
  font-size: 10px;
  opacity: 0.8;
}

@media (max-width: 1500px)
{
  #editor-btn-check .rf-btn-label
  {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   2. LEFT COLUMN: LIBRARY
   -------------------------------------------------------------------------- */
.rf-bot-lists
{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rf-bot-group
{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rf-bot-group-title
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-primary);
  padding: 2px 4px;
}

.rf-bot-group-title > span:first-child
{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rf-bot-item
{
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.rf-bot-item:hover
{
  border-color: var(--color-secondary);
}

.rf-bot-item.active
{
  background: var(--bg-main-panel);
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.rf-bot-item.is-draft
{
  border-style: dashed;
}

.rf-bot-icon
{
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-app);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 13px;
}

.rf-bot-item.is-own .rf-bot-icon
{
  color: var(--color-primary);
}

.rf-bot-item.is-reference .rf-bot-icon
{
  color: var(--color-secondary-text);
}

.rf-bot-item.is-draft .rf-bot-icon
{
  color: var(--color-tertiary-text);
}

.rf-bot-item .meta
{
  flex: 1;
  min-width: 0;
}

.rf-bot-item .meta .row1
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.rf-bot-item .meta .row1 strong
{
  min-width: 0;
}

.rf-bot-badges
{
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}

.rf-bot-item .meta .row2
{
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rf-lib-alert,
.rf-lib-hint
{
  font-size: 11.5px;
}

.rf-lib-hint
{
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
}

.rf-lib-hint > i
{
  color: var(--color-info);
  margin-top: 2px;
}

.rf-lib-empty
{
  font-size: 11.5px;
  padding: 4px 6px;
}

/* --------------------------------------------------------------------------
   3. CENTER: METADATA
   -------------------------------------------------------------------------- */
.rf-editor-meta
{
  flex-shrink: 0;
  padding: 10px 16px;
  background: var(--bg-side-panel);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.rf-editor-meta .rf-field
{
  flex: 1;
  min-width: 0;
}

.rf-editor-meta .rf-field-name
{
  flex: 0 1 240px;
}

.rf-editor-meta input[readonly]
{
  color: var(--text-muted);
  border-style: dashed;
}

.rf-editor-actions
{
  flex-wrap: nowrap;
  padding-bottom: 2px;
}

/* Narrower windows: compact the side columns and metadata row */
@media (max-width: 1500px)
{
  #view-editor .rf-workspace
  {
    grid-template-columns: 270px minmax(0, 1fr) 320px;
  }

  .rf-editor-meta .rf-field-name
  {
    flex-basis: 190px;
  }

  #editor-btn-revert .rf-btn-text
  {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   4. CENTER: CODE EDITOR
   -------------------------------------------------------------------------- */
.rf-editor-code
{
  flex: 1;
  min-height: 0;
  display: flex;
  background: var(--bg-canvas);
  overflow: hidden;
  position: relative;
}

.rf-line-numbers
{
  flex-shrink: 0;
  width: 54px;
  padding: 14px 8px;
  background: var(--bg-gutter);
  border-right: 1px solid var(--border-color);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  text-align: right;
  overflow: hidden;
  user-select: none;
  white-space: pre;
}

.rf-line-numbers .is-current
{
  color: var(--text-main);
}

.rf-line-numbers .is-error
{
  color: var(--color-danger-text);
  font-weight: 700;
  background: var(--color-danger-light);
  border-radius: var(--radius-sm);
  padding-left: 3px;
}

.rf-line-numbers.flash .is-current
{
  animation: rf-editor-flash 0.9s ease-out;
}

@keyframes rf-editor-flash
{
  0% { background: var(--color-primary); color: var(--text-on-primary); }
  100% { background: transparent; }
}

.rf-code-textarea
{
  flex: 1;
  min-width: 0;
  margin: 0;
  background: transparent;
  color: var(--text-main);
  border: none;
  border-radius: 0;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  resize: none;
  outline: none;
  overflow: auto;
  white-space: pre;
  overflow-wrap: normal;
  tab-size: 2;
  font-variant-ligatures: none;
  caret-color: var(--color-primary);
}

.rf-code-textarea:focus-visible
{
  outline: none;
}

.rf-code-textarea::placeholder
{
  color: var(--text-faint);
}

.rf-code-textarea.is-readonly
{
  color: var(--text-muted);
  caret-color: var(--text-faint);
}

.rf-code-textarea:disabled
{
  cursor: default;
}

.rf-editor-empty
{
  position: absolute;
  inset: 0;
  background: var(--bg-canvas);
  z-index: 2;
}

.rf-editor-empty p
{
  max-width: 460px;
  font-size: 12.5px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   5. CENTER: STATUS BAR & CHECK CONSOLE
   -------------------------------------------------------------------------- */
.rf-editor-statusbar
{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 26px;
  padding: 3px 16px;
  background: var(--bg-side-panel);
  border-top: 1px solid var(--border-color);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
}

.rf-editor-mode
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rf-editor-statusbar kbd
{
  font-size: 10px;
  padding: 0 4px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--bg-app);
  color: var(--text-muted);
}

@media (max-width: 1500px)
{
  .rf-editor-keys
  {
    display: none;
  }
}

.rf-editor-console
{
  flex-shrink: 0;
  min-height: 36px;
  max-height: 190px;
  overflow-y: auto;
  background: var(--bg-topbar);
  border-top: 1px solid var(--border-color);
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  user-select: text;
}

.rf-console-summary
{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.rf-console-summary .sep
{
  color: var(--text-faint);
}

.rf-console-status
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.rf-console-status.is-ok { color: var(--color-ok); }
.rf-console-status.is-warn { color: var(--color-warn); }
.rf-console-status.is-error { color: var(--color-danger-text); }
.rf-console-status.is-info { color: var(--color-info); }

.rf-console-list
{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rf-console-err
{
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-align: left;
  background: var(--color-danger-light);
  border: 1px solid transparent;
  border-left: 2px solid var(--color-danger);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-main);
}

button.rf-console-err
{
  cursor: pointer;
}

button.rf-console-err:hover
{
  border-color: var(--color-danger);
}

.rf-console-err .loc
{
  flex-shrink: 0;
  color: var(--color-danger-text);
  font-weight: 700;
}

.rf-console-err .msg
{
  word-break: break-word;
}

.rf-console-probe
{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-color);
}

.rf-console-probe.is-stale
{
  opacity: 0.75;
}

.rf-console-logs summary
{
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11.5px;
}

.rf-console-logs pre
{
  margin: 4px 0 0;
  padding: 6px 8px;
  max-height: 120px;
  overflow: auto;
  background: var(--bg-app);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--color-tertiary-text);
}

/* --------------------------------------------------------------------------
   6. RIGHT COLUMN: SHIPAI QUICK REFERENCE
   -------------------------------------------------------------------------- */
.rf-api-scroll
{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rf-api-hint
{
  background: var(--color-secondary-light);
  border: 1px solid var(--color-secondary-border);
  color: var(--color-secondary-text);
  padding: 7px 10px;
  border-radius: var(--radius-md);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rf-api-cat
{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rf-api-cat > summary
{
  list-style: none;
  cursor: pointer;
  margin-bottom: 6px;
}

.rf-api-cat > summary::-webkit-details-marker
{
  display: none;
}

.rf-api-cat h4
{
  font-size: 11px;
  text-transform: uppercase;
  color: var(--color-primary);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rf-api-cat h4::after
{
  content: "\25BE";
  margin-left: auto;
  color: var(--text-faint);
  font-size: 11px;
}

.rf-api-cat:not([open]) h4::after
{
  content: "\25B8";
}

.rf-snippet
{
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.rf-api-cat > .rf-snippet + .rf-snippet
{
  margin-top: 6px;
}

.rf-snippet:hover
{
  border-color: var(--color-secondary);
  background: var(--bg-main-panel);
}

.rf-snippet code
{
  color: var(--color-secondary-text);
  font-size: 11.5px;
  font-weight: 700;
  word-break: break-word;
}

.rf-snippet span
{
  font-size: 10.5px;
  color: var(--text-muted);
}

.rf-api-foot
{
  font-size: 10.5px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   7. RIGHT COLUMN: RECENT ROUND LOGS
   -------------------------------------------------------------------------- */
.rf-botlogs-toolbar
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-color);
}

.rf-botlog
{
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border-color);
}

.rf-botlog-head
{
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-muted);
}

.rf-botlog-title
{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rf-botlog-more
{
  font-size: 10.5px;
  padding-left: 8px;
}

.rf-logs-empty
{
  font-family: var(--font-ui);
  font-size: 12px;
}

.rf-logs-empty p
{
  max-width: 280px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   8. OPPONENT MENU (quick test)
   -------------------------------------------------------------------------- */
.rf-editor-menu
{
  position: fixed;
  z-index: 1200;
  width: 330px;
  max-height: min(460px, calc(100vh - 80px));
  display: flex;
  flex-direction: column;
  background: var(--bg-side-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-main);
  overflow: hidden;
}

.rf-menu-head
{
  padding: 8px 12px;
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border-color);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 7px;
}

.rf-menu-list
{
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rf-menu-item
{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 7px 9px;
  cursor: pointer;
  color: var(--text-main);
}

.rf-menu-item > i
{
  margin-top: 2px;
  color: var(--color-secondary-text);
}

.rf-menu-item > span
{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rf-menu-item small
{
  color: var(--text-muted);
  font-size: 10.5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rf-menu-item:hover,
.rf-menu-item:focus-visible
{
  background: var(--bg-surface-subtle);
  border-color: var(--color-secondary);
  outline: none;
}

.rf-menu-empty
{
  padding: 10px;
  font-size: 12px;
}

.rf-menu-foot
{
  padding: 6px 12px;
  border-top: 1px solid var(--border-color);
  font-size: 10.5px;
}

.rf-editor-origin
{
  margin-left: 6px;
}

.rf-editor-origin > i
{
  color: var(--color-secondary-text);
}

/* --------------------------------------------------------------------------
   9. VERSION HISTORY DIALOG
   -------------------------------------------------------------------------- */
.rf-history
{
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 14px;
  height: min(640px, calc(100vh - 170px));
}

.rf-history-list
{
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
  outline: none;
}

.rf-history-item
{
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 7px 9px;
  color: var(--text-main);
  cursor: pointer;
  font-size: 12px;
}

.rf-history-item:hover
{
  border-color: var(--border-strong);
}

.rf-history-item.active
{
  border-color: var(--color-secondary);
  background: var(--color-secondary-light);
}

.rf-history-item-top
{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.rf-history-item-date
{
  font-size: 11px;
  white-space: nowrap;
}

.rf-history-item-who
{
  font-size: 11px;
  color: var(--text-muted);
}

.rf-history-item-who.is-agent
{
  color: var(--color-secondary-text);
}

.rf-history-item-note
{
  font-size: 11px;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rf-history-detail
{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}

.rf-history-title
{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}

.rf-history-note
{
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: pre-wrap;
  user-select: text;
}

.rf-history-toolbar
{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rf-history-body
{
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--bg-canvas);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.rf-history-info
{
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 10px;
  font-size: 12px;
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border-color);
}

.rf-diff
{
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  min-width: max-content;
  user-select: text;
}

.rf-diff-row
{
  display: grid;
  grid-template-columns: 48px 48px minmax(0, 1fr);
}

.rf-diff-num
{
  color: var(--text-faint);
  text-align: right;
  padding: 0 8px;
  background: var(--bg-gutter);
  user-select: none;
}

.rf-diff-text
{
  padding: 0 10px;
  white-space: pre;
  color: var(--text-main);
}

.rf-diff-sign
{
  display: inline-block;
  width: 14px;
  color: var(--text-faint);
  user-select: none;
}

.rf-diff-row.is-add .rf-diff-text
{
  background: var(--color-ok-light);
}

.rf-diff-row.is-add .rf-diff-sign
{
  color: var(--color-ok);
}

.rf-diff-row.is-del .rf-diff-text
{
  background: var(--color-danger-light);
  color: var(--color-danger-text);
}

.rf-diff-row.is-del .rf-diff-sign
{
  color: var(--color-danger-text);
}

.rf-diff-row.is-skip .rf-diff-text
{
  color: var(--text-muted);
  background: var(--bg-surface-subtle);
  font-family: var(--font-ui);
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   10. AI ACCESS DIALOG
   -------------------------------------------------------------------------- */
.rf-ai-access
{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The dialog content scrolls instead of growing beyond the window
   (!important: jQuery UI writes max-height:none as an inline style) */
.rf-dialog-ai .ui-dialog-content
{
  max-height: calc(100vh - 110px) !important;
  overflow-y: auto;
}

.rf-ai-guest-actions
{
  margin-top: 8px;
}

.rf-ai-result textarea
{
  resize: vertical;
  font-family: var(--font-ui);
  line-height: 1.45;
}

.rf-ai-result textarea.mono
{
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-tertiary-text);
}

.rf-ai-result-head
{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* List of accesses (cards) */
.rf-ai-list-head
{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.rf-ai-list-head h4
{
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.rf-ai-cards
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 10px;
}

.rf-ai-card
{
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.rf-ai-card.is-editing
{
  border-color: var(--color-secondary);
  background: var(--color-secondary-light);
}

.rf-ai-card.is-expired,
.rf-ai-card.is-revoked
{
  opacity: 0.6;
}

.rf-ai-card-head
{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.rf-ai-card-label
{
  font-size: 13px;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.rf-ai-card-actions
{
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.rf-ai-card-meta
{
  font-size: 11px;
}

.rf-ai-chips
{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rf-ai-chip
{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-app);
  font-size: 11px;
  color: var(--text-main);
  max-width: 100%;
}

.rf-ai-chip > i
{
  color: var(--text-muted);
}

.rf-ai-chip.is-created > i:first-child
{
  color: var(--color-secondary-text);
}

.rf-ai-chip.is-shared
{
  border-color: var(--color-tertiary);
}

.rf-ai-chip.is-shared > .fa-share-nodes
{
  color: var(--color-tertiary-text);
}

.rf-ai-chip.is-all,
.rf-ai-chip.is-create
{
  border-color: var(--color-secondary-border);
  color: var(--color-secondary-text);
}

.rf-ai-chip.is-create.is-full
{
  border-color: var(--color-warn);
  color: var(--color-tertiary-text);
}

.rf-ai-chip.is-readonly
{
  color: var(--text-muted);
}

/* Create / edit form */
.rf-ai-form-head
{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.rf-ai-form-head .muted
{
  font-size: 11.5px;
}

.rf-ai-form-grid
{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.rf-ai-form-col
{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.rf-ai-form-col .rf-field
{
  gap: 6px;
}

.rf-ai-expiry,
.rf-ai-maxnew
{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
}

.rf-ai-expiry .rf-input.rf-ai-days,
.rf-ai-maxnew .rf-input
{
  width: 76px;
}

.rf-ai-maxnew
{
  margin-left: 24px;
}

.rf-ai-expiry-date
{
  font-size: 11.5px;
}

.rf-ai-botlist
{
  max-height: 230px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-app);
  padding: 4px;
  display: flex;
  flex-direction: column;
}

.rf-ai-botlist.is-disabled
{
  opacity: 0.45;
}

.rf-ai-bot
{
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}

.rf-ai-bot:hover
{
  background: var(--bg-hover-row);
}

.rf-ai-bot[hidden]
{
  display: none;
}

.rf-ai-bot-name
{
  flex: 1;
  min-width: 0;
}

.rf-ai-bot-origin,
.rf-ai-bot-shared
{
  font-size: 10.5px;
  white-space: nowrap;
}

.rf-ai-bot-origin
{
  color: var(--color-secondary-text);
}

.rf-ai-bot-shared
{
  color: var(--color-tertiary-text);
}

.rf-ai-form-summary
{
  font-size: 12px;
}

.rf-ai-form-summary > i
{
  color: var(--color-secondary-text);
  margin-right: 4px;
}

.rf-ai-form-actions
{
  justify-content: flex-end;
}

/* Downloads */
.rf-ai-downloads
{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

.rf-ai-downloads-text
{
  flex: 1;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}

@media (max-width: 760px)
{
  .rf-history
  {
    grid-template-columns: 1fr;
    height: auto;
  }

  .rf-history-list
  {
    max-height: 200px;
  }

  .rf-ai-form-grid
  {
    grid-template-columns: 1fr;
  }

  .rf-ai-cards
  {
    grid-template-columns: 1fr;
  }
}