.teacher-direct-chat-nav-badge {
  position: absolute;
  top: 2px;
  right: 3px;
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  place-items: center;
  color: var(--brand-contrast, #192132);
  background: var(--brand);
  border: 2px solid var(--surface);
  border-radius: 99px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.teacher-direct-chat-view.active {
  display: flex;
  height: calc(100dvh - 132px);
  min-height: 0;
  flex-direction: column;
}
.teacher-direct-chat-view .page-heading { flex: 0 0 auto; margin-bottom: 18px; }
.teacher-direct-chat-layout {
  display: grid;
  grid-template-columns: minmax(300px, 350px) minmax(0, 1fr);
  width: 100%;
  min-height: 0;
  max-height: 760px;
  flex: 1;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 19px;
  box-shadow: var(--shadow);
}
.teacher-direct-chat-threads,
.teacher-direct-chat-conversation { display: flex; min-width: 0; min-height: 0; flex-direction: column; }
.teacher-direct-chat-threads { border-right: 1px solid var(--line); }
.teacher-direct-chat-threads-header {
  display: flex;
  min-height: 71px;
  align-items: center;
  justify-content: space-between;
  padding: 15px 19px 9px;
  gap: 8px;
}
.teacher-direct-chat-threads-header > div { display: flex; min-width: 0; align-items: baseline; gap: 9px; }
.teacher-direct-chat-threads-header h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.teacher-direct-chat-threads-header #teacherDirectChatCount { color: var(--muted); font-size: 11px; white-space: nowrap; }
.teacher-direct-chat-threads-label { color: var(--brand); font-size: 9px; font-weight: 850; letter-spacing: .09em; }
.teacher-direct-chat-search { position: relative; display: block; padding: 0 14px 12px; }
.teacher-direct-chat-search .icon { position: absolute; top: 12px; left: 26px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.teacher-direct-chat-search input {
  width: 100%;
  height: 42px;
  padding: 0 13px 0 37px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 11px;
  outline: none;
  font-size: 12px;
}
.teacher-direct-chat-search input:focus { background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12); }
.teacher-direct-chat-filters { display: flex; padding: 0 14px 13px; gap: 7px; border-bottom: 1px solid var(--line); }
.teacher-direct-chat-filters button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 5px 10px;
  gap: 5px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
}
.teacher-direct-chat-filters button:hover { border-color: var(--line-strong); color: var(--ink); }
.teacher-direct-chat-filters button.active { color: var(--brand); background: var(--brand-soft); border-color: rgba(var(--brand-rgb), .16); }
.teacher-direct-chat-filters button span { min-width: 17px; padding: 1px 4px; color: var(--brand-contrast, #192132); background: var(--brand); border-radius: 99px; font-size: 9px; }
.teacher-direct-chat-thread-list { min-height: 0; flex: 1; overflow-y: auto; }
.teacher-direct-chat-thread {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  width: 100%;
  min-height: 88px;
  align-items: center;
  padding: 11px 14px;
  gap: 11px;
  text-align: left;
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--line);
  transition: background .15s ease;
}
.teacher-direct-chat-thread:hover { background: var(--surface-2); }
.teacher-direct-chat-thread.active { background: var(--brand-soft); box-shadow: inset 3px 0 var(--brand); }
.teacher-direct-chat-thread.is-revoked:not(.active) { opacity: .66; }
.teacher-direct-chat-thread:focus-visible,
.teacher-direct-chat-back:focus-visible,
.teacher-direct-chat-older:focus-visible,
.teacher-direct-chat-retry:focus-visible { outline: 3px solid rgba(var(--brand-rgb), .28); outline-offset: -3px; }
.teacher-direct-chat-avatar,
.teacher-direct-chat-header-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid rgba(var(--brand-rgb), .12);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
}
.teacher-direct-chat-thread.active .teacher-direct-chat-avatar { color: var(--brand-contrast, #fff); background: var(--brand); }
.teacher-direct-chat-thread-main { min-width: 0; }
.teacher-direct-chat-thread-main strong,
.teacher-direct-chat-thread-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teacher-direct-chat-thread-main strong { color: var(--ink); font-size: 12px; font-weight: 800; }
.teacher-direct-chat-thread.is-unread .teacher-direct-chat-thread-main strong { font-weight: 900; }
.teacher-direct-chat-school-name { margin-top: 2px; color: var(--brand); font-size: 10px; font-weight: 700; }
.teacher-direct-chat-preview { margin-top: 5px; color: var(--muted); font-size: 11px; }
.teacher-direct-chat-thread-side { display: flex; align-items: flex-end; align-self: stretch; flex-direction: column; justify-content: space-between; gap: 6px; }
.teacher-direct-chat-thread-side small { color: var(--muted); font-size: 10px; white-space: nowrap; }
.teacher-direct-chat-thread-side b {
  display: grid;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  place-items: center;
  color: var(--brand-contrast, #192132);
  background: var(--brand);
  border-radius: 99px;
  font-size: 10px;
}
.teacher-direct-chat-empty { margin: 0; padding: 36px 22px; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; }

.teacher-direct-chat-conversation { position: relative; background: var(--canvas); }
.teacher-direct-chat-conversation-header {
  display: flex;
  min-height: 72px;
  align-items: center;
  padding: 11px 22px;
  gap: 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.teacher-direct-chat-header-avatar { width: 40px; height: 40px; border-radius: 50%; }
.teacher-direct-chat-conversation-header > div { min-width: 0; }
.teacher-direct-chat-conversation-header h2 { margin: 0; overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.teacher-direct-chat-conversation-header p { margin: 4px 0 0; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.teacher-direct-chat-back { display: none; width: 38px; height: 38px; flex: 0 0 auto; color: var(--ink); background: var(--surface-2); border: 0; border-radius: 10px; font-size: 23px; line-height: 1; }
.teacher-direct-chat-history {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding: 21px 27px;
  gap: 9px;
  overflow-y: auto;
  overflow-anchor: none;
  scrollbar-gutter: stable;
}
.teacher-direct-chat-history-empty { max-width: 270px; margin: auto; color: var(--muted); font-size: 13px; line-height: 1.55; text-align: center; }
.teacher-direct-chat-day {
  align-self: center;
  margin: 8px 0 5px;
  padding: 5px 12px;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
}
.teacher-direct-chat-message {
  display: flex;
  width: fit-content;
  max-width: min(77%, 610px);
  flex-direction: column;
  padding: 10px 13px 8px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 15px 15px 15px 5px;
  box-shadow: 0 2px 8px rgba(23, 38, 58, .04);
  overflow-wrap: anywhere;
}
.teacher-direct-chat-message.own { align-self: flex-end; background: var(--brand-soft); border-color: rgba(var(--brand-rgb), .10); border-radius: 15px 15px 5px 15px; }
.teacher-direct-chat-message.is-pending { opacity: .75; }
.teacher-direct-chat-message.is-failed { opacity: 1; background: var(--danger-soft); border-color: var(--danger); }
.teacher-direct-chat-message p { margin: 0; font-size: 13px; line-height: 1.52; white-space: pre-wrap; }
.teacher-direct-chat-message-footer { display: flex; align-self: flex-end; align-items: center; margin-top: 5px; gap: 5px; color: var(--muted); font-size: 10px; }
.teacher-direct-chat-message-footer time { color: inherit; }
.teacher-direct-chat-message.is-failed .teacher-direct-chat-message-footer { color: var(--danger); }
.teacher-direct-chat-message-actions { display: flex; flex-wrap: wrap; align-self: flex-start; margin-top: 5px; gap: 10px; }
.teacher-direct-chat-retry { padding: 3px 0; color: var(--brand); background: transparent; border: 0; font-size: 11px; font-weight: 800; }
.teacher-direct-chat-older { align-self: center; margin: 9px 0 0; padding: 7px 12px; color: var(--brand); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; font-size: 11px; font-weight: 750; }
.teacher-direct-chat-older:hover { background: var(--brand-soft); }
.teacher-direct-chat-jump { position: absolute; right: 18px; bottom: 118px; z-index: 1; padding: 8px 12px; color: var(--brand); background: var(--surface); border: 1px solid var(--line); border-radius: 99px; box-shadow: var(--shadow); font-size: 11px; font-weight: 800; }
.teacher-direct-chat-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: 13px 18px 5px; gap: 9px; background: var(--surface); border-top: 1px solid var(--line); }
.teacher-direct-chat-compose textarea { width: 100%; min-height: 46px; max-height: 134px; padding: 11px 13px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 12px; outline: none; resize: vertical; font-size: 13px; line-height: 1.4; }
.teacher-direct-chat-compose textarea:focus { background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12); }
.teacher-direct-chat-compose textarea:disabled { color: var(--muted); background: var(--surface-2); }
.teacher-direct-chat-compose .button { min-height: 46px; }
.teacher-direct-chat-compose .icon { width: 16px; height: 16px; }
.teacher-direct-chat-compose-hint { margin: 0; padding: 1px 18px 3px; color: var(--muted); background: var(--surface); font-size: 10px; }
.teacher-direct-chat-status { min-height: 18px; margin: 0; padding: 1px 18px 8px; color: var(--muted); background: var(--surface); font-size: 11px; }
.teacher-direct-chat-status.is-error { color: var(--danger); }

@media (min-width: 901px) {
  .app-content:has(> .teacher-direct-chat-view.active) { padding-bottom: 14px; }
}

@media (max-width: 900px) {
  .app-content:has(> .teacher-direct-chat-view.active) { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .teacher-direct-chat-view.active { display: block; height: auto; }
  .teacher-direct-chat-layout { display: block; height: calc(100dvh - 310px - env(safe-area-inset-bottom)); min-height: 0; }
  .teacher-direct-chat-view.chat-open .teacher-direct-chat-page-heading { display: none; }
  .teacher-direct-chat-view.chat-open .teacher-direct-chat-layout { height: calc(100dvh - 185px - env(safe-area-inset-bottom)); }
  .teacher-direct-chat-threads,
  .teacher-direct-chat-conversation { height: 100%; }
  .teacher-direct-chat-layout:not(.has-conversation) .teacher-direct-chat-conversation { display: none; }
  .teacher-direct-chat-layout.has-conversation .teacher-direct-chat-threads { display: none; }
  .teacher-direct-chat-threads { border-right: 0; }
  .teacher-direct-chat-back { display: grid; place-items: center; }
  .teacher-direct-chat-history { padding: 14px; }
  .teacher-direct-chat-message { max-width: 88%; }
  .teacher-direct-chat-compose { padding: 10px 10px 4px; gap: 6px; }
  .teacher-direct-chat-compose-hint { display: none; }
  .teacher-direct-chat-status { padding: 2px 10px max(7px, env(safe-area-inset-bottom)); }
  .teacher-direct-chat-conversation-header { padding: 10px 12px; }
  .teacher-direct-chat-jump { right: 10px; bottom: 92px; }
}

@media (max-width: 480px) {
  .teacher-direct-chat-view .page-heading { margin-bottom: 12px; }
  .teacher-direct-chat-view .page-heading h1 { font-size: 24px; }
  .teacher-direct-chat-view .page-heading > div > p:last-child { display: none; }
  .teacher-direct-chat-refresh { min-height: 38px; padding: 0 10px; font-size: 11px; }
  .teacher-direct-chat-layout { border-radius: 13px; }
  .teacher-direct-chat-threads-header { min-height: 58px; }
  .teacher-direct-chat-thread { min-height: 88px; }
  .teacher-direct-chat-compose .button { min-width: 46px; padding: 0 12px; }
  .teacher-direct-chat-compose .button span { display: none; }
  .teacher-direct-chat-compose .button .icon { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .teacher-direct-chat-thread { transition: none; }
}