:root {
  color-scheme: light;
  font-family: Inter, "Noto Sans SC", system-ui, sans-serif;
  color: #17212b;
  background: #eef2f4;
  --app-height: 100dvh;
}

* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow: hidden; }
body {
  height: var(--app-height);
  min-height: 100dvh;
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
button, input, textarea { font: inherit; }
button { min-height: 44px; cursor: pointer; }

.topbar {
  min-height: 58px;
  padding: 8px max(18px, env(safe-area-inset-right)) 8px max(18px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: white;
  background: #173e35;
}

.brand { min-width: 0; display: flex; align-items: center; gap: 12px; }
.brand strong { white-space: nowrap; }
.status { font-size: 13px; opacity: .92; }
.status.ready { color: #8ef0b4; }
.status.warning { color: #ffd27a; }
.status.error { color: #ffb1a8; }
.account-summary { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.account-summary small { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .82; }

input, textarea {
  min-width: 0;
  border: 1px solid #ccd5d9;
  border-radius: 8px;
  padding: 9px 11px;
  background: white;
}

button {
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  color: white;
  background: #16855b;
}
button:disabled { cursor: not-allowed; opacity: .45; }

.workspace {
  min-height: 0;
  width: 100%;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: clamp(280px, 25vw, 360px) minmax(0, 1fr);
  overflow: hidden;
  background: white;
}

.sidebar {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  position: relative;
  overflow: hidden;
  border-right: 1px solid #dce3e6;
}
.sidebar > input { width: calc(100% - 24px); min-height: 44px; margin: 12px; }
.conversations { min-height: 0; overflow: hidden auto; overscroll-behavior: contain; }
.empty-list { position: absolute; top: 78px; left: 0; right: 0; margin: 24px; text-align: center; color: #718087; }

.conversation {
  width: 100%;
  min-height: 72px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  text-align: left;
  color: inherit;
  border-radius: 0;
  border-bottom: 1px solid #edf0f2;
  background: white;
}
.conversation:hover, .conversation.active { background: #edf8f3; }
.avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #145c45;
  background: #dcefe7;
  font-weight: 700;
}
.conversation-content { min-width: 0; display: grid; gap: 5px; }
.conversation-heading, .conversation-summary { min-width: 0; display: flex; align-items: center; gap: 8px; }
.conversation-heading strong { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-heading time { flex: none; color: #718087; font-size: 12px; }
.conversation-summary small { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #718087; }
.badge { min-width: 22px; padding: 2px 6px; border-radius: 11px; text-align: center; color: white; background: #16855b; font-size: 12px; }

.chat { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.chat-title { min-width: 0; min-height: 62px; padding: 10px 18px; border-bottom: 1px solid #dce3e6; }
.chat-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-title small { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #718087; }
.back-button { display: none; float: left; min-width: 44px; margin: -1px 9px 0 -8px; padding: 4px 10px; font-size: 20px; }
.messages { min-width: 0; min-height: 0; padding: 20px; overflow: hidden auto; overscroll-behavior: contain; background: #f4f7f5; }
.message { max-width: min(74%, 720px); margin: 8px 0; padding: 9px 12px; border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; background: white; box-shadow: 0 1px 2px #0001; }
.message.outgoing { margin-left: auto; background: #d7f4e4; }
.message-meta { display: block; margin-top: 5px; color: #718087; font-size: 11px; }
.media-download { min-height: 36px; margin-top: 6px; padding: 5px 8px; font-size: 12px; }
.composer {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 12px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  border-top: 1px solid #dce3e6;
  background: white;
}
.composer textarea { min-height: 46px; max-height: 130px; resize: vertical; overflow-wrap: anywhere; }
.composer button { min-width: 64px; min-height: 46px; }

.toast { position: fixed; z-index: 20; right: 18px; bottom: max(18px, env(safe-area-inset-bottom)); max-width: calc(100vw - 36px); padding: 10px 14px; border-radius: 8px; color: white; background: #24343b; opacity: 0; pointer-events: none; transition: opacity .2s; }
.toast.show { opacity: 1; }
dialog { max-width: 90vw; border: 0; border-radius: 12px; box-shadow: 0 12px 40px #0004; }
.dialog-actions { margin-top: 12px; text-align: right; }
.dialog-close { float: right; }
.qr-image { display: block; clear: both; width: min(360px, 82vw); height: auto; margin: 12px auto 0; background: white; image-rendering: pixelated; }

@media (max-width: 700px) {
  .topbar {
    min-height: 68px;
    padding-top: max(8px, env(safe-area-inset-top));
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .brand { width: 100%; justify-content: space-between; }
  .account-summary { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 5px 9px; font-size: 12px; }
  .account-summary #account-name { display: none; }
  .workspace { display: block; }
  .sidebar, .chat { width: 100%; height: 100%; }
  .chat { display: none; }
  .workspace.chat-open .sidebar { display: none; }
  .workspace.chat-open .chat { display: grid; }
  .back-button { display: block; }
  .conversation { min-height: 76px; padding: 10px 12px; }
  .messages { padding: 12px; }
  .message { max-width: 90%; }
  .composer { gap: 8px; padding-top: 8px; }
  .composer textarea { resize: none; }
}

@media (max-width: 350px) {
  .topbar { min-height: 64px; }
  .status { font-size: 12px; }
  .conversation { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
  .avatar { width: 38px; height: 38px; }
  .composer button { min-width: 58px; padding-inline: 10px; }
}