/* My Bots uses the same visual system as Home while retaining existing actions. */
#content:has(.neon-my-bots) {
    padding: calc(14px + max(var(--app-top-chrome-padding), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)))) 12px calc(var(--bottom-nav-height, 86px) + 20px);
}
.neon-my-bots {
    width: min(100%, var(--neon-page-max-width, 1060px));
    max-width: 100%;
    padding: 0; /* Undo old .mybots-page negative-margin + padding layout */
    min-width: 0;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}
.neon-my-bots button { transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.neon-my-bots *, .neon-my-bots *::before, .neon-my-bots *::after { box-sizing: border-box; }
.app-container:has(.neon-my-bots) {
    background: radial-gradient(ellipse at 4% 5%, #064e70 0, transparent 45%),
        radial-gradient(ellipse at 92% 64%, #15295a 0, transparent 54%), #06182d;
}
.app-container:has(.neon-my-bots) .bottom-nav {
    background: linear-gradient(115deg, #064265ed, #102b64ed);
    border: 1px solid #448bc766;
    box-shadow: 0 -8px 32px #0013274d, inset 0 1px 0 #b4eaff1f;
}
.app-container:has(.neon-my-bots) .nav-item.active {
    background: linear-gradient(120deg, #047cbb, #124abe);
    box-shadow: 0 0 20px #0985ff66, inset 0 0 0 1px #58c5ff99;
    color: #fff;
}
.app-container:has(.neon-my-bots) .nav-item.active svg { filter: drop-shadow(0 0 6px #44e7ff); }
.neon-my-bots .mybots-page-header {
    min-width: 0;
    margin: 0;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(120deg, #0b557ac7, #17275ecf);
}
.neon-my-bots .mybots-page-title {
    min-width: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f2fbff;
    flex: 1 1 auto;
    font-size: clamp(19px, 5vw, 28px);
    line-height: 1.1;
    letter-spacing: -.03em;
}
.mybots-page-title__icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border: 1px solid #4dd9ff80;
    border-radius: 13px;
    color: #65e7ff;
    background: #087ba04d;
    box-shadow: inset 0 1px 0 #fff2, 0 0 18px #16ccef2e;
}
.mybots-chrome-icon { width: 21px; height: 21px; display: block; }
.neon-my-bots .mybots-add-bot-button {
    min-width: 0;
    min-height: 44px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #61d6ff8a;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(125deg, #176cf5, #8155db);
    box-shadow: inset 0 1px 0 #fff4, 0 0 20px #1d87fa35;
    white-space: nowrap;
}
.neon-my-bots .mybots-controls {
    min-width: 0;
    margin: 0;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    border-radius: 18px;
    background: var(--neon-panel);
}
.neon-my-bots .mybots-controls__label {
    color: #9dcbe5;
    font-size: 11px;
    letter-spacing: .12em;
}
.neon-my-bots .mybots-controls__select {
    min-width: 0;
    width: 100%;
    max-width: none;
    min-height: 44px;
    padding: 8px 36px 8px 12px;
    border: 1px solid #5a9ddb66;
    border-radius: 13px;
    color: #ecf8ff;
    background-color: #18284cd9;
}
.neon-my-bots .mybots-count { margin: 2px 2px 0; color: #a8cde2; font-size: 12px; }
.neon-my-bots .mybots-list { display: grid; gap: 14px; min-width: 0; }
.neon-my-bots .mybots-bot-card {
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 16px;
    overflow: hidden;
    border-radius: 22px;
    border-color: #4cb9e570;
    background: linear-gradient(125deg, #0b4163c9, #142d57df);
}
.neon-my-bots .mybots-bot-card--compact { padding-block: 14px; }
.neon-my-bots .mybots-card__header {
    min-width: 0;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}
.neon-my-bots .mybots-bot-card__avatar {
    width: 52px;
    height: 52px;
    border: 1px solid #4ee5ff;
    border-radius: 18px;
    box-shadow: 0 0 18px #20d7f23a;
}
.neon-my-bots .mybots-card__identity { min-width: 0; }
.neon-my-bots .mybots-card__title {
    margin: 0;
    overflow: hidden;
    color: #f4fbff;
    font-size: 17px;
    font-weight: 750;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.neon-my-bots .mybots-card__username {
    margin: 3px 0 0;
    overflow: hidden;
    color: #8fb5d1;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.neon-my-bots .mybots-status-pill {
    padding: 7px 10px;
    border: 1px solid #4ee8a370;
    border-radius: 999px;
    color: #84f2be;
    background: #0ba86921;
    font-size: 10px;
    letter-spacing: .08em;
}
.neon-my-bots .mybots-card__chips {
    min-width: 0;
    margin: 12px 0 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}
.neon-my-bots .mybots-chip {
    min-width: 0;
    min-height: 34px;
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    font-size: 11px;
}
.neon-my-bots .mybots-chip--online { display: none; }
.mybots-status-icon { width: 16px; height: 16px; display: block; }
.neon-my-bots .mybots-card__collapse-toggle {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid #51c8ef5e;
    border-radius: 50%;
    color: #8eeeff;
    background: #0c6a8c52;
}
.neon-my-bots.mybots-page .mybots-card__expanded-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .28s ease, opacity .2s ease;
}
.neon-my-bots.mybots-page .mybots-card__expanded-body-inner { min-height: 0; overflow: hidden; }
.neon-my-bots.mybots-page .mybots-bot-card--compact .mybots-card__expanded-body {
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-5px);
}
.neon-my-bots.mybots-page .mybots-bot-card--expanded .mybots-card__expanded-body,
.neon-my-bots.mybots-page .mybots-bot-card--active .mybots-card__expanded-body {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
}
.neon-my-bots .mybots-kpi-grid {
    min-width: 0;
    margin: 14px 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}
.neon-my-bots .mybots-kpi-card {
    min-width: 0;
    min-height: 98px;
    padding: 11px;
    border: 1px solid #7bbce64d;
    border-radius: 17px;
    background: linear-gradient(150deg, #18496993, #10335e96);
    box-shadow: inset 0 1px 0 #fff1;
}
.neon-my-bots .mybots-kpi-card__icon { color: #78dfff; }
.neon-my-bots .bot-metric-card__svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.neon-my-bots .mybots-kpi-card__value { margin-top: 16px; color: #fff; font-size: 24px; line-height: 1; }
.neon-my-bots .mybots-kpi-card__label { margin-top: 6px; color: #9dbbd1; font-size: 10px; line-height: 1.2; overflow-wrap: anywhere; }
.neon-my-bots .mybots-activity-card {
    min-width: 0;
    margin: 12px 0 0;
    padding: 13px;
    border: 1px solid #6ba9d44a;
    border-radius: 17px;
    background: #082e5366;
}
.neon-my-bots .bot-activity-panel__header { display: flex; justify-content: space-between; gap: 10px; }
.neon-my-bots .bot-activity-panel__title { color: #a8c9de; font-size: 10px; letter-spacing: .08em; }
.neon-my-bots .bot-activity-panel__chart { min-width: 0; overflow: hidden; }
.neon-my-bots .bot-activity-panel__empty {
    min-height: 50px;
    display: grid;
    place-items: center;
    border: 1px dashed #6f98b64c;
    border-radius: 13px;
    color: #7699b2;
    font-size: 11px;
}
.neon-my-bots .bot-activity-panel__rows { min-width: 0; }
.neon-my-bots .bot-activity-row { min-width: 0; grid-template-columns: 22px minmax(0, 1fr) auto; }
.neon-my-bots .bot-activity-row__value { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neon-my-bots .mybots-action-grid {
    min-width: 0;
    margin: 12px 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.neon-my-bots .mybots-action-tile {
    min-width: 0;
    min-height: 72px;
    padding: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    border: 1px solid #77afe05c;
    border-radius: 15px;
    color: #d9eeff;
    background: #17426978;
    box-shadow: inset 0 1px 0 #fff2;
}
.neon-my-bots .mybots-action-tile__icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #70e1ff;
    background: #0c709250;
}
.neon-my-bots .mybots-action-tile:nth-child(2) .mybots-action-tile__icon { color: #d988ff; background: #8b3ba126; }
.neon-my-bots .mybots-action-tile:nth-child(3) .mybots-action-tile__icon { color: #ffc568; background: #a467262b; }
.neon-my-bots .mybots-action-tile:nth-child(4) .mybots-action-tile__icon { color: #7cf2ba; background: #12935b29; }
.neon-my-bots .mybots-action-tile:nth-child(5) .mybots-action-tile__icon { color: #82b8ff; background: #2862aa2c; }
.neon-my-bots .mybots-action-tile__svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.neon-my-bots .mybots-action-tile__label {
    max-width: 100%;
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
    text-align: start;
}
.neon-my-bots :is(button, select):focus-visible { outline: 2px solid #7eeaff; outline-offset: 3px; }
@media (hover: hover) {
    .neon-my-bots .mybots-action-tile:hover { border-color: #70dbff9c; background: #2b70a24d; transform: translateY(-2px); }
    .neon-my-bots .mybots-add-bot-button:hover { box-shadow: inset 0 1px 0 #fff4, 0 0 28px #1d87fa66; }
}
@media (max-width: 520px) {
    .app-container:has(.neon-my-bots) .bottom-nav { border-radius: 24px 24px 0 0; padding-top: 8px; }
    .neon-my-bots .mybots-page-header { padding: 13px; }
    .neon-my-bots .mybots-page-title { font-size: 22px; }
    .mybots-page-title__icon { width: 34px; height: 34px; flex-basis: 34px; }
    .neon-my-bots .mybots-add-bot-button { padding-inline: 11px; font-size: 11px; }
    .neon-my-bots .mybots-controls { grid-template-columns: max-content minmax(0, 1fr); gap: 8px; }
    .neon-my-bots .mybots-card__header { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; }
    .neon-my-bots .mybots-bot-card__avatar { width: 52px; height: 52px; }
    .neon-my-bots .mybots-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 370px) {
    .neon-my-bots .mybots-page-header { align-items: stretch; flex-direction: column; }
    .neon-my-bots .mybots-add-bot-button { width: 100%; }
    .neon-my-bots .mybots-status-pill { padding-inline: 8px; font-size: 9px; }
    .neon-my-bots .mybots-kpi-card { padding: 9px; }
    .neon-my-bots .mybots-kpi-card__value { font-size: 20px; }
    .neon-my-bots .mybots-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .neon-my-bots *, .neon-my-bots *::before, .neon-my-bots *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}


/* Shared Home layout contract: route geometry is not owned by legacy my-bots.css. */
#content.neon-workspace-content:has(.neon-my-bots) {
    padding-left: max(var(--neon-page-gutter, 12px), env(safe-area-inset-left, 0px));
    padding-right: max(var(--neon-page-gutter, 12px), env(safe-area-inset-right, 0px));
    padding-bottom: calc(var(--bottom-nav-height, 86px) + max(20px, env(safe-area-inset-bottom, 0px)));
}
.neon-workspace-content .neon-my-bots {
    width: min(100%, var(--neon-page-max-width, 1060px));
    margin: 0 auto;
    padding: 0;
    max-width: 100%;
}
.neon-my-bots .mybots-page-header,
.neon-my-bots .mybots-controls,
.neon-my-bots .mybots-bot-card {
    max-width: 100%;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.neon-my-bots .mybots-page-header { flex-wrap: nowrap; background: var(--neon-panel); }
.neon-my-bots .mybots-page-title > span:last-child {
    min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.neon-my-bots .mybots-add-bot-button {
    flex: 0 0 auto; max-width: 50%; padding-inline: 10px;
    white-space: normal; text-align: center; font-size: 12px;
}
.neon-my-bots .mybots-add-bot-button > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.neon-my-bots .mybots-controls { padding: 12px 16px; border-radius: 20px; }
.neon-my-bots .mybots-controls__label { font-size: 12px; line-height: 1.3; white-space: normal; }
.neon-my-bots .mybots-count { margin: 0 2px; }
.neon-my-bots .mybots-bot-card { box-shadow: inset 0 1px 0 #d4f4ff12, 0 12px 30px #0003; }
.neon-my-bots .mybots-bot-card--active { border-color: #39caef9c; }
.neon-my-bots .mybots-card__chips { margin-top: 10px; flex-wrap: wrap; }
.neon-my-bots .mybots-status-pill {
    max-width: 104px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.neon-my-bots .mybots-card__collapse-toggle {
    width: 44px; height: 44px; min-width: 44px; backdrop-filter: none;
}
.neon-my-bots .mybots-bot-card .mybots-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px; margin-top: 14px;
}
.neon-my-bots .mybots-bot-card .mybots-kpi-card {
    min-height: 98px; padding: 10px; border-radius: 16px;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: inset 0 1px 0 #fff1;
}
.neon-my-bots .mybots-kpi-card__value {
    margin-top: 0; font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.neon-my-bots .mybots-kpi-card__label {
    margin-top: 5px; font-size: 11px; line-height: 1.3; color: #b4cede;
}
.neon-my-bots .mybots-activity-card,
.neon-my-bots .mybots-action-tile {
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.neon-my-bots .mybots-action-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.neon-my-bots .mybots-action-tile__icon { flex: 0 0 32px; }
.neon-my-bots .mybots-action-tile__label { text-align: start; }
@media (min-width: 768px) {
    .neon-my-bots .mybots-action-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .neon-my-bots .mybots-action-tile { flex-direction: column; justify-content: center; text-align: center; min-height: 82px; }
    .neon-my-bots .mybots-action-tile:last-child:nth-child(odd) { grid-column: auto; }
    .neon-my-bots .mybots-action-tile__label { text-align: center; }
}
@media (max-width: 359px) {
    .neon-my-bots .mybots-controls { grid-template-columns: 1fr; }
    .neon-my-bots .mybots-page-header { flex-wrap: wrap; }
    .neon-my-bots .mybots-add-bot-button { flex: 1 1 100%; max-width: 100%; }
}

/* Desktop uses the same owner-workspace outer inset as Home. */
@media (min-width: 768px) {
    #content.neon-workspace-content:has(.neon-my-bots) {
        padding-left: clamp(20px, 4vw, 48px);
        padding-right: clamp(20px, 4vw, 48px);
        padding-bottom: 32px;
    }
}

/* My Bots consumes the same theme surface tokens as all other owner routes.
 * The feature stylesheet loads last solely for its responsive geometry. */
.app-container.neon-workspace-shell:has(.neon-my-bots) { background: var(--saas-app-background); }
.neon-my-bots :is(.mybots-page-header, .mybots-controls) {
    background: var(--saas-surface);
    border-color: var(--saas-border);
}
.neon-my-bots .mybots-bot-card {
    background: var(--saas-surface-raised);
    border-color: var(--saas-border);
}
.neon-my-bots .mybots-bot-card--active { border-color: var(--saas-border-focus); }
.neon-my-bots :is(.mybots-kpi-card, .mybots-activity-card, .mybots-action-tile) {
    border-color: var(--saas-border);
    background: var(--saas-surface-inset);
    box-shadow: inset 0 1px 0 #d4f4ff0a;
}
.neon-my-bots .mybots-add-bot-button {
    border-color: var(--saas-border-focus);
    background: var(--saas-button-primary);
}
.neon-my-bots .mybots-controls__select {
    border-color: var(--saas-border);
    color: var(--saas-fg);
    background-color: var(--saas-surface-inset);
}
.neon-my-bots .mybots-card__title,
.neon-my-bots .mybots-kpi-card__value { color: var(--saas-fg); }
.neon-my-bots :is(.mybots-card__username, .mybots-kpi-card__label) { color: var(--saas-muted); }

/* Feature geometry honors global shape tokens. */
.neon-my-bots :is(.mybots-page-header, .mybots-bot-card) { border-radius: var(--saas-radius); }
.neon-my-bots :is(.mybots-controls, .mybots-action-tile, .mybots-kpi-card,
    .mybots-add-bot-button, .mybots-controls__select) { border-radius: var(--saas-radius-small); }

.app-container.neon-workspace-shell:has(.neon-my-bots) .bottom-nav {
    border-color: var(--saas-border);
    background: var(--saas-nav-background);
}
.app-container.neon-workspace-shell:has(.neon-my-bots) .nav-item.active {
    background: var(--saas-button-primary);
    border-color: var(--saas-border-focus);
}

/* Legacy my-bots.css still paints purple/white radial pseudo-elements over
 * the new dark SaaS surfaces. These are the visible "old" artifacts even when
 * CSS has updated; keep action tone in SVG, not a blurred backdrop. */
.neon-workspace-content .neon-my-bots .mybots-bot-card::before,
.neon-workspace-content .neon-my-bots .mybots-action-tile::before {
    content: none;
    display: none;
}
.neon-workspace-content .neon-my-bots .mybots-bot-card {
    background: var(--saas-surface);
    border-color: var(--saas-border);
    box-shadow: var(--saas-shadow);
}
.neon-workspace-content .neon-my-bots .mybots-action-tile {
    background: var(--saas-surface-inset);
    border-color: var(--saas-border);
    box-shadow: inset 0 1px 0 #d4f4ff0a;
}

/* P1: legacy high-specificity active/battle/manual selectors from my-bots.css
 * were still replacing KPI/action backgrounds with glossy white gradients.
 * Keep mode as status semantics, never as a second card design system. */
.neon-workspace-content .neon-my-bots.mybots-page .mybots-bot-card--active :is(
    .mybots-kpi-card, .mybots-action-tile, .mybots-activity-card
) {
    background: var(--saas-surface-inset);
    border-color: var(--saas-border);
    color: var(--saas-fg);
    box-shadow: inset 0 1px 0 #d4f4ff0a;
    text-shadow: none;
}
.neon-workspace-content .neon-my-bots.mybots-page .mybots-bot-card--active :is(
    .mybots-kpi-card, .mybots-action-tile
)::before {
    content: none;
    display: none;
}
.neon-workspace-content .neon-my-bots.mybots-page .mybots-bot-card--active .mybots-bot-card__avatar {
    box-shadow: none;
}