/**
 * AI Chat for Amazon Bedrock - admin styles.
 * Uses WordPress admin design tokens so the UI feels native.
 */

.aicfab-dashboard .aicfab-lede {
	max-width: 70ch;
	margin: .4em 0 1.6em;
	font-size: 14px;
	color: #50575e;
}

/* Status cards */
.aicfab-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.aicfab-card {
	padding: 16px 18px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.aicfab-card h2 {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #646970;
}

.aicfab-card-detail {
	margin: 6px 0 0;
	font-size: 13px;
	color: #50575e;
	overflow-wrap: anywhere;
}

.aicfab-card-usage {
	grid-column: span 2;
}

/* Status pills */
.aicfab-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 999px;
	background: #f0f0f1;
	color: #3c434a;
}

.aicfab-pill::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.aicfab-pill.is-good {
	background: #edfaef;
	color: #00713c;
}

.aicfab-pill.is-warn {
	background: #fcf4e4;
	color: #8a5700;
}

.aicfab-pill.is-bad {
	background: #fcf0f1;
	color: #b32d2e;
}

.aicfab-pill.is-neutral {
	background: #f0f0f1;
	color: #50575e;
}

/* Metrics */
.aicfab-metrics {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin: 4px 0 2px;
}

.aicfab-metrics > div {
	display: flex;
	flex-direction: column;
}

.aicfab-metric {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	color: #1d2327;
	font-variant-numeric: tabular-nums;
}

.aicfab-metric-label {
	font-size: 12px;
	color: #646970;
}

/* Two column layout */
.aicfab-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 16px;
	align-items: start;
}

.aicfab-panel {
	padding: 4px 20px 18px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
}

.aicfab-panel h2 {
	font-size: 14px;
	margin: 18px 0 10px;
}

.aicfab-panel code {
	padding: 3px 7px;
	background: #f0f0f1;
	border-radius: 4px;
}

.aicfab-list {
	margin: 0 0 12px;
	padding-left: 18px;
	font-size: 13px;
	color: #50575e;
}

.aicfab-list li {
	margin-bottom: 6px;
}

/* Quick start checklist */
.aicfab-steps {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.aicfab-steps li {
	display: flex;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid #f0f0f1;
}

.aicfab-steps li:last-child {
	border-bottom: 0;
}

.aicfab-step-index {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: 12px;
	font-weight: 600;
	color: #50575e;
	background: #f0f0f1;
	border-radius: 50%;
}

.aicfab-steps li.is-done .aicfab-step-index {
	color: #fff;
	background: #00713c;
}

.aicfab-step-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.aicfab-step-body a {
	font-weight: 600;
	text-decoration: none;
}

.aicfab-step-help {
	font-size: 12px;
	color: #646970;
}

/* Diagnostics table */
#aicfab-diagnostics-table td {
	vertical-align: middle;
}

.aicfab-status {
	white-space: nowrap;
}

#aicfab-refresh-models-status,
#aicfab-diagnostics-status {
	margin-left: 8px;
	font-size: 13px;
	color: #646970;
}

/* Settings screen polish */
.ai-chat-bedrock-settings-info {
	max-width: 780px;
	margin-top: 26px;
	padding: 4px 20px 16px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-left: 4px solid #2271b1;
	border-radius: 6px;
}

.ai-chat-bedrock-settings-info h2 {
	font-size: 14px;
}

.ai-chat-bedrock-settings-info ul {
	margin-left: 18px;
	font-size: 13px;
	color: #50575e;
	list-style: disc;
}

/* Tool log */
.aicfab-tool-log-empty {
	padding: 14px;
	font-style: italic;
	color: #646970;
}

@media screen and (max-width: 782px) {
	.aicfab-card-usage {
		grid-column: span 1;
	}

	.aicfab-metric {
		font-size: 20px;
	}
}

/* MCP settings sections */
.aicfab-mcp-nav {
    margin-bottom: 0;
}

.aicfab-mcp-section {
    padding-top: 4px;
}

.aicfab-mcp-section > h2:first-child {
    margin-top: 16px;
}

/* Conversation log filters and actions */
.aicfab-log-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 14px 0 10px;
}

.aicfab-log-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.aicfab-log-count {
    color: #50575e;
    margin: 0 0 8px;
}

/* Streaming content generator */
.aicfab-generator-stream {
    margin-top: 20px;
}

.aicfab-generator-status {
    color: #50575e;
    font-weight: 600;
}

.aicfab-generator-output {
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    max-height: 340px;
    overflow-y: auto;
    padding: 14px 16px;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 13px;
    line-height: 1.7;
    margin: 8px 0 12px;
}

.aicfab-generator-output:empty {
    display: none;
}

/* Usage trend */
.aicfab-usage-series {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.aicfab-usage-series li {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 12px;
}

.aicfab-usage-day {
    color: #50575e;
}

.aicfab-usage-bar {
    background: #f0f0f1;
    border-radius: 3px;
    display: block;
    height: 10px;
    overflow: hidden;
}

.aicfab-usage-bar > span {
    background: #2271b1;
    display: block;
    height: 100%;
}

.aicfab-usage-count {
    color: #50575e;
    white-space: nowrap;
}

.aicfab-usage-models code {
    font-size: 11px;
    overflow-wrap: anywhere;
}

/* What an empty field means, beside it. */
.aicfab-inherits {
    color: #50575e;
    font-size: 13px;
}

/* Adding an MCP server, below the list. */
.aicfab-add-server {
    margin-top: 12px;
}

.aicfab-add-server > summary {
    list-style: none;
}

.aicfab-add-server > summary::-webkit-details-marker {
    display: none;
}

/* Longer help under a field, folded below its first paragraph. */
.aicfab-help {
    max-width: 70ch;
    margin-top: 4px;
}

.aicfab-help > summary {
    cursor: pointer;
    color: #2271b1;
}

.aicfab-help[open] > summary {
    margin-bottom: 4px;
}

/* Setup steps, folded once all are done. */
.aicfab-steps-done {
    margin: 4px 0 12px;
}

.aicfab-steps-done > summary {
    cursor: pointer;
    color: #2271b1;
}

/* Fields of a feature, shown once it is on. */
.aicfab-depends {
    margin-top: 4px;
}

.aicfab-depends[hidden] {
    display: none;
}

/* Whether WeChat reaches a channel, above its fields. */
.aicfab-contact-status {
    margin-top: 0;
    max-width: 70ch;
}

.aicfab-contact-status .aicfab-pill {
    margin-right: 6px;
}

/* Help under a field reads as a paragraph, not a line across a wide screen. */
.wrap .form-table .description {
    max-width: 70ch;
}

.wrap .form-table select {
    max-width: 100%;
}

@media screen and (max-width: 782px) {
    /* Settings tabs scroll sideways on a phone instead of wrapping into rows. */
    .wrap .aicfab-settings-tabs.nav-tab-wrapper {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .wrap .aicfab-settings-tabs .nav-tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .aicfab-usage-series li {
        grid-template-columns: 52px 1fr;
    }

    .aicfab-usage-count {
        grid-column: 1 / -1;
    }
}

/* Managed prompt preview */
.aicfab-prompt-preview {
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    margin: 6px 0 10px;
    max-height: 220px;
    overflow-y: auto;
    padding: 12px 14px;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 12px;
    line-height: 1.6;
}

.aicfab-prompt-error {
    margin: 8px 0;
}

/* A policy is read line by line: scroll sideways rather than break a statement */
.aicfab-policy {
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}

/* Per-role request limits */
.aicfab-role-limits {
    border-collapse: collapse;
    margin: 0 0 8px;
}

.aicfab-role-limits th {
    font-weight: 400;
    padding: 3px 12px 3px 0;
    text-align: left;
    vertical-align: middle;
    width: 180px;
}

.aicfab-role-limits td {
    padding: 3px 0;
    vertical-align: middle;
}

.aicfab-role-limits input {
    width: 90px;
}

/* Setup progress and next steps on the dashboard */
.aicfab-progress {
    color: #50575e;
    font-weight: 600;
    margin: 0 0 10px;
}

.aicfab-progress.is-complete {
    color: #007017;
}

.aicfab-next-heading {
    font-size: 13px;
    margin: 16px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #50575e;
}

.aicfab-next {
    margin: 0;
    padding: 0;
    list-style: none;
}

.aicfab-next li {
    border-top: 1px solid #f0f0f1;
    padding: 8px 0;
}

.aicfab-next li:first-child {
    border-top: 0;
}

.aicfab-next a {
    display: block;
    font-weight: 600;
}

/* Why an MCP server is unavailable, shown next to its status */
.ai-chat-bedrock-server-status.status-unavailable {
    color: #8a2424;
    display: inline-block;
    max-width: 32em;
}

/*
 * Answer checks. Seven columns do not fit a narrow admin screen, and a clipped column is worse
 * than a scrollbar because nothing tells the reader a field exists.
 */
.aicfab-eval-scroll {
	overflow-x: auto;
	padding-bottom: 4px;
}

.aicfab-eval-cases {
	min-width: 62rem;
}

.aicfab-eval-cases textarea {
	width: 100%;
	min-width: 12rem;
}

.aicfab-eval-cases input[type="text"] {
	width: 100%;
	min-width: 9rem;
}

.aicfab-eval-cases input[type="number"] {
	width: 6rem;
}

.aicfab-eval-checks {
	margin: 0;
	list-style: none;
}

/* Never colour alone: each line already carries a tick or a cross. */
.aicfab-eval-ok {
	color: #0a6b3d;
}

.aicfab-eval-bad {
	color: #8a1f11;
	font-weight: 600;
}

/* Chat profiles */
.aicfab-profile-list {
	margin-bottom: 24px;
}

.aicfab-inline-form {
	display: inline;
}

/* A Delete link beside a small button sits on the button's line, not above it. */
.aicfab-inline-form .button-link-delete {
	margin-left: 6px;
	vertical-align: middle;
	line-height: 2.18181818;
}

.aicfab-profile-form,
.aicfab-generator-form {
	max-width: 820px;
}

.aicfab-profile-form .submit .button + .button {
	margin-left: 6px;
}

/* A card holding more than one report: separate them */
.aicfab-card > h2:not(:first-child) {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid #f0f0f1;
}

/* Positioned, so the screen-reader-text spans in its rows, which are absolutely positioned,
   are clipped with the table instead of widening the page on a phone. */
.aicfab-table-scroll {
	position: relative;
	overflow-x: auto;
}

.aicfab-gap-export {
	margin: 10px 0 0;
}

/* Content gaps period: label, select and Show on one line, wrapping on a phone */
.aicfab-gap-period {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
}

/* Import and export */
.aicfab-transfer {
	max-width: 820px;
}

.aicfab-transfer > p {
	max-width: 70ch;
	color: #50575e;
}

.aicfab-transfer .aicfab-panel {
	margin-top: 16px;
}

.aicfab-transfer .aicfab-panel h3 {
	margin: 16px 0 6px;
}

.aicfab-transfer .form-table th {
	width: 180px;
}

/* Business insights */
.aicfab-metrics-intro {
	max-width: 70ch;
	color: #50575e;
}

.aicfab-metrics-ask {
	max-width: 820px;
}

.aicfab-metrics-ask form {
	display: flex;
	gap: 8px;
	align-items: center;
}

.aicfab-metrics-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 4px 16px;
	margin: 16px 0;
}

.aicfab-metrics-form p {
	margin: 0;
}

.aicfab-metrics-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 2px;
}

.aicfab-metrics-form #aicfab-dates-note {
	flex-basis: 100%;
}

.aicfab-metric-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
	margin: 12px 0 20px;
}

.aicfab-metric-card {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	padding: 12px 16px;
}

.aicfab-metric-card .aicfab-metric-label {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: #50575e;
}

.aicfab-metric-card .aicfab-metric-value {
	margin: 0;
	font-size: 26px;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.aicfab-metric-card .aicfab-metric-change,
.aicfab-metric-card .aicfab-metric-note {
	margin: 6px 0 0;
	color: #50575e;
}

.aicfab-change-up,
.aicfab-change-down {
	color: #1d2327;
}

.aicfab-metric-chart {
	margin: 8px 0 12px;
	max-width: 960px;
}

.aicfab-metric-chart svg {
	display: block;
	width: 100%;
	height: 160px;
	background: #fff;
	border: 1px solid #dcdcde;
}

.aicfab-metric-chart .aicfab-bar {
	fill: #2271b1;
}

.aicfab-metric-chart .aicfab-bar-withheld {
	fill: #a7aaad;
}

.aicfab-metric-table {
	max-width: 960px;
	margin-bottom: 16px;
}

.aicfab-metric-table .num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.aicfab-metric-notes {
	list-style: disc;
	margin-left: 20px;
	max-width: 70ch;
	color: #50575e;
}

@media screen and (max-width: 600px) {
	.aicfab-metrics-ask form {
		flex-wrap: wrap;
	}
}