:root {
  --bg: #f8f9fc;
  --surface: #fff;
  --text: #1d2535;
  --muted: #7b8496;
  --line: #e9ecf2;
  --brand: #6257df;
  --brand-fg: #fff;
  --brand-soft: #eeecfc;
  --green: #2c9976;
  --radius: 12px;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang SC",
    sans-serif;
  color: var(--text);
  font-size: 14px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
textarea,
select {
  outline-offset: 3px;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--brand);
}
button {
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 14px;
  background: var(--surface);
  color: var(--text);
  transition: background 0.15s;
}
button:hover {
  background: #f4f3fb;
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}
.primary {
  background: var(--brand);
  color: var(--brand-fg);
  border-color: var(--brand);
}
.primary:hover {
  background: var(--brand);
  filter: brightness(0.95);
}
.quiet {
  border: 0;
  background: transparent;
}
.danger {
  color: #c34c59;
}
input,
textarea,
select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  background: var(--surface);
  color: var(--text);
  width: 100%;
}
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #c6c0ff;
  outline-offset: 0;
}
textarea {
  resize: vertical;
  min-height: 100px;
}
label {
  display: block;
  font-size: 13px;
  margin-bottom: 7px;
}
.field {
  margin-bottom: 19px;
}
.shell {
  display: grid;
  grid-template-columns: 224px 1fr;
  min-height: 100vh;
}
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 28px 15px 16px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 19px;
  font-weight: 750;
  padding: 0 13px 30px;
  letter-spacing: -0.6px;
}
.mark {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  background: var(--brand);
  color: var(--brand-fg);
  border-radius: 11px;
  font-weight: 800;
  font-size: 22px;
}
.workspace {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--bg);
  padding: 12px;
  border-radius: 9px;
  margin-bottom: 25px;
}
.avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: #edf0f8;
  color: #667393;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-weight: 600;
}
.small {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
}
.nav-label {
  padding: 0 14px 9px;
  color: #a0a7b4;
  font-size: 11px;
  letter-spacing: 1px;
}
.nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.nav button {
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: #697386;
}
.nav button.active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}
.icon {
  font-size: 18px;
  width: 22px;
  display: inline-grid;
  place-items: center;
}
.sidebar-foot {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 18px 9px 0;
}
.topbar {
  height: 76px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 33px;
}
.topbar strong {
  font-size: 15px;
}
.right,
.row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.online {
  color: var(--green);
  font-size: 12px;
}
.online:before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  margin-right: 6px;
}
.content {
  padding: 32px;
  max-width: 1600px;
  margin: auto;
}
h1 {
  font-size: 26px;
  letter-spacing: -0.6px;
  margin: 0 0 9px;
}
h2 {
  font-size: 17px;
  margin: 0;
}
p {
  line-height: 1.8;
}
.muted {
  color: var(--muted);
}
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.page-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.panel,
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.panel {
  padding: 25px;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 60px 20px;
  gap: 10px;
}
.empty .empty-symbol {
  font-size: 29px;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}
.empty p {
  max-width: 350px;
  font-size: 13px;
  margin: 0 0 10px;
  color: var(--muted);
}
.chart {
  height: 200px;
  display: flex;
  gap: 20px;
  align-items: flex-end;
  border-bottom: 1px solid var(--line);
  position: relative;
  margin: 20px 0 30px;
}
.chart:before {
  content: "尚无统计数据";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  background: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent 48px,
    var(--line) 49px,
    transparent 50px
  );
}
.toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.toolbar input {
  max-width: 320px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  padding: 23px;
}
.card h3 {
  font-size: 16px;
  margin: 18px 0 8px;
}
.card p {
  color: var(--muted);
  font-size: 13px;
  min-height: 44px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.badge {
  display: inline-block;
  padding: 4px 8px;
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: 5px;
  font-size: 11px;
}
.notice {
  background: #f1f0fe;
  border: 1px solid #e2dffc;
  border-radius: 9px;
  padding: 13px 16px;
  color: #655d9d;
  font-size: 12px;
  line-height: 1.8;
  margin-bottom: 24px;
}
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th {
  text-align: left;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  background: var(--bg);
}
.table td,
.table th {
  padding: 16px;
  border-bottom: 1px solid var(--line);
}
.inbox {
  height: calc(100vh - 76px);
  display: grid;
  grid-template-columns: 310px minmax(320px, 1fr) 250px;
  background: var(--surface);
}
.conversation-list {
  border-right: 1px solid var(--line);
  overflow: auto;
}
.list-head {
  padding: 22px 18px;
  border-bottom: 1px solid var(--line);
}
.list-head input {
  margin: 17px 0 12px;
  background: var(--bg);
}
.tabs {
  display: flex;
  gap: 5px;
}
.tabs button {
  padding: 6px 9px;
  border: 0;
  font-size: 12px;
}
.tabs .active {
  color: var(--brand);
  background: var(--brand-soft);
}
.conversation {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 18px;
  text-align: left;
  display: flex;
  gap: 12px;
}
.conversation.active {
  background: #f4f2ff;
}
.conversation strong {
  font-size: 13px;
}
.preview {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 210px;
}
.chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chat-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.messages {
  flex: 1;
  overflow: auto;
  padding: 30px 25px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.message {
  max-width: 80%;
  align-self: flex-start;
}
.message.agent {
  align-self: flex-end;
}
.bubble {
  padding: 12px 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 0 12px 12px 12px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.agent .bubble {
  background: var(--brand);
  color: var(--brand-fg);
  border: 0;
  border-radius: 12px 0 12px 12px;
}
.note .bubble {
  background: #fffae7;
  color: #8d7020;
  border-color: #f4e9bb;
}
.message .small {
  margin-top: 5px;
}
.composer {
  padding: 16px 22px;
  border-top: 1px solid var(--line);
}
.composer textarea {
  border: 0;
  min-height: 80px;
  resize: none;
}
.composer-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.visitor-panel {
  padding: 24px 20px;
  border-left: 1px solid var(--line);
}
.visitor-panel .avatar {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  font-size: 21px;
}
.visitor-panel dl {
  font-size: 12px;
}
.visitor-panel dt {
  color: var(--muted);
  margin-top: 24px;
}
.visitor-panel dd {
  margin: 9px 0;
  overflow-wrap: anywhere;
}
.visitor-panel textarea {
  font-size: 12px;
  margin-top: 9px;
}
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at top, #eeeafd, transparent 65%);
}
.login-card {
  width: min(430px, 90vw);
  padding: 40px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 16px 60px #24204908;
}
.login-card .brand {
  padding: 0 0 35px;
}
.login-card h1 {
  font-size: 23px;
}
.login-card form {
  margin-top: 28px;
}
.login-card .primary {
  width: 100%;
}
.overlay {
  position: fixed;
  inset: 0;
  background: #18203955;
  display: grid;
  place-items: center;
  z-index: 20;
  padding: 20px;
}
.modal {
  background: var(--surface);
  padding: 28px;
  border-radius: 16px;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 20px 90px #1113;
}
.modal header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}
.modal footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: #252b3b;
  color: #fff;
  padding: 12px 22px;
  border-radius: 10px;
  z-index: 50;
  display: none;
}
.code {
  font-family: monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--bg);
  padding: 18px;
  border-radius: 8px;
  font-size: 12px;
}
.widget-body {
  background: var(--bg);
  min-height: 100vh;
  padding: 28px;
  display: grid;
  place-items: center;
}
.widget-shell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  width: min(430px, 100%);
  height: min(730px, 90vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 15px 70px #23243b12;
}
.widget-shell header {
  padding: 24px;
  background: var(--brand);
  color: var(--brand-fg);
}
.widget-shell h2 {
  margin: 0 0 8px;
}
.widget-shell .messages {
  min-height: 0;
}
.widget-shell form.start {
  padding: 30px;
}
.widget-shell .composer textarea {
  min-height: 60px;
}
.error {
  color: #bc3b52;
  font-size: 13px;
}
.switch {
  width: auto;
}
.setting-row {
  display: flex;
  justify-content: space-between;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 1200px) {
  .inbox {
    grid-template-columns: 280px 1fr;
  }
  .visitor-panel {
    display: none;
  }
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 850px) {
  .shell {
    grid-template-columns: 76px 1fr;
  }
  .sidebar {
    padding: 25px 10px;
  }
  .brand {
    padding: 0 10px 25px;
  }
  .brand-text,
  .workspace,
  .nav-label,
  .nav-text,
  .sidebar-foot .small {
    display: none;
  }
  .nav button {
    justify-content: center;
    padding: 12px;
  }
  .sidebar-foot {
    padding: 15px 0;
  }
  .sidebar-foot button {
    padding: 7px;
  }
  .content {
    padding: 24px;
  }
  .topbar {
    padding: 0 24px;
  }
  .inbox {
    grid-template-columns: 230px 1fr;
  }
  .grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .shell {
    grid-template-columns: 60px 1fr;
  }
  .sidebar {
    padding: 20px 5px;
  }
  .brand {
    padding: 0 6px 25px;
  }
  .mark {
    width: 30px;
    height: 30px;
  }
  .content {
    padding: 18px;
  }
  .topbar {
    padding: 0 18px;
  }
  .topbar .online {
    display: none;
  }
  .page-heading {
    gap: 10px;
  }
  h1 {
    font-size: 22px;
  }
  .inbox {
    display: flex;
    height: calc(100vh - 76px);
  }
  .conversation-list {
    width: 100%;
  }
  .inbox.has-chat .conversation-list {
    display: none;
  }
  .chat {
    width: 100%;
  }
  .chat-head {
    padding: 15px;
  }
  .grid {
    gap: 12px;
  }
  .right {
    gap: 5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* On compact viewports, show one conversation pane at a time. */
.chat-head {
  flex-wrap: wrap;
}
.chat-head button,
.composer-footer button,
.tabs button {
  white-space: nowrap;
}
.chat-head .row,
.composer-footer,
.composer-footer .row {
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .inbox {
    display: flex;
  }
  .conversation-list {
    width: 100%;
  }
  .inbox.has-chat .conversation-list {
    display: none;
  }
  .inbox:not(.has-chat) .chat {
    display: none;
  }
  .chat {
    width: 100%;
  }
}
.feature-content {
  max-width: 1680px;
}
.feature-content .page-heading {
  margin-bottom: 25px;
}
.feature-content h1 {
  font-size: 24px;
}
.section-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.knowledge-layout {
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.knowledge-source-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.knowledge-index-summary {
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  overflow-wrap: anywhere;
}
.knowledge-detail-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
}
.agent-card-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}
.agent-card-summary span {
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.knowledge-source-tabs button {
  flex: none;
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 10px 14px;
}
.knowledge-source-tabs button.active {
  color: var(--text);
  border-bottom-color: var(--brand);
  font-weight: 600;
}
.knowledge-source-tabs button span {
  margin-left: 4px;
  color: var(--muted);
  font-size: 12px;
}
.collection-panel {
  padding: 17px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  min-height: 430px;
}
.collection-panel .panel-head {
  padding: 0 9px;
  margin-bottom: 12px;
}
.collection-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  text-align: left;
  padding: 12px 10px;
  margin-bottom: 5px;
  background: transparent;
  color: var(--muted);
}
.collection-item.active {
  background: var(--brand-soft);
  color: var(--brand);
}
.collection-item > span:nth-child(2) {
  flex: 1;
  overflow-wrap: anywhere;
}
.collection-item .count {
  font-size: 11px;
  padding: 2px 6px;
  background: var(--bg);
  border-radius: 5px;
}
.collection-help {
  border-top: 1px solid var(--line);
  margin: 25px 10px 0;
  padding-top: 18px;
  font-size: 11px;
}
.knowledge-main {
  min-height: 430px;
  min-width: 0;
}
.table-scroll {
  overflow: auto;
}
.knowledge-table td:first-child {
  min-width: 230px;
  max-width: 500px;
}
.knowledge-table strong {
  font-size: 13px;
}
.knowledge-table .small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
  margin-top: 5px;
}
.table td button {
  white-space: nowrap;
}
.badge.neutral {
  background: var(--bg);
  color: var(--muted);
}
.badge.success {
  background: #eaf7f0;
  color: #25865f;
}
.status-dot {
  font-size: 12px;
  color: var(--green);
  white-space: nowrap;
}
.status-dot:before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 6px;
}
.segmented {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--bg);
  border-radius: 9px;
  margin-bottom: 22px;
}
.segmented button {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 8px;
}
.segmented button.active {
  background: var(--surface);
  box-shadow: 0 1px 4px #1718330d;
  color: var(--brand);
}
.document-content {
  min-height: 240px;
  line-height: 1.8;
}
.retrieval-results {
  margin-top: 22px;
}
.retrieval-hit {
  border: 1px solid var(--line);
  padding: 18px;
  border-radius: 10px;
  margin-bottom: 12px;
}
.retrieval-hit .row {
  flex-wrap: wrap;
}
.retrieval-hit p {
  white-space: pre-wrap;
  color: var(--muted);
  font-size: 13px;
  max-height: 220px;
  overflow: auto;
}
.feature-icon {
  height: 42px;
  width: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 22px;
}
.feature-icon.violet {
  background: var(--brand-soft);
  color: var(--brand);
}
.feature-icon.blue {
  background: #edf4fd;
  color: #3d87cb;
}
.card-actions {
  display: flex;
  gap: 8px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.card-actions button {
  flex: 1;
  white-space: nowrap;
  padding: 8px 10px;
  font-size: 12px;
}
.workflow-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0;
}
.workflow-mini span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--bg);
  color: var(--brand);
  border: 1px solid var(--line);
}
.workflow-mini i {
  font-style: normal;
  font-size: 10px;
  color: var(--muted);
}
.workflow-dialog {
  width: min(1320px, 96vw);
  padding: 24px;
}
.workflow-dialog header {
  margin-bottom: 18px;
}
.editor-meta {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 20px;
}
.workflow-editor {
  display: grid;
  grid-template-columns: 165px minmax(250px, 1fr) 260px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  min-height: 430px;
}
.node-library {
  padding: 20px 12px;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.node-library > button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  font-size: 12px;
  background: var(--surface);
}
.node-library > button .muted {
  margin-left: auto;
}
.node-library p {
  margin-top: 24px;
  font-size: 11px;
}
.node-kind {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 7px;
  background: #eef2f8;
  color: #6e7b93;
  font-size: 13px;
}
.node-kind.start,
.node-kind.output {
  background: #e7f7f1;
  color: #259773;
}
.node-kind.llm,
.node-kind.knowledge {
  background: #eeebff;
  color: #7960d6;
}
.node-kind.condition {
  background: #fff3df;
  color: #c38a30;
}
.node-kind.tool {
  background: #e9f2fe;
  color: #4d8bc6;
}
.flow-center {
  min-width: 0;
  background: var(--bg);
}
.flow-canvas {
  height: 310px;
  overflow: auto;
  background-image: radial-gradient(var(--line) 1.1px, transparent 1.1px);
  background-size: 16px 16px;
}
.flow-plane {
  position: relative;
}
.flow-lines {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.flow-lines path {
  stroke: #b7b0dc;
  stroke-width: 1.6;
}
.flow-lines text {
  font-size: 10px;
  fill: var(--muted);
}
.flow-node {
  position: absolute;
  width: 180px;
  height: 74px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  text-align: left;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 2px 8px #27224006;
}
.flow-node.selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-soft);
}
.flow-node strong {
  font-size: 12px;
  display: block;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-node small {
  color: var(--muted);
  font-size: 10px;
  display: block;
  margin-top: 6px;
}
.flow-node:before,
.flow-node i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid #b4acdc;
  background: var(--surface);
  top: 33px;
}
.flow-node:before {
  content: "";
  left: -4px;
}
.flow-node i {
  right: -4px;
}
.connection-editor {
  padding: 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.connection-editor .panel-head {
  margin-bottom: 12px;
}
.connection-editor strong {
  font-size: 12px;
}
.edge-row {
  display: grid;
  grid-template-columns: 1fr 14px 1fr 75px 25px;
  gap: 7px;
  align-items: center;
  margin: 7px 0;
}
.edge-row select {
  font-size: 11px;
  padding: 7px 4px;
  min-width: 0;
}
.edge-row button {
  padding: 4px;
}
.node-properties {
  padding: 20px 15px;
  border-left: 1px solid var(--line);
  background: var(--surface);
  max-height: 550px;
  overflow: auto;
}
.node-properties h3 {
  margin: 0;
  font-size: 14px;
}
.node-properties .panel-head {
  margin-bottom: 5px;
}
.node-properties > .small {
  margin: 8px 0 20px;
  font-size: 11px;
}
.node-properties label {
  font-size: 12px;
}
.node-properties input,
.node-properties select {
  font-size: 12px;
  padding: 9px;
}
.node-properties textarea {
  font-size: 12px;
  line-height: 1.6;
}
.code-input {
  min-height: 180px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  line-height: 1.7;
  font-size: 12px;
  tab-size: 2;
}
.node-properties .code-input {
  min-height: 130px;
}
.node-properties details {
  margin: 20px 0;
}
.node-properties summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
}
.run-result {
  margin-top: 24px;
}
.run-summary {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 16px 0;
}
.run-step {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.step-status {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  display: grid;
  place-items: center;
}
.step-status.succeeded {
  background: #e6f5ed;
  color: #32906c;
}
.step-status.failed {
  background: #fcebed;
  color: #ba4958;
}
.run-steps {
  margin-bottom: 24px;
}
.run-output {
  max-height: 260px;
  overflow: auto;
  line-height: 1.7;
}
.history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  width: 100%;
  margin: 10px 0;
  padding: 15px;
  text-align: left;
  flex-wrap: wrap;
}
.history-row > span:first-child {
  flex: 1;
  min-width: 150px;
}
.tool-catalog {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tool-operation {
  padding: 18px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.endpoint {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px;
  background: var(--bg);
  border-radius: 7px;
}
.tool-card .card-actions .primary {
  flex: 1.5;
}
.toolbar .row {
  flex-wrap: wrap;
}
.icon svg {
  width: 19px;
  height: 19px;
}
.node-config-fields textarea {
  min-height: 90px;
}
.workflow-dialog footer {
  margin-top: 16px;
  position: sticky;
  bottom: -24px;
  z-index: 3;
  padding: 16px 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
@media (max-width: 1150px) {
  .workflow-editor {
    grid-template-columns: 140px minmax(220px, 1fr) 240px;
  }
  .knowledge-layout {
    grid-template-columns: 180px minmax(0, 1fr);
  }
  .knowledge-table .small {
    max-width: 240px;
  }
}
@media (max-width: 850px) {
  .knowledge-layout {
    grid-template-columns: 1fr;
  }
  .collection-panel {
    min-height: 0;
    display: flex;
    gap: 6px;
    align-items: center;
    overflow: auto;
    padding: 10px;
  }
  .collection-panel .panel-head {
    margin: 0;
    white-space: nowrap;
    padding: 0;
  }
  .collection-item {
    width: auto;
    margin: 0;
    white-space: nowrap;
  }
  .collection-help {
    display: none;
  }
  .knowledge-main {
    padding: 18px;
  }
  .feature-content .page-heading {
    align-items: flex-start;
  }
  .feature-content .page-heading .primary {
    white-space: nowrap;
  }
  .workflow-editor {
    grid-template-columns: 115px minmax(0, 1fr);
  }
  .node-properties {
    grid-column: 1/-1;
    max-height: none;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .node-library {
    padding: 14px 8px;
  }
  .node-library > button {
    padding: 8px 5px;
    gap: 5px;
    font-size: 11px;
  }
  .node-library .node-kind {
    width: 20px;
    height: 20px;
  }
  .flow-canvas {
    height: 250px;
  }
  .edge-row {
    grid-template-columns: 1fr 10px 1fr 55px 20px;
    gap: 4px;
  }
  .workflow-dialog {
    padding: 18px;
  }
  .editor-meta {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .node-library > p {
    display: none;
  }
  .tool-card .card-actions button {
    flex: 1;
  }
  .knowledge-main .panel-head {
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
}
@media (max-width: 500px) {
  .editor-meta {
    grid-template-columns: 1fr;
  }
  .workflow-editor {
    grid-template-columns: 1fr;
  }
  .node-library {
    display: flex;
    gap: 5px;
    overflow: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .node-library .section-label {
    display: none;
  }
  .node-library > button {
    margin: 0;
    white-space: nowrap;
  }
  .node-library > button .muted {
    display: none;
  }
  .node-properties {
    grid-column: 1;
  }
  .connection-editor {
    padding: 10px;
  }
  .feature-content .page-heading {
    flex-wrap: wrap;
  }
  .feature-content .toolbar {
    flex-wrap: wrap;
  }
  .collection-item {
    font-size: 12px;
  }
  .workflow-dialog {
    padding: 14px;
  }
  .feature-content h1 {
    font-size: 22px;
  }
}
.avatar svg,
.empty-symbol svg,
.feature-icon svg {
  width: 22px;
  height: 22px;
}
.sidebar main {
  min-width: 0;
}
.shell > main {
  min-width: 0;
}
.sidebar .nav button {
  min-height: 44px;
}
.sidebar .nav button .icon {
  flex-shrink: 0;
}
.nav-label {
  margin-top: 4px;
}
.theme-dark-label {
  display: none;
}
:root[data-theme="dark"] {
  --bg: #111216;
  --surface: #191a20;
  --text: #e5e7ee;
  --muted: #9296a5;
  --line: #2b2d37;
  --brand: #a08cf5;
  --brand-soft: #2c2545;
  --green: #6ccba8;
  color-scheme: dark;
}
[data-theme="dark"] button,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--surface);
  color: var(--text);
}
[data-theme="dark"] .primary {
  background: var(--brand);
  color: var(--brand-fg);
  border-color: var(--brand);
}
[data-theme="dark"] .primary:hover {
  background: var(--brand);
  filter: brightness(0.95);
}
[data-theme="dark"] button:hover {
  background: #262631;
}
[data-theme="dark"] .avatar {
  background: #2a2d39;
  color: #b6bfd8;
}
[data-theme="dark"] .notice {
  background: #28233b;
  border-color: #3c3357;
  color: #beb0e7;
}
[data-theme="dark"] .nav button {
  color: var(--muted);
  background: transparent;
}
[data-theme="dark"] .nav button.active,
[data-theme="dark"] .collection-item.active {
  background: var(--brand-soft);
  color: var(--brand);
}
[data-theme="dark"] .quiet,
[data-theme="dark"] .collection-item {
  background: transparent;
}
[data-theme="dark"] .conversation.active {
  background: var(--brand-soft);
}
[data-theme="dark"] .conversation {
  background: var(--surface);
}
[data-theme="dark"] .agent .bubble {
  background: var(--brand);
}
[data-theme="dark"] .note .bubble {
  background: #392f1d;
  color: #e2c67b;
  border-color: #514126;
}
[data-theme="dark"] .badge.success,
[data-theme="dark"] .step-status.succeeded {
  background: #1d392f;
  color: #82d2ac;
}
[data-theme="dark"] .node-kind.llm,
[data-theme="dark"] .node-kind.knowledge {
  background: #302747;
  color: #b8a1f4;
}
[data-theme="dark"] .node-kind.start,
[data-theme="dark"] .node-kind.output {
  background: #203a32;
  color: #79cbb1;
}
[data-theme="dark"] .node-kind.condition {
  background: #41351f;
  color: #e2ba72;
}
[data-theme="dark"] .node-kind.tool {
  background: #24364d;
  color: #8db9ec;
}
[data-theme="dark"] .feature-icon.blue {
  background: #253347;
  color: #8db9ec;
}
[data-theme="dark"] .segmented {
  background: var(--bg);
}
[data-theme="dark"] .segmented button {
  background: transparent;
}
[data-theme="dark"] .segmented button.active {
  background: var(--surface);
}
[data-theme="dark"] .login {
  background: radial-gradient(ellipse at top, #28213c, transparent 65%);
}
.unread-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--brand);
  color: var(--brand-fg);
  font-size: 10px;
  font-weight: 600;
  border-radius: 6px;
  margin-left: 9px;
}
.badge {
  white-space: nowrap;
}
.knowledge-table th:nth-child(2),
.knowledge-table td:nth-child(2) {
  min-width: 78px;
}
.knowledge-table th:nth-child(3),
.knowledge-table td:nth-child(3) {
  min-width: 90px;
}
.knowledge-table th:nth-child(4),
.knowledge-table td:nth-child(4) {
  min-width: 132px;
}
.knowledge-table .small {
  max-width: clamp(180px, 20vw, 300px);
}
.sidebar .nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.sidebar > .brand,
.sidebar > .workspace,
.sidebar > .nav-label,
.sidebar-foot {
  flex-shrink: 0;
}
.sidebar-foot {
  margin-top: 14px;
}
[hidden] {
  display: none !important;
}
.search-launcher {
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--bg);
  color: var(--muted);
  font-size: 12px;
}
.search-launcher kbd {
  font: 11px inherit;
  border: 1px solid var(--line);
  padding: 2px 5px;
  border-radius: 4px;
  color: var(--muted);
}
.global-results {
  margin-top: 16px;
  max-height: 50vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.search-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  width: 100%;
  padding: 15px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.search-result strong {
  font-size: 13px;
}
.search-result > span:not(.small) {
  font-size: 12px;
}
.search-result .small {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.management-stats {
  display: flex;
  gap: 30px;
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 25px;
  flex-wrap: wrap;
}
.management-stats strong {
  font-size: 20px;
  color: var(--text);
  margin-right: 6px;
}
.management-tabs {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.management-tabs button {
  border: 0;
  border-radius: 0;
  padding: 12px 5px;
  background: transparent;
  color: var(--muted);
}
.management-tabs button.active {
  border-bottom: 2px solid var(--brand);
  color: var(--brand);
}
.management-page .table td {
  font-size: 13px;
}
.management-page .table td .row {
  min-width: 150px;
}
.management-page .toolbar input {
  max-width: 360px;
}
.filter-select {
  width: auto;
  max-width: 220px;
}
.quick-reply-card p {
  white-space: pre-wrap;
  max-height: 160px;
  overflow: auto;
  font-size: 13px;
  line-height: 1.8;
}
.tag-library {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.tag-management-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 15px;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 10px;
  line-height: 1.5;
  background: var(--brand-soft);
  color: var(--brand);
}
.tag-chip.blue {
  background: #eaf2ff;
  color: #3c78b5;
}
.tag-chip.green {
  background: #e7f5ef;
  color: #2b8866;
}
.tag-chip.amber {
  background: #fff2df;
  color: #a57329;
}
.tag-chip.red {
  background: #fcebed;
  color: #b7485d;
}
.settings-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 24px;
}
.settings-links button {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.invite-link {
  max-height: 160px;
  overflow: auto;
  margin-bottom: 18px;
}
.tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin: 18px 0;
}
.tag-picker label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.inbox-v3 {
  grid-template-columns: 330px minmax(340px, 1fr) var(
      --visitor-panel-width,
      320px
    );
  overflow: hidden;
}
.visitor-panel-toolbar {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.visitor-panel-toolbar details {
  color: var(--muted);
  font-size: 12px;
}
.visitor-panel-toolbar summary {
  cursor: pointer;
}
.visitor-panel-toolbar label {
  display: block;
  margin-top: 8px;
}
.visitor-panel-toolbar input {
  max-width: 130px;
}
.visitor-history-button {
  width: 100%;
  margin-top: 12px;
}
.chat-list-context {
  flex: none;
  margin: 0;
  padding: 8px 20px;
  background: var(--brand-soft);
  color: var(--text);
}
.visitor-history-list {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}
.visitor-history-list button {
  display: grid;
  gap: 4px;
  text-align: left;
  overflow-wrap: anywhere;
}
.inbox-v3 .conversation-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.inbox-v3 .list-head {
  padding: 17px 15px 12px;
  flex-shrink: 0;
}
.inbox-list-heading {
  margin: 0;
}
.inbox-list-heading h2 {
  font-size: 15px;
}
.inbox-v3 .list-head input {
  margin: 12px 0;
}
.queue-scopes {
  display: flex;
  gap: 5px;
  background: var(--bg);
  padding: 4px;
  border-radius: 8px;
  margin-bottom: 14px;
}
.queue-scopes button {
  flex: 1;
  font-size: 11px;
  padding: 7px 5px;
  border: 0;
  background: transparent;
  color: var(--muted);
}
.queue-scopes button.active {
  background: var(--surface);
  color: var(--brand);
  box-shadow: 0 1px 4px #1a1b2e0d;
}
.inbox-status-tabs {
  justify-content: space-between;
  gap: 3px;
}
.inbox-status-tabs button {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 6px;
}
.inbox-status-tabs span {
  font-size: 10px;
  opacity: 0.8;
}
.inbox-filters {
  margin: 12px 0 0;
  font-size: 12px;
}
.inbox-filters summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  list-style: none;
}
.inbox-filters summary:before {
  content: "☷";
  margin-right: 7px;
}
.inbox-filters[open] summary {
  margin-bottom: 14px;
}
.inbox-filters .field {
  margin-bottom: 12px;
}
.inbox-filters .field label {
  font-size: 11px;
}
.inbox-filters select {
  font-size: 11px;
  padding: 8px 6px;
}
.filter-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.selection-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--surface);
}
.selection-toolbar label {
  margin: 0;
}
.selection-toolbar #bulk-manage {
  margin-left: auto;
  padding: 6px;
}
.selection-toolbar .small {
  font-size: 10px;
}
.inbox-v3 #conversations {
  overflow: auto;
  flex: 1;
  min-height: 0;
}
.conversation-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.conversation-row.active {
  background: var(--brand-soft);
}
.conversation-row.selected {
  box-shadow: inset 3px 0 0 var(--brand);
}
.conversation-select {
  position: absolute;
  left: 12px;
  top: 25px;
  width: 13px;
  height: 13px;
  cursor: pointer;
  accent-color: var(--brand);
}
.conversation-row .conversation {
  padding: 17px 15px 17px 35px;
  border: 0;
  background: transparent;
  gap: 10px;
  min-width: 0;
}
.conversation-summary {
  min-width: 0;
  flex: 1;
  display: block;
}
.conversation-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.conversation-title strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
.conversation-title time {
  font-size: 10px;
  color: var(--muted);
  flex-shrink: 0;
}
.conversation-row .avatar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 12px;
}
.conversation-row .preview {
  display: block;
  max-width: none;
  margin-top: 7px;
  line-height: 1.5;
  font-size: 11px;
}
.conversation-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--muted);
  margin-top: 8px;
}
.conversation-meta .unread-count {
  margin-left: auto;
  min-width: 16px;
  height: 16px;
  font-size: 9px;
}
.priority-pill {
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 4px;
}
.priority-pill.high {
  color: #ba7b27;
  background: #fff1d8;
}
.priority-pill.urgent {
  color: #bf4155;
  background: #fde9ec;
}
.conversation-tags {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}
.conversation-tags .tag-chip {
  font-size: 9px;
  padding: 2px 5px;
}
.queue-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  flex-shrink: 0;
}
.queue-pagination button {
  padding: 5px 10px;
}
.queue-pagination .small {
  font-size: 10px;
}
.inbox-v3 .chat {
  min-width: 0;
  background: var(--surface);
}
.inbox-v3 .chat-head {
  padding: 16px 18px;
  gap: 12px;
}
.chat-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.chat-heading > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.chat-heading strong {
  font-size: 13px;
}
.chat-heading #edit-subject {
  padding: 0;
  text-align: left;
  font-size: 10px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.chat-back {
  padding: 7px;
}
.chat-actions {
  gap: 6px;
}
.chat-actions select {
  width: 150px;
  font-size: 11px;
  padding: 8px;
  max-width: 180px;
}
.chat-actions button {
  font-size: 11px;
  padding: 8px;
}
.inbox-v3 .composer {
  padding: 13px 18px;
}
.inbox-v3 .composer textarea {
  min-height: 80px;
  max-height: 180px;
  line-height: 1.7;
}
.inbox-v3 .composer.internal-mode {
  background: #fff9e9;
}
.inbox-v3 .composer.internal-mode textarea {
  background: transparent;
}
.inbox-v3 .composer-footer {
  gap: 8px;
  flex-wrap: wrap;
}
.inbox-v3 .composer-footer label {
  margin: 0;
  font-size: 10px;
}
.inbox-v3 .composer-footer .quiet {
  padding: 7px 6px;
  font-size: 11px;
}
.send-hint {
  font-size: 9px;
  white-space: nowrap;
}
.thread-welcome {
  text-align: center;
  margin-top: 25px;
}
.inbox-v3 .visitor-panel {
  overflow: auto;
  background: var(--surface);
  font-size: 12px;
  padding: 22px 17px;
}
.inbox-v3 .visitor-panel .field label {
  font-size: 11px;
}
.inbox-v3 .visitor-panel select {
  font-size: 12px;
  padding: 9px;
}
.inbox-v3 .visitor-panel h2 {
  font-size: 15px;
}
.inbox-v3 .visitor-panel .avatar {
  width: 46px;
  height: 46px;
  font-size: 18px;
}
.visitor-section-head {
  margin: 0 0 9px;
}
.visitor-section-head button {
  padding: 4px;
  font-size: 11px;
}
.visitor-tags {
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 5px;
}
.inbox-v3 .visitor-panel dl {
  margin-bottom: 23px;
}
.inbox-v3 .visitor-panel dt {
  margin-top: 18px;
  font-size: 10px;
}
.inbox-v3 .visitor-panel dd {
  font-size: 11px;
}
.inbox-v3 .message .small {
  font-size: 10px;
}
.inbox-v3 .bubble {
  font-size: 13px;
}
.inbox-v3 .messages {
  gap: 20px;
  padding: 24px;
}
.management-page .card h3 {
  font-size: 15px;
}
[data-theme="dark"] .tag-chip.blue {
  background: #22374d;
  color: #9cc2ef;
}
[data-theme="dark"] .tag-chip.green {
  background: #20392f;
  color: #8bceb1;
}
[data-theme="dark"] .tag-chip.amber {
  background: #3c3220;
  color: #ddbf7e;
}
[data-theme="dark"] .tag-chip.red {
  background: #432731;
  color: #e3a1b1;
}
[data-theme="dark"] .priority-pill.high {
  background: #3d321f;
  color: #dfbc79;
}
[data-theme="dark"] .priority-pill.urgent {
  background: #44252d;
  color: #e59baa;
}
[data-theme="dark"] .queue-scopes button {
  background: transparent;
}
[data-theme="dark"] .queue-scopes button.active {
  background: var(--surface);
}
[data-theme="dark"] .conversation-row .conversation {
  background: transparent;
}
[data-theme="dark"] .inbox-v3 .composer.internal-mode {
  background: #332b1c;
}
[data-theme="dark"] .inbox-v3 .composer.internal-mode textarea {
  background: transparent;
}
[data-theme="dark"] .search-launcher {
  background: var(--bg);
  color: var(--muted);
}
@media (max-width: 1380px) and (min-width: 1051px) {
  .inbox-v3 {
    grid-template-columns: 310px minmax(320px, 1fr);
  }
  .inbox-v3 .visitor-panel {
    display: none;
  }
  .send-hint {
    display: none;
  }
}
@media (max-width: 1050px) {
  .inbox-v3 .conversation-list {
    width: 100%;
  }
  .inbox-v3 .list-head {
    padding: 20px 24px;
  }
  .inbox-v3 .selection-toolbar {
    padding: 10px 24px;
  }
  .inbox-v3 .conversation-row .conversation {
    padding-left: 45px;
  }
  .inbox-v3 .conversation-select {
    left: 20px;
  }
  .inbox-v3 .conversation-summary .preview {
    max-width: none;
  }
  .inbox-v3 .visitor-panel {
    display: none;
  }
  .inbox-v3 .queue-pagination {
    padding: 12px 24px;
  }
  .search-launcher {
    gap: 10px;
  }
  .management-page .tag-library {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 750px) {
  .search-launcher span {
    display: none;
  }
  .search-launcher {
    padding: 8px;
  }
  .topbar .online {
    display: none;
  }
  .settings-links,
  .tag-library {
    grid-template-columns: 1fr;
  }
  .management-page .toolbar {
    flex-wrap: wrap;
  }
  .management-stats {
    gap: 15px;
  }
  .inbox-v3 .chat-head {
    padding: 14px;
  }
  .inbox-v3 .chat-actions {
    flex-wrap: wrap;
  }
  .send-hint {
    display: none;
  }
  .inbox-v3 .messages {
    padding: 20px;
  }
  .inbox-v3 .composer-footer {
    align-items: flex-start;
  }
  .inbox-v3 .composer-footer .row {
    gap: 4px;
  }
  .inbox-v3 .composer {
    padding: 12px;
  }
  .chat-actions select {
    width: 135px;
  }
  .inbox-v3 .list-head {
    padding: 17px;
  }
  .management-page .tag-library {
    grid-template-columns: 1fr;
  }
}
.nav-group-label {
  padding: 16px 14px 7px;
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--muted);
}
.sidebar > .nav-label {
  display: none;
}
.sidebar .nav {
  gap: 3px;
}
.sidebar .nav button {
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 41px;
}
.chat-heading strong .badge {
  font-weight: 400;
  font-size: 9px;
  margin-left: 5px;
}
.chat-actions #chat-status {
  width: 91px;
}
@media (max-width: 850px) {
  .nav-group-label {
    font-size: 0;
    padding: 8px 0 0;
    border-top: 1px solid var(--line);
    margin: 8px 10px 0;
  }
  .nav-group-label:first-child {
    display: none;
  }
}
@media (max-width: 500px) {
  .chat-actions #chat-status {
    width: 85px;
  }
}
.presence-select {
  width: 100px;
  border: 0;
  font-size: 12px;
  color: var(--green);
  padding: 9px;
  background: var(--surface);
}
.service-page {
  max-width: 1500px;
}
.service-section {
  margin-bottom: 22px;
}
.service-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.service-section-title p {
  margin: 8px 0 0;
}
.toggle-label {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  margin: 0;
  color: var(--brand);
  font-size: 12px;
}
.toggle-label input {
  width: auto;
  accent-color: var(--brand);
}
.retrieval-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
}
.retrieval-checkbox input {
  flex: 0 0 auto;
  width: auto;
  margin-top: 4px;
}
.service-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.service-section textarea {
  line-height: 1.7;
  min-height: 85px;
}
.service-section .field:last-child {
  margin-bottom: 0;
}
.weekday-picker {
  display: flex;
  gap: 10px;
  margin: 12px 0 24px;
  flex-wrap: wrap;
}
.weekday-picker label {
  display: flex;
  gap: 7px;
  align-items: center;
  border: 1px solid var(--line);
  padding: 10px;
  border-radius: 8px;
  font-size: 12px;
  margin: 0;
}
.weekday-picker input {
  width: auto;
  accent-color: var(--brand);
}
.team-members {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 22px 0;
}
.team-members > div {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 12px;
}
.team-members .avatar {
  width: 29px;
  height: 29px;
  font-size: 11px;
}
.team-members .small {
  margin-left: auto;
  font-size: 10px;
}
.capacity-panel {
  margin-top: 25px;
}
.team-member-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
  margin-top: 10px;
}
.team-member-picker label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.team-member-picker .small {
  margin-left: auto;
}
.attachment-bubble {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  max-width: 100%;
}
.message-attachment {
  min-width: 220px;
  max-width: 320px;
  overflow: hidden;
}
.attachment-download {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  text-align: left;
  width: 100%;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
}
.attachment-download > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.attachment-download strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  font-size: 12px;
  font-weight: 500;
}
.attachment-download small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
}
.attachment-icon {
  width: 30px;
  height: 34px;
  border-radius: 7px;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid;
  place-items: center;
}
.attachment-image-button {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 100%;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
.attachment-image {
  display: block;
  max-width: 100%;
  max-height: 260px;
  min-height: 40px;
  object-fit: contain;
  background: var(--surface);
}
.attachment-image-button + .attachment-download {
  border-radius: 0 0 10px 10px;
}
.media-preview {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  margin: auto;
  object-fit: contain;
}
.image-lightbox {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 40px;
  background: #13151ade;
  z-index: 100;
}
.image-lightbox img {
  max-width: 95vw;
  max-height: 85vh;
  object-fit: contain;
}
.image-lightbox button {
  position: absolute;
  right: 20px;
  top: 20px;
  background: #fff;
  color: #242531;
}
.automation-banner {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 11px 18px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--brand);
  background: var(--brand-soft);
}
.automation-banner > span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.automation-banner button {
  font-size: 11px;
  white-space: nowrap;
  padding: 6px 10px;
}
.ai-stream {
  border-color: var(--brand);
  white-space: pre-wrap;
}
.typing-dot {
  display: inline-block;
  width: 5px;
  height: 13px;
  margin-left: 4px;
  background: var(--brand);
  vertical-align: middle;
}
.widget-header-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: 12px;
}
.widget-header-meta button {
  border-color: color-mix(in srgb, var(--brand-fg) 32%, transparent);
  background: color-mix(in srgb, var(--brand-fg) 9%, transparent);
  color: var(--brand-fg);
  font-size: 11px;
  padding: 7px 10px;
}
.widget-header-meta button:disabled {
  opacity: 0.7;
}
.widget-shell > .error,
.widget-shell .error {
  padding: 0 20px;
  font-size: 12px;
}
.widget-shell .message-attachment {
  max-width: 280px;
  min-width: 190px;
}
.file-source-link {
  color: var(--brand);
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
}
.widget-shell .composer-footer .quiet {
  font-size: 11px;
  padding: 8px;
}
.widget-shell .composer-footer {
  gap: 5px;
}
.widget-shell .composer-footer .row {
  gap: 2px;
}
.widget-shell .composer textarea {
  line-height: 1.7;
}
.inbox-v3 .composer-footer .row {
  gap: 5px;
}
.team-card .card-actions button {
  width: 100%;
}
@media (max-width: 850px) {
  .service-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .service-section-title {
    align-items: flex-start;
  }
  .presence-select {
    width: 83px;
    font-size: 11px;
    padding: 8px 3px;
  }
  .message-attachment {
    min-width: 190px;
    max-width: 260px;
  }
  .attachment-download strong {
    max-width: 175px;
  }
  .service-page .page-heading {
    flex-wrap: wrap;
    gap: 12px;
  }
  .service-section .panel-head {
    gap: 15px;
    flex-wrap: wrap;
  }
  .service-page h1 {
    font-size: 23px;
  }
}
@media (max-width: 500px) {
  .message-attachment {
    min-width: 155px;
    max-width: 220px;
  }
  .attachment-download {
    padding: 10px;
    gap: 8px;
  }
  .attachment-download strong {
    max-width: 140px;
  }
  .widget-shell .message-attachment {
    min-width: 155px;
    max-width: 220px;
  }
  .presence-select {
    width: 74px;
  }
  .service-section {
    padding: 18px;
  }
  .weekday-picker {
    gap: 6px;
  }
  .weekday-picker label {
    padding: 8px;
  }
  .topbar .right {
    gap: 2px;
  }
}

.flow-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.flow-toolbar button,
.flow-toolbar select {
  padding: 6px 9px;
  font-size: 11px;
  min-height: 32px;
}
.flow-toolbar select {
  width: auto;
}
.flow-toolbar .small {
  flex: 1;
  min-width: 100px;
}
.flow-node {
  padding: 0;
  touch-action: none;
}
.flow-node:before,
.flow-node i {
  display: none;
}
.flow-node-select {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: grab;
  touch-action: none;
}
.flow-node-select:active {
  cursor: grabbing;
}
.flow-port {
  position: absolute;
  right: -11px;
  top: 26px;
  width: 22px;
  height: 22px;
  padding: 0;
  line-height: 20px;
  border-radius: 50%;
  border: 1px solid var(--brand);
  background: var(--surface);
  color: var(--brand);
  touch-action: none;
}
.flow-port:hover,
.flow-port:focus-visible {
  background: var(--brand-soft);
}
.version-list {
  margin-top: 20px;
  max-height: 360px;
  overflow: auto;
}
.version-list article {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.version-list p {
  margin: 6px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.workflow-card .card-actions {
  flex-wrap: wrap;
}
.outbox-status {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 10px 16px;
  max-height: 150px;
  overflow: auto;
}
.outbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 5px 0;
}
.outbox-item span {
  flex: 1;
  overflow-wrap: anywhere;
}
.outbox-item button {
  padding: 4px 8px;
  font-size: 11px;
}
.table-scroll {
  overflow: auto;
}
#model-content {
  margin-top: 24px;
}
#model-content pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.website-jobs-dialog {
  width: min(1050px, 94vw);
}
.website-source-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin: 20px 0;
}
.website-source-list .row {
  flex-wrap: wrap;
}
.website-jobs-dialog .table td {
  vertical-align: top;
  max-width: 300px;
  overflow-wrap: anywhere;
}
.website-jobs-dialog details p {
  white-space: pre-wrap;
}

.widget-body .primary,
.widget-body .widget-shell header,
.widget-body .message.agent .bubble {
  color: var(--brand-fg, #fff);
}
.widget-logo {
  object-fit: contain;
  border-radius: 8px;
  float: right;
  margin: 0 0 8px 10px;
}
#widget-design-preview {
  margin-top: 12px;
  border-width: 3px;
}
@media (max-width: 600px) {
  .widget-body {
    padding: 0;
  }
  .widget-shell {
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
}

.model-choices {
  max-height: 240px;
  overflow-y: auto;
  overflow-wrap: anywhere;
}
#selected-models {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}

.agent-editor .modal {
  max-width: 850px;
  width: min(850px, calc(100vw - 32px));
}
.resource-grid {
  align-items: stretch;
}
.resource-card {
  display: flex;
  min-height: 220px;
  flex-direction: column;
}
.resource-card-head {
  min-height: 34px;
}
.resource-card h3 {
  margin-bottom: 8px;
}
.resource-card p {
  min-height: 42px;
  color: var(--muted);
}
.resource-card-meta {
  margin-top: auto;
  padding-top: 12px;
}
.resource-card-actions {
  gap: 7px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.agent-card-actions {
  flex-wrap: nowrap;
  gap: 4px;
}
.agent-card-actions button {
  padding: 8px 6px;
  white-space: nowrap;
  font-size: 12px;
}
.agent-editor-section {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 18px;
}
.agent-editor-section h3 {
  margin-top: 0;
}
.agent-editor-section summary {
  cursor: pointer;
  font-weight: 600;
  padding: 5px 0;
}
.agent-editor-section details {
  margin-top: 14px;
}

.message-markdown,
.message-rich,
.message-structured {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.message-markdown > :first-child,
.message-rich > :first-child {
  margin-top: 0;
}
.message-markdown > :last-child {
  margin-bottom: 0;
}
.message-markdown pre {
  white-space: pre;
  overflow-x: auto;
  max-width: 100%;
  padding: 12px;
  background: var(--bg);
  color: var(--text);
  border-radius: 8px;
}
.message-markdown table {
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}
.message-markdown th,
.message-markdown td {
  border: 1px solid var(--line);
  padding: 6px 10px;
}
.message-markdown img,
.message-rich img,
.message-structured img {
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: 8px;
}
.message-day {
  align-self: center;
  margin: 14px auto;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--bg);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.agent-detail-list {
  margin: 18px 0;
}
.agent-detail-list > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.agent-detail-list dt {
  color: var(--muted);
}
.agent-detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.message-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
}
.message-code {
  position: relative;
}
.message-code > button {
  font-size: 11px;
  padding: 4px 8px;
}
.structured-card {
  border: 1px solid var(--line);
  padding: 14px;
  border-radius: 12px;
  margin: 8px 0;
  background: var(--surface);
  color: var(--text);
}
.structured-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.structured-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.structured-unknown {
  border: 1px solid var(--line);
  padding: 8px;
}

/* Native choices must never inherit full-width text-field dimensions. */
input:is([type="checkbox"], [type="radio"]) {
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex: 0 0 16px;
  padding: 0;
  margin: 0;
  accent-color: var(--brand);
  vertical-align: middle;
}
label:has(> input:is([type="checkbox"], [type="radio"])) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  line-height: 1.5;
}
@media (min-width: 641px) and (max-width: 1380px) {
  .inbox-v3 {
    display: grid;
    grid-template-columns: minmax(240px, 32%) minmax(0, 1fr);
  }
  .inbox-v3 .conversation-list {
    min-width: 0;
  }
  .inbox-v3 .chat {
    min-width: 0;
    width: 100%;
  }
  .inbox-v3 .visitor-panel {
    display: none;
  }
  .inbox-v3 .list-head {
    padding: 16px 12px;
  }
  .inbox-v3 .selection-toolbar,
  .inbox-v3 .queue-pagination {
    padding: 10px 12px;
  }
  .inbox-v3 .conversation-summary .preview {
    max-width: 175px;
  }
  .inbox-v3 .chat-actions {
    flex-wrap: wrap;
  }
}

.platform-workspace {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  height: calc(100dvh - 76px);
  min-height: 0;
  background: var(--bg);
}
.platform-list {
  background: var(--surface);
  border-right: 1px solid var(--line);
  min-width: 0;
  overflow-y: auto;
}
.platform-list > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}
.platform-list > header .small {
  margin: 4px 0 0;
  color: var(--muted);
}
.platform-list > header #access-create {
  padding: 8px 10px;
  font-size: 12px;
}
.platform-list h2 {
  font-size: 16px;
  margin: 0;
}
.platform-list-tools {
  padding: 10px 14px;
}
.platform-list nav {
  padding: 8px;
}
.platform-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  padding: 14px 10px;
  margin: 4px 0;
}
.platform-list-item.active {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.platform-list-item > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}
.platform-list-item strong {
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.platform-list-item small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
  font-size: 11px;
}
.platform-kind {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 11px;
  font-weight: 600;
}
.platform-status {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}
.platform-status.enabled {
  background: var(--green);
}
.platform-detail {
  min-width: 0;
  overflow-y: auto;
}
.platform-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.platform-detail-head h1 {
  font-size: 21px;
  margin: 0;
}
.platform-detail-head p {
  margin: 0 0 6px;
}
.platform-config-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
  gap: 24px;
  padding: 24px;
  align-items: start;
}
.platform-config-body:has(> aside[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}
.platform-form-main {
  min-width: 0;
}
.platform-form-main form {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.platform-form-main h3 {
  margin-top: 0;
}
.platform-form-main form > section > label {
  margin: 14px 0;
}
.platform-form-main .code {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.platform-form-main .tabs {
  flex-wrap: wrap;
  gap: 4px;
}
.platform-save-bar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.platform-preview {
  position: sticky;
  top: 20px;
  min-width: 0;
}
.platform-preview h3 {
  margin: 0 0 8px;
  font-size: 14px;
}
.platform-live-preview {
  margin-top: 18px;
}
.platform-live-preview summary {
  cursor: pointer;
  font-weight: 600;
}
.platform-live-preview iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
#widget-design-preview {
  display: block;
  width: 100%;
  height: 520px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 8px 28px #00000012;
}
#widget-design-preview header {
  padding: 20px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
#widget-design-preview header img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 6px;
}
.platform-launcher-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
}
.platform-launcher-preview [data-preview-launcher] {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  font-weight: 700;
}
.platform-launcher-preview img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.platform-preview-messages {
  min-height: 220px;
  padding: 18px;
}
.platform-preview-question {
  background: var(--brand-soft);
  border-radius: 10px;
  padding: 12px;
  margin: 24px 0 16px 24px;
  font-size: 12px;
}
.platform-preview-composer {
  border-top: 1px solid var(--line);
  padding: 18px;
  color: var(--muted);
  font-size: 12px;
}
.platform-overview {
  padding: 28px;
}
.platform-overview-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
@media (max-width: 1200px) {
  .platform-workspace {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .platform-config-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .platform-preview {
    position: static;
    max-width: 360px;
  }
}
@media (max-width: 640px) {
  .platform-workspace {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
  .platform-list {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .platform-list nav {
    display: flex;
    overflow-x: auto;
  }
  .platform-list-item {
    min-width: 190px;
  }
  .platform-config-body,
  .platform-detail-head {
    padding: 16px;
  }
  .platform-detail-head {
    flex-wrap: wrap;
  }
}

/* Shared chat composer: stable tools, multiline input and explicit send action. */
.composer {
  position: relative;
  background: var(--surface);
}
.composer textarea {
  line-height: 1.65;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg);
}
.composer textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
.composer-footer {
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.emoji-trigger {
  font-size: 23px;
  line-height: 1;
  min-width: 36px;
  min-height: 36px;
}
.emoji-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 16px;
  z-index: 20;
  width: min(300px, calc(100% - 32px));
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 10px;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 8px 30px #0002;
}
.emoji-picker[hidden] {
  display: none;
}
.emoji-picker button {
  font-size: 23px;
  padding: 5px;
  border: 0;
  background: transparent;
  min-height: 38px;
}
.emoji-picker button:hover {
  background: var(--bg);
}
.widget-shell {
  height: min(760px, 94dvh);
  border-radius: 20px;
}
.widget-shell header {
  padding: 20px 22px;
}
.widget-shell h2 {
  font-size: 18px;
  line-height: 1.5;
}
.widget-shell .messages {
  padding: 22px 18px;
  gap: 18px;
}
.widget-shell .message {
  max-width: 88%;
}
.widget-shell .bubble {
  border-radius: 14px 14px 14px 4px;
  font-size: 14px;
  padding: 10px 14px;
}
.widget-shell .agent .bubble {
  border-radius: 14px 14px 4px 14px;
}
.widget-shell .composer {
  margin: 0 12px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 10px 12px;
  box-shadow: 0 4px 18px #0001;
}
.widget-shell .composer textarea {
  min-height: 70px;
  max-height: 180px;
  background: transparent;
}
.widget-shell .composer-footer {
  gap: 5px;
}
.widget-shell .send-hint {
  flex-basis: 100%;
  order: 3;
  font-size: 10px;
  text-align: right;
}
.widget-shell .composer-footer > .primary {
  margin-left: auto;
}
.widget-shell .error:empty {
  display: none;
}
.widget-shell .error {
  margin: 6px 18px;
}
.inbox-v3 .chat-head {
  min-height: 76px;
  background: var(--surface);
}
.inbox-v3 .messages {
  padding: 24px;
}
.inbox-v3 .composer {
  margin: 0 16px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
}
.inbox-v3 .composer textarea {
  min-height: 95px;
  background: transparent;
}
.profile-avatar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 18px 0 24px;
}
.profile-avatar .avatar {
  width: 72px;
  height: 72px;
  font-size: 28px;
}
.avatar {
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 640px) {
  .widget-shell {
    height: 100dvh;
    border-radius: 0;
  }
  .inbox-v3 .composer {
    margin: 0 8px 8px;
  }
  .inbox-v3 .composer-footer .row {
    flex-wrap: wrap;
  }
}

.widget-shell .send-hint {
  display: block;
}
.inbox-v3 .composer .send-hint {
  display: block;
  font-size: 10px;
}

.composer-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.nav-parent-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-parent-row > [data-page] {
  flex: 1;
  min-width: 0;
}
.nav .nav-disclosure {
  width: 30px;
  min-width: 30px;
  padding: 10px 6px;
  justify-content: center;
}
.nav-disclosure[aria-expanded="true"] {
  transform: rotate(180deg);
}
.nav-submenu {
  margin: 3px 0 8px 22px;
  padding-left: 9px;
  border-left: 1px solid var(--line);
}
.nav-submenu[hidden] {
  display: none;
}
.nav .nav-submenu button {
  font-size: 12px;
  padding: 10px 12px;
}
.nav-submenu .icon {
  width: 17px;
  height: 17px;
}
.team-navigation {
  margin-bottom: 24px;
  display: flex;
  gap: 8px;
}
.team-navigation a {
  padding: 9px 16px;
  border-radius: 9px;
  color: var(--muted);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
}
.team-navigation a.active {
  color: var(--brand);
  background: var(--brand-soft);
  border-color: var(--brand);
}
@media (max-width: 850px) {
  .nav-parent-row {
    flex-wrap: wrap;
    justify-content: center;
  }
  .nav-parent-row > [data-page] {
    flex-basis: 100%;
  }
  .nav .nav-disclosure {
    padding: 2px 6px;
  }
  .nav-submenu {
    margin-left: 2px;
    padding-left: 2px;
  }
  .nav .nav-submenu button {
    padding: 10px 5px;
  }
}

.provider-services {
  display: grid;
  gap: 20px;
  margin-top: 24px;
}
.provider-service .panel-head {
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}
.provider-service .panel-head h2 {
  margin: 0 0 8px;
  font-size: 19px;
}
.provider-service .panel-head p {
  margin: 0;
  overflow-wrap: anywhere;
}
.provider-service .table td {
  vertical-align: middle;
}
.provider-service .table td:last-child {
  white-space: nowrap;
}
.provider-service .table td:last-child button + button {
  margin-left: 6px;
}
.model-service-modal {
  width: min(760px, 96vw);
}
.model-picker {
  border-top: 1px solid var(--line);
  margin-top: 22px;
  padding-top: 16px;
}
.model-picker .service-form-grid {
  margin-top: 16px;
}
.model-manual {
  align-items: flex-end;
  margin: 16px 0;
}
.model-manual > label {
  flex: 1;
  min-width: 180px;
}
.model-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 18px;
}
.model-selected > p {
  flex-basis: 100%;
  margin: 0 0 6px;
}
.model-selected > button {
  font-size: 12px;
  padding: 6px 9px;
  background: var(--brand-soft);
  color: var(--brand);
}
.model-picker .model-choices:empty {
  display: none;
}
@media (max-width: 640px) {
  .model-manual {
    flex-wrap: wrap;
  }
  .provider-service {
    padding: 16px;
  }
}
/* Shared form controls and conversation metadata. */
.color-control {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  width: max-content;
  max-width: 100%;
}
.color-control input[type="color"] {
  width: 48px;
  height: 40px;
  min-width: 48px;
  padding: 2px;
  cursor: pointer;
  border-radius: 7px;
  background: transparent;
}
.color-control output {
  font-family: ui-monospace, monospace;
  color: var(--muted);
  font-size: 13px;
}
.message-receipt {
  display: inline-block;
  margin-left: 3px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: -2px;
  padding-right: 2px;
}
.message-receipt.read {
  color: var(--brand);
}
.visitor-profile-head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.inbox-v3 .visitor-panel {
  padding: 22px 20px;
  background: var(--surface);
  border-left: 1px solid var(--line);
  overflow-y: auto;
}
.inbox-v3 .visitor-profile-head .avatar {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  font-size: 20px;
  background: var(--brand-soft);
  color: var(--brand);
}
.inbox-v3 .visitor-info-section textarea {
  width: 100%;
  min-height: 104px;
  margin: 8px 0;
  resize: vertical;
}
.inbox-v3 .visitor-info-section > button {
  width: 100%;
}
.inbox-v3 .chat-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.inbox-v3 .chat-heading {
  min-width: 0;
}
.inbox-v3 .chat-heading strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-v3 .chat-actions {
  gap: 8px;
  flex-wrap: wrap;
}
.inbox-v3 .chat-actions select,
.inbox-v3 .chat-actions button {
  min-height: 34px;
}
.visitor-profile-head h2 {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}
.visitor-info-section {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.visitor-info-section h3 {
  margin: 0 0 12px;
  font-size: 13px;
}
.inbox-v3 .visitor-info-section dl {
  margin: 0;
}
.visitor-info-row {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) minmax(0, 1.5fr);
  gap: 8px;
  padding: 6px 0;
}
.inbox-v3 .visitor-info-row dt {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.inbox-v3 .visitor-info-row dd {
  margin: 0;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.content .page-heading {
  gap: 16px;
  align-items: flex-start;
}
.field label {
  line-height: 1.45;
}
@media (max-width: 600px) {
  .content .page-heading {
    flex-wrap: wrap;
  }
  .visitor-info-row {
    grid-template-columns: minmax(68px, 1fr) minmax(0, 1.5fr);
  }
}

/* Compact message composition shared by visitors and staff. */
.widget-shell .composer,
.inbox-v3 .composer {
  padding: 8px 10px;
  border-radius: 14px;
}
.widget-shell .composer textarea,
.inbox-v3 .composer textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  max-height: 120px;
  padding: 8px;
  line-height: 22px;
  overflow-y: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  resize: none;
}
.composer:focus-within {
  border-color: var(--brand);
}
.composer textarea:focus {
  outline: none;
}
.widget-shell .composer-footer,
.inbox-v3 .composer-footer {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 4px;
}
.widget-shell .composer-footer .row,
.inbox-v3 .composer-footer .row {
  min-width: 0;
  flex: 1;
  flex-wrap: nowrap;
  gap: 3px;
  overflow-x: auto;
}
.composer-footer .quiet {
  white-space: nowrap;
}
.widget-shell .send-hint,
.inbox-v3 .composer .send-hint {
  flex: none;
  order: initial;
  font-size: 10px;
  white-space: nowrap;
}
.composer-footer .primary {
  flex: none;
}
.composer-mode {
  display: inline-flex;
  position: relative;
  align-items: center;
  flex: none;
  border-radius: 8px;
  padding: 3px;
  background: var(--bg);
  white-space: nowrap;
}
.composer-mode input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.composer-mode span {
  padding: 5px 7px;
  border-radius: 6px;
  color: var(--muted);
}
.composer-mode .mode-public,
.internal-mode .composer-mode .mode-note {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 4px #0002;
}
.internal-mode .composer-mode .mode-public {
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
.composer-mode:focus-within {
  outline: 2px solid var(--brand);
}
.field:has(> #visitor-priority),
.field:has(> #dialog-priority),
.field:has(> #bulk-priority),
.field:has(> #priority-filter) {
  display: none !important;
}
.widget-header-meta {
  gap: 8px;
}
.widget-header-meta #widget-service-status {
  margin-right: auto;
}
#widget-sound {
  min-width: 32px;
  font-size: 18px;
}
@media (max-width: 900px) {
  .widget-shell .send-hint,
  .inbox-v3 .composer .send-hint {
    display: none;
  }
}