/*
 * The plugin page: header, tab bar, panel and every control inside it.
 *
 * Enqueued on the plugin page alone, gated on the hook suffix
 * add_submenu_page()/add_menu_page() returned, so none of this reaches the
 * rest of the administration or the post editor, where the metaboxes keep
 * using admin.css.
 *
 * The page borrows the shape of the screens built on the WordPress 7.1 admin
 * shell: one rounded white panel sitting in a dark field. It is the same
 * language as the Syrus theme's own options page, deliberately, so a site
 * running both does not look like it is running two products — but it is a
 * copy, not a dependency. The plugin ships on wordpress.org and has to stand
 * on its own: reading the theme's stylesheet would be exactly the coupling
 * that made the plugin's menu disappear when the theme reorganised its own.
 *
 * This file replaced Bootstrap 5, which used to be loaded here in full to
 * style sixteen templates. Bootstrap's JavaScript was never enqueued, so
 * nothing behavioural depended on it.
 */


#wpcontent {
    padding-left: 0 !important;
}

/*
 * Around the panel: the dark field the screens built on the 7.1 admin shell
 * sit in, which is what makes the rounded corners read at all. It goes on the
 * body, where core puts it, so the rubber band at either end of the scroll
 * does not uncover white and give away that the dark is a layer of its own.
 */
body.syrus-ai-page {
    background-color: #1e1e1e;
}

/* Those screens drop the footer, so the panel can reach the bottom edge. */
body.syrus-ai-page #wpfooter {
    display: none;
}

/* Core prints notices above everything; inside the dark field they float. */
body.syrus-ai-page .notice,
body.syrus-ai-page .updated,
body.syrus-ai-page .error {
    margin: 12px 20px 0 12px;
}


/* -------------------------------------------------------------------------
 * Tokens
 * ---------------------------------------------------------------------- */

/* Bootstrap's reboot used to set this page-wide; it is no longer loaded. */
.syrus-ai-stage,
.syrus-ai-stage *,
.syrus-ai-stage *::before,
.syrus-ai-stage *::after {
    box-sizing: border-box;
}

.syrus-ai-stage {
    --syrus-ai-measure: 1320px;
    --syrus-ai-accent: #0f6eb4;
    --syrus-ai-accent-strong: #0b5a96;
    --syrus-ai-accent-soft: #eaf3fa;
    --syrus-ai-amber: #feb200;

    --syrus-ai-ink: #1d2327;
    --syrus-ai-ink-soft: #50575e;
    --syrus-ai-ink-faint: #787c82;

    --syrus-ai-surface: #fff;
    --syrus-ai-surface-soft: #f6f7f8;
    --syrus-ai-border: #e2e4e7;
    --syrus-ai-border-strong: #d3d6da;

    --syrus-ai-ok: #00804a;
    --syrus-ai-ok-soft: #e7f5ee;
    --syrus-ai-warn: #a06800;
    --syrus-ai-warn-soft: #fcf4e3;
    --syrus-ai-danger: #b32d2e;
    --syrus-ai-danger-soft: #fcebeb;

    --syrus-ai-radius: 12px;
    --syrus-ai-radius-sm: 8px;
    --syrus-ai-gutter: 32px;
}


/* -------------------------------------------------------------------------
 * The panel
 * ---------------------------------------------------------------------- */

/*
 * Flush under the admin bar and against the menu, 8px of dark showing on the
 * other two sides, and the full height of the window.
 *
 * No `overflow: hidden` here, deliberately. It would clip the accent strip to
 * the rounded corners for free, but an overflow container also stops
 * `position: sticky` working for everything inside it, and the save bars need
 * it. The strip rounds its own two top corners instead, as an inset shadow:
 * a 3px tall ::before could not be rounded, because a border radius larger
 * than the box is scaled down to fit.
 */
.syrus-ai-stage {
    position: relative;
    margin: 0 8px 8px 0;
    min-height: calc(100vh - 40px);
    border-radius: var(--syrus-ai-radius);
    background-color: var(--syrus-ai-surface);
    color: var(--syrus-ai-ink);
    box-shadow: inset 0 3px 0 var(--syrus-ai-amber);
}

/* Below this width WordPress makes the admin bar 46px tall. */
@media screen and (max-width: 782px) {
    .syrus-ai-stage {
        min-height: calc(100vh - 54px);
    }
}


/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

/*
 * Header, tab bar and body share one measure, or the title sits against the
 * left edge of the panel while the cards are centred in the middle of it.
 */
.syrus-ai-header,
.syrus-ai-body {
    max-width: calc(var(--syrus-ai-measure) + var(--syrus-ai-gutter) * 2);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--syrus-ai-gutter);
    padding-right: var(--syrus-ai-gutter);
}

.syrus-ai-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 26px;
    padding-bottom: 22px;
}

.syrus-ai-header__identity {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

/* The logo sits on a tinted tile so it reads as a mark rather than a stray
   image, whatever the artwork behind it. */
.syrus-ai-header__mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: var(--syrus-ai-radius-sm);
    background: linear-gradient(140deg, var(--syrus-ai-accent-soft), #fff);
    box-shadow: inset 0 0 0 1px var(--syrus-ai-border);
}

.syrus-ai-header__mark img {
    display: block;
    width: 36px;
    height: auto;
}

.syrus-ai-header__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--syrus-ai-ink);
}

/* The title is a link back to the home tab: there is no Home item in the bar. */
.syrus-ai-header__home {
    color: inherit;
    text-decoration: none;
}

.syrus-ai-header__home:hover,
.syrus-ai-header__home:focus {
    color: var(--syrus-ai-accent);
}

.syrus-ai-header__subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--syrus-ai-ink-faint);
}

.syrus-ai-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}


/* -------------------------------------------------------------------------
 * Pills
 * ---------------------------------------------------------------------- */

.syrus-ai-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
}

.syrus-ai-pill .dashicons {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.syrus-ai-pill--version {
    background-color: var(--syrus-ai-surface-soft);
    color: var(--syrus-ai-ink-soft);
    box-shadow: inset 0 0 0 1px var(--syrus-ai-border);
}

.syrus-ai-pill--ok {
    background-color: var(--syrus-ai-ok-soft);
    color: var(--syrus-ai-ok);
}

.syrus-ai-pill--off {
    background-color: var(--syrus-ai-danger-soft);
    color: var(--syrus-ai-danger);
}


/* -------------------------------------------------------------------------
 * Tab bar
 * ---------------------------------------------------------------------- */

/*
 * Left aligned and content width. The tabs used to be `flex: 1`, which spread
 * nine labels across the whole width of a very wide panel and read as nine
 * unrelated buttons rather than a bar.
 */
.syrus-ai-tabs {
    border-bottom: 1px solid var(--syrus-ai-border);
}

/*
 * No `overflow` on this box, at any width. The dropdowns are positioned
 * against their `li` and hang below the bar, and an overflow container clips
 * absolutely positioned descendants: with `overflow-x: auto` here the caret
 * turned but the menu was never visible. When the labels no longer fit they
 * wrap to a second line instead, which costs 40px and clips nothing.
 */
.syrus-ai-tabs ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    max-width: calc(var(--syrus-ai-measure) + var(--syrus-ai-gutter) * 2);
    margin: 0 auto;
    padding: 0 calc(var(--syrus-ai-gutter) - 11px);
    list-style: none;
}

.syrus-ai-tabs li {
    position: relative;
    margin: 0;
}

.syrus-ai-tabs__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 11px;
    border-bottom: 2px solid transparent;
    color: var(--syrus-ai-ink-soft);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.syrus-ai-tabs__link .dashicons {
    width: 17px;
    height: 17px;
    font-size: 17px;
}

.syrus-ai-tabs__link:hover,
.syrus-ai-tabs__link:focus {
    color: var(--syrus-ai-accent);
    background-color: var(--syrus-ai-surface-soft);
}

.syrus-ai-tabs__link.is-active {
    color: var(--syrus-ai-accent);
    border-bottom-color: var(--syrus-ai-accent);
    font-weight: 600;
}

/* The caret of an item that opens a submenu. */
.syrus-ai-tabs__caret {
    width: 14px;
    height: 14px;
    font-size: 14px;
    margin-left: -2px;
    color: var(--syrus-ai-ink-faint);
    transition: transform .15s ease;
}

.syrus-ai-tabs li.is-open .syrus-ai-tabs__caret {
    transform: rotate(180deg);
}

/*
 * The submenu is shown and hidden by jQuery in admin.js, which writes an
 * inline `display`, so this rule sets everything except that. The markup
 * carries `style="display:none"` for the first paint.
 */
.syrus-ai-submenu {
    position: absolute;
    top: 100%;
    left: 6px;
    z-index: 20;
    min-width: 230px;
    padding: 6px;
    border: 1px solid var(--syrus-ai-border);
    border-radius: var(--syrus-ai-radius-sm);
    background-color: var(--syrus-ai-surface);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

.syrus-ai-submenu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--syrus-ai-ink-soft);
    font-size: 13px;
    text-decoration: none;
}

.syrus-ai-submenu a .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: var(--syrus-ai-ink-faint);
}

.syrus-ai-submenu a:hover,
.syrus-ai-submenu a:focus {
    background-color: var(--syrus-ai-surface-soft);
    color: var(--syrus-ai-accent);
}

.syrus-ai-submenu a.is-active {
    color: var(--syrus-ai-accent);
    font-weight: 600;
}

.syrus-ai-submenu a.is-active .dashicons {
    color: var(--syrus-ai-accent);
}


/* -------------------------------------------------------------------------
 * Body
 * ---------------------------------------------------------------------- */

.syrus-ai-body {
    padding-top: 28px;
    padding-bottom: 0;
}

/* Tabs without a save bar still need to clear the bottom of the panel. */
.syrus-ai-body > *:last-child {
    margin-bottom: 40px;
}

.syrus-ai-screen-title {
    margin: 0 0 4px;
    padding: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--syrus-ai-ink);
}

.syrus-ai-screen-note {
    max-width: 78ch;
    margin: 0 0 22px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--syrus-ai-ink-faint);
}


/* -------------------------------------------------------------------------
 * Cards
 * ---------------------------------------------------------------------- */

.syrus-ai-card {
    margin-bottom: 20px;
    border: 1px solid var(--syrus-ai-border);
    border-radius: var(--syrus-ai-radius);
    background-color: var(--syrus-ai-surface);
}

.syrus-ai-card__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--syrus-ai-border);
}

.syrus-ai-card__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--syrus-ai-radius-sm);
    background-color: var(--syrus-ai-accent-soft);
    color: var(--syrus-ai-accent);
}

.syrus-ai-card__icon .dashicons {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.syrus-ai-card__title {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--syrus-ai-ink);
}

.syrus-ai-card__note {
    max-width: 78ch;
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--syrus-ai-ink-faint);
}

/* Pushed to the right of the head: a pill, or a button. */
.syrus-ai-card__aside {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding-left: 14px;
}

.syrus-ai-card__body {
    padding: 8px 24px 24px;
}

.syrus-ai-card__body > *:first-child {
    margin-top: 0;
}


/* -------------------------------------------------------------------------
 * Fields
 * ---------------------------------------------------------------------- */

.syrus-ai-field {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--syrus-ai-border);
}

.syrus-ai-field:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* A field whose control sits under the label rather than beside it: a
   textarea of raw HTML has nothing to gain from a 24px column of its own. */
.syrus-ai-field--stacked {
    display: block;
}

.syrus-ai-field__text {
    flex: 1;
    min-width: 0;
}

.syrus-ai-field__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--syrus-ai-ink);
    cursor: pointer;
}

.syrus-ai-field__hint {
    display: block;
    max-width: 78ch;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--syrus-ai-ink-faint);
}

.syrus-ai-field__control {
    flex: 0 0 auto;
}

.syrus-ai-field--stacked .syrus-ai-field__control {
    margin-top: 10px;
}

/* Two fields side by side, for a pair that belongs together. */
.syrus-ai-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--syrus-ai-border);
}

.syrus-ai-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}


/* -------------------------------------------------------------------------
 * Text controls
 * ---------------------------------------------------------------------- */

.syrus-ai-input,
.syrus-ai-select,
.syrus-ai-textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 36px;
    margin: 0;
    padding: 7px 11px;
    border: 1px solid var(--syrus-ai-border-strong);
    border-radius: var(--syrus-ai-radius-sm);
    background-color: var(--syrus-ai-surface);
    color: var(--syrus-ai-ink);
    font-size: 13px;
    line-height: 1.5;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.syrus-ai-input:focus,
.syrus-ai-select:focus,
.syrus-ai-textarea:focus {
    border-color: var(--syrus-ai-accent);
    box-shadow: 0 0 0 1px var(--syrus-ai-accent);
    outline: none;
}

.syrus-ai-input::placeholder,
.syrus-ai-textarea::placeholder {
    color: var(--syrus-ai-ink-faint);
}

.syrus-ai-input[disabled],
.syrus-ai-select[disabled],
.syrus-ai-textarea[disabled] {
    background-color: var(--syrus-ai-surface-soft);
    color: var(--syrus-ai-ink-faint);
}

.syrus-ai-input--narrow {
    max-width: 320px;
}

/* A number, so the box is the size of the number. */
.syrus-ai-input--tiny {
    width: 110px;
}

/* A yes/no beside a label, inside a table cell. */
.syrus-ai-select--tiny {
    width: auto;
    min-width: 92px;
}

/* Vertical rhythm between two blocks inside one card body. */
.syrus-ai-stack {
    margin-top: 18px;
}

.syrus-ai-textarea {
    min-height: 120px;
    resize: vertical;
}

/*
 * Raw HTML and JavaScript go in these, so they are read as code: a monospace
 * face makes an unclosed tag visible in a way a proportional one does not.
 */
.syrus-ai-textarea--code {
    min-height: 170px;
    font-family: Menlo, Consolas, monaco, monospace;
    font-size: 12px;
    line-height: 1.6;
    tab-size: 4;
}

.syrus-ai-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--syrus-ai-ink);
}

.syrus-ai-help {
    display: block;
    max-width: 78ch;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--syrus-ai-ink-faint);
}


/* -------------------------------------------------------------------------
 * Switch
 * ---------------------------------------------------------------------- */

/*
 * The checkbox is the whole control: it lies transparent on top of the slider
 * at full size, so the browser handles clicking, labels and keyboard on its
 * own.
 */
.syrus-ai-switch {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 24px;
}

.syrus-ai-switch input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.syrus-ai-switch__slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background-color: #d5d8dc;
    transition: background-color .18s ease;
}

.syrus-ai-switch__slider::before {
    position: absolute;
    content: "";
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .18s ease;
}

.syrus-ai-switch input:checked + .syrus-ai-switch__slider {
    background-color: var(--syrus-ai-accent);
}

.syrus-ai-switch input:checked + .syrus-ai-switch__slider::before {
    transform: translateX(20px);
}

.syrus-ai-switch input:hover + .syrus-ai-switch__slider {
    background-color: #c7cbd1;
}

.syrus-ai-switch input:checked:hover + .syrus-ai-switch__slider {
    background-color: var(--syrus-ai-accent-strong);
}

/* The focus ring core uses, on the slider, since the input itself is invisible. */
.syrus-ai-switch input:focus-visible + .syrus-ai-switch__slider {
    outline: 2px solid var(--syrus-ai-accent);
    outline-offset: 2px;
}


/* -------------------------------------------------------------------------
 * Checkbox lists
 * ---------------------------------------------------------------------- */

/*
 * Categories and tags on the Social Network tab: a scrolling box of ordinary
 * checkboxes, which is the right control when a reader is picking several out
 * of a hundred and a switch each would be absurd.
 */
.syrus-ai-checklist {
    max-height: 230px;
    padding: 10px 12px;
    overflow-y: auto;
    border: 1px solid var(--syrus-ai-border);
    border-radius: var(--syrus-ai-radius-sm);
    background-color: var(--syrus-ai-surface-soft);
}

.syrus-ai-checklist label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--syrus-ai-ink-soft);
    cursor: pointer;
}

.syrus-ai-checklist input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
}

.syrus-ai-checklist--empty {
    display: grid;
    place-items: center;
    min-height: 90px;
    color: var(--syrus-ai-ink-faint);
    font-size: 13px;
}


/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */

.syrus-ai-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--syrus-ai-radius-sm);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.syrus-ai-btn .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.syrus-ai-btn:focus-visible {
    outline: 2px solid var(--syrus-ai-accent);
    outline-offset: 2px;
}

.syrus-ai-btn[disabled],
.syrus-ai-btn.is-disabled {
    opacity: .55;
    pointer-events: none;
}

.syrus-ai-btn--primary {
    background-color: var(--syrus-ai-accent);
    color: #fff;
}

.syrus-ai-btn--primary:hover,
.syrus-ai-btn--primary:focus {
    background-color: var(--syrus-ai-accent-strong);
    color: #fff;
}

.syrus-ai-btn--ghost {
    border-color: var(--syrus-ai-border-strong);
    background-color: var(--syrus-ai-surface);
    color: var(--syrus-ai-ink-soft);
}

.syrus-ai-btn--ghost:hover,
.syrus-ai-btn--ghost:focus {
    border-color: var(--syrus-ai-accent);
    color: var(--syrus-ai-accent);
}

.syrus-ai-btn--danger {
    background-color: var(--syrus-ai-danger);
    color: #fff;
}

.syrus-ai-btn--danger:hover,
.syrus-ai-btn--danger:focus {
    background-color: #8f2424;
    color: #fff;
}

.syrus-ai-btn--quiet {
    background-color: var(--syrus-ai-surface-soft);
    color: var(--syrus-ai-ink-faint);
    cursor: default;
}

.syrus-ai-btn--sm {
    padding: 5px 11px;
    font-size: 12px;
}

.syrus-ai-btn--amber {
    background-color: var(--syrus-ai-amber);
    color: #4a3400;
}

.syrus-ai-btn--amber:hover,
.syrus-ai-btn--amber:focus {
    background-color: #e5a100;
    color: #4a3400;
}

.syrus-ai-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}


/* -------------------------------------------------------------------------
 * Save bar
 * ---------------------------------------------------------------------- */

/*
 * Sticks to the bottom of the window while the form is on screen, so the
 * button is reachable without scrolling past every field.
 */
.syrus-ai-savebar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin: 8px 0 0;
    padding: 14px 0 20px;
    border-top: 1px solid var(--syrus-ai-border);
    background-color: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* A destructive action in a save bar belongs away from the save button. */
.syrus-ai-savebar .syrus-ai-btn--danger {
    margin-right: auto;
}

.syrus-ai-savebar__status {
    margin: 0;
    font-size: 12px;
    color: var(--syrus-ai-ink-faint);
}


/* -------------------------------------------------------------------------
 * Tables
 * ---------------------------------------------------------------------- */

.syrus-ai-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--syrus-ai-border);
    border-radius: var(--syrus-ai-radius-sm);
}

.syrus-ai-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.syrus-ai-table th,
.syrus-ai-table td {
    padding: 11px 14px;
    text-align: left;
    vertical-align: middle;
}

.syrus-ai-table thead th {
    border-bottom: 1px solid var(--syrus-ai-border);
    background-color: var(--syrus-ai-surface-soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--syrus-ai-ink-soft);
    white-space: nowrap;
}

/* A table used as a definition list: the label is a row header, not a column. */
.syrus-ai-table tbody th {
    width: 1%;
    font-weight: 600;
    color: var(--syrus-ai-ink);
    white-space: nowrap;
}

.syrus-ai-table tbody tr + tr th,
.syrus-ai-table tbody tr + tr td {
    border-top: 1px solid var(--syrus-ai-border);
}

.syrus-ai-table tbody tr:hover td {
    background-color: var(--syrus-ai-surface-soft);
}

.syrus-ai-table td.is-actions {
    width: 1%;
    white-space: nowrap;
}

/* The buttons of an actions cell sit side by side: the column is as narrow as
   it can be, so wrapping puts each one on a line of its own. */
.syrus-ai-table td.is-actions .syrus-ai-actions {
    flex-wrap: nowrap;
}

.syrus-ai-table__empty {
    padding: 28px 14px;
    text-align: center;
    color: var(--syrus-ai-ink-faint);
}

/* The social icon in the first column of the connections table. */
.syrus-ai-table img.syrus-ai-social-icon {
    display: block;
    width: 22px;
    height: 22px;
}


/* -------------------------------------------------------------------------
 * Status marks
 * ---------------------------------------------------------------------- */

.syrus-ai-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
}

.syrus-ai-status .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.syrus-ai-status--ok {
    color: var(--syrus-ai-ok);
}

.syrus-ai-status--off {
    color: var(--syrus-ai-danger);
}

.syrus-ai-status--idle {
    color: var(--syrus-ai-ink-faint);
}


/* -------------------------------------------------------------------------
 * Notices
 * ---------------------------------------------------------------------- */

.syrus-ai-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: var(--syrus-ai-radius-sm);
    background-color: var(--syrus-ai-surface-soft);
    font-size: 13px;
    line-height: 1.55;
    color: var(--syrus-ai-ink-soft);
}

.syrus-ai-note .dashicons {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    font-size: 18px;
    color: var(--syrus-ai-ink-faint);
}

.syrus-ai-note p {
    margin: 0 0 8px;
}

.syrus-ai-note p:last-child {
    margin-bottom: 0;
}

.syrus-ai-note--warn {
    background-color: var(--syrus-ai-warn-soft);
    color: #6b4700;
}

.syrus-ai-note--warn .dashicons {
    color: var(--syrus-ai-warn);
}

.syrus-ai-note--danger {
    background-color: var(--syrus-ai-danger-soft);
    color: #7d2020;
}

.syrus-ai-note--danger .dashicons {
    color: var(--syrus-ai-danger);
}

.syrus-ai-note--ok {
    background-color: var(--syrus-ai-ok-soft);
    color: #0a5c3a;
}

.syrus-ai-note--ok .dashicons {
    color: var(--syrus-ai-ok);
}


/* -------------------------------------------------------------------------
 * Group headings
 * ---------------------------------------------------------------------- */

.syrus-ai-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 12px;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--syrus-ai-ink-soft);
}

.syrus-ai-group:first-child {
    margin-top: 6px;
}

.syrus-ai-count {
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--syrus-ai-surface-soft);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--syrus-ai-ink-faint);
}


/* -------------------------------------------------------------------------
 * Grids
 * ---------------------------------------------------------------------- */

.syrus-ai-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.syrus-ai-grid--thirds {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/*
 * A form on the left and its live preview on the right. Below the breakpoint
 * the preview drops under the form rather than being squeezed next to it.
 */
.syrus-ai-split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 20px;
    align-items: start;
}

@media screen and (max-width: 1100px) {
    .syrus-ai-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A short list of radio buttons, one per line. */
.syrus-ai-choice label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 13px;
    color: var(--syrus-ai-ink-soft);
    cursor: pointer;
}

.syrus-ai-choice input[type="radio"] {
    margin: 0;
}

/* A tile that is itself a link, used on the home tab. */
.syrus-ai-tile {
    display: flex;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--syrus-ai-border);
    border-radius: var(--syrus-ai-radius-sm);
    background-color: var(--syrus-ai-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.syrus-ai-tile:hover {
    border-color: var(--syrus-ai-border-strong);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
    color: inherit;
}

.syrus-ai-tile__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-color: var(--syrus-ai-accent-soft);
    color: var(--syrus-ai-accent);
}

.syrus-ai-tile__icon .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.syrus-ai-tile__name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--syrus-ai-ink);
}

.syrus-ai-tile__note {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--syrus-ai-ink-faint);
}


/* -------------------------------------------------------------------------
 * Media thumbnail
 * ---------------------------------------------------------------------- */

/* The WhatsApp avatar picker. */
.syrus-ai-thumb {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    overflow: hidden;
    border: 1px dashed var(--syrus-ai-border-strong);
    border-radius: var(--syrus-ai-radius-sm);
    background-color: var(--syrus-ai-surface-soft);
    color: var(--syrus-ai-ink-faint);
}

.syrus-ai-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.syrus-ai-avatar-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.syrus-ai-avatar-row__fields {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.syrus-ai-avatar-row__fields .syrus-ai-input {
    flex: 1 1 260px;
    width: auto;
    min-width: 0;
}


/* -------------------------------------------------------------------------
 * Vendored controls
 * ---------------------------------------------------------------------- */

/*
 * Select2 and SweetAlert2 bring their own look, built for Bootstrap. These
 * few rules are all it takes to put them on the same radius and palette as
 * everything else, rather than restyling them wholesale.
 */
.syrus-ai-stage .select2-container--default .select2-selection--single,
.syrus-ai-stage .select2-container--default .select2-selection--multiple {
    min-height: 36px;
    border-color: var(--syrus-ai-border-strong);
    border-radius: var(--syrus-ai-radius-sm);
}

.syrus-ai-stage .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px;
    color: var(--syrus-ai-ink);
}

.syrus-ai-stage .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
}

.select2-dropdown {
    border-color: var(--syrus-ai-border-strong);
    border-radius: var(--syrus-ai-radius-sm);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--syrus-ai-accent);
}

.swal2-popup {
    border-radius: var(--syrus-ai-radius) !important;
    font-size: 14px !important;
}

.swal2-styled.swal2-confirm {
    border-radius: var(--syrus-ai-radius-sm) !important;
    background-color: var(--syrus-ai-accent) !important;
}

.swal2-styled.swal2-cancel {
    border-radius: var(--syrus-ai-radius-sm) !important;
}


/* -------------------------------------------------------------------------
 * Utilities
 * ---------------------------------------------------------------------- */

.syrus-ai-hidden {
    display: none !important;
}

.syrus-ai-center {
    text-align: center;
}

.syrus-ai-code {
    padding: 2px 6px;
    border-radius: 4px;
    background-color: var(--syrus-ai-surface-soft);
    font-family: Menlo, Consolas, monaco, monospace;
    font-size: 12px;
    color: var(--syrus-ai-ink-soft);
    overflow-wrap: anywhere;
}

/* A credential printed on the page: readable, selectable, and wrapping
   rather than widening the card past the measure. */
.syrus-ai-token {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--syrus-ai-border);
    border-radius: var(--syrus-ai-radius-sm);
    line-height: 1.6;
    color: var(--syrus-ai-accent-strong);
    user-select: all;
}

/* An input that shares a row with its button instead of taking the width. */
.syrus-ai-actions .syrus-ai-input,
.syrus-ai-actions .syrus-ai-select {
    flex: 1 1 320px;
    width: auto;
    min-width: 0;
}

.syrus-ai-spinner {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}


/* -------------------------------------------------------------------------
 * Narrow screens
 * ---------------------------------------------------------------------- */

@media screen and (max-width: 782px) {
    .syrus-ai-stage {
        --syrus-ai-gutter: 20px;
    }

    .syrus-ai-header {
        align-items: flex-start;
    }

    .syrus-ai-field {
        align-items: flex-start;
        gap: 16px;
    }
}

@media screen and (max-width: 600px) {
    .syrus-ai-header__actions {
        width: 100%;
    }

    .syrus-ai-savebar {
        justify-content: space-between;
    }
}

@media (prefers-reduced-motion: reduce) {
    .syrus-ai-stage *,
    .syrus-ai-stage *::before {
        transition: none !important;
    }
}