/* ════════════════════════════════════════════════════════════════════════════
   PROMPTLAB · REDESIGN 2026
   Design system novo, carregado por último (sobrepõe o visual antigo).
   Inspiração: AI Autoreply. Research-driven: tabs = uso diário, gestão = hub "Mais".
   NÃO toca em backend/JS/IDs — só visual + posições + navegação.
   Para reverter: remover <link redesign.css> e <script redesign.js> do index.html.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. TOKENS (prefixados --rd-* p/ não colidir; --accent reutilizado, user-custom) ─── */
:root {
    --rd-bg: #000000;
    --rd-surface: rgba(28, 28, 30, 0.85);
    --rd-surface-2: rgba(255, 255, 255, 0.07);
    --rd-surface-3: rgba(255, 255, 255, 0.04);
    --rd-border: rgba(255, 255, 255, 0.10);
    --rd-border-2: rgba(255, 255, 255, 0.06);

    --rd-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Plus Jakarta Sans', sans-serif;
    --rd-text: #ffffff;
    --rd-text-2: rgba(255, 255, 255, 0.55);
    --rd-text-3: rgba(255, 255, 255, 0.35);
    --rd-label: rgba(255, 255, 255, 0.40);

    /* accent fallback — JS pode sobrepor inline com a cor do user */
    --rd-accent: var(--accent, #007AFF);

    --rd-green: #30D158;
    --rd-orange: #FF9F0A;
    --rd-red: #FF3B30;

    --rd-r-card: 16px;
    --rd-r-row: 12px;
    --rd-r-btn: 12px;
    --rd-r-chip: 20px;
    --rd-blur: 20px;
    --rd-px: 16px;
    --rd-tabbar-h: 56px;
}

/* ─── 2. BASE ─── */
body {
    font-family: var(--rd-font) !important;
    background: var(--rd-bg) !important;
    color: var(--rd-text) !important;
}
body, button, input, textarea, select {
    font-family: var(--rd-font) !important;
}
/* Matar decorações antigas */
.ambient-glow, .void-vignette { display: none !important; }

/* ─── 3. REMOVER HEADER GLOBAL (sem logo, sem smart-btn) ─── */
.navbar { display: none !important; }
/* Em modo agenda/chat o header já era escondido — garantir que fica escondido sempre */

/* ─── 4. LAYOUT — views full-bleed, espaço p/ tab bar ─── */
main { padding: 0 !important; }
.app-view {
    padding-bottom: calc(var(--rd-tabbar-h) + env(safe-area-inset-bottom) + 8px) !important;
}
/* O header antigo deixou de existir → recuperar o topo das views */
#view-assistant .assistant-view-container,
#view-products .products-container,
#view-home .stream-container {
    padding-top: calc(env(safe-area-inset-top) + 14px) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   5. BOTTOM TAB BAR (transforma .obsidian-nav em tab bar full-width)
   ════════════════════════════════════════════════════════════════════════════ */
.dock-container { pointer-events: none; }

.obsidian-nav {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(var(--rd-tabbar-h) + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(0, 0, 0, 0.82) !important;
    backdrop-filter: blur(var(--rd-blur)) saturate(160%) !important;
    -webkit-backdrop-filter: blur(var(--rd-blur)) saturate(160%) !important;
    box-shadow: none !important;
    gap: 0 !important;
    justify-content: space-around !important;
    pointer-events: auto;
}

/* Itens da tab bar */
.obsidian-nav .nav-item {
    flex: 1 1 0 !important;
    width: auto !important;
    height: 100% !important;
    flex-direction: column !important;
    gap: 3px !important;
    color: var(--rd-text-3) !important;
    padding: 6px 0 !important;
    transition: color 0.18s ease, transform 0.12s ease !important;
}
/* Esconder qualquer nav-item sem a classe nav-tab (ex: produtos/home antigos) */
.obsidian-nav .nav-item:not(.nav-tab) { display: none !important; }

.obsidian-nav .nav-item .nav-icon {
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    display: flex; align-items: center; justify-content: center;
}
.obsidian-nav .nav-item .nav-icon svg {
    width: 24px !important; height: 24px !important;
    stroke: currentColor !important;
    fill: none !important;
    transition: transform 0.12s ease;
}
.obsidian-nav .nav-label {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px;
    color: currentColor !important;
    line-height: 1 !important;
}

/* Estado activo */
.obsidian-nav .nav-item.active {
    color: var(--rd-accent) !important;
}
.obsidian-nav .nav-item.active .nav-icon svg { transform: translateY(-1px); }
.obsidian-nav .nav-item:active { transform: scale(0.94); }

/* Dot de notificação (WhatsApp desconectado) na tab Mais */
.nav-tab-more { position: relative; }
.nav-tab-dot {
    position: absolute;
    top: 6px;
    right: calc(50% - 18px);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--rd-red);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.6);
}

/* ─── 5b. VISIBILIDADE DE TABS POR SERVICE TYPE ─── */
/* Default (AI Complete): Chat · Assistente · Agenda · Mais (4) */
/* Bot: esconde Assistente → Chat · Agenda · Mais */
body.bot-mode .obsidian-nav .nav-item.nav-tab[data-target="view-assistant"] { display: none !important; }
/* AI Chat: esconde Agenda → Chat · Assistente · Mais */
body.ai-chat-mode .obsidian-nav .nav-item.nav-tab[data-target="view-agenda"] { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════════
   6. HEADER INTERNO DE VIEW (título + acção) — componente reutilizável
   ════════════════════════════════════════════════════════════════════════════ */
.rd-view-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: calc(env(safe-area-inset-top) + 10px) var(--rd-px) 10px;
    position: sticky; top: 0; z-index: 20;
    background: linear-gradient(to bottom, rgba(0,0,0,0.92) 60%, rgba(0,0,0,0));
}
.rd-view-title { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; color: var(--rd-text); }
.rd-header-action {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--rd-surface-2); border: 1px solid var(--rd-border);
    color: var(--rd-accent); cursor: pointer; flex-shrink: 0;
}
.rd-header-action:active { transform: scale(0.92); }
.rd-header-action svg { width: 20px; height: 20px; }

/* ════════════════════════════════════════════════════════════════════════════
   7. COMPONENTES BASE (cards, rows, sections, buttons, toggles, chips, inputs)
   ════════════════════════════════════════════════════════════════════════════ */

/* Section label uppercase */
.section-label, .ios-section-title, .rd-label {
    font-size: 11px !important; font-weight: 600 !important;
    color: var(--rd-label) !important;
    text-transform: uppercase !important; letter-spacing: 0.8px !important;
    margin: 0 0 8px 4px !important; padding: 0 !important;
}

/* Card / grupo */
.rd-card,
.ios-group,
.assistant-config-card,
.svc-mode-grid {
    background: var(--rd-surface) !important;
    backdrop-filter: blur(var(--rd-blur)) !important;
    -webkit-backdrop-filter: blur(var(--rd-blur)) !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: var(--rd-r-card) !important;
    overflow: hidden !important;
}
.ios-section { margin-bottom: 22px !important; }

/* Rows */
.ios-row {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--rd-border-2) !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    display: flex !important; align-items: center !important; gap: 12px !important;
    transition: background 0.15s ease;
}
.ios-group > .ios-row:last-child { border-bottom: none !important; }
.ios-row:active { background: var(--rd-surface-3) !important; }
.ios-row-title { font-size: 16px !important; font-weight: 500 !important; color: var(--rd-text) !important; }
.ios-row-subtitle { font-size: 13px !important; color: var(--rd-text-3) !important; margin-top: 2px !important; }
.ios-row-chevron { width: 18px !important; height: 18px !important; color: var(--rd-text-3) !important; flex-shrink: 0; }

/* Botões */
.rd-btn, .product-form-btn, .submit-btn {
    border-radius: var(--rd-r-btn) !important;
    font-size: 15px !important; font-weight: 600 !important;
    padding: 14px !important; border: none !important; cursor: pointer;
    font-family: var(--rd-font) !important;
    transition: opacity 0.18s ease, transform 0.1s ease;
}
.rd-btn:active, .product-form-btn:active, .submit-btn:active { transform: scale(0.98); opacity: 0.85; }
.rd-btn-primary, .product-form-btn.save, .submit-btn {
    background: var(--rd-accent) !important; color: #fff !important;
}
.rd-btn-destructive, .product-form-btn.delete {
    background: rgba(255,59,48,0.12) !important; color: var(--rd-red) !important;
    border: 1px solid rgba(255,59,48,0.25) !important;
}

/* Inputs / textareas / selects */
.app-view input:not([type=checkbox]):not([type=radio]),
.app-view textarea,
.app-view select,
.assistant-input, .assistant-textarea,
.ios-settings-page input:not([type=checkbox]):not([type=radio]),
.ios-settings-page textarea,
.ios-settings-page select {
    background: var(--rd-surface-2) !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: var(--rd-r-row) !important;
    color: var(--rd-text) !important;
    font-size: 15px !important;
    padding: 12px 14px !important;
    font-family: var(--rd-font) !important;
    -webkit-appearance: none; appearance: none;
    transition: border-color 0.18s ease;
}
.app-view input:focus, .app-view textarea:focus, .app-view select:focus,
.assistant-input:focus, .assistant-textarea:focus,
.ios-settings-page input:focus, .ios-settings-page textarea:focus, .ios-settings-page select:focus {
    border-color: var(--rd-accent) !important; outline: none !important;
}
::placeholder { color: rgba(255,255,255,0.25) !important; }

/* Chips (modelo, colaborador, etc.) */
.rd-chip {
    padding: 8px 14px; border-radius: var(--rd-r-chip); font-size: 14px; font-weight: 500;
    background: var(--rd-surface-2); border: 1px solid var(--rd-border); color: var(--rd-text-2);
    cursor: pointer; white-space: nowrap; transition: all 0.15s ease;
}
.rd-chip.active {
    background: color-mix(in srgb, var(--rd-accent) 16%, transparent);
    border-color: var(--rd-accent); color: var(--rd-accent);
}

/* ════════════════════════════════════════════════════════════════════════════
   8. TAB ASSISTENTE — secções + KB cards estilo auto-reply
   ════════════════════════════════════════════════════════════════════════════ */
#view-assistant .assistant-view-container { max-width: 600px !important; }
.assistant-config-card { padding: 0 !important; background: transparent !important; border: none !important; backdrop-filter: none !important; }
.assistant-field {
    background: var(--rd-surface) !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: var(--rd-r-card) !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
}
.assistant-label {
    font-size: 11px !important; font-weight: 600 !important;
    color: var(--rd-label) !important;
    text-transform: uppercase !important; letter-spacing: 0.8px !important;
    margin-bottom: 12px !important; display: block;
}

/* Selector de modelo → chips horizontais */
.model-selector { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.model-selector .model-col { flex: 1 1 auto; }
.model-selector .model-btn {
    width: 100%;
    padding: 10px 8px !important; border-radius: var(--rd-r-row) !important;
    background: var(--rd-surface-2) !important; border: 1px solid var(--rd-border) !important;
    color: var(--rd-text-2) !important; font-size: 14px !important; font-weight: 600 !important;
}
.model-selector .model-btn.active {
    background: color-mix(in srgb, var(--rd-accent) 16%, transparent) !important;
    border-color: var(--rd-accent) !important; color: var(--rd-accent) !important;
}
.model-selector .model-desc { font-size: 11px !important; color: var(--rd-text-3) !important; text-align: center; display: block; margin-top: 4px; }

/* KB / Contexto cards (estilo auto-reply) */
.context-kb-card, .kb-entry-btn {
    background: var(--rd-surface-2) !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: var(--rd-r-row) !important;
    padding: 12px 14px !important;
}
.context-kb-card.ctx-inactive { opacity: 0.5; }
.kb-entry-name, .context-kb-title { font-size: 15px !important; font-weight: 500 !important; color: var(--rd-text) !important; }
.kb-entry-sub, .context-kb-preview { font-size: 12px !important; color: var(--rd-text-3) !important; }
.kb-entry-arrow { font-size: 18px !important; color: var(--rd-text-3) !important; }

/* Botão "nova entrada / adicionar campo" */
.custom-context-add-btn, #context-kb-new-btn {
    width: 100% !important;
    background: var(--rd-surface-2) !important;
    border: 1px dashed var(--rd-border) !important;
    border-radius: var(--rd-r-row) !important;
    color: var(--rd-accent) !important;
    padding: 12px !important; font-size: 14px !important; font-weight: 600 !important;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; font-family: var(--rd-font) !important;
}

/* Acesso ao feed KB (artigos) dentro da tab Assistente */
.rd-kb-feed-row {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--rd-surface-2); border: 1px solid var(--rd-border);
    border-radius: var(--rd-r-row); padding: 14px; cursor: pointer; margin-top: 4px;
}
.rd-kb-feed-row:active { background: var(--rd-surface-3); }
.rd-kb-feed-row .rd-kb-feed-name { font-size: 15px; font-weight: 500; color: var(--rd-text); }
.rd-kb-feed-row .rd-kb-feed-arrow { color: var(--rd-text-3); font-size: 18px; }

/* ════════════════════════════════════════════════════════════════════════════
   9. TAB SERVIÇOS — cards em grid limpos (acedido via Mais)
   ════════════════════════════════════════════════════════════════════════════ */
.products-container { max-width: 600px !important; margin: 0 auto !important; padding: 0 var(--rd-px) !important; }
.product-card {
    background: var(--rd-surface) !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: var(--rd-r-card) !important;
    overflow: hidden !important;
}
.product-name { color: var(--rd-text) !important; font-weight: 600 !important; }
.product-description { color: var(--rd-text-2) !important; }
.detail-value { color: var(--rd-accent) !important; }
/* FAB de produto removido — o header da view tem o botão "+" */
#fab-create-product { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════════
   10. TAB MAIS — hub de gestão (settings overlay restyled)
   ════════════════════════════════════════════════════════════════════════════ */
.settings-overlay, .unified-settings { background: var(--rd-bg) !important; }
.ios-settings-page { background: var(--rd-bg) !important; }
.ios-settings-list { max-width: 600px !important; margin: 0 auto !important; padding: 0 var(--rd-px) calc(var(--rd-tabbar-h) + env(safe-area-inset-bottom) + 20px) !important; }

/* Perfil header card no topo da tab Mais (injectado por redesign.js) */
.rd-profile-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--rd-surface); border: 1px solid var(--rd-border);
    border-radius: var(--rd-r-card); padding: 16px; margin-bottom: 22px; cursor: pointer;
}
.rd-profile-card:active { background: var(--rd-surface-3); }
.rd-profile-avatar {
    width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
    background: var(--rd-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700; text-transform: uppercase;
}
.rd-profile-info { min-width: 0; flex: 1; }
.rd-profile-name { font-size: 18px; font-weight: 700; color: var(--rd-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-profile-sub { font-size: 13px; color: var(--rd-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.rd-profile-chevron { color: var(--rd-text-3); flex-shrink: 0; }

/* Dot de estado nas rows (ex: WhatsApp) */
.rd-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.rd-status-dot.green { background: var(--rd-green); }
.rd-status-dot.red { background: var(--rd-red); }
.rd-status-dot.orange { background: var(--rd-orange); }

/* ════════════════════════════════════════════════════════════════════════════
   11. SVC-MODE CARDS (tipo de serviço) — dentro de Mais
   ════════════════════════════════════════════════════════════════════════════ */
.svc-mode-grid { padding: 6px !important; background: var(--rd-surface) !important; }
.svc-mode-card {
    background: var(--rd-surface-2) !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: var(--rd-r-row) !important;
    padding: 14px !important;
}
.svc-mode-card.active {
    border-color: var(--rd-accent) !important;
    background: color-mix(in srgb, var(--rd-accent) 12%, transparent) !important;
}
.svc-mode-title { color: var(--rd-text) !important; font-weight: 700 !important; }
.svc-mode-desc { color: var(--rd-text-2) !important; }
.svc-mode-tag { background: var(--rd-surface-3) !important; color: var(--rd-text-3) !important; }

/* ════════════════════════════════════════════════════════════════════════════
   12. CHAT — alinhar cores (bubbles já são iOS-style; toques mínimos)
   ════════════════════════════════════════════════════════════════════════════ */
.msg.user { background: color-mix(in srgb, var(--rd-accent) 22%, transparent) !important; }
.msg.bot { background: rgba(255,255,255,0.08) !important; }
#chatMessages { padding-top: calc(env(safe-area-inset-top) + 8px) !important; }

/* ─── 13. SLIDE-IN das sub-views (produto/kb edit) sobre a tab bar ─── */
.product-edit-container, #view-product-edit .product-edit-container,
#view-product-create .product-edit-container,
#view-kb-create .product-edit-container, #view-kb-edit .product-edit-container {
    max-width: 600px !important; margin: 0 auto !important;
    padding: calc(env(safe-area-inset-top) + 14px) var(--rd-px) 40px !important;
}
.product-edit-title, .product-modal-title { color: var(--rd-text) !important; font-weight: 800 !important; }

/* ─── 14. TOGGLES iOS (uniformizar para verde) ─── */
input:checked + .ios-track,
.ios-toggle input:checked + .ios-track { background: var(--rd-green) !important; }

/* ─── 15. SETTINGS OVERLAY (hub Mais) — alinhar à tab bar nova ─── */
.settings-overlay {
    bottom: calc(var(--rd-tabbar-h) + env(safe-area-inset-bottom)) !important;
    border-radius: 0 !important;
    background: var(--rd-bg) !important;
}
.ios-settings-page { padding-top: calc(env(safe-area-inset-top) + 8px) !important; }

/* ─── 16. UTIL ─── */
.rd-hidden { display: none !important; }
.rd-divider { height: 1px; background: var(--rd-border-2); margin: 20px 0; }