/* Architecture Spec Phase E: smallest usable UI, no animations, no
   large framework. Minimal styling only, deferring to GLPI's own chrome. */

.aiassistant-container {
  max-width: 720px;
  margin: 0 auto;
}

.aiassistant-disclaimer {
  font-size: 0.9em;
  color: #666;
  margin-bottom: 1em;
}

.aiassistant-messages {
  border: 1px solid #ddd;
  border-radius: 4px;
  min-height: 240px;
  max-height: 480px;
  overflow-y: auto;
  padding: 0.75em;
  margin-bottom: 0.5em;
  background: #fafafa;
}

.aiassistant-message {
  margin-bottom: 0.75em;
}

.aiassistant-message-label {
  font-weight: bold;
  margin-right: 0.5em;
}

.aiassistant-ai-badge {
  display: inline-block;
  font-size: 0.75em;
  color: #555;
  background: #eee;
  border-radius: 3px;
  padding: 0.1em 0.4em;
  margin-right: 0.5em;
}

.aiassistant-message-body {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* V0.2 Stage F: grounding badge + sources list, kept in the same minimal
   visual language as the existing AI-generated badge -- no redesign. */
.aiassistant-grounding-badge {
  display: inline-block;
  font-size: 0.75em;
  border-radius: 3px;
  padding: 0.1em 0.4em;
  margin-right: 0.5em;
}

.aiassistant-grounding-grounded {
  color: #1a6b3c;
  background: #e6f4ea;
}

.aiassistant-grounding-partially-grounded {
  color: #8a6100;
  background: #fff4e0;
}

/* V0.3: ticket-context grounding badge and the small context indicator --
   same minimal visual language, no new colors invented beyond the existing
   badge palette. */
.aiassistant-grounding-ticket-context-grounded {
  color: #1a4a8a;
  background: #e6eefa;
}

.aiassistant-context-indicator {
  font-size: 0.85em;
  color: #555;
  margin-bottom: 0.5em;
  padding: 0.3em 0.5em;
  border-radius: 3px;
  background: #eef2f7;
}

.aiassistant-sources {
  margin-top: 0.4em;
  font-size: 0.85em;
  color: #555;
}

.aiassistant-sources-label {
  font-weight: bold;
}

.aiassistant-sources-list {
  margin: 0.2em 0 0 1.2em;
  padding: 0;
}

/* V0.4 Feature 1: same minimal visual language as .aiassistant-sources --
   a third, distinct provenance list, never merged with KB sources. */
.aiassistant-similar-tickets {
  margin-top: 0.4em;
  font-size: 0.85em;
  color: #555;
}

.aiassistant-similar-tickets-label {
  font-weight: bold;
}

.aiassistant-similar-tickets-list {
  margin: 0.2em 0 0 1.2em;
  padding: 0;
}

.aiassistant-loading {
  font-style: italic;
  color: #666;
  margin-bottom: 0.5em;
}

.aiassistant-error {
  color: #a00;
  background: #fdecea;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  padding: 0.5em;
  margin-bottom: 0.5em;
}

.aiassistant-form {
  display: flex;
  gap: 0.5em;
}

.aiassistant-input {
  flex: 1;
  min-height: 3em;
  resize: vertical;
  padding: 0.5em;
}

.aiassistant-send {
  align-self: flex-end;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* V0.6 Phase 4 -- the Proposal Card. Deliberately visually distinct from
   .aiassistant-message (a thicker, colored left border and its own
   background) so a draft-awaiting-approval can never be mistaken for an
   ordinary AI answer or an already-posted followup (Phase 4 Sections 5/6).
   Kept in the same minimal visual language as the rest of this file --
   no framework, no animation beyond a simple opacity/color transition. */
.aiassistant-proposal-card {
  border: 1px solid #d8c27a;
  border-left: 4px solid #b8860b;
  border-radius: 4px;
  background: #fffaf0;
  padding: 0.75em;
  margin: 0.5em 0 1em 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

.aiassistant-proposal-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.4em;
}

.aiassistant-proposal-title {
  font-weight: bold;
}

.aiassistant-proposal-status {
  display: inline-block;
  font-size: 0.8em;
  font-weight: bold;
  border-radius: 3px;
  padding: 0.15em 0.5em;
  /* Status is never conveyed by color alone (Phase 4 Section 23) -- the
     text label itself is always the real, human-readable state name; the
     colors below are a supplementary cue only. */
}

.aiassistant-proposal-status-awaiting {
  color: #8a6100;
  background: #fff4e0;
}

.aiassistant-proposal-status-approved,
.aiassistant-proposal-status-executing {
  color: #1a4a8a;
  background: #e6eefa;
}

.aiassistant-proposal-status-executed {
  color: #1a6b3c;
  background: #e6f4ea;
}

.aiassistant-proposal-status-terminal {
  color: #555;
  background: #ececec;
}

.aiassistant-proposal-target {
  font-size: 0.9em;
  color: #444;
  margin-bottom: 0.3em;
}

.aiassistant-proposal-visibility {
  display: inline-block;
  font-size: 0.75em;
  color: #1a4a8a;
  background: #e6eefa;
  border-radius: 3px;
  padding: 0.1em 0.4em;
  margin-bottom: 0.5em;
}

.aiassistant-proposal-content-label {
  font-size: 0.85em;
  color: #666;
  margin-bottom: 0.2em;
}

/* V0.8 Phase 8 -- the deterministic content-integrity guard's own
   REVIEW_REQUIRED warning banner (Section 23). Amber/warning palette,
   deliberately distinct from both the neutral visibility badge above and
   the red error/blocked styling below (Approve remains allowed here --
   this is emphasis, not a block). */
.aiassistant-proposal-content-risk {
  font-size: 0.85em;
  color: #7a5b00;
  background: #fff6e0;
  border: 1px solid #f0d98c;
  border-radius: 4px;
  padding: 0.5em;
  margin-bottom: 0.5em;
}

.aiassistant-proposal-content {
  white-space: pre-wrap;
  word-wrap: break-word;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 3px;
  padding: 0.5em;
  margin-bottom: 0.5em;
}

.aiassistant-proposal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
}

.aiassistant-proposal-approve,
.aiassistant-proposal-reject {
  padding: 0.35em 0.9em;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.9em;
}

.aiassistant-proposal-approve {
  background: #1a6b3c;
  color: #fff;
}

.aiassistant-proposal-approve:disabled,
.aiassistant-proposal-reject:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.aiassistant-proposal-reject {
  background: #fff;
  color: #a00;
  border-color: #a00;
}

.aiassistant-proposal-busy {
  font-style: italic;
  color: #666;
  font-size: 0.9em;
}

.aiassistant-proposal-result {
  margin-top: 0.5em;
  font-size: 0.9em;
}

.aiassistant-proposal-result-error {
  color: #a00;
  background: #fdecea;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  padding: 0.5em;
}

.aiassistant-proposal-followup-ref {
  color: #444;
  margin-top: 0.2em;
}

.aiassistant-proposal-followup-link {
  display: inline-block;
  margin-top: 0.3em;
}

/* V1.3 -- mirrors .clientai-language-row in client-chat.css exactly (same
   layout, same sizing) -- only rendered at all when
   technician_multilingual_enabled is on. */
.aiassistant-language-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.75em;
  font-size: 0.85em;
}

.aiassistant-language-row label {
  font-weight: 600;
  color: #444;
}

.aiassistant-language {
  padding: 0.3em 0.5em;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
  font: inherit;
  background: #fff;
  color: #1d2939;
}

/* Phase 4 Section 27 -- basic narrow-viewport robustness: stack the
   action buttons full-width rather than letting them overflow or get
   clipped on a small screen. No further mobile-specific redesign. */
@media (max-width: 480px) {
  .aiassistant-proposal-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .aiassistant-proposal-approve,
  .aiassistant-proposal-reject {
    width: 100%;
  }
}

/* V0.7 -- Quick Actions / Suggested Questions. Rendered as the first
   entry inside .aiassistant-messages (same minimal visual language as
   the rest of this file -- no framework, no animation). Chip/button
   layout wraps naturally at any width; the 480px rule below only adds
   full-width stacking for genuinely narrow viewports, matching the
   Proposal Card's own established breakpoint rather than inventing a
   new one. */
.aiassistant-quick-actions {
  margin-bottom: 0.75em;
}

.aiassistant-quick-actions-prompt {
  font-size: 0.9em;
  color: #444;
  margin-bottom: 0.5em;
}

.aiassistant-quick-actions-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.aiassistant-quick-action {
  padding: 0.4em 0.8em;
  border-radius: 999px;
  border: 1px solid #1a4a8a;
  background: #fff;
  color: #1a4a8a;
  font-size: 0.85em;
  cursor: pointer;
}

.aiassistant-quick-action:hover:not(:disabled) {
  background: #e6eefa;
}

.aiassistant-quick-action:focus-visible {
  outline: 2px solid #1a4a8a;
  outline-offset: 2px;
}

.aiassistant-quick-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .aiassistant-quick-actions-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .aiassistant-quick-action {
    width: 100%;
    text-align: left;
  }
}

/* V0.9 -- the ticket-embedded panel (hook.php, via AiAssistantWidget). A
   native <details> element: no JS toggle logic of this plugin's own is
   needed to open/close it, and native keyboard/focus behavior (Enter/Space
   on the <summary>, Tab order) comes for free (Section 45). Deliberately
   two different layouts by viewport width rather than one compromise
   layout: a real right-side drawer only makes sense once there is enough
   horizontal room for both the ticket and the panel side by side; below
   that, Section 19's own "full-width collapsible section" instruction
   applies instead. 782px matches GLPI core's own common responsive
   breakpoint (already used throughout its own CSS), not an invented one. */
.aiassistant-embedded {
  box-sizing: border-box;
}

.aiassistant-embedded-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.aiassistant-embedded-summary::-webkit-details-marker {
  display: none;
}

.aiassistant-embedded-summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.4em;
  transition: transform 0.15s ease;
}

.aiassistant-embedded[open] > .aiassistant-embedded-summary::before {
  transform: rotate(90deg);
}

.aiassistant-embedded-summary:focus-visible {
  outline: 2px solid #1a4a8a;
  outline-offset: 2px;
}

.aiassistant-embedded .aiassistant-container {
  max-width: 100%;
  margin: 0;
}

/* Mobile/narrow: Section 19 -- a plain, full-width collapsible section.
   No fixed positioning at all, so it can never cause horizontal overflow
   or cover ticket controls the technician still needs. */
@media (max-width: 781.98px) {
  .aiassistant-embedded {
    display: block;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 1em 0;
  }

  .aiassistant-embedded-summary {
    padding: 0.6em 1em;
    font-weight: bold;
    background: #eef2f7;
    border-radius: 4px;
  }

  .aiassistant-embedded[open] > .aiassistant-embedded-summary {
    border-radius: 4px 4px 0 0;
  }

  .aiassistant-embedded-body {
    padding: 0.75em;
  }

  .aiassistant-embedded .aiassistant-messages {
    max-height: 320px;
  }
}

/* Desktop/tablet-wide: Section 18 -- a right-side drawer that never hides
   the ticket. `position: fixed` keeps it anchored to the viewport
   (independent scroll from the ticket form itself) rather than pushing or
   overlapping the ticket's own layout; collapsed, it is only ever the width
   of its own small summary tab. `max-width: 90vw` is defense-in-depth
   against horizontal overflow on a narrow "desktop-width" window (Section
   43's own 1280/1440/1920 sizes are all comfortably wider than the fixed
   380px width this normally renders at).

   Real Production bug (reported live, reproduced and diagnosed in Local
   UAT): a long Draft Reply proposal card made the drawer's content extend
   past the fixed-position box with no way to scroll down to the rest of
   it. Root cause, confirmed by direct measurement, not guessed: a native
   `<details>` element's non-summary content does not reliably shrink to
   fit an ancestor's `max-height` via flexbox `flex: 1 1 auto`/`flex: 1 1 0`
   (confirmed the same failure persists even with `display: grid` instead
   of flex, and even with a definite `height` instead of `max-height` on
   `.aiassistant-embedded` itself, and even with `position: static` instead
   of `fixed` -- ruling out flexbox-shrink math, grid, and positioning as
   the cause; it is specifically a `<details>`-content sizing quirk). What
   DOES reliably work, confirmed live: giving `.aiassistant-embedded-body`
   its own explicit `max-height`, computed directly rather than left to
   flex/grid distribution. The summary's own height is made an explicit,
   deterministic constant (matching its real, already-existing padding/
   font-weight rendering, measured live at ~37px) specifically so that
   constant is available for the body's own `calc()` below -- an
   auto-sized summary would leave nothing certain to subtract. */
@media (min-width: 782px) {
  .aiassistant-embedded {
    position: fixed;
    top: 100px;
    right: 0;
    z-index: 1000;
    width: 380px;
    max-width: 90vw;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 6px 0 0 6px;
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.15);
  }

  .aiassistant-embedded-summary {
    padding: 0.6em 1em;
    font-weight: bold;
    background: #1a4a8a;
    color: #fff;
    border-radius: 6px 0 0 6px;
    flex-shrink: 0;
    /* Fixed, deterministic height (see this block's own comment above) --
       box-sizing:border-box so the existing padding is included in it,
       never added on top. */
    height: 37px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

  .aiassistant-embedded-summary:focus-visible {
    outline-color: #fff;
    outline-offset: -3px;
  }

  .aiassistant-embedded-body {
    overflow-y: auto;
    padding: 0.75em;
    flex: 1 1 auto;
    min-height: 0;
    /* The actual fix: an explicit max-height, not left to flex
       distribution (see this block's own comment above for why flex/grid
       alone do not work here). box-sizing:border-box so the padding above
       is included within it, never pushing the real total past the
       drawer's own max-height. */
    max-height: calc(100vh - 120px - 37px);
    box-sizing: border-box;
  }

  .aiassistant-embedded .aiassistant-messages {
    max-height: none;
    flex: 1 1 auto;
  }
}

/* V1.7 Context-Assisted Draft Reply -- the inline panel opened by the
   "Draft reply" quick action. Same palette and 480px breakpoint as the
   quick actions above. */
.aiassistant-draft-panel {
  margin-top: 0.6em;
  padding: 0.6em;
  border: 1px solid #1a4a8a;
  border-radius: 6px;
  background: #f7f9fd;
}

.aiassistant-draft-panel[hidden] {
  display: none;
}

.aiassistant-draft-label {
  display: block;
  font-weight: 600;
  font-size: 0.9em;
  margin-bottom: 0.25em;
}

.aiassistant-draft-helper {
  font-size: 0.8em;
  color: #444;
  margin-bottom: 0.4em;
}

.aiassistant-draft-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 4.5em;
  resize: vertical;
  padding: 0.5em;
}

.aiassistant-draft-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
  font-size: 0.8em;
  margin-top: 0.25em;
}

.aiassistant-draft-counter {
  color: #666;
}

.aiassistant-draft-counter-over {
  color: #b00020;
  font-weight: 600;
}

.aiassistant-draft-error {
  color: #b00020;
}

.aiassistant-draft-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
  margin-top: 0.5em;
}

.aiassistant-draft-cancel,
.aiassistant-draft-submit {
  padding: 0.4em 0.9em;
  border-radius: 999px;
  border: 1px solid #1a4a8a;
  font-size: 0.85em;
  cursor: pointer;
}

.aiassistant-draft-cancel {
  background: #fff;
  color: #1a4a8a;
}

.aiassistant-draft-submit {
  background: #1a4a8a;
  color: #fff;
}

.aiassistant-draft-cancel:focus-visible,
.aiassistant-draft-submit:focus-visible {
  outline: 2px solid #1a4a8a;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .aiassistant-draft-actions {
    flex-direction: column;
    align-items: stretch;
  }
}