/**
 * Стили чата сметчика — только внутри .smeta-chat-page (не трогают CRM/auth глобально).
 * Токены наследуют палитру --crm-* из orders_v2/tailwind-compat.
 */

.smeta-chat-page {
    --smeta-bg: var(--crm-gray-50, #f9fafb);
    --smeta-surface: #fff;
    --smeta-border: var(--crm-gray-200, #e5e7eb);
    --smeta-text: var(--crm-gray-900, #111827);
    --smeta-muted: var(--crm-gray-500, #6b7280);
    --smeta-accent: var(--crm-primary-500, #8b5cf6);
    --smeta-accent-hover: var(--crm-primary-600, #7c3aed);
    --smeta-user-bg: var(--crm-primary-50, #f5f3ff);
    --smeta-bot-bg: var(--crm-gray-100, #f3f4f6);
    --smeta-ok: var(--crm-green-600, #16a34a);
    --smeta-err: var(--crm-red-600, #dc2626);

    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--smeta-bg);
    color: var(--smeta-text);
}

html.dark .smeta-chat-page {
    --smeta-bg: var(--crm-gray-900, #111827);
    --smeta-surface: var(--crm-gray-800, #1f2937);
    --smeta-border: var(--crm-gray-700, #374151);
    --smeta-text: var(--crm-gray-100, #f3f4f6);
    --smeta-muted: var(--crm-gray-400, #9ca3af);
    --smeta-user-bg: rgb(139 92 246 / 0.15);
    --smeta-bot-bg: var(--crm-gray-800, #1f2937);
}

/* --- строка статуса (заголовок — smeta_crm_page_header в shell) --- */
.smeta-chat-page .smeta-chat__status-bar {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 8px 20px;
    background: var(--smeta-surface);
    border-bottom: 1px solid var(--smeta-border);
}

.smeta-chat-page .smeta-chat__status {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--crm-primary-100, #ede9fe);
    color: var(--smeta-accent);
}

html.dark .smeta-chat-page .smeta-chat__status {
    background: rgb(139 92 246 / 0.2);
}

/* --- лента сообщений --- */
.smeta-chat-page .smeta-chat__feed {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    width: 100%;
    max-width: 52rem;
    margin: 0 auto;
    padding: 1.25rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.smeta-chat-page .smeta-chat__hint {
    padding: 1rem 1.125rem;
    border-radius: 0.75rem;
    border: 1px solid var(--smeta-border);
    background: var(--smeta-surface);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

.smeta-chat-page .smeta-chat__hint-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--smeta-muted);
}

.smeta-chat-page .smeta-chat__hint-text strong {
    color: var(--smeta-text);
}

.smeta-chat-page .smeta-chat__examples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.smeta-chat-page .smeta-chat__examples button {
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--crm-primary-200, #ddd6fe);
    background: var(--crm-primary-50, #f5f3ff);
    color: var(--smeta-accent);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.smeta-chat-page .smeta-chat__examples button:hover {
    background: var(--crm-primary-100, #ede9fe);
    border-color: var(--smeta-accent);
}

/* --- сообщения --- */
.smeta-chat-page .smeta-chat__msg {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.smeta-chat-page .smeta-chat__avatar {
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.smeta-chat-page .smeta-chat__msg--user .smeta-chat__avatar {
    background: var(--crm-gray-300, #d1d5db);
    color: var(--crm-gray-700, #374151);
}

.smeta-chat-page .smeta-chat__msg--bot .smeta-chat__avatar {
    background: linear-gradient(135deg, var(--smeta-accent), var(--crm-indigo-500, #6366f1));
    color: #fff;
}

.smeta-chat-page .smeta-chat__bubble {
    max-width: calc(100% - 3rem);
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--smeta-border);
    background: var(--smeta-bot-bg);
    font-size: 0.90625rem;
    line-height: 1.55;
    overflow-x: auto;
}

.smeta-chat-page .smeta-chat__msg--user .smeta-chat__bubble {
    background: var(--smeta-user-bg);
    border-color: var(--crm-primary-200, #ddd6fe);
}

.smeta-chat-page .smeta-chat__bubble--error {
    border-color: var(--crm-red-200, #fecaca);
    background: var(--crm-red-50, #fef2f2);
    color: var(--smeta-err);
}

.smeta-chat-page .smeta-chat__bubble p:first-child,
.smeta-chat-page .smeta-chat__live p:first-child { margin-top: 0; }
.smeta-chat-page .smeta-chat__bubble p:last-child,
.smeta-chat-page .smeta-chat__live p:last-child { margin-bottom: 0; }

.smeta-chat-page .smeta-chat__bubble table,
.smeta-chat-page .smeta-chat__live table {
    width: 100%;
    max-width: 100%;
    margin: 0.5rem 0;
    border-collapse: collapse;
    font-size: 0.8125rem;
    border: 1px solid var(--smeta-border);
}

.smeta-chat-page .smeta-chat__bubble th,
.smeta-chat-page .smeta-chat__bubble td,
.smeta-chat-page .smeta-chat__live th,
.smeta-chat-page .smeta-chat__live td {
    border: 1px solid var(--smeta-border);
    padding: 0.375rem 0.625rem;
    text-align: left;
}

.smeta-chat-page .smeta-chat__bubble th,
.smeta-chat-page .smeta-chat__live th {
    background: var(--crm-gray-100, #f3f4f6);
}

.smeta-chat-page .smeta-chat__bubble code,
.smeta-chat-page .smeta-chat__live code {
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    background: var(--crm-gray-100, #f3f4f6);
    font-size: 0.92em;
}

html.dark .smeta-chat-page .smeta-chat__bubble code,
html.dark .smeta-chat-page .smeta-chat__live code {
    background: var(--crm-gray-700, #374151);
}

.smeta-chat-page .smeta-chat__bubble pre,
.smeta-chat-page .smeta-chat__live pre {
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    background: var(--crm-gray-900, #111827);
    color: var(--crm-gray-100, #f3f4f6);
    overflow-x: auto;
    font-size: 0.78rem;
}

/* trace (tool steps) */
.smeta-chat-page .smeta-chat__trace {
    margin-bottom: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px dashed var(--smeta-border);
    background: var(--smeta-bg);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--smeta-muted);
}

.smeta-chat-page .smeta-chat__trace .smeta-chat__step--call { color: var(--smeta-accent); }
.smeta-chat-page .smeta-chat__trace .smeta-chat__step--result { color: var(--smeta-ok); }
.smeta-chat-page .smeta-chat__trace summary { cursor: pointer; user-select: none; }

/* --- поле ввода --- */
.smeta-chat-page .smeta-chat__composer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 69px;
    max-height: 69px;
    padding: 0.5rem 1rem;
    margin: 0;
    background: var(--smeta-surface);
    border-top: 1px solid var(--smeta-border);
    overflow: hidden;
    box-sizing: border-box;
}

.smeta-chat-page .smeta-chat__composer-inner {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    max-width: 52rem;
    max-height: 100%;
    margin: 0;
    padding: 0.25rem 0.375rem 0.25rem 0.625rem;
    border-radius: 0.75rem;
    border: 1px solid var(--smeta-border);
    background: var(--smeta-bg);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
    box-sizing: border-box;
}

.smeta-chat-page .smeta-chat__composer textarea {
    flex: 1;
    min-height: 1.5rem;
    max-height: 2.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--smeta-text);
    font: inherit;
    font-size: 0.90625rem;
    line-height: 1.5;
}

.smeta-chat-page .smeta-chat__composer textarea::placeholder {
    color: var(--smeta-muted);
}

.smeta-chat-page .smeta-chat__composer-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.smeta-chat-page .smeta-chat__btn-send {
    display: grid;
    place-items: center;
    width: 2.375rem;
    height: 2.375rem;
    padding: 0;
    border: 0;
    border-radius: 0.625rem;
    background: var(--smeta-accent);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

.smeta-chat-page .smeta-chat__btn-send:hover:not(:disabled) {
    background: var(--smeta-accent-hover);
}

.smeta-chat-page .smeta-chat__btn-send:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.smeta-chat-page .smeta-chat__btn-clear {
    padding: 0 0.625rem;
    border: 0;
    background: transparent;
    color: var(--smeta-muted);
    font-size: 0.75rem;
    cursor: pointer;
}

.smeta-chat-page .smeta-chat__btn-clear:hover {
    color: var(--smeta-text);
}

.smeta-chat-page .smeta-chat__typing {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    color: var(--smeta-muted);
    font-size: 0.8125rem;
}

.smeta-chat-page .smeta-chat__typing span {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--smeta-accent);
    animation: smeta-chat-blink 1.2s infinite ease-in-out;
}

.smeta-chat-page .smeta-chat__typing span:nth-child(2) { animation-delay: 0.2s; }
.smeta-chat-page .smeta-chat__typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes smeta-chat-blink {
    0%, 80%, 100% { opacity: 0.25; }
    40% { opacity: 1; }
}

.smeta-chat-page .smeta-chat__live--error {
    color: var(--smeta-err);
}

.smeta-chat-page .smeta-chat__muted-note {
    margin-top: 0.375rem;
    color: var(--smeta-muted);
    font-size: 0.8125rem;
}

.smeta-chat-page .smeta-chat__trace .smeta-chat__step {
    padding: 0.125rem 0;
}