/* Chatwoot-like design tokens for chatwoot-lite-portable */
/* IBM Plex Sans loaded via <link> where needed — avoid @import blocking paint */

:root {
  --cw-brand: #2781f6;
  --cw-brand-soft: #e8f2fe;
  --cw-brand-widget: #1f93ff;
  --cw-bg: #f7f7f7;
  --cw-surface-1: #ffffff;
  --cw-surface-2: #f8f9fb;
  --cw-border: #e5e8eb;
  --cw-border-strong: #d0d5dd;
  --cw-text: #1f2a37;
  --cw-text-2: #4b5565;
  --cw-text-3: #87909e;
  --cw-slate-bubble: #eef1f4;
  --cw-agent-bubble: #e8f2fe;
  --cw-unread: #0d9488;
  --cw-online: #0d9488;
  --cw-danger: #e11d48;
  --cw-nav-w: 200px;
  --cw-list-w: clamp(260px, 22vw, 360px);
  --cw-contact-w: clamp(320px, 30vw, 440px);
  --cw-radius: 12px;
  --cw-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --cw-font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--cw-font);
  font-size: 14px;
  color: var(--cw-text);
  background: var(--cw-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cw-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, textarea {
  font: inherit;
  color: inherit;
}

.cw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: 8px;
  background: var(--cw-brand);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.cw-btn:hover { filter: brightness(1.05); }
.cw-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cw-btn-sm {
  height: 28px;
  padding: 0 10px;
  font-size: 12.5px;
  border-radius: 6px;
}
.cw-btn-ghost {
  background: transparent;
  color: var(--cw-text-2);
  border: 1px solid var(--cw-border);
}
.cw-btn-ghost:hover { background: var(--cw-surface-2); }
.cw-btn-danger {
  background: #fff;
  color: var(--cw-danger);
  border: 1px solid #fecdd3;
}
.cw-btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
}

.cw-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--cw-border);
  border-radius: 8px;
  background: #fff;
  outline: none;
}
.cw-input:focus { border-color: var(--cw-brand); box-shadow: 0 0 0 3px rgba(39, 129, 246, 0.15); }
.cw-textarea {
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--cw-border);
  border-radius: 10px;
  background: #fff;
  resize: none;
  outline: none;
}
.cw-textarea:focus { border-color: var(--cw-brand); box-shadow: 0 0 0 3px rgba(39, 129, 246, 0.12); }

.cw-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --av-h: 210;
  color: hsl(var(--av-h) 35% 82%);
  background: linear-gradient(
    145deg,
    hsl(var(--av-h) 32% 32%),
    hsl(var(--av-h) 40% 18%)
  );
  position: relative;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  user-select: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.cw-avatar svg {
  width: 54%;
  height: 54%;
  display: block;
  opacity: 0.92;
}
.cw-avatar.lg { width: 40px; height: 40px; }
.cw-avatar.lg svg { width: 52%; height: 52%; }
.cw-avatar.sm { width: 24px; height: 24px; }
.cw-avatar.sm svg { width: 56%; height: 56%; }
.cw-avatar.tg-group {
  border-radius: 30%;
}
.cw-avatar.channel {
  border-radius: 8px;
  color: hsl(var(--av-h) 45% 78%);
}
.cw-avatar.cw-avatar-photo {
  background: transparent !important;
  color: transparent;
  padding: 0;
}
.cw-avatar.cw-avatar-photo svg {
  display: none;
}
.cw-avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
.cw-avatar .dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cw-online);
  border: 2px solid #fff;
}

.cw-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--cw-unread);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}

.cw-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--cw-text-3);
  text-align: center;
  padding: 32px;
}
.cw-empty strong { color: var(--cw-text-2); font-weight: 600; }

/* Login */
.cw-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--cw-bg);
}
.cw-login-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border: 1px solid var(--cw-border);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: var(--cw-shadow);
}
.cw-login-card h1 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.cw-login-card .sub {
  margin: 0 0 24px;
  color: var(--cw-text-3);
  font-size: 13px;
}
.cw-login-card label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--cw-text-2);
}
.cw-login-card .field { margin-bottom: 14px; }
.cw-login-card .cw-btn { width: 100%; margin-top: 8px; height: 42px; }

/* Shell: nav + content */
.cw-shell {
  display: none;
  height: 100vh;
  grid-template-columns: var(--cw-nav-w) 1fr;
}
.cw-shell.on { display: grid; }
/* Desk pages paint the shell immediately so sidebar does not flash on route change */
body.onsites-desk .cw-shell {
  display: grid;
}

.cw-nav {
  background: var(--cw-surface-1);
  border-right: 1px solid var(--cw-border);
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
}
.cw-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 16px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.cw-brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--cw-brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
}
.cw-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--cw-text-2);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-weight: 500;
  text-decoration: none;
}
.cw-nav-item:hover { background: var(--cw-surface-2); text-decoration: none; color: var(--cw-text); }
.cw-nav-item.active {
  background: var(--cw-brand-soft);
  color: var(--cw-brand);
}
.cw-nav-spacer { flex: 1; }
.cw-nav-foot {
  padding: 10px;
  border-top: 1px solid var(--cw-border);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.cw-nav-foot .meta { min-width: 0; }
.cw-nav-foot .meta .name { font-weight: 600; font-size: 13px; }
.cw-nav-foot .meta .role { font-size: 11px; color: var(--cw-text-3); }

/* Inbox workspace */
.cw-workspace {
  display: grid;
  grid-template-columns: var(--cw-list-w) 1fr var(--cw-contact-w);
  min-width: 0;
  background: var(--cw-bg);
}
.cw-workspace.no-contact {
  grid-template-columns: var(--cw-list-w) 1fr;
}

.cw-list-pane {
  background: var(--cw-surface-1);
  border-right: 1px solid var(--cw-border);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cw-list-head {
  height: 52px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--cw-border);
}
.cw-list-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.cw-count {
  background: #eef1f4;
  color: var(--cw-text-2);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
}
.cw-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--cw-border);
}
.cw-tab {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--cw-text-3);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.cw-tab:hover { background: var(--cw-surface-2); color: var(--cw-text-2); }
.cw-tab.active { background: #eef1f4; color: var(--cw-text); }

.cw-conv-list { flex: 1; overflow: auto; }
.cw-conv-card {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #f0f2f4;
  cursor: pointer;
  position: relative;
}
.cw-conv-card:hover { background: rgba(15, 23, 42, 0.03); }
.cw-conv-card.active { background: var(--cw-bg); }
.cw-conv-card .body { min-width: 0; }
.cw-conv-card .row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.cw-conv-card .name {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.cw-conv-card.unread .name { font-weight: 600; }
.cw-conv-card .time {
  font-size: 10px;
  color: var(--cw-text-3);
  flex-shrink: 0;
}
.cw-conv-card .preview {
  font-size: 13px;
  color: var(--cw-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 22px;
}
.cw-conv-card.unread .preview { color: var(--cw-text); font-weight: 500; }
.cw-conv-card .badge-pos {
  position: absolute;
  right: 14px;
  bottom: 12px;
}

.cw-thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--cw-surface-1);
  border-right: 1px solid var(--cw-border);
}
.cw-thread-head {
  min-height: 56px;
  height: auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--cw-border);
}
.cw-thread-meta { min-width: 0; flex: 1; }
.cw-thread-head .title {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-thread-head .sub { font-size: 12px; color: var(--cw-text-3); }
.cw-thread-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.cw-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--cw-brand-soft);
  color: var(--cw-brand);
  border: 1px solid transparent;
}
.cw-chip.muted {
  background: var(--cw-surface-2);
  color: var(--cw-text-3);
  border-color: var(--cw-border);
}
.cw-chip.ok {
  background: rgba(13, 148, 136, 0.12);
  color: #0d9488;
}
.cw-thread-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}
.cw-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--cw-border);
  background: transparent;
  color: var(--cw-text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.cw-action:hover {
  background: var(--cw-surface-2);
  color: var(--cw-text);
}
.cw-action-resolve {
  background: rgba(13, 148, 136, 0.1);
  border-color: rgba(13, 148, 136, 0.28);
  color: #0d9488;
}
.cw-action-resolve:hover {
  background: rgba(13, 148, 136, 0.18);
  color: #0f766e;
}

.cw-messages {
  flex: 1;
  overflow: auto;
  padding: 4px 8px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--cw-surface-1);
}

.cw-day-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0 12px;
  position: relative;
}
.cw-day-sep::before,
.cw-day-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cw-border);
}
.cw-day-sep span {
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--cw-text-3);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* —— Microsoft Teams post layout (flat, no bubbles) —— */
.cw-post {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 10px;
  padding: 2px 8px 2px 4px;
  margin: 0;
  border-radius: 4px;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.cw-post--lead {
  margin-top: 12px;
  padding-top: 4px;
}
.cw-post--cont {
  margin-top: 0;
}
.cw-post:hover {
  background: rgba(15, 23, 42, 0.045);
}

.cw-post-gutter {
  position: relative;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 2px;
  min-height: 20px;
}
.cw-post-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  --av-h: 210;
  color: hsl(var(--av-h) 35% 85%);
  background: linear-gradient(
    145deg,
    hsl(var(--av-h) 28% 36%),
    hsl(var(--av-h) 36% 20%)
  );
  font-size: 0;
  line-height: 0;
  user-select: none;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.cw-post-avatar svg {
  width: 54%;
  height: 54%;
  display: block;
  opacity: 0.95;
}
.cw-post-avatar.tone-visitor { --av-h: 250; }
.cw-post-avatar.tone-agent { --av-h: 230; }
.cw-post-avatar.tone-member { --av-h: 175; }
.cw-post-avatar.tone-neutral { --av-h: 210; }

.cw-post-gutter-time {
  display: none;
  font-size: 10px;
  line-height: 20px;
  color: var(--cw-text-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transform: translateY(1px);
}
.cw-post--cont:hover .cw-post-gutter-time {
  display: block;
}

.cw-post-main {
  min-width: 0;
  padding-top: 1px;
}
.cw-post-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
  min-height: 20px;
  margin: 0 0 1px;
  line-height: 20px;
}
.cw-post-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--cw-text);
  letter-spacing: -0.01em;
}
.cw-post-you {
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(91, 95, 199, 0.12);
  color: #5b5fc7;
  transform: translateY(-1px);
}
.cw-post-time {
  font-size: 12px;
  font-weight: 400;
  color: var(--cw-text-3);
  font-variant-numeric: tabular-nums;
}
.cw-post-body {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--cw-text);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.cw-post-body .cw-img {
  display: block;
  max-width: min(360px, 100%);
  max-height: 240px;
  border-radius: 4px;
  margin-top: 6px;
  border: 1px solid var(--cw-border);
  cursor: zoom-in;
}
.cw-post-body .cw-img:focus-visible {
  outline: 2px solid #5b5fc7;
  outline-offset: 2px;
}
.cw-post-body .cw-attach {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  color: #5b5fc7;
  text-decoration: none;
}
.cw-post-body .cw-attach:hover { text-decoration: underline; }

/* Private note */
.cw-post--note {
  margin-top: 12px;
  padding: 8px 10px 8px 4px;
  background: rgba(255, 200, 61, 0.08);
  border-radius: 4px;
}
.cw-post--note:hover {
  background: rgba(255, 200, 61, 0.12);
}
.cw-post-note-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #8a6d1b;
  background: rgba(255, 200, 61, 0.2);
}
.cw-post--note .cw-post-name { color: #8a6d1b; }
.cw-post--note .cw-post-body { color: #5c4a1f; }

/* Legacy names kept as no-ops so old CSS doesn't fight */
.cw-teams-row,
.cw-msg-row,
.cw-w-row,
.cw-w-bubble { display: none !important; }

.cw-composer-wrap {
  padding: 0 12px 12px;
  background: var(--cw-surface-1);
}
.cw-reply-box {
  border: 1px solid var(--cw-border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.cw-reply-box.is-note {
  border-color: #f0d78c;
  background: #fffdf5;
}
.cw-reply-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 10px 0;
  border-bottom: 1px solid transparent;
}
.cw-reply-tab {
  height: 30px;
  padding: 0 12px;
  border: none;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--cw-text-3);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.cw-reply-tab:hover { color: var(--cw-text-2); background: var(--cw-surface-2); }
.cw-reply-tab.active {
  color: var(--cw-brand);
  background: var(--cw-brand-soft);
}
.cw-reply-box.is-note .cw-reply-tab.active {
  color: #8a6d1b;
  background: #fff3cd;
}
.cw-reply-editor {
  width: 100%;
  min-height: 88px;
  max-height: 200px;
  padding: 12px 14px;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font: inherit;
  line-height: 1.55;
}
.cw-reply-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px 10px;
}
.cw-reply-hint {
  font-size: 11px;
  color: var(--cw-text-3);
}
.cw-send-icon {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: var(--cw-brand);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: filter 0.15s ease;
}
.cw-send-icon:hover { filter: brightness(1.06); }
.cw-send-icon:disabled { opacity: 0.45; cursor: not-allowed; }
.cw-send-icon svg { width: 18px; height: 18px; fill: currentColor; }

.cw-composer {
  border: 1px solid var(--cw-border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.cw-composer.is-note {
  border-color: #f0d78c;
  background: #fffdf5;
}
.cw-composer-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px 0;
  flex-wrap: wrap;
}
.cw-composer-bar .chip {
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cw-text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.cw-composer-bar .chip.active {
  background: var(--cw-brand-soft);
  color: var(--cw-brand);
}
.cw-composer.is-note .chip.active {
  background: #fff3cd;
  color: #8a6d1b;
}
.cw-composer-bar .cw-canned-wrap {
  margin-left: auto;
  position: relative;
}
.cw-composer-bar .cw-canned-btn {
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--cw-border);
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  color: var(--cw-text-2);
}
.cw-canned-menu {
  display: none;
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 4px;
  min-width: 260px;
  max-height: 220px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--cw-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 20;
}
.cw-canned-menu.on { display: block; }
.cw-canned-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
}
.cw-canned-menu button:hover { background: var(--cw-brand-soft); }
.cw-canned-menu .code {
  color: var(--cw-brand);
  font-weight: 600;
  margin-right: 6px;
}
.cw-composer .cw-textarea {
  border: none;
  box-shadow: none;
  border-radius: 0;
  min-height: 80px;
}
.cw-composer-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px 10px;
  gap: 8px;
}

.cw-contact {
  background: var(--cw-surface-2);
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  gap: 16px;
  overflow: auto;
}
.cw-contact .hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cw-border);
}
.cw-contact .hero .name { font-weight: 600; font-size: 16px; }
.cw-contact .hero .email { font-size: 12px; color: var(--cw-text-3); }
.cw-contact .field label {
  display: block;
  font-size: 11px;
  color: var(--cw-text-3);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cw-contact .field .val {
  font-size: 13px;
  color: var(--cw-text);
  word-break: break-all;
}

/* Chat rooms workspace (reuse list widths) */
.cw-chat-workspace {
  display: grid;
  grid-template-columns: var(--cw-list-w) 1fr;
  min-width: 0;
}

/* Widget overlay */
.cw-widget-demo {
  min-height: 100vh;
  background:
    radial-gradient(1200px 500px at 10% -10%, #dbeafe 0%, transparent 50%),
    linear-gradient(180deg, #f8fafc, #eef2f7);
  padding: 48px 24px 120px;
}
.cw-widget-demo .hero-card {
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--cw-border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--cw-shadow);
}
.cw-widget-demo h1 {
  margin: 0 0 8px;
  font-size: 28px;
  letter-spacing: -0.03em;
}
.cw-widget-demo p { color: var(--cw-text-2); line-height: 1.6; }

#cw-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: none;
  background: var(--cw-brand-widget);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  display: grid;
  place-items: center;
  z-index: 50;
  transition: transform 0.2s ease;
}
#cw-launcher:hover { transform: scale(1.04); }
#cw-launcher svg { width: 28px; height: 28px; fill: currentColor; }

#cw-panel {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 104px;
  width: min(400px, calc(100vw - 24px));
  height: min(640px, calc(100vh - 140px));
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  z-index: 50;
  flex-direction: column;
}
#cw-panel.on { display: flex; }

.cw-w-head {
  padding: 18px 18px 14px;
  background: var(--cw-surface-1);
  border-bottom: 1px solid var(--cw-border);
  display: flex;
  gap: 12px;
  align-items: center;
}
.cw-w-head .titles .t { font-weight: 600; font-size: 15px; }
.cw-w-head .titles .s { font-size: 12px; color: var(--cw-text-3); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.cw-w-head .titles .s::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cw-online);
}

.cw-w-msgs {
  flex: 1;
  overflow: auto;
  padding: 8px 10px 12px;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cw-w-foot {
  padding: 10px;
  background: #fff;
  border-top: 1px solid var(--cw-border);
}
.cw-w-input {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--cw-border);
  border-radius: 10px;
  padding: 6px 8px 6px 12px;
}
.cw-w-input:focus-within {
  border-color: var(--cw-brand-widget);
  box-shadow: 0 0 0 3px rgba(31, 147, 255, 0.15);
}
.cw-w-input input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  height: 36px;
}
.cw-w-send {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  background: var(--cw-brand-widget);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.cw-w-send svg { width: 16px; height: 16px; fill: currentColor; }

.cw-attach {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--cw-brand);
  word-break: break-all;
}
.cw-msg.out .cw-attach { color: #1d4ed8; }
.cw-w-msg.visitor .cw-attach { color: #fff; text-decoration: underline; }
.cw-w-msg img.cw-img, .cw-msg img.cw-img {
  display: block;
  max-width: 220px;
  max-height: 180px;
  border-radius: 8px;
  margin-top: 6px;
}

.cw-prechat {
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  flex: 1;
}
.cw-prechat h3 { margin: 0; font-size: 16px; }
.cw-prechat p { margin: 0; color: var(--cw-text-3); font-size: 13px; line-height: 1.5; }

.cw-status-tabs {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}
.cw-banner {
  margin: 8px 16px 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 12px;
  display: none;
}
.cw-banner.on { display: block; }

.cw-composer-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
}
.cw-file-btn {
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--cw-border);
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  color: var(--cw-text-2);
}
.cw-file-btn input { display: none; }

/* Shared image lightbox (admin + widget) */
body.cw-img-viewer-open {
  overflow: hidden;
}
.cw-img-viewer {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: stretch;
}
.cw-img-viewer[hidden] {
  display: none !important;
}
.cw-img-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 16, 24, 0.78);
}
.cw-img-viewer-chrome {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  height: 100%;
  pointer-events: none;
}
.cw-img-viewer-bar,
.cw-img-viewer-nav,
.cw-img-viewer-stage {
  pointer-events: auto;
}
.cw-img-viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  color: #f4f6f9;
}
.cw-img-viewer-count {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.92;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cw-img-viewer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.cw-img-viewer-btn {
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
}
.cw-img-viewer-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}
.cw-img-viewer-btn--icon {
  width: 32px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}
.cw-img-viewer-stage {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.cw-img-viewer-pic {
  max-width: none;
  max-height: none;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.12s ease;
  will-change: transform;
}
.cw-img-viewer-pic.is-dragging {
  cursor: grabbing;
}
.cw-img-viewer-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(20, 24, 32, 0.55);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  border-radius: 0;
}
.cw-img-viewer-nav:hover {
  background: rgba(20, 24, 32, 0.8);
}
.cw-img-viewer-nav--prev {
  left: 12px;
}
.cw-img-viewer-nav--next {
  right: 12px;
}
.cw-img-viewer-nav[hidden] {
  display: none !important;
}

@media (max-width: 1100px) {
  .cw-workspace { grid-template-columns: var(--cw-list-w) 1fr; }
  .cw-contact { display: none; }
}
@media (max-width: 800px) {
  .cw-shell { grid-template-columns: 1fr; }
  .cw-nav { display: none; }
  .cw-workspace, .cw-chat-workspace { grid-template-columns: 1fr; }
}