@tailwind base;
@tailwind components;
@tailwind utilities;

/* ------------------------------------------------------------------ base */
@layer base {
    html {
        -webkit-text-size-adjust: 100%;
    }
    body {
        font-feature-settings: "cv02", "cv03", "cv04";
    }
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    ::-webkit-scrollbar-thumb {
        background: rgba(100, 116, 139, 0.35);
        border-radius: 8px;
        border: 2px solid transparent;
        background-clip: content-box;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(100, 116, 139, 0.6);
        background-clip: content-box;
    }
    ::-webkit-scrollbar-track {
        background: transparent;
    }
    :focus-visible {
        outline: 2px solid rgba(99, 102, 241, 0.6);
        outline-offset: 1px;
    }
}

/* ------------------------------------------- corpo das mensagens de e-mail */
@layer components {
    .config-shell {
        @apply rounded-2xl border border-slate-200 bg-white shadow-sm shadow-slate-200/60;
    }
    .config-panel {
        @apply rounded-2xl border border-slate-200 bg-white p-4 shadow-sm shadow-slate-200/50;
    }
    .config-section {
        @apply rounded-xl border border-slate-200 bg-slate-50/80 p-4;
    }
    .config-section-header {
        @apply mb-4 flex items-center justify-between gap-2 border-b border-slate-200 pb-2;
    }
    .config-section-title {
        @apply text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500;
    }
    .config-grid {
        @apply grid gap-4 md:grid-cols-2;
    }
    .config-field {
        @apply block text-sm text-slate-700;
    }
    .config-field > span,
    .config-field > label {
        @apply mb-1.5 block text-sm font-medium text-slate-700;
    }
    .config-input,
    .config-select,
    .config-textarea {
        @apply mt-1.5 w-full rounded-xl border border-slate-200 bg-slate-50/80 px-3 py-2.5 text-sm text-slate-800 shadow-inner shadow-slate-100/40 transition placeholder:text-slate-400 focus:border-indigo-400 focus:bg-white focus:outline-none focus:ring-4 focus:ring-indigo-100;
    }
    .config-select,
    .config-textarea {
        @apply appearance-none;
    }
    .config-textarea {
        @apply min-h-[110px] resize-y;
    }
    .config-action {
        @apply inline-flex items-center justify-center rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition hover:bg-indigo-500 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-indigo-200;
    }
    .config-secondary {
        @apply inline-flex items-center justify-center rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-slate-200;
    }
    .config-danger {
        @apply inline-flex items-center justify-center rounded-xl border border-red-200 bg-red-50 px-3.5 py-2 text-sm font-medium text-red-700 transition hover:bg-red-100;
    }
    .config-badge {
        @apply inline-flex items-center rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-medium text-slate-600;
    }

    .msg-body {
        @apply text-sm leading-relaxed text-slate-800 break-words;
    }
    .msg-body p {
        @apply mb-2 last:mb-0;
    }
    .msg-body a {
        @apply text-indigo-600 underline underline-offset-2 hover:text-indigo-800;
    }
    .msg-body img {
        @apply my-2 max-w-full rounded;
        height: auto;
    }
    .msg-body blockquote {
        @apply my-2 border-l-4 border-slate-300 pl-3 text-slate-500;
    }
    .msg-body pre {
        @apply my-2 overflow-x-auto rounded bg-slate-100 p-3 text-xs;
        white-space: pre-wrap;
        word-break: break-word;
    }
    .msg-body code {
        @apply rounded bg-slate-100 px-1 py-0.5 text-[13px];
    }
    .msg-body table {
        @apply my-2 w-full border-collapse text-xs;
    }
    .msg-body th,
    .msg-body td {
        @apply border border-slate-200 px-2 py-1 text-left;
    }
    .msg-body ul {
        @apply my-2 list-disc pl-5;
    }
    .msg-body ol {
        @apply my-2 list-decimal pl-5;
    }
    .msg-body hr {
        @apply my-3 border-slate-200;
    }
    .msg-body font {
        color: inherit;
    }

    /* área de leitura confortável */
    #messages {
        scrollbar-gutter: stable;
    }

    /* responsivo: alterna lista x thread */
    body[data-view='thread'] #list-pane {
        display: none;
    }
    body[data-view='thread'] #thread-pane {
        display: flex;
    }
    body[data-view='list'] #crm {
        display: none;
    }
    @media (max-width: 767px) {
        body[data-view='list'] #thread-pane {
            display: none;
        }
        body[data-view='thread'] #crm {
            display: none;
        }
    }
}

@layer utilities {
    .animate-in-fast {
        animation: fadeIn 0.15s ease-out;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}