/* Messenger surfaces. Loaded after the main theme so the layout stays isolated. */
.inbox-page,
.chat-shell {
  width: min(100%, 1120px);
  margin: 0 auto;
}

.inbox-hero {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  overflow: hidden;
  margin-bottom: 18px;
  padding: 26px 28px;
  border: 1px solid #d9ebe6;
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 18%, rgba(126, 91, 255, .15), transparent 28%),
    linear-gradient(135deg, #effbf7 0%, #fff 58%, #f5f2ff 100%);
  box-shadow: 0 16px 44px rgba(32, 67, 66, .08);
}
.inbox-hero::after {
  position: absolute;
  right: -44px;
  bottom: -68px;
  width: 190px;
  height: 190px;
  border: 28px solid rgba(24, 164, 147, .055);
  border-radius: 50%;
  content: "";
}
.inbox-hero-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: linear-gradient(145deg, #0e8c7e, #17615f);
  box-shadow: 0 14px 28px rgba(14, 140, 126, .22);
  font-size: 34px;
  transform: rotate(-3deg);
}
.school-inbox-hero .inbox-hero-icon {background: linear-gradient(145deg, #7858ff, #4d35c7)}
.inbox-hero-copy {min-width: 0}
.inbox-hero-copy .eyebrow {display: block; margin-bottom: 5px; color: #168275}
.inbox-hero-copy h1 {margin: 0; color: #142033; font-size: clamp(28px, 3vw, 40px); line-height: 1.05}
.inbox-hero-copy p {max-width: 710px; margin: 9px 0 0; color: #62717d; font-size: 14px; line-height: 1.55}
.inbox-summary {
  z-index: 1;
  display: grid;
  min-width: 104px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 18px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 9px 24px rgba(40, 47, 68, .08);
  text-align: center;
  backdrop-filter: blur(12px);
}
.inbox-summary strong {color: #17675f; font-size: 28px; line-height: 1}
.inbox-summary span {margin-top: 5px; color: #73818b; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase}

body.app-body .inbox-filters {
  display: grid;
  grid-template-columns: minmax(250px, 1.4fr) minmax(190px, 1fr) minmax(190px, .95fr) auto auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid #dde9e6;
  border-radius: 18px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 10px 28px rgba(31, 61, 63, .055);
}
body.app-body .school-inbox-filters {grid-template-columns: minmax(300px, 1fr) auto auto}
.inbox-filters .field {margin: 0}
.inbox-filters .field > span {display: block; margin: 0 0 6px 3px; color: #566873; font-size: 11px; font-weight: 800}
.inbox-filters input,
.inbox-filters select {min-height: 44px !important; border-radius: 12px !important; background-color: #f9fbfb !important}
.inbox-filters .button {min-height: 44px; border-radius: 12px}

.inbox-panel {
  overflow: hidden;
  border: 1px solid #dce8e5;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(29, 56, 59, .075);
}
.inbox-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 60px;
  padding: 14px 20px;
  border-bottom: 1px solid #e7efed;
  background: #fbfdfc;
}
.inbox-panel-head > div {display: flex; align-items: center; gap: 9px}
.inbox-panel-head > div > span {display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: #e7f6f2; font-size: 15px}
.inbox-panel-head strong {color: #21323c; font-size: 14px}
.inbox-panel-head small {color: #89959d; font-size: 10px}
.inbox-list {display: grid}
.inbox-list .chat-list-item {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 150px;
  align-items: center;
  gap: 15px;
  min-height: 104px;
  padding: 17px 20px;
  border: 0;
  border-bottom: 1px solid #e8efed;
  border-radius: 0;
  background: #fff;
  color: inherit;
  text-decoration: none !important;
  box-shadow: none;
  transition: background .18s ease, transform .18s ease;
}
.inbox-list .chat-list-item:last-child {border-bottom: 0}
.inbox-list .chat-list-item:hover {z-index: 1; border-color: #e8efed; background: #f4fbf8; box-shadow: inset 4px 0 #1a9d8e}
.inbox-list .chat-list-item.is-unread {background: linear-gradient(90deg, #edfaf6 0%, #fff 58%)}
.inbox-list .chat-list-item.is-unread::before {position: absolute; left: 10px; width: 7px; height: 7px; border-radius: 50%; background: #18a493; box-shadow: 0 0 0 4px rgba(24, 164, 147, .11); content: ""}
.chat-list-avatar {
  width: 52px;
  height: 52px;
  border: 3px solid #fff;
  background: linear-gradient(145deg, #7657ff, #4e36c9);
  color: #fff;
  box-shadow: 0 8px 20px rgba(91, 65, 210, .24);
  font-size: 17px;
}
.chat-list-copy {min-width: 0}
.chat-list-title-row {display: flex; align-items: center; gap: 8px; min-width: 0}
.chat-list-title-row > strong {overflow: hidden; color: #172033; font-size: 16px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap}
.chat-list-title-row .presence {position: static !important; flex: 0 0 auto; margin: 0}
.chat-list-course {display: block; overflow: hidden; margin-top: 4px; color: #1b7d73; font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap}
.chat-list-course i {padding: 0 3px; color: #a9bab6; font-style: normal}
.chat-list-copy p {display: flex; align-items: center; overflow: hidden; margin: 8px 0 0; color: #6c7882; font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap}
.chat-list-copy p b {margin-right: 3px; color: #3f4e58}
.chat-preview-icon {flex: 0 0 auto; margin-right: 6px; font-size: 12px}
.chat-list-aside {display: grid; grid-template-columns: 1fr auto; align-items: center; justify-items: end; align-self: stretch; gap: 6px 10px; min-width: 0}
.chat-list-aside time {grid-column: 1 / -1; color: #8b98a1; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap}
.chat-waiting {padding: 5px 8px; border-radius: 999px; background: #fff2d8; color: #8b621e; font-size: 9px; font-weight: 850; white-space: nowrap}
.chat-unread {display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; background: #18a493; color: #fff; font-size: 10px; box-shadow: 0 5px 12px rgba(24, 164, 147, .24)}
.chat-list-arrow {grid-column: 2; grid-row: 2 / span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #f0f5f4; color: #5f7478; font-size: 15px; transition: .18s ease}
.chat-list-item:hover .chat-list-arrow {background: #1a8e82; color: #fff; transform: translateX(2px)}
.inbox-empty {border: 0; border-radius: 0; padding: 56px 28px}
.empty-emoji {display: block; margin-bottom: 12px; font-size: 34px}

.chat-back-link {display: inline-flex; align-items: center; min-height: 39px; margin-bottom: 13px; padding: 8px 13px; border: 1px solid #d9e6e3; border-radius: 12px; background: rgba(255, 255, 255, .9); box-shadow: 0 5px 14px rgba(33, 60, 62, .055); text-decoration: none !important}
.chat-head-card {
  position: relative;
  overflow: hidden;
  margin: 0 0 12px;
  padding: 20px 22px;
  border: 1px solid #d8e7e3;
  border-radius: 22px;
  background: linear-gradient(135deg, #fff 40%, #f0faf7 100%);
  box-shadow: 0 12px 34px rgba(28, 57, 59, .07);
}
.chat-head-card::after {position: absolute; right: -45px; top: -70px; width: 180px; height: 180px; border: 25px solid rgba(26, 157, 142, .055); border-radius: 50%; content: ""}
.chat-person {z-index: 1; display: flex; align-items: center; gap: 15px; min-width: 0}
.chat-person-avatar {display: grid; place-items: center; flex: 0 0 auto; width: 56px; height: 56px; border: 3px solid #fff; background: linear-gradient(145deg, #7657ff, #4e36c9); color: #fff; box-shadow: 0 10px 24px rgba(91, 65, 210, .24); font-size: 19px}
.chat-person-copy {min-width: 0}
.chat-kind {display: block; overflow: hidden; margin-bottom: 3px; color: #187e73; font-size: 10px; font-weight: 850; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap}
.chat-person h1 {overflow: hidden; margin: 0; color: #152033; font-size: 25px; line-height: 1.16; text-overflow: ellipsis; white-space: nowrap}
.chat-person-meta {display: flex; align-items: center; gap: 9px; margin-top: 6px; color: #78858f; font-size: 11px}
.chat-person-meta .presence {margin: 0; padding-right: 9px; border-right: 1px solid #dce6e4}
.chat-ready {color: #188476; font-weight: 800}
.chat-head-actions {z-index: 1; flex: 0 0 auto}
.chat-head-actions .pill {box-shadow: 0 5px 13px rgba(29, 54, 57, .06)}
.chat-help-chip {z-index: 1; padding: 8px 11px; border: 1px solid #d6e8e3; border-radius: 999px; background: #fff; color: #32645f; font-size: 10px; font-weight: 800}
.chat-context {display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; margin-bottom: 10px; padding: 12px 14px; border-radius: 14px}
.chat-context-icon {display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: #e7f3ff}
.chat-context > div {display: grid; gap: 2px}
.chat-context > div span {color: #6f8089; font-size: 10px}
.chat-context > a {font-size: 11px; font-weight: 800; text-align: right}
.chat-guide {display: flex; align-items: center; gap: 11px; margin: 0 0 10px; padding: 11px 14px; border: 1px solid #d8e7e3; border-radius: 14px; background: #f2f9f7; color: #60717a}
.chat-guide > span {display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 10px; background: #deeee9; font-size: 15px}
.chat-guide p {margin: 0; font-size: 11px; line-height: 1.5}
.chat-guide strong {color: #284048}

.chat-workspace {overflow: hidden; border: 1px solid #d7e4e1; border-radius: 22px; background: #fff; box-shadow: 0 16px 42px rgba(30, 59, 61, .08)}
.chat-workspace-head {display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 52px; padding: 11px 18px; border-bottom: 1px solid #dfeae7; background: #fff}
.chat-workspace-head > div {display: flex; align-items: center; gap: 8px}
.chat-workspace-head > div > span {display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #eaf7f3; font-size: 14px}
.chat-workspace-head strong {color: #2a3a44; font-size: 12px}
.chat-workspace-head small {color: #8a969e; font-size: 9px}
body.app-body .chat-workspace .chat-thread {
  display: flex;
  min-height: 390px;
  max-height: calc(100vh - 430px);
  overflow: auto;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 22px 24px;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 15px 15px, rgba(25, 139, 126, .035) 1.5px, transparent 1.8px) 0 0 / 30px 30px,
    linear-gradient(145deg, #eaf6f2, #f5f9f8);
  scrollbar-color: #b4cbc5 transparent;
  scrollbar-width: thin;
}
.chat-bubble {position: relative; width: min(72%, 650px); padding: 12px 14px; border: 1px solid #d9e5e2; border-radius: 7px 18px 18px; background: #fff; box-shadow: 0 6px 18px rgba(31, 61, 63, .07)}
.chat-bubble.mine,
body.app-body .chat-bubble.mine {align-self: flex-end; border-color: #bfe2d8; border-radius: 18px 7px 18px 18px; background: linear-gradient(145deg, #daf1ea, #e6f7f1)}
.chat-bubble.internal {border-color: #ecd88b; background: #fff8d9}
.chat-bubble.pinned {box-shadow: inset 3px 0 #d4a832, 0 6px 18px rgba(31, 61, 63, .07)}
.chat-message-meta {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px}
.chat-message-meta strong {display: flex; align-items: center; gap: 6px; min-width: 0; color: #2b3b45; font-size: 10px}
.message-role-emoji {font-size: 13px}
.chat-message-meta .message-role {padding: 2px 6px; border-radius: 99px; background: rgba(23, 126, 115, .09); color: #177e73; font-size: 8px; font-weight: 850; text-transform: uppercase}
.chat-message-meta time {flex: 0 0 auto; color: #8a979f; font-size: 9px; font-variant-numeric: tabular-nums}
.chat-bubble p {margin: 0; color: #364650; font-size: 13px; line-height: 1.55}
.message-context {display: inline-flex; margin: 0 0 7px; padding: 5px 8px; border-radius: 8px; background: rgba(25, 137, 124, .08); font-size: 10px; font-weight: 750; text-decoration: none !important}
.chat-file {display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 9px; padding: 9px 11px; border: 1px solid rgba(23, 126, 115, .15); border-radius: 11px; background: rgba(255, 255, 255, .72); font-size: 10px; text-decoration: none !important}
.chat-file span {overflow: hidden; font-weight: 750; text-overflow: ellipsis; white-space: nowrap}
.chat-file small {flex: 0 0 auto; color: #718089}
.chat-bubble footer {display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 13px; margin-top: 6px; color: #75858d}
.chat-bubble footer small,
.pin-button {font-size: 8px}
.chat-empty {margin: auto; text-align: center}
.chat-empty > span {display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 14px; border: 1px solid #cfe6df; border-radius: 19px; background: rgba(255, 255, 255, .78); box-shadow: 0 8px 20px rgba(31, 67, 65, .07); font-size: 27px}
.chat-empty h2 {margin-bottom: 5px; color: #21313c; font-size: 19px}
.chat-empty p {max-width: 390px; margin: 0; color: #75828b; font-size: 11px; line-height: 1.5}

body.app-body .chat-workspace .chat-compose {position: static; margin: 0; padding: 15px 18px 16px; border: 0; border-top: 1px solid #dfe9e6; border-radius: 0; background: #fff; box-shadow: none}
.chat-compose-label {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px}
.chat-compose-label label {color: #273943; font-size: 11px; font-weight: 850}
.chat-compose-label small {color: #8c989f; font-size: 9px}
.chat-compose textarea {min-height: 72px; max-height: 170px; padding: 11px 13px; border-radius: 13px !important; background: #fbfdfc !important; font-size: 13px; resize: vertical}
.chat-compose textarea:focus {background: #fff !important; box-shadow: 0 0 0 3px rgba(25, 153, 138, .09)}
.chat-compose-toolbar {display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px}
.emoji-quickbar {display: flex; align-items: center; gap: 4px}
.emoji-quickbar button {display: grid; place-items: center; width: 31px; height: 31px; padding: 0; border: 1px solid #e0e9e7; border-radius: 9px; background: #f8fbfa; font-size: 14px; cursor: pointer; transition: transform .15s, background .15s}
.emoji-quickbar button:hover {background: #eaf7f3; transform: translateY(-2px)}
.chat-compose-actions {display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0}
.chat-compose-actions .file-button {min-height: 34px; padding: 7px 10px; border-radius: 9px; font-size: 10px}
.chat-compose-actions > small {color: #8c989f; font-size: 8px}
.chat-compose-actions .button {min-height: 36px; padding: 7px 16px; border-radius: 10px; font-size: 11px}
.chat-send span {display: inline-block; margin-left: 4px; transform: rotate(-25deg)}
.chat-internal {margin: 7px 0 0; font-size: 10px}
.chat-internal input {width: 15px; height: 15px}

/* Restrained business visual language. */
.inbox-hero {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  padding: 24px 26px;
  border-color: #dce5e4;
  border-left: 4px solid #176f67;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(31, 51, 56, .055);
}
.inbox-hero::after,
.chat-head-card::after {display: none}
.inbox-hero-icon,
.school-inbox-hero .inbox-hero-icon {
  width: 54px;
  height: 54px;
  border: 1px solid #cfe1dd;
  border-radius: 14px;
  background: #edf6f4;
  color: #176f67;
  box-shadow: none;
  transform: none;
}
.inbox-hero-icon .icon {width: 24px; height: 24px; stroke-width: 1.7}
.inbox-hero-copy .eyebrow {color: #617078}
.inbox-hero-copy h1 {font-size: clamp(27px, 2.7vw, 36px)}
.inbox-summary {
  min-width: 98px;
  padding: 12px 16px;
  border-color: #dce6e4;
  border-radius: 13px;
  background: #f7faf9;
  box-shadow: none;
  backdrop-filter: none;
}
.inbox-summary strong {color: #21343b; font-size: 24px}
body.app-body .inbox-filters,
.inbox-panel,
.chat-workspace {box-shadow: 0 8px 24px rgba(31, 51, 56, .055)}
.inbox-panel {border-radius: 17px}
.inbox-panel-head {background: #fafcfc}
.inbox-panel-head > div > span.section-marker,
.chat-workspace-head > div > span.section-marker,
.section-marker {
  display: block;
  width: 7px;
  height: 7px;
  min-width: 7px;
  padding: 0;
  border-radius: 50%;
  background: #1a8076;
  box-shadow: none;
}
.inbox-list .chat-list-item {min-height: 98px}
.inbox-list .chat-list-item:hover {background: #f7faf9; box-shadow: inset 3px 0 #1a8076}
.inbox-list .chat-list-item.is-unread {background: #f5faf8}
body.app-body .chat-list-avatar,
body.app-body .chat-person-avatar {
  border-color: #fff;
  background: #245f5c;
  box-shadow: 0 5px 14px rgba(32, 76, 73, .18);
}
.chat-list-course {color: #54706e}
.chat-waiting {border: 1px solid #e5dbc1; background: #fbf7ed; color: #765f2d}
.chat-unread {background: #176f67; box-shadow: none}
.chat-list-arrow {border: 1px solid #e0e7e5; background: #fafcfc; color: #617278}
.chat-list-item:hover .chat-list-arrow {background: #176f67}
.chat-head-card {
  padding: 19px 21px;
  border-left: 4px solid #176f67;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(31, 51, 56, .055);
}
.chat-kind {color: #607077; letter-spacing: .08em}
.chat-help-chip {border-color: #dce6e4; border-radius: 8px; background: #f7faf9; color: #3c5558}
.chat-ready {color: #176f67}
.chat-guide {border-radius: 11px; background: #f6f9f8}
.chat-guide > span.section-marker {flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #1a8076}
.chat-context-icon {width: 7px; height: 7px; border-radius: 50%; background: #1a8076}
.chat-workspace {border-radius: 17px}
.chat-workspace-head > div > span.section-marker {width: 7px; height: 7px; border-radius: 50%; background: #1a8076}
body.app-body .chat-workspace .chat-thread {
  background: #f4f7f6;
}
.chat-bubble {
  border-color: #dce4e2;
  border-radius: 4px 13px 13px;
  box-shadow: 0 3px 10px rgba(31, 51, 56, .05);
}
.chat-bubble.mine,
body.app-body .chat-bubble.mine {
  border-color: #c7ddd8;
  border-radius: 13px 4px 13px 13px;
  background: #e7f1ee;
}
.chat-message-meta .message-role {background: #edf3f2; color: #476461}
.message-context {border: 1px solid #d6e3e0; background: #f5f9f8; color: #315c58}
.chat-file {background: #fafcfc}
.empty-symbol {
  position: relative;
  display: block;
  width: 48px;
  height: 42px;
  margin: 0 auto 15px;
  border: 1.5px solid #9eb8b3;
  border-radius: 12px;
  background: #fff;
}
.empty-symbol::before,
.empty-symbol::after {position: absolute; left: 12px; width: 22px; height: 1.5px; background: #9eb8b3; content: ""}
.empty-symbol::before {top: 14px}
.empty-symbol::after {top: 23px; width: 15px}
.chat-empty > span.empty-symbol {width: 48px; height: 42px; margin: 0 auto 15px; border-radius: 12px; background: #fff; box-shadow: none}
.chat-compose-toolbar {min-height: 36px}
.chat-compose-note {color: #8a969d; font-size: 9px}
.chat-send span {display: none}

@media (max-width: 900px) {
  body.app-body .inbox-filters {grid-template-columns: 1fr 1fr}
  .inbox-filters .search {grid-column: 1 / -1}
  .inbox-filters .button {width: 100%}
  .inbox-list .chat-list-item {grid-template-columns: 50px minmax(0, 1fr) 125px}
  body.app-body .chat-workspace .chat-thread {max-height: 58vh}
}

@media (max-width: 620px) {
  .inbox-hero {grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 20px 17px; border-radius: 19px}
  .inbox-hero-icon {width: 52px; height: 52px; border-radius: 16px; font-size: 24px}
  .inbox-hero-copy h1 {font-size: 26px}
  .inbox-hero-copy p {font-size: 12px}
  .inbox-summary {grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: center; gap: 6px; min-width: 0; padding: 9px}
  .inbox-summary strong {font-size: 20px}
  .inbox-summary span {margin: 0}
  body.app-body .inbox-filters,
  body.app-body .school-inbox-filters {grid-template-columns: 1fr; max-width: none}
  .inbox-filters .search {grid-column: auto}
  .inbox-panel {border-radius: 17px}
  .inbox-panel-head {align-items: flex-start; flex-direction: column; gap: 5px; padding: 13px 14px}
  .inbox-list .chat-list-item {grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; min-height: 91px; padding: 14px}
  .chat-list-avatar {width: 42px; height: 42px; border-width: 2px}
  .chat-list-aside {grid-template-columns: auto}
  .chat-list-aside time {grid-column: 1; font-size: 9px}
  .chat-list-aside .chat-waiting,
  .chat-list-arrow {display: none}
  .chat-list-title-row .presence {padding: 2px 5px}
  .chat-list-title-row .presence-text {display: none !important}
  .chat-list-course {max-width: 100%}
  .chat-head-card {align-items: flex-start; flex-direction: column; padding: 16px; border-radius: 18px}
  .chat-person {width: 100%}
  .chat-person-avatar {width: 47px; height: 47px}
  .chat-person h1 {font-size: 21px}
  .chat-person-meta {align-items: flex-start; flex-direction: column; gap: 4px}
  .chat-person-meta .presence {padding-right: 0; border: 0}
  .chat-head-actions {align-items: stretch; flex-direction: row; width: 100%}
  .chat-head-actions form {flex: 1}
  .chat-head-actions .button {width: 100%}
  .chat-help-chip {align-self: flex-start}
  .chat-context {grid-template-columns: auto 1fr}
  .chat-context > a {grid-column: 2; text-align: left}
  .chat-guide {align-items: flex-start}
  .chat-workspace {border-radius: 17px}
  .chat-workspace-head {align-items: flex-start; flex-direction: column; gap: 4px; padding: 10px 13px}
  body.app-body .chat-workspace .chat-thread {min-height: 350px; max-height: 56vh; padding: 15px 12px}
  .chat-bubble {width: 90%; padding: 10px 11px}
  .chat-message-meta {align-items: flex-start; flex-direction: column; gap: 2px}
  .chat-message-meta time {align-self: flex-end; margin-top: -15px}
  body.app-body .chat-workspace .chat-compose {padding: 12px}
  .chat-compose-label small {display: none}
  .chat-compose textarea {min-height: 76px}
  .chat-compose-toolbar {align-items: stretch; flex-direction: column}
  .chat-compose-actions {display: grid; grid-template-columns: 1fr auto}
  .chat-compose-actions > small {display: none}
  .chat-compose-actions .file-button {text-align: center}
}