/*
 * PWI Platform support desk: ticket inbox and chat-style conversation.
 * Presentation only; loaded after design-refresh.css and reuses its --nb-* tokens.
 */
.nb-sp { --sp-student: #b4540a; --sp-student-bg: #fdf1e3; --sp-staff: var(--nb-primary, #245145); --sp-staff-bg: #e7f1ec; color: var(--nb-text, #31404a); }
.nb-sp *, .nb-sp *::before, .nb-sp *::after { box-sizing: border-box; }
.nb-sp a { text-decoration: none; }
.nb-sp-icon { flex: 0 0 auto; vertical-align: -3px; }

/* Header + toolbar */
.nb-sp-top, .nb-sp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 4px 0 20px; }
.nb-sp-title { margin: 0 0 4px !important; font-size: 24px !important; line-height: 1.25; color: var(--nb-ink, #1f2a24); overflow-wrap: anywhere; }
.nb-sp-sub { margin: 0 !important; font-size: 14px !important; color: var(--nb-muted, #66736b); }
.nb-sp-newbtn { display: inline-flex; align-items: center; gap: 8px; }
.nb-sp-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 14px; font-weight: 600; font-size: 14px; color: var(--nb-primary, #245145); padding: 6px 12px 6px 6px; border-radius: 999px; }
.nb-sp-back:hover { background: var(--nb-soft, #eef3ee); }

/* New ticket */
.nb-sp-new { margin: 0 0 24px; background: #fff; border: 1px solid var(--nb-line, #e3e8e1); border-radius: var(--nb-radius, 14px); box-shadow: var(--nb-shadow); }
.nb-sp-new > summary { display: flex; align-items: center; gap: 8px; padding: 16px 20px; cursor: pointer; font-weight: 650; color: var(--nb-ink, #1f2a24); list-style: none; }
.nb-sp-new > summary::-webkit-details-marker { display: none; }
.nb-sp-new[open] > summary { border-bottom: 1px solid var(--nb-line, #e3e8e1); }
.nb-sp-new .nb-sp-form { padding: 20px; }

/* Forms */
.nb-sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.nb-sp-span { grid-column: 1 / -1; }
.nb-sp-field { margin: 0 0 16px !important; }
.nb-sp-field label, .nb-sp-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: #2f3d35; }
.nb-sp-field :is(input:not([type="file"]), select, textarea), .nb-sp-composer textarea { display: block; width: 100%; max-width: 100%; margin-top: 6px; }
.nb-sp-field textarea, .nb-sp-composer textarea { min-height: 110px; resize: vertical; }
.nb-sp-hint { margin: 0 0 14px !important; font-size: 13.5px !important; color: var(--nb-muted, #66736b); }
.nb-sp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.nb-sp-form--stack .nb-sp-field { margin-bottom: 14px !important; }

/* Status pills */
.nb-sp-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--nb-line, #e3e8e1); }
.nb-sp-pills a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--nb-text, #31404a); transition: background-color .15s ease; }
.nb-sp-pills a:hover { background: var(--nb-soft, #eef3ee); }
.nb-sp-pills a[aria-current="true"] { background: var(--nb-primary, #245145); color: #fff; font-weight: 600; box-shadow: 0 4px 12px rgba(36, 81, 69, .22); }
.nb-sp-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: rgba(36, 81, 69, .10); font-size: 12px; font-weight: 650; text-align: center; }
.nb-sp-pills a[aria-current="true"] .nb-sp-count { background: rgba(255, 255, 255, .22); }

/* Search */
.nb-sp-search { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; }
.nb-sp-searchbox { position: relative; flex: 1 1 280px; display: block; }
.nb-sp-searchbox .nb-sp-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--nb-muted, #66736b); pointer-events: none; }
.nb-sp-searchbox input { width: 100%; padding-left: 40px !important; margin: 0; }
.nb-sp-search select { min-width: 170px; margin: 0; }
.nb-sp-clear { font-size: 14px; font-weight: 600; padding: 8px 10px; }

/* Ticket list */
.nb-sp-list { display: flex; flex-direction: column; gap: 10px; }
.nb-sp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; background: #fff; border: 1px solid var(--nb-line, #e3e8e1); border-radius: var(--nb-radius, 14px); color: inherit; box-shadow: var(--nb-shadow); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.nb-sp-row:hover { border-color: #c4d2c1; box-shadow: var(--nb-shadow-hover); transform: translateY(-1px); }
.nb-sp-row.is-waiting { border-left: 4px solid #d97706; }
.nb-sp-row-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nb-sp-row-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.nb-sp-subject { font-size: 16px; color: var(--nb-ink, #1f2a24); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-sp-num { font-size: 13px; color: var(--nb-muted, #66736b); }
.nb-sp-preview { font-size: 14px; color: var(--nb-muted, #66736b); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nb-sp-preview b { color: #2f3d35; font-weight: 600; }
.nb-sp-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nb-sp-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: #f1f4f1; color: #4b5a52; font-size: 12.5px; font-weight: 550; line-height: 1.5; }
.nb-sp-chip--high { background: #fde8e6; color: #a1281c; }
.nb-sp-chip--low { background: #eef1f4; color: #5b6770; }
.nb-sp-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 13px; color: var(--nb-muted, #66736b); white-space: nowrap; }
.nb-sp-msgs { display: inline-flex; align-items: center; gap: 5px; }
.nb-sp-flag { padding: 3px 10px; border-radius: 999px; background: #fef3c7; color: #92400e; font-weight: 650; font-size: 12.5px; }
.nb-sp-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }

/* Status badges */
.nb-sp-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 650; line-height: 1.5; background: #eef1f4; color: #455560; }
.nb-sp-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nb-sp-status--open { background: #e0edff; color: #1d4ed8; }
.nb-sp-status--in_progress { background: #ede9fe; color: #6d28d9; }
.nb-sp-status--awaiting_student { background: #fef3c7; color: #92400e; }
.nb-sp-status--resolved { background: #dcfce7; color: #166534; }
.nb-sp-status--closed { background: #eceff1; color: #546e7a; }

/* Avatars */
.nb-sp-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.nb-sp-avatar--student { background: var(--sp-student-bg); color: var(--sp-student); }
.nb-sp-avatar--staff { background: var(--sp-staff-bg); color: var(--sp-staff); }

/* Conversation layout */
.nb-sp-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 1024px) { .nb-sp-layout { grid-template-columns: minmax(0, 1fr) 320px; } .nb-sp-side { position: sticky; top: 48px; } }
.nb-sp-thread { display: flex; flex-direction: column; gap: 14px; padding: 22px; background: var(--nb-soft-2, #f6f9f5); border: 1px solid var(--nb-line, #e3e8e1); border-radius: var(--nb-radius, 14px); }
.nb-sp-day { display: flex; align-items: center; gap: 12px; margin: 6px 0; color: var(--nb-muted, #66736b); font-size: 12.5px; font-weight: 600; }
.nb-sp-day::before, .nb-sp-day::after { content: ""; flex: 1; height: 1px; background: var(--nb-line, #e3e8e1); }

/* Message bubbles */
.nb-sp-msg { display: flex; gap: 12px; align-items: flex-end; max-width: 88%; }
.nb-sp-msg--theirs { align-self: flex-start; }
.nb-sp-msg--mine { align-self: flex-end; flex-direction: row-reverse; }
.nb-sp-bubble { min-width: 0; padding: 12px 16px 14px; background: #fff; border: 1px solid var(--nb-line, #e3e8e1); border-radius: 16px 16px 16px 4px; box-shadow: 0 1px 2px rgba(20, 40, 32, .05); }
.nb-sp-msg--mine .nb-sp-bubble { background: var(--nb-primary, #245145); border-color: var(--nb-primary, #245145); color: #fff; border-radius: 16px 16px 4px 16px; }
.nb-sp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 6px; font-size: 13px; }
.nb-sp-meta strong { font-size: 14px; }
.nb-sp-meta time { margin-left: auto; font-size: 12px; opacity: .7; }
.nb-sp-role { padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.nb-sp-role--student { background: var(--sp-student-bg); color: var(--sp-student); }
.nb-sp-role--staff { background: var(--sp-staff-bg); color: var(--sp-staff); }
.nb-sp-msg--mine .nb-sp-role { background: rgba(255, 255, 255, .20); color: #fff; }
.nb-sp-text { font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.nb-sp-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nb-sp-file { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--nb-soft, #eef3ee); color: var(--nb-primary, #245145); font-size: 13px; font-weight: 600; }
.nb-sp-msg--mine .nb-sp-file { background: rgba(255, 255, 255, .18); color: #fff; }

/* Composer */
.nb-sp-composer-wrap { margin-top: 16px; padding: 18px 20px 20px; background: #fff; border: 1px solid var(--nb-line, #e3e8e1); border-radius: var(--nb-radius, 14px); box-shadow: var(--nb-shadow); }
.nb-sp-composer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 12px; }
.nb-sp-composer-bar .neighbor-action { margin-left: auto; }
.nb-sp-attach { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap; white-space: nowrap; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; color: var(--nb-primary, #245145); cursor: pointer; }
.nb-sp-attach input[type="file"] { width: auto !important; max-width: 230px; font-size: 13px; padding: 4px !important; min-height: 0 !important; border: 0 !important; background: none !important; }
.nb-sp-after { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap; white-space: nowrap; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 600; }
.nb-sp-after select { width: auto !important; min-width: 170px; margin: 0 !important; }
.nb-sp-closed { margin: 16px 0 0; padding: 14px 18px; border-radius: var(--nb-radius-sm, 10px); background: #eceff1; color: #455a64; font-size: 14.5px; }

/* Side cards */
.nb-sp-card { margin: 0 0 16px; padding: 18px 20px; background: #fff; border: 1px solid var(--nb-line, #e3e8e1); border-radius: var(--nb-radius, 14px); box-shadow: var(--nb-shadow); }
.nb-sp-card h4 { margin: 0 0 14px !important; font-size: 15px !important; letter-spacing: .04em; text-transform: uppercase; color: var(--nb-muted, #66736b); }
.nb-sp-person { display: flex; gap: 12px; align-items: center; margin: 0 0 14px !important; font-size: 14px; }
.nb-sp-person a { color: var(--nb-primary, #245145); overflow-wrap: anywhere; }
.nb-sp-programs { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; }
.nb-sp-dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; margin: 0 0 14px; font-size: 14px; }
.nb-sp-dl dt { color: var(--nb-muted, #66736b); }
.nb-sp-dl dd { margin: 0; text-align: right; font-weight: 550; }

/* Small screens */
@media (max-width: 700px) {
  .nb-sp-grid { grid-template-columns: 1fr; }
  .nb-sp-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .nb-sp-row > .nb-sp-avatar { display: none; }
  .nb-sp-row-side { flex-direction: row; align-items: center; justify-content: space-between; }
  .nb-sp-subject { white-space: normal; }
  .nb-sp-thread { padding: 14px; }
  .nb-sp-msg { max-width: 100%; }
  .nb-sp-avatar { width: 34px; height: 34px; font-size: 12px; }
  .nb-sp-composer-bar .neighbor-action { margin-left: 0; width: 100%; }
  .nb-sp-newbtn { width: 100%; justify-content: center; }
}

/* 0.6.8: quiet support workspace, matching the dashboard navigation. */
.neighbor-app.neighbor-app .nb-sp { --nb-line:#e5e9e7; --nb-radius:10px; --nb-shadow:none; --nb-shadow-hover:0 2px 8px #20382d08; }
.neighbor-app.neighbor-app .nb-sp-pills { gap:6px; padding:0 0 14px; margin:0 0 20px; }
.neighbor-app.neighbor-app .nb-sp-pills a { padding:9px 16px; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--nb-text); font-size:15px; line-height:1.2; font-weight:500; white-space:nowrap; text-decoration:none; }
.neighbor-app.neighbor-app .nb-sp-pills a:hover,
.neighbor-app.neighbor-app .nb-sp-pills a[aria-current="true"] { background:transparent!important; box-shadow:none!important; color:var(--nb-primary)!important; text-decoration:underline!important; text-decoration-thickness:2px!important; text-underline-offset:9px; }
.neighbor-app.neighbor-app .nb-sp-pills a[aria-current="true"] { font-weight:600; }
.neighbor-app.neighbor-app .nb-sp-count,
.neighbor-app.neighbor-app .nb-sp-pills a[aria-current="true"] .nb-sp-count { background:transparent; padding:0; min-width:0; color:inherit; font-size:12px; opacity:.65; }
.neighbor-app.neighbor-app .nb-sp-new { border:1px solid var(--nb-line); box-shadow:none; border-radius:10px; }
.neighbor-app.neighbor-app .nb-sp-new:not([open]) { margin-bottom:20px; }
.neighbor-app.neighbor-app .nb-sp-top { margin-bottom:18px; }
.neighbor-app.neighbor-app .nb-sp-sub { max-width:60ch; font-size:13px; }
.neighbor-app.neighbor-app .nb-sp-searchbox input { max-width:none; }
.neighbor-app.neighbor-app .nb-sp-row { padding:20px; border-radius:10px; box-shadow:none; gap:16px; }
.neighbor-app.neighbor-app .nb-sp-row:hover { transform:none; border-color:#b7c9c1; background:#fcfdfc; }
.neighbor-app.neighbor-app .nb-sp-row.is-waiting { border-left:2px solid var(--nb-primary); }
.neighbor-app.neighbor-app .nb-sp-preview { -webkit-line-clamp:1; font-size:13px; }
.neighbor-app.neighbor-app .nb-sp-chip { padding:1px 6px; border-radius:4px; background:#f4f6f5; color:#67736d; font-size:11px; }
.neighbor-app.neighbor-app .nb-sp-status { padding:2px 8px; font-size:11px; background:#f0f4f2; color:#426356; }
.neighbor-app.neighbor-app .nb-sp-status--closed { color:#727b76; background:#f3f4f3; }
.neighbor-app.neighbor-app .nb-sp-flag { background:#edf4ef; color:#38624e; border-radius:4px; font-size:11px; padding:3px 8px; }
.neighbor-app.neighbor-app .nb-sp-avatar { background:#f0f4f2; color:#527363; border-radius:10px; }
.neighbor-app.neighbor-app .nb-sp-thread { background:#f8faf9; padding:24px; border-radius:10px; }
.neighbor-app.neighbor-app .nb-sp-bubble { box-shadow:none; border-radius:10px; }
.neighbor-app.neighbor-app .nb-sp-msg--mine .nb-sp-bubble { background:#edf4f0; color:#243c30; border-color:#dce8e1; border-radius:10px; }
.neighbor-app.neighbor-app .nb-sp-msg--mine :is(.nb-sp-role,.nb-sp-file) { background:#deebe3; color:#355b46; }
.neighbor-app.neighbor-app :is(.nb-sp-card,.nb-sp-composer-wrap) { box-shadow:none; border-radius:10px; }
.neighbor-app.neighbor-app .nb-sp-card h4 { font-size:12px!important; letter-spacing:.02em; }
.neighbor-app [aria-busy="true"] { cursor:progress; }
@media(max-width:700px) { .neighbor-app.neighbor-app .nb-sp-pills { flex-wrap:nowrap; overflow-x:auto; padding-bottom:18px; } .neighbor-app.neighbor-app .nb-sp-pills a { padding:9px 12px; } .neighbor-app.neighbor-app .nb-sp-thread { padding:12px; } }