/* AI document tools: toolbar + modal + redaction preview overlay.
 * The toolbar element lives inside the fixed FileViewerDms header: it must
 * stay compact (single dropdown, no wrapping labels). The modal carries all
 * configuration and review UI and scrolls on small screens, including 320px
 * phones, in both LTR and RTL. Root owns index.html; add:
 *   <link rel="stylesheet" href="/app/css/ai-document-tools.css">
 */
.ai-document-tools-toolbar {
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
}

.ai-document-tools-toolbar .ai-tools-menu-btn {
  min-width: 34px;
}

/* Modal: scrollable body, full-width on small screens. */
.ai-tools-modal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
  color: var(--sx-ink, #19312c);
  background: var(--sx-surface, #fff);
}

.ai-tools-modal .modal-header,
.ai-tools-modal .modal-footer,
.ai-archive-batch-modal .modal-header,
.ai-archive-batch-modal .modal-footer {
  border-color: var(--sx-border, #dce5df);
  background: var(--sx-surface-muted, #f8faf8);
}

@media (max-width: 767px) {
  .ai-tools-window .modal-dialog {
    width: auto;
    margin: 10px;
  }
  .ai-tools-modal .modal-body {
    max-height: 78vh;
  }
}

/* Redaction preview stage: image with normalized overlay rectangles.
 * Physical left/top percentages match the served PNG pixel space, so no
 * RTL flipping applies here; surrounding text stays logical. */
.ai-tools-preview-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border: 1px solid var(--sx-border, #dce5df);
  background: var(--sx-ink, #19312c);
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}

.ai-tools-preview-img {
  display: block;
  max-width: 100%;
  height: auto;
}

.ai-tools-mark {
  position: absolute;
  border: 2px solid var(--sx-warning, #98651d);
  background: rgba(240, 173, 78, 0.18);
  pointer-events: none;
}

.ai-tools-mark.is-accepted {
  border-color: var(--sx-danger, #b13c45);
  background: rgba(217, 83, 79, 0.22);
}

.ai-tools-mark.is-dismissed {
  border-color: var(--sx-muted, #53675f);
  background: rgba(119, 119, 119, 0.12);
}

.ai-tools-mark.is-drawing {
  border-color: var(--sx-info, #2f6876);
  background: rgba(91, 192, 222, 0.25);
}

/* Deterministic comparison diff keeps model text escaped (ng-bind). */
.ai-document-tools-diff {
  word-wrap: break-word;
}

.ai-document-type-settings > header h2 {
  overflow-wrap: anywhere;
}

.ai-document-type-settings .ai-extraction-settings table,
.ai-document-type-settings .ai-glossary-settings table {
  table-layout: fixed;
  width: 100%;
}

.ai-document-type-settings .ai-extraction-settings td,
.ai-document-type-settings .ai-glossary-settings td,
.ai-document-type-settings .ai-extraction-settings td .btn,
.ai-document-type-settings .ai-glossary-settings td .btn {
  white-space: normal;
  overflow-wrap: anywhere;
}

.ai-configuration-versions td:first-child {
  width: 60%;
}

@media (max-width: 767px) {
  .ai-document-type-settings .ai-configuration-sample-results,
  .ai-document-type-settings .ai-configuration-sample-results tbody,
  .ai-document-type-settings .ai-configuration-sample-results tr,
  .ai-document-type-settings .ai-configuration-sample-results td {
    display: block;
    width: 100%;
  }
  .ai-document-type-settings .ai-configuration-sample-results thead {
    display: none;
  }
  .ai-document-type-settings .ai-configuration-sample-results td::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
  }
  .ai-document-type-settings .ai-configuration-versions tbody tr {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--sx-border, #dce5df);
  }
  .ai-document-type-settings .ai-configuration-versions tbody td {
    display: block;
    width: 50%;
    border: 0;
  }
  .ai-document-type-settings .ai-configuration-versions tbody td:first-child {
    width: 100%;
  }
}

.ai-archive-batch-modal .modal-dialog {
  width: calc(100% - 32px);
  max-width: 1320px;
  margin: 16px auto;
}

.ai-archive-review table {
  min-width: 1120px;
}

.ai-archive-review td {
  vertical-align: top !important;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ai-archive-review td .form-control {
  min-width: 110px;
}

.ai-archive-review td:nth-child(3) .form-control {
  min-width: 0;
  width: 68px;
  display: inline-block;
}

@media (max-width: 999px) {
  .ai-archive-review,
  .ai-archive-review table,
  .ai-archive-review tbody,
  .ai-archive-review tr,
  .ai-archive-review td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .ai-archive-review {
    border: 0;
    overflow: visible;
  }
  .ai-archive-review thead {
    display: none;
  }
  .ai-archive-review tbody tr {
    border: 1px solid var(--sx-border, #dce5df);
    border-radius: var(--sx-radius, 8px);
    background: var(--sx-surface, #fff);
    margin-bottom: 16px;
    padding: 8px;
  }
  .ai-archive-review tbody td {
    border: 0;
    padding: 6px;
  }
  .ai-archive-review td::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
  }
  .ai-archive-review td .form-control {
    max-width: 100%;
  }
  .ai-archive-review td .form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    white-space: normal;
  }
  .ai-archive-review td .form-inline label {
    flex-basis: 100%;
  }
  .ai-archive-review td .btn {
    max-width: 100%;
    white-space: normal;
  }
  .ai-archive-batch-modal .modal-footer .btn {
    margin: 4px 0;
    white-space: normal;
  }
}

.ai-document-tools-toolbar .ai-tools-menu-item {
  display: block; width: 100%; padding: 6px 20px; border: 0;
  background: transparent; text-align: start; color: inherit;
}
.ai-document-tools-toolbar .ai-tools-menu-item:hover,
.ai-document-tools-toolbar .ai-tools-menu-item:focus { background: #f3f5f5; }
.ai-document-tools-toolbar .ai-tools-menu-item:disabled { opacity: .5; cursor: not-allowed; }
.ai-document-tools-toolbar .ai-tools-menu-status { padding: 8px 14px; white-space: normal; min-width: 240px; }