/* ==========================================================================
   Divi UI polish layer (audit 28.10.2026)
   --------------------------------------------------------------------------
   Loaded AFTER style.css. Additive only: every rule is either written with
   :where() (zero specificity — any existing rule in style.css still wins) or
   limited to keyboard / accessibility / motion preferences. Nothing here
   changes layout, colours or behaviour of existing components.
   To disable: remove the <link> to polish.css from index.php.
   ========================================================================== */

/* 1. Rendering consistency ------------------------------------------------ */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Form controls do not inherit the page font by default, so Georgian text in
   buttons / inputs fell back to the OS font. Zero specificity: components that
   already set their own font keep it. */
:where(button, input, select, textarea) {
    font-family: inherit;
}

/* 2. Touch devices: no 300 ms tap delay / double-tap zoom on controls, and no
      grey flash on tap ---------------------------------------------------- */
:where(a, button, [role="button"], label, select, summary, input[type="checkbox"], input[type="radio"], input[type="range"]) {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* iOS Safari zooms the page when a text field under 16px gets focus.
   Applies only to iOS and only to fields without their own font-size. */
@supports (-webkit-touch-callout: none) {
    :where(input[type="text"], input[type="search"], input[type="email"], input[type="password"],
           input[type="tel"], input[type="url"], input[type="number"], textarea) {
        font-size: max(16px, 1em);
    }
}

/* 3. Keyboard accessibility ------------------------------------------------
   style.css removes the focus outline on many controls (outline:none), which
   leaves keyboard users without any focus indicator. :focus-visible fires only
   for keyboard navigation, so mouse/touch users see no change. Text inputs and
   contenteditable areas are excluded on purpose (they already show a caret and
   most have their own focused style). */
:where(a[href], button, [role="button"], summary, select, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--sa-primary, #3568f5) !important;
    outline-offset: 2px !important;
    border-radius: inherit;
}

/* 4. Gentle, consistent micro-interactions (zero specificity) --------------- */
:where(a, button, [role="button"], select) {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
                box-shadow .15s ease, opacity .15s ease;
}
:where(button, [role="button"]):disabled,
:where(button, [role="button"])[aria-disabled="true"] {
    cursor: not-allowed;
}

::selection {
    background: rgba(53, 104, 245, .22);
}

/* 5. Respect "reduce motion" OS setting (vestibular disorders) -------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* 6. Windows high-contrast / forced-colors: keep focus visible ------------- */
@media (forced-colors: active) {
    :where(a[href], button, [role="button"], summary, select, [tabindex]):focus-visible {
        outline: 2px solid Highlight !important;
    }
}

/* ==========================================================================
   7. Layout fixes found in live screenshots review (28.10.2026)
   ========================================================================== */

/* 7a. Post action bar: "😊 0 / რეაქცია" wrapped onto two lines while
       comment / share stayed on one. Equal-width, single-line, centred. */
.post-actions.reaction-row { align-items: stretch; }
.post-actions.reaction-row > .reaction-wrap { display: flex; flex: 1 1 0; min-width: 0; }
.post-actions.reaction-row > .post-action { flex: 1 1 0; min-width: 0; }
.post-actions.reaction-row .reaction-wrap > .reaction-main { flex: 1 1 auto; }
.post-actions.reaction-row .post-action {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 5px; white-space: nowrap;
}

/* 7b. Group header: the group title was drawn half under the cover image.
       Start the text block below the cover; avatar keeps overlapping it. */
/* (applies on phones too — the same overlap was visible on iOS) */
.group-profile-hero .profile-identity { align-items: flex-start; }
.group-profile-hero .profile-identity .profile-identity-text { padding-top: 46px; }

/* 7c. Composer: "ფოტო / ვიდეო" had a bordered wrapper around a bordered
       button (double frame). Keep the inner button's frame only. */
.composer-toolbar .media-picker.media-picker-unified {
    border: 0 !important; background: transparent !important;
    box-shadow: none !important; padding: 0 !important; height: auto;
}

/* 7d. Search results: group cards squeezed name and meta into narrow columns. */
.search-profile-card { flex-wrap: wrap; }
.search-profile-main { flex: 1 1 180px; min-width: 0; }
.search-profile-main:not(:has(img, .avatar-circle, .avatar-image)) {
    flex-direction: column; align-items: flex-start; gap: 2px;
}
.search-profile-actions { flex: 0 0 auto; }

/* 7e. Reels: white "For You" label disappeared on bright images. */
.social-video-reels-title { text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }

/* ==========================================================================
   8. Mobile fixes found in iPhone screenshots review (28.10.2026)
   ========================================================================== */

/* 8a. Bottom nav: on touch screens :hover "sticks" after a tap, so several
       tabs looked active at once (home + notifications + chat ...). Only the
       real current/open tab (.is-active) keeps the highlight. */
@media (hover: none) {
    .mobile-bottom-nav__item:hover:not(.is-active):not(.mobile-bottom-nav__compose) {
        background: transparent;
        color: #667085;
    }
}
/* The "პოსტი" button is an action, not a page: its blue circle is enough.
   A permanent tinted pill made it look like an always-selected tab. */
.mobile-bottom-nav__compose { background: transparent; }

/* 8b. Post author line: keep "· მფლობელი" together instead of leaving a
       dangling dot at the end of the first line. */
.post-group-badge { white-space: nowrap; }

/* 8c. Post action bar on narrow phones: three equal columns must fit. */
@media (max-width: 430px) {
    .post-actions.reaction-row .post-action {
        font-size: 12px; gap: 3px; padding-left: 2px; padding-right: 2px;
    }
}

/* 8d. Composer background palette: 7 swatches + label did not fit one row,
       leaving the dark swatch alone on a second line. */
@media (max-width: 430px) {
    .post-background-picker { gap: 4px; }
    .post-background-picker .post-bg-swatch { width: 28px !important; height: 28px !important; min-width: 0 !important; }
}

/* 8e. Chat input: the placeholder wrapped to two lines and was cut off. */
textarea[id^="inputMsg_"]::placeholder {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
textarea[id^="inputMsg_"] { text-overflow: ellipsis; }

/* 8f. Friends: one card per screen height (~900px each) wasted the screen.
       Two columns on normal phones; single column only on very small ones. */
@media (min-width: 360px) and (max-width: 560px) {
    .friends-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    .friends-grid .friend-card { padding: 12px !important; }
}

/* ==========================================================================
   9. Groups discoverability (28.10.2026)
   Groups were only reachable through the avatar menu; the header "▦" icon led
   to a placeholder apps page. "ჯგუფები" is now a visible header item. On phones
   the header 🏠 duplicated the bottom-nav "მთავარი", so it makes room for it.
   ========================================================================== */
@media (max-width: 900px) {
    .main-nav .home-nav-item { display: none !important; }
}
.groups-nav-link .nav-icon { font-size: 21px; }

/* ==========================================================================
   10. Group comments = feed comments (threads, collapsed replies)
   ========================================================================== */
.comments-area .comment-thread[hidden],
.comments-area .comment-replies[hidden] { display: none !important; }
.comments-area .comment-replies { margin: 2px 0 4px; }
.comments-area .comment-replies-toggle,
.comments-area .comments-view-more {
    display: block; background: none; border: 0; cursor: pointer;
    color: #1877f2; font-size: 13px; font-weight: 600; padding: 4px 8px 4px 46px;
    text-align: left;
}
.comments-area .comments-view-more { padding-left: 8px; margin-bottom: 4px; }
.comments-area .comment-replies-toggle:hover,
.comments-area .comments-view-more:hover { text-decoration: underline; }

/* Full-thread comments sheet (groups) */
body.gc-sheet-open { overflow: hidden; }
.gc-sheet { position: fixed; inset: 0; z-index: 10060; display: flex; align-items: flex-end; justify-content: center; }
.gc-sheet[hidden] { display: none !important; }
.gc-sheet-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
.gc-sheet-panel {
    position: relative; width: 100%; max-width: 640px; max-height: 88vh; max-height: 88dvh;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface, #fff); color: inherit;
    border-radius: 18px 18px 0 0; box-shadow: 0 -8px 32px rgba(0, 0, 0, .25);
}
.gc-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(128, 128, 128, .22); flex: 0 0 auto; }
.gc-sheet-close { border: 0; background: rgba(128, 128, 128, .16); width: 34px; height: 34px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; color: inherit; }
.gc-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 12px 0; }
.gc-sheet-body .comments-area { margin: 0; border: 0; }
.gc-sheet-body .comment-form { position: sticky; bottom: 0; z-index: 2; background: var(--surface, #fff); padding: 8px 0 12px; }
@media (min-width: 700px) {
    .gc-sheet { align-items: center; }
    .gc-sheet-panel { border-radius: 18px; max-height: 80vh; }
}

/* ==========================================================================
   11. No scroll-boxes inside posts. Comments are compact (latest 3 + "all comments"),
   so the post simply grows; the full thread scrolls as one page in the sheet.
   Also: the old content-visibility rule clipped the bottom of comment bubbles.
   ========================================================================== */
article.post-card[data-group-post-id] .comments-list,
.feed-container .post-card .comments-list,
.post-detail-view .comments-list,
.gc-sheet-body .comments-list {
    max-height: none !important;
    overflow: visible !important;
    min-height: 0 !important;
}
.comments-list .comment-item {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
}
.comments-area .comment-item.gc-new .comment-bubble { animation: gcNew 4s ease-out; }
@keyframes gcNew { 0% { box-shadow: 0 0 0 2px rgba(24,119,242,.55); } 100% { box-shadow: 0 0 0 2px rgba(24,119,242,0); } }