/**
 * NouSupport shared interface system.
 * Loaded by both wp-admin and the customer portal so core styling stays aligned.
 */
:root {
  --ns-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ns-page-bg: #f3f4f6;
  --ns-surface: #ffffff;
  --ns-surface-muted: #f7f9fa;
  --ns-border: #dfe3e8;
  --ns-border-soft: #edf0f2;
  --ns-text: #1f2933;
  --ns-text-soft: #4b5563;
  --ns-text-muted: #6b7280;
  /* Slate used for the small upper-case section labels above form groups. */
  --ns-accent-label: #5b6b7c;
  --ns-primary: #4aba70;
  --ns-primary-hover: #3da361;
  --ns-private: #e9563f;
  --ns-private-dark: #c84a36;
  --ns-public: #1d4ed8;
  --ns-warning: #f59e0b;
  --ns-radius: 6px;
  --ns-radius-sm: 4px;
  /* Control metrics — one source of truth for every text field, select, and
     button in both surfaces. Before these existed each component set its own
     padding (8/9/10/12/13px), so inputs, selects and buttons standing next to
     each other were visibly different heights. */
  --ns-control-h: 40px;
  --ns-control-h-sm: 32px;
  --ns-control-px: 13px;
  --ns-control-fz: 14px;
  --ns-textarea-h: 96px;
  --ns-shadow-sm: 0 8px 24px rgba(31, 41, 51, 0.08);
  --ns-shadow-md: 0 10px 26px rgba(31, 41, 51, 0.06);
  --ns-shadow-ticket: 0 16px 34px rgba(31, 41, 51, 0.10);
}

.nousupport-admin,
.nousupport-portal {
  font-family: var(--ns-font-family);
  color: var(--ns-text);
}

.nousupport-admin *,
.nousupport-portal * {
  box-sizing: border-box;
}

.nousupport-admin button,
.nousupport-admin input,
.nousupport-admin select,
.nousupport-admin textarea,
.nousupport-portal button,
.nousupport-portal input,
.nousupport-portal select,
.nousupport-portal textarea {
  font-family: var(--ns-font-family);
}

.nousupport-admin input[type="text"],
.nousupport-admin input[type="email"],
.nousupport-admin input[type="password"],
.nousupport-admin input[type="search"],
.nousupport-admin input[type="url"],
.nousupport-admin input[type="number"],
.nousupport-admin select,
.nousupport-admin textarea,
.nousupport-portal input[type="text"],
.nousupport-portal input[type="email"],
.nousupport-portal input[type="password"],
.nousupport-portal input[type="search"],
.nousupport-portal input[type="url"],
.nousupport-portal input[type="number"],
.nousupport-portal select,
.nousupport-portal textarea {
  border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius-sm);
  background: var(--ns-surface);
  color: var(--ns-text);
  /* Size lives here, not in each component, so a field and the select or button
     beside it always line up. Height is a min so a value that wraps can still
     grow. */
  min-height: var(--ns-control-h);
  padding: 0 var(--ns-control-px);
  font-size: var(--ns-control-fz);
  line-height: 1.4;
}

/* Multi-line inputs need real vertical padding and a taller floor. */
.nousupport-admin textarea,
.nousupport-portal textarea {
  min-height: var(--ns-textarea-h);
  padding: 10px var(--ns-control-px);
  resize: vertical;
}

/* Buttons match field height so a row of "input + button" is flush. The link
   style buttons are deliberately excluded: they sit inside table cells and
   sentences where a 40px box would break the line. */
.nousupport-admin .nousupport-btn,
.nousupport-portal .ns-btn,
.nousupport-portal .ns-envato-verify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--ns-control-h);
  padding: 0 16px;
  font-size: var(--ns-control-fz);
  line-height: 1.2;
  white-space: nowrap;
}

.nousupport-portal .ns-btn-block,
.nousupport-portal .ns-envato-verify {
  width: 100%;
}

.nousupport-admin input:focus,
.nousupport-admin select:focus,
.nousupport-admin textarea:focus,
.nousupport-portal input:focus,
.nousupport-portal select:focus,
.nousupport-portal textarea:focus {
  outline: none;
  border-color: var(--ns-primary);
  box-shadow: 0 0 0 2px rgba(74, 186, 112, 0.14);
}

.ns-shared-panel,
.ns-submit-shell,
.ns-ticket-sidebar,
.ns-replies-list,
.ns-queue-sidebar,
.ns-ticket-card,
.ns-auth-box,
.ns-table,
.ns-reply-form {
  background: var(--ns-surface);
  border-color: var(--ns-border);
  border-radius: var(--ns-radius);
}

.ns-btn,
.nousupport-btn,
.ns-btn-reply,
.ns-envato-verify,
.ns-attachment-button,
.ns-btn-attach-outline,
.ns-reply-tab,
.ns-queue-sidebar button {
  border-radius: var(--ns-radius-sm);
}

.ns-btn-primary,
.nousupport-btn-primary,
.ns-btn-reply,
.ns-envato-verify,
.ns-reply-tab.active,
a.ns-btn-primary,
a.nousupport-btn-primary,
a.ns-btn-reply,
a.ns-envato-verify {
  background: var(--ns-primary);
  color: #fff !important;
}

.ns-btn-primary:hover,
.nousupport-btn-primary:hover,
.ns-btn-reply:hover,
.ns-envato-verify:hover,
a.ns-btn-primary:hover,
a.nousupport-btn-primary:hover,
a.ns-btn-reply:hover,
a.ns-envato-verify:hover {
  background: var(--ns-primary-hover);
  color: #fff !important;
}

/* Wireframe `.pill`: a small tinted capsule, sentence case, no outline. It was
   a 30px upper-case slab with a 2px border, which turned every status into a
   button-sized shout — and the wireframe spells the labels "Open", "Needs
   Response", "published", so upper-casing them here also contradicted the copy. */
.ns-status-pill,
.ns-status,
.nousupport-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 9px;
	border-radius: 11px;
	border: 1px solid transparent;
	font-weight: 600;
	font-size: 11px;
	line-height: 1.5;
	max-width: none;
	min-width: max-content;
	overflow: visible;
	white-space: nowrap;
}

/* Shared ticket detail layout */
.ns-ticket-detail-page {
	max-width: 1100px;
	margin: 0 auto;
}

.nousupport-portal .ns-ticket-detail-page {
	width: 100%;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	transform: none;
}

.ns-ticket-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}

.ns-ticket-top-status {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ns-text-muted);
	font-size: 12px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.ns-back-link {
	color: var(--ns-primary);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
}

.ns-back-link:hover {
	text-decoration: underline;
}

.ns-back-link:focus-visible,
.ns-btn:focus-visible,
.ns-btn-primary:focus-visible,
.ns-btn-secondary:focus-visible,
.ns-reply-launch:focus-visible,
.ns-reply-editor-toolbar button:focus-visible,
.ns-btn-reply:focus-visible,
.ns-btn-attach-outline:focus-visible,
.ns-btn-cancel-reply:focus-visible,
.ns-file-link:focus-visible,
.ns-selected-file-remove:focus-visible {
	outline: 3px solid rgba(74, 186, 112, 0.28);
	outline-offset: 3px;
}

.ns-ticket-shell {
	overflow: hidden;
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius);
	background: var(--ns-surface);
	box-shadow: var(--ns-shadow-md);
}

/* Visibility marker, not an alarm. A saturated full-width bar read as an error
   banner and drowned out the ticket subject beneath it; the state is now carried
   by a tinted strip with an accent edge, which is what the wireframe shows. */
.ns-ticket-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	min-height: 40px;
	padding: 10px 24px;
	border-bottom: 1px solid var(--ns-border-soft);
	border-left: 4px solid var(--ns-private);
	border-radius: 0;
	background: var(--ns-surface-muted);
	color: var(--ns-text-soft);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ns-ticket-banner--private { border-left-color: var(--ns-private); }
.ns-ticket-banner--public { border-left-color: var(--ns-public); }

.ns-ticket-privacy-icon {
	position: relative;
	display: inline-flex;
	width: 17px;
	height: 14px;
	border: 2px solid currentColor;
	border-radius: 2px;
}

.ns-ticket-privacy-icon::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 9px;
	width: 10px;
	height: 9px;
	border: 2px solid currentColor;
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	transform: translateX(-50%);
}

.ns-ticket-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 20px 24px;
	border-bottom: 1px solid var(--ns-border);
	background: var(--ns-surface);
}

.ns-ticket-hero-copy {
	min-width: 0;
}

/* The subject is the heading of the page, not a display banner: 20px bold, as
   the wireframe shows. At 30px/300 it read as a hero title and pushed the
   status pill and the conversation below the fold.

   Scoped per surface rather than left bare: portal.css neutralises bare
   headings via `#nousupport-portal` so a block theme's prose rules cannot
   restyle them, and that reset would otherwise outrank a lone
   `.ns-ticket-subject`. The ID clears it in either load order; admin has no
   such competition, so a class is enough there. */
#nousupport-portal .ns-ticket-subject,
.nousupport-admin .ns-ticket-subject {
	margin: 0;
	color: var(--ns-text);
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0;
}

.ns-ticket-hero-meta {
	margin-top: 6px;
	color: var(--ns-text-muted);
	font-size: 13px;
}

.ns-ticket-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 24px;
	align-items: start;
}

.ns-ticket-layout--customer {
	display: block;
}

.ns-ticket-main {
	min-width: 0;
}

.ns-ticket-layout--customer .ns-ticket-main {
	width: 100%;
}

.ns-reply-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 0;
	position: relative;
	z-index: 1;
}

.ns-reply-tab {
	padding: 8px 14px;
	border: 1px solid var(--ns-border);
	border-bottom: 0;
	background: var(--ns-surface-muted);
	color: var(--ns-text-muted);
	cursor: pointer;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3px;
}

.ns-reply-form {
	border: 1px solid var(--ns-border);
	border-radius: 0 var(--ns-radius) var(--ns-radius) var(--ns-radius);
	overflow: hidden;
	margin-bottom: 24px;
	background: var(--ns-surface);
	box-shadow: var(--ns-shadow-md);
}

.ns-customer-reply-form {
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	border-width: 0 0 1px;
}

/* Wireframe A4 puts POST REPLY and Cancel in a plain `.btnrow` standing on the
   composer, not in a footer strip. The muted band read as a second toolbar
   wedged under the editor, and its side padding pushed the buttons out of line
   with the dropzone above. Same correction the admin composer already carries
   (admin.css `.ns-reply-actions`). */
.ns-customer-reply-form .ns-reply-actions {
	padding: 14px 0 0;
	border-top: 0;
	background: none;
}

/* Sits on the panel, not on a grey band: the band made the action row look like
   a separate toolbar wedged between the ticket and its conversation. */
.ns-customer-reply-launch-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 16px 24px;
	border-bottom: 1px solid var(--ns-border-soft);
	background: var(--ns-surface);
}

/* Primary action on the ticket, as the wireframe marks it. The old white card
   with a drop shadow read as a floating widget rather than the one button the
   customer is meant to press. */
.ns-reply-launch {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	max-width: 100%;
	min-height: 38px;
	padding: 8px 16px;
	border: 1px solid var(--ns-primary);
	border-radius: var(--ns-radius-sm);
	background: var(--ns-primary);
	color: #fff;
	cursor: pointer;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}

.ns-reply-launch:hover {
	background: var(--ns-primary-hover);
	border-color: var(--ns-primary-hover);
	color: #fff;
}

.ns-reply-launch-icon {
	position: relative;
	width: 15px;
	height: 12px;
	border-radius: 2px;
	background: currentColor;
}

.ns-reply-launch-icon::after {
	content: "";
	position: absolute;
	left: 3px;
	bottom: -4px;
	width: 0;
	height: 0;
	border-top: 5px solid currentColor;
	border-right: 6px solid transparent;
}

.ns-reply-launch kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	border: 1px solid #cfd3d8;
	border-radius: 4px;
	background: #f5f6f7;
	color: #8a8f96;
	font-size: 11px;
	font-family: inherit;
	line-height: 1;
}

.ns-reply-editor-toolbar {
	display: flex;
	align-items: stretch;
	min-height: 56px;
	border-bottom: 1px solid var(--ns-border);
	background: var(--ns-surface);
}

.ns-reply-editor-toolbar button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	padding: 0 16px;
	border: 0;
	border-right: 1px solid var(--ns-border-soft);
	background: var(--ns-surface);
	color: var(--ns-text);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	white-space: nowrap;
}

.ns-reply-editor-toolbar button:hover {
	background: var(--ns-surface-muted);
}

.ns-reply-editor-toolbar button[data-format="list"],
.ns-reply-editor-toolbar button[data-format="link"] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.ns-reply-form textarea {
	width: 100%;
	border: 0;
	padding: 26px 28px;
	min-height: 260px;
	font-size: 18px;
	line-height: 1.6;
	resize: vertical;
}

.ns-reply-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 14px 24px;
	border-top: 1px solid var(--ns-border-soft);
	background: var(--ns-surface-muted);
}

.ns-btn-reply {
	min-height: 34px;
	padding: 8px 14px;
	border: 0;
	border-radius: var(--ns-radius-sm);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.9px;
	cursor: pointer;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}

.ns-btn-attach-outline {
	min-height: 34px;
	padding: 8px 14px;
	border: 1px solid var(--ns-primary);
	background: var(--ns-surface);
	color: var(--ns-primary);
	border-radius: var(--ns-radius-sm);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	letter-spacing: 0.9px;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Cancel is a button in the wireframe's action row, the same shape as the
   POST REPLY beside it. As borderless grey text it read as a caption next to the
   one real button — the same reason admin's `.ns-btn-cancel` was given a border. */
.ns-btn-cancel-reply {
	min-height: 34px;
	padding: 8px 14px;
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius-sm);
	background: var(--ns-surface);
	color: var(--ns-text-soft);
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.ns-btn-cancel-reply:hover {
	border-color: var(--ns-text-muted);
	color: var(--ns-text);
}

.ns-customer-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	left: -9999px;
}

.ns-attach-limit {
	color: var(--ns-text-muted);
	font-size: 12px;
}

.ns-attach-count {
	color: var(--ns-text-muted);
	font-size: 12px;
}

.ns-selected-files {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px 16px 16px;
	border-top: 1px solid var(--ns-border-soft);
	background: var(--ns-surface);
}

.ns-submit-section .ns-selected-files {
	padding: 12px 0 0;
	border-top: 0;
}

.ns-selected-file {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	max-width: min(100%, 360px);
	padding: 9px 10px;
	border-radius: var(--ns-radius-sm);
	background: #2d9bef;
	color: #fff;
	font-size: 13px;
	line-height: 1.2;
}

.ns-selected-file-icon {
	font-size: 14px;
	line-height: 1;
}

.ns-selected-file-name {
	min-width: 0;
	max-width: 190px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ns-selected-file-size {
	color: rgba(255, 255, 255, 0.72);
	white-space: nowrap;
}

.ns-selected-file-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
}

.ns-selected-file-remove:hover {
	background: rgba(255, 255, 255, 0.18);
}

.ns-replies-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	border: 0;
	background: var(--ns-surface);
}

/* Conversation rows follow the wireframe scale: a 40px avatar, a 13px byline
   and 14px body copy. They used to be set at display sizes (64px avatar, 20px
   byline, 34/42px padding), which turned a three-message thread into several
   screens of scrolling and made every reply shout as loudly as the subject. */
.ns-reply-item {
	display: flex;
	gap: 14px;
	padding: 18px 24px;
	border-bottom: 1px solid var(--ns-border-soft);
}

.ns-reply-item:last-child {
	border-bottom: 0;
}

.ns-reply-avatar img {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #e5e7eb;
}

.ns-reply-body {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	line-height: 1.65;
}

.ns-reply-item--agent .ns-reply-body {
	border-left: 0;
	padding-left: 0;
}

.ns-reply-item--customer .ns-reply-body {
	border-left: 0;
	padding-left: 0;
}

.ns-reply-meta {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 6px;
	font-size: 13px;
	line-height: 1.3;
}

/* The wireframe byline puts the author in bold (`.msg .mt b`); at 500 the name
   carried no more weight than the "replied · 2h ago" trailing it. */
.ns-reply-meta strong {
	color: #111827;
	font-weight: 700;
}

.ns-reply-action,
.ns-reply-sep,
.ns-reply-meta time {
	color: #8b8f96;
	font-weight: 400;
}

/* "Jane · replied · 1 hour ago" reads as one byline, as the wireframe writes
   it. Pushing the timestamp to the far right split it into two things to read. */
.ns-reply-meta time {
	font-size: 13px;
	white-space: nowrap;
}

.ns-reply-content {
	color: var(--ns-text-soft);
	font-size: 14px;
	line-height: 1.7;
}

.ns-reply-files {
	display: block;
	margin-top: 10px;
}

.ns-reply-files-title {
	margin-bottom: 6px;
	color: var(--ns-text-muted);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.9px;
	text-transform: uppercase;
}

.ns-reply-file-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Outlined chip, matching the wireframe's .tag — an attachment is a label on
   the message, not a filled button competing with the reply itself. */
.ns-file-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 26px;
	max-width: 100%;
	padding: 3px 9px;
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius-sm);
	background: var(--ns-surface);
	color: var(--ns-text-soft);
	font-size: 12px;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.ns-file-link:hover {
	border-color: var(--ns-primary);
	color: var(--ns-text);
}

.ns-file-icon {
	position: relative;
	flex: 0 0 auto;
	width: 11px;
	height: 14px;
	border: 1px solid #a6adb7;
	border-radius: 2px;
}

.ns-file-icon::after {
	content: "";
	position: absolute;
	top: -1px;
	right: -1px;
	width: 5px;
	height: 5px;
	border-left: 1px solid #a6adb7;
	border-bottom: 1px solid #a6adb7;
	background: var(--ns-surface);
}

.ns-ticket-sidebar {
	position: sticky;
	top: 40px;
	border: 1px solid var(--ns-border);
	background: var(--ns-surface);
}

.ns-sidebar-title {
	margin: 0;
	padding: 14px 16px;
	border-bottom: 1px solid var(--ns-border-soft);
	color: var(--ns-text-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.ns-purchase-card {
	margin: 12px;
	overflow: hidden;
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius);
}

.ns-purchase-card--verified { border-color: var(--ns-primary); }
.ns-purchase-card--unverified { border-color: var(--ns-warning); }

.ns-purchase-badge {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.3px;
}

.ns-purchase-card--verified .ns-purchase-badge { background: var(--ns-primary); color: #fff; }
.ns-purchase-card--unverified .ns-purchase-badge { background: #fef3c7; color: #92400e; }

.ns-purchase-details { padding: 12px 14px; }
.ns-purchase-details strong { display: block; margin-top: 8px; color: var(--ns-text-muted); font-size: 11px; }
.ns-purchase-details strong:first-child { margin-top: 0; }
.ns-purchase-details p { margin: 2px 0 0; color: var(--ns-text); font-size: 13px; }
.ns-code { font-family: "SF Mono", Monaco, Consolas, monospace; font-size: 11px; word-break: break-all; }

.ns-sidebar-info { padding: 8px 0; }
.ns-info-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border-bottom: 1px solid var(--ns-border-soft);
}
.ns-info-row:last-child { border-bottom: 0; }
.ns-info-label { min-width: 70px; color: var(--ns-text-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; }
.ns-info-value { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--ns-text); font-size: 13px; }
.ns-info-value a { color: var(--ns-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.ns-mini-avatar { width: 20px; height: 20px; border-radius: 50%; }

/* One status vocabulary for both surfaces. These used to be outlined in the
   brand colour, which read as an interactive control and meant the same status
   looked different on the portal and in wp-admin. */
.ns-status-pill--open {
	border-color: #fbd5d5;
	background: #fee2e2;
	color: #991b1b;
}

.ns-status-pill--in_progress {
	border-color: #c7dbfd;
	background: #dbeafe;
	color: #1e40af;
}

.ns-status-pill--waiting {
	border-color: #fbe6b8;
	background: #fff4d6;
	color: #975a16;
}

.ns-status-pill--resolved {
	border-color: #bbf7d0;
	background: #dcfce7;
	color: #166534;
}

.ns-status-pill--closed {
	border-color: #e5e7eb;
	background: #f3f4f6;
	color: #4b5563;
}

@media (max-width: 800px) {
	.ns-ticket-topbar,
	.ns-reply-meta {
		align-items: flex-start;
		flex-direction: column;
	}

	.nousupport-portal .ns-ticket-detail-page {
		width: 100%;
		max-width: none;
		margin-left: auto;
		transform: none;
	}

	.ns-ticket-banner {
		padding: 16px 20px;
		font-size: 12px;
		letter-spacing: 1px;
	}

	.ns-ticket-hero {
		align-items: flex-start;
		flex-direction: row;
		gap: 16px;
		padding: 20px;
	}

	#nousupport-portal .ns-ticket-subject,
	.nousupport-admin .ns-ticket-subject {
		font-size: 19px;
	}

	.ns-ticket-layout {
		grid-template-columns: 1fr;
	}

	.ns-ticket-sidebar {
		position: static;
	}

	.ns-customer-reply-launch-row {
		padding: 20px;
	}

	.ns-customer-reply-form {
		border-radius: 0;
	}

	.ns-reply-form textarea {
		min-height: 220px;
		padding: 20px;
		font-size: 16px;
	}

	.ns-reply-actions {
		padding: 16px 20px;
	}

	.ns-reply-item {
		gap: 12px;
		padding: 16px 20px;
	}

	.ns-reply-avatar {
		flex: 0 0 auto;
	}

	.ns-reply-avatar img {
		width: 36px;
		height: 36px;
	}

	.ns-reply-meta {
		gap: 4px;
		margin-bottom: 6px;
		font-size: 13px;
		line-height: 1.3;
	}

	.ns-reply-meta time {
		margin-left: 0;
		font-size: 12px;
	}

	.ns-reply-content {
		font-size: 14px;
	}

	.ns-reply-files {
		margin-top: 10px;
	}
}

@media (max-width: 480px) {
	.ns-ticket-banner {
		gap: 10px;
		padding: 16px 18px;
	}

	.ns-ticket-hero {
		align-items: flex-start;
		flex-direction: column;
		padding: 20px;
	}

	.ns-status-pill,
	.ns-status,
	.nousupport-status {
		min-height: 32px;
	}

	.ns-reply-launch {
		justify-content: center;
		width: 100%;
	}

	.ns-reply-editor-toolbar {
		overflow-x: auto;
	}

	.ns-reply-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.ns-btn-reply,
	.ns-btn-attach-outline {
		width: 100%;
	}

	.ns-attach-limit,
	.ns-attach-count,
	.ns-btn-cancel-reply {
		text-align: center;
	}

	.ns-reply-item {
		gap: 12px;
		padding: 16px 18px;
	}

	.ns-reply-avatar img {
		width: 32px;
		height: 32px;
	}

	.ns-reply-meta {
		font-size: 13px;
	}
}

/* ==========================================================================
   External link field (screen recording / large file)
   ========================================================================== */

.ns-form-field--external-link {
  margin-top: 10px;
}

.ns-form-field--external-link label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ns-text-soft, #4b5563);
}

/* Reply item: external link shown as full URL under attachments */
.ns-reply-external-link {
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid var(--ns-border-soft, #edf0f2);
  border-radius: var(--ns-radius-sm, 4px);
  background: var(--ns-surface-muted, #f7f9fa);
  font-size: 12px;
  word-break: break-all;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.ns-reply-external-link a {
  color: var(--ns-primary, #4aba70);
  text-decoration: none;
}

.ns-reply-external-link a:hover {
  text-decoration: underline;
}

.ns-external-link-icon {
  flex-shrink: 0;
  font-size: 13px;
}

/* ==========================================================================
   Editing: ticket details and your own messages
   Shared by the customer portal and the admin ticket screen so the two
   composers keep the same affordances.
   ========================================================================== */

/* The hero already right-aligns the status pill. Editing sits with it rather
   than beside the subject, where it competed with the page heading. */
.ns-ticket-hero-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.ns-btn-edit-ticket {
  padding: 5px 12px;
  border: 1px solid var(--ns-border, #dfe3e6);
  border-radius: var(--ns-radius-sm, 4px);
  background: var(--ns-surface, #fff);
  color: var(--ns-text-soft, #4b5563);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.ns-btn-edit-ticket:hover {
  border-color: var(--ns-primary, #4aba70);
  color: var(--ns-primary, #4aba70);
}

.ns-ticket-edit-form {
  padding: 18px 24px;
  border-bottom: 1px solid var(--ns-border, #dfe3e6);
  background: var(--ns-surface-muted, #f7f9fa);
}

.ns-ticket-edit-form .ns-form-field {
  margin-bottom: 12px;
}

.ns-ticket-edit-form label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ns-text-soft, #4b5563);
}

.ns-ticket-edit-form input[type="text"],
.ns-ticket-edit-form input[type="url"] {
  width: 100%;
  box-sizing: border-box;
}

/* "edited" is a footnote on the byline, not a status. It stays quiet and only
   the tooltip carries the timestamp, so the byline still reads as one line. */
.ns-reply-edited {
  color: #8b8f96;
  font-size: 12px;
  font-style: italic;
  cursor: help;
}

/* Pushed to the end of the byline row so it does not sit between the author
   and the timestamp, which read as part of the sentence. */
.ns-reply-edit-btn {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: var(--ns-radius-sm, 4px);
  background: none;
  color: #8b8f96;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.ns-reply-edit-btn:hover,
.ns-reply-edit-btn:focus-visible {
  border-color: var(--ns-border, #dfe3e6);
  color: var(--ns-primary, #4aba70);
}

.ns-reply-edit-form {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--ns-border, #dfe3e6);
  border-radius: var(--ns-radius-sm, 4px);
  background: var(--ns-surface-muted, #f7f9fa);
}

.ns-reply-edit-form input[type="url"],
.ns-reply-edit-form textarea {
  width: 100%;
  box-sizing: border-box;
}

/* The link hint runs to two lines on a narrow column; keep it readable rather
   than clipped against the field above it. */
.ns-form-field--external-link .ns-hint {
  display: block;
  margin-top: 4px;
  color: var(--ns-text-muted, #6b7280);
  font-size: 12px;
  line-height: 1.5;
}