:root {
    --ink: #0A1628;
    --ink-soft: #3D4B5C;
    --paper: #F3F5F8;
    --white: #FFFFFF;
    --line: #E2E8F0;
    --accent: #F06716;
    --accent-deep: #D4550E;
    --mint: #7CBB00;
    --coral: #E25B4C;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

html, body, #app {
    background-color: var(--paper);
    background-image:
        var(--grain),
        repeating-linear-gradient(to bottom, transparent 0 27px, rgba(10, 22, 40, 0.028) 27px 28px);
    background-size: 160px 160px, 100% 28px;
    background-attachment: fixed;
    color: var(--ink);
    font-family: "Figtree", sans-serif;
    --mud-typography-default-family: "Figtree", sans-serif;
    --mud-typography-h1-family: "Figtree", sans-serif;
    --mud-typography-h2-family: "Figtree", sans-serif;
    --mud-typography-h3-family: "Figtree", sans-serif;
    --mud-typography-h4-family: "Figtree", sans-serif;
    --mud-typography-h5-family: "Figtree", sans-serif;
    --mud-typography-h6-family: "Figtree", sans-serif;
    --mud-typography-subtitle1-family: "Figtree", sans-serif;
    --mud-typography-subtitle2-family: "Figtree", sans-serif;
    --mud-typography-body1-family: "Figtree", sans-serif;
    --mud-typography-body2-family: "Figtree", sans-serif;
    --mud-typography-button-family: "Figtree", sans-serif;
    --mud-typography-caption-family: "Figtree", sans-serif;
    --mud-typography-overline-family: "Figtree", sans-serif;
}

.mud-typography,
.mud-table,
.mud-table-root,
.mud-table-cell,
.mud-table-head,
.mud-table-body,
.mud-table-foot,
.mud-table-sort-label,
.mud-table-pagination,
.mud-chip,
.mud-input,
.mud-input input,
.mud-input textarea,
.mud-select,
.mud-button-root,
.mud-nav-link,
.mud-breadcrumbs {
    font-family: "Figtree", sans-serif !important;
}

.drt-app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 6px;
}

.drt-app-mark,
.drt-mark {
    width: 28px;
    height: 28px;
    display: block;
    flex-shrink: 0;
}

.drt-app-wordmark {
    font-family: "Figtree", sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    font-size: 1.05rem !important;
    color: var(--ink) !important;
}

.drt-app-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
    flex-shrink: 0;
}

.drt-appbar.mud-appbar {
    background: rgba(243, 245, 248, 0.72) !important;
    color: var(--ink) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    box-shadow: none !important;
}

.drt-appbar-rule {
    width: 1px;
    height: 20px;
    background: var(--line);
    margin: 0 8px;
}

.drt-appbar-select {
    color: var(--ink);
    min-width: 220px;
    max-width: 280px;
    margin-left: 16px;
}

.drt-appbar-select .mud-input-outlined-border {
    border-color: var(--line) !important;
}

.drt-appbar-select .mud-input {
    color: var(--ink) !important;
    font-weight: 600;
}

.drt-appbar-user {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
}

.drt-appbar-username {
    color: var(--ink-soft) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.drt-drawer {
    border-right: 1px solid var(--line) !important;
    background: var(--white) !important;
}

.drt-drawer .mud-nav-link {
    font-weight: 600;
    border-radius: 10px;
}

.drt-drawer .mud-nav-link.active,
.drt-drawer .mud-nav-link.mud-nav-link-active {
    color: var(--accent) !important;
    background: rgba(240, 103, 22, 0.08) !important;
}

.drt-drawer .mud-nav-group-title {
    font-weight: 700;
    letter-spacing: 0;
}

.drt-main {
    background: transparent;
}

.drt-main-inner {
    padding: 16px 20px 24px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    min-height: calc(100dvh - 56px);
    padding-bottom: max(24px, env(safe-area-inset-bottom));
}
/* Identidade do DRT.SGI.Web; carregado após os estilos legados do Talk. */
.drt-app-mark { width: auto; height: 32px; object-fit: contain; }
.drt-shell, .drt-main { min-width: 0; max-width: 100%; }
.drt-shell .drt-main { padding-top: var(--mud-appbar-height) !important; }
.drt-main-inner { padding: 16px 20px 24px; }
.drt-drawer .mud-nav-link { margin-bottom: 4px; }
.drt-drawer.mud-drawer--closed .mud-nav-link-expand-icon { display: none; }
.ant-layout, .ant-input, .ant-select, .ant-btn, .ant-modal, .ant-tabs, .ant-table, .ant-form, .ant-statistic { font-family: 'Figtree', 'Segoe UI', sans-serif; color: var(--ink); }
.ant-btn-primary { background: var(--accent); border-color: var(--accent); }
.ant-btn-primary:hover, .ant-btn-primary:focus { background: var(--accent-deep); border-color: var(--accent-deep); }
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn, .ant-tabs-tab:hover { color: var(--accent); }
.ant-tabs-ink-bar { background: var(--accent); }
.ant-input:focus, .ant-input-affix-wrapper-focused, .ant-select-focused .ant-select-selector { border-color: var(--accent) !important; box-shadow: 0 0 0 2px #f067161a !important; }
.ant-input, .ant-input-affix-wrapper, .ant-btn, .ant-select-selector, .ant-modal-content, .mud-paper { border-radius: 12px; }
.drt-main-inner .atendimento-wrapper { height: calc(100dvh - var(--mud-appbar-height) - 40px); min-height: 360px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.atendimento-wrapper .chat-list-sider { width: 320px; max-width: 38%; border-color: var(--line); }
.atendimento-wrapper .chat-list { flex: 1; height: auto; min-height: 0; }
.atendimento-wrapper .chat-content { min-width: 0; background: var(--paper); }
.chat-item.active { background: #fff1e8; box-shadow: inset 3px 0 var(--accent); }
.chat-item:hover { background: #f8fafc; }
.chat-item-name, .chat-header-name { color: var(--ink); font-weight: 600; }
.chat-item-time, .chat-item-preview, .chat-header-phone { color: var(--ink-soft); }
.message.sent { background: #fff1e8; }
.message.bot { background: #eaf0f6; }
.chat-messages { min-height: 0; }
.chat-header-actions, .chat-input { flex-shrink: 0; }
.chat-input textarea { min-width: 0; }
.chat-item .ant-avatar, .chat-header .ant-avatar { background: var(--ink) !important; }
.drt-auth.login-container { background: var(--paper); padding: 48px; gap: 48px; align-items: center; min-height: 100dvh; height: auto; }
.drt-auth .login-image-section { background: transparent; min-height: 360px; }
.drt-auth .login-image-overlay { position: static; background: transparent; }
.drt-auth .login-brand-content { text-align: left; }
.talk-login-logo { width: min(320px, 70vw); height: auto; margin-bottom: 32px; }
.drt-auth .login-tagline { color: var(--ink); font-weight: 700; letter-spacing: -1px; text-transform: none; }
.drt-auth .login-subtitle { color: var(--ink-soft); font-weight: 400; }
.drt-auth .login-form-section { flex-basis: 420px; width: 420px; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 16px 48px #0a16280a; }
.lgpd-banner { background: var(--ink); }
@media (max-width: 960px) {
    .drt-main-inner { padding: 12px; }
    .drt-main-inner .atendimento-wrapper { height: calc(100dvh - var(--mud-appbar-height) - 24px); }
    .atendimento-wrapper .chat-list-sider { width: 260px !important; max-width: 38% !important; }
    .chat-header { flex-wrap: wrap; gap: 8px; }
    .drt-auth.login-container { padding: 24px; gap: 16px; flex-direction: column; }
    .drt-auth .login-image-section { min-height: auto; flex: auto; }
    .drt-auth .login-form-section { flex: auto; width: min(100%, 420px); }
}
@media (max-width: 600px) {
    .drt-appbar-username, .drt-appbar-rule { display: none; }
    .drt-app-wordmark { font-size: .9rem !important; }
    .atendimento-wrapper { flex-direction: column; }
    .atendimento-wrapper .chat-list-sider { width: 100% !important; max-width: 100% !important; height: 38%; border-bottom: 1px solid var(--line); }
    .atendimento-wrapper .chat-content { min-height: 0; }
    .chat-list-header, .chat-input { padding: 8px; }
    .chat-header .ant-avatar { display: none; }
    .message { max-width: 90%; }
}
/* Editor e ferramentas de atendimento usam os mesmos tokens do SGI. */
.talk-config { max-width: 1200px; margin: auto; }
.talk-config h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 8px; }
.talk-config h2 { font-size: 1.15rem; font-weight: 700; margin: 0; }
.talk-config h3 { font-size: 1rem; font-weight: 600; margin: 0; }
.talk-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin: 16px 0; }
.talk-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin: 10px 0; }
.talk-row h2, .talk-row h3, .talk-flow-row>div { flex:1; }
.talk-flow-row { padding:12px 0; border-bottom:1px solid var(--line); }
.talk-flow-row small { display:block; color:var(--ink-soft); }
.talk-config label, .talk-tools label { display:block; font-size:.85rem; font-weight:600; margin:12px 0; }
.talk-config input:not([type=checkbox]), .talk-config select, .talk-config textarea,
.talk-tools input, .talk-tools select, .talk-tools textarea { display:block; width:100%; min-width:0; padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:white; font:inherit; color:var(--ink); margin-top:5px; }
.talk-config input[type=checkbox] { accent-color:var(--accent); }
.talk-config button, .talk-tools button { border:1px solid var(--line); background:white; color:var(--ink); border-radius:8px; padding:8px 12px; cursor:pointer; font:inherit; }
.talk-config button:disabled, .talk-tools button:disabled { opacity:.5; cursor:default; }
.talk-config .talk-primary, .talk-tools .talk-primary { background:var(--accent); border-color:var(--accent); color:white; }
.talk-step { border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; padding:16px; margin:16px 0; }
.talk-option { padding:12px; margin:12px 0; background:var(--paper); border-radius:10px; }
.talk-option .talk-row label { flex:1; }
.talk-error { background:#fff1f0; color:#962d22; border:1px solid #f5c5bd; border-radius:8px; padding:12px; white-space:pre-line; margin:12px 0; }
.talk-preview { background:var(--paper); padding:16px; border-radius:10px; margin-top:16px; max-height:450px; overflow:auto; }
.talk-preview p { border-bottom:1px solid var(--line); padding:10px; }
.talk-tools { background:var(--white); border:1px solid var(--line); padding:12px; border-radius:12px; margin-bottom:12px; }
.message.internal { background:#fff5cf; border:1px dashed #c9a533; align-self:stretch; max-width:100%; }
.message.failed, .message.uncertain { border:1px solid var(--coral); }
.talk-context { max-height:250px; overflow:auto; white-space:pre-wrap; }
@media(max-width:600px){.talk-card{padding:12px}.talk-step{padding:10px}.talk-row{gap:8px}}
.atendimento-wrapper.talk-inbox { display:flex; height:calc(100dvh - var(--mud-appbar-height) - 160px); min-height:420px; overflow:hidden; }
.talk-inbox .chat-list-sider { display:flex;flex-direction:column;flex-shrink:0; }
.talk-inbox .chat-content { display:flex;flex-direction:column;flex:1;overflow:hidden; }
.talk-inbox .talk-tools { flex-shrink:0; }
.talk-inbox .talk-tools label { margin:0; }
.talk-inbox .talk-tools select { width:auto;max-width:100%; }
.talk-inbox .talk-tools input[type=checkbox] { display:inline;width:auto; }
.talk-inbox .talk-tools textarea { margin:4px 0; }
@media(max-width:600px){.atendimento-wrapper.talk-inbox{flex-direction:column;height:calc(100dvh - var(--mud-appbar-height) - 180px);min-height:650px}.talk-inbox .chat-list-sider{height:25%}}
.talk-metrics .talk-card { flex:1; min-width:140px; }