:root {
  color-scheme: light;
  --ink: #202821;
  --muted: #858b82;
  --muted-dark: #667168;
  --line: #e9ebe5;
  --paper: #fff;
  --canvas: #f7f8f4;
  --green: #245b46;
  --green-dark: #183c33;
  --green-soft: #eaf2ed;
  --lime: #d7ed9f;
  --amber: #d49441;
  --danger: #bb4c43;
  --shadow: 0 24px 70px rgb(34 47 38 / 12%);
  font-family: "Segoe UI", "Arial", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
}

button, input, textarea { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.auth-screen {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 32px 20px 70px;
  background:
    radial-gradient(ellipse at 12% 18%, rgb(215 237 159 / 20%), transparent 32%),
    radial-gradient(ellipse at 91% 87%, rgb(36 91 70 / 9%), transparent 34%),
    #f7f8f4;
}

.auth-screen::before, .auth-screen::after {
  position: absolute;
  z-index: 0;
  width: 340px;
  height: 340px;
  border: 1px solid rgb(36 91 70 / 7%);
  border-radius: 50%;
  content: "";
}
.auth-screen::before { top: -190px; right: -80px; box-shadow: 0 0 0 35px rgb(36 91 70 / 2%), 0 0 0 70px rgb(36 91 70 / 2%); }
.auth-screen::after { bottom: -240px; left: -120px; }

.auth-card {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  padding: 44px 46px 38px;
  border: 1px solid rgb(230 233 225 / 90%);
  border-radius: 22px;
  background: rgb(255 255 255 / 94%);
  box-shadow: var(--shadow);
}

.brand-mark {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 13px;
  color: #f3f5e9;
  background: var(--green);
  font-family: "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.brand-mark-large { width: 48px; height: 48px; margin-bottom: 30px; border-radius: 16px; font-size: 25px; }
.eyebrow { margin: 0; color: #8c9388; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.auth-card h1 { margin: 10px 0 8px; font-family: "Segoe UI", sans-serif; font-size: 29px; font-weight: 700; letter-spacing: -.055em; }
.auth-description { margin: 0 0 27px; color: var(--muted-dark); font-size: 14px; line-height: 1.65; }
.form-stack { display: grid; gap: 17px; }
.field { display: grid; gap: 8px; color: #4a544b; font-size: 12px; font-weight: 600; }
.field input, .field textarea {
  width: 100%;
  min-height: 45px;
  padding: 11px 13px;
  border: 1px solid #e4e8df;
  border-radius: 9px;
  outline: none;
  color: var(--ink);
  background: #fff;
  font-size: 14px;
  font-weight: 400;
  transition: border-color .16s, box-shadow .16s;
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .search-box:focus-within, .composer:focus-within { border-color: #80a78c; box-shadow: 0 0 0 3px rgb(36 91 70 / 8%); }
.field input::placeholder { color: #a4aaa2; }
.button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background .16s, transform .16s, border-color .16s;
}
.button:active { transform: translateY(1px); }
.button:disabled, .send-button:disabled { cursor: not-allowed; opacity: .48; }
.button-primary { color: white; background: var(--green); }
.button-primary:hover:not(:disabled) { background: #1d4d3b; }
.button-primary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.button-wide { width: 100%; min-height: 47px; margin-top: 3px; }
.button-quiet { border-color: #e4e8df; color: #5d675d; background: white; }
.button-quiet:hover { background: #f5f7f2; }
.auth-footnote { margin: 23px 0 0; color: #969c92; font-size: 11px; line-height: 1.6; text-align: center; }
.auth-caption { position: absolute; bottom: 24px; z-index: 1; margin: 0; color: #92988d; font-size: 11px; letter-spacing: .04em; }
.form-error { margin: 0; color: var(--danger); font-size: 12px; line-height: 1.5; }
.form-success { padding: 11px 12px; border-radius: 8px; color: #266442; background: #edf5ed; font-size: 12px; line-height: 1.5; }

.app-shell {
  display: grid;
  width: min(100%, 1600px);
  height: 100vh;
  min-height: 560px;
  grid-template-columns: 326px minmax(0, 1fr);
  margin: 0 auto;
  overflow: hidden;
  border-right: 1px solid #e7eae3;
  border-left: 1px solid #e7eae3;
  background: var(--paper);
  box-shadow: 0 0 80px rgb(33 46 37 / 5%);
}

.sidebar { position: relative; z-index: 2; display: flex; min-width: 0; flex-direction: column; border-right: 1px solid var(--line); background: #fff; }
.sidebar-header { display: flex; height: 76px; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid #f1f2ee; }
.brand-lockup { display: flex; align-items: center; gap: 11px; }
.brand-lockup > div:last-child { display: grid; gap: 2px; }
.brand-lockup strong { font-family: "Segoe UI", sans-serif; font-size: 16px; font-weight: 800; letter-spacing: -.06em; }
.brand-lockup span { color: #93998e; font-size: 8px; font-weight: 700; letter-spacing: .15em; }
.icon-button {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #778076;
  background: transparent;
  cursor: pointer;
  transition: color .16s, background .16s, border-color .16s;
}
.icon-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.icon-button:hover { border-color: #e5e9e1; color: var(--green); background: #f7f9f5; }
.new-chat-button { color: #f3f5e9; background: var(--green); }
.new-chat-button:hover { border-color: var(--green); color: white; background: #1d4d3b; }
.sidebar-intro { display: flex; align-items: end; justify-content: space-between; padding: 24px 22px 18px; }
.sidebar-intro h1 { margin: 4px 0 0; font-family: "Segoe UI", sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -.055em; }
.live-pill { display: inline-flex; height: 22px; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid #e4ece3; border-radius: 20px; color: #6b826a; background: #f7faf6; font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.live-pill i, .connection-status i { width: 6px; height: 6px; border-radius: 50%; background: #5fa26c; box-shadow: 0 0 0 3px rgb(95 162 108 / 12%); }
.search-box { display: flex; height: 39px; align-items: center; gap: 9px; margin: 0 18px 22px; padding: 0 10px; border: 1px solid #e9ece6; border-radius: 8px; color: #92998e; background: #fbfcfa; transition: border-color .16s, box-shadow .16s; }
.search-box svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }
.search-box input::placeholder { color: #a0a59e; }
kbd { flex: 0 0 auto; padding: 2px 4px; border: 1px solid #ebede7; border-radius: 4px; color: #a1a69e; background: white; font-family: inherit; font-size: 8px; }
.section-label { display: flex; align-items: center; justify-content: space-between; margin: 0 22px 8px; color: #a0a69c; font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.text-button { padding: 0; border: 0; color: #778d7b; background: transparent; cursor: pointer; font-size: 10px; font-weight: 600; }
.text-button:hover { color: var(--green); }
.room-list { min-height: 0; flex: 1; overflow: auto; padding: 0 9px 14px; }
.room-item { display: flex; width: 100%; align-items: center; gap: 11px; padding: 11px 12px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; text-align: left; transition: background .15s; }
.room-item:hover { background: #f7f8f5; }
.room-item.active { background: #eef4ef; }
.room-item.active .room-title { color: #214e3c; }
.avatar { display: grid; width: 41px; height: 41px; flex: 0 0 auto; place-items: center; border-radius: 13px; font-family: "Segoe UI", sans-serif; font-size: 14px; font-weight: 700; }
.avatar-room { color: #315d49; background: #e5efe5; }
.avatar-room.direct { color: #735a36; background: #f3ede1; }
.avatar-user { width: 34px; height: 34px; border-radius: 11px; color: #315d49; background: #e5efe5; font-size: 12px; }
.room-copy { min-width: 0; flex: 1; }
.room-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.room-title { overflow: hidden; color: #303a31; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.room-time { flex: 0 0 auto; color: #a1a69f; font-size: 9px; }
.room-reminder { display: inline-flex; min-height: 17px; flex: 0 0 auto; align-items: center; padding: 2px 5px; border: 1px solid #e8dfc7; border-radius: 10px; color: #896f3c; background: #fbf7ea; font-size: 8px; font-weight: 600; }
.room-reminder.due { border-color: #efdbd5; color: #a64e43; background: #fff3ef; }
.room-bottomline { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; }
.room-preview { overflow: hidden; color: #92988f; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.unread-badge { display: grid; min-width: 17px; height: 17px; flex: 0 0 auto; place-items: center; padding: 0 5px; border-radius: 10px; color: white; background: var(--green); font-size: 9px; font-weight: 600; }
.sidebar-empty { padding: 36px 12px; color: #92988f; text-align: center; }
.sidebar-empty p { margin: 8px 0; font-size: 12px; }
.empty-icon { color: #b7c1b4; font-size: 26px; }
.sidebar-footer { display: flex; min-height: 68px; flex: 0 0 auto; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--line); background: #fff; }
.user-details { display: grid; min-width: 0; flex: 1; gap: 3px; }
.user-details strong { overflow: hidden; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.user-details span { color: #969c93; font-size: 9px; }
.footer-actions { display: flex; gap: 2px; }
.settings-toggle { display: flex; align-items: flex-start; gap: 11px; padding: 12px; border: 1px solid #e8ebe4; border-radius: 9px; background: #fbfcfa; cursor: pointer; }
.settings-toggle input { width: 18px; height: 18px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--green); }
.settings-toggle span { display: grid; gap: 4px; }
.settings-toggle strong { color: #39443a; font-size: 13px; }
.settings-toggle small { color: #788276; font-size: 11px; line-height: 1.5; }

.conversation { position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; background: #fcfdfb; }
.welcome-state { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }
.welcome-art { position: relative; width: 220px; height: 170px; margin-bottom: 29px; }
.welcome-art-grid { position: absolute; inset: 14px 20px; opacity: .48; background-image: radial-gradient(#cbd4c8 1px, transparent 1px); background-size: 13px 13px; mask-image: radial-gradient(ellipse, black, transparent 72%); }
.welcome-art-center { position: absolute; top: 49px; left: 83px; display: grid; width: 55px; height: 55px; place-items: center; border: 8px solid white; border-radius: 19px; background: #e5efe5; box-shadow: 0 8px 20px rgb(42 82 56 / 13%); transform: rotate(-5deg); }
.welcome-art-center .brand-mark { width: 34px; height: 34px; border-radius: 11px; font-size: 18px; }
.welcome-art-card { position: absolute; display: flex; width: 85px; height: 34px; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid #eef0ea; border-radius: 8px; background: white; box-shadow: 0 4px 12px rgb(36 52 38 / 7%); }
.welcome-art-card span:nth-child(2) { width: 25px; height: 4px; border-radius: 4px; background: #e6ebe2; }
.welcome-art-card i { width: 17px; height: 4px; margin-left: auto; border-radius: 4px; background: #f0f1ec; }
.mini-dot { width: 8px; height: 8px; border-radius: 50%; background: #85a989; }
.card-one { top: 25px; left: 23px; transform: rotate(-8deg); }
.card-two { right: 12px; bottom: 29px; transform: rotate(7deg); }
.welcome-state > .eyebrow { color: #77907d; }
.welcome-state h2 { margin: 12px 0 10px; font-family: "Segoe UI", sans-serif; font-size: clamp(26px, 3vw, 37px); font-weight: 600; letter-spacing: -.065em; line-height: 1.2; }
.welcome-copy { max-width: 365px; margin: 0 0 22px; color: #8b9289; font-size: 12px; line-height: 1.7; }
.conversation-view { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.conversation-header { display: flex; height: 75px; flex: 0 0 auto; align-items: center; gap: 12px; padding: 0 29px; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 93%); }
.back-button { display: none; }
.conversation-heading { min-width: 0; flex: 1; }
.conversation-heading h2 { overflow: hidden; margin: 0; font-family: "Segoe UI", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.conversation-heading p { margin: 4px 0 0; color: #949a91; font-size: 10px; }
.call-actions { display: flex; flex: 0 0 auto; gap: 5px; }
.call-actions[hidden] { display: none; }
.connection-status { display: flex; align-items: center; gap: 8px; color: #788578; font-size: 10px; }
.message-scroll { min-height: 0; flex: 1; overflow-y: auto; scroll-behavior: smooth; }
.message-list { display: flex; min-height: 100%; flex-direction: column; justify-content: end; gap: 22px; padding: 27px max(34px, calc((100% - 800px) / 2)) 32px; }
.history-button { align-self: center; padding: 7px 12px; border: 1px solid #e6eae3; border-radius: 20px; color: #7d897d; background: white; cursor: pointer; font-size: 10px; }
.history-button:hover { border-color: #c9d8c8; color: var(--green); }
.date-divider { display: flex; align-items: center; gap: 12px; margin: 2px 0; color: #a5aaa2; font-size: 9px; }
.date-divider::before, .date-divider::after { height: 1px; flex: 1; background: #eceee8; content: ""; }
.message-row { display: flex; max-width: 78%; align-items: end; gap: 9px; }
.message-row.own { align-self: flex-end; flex-direction: row-reverse; }
.message-avatar { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #43664c; background: #e9efe5; font-size: 9px; font-weight: 700; }
.message-content { min-width: 0; }
.message-sender-line { display: flex; align-items: center; gap: 7px; margin: 0 0 5px 3px; }
.message-sender { margin: 0; color: #737c72; font-size: 9px; font-weight: 600; }
.message-row.own .message-sender { text-align: right; }
.reminder-chip { display: inline-flex; min-height: 19px; align-items: center; gap: 5px; padding: 2px 6px; border: 1px solid #e8dfc7; border-radius: 12px; color: #896f3c; background: #fbf7ea; font-size: 8px; font-weight: 600; }
.reminder-chip.due { border-color: #efdbd5; color: #a64e43; background: #fff3ef; }
.reminder-done { padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; font-size: 8px; text-decoration: underline; }
.message-bubble { padding: 10px 13px; border: 1px solid #e9ece6; border-radius: 3px 13px 13px; color: #414a41; background: white; box-shadow: 0 2px 4px rgb(37 52 39 / 2%); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.message-row.own .message-bubble { border-color: #dce9dd; border-radius: 13px 3px 13px 13px; color: #315240; background: #eaf2e9; }
.message-attachments { display: grid; width: min(420px, 100%); max-width: 100%; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 7px; margin-top: 7px; }
.message-attachments img, .message-attachments video { display: block; max-width: 100%; max-height: 300px; border: 1px solid #e8ebe4; border-radius: 9px; background: #f4f6f1; }
.message-attachments img { width: auto; height: auto; object-fit: contain; }
.message-attachments video { width: min(420px, 100%); }
.attachment-download { display: grid; min-width: 0; min-height: 54px; align-content: center; gap: 3px; overflow: hidden; padding: 8px 10px; border: 1px solid #e6eae2; border-radius: 9px; color: #41644b; background: #fff; font-size: 12px; text-decoration: none; }
.attachment-download-name { min-width: 0; overflow: hidden; color: #41644b; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.attachment-download small { color: #92988f; font-size: 11px; }
.attachment-download:hover { border-color: #c9d8c8; background: #f7faf6; }
.attachment-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 7px; padding: 8px 0 3px; }
.attachment-preview-item { display: flex; min-width: 0; min-height: 46px; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid #e8ebe4; border-radius: 9px; color: #657365; background: #fafbf9; }
.attachment-preview-details { display: grid; min-width: 0; gap: 2px; }
.attachment-preview-name, .attachment-preview-size { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-preview-name { color: #465548; font-size: 12px; }
.attachment-preview-size { color: #90988e; font-size: 11px; }
.attachment-preview-item .attachment-preview-remove { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid #eee2df; border-radius: 8px; color: #a0645a; background: white; cursor: pointer; font-size: 20px; line-height: 1; }
.follow-up-control { display: flex; align-items: center; gap: 7px; padding: 6px 2px 2px; color: #778477; font-size: 9px; }
.follow-up-control[hidden] { display: none; }
.follow-up-control select { min-height: 27px; padding: 3px 7px; border: 1px solid #e8ebe4; border-radius: 6px; color: #526552; background: #fff; font-size: 9px; }
.follow-up-control input { width: 110px; min-height: 38px; padding: 6px 9px; border: 1px solid #e8ebe4; border-radius: 6px; color: #526552; background: #fff; font-size: 16px; }
.follow-up-control select:disabled { opacity: .5; }
.visually-hidden-file { position: fixed; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.promise-follow-up { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 3px 0; color: #8d6a32; font-size: 9px; }
.promise-follow-up-countdown { padding: 4px 7px; border: 1px solid #eee2c8; border-radius: 12px; background: #fffaf0; }
.promise-follow-up button { padding: 0; border: 0; color: #687a67; background: transparent; cursor: pointer; font-size: 9px; text-decoration: underline; }
.promise-follow-up.resolved { color: #5e8061; }
.promise-follow-up.resolved .promise-follow-up-countdown { border-color: #e0eadf; background: #f2f7f0; }
.message-meta { display: flex; align-items: center; gap: 7px; margin: 5px 3px 0; color: #a7aca4; font-size: 8px; }
.message-row.own .message-meta { justify-content: flex-end; }
.scheduled-state { color: #987647; font-weight: 600; }
.scheduled-cancel { padding: 0; border: 0; color: #a0645a; background: transparent; cursor: pointer; font-size: 8px; text-decoration: underline; }
.message-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 5px 3px 0; }
.reminder-trigger { padding: 0; border: 0; color: #8b977f; background: transparent; cursor: pointer; font-size: 9px; }
.reminder-trigger:hover { color: var(--green); }
.reminder-options { display: inline-flex; max-width: 100%; flex-wrap: wrap; gap: 4px; }
.reminder-options[hidden] { display: none; }
.reminder-choice { padding: 3px 7px; border: 1px solid #e7eae2; border-radius: 12px; color: #637361; background: white; cursor: pointer; font-size: 8px; }
.reminder-choice:hover { border-color: #b7cbb7; color: var(--green); }
.reminder-custom { display: inline-flex; align-items: center; gap: 4px; }
.reminder-custom input { width: 82px; min-height: 28px; padding: 3px 6px; border: 1px solid #e7eae2; border-radius: 8px; font-size: 14px; }
.reply-reminder-choices { display: grid; gap: 10px; }
.reply-reminder-choices[hidden] { display: none; }
.reply-reminder-choices .modal-description { margin: 0; }
.reply-reminder-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.reply-reminder-choices .reminder-custom input { width: 145px; min-height: 38px; }
.message-row { touch-action: pan-y; }
.composer-actions { display: flex; min-width: 0; align-items: center; gap: 8px; }
.voice-record-status { color: #a64e43; font-size: 10px; font-weight: 600; }
.schedule-open-button { display: inline-flex; height: 30px; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid #e8ebe4; border-radius: 7px; color: #6c796d; background: #fff; cursor: pointer; font-size: 9px; font-weight: 600; }
.schedule-open-button:hover:not(:disabled) { border-color: #c9d8c8; color: var(--green); }
.schedule-open-button:disabled { cursor: not-allowed; opacity: .48; }
.schedule-open-button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.empty-messages { display: grid; flex: 1; align-content: center; justify-items: center; padding: 20px; color: #8c948a; text-align: center; }
.empty-messages .empty-bubble { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 13px; border-radius: 16px; color: #54755b; background: #edf3ea; font-size: 20px; }
.empty-messages strong { margin-bottom: 5px; color: #526052; font-size: 12px; }
.empty-messages span { font-size: 10px; }
.message-form { flex: 0 0 auto; padding: 0 28px 25px; background: transparent; }
.composer { max-width: 860px; margin: 0 auto; padding: 11px 13px 9px; border: 1px solid #e5e9e2; border-radius: 12px; background: white; box-shadow: 0 5px 18px rgb(34 48 36 / 4%); transition: border-color .16s, box-shadow .16s; }
.composer textarea { display: block; width: 100%; min-height: 33px; max-height: 160px; resize: none; padding: 5px 2px; border: 0; outline: 0; color: #29332b; background: transparent; font-size: 12px; line-height: 1.6; }
.composer textarea::placeholder { color: #a2a89f; }
.composer-bottom { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding-top: 7px; color: #a0a69d; font-size: 9px; }
.send-button { display: inline-flex; height: 31px; align-items: center; gap: 7px; padding: 0 11px; border: 0; border-radius: 7px; color: white; background: var(--green); cursor: pointer; font-size: 10px; font-weight: 600; }
.send-button:hover:not(:disabled) { background: #1d4d3b; }
.send-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.key-hint { padding: 0 3px; }

.modal { width: min(100% - 30px, 450px); max-height: min(90vh, 700px); padding: 0; overflow: auto; border: 1px solid #e8ebe4; border-radius: 16px; color: var(--ink); background: white; box-shadow: var(--shadow); }
.modal::backdrop { background: rgb(27 37 31 / 36%); backdrop-filter: blur(3px); }
.modal-form { display: grid; gap: 17px; padding: 24px; }
.group-management-form { display: grid; gap: 12px; }
.group-delete-section { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid #eee8e5; }
.group-delete-section h3 { margin: 0; color: #a64e43; font-size: 14px; }
.group-delete-section .modal-description { margin: 0; }
.group-delete-section .field strong { color: #a64e43; overflow-wrap: anywhere; }
.button-danger { color: white; background: #ad453d; }
.button-danger:hover:not(:disabled) { background: #91372f; }
.button-danger:disabled { cursor: not-allowed; opacity: .48; }
.call-troubleshoot-dialog { width: min(100% - 30px, 430px); }
.call-troubleshoot-checks { display: grid; gap: 9px; margin: -4px 0 0; padding-left: 20px; color: #647064; font-size: 12px; line-height: 1.5; }
.call-troubleshoot-checks code { overflow-wrap: anywhere; color: #355944; }
.modal-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.modal-top h2 { margin: 5px 0 0; font-family: "Segoe UI", sans-serif; font-size: 21px; font-weight: 700; letter-spacing: -.05em; }
.modal-description { margin: -5px 0 2px; color: #899087; font-size: 11px; line-height: 1.6; }
.invite-panel { display: grid; gap: 10px; padding: 14px; border: 1px solid #e6eae2; border-radius: 10px; background: #fafbf8; }
.invite-panel h3 { margin: 4px 0 0; color: #3e4c40; font-size: 14px; }
.invite-panel .modal-description { margin: 0; }
.invite-code-result { display: grid; gap: 7px; color: #5f705f; font-size: 11px; }
.invite-code-row { display: flex; align-items: center; gap: 8px; }
.invite-code-row code { min-width: 0; overflow-wrap: anywhere; padding: 8px; border: 1px solid #e3e8df; border-radius: 7px; color: #354d3c; background: white; font-size: 12px; user-select: all; }
.invite-list { display: grid; gap: 6px; color: #778277; font-size: 11px; }
.invite-list:empty { display: none; }
.invite-list-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 7px; border-top: 1px solid #e8ebe4; }
.invite-list-item button { padding: 4px 7px; border: 1px solid #eadbd7; border-radius: 6px; color: #a64e43; background: white; cursor: pointer; font-size: 11px; }
.segmented-control { display: flex; gap: 4px; padding: 4px; border-radius: 9px; background: #f2f4ef; }
.segment { min-height: 32px; flex: 1; border: 0; border-radius: 7px; color: #858d82; background: transparent; cursor: pointer; font-size: 11px; font-weight: 600; }
.segment.active { color: #355944; background: white; box-shadow: 0 1px 4px rgb(36 49 37 / 9%); }
.member-picker { display: grid; max-height: 230px; overflow: auto; padding: 3px; border: 1px solid #e6e9e2; border-radius: 9px; }
.member-option { display: flex; min-height: 48px; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.member-option:hover { background: #f7f9f5; }
.member-option input { width: 15px; height: 15px; margin: 0 2px 0 0; accent-color: var(--green); }
.member-option .avatar { width: 31px; height: 31px; border-radius: 10px; font-size: 11px; }
.member-option > span:last-child { display: grid; gap: 2px; }
.member-option strong { color: #404b40; font-size: 11px; font-weight: 600; }
.member-option small { color: #989e95; font-size: 9px; }
.picker-empty { padding: 20px 10px; color: #899087; font-size: 11px; text-align: center; }
.modal-actions { display: flex; justify-content: end; gap: 8px; padding-top: 2px; }
.modal-actions[hidden] { display: none; }
.modal-actions > [hidden] { display: none; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 10; max-width: min(380px, calc(100vw - 32px)); padding: 12px 16px; border: 1px solid #e8ebe4; border-radius: 10px; color: #39483c; background: white; box-shadow: 0 10px 32px rgb(32 45 34 / 13%); font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: translateY(0); }

#chat-screen :is(p, span, button, small, strong, label, input, select, textarea, a, kbd) {
  font-size: max(14px, 0.875em);
}
#chat-screen #custom-follow-up-minutes { font-size: 16px; }
.camera-dialog video { display: block; width: 100%; max-height: min(60vh, 480px); border-radius: 10px; background: #17231b; object-fit: contain; }
.camera-dialog .modal-actions { flex-wrap: wrap; }
.call-dialog { width: min(100% - 24px, 620px); }
.call-media { position: relative; display: grid; gap: 10px; }
.call-media[hidden] { display: none; }
.call-media video { width: 100%; max-height: 55vh; border-radius: 10px; background: #17231b; object-fit: contain; }
.call-media #call-local-video { position: absolute; right: 38px; bottom: 96px; width: min(26%, 150px); border: 2px solid white; box-shadow: 0 3px 12px rgb(0 0 0 / 20%); }
.call-media video[hidden], .call-media audio[hidden] { display: none; }
.call-media #call-end-button { justify-self: center; background: #9c453d; }
.call-media #call-end-button:hover { background: #81372f; }
.voice-record-status { white-space: nowrap; }

@media (max-width: 760px) {
  .app-shell { height: 100vh; height: 100dvh; grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sidebar { display: none; }
  .app-shell.has-room .sidebar { display: none; }
  .app-shell:not(.has-room) .sidebar { display: flex; }
  .app-shell:not(.has-room) .conversation { display: none; }
  .app-shell.has-room .conversation { display: flex; }
  .back-button { display: grid; }
  .conversation-header { height: 67px; padding: 0 17px; }
  .message-list { padding: 20px 16px 25px; }
  .message-form { padding: 0 10px max(10px, env(safe-area-inset-bottom)); }
  .message-row { max-width: 90%; }
  .connection-status { font-size: 0; }
  .connection-status i { width: 7px; height: 7px; }
  .call-actions .schedule-open-button { padding: 0 5px; }
  .welcome-state { padding: 22px; }
  .auth-card { padding: 36px 27px 30px; }
  .composer-bottom { display: flex; flex-direction: column; align-items: stretch; gap: 5px; font-size: 8px; }
  .composer-bottom > span { display: block; order: 2; padding-top: 2px; text-align: center; }
  .composer-actions { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-top: 7px; }
  #chat-screen .composer-actions .schedule-open-button { width: 100%; min-width: 0; max-width: 100%; height: 40px; justify-content: center; padding: 0 2px; font-size: 10px; white-space: nowrap; }
  #chat-screen .composer-actions #send-button { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; grid-column: 1 / -1; justify-content: center; font-size: 15px; }
  #chat-screen .composer-actions #send-button svg { width: 17px; height: 17px; }
  #chat-screen .composer-actions #voice-record-status { grid-column: 1 / -1; }
  #chat-screen .composer:not(.is-expanded) .attachment-preview,
  #chat-screen .composer:not(.is-expanded) .follow-up-control,
  #chat-screen .composer:not(.is-expanded) .composer-bottom { display: none; }
  #chat-screen .composer:not(.is-expanded) textarea { min-height: 34px; max-height: 34px; overflow: hidden; }
}

@media (max-width: 420px) {
  .sidebar-header { height: 66px; padding: 0 17px; }
  .sidebar-intro { padding: 19px 18px 16px; }
  .search-box { margin-right: 14px; margin-left: 14px; }
  .section-label { margin-right: 18px; margin-left: 18px; }
  .message-bubble { padding: 9px 11px; font-size: 11px; }
  .attachment-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .attachment-preview-item { min-height: 48px; gap: 4px; padding: 5px; }
  .attachment-preview-item .attachment-preview-remove { width: 28px; height: 28px; }
  .message-attachments { grid-template-columns: 1fr; }
  .message-attachments img { max-height: 220px; }
  .call-actions { gap: 3px; }
  .call-actions .schedule-open-button { padding: 0 4px; font-size: 8px; }
  .follow-up-control { padding-top: 4px; }
  .message-list { gap: 18px; }
}