/* Светлая тема — голубой акцент, Roboto */
:root {
    --ag-bg: #f4f8fc;
    --ag-bg-soft: #eef4fa;
    --ag-surface: #ffffff;
    --ag-border: #dbe4ef;
    --ag-text: #0f172a;
    --ag-text-muted: #64748b;
    --ag-primary: #0ea5e9;
    --ag-primary-hover: #0284c7;
    --ag-primary-soft: rgba(14, 165, 233, 0.12);
    --ag-accent: #38bdf8;
    --ag-danger: #ef4444;
    --ag-radius: 12px;
    --ag-radius-sm: 8px;
    --ag-shadow: 0 12px 40px -16px rgba(14, 116, 178, 0.22);
    --ag-success-bg: rgba(16, 185, 129, 0.08);
    --ag-success-border: rgba(16, 185, 129, 0.28);
    --ag-success-text: #059669;
    --ag-danger-bg: rgba(239, 68, 68, 0.08);
    --ag-danger-border: rgba(239, 68, 68, 0.28);
    --ag-danger-text: #dc2626;
    --ag-info-text: #0369a1;
    --ag-sidebar-w: 248px;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color-scheme: light;
}

.ag-token-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: 1.05em;
    vertical-align: -0.18em;
    color: inherit;
    flex-shrink: 0;
    line-height: 1;
}
.ag-btn .ag-token-icon { font-size: 15px; width: 15px; height: 15px; }
.ag-btn-primary .ag-token-icon { color: #fff; }
.ag-sidebar-user-plan .ag-token-icon { color: var(--ag-primary); font-size: 14px; width: 14px; height: 14px; vertical-align: -0.2em; }
.ag-plan-price-cur .ag-token-icon,
.ag-price-cur .ag-token-icon { font-size: 22px; width: 22px; height: 22px; color: var(--ag-primary); }
:root[data-theme="dark"] {
    --ag-bg: #0b1220;
    --ag-bg-soft: #111827;
    --ag-surface: #151f32;
    --ag-border: #243044;
    --ag-text: #e8eef7;
    --ag-text-muted: #94a3b8;
    --ag-primary: #38bdf8;
    --ag-primary-hover: #0ea5e9;
    --ag-primary-soft: rgba(56, 189, 248, 0.14);
    --ag-accent: #7dd3fc;
    --ag-danger: #f87171;
    --ag-shadow: 0 16px 48px -20px rgba(0, 0, 0, 0.65);
    --ag-success-bg: rgba(52, 211, 153, 0.12);
    --ag-success-border: rgba(52, 211, 153, 0.32);
    --ag-success-text: #6ee7b7;
    --ag-danger-bg: rgba(248, 113, 113, 0.12);
    --ag-danger-border: rgba(248, 113, 113, 0.32);
    --ag-danger-text: #fca5a5;
    --ag-info-text: #7dd3fc;
    color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.ag-cabinet { background: var(--ag-bg); color: var(--ag-text); min-height: 100vh; }
select { background-color: var(--ag-surface); color: var(--ag-text); }
select option { background-color: var(--ag-surface); color: var(--ag-text); }
a { color: inherit; text-decoration: none; }

.ag-shell { display: flex; min-height: 100vh; }

/* --- Sidebar (compact) --- */
.ag-sidebar { width: var(--ag-sidebar-w); flex-shrink: 0; background: var(--ag-surface); border-right: 1px solid var(--ag-border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; box-shadow: 2px 0 24px -12px rgba(15, 23, 42, 0.08); transition: width .22s ease; }
.ag-sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 10px 8px; }
.ag-sidebar-brand { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; font-size: 14px; color: var(--ag-text); }
.ag-sidebar-brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-sidebar-brand .ag-logo-mark { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, var(--ag-primary), var(--ag-accent)); color: #fff; font-size: 14px; flex-shrink: 0; }
.ag-sidebar-close { display: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent; color: var(--ag-text-muted); cursor: pointer; font-family: inherit; padding: 0; }
.ag-sidebar-close iconify-icon { font-size: 20px; }
.ag-sidebar-close:hover { color: var(--ag-primary); }
.ag-sidebar-section-label { display: flex; align-items: center; gap: 6px; padding: 8px 10px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ag-text-muted); opacity: .85; }
.ag-sidebar-section-label iconify-icon { font-size: 13px; color: var(--ag-primary); }
.ag-sidebar-nav { flex-shrink: 0; padding: 2px 8px; display: flex; flex-direction: column; gap: 1px; }
.ag-sidebar-tools { max-height: 220px; overflow-y: auto; }
.ag-nav-link { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; color: var(--ag-text-muted); font-size: 12.5px; font-weight: 500; line-height: 1.2; }
.ag-nav-link iconify-icon { font-size: 16px; flex-shrink: 0; color: var(--ag-text-muted); }
.ag-nav-link:hover { background: var(--ag-bg-soft); color: var(--ag-text); }
.ag-nav-link:hover iconify-icon { color: var(--ag-primary); }
.ag-nav-link.is-active { background: var(--ag-primary-soft); color: var(--ag-primary); }
.ag-nav-link.is-active iconify-icon { color: var(--ag-primary); }
.ag-nav-badge { margin-left: auto; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ag-text-muted); background: var(--ag-bg-soft); border: 1px solid var(--ag-border); border-radius: 999px; padding: 2px 6px; }
.ag-nav-link-balance span { font-weight: 700; color: var(--ag-text); }

/* --- Sidebar: threads --- */
.ag-sidebar-threads { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 4px 8px 6px; border-top: 1px solid var(--ag-border); margin-top: 4px; }
.ag-sidebar-new-chat {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 10px;
    padding: 11px 14px;
    border: none;
    border-radius: 12px;
    background: var(--ag-primary);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.22);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.ag-sidebar-new-chat:hover { filter: brightness(1.05); box-shadow: 0 10px 24px rgba(14, 165, 233, 0.28); color: #fff; }
.ag-sidebar-new-chat:active { transform: translateY(1px); }
.ag-sidebar-new-chat.is-active { outline: 2px solid rgba(14, 165, 233, 0.35); outline-offset: 2px; }
.ag-sidebar-new-chat iconify-icon { font-size: 18px; flex-shrink: 0; color: #fff; }
.ag-sidebar-section-label {
    padding: 2px 4px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ag-text-muted);
    opacity: .75;
}
.ag-sidebar-new-form { margin: 0; }
.ag-sidebar-chats-empty { padding: 6px 4px; font-size: 12.5px; color: var(--ag-text-muted); margin: 0; opacity: .7; }
.ag-sidebar-threads-study { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px 12px 8px; overflow: hidden; border-top: 1px solid var(--ag-border); margin-top: 4px; }

.ag-sidebar-thread-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.ag-sidebar-thread-item { display: flex; align-items: center; border-radius: 8px; }
.ag-sidebar-thread-item:hover { background: var(--ag-bg-soft); }
.ag-sidebar-thread-item.is-active { background: var(--ag-primary-soft); }
.ag-sidebar-thread-item.is-active .ag-sidebar-thread-title { color: var(--ag-primary); font-weight: 600; }
.ag-sidebar-thread-link { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; padding: 6px 8px; color: var(--ag-text-muted); font-size: 12px; }
.ag-sidebar-thread-link iconify-icon { font-size: 14px; flex-shrink: 0; }
.ag-sidebar-thread-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-sidebar-thread-rename { flex-shrink: 0; width: 22px; height: 22px; margin-right: 4px; border: none; background: transparent; color: var(--ag-text-muted); border-radius: 6px; display: none; align-items: center; justify-content: center; cursor: pointer; }
.ag-sidebar-thread-item:hover .ag-sidebar-thread-rename { display: flex; }
.ag-sidebar-thread-rename:hover { background: var(--ag-bg); color: var(--ag-text); }
.ag-sidebar-thread-rename-input { flex: 1; min-width: 0; margin: 3px 5px; padding: 5px 7px; background: var(--ag-bg); border: 1px solid var(--ag-primary); border-radius: 6px; color: var(--ag-text); font-size: 12px; font-family: inherit; }
.ag-sidebar-thread-empty { padding: 6px 8px; color: var(--ag-text-muted); font-size: 11.5px; }

.ag-sidebar-footer { margin-top: auto; padding: 6px 8px 10px; border-top: 1px solid var(--ag-border); display: flex; flex-direction: column; gap: 1px; }
.ag-sidebar-upgrade { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 2px; padding: 8px 10px; border-radius: 8px; background: linear-gradient(135deg, var(--ag-primary-soft), transparent); border: 1px solid rgba(14, 165, 233, 0.35); color: var(--ag-primary); font-size: 12px; font-weight: 600; text-align: center; }
.ag-sidebar-upgrade iconify-icon { font-size: 15px; }

.ag-sidebar-legal { display: flex; align-items: center; gap: 6px; padding: 8px 4px 0; }
.ag-sidebar-legal a { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--ag-text-muted); border: 1px solid transparent; }
.ag-sidebar-legal a:hover { color: var(--ag-primary); background: var(--ag-primary-soft); border-color: rgba(14, 165, 233, 0.2); }
.ag-sidebar-legal iconify-icon { font-size: 15px; }
.ag-sidebar-copy { color: var(--ag-text-muted); font-size: 10px; margin-top: 4px; opacity: .7; }

/* --- Main --- */
.ag-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ag-content { padding: 20px 24px 32px; max-width: 1120px; width: 100%; margin: 0 auto; }
.ag-icon-btn { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--ag-border); background: var(--ag-surface); color: var(--ag-text-muted); cursor: pointer; font-family: inherit; }
.ag-icon-btn:hover { color: var(--ag-primary); border-color: var(--ag-primary); }

.ag-sidebar-mobile-toggle { display: none; }
.ag-mobile-topbar { display: none; }
.ag-mobile-topbar-new { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: none; background: transparent; color: var(--ag-text); cursor: pointer; font-family: inherit; padding: 0; flex-shrink: 0; }
.ag-mobile-topbar-new iconify-icon { font-size: 22px; }
.ag-mobile-topbar-new:hover { color: var(--ag-primary); }
.ag-mobile-topbar-new-form { display: flex; }
.ag-mobile-topbar-brand { display: flex; align-items: center; min-width: 0; }
.ag-mobile-topbar-brand-text { font-size: 17px; font-weight: 700; color: var(--ag-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 54; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); }
.ag-sidebar-backdrop.is-open { display: block; }
body.ag-sidebar-open { overflow: hidden; }

/* --- Cards --- */
.ag-panel { background: var(--ag-surface); border: 1px solid var(--ag-border); border-radius: var(--ag-radius); padding: 26px; margin-bottom: 20px; }
.ag-panel h2 { font-size: 17px; margin: 0 0 4px; }
.ag-panel .ag-panel-sub { color: var(--ag-text-muted); font-size: 13.5px; margin: 0 0 18px; }

.ag-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
@media (max-width: 780px) { .ag-stat-grid { grid-template-columns: 1fr; } }
.ag-stat-card { background: var(--ag-surface); border: 1px solid var(--ag-border); border-radius: var(--ag-radius); padding: 20px; }
.ag-stat-label { color: var(--ag-text-muted); font-size: 13px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ag-stat-value { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }

.ag-quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 780px) { .ag-quick-grid { grid-template-columns: 1fr; } }
.ag-quick-card { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--ag-radius); border: 1px solid var(--ag-border); background: var(--ag-surface); }
.ag-quick-card iconify-icon { font-size: 22px; color: var(--ag-primary); flex-shrink: 0; }
.ag-quick-card h3 { font-size: 14.5px; margin: 0 0 3px; }
.ag-quick-card p { font-size: 13px; color: var(--ag-text-muted); margin: 0; }

.ag-tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .ag-tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ag-tools-grid { grid-template-columns: 1fr; } }
.ag-tool-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--ag-radius); border: 1px solid var(--ag-border); background: var(--ag-surface); color: inherit; text-decoration: none; }
.ag-tool-card:hover { border-color: var(--ag-primary); }
.ag-tool-card-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ag-primary-soft); color: var(--ag-primary); font-size: 22px; flex-shrink: 0; }
.ag-tool-card h3 { font-size: 15px; margin: 0; }
.ag-tool-card p { font-size: 13px; color: var(--ag-text-muted); margin: 0; }
.ag-tool-card-badge { position: absolute; top: 16px; right: 16px; font-size: 11px; font-weight: 600; color: var(--ag-text-muted); background: var(--ag-bg-soft); border: 1px solid var(--ag-border); border-radius: 999px; padding: 3px 10px; }

/* --- Billing --- */
.ag-billing-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .ag-billing-row { grid-template-columns: 1fr; } }
.ag-plan-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--ag-primary-soft); color: var(--ag-primary); font-size: 12.5px; font-weight: 700; }
.ag-plan-price { display: flex; align-items: baseline; gap: 6px; margin: 16px 0; }
.ag-plan-price-value { font-size: 38px; font-weight: 800; }
.ag-plan-price-cur, .ag-plan-price-period { color: var(--ag-text-muted); font-size: 14px; }
.ag-plan-features { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.ag-plan-features li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ag-plan-features iconify-icon { color: var(--ag-accent); }
.ag-plan-status { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--ag-radius-sm); background: rgba(51, 224, 176, 0.1); border: 1px solid rgba(51, 224, 176, 0.3); margin-bottom: 14px; }
.ag-plan-status iconify-icon { color: var(--ag-accent); font-size: 22px; }
.ag-plan-status-title { font-size: 14px; font-weight: 600; }
.ag-plan-status-hint { font-size: 12.5px; color: var(--ag-text-muted); }
.ag-card-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ag-text-muted); margin-bottom: 16px; }
.ag-card-row a { color: var(--ag-primary); font-weight: 600; margin-left: auto; }
.ag-card-row a.danger { color: var(--ag-danger); }

.ag-token-stat-row { display: flex; gap: 20px; margin-bottom: 8px; }
.ag-token-stat { flex: 1; }
.ag-token-stat-label { font-size: 12.5px; color: var(--ag-text-muted); }
.ag-token-stat-value { font-size: 22px; font-weight: 700; }
.ag-token-hint { color: var(--ag-text-muted); font-size: 13px; margin: 0 0 18px; }
.ag-token-form-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0 14px; }
.ag-token-total { font-weight: 700; white-space: nowrap; }
.ag-topup-preset { padding: 8px 16px; font-size: 13px; }
.ag-topup-preset:hover { border-color: var(--ag-primary); color: var(--ag-primary); }
.ag-topup-preset.active { background: var(--ag-primary); border-color: var(--ag-primary); color: #fff; }

.ag-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ag-table th { text-align: left; color: var(--ag-text-muted); font-weight: 500; font-size: 12.5px; padding: 8px 10px; border-bottom: 1px solid var(--ag-border); }
.ag-table td { padding: 10px 10px; border-bottom: 1px solid var(--ag-border); }
.ag-table tr:last-child td { border-bottom: none; }
.ag-delta-pos { color: var(--ag-accent); font-weight: 600; }
.ag-delta-neg { color: var(--ag-danger); font-weight: 600; }

/* --- Profile --- */
.ag-profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.ag-avatar { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--ag-primary), var(--ag-accent)); display: grid; place-items: center; font-size: 22px; font-weight: 700; color: #fff; flex-shrink: 0; }
.ag-profile-name { font-size: 17px; font-weight: 700; margin: 0; word-break: break-all; }
.ag-profile-sub { font-size: 13px; color: var(--ag-text-muted); margin: 2px 0 0; }
.ag-profile-stats { display: flex; gap: 28px; }
.ag-profile-stat-label { display: block; font-size: 12.5px; color: var(--ag-text-muted); margin-bottom: 4px; }
.ag-profile-stat-value { font-size: 15px; font-weight: 600; }

.ag-field { margin-bottom: 16px; }
.ag-field label { display: block; font-size: 13.5px; color: var(--ag-text-muted); margin-bottom: 6px; }
.ag-input { width: 100%; background: var(--ag-bg-soft); border: 1px solid var(--ag-border); color: var(--ag-text); border-radius: var(--ag-radius-sm); padding: 11px 14px; font-size: 14.5px; }
.ag-input:focus { outline: none; border-color: var(--ag-primary); box-shadow: 0 0 0 3px var(--ag-primary-soft); }
.ag-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .ag-form-row { grid-template-columns: 1fr; } }

.ag-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 11px 22px; font-weight: 600; font-size: 14px; border: 1px solid transparent; cursor: pointer; }
.ag-btn-primary { background: var(--ag-primary); color: #fff; }
.ag-btn-primary:hover { background: var(--ag-primary-hover); color: #fff; }
.ag-btn-outline { background: transparent; border-color: var(--ag-border); color: var(--ag-text); }
.ag-btn-outline:hover { border-color: var(--ag-danger); color: var(--ag-danger); }
.ag-btn-block { width: 100%; }

.ag-alert { border-radius: var(--ag-radius-sm); padding: 12px 14px; font-size: 13.5px; margin-bottom: 18px; border: 1px solid transparent; }
.ag-alert-success { background: var(--ag-success-bg); border-color: var(--ag-success-border); color: var(--ag-success-text); }
.ag-alert-danger { background: var(--ag-danger-bg); border-color: var(--ag-danger-border); color: var(--ag-danger-text); }
.ag-alert-info { background: var(--ag-primary-soft); border-color: rgba(14, 165, 233, 0.35); color: var(--ag-info-text); }

/* --- Chat widget --- */
.ag-chat-widget { background: var(--ag-surface); border: 1px solid var(--ag-border); border-radius: var(--ag-radius); display: flex; flex-direction: column; height: 640px; overflow: hidden; margin-bottom: 20px; }
.ag-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--ag-border); flex-wrap: wrap; }
.ag-chat-header-plain { justify-content: flex-end; }
.ag-chat-type-switch { display: flex; gap: 6px; background: var(--ag-bg-soft); border: 1px solid var(--ag-border); border-radius: 999px; padding: 4px; }
.ag-chat-type-btn { display: flex; align-items: center; gap: 6px; border: none; background: transparent; color: var(--ag-text-muted); font-size: 13.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.ag-chat-type-btn.is-active { background: var(--ag-primary-soft); color: var(--ag-primary); }
.ag-chat-type-btn:disabled { opacity: .45; cursor: not-allowed; }
.ag-chat-fullscreen-btn { width: auto; padding: 0 14px; gap: 6px; font-size: 13px; }

.ag-chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.ag-chat-msg { display: flex; gap: 10px; max-width: 80%; }
.ag-chat-msg-assistant { align-self: flex-start; }
.ag-chat-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.ag-chat-avatar { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--ag-primary), var(--ag-accent)); color: #fff; font-size: 15px; }
.ag-chat-msg-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ag-chat-bubble { background: var(--ag-bg-soft); border: 1px solid var(--ag-border); border-radius: var(--ag-radius-sm); padding: 12px 14px; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.ag-chat-msg-user .ag-chat-bubble { background: var(--ag-primary); border-color: transparent; color: #fff; }
.ag-chat-msg.is-loading .ag-chat-bubble { color: var(--ag-text-muted); font-style: italic; }
.ag-chat-msg-actions { display: flex; opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none; }
.ag-chat-msg:hover .ag-chat-msg-actions { opacity: 1; visibility: visible; pointer-events: auto; }
.ag-chat-copy-btn { width: 26px; height: 26px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--ag-text-muted); display: grid; place-items: center; font-size: 14px; cursor: pointer; }
.ag-chat-copy-btn:hover { color: var(--ag-primary); background: var(--ag-primary-soft); }
.ag-chat-copy-btn.is-copied { color: var(--ag-success-text, #16a34a); }

.ag-chat-composer { border-top: 1px solid var(--ag-border); padding: 14px 16px; background: var(--ag-bg-soft); }
.ag-chat-input-row { position: relative; margin-bottom: 10px; }
.ag-chat-textarea { width: 100%; resize: none; background: var(--ag-surface); border: 1px solid var(--ag-border); color: var(--ag-text); border-radius: var(--ag-radius-sm); padding: 12px 70px 12px 14px; font-size: 14.5px; font-family: inherit; max-height: 160px; }
.ag-chat-textarea:focus { outline: none; border-color: var(--ag-primary); box-shadow: 0 0 0 3px var(--ag-primary-soft); }
.ag-chat-counter { position: absolute; right: 14px; bottom: 10px; font-size: 12px; color: var(--ag-text-muted); pointer-events: none; }

/* Счётчик символов только в чате */
#ag-image-counter,
#ag-video-counter,
#ag-audio-counter,
#ag-rewrite-source-counter,
#ag-rewrite-result-counter,
#ag-spellcheck-source-counter,
.ag-rewrite-counter {
    display: none !important;
}

.ag-chat-widget[data-mode]:not([data-mode="chat"]) .ag-chat-textarea,
.ag-media-widget-wrap .ag-chat-textarea,
.ag-rewrite-split textarea,
.ag-spellcheck-split textarea {
    padding-right: 14px !important;
}

.ag-chat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ag-chat-toolbar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ag-chat-select { position: relative; display: flex; align-items: center; gap: 6px; background: var(--ag-surface); border: 1px solid var(--ag-border); border-radius: 999px; padding: 0 12px; height: 38px; color: var(--ag-text-muted); font-size: 13.5px; }
.ag-chat-select iconify-icon { font-size: 16px; color: var(--ag-primary); }
.ag-chat-select select { background-color: transparent; border: none; color: var(--ag-text); font-size: 13.5px; font-family: inherit; cursor: pointer; }
.ag-chat-select select:focus { outline: none; }
.ag-chat-select select option { background-color: var(--ag-surface); color: var(--ag-text); }

/* Кастомный (не нативный) выпадающий список поверх .ag-chat-select — единый стиль вместо системного попапа браузера. */
.ag-chat-select.ag-chat-select-enhanced { cursor: pointer; user-select: none; }
.ag-chat-select.ag-chat-select-enhanced select { display: none; }
.ag-chat-select.ag-chat-select-enhanced:hover { border-color: var(--ag-primary); }
.ag-chat-select-label { color: var(--ag-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-chat-select-chevron { font-size: 13px; color: var(--ag-text-muted); flex-shrink: 0; transition: transform .15s ease; }
.ag-chat-select-enhanced.is-open .ag-chat-select-chevron { transform: rotate(180deg); }
.ag-chat-select-panel {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    max-height: 260px;
    overflow-y: auto;
    background: var(--ag-surface);
    border: 1px solid var(--ag-border);
    border-radius: 12px;
    box-shadow: var(--ag-shadow);
    padding: 6px;
    z-index: 70;
    scrollbar-width: thin;
    scrollbar-color: var(--ag-border) transparent;
}
.ag-chat-select-enhanced.is-open .ag-chat-select-panel { display: block; }
.ag-chat-select-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--ag-text);
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.ag-chat-select-item:hover { background: var(--ag-bg-soft); }
.ag-chat-select-item.is-active { background: var(--ag-primary-soft); color: var(--ag-primary); font-weight: 600; }
.ag-model-picker { position: relative; }
.ag-model-picker-trigger { cursor: pointer; }
.ag-model-picker-trigger-price { display: inline-flex; align-items: center; gap: 3px; margin-left: 2px; color: var(--ag-text-muted); font-size: 11px; font-weight: 500; flex-shrink: 0; }
.ag-chat-chip.ag-model-picker-trigger { gap: 6px; }
.ag-chat-select.ag-model-picker-trigger { gap: 8px; }
.ag-chat-model-price { display: inline-flex; align-items: center; gap: 3px; }
.ag-model-picker-chevron { font-size: 13px; transition: transform .15s ease; margin-left: 1px; }
.ag-model-picker.is-open .ag-model-picker-chevron { transform: rotate(180deg); }

.ag-model-picker-panel { display: none; position: absolute; bottom: calc(100% + 10px); left: 0; width: 460px; max-width: calc(100vw - 40px); background: var(--ag-surface); border: 1px solid var(--ag-border); border-radius: var(--ag-radius); box-shadow: var(--ag-shadow); overflow: visible; z-index: 100; }
.ag-model-picker.is-open .ag-model-picker-panel { display: flex; }
/* Когда панель зафиксирована через JS (agInitModelPicker) поверх страницы — обнуляем CSS-позиционирование,
   чтобы inline top/left/bottom не конфликтовали с абсолютными правилами выше. */
.ag-model-picker-panel.is-pinned { position: fixed; bottom: auto; }
.ag-video-model-field .ag-model-picker-panel { bottom: auto; top: calc(100% + 10px); }
.ag-model-picker-panel.is-flat { width: 260px; }

.ag-model-picker-providers { width: 160px; flex-shrink: 0; border-right: 1px solid var(--ag-border); padding: 8px; display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.ag-model-picker-provider { display: flex; align-items: center; gap: 8px; border: none; background: transparent; color: var(--ag-text-muted); font-size: 13px; font-weight: 500; padding: 9px 10px; border-radius: var(--ag-radius-sm); cursor: pointer; text-align: left; }
.ag-model-picker-provider span { flex: 1; }
.ag-model-picker-provider-chevron { font-size: 13px; opacity: .6; }
.ag-model-picker-provider:hover { background: var(--ag-bg-soft); color: var(--ag-text); }
.ag-model-picker-provider.is-active { background: var(--ag-primary-soft); color: var(--ag-primary); }

.ag-model-picker-models { flex: 1; min-width: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; overflow-x: visible; }
.ag-model-picker-model { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: transparent; color: var(--ag-text); font-size: 13.5px; font-weight: 600; padding: 10px 12px; border-radius: var(--ag-radius-sm); cursor: pointer; text-align: left; }
.ag-model-picker-model:hover { background: var(--ag-bg-soft); }
.ag-model-picker-model-name { flex: 1; }
.ag-model-picker-model-cost { display: flex; align-items: center; gap: 3px; color: var(--ag-text-muted); font-size: 12.5px; font-weight: 600; flex-shrink: 0; }
.ag-model-picker-model-cost-tokens { max-width: 120px; line-height: 1.3; white-space: nowrap; text-align: right; font-size: 11px; font-weight: 500; }
.ag-model-picker-model-cost iconify-icon { color: var(--ag-primary); }
.ag-price-hint {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--ag-border, #e5e7eb); color: var(--ag-text-muted);
    font-size: 10px; font-weight: 700; line-height: 1; cursor: help; flex-shrink: 0;
    position: relative;
}
.ag-price-hint:hover,
.ag-price-hint:focus-visible {
    background: var(--ag-primary); color: #fff; outline: none;
}
.ag-price-hint::after {
    content: attr(data-hint);
    position: absolute; right: 0; bottom: calc(100% + 8px);
    width: max-content; max-width: 240px;
    padding: 8px 10px; border-radius: 8px;
    background: #111; color: #fff;
    font-size: 11px; font-weight: 500; line-height: 1.35;
    white-space: normal; text-align: left;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .15s ease; z-index: 30;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.ag-price-hint::before {
    content: '';
    position: absolute; right: 5px; bottom: calc(100% + 2px);
    border: 5px solid transparent; border-top-color: #111;
    opacity: 0; visibility: hidden; transition: opacity .15s ease; z-index: 31;
}
.ag-price-hint:hover::after,
.ag-price-hint:hover::before,
.ag-price-hint:focus-visible::after,
.ag-price-hint:focus-visible::before,
.ag-price-hint.is-open::after,
.ag-price-hint.is-open::before {
    opacity: 1; visibility: visible;
}
.ag-chat-send-estimate:empty { display: none; }
.ag-chat-send-estimate:not(:empty)::before { content: ' · ~'; }
.ag-chat-send-estimate:not(:empty)::after { content: ' ₽'; }
.ag-chat-send-price { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-weight: 600; font-size: 13px; }
.ag-chat-send-price .ag-chat-model-price { font-size: 13px; }

[data-guest="1"] .ag-chat-send-price,
[data-guest="1"] .ag-model-picker-trigger-price,
[data-guest="1"] .ag-model-picker-model-cost,
[data-guest="1"] #ag-image-send-cost,
[data-guest="1"] #ag-video-send-cost,
[data-guest="1"] #ag-audio-send-cost,
[data-guest="1"] #ag-rewrite-cost,
[data-guest="1"] #ag-spellcheck-cost,
[data-guest="1"] .ag-price-hint { display: none !important; }
[data-guest="1"] #ag-image-send::after,
[data-guest="1"] #ag-video-send::after { content: none; }
.ag-ios-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--ag-border);
    background: var(--ag-surface);
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    color: var(--ag-text-muted);
    transition: opacity .15s, border-color .15s, background .15s;
}
.ag-ios-toggle-label { white-space: nowrap; font-weight: 500; }
.ag-ios-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ag-ios-toggle-track {
    position: relative;
    width: 42px;
    height: 26px;
    border-radius: 999px;
    background: #d1d5db;
    flex-shrink: 0;
    transition: background .2s ease;
}
.ag-ios-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .2s ease;
}
.ag-ios-toggle.is-active { color: var(--ag-primary); border-color: rgba(14, 165, 233, 0.35); background: var(--ag-primary-soft); }
.ag-ios-toggle.is-active .ag-ios-toggle-track { background: #34c759; }
.ag-ios-toggle.is-active .ag-ios-toggle-knob { transform: translateX(16px); }
.ag-ios-toggle.is-disabled { opacity: .45; cursor: not-allowed; }
.ag-chat-websearch.ag-ios-toggle { height: auto; min-height: 0; width: auto; padding: 4px 4px 4px 10px; border-radius: 999px; }
.ag-chat-websearch-wrap { display: inline-flex; align-items: center; gap: 6px; }
.ag-chat-websearch-wrap .ag-price-hint { flex-shrink: 0; }
.ag-model-picker-prominent .ag-model-picker-trigger-prominent {
    min-width: min(100%, 320px);
    padding: 10px 14px;
    border: 2px solid var(--ag-primary-soft);
    background: var(--ag-primary-soft);
    font-weight: 600;
}
.ag-model-picker-prominent-label { color: var(--ag-text-muted); font-weight: 500; font-size: 12px; }
.ag-model-picker-trigger-price { margin-left: auto; font-size: 12.5px; color: var(--ag-primary); font-weight: 600; white-space: nowrap; }
.ag-model-picker-model-check { display: none; color: var(--ag-primary); font-size: 18px; flex-shrink: 0; }
.ag-model-picker-model.is-selected .ag-model-picker-model-check { display: inline-flex; }

.ag-chat-attach { width: 38px; height: 38px; border-radius: 999px; }
.ag-chat-attach:disabled { opacity: .35; cursor: not-allowed; }
.ag-chat-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ag-chat-attachments:empty { display: none; }
.ag-chat-attachment-chip { position: relative; width: 56px; height: 56px; border-radius: var(--ag-radius-sm); overflow: hidden; border: 1px solid var(--ag-border); background: var(--ag-surface); }
.ag-chat-attachment-chip img,
.ag-chat-attachment-chip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-chat-attachment-chip.is-loading::after { content: ''; position: absolute; inset: 0; background: rgba(11,13,20,.55); }
.ag-chat-attachment-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; color: #fff; z-index: 1; }
.ag-chat-attachment-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(11,13,20,.75); color: #fff; font-size: 12px; line-height: 1; display: grid; place-items: center; cursor: pointer; }

.ag-chat-bubble-images { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ag-chat-bubble-images img { max-width: 180px; max-height: 180px; border-radius: var(--ag-radius-sm); display: block; }

@media (max-width: 560px) {
    .ag-model-picker-panel { width: calc(100vw - 40px); flex-direction: column; }
    .ag-model-picker-providers { width: 100%; flex-direction: row; border-right: none; border-bottom: 1px solid var(--ag-border); }
}

.ag-chat-send { padding: 10px 20px; }
.ag-chat-send:disabled { opacity: .6; cursor: not-allowed; }
.ag-chat-upsell { margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--ag-primary); background: var(--ag-primary-soft); border-radius: 999px; padding: 8px; }
.ag-chat-ref-hint { margin-top: 8px; font-size: 12px; color: var(--ag-text-muted); min-height: 1px; }
.ag-chat-ref-hint.is-warning { color: var(--ag-danger-text); }
.ag-image-status { margin-top: 8px; font-size: 12.5px; color: var(--ag-text-muted); min-height: 1px; }
.ag-image-status.is-warning { color: var(--ag-danger-text); }

.ag-chat-bubble-images.is-generating { display: flex; align-items: center; gap: 10px; color: var(--ag-text-muted); font-size: 13.5px; font-style: italic; }
.ag-chat-bubble-images img { cursor: zoom-in; }
.ag-chat-bubble-images.is-result img { max-width: 260px; max-height: 260px; }

/* --- Gallery (режим "Изображения") --- */
.ag-gallery-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.ag-gallery-grid { flex: 1; overflow-y: auto; padding: 14px 20px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; align-content: start; }
.ag-gallery-empty { grid-column: 1 / -1; color: var(--ag-text-muted); font-size: 13.5px; text-align: center; padding: 40px 0; }

.ag-gallery-item { position: relative; aspect-ratio: 1 / 1; border-radius: var(--ag-radius-sm); overflow: hidden; background: var(--ag-bg-soft); border: 1px solid var(--ag-border); cursor: pointer; }
.ag-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-gallery-item-badge { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(11, 13, 20, .68); backdrop-filter: blur(4px); color: #fff; font-size: 11.5px; font-weight: 600; pointer-events: none; }
.ag-gallery-download { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 8px; border: none; background: rgba(11, 13, 20, .68); color: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px); }
.ag-gallery-download:hover { background: var(--ag-primary); }
.ag-gallery-delete { position: absolute; top: 8px; right: 44px; width: 30px; height: 30px; border-radius: 8px; border: none; background: rgba(11, 13, 20, .68); color: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px); }
.ag-gallery-delete:hover { background: var(--ag-danger, #dc2626); }
.ag-gallery-item:hover .ag-gallery-download,
.ag-gallery-item:hover .ag-gallery-delete { display: flex; }

.ag-gallery-item.is-loading { cursor: default; }
.ag-gallery-skeleton { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(90deg, var(--ag-bg-soft) 25%, var(--ag-surface) 50%, var(--ag-bg-soft) 75%); background-size: 200% 100%; animation: ag-gallery-shimmer 1.4s ease-in-out infinite; color: var(--ag-primary); font-size: 24px; }
@keyframes ag-gallery-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.ag-gallery-item.is-failed { cursor: default; }
.ag-gallery-item.is-failed .ag-gallery-skeleton { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; animation: none; background: var(--ag-bg-soft); color: var(--ag-danger, #ff5c5c); text-align: center; }
.ag-gallery-skeleton-msg { font-size: 12.5px; line-height: 1.4; color: var(--ag-text-muted); font-weight: 400; }
.ag-gallery-grid-single .ag-gallery-item.is-failed .ag-gallery-skeleton { font-size: 40px; }
.ag-gallery-grid-single .ag-gallery-skeleton-msg { font-size: 17px; line-height: 1.5; max-width: 380px; }

.ag-gallery-item-video video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ag-gallery-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; background: rgba(11, 13, 20, .25); pointer-events: none; }
.ag-video-status-note { display: flex; align-items: center; gap: 6px; }

/* Блок «Результат» на страницах-инструментах: только последняя генерация, на весь блок,
   а не сетка со всей историей (история — отдельно, по ссылке «Вся история»). */
.ag-gallery-grid-single { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; overflow: visible; }
.ag-gallery-grid-single .ag-gallery-item { width: 100%; height: 100%; aspect-ratio: auto; cursor: zoom-in; }
.ag-gallery-grid-single .ag-gallery-item img { object-fit: contain; }
.ag-gallery-grid-single .ag-gallery-empty { padding: 0; }

.ag-image-textarea { min-height: 88px; resize: none; }

/* --- Видео: разделение Ввод / Результат --- */
.ag-video-split { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.ag-video-input-col, .ag-video-output-col { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; min-height: 0; margin: 0; }
.ag-video-input-col { border-right: 1px solid var(--ag-border); }

.ag-video-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 62px;
    box-sizing: border-box;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ag-border);
    flex-shrink: 0;
}
.ag-video-col-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ag-text); line-height: 1.2; flex-shrink: 0; }
.ag-video-history-btn { height: 32px; padding: 0 12px; font-size: 12.5px; }

.ag-video-col-body { flex: 1; min-height: 0; overflow: visible; padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }
.ag-video-field { display: flex; flex-direction: column; gap: 6px; }
/* [hidden] проигрывает .ag-video-field{display:flex} — обе правила из авторской таблицы стилей
   с одинаковой специфичностью, побеждает более позднее по каскаду (см. тот же баг у .ag-card-step
   в business-card.css) — нужно явно, иначе toggle через .hidden в JS (напр. позиционер
   «Расширить фото») ничего не скрывает. */
.ag-video-field[hidden] { display: none; }
.ag-video-field-row { display: flex; gap: 12px; }
.ag-video-field-row .ag-video-field { flex: 1; min-width: 0; }
.ag-video-field > label { font-size: 12.5px; font-weight: 600; color: var(--ag-text); }
.ag-video-field-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ag-video-field-hint { font-size: 11.5px; color: var(--ag-text-muted); }
.ag-video-counter-static { position: static; }

.ag-video-textarea {
    width: 100%; resize: none; min-height: 88px; background: var(--ag-surface); border: 1px solid var(--ag-border);
    color: var(--ag-text); border-radius: var(--ag-radius-sm); padding: 10px 12px; font-size: 14px; font-family: inherit;
}
.ag-video-textarea:focus { outline: none; border-color: var(--ag-primary); box-shadow: 0 0 0 3px var(--ag-primary-soft); }

/* Чипы быстрого выбора стиля (напр. «Генератор обоев») — в отличие от .ag-chat-type-switch
   (сегментированный переключатель на 2 варианта) их может быть много, поэтому свободный
   flex-wrap вместо пилюли фиксированной ширины. */
.ag-image-style-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-image-style-chip {
    border: 1px solid var(--ag-border); background: var(--ag-surface); color: var(--ag-text);
    font-size: 13px; font-weight: 600; font-family: inherit; padding: 7px 14px; border-radius: 999px;
    cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ag-image-style-chip:hover { border-color: var(--ag-primary); }
.ag-image-style-chip.is-active { background: var(--ag-primary-soft); border-color: var(--ag-primary); color: var(--ag-primary); }

/* Canvas-позиционер «Расширить фото» — рамка нужного формата (aspect-ratio задаёт JS по
   выбранному «Формату кадра»), внутри перетаскиваемое/масштабируемое фото. Клетчатый фон рамки
   показывает пустые поля, которые нейросеть дорисует — сама композиция считается в app.js
   (expandGetLayout) из тех же transform-значений, что применяются здесь визуально. */
.ag-expand-positioner { position: relative; }
.ag-expand-zoom-controls {
    position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; gap: 6px;
    background: rgba(17, 20, 28, .55); backdrop-filter: blur(4px); border-radius: 999px; padding: 4px;
}
.ag-expand-zoom-controls button {
    width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .14);
    color: #fff; font-size: 17px; line-height: 1; cursor: pointer; display: grid; place-items: center; font-family: inherit;
}
.ag-expand-zoom-controls button:hover { background: rgba(255, 255, 255, .26); }
.ag-expand-frame {
    position: relative; width: 100%; max-width: 360px; margin: 0 auto; overflow: hidden;
    border-radius: var(--ag-radius); border: 1px solid var(--ag-border); background-color: var(--ag-bg-soft);
    background-image:
        linear-gradient(45deg, var(--ag-border) 25%, transparent 25%), linear-gradient(-45deg, var(--ag-border) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--ag-border) 75%), linear-gradient(-45deg, transparent 75%, var(--ag-border) 75%);
    background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    cursor: grab; touch-action: none;
}
.ag-expand-frame:active { cursor: grabbing; }
.ag-expand-frame img { position: absolute; top: 50%; left: 50%; max-width: none; user-select: none; pointer-events: none; }
.ag-expand-foot-actions { display: flex; align-items: center; gap: 12px; }

.ag-video-model-field { width: 100%; }
.ag-video-model-field .ag-model-picker-trigger { width: 100%; height: 40px; }
.ag-video-select-block { width: 100%; height: 40px; }

.ag-video-dropzone { border: 1px dashed var(--ag-border); border-radius: var(--ag-radius-sm); padding: 14px; display: flex; flex-direction: column; gap: 10px; align-items: center; transition: border-color .15s ease, box-shadow .15s ease; }
/* Подсветка формы загрузки при попытке отправить без обязательного фото/видео (см. app.js —
   image/video submit-обработчики) — снимается сама при следующей загрузке/удалении файла. */
.ag-video-dropzone.is-missing { border-color: var(--ag-danger); background: var(--ag-danger-bg); box-shadow: 0 0 0 3px var(--ag-danger-border); }
.ag-video-dropzone-refs { margin: 0; }
.ag-video-dropzone-refs:empty { display: none; }
.ag-video-dropzone-trigger {
    width: 100%; border: none; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px; cursor: pointer; font-family: inherit; color: var(--ag-text-muted);
}
.ag-video-dropzone-trigger:disabled { opacity: .5; cursor: not-allowed; }
.ag-video-dropzone-trigger iconify-icon { font-size: 26px; color: var(--ag-primary); }
.ag-video-dropzone-trigger span:not(.ag-video-dropzone-hint) { font-size: 13px; font-weight: 600; color: var(--ag-text); }
.ag-video-dropzone-hint { font-size: 11.5px; color: var(--ag-text-muted); }

.ag-video-sound-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 14px; border-radius: var(--ag-radius-sm);
    border: 1px solid var(--ag-border); background: var(--ag-surface); color: var(--ag-text-muted); font-size: 13.5px; font-weight: 500;
    cursor: pointer; font-family: inherit;
}
.ag-video-sound-toggle iconify-icon { font-size: 17px; }
.ag-video-sound-toggle.is-active { border-color: var(--ag-primary); background: var(--ag-primary-soft); color: var(--ag-primary); }

.ag-video-col-foot { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--ag-border); flex-shrink: 0; }
.ag-video-col-foot .ag-chat-send { flex: 1; }
.ag-video-input-col .ag-image-status { padding: 0 18px 12px; }
.ag-video-input-col .ag-home-chat-guest-hint { padding: 0 18px 14px; margin: 0; }

.ag-video-output-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: hidden; }
.ag-video-output-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--ag-text-muted); max-width: 260px; }
.ag-video-output-placeholder[hidden] { display: none; }
.ag-video-output-placeholder iconify-icon { font-size: 34px; color: var(--ag-text-muted); margin-bottom: 4px; }
.ag-video-output-placeholder p { margin: 0; font-size: 14px; font-weight: 600; color: var(--ag-text); }
.ag-video-output-placeholder span { font-size: 12.5px; }
.ag-video-output-placeholder-danger iconify-icon { color: var(--ag-danger); }
.ag-video-output-player { max-width: 100%; max-height: 100%; border-radius: var(--ag-radius-sm); display: block; background: #000; }
.ag-video-output-player[hidden] { display: none; }
.ag-video-output-actions { padding: 14px 18px; border-top: 1px solid var(--ag-border); flex-shrink: 0; }

/* --- Увеличенное превью загруженного фото в упрощённой форме (например «Убрать водяной знак») ---
   .is-full навешивается из JS (updateRefHint) по факту достижения refMax загруженных фото — а не
   по простому наличию хотя бы одного чипа (:has), иначе на пресетах с двумя референсами
   («Объединить 2 фото») кнопка загрузки пропадала после первого же фото, не дав загрузить второе. */
.ag-video-dropzone-large.is-full { border: none; padding: 0; }
.ag-video-dropzone-large.is-full .ag-video-dropzone-trigger { display: none; }
.ag-video-dropzone-large .ag-chat-attachments { width: 100%; }
/* flex-basis 50% вместо фиксированной width:100% — один референс всё ещё растягивается на всю
   ширину (ему не с кем делить строку), а два (например «Объединить 2 фото») ложатся рядом
   вместо того, чтобы складываться в столбец из двух полноразмерных фото без ограничения высоты.
   max-height ограничивает случай «один референс на всю ширину» — без него такой чип растягивался
   почти на треть высоты формы и «наезжал» на кнопку «Сгенерировать» снизу. */
.ag-video-dropzone-large .ag-chat-attachment-chip { position: relative; flex: 1 1 calc(50% - 4px); min-width: 110px; height: auto; max-height: 170px; aspect-ratio: 4 / 3; border-radius: var(--ag-radius); }
.ag-video-dropzone-large .ag-chat-attachment-chip img { object-fit: contain; background: var(--ag-bg-soft); }
.ag-video-dropzone-large .ag-chat-attachment-chip::before { content: ''; position: absolute; inset: 0; background: rgba(15, 23, 42, 0); transition: background .15s ease; pointer-events: none; }
.ag-video-dropzone-large .ag-chat-attachment-chip:hover::before { background: rgba(15, 23, 42, .35); }
.ag-video-dropzone-large .ag-chat-attachment-remove { top: 10px; right: 10px; width: 32px; height: 32px; font-size: 20px; }
.ag-video-dropzone-large .ag-chat-attachment-spinner { font-size: 40px; }

/* --- Отдельные именованные слоты загрузки (например «Объединить 2 фото» — «Фото 1»/«Фото 2»)
   вместо одного общего дропзона: каждое фото загружается в свою собственную форму, поэтому видно,
   сколько фото нужно и куда именно каждое класть — см. app.js isSlotMode. --- */
.ag-video-ref-slots { display: flex; gap: 8px; width: 100%; }
.ag-video-ref-slot { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 10px; transition: border-color .15s ease, box-shadow .15s ease; }
.ag-video-ref-slot .ag-video-dropzone-trigger { padding: 6px 4px; }
.ag-video-ref-slot .ag-video-dropzone-trigger span:not(.ag-video-dropzone-hint) { font-size: 12.5px; }
.ag-video-ref-slot .ag-video-dropzone-hint { text-align: center; }
.ag-video-ref-slot .ag-chat-attachments { width: 100%; margin-bottom: 0; }
.ag-video-ref-slot .ag-chat-attachment-chip { position: relative; width: 100%; height: auto; max-height: 170px; aspect-ratio: 4 / 3; border-radius: var(--ag-radius); }
.ag-video-ref-slot .ag-chat-attachment-chip img { object-fit: contain; background: var(--ag-bg-soft); }
.ag-video-ref-slot .ag-chat-attachment-chip::before { content: ''; position: absolute; inset: 0; background: rgba(15, 23, 42, 0); transition: background .15s ease; pointer-events: none; }
.ag-video-ref-slot .ag-chat-attachment-chip:hover::before { background: rgba(15, 23, 42, .35); }
.ag-video-ref-slot .ag-chat-attachment-remove { top: 10px; right: 10px; width: 32px; height: 32px; font-size: 20px; }
.ag-video-ref-slot .ag-chat-attachment-spinner { font-size: 40px; }
.ag-video-ref-slot.is-full { border: none; padding: 0; }
.ag-video-ref-slot.is-full .ag-video-dropzone-trigger { display: none; }
/* .is-missing (подсветка при нехватке фото) наследуется от базового правила .ag-video-dropzone.is-missing
   выше — ag-video-ref-slot всегда несёт и класс ag-video-dropzone. */

/* --- «Семья по фото»: маленький пример результата под выбором пола/варианта --- */
/* Фиксированная высота (не зависит от пропорций single/collage) — чтобы блок не «прыгал» и не наезжал на кнопку «Сгенерировать» при переключении. */
.ag-family-example { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.ag-family-example-label { font-size: 13px; font-weight: 600; color: var(--ag-text-muted); }
.ag-family-example-img { display: block; border-radius: var(--ag-radius); border: 1px solid var(--ag-border); background: var(--ag-bg-soft); }
.ag-family-example-img.is-single { width: auto; max-width: 220px; height: auto; margin: 0 auto; }
.ag-family-example-img.is-collage { width: 100%; max-width: 100%; height: auto; }
/* Пол/вариант — пилюли на всю ширину, кнопки одинакового размера */
#ag-family-widget .ag-chat-type-switch { width: 100%; }
#ag-family-widget .ag-chat-type-btn { flex: 1; justify-content: center; }

/* --- Compare-слайдер «до / после» (демо-превью и реальный результат) --- */
.ag-compare { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 10px; }
.ag-compare[hidden] { display: none; }
.ag-compare-frame { position: relative; flex: 1; min-height: 220px; overflow: hidden; border-radius: var(--ag-radius); background: var(--ag-bg-soft); cursor: ew-resize; touch-action: none; }
.ag-compare-layer, .ag-compare-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--ag-bg-soft); }
.ag-compare-layer-after, .ag-compare-layer-before { object-fit: cover; background: linear-gradient(135deg, #24336b, #4a5ecb 55%, #8b98ea); }
.ag-compare-layer-before::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .9;
    background-repeat: repeat;
    background-size: 220px 130px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='130'%3E%3Ctext x='0' y='80' font-family='Arial, Helvetica, sans-serif' font-size='26' font-weight='700' fill='rgba(255,255,255,0.55)' transform='rotate(-24 110 65)'%3EWatermark%3C/text%3E%3C/svg%3E");
}
.ag-compare-clip { position: absolute; inset: 0; overflow: hidden; }
.ag-compare-handle { position: absolute; top: 0; bottom: 0; width: 0; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ag-compare-handle-line { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .15); }
.ag-compare-handle-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: var(--ag-shadow); display: flex; align-items: center; justify-content: center; gap: 1px; color: var(--ag-text); font-size: 15px; pointer-events: auto; cursor: ew-resize; }
.ag-compare-label { position: absolute; top: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(15, 23, 42, .55); color: #fff; font-size: 12px; font-weight: 600; pointer-events: none; }
.ag-compare-label-before { left: 12px; }
.ag-compare-label-after { right: 12px; }
.ag-compare-demo-hint { margin: 0; text-align: center; color: var(--ag-text-muted); font-size: 12.5px; }

/* --- Демо «фото → результат» для страницы «Редактирование фото» --- */
.ag-photoedit-demo { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ag-photoedit-demo[hidden] { display: none; }
.ag-photoedit-demo-row { display: flex; align-items: center; gap: 14px; }
.ag-photoedit-demo-frame { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ag-photoedit-demo-photo { width: 150px; height: 112px; border-radius: var(--ag-radius-sm); object-fit: cover; display: block; box-shadow: var(--ag-shadow); border: 1px solid var(--ag-border); }
.ag-photoedit-demo-tag { font-size: 12px; font-weight: 600; color: var(--ag-text-muted); }
.ag-photoedit-demo-arrow { font-size: 22px; color: var(--ag-primary); flex-shrink: 0; }
.ag-photoedit-demo-prompt { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--ag-bg-soft); border: 1px solid var(--ag-border); font-size: 13px; color: var(--ag-text); }
.ag-photoedit-demo-prompt iconify-icon { color: var(--ag-primary); font-size: 16px; flex-shrink: 0; }
.ag-photoedit-result-img { max-width: 100%; max-height: 100%; border-radius: var(--ag-radius-sm); display: block; object-fit: contain; }
.ag-photoedit-result-img[hidden] { display: none; }

@media (max-width: 780px) {
    .ag-video-split { flex-direction: column; overflow-y: auto; }
    .ag-video-input-col, .ag-video-output-col { flex: none; }
    .ag-video-input-col { border-right: none; border-bottom: 1px solid var(--ag-border); }
    .ag-video-col-body { overflow-y: visible; }
    .ag-video-output-stage { min-height: 260px; }
}

/* --- Audio (озвучка) --- */
.ag-audio-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.ag-audio-list { flex: 1; overflow-y: auto; padding: 14px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.ag-audio-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--ag-radius-sm); background: var(--ag-surface); border: 1px solid var(--ag-border); }
.ag-audio-item audio { height: 34px; max-width: 260px; flex-shrink: 0; }
.ag-audio-item-body { flex: 1; min-width: 0; }
.ag-audio-item-text { margin: 0; font-size: 13.5px; color: var(--ag-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-audio-item-meta { font-size: 12px; color: var(--ag-text-muted); }
.ag-audio-item .ag-gallery-download { position: static; display: flex; background: var(--ag-bg-soft); flex-shrink: 0; }
.ag-audio-item .ag-gallery-download:hover { background: var(--ag-primary); }
.ag-audio-item .ag-gallery-delete { position: static; display: flex; background: var(--ag-bg-soft); color: var(--ag-text-muted); flex-shrink: 0; }
.ag-audio-item .ag-gallery-delete:hover { background: var(--ag-danger-bg, #fee2e2); color: var(--ag-danger, #dc2626); }
.ag-audio-item.is-loading { opacity: .85; }
.ag-audio-item-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px dashed var(--ag-border);
    border-radius: 12px;
    color: var(--ag-text-muted);
    font-size: 13.5px;
}
.ag-audio-item-loading iconify-icon { font-size: 22px; }

/* --- Image modal --- */
.ag-image-modal { position: fixed; inset: 0; z-index: 250; display: none; align-items: center; justify-content: center; padding: 24px; }
.ag-image-modal.is-open { display: flex; }
.ag-image-modal-backdrop { position: absolute; inset: 0; background: rgba(6, 7, 12, .8); backdrop-filter: blur(4px); }
.ag-image-modal-content { position: relative; width: 100%; max-width: 920px; max-height: 88vh; background: var(--ag-surface); border: 1px solid var(--ag-border); border-radius: var(--ag-radius); box-shadow: var(--ag-shadow); display: flex; overflow: hidden; }
.ag-image-modal-left { flex: 1.3; min-width: 0; background: var(--ag-bg); display: grid; place-items: center; }
.ag-image-modal-left img, .ag-image-modal-left video { max-width: 100%; max-height: 88vh; object-fit: contain; display: block; }
.ag-image-modal-right { flex: 1; min-width: 260px; max-width: 340px; padding: 28px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.ag-image-modal-section h4 { margin: 0 0 6px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ag-text-muted); }
.ag-image-modal-section p { margin: 0; font-size: 14px; line-height: 1.5; word-break: break-word; }
.ag-image-modal-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: none; background: rgba(11, 13, 20, .5); color: #fff; border-radius: 8px; display: grid; place-items: center; cursor: pointer; z-index: 2; font-size: 20px; }
.ag-image-modal-close:hover { background: rgba(11, 13, 20, .8); }

@media (max-width: 720px) {
    .ag-image-modal-content { flex-direction: column; max-height: 92vh; }
    .ag-image-modal-right { max-width: none; }
}

.ag-chat-widget.is-fullscreen { position: fixed; inset: 0; z-index: 300; height: 100vh; border-radius: 0; margin: 0; }
.ag-media-widget-wrap .ag-chat-widget.is-fullscreen { height: 100vh; }
body.ag-chat-fullscreen-open { overflow: hidden; }
body.ag-chat-fullscreen-open .ag-widget-fullscreen-btn { position: fixed; top: 14px; right: 14px; z-index: 301; }


@media (max-width: 780px) {
    .ag-chat-widget { height: 560px; }
}

/* --- Mobile --- */
@media (max-width: 900px) {
    .ag-shell {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .ag-sidebar-mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: static;
        width: 36px;
        height: 36px;
        min-width: 0;
        padding: 0;
        border-radius: 8px;
        border: none;
        background: transparent;
        color: var(--ag-text);
        box-shadow: none;
        flex-shrink: 0;
    }
    .ag-sidebar-mobile-toggle iconify-icon { font-size: 24px; color: inherit; }
    .ag-mobile-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        position: sticky;
        top: 0;
        z-index: 55;
        padding: 10px 14px;
        background: var(--ag-surface);
        border-bottom: 1px solid var(--ag-border);
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    }
    /* Липкий .ag-mobile-topbar (z-index:55) иначе перекрывает шапку открытого сайдбара
       (лого + крестик закрытия) — поднимаем сайдбар и подложку выше него. */
    .ag-sidebar {
        position: fixed;
        top: 0;
        left: calc(-1 * var(--ag-sidebar-w) - 12px);
        width: min(var(--ag-sidebar-w), 86vw);
        height: 100vh;
        height: 100dvh;
        z-index: 57;
        flex: none;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        transition: left .22s ease;
    }
    .ag-sidebar.is-open { left: 0; }
    .ag-sidebar-backdrop { z-index: 56; }
    .ag-sidebar-close { display: flex; }
    .ag-main { flex: 1 1 auto; width: 100%; min-width: 0; }
    .ag-content { padding: 16px 14px 24px; }
    .ag-chat-header { flex-direction: column; align-items: stretch; gap: 10px; }
    .ag-chat-type-switch {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        border-radius: 12px;
        padding: 6px;
        width: 100%;
    }
    .ag-chat-type-btn {
        width: 100%;
        justify-content: center;
        border: 1px solid var(--ag-border);
        border-radius: 10px;
        background: var(--ag-bg-soft);
    }
    .ag-chat-type-btn.is-active {
        border-color: var(--ag-primary);
        background: var(--ag-primary-soft);
        box-shadow: inset 3px 0 0 var(--ag-primary);
    }
    .ag-chat-fullscreen-btn { width: 100%; justify-content: center; }
    .ag-chat-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
    .ag-chat-toolbar-left { width: 100%; }
    .ag-chat-send,
    .ag-chat-send-ref { width: 100%; justify-content: center; }
    .ag-model-picker-prominent .ag-model-picker-trigger-prominent { min-width: 0; width: 100%; }
    .ag-ios-toggle { width: 100%; justify-content: space-between; }
    .ag-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; padding: 12px; }
    .ag-image-modal-content { flex-direction: column; max-height: 92vh; }
}

@media (max-width: 560px) {
    .ag-chat-widget { height: auto; min-height: 70vh; }
    .ag-home-chat-widget { height: auto; min-height: 68vh; }
    .ag-chat-composer { padding: 12px; }
    .ag-chat-cat-dropdown-panel { left: 0; right: auto; }
    .ag-chat-cat-dropdown-panel-inner { min-width: min(260px, calc(100vw - 32px)); }
}

/* --- Sidebar StudyAI style --- */
.ag-sidebar-study { background: #f7f8fa; border-right-color: #eceef2; box-shadow: none; }
:root[data-theme="dark"] .ag-sidebar-study { background: var(--ag-bg-soft); }
.ag-sidebar-brand-icon { font-size: 22px; color: var(--ag-text); flex-shrink: 0; }
.ag-sidebar-nav-study { padding: 4px 12px 8px; gap: 2px; }
.ag-nav-link-study { padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--ag-text); gap: 12px; border: none; background: transparent; box-shadow: none; }
.ag-sidebar-new-form button.ag-nav-link-study {
    width: 100%;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}
.ag-nav-link-study iconify-icon { font-size: 20px; color: var(--ag-text); opacity: .85; }
.ag-nav-link-study:hover { background: rgba(15, 23, 42, 0.05); color: var(--ag-text); }
.ag-nav-link-study.is-active { background: rgba(14, 165, 233, 0.1); color: var(--ag-primary); }
.ag-nav-link-study.is-active iconify-icon { color: var(--ag-primary); opacity: 1; }
.ag-nav-badge-beta { margin-left: auto; font-size: 10px; font-weight: 700; color: #fff; background: #ef4444; border-radius: 999px; padding: 2px 7px; letter-spacing: .02em; }
.ag-sidebar-threads-study .ag-sidebar-thread-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding: 0; }
.ag-sidebar-threads-study .ag-sidebar-thread-item { display: flex; align-items: center; border-radius: 10px; min-width: 0; }
.ag-sidebar-threads-study .ag-sidebar-thread-item:hover { background: rgba(15, 23, 42, 0.05); }
.ag-sidebar-threads-study .ag-sidebar-thread-item.is-active { background: rgba(14, 165, 233, 0.1); }
.ag-sidebar-thread-link-study {
    display: flex; align-items: center; flex: 1; min-width: 0; padding: 8px 12px; border-radius: 10px;
    font-size: 13px; color: var(--ag-text-muted); gap: 7px;
}
.ag-sidebar-thread-link-study .ag-sidebar-thread-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-sidebar-thread-link-study:hover { color: var(--ag-text); }
.ag-sidebar-thread-link-study.is-active { color: var(--ag-primary); font-weight: 600; }
.ag-sidebar-threads-study .ag-sidebar-thread-delete,
.ag-sidebar-threads-study .ag-sidebar-thread-rename {
    flex-shrink: 0; width: 24px; height: 24px; margin-right: 4px; border: none; background: transparent;
    color: var(--ag-text-muted); border-radius: 6px; display: none; align-items: center; justify-content: center; cursor: pointer;
}
.ag-sidebar-threads-study .ag-sidebar-thread-item:hover .ag-sidebar-thread-delete,
.ag-sidebar-threads-study .ag-sidebar-thread-item:hover .ag-sidebar-thread-rename { display: flex; }
.ag-sidebar-threads-study .ag-sidebar-thread-delete:hover { background: var(--ag-danger-bg); color: var(--ag-danger); }
.ag-sidebar-threads-study .ag-sidebar-thread-rename:hover { background: var(--ag-bg-soft); color: var(--ag-text); }
.ag-sidebar-bottom { margin-top: auto; padding: 10px 12px 14px; border-top: 1px solid var(--ag-border); }
.ag-sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; transition: background .15s; }
.ag-sidebar-user:hover { background: rgba(15, 23, 42, 0.05); }
.ag-sidebar-user-avatar { width: 36px; height: 36px; border-radius: 999px; background: linear-gradient(135deg, #a78bfa, #38bdf8); color: #fff; font-size: 15px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.ag-sidebar-user-avatar-guest { background: var(--ag-bg-soft); color: var(--ag-text-muted); border: 1px solid var(--ag-border); font-size: 18px; }
.ag-sidebar-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ag-sidebar-user-name { font-size: 14px; font-weight: 600; color: var(--ag-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-sidebar-user-plan { font-size: 12px; color: var(--ag-text-muted); }
.ag-sidebar-user-chevron { font-size: 16px; color: var(--ag-text-muted); flex-shrink: 0; transition: transform .15s ease; }

.ag-sidebar-user-menu { position: relative; }
.ag-sidebar-user-trigger { width: 100%; border: none; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.ag-sidebar-user-menu.is-open .ag-sidebar-user-chevron { transform: rotate(180deg); }
.ag-sidebar-user-panel {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--ag-surface);
    border: 1px solid var(--ag-border);
    border-radius: 12px;
    box-shadow: var(--ag-shadow);
    padding: 6px;
    z-index: 90;
}
.ag-sidebar-user-menu.is-open .ag-sidebar-user-panel { display: block; }
.ag-sidebar-user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ag-text);
}
.ag-sidebar-user-menu-item iconify-icon { font-size: 18px; color: var(--ag-text-muted); flex-shrink: 0; }
.ag-sidebar-user-menu-item:hover { background: var(--ag-bg-soft); }
.ag-sidebar-user-menu-divider { height: 1px; background: var(--ag-border); margin: 4px 6px; }
.ag-sidebar-user-menu-item-danger { color: var(--ag-danger-text); }
.ag-sidebar-user-menu-item-danger iconify-icon { color: var(--ag-danger-text); }
.ag-sidebar-user-menu-item-danger:hover { background: var(--ag-danger-bg); }

.ag-sidebar-tools-section { display: flex; flex-direction: column; }
.ag-sidebar-dropdown-panel {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 4px 30px;
}
.ag-sidebar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--ag-text-muted);
}
.ag-sidebar-dropdown-item iconify-icon { font-size: 17px; color: var(--ag-text-muted); flex-shrink: 0; }
.ag-sidebar-dropdown-item:hover { background: var(--ag-bg-soft); color: var(--ag-primary); }
.ag-sidebar-dropdown-item:hover iconify-icon { color: var(--ag-primary); }
.ag-sidebar-dropdown-item.is-active { background: var(--ag-primary-soft); color: var(--ag-primary); font-weight: 600; }
.ag-sidebar-dropdown-soon { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--ag-text-muted); background: var(--ag-bg-soft); border-radius: 999px; padding: 2px 7px; }

/* --- Chat widget (rugpt ref) --- */
.ag-chat-widget-ref { display: block; height: min(72vh, 660px); border-radius: 16px; overflow: hidden; box-shadow: var(--ag-shadow); }
.ag-chat-layout { display: flex; height: 100%; min-height: 0; }
.ag-chat-rail { width: 220px; flex-shrink: 0; border-right: 1px solid var(--ag-border); background: var(--ag-surface); display: flex; flex-direction: column; padding: 14px 12px; gap: 12px; }
.ag-chat-rail-create { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: none; border-radius: 10px; background: transparent; color: var(--ag-text); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; text-align: left; }
.ag-chat-rail-create iconify-icon { font-size: 20px; color: var(--ag-text-muted); }
.ag-chat-rail-create:hover { background: var(--ag-bg-soft); }
.ag-chat-rail-new-form { margin: 0; }
.ag-chat-rail-promo { margin-top: auto; padding: 14px 10px; text-align: center; }
.ag-chat-rail-promo p { font-size: 13px; line-height: 1.5; color: var(--ag-text-muted); margin: 0 0 12px; }
.ag-chat-rail-promo strong { color: var(--ag-text); }
.ag-chat-rail-threads { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; scrollbar-color: var(--ag-border) transparent; }
.ag-chat-rail-threads::-webkit-scrollbar { width: 6px; }
.ag-chat-rail-threads::-webkit-scrollbar-track { background: transparent; }
.ag-chat-rail-threads::-webkit-scrollbar-thumb { background: var(--ag-border); border-radius: 999px; }
.ag-chat-rail-threads::-webkit-scrollbar-thumb:hover { background: var(--ag-text-muted); }
.ag-chat-rail-thread-item { display: flex; align-items: center; border-radius: 8px; }
.ag-chat-rail-thread { display: block; flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--ag-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-chat-rail-thread:hover { background: var(--ag-bg-soft); color: var(--ag-text); }
.ag-chat-rail-thread.is-active { background: var(--ag-primary-soft); color: var(--ag-primary); font-weight: 600; }
.ag-chat-rail-thread-delete { flex-shrink: 0; width: 24px; height: 24px; margin-right: 4px; border: none; background: transparent; color: var(--ag-text-muted); border-radius: 6px; display: none; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; }
.ag-chat-rail-thread-item:hover .ag-chat-rail-thread-delete { display: flex; }
.ag-chat-rail-thread-delete:hover { background: var(--ag-danger-bg); color: var(--ag-danger); }
.ag-chat-rail-thread-delete:disabled { opacity: .5; cursor: not-allowed; }

.ag-chat-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #eef4fa; }
:root[data-theme="dark"] .ag-chat-main { background: var(--ag-bg); }
.ag-chat-main-head { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 14px 0; flex-shrink: 0; }
.ag-chat-fullscreen-btn, .ag-chat-head-btn { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; color: var(--ag-text-muted); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; padding: 6px 8px; border-radius: 8px; }
.ag-chat-fullscreen-btn:hover, .ag-chat-head-btn:hover { color: var(--ag-text); background: rgba(255,255,255,.6); }
.ag-chat-fullscreen-btn iconify-icon, .ag-chat-head-btn iconify-icon { font-size: 18px; }

.ag-chat-messages-ref { flex: 1; background: transparent; padding: 8px 20px 16px; }
.ag-chat-bubble-ref { background: #fff; border: none; border-radius: 14px; box-shadow: 0 2px 12px -6px rgba(15, 23, 42, 0.12); padding: 14px 16px; font-size: 15px; }
:root[data-theme="dark"] .ag-chat-bubble-ref { background: var(--ag-surface); border: 1px solid var(--ag-border); box-shadow: none; }
.ag-chat-msg-user .ag-chat-bubble-ref { background: var(--ag-primary); color: #fff; box-shadow: none; }
.ag-chat-avatar-ref { width: 28px; height: 28px; border-radius: 8px; font-size: 14px; }

.ag-chat-composer-ref { border-top: none; padding: 0 16px 12px; background: transparent; }
.ag-chat-composer-box { background: #fff; border: 1px solid var(--ag-border); border-radius: 14px; padding: 10px 12px 12px; box-shadow: 0 4px 20px -8px rgba(15, 23, 42, 0.1); }
:root[data-theme="dark"] .ag-chat-composer-box { background: var(--ag-surface); }
.ag-chat-input-row-ref { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; position: relative; }
.ag-chat-plus-btn { width: 32px; height: 32px; border: none; background: transparent; color: var(--ag-text-muted); border-radius: 8px; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; margin-top: 2px; font-size: 22px; }
.ag-chat-plus-btn:hover { color: var(--ag-primary); background: var(--ag-primary-soft); }
.ag-chat-plus-wrap { position: relative; flex-shrink: 0; }
.ag-chat-plus-wrap.is-open .ag-chat-plus-btn { color: var(--ag-primary); background: var(--ag-primary-soft); }
.ag-chat-plus-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    min-width: 180px;
    padding: 6px;
    border: 1px solid var(--ag-border);
    border-radius: 12px;
    background: var(--ag-surface);
    box-shadow: var(--ag-shadow);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ag-chat-plus-menu[hidden] { display: none; }
.ag-chat-plus-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ag-text);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}
.ag-chat-plus-menu-item:hover { background: var(--ag-bg-soft); color: var(--ag-primary); }
.ag-chat-plus-menu-item iconify-icon { font-size: 18px; color: var(--ag-text-muted); }
.ag-chat-plus-menu-item:hover iconify-icon { color: var(--ag-primary); }
.ag-chat-textarea-ref { flex: 1; border: none; background: transparent; padding: 6px 4px; min-height: 44px; max-height: 140px; resize: none; font-size: 15px; box-shadow: none; }
.ag-chat-textarea-ref:focus { outline: none; box-shadow: none; border: none; }
.ag-chat-input-row-ref .ag-chat-counter { position: static; flex-shrink: 0; font-size: 12px; color: var(--ag-text-muted); padding-top: 8px; align-self: flex-start; }

.ag-chat-toolbar-ref { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ag-chat-toolbar-end { justify-content: flex-end; }
.ag-chat-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ag-border); background: var(--ag-bg-soft); color: var(--ag-text); font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; white-space: nowrap; }
.ag-chat-chip iconify-icon { font-size: 16px; color: var(--ag-text-muted); }
.ag-chat-chip-muted { color: var(--ag-text-muted); cursor: default; opacity: .85; }
.ag-chat-chip-icon { width: 36px; padding: 0; justify-content: center; }
.ag-chat-chip-icon.is-active,
.ag-chat-websearch.is-active { color: var(--ag-primary); border-color: var(--ag-primary); background: var(--ag-primary-soft); }
.ag-chat-send-ref { border-radius: 999px; padding: 10px 18px; font-size: 14px; white-space: nowrap; }

.ag-chat-upsell-bar { display: block; text-align: center; padding: 10px 16px 14px; font-size: 13px; font-weight: 600; color: var(--ag-primary); background: rgba(14, 165, 233, 0.12); border-top: 1px solid rgba(14, 165, 233, 0.15); }
.ag-chat-upsell-bar:hover { background: rgba(14, 165, 233, 0.18); }

@media (max-width: 860px) {
    .ag-chat-rail { display: none; }
    .ag-chat-widget-ref { height: min(68vh, 600px); }
}
@media (max-width: 780px) {
    .ag-chat-widget-ref { height: 560px; }
}