/* Era Soft — ocean / ice / turquoise theme overlay */
:root {
    --es-brand: #0ea5e9;
    --es-brand-dark: #0284c7;
    --es-brand-soft: #ecfeff;
    --es-ink: #0f172a;
    --es-muted: #64748b;
    --es-bg: #f4fbff;
    --es-surface: #ffffff;
    --es-border: #d7eef7;
    --es-footer: #062033;
    --es-hero-from: #0b3a5c;
    --es-hero-to: #0e7490;
    --es-hero-glow: #22d3ee;
    --es-accent: #14b8a6;
    --es-cyan: #22d3ee;
    --es-emerald: #34d399;
    --es-amber: #fbbf24;
    --es-catalog-bg: #f7fcff;
    --es-catalog-card: #ffffff;
    --es-catalog-border: #d7eef7;
    --es-catalog-head: #e8f7ff;
}

::selection {
    background: rgba(14, 165, 233, 0.22);
    color: #0f172a;
}

html { color-scheme: light; }

body,
.es-grid-bg,
.es-app-shell {
    background-color: var(--es-bg) !important;
    color: var(--es-ink);
}

.es-grid-bg {
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -18%, rgba(14, 165, 233, 0.14), transparent 58%),
        radial-gradient(ellipse 40% 30% at 100% 0%, rgba(20, 184, 166, 0.08), transparent 50%),
        linear-gradient(rgba(125, 211, 252, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, 0.16) 1px, transparent 1px) !important;
    background-size: auto, auto, 28px 28px, 28px 28px;
}

.es-hero {
    background:
        radial-gradient(ellipse 70% 80% at 85% 15%, rgba(34, 211, 238, 0.28), transparent 52%),
        radial-gradient(ellipse 50% 60% at 8% 90%, rgba(20, 184, 166, 0.22), transparent 50%),
        linear-gradient(135deg, #07263d 0%, #0b4a6e 42%, #0e7490 78%, #22d3ee 130%) !important;
    color: #fff !important;
}

.es-hero::after {
    background: rgba(34, 211, 238, 0.28) !important;
}

.es-auth-shell {
    background:
        radial-gradient(ellipse 70% 55% at 12% 18%, rgba(34, 211, 238, 0.22), transparent 55%),
        radial-gradient(ellipse 55% 45% at 88% 82%, rgba(14, 165, 233, 0.18), transparent 50%),
        linear-gradient(160deg, #041624 0%, #0b3a5c 42%, #0e7490 82%, #22d3ee 140%) !important;
}

.es-sidebar-brand {
    background: linear-gradient(135deg, #0b3a5c 0%, #0891b2 58%, #14b8a6 120%) !important;
    box-shadow: 0 12px 28px rgba(8, 47, 73, 0.28) !important;
}

.es-topbar {
    background: linear-gradient(90deg, #041624 0%, #0b3a5c 55%, #0e7490 100%) !important;
    color: #e0f2fe !important;
}

.es-btn-primary,
.es-btn-primary {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 48%, #0e7490 100%) !important;
    box-shadow: 0 10px 22px rgba(8, 145, 178, 0.28) !important;
    color: #fff !important;
}

.es-btn-primary:hover,
.es-btn-primary:hover {
    background: linear-gradient(135deg, #7dd3fc 0%, #22d3ee 45%, #0e7490 100%) !important;
}

.es-btn-secondary:hover,
.es-btn-secondary:hover {
    border-color: #7dd3fc !important;
    background: #ecfeff !important;
    color: #0e7490 !important;
}

.es-nav-link-active,
.es-nav-link-active {
    background: #ecfeff !important;
    color: #0e7490 !important;
    box-shadow: inset 3px 0 0 var(--es-brand) !important;
}

.es-catalog-band,
.es-section-band {
    background: linear-gradient(180deg, #e8f7ff 0%, #f7fcff 42%, #ffffff 100%) !important;
}

.es-input:focus,
.es-field:focus,
.es-choice.is-active,
.es-input:focus {
    border-color: #22d3ee !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.16) !important;
}

.es-choice.is-active {
    background: #bae6fd !important;
    color: #0c4a6e !important;
    -webkit-text-fill-color: #0c4a6e !important;
}

.es-brand-mark__era {
    background: linear-gradient(115deg, #0b4a6e 0%, #0284c7 38%, #22d3ee 72%, #14b8a6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

.es-brand-mark--light .es-brand-mark__era {
    background: linear-gradient(115deg, #ffffff 0%, #e0f2fe 42%, #a5f3fc 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.es-brand-mark__scan {
    background: linear-gradient(90deg, transparent, #0ea5e9, #22d3ee, transparent) !important;
    background-size: 200% 100% !important;
}

.es-brand-mark__glow {
    background: #22d3ee !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2), 0 0 14px rgba(34, 211, 238, 0.55) !important;
}

.es-footer-wave::before {
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.55), transparent, rgba(20, 184, 166, 0.45), transparent) !important;
}

footer.bg-\[var\(--es-footer\)\],
.bg-\[var\(--es-footer\)\],
.es-footer-wave {
    background: linear-gradient(180deg, #07263d 0%, #041624 100%) !important;
}

/* Remap leftover orange utilities to ocean */
.text-orange-50, .text-orange-50\/95 { color: rgb(240 253 250 / 0.95) !important; }
.text-orange-100, .text-orange-100\/85, .text-orange-100\/90, .text-orange-100\/80 { color: rgb(207 250 254 / 0.92) !important; }
.text-orange-600 { color: #0284c7 !important; }
.text-orange-700, .hover\:text-orange-700:hover, .group-hover\:text-orange-700 { color: #0e7490 !important; }
.text-orange-800, .hover\:text-orange-800:hover, .group-hover\:text-orange-800 { color: #155e75 !important; }
.text-orange-900 { color: #164e63 !important; }
.bg-orange-50 { background-color: #ecfeff !important; }
.bg-orange-600, .bg-orange-600 { background-color: #0ea5e9 !important; color: #fff !important; }
.border-orange-300, .hover\:border-orange-300:hover { border-color: #7dd3fc !important; }
.border-orange-600 { border-color: #0ea5e9 !important; }
.shadow-orange-900\/20, .shadow-orange-950\/20 { --tw-shadow-color: rgb(8 47 73 / 0.22) !important; }
.focus\:ring-orange-500\/30:focus { --tw-ring-color: rgb(14 165 233 / 0.35) !important; }

.text-blue-50, .text-blue-50\/95 { color: rgb(240 249 255 / 0.95) !important; }
.text-blue-100, .text-blue-100\/85, .text-blue-100\/90 { color: rgb(224 242 254 / 0.9) !important; }
.text-blue-600, .text-blue-700, .text-sky-700, .text-sky-800,
.hover\:text-blue-700:hover, .group-hover\:text-blue-700 {
    color: #0369a1 !important;
}
.bg-blue-50, .hover\:bg-blue-50:hover { background-color: #f0f9ff !important; }
.bg-blue-600 { background-color: #0284c7 !important; color: #fff !important; }

/* Atmosphere */
.es-aurora {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.es-aurora::before {
    content: "";
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 22rem;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse at 20% 40%, rgba(14, 165, 233, 0.18), transparent 50%),
        radial-gradient(ellipse at 70% 20%, rgba(34, 211, 238, 0.16), transparent 48%),
        radial-gradient(ellipse at 90% 70%, rgba(20, 184, 166, 0.12), transparent 46%);
    animation: es-aurora-shift 14s ease-in-out infinite alternate;
}
.es-aurora > * { position: relative; z-index: 1; }

@keyframes es-aurora-shift {
    from { transform: translate3d(-2%, 0, 0) scale(1); }
    to { transform: translate3d(3%, 4%, 0) scale(1.06); }
}

.es-wave-line {
    height: 3px;
    width: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #0ea5e9, #22d3ee, #14b8a6, transparent);
    background-size: 200% 100%;
    animation: es-brand-scan 3.4s linear infinite;
}

.es-metric-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
    .es-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.es-metric {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid rgba(186, 230, 253, 0.9);
    background: linear-gradient(180deg, #ffffff 0%, #f0fbff 100%);
    padding: 1.15rem 1.2rem;
    box-shadow: 0 10px 30px rgba(8, 47, 73, 0.05);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.es-metric:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(8, 47, 73, 0.1);
}
.es-metric strong {
    display: block;
    font-family: "Space Grotesk", Manrope, sans-serif;
    font-size: 1.45rem;
    letter-spacing: -0.03em;
    color: #0b3a5c;
}
.es-metric span { display: block; margin-top: 0.25rem; font-size: 0.78rem; color: #64748b; }

.es-step-card {
    position: relative;
    border-radius: 1.25rem;
    border: 1px solid #d7eef7;
    background: #fff;
    padding: 1.25rem;
    min-height: 100%;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.es-step-card:hover { transform: translateY(-4px); border-color: #7dd3fc; }
.es-step-num {
    display: inline-flex;
    height: 2rem;
    min-width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #0ea5e9, #14b8a6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Panel luxury */
.es-panel-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    padding: 1.35rem 1.4rem;
    color: #fff;
    background:
        radial-gradient(ellipse at 90% 10%, rgba(34, 211, 238, 0.35), transparent 46%),
        linear-gradient(135deg, #07263d 0%, #0b4a6e 48%, #0f766e 100%);
    box-shadow: 0 18px 40px rgba(7, 38, 61, 0.22);
}
.es-panel-hero::after {
    content: "";
    position: absolute;
    right: -4rem;
    top: -3rem;
    width: 16rem;
    height: 16rem;
    border-radius: 999px;
    border: 1px dashed rgba(255,255,255,0.18);
    animation: es-spin 22s linear infinite;
}
.es-panel-actions {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .es-panel-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.es-quick-action {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    border-radius: 1.1rem;
    border: 1px solid #d7eef7;
    background: #fff;
    padding: 0.95rem 1rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.es-quick-action:hover {
    transform: translateY(-3px);
    border-color: #67e8f9;
    box-shadow: 0 14px 28px rgba(8, 47, 73, 0.08);
}

/* Tickets */
.es-ticket-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    padding: 1.4rem;
    color: #fff;
    background:
        radial-gradient(circle at 90% 0%, rgba(34, 211, 238, 0.28), transparent 42%),
        linear-gradient(135deg, #083344 0%, #0e7490 55%, #14b8a6 120%);
}
.es-ticket-grid { display: grid; gap: 1rem; }
@media (min-width: 900px) {
    .es-ticket-grid { grid-template-columns: 1.15fr 0.85fr; }
}
.es-ticket-card {
    display: block;
    border-radius: 1.15rem;
    border: 1px solid #d7eef7;
    background: linear-gradient(180deg, #fff, #f7fcff);
    padding: 1rem 1.1rem;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.es-ticket-card:hover {
    transform: translateY(-4px);
    border-color: #67e8f9;
    box-shadow: 0 16px 34px rgba(8, 47, 73, 0.08);
}
.es-prio {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.es-prio-low { background: #ecfeff; color: #0f766e; }
.es-prio-normal { background: #e0f2fe; color: #0369a1; }
.es-prio-high { background: #fff7ed; color: #c2410c; }
.es-prio-urgent { background: #fff1f2; color: #be123c; animation: es-pulse-soft 1.6s ease-in-out infinite; }
.es-status-open { background: #e0f2fe; color: #075985; }
.es-status-answered { background: #d1fae5; color: #047857; }
.es-status-customer_reply { background: #fef9c3; color: #a16207; }
.es-status-on_hold { background: #f1f5f9; color: #334155; }
.es-status-closed, .es-status-auto_closed { background: #e2e8f0; color: #475569; }

.es-chat {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.es-bubble {
    max-width: min(42rem, 100%);
    border-radius: 1.15rem;
    padding: 0.95rem 1.05rem;
    animation: es-rise-ui 0.45s ease both;
}
.es-bubble-staff {
    align-self: flex-start;
    background: linear-gradient(180deg, #f0f9ff, #ecfeff);
    border: 1px solid #bae6fd;
    color: #0f172a;
}
.es-bubble-client {
    align-self: flex-end;
    background: linear-gradient(180deg, #0ea5e9, #0f766e);
    color: #fff;
    box-shadow: 0 12px 24px rgba(8, 145, 178, 0.18);
}
.es-composer {
    border-radius: 1.4rem;
    border: 1px solid #bae6fd;
    background: #fff;
    padding: 1.1rem;
    box-shadow: 0 16px 40px rgba(8, 47, 73, 0.06);
}
.es-empty-glow {
    border-radius: 1.5rem;
    border: 1px dashed #7dd3fc;
    background:
        radial-gradient(circle at 20% 20%, rgba(14, 165, 233, 0.08), transparent 40%),
        #f8fdff;
    padding: 2.4rem 1.4rem;
    text-align: center;
}

.es-form-shell {
    border-radius: 1.5rem;
    border: 1px solid #bae6fd;
    background: linear-gradient(180deg, #ffffff, #f7fcff);
    padding: 1.25rem;
    box-shadow: 0 18px 40px rgba(8, 47, 73, 0.06);
}

@keyframes es-pulse-soft {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.es-glass {
    background: rgba(255, 255, 255, 0.86) !important;
    border: 1px solid rgba(186, 230, 253, 0.9);
    backdrop-filter: blur(16px);
    color: #0f172a;
}

.es-stat:hover {
    border-color: rgba(14, 165, 233, 0.35) !important;
    box-shadow: 0 16px 36px rgba(8, 47, 73, 0.1) !important;
}

.es-card-service:hover,
.es-catalog-card:hover {
    border-color: rgba(14, 165, 233, 0.42) !important;
}

.es-live-pill i { background: #22d3ee !important; box-shadow: 0 0 8px rgba(34, 211, 238, 0.8) !important; }

@media (prefers-reduced-motion: reduce) {
    .es-aurora::before,
    .es-wave-line,
    .es-panel-hero::after,
    .es-prio-urgent,
    .es-ticket-orbit { animation: none !important; }
}

.es-filter-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #bae6fd;
    background: #fff;
    padding: 0.35rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 650;
    color: #075985;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.es-filter-chip:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(8, 47, 73, 0.08); }
.es-filter-chip.is-active {
    background: linear-gradient(135deg, #0ea5e9, #0f766e);
    border-color: transparent;
    color: #fff;
}

.es-quote-grid { display: grid; gap: 0.9rem; }
@media (min-width: 900px) {
    .es-quote-grid { grid-template-columns: 1fr 1fr; }
}
.es-quote-new { background: #e0f2fe; color: #075985; }
.es-quote-reviewed { background: #fef9c3; color: #a16207; }
.es-quote-contacted { background: #d1fae5; color: #047857; }
.es-quote-closed { background: #e2e8f0; color: #475569; }
.es-meta-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0e7490;
}
.es-status-resolved { background: #d1fae5; color: #047857; }

.es-ticket-hero--rich { min-height: 8.2rem; }
.es-ticket-orbit {
    position: absolute;
    right: -2rem;
    top: -2.4rem;
    width: 11rem;
    height: 11rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: inset 0 0 0 18px rgba(255,255,255,0.04);
    animation: es-pulse-soft 4.5s ease-in-out infinite;
}
.es-ticket-hero::after {
    content: "";
    position: absolute;
    inset: auto -10% -40% auto;
    width: 14rem;
    height: 14rem;
    border-radius: 40%;
    background: radial-gradient(circle, rgba(125, 211, 252, 0.28), transparent 68%);
    pointer-events: none;
}

.es-app-topbar {
    backdrop-filter: blur(16px);
    background: rgba(255,255,255,0.86);
    border-bottom: 1px solid #d7eef7;
}

.es-quote-form,
.es-quote-success {
    border-radius: 1.6rem;
    border: 1px solid rgba(255,255,255,0.12);
    background: linear-gradient(180deg, rgba(8, 47, 73, 0.55), rgba(8, 47, 73, 0.32));
    padding: 2rem;
    box-shadow: 0 24px 60px rgba(2, 8, 23, 0.28);
}
.es-quote-input {
    width: 100%;
    border-radius: 0.9rem;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    padding: 0.8rem 1rem;
    color: #fff;
    outline: none;
}
.es-quote-input:focus { border-color: rgba(45, 212, 191, 0.55); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15); }
.es-quote-success { text-align: center; }
.es-quote-success__icon {
    margin: 0 auto 1rem;
    display: flex;
    height: 3.2rem;
    width: 3.2rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #22d3ee, #14b8a6);
    font-size: 1.2rem;
    font-weight: 800;
    color: #042f2e;
}

.es-composer { position: relative; overflow: hidden; }
.es-composer::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #0ea5e9, #14b8a6, #22d3ee);
}

.es-filter-chip em {
    margin-left: 0.35rem;
    font-style: normal;
    font-weight: 800;
    opacity: 0.8;
}
.es-ticket-search {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    min-width: min(22rem, 100%);
}
.es-ticket-search .es-field { flex: 1; }
.es-ticket-preview {
    margin-top: 0.45rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #64748b;
}
.es-ticket-card.is-waiting {
    border-color: #fbbf24;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.25);
}
.es-wait-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: #fef3c7;
    color: #92400e;
}
.es-wait-chip::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}
.es-ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.1rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: rgba(224, 242, 254, 0.88);
}
.es-split-preview {
    margin-top: 0.35rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: #64748b;
}
.es-chat-day {
    display: flex;
    justify-content: center;
    margin: 0.35rem 0;
}
.es-chat-day span {
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.22rem 0.7rem;
}
.es-bubble-row {
    display: flex;
    align-items: flex-end;
    gap: 0.55rem;
    max-width: 100%;
    animation: es-rise-ui 0.45s ease both;
}
.es-bubble-row.is-mine { flex-direction: row-reverse; align-self: flex-end; }
.es-bubble-row.is-theirs { align-self: flex-start; }
.es-avatar {
    flex: none;
    display: inline-flex;
    width: 1.85rem;
    height: 1.85rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.es-avatar-staff { background: #e0f2fe; color: #0369a1; }
.es-avatar-client { background: #0e7490; color: #ecfeff; }
.es-bubble { max-width: min(38rem, calc(100% - 2.4rem)); }
.es-bubble__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.8rem;
    font-size: 0.72rem;
}
.es-bubble-staff .es-bubble__meta { color: #64748b; }
.es-bubble-client .es-bubble__meta { color: rgba(255,255,255,0.78); }
.es-bubble__rel { opacity: 0.8; font-weight: 500; }
.es-bubble__body {
    margin-top: 0.4rem;
    white-space: pre-line;
    font-size: 0.9rem;
    line-height: 1.55;
}
.es-composer--dock { margin-top: 1.4rem; }
.es-composer__head,
.es-composer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}
.es-composer__count,
.es-composer__hint {
    font-size: 0.72rem;
    color: #64748b;
}
.es-composer__hint { max-width: 28rem; line-height: 1.4; }
.es-composer__field { min-height: 6.2rem; resize: vertical; }
.es-composer__status { max-width: 14rem; }
.es-composer__bar { margin-top: 0.9rem; }
.es-composer__bar .es-btn-primary { margin-left: auto; }
.es-composer__bar .es-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.es-ticket-closed {
    margin-top: 1.4rem;
    border-radius: 1.2rem;
    border: 1px dashed #94a3b8;
    background: #f8fafc;
    padding: 1.15rem 1.2rem;
}
.es-ticket-closed strong { display: block; color: #0f172a; }
.es-ticket-closed p { margin-top: 0.3rem; font-size: 0.85rem; color: #64748b; }