/* Wrachat current design. Component layout and active theme; edit this file directly. */
* {
  box-sizing: border-box;
}

html,body {
  margin: 0;
  min-height: 100%;
  font: 15px/1.5 Inter,ui-sans-serif,system-ui,sans-serif;
  color: var(--text);
  background: var(--bg);
}

button,input,textarea {
  font: inherit;
}

.hidden {
  display: none!important;
}

.logo {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,var(--gold),#8c6a27);
  color: #07131c;
  font-size: 28px;
  font-weight: 900;
  box-shadow: 0 12px 34px #e7bc6326;
}

.logo.small {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  font-size: 20px;
}

.landing {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 10%,#12394a 0,transparent 42%),var(--bg);
}

.brand-card {
  text-align: center;
  padding: 56px;
}

.brand-card .logo {
  margin: auto;
}

.brand-card h1 {
  font-size: 42px;
  letter-spacing: .08em;
  margin: 20px 0 4px;
}

.brand-card p {
  color: var(--muted);
  font-size: 17px;
}

.brand-card a,.login-card button,.composer button {
  display: inline-block;
  border: 0;
  border-radius: 12px;
  background: var(--gold);
  color: #07131c;
  padding: 12px 18px;
  font-weight: 800;
  text-decoration: none;
}

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 0,#11384b,transparent 44%);
}

.login-card {
  width: min(420px,calc(100% - 32px));
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #0b1d2be6;
  box-shadow: 0 30px 90px #0008;
}

.login-card h1 {
  margin: 20px 0 2px;
}

.login-card p {
  color: var(--muted);
  margin: 0 0 26px;
}

.login-card label {
  display: block;
  margin: 14px 0;
  color: #bdd1da;
  font-weight: 700;
}

.login-card input {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #06131f;
  color: var(--text);
  outline: none;
}

.login-card input:focus {
  border-color: var(--cyan);
}

.login-card button {
  width: 100%;
  margin-top: 12px;
}

.error {
  color: var(--red);
  min-height: 22px;
  margin-top: 10px;
}

.dashboard {
  display: grid;
  grid-template-columns: 220px 340px 1fr;
  overflow: hidden;
}

.dashboard aside {
  border-right: 1px solid var(--line);
  padding: 24px 16px;
  background: #071722;
}

.brand {
  display: flex;
  align-items: center;
}

.brand small {
  display: block;
  color: var(--muted);
}

nav {
  display: grid;
}

nav button,.secondary {
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  padding: 11px 12px;
  text-align: left;
  cursor: pointer;
}

nav button:hover,.nav-active {
  color: var(--text)!important;
  border-color: var(--line)!important;
}

.inbox {
  border-right: 1px solid var(--line);
  min-width: 0;
}

.inbox>header,.chat>header {
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.inbox h1,.chat h2 {
  margin: 0;
}

.inbox p,.chat small {
  margin: 2px 0 0;
  color: var(--muted);
}

.pill {
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.pill.ok {
  color: var(--cyan);
  border-color: #1d665f;
}

.conversation-list {
  height: calc(100vh - 92px);
  overflow: auto;
}

.conversation {
  width: 100%;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.conversation:hover,.conversation.selected {
  background: #102a3a;
  border-color: var(--line);
}

.avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--cyan);
}

.conversation span:nth-child(2) {
  min-width: 0;
}

.conversation b,.conversation small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation small {
  color: var(--muted);
  margin-top: 3px;
}

.conversation em {
  font-size: 10px;
  font-style: normal;
  color: var(--cyan);
}

.list-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--muted);
}

.thread {
  min-width: 0;
}

.empty {
  height: 100%;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--muted);
}

.empty-icon {
  font-size: 40px;
}

.empty h2 {
  color: var(--text);
  margin: 12px 0 2px;
}

.empty p {
  margin: 0;
}

.chat {
  height: 100%;
  display: grid;
}

.chat>header div:last-child {
  display: flex;
  gap: 8px;
}

.secondary {
  border-color: var(--line);
  color: var(--text);
  text-align: center;
}

.messages {
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.msg {
  align-self: flex-start;
}

.msg span {
  display: block;
  padding: 11px 14px;
  border: 1px solid var(--line);
}

.msg small {
  display: block;
  margin: 3px 5px;
  color: var(--muted);
}

.msg.mine {
  align-self: flex-end;
}

.msg.mine span {
  border-color: #238b81;
}

.msg.mine small {
  text-align: right;
}

.composer {
  display: flex;
  gap: 10px;
  border-top: 1px solid var(--line);
}

.composer textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0b1d2b;
  color: var(--text);
  padding: 13px;
  outline: none;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  padding: 10px 16px;
  background: var(--text);
  color: var(--bg);
  z-index: 10;
}

.widget-body {
  height: 100vh;
  background: transparent;
  padding: 0;
}

.widget {
  height: 100%;
  display: grid;
  grid-template-rows: 76px 1fr 68px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #081824;
  box-shadow: 0 20px 70px #0006;
}

.widget>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: linear-gradient(135deg,#0e766e,#103b4b);
}

.widget>header b,.widget>header small {
  display: block;
}

.widget>header small {
  font-size: 12px;
  color: #c8efea;
}

.widget>header button {
  border: 0;
  background: transparent;
  color: white;
  font-size: 28px;
  cursor: pointer;
}

.online-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #43f0a3;
  margin-right: 5px;
}

.widget-messages {
  overflow: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bubble {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 5px 15px 15px;
  background: #153345;
  align-self: flex-start;
}

.bubble.visitor {
  align-self: flex-end;
  background: #14756c;
  border-radius: 15px 5px 15px 15px;
}

.widget form {
  display: flex;
  gap: 8px;
  padding: 11px;
  border-top: 1px solid var(--line);
}

.widget input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0b1d2b;
  color: var(--text);
  padding: 11px;
  outline: none;
}

.widget form button {
  width: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--gold);
  color: #07131c;
  font-weight: 900;
}

@media(max-width:900px) {
  .dashboard {
    grid-template-columns: 72px 300px 1fr;
  }

  .brand>div:last-child,nav button {
    font-size: 0;
  }

  .brand {
    padding-left: 0;
  }

  .brand .logo {
    margin: auto;
  }

  nav button:before {
    font-size: 18px;
    content: '•';
  }

}

@media(max-width:680px) {
  .dashboard {
    grid-template-columns: 1fr;
  }

  .dashboard aside {
    display: none;
  }

  .inbox {
    display: block;
  }

  .thread {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: none;
  }

  .thread:has(.chat:not(.hidden)) {
    display: block;
  }

}

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

.search {
  border-bottom: 1px solid var(--line);
}

.search input,.note-row input,.manage-form input,.manage-form select,.settings-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #06131f;
  color: var(--text);
  padding: 11px 13px;
  outline: none;
}

.search input:focus,.note-row input:focus,.manage-form input:focus,.settings-form textarea:focus {
  border-color: var(--cyan);
}

.conversation-list {
  height: calc(100vh - 153px);
}

.conversation em strong {
  display: grid;
  place-items: center;
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--red);
}

.note-row {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--line);
}

.management {
  overflow: auto;
  background: var(--bg);
}

.management>header {
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.management h1 {
  margin: 0;
}

.management p {
  margin: 3px 0 0;
  color: var(--muted);
}

.manage-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr 150px auto;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.manage-form button,.settings-form button {
  border: 0;
  border-radius: 11px;
  background: var(--gold);
  color: #07131c;
  padding: 10px 16px;
  font-weight: 800;
}

.operator-table {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.operator-table>div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.operator-table>div:last-child {
  border-bottom: 0;
}

.operator-table b,.operator-table small {
  display: block;
}

.operator-table small {
  color: var(--muted);
}

.settings-form {
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.settings-form label {
  display: grid;
  gap: 9px;
  font-weight: 700;
}

.settings-form textarea {
  resize: vertical;
  margin-bottom: 14px;
}

@media(max-width:1100px) {
  .manage-form {
    grid-template-columns: 1fr 1fr;
  }

  .management {
    grid-column: 2/4;
  }

}

@media(max-width:680px) {
  .management {
    position: fixed;
    inset: 0;
    z-index: 3;
    grid-column: auto;
  }

  .manage-form {
    grid-template-columns: 1fr;
  }

  .note-row {
    padding: 8px;
  }

  .note-row .secondary {
    font-size: 12px;
    padding: 8px;
  }

  .management>header {
    padding: 16px;
  }

  .manage-content {
    padding: 16px;
  }

}

.thread,.chat,.message-stage {
  min-height: 0;
  overflow: hidden;
}

.message-stage {
  position: relative;
}

.message-stage .messages {
  height: 100%;
  min-height: 0;
}

.new-messages {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--gold);
  color: #07131c;
  padding: 8px 14px;
  font-weight: 800;
  cursor: pointer;
}

.settings-form input,.settings-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #06131f;
  color: var(--text);
  padding: 11px 13px;
  margin: 7px 0 14px;
}

.settings-form input[type=color] {
  height: 46px;
  padding: 5px;
}

.settings-form input[type=checkbox] {
  width: auto;
  margin: 0;
}

.settings-form.compact {
  margin-bottom: 18px;
}

.settings-form h3 {
  margin-top: 0;
}

.knowledge-form {
  margin-top: 18px;
}

.knowledge-list {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.knowledge-list>div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.knowledge-list>div:last-child {
  border-bottom: 0;
}

.knowledge-list b,.knowledge-list small {
  display: block;
}

.knowledge-list small {
  color: var(--cyan);
}

.knowledge-list p {
  margin: 6px 0 0;
  color: var(--muted);
  white-space: pre-wrap;
}

.msg.bot span {
  border-color: #6f5a28;
}

.msg.bot small {
  color: var(--gold);
}

.switch-row {
  display: flex!important;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 14px;
  background: #081824;
}

.switch-row span b,.switch-row span small {
  display: block;
}

.switch-row span small {
  color: var(--muted);
  font-weight: 400;
}

.switch-row input[type=checkbox] {
  width: 22px;
  height: 22px;
  accent-color: var(--cyan);
}

.switch-row.danger input {
  accent-color: var(--gold);
}

.form-actions {
  display: flex;
  gap: 10px;
}

.form-actions button {
  flex: 1;
}

.command-help {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #081824;
}

.command-help code {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--cyan);
  font-size: 13px;
}

:root {
  --bg: #111827;
  --panel: #1c2736;
  --line: #304152;
  --text: #edf4fa;
  --muted: #a1b2c5;
  --cyan: #53d1bf;
  --gold: #53d1bf;
  --red: #fb8296;
}

body {
  background: var(--bg);
  font-size: 13px;
}

.dashboard {
  height: 100dvh;
  grid-template-columns: 200px 295px minmax(330px,1fr) 245px;
}

.dashboard>aside {
  background: #162231;
  padding: 25px 14px;
  overflow: auto;
}

.brand {
  padding: 0 6px 27px;
  gap: 10px;
}

.brand small {
  margin-top: 4px;
}

.logo,.logo.small {
  background: #174b50;
  color: var(--cyan);
  box-shadow: none;
  border: 1px solid #39716f;
  border-radius: 12px;
}

nav {
  gap: 5px;
}

nav button {
  font-size: 12px!important;
  padding: 11px 12px;
  border-radius: 8px;
  transition: background .15s;
}

nav button:before {
  content: none!important;
}

nav button:hover,.nav-active {
  background: #1b3b47!important;
  border-color: #35616b!important;
  color: #8ee7da!important;
}

button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

button {
  cursor: pointer;
}

.inbox {
  background: #152131;
}

.inbox>header,.chat>header {
  height: 82px;
  padding: 19px 16px;
}

.inbox h1 {
  font-size: 18px;
  letter-spacing: -.4px;
}

.inbox p {
  font-size: 11px;
  margin-top: 4px;
}

.pill {
  font-size: 9px;
  padding: 5px 7px;
}

.search {
  padding: 13px;
}

.search input {
  background: #1c293b;
  padding: 11px;
  font-size: 12px;
}

.conversation-list {
  height: calc(100dvh - 149px);
  padding: 6px;
}

.conversation {
  padding: 14px 10px;
  gap: 10px;
  border-radius: 8px;
  border-bottom: 1px solid #30415266;
}

.conversation.selected,.conversation:hover {
  background: #193b46;
  border-color: #2c5961;
}

.conversation b {
  font-size: 12px;
  font-weight: 650;
}

.conversation small {
  font-size: 11px;
}

.avatar {
  border-radius: 50%;
  background: #244454;
  color: #9be2db;
  font-size: 14px;
  font-weight: 650;
}

.conversation em strong {
  background: var(--cyan);
  color: #10252b;
}

.chat {
  grid-template-rows: 82px 1fr auto auto;
}

.chat h2 {
  font-size: 18px;
}

.chat small {
  font-size: 11px;
}

.chat>header {
  background: #182535;
}

.secondary {
  font-size: 12px;
  border-radius: 8px;
  background: #1c2939;
}

.secondary:hover {
  background: #274053;
}

#close {
  background: var(--cyan);
  color: #10252b;
  border: 0;
  font-weight: 650;
}

.messages {
  padding: 22px;
  gap: 17px;
}

.msg {
  max-width: 83%;
}

.msg span {
  background: #243446;
  border: 0;
  border-radius: 12px 12px 12px 3px;
  font-size: 13px;
  line-height: 1.75;
}

.msg.mine span {
  background: #174d54;
  border: 0;
  border-radius: 12px 12px 3px 12px;
}

.msg.bot span {
  background: #273a4d;
  border: 1px solid #41616d;
}

.msg.bot small {
  color: #84c9c6;
}

.msg small {
  font-size: 10px;
  margin-top: 5px;
}

.note-row {
  padding: 12px 17px;
  background: #172333;
}

.note-row input,.composer textarea {
  background: #1c2939;
  border-radius: 9px;
  font-size: 12px;
}

.composer {
  background: #172333;
  padding: 15px 17px;
}

.composer button {
  background: var(--cyan);
  border-radius: 9px;
  font-size: 12px;
}

.dashboard:has(#detailsPanel.hidden) #thread {
  grid-column: 3/5;
}

.dashboard .details-panel {
  padding: 23px 19px;
  background: #162231;
  border-left: 1px solid var(--line);
  border-right: 0;
  grid-column: 4;
  grid-row: 1;
}

.details-panel h3 {
  font-size: 14px;
}

.profile-picture {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #1d5c61;
  color: #b1f1e9;
  font-size: 24px;
  overflow: hidden;
  margin: 20px 0;
}

.profile-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.details-panel dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin: 25px 0 8px;
}

.details-panel dd {
  margin: 0;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.details-panel p {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 30px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}

.management {
  grid-column: 2/5;
  background: var(--bg);
}

.manage-content {
  max-width: none;
  padding: 25px;
}

.manage-content h3 {
  font-size: 15px;
}

.management>header {
  height: auto;
  min-height: 82px;
  background: #182535;
  padding: 20px 25px;
}

.management h1 {
  font-size: 21px;
}

.management p {
  font-size: 12px;
}

.settings-form {
  max-width: 700px;
  background: #182535;
  border-radius: 12px;
  display: flow-root;
}

.settings-form input,.settings-form textarea,.settings-form select,.manage-form input,.manage-form select {
  background: #111d2d;
  border-color: #3e5265;
  border-radius: 8px;
  font-size: 12px;
}

.settings-form input[type=file] {
  padding: 10px;
  white-space: normal;
}

.settings-form button {
  float: none;
  background: var(--cyan);
  border-radius: 8px;
  margin: 5px 0 16px;
  font-size: 12px;
}

.settings-form button.secondary {
  background: #243447;
  color: var(--text);
  border: 1px solid var(--line);
  padding: 8px 12px;
}

.settings-form label {
  font-size: 12px;
}

.widget-editor {
  display: grid;
  grid-template-columns: minmax(300px,620px) minmax(300px,390px);
  gap: 30px;
  align-items: start;
}

.widget-editor .settings-form {
  max-width: none;
}

.preview-column {
  position: sticky;
  top: 20px;
}

.preview-column p {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 20px;
}

.preview-column iframe {
  width: 100%;
  height: 660px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #111827;
}

.color-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.color-grid label {
  gap: 3px;
}

.color-grid input {
  margin: 0 0 10px;
}

.operator-table>div {
  gap: 10px;
}

.operator-table>div>span {
  flex: 1;
}

.operator-table button {
  flex-shrink: 0;
}

.command-help,.switch-row,.manage-form {
  background: #182535;
}

.command-help code {
  background: #111d2d;
}

#mobileMenu {
  display: none;
}

.toast {
  font-size: 12px;
  max-width: 90vw;
  border-radius: 10px;
  font-weight: 500;
}

#detailsPanel.hidden {
  display: none!important;
}

@media(max-width:1280px) {
  .dashboard {
    grid-template-columns: 180px 280px minmax(300px,1fr);
  }

  .dashboard .details-panel {
    display: none;
  }

  .dashboard:has(#detailsPanel.hidden) #thread,#thread {
    grid-column: 3;
  }

  .management {
    grid-column: 2/4;
  }

  .widget-editor {
    grid-template-columns: 1fr;
  }

  .preview-column {
    position: static;
    max-width: 390px;
  }

}

@media(max-width:900px) {
  .dashboard {
    grid-template-columns: 155px 255px minmax(280px,1fr);
  }

  .brand>div:last-child {
    display: block;
  }

  .brand {
    padding: 0 0 20px;
  }

  .brand b {
    font-size: 13px;
  }

  .brand .logo {
    width: 32px;
    height: 32px;
  }

  .dashboard>aside {
    padding: 20px 9px;
  }

  .inbox>header {
    padding: 18px 10px;
  }

  .inbox h1 {
    font-size: 16px;
  }

}

@media(max-width:700px) {
  #mobileMenu {
    display: block;
    position: fixed;
    right: 12px;
    top: 13px;
    width: 35px;
    height: 35px;
    background: #243447;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;
    z-index: 55;
  }

  .dashboard {
    display: block;
    height: 100dvh;
  }

  .dashboard>aside:not(.details-panel) {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 215px;
    z-index: 50;
    box-shadow: 10px 0 50px #0009;
  }

  .dashboard.nav-open>aside:not(.details-panel) {
    display: block;
  }

  .dashboard .details-panel {
    display: none!important;
  }

  .inbox {
    height: 100dvh;
  }

  .inbox>header {
    padding-right: 60px;
  }

  .thread {
    position: fixed;
    inset: 0;
    display: none;
    background: var(--bg);
  }

  .thread:has(.chat:not(.hidden)) {
    display: block;
  }

  .chat>header {
    padding-right: 57px;
    height: 82px;
  }

  .chat h2 {
    font-size: 14px;
  }

  .chat>header .secondary {
    font-size: 10px;
    padding: 8px;
  }

  .management {
    position: fixed;
    inset: 0;
    z-index: 20;
  }

  .management>header {
    padding-right: 56px;
  }

  .management h1 {
    font-size: 18px;
  }

  .manage-content {
    padding: 16px;
  }

  .widget-editor {
    display: block;
  }

  .preview-column {
    margin-top: 25px;
    max-width: 100%;
  }

  .settings-form {
    padding: 15px;
  }

  .composer {
    padding: 12px;
  }

  .msg {
    max-width: 90%;
  }

  .operator-table>div {
    flex-wrap: wrap;
  }

  .operator-table>div>span {
    flex-basis: 100%;
  }

}

.chat-attachment {
  display: block;
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
  border-radius: 9px;
  margin: 8px 0;
}

.dashboard nav button:before {
  content: '◌'!important;
  display: inline-block;
  width: 20px;
  margin-right: 7px;
  font-size: 16px;
  vertical-align: middle;
}

#activeNav:before {
  content: '▤'!important;
}

#archiveNav:before {
  content: '▣'!important;
}

#operatorsNav:before,#profileNav:before {
  content: '♙'!important;
}

#botNav:before {
  content: '✦'!important;
}

#settingsNav:before {
  content: '⚙'!important;
}

#logout:before {
  content: '↪'!important;
}

[hidden] {
  display: none!important;
}

.dashboard>aside:first-child {
  overflow-y: auto;
}

.table-scroll {
  overflow: auto;
  margin: 18px 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th,td {
  text-align: left;
  padding: 13px;
  border-bottom: 1px solid #344353;
  vertical-align: top;
}

td small {
  display: block;
  max-width: 400px;
  overflow-wrap: anywhere;
  color: #91a3b8;
}

td button {
  padding: 7px 12px;
  margin: 2px;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}

.filter-form label {
  display: grid;
  gap: 5px;
  font-size: 12px;
}

.filter-form input,.filter-form select {
  max-width: 210px;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 20px 0;
}

.stats article {
  background: #1b2a3b;
  border: 1px solid #344353;
  padding: 22px;
  border-radius: 16px;
  min-width: 150px;
}

.stats strong {
  display: block;
  font-size: 32px;
  margin-top: 10px;
}

.settings-form {
  margin-bottom: 24px;
}

.secret-display {
  display: block;
  overflow-wrap: anywhere;
  padding: 15px;
  background: #0a1420;
}

.day-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 8px;
}

#management pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 20px;
}

.form-actions {
  align-items: center;
}

html[data-theme=light] body,html[data-theme=light] .dashboard,html[data-theme=light] .thread,html[data-theme=light] #management {
  background: #f4f7fa;
  color: #203042;
}

html[data-theme=light] .dashboard>aside,html[data-theme=light] .inbox,html[data-theme=light] .details-panel,html[data-theme=light] .stats article {
  background: #e7eef4;
  color: #203042;
}

html[data-theme=light] input,html[data-theme=light] textarea,html[data-theme=light] select,html[data-theme=light] .conversation,html[data-theme=light] .settings-form {
  background: #fff;
  color: #203042;
  border-color: #bbcbd8;
}

html[data-theme=light] h1,html[data-theme=light] h2,html[data-theme=light] h3,html[data-theme=light] label,html[data-theme=light] .dashboard nav button,html[data-theme=light] .conversation b {
  color: #203042;
}

html[data-theme=light] .secret-display {
  background: #dbe7ec;
}

html[data-theme=light] .msg {
  background: #dce8ee;
  color: #203042;
}

html[data-theme=light] .msg.mine {
  background: #c8eee7;
}

html[data-theme=light] .nav-active {
  background: #c0e6df!important;
}

html[data-theme=light] td,html[data-theme=light] th {
  border-color: #c2ced7;
}

@media(max-width:700px) {
  .filter-form label,.filter-form input,.filter-form select {
    width: 100%;
    max-width: none;
  }

  .table-scroll {
    max-width: 100%;
  }

  .stats article {
    min-width: 100px;
    flex: 1;
  }

  .form-actions {
    flex-wrap: wrap;
  }

}

#management button {
  background: #24483f;
  color: #e5fff9;
  border: 1px solid #46766a;
  border-radius: 9px;
  padding: 10px 15px;
  cursor: pointer;
}

#management button:disabled {
  opacity: .45;
  cursor: default;
}

#management .danger {
  background: #63333d;
  border-color: #a05968;
}

#management .filter-form input,#management .filter-form select {
  padding: 10px;
  border-radius: 8px;
  background: #132131;
  color: #edf4fa;
  border: 1px solid #344b60;
}

.dashboard nav {
  display: flex;
  flex-direction: column;
}

.dashboard nav button {
  padding: 9px 12px!important;
  font-size: 12px!important;
}

#ownerNav {
  order: -1;
  background: #1b514b;
  border: 1px solid #53d1bf;
  color: #c4fff6;
}

html[data-theme=light] #management .filter-form input,html[data-theme=light] #management .filter-form select {
  background: white;
  color: #203042;
}

:root {
  --shell-panel: #182433;
  --shell-input: #111b29;
  --shell-border: #304152;
  --shell-accent: #53d1bf;
  --shell-text: #edf4fa;
  --shell-muted: #a1b2c5;
}

html[data-theme=light] {
  --shell-panel: #fff;
  --shell-input: #f4f7fa;
  --shell-border: #dce5ec;
  --shell-text: #203042;
  --shell-muted: #607487;
  --bg: #f4f7fa;
  --text: #203042;
  --muted: #607487;
  --line: #dce5ec;
}

.workspace-layout {
  grid-template-columns: 220px 280px minmax(300px,1fr) 230px;
}

.workspace-layout .primary-sidebar {
  display: flex;
  flex-direction: column;
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  background: var(--shell-panel);
}

.primary-sidebar .brand {
  padding-bottom: 30px;
}

.primary-sidebar>nav {
  flex: 1;
}

.primary-sidebar>nav button {
  text-align: left;
  padding: 11px 13px!important;
  color: var(--shell-muted);
}

.workspace-layout #ownerNav {
  order: 0;
  margin-top: 22px;
  background: transparent;
  border: 1px solid var(--shell-border);
  color: var(--shell-accent);
}

.sidebar-account {
  border-top: 1px solid var(--shell-border);
  padding-top: 14px;
  margin-top: 20px;
  display: grid;
  gap: 7px;
}

.sidebar-account button {
  background: transparent;
  color: var(--shell-muted);
  text-align: left;
  border: 0;
  padding: 12px;
  overflow-wrap: anywhere;
}

.workspace-layout #management {
  grid-column: 2/-1;
  min-width: 0;
  overflow: auto;
  background: var(--bg);
}

.workspace-layout #management>header {
  background: transparent;
  border-bottom: 1px solid var(--shell-border);
}

.workspace-layout #manageSubtitle {
  color: var(--shell-muted);
  line-height: 1.7;
  margin-top: 7px;
}

.workspace-layout .manage-content {
  margin: 0 auto;
}

.workspace-layout.with-subnav {
  grid-template-columns: 220px 210px minmax(0,1fr);
}

.workspace-layout.with-subnav #management {
  grid-column: 3/-1;
}

.workspace-layout #workspaceSubnav {
  grid-column: 2;
  grid-row: 1;
  background: var(--shell-panel);
  border-right: 1px solid var(--shell-border);
  padding: 28px 12px;
  overflow: auto;
  min-height: 0;
}

.workspace-layout #workspaceSubnav h2 {
  font-size: 16px;
  margin: 8px 10px 25px;
}

.workspace-layout #workspaceSubnav button {
  color: var(--shell-muted);
  text-align: left;
  min-height: 40px;
  background: transparent;
  border: 1px solid transparent;
  padding: 10px!important;
  font-size: 12px!important;
  border-radius: 8px;
}

.workspace-layout #workspaceSubnav button:before {
  display: none!important;
}

.workspace-layout .workspace-card,.workspace-layout .overview-cards article {
  background: var(--shell-panel);
  border: 1px solid var(--shell-border);
  border-radius: 14px;
  padding: 25px;
  margin-bottom: 22px;
  color: var(--shell-text);
}

.overview-cards {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
}

.overview-cards span,.overview-cards small {
  display: block;
  color: var(--shell-muted);
}

.overview-cards strong {
  display: block;
}

.overview-cards small {
  line-height: 1.6;
}

.workspace-card h2 {
  font-size: 17px;
  margin: 0 0 10px;
}

.workspace-card p {
  color: var(--shell-muted);
  line-height: 1.8;
}

.card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
}

.overview-empty {
  text-align: center;
  padding: 70px 20px;
}

.overview-symbol {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--shell-border);
  width: 65px;
  height: 65px;
  border-radius: 20px;
  font-size: 32px;
  color: var(--shell-accent);
  margin-bottom: 16px;
}

.overview-empty h3 {
  font-size: 17px!important;
}

.overview-empty small {
  color: var(--shell-muted);
}

.installation-row {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 20px;
}

.installation-row input {
  flex: 1;
  min-width: 0;
}

.workspace-layout #installationCode,.workspace-layout #installationUrl {
  width: 100%;
  box-sizing: border-box;
  background: var(--shell-input);
  color: var(--shell-text);
  border: 1px solid var(--shell-border);
  border-radius: 9px;
  padding: 15px;
  font: 12px/1.8 monospace;
}

.workspace-layout #installationCode {
  margin: 10px 0 18px;
  resize: vertical;
}

.installation-row button {
  flex-shrink: 0;
}

.workspace-layout #management .workspace-card button {
  background: var(--shell-accent);
  color: #10252b;
  border: 0;
  min-height: 42px;
  font-weight: 650;
}

.preview-link {
  color: var(--shell-accent);
  padding: 12px;
  text-decoration: none;
}

.workspace-layout .settings-form {
  background: var(--shell-panel);
  border: 1px solid var(--shell-border);
}

.workspace-layout .management h1,.workspace-layout .management h2,.workspace-layout .management h3 {
  color: var(--shell-text);
}

@media(max-width:1100px) and (min-width:701px) {
  .workspace-layout {
    grid-template-columns: 190px 250px minmax(280px,1fr);
  }

  .workspace-layout.with-subnav {
    grid-template-columns: 190px 185px minmax(0,1fr);
  }

  .workspace-layout .manage-content {
    padding: 25px;
  }

  .workspace-layout #management>header {
    padding: 25px;
  }

  .overview-cards {
    gap: 10px;
  }

  .workspace-layout .overview-cards article {
    padding: 16px;
  }

}

@media(max-width:700px) {
  .workspace-layout {
    display: block;
  }

  .workspace-layout .primary-sidebar {
    display: none;
  }

  .workspace-layout.nav-open .primary-sidebar {
    display: flex;
  }

  .workspace-layout #management {
    position: relative;
    inset: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .workspace-layout #management>header {
    padding: 24px 58px 20px 20px;
    min-height: 95px;
  }

  .workspace-layout #manageTitle {
    font-size: 21px;
  }

  .workspace-layout .manage-content {
    padding: 20px 14px;
  }

  .workspace-layout #workspaceSubnav {
    position: relative;
    padding: 58px 10px 10px;
    border-bottom: 1px solid var(--shell-border);
    z-index: 21;
  }

  .workspace-layout #workspaceSubnav h2 {
    margin: 0 8px 12px;
  }

  .workspace-layout #workspaceSubnav nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
  }

  .workspace-layout #workspaceSubnav button {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .workspace-layout.with-subnav #management {
    min-height: calc(100dvh - 150px);
  }

  .overview-cards {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .workspace-layout .overview-cards article {
    margin-bottom: 12px;
    padding: 18px;
  }

  .overview-cards strong {
    font-size: 29px;
    margin: 7px 0;
  }

  .overview-empty {
    padding: 35px 10px;
  }

  .workspace-layout .workspace-card {
    padding: 19px;
  }

  .installation-row {
    flex-direction: column;
    align-items: stretch;
  }

  .workspace-layout #manageClose {
    padding: 8px;
    font-size: 11px;
  }

  .workspace-layout .sidebar-account {
    margin-top: auto;
  }

}

html[data-theme=light] {
  color-scheme: light;
  --bg: #f5f8ff;
  --panel: #fff;
  --line: #e2eaf5;
  --text: #10254d;
  --muted: #627695;
  --cyan: #2563eb;
  --gold: #2563eb;
  --shell-panel: #fff;
  --shell-input: #f7faff;
  --shell-border: #e2eaf5;
  --shell-accent: #2563eb;
  --shell-text: #10254d;
  --shell-muted: #627695;
  --ocean-tint: #eaf3ff;
  --ocean-shadow: 0 4px 24px #163d7210;
}

:root,html[data-theme=dark] {
  color-scheme: dark;
  --bg: #151518;
  --panel: #1b1b20;
  --line: #323238;
  --text: #f0f1f5;
  --muted: #a7a8b4;
  --cyan: #4c9aff;
  --gold: #2878f0;
  --red: #ff8799;
  --shell-panel: var(--panel);
  --shell-input: #232328;
  --shell-border: var(--line);
  --shell-accent: #2878f0;
  --shell-text: var(--text);
  --shell-muted: var(--muted);
  --ocean-tint: #1d304c;
  --ocean-shadow: none;
}

body {
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
  background: var(--bg);
  color: var(--text);
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color: transparent;
}

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

button:focus-visible,a:focus-visible {
  outline: 3px solid #93baff;
  outline-offset: 3px;
}

button {
  min-height: 40px;
}

.logo,.logo.small,.logo-mark {
  background: #2563eb;
  color: white;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  letter-spacing: -3px;
  font-weight: 900;
}

.brand b {
  letter-spacing: -.5px;
  font-size: 19px;
  text-transform: none;
}

.brand small {
  font-size: 11px;
}

.dashboard.workspace-layout {
  padding-top: 68px;
  grid-template-columns: 190px 290px minmax(0,1fr) 250px;
}

.workspace-layout.with-subnav {
  grid-template-columns: 190px 200px minmax(0,1fr);
}

.workspace-layout .primary-sidebar {
  padding: 26px 15px;
  background: var(--panel);
}

.primary-sidebar .brand {
  position: fixed;
  top: 18px;
  left: 22px;
  padding: 0;
  z-index: 62;
}

.primary-sidebar>nav {
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: auto;
}

.primary-sidebar>nav button {
  min-height: 46px;
  color: var(--muted);
  font-size: 13px!important;
}

.primary-sidebar nav button:before {
  color: #7b92b6!important;
}

nav button:hover,nav button.nav-active,.workspace-layout #workspaceSubnav button.nav-active {
  background: var(--ocean-tint)!important;
  color: var(--cyan)!important;
  border-color: transparent!important;
}

.primary-sidebar nav button.nav-active:before {
  color: var(--cyan)!important;
}

.sidebar-account {
  font-size: 12px;
}

.ocean-topbar {
  position: fixed;
  top: 0;
  left: 190px;
  right: 0;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 30px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  z-index: 40;
}

.ocean-search {
  max-width: 480px;
  flex: 1;
  border: 0;
  background: var(--shell-input);
  padding: 11px 16px;
  border-radius: 9px;
  color: var(--muted);
  text-align: left;
  font-size: 12px;
}

.ocean-status {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.ocean-status:before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #1cba80;
  border-radius: 50%;
  margin-right: 7px;
}

.ocean-account {
  width: 36px;
  min-width: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--ocean-tint);
  color: var(--cyan);
  font-weight: 700;
}

.workspace-layout #management>header {
  border: 0;
  padding: 36px 36px 12px;
  min-height: 108px;
  display: flex;
  align-items: center;
  height: auto;
}

.workspace-layout #manageTitle {
  font-size: 27px;
  font-weight: 750;
  letter-spacing: -1px;
}

.workspace-layout #manageSubtitle {
  font-size: 13px;
}

.workspace-layout .manage-content {
  padding: 20px 36px 36px;
  width: 100%;
  max-width: 1450px;
}

.workspace-layout .overview-cards {
  gap: 18px;
}

.workspace-layout .overview-cards article {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 23px;
  margin: 0;
  box-shadow: var(--ocean-shadow);
  border-radius: 14px;
}

.metric-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--ocean-tint);
  color: var(--cyan);
  flex-shrink: 0;
}

.metric-icon svg {
  width: 22px;
  height: 22px;
}

.overview-cards span {
  font-size: 12px;
}

.overview-cards strong {
  font-size: 32px;
  margin: 5px 0;
  font-weight: 750;
  letter-spacing: -1px;
  line-height: 1.2;
}

.overview-cards small {
  font-size: 11px;
}

.ocean-overview-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 20px;
  margin-top: 22px;
}

.workspace-layout .workspace-card {
  padding: 23px;
  box-shadow: var(--ocean-shadow);
  margin-bottom: 0;
  background: var(--panel);
}

.workspace-layout .workspace-card h2 {
  font-size: 14px;
  letter-spacing: -.2px;
}

.workspace-layout #management .workspace-card .ocean-text-button {
  background: transparent;
  color: var(--cyan);
  font-size: 11px;
  min-height: 32px;
  padding: 0;
}

.ocean-range {
  font-size: 10px;
  color: var(--muted);
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.ocean-chart {
  height: 240px;
  display: flex;
  gap: 12px;
  padding: 25px 2px 0;
}

.ocean-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 25px;
  font-size: 10px;
  color: var(--muted);
}

.ocean-bars {
  display: flex;
  flex: 1;
  gap: 12px;
  align-items: stretch;
  min-width: 0;
  background: repeating-linear-gradient(to top,transparent 0,transparent 47px,var(--line) 48px,transparent 49px);
  border-bottom: 1px solid var(--line);
}

.ocean-day {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
}

.ocean-bar {
  width: 65%;
  max-width: 38px;
  min-height: 2px;
  background: linear-gradient(#98c5ff,#4284fa);
  border-radius: 5px 5px 0 0;
}

.ocean-day small {
  font-size: 10px;
  color: var(--muted);
  height: 22px;
  white-space: nowrap;
  background: var(--panel);
}

.ocean-legend {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 20px;
}

.ocean-legend:before {
  content: '●';
  color: #4284fa;
  margin-right: 7px;
}

.ocean-recent {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
}

.ocean-recent button {
  display: flex;
  gap: 10px;
  text-align: left;
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 13px 0;
  color: var(--text);
  width: 100%;
}

.ocean-recent button:last-child {
  border: 0;
}

.ocean-recent .avatar {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  background: var(--ocean-tint);
  color: var(--cyan);
}

.ocean-person {
  min-width: 0;
  flex: 1;
}

.ocean-person b {
  display: block;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ocean-person small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ocean-badge {
  font-size: 10px;
  color: #2261bd;
  background: var(--ocean-tint);
  padding: 3px 7px;
  border-radius: 12px;
  white-space: nowrap;
}

.ocean-badge.closed {
  color: #16744d;
  background: #e5f7ed;
}

.ocean-empty {
  padding: 65px 15px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.workspace-layout input:not([type=checkbox]):not([type=color]),.workspace-layout textarea,.workspace-layout select {
  background: var(--shell-input);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 9px;
  max-width: 100%;
}

.workspace-layout .settings-form,.workspace-layout .manage-form,.workspace-layout .command-help,.workspace-layout .switch-row {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line);
}

.workspace-layout label,.workspace-layout .settings-form label {
  color: var(--text);
}

.workspace-layout .settings-form button,.workspace-layout .composer button,.workspace-layout #close,.workspace-layout .manage-form button {
  background: var(--cyan);
  color: #fff;
}

.workspace-layout .secondary {
  background: var(--ocean-tint);
  color: var(--cyan);
  border-color: var(--line);
}

.workspace-layout .inbox,.workspace-layout .chat>header,.workspace-layout .note-row,.workspace-layout .composer,.workspace-layout .details-panel {
  background: var(--panel);
  color: var(--text);
}

.workspace-layout .thread {
  background: var(--bg);
}

.workspace-layout .msg span {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
}

.workspace-layout .msg.mine span {
  background: var(--cyan);
  color: #fff;
  border: 0;
}

.workspace-layout .msg.bot span {
  background: var(--ocean-tint);
  color: var(--text);
  border-color: var(--line);
}

.workspace-layout .conversation:hover,.workspace-layout .conversation.selected {
  background: var(--ocean-tint);
}

.workspace-layout .avatar {
  background: var(--ocean-tint);
  color: var(--cyan);
}

.workspace-layout .conversation-list {
  height: calc(100dvh - 217px);
}

.workspace-layout table {
  width: 100%;
  border-collapse: collapse;
}

.workspace-layout td,.workspace-layout th {
  border-color: var(--line);
  overflow-wrap: anywhere;
}

.workspace-layout .management {
  overflow-x: hidden;
}

.workspace-layout .settings-form {
  max-width: 800px;
}

.workspace-layout #workspaceSubnav {
  padding-top: 26px;
}

.ocean-mobile-nav {
  display: none;
}

.ocean-chat-back {
  display: none;
}

.workspace-layout .chat {
  height: 100%;
  min-height: 0;
}

.workspace-layout .messages {
  background: var(--bg);
}

@media(max-width:1100px) {
  .dashboard.workspace-layout {
    grid-template-columns: 190px 270px minmax(0,1fr);
  }

  .workspace-layout.with-subnav {
    grid-template-columns: 190px 180px minmax(0,1fr);
  }

  .ocean-topbar {
    left: 190px;
  }

  .workspace-layout .manage-content {
    padding: 20px;
  }

  .workspace-layout #management>header {
    padding: 28px 20px 10px;
  }

  .ocean-overview-grid {
    grid-template-columns: 1fr;
  }

  .overview-cards article {
    gap: 10px!important;
    padding: 17px!important;
  }

  .metric-icon {
    width: 34px;
    height: 34px;
  }

}

@media(max-width:700px) {
  .dashboard.workspace-layout {
    display: block;
    padding-top: 60px;
    height: 100dvh;
    overflow: auto;
    padding-bottom: 72px;
  }

  .ocean-topbar {
    left: 0;
    height: 60px;
    padding: 0 16px 0 58px;
  }

  .ocean-search {
    background: transparent;
    color: var(--text);
    font-weight: 750;
    padding: 0;
    font-size: 18px;
  }

  .ocean-search:after {
    content: 'Wrachat';
  }

  .ocean-search span {
    display: none;
  }

  .ocean-status {
    font-size: 10px;
  }

  .ocean-account {
    width: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  #mobileMenu {
    left: 14px;
    right: auto;
    top: 12px;
    z-index: 65;
    background: var(--panel);
    color: var(--text);
    border: 0;
    width: 34px;
    height: 36px;
  }

  .workspace-layout .primary-sidebar .brand {
    position: static;
    margin-bottom: 20px;
  }

  .workspace-layout.nav-open .primary-sidebar {
    display: flex;
    top: 60px;
    bottom: 66px;
    width: 245px;
    padding-top: 20px;
    z-index: 60;
    box-shadow: 10px 0 60px #163d7230;
  }

  .workspace-layout #management {
    min-height: calc(100dvh - 130px);
    overflow: visible;
    padding-bottom: 12px;
  }

  .workspace-layout #management>header {
    padding: 24px 18px 10px;
    min-height: auto;
    gap: 8px;
  }

  .workspace-layout #manageTitle {
    font-size: 23px;
    line-height: 1.3;
    letter-spacing: -.7px;
  }

  .workspace-layout #manageSubtitle {
    font-size: 12px;
  }

  .workspace-layout .manage-content {
    padding: 15px 16px;
  }

  .workspace-layout .overview-cards {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
  }

  .workspace-layout .overview-cards article {
    padding: 15px!important;
    display: block;
    margin: 0;
    min-width: 0;
  }

  .metric-icon {
    margin-bottom: 12px;
  }

  .overview-cards strong {
    font-size: 28px;
  }

  .overview-cards article:last-child {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
  }

  .overview-cards article:last-child .metric-icon {
    margin-bottom: 0;
  }

  .ocean-overview-grid {
    gap: 15px;
    margin-top: 15px;
  }

  .workspace-layout .workspace-card {
    padding: 17px;
  }

  .ocean-chart {
    height: 200px;
    gap: 8px;
  }

  .ocean-bars {
    gap: 8px;
  }

  .ocean-day small {
    font-size: 9px;
  }

  .ocean-mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(62px + env(safe-area-inset-bottom));
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
    display: flex;
    justify-content: space-around;
    background: var(--panel);
    border-top: 1px solid var(--line);
    z-index: 55;
  }

  .ocean-mobile-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    justify-content: center;
    font-size: 10px;
    background: transparent;
    color: var(--muted);
    border: 0;
    min-width: 56px;
  }

  .ocean-mobile-nav svg {
    width: 20px;
    height: 20px;
  }

  .ocean-mobile-nav button[aria-current=page] {
    color: var(--cyan);
    font-weight: 700;
  }

  .workspace-layout #workspaceSubnav {
    padding: 15px 12px;
    position: relative;
    top: auto;
  }

  .workspace-layout #workspaceSubnav h2 {
    display: none;
  }

  .workspace-layout.with-subnav #management {
    min-height: 0;
  }

  .workspace-layout .inbox {
    height: calc(100dvh - 126px);
  }

  .workspace-layout .conversation-list {
    height: calc(100dvh - 277px);
  }

  .workspace-layout .thread {
    inset: 60px 0 66px;
    z-index: 45;
  }

  .workspace-layout .chat>header {
    padding: 12px;
    gap: 8px;
  }

  .ocean-chat-back {
    display: block;
    border: 0;
    background: var(--ocean-tint);
    color: var(--cyan);
    min-width: 34px;
    font-size: 22px;
  }

  .workspace-layout .chat>header>div:first-of-type {
    flex: 1;
    min-width: 0;
  }

  .workspace-layout .chat>header h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-layout .chat>header .secondary {
    padding: 8px;
    min-height: 40px;
  }

  .workspace-layout .note-row {
    display: flex;
    gap: 5px;
    padding: 8px;
  }

  .workspace-layout .note-row input {
    min-width: 0;
    flex: 1;
  }

  .workspace-layout .note-row button {
    font-size: 10px;
    padding: 5px;
  }

  .workspace-layout .widget-editor {
    display: block;
  }

  .workspace-layout .settings-form {
    width: 100%;
    min-width: 0;
  }

  .workspace-layout .manage-form {
    display: flex;
    flex-wrap: wrap;
  }

  .workspace-layout .manage-form>* {
    min-width: 0;
    max-width: 100%;
  }

  .workspace-layout .color-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .workspace-layout .manage-content pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .workspace-layout .manage-content table {
    font-size: 11px;
  }

  .workspace-layout .manage-content th,.workspace-layout .manage-content td {
    padding: 8px 4px;
  }

  .workspace-layout .manage-content .form-actions {
    flex-wrap: wrap;
  }

  input,select,textarea {
    font-size: 16px!important;
  }

}

.ocean-login {
  background: #fff;
  color: #10254d;
}

.ocean-login .auth-page {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.ocean-login .auth-story {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 45px 60px;
  background: linear-gradient(135deg,#eaf4ff,#dceeff);
  color: #10254d;
  overflow: hidden;
  position: relative;
}

.ocean-login .auth-story .logo {
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  height: auto;
  background: none;
  color: #10254d;
  letter-spacing: -1px;
  text-decoration: none;
}

.ocean-login .logo-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  letter-spacing: -3px;
  font-size: 26px;
}

.ocean-login .auth-story h1 {
  font-size: clamp(36px,4.2vw,62px);
  line-height: 1.12;
  letter-spacing: -2px;
  max-width: 450px;
  position: relative;
  z-index: 1;
}

.ocean-login .auth-story p {
  color: #526c90;
  max-width: 390px;
  line-height: 1.8;
}

.ocean-login .auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 45px;
  background: #fff;
}

.ocean-login .auth-form {
  width: 100%;
  max-width: 370px;
}

.ocean-login .auth-form h2 {
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -.8px;
  text-align: center;
  margin: 24px 0 12px;
  color: #10254d;
}

.ocean-login .auth-form>p {
  text-align: center;
  color: #627695;
  font-size: 14px;
  margin-bottom: 32px;
}

.ocean-login .login-wordmark {
  text-align: center;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -1px;
  margin: 14px 0;
  color: #10254d;
}

.ocean-login .login-wordmark .logo-mark {
  margin: 0 auto 10px;
  width: 52px;
  height: 52px;
  font-size: 35px;
}

.ocean-login .field label {
  color: #29436b;
  font-size: 12px;
  font-weight: 600;
}

.ocean-login input {
  background: #fff;
  border: 1px solid #d9e4f3;
  color: #10254d;
  border-radius: 9px;
  min-height: 48px;
  padding: 12px 14px;
  width: 100%;
}

.ocean-login .password-wrap {
  position: relative;
}

.ocean-login .password-wrap input {
  padding-right: 82px;
}

.ocean-login .password-toggle {
  color: #627695;
  background: transparent;
  border: 0;
  font-size: 11px;
}

.ocean-login #submitAuth {
  background: #2563eb;
  color: white;
  border: 0;
  min-height: 49px;
  border-radius: 9px;
  font-size: 14px;
  box-shadow: 0 5px 14px #2563eb20;
  width: 100%;
  margin-top: 18px;
}

.ocean-login .auth-switch,.ocean-login .auth-footer {
  text-align: center;
  color: #627695;
  font-size: 12px;
}

.ocean-login .auth-footer {
  margin-top: 30px;
}

.ocean-login .back,.ocean-login a {
  color: #2563eb;
  font-size: 12px;
}

.ocean-login .auth-form details {
  margin: 16px 0;
  color: #627695;
  font-size: 12px;
}

.ocean-login .auth-form details .field {
  margin-top: 12px;
}

.ocean-login .chat-art {
  height: 200px;
  position: relative;
  max-width: 390px;
  margin: 30px 0;
}

.chat-art i {
  position: absolute;
  display: block;
  width: 190px;
  height: 135px;
  border-radius: 35px;
  background: #83b6ff66;
  transform: rotate(-8deg);
  left: 25px;
  top: 15px;
}

.chat-art i:after {
  content: '';
  position: absolute;
  bottom: -22px;
  left: 38px;
  border-top: 35px solid #83b6ff66;
  border-right: 30px solid transparent;
}

.chat-art i:nth-of-type(2) {
  left: 145px;
  top: 55px;
  background: #529afa40;
  transform: rotate(9deg);
}

.chat-art b {
  position: absolute;
  color: white;
  font-size: 56px;
  letter-spacing: 8px;
  left: 65px;
  top: 40px;
}

.ocean-login .story-note {
  border: 0;
  color: #526c90;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.ocean-login .form-error {
  color: #ba2445;
}

.ocean-login .field {
  margin-bottom: 18px;
}

@media(max-width:700px) {
  .ocean-login .auth-page {
    display: block;
    min-height: 100dvh;
    background: linear-gradient(#fff 65%,#eaf4ff);
  }

  .ocean-login .auth-story {
    display: none;
  }

  .ocean-login .auth-main {
    min-height: 100dvh;
    background: transparent;
    padding: 35px 25px;
  }

  .ocean-login .auth-form {
    max-width: 390px;
  }

  .ocean-login .login-wordmark {
    margin-bottom: 42px;
  }

  .ocean-login .auth-form h2 {
    font-size: 27px;
  }

  .ocean-login .auth-footer {
    margin-top: 36px;
  }

}

.workspace-layout .brand .logo,.ocean-login .logo-mark {
  background: transparent;
  font-size: 0;
  letter-spacing: 0;
  border: 0;
  box-shadow: none;
}

.workspace-layout .brand .logo:before,.ocean-login .logo-mark:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url('/ocean-mark.svg') center/contain no-repeat;
}

.ocean-login .auth-story .logo {
  font-size: 0;
}

.ocean-login .auth-story .logo:after {
  content: 'Wrachat';
  font-size: 23px;
  letter-spacing: -1px;
}

.workspace-layout #manageClose {
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  border: 1px solid var(--line);
}

html[data-theme] .workspace-layout .primary-sidebar {
  background: var(--panel)!important;
}

html[data-theme] .workspace-layout .primary-sidebar nav button.nav-active,html[data-theme] .workspace-layout #workspaceSubnav button.nav-active {
  background: var(--ocean-tint)!important;
  color: var(--cyan)!important;
  border-color: transparent!important;
}

.workspace-layout #management .ocean-recent button {
  background: transparent;
  color: var(--text);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 13px 0;
  font-weight: 400;
}

.workspace-layout #management .ocean-recent button:hover {
  background: var(--shell-input);
}

.workspace-layout #management:has(.overview-cards) #manageClose {
  display: none;
}

.workspace-layout #management>header>div {
  min-width: 0;
}

.workspace-layout #manageTitle {
  white-space: normal;
}

.workspace-layout #management button:not(.danger):not(.ocean-text-button):not([data-ocean-chat]) {
  background: var(--cyan);
  color: #fff;
  border-color: transparent;
}

.workspace-layout #management .secondary {
  background: var(--ocean-tint)!important;
  color: var(--cyan)!important;
  border: 1px solid var(--line)!important;
}

.workspace-layout .primary-sidebar>nav button:has(svg):before {
  display: none!important;
}

.workspace-layout .primary-sidebar>nav button svg {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 12px;
  flex-shrink: 0;
}

.ocean-search {
  padding-left: 16px;
}

.ocean-search:before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 1.7px solid #879bb6;
  border-radius: 50%;
  margin-right: 14px;
  vertical-align: middle;
}

.ocean-search:focus-visible {
  outline: 2px solid var(--cyan);
}

@media(max-width:700px) {
  .ocean-search:before {
    display: none;
  }

}

.reset-history-filter {
  display: flex;
  gap: 14px;
  align-items: end;
  flex-wrap: wrap;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.reset-history-filter label {
  display: grid;
  gap: 8px;
  flex: 1;
  min-width: 150px;
  font-size: 12px;
}

.reset-history-filter input,.reset-history-filter select {
  padding: 11px;
  width: 100%;
  min-height: 44px;
}

.reset-history-meta,.reset-history-pages {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
  font-size: 12px;
  color: var(--muted);
}

.reset-history-table {
  background: var(--panel);
  font-size: 12px;
}

.reset-history-table th {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.reset-history-table td {
  padding: 15px!important;
}

.reset-result {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.reset-result.success {
  background: #e2f5ec;
  color: #16744d;
}

.reset-result.failed {
  background: #fff0ed;
  color: #ab3d29;
}

.reset-history-note {
  color: var(--muted);
  line-height: 1.8;
}

.reset-history-pages button {
  min-height: 44px;
}

#resetHistoryNav:before {
  content: '✓'!important;
}

@media(max-width:700px) {
  .reset-history-filter {
    padding: 16px;
    gap: 12px;
  }

  .reset-history-filter label {
    min-width: calc(50% - 12px);
  }

  .reset-history-filter label:first-child {
    flex-basis: 100%;
  }

  .reset-history-filter button {
    width: 100%;
  }

  .reset-history-table thead {
    display: none;
  }

  .reset-history-table,.reset-history-table tbody {
    display: block;
    background: transparent;
  }

  .reset-history-table tr {
    display: block;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 14px;
    padding: 8px;
  }

  .reset-history-table td {
    display: grid;
    grid-template-columns: 105px minmax(0,1fr);
    gap: 12px;
    padding: 10px!important;
    border: 0;
    font-size: 12px;
  }

  .reset-history-table td:before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
  }

  .reset-history-pages {
    gap: 7px;
    font-size: 10px;
  }

  .reset-history-pages button {
    font-size: 10px;
    padding: 8px!important;
  }

}

/* Conversation tags and service quality */
.quality-tabs{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 18px}.quality-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:18px 0}.quality-stats strong{font-size:1.6rem}.quality-table{max-width:100%;overflow:auto;margin:14px 0}.quality-table table{width:100%;border-collapse:collapse}.quality-table th,.quality-table td{padding:12px;text-align:left;border-bottom:1px solid var(--border,#aab7c633);vertical-align:top}.quality-comment{white-space:pre-wrap;overflow-wrap:anywhere;min-width:160px;max-width:420px}.quality-tag{display:inline-block;max-width:100%;overflow-wrap:anywhere;padding:4px 9px;border:1px solid;border-radius:20px;font-size:.85rem}.quality-tag-form{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.quality-tag-form label{display:grid;gap:6px}.quality-tag-form input{max-width:100%}.chat-service-tools{padding:8px 14px;border-top:1px solid var(--border,#aab7c633)}.chat-service-tools summary{cursor:pointer}.quality-tag-options{display:flex;gap:10px;flex-wrap:wrap;max-height:130px;overflow:auto;margin:10px 0}.quality-tag-options label{display:flex;gap:5px;align-items:center}.quality-tag-options input{width:auto}.chat-service-tools p{font-size:.85rem;overflow-wrap:anywhere}@media(max-width:600px){.quality-tag-form{align-items:stretch}.quality-tag-form label:first-child{width:100%}.quality-stats{grid-template-columns:1fr}.chat-service-tools{padding:6px 10px}.quality-table th,.quality-table td{padding:8px}}

/* Persistent operator attention, shared by desktop and mobile. */
.operator-needed-label{color:#9a4c00!important;font-weight:700;white-space:normal}
.operator-attention-banner{padding:12px 16px;background:#fff5d9;color:#714500;border-bottom:1px solid #e9c76f;font-size:13px;line-height:1.5}
.operator-attention-banner[hidden]{display:none}
.operator-attention-item{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;width:100%;padding:16px;margin-bottom:10px;background:#fff;color:#174263;border:1px solid #cbe0ee;border-radius:12px;text-align:left;overflow-wrap:anywhere}
.operator-attention-item span{font-size:13px}
.chat{display:flex;flex-direction:column}
.chat>header,.chat>.note-row,.chat>.composer,.chat>.chat-service-tools,.chat>.operator-attention-banner{flex:0 0 auto}
.chat>header{min-height:82px}
.chat>.message-stage{flex:1 1 0;min-height:0}

.quick-replies{flex:0 0 auto;min-height:0;max-height:260px;max-height:min(260px,35dvh);overflow:auto;border-top:1px solid #c6d9ec;background:#fff;color:#18334f;padding:8px 12px}
.quick-replies[hidden]{display:none}
.quick-replies-heading{font-weight:700;padding-bottom:6px}.quick-replies-heading small{display:block;color:#526a83;font-weight:400}
#quickReplyOptions button{display:block;width:100%;text-align:left;background:transparent;color:inherit;border:1px solid transparent;border-radius:8px;padding:8px;cursor:pointer}
#quickReplyOptions button[aria-selected=true]{background:#eaf3ff;border-color:#a8c8ee}
#quickReplyOptions b,#quickReplyOptions small{display:block;white-space:pre-wrap;overflow-wrap:anywhere}
#quickReplyOptions small,#quickReplyStatus{font-size:12px;line-height:1.4}#quickReplyStatus{padding:6px;color:#526a83}
.quick-reply-trigger{flex:0 0 38px;align-self:center;padding:8px!important;font-size:20px!important}

/* Dark Workspace components. The existing layout and light preference share these tokens. */
.workspace-layout .brand .logo {background:#fff;border-radius:10px;padding:5px;width:38px;height:38px}
.workspace-layout .brand .logo:before {background-image:url('/wra-ribbon.svg')}
.workspace-layout .primary-sidebar {padding:22px 10px}
.workspace-layout .primary-sidebar>nav {gap:4px}
.workspace-layout .primary-sidebar nav button {font-size:12px!important;min-height:43px;padding:10px 12px;text-align:left}
.workspace-layout .primary-sidebar nav button.nav-active {box-shadow:inset 3px 0 #4c9aff}
.workspace-layout .primary-sidebar>nav button svg {margin-right:9px}
.workspace-layout .sidebar-account {border-top:1px solid var(--line);padding-top:12px}
.workspace-layout .ocean-topbar {background:var(--bg)}
.workspace-layout .ocean-search {border:1px solid var(--line);background:var(--shell-input)}
.ocean-status:before {display:none}
.workspace-layout .inbox {display:flex;flex-direction:column;min-height:0}
.workspace-layout .inbox>header {flex:none;padding:20px 16px 8px;height:76px;border-bottom:0}
.workspace-layout .search {padding:8px 15px 14px;flex:none}
.workspace-layout .search input {width:100%;background:var(--shell-input);border:1px solid var(--line);border-radius:9px}
.inbox-tabs,.inbox-filters {display:flex;gap:8px;padding:0 15px 12px;flex:none}
.inbox-tabs {border-bottom:1px solid var(--line);padding-bottom:0}
.inbox-tabs button {flex:1;background:transparent;border:0;border-bottom:2px solid transparent;color:var(--muted);border-radius:0;padding:8px}
.inbox-tabs button[aria-selected=true] {color:var(--cyan);border-bottom-color:var(--cyan)}
.inbox-filters {padding-top:12px}
.inbox-filters button {background:var(--shell-input);border:1px solid var(--line);border-radius:20px;padding:6px 10px;color:var(--muted);font-size:11px;min-height:32px}
.inbox-filters button[aria-pressed=true] {background:var(--ocean-tint);border-color:var(--cyan);color:var(--text)}
.workspace-layout .conversation-list {height:auto;min-height:0;flex:1;overflow:auto;padding:0}
.workspace-layout .conversation {border-radius:0;border:0;border-bottom:1px solid var(--line);padding:17px 13px;gap:10px;min-height:94px}
.workspace-layout .conversation.selected {box-shadow:inset 3px 0 #4c9aff}
.workspace-layout .conversation b {font-size:12px}
.workspace-layout .conversation small {font-size:12px;line-height:1.55}
.workspace-layout .conversation em {font-size:10px;color:var(--muted)}
.workspace-layout .conversation em strong {display:block;background:#2878f0;color:white;border-radius:20px;min-width:21px;text-align:center;padding:3px;margin-top:7px}
.workspace-layout .avatar,.workspace-layout .profile-picture {background:#444a58;color:#f6f7fa;border:1px solid #697080}
.workspace-layout .operator-needed-label {color:#ffd181!important;font-size:10px!important}
.workspace-layout .chat>header {background:var(--bg);gap:12px}
.workspace-layout .msg {max-width:78%}
.workspace-layout .msg span {background:var(--shell-input);border:0;line-height:1.65}
.workspace-layout .msg.bot {align-self:flex-end}
.workspace-layout .msg.bot span,.workspace-layout .msg.mine span {background:#174782;color:#f5f8ff;border:1px solid #24568e}
.workspace-layout .msg.bot small {text-align:right;color:#83b4f5}
.workspace-layout .composer {background:var(--bg);padding:16px;gap:10px;align-items:flex-end}
.workspace-layout .composer textarea {min-height:88px;background:var(--shell-input);border-color:var(--line);color:var(--text);padding:14px}
.workspace-layout .composer button {background:#2878f0;color:#fff}
.workspace-layout .secondary,#close {background:var(--shell-input);color:var(--text);border:1px solid var(--line)}
.workspace-layout .details-panel {padding:22px 18px;background:var(--panel)}
.workspace-layout .details-panel .note-row {display:grid;gap:10px;padding:0;background:transparent;border:0}
.workspace-layout .details-panel .note-row input {width:100%;min-width:0;min-height:64px;background:var(--shell-input);color:var(--text);border:1px solid var(--line);padding:12px}
.workspace-layout .details-panel .chat-service-tools {border-top:1px solid var(--line);padding:16px 0;margin-top:20px}
.workspace-layout .details-panel .chat-service-tools summary {font-weight:600}
.workspace-layout .details-panel .quality-tag-options {display:grid;max-height:200px}
.workspace-layout .details-panel #claim {width:100%;margin-top:24px;padding:12px}
.workspace-layout .details-panel>p {display:none}
.workspace-layout .chat-service-tools button {background:var(--shell-input);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.chat-bot-state {display:inline-block;font-size:10px;border-radius:20px;padding:4px 9px;background:var(--ocean-tint);color:var(--cyan);margin-left:10px;white-space:nowrap}
.chat-source-link {align-self:flex-start;margin:8px 16px 0;background:transparent;color:var(--muted);border:0;font-size:11px;min-height:28px;padding:0}
html:not([data-theme=light]) .operator-attention-banner {background:#3a2b16;color:#ffd68c;border-color:#6b5029}
html:not([data-theme=light]) .operator-attention-item {background:var(--panel);color:var(--text);border-color:var(--line)}
html:not([data-theme=light]) .quick-replies {background:#232328;color:var(--text);border-color:var(--line)}
html:not([data-theme=light]) #quickReplyOptions button[aria-selected=true] {background:var(--ocean-tint);border-color:#4c9aff}
html:not([data-theme=light]) .quick-replies-heading small,html:not([data-theme=light]) #quickReplyStatus {color:var(--muted)}
html:not([data-theme=light]) .reset-result.success {background:#17372d;color:#8ae2bd}
html:not([data-theme=light]) .reset-result.failed {background:#47242a;color:#ffa6ab}
@media(min-width:1101px) and (max-width:1280px){
 .dashboard.workspace-layout {grid-template-columns:170px 255px minmax(0,1fr) 230px}
 .workspace-layout.with-subnav {grid-template-columns:170px 180px minmax(0,1fr)}
 .workspace-layout .ocean-topbar {left:170px}
 .dashboard.workspace-layout .details-panel {display:block}
 .dashboard.workspace-layout:has(#detailsPanel.hidden) #thread {grid-column:3/5}
 .workspace-layout #management {grid-column:2/-1}
 .workspace-layout.with-subnav #management {grid-column:3/-1}
}
@media(max-width:1100px){.workspace-layout .details-panel{display:none}.workspace-layout .note-row{background:var(--panel)}}
@media(max-width:700px){
 .workspace-layout .ocean-topbar {left:0}
 .workspace-layout .inbox {height:calc(100dvh - 126px)}
 .workspace-layout .inbox>header {padding:18px 16px 6px;min-height:76px}
 .workspace-layout .conversation {min-height:100px;padding:18px}
 .workspace-layout .conversation b {font-size:14px}
 .workspace-layout .conversation small {font-size:13px}
 .workspace-layout .composer {padding:10px;gap:6px}
 .workspace-layout .composer textarea {min-height:60px;padding:10px}
 .workspace-layout .chat>header {gap:6px}
 .chat-bot-state {margin-left:0;font-size:9px;padding:3px 6px}
 .chat-source-link {margin:4px 12px 0}
 .workspace-layout .primary-sidebar {background:var(--panel)}
 .workspace-layout .ocean-mobile-nav {background:var(--panel)}
}

.workspace-layout .brand .logo {display:grid;place-items:center;flex-shrink:0}
.workspace-layout .brand .logo:before {width:28px;height:28px}
.workspace-layout #close {background:var(--shell-input);color:var(--text);border:1px solid var(--line)}
.chat-bot-state {margin-right:7px}
@media(max-width:700px){.toast{bottom:84px;z-index:90;max-width:calc(100vw - 28px);text-align:center}}