.chat-body {
  display: block;
  height: 100dvh;
  min-height: 620px;
  overflow: hidden;
  background: #f4f6f5;
}

.inbox-shell {
  display: grid;
  grid-template-columns: 310px minmax(420px, 1fr) 300px;
  width: 100%;
  height: 100dvh;
  min-height: 620px;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

.inbox-list {
  min-width: 0;
  padding: 22px 16px;
  overflow-y: auto;
  background: #fff;
  border-right: 1px solid var(--line);
}

.inbox-list .brand {
  margin: 0 8px 24px;
}

.inbox-list .brand img {
  width: 46px;
  height: 46px;
}

.inbox-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 14px;
}

.inbox-nav-head div {
  min-width: 0;
}

.inbox-nav-head h1 {
  margin: 3px 0 0;
  font: 600 22px Sora, sans-serif;
}

.inbox-nav-head small {
  color: var(--muted);
  font-size: 11px;
}

.inbox-back,
.inbox-new {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  font-size: 18px;
}

.inbox-search {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 8px 16px;
  padding: 0 13px;
  min-height: 43px;
  border: 1px solid #e3e8e6;
  border-radius: 13px;
  background: #f7f9f8;
  color: var(--muted);
}

.inbox-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--navy);
  font-size: 12px;
}

.conversation-list {
  display: grid;
  gap: 5px;
}

.conversation-link {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 72px;
  padding: 11px 10px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: var(--navy);
  transition: background .2s, border-color .2s, transform .2s;
}

.conversation-link:hover {
  transform: translateY(-1px);
  background: #f5faf8;
}

.conversation-link.active {
  border-color: #c9ece5;
  background: #eaf8f5;
}

.conversation-avatar,
.chat-title-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: linear-gradient(145deg, #dff6f1, #bfe8df);
  color: #007b69;
  font: 700 14px Sora, sans-serif;
}

.conversation-link div {
  min-width: 0;
}

.conversation-link b,
.conversation-link small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-link b {
  font-size: 12px;
}

.conversation-link small {
  margin-top: 5px;
  color: #6c7888;
  font-size: 10px;
}

.conversation-link time {
  align-self: start;
  padding-top: 3px;
  color: #8a94a3;
  font-size: 8px;
}

.host-chat.chat-main {
  display: grid;
  grid-template-rows: 82px minmax(0, 1fr) 78px;
  min-width: 0;
  min-height: 0;
  background: #f7f8f6;
}

.host-chat.chat-main > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.96);
}

.chat-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.mobile-chat-back {
  display: none;
}

.chat-title > div:last-child {
  min-width: 0;
}

.host-chat.chat-main h2 {
  overflow: hidden;
  margin: 0;
  font: 600 14px Sora, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.host-chat.chat-main header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.socket-status {
  color: #008c78;
  font-weight: 700;
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.chat-header-actions .chip {
  min-height: 38px;
}

.host-messages.messages {
  min-height: 0;
  overflow-y: auto;
  padding: 24px clamp(24px, 6vw, 80px) 32px;
  background-color: #f7f8f6;
  background-image: radial-gradient(circle at 20% 20%, rgba(0,168,143,.035) 0 2px, transparent 2px), radial-gradient(circle at 80% 65%, rgba(255,107,61,.03) 0 2px, transparent 2px);
  background-size: 42px 42px, 54px 54px;
}

.message-date,
.date-divider {
  width: max-content;
  margin: 0 auto 22px;
  padding: 7px 11px;
  border: 1px solid #e5e9e7;
  border-radius: 99px;
  background: rgba(255,255,255,.88);
  color: #7a8492;
  font-size: 9px;
  box-shadow: 0 4px 12px rgba(11,23,54,.04);
}

.host-messages.messages article {
  display: flex;
  gap: 9px;
  width: fit-content;
  max-width: min(72%, 560px);
  margin: 16px 0;
}

.host-messages.messages article > div {
  padding: 11px 14px;
  border: 1px solid #e8ecea;
  border-radius: 5px 18px 18px 18px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(11,23,54,.05);
}

.host-messages.messages article.ours,
.host-messages.messages article.mine {
  margin-left: auto;
}

.host-messages.messages article.ours > div,
.host-messages.messages article.mine > div {
  border-color: #0b1736;
  border-radius: 18px 5px 18px 18px;
  background: var(--navy);
  color: #fff;
}

.host-messages.messages .person {
  width: 32px;
  height: 32px;
  margin-top: 3px;
  background: #dff4ef;
  color: #007c6c;
}

.host-messages.messages b {
  display: block;
  margin-bottom: 5px;
  color: #007c6c;
  font-size: 10px;
}

.host-messages.messages p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.host-messages.messages small {
  display: block;
  margin-top: 6px;
  color: #8b96a4;
  font-size: 8px;
  text-align: right;
}

.host-messages.messages .ours small,
.host-messages.messages .mine small {
  color: #aeb7c8;
}

.message-box {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) 40px 44px;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 13px 20px;
  border-top: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
}

.message-box input {
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid #e0e6e3;
  border-radius: 15px;
  outline: 0;
  background: #f7f9f8;
  font-size: 12px;
}

.message-box input:focus {
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px rgba(0,168,143,.1);
}

.message-box button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #667085;
  font-size: 18px;
  cursor: pointer;
}

.message-box .send {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--emerald);
  color: #fff;
  box-shadow: 0 7px 16px rgba(0,168,143,.22);
}

.inbox-context.chat-info {
  min-width: 0;
  padding: 22px;
  overflow-y: auto;
  border-left: 1px solid var(--line);
  background: #fff;
}

.context-cover {
  height: 150px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(11,23,54,.05), rgba(0,168,143,.18)), url('https://images.unsplash.com/photo-1551632811-561732d1e306?auto=format&fit=crop&w=700&q=80') center/cover;
}

.inbox-context.chat-info h3 {
  margin: 18px 0 7px;
  font: 600 15px/1.4 Sora, sans-serif;
}

.inbox-context.chat-info > p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 10px;
}

.context-action {
  display: flex;
  width: 100%;
  margin-bottom: 24px;
}

.context-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 12px;
  font-size: 10px;
}

.context-section-title span {
  color: var(--muted);
  font-weight: 500;
}

.people-list {
  display: grid;
  gap: 7px;
}

.people-list span {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: 10px;
  font-weight: 600;
}

.people-list i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-right: 9px;
  border-radius: 11px;
  background: #e6f6f2;
  color: #007c6c;
  font-style: normal;
  font-weight: 700;
}

.context-note {
  margin-top: 24px;
  padding: 13px;
  border-radius: 13px;
  background: #fff8ef;
  color: #795d2b;
  font-size: 9px;
  line-height: 1.5;
}

.host-inbox-body .inbox-shell {
  width: auto;
  margin-left: 225px;
}

@media (max-width: 1100px) {
  .inbox-shell { grid-template-columns: 290px minmax(0,1fr); }
  .inbox-context.chat-info { display: none; }
  .host-inbox-body .inbox-shell { margin-left: 80px; }
}

@media (max-width: 720px) {
  .chat-body { min-height: 500px; }
  .inbox-shell { grid-template-columns: 1fr; min-height: 500px; }
  .inbox-list { display: none; }
  .host-chat.chat-main { grid-template-rows: 72px minmax(0,1fr) 70px; }
  .host-chat.chat-main > header { padding: 10px 14px; }
  .chat-title-avatar { width: 40px; height: 40px; border-radius: 13px; }
  .chat-title-avatar { display: none; }
  .mobile-chat-back { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  .chat-header-actions .chip { display: grid; place-items: center; width: 38px; padding: 0; font-size: 0; }
  .chat-header-actions .chip::before { content: '□'; font-size: 15px; }
  .host-messages.messages { padding: 18px 14px 24px; }
  .host-messages.messages article { max-width: 88%; }
  .message-box { grid-template-columns: 36px minmax(0,1fr) 42px; padding: 10px; }
  .message-box .emoji-button { display: none; }
  .message-box button { width: 36px; }
  .host-inbox-body .inbox-shell { margin-left: 0; }
}