.ai-rewriter-wrap {
    --air-bg:#f8fafc; --air-surface:#fff; --air-border:#e5e7eb; --air-muted:#6b7280; --air-text:#0f172a; --control-h: 35px;
    --air-accent:#3b82f6; --air-accent-h:#2563eb; --air-focus:rgba(59,130,246,.35);
    --air-shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
    width:100%; max-width: 1200px; margin:auto; padding:16px; background:var(--air-surface);
    border:1px solid var(--air-border); border-radius:14px; box-shadow:var(--air-shadow); color:var(--air-text);
}
.ai-rewriter-wrap .air-field + .air-button,
.ai-rewriter-wrap .air-button + .air-output { margin-top: 12px; }

.ai-rewriter-wrap .air-textarea, .ai-rewriter-wrap .air-input, .ai-rewriter-wrap .air-select {
    width:100%; display:block; box-sizing:border-box; background:var(--air-surface);
    border:1px solid var(--air-border); border-radius:5px; padding:12px 14px;
    font-size:16px; line-height:1.5; color:var(--air-text);
    transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.ai-rewriter-wrap .air-select { appearance:auto; }

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

.ai-rewriter-wrap .air-button {
    width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px;
    /*background:var(--air-accent); color:#fff; border:1px solid var(--air-accent);*/ border-radius:12px;
    font-weight:600; font-size:16px; cursor:pointer; transition:transform .06s, background-color .15s, border-color .15s, box-shadow .15s, opacity .15s;
    box-shadow:var(--air-shadow);
}
.ai-rewriter-wrap .air-button:hover { background:var(--air-accent-h); border-color:var(--air-accent-h); }
.ai-rewriter-wrap .air-button:active { transform: translateY(0.5px); }
.ai-rewriter-wrap .air-button:focus-visible { box-shadow:0 0 0 4px var(--air-focus); outline:none; }
.ai-rewriter-wrap .air-button[disabled] { opacity:.7; cursor: not-allowed; }
.ai-rewriter-wrap .air-button.air-loading { position:relative; padding-right:42px; }
.ai-rewriter-wrap .air-button.air-loading::after {
    content:""; position:absolute; right:14px; top:50%; width:16px; height:16px; margin-top:-8px;
    border-radius:50%; border:2px solid rgba(255,255,255,.9); border-top-color:transparent; animation: air-spin .8s linear infinite;
}
@keyframes air-spin { to { transform: rotate(360deg); } }

.ai-rewriter-wrap .ai-rewriter-output-wrap {
    max-height:0; opacity:0; visibility:hidden; 
    /*overflow:hidden;*/
    transition:max-height .35s, opacity .25s, visibility 0s linear .35s, margin-top .2s, padding .2s;
    margin-top:0; padding-top:0;
}
.ai-rewriter-wrap .ai-rewriter-output-wrap.is-open {
    max-height:1200px; opacity:1; visibility:visible; margin-top:12px; padding-top:2px;
    transition:max-height .35s, opacity .25s, margin-top .2s, padding .2s;border-radius: 10px;
}
.ai-rewriter-wrap .ai-rewriter-output[readonly] { background:#fff; }

.ai-rewriter-wrap .air-help { margin-top:6px; color:var(--air-muted); font-size:13px; }
.ai-rewriter-wrap .air-field { width:100%; }
.ai-rewriter-wrap .air-inline { margin-top:10px; }

/* Extra fields: FULL WIDTH (1 column) */
.ai-rewriter-wrap .air-extra-fields {
    display:grid; grid-template-columns: 1fr; gap:20px; margin-bottom:45px;
}
.ai-rewriter-wrap .air-extra-field .air-req { color:#b00020; }

/* CTA (if used) */
.ai-rewriter-wrap .air-cta-wrap { margin-top: 10px; display:flex; justify-content:flex-end; }
.ai-rewriter-wrap .air-cta {
    display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:10px;
    border:1px solid var(--air-accent); background:transparent; color: var(--air-accent); text-decoration:none; font-weight:600;
    transition: background-color .15s, color .15s, border .15s, box-shadow .15s;
}
.ai-rewriter-wrap .air-cta:hover { background: rgba(59,130,246,.08); border-color: var(--air-accent-h); color: var(--air-accent-h); }
.ai-rewriter-wrap .air-cta:focus-visible { outline:none; box-shadow:0 0 0 4px var(--air-focus); }

/* Output textarea: adaptive & resizable (policy from JS) */
.ai-rewriter-wrap .ai-rewriter-output {
    background:#fff;
    resize: vertical;           /* JS can set to 'none' if not allowed */
    max-height: var(--air-out-max, 70vh); /* cap from JS */
    overflow:auto;
}





/* AIWriter TinyMCE — unified style (uses apps-main.css tokens)
   Relies on:
   --background, --border, --border-radius, --box-shadow, --box-shadow-hover,
   --primaryColor, --primaryColor-hover, --bg-primaryColor, --border-primaryColor,
   --font-color, --color, --universal-transition
*/

/* Wrapper inserted by JS to host toolbar + editor */
.aiwriter-group#aiseo-editor-content,
.aiwriter-wysiwyg-wrap.aiwriter-group {
    padding: 0;
    position: relative;
}

/* --- Toolbar ------------------------------------------------------------- */
.aiwriter-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--background);
    border: var(--border);
    border-radius: 10px 10px 0 0;
    box-shadow: var(--box-shadow);
    transition: var(--universal-transition);
    backdrop-filter: blur(10px);
    border-bottom-width: 0;
    flex-wrap: wrap;
}


.aiwriter-toolbar-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.aiwriter-main-free .aiwriter-toolbar-group select,
.aiwriter-main-container .aiwriter-toolbar-group select{
    padding: 6px 24px 6px 10px;
    min-width: 150px;
    max-width: none;
}
.aiwriter-main-free .aiwriter-toolbar-group select{
    padding: 5px 25px 5px 10px;
    max-width: 141px;
    height: -webkit-fill-available;
    max-height: var(--control-h);
}

.aiwriter-main-free .aiwriter-wysiwyg[contenteditable="true"]:focus,
.aiwriter-main-container .aiwriter-wysiwyg[contenteditable="true"]:focus{
    outline:none;
}



.aiwriter-toolbar-group.right { margin-left: auto; }

/* Buttons */
.aiwriter-btn {
    appearance: none;
    border: 1px solid var(--border-primaryColor);
    background: var(--background);
    color: var(--font-color);
    font: inherit;
    font-size: .92rem;
    line-height: 1;
    padding: 8px;
    border-radius: calc(var(--border-radius) - 4px);
    cursor: pointer;
    transition: var(--universal-transition);
    box-shadow: 0 1px 6px rgba(77,107,254,.06);

}

.ai-rewrite-block .aiwriter-toolbar-group.right {
    margin-top: -35px;
}



.aiwriter-btn:hover,
.aiwriter-btn:focus {
    background: #fff;
    border-color: var(--ast-global-color-0);
    color: var(--ast-global-color-0);
}
.aiwriter-btn-primary {
    background: var(--ast-global-color-0);
    border-color: var(--ast-global-color-0);
    color: #fff;
}
.aiwriter-btn-primary:hover,
.aiwriter-btn-primary:focus {
    background: var(--ast-global-color-0);
    border-color: var(--ast-global-color-0);
    color: #fff;
}

/* Block format select (Paragraph/H2/H3) */
.aiwriter-blocks {
    border: var(--aiw-border, 1px solid var(--border-primaryColor));
    background: #fff;
    color: var(--font-color);
    padding: 8px 28px 8px 12px;
    border-radius: 6px;
    font: inherit;
    font-size: .95rem;
    line-height: 1.2;
    min-height: 35px;
    cursor: pointer;
    transition: var(--universal-transition);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23343f5e' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}
.aiwriter-blocks:hover,
.aiwriter-blocks:focus {
    border-color: var(--ast-global-color-0);
    outline: 2px solid var(--primary-soft-border, rgba(4,107,210,0.2));
    outline-offset: 1px;
}

/* --- Editor area --------------------------------------------------------- */
.aiwriter-group .aiwriter-wysiwyg {
    padding: 16px 18px;
    border-radius: 0 0 10px 10px;
    border: var(--border);
    background: var(--background);
    color: var(--font-color);
    min-height: 220px;
    line-height: 1.6;
    box-shadow: var(--box-shadow);
    transition: var(--universal-transition);
}
.aiwriter-group .aiwriter-wysiwyg:focus,
.aiwriter-wysiwyg .mce-content-body:focus {
    outline: 0px solid var(--ast-global-color-0);
    background: #fff;
}

/* Placeholder for empty editor */
.aiwriter-wysiwyg[data-placeholder]:empty:before {
    content: attr(data-placeholder);
    opacity: .55;
    pointer-events: none;
    font-style: italic;
}

/* --- Modal (Show code) --------------------------------------------------- */
.aiwriter-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(36,45,86,.24);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aiwriter-modal {
    width: min(900px, 96vw);
    max-height: 90vh;
    background: #fff;
    color: var(--font-color);
    border: var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
}

.aiwriter-modal-head {
    padding: 12px 14px;
    border-bottom: var(--border);
    background: var(--background);
}
.aiwriter-modal-body { padding: 12px 14px; }
.aiwriter-modal-foot {
    padding: 10px 14px;
    border-top: var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.aiwriter-codearea {
    width: 100%;
    height: 56vh;
    resize: vertical;
    border: var(--border);
    border-radius: calc(var(--border-radius) - 4px);
    background: #fff;
    color: var(--font-color);
    box-shadow: var(--box-shadow);
    padding: 10px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.5;
}

/* Copy button – light blue */
.aiwriter-toolbar-group.right .aiwriter-btn[data-cmd="aiwriterCopyHTMLClean"],
.aiwriter-toolbar-group.right .aiwriter-btn[data-cmd="aiwriterCopy"] {
    background: rgba(77, 107, 254, 0.06);
    border: 1px solid rgba(77, 107, 254, 0.2);
    color: #4d6bfe;
}
.aiwriter-toolbar-group.right .aiwriter-btn[data-cmd="aiwriterCopyHTMLClean"]:hover,
.aiwriter-toolbar-group.right .aiwriter-btn[data-cmd="aiwriterCopy"]:hover {
    background: rgba(77, 107, 254, 0.12);
    border-color: rgba(77, 107, 254, 0.35);
}

/* Show code – light green */
.aiwriter-toolbar-group.right .aiwriter-btn[data-cmd="aiwriterShowCode"] {
    background: rgba(40, 167, 69, 0.06);
    border: 1px solid rgba(40, 167, 69, 0.2);
    color: #28a745;
}
.aiwriter-toolbar-group.right .aiwriter-btn[data-cmd="aiwriterShowCode"]:hover {
    background: rgba(40, 167, 69, 0.12);
    border-color: rgba(40, 167, 69, 0.35);
}

/* Clear – light red */
.aiwriter-toolbar-group.right .aiwriter-btn[data-cmd="aiwriterClear"] {
    background: rgba(220, 53, 69, 0.06);
    border: 1px solid rgba(220, 53, 69, 0.2);
    color: #dc3545;
}
.aiwriter-toolbar-group.right .aiwriter-btn[data-cmd="aiwriterClear"]:hover {
    background: rgba(220, 53, 69, 0.12);
    border-color: rgba(220, 53, 69, 0.35);
}

@media (min-width:1080px) and (max-width:1680px){
    .aiwriter-btn {
        padding: 6px;
    }
    .aiwriter-main-container .aiwriter-toolbar-group select {
        padding: 3px 25px 3px 10px;
        border-radius: 5px;
    }
}


/* =========================
   Presets row next to label
   ========================= */

/* 1) Розкладка поля з пресетами: label (ліворуч) + пресети (праворуч) + інпут на весь ряд */
.ai-rewriter-wrap .air-extra-field {
    display: grid;
    grid-template-columns: 1fr auto; /* label | presets */
    grid-auto-rows: auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
}

/* label у лівій колонці */
.ai-rewriter-wrap .air-extra-field > .air-label { grid-column: 1; }

/* контейнер пресетів у правій колонці */
.ai-rewriter-wrap .air-extra-field > .air-presets {
    grid-column: 2;
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

/* сам інпут/селект/textarea — на всю ширину під шапкою */
.ai-rewriter-wrap .air-extra-field > .air-input,
.ai-rewriter-wrap .air-extra-field > .air-textarea,
.ai-rewriter-wrap .air-extra-field > .air-select {
    grid-column: 1 / -1;
}

/* 2) Стиль «пігулок» (компактні кнопки) */
.ai-rewriter-wrap .air-preset-btn,
.ai-rewriter-wrap .air-presets .aiwriter-button,
.ai-rewriter-wrap .air-presets .air-button {
    width: auto;                 /* перекриваємо width:100% з базової кнопки */
    min-height: 28px;
    padding: 4px 10px 6px 10px;
    font-size: 12px;
    line-height: 1.2;
    border-radius: 5px;
    background: rgba(59,130,246,.08);
    border: 1px solid rgba(59,130,246,.35);
    color: var(--air-accent);
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, transform .06s;
}
.ai-rewriter-wrap .air-preset-btn:hover,
.ai-rewriter-wrap .air-presets .aiwriter-button:hover,
.ai-rewriter-wrap .air-presets .air-button:hover {
    background: var(--ast-global-color-1);
    border-color: rgba(59,130,246,.5);
}
.ai-rewriter-wrap .air-preset-btn:active,
.ai-rewriter-wrap .air-presets .aiwriter-button:active,
.ai-rewriter-wrap .air-presets .air-button:active {
    background: rgba(59,130,246,.16);
}

/* фокус-обводка для доступності */
.ai-rewriter-wrap .air-preset-btn:focus-visible,
.ai-rewriter-wrap .air-presets .aiwriter-button:focus-visible,
.ai-rewriter-wrap .air-presets .air-button:focus-visible {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 4px var(--air-focus);
}


/* === Actions row: button + language picker =============================== */
.ai-rewriter-wrap .air-actions-row{
    display:flex; align-items:stretch; gap:12px; flex-wrap:wrap;
    margin:12px 0;
}

/* Зробити кнопку «гнучкою» і НЕ повної ширини в цьому рядку */
.ai-rewriter-wrap .air-actions-row .air-button{
    width:auto;            /* перекриває базове width:100% */
    flex:1 1 auto;         /* розтягується і займає весь вільний простір */
    min-height:46px;
}

/* Блок селектора мови праворуч від кнопки */
.ai-rewriter-wrap .air-lang-inline{
    display:flex; align-items:center; gap:8px; flex-wrap:nowrap;
    position: relative;
    min-width:260px;
}

/* компактний лейбл */
.ai-rewriter-wrap .air-lang-inline .air-label{
    margin:0; font-size:12px; opacity:.8; white-space:nowrap;
}

/* вирівнюємо висоту селекта/інпуту під кнопку */
.ai-rewriter-wrap .air-lang-inline .air-select,
.ai-rewriter-wrap .air-lang-inline .air-input{
    height:46px;
    min-height: 46px;
    padding:10px 12px;
    width:100%;
}


/* (необов’язково) стилізація «порожнього» варіанту в селекті */
.ai-rewriter-wrap .air-lang-inline .air-select option[value=""]{ color: var(--air-muted); }



/* === AI Rewriter – UX polish pack (drop-in) =========================== */

/* 1) Брендова основна кнопка (Generate) */
.ai-rewriter-wrap .air-button {
    background: var(--ast-global-color-0);
    border: 1px solid var(--ast-global-color-0);
    color: #fff;
}
.ai-rewriter-wrap .air-button:hover,
.ai-rewriter-wrap .air-button:focus {
    background: var(--ast-global-color-1);
    border-color: var(--ast-global-color-1);
    color: #fff;
}

/* 2) Ряд дій: вирівнювання та щільність */
.ai-rewriter-wrap .air-actions-row{
    gap: 10px;
    align-items: stretch;
}
.ai-rewriter-wrap .air-actions-row .air-button{
    min-height: 46px;
    padding: 12px 18px;
    font-weight: 700;
    letter-spacing: .01em;
}

/* Селектор мови – одна висота з кнопкою */
.ai-rewriter-wrap .air-lang-inline .air-select,
.ai-rewriter-wrap .air-lang-inline .air-input{
    height: 46px;
    min-height: 46px;
    padding: 10px 12px;
}

/* Компактний лейбл біля селектора мови */
.ai-rewriter-wrap .air-lang-inline .air-label{
    font-size: 12px;
    opacity: .8;
    margin: 0;
    white-space: nowrap;
}

/* 3) Пресети у вигляді “пігулок” (узгоджено з брендом) */
.ai-rewriter-wrap .air-preset-btn,
.ai-rewriter-wrap .air-presets .air-button{
    width: auto;
    min-height: 28px;
    padding: 4px 10px 6px;
    font-size: 12px;
    line-height: 1.2;
    border-radius: 7px;
    background: rgba(77,107,254,.08); /* м’який фон */
    border: 1px solid rgba(77,107,254,.35);
    color: var(--ast-global-color-0);
    box-shadow: none;
}
.ai-rewriter-wrap .air-preset-btn:hover,
.ai-rewriter-wrap .air-presets .air-button:hover{
    background: var(--ast-global-color-1);
    color: white;
    border-color: rgba(77,107,254,.5);
}

/* 4) Інпут/textarea – чіткіший фокус і трохи більший контраст */
.ai-rewriter-wrap .air-textarea,
.ai-rewriter-wrap .air-input,
.ai-rewriter-wrap .air-select{
    border-color: var(--air-border, #e5e7eb);
}
.ai-rewriter-wrap .air-textarea:focus,
.ai-rewriter-wrap .air-input:focus,
.ai-rewriter-wrap .air-select:focus{
    border-color: var(--ast-global-color-0);
    box-shadow: 0 0 0 1px rgba(77,107,254,.20);
}

/* 5) Вихідний редактор: прилипаючий тулбар і дрібні поліровки */
.aiwriter-toolbar{
    position: sticky;
    top: 0;            /* липне до верху контейнера */
    z-index: 3;
    border-bottom-width: 0;
    backdrop-filter: blur(10px);
}

/* Коли редактор активний — білий фон, як у вас прийнято */
.aiwriter-group .aiwriter-wysiwyg:focus{
    background: #fff;
}

/* 6) Відступи/дрібні деталі */
.ai-rewriter-wrap .air-help{ margin-top: 6px; font-size: 13px; }
.ai-rewriter-wrap .ai-rewriter-output-wrap.is-open{
    border-radius: 12px;
}

/* 7) Мобільні покращення */
@media (max-width: 720px){
    .ai-rewriter-wrap .air-actions-row{ flex-direction: column; }
    .ai-rewriter-wrap .air-actions-row .air-button{ width: 100%; }
    .ai-rewriter-wrap .air-lang-inline{ min-width: 0; }
    .ai-rewriter-wrap .air-extra-field{
        grid-template-columns: 1fr;
    }
    .ai-rewriter-wrap .air-extra-field > .air-presets{
        grid-column: 1;
        justify-self: start;
    }
}



/* ==== Drag & Drop image zone ========================================== */
.ai-rewriter-wrap .air-image-zone{
    margin: 12px 0 50px;
    border: 2px dashed var(--air-border);
    border-radius: 14px;
    padding: 20px 22px;
    background: linear-gradient(180deg, #f8faff 0%, #f5f7ff 100%);
    transition: border-color .15s, background-color .15s, box-shadow .15s;
    cursor: pointer;
    min-height: 140px;
}
.ai-rewriter-wrap .air-image-zone.is-over{
    border-color: var(--air-accent);
    background: #f1f5ff;
    box-shadow: 0 0 0 3px var(--air-focus);
}
.ai-rewriter-wrap .air-image-zone.has-file{
    background: #fff;
    border-style: solid;
}
.ai-rewriter-wrap .air-image-zone__inner{
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    align-items: center;
    text-align: center;
}
.ai-rewriter-wrap .air-image-zone__icon{
    width: 82px; height: 82px; border-radius: 18px;
    background: rgba(77,107,254,.08);
    position: relative;
    display: grid;
    place-items: center;
}
.ai-rewriter-wrap .air-image-zone__icon::before{
    content:""; position:absolute; inset:14px;
    background: url('../gallery-icon.svg') center/contain no-repeat;
}
.ai-rewriter-wrap .air-image-zone .air-link{
    background: none; border:0; color: var(--air-accent); cursor: pointer; padding:0;
}
.ai-rewriter-wrap .air-image-zone__hint{ color: var(--air-muted); font-size: 13px; }
.ai-rewriter-wrap .air-image-zone__meta{ font-size: 12px; margin-top: 6px; color: #334155; }
.ai-rewriter-wrap .air-image-zone__thumb{
    width: 84px; height: 84px; border-radius: 12px; overflow: hidden; background:#fff; border:1px solid var(--air-border);
}
.ai-rewriter-wrap .air-image-zone__thumb img{ width:100%; height:100%; object-fit: cover; display:block; }
.ai-rewriter-wrap .air-image-zone__actions .air-button{
    width:auto; padding:8px 12px; font-size:12px; min-height: 34px;
}
.ai-rewriter-wrap .air-button.air-danger{
    background: rgba(220,53,69,.06);
    border: 1px solid rgba(220,53,69,.25);
    color: #dc3545;
}
.ai-rewriter-wrap .air-button.air-secondary{
    background: white;
    border: 1px solid var(--border-primaryColor);
    color: var(--ast-global-color-2);
}

/* --- Preview banner while formatting --- */
.air-status-banner{
    position: sticky; top: 0; z-index: 3;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; margin: 8px 0 0;
    background: #fff6d6; border: 1px solid #f0c36d; color: #6b4e00;
    border-radius: 10px; font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.air-status-banner .air-status-spinner{
    width: 18px; height: 18px; flex: 0 0 18px;
    border: 3px solid #f0c36d; border-top-color: transparent;
    border-radius: 50%;
    animation: air-rot 1s linear infinite;
}
@keyframes air-rot{ to{ transform: rotate(360deg); } }

.air-status-banner .air-status-caption{
    line-height: 1.25;
}

.air-export-disabled{
    opacity: .5; pointer-events: none;
}


/* === Placeholder polish (non-breaking addon) ========================= */

/* Defaults you can tweak per page/theme */
.ai-rewriter-wrap{
    --air-ph-color:        var(--air-muted); /* base placeholder color */
    --air-ph-color-dark:   #98a2b399;         /* dark-scheme override */
    --air-ph-focus-opacity:.25;             /* fade on focus (0..1) */
}

/* Consistent look across browsers */
.ai-rewriter-wrap .air-input::placeholder,
.ai-rewriter-wrap .air-textarea::placeholder{
    color: var(--air-ph-color);
    opacity: 1;              /* Safari/Firefox fix for washed-out text */
    font-style: italic;      /* optional: comment out if not desired */
    transition: color .2s ease, opacity .2s ease;
}

/* Gently fade placeholder on focus (set to 0 to fully hide) */
.ai-rewriter-wrap .air-input:focus::placeholder,
.ai-rewriter-wrap .air-textarea:focus::placeholder{
    opacity: var(--air-ph-focus-opacity);
}

/* Invalid and ARIA-invalid states */
.ai-rewriter-wrap .air-input:invalid::placeholder,
.ai-rewriter-wrap .air-textarea:invalid::placeholder,
.ai-rewriter-wrap .air-input[aria-invalid="true"]::placeholder,
.ai-rewriter-wrap .air-textarea[aria-invalid="true"]::placeholder{
    color: #dc2626; /* red-600 */
    opacity: .45;
}

/* Disabled / readonly look */
.ai-rewriter-wrap .air-input:disabled::placeholder,
.ai-rewriter-wrap .air-textarea:disabled::placeholder,
.ai-rewriter-wrap .air-input[readonly]::placeholder,
.ai-rewriter-wrap .air-textarea[readonly]::placeholder{
    color: #9ca3af; /* gray-400 */
}

/* Auto-adjust for dark mode */
@media (prefers-color-scheme: dark){
    .ai-rewriter-wrap .air-input::placeholder,
    .ai-rewriter-wrap .air-textarea::placeholder{
        color: var(--air-ph-color-dark);
    }
}

/* Legacy fallbacks (Edge Legacy/IE) — optional */
.ai-rewriter-wrap .air-input::-ms-input-placeholder,
.ai-rewriter-wrap .air-textarea::-ms-input-placeholder{ color: var(--air-ph-color); opacity:1; }
.ai-rewriter-wrap .air-input:-ms-input-placeholder,
.ai-rewriter-wrap .air-textarea:-ms-input-placeholder{  color: var(--air-ph-color); opacity:1; }



@media (max-width:720px){
    .ai-rewriter-wrap .air-image-zone__inner{
        grid-template-columns: 1fr;
    }
    .ai-rewriter-wrap .air-image-zone__thumb,
    .ai-rewriter-wrap .air-image-zone__actions{ grid-column: 1 / -1; }
}




@media (min-width: 1220px){
    .ai-rewriter-wrap .air-lang-inline .air-label{
        position: absolute;
        top: -23px;
        right: 0;
    }
}

@media (max-width: 720px){
    .ai-rewriter-wrap .air-actions-row{ flex-direction:column; }
    .ai-rewriter-wrap .air-actions-row .air-button{ width:100%; }
    .ai-rewriter-wrap .air-lang-inline{ flex:1 1 auto; min-width:0; }

    .ai-rewriter-wrap .air-extra-field {
        grid-template-columns: 1fr;        /* один стовпчик */
    }
    .ai-rewriter-wrap .air-extra-field > .air-presets {
        grid-column: 1;
        justify-self: start;
    }
}


/* =========================
   AI Rewriter — Mobile polish pack
   Paste below your current styles (non-breaking)
   Breakpoints: 720 / 480 / 360
   ========================= */

/* iOS safe-area support for sticky bits */
@supports (padding-top: env(safe-area-inset-top)) {
    .aiwriter-toolbar { top: calc(env(safe-area-inset-top) + 0px); }
    .air-status-banner { top: calc(env(safe-area-inset-top) + 0px); }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ai-rewriter-wrap .ai-rewriter-output-wrap,
    .ai-rewriter-wrap .air-button { transition: none !important; }
    .air-status-banner .air-status-spinner { animation: none !important; }
}

/* ====== ≤ 720px: stack controls, comfy tap targets ====== */
@media (max-width: 720px) {
    .ai-rewriter-wrap { padding: 12px; border-radius: 12px; }

    /* Actions row → vertical, full-width button */
    .ai-rewriter-wrap .air-actions-row { flex-direction: column; gap: 10px; }
    .ai-rewriter-wrap .air-actions-row .air-button {
        width: 100%;
        min-height: 48px;
        padding: 12px 18px;
        font-weight: 700;
    }

    /* Language picker becomes a small grid (label above control) */
    .ai-rewriter-wrap .air-lang-inline {
        display: grid; grid-template-columns: 1fr; row-gap: 6px;
        min-width: 0; flex: 1 1 auto;
    }
    .ai-rewriter-wrap .air-lang-inline .air-label { font-size: 13px; opacity: .85; }
    .ai-rewriter-wrap .air-lang-inline .air-select,
    .ai-rewriter-wrap .air-lang-inline .air-input { height: 48px; min-height: 48px; }

    /* Extra fields: single column; presets sit under label */
    .ai-rewriter-wrap .air-extra-field { grid-template-columns: 1fr; }
    .ai-rewriter-wrap .air-extra-field > .air-presets { grid-column: 1; justify-self: start; }

    /* Streaming pane readability on phones */
    .ai-rewriter-wrap pre.air-streaming {
        font-size: 14px; line-height: 1.45;
        padding: 10px 12px;
        max-height: 42vh; overflow: auto; -webkit-overflow-scrolling: touch;
        background: #fff; border: 1px dashed var(--ast-global-color-7);
    }

    /* Keep output from growing too tall */
    .ai-rewriter-wrap .ai-rewriter-output-wrap.is-open { max-height: 70vh; }

    /* Sticky toolbar & banner: tighter spacing */
    .aiwriter-toolbar { position: sticky; top: 0; z-index: 10; gap: 8px; padding: 8px 10px; }
    .air-status-banner { position: sticky; top: 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
}

/* ====== ≤ 480px: denser layout, larger inputs to avoid iOS zoom ====== */
@media (max-width: 480px) {
    .ai-rewriter-wrap { padding: 10px; }
    .ai-rewriter-wrap .air-button { font-size: 15px; }

    /* Keep inputs at 16px+ to prevent mobile zoom */
    .ai-rewriter-wrap .air-textarea,
    .ai-rewriter-wrap .air-input,
    .ai-rewriter-wrap .air-select { padding: 11px 12px; font-size: 16px; }

    /* Drag & drop image zone: single column + clearer actions */
    .ai-rewriter-wrap .air-image-zone { padding: 14px; }
    .ai-rewriter-wrap .air-image-zone__inner { grid-template-columns: 1fr; }
    .ai-rewriter-wrap .air-image-zone__thumb { order: 3; width: 64px; height: 64px; }
    .ai-rewriter-wrap .air-image-zone__actions {
        order: 4; display: flex; gap: 8px;
    }

    /* Toolbar groups wrap to two rows, keep actions visible */
    .aiwriter-toolbar { flex-wrap: wrap; }
    .aiwriter-toolbar .aiwriter-toolbar-group,
    .aiwriter-toolbar .aiwriter-toolbar-group.right {
        flex: 1 1 100%; margin-left: 0; justify-content: flex-start;
    }

    /* Bigger tap targets for preset “pills” */
    .ai-rewriter-wrap .air-preset-btn,
    .ai-rewriter-wrap .air-presets .air-button {
        min-height: 36px; padding: 6px 12px; font-size: 13px;
    }
}

/* ====== ≤ 360px: ultra-small screens ====== */
@media (max-width: 360px) {
    .ai-rewriter-wrap { padding: 8px; border-radius: 10px; }
    .ai-rewriter-wrap .air-button { padding: 12px 14px; }
    .aiwriter-group .aiwriter-wysiwyg { padding: 14px; }
}