/* ============================================================================
   LEMON UI — camada global de acabamento
   ----------------------------------------------------------------------------
   Dois assuntos vivem aqui, e os dois precisam valer em TODAS as telas:

   1) MODAIS. Cada pagina nasceu com sua propria familia de modal (.modal-box do
      chat, .modal-content do bootstrap, .users-modal, .sl-modal, .jt-modal...).
      Em vez de reescrever 40 arquivos, este bloco padroniza o acabamento
      (raio, sombra, respiro, borda) de todas elas.

   2) CAMPOS DE DATA/HORA. O calendario bonito do dashboard virou componente
      (assets/js/lemon-datepicker.js). Os estilos do popover e do campo
      "preparado" ficam na segunda metade do arquivo.

   ORDEM DE CARGA: este arquivo entra no head.php, mas chat.css / funil.css /
   jornadas.css e os <style> inline das paginas carregam DEPOIS. Por isso quase
   todo seletor daqui e' prefixado com `body` — ganha por especificidade e nao
   por ordem. Onde a pagina usa seletor com id (ex.: #qrMgmtCreateModal .modal-box)
   ela continua vencendo, o que e' proposital: ali o ajuste foi intencional.
   ============================================================================ */

:root {
    /* Vocabulario unico de acabamento. As paginas continuam com suas proprias
       variaveis de cor; aqui so entram forma e profundidade. */
    --lm-radius-modal: 24px;
    --lm-radius-block: 16px;
    --lm-radius-field: 12px;
    --lm-radius-pill: 999px;
    --lm-hairline: #f1f5f9;
    --lm-modal-border: 1px solid rgba(15, 23, 42, .06);
    --lm-modal-shadow: 0 32px 64px -16px rgba(15, 23, 42, .28), 0 8px 20px -8px rgba(15, 23, 42, .10);
    --lm-field-border: #e2e8f0;
    --lm-muted: #94a3b8;
}

/* ════════════════════════════════════════════════════════════════════════════
   1. CARTAO DO MODAL
   Lista explicita (e nao [class*="modal"]) para nao acertar overlay, backdrop
   e botao de fechar, que tambem carregam "modal" no nome.
   ════════════════════════════════════════════════════════════════════════════ */
body .modal-box,
body .modal-content,
body .lead-editor-modal,
body .person-editor-modal,
body .users-modal,
body .empresas-modal,
body .notification-modal,
body .q-view-modal,
body .mai-modal,
body .sl-modal,
body .jt-modal,
body .tpl-modal,
body .api-modal,
body .cs-pwd-modal,
body .pub-modal,
body .copy-modal,
body .lead-modal,
body .funnel-modal,
body .je-modal,
body .user-modal,
body .channel-modal,
body .contact-modal,
body .tag-modal,
body .import-modal {
    border-radius: var(--lm-radius-modal);
    border: var(--lm-modal-border);
    box-shadow: var(--lm-modal-shadow);
    overflow: hidden;
}

/* A familia .modal do chat (cartao posicionado no centro da tela) recebe o mesmo
   raio. Em modal do bootstrap a classe .modal e' o CONTAINER de tela cheia e o
   raio nao aparece — nao incomoda. */
body .modal {
    border-radius: var(--lm-radius-modal);
    /* Modal do bootstrap e' todo controlado por variavel: mexer nelas moderniza
       o padrao sem passar por cima das telas que ajustaram as propriedades. */
    --bs-modal-border-radius: var(--lm-radius-modal);
    --bs-modal-inner-border-radius: 22px;
    --bs-modal-border-width: 0;
    --bs-modal-header-border-width: 0;
    --bs-modal-footer-border-color: var(--lm-hairline);
    --bs-modal-footer-gap: 0;
    --bs-modal-box-shadow: var(--lm-modal-shadow);
}

/* ── Cabecalho ──────────────────────────────────────────────────────────────
   Sai o gradiente e sai o filete colorido do ::after (aquele risco solto que
   aparecia embaixo do subtitulo). Fundo limpo e mais respiro. */
body .modal-head,
body .modal-header {
    background: transparent;
    border-bottom: 0;
    padding: 24px 26px 10px;
}
body .modal-head::after,
body .modal-header::after {
    content: none;
}
body .modal-head h3,
body .modal-header h3,
body .modal-header .modal-title {
    font-size: 17.5px;
    font-weight: 700;
    letter-spacing: -.25px;
}
body .modal-subtitle {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--lm-muted);
}

/* Botao de fechar: circulo neutro em vez de quadrado vermelho no hover. */
body .modal-x,
body .modal-close:not(.btn-close) {
    width: 34px;
    height: 34px;
    border-radius: var(--lm-radius-pill);
    background: transparent;
    color: var(--lm-muted);
    opacity: 1;
}
body .modal-x:hover,
body .modal-close:not(.btn-close):hover {
    background: #f1f5f9;
    color: #334155;
}

/* ── Corpo ── */
body .modal-box > .modal-body,
body .modal-content > .modal-body,
body .modal > .modal-body {
    padding: 6px 26px 20px;
}

/* ── Rodape ──────────────────────────────────────────────────────────────────
   Filete de 1px so aqui: e' o unico ponto onde a separacao ainda ajuda
   (acoes destacadas do conteudo que rola). */
body .modal-foot,
body .modal-footer {
    background: transparent;
    border-top: 1px solid var(--lm-hairline);
    padding: 14px 26px 20px;
    gap: 10px;
}
body .modal-foot button,
body .modal-foot .btn,
body .modal-footer .btn {
    border-radius: var(--lm-radius-field);
    padding: 11px 22px;
    font-weight: 600;
}

/* ── Campos dentro do modal ──────────────────────────────────────────────────
   textarea nunca tinha entrado na regra do .modal-form-group: ficava com a
   borda cinza padrao do navegador (era o campo "Mensagem" do agendamento). */
body .modal-form-group input,
body .modal-form-group select,
body .modal-form-group textarea {
    border-radius: var(--lm-radius-field);
}
body .modal-form-group textarea {
    width: 100%;
    border: 1.5px solid var(--lm-field-border);
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.55;
    color: var(--text-dark, #1e293b);
    background: #fff;
    outline: none;
    resize: vertical;
    min-height: 96px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
body .modal-form-group textarea::placeholder {
    color: var(--lm-muted);
}
body .modal-form-group textarea:focus {
    border-color: var(--primary, #afbf28);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #afbf28) 16%, transparent);
}

/* Blocos e chips internos acompanham o raio do cartao. */
body .modal-hint-box,
body .modal-body .sched-warn,
body .modal-body .sched-row {
    border-radius: var(--lm-radius-block);
}
body .sched-quick button {
    padding: 6px 12px;
    font-size: 12px;
}
body .sched-list-block {
    border-top: 1px solid var(--lm-hairline);
}

@media (max-width: 640px) {
    body .modal-box,
    body .modal-content {
        border-radius: 20px;
    }
    body .modal-head,
    body .modal-header {
        padding: 20px 18px 8px;
    }
    body .modal-box > .modal-body,
    body .modal-content > .modal-body,
    body .modal > .modal-body {
        padding: 6px 18px 16px;
    }
    body .modal-foot,
    body .modal-footer {
        padding: 12px 18px 16px;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   2. CAMPOS DE DATA/HORA + POPOVER DO CALENDARIO
   O visual e' o mesmo do periodo "Personalizado" do dashboard (.dash-calendar):
   cartao branco arredondado, dias em pilula, mes em minuscula.
   As cores saem de --primary da pagina, entao cada tela usa a propria marca.
   ════════════════════════════════════════════════════════════════════════════ */

/* Campo preparado pelo JS. O indicador nativo sai de cena (e com ele o
   calendario feio do navegador) e entra um icone proprio. Os !important
   existem porque varias telas declaram `background: #fff` no :focus com
   especificidade maior — sem eles o icone desaparece ao focar. */
body input.lemon-dp-ready {
    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='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='4'/%3E%3Cpath d='M16 3v4M8 3v4M4 11h16'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 11px center !important;
    padding-right: 36px !important;
    cursor: pointer;
}
body input.lemon-dp-ready[data-lemon-dp="time"] {
    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='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") !important;
}
/* Aberto: mesmo icone, traco mais escuro. Precisa repetir a variante de hora,
   senao o campo de hora troca o relogio pelo calendario ao abrir. */
body input.lemon-dp-ready.lemon-dp-open {
    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='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='4'/%3E%3Cpath d='M16 3v4M8 3v4M4 11h16'/%3E%3C/svg%3E") !important;
}
body input.lemon-dp-ready.lemon-dp-open[data-lemon-dp="time"] {
    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='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") !important;
}
body input.lemon-dp-ready::-webkit-calendar-picker-indicator {
    display: none !important;
    -webkit-appearance: none;
    appearance: none;
}
body input.lemon-dp-ready::-webkit-inner-spin-button,
body input.lemon-dp-ready::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
    appearance: none;
}

/* ── Popover ── */
.lemon-dp {
    position: fixed;
    z-index: 2000000;
    width: 306px;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    padding: 14px;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: var(--lm-radius-block);
    box-shadow: 0 24px 56px -12px rgba(15, 23, 42, .26), 0 6px 16px -8px rgba(15, 23, 42, .10);
    font-family: inherit;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .14s ease, transform .16s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}
.lemon-dp.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.lemon-dp.drop-up {
    transform: translateY(6px);
}
.lemon-dp.drop-up.is-open {
    transform: translateY(0);
}
.lemon-dp * {
    box-sizing: border-box;
}

/* datetime-local: calendario e hora lado a lado. Empilhados o popover passava
   de 500px de altura e nao cabia embaixo de um campo no meio do modal. */
.lemon-dp.with-time {
    width: 462px;
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-areas: "cal time" "foot foot";
    column-gap: 14px;
}
.lemon-dp.with-time .lemon-dp-cal { grid-area: cal; }
.lemon-dp.with-time .lemon-dp-time {
    grid-area: time;
    margin-top: 0;
    padding-top: 0;
    padding-left: 14px;
    border-top: 0;
    border-left: 1px solid var(--lm-hairline);
}
.lemon-dp.with-time .lemon-dp-foot { grid-area: foot; }
.lemon-dp.with-time .lemon-dp-col { max-height: 232px; }
.lemon-dp.only-time { width: 208px; }
.lemon-dp.only-time .lemon-dp-col { max-height: 208px; }

@media (max-width: 560px) {
    /* Tela estreita: volta ao empilhado, que cabe na largura. */
    .lemon-dp.with-time {
        width: 306px;
        display: block;
    }
    .lemon-dp.with-time .lemon-dp-time {
        margin-top: 12px;
        padding-top: 12px;
        padding-left: 0;
        border-top: 1px solid var(--lm-hairline);
        border-left: 0;
    }
    .lemon-dp.with-time .lemon-dp-col { max-height: 148px; }
}

.lemon-dp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 10px;
}
.lemon-dp-title {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    color: var(--dark, #1e293b);
    text-transform: capitalize;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 10px;
    transition: background .15s;
}
.lemon-dp-title:hover {
    background: #f1f5f9;
}
.lemon-dp-nav {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 0;
    border-radius: var(--lm-radius-pill);
    background: #f8fafc;
    color: #64748b;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.lemon-dp-nav:hover {
    background: #f1f5f9;
    color: #334155;
}

.lemon-dp-weekdays,
.lemon-dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.lemon-dp-weekdays span {
    text-align: center;
    font-size: 10px;
    color: var(--lm-muted);
    padding-bottom: 4px;
    text-transform: lowercase;
}
.lemon-dp-day {
    aspect-ratio: 1;
    border: 0;
    border-radius: 10px;
    background: #f8fafc;
    color: var(--dark, #1e293b);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, color .12s, box-shadow .12s;
}
.lemon-dp-day:hover:not(:disabled) {
    background: #f1f5f9;
    background: color-mix(in srgb, var(--primary, #afbf28) 15%, #fff);
    color: #334155;
}
.lemon-dp-day.muted {
    opacity: .35;
}
.lemon-dp-day.today {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary, #afbf28) 55%, #fff);
}
.lemon-dp-day.active {
    background: var(--primary, #afbf28);
    color: #fff;
}
.lemon-dp-day:disabled {
    opacity: .28;
    cursor: not-allowed;
}

/* Vistas de mes e ano reaproveitam a mesma pilula, em grade de 3 ou 4 colunas. */
.lemon-dp-chips {
    display: grid;
    gap: 6px;
}
.lemon-dp-chips.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}
.lemon-dp-chips.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}
.lemon-dp-chip {
    border: 0;
    border-radius: 10px;
    background: #f8fafc;
    color: var(--dark, #1e293b);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 11px 4px;
    cursor: pointer;
    text-transform: capitalize;
    transition: background .12s, color .12s;
}
.lemon-dp-chip:hover:not(:disabled) {
    background: color-mix(in srgb, var(--primary, #afbf28) 15%, #fff);
}
.lemon-dp-chip.active {
    background: var(--primary, #afbf28);
    color: #fff;
}
.lemon-dp-chip:disabled {
    opacity: .28;
    cursor: not-allowed;
}

/* ── Painel de hora ── */
.lemon-dp-time {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--lm-hairline);
}
.lemon-dp.only-time .lemon-dp-time {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.lemon-dp-time-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--lm-muted);
    margin-bottom: 8px;
}
.lemon-dp-time-head strong {
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dark, #1e293b);
    font-variant-numeric: tabular-nums;
}
.lemon-dp-time-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.lemon-dp-col {
    max-height: 148px;
    overflow-y: auto;
    display: grid;
    gap: 4px;
    padding-right: 2px;
    scrollbar-width: thin;
}
.lemon-dp-col::-webkit-scrollbar {
    width: 6px;
}
.lemon-dp-col::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 999px;
}
.lemon-dp-slot {
    border: 0;
    border-radius: 9px;
    background: #f8fafc;
    color: var(--dark, #1e293b);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 0;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background .12s, color .12s;
}
.lemon-dp-slot:hover {
    background: color-mix(in srgb, var(--primary, #afbf28) 15%, #fff);
}
.lemon-dp-slot.active {
    background: var(--primary, #afbf28);
    color: #fff;
}

/* ── Rodape ── */
.lemon-dp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--lm-hairline);
}
.lemon-dp-act {
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    padding: 7px 10px;
    border-radius: 9px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.lemon-dp-act:hover {
    background: #f1f5f9;
    color: #334155;
}
.lemon-dp-act:disabled {
    opacity: .35;
    cursor: not-allowed;
    background: transparent;
}
.lemon-dp-act.is-primary {
    background: var(--primary, #afbf28);
    color: #fff;
}
.lemon-dp-act.is-primary:hover {
    filter: brightness(.94);
    color: #fff;
}

/* ════════════════════════════════════════════════════════════════════════════
   3. FLATPICKR NO MESMO VISUAL
   Relatorios (periodo em range), Meta Ads e o vencimento do link rastreavel
   usam flatpickr em input de texto — range e altInput nao teriam equivalente
   direto no componente nativo, entao em vez de trocar a biblioteca o tema dela
   foi alinhado ao calendario do dashboard. Prefixo `body` porque a pagina
   carrega flatpickr.min.css depois do head.
   ════════════════════════════════════════════════════════════════════════════ */
body .flatpickr-calendar {
    border-radius: var(--lm-radius-block);
    border: 1px solid #edf2f7;
    box-shadow: 0 24px 56px -12px rgba(15, 23, 42, .26), 0 6px 16px -8px rgba(15, 23, 42, .10);
    padding: 6px 8px 10px;
    font-family: inherit;
}
body .flatpickr-calendar.arrowTop::before,
body .flatpickr-calendar.arrowTop::after,
body .flatpickr-calendar.arrowBottom::before,
body .flatpickr-calendar.arrowBottom::after {
    display: none;
}
body .flatpickr-months {
    padding-top: 4px;
}
body .flatpickr-months .flatpickr-month,
body .flatpickr-current-month {
    color: var(--dark, #1e293b);
}
body .flatpickr-current-month .flatpickr-monthDropdown-months,
body .flatpickr-current-month input.cur-year {
    font-size: 13px;
    font-weight: 800;
}
body .flatpickr-months .flatpickr-prev-month,
body .flatpickr-months .flatpickr-next-month {
    border-radius: var(--lm-radius-pill);
    padding: 6px 8px;
}
body .flatpickr-months .flatpickr-prev-month:hover,
body .flatpickr-months .flatpickr-next-month:hover {
    background: #f8fafc;
}
body .flatpickr-months .flatpickr-prev-month:hover svg,
body .flatpickr-months .flatpickr-next-month:hover svg {
    fill: #334155;
}
body span.flatpickr-weekday {
    font-size: 10px;
    font-weight: 600;
    color: var(--lm-muted);
    text-transform: lowercase;
}
body .flatpickr-day {
    border-radius: 10px;
    border: 0;
    background: #f8fafc;
    color: var(--dark, #1e293b);
    font-size: 12px;
    font-weight: 700;
    max-width: none;
    height: 34px;
    line-height: 34px;
    margin: 2px 0;
}
body .flatpickr-days,
body .dayContainer {
    width: auto;
    min-width: 0;
}
body .flatpickr-day:hover {
    background: color-mix(in srgb, var(--primary, #afbf28) 15%, #fff);
    border-color: transparent;
}
body .flatpickr-day.today {
    border: 0;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary, #afbf28) 55%, #fff);
}
body .flatpickr-day.selected,
body .flatpickr-day.startRange,
body .flatpickr-day.endRange,
body .flatpickr-day.selected:hover,
body .flatpickr-day.startRange:hover,
body .flatpickr-day.endRange:hover {
    background: var(--primary, #afbf28);
    border-color: transparent;
    color: #fff;
    box-shadow: none;
}
body .flatpickr-day.inRange,
body .flatpickr-day.inRange:hover {
    background: color-mix(in srgb, var(--primary, #afbf28) 15%, #fff);
    border-color: transparent;
    color: #334155;
    box-shadow: none;
}
body .flatpickr-day.prevMonthDay,
body .flatpickr-day.nextMonthDay,
body .flatpickr-day.flatpickr-disabled {
    background: #fff;
    color: #cbd5e1;
}
body .flatpickr-time input,
body .flatpickr-time .flatpickr-time-separator,
body .flatpickr-time .flatpickr-am-pm {
    font-size: 13px;
    font-weight: 700;
    color: var(--dark, #1e293b);
}
body .flatpickr-time input:hover,
body .flatpickr-time input:focus,
body .flatpickr-time .numInputWrapper:hover {
    background: #f8fafc;
}

/* ════════════════════════════════════════════════════════════════════════════
   3. TOAST (notificacao de acao)
   O mesmo cartao que Funil, Contatos e Chat ja usavam, promovido para ca. As
   paginas que carregam a copia local continuam vencendo por ordem de carga —
   o visual e' identico, entao nao ha regressao; telas novas passam a herdar o
   padrao sem copiar CSS.

   Sem prefixo `body` de proposito: a copia da pagina (mesma especificidade,
   carregada depois) precisa continuar valendo enquanto existir.
   ════════════════════════════════════════════════════════════════════════════ */
.toast-wrap {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.toast-wrap .toast-item { pointer-events: auto; }
.toast-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 300px;
    max-width: 380px;
    padding: 16px 18px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .13), 0 1px 4px rgba(0, 0, 0, .07);
    border: 1px solid rgba(0, 0, 0, .06);
    animation: lmToastSlideIn .35s cubic-bezier(.175, .885, .32, 1.275);
    position: relative;
}
.toast-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-top: 1px;
}
.toast-body { flex: 1; min-width: 0; }
.toast-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    margin-bottom: 3px;
}
.toast-msg {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
    word-break: break-word;
}
.toast-close {
    flex-shrink: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: #9ca3af;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    margin-top: 1px;
    transition: color .15s;
}
.toast-close:hover { color: #374151; }
.toast-success .toast-icon { background: #dcfce7; color: #16a34a; }
.toast-error   .toast-icon { background: #fee2e2; color: #dc2626; }
.toast-info    .toast-icon { background: #dbeafe; color: #2563eb; }
.toast-warn    .toast-icon { background: #fef9c3; color: #d97706; }
.toast-warning .toast-icon { background: #fef9c3; color: #d97706; }
@keyframes lmToastSlideIn {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}