:root {
  --green: #1daa61;
  --green-dark: #008069;
  --text: #111b21;
  --muted: #667781;
  --line: #e9edef;
  --outgoing: #d9fdd3;
  --incoming: #ffffff;
  --wallpaper: #efeae2;
  --blue-tick: #53bdeb;
  --danger: #d0342c;
  --search: #f0f2f5;
  --note: #fff3c4;
  --note-label: #7a5d00;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: #d1d7db;
  color: var(--text);
  font-family: system-ui, "Segoe UI", Roboto, "Noto Sans Hebrew", Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
.sprite { display: none; }
.icon { width: 24px; height: 24px; flex: none; display: block; }
[hidden] { display: none !important; }

#app {
  position: relative;
  max-width: 480px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 24px rgb(0 0 0 / .15);
}
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }

/* Conversation list */
.list-header { padding: max(14px, env(safe-area-inset-top)) 16px 10px; flex: none; }
.list-header h1 { margin: 0; color: var(--green); font-size: 24px; font-weight: 600; }
.list-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.push-setting { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; cursor: pointer; }
.push-setting input { width: 18px; height: 18px; margin: 0; accent-color: var(--green-dark); cursor: pointer; }
.search { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 22px; background: var(--search); color: var(--muted); }
.search .icon { width: 21px; height: 21px; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; }
.search input::-webkit-search-cancel-button { display: none; }
.filters { display: flex; gap: 8px; margin-top: 10px; }
.filter { height: 32px; padding: 0 14px; border: 0; border-radius: 16px; background: var(--search); color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.filter:hover, .filter:focus-visible { background: #e4e7ea; outline: 0; }
.filter[aria-pressed="true"] { background: #d9fdd3; color: var(--green-dark); font-weight: 600; }

.conversations { flex: 1; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.conversation { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: inherit; text-decoration: none; }
.conversation:hover, .conversation:focus-visible { background: #f5f6f6; outline: 0; }
.conversation-body { flex: 1; min-width: 0; padding-bottom: 1px; }
.conversation-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conversation-name { overflow: hidden; font-size: 17px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.conversation-time { flex: none; color: var(--muted); font-size: 12px; }
.has-unread .conversation-time { color: var(--green); font-weight: 600; }
.conversation-preview { display: flex; flex: 1; align-items: center; gap: 3px; min-width: 0; margin-top: 3px; color: var(--muted); font-size: 14px; }
.conversation-preview span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.badge { display: grid; flex: none; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--green); color: #fff; font-size: 12px; font-weight: 600; }
.empty { margin: 48px 32px; color: var(--muted); font-size: 14px; line-height: 1.5; text-align: center; }

.new-chat { position: absolute; bottom: max(20px, env(safe-area-inset-bottom)); left: 18px; display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 16px; background: var(--green); box-shadow: 0 2px 6px rgb(11 20 26 / .3); color: #fff; cursor: pointer; }
.new-chat-dialog { width: min(340px, calc(100% - 32px)); border: 0; border-radius: 16px; padding: 20px; box-shadow: 0 8px 30px rgb(11 20 26 / .3); color: var(--text); }
.new-chat-dialog::backdrop { background: rgb(11 20 26 / .4); }
.new-chat-dialog h2 { margin: 0 0 14px; font-size: 18px; font-weight: 600; }
.new-chat-dialog input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid #c9d1d6; border-radius: 10px; outline-color: var(--green-dark); font: inherit; text-align: right; }
.new-chat-error { margin: 8px 0 0; color: var(--danger); font-size: 13px; }
.new-chat-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.new-chat-actions button { height: 38px; padding: 0 18px; border: 0; border-radius: 19px; background: var(--green-dark); color: #fff; font: inherit; cursor: pointer; }
.new-chat-actions .secondary { background: transparent; color: var(--green-dark); }

.templates-dialog { width: min(420px, calc(100% - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.template-list { margin: 0 0 4px; padding: 0; list-style: none; }
.template-list li { display: flex; align-items: flex-start; gap: 6px; border-bottom: 1px solid var(--line); }
.template-pick { flex: 1; min-width: 0; padding: 10px 4px; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.template-pick:hover, .template-pick:focus-visible { background: #f5f6f6; outline: 0; }
.template-name { display: block; font-weight: 600; direction: ltr; text-align: right; }
.template-body { display: -webkit-box; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.template-remove { flex: none; margin-top: 8px; padding: 4px 8px; border: 0; background: none; color: var(--danger); font-size: 12px; cursor: pointer; }
.template-note { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.template-preview { margin: 0 0 12px; padding: 9px 11px; border-radius: 9px; background: var(--outgoing); font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.template-field { display: block; margin-bottom: 10px; color: var(--muted); font-size: 13px; }
.template-field input, .template-field textarea { display: block; width: 100%; margin-top: 4px; padding: 9px 12px; border: 1px solid #c9d1d6; border-radius: 10px; outline-color: var(--green-dark); color: var(--text); font: inherit; font-size: 15px; resize: vertical; }
.template-field input { height: 42px; }
.composer .tool-button { width: 40px; height: 46px; border-radius: 12px; background: transparent; color: #54656f; }
.composer .tool-button:hover, .composer .tool-button:focus-visible { background: rgb(11 20 26 / .06); outline: 0; }
.note-dialog { width: min(420px, calc(100% - 24px)); }
.note-text { display: block; width: 100%; padding: 10px 12px; border: 1px solid #c9d1d6; border-radius: 10px; outline-color: var(--green-dark); color: var(--text); font: inherit; font-size: 15px; line-height: 1.4; resize: vertical; }

.avatar { display: grid; flex: none; place-items: center; width: 50px; height: 50px; overflow: hidden; border-radius: 50%; background: #dfe5e7; color: #fff; }
.avatar .icon { width: 34px; height: 34px; }
.avatar.small { width: 38px; height: 38px; }
.avatar.small .icon { width: 26px; height: 26px; }

.phone-number { direction: ltr; unicode-bidi: isolate; }

/* Chat */
.chat-header { display: flex; flex: none; align-items: center; gap: 8px; min-height: 58px; padding: max(8px, env(safe-area-inset-top)) 6px 8px 16px; border-bottom: 1px solid var(--line); background: #fff; }
.chat-header h2 { margin: 0; overflow: hidden; font-size: 17px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.chat-heading { min-width: 0; }
.chat-subtitle { display: block; color: var(--muted); font-size: 13px; text-align: right; }
.back { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text); }
.back:hover, .back:focus-visible { background: var(--search); outline: 0; }
.read-toggle { flex: none; margin-inline-start: auto; padding: 7px 12px; border: 0; border-radius: 16px; background: transparent; color: var(--green-dark); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.read-toggle:hover, .read-toggle:focus-visible { background: var(--search); outline: 0; }
.read-toggle:disabled { opacity: .6; cursor: default; }

.messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgb(11 20 26 / .2) transparent;
  background-color: var(--wallpaper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23b8ad9c' stroke-opacity='.16' stroke-width='1.4'%3E%3Ccircle cx='22' cy='24' r='7'/%3E%3Cpath d='M72 14l5 10 11 1-8 8 2 11-10-5-10 5 2-11-8-8 11-1z'/%3E%3Cpath d='M16 76c0-6 9-6 9 0 0-6 9-6 9 0 0 7-9 12-9 14-0-2-9-7-9-14z'/%3E%3Crect x='70' y='74' width='24' height='17' rx='3'/%3E%3Cpath d='M70 78l12 8 12-8'/%3E%3C/svg%3E");
}

.day { align-self: center; margin: 10px 0; padding: 5px 12px; border-radius: 8px; background: #fff; box-shadow: 0 1px 1px rgb(11 20 26 / .1); color: var(--muted); font-size: 12px; }
.message { position: relative; max-width: 82%; margin-top: 1px; padding: 6px 9px 7px; border-radius: 9px; box-shadow: 0 1px 1px rgb(11 20 26 / .13); font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.message.in { align-self: flex-start; background: var(--incoming); }
.message.out { align-self: flex-end; background: var(--outgoing); }
/* An internal note sits in the middle, so it is never mistaken for something the client saw. */
.message.note { align-self: center; max-width: 88%; background: var(--note); }
.note-label { display: block; margin-bottom: 2px; color: var(--note-label); font-size: 12px; font-weight: 600; }
.message.first { margin-top: 8px; }

/* Tails. The page is right to left, so incoming sits on the right and outgoing on the left. */
.message.first.in { border-start-start-radius: 0; }
.message.first.out { border-start-end-radius: 0; }
.message.first:not(.note)::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; }
.message.first.in::before { right: -8px; background: var(--incoming); clip-path: polygon(0 0, 100% 0, 0 100%); }
.message.first.out::before { left: -8px; background: var(--outgoing); clip-path: polygon(0 0, 100% 0, 100% 100%); }

.text { white-space: pre-wrap; }
.text a { color: #027eb5; }
.unknown { color: var(--muted); font-style: italic; }
.meta { display: inline-flex; float: left; align-items: center; gap: 3px; margin-right: 10px; margin-top: 6px; margin-bottom: -3px; color: var(--muted); font-size: 11px; line-height: 15px; direction: ltr; }
.meta .source { direction: rtl; font-style: italic; margin-right: 2px; }
.tick { width: 18px; height: 11px; }
.tick-clock { width: 12px; height: 12px; }
.status-read { color: var(--blue-tick); }
.status-failed { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.send-error { clear: both; margin-top: 6px; padding-top: 5px; border-top: 1px solid rgb(11 20 26 / .1); color: var(--danger); font-size: 13px; }

.media { display: block; max-width: 100%; margin-bottom: 4px; border-radius: 6px; }
img.media { max-height: 340px; }
audio.media { width: 250px; max-width: 100%; }
.media-note { display: block; margin-bottom: 4px; padding: 18px 14px; border-radius: 6px; background: rgb(11 20 26 / .06); color: var(--muted); font-size: 13px; text-align: center; }
.document { display: flex; align-items: center; gap: 8px; min-width: 200px; margin-bottom: 4px; padding: 10px; border-radius: 6px; background: rgb(11 20 26 / .05); color: inherit; text-decoration: none; }
.document .icon { color: #8c97a0; }

.window-warning { flex: none; margin: 0; padding: 7px 14px; background: #fff8d6; color: #54470c; font-size: 13px; line-height: 1.35; text-align: center; }
.offline { flex: none; padding: 6px; background: var(--danger); color: #fff; font-size: 13px; text-align: center; }

.composer { display: flex; flex: none; align-items: flex-end; gap: 6px; padding: 6px 8px max(8px, env(safe-area-inset-bottom)); background: var(--wallpaper); }
.composer textarea { flex: 1; min-width: 0; max-height: 132px; padding: 12px 18px; resize: none; border: 0; border-radius: 24px; outline: 0; background: #fff; box-shadow: 0 1px 1px rgb(11 20 26 / .1); color: var(--text); font: inherit; line-height: 22px; }
.composer button { display: grid; flex: none; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--green-dark); color: #fff; cursor: pointer; }
.composer button:disabled { opacity: .6; cursor: default; }
.composer .icon { width: 22px; height: 22px; }

/* SUP additions: signed-in user, office number picker, demo banner, blocked screen */
.demo-banner { margin: -4px -16px 8px; padding: 4px 16px; background: #fff3c4; color: #7a5d00; font-size: 13px; text-align: center; }
.user-box { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.user-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-link { color: var(--green-dark); text-decoration: none; font-weight: 600; }
.sign-out { font: inherit; font-size: 13px; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.number-row { margin: 4px 0 8px; }
.number-picker { width: 100%; font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--search); color: var(--text); }
.number-single { font-size: 13px; color: var(--muted); }
.blocked { max-width: 420px; margin: 15vh auto 0; padding: 24px; text-align: center; background: #fff; border-radius: 12px; line-height: 1.6; }
.chat-placeholder { display: none; }

/* Desktop: list and chat side by side, like WhatsApp on a computer. */
@media (min-width: 900px) {
  #app { max-width: 1400px; display: grid; grid-template-columns: minmax(320px, 30%) 1fr; height: calc(100dvh - 38px); margin-top: 19px; }
  .screen { position: relative; inset: auto; }
  #list-screen { display: flex !important; border-left: 1px solid var(--line); }
  #chat-screen .back { display: none; }
  .chat-placeholder { display: flex; align-items: center; justify-content: center; background: var(--search); color: var(--muted); }
  #chat-screen:not([hidden]) ~ .chat-placeholder { display: none; }
}

/* Admin screen */
body.admin { background: var(--search); }
.admin-page { max-width: 1000px; margin: 0 auto; padding: 16px; }
.admin-header { display: flex; justify-content: space-between; align-items: baseline; }
.admin-header a { color: var(--green-dark); }
.admin-page section { background: #fff; border-radius: 12px; padding: 16px; margin: 16px 0; }
.admin-page h2 { margin: 0 0 4px; font-size: 18px; }
.admin-hint { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.admin-error { background: #fde8e7; color: var(--danger); padding: 8px 12px; border-radius: 8px; }
.admin-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { text-align: start; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.admin-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.admin-form input:not([type=checkbox]) { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; flex: 1 1 160px; }
.admin-form button { font: inherit; font-size: 14px; padding: 6px 14px; border: 0; border-radius: 8px; background: var(--green-dark); color: #fff; cursor: pointer; }

/* Legal file bar above the chat */
.file-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 12px; background: #f7f8fa; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.file-text { flex: 1 1 200px; }
.file-select { flex: 1 1 220px; max-width: 100%; font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); }
.file-button { font: inherit; font-size: 13px; padding: 4px 10px; border: 1px solid var(--green-dark); border-radius: 6px; background: #fff; color: var(--green-dark); cursor: pointer; }

/* File view inside D365 */
body.file-view { background: var(--wallpaper); display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.file-view-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: var(--green-dark); color: #fff; }
.file-view-header .number-picker { flex: 1 1 220px; width: auto; }
.file-view-status { font-size: 13px; }
.file-messages { flex: 1; }
.read-mark { color: var(--blue-tick); }

/* A received file that was blocked by the file checks (src/filecheck.js). */
.media-blocked { color: #b3261e; font-weight: 600; }
@media (prefers-color-scheme: dark) { .media-blocked { color: #ffb4ab; } }
.media-warning { color: #8a5a00; display: block; }
@media (prefers-color-scheme: dark) { .media-warning { color: #ffd479; } }

/* Translation and transcription: under the original, separated by a thin line, with a small label. */
.translation { display: block; margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(0, 0, 0, 0.12); }
.translation .text { display: block; }
.translation-label { display: block; font-size: 0.72rem; opacity: 0.65; margin-bottom: 2px; }
.message-action { display: inline-block; margin-top: 4px; padding: 2px 10px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 12px; background: transparent; color: inherit; font: inherit; font-size: 0.8rem; cursor: pointer; }
.message-action:disabled { opacity: 0.6; cursor: default; }
.translate-preview { margin: 0 12px 6px; padding: 6px 10px; border-radius: 8px; background: rgba(0, 128, 105, 0.08); font-size: 0.9rem; }
.translate-option { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.translate-option:has(input[type="checkbox"]) { flex-direction: row; align-items: center; }
.translate-settings { font-size: 1.1rem; }
@media (prefers-color-scheme: dark) {
  .translation { border-top-color: rgba(255, 255, 255, 0.18); }
  .message-action { border-color: rgba(255, 255, 255, 0.25); }
  .translate-preview { background: rgba(0, 168, 132, 0.15); }
}

/* Templates: status and owner under the name; a template still in review cannot be picked. */
.template-tag { display: block; font-size: 0.75rem; opacity: 0.75; }
.template-tag.waiting { color: #8a5a00; opacity: 1; }
.template-pick:disabled { cursor: default; opacity: 0.7; }
.small-button { align-self: flex-start; padding: 4px 10px; font-size: 0.85rem; }
@media (prefers-color-scheme: dark) { .template-tag.waiting { color: #ffd479; } }

/* Sending a file */
.attach-preview { display: block; max-width: 100%; max-height: 240px; margin: 0 auto 8px; border-radius: 8px; }

/* Voice calls: the call line in a conversation, and the admin form */
.message.call .text { font-style: italic; opacity: 0.85; }
.calling-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.calling-form h3 { margin: 10px 0 2px; font-size: 1rem; }
.calling-password { font-family: monospace; margin-inline-start: 8px; }

/* "סיום טיפול" */
.handled-mark { font-size: 0.72rem; color: var(--green-dark, #008069); white-space: nowrap; }
.handled-toggle.done { color: var(--green-dark, #008069); }

/* Control screens (/monitor) */
.monitor-tabs { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.monitor-tabs button[aria-pressed="true"] { font-weight: 700; text-decoration: underline; }
.monitor-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.monitor-list { list-style: none; padding: 0; margin: 0; }
.monitor-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.monitor-item a { color: inherit; text-decoration: none; }
.monitor-who { font-weight: 600; }
.monitor-preview { opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; grid-column: 1 / -1; }
.monitor-meta { font-size: 0.8rem; opacity: 0.75; grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
.monitor-age { font-size: 0.85rem; white-space: nowrap; }
.monitor-age.late { color: #8a5a00; font-weight: 600; }
.monitor-age.very-late { color: #b3261e; font-weight: 700; }
.monitor-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
@media (prefers-color-scheme: dark) {
  .monitor-item { border-bottom-color: rgba(255, 255, 255, 0.12); }
  .monitor-age.late { color: #ffd479; }
  .monitor-age.very-late { color: #ffb4ab; }
}

/* Combined view and assignment */
.number-tag, .assigned-tag { font-size: 0.7rem; white-space: nowrap; padding: 0 6px; border-radius: 8px; background: rgba(0, 0, 0, 0.06); }
.assigned-tag { background: rgba(0, 128, 105, 0.12); }
.filters { flex-wrap: wrap; }
@media (prefers-color-scheme: dark) {
  .number-tag { background: rgba(255, 255, 255, 0.1); }
  .assigned-tag { background: rgba(0, 168, 132, 0.2); }
}

/* Bots screen */
.bots-page { max-width: 1200px; }
.bot-editor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 860px) { .bot-editor { grid-template-columns: 1fr; } }
.bot-steps { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 10px; }
.bot-step { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.bot-step-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bot-field { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.bot-field textarea, .bot-field input, .bot-field select, .bot-option input, .bot-option select, .bot-wide input, .bots-page select, .num {
  font: inherit; font-size: 14px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; color: inherit; background: #fff; }
.bot-field textarea { resize: vertical; }
.bot-field-inline { font-size: 14px; }
.bot-wide { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); margin-top: 8px; }
.bot-options { display: flex; flex-direction: column; gap: 4px; }
.bot-option { display: flex; gap: 6px; flex-wrap: wrap; }
.bot-option input { flex: 1 1 140px; }
.bot-option select { flex: 1 1 160px; max-width: 100%; }
.bot-sim { position: sticky; top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.bot-sim h3 { margin: 0 0 4px; font-size: 1rem; }
.sim-chat { height: 360px; overflow-y: auto; background: var(--search); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.sim-bubble { max-width: 85%; padding: 6px 10px; border-radius: 8px; white-space: pre-wrap; font-size: 14px; }
.sim-client { align-self: flex-start; background: #fff; }
.sim-bot { align-self: flex-end; background: #d9fdd3; }
.sim-note { align-self: center; background: transparent; color: var(--muted); font-size: 12px; text-align: center; }
.sim-options { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.assign-form h3 { margin: 12px 0 0; font-size: 1rem; }
.num { width: 5em; }
.bot-days { max-width: 420px; margin-top: 8px; }

/* Form and event buttons in the composer, the event dialog, a form in the bot simulator */
.emoji-button { font-size: 1.15rem; line-height: 1; }
.event-row { display: flex; gap: 8px; flex-wrap: wrap; }
.field-label { display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; margin-bottom: 8px; }
.field-label input, .field-label select, .field-label textarea { font: inherit; font-size: 0.95rem; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.sim-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 8px; background: #fff; border-radius: 8px; }