/*
 * Small, clean post box (publisher), matching header-simple.css.
 * Icons are unchanged. Light mode only: scoped to
 * `html:not(:has(#night-mode-css))`, which also outranks the
 * "clean minimal light mode" !important rules in style.css.
 *
 * Closed: avatar + one rounded field + a compact row of actions.
 * Open (body.pub-focus, set by the publisher's own JS): the field grows and
 * the Share / privacy / character-count row appears.
 */

/* ---------- Card ---------- */

html:not(:has(#night-mode-css)) #publisher-box-focus .sun_pub_box {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    background: #ffffff !important;
    margin-bottom: 14px;
}

/* ---------- Avatar + field ---------- */

html:not(:has(#night-mode-css)) #publisher-box-focus .wo_pub_txtara_combo {
    position: relative;
    min-height: 40px;
}

html:not(:has(#night-mode-css)) #publisher-box-focus .post-avatar {
    width: 40px;
    height: 40px;
    top: 0;
    left: 0;
    border-radius: 50%;
    object-fit: cover;
}

html:not(:has(#night-mode-css)) #publisher-box-focus .postText {
    width: calc(100% - 50px) !important;
    margin-left: 50px;
    padding: 9px 44px 9px 16px !important;
    min-height: 40px;
    border: 1px solid transparent !important;
    border-radius: 20px !important;
    background: #f3f4f6 !important;
    color: #111827 !important;
    font-size: 15px;
    line-height: 22px;
    resize: none;
    box-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, border-radius 0.15s ease;
}

html:not(:has(#night-mode-css)) #publisher-box-focus .postText::placeholder {
    color: #6b7280;
    opacity: 1;
}

/* Closed: one line. (Open, the publisher JS sets the height inline.) */
html:not(:has(#night-mode-css)) body:not(.pub-focus) #publisher-box-focus .postText {
    height: 40px !important;
    overflow: hidden;
    cursor: text;
}

/* Closed field shows one line of placeholder, ending in "…" when narrow. */
html:not(:has(#night-mode-css)) body:not(.pub-focus) #publisher-box-focus .postText::placeholder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html:not(:has(#night-mode-css)) body:not(.pub-focus) #publisher-box-focus .postText:hover {
    background: #eceef1 !important;
}

/* Open: a writing area. */
html:not(:has(#night-mode-css)) body.pub-focus #publisher-box-focus .postText {
    background: #ffffff !important;
    border-color: #d1d5db !important;
    border-radius: 12px !important;
    box-shadow: 0 0 0 3px rgba(29, 20, 175, 0.08) !important;
}

/* Emoji button sits inside the field on the right. */
html:not(:has(#night-mode-css)) #publisher-box-focus .add-emoticons {
    top: 2px;
    right: 4px;
}

html:not(:has(#night-mode-css)) #publisher-box-focus .add-emoticons,
html:not(:has(#night-mode-css)) #publisher-box-focus .add-emoticons > a {
    background: transparent !important;
    box-shadow: none !important;
}

html:not(:has(#night-mode-css)) #publisher-box-focus .add-emoticons > a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #6b7280;
}

html:not(:has(#night-mode-css)) #publisher-box-focus .add-emoticons > a:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #111827;
}

html:not(:has(#night-mode-css)) #publisher-box-focus .add-emoticons svg {
    width: 21px;
    height: 21px;
}

/* ---------- Action row (photo, poll, video, more) ---------- */

html:not(:has(#night-mode-css)) #publisher-box-focus .sun_pub_mid_foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin-top: 10px;
    padding-top: 8px !important;
    border-top: 1px solid #f1f5f9 !important;
}

html:not(:has(#night-mode-css)) #publisher-box-focus .sun_pub_mid_foot .poster-left-buttons {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}

html:not(:has(#night-mode-css)) #publisher-box-focus .poster-left-buttons .btn {
    height: 34px;
    padding: 0 10px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #4b5563 !important;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

html:not(:has(#night-mode-css)) #publisher-box-focus .poster-left-buttons .btn:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

/* One row layout at every width and in both states (the theme switched to
   stacked buttons with icons in 38px grey circles on phones, which shrank
   the icons to dots once sized here). */
html:not(:has(#night-mode-css)) #publisher-box-focus .sun_pub_mid_foot .poster-left-buttons .btn {
    flex-direction: row;
    justify-content: center;
    width: auto;
    margin: 0;
}

html:not(:has(#night-mode-css)) #publisher-box-focus .poster-left-buttons .btn svg,
html:not(:has(#night-mode-css)) #publisher-box-focus .poster-left-buttons .btn img {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
}

/* ---------- Share row ---------- */

/* Hidden until the box is opened; the theme's JS slides it in on focus. */
html:not(:has(#night-mode-css)) body:not(.pub-focus) #publisher-box-focus .publisher-box-footer {
    display: none !important;
}

html:not(:has(#night-mode-css)) #publisher-box-focus .publisher-box-footer {
    padding-top: 8px !important;
}

html:not(:has(#night-mode-css)) #publisher-box-focus .pub-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 8px !important;
    border-top: 1px solid #f1f5f9;
}

html:not(:has(#night-mode-css)) #publisher-box-focus .pub-footer-bottom > .clear {
    display: none;
}

/* Floats do nothing inside the flex row; order it explicitly:
   privacy, character count … Share on the far end. */
html:not(:has(#night-mode-css)) #publisher-box-focus .pub-footer-bottom > div:first-child {
    order: 3;
    margin-left: auto;
}

html:not(:has(#night-mode-css)) #publisher-box-focus .pub-footer-bottom > .charsLeft-post {
    order: 2;
}

html:not(:has(#night-mode-css)) #publisher-box-focus .pub-footer-bottom > div:not(:first-child):not(.charsLeft-post):not(#status) {
    order: 1;
}

html:not(:has(#night-mode-css)) #publisher-box-focus .pub-footer-bottom > #status:empty {
    display: none;
}

html:not(:has(#night-mode-css)) #publisher-box-focus #publisher-button {
    height: 34px;
    padding: 0 20px !important;
    border-radius: 999px !important;
    font-size: 14px;
    font-weight: 600;
    box-shadow: none !important;
}

html:not(:has(#night-mode-css)) #publisher-box-focus .charsLeft-post {
    font-size: 12px;
    color: #9ca3af !important;
    font-weight: 500;
}

/* Privacy picker ("Everyone") as a small quiet pill. */
html:not(:has(#night-mode-css)) #publisher-box-focus .pub-footer-bottom .dropdown > .btn,
html:not(:has(#night-mode-css)) #publisher-box-focus .pub-footer-bottom .dropdown-toggle {
    height: 30px;
    padding: 0 10px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #374151 !important;
    font-size: 13px;
    box-shadow: none !important;
}

/* ---------- Keyboard focus ---------- */

html:not(:has(#night-mode-css)) #publisher-box-focus .btn:focus-visible,
html:not(:has(#night-mode-css)) #publisher-box-focus a:focus-visible {
    outline: 2px solid var(--plyr-color-main, #1d14af);
    outline-offset: 2px;
}

/* ---------- Phones ---------- */

@media (max-width: 480px) {
    html:not(:has(#night-mode-css)) #publisher-box-focus .sun_pub_box {
        padding: 10px 12px !important;
    }

    html:not(:has(#night-mode-css)) #publisher-box-focus .poster-left-buttons .btn {
        padding: 0 8px !important;
        font-size: 12px;
    }
}