/* ========================================
   ESSAY REWRITER — Tool-specific styles
   ======================================== */

.tool-section .textarea {
    height: 370px;
}

.synonyms {
    font-weight: var(--font-weight-normal) !important;
    color: #147bcf !important;
}
.essay-extend:after {
    top: -7px !important;
}
/* ── Input/Output box dimensions (Figma: h-430px, min-w-480px each) ── */
@media (min-width: 993px) {
    .essayRewriter .input__box,
    .essayRewriter .output__box {
        min-width: 480px;
    }
}

/* ── Keep dropdowns inline and left-aligned on all screen sizes ── */
/* Global style.css @media(≤1024px) adds flex-direction:column + items-center
   to .tool_options, and @media(≤992px) adds flex-direction:column to .flex-row.
   Both must be overridden so the two dropdown pills stay in a row, left-aligned. */

.dropdown___container {
    width: 155px;
}

.essayRewriter .tool_options {
    align-items: flex-start !important;
    text-align: left !important;
}

.essayRewriter .tool_options > .flex-row {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: auto !important;
    flex-wrap: wrap;
    gap: 5px;
}

/* ── Dropdown sizing ─────────────────────── */
/* Academic Level dropdown — max ~150px (Figma) */
.essayRewriter .academic-level-dropdown .dropdown___container .selected__option__container {
    min-width: 135px;
    max-width: 155px;
    width: 155px;
}

.essayRewriter .dropdown___container .options__list {
    bottom: auto !important;
    top: calc(100% + 6px) !important;
    left: 0;
    right: auto;
    min-width: 100%;
}

/* ── Hide feedback "after" pseudo element when form is collapsed ── */
.essayRewriter #feedbackDiv:has(.feedback-form-container.d-none)::after {
    display: none !important;
}

/* ── Tooltip overrides ─────────────────── */
.essayRewriter .download-text-button.tooltip:hover::before,
.essayRewriter .download-text-button.tooltip:hover::after,
.essayRewriter #downloadButton.tooltip:hover::before,
.essayRewriter #downloadButton.tooltip:hover::after,
.essayRewriter #copy-text-btn.tooltip:hover::before,
.essayRewriter #copy-text-btn.tooltip:hover::after,
.essayRewriter .redirect-btn.tooltip:hover::before,
.essayRewriter .redirect-btn.tooltip:hover::after {
    display: flex !important;
}

.essayRewriter #feedbackButton.tooltip.hide:hover::before,
.essayRewriter #feedbackButton.tooltip.hide:hover::after {
    display: flex !important;
}

/* ── Setting bar ───────────────────────── */
.essayRewriter .input_setting_bar > div.flex-row.items-center.gap-10 {
    min-height: 34px;
}

.essayRewriter #copy-text-btn {
    min-width: fit-content;
}

.essayRewriter #feedbackDiv .feedback-form-container {
    left: unset !important;
    right: 0 !important;
    transform: translateX(0) !important;
}

/* ── Ajax loader overlay corner radii (desktop = side-by-side, mobile = full) ── */
.essayRewriter .input__box #ajaxloaderwrapper {
    border-radius: 11px 0 0 11px !important;
}

.essayRewriter .output__box #ajaxloaderwrapper {
    border-radius: 0 11px 11px 0 !important;
}

/* ── Content section typography (mobile) ─ */
@media (max-width: 768px) {
    .essayRewriter .tool-content-wrapper h2,
    .essayRewriter .tool-content-wrapper h3,
    .essayRewriter .tool-content-wrapper h4,
    .essayRewriter .tool-content-wrapper h5,
    .essayRewriter .tool-content-wrapper h6,
    .essayRewriter .tool-content-wrapper p {
        text-align: left !important;
    }

    .essayRewriter .tool-content-wrapper .faq__section h2 {
        text-align: center !important;
    }
}

/* ========================================================================
   MOBILE + TABLET  (Figma: 375px mobile frame, pixel-matched at ≤992px)
   ------------------------------------------------------------------------
   Palette:
     bg    #F9F9F9      border   #E5E5E5
     text  #101010      muted    #8D8F94
     dark  #333333      diff-hl  #DBEBFF
   ======================================================================== */

/* Mobile-only header inside the output box (Figma: 50px header bar) */
.essayRewriter .output__mobile__header {
    display: none;
}

@media (max-width: 992px) {
    /* ── Container paddings (Figma outer card: 10px padding) ── */
    .essayRewriter .tool__container {
        gap: 10px;
    }

    /* ── Top controls row: two 150x36 dropdown pills, 10px gap ── */
    .essayRewriter .tool_options {
        padding: 0 !important;
    }
    .essayRewriter .tool_options > .flex-row {
        gap: 10px !important;
        width: 100% !important;
    }
    .essayRewriter .dropdown___container,
    .essayRewriter .style-dropdown .dropdown___container,
    .essayRewriter .academic-level-dropdown .dropdown___container {
        width: 100%;
        max-width: 150px;
    }
    .essayRewriter .style-dropdown .selected__option__container,
    .essayRewriter .academic-level-dropdown .selected__option__container {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 150px !important;
        min-height: 36px !important;
        height: 36px !important;
        background: #F9F9F9 !important;
        border: 1px solid #E5E5E5 !important;
        border-radius: 12px !important;
        padding: 8px 10px !important;
    }
    .essayRewriter .selected__option {
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #101010 !important;
    }

    /* ── Input/Output cards: stacked, 12px radius, #E5E5E5 border ── */
    .essayRewriter .input__output {
        flex-direction: column;
        gap: 10px;
    }
    .essayRewriter .input__box {
        border: 1px solid #E5E5E5 !important;
        border-radius: 12px !important;
        overflow: hidden;
        background: #fff;
    }
    /* `overflow: visible` so footer tooltips on Extend Essay / download are not
       clipped by the card. Scroll stays on #output-summary-content. */
    .essayRewriter .output__box {
        border: 1px solid #E5E5E5 !important;
        border-radius: 12px !important;
        overflow: visible;
        background: #fff;
    }
    .essayRewriter .input__box #ajaxloaderwrapper,
    .essayRewriter .output__box #ajaxloaderwrapper {
        border-radius: 12px !important;
    }

    /* ── Hide top-of-input extras on mobile (Figma); file upload in the
       bottom input bar stays visible — see .input_setting_bar rules below. ── */
    .essayRewriter .input__box .upload-component,
    .essayRewriter .input__box .sample-text-btn,
    .essayRewriter .input__box .paste-text-btn,
    .essayRewriter .input__box .upload-container,
    .essayRewriter .input__box > .flex-row.items-center.gap-10:first-child,
    .essayRewriter .output__Options #feedbackDiv {
        display: none !important;
    }

    /* ── Textarea padding (Figma: 15px 20px) ── */
    .essayRewriter .input__box .textarea,
    .essayRewriter .output__box #output-summary-content {
        padding: 15px 20px !important;
        font-size: 16px;
        line-height: 1.5;
        color: #101010;
    }

    /* ── Setting bars (Figma: 60/56px, 10px padding, top border) ── */
    .essayRewriter .input_setting_bar,
    .essayRewriter .output_setting_plus {
        border-top: 1px solid #E5E5E5;
        padding: 10px !important;
        gap: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 60px;
        flex-wrap: nowrap;
    }

    /* Keep the right-side group (clear + Rewrite button) on a single row
       down to 360px — the inner container uses `flex-wrap` by default
       which was pushing the submit button to a new line on narrow phones. */
    .essayRewriter .input_setting_bar > .flex.flex-wrap {
        flex-wrap: nowrap !important;
        flex-shrink: 0;
    }
    .essayRewriter .input_setting_bar > .flex-row.items-center.gap-10 {
        min-width: 0;
        flex-shrink: 1;
    }

    .essayRewriter .input_setting_bar .word-count,
    .essayRewriter .input_setting_bar .word-counter,
    .essayRewriter .output_setting_plus .word-count {
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #8D8F94 !important;
    }

    /* ── Clear button: pill with icon + label ── */
    .essayRewriter #clearButton {
        border-radius: 99px;
        padding: 8px 10px;
        gap: 4px;
    }
    .essayRewriter #clearButton span {
        font-size: 14px;
        font-weight: 400;
        color: #8D8F94;
        display: inline-block;
    }

    /* ── Rewrite submit button: dark pill (Figma #333, r=99, 18/500) ── */
    .essayRewriter #submit-btn,
    .essayRewriter .submit-btn,
    .essayRewriter .submit__btn {
        background: #333333 !important;
        color: #ffffff !important;
        border-radius: 99px !important;
        padding: 10px 20px !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        min-height: 40px !important;
        line-height: 1 !important;
        border: none !important;
    }

    /* ── Mobile-only "Rewritten Essay" header inside output box ── */
    .essayRewriter .output__mobile__header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 9px 20px;
        background: #F9F9F9;
        border-bottom: 1px solid #E5E5E5;
        min-height: 50px;
    }
    .essayRewriter .output__mobile__title {
        font-size: 16px;
        font-weight: 600;
        color: #101010;
        line-height: 1.25;
    }
    .essayRewriter .output__mobile__meta {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        font-weight: 400;
        color: #8D8F94;
    }

    /* Remove the top expand/collapse from the bottom bar on mobile
       (Figma shows expand icon in the header only) */
    .essayRewriter .output_setting_plus .expand-collapse,
    .essayRewriter .output_setting_plus .output-word-container,
    .essayRewriter .output_setting_plus .output-footer-left {
        display: none !important;
    }

    /* Extend Essay button sits on the LEFT, Copy/Download stay on the right */
    .essayRewriter .output_setting_plus .output-footer-right {
        flex: 1;
        width: 100%;
        justify-content: flex-end;
    }
    .essayRewriter .output_setting_plus .output-footer-right .redirect-btn {
        margin-right: auto;
    }

    /* Allow tooltips to render outside the bar; keep default .tooltip centering
       (::before/::after share left:50% + translateX) — do not override position. */
    .essayRewriter .output_setting_plus {
        overflow: visible;
        z-index: 2;
    }

    /* Copy / Download icon buttons (Figma: 36x36) */
    .essayRewriter #copy-text-btn,
    .essayRewriter #downloadButton {
        width: 36px;
        height: 36px;
        padding: 8px;
        border-radius: 99px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .essayRewriter #copy-text-btn img,
    .essayRewriter #downloadButton img {
        width: 18px;
        height: 18px;
    }
}

/* ── Small phones: tighten controls so they fit in a single row ── */
@media (max-width: 420px) {
    .essayRewriter #clearButton span {
        display: none;
    }
    .essayRewriter .input_setting_bar {
        gap: 6px !important;
        padding: 8px !important;
    }
    .essayRewriter #clearButton {
        padding: 6px !important;
    }
    .essayRewriter #submit-btn,
    .essayRewriter .submit-btn,
    .essayRewriter .submit__btn {
        padding: 8px 14px !important;
        font-size: 16px !important;
    }
}

/*
 * "Browse File" in the input bar: hide when width < 360px, show at ≥360px.
 * home.css has `#upload-sm label { font-size: 0 !important; }` for (max-width: 425px)
 * for all tools — it must be overridden here with higher-specificity rules so
 * 360–425px can show the label on this page only.
 */

@media (max-width: 375px) {
    .essayRewriter .input_setting_bar #upload-sm label.upload_txt_File_btn {
        font-size: 0 !important;
        line-height: 0 !important;
    }
    .essayRewriter .input_setting_bar #upload-sm .icon {
        font-size: initial !important;
    }
}

/* ========================================================================
   Output footer "Extend Essay" redirect button
   Desktop: centered in the footer bar.
   Mobile : pinned left (handled inside the ≤992px block above).
   ======================================================================== */

.essayRewriter .output-footer-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Desktop: absolutely center the Extend Essay pill across the footer row
   without disturbing the left (expand/word-count) and right (feedback/copy/
   download) groups. */
@media (min-width: 993px) {
    .essayRewriter .output_setting_plus .output__Options {
        position: relative;
    }
    .essayRewriter .output_setting_plus .output-footer-right .redirect-btn {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

/* NOTE: `display` is intentionally NOT set on `.redirect-btn.on_result_visible`.
   The global `.on_result_visible { display: none; }` keeps the button hidden
   until essay-rewriter.js sets an inline `display: flex` on response. On
   reset/clear, the same script calls `.hide()` to remove it again. */
.essayRewriter .redirect-btn {
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 99px;
    border: 1px solid #e5e5e5;
    background: #f9f9f9;
    color: #101010;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}

.essayRewriter .redirect-btn:hover {
    background: #e5e5e5;
    border-color: #e5e5e5;
}

.essayRewriter .redirect-btn:active {
    filter: brightness(0.98);
}

.essayRewriter .redirect-btn:focus-visible {
    outline: 2px solid rgba(16, 16, 16, 0.35);
    outline-offset: 2px;
}

/* ── How-to section: image left, points right ── */
.essayRewriter_feature_lists_container {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 28px;
}

.essayRewriter_feature_lists_container .essayRewriter_feature_lists_media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.essayRewriter_feature_lists_container .feature_lists_container_image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.essayRewriter_feature_lists_container .feature_lists {
    flex: 1 1 55%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@media (max-width: 768px) {
    .essayRewriter_feature_lists_container {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .essayRewriter_feature_lists_container .essayRewriter_feature_lists_media {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }
}