@import url("https://fonts.googleapis.com/css2?family=Sigmar&family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");
:root {
     font-family: "DM Sans", sans-serif;
     color: #183b35;
     background: #f7f9f7;
     font-synthesis: none;
}
* {
     box-sizing: border-box;
}
body {
     margin: 0;
}
button,
input,
textarea {
     font: inherit;
}
button {
     cursor: pointer;
     transition: background 0.15s;
}
button:disabled {
     opacity: 0.45;
     cursor: default;
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
     outline: 3px solid #b1cf62;
     outline-offset: 3px;
}
[hidden] {
     display: none !important;
}
h1,
h2,
p {
     margin: 0;
}
h1,
h2 {
     font-family: Manrope, sans-serif;
}
button {
     border: 0;
}
input,
textarea {
     width: 100%;
     border: 1px solid #dce4df;
     border-radius: 9px;
     padding: 12px 14px;
     background: #fff;
     color: #183b35;
}
.muted {
     color: #7b8b84;
     font-size: 13px;
     line-height: 1.7;
}
.eyebrow {
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 2px;
     color: #83968a;
     margin-bottom: 12px;
}
.brand-mark {
     width: 42px;
     height: 42px;
     border-radius: 14px;
     background: #d6ed8c;
     color: #204638;
     font:
          bold 28px Manrope,
          sans-serif;
     display: grid;
     place-items: center;
}
.primary {
     background: #204f40;
     color: #fff;
     border-radius: 9px;
     padding: 12px 21px;
     font-weight: 600;
}
.primary:hover {
     background: #153a2e;
}
.secondary {
     border: 1px solid #dbe4df;
     color: #315744;
     background: white;
     padding: 10px 16px;
     border-radius: 8px;
     font-size: 12px;
}
.login {
     min-height: 100dvh;
     display: grid;
     grid-template-columns: 1fr 1fr;
}
.login-card {
     width: min(380px, 85%);
     margin: auto;
     padding: 40px 0;
}
.login-card .brand-mark {
     margin-bottom: 35px;
}
.login-card h1 {
     font-size: 29px;
     letter-spacing: -1px;
     margin-bottom: 12px;
}
.login-card label {
     display: block;
     margin-top: 10px;
     font-size: 13px;
}
.login-card input {
     margin-top: 8px;
}
.login-card .primary {
     width: 100%;
     margin-top: 24px;
}
.error {
     color: #b13e3e;
     font-size: 13px;
     margin-top: 18px;
}
.login-art {
     background: #204f40;
     position: relative;
     overflow: hidden;
     color: #e6f1dc;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 12%;
     gap: 28px;
}
.login-art h2 {
     font-size: clamp(32px, 4vw, 62px);
     font-weight: 500;
     letter-spacing: -2px;
     z-index: 1;
}
.login-art p {
     font-size: 13px;
     color: #bad1be;
     z-index: 1;
}
.orbit {
     position: absolute;
     border: 1px solid #658466;
     border-radius: 50%;
     width: 650px;
     height: 650px;
     left: 15%;
     top: 35%;
}
.orbit:after {
     content: "";
     position: absolute;
     inset: 65px;
     border: 1px solid #658466;
     border-radius: 50%;
}
main {
     display: grid;
     grid-template-columns: 76px 320px minmax(0, 1fr);
     height: 100dvh;
}
.rail {
     background: #00acee;
     display: flex;
     align-items: center;
     flex-direction: column;
     padding: 24px 0;
     gap: 30px;
}
.rail-icon {
     background: #fcce29;
     color: white;
     
     padding: 10px 15px;
     border-radius: 10px;
     font-size: 24px;
}
.rail-label {
     writing-mode: vertical-rl;
     color: #a6c1ac;
     font-size: 9px;
     letter-spacing: 3px;
}
.logout {
     margin-top: auto;
     color: white;
     background: transparent;
     font-size: 12px;
}
.sidebar {
     background: #fff;
     border-right: 1px solid #e5eae5;
     display: flex;
     flex-direction: column;
     min-height: 0;
}
.sidebar header {
     padding: 32px 26px 25px;
}
.sidebar h1 {
     font-size: 24px;
     letter-spacing: -0.8px;
     margin-bottom: 8px;
}
.live-dot {
     display: inline-block;
     width: 7px;
     height: 7px;
     background: #79a357;
     border-radius: 50%;
     vertical-align: middle;
     margin-left: 7px;
}
.search-label {
     padding: 0 16px;
}
.search-label input {
     background: #f6f8f5;
     font-size: 13px;
     border-color: #edf0eb;
}
.filters {
     display: flex;
     padding: 20px 22px 16px;
     gap: 7px;
     border-bottom: 1px solid #edf0eb;
}
.filters button {
     padding: 8px 13px;
     color: #7a8a80;
     background: transparent;
     border-radius: 7px;
     font-size: 12px;
}
.filters button.active {
     background: #eaf0e2;
     color: #385638;
     font-weight: 700;
}
.conversation-list {
     flex: 1;
     overflow: auto;
}
.conversation {
     display: flex;
     text-align: left;
     width: 100%;
     gap: 12px;
     padding: 19px 22px;
     background: #fff;
     border-bottom: 1px solid #f1f3ef;
     align-items: center;
     color: inherit;
     border-left: 3px solid transparent;
}
.conversation.active {
     background: #f0f5e9;
     border-left-color: #6b8f43;
}
.avatar {
     height: 41px;
     min-width: 41px;
     border-radius: 13px;
     background: #e8eddf;
     display: grid;
     place-items: center;
     font-size: 14px;
     font-weight: 700;
     color: #657a4c;
}
.conversation-body {
     min-width: 0;
     flex: 1;
}
.conversation-top {
     display: flex;
     justify-content: space-between;
     gap: 8px;
     margin-bottom: 7px;
}
.conversation-top strong {
     font-size: 13px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}
.conversation-top time {
     font-size: 10px;
     color: #8c988e;
     white-space: nowrap;
}
.conversation-preview {
     font-size: 12px;
     color: #8a958d;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
}
.instance-tag {
     font-size: 9px;
     letter-spacing: 0.5px;
     color: #7e8d7f;
     display: block;
     margin-top: 6px;
}
.list-note {
     font-size: 12px;
     color: #859380;
     padding: 12px 23px;
}
.list-note:empty {
     display: none;
}
.list-pagination {
     display: flex;
     justify-content: space-between;
     padding: 12px 16px;
     font-size: 11px;
}
.list-pagination button {
     font-size: 11px;
     color: #62745a;
     background: none;
}
.sidebar footer {
     font-size: 10px;
     color: #97a08f;
     padding: 15px 22px;
     border-top: 1px solid #edf0eb;
}
.chat {
     position: relative;
     min-width: 0;
     min-height: 0;
     background: #f6f8f3;
}
.empty-chat {
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     flex-direction: column;
}
.empty-symbol {
     width: 85px;
     height: 85px;
     display: grid;
     place-items: center;
     font-size: 48px;
     background: #e9efdf;
     color: #769657;
     border-radius: 28px;
     margin-bottom: 30px;
}
.empty-chat h2 {
     font-size: 30px;
     font-weight: 500;
     line-height: 1.4;
     letter-spacing: -1px;
     margin: 5px 0 18px;
}
#chat-content {
     height: 100%;
     display: flex;
     flex-direction: column;
}
.chat-header {
     height: 94px;
     flex-shrink: 0;
     border-bottom: 1px solid #e6ebe1;
     padding: 10px 10px;
     display: flex;
     gap: 14px;
     align-items: center;
     background: #fff;
}
.contact-heading {
     flex: 1;
     min-width: 0;
}
.contact-heading h2 {
     font-size: 15px;
     margin-bottom: 4px;
}
.contact-heading p {
     font-size: 11px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}
.history-heading {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 19px 32px 8px;
     color: #99a38f;
     font-size: 9px;
     letter-spacing: 1.5px;
}
.history-heading button {
     font-size: 11px;
     letter-spacing: 0;
     background: none;
     color: #668351;
}
.messages {
     flex: 1;
     min-height: 0;
     overflow: auto;
     display: flex;
     flex-direction: column;
     padding: 20px 5%;
     gap: 15px;
}
.bubble {
     align-self: flex-start;
     max-width: 76%;
     background: #fff;
     padding: 14px 17px;
     border: 1px solid #e9ede4;
     border-radius: 13px 13px 13px 3px;
     box-shadow: 0 2px 5px #203d2810;
}
.bubble.outgoing {
     align-self: flex-end;
     background: #e5edd6;
     border-color: #dee7cd;
     border-radius: 13px 13px 3px 13px;
}
.bubble p {
     font-size: 13px;
     line-height: 1.65;
     white-space: pre-wrap;
     overflow-wrap: anywhere;
}
.bubble small {
     display: block;
     font-size: 9px;
     color: #929f85;
     margin-top: 8px;
     text-align: right;
}
.composer {
     background: #fff;
     border: 1px solid #e0e6da;
     border-radius: 13px;
     margin: 10px 8px 8px;
     padding: 8px;
}
.composer textarea {
     border: 0;
     resize: none;
     font-size: 13px;
     background: transparent;
     outline-offset: 0;
}
.bubble:has(.message-reply) { position: relative; padding-right: 40px; }
.message-reply { position: absolute; top: 5px; right: 5px; border: 0; border-radius: 50%; background: transparent; color: #678252; font-size: 15px; padding: 3px 6px; line-height: 1.2; }
.message-reply:hover:not(:disabled), .message-reply:focus-visible { background: #e8efdf; }
.bubble:has(.message-reaction-picker) { padding-right: 70px; }
.message-reaction-picker { position: absolute; top: 5px; right: 33px; }
.message-react { border: 0; border-radius: 50%; background: transparent; color: #678252; font-size: 19px; padding: 1px 5px; line-height: 1.2; }
.message-react:hover:not(:disabled), .message-react:focus-visible { background: #e8efdf; }
.message-reaction-options { position: absolute; top: 30px; right: -28px; z-index: 25; display: flex; flex-wrap: wrap; width: min(265px, calc(100vw - 80px)); padding: 6px; background: #fff; border: 1px solid #dbe3d2; border-radius: 12px; box-shadow: 0 8px 28px #24351a26; }
.message-reaction-options[hidden] { display: none; }
.message-reaction-options button { border: 0; background: transparent; border-radius: 6px; font-size: 23px; padding: 5px; min-width: 34px; }
.message-reaction-options button:hover, .message-reaction-options button:focus-visible { background: #e8efdf; }
.reply-preview { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 8px 12px; border-left: 3px solid #78965d; border-radius: 6px; background: #edf3e7; }
.reply-preview[hidden] { display: none; }
.reply-preview > div { min-width: 0; }
.reply-preview strong { color: #557444; font-size: 12px; }
.reply-preview p { margin: 4px 0 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-preview button { border: 0; background: transparent; color: #557444; padding: 6px; }
.emoji-picker { position: relative; top:-35px; flex-shrink: 0; }
.emoji-picker > button { padding: 4px 8px; font-size: 25px; line-height: 1; background: transparent; color: #557444; border: 0; border-radius: 8px; }
.emoji-picker > button:hover:not(:disabled), .emoji-picker > button[aria-expanded="true"] { background: #e8efdf; }
.emoji-panel { position: absolute; bottom: calc(100% + 12px); left: 0; z-index: 20; width: min(296px, calc(100vw - 64px)); max-height: min(300px, 50vh); overflow-y: auto; padding: 12px; background: #fff; border: 1px solid #dbe3d2; border-radius: 12px; box-shadow: 0 8px 28px #24351a26; }
.emoji-panel[hidden] { display: none; }
.emoji-panel > strong { display: block; margin-bottom: 8px; font-size: 13px; color: #557444; }
.emoji-options { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.emoji-options button { border: 0; background: transparent; padding: 5px 0; border-radius: 6px; font-size: 23px; line-height: 1.25; }
.emoji-options button:hover, .emoji-options button:focus-visible { background: #e8efdf; }
.composer-bottom #composer-hint { flex: 1; margin: 0 8px; }
.composer-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 6px 5px;
}
.composer-bottom span {
     font-size: 10px;
     color: #9ba38f;
}
.composer .primary {
     padding: 10px 19px;
     font-size: 12px;
}
.notice {
     position: absolute;
     bottom: 5px;
     left: 15px;
     right: 15px;
     font-size: 11px;
     color: #a74331;
     text-align: center;
     background: #fff3df;
     border-radius: 5px;
}
.notice:empty {
     display: none;
}
.back {
     display: none;
}
.sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border: 0;
}
@media (min-width: 1500px) {
     main {
          grid-template-columns: 84px 350px minmax(0, 1fr);
     }
     .messages {
          padding-left: 10%;
          padding-right: 10%;
     }
}
@media (max-width: 850px) {
     main {
          grid-template-columns: 60px 280px minmax(0, 1fr);
     }
     .sidebar header {
          padding: 25px 20px;
     }
     .composer {
          margin: 10px 8px 8px;
     }
     .composer-bottom span {
          display: none;
     }
     .chat-header {
          padding: 10px 10px;
     }
     .chat-header .secondary {
          padding: 8px;
          font-size: 10px;
     }
     .bubble {
          max-width: 90%;
     }
}
@media (max-width: 650px) {
     .login {
          display: block;
     }
     .login-card {
          padding-top: 65px;
     }
     .login-art {
          display: none;
     }
     main {
          grid-template-columns: 54px 1fr;
     }
     .chat {
          display: none;
     }
     body.chat-open .sidebar {
          display: none;
     }
     body.chat-open .chat {
          display: block;
     }
     .back {
          display: block;
          background: none;
          color: #365c43;
          font-size: 20px;
     }
     .chat-header {
          height: 90px;
     }
     .sidebar header {
          padding-top: 30px;
     }
     .bubble {
          max-width: 88%;
     }
     .chat-header .avatar {
          display: none;
     }
     .messages {
          padding: 16px;
     }
     .history-heading {
          padding: 16px;
          font-size: 8px;
     }
}

.avatar {
     overflow: hidden;
     flex-shrink: 0;
}
.avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
}
.avatar {
     width: 41px;
}
.bubble audio {
     display: block;
     width: 290px;
     max-width: 100%;
     height: 44px;
     margin-top: 8px;
}
.bubble .audio-title {
     font-size: 11px;
     color: #647b54;
}
.bubble .audio-error {
     color: #a74331;
     font-size: 11px;
}
.audio-error:empty {
     display: none;
}
.attachment-tools {
     display: flex;
     align-items: center;
     gap: 6px;
     flex-wrap: wrap;
     padding: 5px 6px 8px;
     border-bottom: 1px solid #edf0e8;
}
.attachment-tools button {
     background: #f0f4ea;
     color: #466440;
     padding: 7px 10px;
     border-radius: 6px;
     font-size: 11px;
}
.attachment-tools span {
     margin-left: auto;
     font-size: 9px;
     color: #8d9c86;
}
.attachment-preview {
     display: flex;
     align-items: center;
     gap: 10px;
     margin: 9px;
     padding: 9px;
     background: #f3f6ed;
     border-radius: 8px;
}
.attachment-preview img {
     width: 52px;
     height: 52px;
     object-fit: cover;
     border-radius: 6px;
}
.attachment-preview span {
     font-size: 12px;
     overflow-wrap: anywhere;
     flex: 1;
}
.attachment-preview button {
     background: none;
     color: #718262;
}
.message-image {
     display: block;
     max-width: 100%;
     max-height: 280px;
     border-radius: 8px;
     margin-bottom: 8px;
}
.document-link {
     display: block;
     color: #315f42;
     font-size: 13px;
     margin-bottom: 8px;
     overflow-wrap: anywhere;
}
.history-import {
     padding: 12px 16px 0;
}
.history-import button {
     width: 100%;
     font-size: 11px;
}
.history-import p {
     font-size: 10px;
     line-height: 1.5;
     color: #73846b;
     margin-top: 8px;
     overflow-wrap: anywhere;
}
.history-import p:empty {
     display: none;
}
.message-sticker {
     display: block;
     width: 170px;
     height: 170px;
     max-width: 100%;
     object-fit: contain;
}
.bubble.sticker-bubble {
     background: transparent;
     border-color: transparent;
     box-shadow: none;
}
.sticker-error {
     font-size: 11px;
     color: #a74331;
}
.sticker-error:empty {
     display: none;
}
.quoted-message {
     margin: 0 0 10px;
     padding: 9px 12px;
     border-left: 3px solid #729750;
     background: #35543b0c;
     border-radius: 5px;
     max-width: 340px;
     overflow-wrap: anywhere;
}
.quoted-message strong {
     display: block;
     color: #577d3e;
     font-size: 10px;
     margin-bottom: 4px;
}
.bubble .quoted-message p {
     font-size: 12px;
     color: #65705d;
     white-space: pre-wrap;
     max-height: 110px;
     overflow: auto;
}
.bubble {
     position: relative;
}
.bubble.has-reactions {
     margin-bottom: 14px;
}
.message-reactions {
     position: absolute;
     bottom: -14px;
     left: 10px;
     display: flex;
     gap: 3px;
     margin: 0;
     padding: 2px 5px;
     border: 2px solid #f6f8f3;
     border-radius: 16px;
     background: #fff;
     box-shadow: 0 1px 3px #183b3520;
     z-index: 1;
     white-space: nowrap;
}
.bubble.outgoing .message-reactions {
     left: auto;
     right: 10px;
}
.message-reactions span {
     font-size: 15px;
     line-height: 21px;
     padding: 0 2px;
}
.bubble .message-emoji {
     font-size: 18px;
     line-height: 1;
     vertical-align: baseline;
}
select {
     font: inherit;
     color: #315441;
     border: 1px solid #dce4df;
     border-radius: 7px;
     padding: 8px;
     background: #fff;
     max-width: 100%;
}
.assignment-filter {
     display: grid;
     gap: 6px;
     padding: 12px 22px;
     font-size: 11px;
     color: #7c8b73;
}
.assignment-filter select {
     width: 100%;
     font-size: 12px;
}
.assignee-tag {
     display: block;
     margin-top: 6px;
     font-size: 10px;
     color: #537341;
}
.assignee-tag.unassigned {
     color: #9a8055;
}
.assignment-bar {
     display: flex;
     align-items: center;
     gap: 9px;
     padding: 9px 25px;
     background: #fff;
     border-bottom: 1px solid #e6ebe1;
     font-size: 11px;
}
.assignment-bar span {
     margin-right: auto;
}
.assignment-bar select {
     max-width: 180px;
     font-size: 11px;
}
.assignment-bar button {
     padding: 8px 12px;
}
.message-author {
     display: block;
     font-size: 12px;
     color: #52783c;
     margin-bottom: 7px;
}
.bubble.outgoing .message-author {
     color: #36593d;
}
.agent-dialog {
     border: 1px solid #dce4df;
     border-radius: 16px;
     padding: 28px;
     width: min(430px, 90vw);
     color: #183b35;
}
.agent-dialog::backdrop {
     background: #163e3266;
}
.agent-dialog h2 {
     font-size: 21px;
     margin-bottom: 10px;
}
.agent-dialog label {
     display: grid;
     gap: 6px;
     font-size: 12px;
     margin-top: 16px;
}
.dialog-actions {
     display: flex;
     justify-content: flex-end;
     gap: 10px;
     margin-top: 22px;
}
#manage-agents {
     margin-top: 9px;
     font-size: 11px;
     padding: 7px 10px;
}
@media (max-width: 650px) {
     .assignment-bar {
          padding: 9px 12px;
          flex-wrap: wrap;
     }
     .assignment-bar span {
          width: 100%;
     }
     .assignment-bar select {
          flex: 1;
          max-width: none;
     }
}
.chat-header {
     height: auto;
     min-height: 94px;
     flex-wrap: wrap;
}
.contact-heading {
     min-width: 120px;
}
.contact-heading #assigned-agent {
     margin-top: 3px;
     color: #6c805c;
}
.header-actions {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 12px;
     flex-wrap: wrap;
     margin-left: auto;
     max-width: 100%;
}
.chat-header .assignment-bar {
     padding: 0;
     border: 0;
     background: transparent;
     gap: 8px;
     flex-wrap: wrap;
}
.chat-header .assignment-bar span {
     width: auto;
     margin: 0;
     color: #6c805c;
}
.chat-header .assignment-bar select {
     width: 140px;
     max-width: 100%;
     flex: none;
}
.header-actions > #resolve {
     white-space: nowrap;
}
@media (max-width: 850px) {
     .header-actions {
          gap: 10px;
     }
     .chat-header {
          row-gap: 12px;
     }
     .chat-header .assignment-bar {
          justify-content: flex-end;
     }
}
.brand-mark {
     background: transparent;
}
.brand-mark img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: contain;
}
.whatsapp-menu {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 7px;
}
.whatsapp-menu span {
     font-size: 9px;
     color: white;
}
.rail-icon.whatsapp-online {
     color: #d6ed8c;
}
.whatsapp-dialog {
     text-align: center;
}
.whatsapp-dialog h2 {
     margin-bottom: 8px;
}
.whatsapp-dialog .muted {
     margin-bottom: 12px;
}
.whatsapp-dialog #whatsapp-feedback {
     font-size: 12px;
     margin: 14px 0;
     line-height: 1.6;
}
.whatsapp-dialog #whatsapp-qr {
     display: block;
     width: 270px;
     max-width: 100%;
     height: auto;
     margin: 12px auto;
     background: white;
     padding: 10px;
     border-radius: 8px;
}
.login-card .brand-mark {
     width: 240px;
     height: auto;
     max-width: 100%;
     border-radius: 0;
     margin-bottom: 28px;
}
.login-card .brand-mark img {
     width: 100%;
     height: auto;
}
#whatsapp-connect {
     color: white;
     display: grid;
     place-items: center;
     width: 48px;
     height: 48px;
     padding: 11px;
     border: 1px solid #ffffff18;
     border-radius: 13px;
}
.connection-icon {
     display: block;
     width: 26px;
     height: 26px;
}
.bubble .edit-warning {
     font-size: 10px;
     color: #8b744a;
     margin-top: 7px;
     line-height: 1.4;
     max-width: 320px;
}
.note-controls {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     margin-bottom: 10px;
}
.note-controls label {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 13px;
}
.note-controls select {
     max-width: 240px;
     padding: 6px;
     border: 1px solid #d6dce5;
     border-radius: 6px;
     background: white;
}
.bubble.internal-note {
     background: #fff3cd;
     border: 1px solid #e6cd75;
     align-self: center;
     color: #584510;
}
.note-visibility {
     font-size: 12px;
     font-weight: 600;
     margin-bottom: 6px;
}
.note-controls [hidden] {
     display: none;
}
.messages .bubble.internal-note {
     background: #fff3cd;
     border-color: #e6cd75;
     align-self: center;
     color: #584510;
}
.attachment-tools[hidden] {
     display: none;
}
.message-day-separator {
     display: flex;
     align-items: center;
     gap: 12px;
     align-self: stretch;
     margin: 12px 0;
     flex-shrink: 0;
     color: #68775e;
     font-size: 12px;
}
.message-day-separator::before,
.message-day-separator::after {
     content: "";
     height: 1px;
     background: #dce3d5;
     flex: 1;
}
.message-day-separator span {
     padding: 6px 12px;
     background: #edf1e7;
     border-radius: 12px;
     white-space: nowrap;
}
.note-controls[hidden],
.header-actions[hidden],
#internal-start[hidden],
.assignment-filter[hidden] {
     display: none;
}
#internal-start {
     gap: 8px;
}
#internal-start button {
     margin-top: 6px;
}
/* Onda vertical na divis�o da tela de login. */
@media (min-width: 651px) {
     .login-art {
          padding-left: calc(12% + 40px);
          align-self: stretch;
          min-height: 100dvh;
     }
     .login-art::before {
          content: "";
          position: absolute;
          inset: 0 auto 0 -1px;
          width: clamp(45px, 7vw, 110px);
          background: #f7f9f7;
          transform: scaleX(-1);
          -webkit-mask: url("/assets/wave-background.svg") center/100% 100%
               no-repeat;
          mask: url("/assets/wave-background.svg") center/100% 100% no-repeat;
          pointer-events: none;
          z-index: 2;
     }
}

.font-banner,
.login-art h2.font-banner {
     font-family: Sigmar, sans-serif;
     font-weight: 400;
     font-style: normal;
}

.login-art p.font-banner {
     font-size: 16px;
     line-height: 1.6;
}

/* Painel do formulario de login. */
.login-card {
     background: #fff;
     border: 1px solid #e5ebe5;
     border-radius: 22px;
     padding: 36px 30px;
     box-shadow: 2px 2px 7px -3px #000000bf
}
@media (max-width: 650px) {
     .login-card {
          margin: 32px auto;
          padding: 28px 22px;
          border-radius: 18px;
     }
}

.login {
     background: #fff;
}
.login-art::before {
     background: #fff;
}

.login-card h1.font-banner {
     font-size: 25px;
}

.history-start-badge {
     align-self: center;
     display: inline-block;
     margin: 8px 0;
     padding: 6px 12px;
     border: 1px solid #dce5d3;
     border-radius: 999px;
     background: #edf1e7;
     color: #68775e;
     font-size: 11px;
     font-weight: 500;
     text-align: center;
}

/* Fixed row height for the virtual conversation list. */
.conversation-list {
     overflow-anchor: none;
}
.conversation-list .conversation {
     height: 116px;
     min-height: 116px;
     overflow: hidden;
}

/* Keep select arrows inset, including compact controls. */
select,
.note-controls select {
     appearance: none;
     padding-right: 36px;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c805c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 12px center;
     background-size: 16px;
}
.agent-dialog {
     border: 0;
     border-radius: 20px;
     box-shadow: 0 12px 36px rgba(24, 59, 53, 0.12);
}
@supports (appearance: base-select) {
     select,
     select::picker(select) {
          appearance: base-select;
     }
     select::picker-icon {
          display: none;
     }
     select::picker(select) {
          border: 0;
          border-radius: 12px;
          box-shadow: 0 8px 24px rgba(24, 59, 53, 0.1);
          padding: 4px;
          background: #fff;
          color: #315441;
     }
     select option {
          padding: 8px 12px;
          border-radius: 8px;
     }
     select option:hover,
     select option:focus {
          background: #f0f5e9;
     }
}
/* Customer context next to the message history. */
.chat.has-contact-panel {
     display: grid;
     grid-template-columns: minmax(0, 1fr) 300px;
     grid-template-rows: minmax(0, 1fr);
}
.has-contact-panel #chat-content {
     min-width: 0;
     min-height: 0;
}
.contact-panel {
     min-width: 0;
     min-height: 0;
     overflow: auto;
     border-left: 1px solid #e5eae5;
     background: #fff;
     padding: 22px 18px;
     color: #183b35;
}
.contact-panel-heading {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
     margin-bottom: 22px;
}
.contact-panel h2 {
     font-size: 16px;
}
.contact-panel-heading button {
     padding: 7px 9px;
     font-size: 11px;
}
.contact-panel-section + .contact-panel-section {
     margin-top: 24px;
     padding-top: 20px;
     border-top: 1px solid #edf0eb;
}
.contact-panel h3 {
     font-size: 13px;
     margin: 0 0 14px;
}
.contact-panel h4 {
     font-size: 12px;
     margin: 0 0 10px;
     color: #315744;
}
.contact-panel dl {
     margin: 0;
}
.panel-field {
     margin-bottom: 6px;
     overflow-wrap: anywhere;
}
.panel-field dt {
     font-size: 10px;
     color: #7b8b84;
     margin-bottom: 4px;
}
.panel-field dd {
     font-size: 12px;
     line-height: 1.5;
     margin: 0;
}
.panel-message {
     font-size: 12px;
     line-height: 1.6;
     color: #7b8b84;
     overflow-wrap: anywhere;
}
.service-order {
     padding: 14px;
     background: #f6f8f5;
     border: 1px solid #edf0eb;
     border-radius: 12px;
}
.service-order + .service-order {
     margin-top: 12px;
}
.service-order .panel-field:last-child {
     margin-bottom: 0;
}
@media (max-width: 1150px) {
     .chat.has-contact-panel {
          grid-template-columns: minmax(0, 1fr);
          grid-template-rows: minmax(0, 1fr) auto;
     }
     .contact-panel {
          max-height: 30dvh;
          border-left: 0;
          border-top: 1px solid #e5eae5;
     }
}
@media (max-width: 650px) {
     .chat.has-contact-panel {
          display: none;
     }
     body.chat-open .chat.has-contact-panel {
          display: grid;
     }
     .contact-panel {
          padding: 16px;
          max-height: 30dvh;
     }
}
#customer-info .panel-field dd {
     font-weight: 700;
}

.stage-badge {
     display: inline-block;
     max-width: 100%;
     padding: 4px 10px;
     border-radius: 999px;
     background: #e8eddf;
     color: #315441;
     font-size: 11px;
     font-weight: 700;
     line-height: 1.5;
     overflow-wrap: anywhere;
}

.contact-panel .service-order h4 {
     font-size: 15px;
}

.service-order dl {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     column-gap: 12px;
}
.service-order .panel-field {
     grid-column: 1 / -1;
     min-width: 0;
}
.service-order .order-date-field {
     grid-column: auto;
}

.unread-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 22px;
     height: 22px;
     padding: 0 6px;
     border-radius: 12px;
     background: #218739;
     color: #fff;
     font-size: 11px;
     font-weight: 700;
     flex-shrink: 0;
}
.conversation-top:has(.unread-badge) time {
     margin-left: auto;
}
.ai-agent-settings {
     padding: 0 20px 12px;
}
.ai-agent-dialog {
     width: min(600px, calc(100vw - 24px));
     max-height: 90vh;
     overflow-y: auto;
}
.ai-agent-dialog textarea {
     width: 100%;
     box-sizing: border-box;
     resize: vertical;
     font: inherit;
     padding: 10px;
     border: 1px solid #dce3d5;
     border-radius: 6px;
}
.ai-agent-file-list {
     list-style: none;
     padding: 0;
}
.ai-agent-file-list li {
     display: flex;
     gap: 12px;
     align-items: center;
     justify-content: space-between;
     margin: 8px 0;
     font-size: 12px;
     overflow-wrap: anywhere;
}
.ai-agent-file-list a,
.ai-agent-file-list span {
     min-width: 0;
}

.rail-bottom {
     margin-top: auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 24px;
}
#manage-ai-agent {
     color: white;
     display: grid;
     place-items: center;
     width: 48px;
     height: 48px;
     padding: 11px;
     border: 1px solid #ffffff18;
     border-radius: 13px;
}
.ai-agent-dropzone {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     width: 100%;
     margin: 14px 0 8px;
     padding: 24px 16px;
     border: 2px dashed #a5b99c;
     border-radius: 10px;
     background: #f6f9f2;
     color: #315744;
     text-align: center;
}
.ai-agent-dropzone span {
     font-size: 12px;
}
.ai-agent-dropzone:hover,
.ai-agent-dropzone.dragging {
     background: #eaf2de;
     border-color: #567d43;
}
.ai-agent-dropzone:disabled {
     cursor: default;
}
.message-image-button {
     display: block;
     padding: 0;
     background: transparent;
     border-radius: 8px;
     cursor: default;
     max-width: 100%;
}
.image-viewer {
     width: 96vw;
     height: 94dvh;
     max-width: 96vw;
     max-height: 94dvh;
     padding: 48px 16px 16px;
     border: 0;
     border-radius: 12px;
     background: #fff;
     color: #183b35;
     overflow: hidden;
}
.image-viewer::backdrop {
     background: #000b;
}
.image-viewer[open] {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}
.image-viewer img {
     display: block;
     width: 100%;
     height: 100%;
     min-height: 0;
     object-fit: contain;
}
.image-viewer button {
     position: absolute;
     top: 8px;
     right: 12px;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: #edf2ee;
     color: #183b35;
     font-size: 20px;
}
.image-viewer p {
     font-size: 13px;
     text-align: center;
}
.image-viewer p:empty {
     display: none;
}
.ai-agent-dialog .ai-enable-label {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     margin-top: 16px;
     padding: 14px 16px;
     border: 1px solid #dce4df;
     border-radius: 12px;
     background: #f7f9f7;
     cursor: pointer;
     transition:
          background 0.18s,
          border-color 0.18s;
}
.ai-enable-label span {
     font-size: 13px;
     font-weight: 600;
     color: #183b35;
}
.ai-agent-dialog .ai-enable-label input {
     appearance: none;
     position: relative;
     flex: 0 0 46px;
     width: 46px;
     height: 26px;
     min-height: 26px;
     margin: 0;
     padding: 0;
     border: 1px solid #c1cdc6;
     border-radius: 999px;
     background: #d6dfd9;
     cursor: pointer;
     transition:
          background 0.18s,
          border-color 0.18s;
}
.ai-enable-label input::before {
     content: "";
     position: absolute;
     top: 3px;
     left: 3px;
     width: 18px;
     height: 18px;
     border-radius: 50%;
     background: #fff;
     box-shadow: 0 1px 4px #183b3530;
     transition: transform 0.18s;
}
.ai-agent-dialog .ai-enable-label input:checked {
     background: #218739;
     border-color: #218739;
}
.ai-enable-label input:checked::before {
     transform: translateX(20px);
}
.ai-enable-label:has(input:checked) {
     background: #eef7ee;
     border-color: #a6cda9;
}
.ai-enable-label input:focus-visible {
     outline: 3px solid #b1cf62;
     outline-offset: 4px;
}
.ai-enable-label input:disabled {
     opacity: 0.45;
     cursor: not-allowed;
}
.ai-enable-label:has(input:disabled) {
     cursor: not-allowed;
     opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
     .ai-agent-dialog .ai-enable-label,
     .ai-agent-dialog .ai-enable-label input,
     .ai-enable-label input::before {
          transition: none;
     }
}
.agent-manager-dialog {
     width: min(720px, calc(100vw - 24px));
     max-height: 90dvh;
     overflow: auto;
}
.agent-list-heading {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     margin-bottom: 12px;
}
.agent-list-heading .primary {
     font-size: 12px;
     padding: 10px 14px;
}
.agent-table-scroll {
     overflow-x: auto;
     margin-top: 18px;
}
.agent-table {
     width: 100%;
     border-collapse: collapse;
     text-align: left;
     font-size: 12px;
}
.agent-table th,
.agent-table td {
     padding: 12px 8px;
     border-bottom: 1px solid #e5eae5;
     vertical-align: middle;
}
.agent-table th {
     color: #7b8b84;
     font-weight: 500;
}
.agent-table td small {
     display: block;
     color: #7b8b84;
     margin-top: 4px;
}
.agent-table-actions {
     display: flex;
     gap: 6px;
}
.agent-action {
     display: grid;
     place-items: center;
     width: 34px;
     height: 34px;
     padding: 7px;
     border: 1px solid #dbe4df;
     border-radius: 7px;
     background: #fff;
     color: #315744;
}
.agent-action svg {
     width: 18px;
     height: 18px;
}
.agent-action:hover {
     background: #edf3e8;
}
.agent-state {
     display: inline-block;
     padding: 4px 8px;
     border-radius: 20px;
     background: #eaf2df;
     color: #39663a;
     white-space: nowrap;
}
.agent-state.inactive {
     background: #f0f0f0;
     color: #727b76;
}
.ai-agent-dialog {
     width: min(1040px, calc(100vw - 32px));
     max-height: 94dvh;
     padding: 24px;
}
.ai-agent-columns {
     display: grid;
     grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
     gap: 28px;
     margin-top: 14px;
}
.ai-agent-columns section {
     min-width: 0;
}
.ai-agent-columns label {
     margin-top: 12px;
}
.ai-agent-columns section > label:first-child {
     margin-top: 0;
}
.ai-agent-columns .muted {
     font-size: 11px;
     line-height: 1.5;
     margin-top: 6px;
}
.ai-agent-connection #ai-load-models {
     margin-top: 12px;
}
.ai-agent-instructions {
     border-left: 1px solid #e5eae5;
     padding-left: 28px;
}
.ai-agent-instructions .ai-agent-dropzone {
     padding: 16px 12px;
     margin-top: 12px;
}
.ai-agent-instructions .ai-agent-file-list {
     margin: 8px 0;
     max-height: 148px;
     overflow-y: auto;
}
.ai-agent-dialog .dialog-actions {
     margin-top: 16px;
     padding-top: 14px;
     border-top: 1px solid #e5eae5;
}
@media (max-width: 740px) {
     .ai-agent-dialog {
          width: calc(100vw - 24px);
          padding: 20px;
     }
     .ai-agent-columns {
          grid-template-columns: minmax(0, 1fr);
          gap: 20px;
     }
     .ai-agent-instructions {
          border-left: 0;
          border-top: 1px solid #e5eae5;
          padding-left: 0;
          padding-top: 20px;
     }
}
.ai-agent-dialog input:not([type="checkbox"]):not([type="file"]),
.ai-agent-dialog select {
     width: 100%;
     padding: 10px 14px;
     border: 1px solid #dce4df;
     border-radius: 9px;
     font: inherit;
     color: #183b35;
     background-color: #fff;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(
          [type="hidden"]
     ),
select {
     height: 42px;
     min-height: 42px;
     box-sizing: border-box;
}
select:not([multiple]) {
     display: inline-flex;
     align-items: center;
     line-height: 1.2;
     padding-block: 0;
     padding-inline: 14px 36px;
}
.service-order .order-value-field dd {
     font-weight: 700;
}
.chat-header #transfer,
.chat-header #resolve {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     height: 42px;
     padding: 0 14px;
     line-height: 1.2;
     white-space: nowrap;
}
.transfer-icon {
     width: 16px;
     height: 16px;
     flex-shrink: 0;
}
.chat-header #transfer span {
     margin: 0;
     width: auto;
}
#manage-agents {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
}
.manage-agents-icon {
     width: 16px;
     height: 16px;
     flex-shrink: 0;
}
.document-card {
     display: flex;
     align-items: center;
     gap: 12px;
     min-width: 200px;
     max-width: 100%;
     padding: 12px;
     border: 1px solid #dce4df;
     border-radius: 10px;
     background: #f7f9f6;
     color: #183b35;
     text-decoration: none;
     margin-bottom: 8px;
}
.document-card:hover {
     background: #edf3e9;
}
.document-card[aria-busy="true"] {
     opacity: 0.65;
     cursor: progress;
}
.document-file-icon {
     display: grid;
     place-items: center;
     flex-shrink: 0;
     width: 44px;
     height: 50px;
     border-radius: 8px;
     background: #edf0ed;
     color: #697b73;
}
.document-file-icon svg {
     width: 32px;
     height: 38px;
}
.file-pdf {
     color: #cb3434;
     background: #fdecec;
}
.file-excel {
     color: #21804c;
     background: #e8f5ec;
}
.file-word {
     color: #2865b4;
     background: #eaf1fc;
}
.file-slides {
     color: #bc6229;
     background: #fff0e5;
}
.file-archive {
     color: #9b7a1b;
     background: #fbf5de;
}
.file-media {
     color: #7954a5;
     background: #f1eafa;
}
.document-file-info {
     min-width: 0;
     flex: 1;
}
.document-file-info strong {
     display: block;
     font-size: 12px;
     overflow-wrap: anywhere;
     line-height: 1.5;
}
.document-file-info small {
     display: block;
     margin-top: 3px;
     font-size: 10px;
     color: #7b8b84;
     text-align: left;
}
.document-download-icon {
     font-size: 24px;
     color: #52783c;
     flex-shrink: 0;
}
.service-order-heading {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
     margin-bottom: 10px;
}
.service-order .service-order-heading h4 {
     margin: 0;
}
.order-send-pdf {
     display: grid;
     place-items: center;
     width: 30px;
     height: 30px;
     padding: 6px;
     border: 1px solid #dce4df;
     border-radius: 7px;
     background: #fff;
     color: #315744;
     flex-shrink: 0;
}
.order-send-pdf svg {
     width: 17px;
     height: 17px;
}
.order-send-pdf:hover:not(:disabled) {
     background: #eaf2df;
     border-color: #a5b99c;
}
.quick-reply-picker {
     display: flex;
     align-items: center;
     gap: 6px;
     margin: 0;
     min-width: 0;
     max-width: 100%;
     font-size: 11px;
     color: #466440;
}
.attachment-limit {
     padding: 0 6px 0px;
     font-size: 9px;
     color: #8d9c86;
}
.quick-reply-picker select {
     min-width: 0;
     width: 220px;
     max-width: 100%;
     min-height: 29px;
     height: 29px;
     padding: 6px 10px;
     border: 0;
     border-radius: 6px;
     background: #f0f4ea;
     color: #466440;
     font: inherit;
}
@media (max-width: 650px) {
     .quick-reply-picker {
          flex: 1 1 100%;
     }
     .quick-reply-picker select {
          flex: 1;
          width: auto;
     }
}
.management-actions {
     display: flex;
     flex-wrap: wrap;
     align-items: stretch;
     gap: 8px;
     margin-top: 9px;
}
.sidebar {
     min-width: 0;
}
.sidebar-logo {
     display: block;
     width: 160px;
     max-width: 100%;
     height: auto;
     margin-bottom: 16px;
}
.sidebar header {
     padding-top: 10px;
     padding-bottom: 10px;
     padding-left: 16px;
     padding-right: 16px;
     margin-bottom: 1px;
}
.sidebar .filters {
     padding-left: 12px;
     padding-right: 12px;
     gap: 4px;
}
.sidebar .filters button {
     padding: 8px;
     font-size: 11px;
     white-space: nowrap;
}
.sidebar .management-actions {
     flex-wrap: nowrap;
     gap: 6px;
}
.sidebar .management-actions button {
     white-space: nowrap;
}
.sidebar h1 {
     font-size: 16px;
     margin-bottom: 2px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}
.management-actions #manage-agents,
.management-actions #manage-quick-replies {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     margin: 0;
     padding: 7px 10px;
     min-height: 34px;
     font-size: 11px;
}
#quick-reply-dialog {
     max-height: 90vh;
     overflow-y: auto;
}
#quick-reply-list .quick-reply-text {
     white-space: pre-wrap;
     overflow-wrap: anywhere;
     max-width: 460px;
}
#quick-reply-dialog textarea {
     width: 100%;
     box-sizing: border-box;
     resize: vertical;
     font: inherit;
     padding: 10px;
     border: 1px solid #dce3d5;
     border-radius: 6px;
}
.transfer-toasts {
     position: fixed;
     top: 20px;
     right: 20px;
     z-index: 1000;
     display: grid;
     gap: 12px;
     width: min(360px, calc(100vw - 32px));
     pointer-events: none;
}
.transfer-toast {
     padding: 18px;
     border: 1px solid #b7d8c9;
     border-left: 4px solid #218739;
     border-radius: 12px;
     background: #fff;
     color: #18382b;
     box-shadow: 0 8px 30px #0002;
     pointer-events: auto;
}
.transfer-toast p {
     margin: 8px 0 12px;
     overflow-wrap: anywhere;
}

#ai-control[hidden] { display: none; }
#ai-control-status { font-size: 12px; margin: 6px 0 0; }