/* ─── Atlas Design System ─────────────────────────────────── */
/* Petróleo + cobre. Cobre = marca, nunca alerta (spec 2026-09-30-rename-atlas). */

/* ─── Custom DaisyUI Themes (oklch format) ────────────────── */

[data-theme="atlas"] {
    color-scheme: light;
    --p: 48.5% 0.074 205.0;       /* primary: #1B6B73 petróleo */
    --pc: 100% 0 0;
    --s: 58.9% 0.123 51.8;        /* secondary: #B5652F cobre */
    --sc: 100% 0 0;
    --a: 37.8% 0.056 207.3;       /* accent: #134A51 petróleo profundo */
    --ac: 100% 0 0;
    --n: 26.6% 0.025 208.4;       /* neutral: #16292C */
    --nc: 96.7% 0.004 197.1;
    --b1: 100% 0 0;               /* base-100: #FFFFFF */
    --b2: 96.7% 0.004 197.1;      /* base-200: #F1F5F5 */
    --b3: 91.5% 0.010 204.9;      /* base-300: #DCE5E6 */
    --bc: 26.6% 0.025 208.4;      /* base-content: #16292C */
    --in: 58.4% 0.085 204.5;      /* info: #2F8A93 */
    --inc: 100% 0 0;
    --su: 62.1% 0.141 152.7;      /* success: #2E9E5B */
    --suc: 100% 0 0;
    --wa: 71.1% 0.144 86.5;       /* warning: #C99A06 âmbar-amarelo (distinto do cobre) */
    --wac: 0% 0 0;
    --er: 57.7% 0.215 27.3;       /* error: #DC2626 */
    --erc: 100% 0 0;
    --rounded-box: 0.75rem;
    --rounded-btn: 0.5rem;
    --rounded-badge: 1.9rem;
    --animation-btn: 0.25s;
    --animation-input: .2s;
    --btn-focus-scale: 0.95;
    --border-btn: 1px;
    --tab-border: 1px;
    --tab-radius: 0.5rem;
}

[data-theme="atlas-dark"] {
    color-scheme: dark;
    --p: 67.5% 0.084 203.4;       /* primary: #4FA6AE */
    --pc: 21.3% 0.016 210.0;
    --s: 71.3% 0.113 53.6;        /* secondary: #D98E5C cobre */
    --sc: 21.3% 0.016 210.0;
    --a: 81.6% 0.066 203.2;       /* accent: #8FD0D6 */
    --ac: 21.3% 0.016 210.0;
    --n: 31.8% 0.027 211.5;       /* neutral: #22363A */
    --nc: 92.5% 0.009 197.0;
    --b1: 21.3% 0.016 210.0;      /* base-100: #101B1D */
    --b2: 24.8% 0.021 211.5;      /* base-200: #152427 */
    --b3: 31.8% 0.027 211.5;      /* base-300: #22363A */
    --bc: 92.5% 0.009 197.0;      /* base-content: #E0E8E8 */
    --in: 75.9% 0.080 203.8;      /* info: #6FC0C8 */
    --inc: 21.3% 0.016 210.0;
    --su: 73.0% 0.146 154.9;      /* success: #4CC27E */
    --suc: 21.3% 0.016 210.0;
    --wa: 79.3% 0.143 89.3;       /* warning: #E0B63A */
    --wac: 21.3% 0.016 210.0;
    --er: 71.1% 0.166 22.2;       /* error: #F87171 */
    --erc: 21.3% 0.016 210.0;
    --rounded-box: 0.75rem;
    --rounded-btn: 0.5rem;
    --rounded-badge: 1.9rem;
    --animation-btn: 0.25s;
    --animation-input: .2s;
    --btn-focus-scale: 0.95;
    --border-btn: 1px;
    --tab-border: 1px;
    --tab-radius: 0.5rem;
}

/* ─── WhatsApp Chat Background ─────────────────────────────── */
[data-theme="atlas"] {
    --wa-chat-bg: #E5DDD5;           /* warm beige like WhatsApp light */
    --wa-chat-pattern-opacity: 0.06;
}
[data-theme="atlas-dark"] {
    --wa-chat-bg: #0B141A;           /* dark teal-black like WhatsApp dark */
    --wa-chat-pattern-opacity: 0.03;
}

/* ─── Avatar Colors ───────────────────────────────────────── */

.avatar-blue { background-color: #3B82F6; }
.avatar-emerald { background-color: #10B981; }
.avatar-violet { background-color: #8B5CF6; }
.avatar-amber { background-color: #F59E0B; }
.avatar-rose { background-color: #F43F5E; }
.avatar-cyan { background-color: #06B6D4; }
.avatar-orange { background-color: #F97316; }
.avatar-indigo { background-color: #6366F1; }

:root {
    --at-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --at-radius-sm: 0.375rem;
    --at-radius-md: 0.5rem;
    --at-radius-lg: 0.75rem;
    --at-radius-xl: 1rem;
    --at-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --at-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --at-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --at-sidebar-width: 3.5rem;
    --at-sidebar-expanded: 15rem;
    --at-topbar-height: 3.5rem;
}

html, body {
    font-family: var(--at-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Skeleton Loader ──────────────────────────────────────── */

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        oklch(var(--b3)) 25%,
        oklch(var(--b2)) 50%,
        oklch(var(--b3)) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--at-radius-sm);
}

.skeleton-text {
    height: 0.875rem;
    margin-bottom: 0.5rem;
}

.skeleton-text:last-child {
    width: 60%;
}

.skeleton-circle {
    border-radius: 50%;
}

/* ─── Slide Over Panel ─────────────────────────────────────── */

.slide-over-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgb(0 0 0 / 0.4);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--at-transition);
    pointer-events: none;
}

.slide-over-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.slide-over {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: 100%;
    max-width: 30rem;
    transform: translateX(100%);
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.slide-over.open {
    transform: translateX(0);
}

/* ─── Hover Row ────────────────────────────────────────────── */

.hover-row {
    transition: background-color var(--at-transition);
    cursor: pointer;
}

.hover-row:hover {
    background-color: oklch(var(--b2) / 0.5);
}

/* ─── Status Dots ──────────────────────────────────────────── */

.ticket-list-row {
    transition: background-color var(--at-transition), box-shadow 220ms ease, transform 220ms ease;
}

.ticket-panels-shell {
    width: 100%;
}

.ticket-panels-shell.is-collapsed {
    display: none;
}

@media (min-width: 1280px) {
    .ticket-panels-shell {
        width: 20rem;
        flex-shrink: 0;
    }
}

.ticket-panels-card {
    position: sticky;
    top: 1rem;
}

.ticket-panels-card button.w-full.text-left.rounded-xl:focus,
.ticket-panels-card button.w-full.text-left.rounded-xl:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.ticket-panels-card button.w-full.text-left.rounded-xl[class*="bg-base-200"] {
    border-color: transparent !important;
    box-shadow: inset 0 0 0 1px oklch(var(--b3) / 0.8);
}


.ticket-view-modal {
    width: min(98vw, 1720px);
    max-width: min(98vw, 1720px);
    height: min(96vh, 1120px);
    max-height: min(96vh, 1120px);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
}

.ticket-view-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.35rem;
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 1500px) {
    .ticket-view-modal-body {
        grid-template-columns: minmax(0, 1.65fr) minmax(360px, 0.95fr);
        align-items: start;
    }
}

.ticket-view-modal-main,
.ticket-view-modal-side {
    min-width: 0;
}

.ticket-view-modal-side {
    align-self: start;
}

.ticket-view-modal-side > * {
    width: 100%;
}

.ticket-view-section {
    background: oklch(var(--b1) / 0.5);
}

.ticket-condition-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .ticket-condition-row {
        grid-template-columns: minmax(170px, 1.1fr) minmax(150px, 0.95fr) minmax(220px, 1.3fr) auto;
    }
}

.ticket-column-list {
    max-height: 28rem;
    overflow: auto;
    padding-right: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ticket-column-dropzone {
    min-height: 16rem;
    padding: 0.25rem;
    border-radius: 0.9rem;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.ticket-column-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-radius: 0.85rem;
    padding: 0.9rem 1rem;
    cursor: grab;
    user-select: none;
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.ticket-column-item:active {
    cursor: grabbing;
}

.ticket-column-item:hover {
    transform: translateY(-1px);
}

.ticket-column-item-available {
    background: oklch(var(--b2) / 0.65);
    border: 1px solid oklch(var(--b3) / 0.9);
}

.ticket-column-item-selected {
    background: oklch(var(--p) / 0.1);
    border: 1px solid oklch(var(--p) / 0.18);
    flex-direction: column;
    align-items: stretch;
}

.ticket-column-grip {
    font-family: monospace;
    letter-spacing: 0.08em;
    font-size: 1rem;
    line-height: 1;
    color: oklch(var(--bc) / 0.45);
}

.ticket-view-modal-side .grid.grid-cols-1.\32 xl\:grid-cols-2 {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1200px) {
    .ticket-view-modal-side .grid.grid-cols-1.\32 xl\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ticket-list-row-new {
    background: linear-gradient(90deg, oklch(var(--p) / 0.16), transparent 68%);
    box-shadow: inset 3px 0 0 oklch(var(--p));
    animation: ticket-row-new-flash 4.8s ease-out forwards;
}

@keyframes ticket-row-new-flash {
    0% {
        background: linear-gradient(90deg, oklch(var(--p) / 0.24), transparent 72%);
        transform: translateX(0);
    }
    18% {
        background: linear-gradient(90deg, oklch(var(--p) / 0.18), transparent 72%);
        transform: translateX(2px);
    }
    100% {
        background: transparent;
        transform: translateX(0);
    }
}

.status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot-open { background-color: #22C55E; }
.status-dot-in-progress { background-color: oklch(var(--p)); }
.status-dot-waiting { background-color: #F59E0B; }
.status-dot-forwarded-dev { background-color: #8B5CF6; }
.status-dot-resolved { background-color: #6B7280; }
.status-dot-closed { background-color: #9CA3AF; }

/* ─── Priority Badges ─────────────────────────────────────── */

.priority-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    line-height: 1.25rem;
}

.priority-critical { background-color: #FEE2E2; color: #991B1B; }
.priority-high { background-color: #FDE4DC; color: #B42318; }
.priority-medium { background-color: #FEF9C3; color: #854D0E; }
.priority-low { background-color: #F1F5F5; color: #4A6266; }

/* Dark mode priority adjustments */
[data-theme="atlas-dark"] .priority-critical { background-color: #450A0A; color: #FCA5A5; }
[data-theme="atlas-dark"] .priority-high { background-color: #4A1410; color: #FDA29B; }
[data-theme="atlas-dark"] .priority-medium { background-color: #422006; color: #FDE047; }
[data-theme="atlas-dark"] .priority-low { background-color: #22363A; color: #A9C4C7; }

/* ─── Avatar ───────────────────────────────────────────────── */

.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
    text-transform: uppercase;
}

.avatar-initials-sm {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.625rem;
}

.avatar-initials-lg {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.875rem;
}

/* ─── Custom Scrollbar ─────────────────────────────────────── */

.at-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.at-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.at-scrollbar::-webkit-scrollbar-thumb {
    background-color: oklch(var(--bc) / 0.15);
    border-radius: 3px;
}

.at-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: oklch(var(--bc) / 0.25);
}

/* ─── Sidebar ──────────────────────────────────────────────── */

.at-sidebar {
    width: var(--at-sidebar-width);
    transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    overflow: hidden;
}

.at-sidebar.expanded {
    width: var(--at-sidebar-expanded);
}

.at-sidebar .nav-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 150ms, width 200ms;
}

.at-sidebar.expanded .nav-label {
    opacity: 1;
    width: auto;
}

.at-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--at-radius-md);
    color: oklch(var(--bc) / 0.65);
    transition: all var(--at-transition);
    position: relative;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: 2.25rem;
}

.at-nav-item:hover {
    background-color: oklch(var(--b2));
    color: oklch(var(--bc));
}

.at-nav-item.active {
    background-color: oklch(var(--p) / 0.1);
    color: oklch(var(--p));
}

.at-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 2px;
    background-color: oklch(var(--p));
    border-radius: 1px;
}

.at-sidebar.expanded .at-nav-subitem {
    padding-left: 1.75rem;
    font-size: 0.8125rem;
    min-height: 2rem;
}

.at-sidebar.expanded .at-nav-subitem svg {
    height: 1rem;
    width: 1rem;
}

/* ─── Topbar ───────────────────────────────────────────────── */

.at-topbar {
    height: var(--at-topbar-height);
    border-bottom: 1px solid oklch(var(--b3));
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* ─── Tab Bar ──────────────────────────────────────────────── */

.at-tab-bar {
    position: relative;
    display: flex;
    align-items: stretch;
    background: oklch(var(--b2));
    border-bottom: 1px solid oklch(var(--b3));
    flex-shrink: 0;
    min-height: 2.25rem;
    max-height: 2.25rem;
    user-select: none;
}

.at-tab-bar-scroll {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.at-tab-bar-scroll::-webkit-scrollbar {
    display: none;
}

.at-tab {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.75rem;
    min-width: 0;
    max-width: 12rem;
    height: 100%;
    font-size: 0.75rem;
    color: oklch(var(--bc) / 0.6);
    border-right: 1px solid oklch(var(--b3) / 0.5);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
    flex-shrink: 0;
    white-space: nowrap;
    position: relative;
}

.at-tab:hover {
    background: oklch(var(--b1));
    color: oklch(var(--bc) / 0.85);
}

.at-tab.active {
    background: oklch(var(--b1));
    color: oklch(var(--bc));
    font-weight: 500;
}

.at-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: oklch(var(--p));
}

.at-tab-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.7;
}

.at-tab.active .at-tab-icon {
    opacity: 1;
    color: oklch(var(--p));
}

.at-tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.at-tab-dirty {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: oklch(var(--wa));
    flex-shrink: 0;
}

.at-tab-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
    opacity: 0;
    color: oklch(var(--bc) / 0.5);
    transition: opacity 100ms ease, background-color 100ms ease, color 100ms ease;
    margin-left: auto;
}

.at-tab:hover .at-tab-close,
.at-tab.active .at-tab-close {
    opacity: 1;
}

.at-tab-close:hover {
    background: oklch(var(--er) / 0.15);
    color: oklch(var(--er));
}

/* Tab + button (inline after last tab) */
.at-tab-add-wrapper {
    display: flex;
    align-items: center;
    padding: 0 0.375rem;
    flex-shrink: 0;
}

.at-tab-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    color: oklch(var(--bc) / 0.5);
    transition: background-color 120ms ease, color 120ms ease;
    cursor: pointer;
}

.at-tab-add-btn:hover {
    background: oklch(var(--b1));
    color: oklch(var(--p));
}

/* Pinned tabs */
.at-tab.pinned {
    border-left: 2px solid oklch(var(--p) / 0.5);
}

.at-tab.pinned .at-tab-close {
    display: none;
}

/* Drag and drop */
.at-tab.dragging {
    opacity: 0.4;
}

.at-tab.drop-target {
    border-left: 2px solid oklch(var(--p));
}

/* Tab context menu */
.at-tab-context-menu {
    position: fixed;
    z-index: 51;
    background: oklch(var(--b1));
    border: 1px solid oklch(var(--b3));
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
    padding: 0.25rem;
    min-width: 10rem;
}

.at-tab-context-menu button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    color: oklch(var(--bc));
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 100ms ease;
}

.at-tab-context-menu button:hover {
    background: oklch(var(--b2));
}

/* ─── Page Header ──────────────────────────────────────────── */

.at-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.at-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: oklch(var(--bc));
    line-height: 1.2;
    outline: none;
    border: none;
    user-select: none;
    -webkit-user-select: none;
}

.at-page-title:focus,
.at-page-title:focus-visible,
.at-page-title-static,
.at-page-title-static:focus,
.at-page-title-static:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.btn.btn-ghost.btn-xs.btn-square.text-error[aria-label^="Excluir"] {
    width: 2.125rem;
    height: 2.125rem;
    min-height: 2.125rem;
    padding: 0.2rem;
}

.btn.btn-ghost.btn-xs.btn-square.text-error[aria-label^="Excluir"] svg {
    width: 1.1rem !important;
    height: 1.1rem !important;
    stroke-width: 2 !important;
}

/* ─── Cards ────────────────────────────────────────────────── */

.at-card {
    border: 1px solid oklch(var(--b3));
    border-radius: var(--at-radius-lg);
    background-color: oklch(var(--b1));
    overflow: hidden;
}

.at-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid oklch(var(--b3));
    font-size: 0.875rem;
    font-weight: 600;
}

.at-card-body {
    padding: 1.25rem;
}

/* ─── Tables ───────────────────────────────────────────────── */

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

.at-table thead th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: oklch(var(--bc) / 0.5);
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid oklch(var(--b3));
}

.at-table tbody tr {
    border-bottom: 1px solid oklch(var(--b2));
    transition: background-color var(--at-transition);
}

.at-table tbody tr:hover {
    background-color: oklch(var(--b2) / 0.5);
}

.at-table tbody td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

.customer-list-table {
    min-width: 980px;
}

.customer-list-table .company-column {
    min-width: 16rem;
    width: 16rem;
    white-space: normal;
    word-break: break-word;
}

/* ─── Empty State ──────────────────────────────────────────── */

.at-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
}

.at-empty-state svg {
    width: 3rem;
    height: 3rem;
    color: oklch(var(--bc) / 0.25);
    margin-bottom: 1rem;
}

.at-empty-state h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: oklch(var(--bc) / 0.7);
    margin-bottom: 0.25rem;
}

.at-empty-state p {
    font-size: 0.8125rem;
    color: oklch(var(--bc) / 0.5);
    margin-bottom: 1rem;
}

/* ─── Internal Note Highlight ──────────────────────────────── */

.internal-note {
    background-color: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: var(--at-radius-md);
}

.ticket-message {
    position: relative;
}

.ticket-message-actions {
    opacity: 0;
    pointer-events: none;
    flex-shrink: 0;
    transition: opacity var(--at-transition);
}

.ticket-message:hover .ticket-message-actions,
.ticket-message:focus-within .ticket-message-actions,
.ticket-message-actions:focus-within {
    opacity: 1;
    pointer-events: auto;
}

[data-theme="atlas-dark"] .internal-note {
    background-color: #422006;
    border-color: #92400E;
}

/* ─── Tooltip (for collapsed sidebar) ──────────────────────── */

.at-tooltip {
    position: relative;
}

.at-tooltip::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 0.75rem);
    top: 50%;
    transform: translateY(-50%);
    padding: 0.25rem 0.625rem;
    border-radius: var(--at-radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    background-color: oklch(var(--n));
    color: oklch(var(--nc, var(--b1)));
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--at-transition);
    z-index: 50;
}

.at-tooltip:hover::after {
    opacity: 1;
}

.at-sidebar.expanded .at-tooltip::after {
    display: none;
}

/* ─── Form Validation ──────────────────────────────────────── */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #EF4444;
}

.validation-message {
    color: #EF4444;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

/* ─── Blazor Infrastructure ────────────────────────────────── */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: oklch(var(--p));
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* ─── Accessibility ────────────────────────────────────────── */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.sr-only:focus,
.focus\:not-sr-only:focus {
    position: absolute;
    width: auto;
    height: auto;
    padding: 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

*:focus-visible {
    outline: 2px solid oklch(var(--p));
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── Responsive: Mobile sidebar overlay ───────────────────── */

@media (max-width: 1023px) {
    .at-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 30;
        background: rgb(0 0 0 / 0.4);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--at-transition);
    }

    .at-sidebar-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }

    .at-sidebar-mobile {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 40;
        width: var(--at-sidebar-expanded);
        transform: translateX(-100%);
        transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .at-sidebar-mobile.open {
        transform: translateX(0);
    }
}

/* ─── Quill Editor Overrides ────────────────────────────── */

#quill-editor .ql-editor,
.ql-editor {
    min-height: 60px;
    max-height: 400px;
    overflow-y: auto;
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
}

.ql-editor p {
    margin: 0.25rem 0;
}

.ql-toolbar.ql-snow {
    border: none !important;
    border-bottom: 1px solid oklch(var(--b3)) !important;
    padding: 4px 8px !important;
}

.ql-container.ql-snow {
    border: none !important;
}

.ql-editor.ql-blank::before {
    font-style: normal !important;
    color: oklch(var(--bc) / 0.35) !important;
}

/* ─── Prose (message & article HTML rendering) ──────────── */

.prose {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: oklch(var(--bc) / 0.9);
}

.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}

/* ─── Headings ─── */

.prose h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 2rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid oklch(var(--p) / 0.3);
    color: oklch(var(--bc));
    line-height: 1.3;
}

.prose h2 {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 1.75rem 0 0.75rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid oklch(var(--b3));
    color: oklch(var(--bc));
    line-height: 1.35;
}

.prose h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
    color: oklch(var(--bc));
    line-height: 1.4;
}

.prose h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1.25rem 0 0.5rem;
    color: oklch(var(--bc) / 0.9);
}

.prose h5, .prose h6 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
    color: oklch(var(--bc) / 0.8);
}

/* ─── Paragraphs & text ─── */

.prose p {
    margin: 0.25rem 0;
}

.prose strong {
    font-weight: 600;
    color: oklch(var(--bc));
}

.prose a {
    color: oklch(var(--p));
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose a:hover {
    opacity: 0.8;
}

/* ─── Lists ─── */

.prose ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 0.75rem 0;
}

.prose ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
    margin: 0.75rem 0;
}

.prose li {
    margin: 0.25rem 0;
}

.prose li > ul, .prose li > ol {
    margin: 0.25rem 0;
}

/* ─── Blockquotes ─── */

.prose blockquote {
    border-left: 4px solid oklch(var(--p) / 0.4);
    padding: 0.5rem 1rem;
    margin: 1rem 0;
    background: oklch(var(--b2) / 0.5);
    border-radius: 0 0.375rem 0.375rem 0;
    color: oklch(var(--bc) / 0.8);
    font-style: italic;
}

.prose blockquote p {
    margin: 0.25rem 0;
}

/* ─── Code ─── */

.prose code {
    font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.8125rem;
    padding: 0.125rem 0.375rem;
    background: oklch(var(--b3) / 0.6);
    border-radius: 0.25rem;
    color: oklch(var(--p));
}

.prose pre {
    margin: 1rem 0;
    padding: 1rem;
    background: oklch(var(--b2));
    border: 1px solid oklch(var(--b3));
    border-radius: 0.5rem;
    overflow-x: auto;
    line-height: 1.6;
}

.prose pre code {
    padding: 0;
    background: none;
    border-radius: 0;
    color: oklch(var(--bc) / 0.85);
    font-size: 0.8125rem;
}

/* ─── Tables ─── */

.prose table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
    font-size: 0.875rem;
    border: 1px solid oklch(var(--b3));
    border-radius: 0.5rem;
    overflow: hidden;
}

.prose thead {
    background: oklch(var(--b2));
}

.prose th {
    font-weight: 600;
    text-align: left;
    padding: 0.625rem 0.75rem;
    border: 1px solid oklch(var(--b3));
    color: oklch(var(--bc) / 0.8);
    font-size: 0.8125rem;
}

.prose td {
    padding: 0.5rem 0.75rem;
    border: 1px solid oklch(var(--b3));
    vertical-align: top;
}

.prose tbody tr:nth-child(even) {
    background: oklch(var(--b2) / 0.3);
}

.prose tbody tr:hover {
    background: oklch(var(--b2) / 0.6);
}

/* ─── Horizontal Rules ─── */

.prose hr {
    border: none;
    border-top: 1px solid oklch(var(--b3));
    margin: 2rem 0;
}

/* ─── Definition Lists ─── */

.prose dl {
    margin: 0.75rem 0;
}

.prose dt {
    font-weight: 600;
    margin-top: 0.75rem;
}

.prose dd {
    margin-left: 1.5rem;
    color: oklch(var(--bc) / 0.8);
}

/* ─── First heading in article (remove top margin) ─── */

.prose > h1:first-child,
.prose > h2:first-child,
.prose > h3:first-child {
    margin-top: 0;
}

/* ─── Print Styles ──────────────────────────────────────── */

@media print {
    /* Hide navigation, sidebar, composer, buttons */
    nav, .at-sidebar, .at-sidebar-mobile,
    .border-t.border-base-300, /* composer */
    .sticky.top-0 button, /* header buttons */
    .btn, select, input, .checkbox,
    .ql-toolbar, #quill-editor,
    .internal-note .text-warning,
    footer {
        display: none !important;
    }

    /* Full width for conversation */
    .grid.grid-cols-1.lg\:grid-cols-3 {
        display: block !important;
    }

    .lg\:col-span-2 {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Show content cleanly */
    body, .bg-base-100 {
        background: white !important;
        color: black !important;
    }

    .at-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    .max-h-\[55vh\] {
        max-height: none !important;
        overflow: visible !important;
    }

    .sticky {
        position: static !important;
    }

    /* Quote print styles */
    .at-quote-tabs,
    .at-quote-toolbar,
    .at-quote-actions,
    .quote-section-drag-handle,
    .quote-item-drag-handle,
    .tabs,
    .fixed.bottom-0,
    .modal {
        display: none !important;
    }

    .at-quote-section-body {
        display: block !important;
    }

    .at-quote-tab-content {
        display: block !important;
    }

    .at-quote-section {
        break-inside: avoid;
        margin-bottom: 1rem;
    }

    .at-quote-totals {
        break-inside: avoid;
        border-top: 2px solid #333;
        margin-top: 1rem;
        padding-top: 0.5rem;
    }
}

/* ─── Frappe Gantt Overrides ──────────────────────────────── */

.gantt-container {
    overflow-x: auto;
    border: 1px solid oklch(var(--b3));
    border-radius: 0.5rem;
    background: oklch(var(--b1));
}

.gantt .bar-wrapper .bar {
    rx: 4;
    ry: 4;
}

.gantt .grid-header {
    fill: oklch(var(--b2));
}

.gantt .grid-row {
    fill: oklch(var(--b1));
}

.gantt .grid-row:nth-child(even) {
    fill: oklch(var(--b2) / 0.3);
}

.gantt .row-line {
    stroke: oklch(var(--b3));
}

.gantt .tick {
    stroke: oklch(var(--b3) / 0.5);
}

.gantt .today-highlight {
    fill: oklch(var(--p) / 0.08);
}

.gantt .lower-text, .gantt .upper-text {
    fill: oklch(var(--bc) / 0.6);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
}

.gantt .bar-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
}

.gantt .bar-wrapper:hover .bar {
    filter: brightness(0.92);
}

.gantt .bar-wrapper .bar-progress {
    fill: oklch(var(--p) / 0.4);
}

.gantt .handle-group .handle {
    fill: oklch(var(--p));
    cursor: ew-resize;
}

.gantt .handle-group .handle.progress {
    fill: oklch(var(--su));
}

/* Status-based bar colors */
.gantt .gantt-not-started .bar {
    fill: oklch(var(--bc) / 0.15);
}
.gantt .gantt-not-started .bar-progress {
    fill: oklch(var(--bc) / 0.25);
}

.gantt .gantt-in-progress .bar {
    fill: oklch(var(--in));
}
.gantt .gantt-in-progress .bar-progress {
    fill: oklch(var(--in) / 0.6);
}

.gantt .gantt-on-hold .bar {
    fill: oklch(var(--wa));
}
.gantt .gantt-on-hold .bar-progress {
    fill: oklch(var(--wa) / 0.6);
}

.gantt .gantt-completed .bar {
    fill: oklch(var(--su));
}
.gantt .gantt-completed .bar-progress {
    fill: oklch(var(--su) / 0.6);
}

.gantt .gantt-not-applicable .bar {
    fill: oklch(var(--bc) / 0.08);
}

/* Dependency arrows */
.gantt .arrow {
    stroke: oklch(var(--p) / 0.5);
    stroke-width: 1.5;
    fill: oklch(var(--p) / 0.5);
}

/* Popup */
.gantt .popup-wrapper {
    z-index: 50;
}

.gantt .popup-wrapper .pointer {
    display: none;
}

.gantt .popup-wrapper .title {
    display: none;
}

.gantt .popup-wrapper .popup {
    background: oklch(var(--b1));
    border: 1px solid oklch(var(--b3));
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15);
    color: oklch(var(--bc));
    padding: 0;
}

/* Dark theme adjustments */
[data-theme="atlas-dark"] .gantt .bar-label {
    fill: oklch(var(--bc)) !important;
}

[data-theme="atlas-dark"] .gantt .popup-wrapper .popup {
    background: oklch(var(--b2));
}

/* Frappe Gantt SVG background override */
.gantt svg {
    background: transparent !important;
}

[data-theme="atlas-dark"] .gantt .grid-header {
    fill: oklch(var(--b2));
}

[data-theme="atlas-dark"] .gantt .grid-row {
    fill: oklch(var(--b1));
}

[data-theme="atlas-dark"] .gantt .grid-row:nth-child(even) {
    fill: oklch(var(--b2) / 0.2);
}

[data-theme="atlas-dark"] .gantt .row-line {
    stroke: oklch(var(--bc) / 0.1);
}

[data-theme="atlas-dark"] .gantt .tick {
    stroke: oklch(var(--bc) / 0.08);
}

[data-theme="atlas-dark"] .gantt .lower-text,
[data-theme="atlas-dark"] .gantt .upper-text {
    fill: oklch(var(--bc) / 0.7);
}

[data-theme="atlas-dark"] .gantt .today-highlight {
    fill: oklch(var(--p) / 0.12);
}

[data-theme="atlas-dark"] .gantt .arrow {
    stroke: oklch(var(--p) / 0.6);
    fill: oklch(var(--p) / 0.6);
}

[data-theme="atlas-dark"] .gantt .handle-group .handle {
    fill: oklch(var(--p) / 0.8);
}

/* ─── FullCalendar Overrides ──────────────────────────────── */

.fc {
    font-family: 'Inter', sans-serif;
    --fc-border-color: oklch(var(--b3));
    --fc-page-bg-color: oklch(var(--b1));
    --fc-neutral-bg-color: oklch(var(--b2));
    --fc-today-bg-color: oklch(var(--p) / 0.05);
    --fc-event-border-color: transparent;
    --fc-now-indicator-color: oklch(var(--er));
    --fc-button-bg-color: oklch(var(--b2));
    --fc-button-border-color: oklch(var(--b3));
    --fc-button-text-color: oklch(var(--bc));
    --fc-button-hover-bg-color: oklch(var(--b3));
    --fc-button-hover-border-color: oklch(var(--b3));
    --fc-button-active-bg-color: oklch(var(--p));
    --fc-button-active-border-color: oklch(var(--p));
    --fc-button-active-text-color: oklch(var(--pc));
}

.fc .fc-button {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.375rem;
    font-weight: 500;
}

.fc .fc-toolbar-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: oklch(var(--bc));
}

.fc .fc-col-header-cell-cushion {
    color: oklch(var(--bc) / 0.7);
    font-weight: 500;
    font-size: 0.8rem;
}

.fc .fc-timegrid-slot-label-cushion {
    font-size: 0.75rem;
    color: oklch(var(--bc) / 0.5);
}

.fc .fc-event {
    border-radius: 4px;
    font-size: 0.75rem;
    padding: 1px 4px;
    cursor: pointer;
}

.fc .fc-event:hover {
    filter: brightness(0.9);
}

.fc .fc-event .fc-event-title {
    font-weight: 500;
}

.fc .fc-daygrid-event-dot {
    border-color: inherit;
}

.fc .fc-list-event:hover td {
    background-color: oklch(var(--b2));
}

.fc .fc-list-day-cushion {
    background-color: oklch(var(--b2));
}

.fc-theme-standard td,
.fc-theme-standard th {
    border-color: oklch(var(--b3));
}

.fc .fc-scrollgrid {
    border-color: oklch(var(--b3));
}

/* WhatsApp compacted conversation styles */
.wf-whatsapp-session { display: flex; flex-direction: column; gap: 0.5rem; }
.wf-chat-message { padding: 0.5rem 0.75rem; border-radius: 0.5rem; max-width: 80%; }
.wf-chat-customer { background-color: oklch(var(--b2)); align-self: flex-start; }
.wf-chat-agent { background-color: oklch(var(--su) / 0.15); align-self: flex-end; }
.wf-chat-sender { font-weight: 600; font-size: 0.75rem; color: oklch(var(--bc)); }
.wf-chat-time { font-size: 0.625rem; color: oklch(var(--bc) / 0.5); margin-left: 0.5rem; }
.wf-chat-message p { margin: 0.25rem 0 0; font-size: 0.875rem; color: oklch(var(--bc)); }
.wf-chat-attachment { font-size: 0.75rem; color: oklch(var(--bc) / 0.6); }
.wf-chat-attachment a { color: oklch(var(--p)); text-decoration: underline; }

/* Project drag and drop feedback */
.at-sortable-ghost {
    opacity: 0.35 !important;
    background: oklch(var(--p) / 0.08) !important;
}

.at-sortable-chosen {
    box-shadow: 0 0 0 1px oklch(var(--p) / 0.35), 0 18px 35px -24px oklch(var(--p) / 0.65);
}

.at-sortable-drag {
    opacity: 0.98 !important;
    transform: rotate(0.5deg) scale(1.01);
}

.project-stage-card {
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.project-stage-card.at-drop-before {
    box-shadow: inset 0 3px 0 oklch(var(--p));
}

.project-stage-card.at-drop-after {
    box-shadow: inset 0 -3px 0 oklch(var(--p));
}

.project-stage-card.at-task-dropzone-active {
    border-color: oklch(var(--p) / 0.45);
    background-image: linear-gradient(180deg, oklch(var(--p) / 0.05), transparent 28%);
}

.project-task-row > td {
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.project-task-row.at-drop-before > td {
    border-top: 2px solid oklch(var(--p));
    background-color: oklch(var(--p) / 0.08);
}

.project-task-row.at-drop-after > td {
    border-bottom: 2px solid oklch(var(--p));
    background-color: oklch(var(--p) / 0.08);
}

.stage-drag-handle,
.task-drag-handle {
    touch-action: none;
    user-select: none;
}

/* Mention styling */
.at-mention {
    color: oklch(var(--p));
    font-weight: 600;
}

/* Customer portal — message bubble HTML reset.
   Quill ships rich-text content with <p>, <ol>, <ul>, <a> wrappers and we
   render it inside colored chat bubbles. Tailwind Typography (`prose`) was
   adding huge top/bottom margins on every paragraph and forcing its own
   color, which broke the layout (text wrapping weird, list markers far
   from items, contrast killed inside the primary bubble). This minimal
   reset keeps the bubble's text color, removes the chunky margins, and
   only restores the bits we actually want. */
.at-portal-message { line-height: 1.5; }
.at-portal-message p { margin: 0 0 0.5em 0; }
.at-portal-message p:last-child { margin-bottom: 0; }
.at-portal-message ol,
.at-portal-message ul { margin: 0.25em 0 0.5em 1.25em; padding: 0; }
.at-portal-message ol { list-style: decimal; }
.at-portal-message ul { list-style: disc; }
.at-portal-message li { margin: 0.15em 0; }
.at-portal-message a { text-decoration: underline; color: inherit; }
.at-portal-message strong { font-weight: 600; }
.at-portal-message em { font-style: italic; }
.at-portal-message img { max-width: 100%; height: auto; border-radius: 6px; margin: 0.25em 0; }
.at-portal-message pre,
.at-portal-message code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    background: rgba(0, 0, 0, 0.08);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}
.at-portal-message pre { padding: 0.6em 0.9em; overflow-x: auto; }

/* DevTrack task detail — rich text inside the narrow ticket sidebar.
   The global .prose scale (15px, roomy line-height) is tuned for the wide
   message column; the sidebar column is ~320px wide, so we shrink the type
   and give paragraphs/blocks real separation instead of the 0.25rem gap
   that made everything read as one glued block. */
.at-devtrack-prose {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: oklch(var(--bc) / 0.85);
    overflow-wrap: anywhere;
}
/* O HTML e de terceiro (editor do DevTrack) e pode chegar com font-size INLINE,
   que ganha de qualquer regra normal. O !important abaixo e o unico jeito de
   garantir que o texto caiba na coluna estreita da sidebar. Nao mexe em
   font-family para nao matar o monospace de code/pre logo adiante. */
.at-devtrack-prose,
.at-devtrack-prose * {
    font-size: 0.8125rem !important;
    line-height: 1.55 !important;
}
.at-devtrack-prose pre,
.at-devtrack-prose pre *,
.at-devtrack-prose code,
.at-devtrack-prose table,
.at-devtrack-prose table * {
    font-size: 0.75rem !important;
}
.at-devtrack-prose > :first-child { margin-top: 0 !important; }
.at-devtrack-prose > :last-child { margin-bottom: 0 !important; }
.at-devtrack-prose p { margin: 0 0 0.65em 0; }
.at-devtrack-prose h1,
.at-devtrack-prose h2,
.at-devtrack-prose h3,
.at-devtrack-prose h4,
.at-devtrack-prose h5,
.at-devtrack-prose h6 {
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 1em 0 0.35em;
    color: oklch(var(--bc));
    line-height: 1.4;
    border: none;
    padding: 0;
}
.at-devtrack-prose strong { font-weight: 600; color: oklch(var(--bc)); }
.at-devtrack-prose a {
    color: oklch(var(--p));
    text-decoration: underline;
    text-underline-offset: 2px;
}
.at-devtrack-prose ul,
.at-devtrack-prose ol { margin: 0.35em 0 0.65em; padding-left: 1.25rem; }
.at-devtrack-prose ul { list-style: disc; }
.at-devtrack-prose ol { list-style: decimal; }
.at-devtrack-prose li { margin: 0.2em 0; }
.at-devtrack-prose li > ul,
.at-devtrack-prose li > ol { margin: 0.2em 0; }
.at-devtrack-prose blockquote {
    border-left: 3px solid oklch(var(--p) / 0.4);
    padding: 0.25rem 0.65rem;
    margin: 0.65em 0;
    color: oklch(var(--bc) / 0.75);
}
.at-devtrack-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    margin: 0.5em 0;
}
.at-devtrack-prose pre,
.at-devtrack-prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    background: oklch(var(--b3) / 0.6);
    border-radius: 4px;
}
.at-devtrack-prose code { padding: 0.1em 0.35em; }
.at-devtrack-prose pre { padding: 0.5em 0.75em; overflow-x: auto; margin: 0.65em 0; }
.at-devtrack-prose pre code { padding: 0; background: none; }
.at-devtrack-prose table {
    font-size: 0.75rem;
    margin: 0.65em 0;
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
}
.at-devtrack-prose th,
.at-devtrack-prose td {
    border: 1px solid oklch(var(--b3));
    padding: 0.25rem 0.5rem;
}

/* Email template placeholder pills */
.wf-placeholder {
    display: inline-block;
    background: oklch(var(--p));
    color: #ffffff;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    cursor: default;
    user-select: none;
    vertical-align: baseline;
}

/* ─── Atlas Logo ──────────────────────────────────────────── */
.at-logo { display: inline-flex; align-items: center; gap: .55rem; --logo-a: #1B6B73; --logo-cu: #B5652F; --logo-text: #134A51; }
[data-theme="atlas-dark"] .at-logo, .at-logo.at-logo-on-dark { --logo-a: #8FD0D6; --logo-cu: #D98E5C; --logo-text: #E0E8E8; }
.at-logo .at-logo-a { fill: var(--logo-a); }
.at-logo .at-logo-ring { stroke: var(--logo-cu); }
.at-logo .at-logo-ring-back { stroke: var(--logo-cu); opacity: .5; }
.at-logo-wordmark { font-family: 'Unbounded', 'Inter', sans-serif; font-weight: 600; letter-spacing: .06em; line-height: 1; color: var(--logo-text); }