/* AI answers, owner question queue, owner alerts, BYO keys.
   Flat: hairline borders and space for depth, the three-colour brand bar as the only accent
   stripe, no gradients, no glass. Uses the app's tokens only, so a theme change reaches it. */

/* The top padding puts the shared page header where Knowledge's is (24px under the screen top). */
.aiops-page { max-width: 1080px; margin: 0 auto; padding: 24px 28px 88px; color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; }

.aiops-card { position: relative; background: var(--bg-primary); border: 1px solid var(--border-default); border-radius: 16px; padding: 22px 24px; margin-bottom: 16px; }
.aiops-card.brand::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, #4f46e5 0 33.33%, #06b6d4 33.33% 66.66%, #7c3aed 66.66% 100%); }
.aiops-card h2, .aiops-card h3 { margin: 0 0 4px; font-size: 1rem; letter-spacing: -.01em; }
.aiops-card > p.help, .aiops-help { margin: 0 0 16px; color: var(--text-secondary); font-size: .8rem; line-height: 1.6; }
.aiops-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aiops-row.between { justify-content: space-between; }
.aiops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.aiops-muted { color: var(--text-muted); font-size: .75rem; }
.aiops-mono { font-family: var(--font-mono); font-size: .78rem; }

.aiops-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; color: var(--text-secondary); font-size: .76rem; font-weight: 600; }
.aiops-field input, .aiops-field select, .aiops-field textarea {
  min-height: 42px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-secondary);
  color: var(--text-primary); padding: 9px 12px; font: inherit; font-weight: 400; font-size: .88rem; }
.aiops-field textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.aiops-field input:focus, .aiops-field select:focus, .aiops-field textarea:focus { outline: 0; border-color: var(--accent-primary); background: var(--bg-primary); box-shadow: 0 0 0 3px var(--accent-light); }
.aiops-field small { color: var(--text-muted); font-weight: 400; }
.aiops-check { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-secondary); cursor: pointer; font-size: .8rem; }
.aiops-check input { margin-top: 3px; accent-color: var(--accent-primary); }
/* Host pages (AI Settings) restyle every checkbox inside them as a 30x22 toggle track via ::deep,
   which drew these as blank pills whatever their state. Draw them explicitly so the state shows. */
.aiops-check input[type="checkbox"], .aiops-check input[type="radio"] {
  appearance: none !important; -webkit-appearance: none !important; position: static !important; opacity: 1 !important;
  width: 1.125rem !important; height: 1.125rem !important; min-width: 1.125rem; flex: none; margin: 2px 0 0 !important;
  border: 1.5px solid var(--border-strong) !important; border-radius: .375rem !important;
  background: var(--bg-surface) no-repeat center / .875rem !important; box-shadow: none !important; cursor: pointer;
}
.aiops-check input[type="radio"] { border-radius: 50% !important; }
.aiops-check input[type="checkbox"]:checked, .aiops-check input[type="radio"]:checked {
  background-color: var(--accent-primary) !important; border-color: var(--accent-primary) !important;
}
.aiops-check input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E") !important;
}
.aiops-check input[type="radio"]:checked { background-image: radial-gradient(circle, #ffffff 0 34%, transparent 36%) !important; background-size: 100% 100% !important; }
.aiops-check input::before, .aiops-check input::after { content: none !important; display: none !important; }
.aiops-check:has(input:checked) { border-color: var(--accent-primary); background: var(--accent-light); }
.aiops-check strong { display: block; font-size: .82rem; }
.aiops-check small { color: var(--text-secondary); line-height: 1.45; }

.aiops-btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border-radius: 10px;
  border: 1px solid var(--border-default); background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: .82rem; font-weight: 650; cursor: pointer; text-decoration: none; }
.aiops-btn:hover:not(:disabled) { border-color: var(--border-strong); background: var(--bg-secondary); }
.aiops-btn[aria-busy="true"] { cursor: progress; }
.aiops-btn:disabled { opacity: .55; cursor: not-allowed; }
.aiops-btn.primary { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--on-accent); }
.aiops-btn.primary:hover:not(:disabled) { background: var(--accent-solid-hover); border-color: var(--accent-solid-hover); }
.aiops-btn.danger { color: var(--accent-red-text); border-color: color-mix(in srgb, var(--accent-red) 35%, transparent); }
.aiops-btn.danger:hover:not(:disabled) { background: var(--accent-red-bg); }
.aiops-btn.line { background: #06C755; border-color: #06C755; color: #111; }
.aiops-btn.line:hover { background: #05b34c; }
.aiops-btn .material-symbols-rounded { font-size: 18px; }

.aiops-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: .7rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.aiops-pill .material-symbols-rounded { font-size: 15px; }
.aiops-pill.ok { background: var(--accent-green-bg); color: var(--accent-green-text); border-color: color-mix(in srgb, var(--accent-green) 30%, transparent); }
.aiops-pill.warn { background: var(--accent-amber-bg); color: var(--accent-amber-text); border-color: color-mix(in srgb, var(--accent-amber) 35%, transparent); }
.aiops-pill.bad { background: var(--accent-red-bg); color: var(--accent-red-text); border-color: color-mix(in srgb, var(--accent-red) 30%, transparent); }
.aiops-pill.info { background: var(--accent-light); color: var(--link); border-color: color-mix(in srgb, var(--accent-primary) 25%, transparent); }
.aiops-pill.neutral { background: var(--bg-secondary); color: var(--text-secondary); border-color: var(--border-default); }

.aiops-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; font-size: .8rem; line-height: 1.55; margin-bottom: 14px; }
.aiops-notice .material-symbols-rounded { font-size: 20px; flex: 0 0 auto; }
.aiops-notice.info { background: var(--accent-light); color: var(--link); }
.aiops-notice.ok { background: var(--accent-green-bg); color: var(--accent-green-text); }
.aiops-notice.warn { background: var(--accent-amber-bg); color: var(--accent-amber-text); }
.aiops-notice.bad { background: var(--accent-red-bg); color: var(--accent-red-text); }
.aiops-notice > span:last-child { min-width: 0; }


/* Provider key cards */
.aiops-provider { border: 1px solid var(--border-default); border-radius: 14px; padding: 16px; background: var(--bg-primary); display: flex; flex-direction: column; gap: 12px; }
.aiops-provider.active { border-color: var(--accent-primary); box-shadow: 0 0 0 1px var(--accent-primary); }
.aiops-provider-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.aiops-provider-name { font-weight: 700; font-size: .92rem; }
/* The unsaved provider choice, with its own Save, under the card's radio. */
.aiops-notice.aiops-choice-pending, .aiops-notice.aiops-choice-result { margin: 0; }
.aiops-notice.aiops-choice-pending { align-items: center; flex-wrap: wrap; }
.aiops-choice-pending > span:nth-child(2) { flex: 1 1 calc(100% - 40px); }
.aiops-choice-pending .aiops-btn { width: auto; flex: 0 0 auto; margin-left: auto; min-width: 6rem; }
@media (pointer: coarse) { .aiops-choice-pending .aiops-btn { min-height: 44px; } }
.aiops-key-mask { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .04em; color: var(--text-secondary); }
.aiops-tier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.aiops-tier button { padding: 8px 6px; border-radius: 9px; border: 1px solid var(--border-default); background: var(--bg-secondary); font: inherit; font-size: .74rem; font-weight: 650; cursor: pointer; color: var(--text-primary); text-align: center; line-height: 1.3; }
.aiops-tier button small { display: block; font-weight: 400; color: var(--text-muted); font-family: var(--font-mono); font-size: .64rem; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiops-tier button.unavailable { opacity: .55; border-style: dashed; }
.aiops-tier button.unavailable small { color: var(--accent-red-text); font-family: inherit; }
.aiops-tier button.active { border-color: var(--accent-primary); background: var(--accent-light); color: var(--accent-hover); }

/* Question queue */
.aiops-q { border: 1px solid var(--border-default); border-radius: 14px; background: var(--bg-primary); padding: 18px 20px; margin-bottom: 12px; min-width: 0; }
/* The question an owner alert links to (?q=): marked, and clear of the top edge when scrolled to. */
/* 68px: below the floating notification bell in the top-right corner on phones. */
.aiops-q { scroll-margin-top: calc(68px + var(--cm-safe-top, 0px)); }
.aiops-q--target { border-color: var(--accent-solid); box-shadow: 0 0 0 1px var(--accent-solid); }
.aiops-q:focus { outline: none; }
.aiops-q:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.aiops-q-title { font-size: .98rem; font-weight: 700; line-height: 1.45; margin: 6px 0 4px; }
.aiops-q-asks { margin: 10px 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.aiops-q-asks li { font-size: .8rem; color: var(--text-secondary); padding: 8px 10px; border-radius: 8px; background: var(--bg-secondary); display: flex; justify-content: space-between; gap: 12px; }
.aiops-q-asks li > span:first-child { color: var(--text-primary); overflow-wrap: anywhere; min-width: 0; }
/* Who, where and when, and the actions: each piece stays whole and they wrap between each other.
   As one run of text, a long name on a phone pushed a break inside the date ("30 / ก.ย. 02:35"). */
.aiops-q-asks .aiops-ask-meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: .3em; row-gap: 2px; flex: none; }
.aiops-ask-meta > * { white-space: nowrap; }
.aiops-ask-meta > .aiops-ask-who { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
/* Why the AI did not answer. A provider's own words can be one long token (a URL, JSON). */
.aiops-q-why { margin: 0; }
.aiops-q-why-detail { overflow-wrap: anywhere; }
.aiops-count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--text-primary); color: var(--bg-primary); font-size: .74rem; font-weight: 700; }
/* A card's result, in the card's place (answered, dismissed with Undo, moved back to Waiting). */
.aiops-q--done { display: flex; gap: 12px; align-items: flex-start; border-style: dashed; }
.aiops-q-done-icon { font-size: 24px; flex: none; color: var(--accent-green-text); }
.aiops-q--done.bad .aiops-q-done-icon { color: var(--accent-amber-text); }
.aiops-q--dismissed .aiops-q-done-icon { color: var(--text-secondary); }
.aiops-q-done-body { min-width: 0; flex: 1 1 auto; }
.aiops-q-done-text { margin: 0; font-size: .9rem; font-weight: 600; color: var(--text-primary); line-height: 1.5; }
.aiops-q-done-q { margin: 2px 0 0; overflow-wrap: anywhere; }
.aiops-q-done-actions { margin-top: 10px; }
.aiops-q-done-actions:empty { display: none; }

/* Lists */
.aiops-list { list-style: none; margin: 0; padding: 0; }
.aiops-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border-subtle); font-size: .82rem; }
.aiops-list li > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.aiops-list-side { text-align: right; flex: none; }
.aiops-list-time { margin-top: 4px; white-space: nowrap; }
.aiops-list li:first-child { border-top: 0; }
.aiops-list .title { font-weight: 650; }
.aiops-list .body { color: var(--text-secondary); white-space: pre-line; margin-top: 2px; font-size: .78rem; line-height: 1.5; }
/* Owner alerts log: the chat or question an alert is about (2026-09-29). */
.aiops-list .aiops-alert-open { margin-top: 8px; }

.aiops-empty { text-align: center; padding: 40px 16px; color: var(--text-secondary); font-size: .88rem; }
.aiops-empty .material-symbols-rounded { font-size: 40px; color: var(--text-muted); display: block; margin-bottom: 8px; }
.aiops-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-default); background: var(--bg-secondary); }

@media (max-width: 700px) {
  .aiops-page { padding: 22px 16px 80px; }
  .aiops-card { padding: 18px 16px; }
  .aiops-tier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aiops-q { padding: 16px; }
  .aiops-q-asks li { flex-direction: column; gap: 2px; }
  /* Rows stack into cards: the status pill and time sit under the text instead of squeezing it. */
  .aiops-list li { flex-direction: column; gap: 6px; }
  .aiops-list-side { text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .aiops-list-time { margin-top: 0; }
  .aiops-btn { width: 100%; }
  .aiops-row .aiops-btn { width: auto; flex: 1 1 auto; }
  .aiops-code { font-size: 1.3rem; letter-spacing: .08em; padding: 10px 14px; max-width: 100%; overflow-wrap: anywhere; }
}

/* Loading placeholders and the empty state's actions (Knowledge, AI questions, Owner alerts). */
.aiops-skeleton-line { height: .8rem; margin-top: .6rem; }
.aiops-skeleton-line.title { height: 1.05rem; width: 55%; margin-top: 0; }
.aiops-skeleton-line.short { width: 35%; }
.aiops-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.aiops-empty-actions .aiops-btn { width: auto; }
.aiops-error { color: var(--accent-red-text); }
.aiops-btn.aiops-show-all { width: auto; min-height: 32px; padding: 4px 10px; margin-bottom: 10px; }

/* The draft line under an answer (AI Questions): saving, saved, not saved (Retry), changed on
   another device (both choices), closed elsewhere, discarded (Undo). Wraps on a 360px phone. */
.aiops-draft { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -2px 0 12px; font-size: .78rem; line-height: 1.45; color: var(--text-secondary); }
.aiops-draft-text { display: inline-flex; align-items: flex-start; gap: 6px; min-width: 0; flex: 1 1 180px; }
.aiops-draft-text:empty { flex-basis: 0; }
.aiops-draft-text > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.aiops-draft-text .material-symbols-rounded { font-size: 18px; flex: 0 0 auto; }
.aiops-draft-text .cm-spinner { flex: 0 0 auto; margin-top: 2px; }
.aiops-draft--saved .aiops-draft-text { color: var(--accent-green-text); }
.aiops-draft--failed, .aiops-draft--conflict, .aiops-draft--closed { padding: 8px 10px; border-radius: 10px; }
.aiops-draft--failed { background: var(--accent-red-bg); }
.aiops-draft--failed .aiops-draft-text { color: var(--accent-red-text); }
.aiops-draft--conflict { background: var(--accent-amber-bg); }
.aiops-draft--conflict .aiops-draft-text { color: var(--accent-amber-text); }
.aiops-draft--closed { background: var(--accent-light); }
.aiops-draft--closed .aiops-draft-text { color: var(--link); }
.aiops-btn.aiops-draft-btn { width: auto; flex: 0 0 auto; min-height: 34px; padding: 5px 12px; font-size: .78rem; }
.aiops-btn.aiops-draft-btn .material-symbols-rounded { font-size: 18px; }
/* Changed on another device: the message takes the card's width and the two choices sit under it,
   one group. Equal halves when both labels fit, otherwise each on its own full-width row, Keep
   first. Never beside the message, where a wrapped message left them on a diagonal (inc20, 390px Thai). */
.aiops-draft--conflict { flex-direction: column; align-items: stretch; gap: 8px; }
.aiops-draft--conflict .aiops-draft-text { flex: none; }
.aiops-draft-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.aiops-draft-choices .aiops-btn.aiops-draft-btn { flex: 1 1 0; min-width: min(100%, max-content); min-height: 40px; padding: 8px 14px;
  font-size: .875rem; font-weight: 600; white-space: normal; text-align: center; overflow-wrap: anywhere; }
.aiops-btn.aiops-drafts-retry { margin: -4px 0 14px; }

/* Short landscape phones: less padding so the content is not all header. */
@media (max-height: 500px) {
  .aiops-page { padding-top: 16px; }
}

/* A finger needs 44px, and iOS zooms into fields under 16px. */
@media (pointer: coarse) {
  .aiops-btn, .aiops-tier button, .aiops-btn.aiops-show-all, .aiops-btn.aiops-draft-btn, .aiops-draft-choices .aiops-btn.aiops-draft-btn { min-height: var(--touch-min); }
  .aiops-check { min-height: var(--touch-min); }
  .aiops-field input, .aiops-field select, .aiops-field textarea { font-size: max(16px, 1em); min-height: var(--touch-min); }
  .aiops-q-asks a, .aiops-muted a { display: inline-flex; align-items: center; min-height: var(--touch-min); }
}

/* One-time LINE link code (Owner alerts) */
.aiops-code-box { margin-top: 4px; }
.aiops-code { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.6rem; font-weight: 700; letter-spacing: .12em; padding: 10px 18px; border-radius: 10px; border: 1px dashed var(--border-default); background: var(--bg-secondary); color: var(--text-primary); user-select: all; }