/* KiwiTxt SMS Portal, GHL-style three-column inbox.
   Namespaced (.ktx-*) so it stays self-contained in any theme.
   Structure mirrors GHL's Conversations tab (rail + list + thread + details);
   identity stays KiwiTxt (deep NZ-bush green accent). */

/* ---- Breakout wrapper ----
   Themes hand a page whatever their content column is, often ~650px. That is
   narrower than the rail plus the conversation list, so the thread pane used
   to render past the right edge with the composer clipped. This pulls the
   portal out to the full viewport width and caps it at a comfortable reading
   size, then centres it. */
.ktx-portal-wrap {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0 clamp(10px, 2vw, 28px);
	box-sizing: border-box;
	/* Lets the layout below respond to the space it actually has rather than
	   to the browser window, which is what made the old breakpoints miss. */
	container-type: inline-size;
	container-name: ktxportal;
}
.ktx-portal-wrap > .ktx-shell { max-width: 1560px; margin-inline: auto; }

.ktx-shell {
	--ktx-brand: #783cf0;
	--ktx-brand-strong: #6326d9;
	--ktx-brand-tint: #eae7f1;
	--ktx-bg: #ffffff;
	--ktx-canvas: #f7f6f8;
	--ktx-rail: #1f0d4d;
	--ktx-line: #e8e7ea;
	--ktx-line-soft: #f1f0f2;
	--ktx-ink: #1f1c24;
	--ktx-muted: #6c726b;
	--ktx-faint: #9aa09a;
	--ktx-recv: #f2f1f3;
	--ktx-radius: 12px;
	--ktx-radius-sm: 9px;

	box-sizing: border-box;
	display: grid;
	grid-template-columns: 96px 330px minmax(0, 1fr) auto;
	height: clamp(560px, 82vh, 900px);
	border: 1px solid var(--ktx-line);
	border-radius: 14px;
	overflow: hidden;
	background: var(--ktx-bg);
	box-shadow: 0 1px 2px rgba(29, 17, 53,.04), 0 12px 32px -12px rgba(29, 17, 53,.14);
	color: var(--ktx-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14.5px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	position: relative;
}
.ktx-shell *, .ktx-shell *::before, .ktx-shell *::after { box-sizing: border-box; }
.ktx-shell svg { width: 20px; height: 20px; display: block; }

/* ---- Icon rail ---- */
.ktx-rail {
	background: var(--ktx-rail);
	display: flex; flex-direction: column; align-items: center;
	padding: 18px 6px; gap: 4px;
}
.ktx-rail-mark {
	width: 34px; height: 34px; border-radius: 9px; margin-bottom: 14px;
	background: var(--ktx-brand); color: #fff; font-weight: 800;
	display: grid; place-items: center; font-size: 18px; text-transform: lowercase;
}
.ktx-rail-btn {
	width: 100%; border: none; cursor: pointer; background: transparent; color: #a69fb4;
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 11px 4px; border-radius: 11px; transition: background .15s, color .15s;
}
.ktx-rail-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.ktx-rail-btn.is-active { color: #fff; background: var(--ktx-brand); }
.ktx-rail-ico { display: grid; place-items: center; }
.ktx-rail-label { font-size: 10px; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; letter-spacing: -0.01em; }

/* ---- List column ---- */
.ktx-list { display: flex; flex-direction: column; border-right: 1px solid var(--ktx-line); min-height: 0; background: var(--ktx-bg); }
.ktx-list-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px; }
.ktx-list-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.ktx-icon-btn {
	width: 34px; height: 34px; flex: none; padding: 0; margin: 0; line-height: 1;
	border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm);
	background: var(--ktx-bg); color: var(--ktx-brand);
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	transition: background .15s, border-color .15s; box-sizing: border-box;
}
.ktx-icon-btn:hover { background: var(--ktx-brand-tint); border-color: var(--ktx-brand-tint); }
.ktx-icon-btn.ghost { border-color: transparent; color: var(--ktx-muted); }
.ktx-icon-btn.ghost:hover { background: var(--ktx-canvas); color: var(--ktx-ink); }

.ktx-tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--ktx-line); }
.ktx-tabs button {
	border: none; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
	color: var(--ktx-muted); padding: 9px 10px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ktx-tabs button:hover { color: var(--ktx-ink); }
.ktx-tabs button.is-active { color: var(--ktx-brand-strong); border-bottom-color: var(--ktx-brand); }
.ktx-shell[data-mode="contacts"] .ktx-tabs { display: none; }

.ktx-search-row { display: flex; align-items: center; gap: 8px; margin: 10px 12px; padding: 8px 12px; border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm); background: var(--ktx-canvas); }
.ktx-search-row:focus-within { outline: 2px solid var(--ktx-brand); outline-offset: 1px; border-color: transparent; }
.ktx-search-ico { display: flex; color: var(--ktx-faint); pointer-events: none; }
.ktx-search-ico svg { width: 16px; height: 16px; display: block; }
.ktx-search { flex: 1; min-width: 0; width: 100%; border: none; background: none; padding: 0; font: inherit; font-size: 13.5px; color: var(--ktx-ink); }
.ktx-search:focus { outline: none; }
.ktx-search::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ---- Paused banner ---- */
.ktx-banner { background: #fbeaea; color: #8a2a2a; border: 1px solid #e6b9b9; border-radius: var(--ktx-radius-sm); padding: 12px 16px; margin: 0 0 12px; font-size: 14px; }
.ktx-banner[hidden] { display: none; }
.ktx-shell[data-paused="1"] .ktx-composer,
.ktx-shell[data-paused="1"] .ktx-cv-actions { opacity: .5; pointer-events: none; }

/* ---- Full-page views (Contacts, Tags) ---- */
.ktx-page { grid-column: 2 / -1; background: var(--ktx-bg); display: flex; flex-direction: column; min-height: 0; }
.ktx-page[hidden] { display: none; }
.ktx-shell[data-mode="conversations"] #ktx-contacts-view,
.ktx-shell[data-account="1"] #ktx-contacts-view { display: none; }
.ktx-shell[data-mode="contacts"] .ktx-list,
.ktx-shell[data-mode="contacts"] .ktx-thread { display: none; }
/* Details panel shows only inside an open conversation */
.ktx-shell:not([data-view="thread"]) .ktx-details,
.ktx-shell[data-mode="contacts"] .ktx-details,
.ktx-shell[data-account="1"] .ktx-details { display: none; }

.ktx-cv-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--ktx-line); }
.ktx-cv-title { font-size: 18px; font-weight: 700; display: flex; align-items: center; }
.ktx-cv-count:empty { display: none; }
.ktx-cv-count { color: var(--ktx-brand-strong); background: var(--ktx-brand-tint); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-left: 10px; }
.ktx-cv-actions { display: flex; gap: 10px; }
.ktx-cv-actions .ktx-btn, .ktx-cv-actions .ktx-btn-ghost { display: inline-flex; align-items: center; gap: 6px; }
.ktx-cv-actions svg { width: 15px; height: 15px; }
.ktx-cv-toolbar { padding: 14px 24px 8px; }
.ktx-search-row.cv { margin: 0; max-width: 360px; }
.ktx-cv-form { margin: 6px 24px 4px; padding: 16px; border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius); background: var(--ktx-canvas); }
.ktx-cv-form[hidden] { display: none; }
.ktx-cv-form-title { font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.ktx-cv-form .ktx-add-row { display: flex; gap: 8px; margin-bottom: 10px; }
.ktx-cv-form .ktx-add-row input { flex: 1; min-width: 0; }
.ktx-cv-form input { padding: 9px 12px; border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm); font: inherit; font-size: 14px; background: var(--ktx-bg); }
.ktx-cv-form input:focus { outline: 2px solid var(--ktx-brand); outline-offset: 1px; border-color: transparent; }
.ktx-cv-form input:disabled { color: var(--ktx-faint); background: var(--ktx-canvas); }
.ktx-add-actions { display: flex; gap: 8px; justify-content: flex-end; }

.ktx-table-wrap { flex: 1; overflow: auto; padding: 8px 24px 24px; min-height: 0; }
.ktx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ktx-table thead th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ktx-muted); padding: 10px 12px; border-bottom: 1px solid var(--ktx-line); position: sticky; top: 0; background: var(--ktx-bg); }
.ktx-table thead th.ktx-th-actions { width: 1%; }
.ktx-table tbody td { padding: 12px; border-bottom: 1px solid var(--ktx-line-soft); vertical-align: middle; }
.ktx-table tbody tr:hover { background: var(--ktx-canvas); }
.ktx-td-name { display: flex; align-items: center; gap: 10px; }
.ktx-name-link { font-weight: 600; color: var(--ktx-ink); cursor: pointer; background: none; border: none; font: inherit; padding: 0; }
.ktx-name-link:hover { color: var(--ktx-brand-strong); text-decoration: underline; }
.ktx-td-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ktx-td-muted { color: var(--ktx-faint); }
.ktx-td-actions { text-align: right; white-space: nowrap; }
.ktx-td-actions button { border: 1px solid var(--ktx-line); background: var(--ktx-bg); border-radius: var(--ktx-radius-sm); padding: 6px 11px; font-size: 12.5px; cursor: pointer; margin-left: 6px; color: var(--ktx-ink); }
.ktx-td-actions button.msg { background: var(--ktx-brand); border-color: var(--ktx-brand); color: #fff; }
.ktx-td-actions button:hover { filter: brightness(0.97); }
.ktx-cv-empty { padding: 44px; text-align: center; color: var(--ktx-faint); }
.ktx-composer[hidden], .ktx-details[hidden], .ktx-thread-head[hidden] { display: none; }

/* ---- Rail account ---- */
.ktx-rail-spacer { flex: 1; }
.ktx-rail-account { width: 100%; border: none; cursor: pointer; background: transparent; color: #a69fb4; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border-radius: 11px; transition: background .15s, color .15s; }
.ktx-rail-account:hover { color: #fff; background: rgba(255,255,255,.08); }
.ktx-rail-account.is-active { color: #fff; background: var(--ktx-brand); }
.ktx-rail-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ktx-brand); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 12px; }
.ktx-rail-account.is-active .ktx-rail-avatar { background: #fff; color: var(--ktx-brand-strong); }

/* ---- Inline overlay views (Tags, Account) ---- */
.ktx-overlay-view { grid-column: 3 / -1; background: var(--ktx-canvas); overflow-y: auto; padding: 32px; }
.ktx-shell[data-account="1"] .ktx-thread, .ktx-shell[data-account="1"] .ktx-details { display: none; }
.ktx-account-card { max-width: 460px; background: var(--ktx-bg); border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius); padding: 24px; }
.ktx-account-card h2 { margin: 0 0 4px; font-size: 18px; }
.ktx-account-who { color: var(--ktx-muted); font-size: 13.5px; margin: 0 0 20px; }
.ktx-account-card h3 { font-size: 14px; margin: 0 0 14px; }
.ktx-account-sep { border: none; border-top: 1px solid var(--ktx-line); margin: 24px 0; }
.ktx-account-card .ktx-field { margin-bottom: 14px; }
.ktx-account-actions { display: flex; gap: 10px; align-items: center; }

/* ---- Tags ---- */
.ktx-tag-new { display: flex; gap: 8px; margin-bottom: 18px; }
.ktx-tag-new input { flex: 1; padding: 9px 12px; border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm); font: inherit; font-size: 14px; background: var(--ktx-canvas); }
.ktx-tag-new input:focus { outline: 2px solid var(--ktx-brand); outline-offset: 1px; border-color: transparent; }
.ktx-tag-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--ktx-line-soft); }
.ktx-tag-row-name { display: flex; align-items: center; gap: 10px; }
.ktx-tag-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ktx-brand); }
.ktx-tag-count { color: var(--ktx-faint); font-size: 12px; }
.ktx-tag-del { border: none; background: none; cursor: pointer; color: var(--ktx-faint); padding: 4px; border-radius: 6px; display: inline-flex; }
.ktx-tag-del:hover { color: var(--ktx-danger, #a32d2d); background: var(--ktx-line-soft); }
.ktx-tag-del svg { width: 16px; height: 16px; }

/* ---- Chips (selectable + display) ---- */
.ktx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ktx-chip { border: 1px solid var(--ktx-line); background: var(--ktx-bg); color: var(--ktx-muted); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.ktx-chip.is-on { background: var(--ktx-brand); border-color: var(--ktx-brand); color: #fff; }
.ktx-chips-empty { color: var(--ktx-faint); font-size: 12.5px; }
.ktx-d-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.ktx-d-tag { background: var(--ktx-brand-tint); color: var(--ktx-brand-strong); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.ktx-d-empty { color: var(--ktx-faint); font-size: 12.5px; }

/* ---- Details edit ---- */
.ktx-details-head { position: relative; }
.ktx-d-edit { position: absolute; top: 14px; right: 14px; border: 1px solid var(--ktx-line); background: var(--ktx-bg); color: var(--ktx-muted); border-radius: var(--ktx-radius-sm); padding: 5px 10px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.ktx-d-edit:hover { background: var(--ktx-canvas); color: var(--ktx-ink); }
.ktx-d-edit svg { width: 13px; height: 13px; }
.ktx-details-body .ktx-field input { width: 100%; padding: 9px 12px; border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm); font: inherit; font-size: 14px; background: var(--ktx-canvas); }
.ktx-details-body .ktx-field input:focus { outline: 2px solid var(--ktx-brand); outline-offset: 1px; border-color: transparent; }
/* A message is written in a textarea, and it needs the same room as an input. */
.ktx-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm); font: inherit; line-height: 1.5; background: var(--ktx-canvas); resize: vertical; }
.ktx-field textarea:focus { outline: 2px solid var(--ktx-brand); outline-offset: 1px; border-color: transparent; }

.ktx-threads { flex: 1; overflow-y: auto; }
.ktx-row {
	display: flex; gap: 11px; align-items: center; width: 100%; text-align: left;
	padding: 11px 14px; border: none; border-bottom: 1px solid var(--ktx-line-soft);
	background: none; font: inherit; color: inherit; cursor: pointer; transition: background .12s;
}
.ktx-row:hover { background: var(--ktx-canvas); }
.ktx-row[aria-current="true"] { background: var(--ktx-brand-tint); }
.ktx-row[aria-current="true"] .ktx-row-name { color: var(--ktx-brand-strong); }
.ktx-row.unread .ktx-row-name { font-weight: 700; }
.ktx-row.unread::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ktx-brand); position: absolute; }
.ktx-row.unread { padding-left: 26px; position: relative; }
.ktx-row.unread::before { left: 12px; top: 50%; transform: translateY(-50%); }

.ktx-avatar {
	flex: none; border-radius: 50%; background: var(--ktx-brand-tint); color: var(--ktx-brand-strong);
	display: grid; place-items: center; font-weight: 600;
}
.ktx-avatar { width: 40px; height: 40px; font-size: 14px; }
.ktx-avatar.sm { width: 34px; height: 34px; font-size: 13px; }
.ktx-avatar.lg { width: 64px; height: 64px; font-size: 22px; }

.ktx-row-main { min-width: 0; flex: 1; }
.ktx-row-top { display: flex; justify-content: space-between; gap: 8px; }
.ktx-row-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ktx-row-time { font-size: 11px; color: var(--ktx-faint); flex: none; }
.ktx-row-preview { font-size: 13px; color: var(--ktx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ktx-row-preview .ktx-you { color: var(--ktx-faint); }

.ktx-skeleton, .ktx-list-empty { padding: 24px 16px; color: var(--ktx-faint); font-size: 13px; }

/* ---- Thread ---- */
.ktx-thread { display: flex; flex-direction: column; min-height: 0; background: var(--ktx-canvas); }
.ktx-thread-head {
	display: flex; align-items: center; gap: 11px; padding: 12px 18px;
	background: var(--ktx-bg); border-bottom: 1px solid var(--ktx-line);
}
.ktx-back { display: none; border: none; background: none; cursor: pointer; color: var(--ktx-muted); padding: 4px; }
.ktx-thread-id { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ktx-thread-name { font-weight: 600; }
.ktx-thread-phone { font-size: 12px; color: var(--ktx-muted); font-variant-numeric: tabular-nums; }
.ktx-thread-actions { display: flex; gap: 6px; }

.ktx-messages {
	flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
	padding: 22px 24px; /* fallback where container units are unsupported */
	padding: 22px clamp(16px, 4cqi, 44px);
	scroll-behavior: smooth;
	overscroll-behavior: contain;
}
.ktx-messages > *:first-child { margin-top: auto; }
.ktx-placeholder { margin: auto; text-align: center; color: var(--ktx-faint); padding: 24px; }
.ktx-placeholder p { margin: 0; }
.ktx-placeholder-title { font-size: 15px; font-weight: 600; color: var(--ktx-muted); }
.ktx-placeholder-sub { font-size: 13px; margin-top: 4px !important; }
.ktx-placeholder-ico { color: var(--ktx-line); display: grid; place-items: center; margin-bottom: 10px; }
.ktx-placeholder-ico svg { width: 40px; height: 40px; }

.ktx-date { align-self: center; font-size: 11px; color: var(--ktx-faint); background: var(--ktx-bg); border: 1px solid var(--ktx-line); padding: 2px 12px; border-radius: 999px; margin: 12px 0 6px; }

/* Wider panes get wider bubbles, but never so wide the eye loses the line. */
.ktx-msg { display: flex; gap: 8px; max-width: min(72%, 620px); margin: 3px 0; }
.ktx-msg.out { align-self: flex-end; flex-direction: row-reverse; }
.ktx-msg.in { align-self: flex-start; }
.ktx-msg .ktx-avatar { width: 26px; height: 26px; font-size: 10px; align-self: flex-end; }
.ktx-msg.out .ktx-avatar { background: var(--ktx-brand); color: #fff; }
.ktx-bubble-wrap { display: flex; flex-direction: column; }
.ktx-msg.out .ktx-bubble-wrap { align-items: flex-end; }
.ktx-bubble { padding: 9px 13px; border-radius: 15px; font-size: 14px; line-height: 1.45; word-wrap: break-word; white-space: pre-wrap; }
.ktx-msg.out .ktx-bubble { background: var(--ktx-brand); color: #fff; border-bottom-right-radius: 5px; }
.ktx-msg.in .ktx-bubble { background: var(--ktx-recv); color: var(--ktx-ink); border-bottom-left-radius: 5px; }
.ktx-meta { font-size: 11px; color: var(--ktx-faint); margin-top: 3px; display: flex; gap: 6px; }
.ktx-meta .ktx-staff { color: var(--ktx-brand); font-weight: 600; }
/* A text the customer got that nobody in the office typed. It sits in the
   thread like any other, because it is, but the avatar and the line under it
   say what sent it rather than implying a colleague did. */
.ktx-meta .ktx-auto { color: var(--ktx-muted); font-weight: 600; }
.ktx-msg.is-auto .ktx-avatar { background: var(--ktx-brand-tint); color: var(--ktx-brand); }
.ktx-msg.is-auto .ktx-avatar svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }

/* ---- Composer ---- */
.ktx-composer {
	display: flex; gap: 10px; align-items: flex-end;
	padding: 14px 18px; /* fallback where container units are unsupported */
	padding: 14px clamp(14px, 4cqi, 44px);
	background: var(--ktx-bg); border-top: 1px solid var(--ktx-line);
}
.ktx-input { flex: 1; min-width: 0; resize: none; max-height: 140px; padding: 10px 14px; border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm); font: inherit; font-size: 14px; background: var(--ktx-canvas); color: var(--ktx-ink); }
.ktx-input:focus { outline: 2px solid var(--ktx-brand); outline-offset: 1px; border-color: transparent; }
.ktx-send { flex: none; padding: 10px 20px; border: none; border-radius: var(--ktx-radius-sm); background: var(--ktx-brand); color: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: background .15s, opacity .15s; }
.ktx-send:hover:not(:disabled) { background: var(--ktx-brand-strong); }
.ktx-send:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Details panel ---- */
.ktx-details { width: 300px; border-left: 1px solid var(--ktx-line); background: var(--ktx-bg); display: flex; flex-direction: column; min-height: 0; }
.ktx-details-head { padding: 24px 20px 18px; border-bottom: 1px solid var(--ktx-line); text-align: center; }
.ktx-details-head .ktx-avatar { margin: 0 auto 12px; }
.ktx-d-name { font-weight: 700; font-size: 16px; }
.ktx-d-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12.5px; color: var(--ktx-brand); text-decoration: none; }
.ktx-d-link svg { width: 14px; height: 14px; }
.ktx-d-link:hover { text-decoration: underline; }
.ktx-details-body { padding: 16px 20px; overflow-y: auto; }
.ktx-d-section { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ktx-faint); margin-bottom: 12px; }
.ktx-d-field { margin-bottom: 14px; }
.ktx-d-field span { display: block; font-size: 12px; color: var(--ktx-muted); margin-bottom: 2px; }
.ktx-d-field div { font-size: 14px; color: var(--ktx-ink); font-variant-numeric: tabular-nums; }

/* ---- Buttons ---- */
.ktx-btn { display: inline-block; padding: 10px 18px; border-radius: var(--ktx-radius-sm); background: var(--ktx-brand); color: #fff; font-weight: 600; text-decoration: none; border: none; cursor: pointer; font-size: 14px; }
.ktx-btn:hover { background: var(--ktx-brand-strong); }
.ktx-btn-ghost { padding: 10px 18px; border-radius: var(--ktx-radius-sm); background: none; border: 1px solid var(--ktx-line); color: var(--ktx-muted); cursor: pointer; font: inherit; font-size: 14px; }
.ktx-btn-ghost:hover { background: var(--ktx-canvas); }

/* ---- Empty / login states ---- */
.ktx-empty-shell { display: flex; align-items: center; justify-content: center; grid-template-columns: none; }
.ktx-empty-card { margin: auto; text-align: center; max-width: 360px; padding: 40px; }
.ktx-empty-card h2 { margin: 8px 0 6px; font-size: 19px; }
.ktx-empty-card p { color: var(--ktx-muted); margin: 0 0 18px; }
.ktx-empty-shell .ktx-mark { font-weight: 800; color: var(--ktx-brand); font-size: 20px; }
.ktx-mark img { display: inline-block; height: 36px; width: auto; }
.ktx-rail-mark img { width: 100%; height: 100%; border-radius: inherit; display: block; }

/* ---- Modal ---- */
.ktx-modal { position: absolute; inset: 0; background: rgba(29, 17, 53,.45); display: grid; place-items: center; padding: 20px; z-index: 5; }
.ktx-modal-card { background: var(--ktx-bg); border-radius: var(--ktx-radius); padding: 24px; width: 100%; max-width: 380px; }
.ktx-modal-card h3 { margin: 0 0 16px; font-size: 17px; }
.ktx-field { display: block; margin-bottom: 14px; }
.ktx-field span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.ktx-field em { font-weight: 400; color: var(--ktx-faint); font-style: normal; }
.ktx-field input { width: 100%; padding: 10px 12px; border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm); font: inherit; background: var(--ktx-canvas); }
.ktx-field input:focus { outline: 2px solid var(--ktx-brand); outline-offset: 1px; border-color: transparent; }
/* A select left to the browser is the one control on the screen that does not
   look like it belongs to this app, so it gets the same box as an input, with
   its own chevron in place of the platform one. */
.ktx-field select { width: 100%; padding: 10px 34px 10px 12px; border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm);
	font: inherit; color: var(--ktx-ink); background-color: var(--ktx-canvas); cursor: pointer;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236c726b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; }
.ktx-field select:focus { outline: 2px solid var(--ktx-brand); outline-offset: 1px; border-color: transparent; }
.ktx-field__warn { display: block; margin-top: 5px; font-style: normal; font-size: 12.5px; line-height: 1.45; color: #a3261f; }
.ktx-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* ---- Integrations ---- */
.ktx-shell:not([data-int="1"]) #ktx-int-view { display: none; }
.ktx-shell[data-int="1"] .ktx-list,
.ktx-shell[data-int="1"] .ktx-thread,
.ktx-shell[data-int="1"] .ktx-details,
.ktx-shell[data-int="1"] #ktx-contacts-view { display: none !important; }
.ktx-shell[data-int="1"] #ktx-int-view { display: flex; }
/* Followup (placeholder page) */
.ktx-shell:not([data-sv="1"]) #ktx-sv-view { display: none; }
.ktx-shell[data-sv="1"] .ktx-list,
.ktx-shell[data-sv="1"] .ktx-thread,
.ktx-shell[data-sv="1"] .ktx-details,
.ktx-shell[data-sv="1"] #ktx-contacts-view { display: none !important; }
/* AI (placeholder) */

/* Guide */
.ktx-shell:not([data-gd="1"]) #ktx-gd-view { display: none; }
.ktx-shell[data-gd="1"] .ktx-list,
.ktx-shell[data-gd="1"] .ktx-thread,
.ktx-shell[data-gd="1"] .ktx-details,
.ktx-shell[data-gd="1"] #ktx-contacts-view { display: none !important; }
.ktx-shell[data-gd="1"] #ktx-gd-view { display: flex; }
#ktx-gd-view [hidden] { display: none !important; }

/* The board takes the whole pane, the same way every other inline page does. */
.ktx-shell:not([data-op="1"]) #ktx-op-view { display: none; }
.ktx-shell[data-op="1"] .ktx-list,
.ktx-shell[data-op="1"] .ktx-thread,
.ktx-shell[data-op="1"] .ktx-details,
.ktx-shell[data-op="1"] #ktx-contacts-view { display: none !important; }
.ktx-shell[data-op="1"] #ktx-op-view { display: flex; }

.ktx-shell:not([data-fu="1"]) #ktx-fu-view { display: none; }
.ktx-shell[data-fu="1"] .ktx-list,
.ktx-shell[data-fu="1"] .ktx-thread,
.ktx-shell[data-fu="1"] .ktx-details,
.ktx-shell[data-fu="1"] #ktx-contacts-view { display: none !important; }
.ktx-shell[data-fu="1"] #ktx-fu-view { display: flex; }
/* Followups: the queue on one tab, the dated rules on the other. */
.ktx-fu-body { flex: 1; background: var(--ktx-canvas); padding: 20px 16px 40px; overflow: auto; }
.ktx-fu-tabs { display: flex; gap: 4px; margin-left: auto; }
.ktx-fu-tab { border: 1px solid transparent; background: none; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ktx-muted); cursor: pointer; }
.ktx-fu-tab.is-on { background: var(--ktx-brand-tint); color: var(--ktx-brand); }
.ktx-fu-pills { display: flex; flex-wrap: wrap; gap: 6px; max-width: 760px; margin: 0 auto 14px; }
.ktx-fu-pill { border: 1px solid var(--ktx-line); background: #fff; padding: 5px 11px; border-radius: 999px; font: inherit; font-size: 13px; color: var(--ktx-muted); cursor: pointer; }
.ktx-fu-pill.is-on { border-color: var(--ktx-brand); background: var(--ktx-brand-tint); color: var(--ktx-brand); font-weight: 600; }
.ktx-fu-row { max-width: 760px; margin: 0 auto 10px; background: #fff; border: 1px solid var(--ktx-line); border-radius: 14px; padding: 14px 16px; }
.ktx-fu-row__head { display: flex; align-items: baseline; gap: 10px; }
.ktx-fu-row__head b { color: var(--ktx-ink); font-size: 15px; }
.ktx-fu-when { margin-left: auto; color: var(--ktx-muted); font-size: 13px; white-space: nowrap; }
.ktx-fu-text { margin: 8px 0 10px; color: var(--ktx-ink); font-size: 14px; line-height: 1.5; }
.ktx-fu-row__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ktx-muted); }
.ktx-fu-flag, .ktx-fu-why { padding: 2px 8px; border-radius: 999px; background: var(--ktx-canvas); }
.ktx-fu-why { color: var(--ktx-ink); }
.ktx-fu-cancel { margin-left: auto; font-size: 13px; padding: 4px 10px; }
.ktx-fu-panel { max-width: 760px; margin: 0 auto 16px; background: #fff; border: 1px solid var(--ktx-line); border-radius: 16px; padding: 18px 20px; }
.ktx-fu-panel h3 { margin: 0 0 6px; font-size: 16px; }
.ktx-fu-rule { border-top: 1px solid var(--ktx-line); margin-top: 14px; padding-top: 14px; }
.ktx-fu-rule__on { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ktx-ink); cursor: pointer; }
.ktx-fu-rule__note { margin: 4px 0 10px; color: var(--ktx-muted); font-size: 13px; line-height: 1.5; }
.ktx-fu-row2 { display: flex; gap: 12px; flex-wrap: wrap; }
.ktx-fu-rule .ktx-field input[type="time"], .ktx-fu-rule .ktx-field input[type="number"] { max-width: 200px; }
.ktx-fu-row2 .ktx-field { flex: 1; min-width: 140px; }
.ktx-fu-save { max-width: 760px; margin: 0 auto; }
@media (max-width: 640px) {
	.ktx-fu-tabs { width: 100%; margin: 8px 0 0; }
	.ktx-fu-when { margin-left: 0; width: 100%; }
	.ktx-fu-cancel { margin-left: 0; }
}
#ktx-int-view [hidden] { display: none !important; }
.ktx-int-body { flex: 1; min-height: 0; overflow-y: auto; background: var(--ktx-canvas); padding: 20px 24px 0; }
.ktx-int-list { display: flex; flex-direction: column; gap: 10px; max-width: 860px; margin: 0 auto; padding-bottom: 24px; }
.ktx-int-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 18px; border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius); background: var(--ktx-bg); cursor: pointer; font: inherit; color: var(--ktx-ink); transition: border-color .15s, box-shadow .15s; }
.ktx-int-row:hover { border-color: #d2cfd8; box-shadow: 0 4px 14px -8px rgba(29, 17, 53,.25); }
.ktx-int-logo { width: 40px; height: 40px; border-radius: 11px; background: var(--ktx-brand-tint); color: var(--ktx-brand); display: grid; place-items: center; flex: none; }
.ktx-int-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ktx-int-row-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ktx-int-row-sub { font-size: 12.5px; color: var(--ktx-muted); }
.ktx-int-pill { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: #efeef1; color: var(--ktx-muted); }
.ktx-int-pill.live { background: var(--ktx-brand-tint); color: var(--ktx-brand-strong); }
.ktx-int-pill.wait { background: #e8f1fb; color: #1d5b99; }
.ktx-int-pill.new { background: #fdf3e2; color: #8a5a10; }
.ktx-int-pill.paused { background: #f1f1f1; color: #6c726b; }
.ktx-int-empty { text-align: center; max-width: 520px; margin: 40px auto; padding: 32px 24px; background: var(--ktx-bg); border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius); }
.ktx-int-empty-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--ktx-brand-tint); color: var(--ktx-brand); display: grid; place-items: center; margin: 0 auto 14px; }
.ktx-int-empty h3 { margin: 0 0 8px; font-size: 17px; }
.ktx-int-empty p { color: var(--ktx-muted); margin: 0 0 18px; }

.ktx-int-detail { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.ktx-int-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ktx-int-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--ktx-muted); font: inherit; font-size: 13.5px; cursor: pointer; padding: 6px 0; }
.ktx-int-back:hover { color: var(--ktx-ink); }
.ktx-int-back svg { width: 16px; height: 16px; flex: none; }
.ktx-int-back { white-space: nowrap; }
.ktx-int-card { background: var(--ktx-bg); border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius); padding: 20px; }
.ktx-int-card h3 { margin: 0 0 4px; font-size: 15px; }
.ktx-int-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ktx-int-card-head h3 { margin: 0; }
.ktx-int-note { color: var(--ktx-muted); font-size: 13.5px; margin: 0 0 14px; }
.ktx-int-note.small { font-size: 12.5px; margin: 10px 0 0; }
.ktx-int-card .ktx-field input, .ktx-int-card select, .ktx-int-card textarea, .ktx-int-addstatus input, .ktx-int-test input {
	width: 100%; padding: 9px 12px; border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm); font: inherit; font-size: 14px; background: var(--ktx-canvas); color: var(--ktx-ink);
}
.ktx-int-card textarea { resize: vertical; min-height: 58px; line-height: 1.45; background: var(--ktx-bg); }
.ktx-int-card input:focus, .ktx-int-card select:focus, .ktx-int-card textarea:focus { outline: 2px solid var(--ktx-brand); outline-offset: 1px; border-color: transparent; }
.ktx-int-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.ktx-int-switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; cursor: pointer; }
.ktx-int-switch input, .ktx-int-trigger-head input { width: 18px; height: 18px; accent-color: var(--ktx-brand); margin: 0; }

.ktx-int-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.ktx-int-steps li::marker { color: var(--ktx-brand); font-weight: 700; }
.ktx-int-copy { margin-top: 8px; }
.ktx-int-copy-label { display: none; }
.ktx-int-copy-row { display: flex; gap: 6px; }
.ktx-int-copy-row input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px !important; background: var(--ktx-canvas); }
.ktx-btn.sm { padding: 7px 14px; font-size: 13px; white-space: nowrap; }
.ktx-btn-ghost.sm { padding: 7px 12px; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--ktx-ink); }
.ktx-btn-ghost.sm svg { width: 14px; height: 14px; }
.ktx-btn-ghost.danger { color: #a3261f; border-color: #efc9c6; }
.ktx-btn-ghost.danger:hover { background: #fdf1f0; }
.ktx-int-conn { display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ktx-line-soft); font-size: 13px; color: var(--ktx-muted); }
.ktx-int-dot { width: 9px; height: 9px; border-radius: 50%; background: #d6d4d9; }
.ktx-int-dot.on { background: var(--ktx-brand); box-shadow: 0 0 0 3px var(--ktx-brand-tint); }

.ktx-int-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
.ktx-int-tags-label { font-size: 12.5px; color: var(--ktx-muted); margin-right: 2px; }
.ktx-int-tag { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--ktx-line); background: var(--ktx-canvas); color: var(--ktx-brand-strong); cursor: pointer; }
.ktx-int-tag:hover { border-color: var(--ktx-brand); }
.ktx-int-triggers { display: flex; flex-direction: column; gap: 10px; }
.ktx-int-trigger { border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm); padding: 12px 14px; background: var(--ktx-canvas); }
.ktx-int-trigger.is-on { background: var(--ktx-bg); border-color: #c5bcd7; }
.ktx-int-trigger:not(.is-on) textarea { color: var(--ktx-muted); }
.ktx-int-trigger-head { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 8px; cursor: pointer; }
.ktx-int-custom { font-size: 11px; font-weight: 600; color: var(--ktx-muted); border: 1px solid var(--ktx-line); padding: 1px 7px; border-radius: 999px; }
.ktx-int-meter { display: block; font-size: 12px; color: var(--ktx-faint); margin-top: 4px; min-height: 1em; }
.ktx-int-meter.warn { color: #9a5b00; }
.ktx-int-addstatus, .ktx-int-test { display: flex; gap: 8px; margin-top: 14px; }
.ktx-int-test { margin-top: 0; }
.ktx-int-test select { max-width: 220px; }
.ktx-int-log { overflow-x: auto; }
.ktx-int-log .ktx-table td { vertical-align: top; font-size: 13px; }
.ktx-int-log .ktx-table td:first-child { white-space: nowrap; }
.ktx-int-out { display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 8px; border-radius: 999px; background: #efeef1; color: var(--ktx-muted); }
.ktx-int-out.sent { background: var(--ktx-brand-tint); color: var(--ktx-brand-strong); }
.ktx-int-out.failed { background: #fbeaea; color: #8a2a2a; }
.ktx-int-detailtxt { color: var(--ktx-muted); font-size: 12.5px; margin-top: 3px; word-break: break-word; }
.ktx-int-danger-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--ktx-line-soft); }
.ktx-int-danger-row:first-of-type { border-top: none; }
.ktx-int-danger-row p { margin: 2px 0 0; color: var(--ktx-muted); font-size: 13px; }
.ktx-int-savebar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; margin: 0; background: rgba(255,255,255,.96); border: 1px solid var(--ktx-line); border-bottom: none; border-radius: var(--ktx-radius) var(--ktx-radius) 0 0; box-shadow: 0 -8px 20px -14px rgba(29, 17, 53,.25); font-size: 13px; color: var(--ktx-muted); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ktx-int-savebar.is-dirty span { color: #9a5b00; font-weight: 600; }
.ktx-shell[data-paused="1"] #ktx-int-add, .ktx-shell[data-paused="1"] [data-act="test"] { opacity: .5; pointer-events: none; }

@container ktxportal (max-width: 780px) {
	.ktx-int-body { padding: 14px 14px 0; }
	.ktx-int-rule-grid, .ktx-int-rule-grid.two { grid-template-columns: 1fr; }
	.ktx-int-grid { grid-template-columns: 1fr; }
	.ktx-int-test { flex-wrap: wrap; }
	.ktx-int-test select { max-width: none; }
	.ktx-int-danger-row { flex-direction: column; align-items: flex-start; }
}
@container ktxportal (max-width: 520px) {
	.ktx-cv-head { flex-wrap: wrap; gap: 10px; }
	.ktx-int-row { flex-wrap: wrap; }
	.ktx-int-pill { order: 3; margin-left: 54px; max-width: calc(100% - 54px); white-space: normal; }
	.ktx-int-card { padding: 16px; }
	.ktx-int-copy-row { flex-wrap: wrap; }
	.ktx-int-copy-row input { flex-basis: 100%; }
	.ktx-int-log .ktx-table thead { display: none; }
	.ktx-int-log .ktx-table tr { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--ktx-line-soft); }
	.ktx-int-log .ktx-table td { border: none; padding: 0; }
	.ktx-int-log .ktx-table td:last-child { grid-column: 1 / -1; }
	.ktx-int-fields { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.ktx-int-grid, .ktx-int-rule-grid, .ktx-int-rule-grid.two { grid-template-columns: 1fr; }
}

/* ---- Custom webhook editor ---- */
.ktx-int-card code, .ktx-int-note code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: var(--ktx-canvas); border: 1px solid var(--ktx-line); padding: 1px 5px; border-radius: 5px; color: var(--ktx-brand-strong); word-break: break-all; }
.ktx-int-secretsw { margin-top: 14px; }
.ktx-int-secretbox { margin-top: 8px; padding: 12px; border-radius: var(--ktx-radius-sm); background: var(--ktx-canvas); border: 1px solid var(--ktx-line-soft); }
.ktx-int-secretbox .ktx-int-note { margin-top: 0; }
.ktx-int-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 6px; max-height: 300px; overflow: auto; padding: 2px; }
.ktx-int-field { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm); background: var(--ktx-bg); cursor: pointer; font: inherit; min-width: 0; transition: border-color .15s, background .15s; }
.ktx-int-field:hover { border-color: var(--ktx-brand); background: var(--ktx-brand-tint); }
.ktx-int-field code { font-size: 11.5px; font-weight: 600; background: none; border: none; padding: 0; color: var(--ktx-brand-strong); word-break: break-all; }
.ktx-int-field span { font-size: 12px; color: var(--ktx-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ktx-int-field.is-phone { border-color: #c5bcd7; }
.ktx-int-field.is-phone::after { content: "phone?"; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ktx-brand); }
.ktx-int-example { margin-top: 4px; }
.ktx-int-example summary { cursor: pointer; font-size: 13px; color: var(--ktx-brand-strong); font-weight: 600; }
.ktx-int-example textarea { margin: 10px 0 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.ktx-int-rules { display: flex; flex-direction: column; gap: 12px; }
.ktx-int-rule { border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm); padding: 14px; background: var(--ktx-canvas); }
.ktx-int-rule.is-on { background: var(--ktx-bg); border-color: #c5bcd7; }
.ktx-int-rule-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ktx-int-rule-head input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ktx-brand); margin: 0; flex: none; }
.ktx-int-card .ktx-int-rule-name { flex: 1; min-width: 0; font-weight: 600; background: transparent; border-color: transparent; padding-left: 6px; }
.ktx-int-card .ktx-int-rule-name:hover { border-color: var(--ktx-line); }
.ktx-int-iconbtn { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid transparent; background: none; border-radius: 8px; color: var(--ktx-faint); cursor: pointer; }
.ktx-int-iconbtn:hover { color: #a3261f; background: #fdf1f0; border-color: #efc9c6; }
.ktx-int-iconbtn svg { width: 16px; height: 16px; }
.ktx-int-rule-grid { display: grid; grid-template-columns: 180px 1fr 1fr; gap: 0 10px; }
.ktx-int-rule-grid.two { grid-template-columns: 1fr 1fr; }
.ktx-int-rule .ktx-field { margin-bottom: 10px; }
.ktx-int-rule .ktx-field span { font-size: 12.5px; }
.ktx-int-rule input[data-pathable], .ktx-int-dedupe input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px !important; }
.ktx-int-addrule { margin-top: 12px; }
.ktx-int-addrule:disabled { opacity: .5; cursor: not-allowed; }
.ktx-int-dedupe { margin: 18px 0 0; }
.ktx-int-top { flex-wrap: wrap; row-gap: 6px; }
/* Declared after the editor rules above so it wins on narrow portals. */
.ktx-int-savebar .ktx-btn { white-space: nowrap; }
@container ktxportal (max-width: 780px) {
	.ktx-int-rule-grid, .ktx-int-rule-grid.two { grid-template-columns: 1fr; }
	.ktx-int-fields { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@container ktxportal (max-width: 520px) {
	.ktx-int-fields { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
	.ktx-int-rule-grid, .ktx-int-rule-grid.two { grid-template-columns: 1fr; }
}

/* ---- Full-screen app mode ----
   For a signed-in customer the portal is the whole page: no site header,
   footer or admin bar (the theme and plugin both drop them). The shell then
   fills the viewport, edge to edge. */
body.kiwitxt-app { margin: 0; background: #1f0d4d; }
body.kiwitxt-app .ktx-portal-wrap { width: 100%; max-width: none; margin: 0; padding: 0; }
body.kiwitxt-app .ktx-portal-wrap > .ktx-shell { max-width: none; height: 100vh; height: 100dvh; border: none; border-radius: 0; box-shadow: none; }
body.kiwitxt-app .ktx-banner { margin: 0; border-radius: 0; }
body.kiwitxt-app .ktx-banner:not([hidden]) + .ktx-shell { height: calc(100dvh - 46px); }

/* ---- Rail: log out next to the profile ---- */
.ktx-rail-logout { width: 100%; color: #a69fb4; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 4px; border-radius: 11px; text-decoration: none; transition: background .15s, color .15s; margin-top: 2px; }
.ktx-rail-logout:hover { color: #fff; background: rgba(255,255,255,.08); }
.ktx-rail-logout svg { width: 18px; height: 18px; }

/* ---- Tools home: add a connection + your connections ---- */
.ktx-int-section { margin-bottom: 26px; }
.ktx-int-h { font-size: 15px; margin: 0 0 4px; }
.ktx-int-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.ktx-int-tool { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--ktx-bg); border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius); }
.ktx-int-tool .ktx-int-logo { width: 38px; height: 38px; }
.ktx-int-tool-main b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.ktx-int-tool-main p { margin: 0; font-size: 13px; color: var(--ktx-muted); line-height: 1.45; }
.ktx-int-tool-n { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--ktx-brand-strong); background: var(--ktx-brand-tint); padding: 1px 8px; border-radius: 999px; }
.ktx-int-tool .ktx-btn-ghost { align-self: flex-start; margin-top: auto; }
.ktx-int-mine { display: flex; flex-direction: column; gap: 10px; }
.ktx-int-secretstate { display: block; font-size: 12.5px; color: #9a5b00; margin-top: 6px; }
.ktx-int-secretstate.ok { color: var(--ktx-brand-strong); font-weight: 600; }
.ktx-int-heads { margin-top: 14px; padding: 10px 12px; background: #fdf8ec; border: 1px solid #f1e2b8; border-radius: var(--ktx-radius-sm); color: #6b5210; }
.ktx-int-ppsandbox { align-self: end; margin-bottom: 18px; }
.ktx-int-card .ktx-field input[type="password"] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@container ktxportal (max-width: 520px) {
	.ktx-int-catalog { grid-template-columns: minmax(0, 1fr); }
	.ktx-rail-logout { padding: 9px 2px; }
}

/* ---- Toast ---- */
.ktx-toast { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--ktx-ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 13px; z-index: 6; box-shadow: 0 6px 24px rgba(0,0,0,.18); }

/* ---- Responsive ----
   Container queries drive this: the portal can sit in a narrow theme column
   on a wide monitor, where a viewport query would wrongly keep the full
   desktop grid and push the thread pane off the edge. The media queries below
   repeat the same rules for browsers without container query support. */
@container ktxportal (max-width: 1120px) {
	.ktx-shell { grid-template-columns: 100px 300px minmax(0, 1fr); }
	.ktx-shell .ktx-details { display: none; }
}
@container ktxportal (max-width: 780px) {
	.ktx-shell { grid-template-columns: 100px minmax(0, 1fr); }
	.ktx-shell[data-view="thread"] .ktx-list { display: none; }
	.ktx-shell:not([data-view="thread"]) .ktx-thread { display: none; }
	.ktx-overlay-view { grid-column: 2 / -1; }
	.ktx-back { display: block; }
}
@container ktxportal (max-width: 520px) {
	/* Icons only. Moving the rail to a bottom bar was tried and dropped: in a
	   grid row it stretches and the labels break a character per line. A
	   narrower left rail keeps the same structure and stays legible. */
	.ktx-shell { grid-template-columns: 56px minmax(0, 1fr); height: clamp(520px, 80vh, 780px); }
	.ktx-rail { padding: 12px 4px; }
	.ktx-rail-label { display: none; }
	.ktx-rail-mark { width: 30px; height: 30px; font-size: 16px; margin-bottom: 10px; }
	.ktx-rail-btn { padding: 10px 4px; }
	.ktx-msg { max-width: 88%; }
	.ktx-list-head, .ktx-cv-head { padding-inline: 14px; }
}

@media (max-width: 1040px) {
	.ktx-shell { grid-template-columns: 100px 300px minmax(0, 1fr); }
	.ktx-shell .ktx-details { display: none; }
}
@media (max-width: 720px) {
	.ktx-shell { grid-template-columns: 100px minmax(0, 1fr); height: 86vh; }
	.ktx-shell[data-view="thread"] .ktx-list { display: none; }
	.ktx-shell:not([data-view="thread"]) .ktx-thread { display: none; }
	.ktx-overlay-view { grid-column: 2 / -1; }
	.ktx-back { display: block; }
}
@media (prefers-reduced-motion: reduce) {
	.ktx-shell *, .ktx-shell *::before, .ktx-shell *::after { transition: none !important; animation: none !important; }
}
.ktx-int-card input[data-f="signing_secret"] { width: 100%; padding: 9px 12px; border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm); background: var(--ktx-canvas); font-size: 13px !important; color: var(--ktx-ink); }
.ktx-int-card input[data-f="signing_secret"]:focus { outline: 2px solid var(--ktx-brand); outline-offset: 1px; border-color: transparent; }

/* ---- Store connect approval (Kiwitxt_Connect) ---- */
.ktx-connect-card { max-width: 440px; width: 100%; box-sizing: border-box; background: #fff; border: 1px solid var(--ktx-line); border-radius: 16px; box-shadow: 0 16px 40px -18px rgba(21, 11, 42,.25); padding: 32px 28px; text-align: left; }
.ktx-connect-card .ktx-mark { text-align: center; }
.ktx-connect-card h2 { text-align: center; }
.ktx-connect-icon { width: 52px; height: 52px; margin: 14px auto 4px; border-radius: 14px; display: grid; place-items: center; background: #ebe6f4; color: var(--ktx-brand); }
.ktx-connect-card p.ktx-connect-lead { color: var(--ktx-ink); font-size: 15px; line-height: 1.5; text-align: center; }
.ktx-connect-site { display: flex; flex-direction: column; gap: 4px; background: var(--ktx-canvas); border: 1px solid var(--ktx-line); border-radius: 10px; padding: 10px 12px; margin: 0 0 16px; }
.ktx-connect-site span { font-size: 12px; color: var(--ktx-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.ktx-connect-site code { font-size: 14px; color: var(--ktx-ink); word-break: break-all; background: none; padding: 0; }
.ktx-connect-list { margin: 0 0 16px; padding: 0 0 0 20px; color: var(--ktx-ink); font-size: 14px; line-height: 1.55; }
.ktx-connect-list li { margin: 0 0 6px; }
.ktx-connect-card p.ktx-connect-warn { font-size: 13px; background: #fff7e6; border: 1px solid #f3dca6; color: #6b4d00; border-radius: 10px; padding: 9px 12px; }
.ktx-connect-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin: 0; }
.ktx-connect-actions .ktx-btn, .ktx-connect-actions .ktx-btn-ghost { flex: 1 1 140px; text-align: center; }
@media (max-width: 480px) { .ktx-connect-card { padding: 24px 18px; border: 0; box-shadow: none; } }
.ktx-int-plugin { background: #ede9f6; border: 1px solid #cbbfe3; color: var(--ktx-ink); border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.5; margin: 0 0 12px; }
.ktx-register-hint { margin: 16px 0 0 !important; font-size: 14px; } .ktx-register-hint a { color: var(--ktx-brand); font-weight: 600; }

.ktx-int-trigger-hint { margin: 0 0 8px; font-size: 12.5px; color: var(--ktx-muted); line-height: 1.45; }

/* WooCommerce: plugin first, manual webhooks folded away. */
.ktx-int-easy { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 10px; }
.ktx-int-easy li { display: flex; gap: 12px; align-items: flex-start; background: var(--ktx-brand-tint); border: 1px solid #ddd0fc; border-radius: 12px; padding: 12px 14px; }
.ktx-int-easy li > span { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ktx-brand); color: #fff; font-weight: 700; font-size: 13px; }
.ktx-int-easy li > div > b { display: block; color: var(--ktx-ink); font-size: 14px; }
.ktx-int-easy p b { color: var(--ktx-ink); font-weight: 600; }
.ktx-int-easy p { margin: 2px 0 0; color: var(--ktx-muted); font-size: 13.5px; line-height: 1.45; }
.ktx-int-manual { margin: 0 0 12px; border: 1px solid var(--ktx-line); border-radius: 12px; padding: 0 14px; }
.ktx-int-manual summary { cursor: pointer; padding: 12px 0; font-size: 13.5px; font-weight: 600; color: var(--ktx-muted); list-style: none; display: flex; align-items: center; gap: 8px; }
.ktx-int-manual summary::-webkit-details-marker { display: none; }
.ktx-int-manual summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; }
.ktx-int-manual[open] summary::before { transform: rotate(45deg); }
.ktx-int-manual[open] { padding-bottom: 14px; }
.ktx-int-manual[open] summary { color: var(--ktx-ink); }
.ktx-int-linked { display: flex; gap: 12px; align-items: flex-start; background: var(--ktx-brand-tint); border: 1px solid #ddd0fc; border-radius: 12px; padding: 12px 14px; margin: 4px 0 12px; }
.ktx-int-linked > svg { flex: none; width: 22px; height: 22px; color: var(--ktx-brand); margin-top: 2px; }
.ktx-int-linked b { display: block; color: var(--ktx-ink); font-size: 14px; }
.ktx-int-linked p { margin: 2px 0 0; color: var(--ktx-muted); font-size: 13.5px; line-height: 1.45; }
.ktx-int-linked code { font-size: 12.5px; }
/* PayPal: connect with keys */
.ktx-int-easy li > div { flex: 1; min-width: 0; }
.ktx-int-ppkeys { margin-top: 10px; }
.ktx-int-ppkeys .ktx-field input { background: #fff; }
.ktx-int-easy .ktx-int-ppsandbox { margin-top: 6px; }
.ktx-int-easy li p .ktx-btn { margin-top: 8px; }
.ktx-int-pperr { margin: 8px 0 0; color: #b42318; font-size: 13.5px; line-height: 1.45; }
.ktx-int-linked p .ktx-int-ppoff { margin-top: 8px; background: #fff; }
.ktx-int-linked p .ktx-int-ppoff:hover { background: #fdf1f0; }
.ktx-int-linked > div { flex: 1; min-width: 0; }

/* Conversation assignment */
.ktx-assign-row { display: flex; align-items: center; gap: 8px; margin: 2px 12px 0; font-size: 12.5px; color: var(--ktx-muted); }
.ktx-assign-row label { flex: none; }
.ktx-assign-select { flex: 1; min-width: 0; font: inherit; font-size: 13px; color: var(--ktx-ink); padding: 6px 8px; border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm); background: var(--ktx-bg); }
.ktx-assign-select:focus { outline: 2px solid var(--ktx-brand); outline-offset: 1px; }
.ktx-cv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ktx-cv-toolbar .ktx-search-row.cv { flex: 1 1 260px; margin: 0; }
.ktx-cv-toolbar .ktx-assign-select { flex: 0 1 220px; }
.ktx-row-owner { display: inline-block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--ktx-brand-strong); background: var(--ktx-brand-tint); border-radius: 999px; padding: 1px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: flex-start; }
.ktx-row-owner.none { color: #8a5a00; background: #fff4de; }
#ktx-d-assign .ktx-assign-select { width: 100%; }

/* Zapier: API keys */
.ktx-zap-new { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ktx-zap-new input { flex: 1 1 180px; min-width: 0; padding: 9px 12px; border: 1px solid var(--ktx-line); border-radius: 10px; font: inherit; background: #fff; }
.ktx-zap-new .ktx-btn { display: inline-flex; align-items: center; gap: 6px; }
.ktx-zap-new .ktx-btn svg, .ktx-int-easy .ktx-btn svg { width: 16px; height: 16px; }
.ktx-int-easy a.ktx-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; margin-top: 6px; }
.ktx-zap-fresh { margin-top: 10px; background: #fff; border: 1px solid #f2c94c; border-radius: 10px; padding: 10px 12px; }
.ktx-zap-fresh p { margin: 0 0 4px; font-size: 13px; color: var(--ktx-ink); }
.ktx-zap-key { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ktx-line); }
.ktx-zap-key:first-child { border-top: 0; }
.ktx-zap-key-main { flex: 1; min-width: 0; }
.ktx-zap-key-main b { display: block; color: var(--ktx-ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ktx-zap-key-meta { display: block; font-size: 12.5px; color: var(--ktx-muted); }
.ktx-zap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ktx-zap-grid h4 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ktx-muted); }
.ktx-zap-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ktx-zap-grid li b { display: block; color: var(--ktx-ink); font-size: 14px; }
.ktx-zap-grid li span { font-size: 13px; color: var(--ktx-muted); }
@media (max-width: 640px) { .ktx-zap-grid { grid-template-columns: 1fr; } .ktx-zap-key { flex-wrap: wrap; } }
/* Step text must shrink with the screen (long keys and buttons wrap, never clip). */
.ktx-int-easy li > div { flex: 1; min-width: 0; }
.ktx-zap-fresh .ktx-int-copy-row input { min-width: 0; }
@media (max-width: 640px) { .ktx-zap-new .ktx-btn, .ktx-int-easy a.ktx-btn { width: 100%; justify-content: center; } }
.ktx-int-easy { grid-template-columns: minmax(0, 1fr); }
.ktx-int-easy li { min-width: 0; }

/* Extra Services */
.ktx-sv-body { padding: 18px clamp(14px, 3vw, 26px) 40px; overflow-y: auto; }
.ktx-sv-lead { margin: 0 0 16px; color: var(--ktx-muted); font-size: 14px; max-width: 70ch; }
.ktx-sv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.ktx-sv-card { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--ktx-line); border-radius: 14px; padding: 16px; }
.ktx-sv-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--ktx-brand-tint); color: var(--ktx-brand); }
.ktx-sv-ico svg { width: 20px; height: 20px; }
.ktx-sv-main { flex: 1; min-width: 0; }
.ktx-sv-main b { color: var(--ktx-ink); font-size: 15px; }
.ktx-sv-main p { margin: 4px 0 10px; color: var(--ktx-muted); font-size: 13.5px; }
.ktx-sv-soon { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--ktx-brand-tint); color: var(--ktx-brand); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
/* Layout rules like the grid below beat the hidden attribute, which would
   leave every enquiry form open before anyone asked. Scoped to this view so it
   covers the forms, the enquiry list and anything added later. */
#ktx-sv-view [hidden] { display: none !important; }
.ktx-sv-form { margin-top: 10px; display: grid; gap: 8px; }
.ktx-sv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ktx-sv-err { margin: 0; color: #b3261e; font-size: 13px; }
.ktx-sv-mine { margin-top: 28px; }
.ktx-sv-mine h3 { margin: 0 0 8px; font-size: 14px; color: var(--ktx-ink); }
.ktx-sv-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--ktx-line); }
.ktx-sv-row:first-child { border-top: 0; }
.ktx-sv-row-main { flex: 1; min-width: 0; }
.ktx-sv-row-main b { display: block; font-size: 13.5px; color: var(--ktx-ink); }
.ktx-sv-row-msg { display: block; font-size: 13px; color: var(--ktx-muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---- Guide ---- */
.ktx-gd-body { flex: 1; min-height: 0; overflow-y: auto; background: var(--ktx-canvas); padding: 20px 24px 40px; display: flex; gap: 28px; align-items: flex-start; }
.ktx-gd-nav { position: sticky; top: 0; display: grid; gap: 2px; min-width: 170px; padding-top: 4px; }
.ktx-gd-nav a { color: var(--ktx-muted); text-decoration: none; font-size: 13px; padding: 7px 10px; border-radius: 8px; }
.ktx-gd-nav a:hover { background: var(--ktx-brand-tint); color: var(--ktx-brand); }
.ktx-gd-doc { background: #fff; border: 1px solid var(--ktx-line); border-radius: 14px; padding: 24px 28px; max-width: 76ch; }
.ktx-gd-doc h3 { margin: 26px 0 8px; font-size: 16px; scroll-margin-top: 12px; }
.ktx-gd-doc h3:first-of-type { margin-top: 14px; }
.ktx-gd-doc p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--ktx-ink); }
.ktx-gd-lead { font-size: 15px !important; color: var(--ktx-muted) !important; }
.ktx-gd-rules, .ktx-gd-list { margin: 0 0 12px; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.ktx-gd-rules li, .ktx-gd-list li { margin-bottom: 6px; }
.ktx-gd-note { color: var(--ktx-muted) !important; font-size: 13px !important; border-left: 3px solid var(--ktx-line); padding-left: 12px; }
.ktx-gd-copy code { display: inline-block; background: var(--ktx-canvas); border: 1px solid var(--ktx-line); border-radius: 8px; padding: 8px 12px; font-size: 13px; }
@media (max-width: 860px) {
	.ktx-gd-body { flex-direction: column; gap: 14px; padding: 16px 14px 32px; }
	.ktx-gd-nav { position: static; display: flex; flex-wrap: wrap; min-width: 0; }
	.ktx-gd-doc { padding: 18px 16px; }
}

/* ---- Opted out ---- */
.ktx-optout-bar { display: flex; gap: 10px; align-items: center; padding: 12px 16px; background: #fff7ed; border-top: 1px solid #fed7aa; color: #9a3412; font-size: 13px; line-height: 1.45; }
.ktx-optout-bar[hidden] { display: none; }
.ktx-optout-ico { display: inline-grid; place-items: center; flex: none; }
.ktx-optout-ico svg { width: 18px; height: 18px; }
.ktx-optout-text { flex: 1; }
.ktx-row-stopped, .ktx-optout-pill { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 11px; font-weight: 600; vertical-align: middle; }

/* Hint under a section heading in the contact drawer. */
.ktx-d-hint { margin: 0 0 10px; color: var(--ktx-muted); font-size: 12.5px; line-height: 1.5; }

/* Timing, under each message: when it goes and what calls it off. */
.ktx-int-timing { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--ktx-line); }
.ktx-int-timing-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ktx-int-delay { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ktx-muted); }
.ktx-int-delay span { font-weight: 600; color: var(--ktx-ink); }
.ktx-int-delay input { width: 72px; padding: 6px 8px; border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm); font: inherit; font-size: 13px; background: var(--ktx-canvas); }
.ktx-int-delay select { padding: 6px 8px; border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm); font: inherit; font-size: 13px; background: var(--ktx-canvas); }
.ktx-int-timing-note { font-size: 12.5px; color: var(--ktx-faint); }
.ktx-int-delay em { font-style: normal; color: var(--ktx-muted); white-space: nowrap; }
.ktx-int-stop { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ktx-muted); cursor: pointer; }
.ktx-int-chase { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ktx-int-chase textarea { flex: 1 1 100%; padding: 8px 10px; border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm); font: inherit; font-size: 13.5px; line-height: 1.5; background: var(--ktx-canvas); resize: vertical; }
.ktx-int-addchase { margin-top: 10px; font-size: 13px; padding: 5px 10px; }

/* A followup: a card per sequence, opening into its messages. */
.ktx-seq { max-width: 760px; margin: 0 auto 12px; background: #fff; border: 1px solid var(--ktx-line); border-radius: 16px; padding: 14px 18px; }
.ktx-seq.is-open { border-color: var(--ktx-brand); box-shadow: 0 1px 2px rgba(31, 13, 77, .04), 0 8px 24px rgba(31, 13, 77, .06); }
.ktx-seq__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ktx-seq__head b { font-size: 15.5px; color: var(--ktx-ink); }
.ktx-seq__head .ktx-btn-ghost { margin-left: auto; }
.ktx-seq__badge { padding: 2px 9px; border-radius: 999px; background: var(--ktx-canvas); color: var(--ktx-muted); font-size: 12px; font-weight: 600; }
.ktx-seq__badge.is-on { background: var(--ktx-brand-tint); color: var(--ktx-brand); }
.ktx-seq__meta { flex: 1 1 100%; color: var(--ktx-muted); font-size: 12.5px; }
.ktx-seq__why { margin: 8px 0 0; color: var(--ktx-muted); font-size: 12.5px; }
.ktx-seq__body { margin-top: 14px; border-top: 1px solid var(--ktx-line); padding-top: 4px; }

/* Two plain sections: what starts it, and what it says. */
.ktx-seq__sec { padding: 14px 0; border-bottom: 1px solid var(--ktx-line-soft); }
.ktx-seq__h { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ktx-muted); font-weight: 600; }
.ktx-seq__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ktx-seq__grid .ktx-field { margin-bottom: 0; }
.ktx-seq__note { margin: 4px 0 0; color: var(--ktx-faint); font-size: 12.5px; }

/* A checkbox with a sentence under it reads as a setting, not a stray tick. */
.ktx-seq__toggle { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 10px 12px;
	background: var(--ktx-canvas); border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm); cursor: pointer; }
.ktx-seq__toggle input { margin-top: 2px; flex: none; }
.ktx-seq__toggle b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ktx-ink); }
.ktx-seq__toggle em { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; color: var(--ktx-muted); line-height: 1.45; }

.ktx-seq__tags { margin: -4px 0 12px; font-size: 12.5px; color: var(--ktx-muted); }
.ktx-seq__tags .ktx-tag-chip { margin-left: 4px; }

/* The messages, numbered down a rail so the order is the first thing you see. */
.ktx-seq__steps { position: relative; }
.ktx-seq__steps::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: var(--ktx-line); border-radius: 2px; }
.ktx-seq__step { position: relative; display: flex; gap: 12px; margin-bottom: 10px; }
.ktx-seq__step:last-child { margin-bottom: 0; }
.ktx-seq__num { position: relative; z-index: 1; flex: none; width: 28px; height: 28px; margin-top: 4px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700;
	background: var(--ktx-brand-tint); color: var(--ktx-brand); border: 2px solid #fff; }
.ktx-seq__stepmain { flex: 1; min-width: 0; background: var(--ktx-canvas); border: 1px solid var(--ktx-line); border-radius: 12px; padding: 10px 12px 12px; }
.ktx-seq__stepbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.ktx-seq__when { color: var(--ktx-faint); font-size: 12.5px; }
.ktx-seq__stepbar .ktx-int-iconbtn { margin-left: auto; }
.ktx-seq__step textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm);
	font: inherit; font-size: 13.5px; line-height: 1.5; background: #fff; resize: vertical; }
.ktx-seq__step textarea:focus { outline: 2px solid var(--ktx-brand); outline-offset: 1px; border-color: transparent; }
.ktx-seq__step .ktx-int-meter { display: block; margin-top: 5px; }

.ktx-seq__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 14px; }
.ktx-seq__start { display: flex; gap: 6px; margin-left: auto; }
.ktx-seq__start select { padding: 6px 8px; border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm); font: inherit; font-size: 13px; background: var(--ktx-canvas); }
.ktx-seq__active { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ktx-ink); cursor: pointer; }
@media (max-width: 640px) {
	.ktx-seq__start { margin-left: 0; width: 100%; }
	.ktx-seq__start select { flex: 1; min-width: 0; }
	.ktx-seq__steps::before { display: none; }
	.ktx-seq__step { gap: 8px; }
}

/* Dashboard: tiles, one chart, two tables. */
.ktx-shell:not([data-db="1"]) #ktx-db-view { display: none; }
.ktx-shell[data-db="1"] .ktx-list,
.ktx-shell[data-db="1"] .ktx-thread,
.ktx-shell[data-db="1"] .ktx-details,
.ktx-shell[data-db="1"] #ktx-contacts-view { display: none !important; }
.ktx-shell[data-db="1"] #ktx-db-view { display: flex; }
.ktx-db-body { flex: 1; background: var(--ktx-canvas); padding: 20px 16px 40px; overflow: auto; }
.ktx-db-tiles { max-width: 860px; margin: 0 auto 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.ktx-db-tile { background: #fff; border: 1px solid var(--ktx-line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; }
.ktx-db-tile.is-link { cursor: pointer; }
.ktx-db-tile.is-link:hover { border-color: var(--ktx-brand); }
.ktx-db-tile__n { font-size: 26px; font-weight: 700; color: var(--ktx-ink); line-height: 1.1; }
.ktx-db-tile__l { font-size: 13.5px; color: var(--ktx-ink); }
.ktx-db-tile__s { font-size: 12.5px; color: var(--ktx-muted); }
.ktx-db-chart { max-width: 860px; margin: 0 auto 16px; background: #fff; border: 1px solid var(--ktx-line); border-radius: 16px; padding: 16px 18px; }
.ktx-db-chart__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.ktx-db-chart__head h3 { margin: 0; font-size: 15px; }
.ktx-db-chart__head span { margin-left: auto; font-size: 12.5px; color: var(--ktx-muted); }
.ktx-db-plot { display: flex; align-items: flex-end; gap: 2px; height: 120px; border-bottom: 1px solid var(--ktx-line); }
.ktx-db-col { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.ktx-db-bar { display: block; width: 100%; background: var(--ktx-brand); border-radius: 3px 3px 0 0; transition: background .15s; }
.ktx-db-col:hover .ktx-db-bar { background: var(--ktx-ink); }
.ktx-db-chart__foot { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--ktx-faint); }
.ktx-db-chart__none { margin: 0; color: var(--ktx-muted); font-size: 13.5px; }
.ktx-db-panel { max-width: 860px; margin: 0 auto 16px; background: #fff; border: 1px solid var(--ktx-line); border-radius: 16px; padding: 16px 18px; }
.ktx-db-panel h3 { margin: 0 0 6px; font-size: 15px; }
.ktx-db-note { margin: 0 0 12px; color: var(--ktx-muted); font-size: 12.5px; line-height: 1.5; }
.ktx-db-scope { max-width: 860px; margin: 0 auto; }
.ktx-db-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ktx-db-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ktx-muted); font-weight: 600; padding: 0 8px 6px 0; }
.ktx-db-table td { padding: 8px 8px 8px 0; border-top: 1px solid var(--ktx-line); color: var(--ktx-ink); }
.ktx-db-table th:not(:first-child), .ktx-db-table td:not(:first-child) { text-align: right; width: 88px; }
.ktx-db-muted { color: var(--ktx-muted); font-weight: 400; font-size: 12.5px; }
.ktx-db-bad { color: #b42318; font-weight: 600; }
@media (max-width: 640px) {
	.ktx-db-table th:not(:first-child), .ktx-db-table td:not(:first-child) { width: 60px; }
	.ktx-db-chart svg { height: 96px; }
}

/* ---- The followup library, and the link to it from a connection ---- */
.ktx-tpl { max-width: 760px; margin: 0 auto 18px; }
.ktx-tpl__lead { margin: 0 0 6px; font-size: 13px; color: var(--ktx-muted); }
.ktx-tpl__group { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ktx-muted); font-weight: 600; }
.ktx-tpl__row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; margin-bottom: 6px;
	background: #fff; border: 1px solid var(--ktx-line); border-radius: 12px; }
.ktx-tpl__row.is-used { background: #fcfbff; border-color: var(--ktx-brand-tint); }
.ktx-tpl__name { flex: 1; min-width: 0; }
.ktx-tpl__name b { display: block; font-size: 14px; color: var(--ktx-ink); }
.ktx-tpl__name em { display: block; margin-top: 1px; font-style: normal; font-size: 12.5px; line-height: 1.4; color: var(--ktx-muted); }
.ktx-tpl__row .ktx-tpl__meta { flex: none; width: 96px; text-align: right; font-size: 12px; line-height: 1.35; color: var(--ktx-faint); }
.ktx-tpl__row .ktx-btn, .ktx-tpl__row .ktx-btn-ghost { flex: none; }
.ktx-tpl__more { margin-top: 14px; }
.ktx-tpl__more > summary { cursor: pointer; font-size: 13px; color: var(--ktx-muted); padding: 8px 0; }
.ktx-tpl__more > summary:hover { color: var(--ktx-brand); }
@media (max-width: 640px) {
	.ktx-tpl__row { flex-wrap: wrap; gap: 8px; }
	.ktx-tpl__row .ktx-tpl__meta { width: auto; text-align: left; }
	.ktx-tpl__name { flex: 1 1 100%; }
}

.ktx-int-fu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--ktx-line); }
.ktx-int-fu__l { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ktx-muted); font-weight: 600; }
.ktx-int-fu__none { font-size: 13px; color: var(--ktx-muted); }
.ktx-int-fu__chip { display: inline-flex; flex-direction: column; gap: 1px; text-align: left; font: inherit; font-size: 13px; cursor: pointer;
	background: #fff; border: 1px solid var(--ktx-line); border-radius: 10px; padding: 6px 10px; color: var(--ktx-ink); }
.ktx-int-fu__chip:hover { border-color: var(--ktx-brand); }
.ktx-int-fu__chip.is-on { border-color: var(--ktx-brand); background: #fcfbff; }
.ktx-int-fu__chip em { font-style: normal; font-size: 11.5px; color: var(--ktx-muted); }
.ktx-int-fu__add { margin-left: auto; }
.ktx-int-chase__l { display: block; margin: 8px 0 2px; font-size: 12.5px; color: var(--ktx-muted); }
@media (max-width: 640px) {
	.ktx-int-fu__add { margin-left: 0; }
}

/* ---- Opportunities: the board ---- */
.ktx-op-actions { display: flex; gap: 8px; }
.ktx-op-body { padding: 16px 20px 24px; overflow: auto; height: 100%; }
/* Equal columns, so every one of them is a target you can drop into even
   when it is empty. A lane that shrinks to its contents is a lane you have to
   aim at. */
.ktx-op-board { display: flex; gap: 12px; align-items: stretch; padding-bottom: 8px; }
.ktx-op-lane { flex: 1 1 0; min-width: 210px; background: var(--ktx-canvas); border: 1px solid var(--ktx-line); border-radius: 14px; display: flex; flex-direction: column; }
.ktx-op-lane__head { display: flex; align-items: center; gap: 8px; padding: 11px 13px 9px; border-bottom: 1px solid var(--ktx-line); flex-wrap: wrap; }
.ktx-op-lane__head b { font-size: 13.5px; color: var(--ktx-ink); }
.ktx-op-lane__n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #fff; border: 1px solid var(--ktx-line);
	display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; color: var(--ktx-muted); }
.ktx-op-lane__says { display: inline-flex; align-items: center; gap: 4px; flex: 1 1 100%; font-size: 11.5px; color: var(--ktx-brand); }
.ktx-op-lane__says svg { width: 12px; height: 12px; }
.ktx-op-lane__drop { flex: 1; min-height: 260px; padding: 10px; display: flex; flex-direction: column; gap: 8px; border-radius: 0 0 14px 14px; transition: background .12s; }
.ktx-op-lane__drop.is-over { background: var(--ktx-brand-tint); outline: 2px dashed var(--ktx-brand); outline-offset: -4px; }
.ktx-op-lane__empty { margin: 4px 0; font-size: 12.5px; color: var(--ktx-faint); }

.ktx-op-card { background: #fff; border: 1px solid var(--ktx-line); border-radius: 11px; padding: 10px 12px; cursor: grab; }
.ktx-op-card:hover { border-color: var(--ktx-brand); }
.ktx-op-card:focus-visible { outline: 2px solid var(--ktx-brand); outline-offset: 1px; }
.ktx-op-card.is-dragging { opacity: .45; cursor: grabbing; }
.ktx-op-card.is-open { cursor: default; border-color: var(--ktx-brand); box-shadow: 0 6px 18px rgba(31, 13, 77, .08); }
.ktx-op-card__head { display: flex; align-items: baseline; gap: 8px; }
.ktx-op-card__head b { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ktx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ktx-op-card__when { flex: none; font-size: 11.5px; color: var(--ktx-faint); }
.ktx-op-card__title { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--ktx-brand); }
.ktx-op-card__note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ktx-muted); }
.ktx-op-card__from { display: block; margin-top: 5px; font-size: 11.5px; color: var(--ktx-faint); }
.ktx-op-card__body { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ktx-line-soft); cursor: default; }
.ktx-op-card__body .ktx-field { margin-bottom: 8px; }
.ktx-op-card__body textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--ktx-line); border-radius: var(--ktx-radius-sm);
	font: inherit; font-size: 13px; line-height: 1.45; background: var(--ktx-canvas); resize: vertical; }
.ktx-op-card__body textarea:focus { outline: 2px solid var(--ktx-brand); outline-offset: 1px; border-color: transparent; }
.ktx-op-card__row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ktx-op-hint { max-width: 760px; margin: 14px auto 0; font-size: 12.5px; line-height: 1.5; color: var(--ktx-muted); text-align: center; }
.ktx-op-body { display: flex; flex-direction: column; }
.ktx-op-body > .ktx-op-board { flex: none; }
.ktx-op-stage { display: grid; grid-template-columns: 200px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--ktx-line-soft); }
.ktx-op-stage .ktx-field { margin-bottom: 0; }

@media (max-width: 900px) {
	/* On a phone the board scrolls sideways one column at a time rather than
	   squeezing five columns into a width that fits none of them. */
	.ktx-op-board { overflow-x: auto; scroll-snap-type: x mandatory; }
	.ktx-op-lane { flex: 0 0 78%; scroll-snap-align: start; }
	.ktx-op-stage { grid-template-columns: 1fr; gap: 8px; }
}

/* ---- Start here: the first four things, on the first screen ---- */
.ktx-su { max-width: 860px; margin: 0 auto 18px; background: #fff; border: 1px solid var(--ktx-brand); border-radius: 16px; padding: 16px 18px;
	box-shadow: 0 1px 2px rgba(31, 13, 77, .04), 0 8px 24px rgba(31, 13, 77, .06); }
.ktx-su.is-all { border-color: var(--ktx-line); box-shadow: none; }
.ktx-su__head { display: flex; align-items: center; gap: 10px; }
.ktx-su__head h3 { margin: 0; font-size: 16px; }
.ktx-su__count { padding: 2px 9px; border-radius: 999px; background: var(--ktx-brand-tint); color: var(--ktx-brand); font-size: 12px; font-weight: 700; }
.ktx-su__head .ktx-btn-ghost { margin-left: auto; }
.ktx-su__note { margin: 6px 0 12px; font-size: 13px; line-height: 1.5; color: var(--ktx-muted); }
.ktx-su__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ktx-su__step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--ktx-canvas); border: 1px solid var(--ktx-line); border-radius: 12px; }
.ktx-su__step.is-done { background: #fcfbff; border-color: var(--ktx-brand-tint); }
.ktx-su__tick { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	font-size: 12.5px; font-weight: 700; background: #fff; border: 1px solid var(--ktx-line); color: var(--ktx-muted); }
.ktx-su__step.is-done .ktx-su__tick { background: var(--ktx-brand); border-color: var(--ktx-brand); color: #fff; }
.ktx-su__what { flex: 1; min-width: 0; }
.ktx-su__what b { display: block; font-size: 14px; color: var(--ktx-ink); }
.ktx-su__what em { display: block; margin-top: 1px; font-style: normal; font-size: 12.5px; line-height: 1.4; color: var(--ktx-muted); }
.ktx-su__did { flex: none; font-size: 12.5px; font-weight: 600; color: var(--ktx-brand); }
@media (max-width: 640px) {
	.ktx-su__step { flex-wrap: wrap; }
	.ktx-su__what { flex: 1 1 calc(100% - 38px); }
	.ktx-su__step .ktx-btn, .ktx-su__did { margin-left: 38px; }
}