/* The "what's on your mind" post/group-post compose form (see formCreatePost in
   templates/_macros/form.html.twig): a borderless look for its inputs, requested
   over the default Bootstrap/ux-dropzone borders. */
.post-compose-form .form-control,
.post-compose-form .form-select,
.post-compose-form .dropzone-container,
.post-compose-form .input-group-text,
.post-compose-form .btn {
    border: none;
}

.post-compose-form .form-select {
    background-color: var(--bs-body-bg);
}

.post-compose-form textarea.form-control {
    border-bottom: 1px solid var(--bs-border-color);
}

/* Used with the textarea-autogrow Stimulus controller: the textarea grows to fit typed
   content instead of showing an internal scrollbar, up to this max-height, then scrolls. */
.textarea-autogrow {
    max-height: 400px;
    overflow-y: auto;
}

/* Rounded-pill search input with a magnifying-glass icon overlaid inside it (used by a plain
   .input-group-text prepend can't reproduce, since that renders as a separate bordered segment
   rather than an icon sitting inside the pill). */
.search-input-wrap {
    position: relative;
}

.search-input-wrap .search-input-icon {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.search-input-wrap .search-input-icon ~ .form-control {
    padding-left: 2.5rem;
}

.upload-chip {
    width: 80px;
    height: 80px;
}

.upload-chip-remove {
    width: 20px;
    height: 20px;
    line-height: 1;
}

/* Chat panel (src_app/Chat/templates/_panel_*.html.twig, _thread, _message, _compose_form), in the
   miSocial v2 look: surfaces and spacing instead of lines, green (--bs-success) as the one action
   colour. The panel sits on --ms-surface so message bubbles (--ms-raised) stand out in both themes.
   The id beats Bootstrap's own .offcanvas variables, whose stylesheet loads after this one. */
#chatPanel {
    --bs-offcanvas-width: 420px;
    --bs-offcanvas-bg: var(--ms-surface);
}

/* Phones: the panel takes the whole screen width. */
@media (max-width: 575.98px) {
    #chatPanel {
        --bs-offcanvas-width: 100vw;
    }
}

.chat-panel__body {
    padding: 0;
}

.chat-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--ms-divider);
}

.chat-head__title {
    flex: 1;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--bs-emphasis-color);
}

.chat-head__who {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.chat-head__name {
    font-weight: 800;
    color: var(--bs-emphasis-color);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.chat-head__name:hover {
    color: var(--ms-accent-text);
}

.chat-head__sub {
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.chat-search {
    margin: .75rem .9rem .5rem;
}

.chat-label {
    display: block;
    margin-bottom: .3rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* Conversation list / friend pickers */
.chat-list {
    display: flex;
    flex-direction: column;
    padding: 0 .5rem .75rem;
}

.chat-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    margin: 0;
    padding: .6rem .5rem;
    border: 0;
    border-radius: var(--bs-border-radius-lg);
    background: transparent;
    color: var(--bs-body-color);
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease;
}

.chat-row:hover {
    background-color: var(--ms-raised);
}

.chat-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.chat-row__top,
.chat-row__bottom {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.chat-row__name {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    color: var(--bs-emphasis-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-row__time {
    flex: none;
    font-size: .72rem;
    color: var(--bs-secondary-color);
}

.chat-row__preview {
    flex: 1;
    min-width: 0;
    font-size: .82rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-row__go {
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.chat-row.is-unread .chat-row__name {
    font-weight: 900;
}

.chat-row.is-unread .chat-row__preview {
    font-weight: 600;
    color: var(--bs-body-color);
}

.chat-row.is-unread .chat-row__time {
    font-weight: 700;
    color: var(--ms-accent-text);
}

.chat-unread {
    flex: none;
    display: inline-grid;
    place-items: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background-color: var(--bs-success);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
}

.chat-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--ms-raised);
}

.chat-avatar--sm {
    width: 36px;
    height: 36px;
    font-size: .85rem;
}

.chat-avatar--group {
    background-color: color-mix(in srgb, var(--bs-success) 18%, transparent);
    color: var(--ms-accent-text);
}

.chat-empty {
    margin: .9rem;
}

.chat-empty-search {
    padding: 1.5rem;
    text-align: center;
    font-size: .9rem;
    color: var(--bs-secondary-color);
}

/* "New group": friend rows with round check marks */
.chat-group-form__name {
    padding: .9rem .9rem .75rem;
}

.chat-group-form__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 .9rem;
}

.chat-group-form__count {
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.chat-group-form__foot {
    position: sticky;
    bottom: 0;
    padding: .75rem .9rem;
    border-top: 1px solid var(--ms-divider);
    background-color: var(--ms-surface);
}

.chat-pick__check {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    border: 2px solid var(--bs-border-color);
    border-radius: 50%;
    appearance: none;
    cursor: pointer;
}

.chat-pick__check:checked {
    border-color: var(--bs-success);
    background: var(--bs-success) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") center / 100% no-repeat;
}

.chat-pick:has(.chat-pick__check:checked) {
    background-color: color-mix(in srgb, var(--bs-success) 10%, transparent);
}

/* Open thread: header, scrolling messages, composer pinned at the bottom */
.chat-thread {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-messages {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    padding: .5rem .9rem 1rem;
}

.chat-earlier {
    align-self: center;
    margin: .25rem 0 .5rem;
    padding: .3rem .9rem;
    border: 0;
    border-radius: 999px;
    background-color: var(--ms-raised);
    color: var(--bs-body-color);
    font-size: .8rem;
    font-weight: 700;
}

.chat-earlier:hover {
    color: var(--bs-emphasis-color);
}

.chat-day {
    margin: .9rem 0 .35rem;
    text-align: center;
}

.chat-day span {
    padding: .2rem .7rem;
    border-radius: 999px;
    background-color: var(--ms-raised);
    font-size: .72rem;
    font-weight: 800;
    color: var(--bs-secondary-color);
}

.chat-start {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

.chat-start strong {
    color: var(--bs-emphasis-color);
}

/* One message. is-mine/is-theirs and is-first/is-last (a run from the same sender) are set by
   chat_controller.js#layout. */
.chat-msg {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    margin-top: 2px;
}

.chat-msg.is-first {
    margin-top: .55rem;
}

.chat-msg.is-mine {
    justify-content: flex-end;
}

.chat-msg__avatar {
    display: none;
    flex: none;
    width: 28px;
    height: 28px;
    margin-bottom: 1.1rem;
    border-radius: 50%;
    object-fit: cover;
}

/* Groups: the sender's avatar beside the last message of each run, their name above the first. */
.is-group .chat-msg.is-theirs .chat-msg__avatar {
    display: block;
    visibility: hidden;
}

.is-group .chat-msg.is-theirs.is-last .chat-msg__avatar {
    visibility: visible;
}

.chat-msg__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    max-width: 80%;
}

.chat-msg.is-mine .chat-msg__main {
    align-items: flex-end;
}

.chat-msg__name {
    display: none;
    margin: 0 .75rem .15rem;
    font-size: .72rem;
    font-weight: 800;
    color: var(--bs-secondary-color);
}

.is-group .chat-msg.is-theirs.is-first .chat-msg__name {
    display: block;
}

.chat-msg__row {
    display: flex;
    align-items: center;
    gap: .25rem;
    max-width: 100%;
}

.chat-msg.is-mine .chat-msg__row {
    flex-direction: row-reverse;
}

.chat-msg__bubble {
    min-width: 0;
    padding: .45rem .75rem;
    border-radius: 1.1rem;
    background-color: var(--ms-raised);
    color: var(--bs-body-color);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.chat-msg.is-mine .chat-msg__bubble {
    background-color: var(--bs-success);
    color: #fff;
}

.chat-msg.is-mine .chat-msg__bubble a {
    color: #fff;
    text-decoration: underline;
}

/* Bubbles in a run tuck their corners together on the sender's side. */
.chat-msg.is-theirs:not(.is-first) .chat-msg__bubble { border-top-left-radius: .35rem; }
.chat-msg.is-theirs:not(.is-last) .chat-msg__bubble { border-bottom-left-radius: .35rem; }
.chat-msg.is-mine:not(.is-first) .chat-msg__bubble { border-top-right-radius: .35rem; }
.chat-msg.is-mine:not(.is-last) .chat-msg__bubble { border-bottom-right-radius: .35rem; }

.chat-msg__text {
    white-space: pre-line;
}

.chat-msg__bubble:has(.chat-msg__img) {
    padding: .3rem;
}

.chat-msg__bubble:has(.chat-msg__img) .chat-msg__text {
    padding: .25rem .45rem .15rem;
}

.chat-msg__img {
    display: block;
}

.chat-msg__img + .chat-msg__img {
    margin-top: .3rem;
}

.chat-msg__img img {
    display: block;
    max-width: 240px;
    max-height: 240px;
    width: 100%;
    border-radius: .85rem;
    object-fit: cover;
}

.chat-msg__file {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .15rem 0;
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.chat-msg__file + .chat-msg__text,
.chat-msg__file + .chat-msg__file {
    margin-top: .3rem;
}

.chat-msg.is-deleted .chat-msg__bubble,
.chat-msg.is-mine.is-deleted .chat-msg__bubble {
    border: 1px dashed var(--bs-border-color);
    background-color: transparent;
    color: var(--bs-secondary-color);
    font-style: italic;
}

/* Time (and "edited") under the last message of a run. */
.chat-msg__meta {
    display: none;
    margin: .2rem .6rem 0;
    font-size: .68rem;
    color: var(--bs-secondary-color);
}

.chat-msg.is-last .chat-msg__meta,
.chat-msg__meta:has(span) {
    display: block;
}

/* Edit/Unsend menu: your own messages only, shown on hover (always faintly on touch screens). */
.chat-msg__actions {
    display: none;
}

.chat-msg.is-mine .chat-msg__actions {
    display: block;
    opacity: 0;
    transition: opacity .15s ease;
}

.chat-msg.is-mine:hover .chat-msg__actions,
.chat-msg__actions:focus-within {
    opacity: 1;
}

@media (hover: none) {
    .chat-msg.is-mine .chat-msg__actions {
        opacity: .6;
    }
}

.chat-msg__more {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color);
}

.chat-msg__more:hover {
    background-color: var(--ms-raised);
    color: var(--bs-emphasis-color);
}

.chat-msg__edit {
    width: 16rem;
    max-width: 100%;
}

/* Composer: one rounded bar - attach, text, emoji, send */
.chat-compose {
    flex: none;
    padding: .6rem .75rem .75rem;
    border-top: 1px solid var(--ms-divider);
}

.chat-compose__attach {
    margin-bottom: .5rem;
}

.chat-compose__bar {
    display: flex;
    align-items: flex-end;
    gap: .25rem;
    padding: .25rem;
    border-radius: 1.4rem;
    background-color: var(--ms-raised);
}

.chat-compose__bar:focus-within {
    box-shadow: 0 0 0 2px var(--bs-focus-ring-color);
}

.chat-compose__icon,
.chat-compose__send {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
}

.chat-compose__icon {
    background: transparent;
    color: var(--bs-secondary-color);
}

.chat-compose__icon:hover {
    background-color: color-mix(in srgb, var(--bs-success) 18%, transparent);
    color: var(--bs-emphasis-color);
}

.chat-compose__send {
    background-color: var(--bs-success);
    color: #fff;
}

.chat-compose__send:hover {
    filter: brightness(1.1);
}

.chat-compose__send:disabled {
    opacity: .6;
}

.chat-compose__input {
    flex: 1;
    min-width: 0;
    align-self: center;
    max-height: 140px;
    padding: .4rem .25rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--bs-body-color);
    line-height: 1.4;
    resize: none;
    overflow-y: auto;
}

.chat-compose__input::placeholder {
    color: var(--bs-secondary-color);
}

/* Bootstrap switches are sized in em's, so a larger switch is just a bigger font-size on the
   .form-check wrapper - see https://getbootstrap.com/docs/5.3/forms/checks-radios/#switches */
.form-switch-lg {
    font-size: 1.75rem;
}

/* @symfony/ux-dropzone's own stylesheet (vendor/symfony/ux-dropzone/assets/dist/style.min.css) sets
   this remove-file button's "×" via a raw UTF-8 character in its `content` value, which renders as
   mojibake ("×") when that file is served with a non-UTF-8 charset. `\00D7` is the same character
   spelled as a pure-ASCII CSS escape, so it renders correctly regardless of the vendor file's
   charset - this doesn't need that file to be touched. Also gives the button a visible circular
   background instead of a bare glyph floating in the corner, and a title for accessibility/clarity. */
.dropzone-preview-button {
    top: 4px;
    right: 4px;
}

.dropzone-preview-button:before {
    /* !important: guarantees this wins over the vendor rule regardless of which stylesheet AssetMapper
       happens to emit later in <head> - both rules share the same selector/specificity otherwise. */
    content: "\00D7" !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    line-height: 1;
    font-size: 14px;
    padding: 0;
}

/* Responsive 16:9 wrapper for embedded video (see _macros/posts.html.twig's YouTube embed).
   The bare <iframe> it wraps has no explicit width/height, so without this it renders at the
   browser's ~300x150 default instead of scaling to the post width on any screen size. */
.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}

.video-container iframe,
.video-container embed,
.video-container object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Post header stat row (clock/privacy/upvotes/downvotes - see .post-meta-row in
   templates/_macros/posts.html.twig). At narrow widths the items' combined width can
   exceed the card, and being plain inline content they'd wrap onto a second line instead of
   staying a single row, so force nowrap and let the row scroll horizontally if it overflows. */
.post-meta-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}

.post-meta-row::-webkit-scrollbar {
    display: none;
}

.post-meta-row span {
    flex: 0 0 auto;
}

/* Site-wide pagination styling, matching the pill look originally built for sktable
   (assets/core/sktable/sktable.css .sk-table-paging). Applies to every Bootstrap
   .pagination on the site (see templates/_partials/pagination.html.twig) so
   non-sktable pagination (e.g. drivers list, story stream) matches it too. */
.pagination {
    gap: 0.35rem;
}

.pagination .page-link {
    border-radius: 0.5rem !important;
    border-color: transparent;
    color: var(--bs-body-color);
    background-color: transparent;
    transition: background-color 0.12s ease-in-out, transform 0.12s ease-in-out;
}

.pagination .page-item:not(.disabled) .page-link:hover {
    background-color: var(--bs-tertiary-bg);
    transform: translateY(-1px);
}

.pagination .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-white, #fff);
    box-shadow: 0 0.15rem 0.4rem color-mix(in srgb, var(--bs-primary) 45%, transparent);
}

.pagination .page-item.disabled .page-link {
    /* Bootstrap's own `.disabled > .page-link` rule (bundled into styles.min.css, which loads
       after this file) ties this selector's specificity, so without an explicit background here
       the disabled state falls back to Bootstrap's solid --bs-pagination-disabled-bg box instead
       of fading out like every other non-active page-link. */
    background-color: transparent;
    color: var(--bs-secondary-color);
    opacity: 0.5;
}

/* Shrinks .pagination-compact page-links on narrow screens - shared by both
   templates/_partials/pagination.html.twig and sktable.js's pagination bar so the two
   look identical at every viewport width. */
@media (max-width: 400px) {
    .pagination-compact .page-link {
        padding: .25rem .45rem;
        font-size: .8rem;
    }
}

/* Suggestion chips rendered by slug_availability_controller.js after a taken slug is typed. */
.slug-availability-suggestions:empty {
    display: none;
}

.slug-availability-suggestions {
    margin-top: .35rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

/* slug_availability_controller.js inserts the suggestions element directly after the <input> via
   insertAdjacentElement('afterend', ...) - when that input lives inside a Bootstrap .input-group
   (a flex container), that insert makes the suggestions block just another flex item, squeezing
   into the same row as the input instead of appearing below it like normal help text. Forcing it
   to consume the full row (Bootstrap's own documented trick for .invalid-feedback inside an
   .input-group, which also has flex-wrap: wrap) drops it onto its own line underneath instead.
   `order` is also needed: the suggestions div sits between the <input> and any trailing
   input-group element (e.g. a "Preview" button) in DOM order, so without a higher order that
   trailing element would wrap down onto the new line too, splitting the group's first row. */
.input-group > .slug-availability-suggestions {
    flex: 0 0 100%;
    order: 10;
    margin-top: .5rem;
}

.slug-availability-warning {
    color: var(--bs-warning-text-emphasis, #997404);
    font-size: .85rem;
}

.slug-availability-chip {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-radius: 1rem;
    padding: .1rem .65rem;
    font-size: .85rem;
    line-height: 1.5;
    cursor: pointer;
}

.slug-availability-chip:hover {
    background: var(--bs-secondary-bg, #e9ecef);
}

/* Gate-mode status line (Nook address): checking / taken / available. */
.slug-availability-status {
    flex: 0 0 100%;
    font-size: .85rem;
    font-weight: 600;
}
.slug-availability-status.is-checking { color: var(--bs-secondary-color); font-weight: 500; }
.slug-availability-status.is-bad { color: var(--bs-danger-text-emphasis, #b02a37); }
.slug-availability-status.is-ok { color: var(--bs-success-text-emphasis, #0a3622); }
input[aria-invalid="true"][data-controller~="slug-availability"] {
    border-color: var(--bs-danger, #dc3545);
}

/* MiPage card hover lift - used by both the pages listing (list_pages.html.twig, loaded via
   _base.html.twig) and the public MiPage directory (directory.html.twig, which extends the
   public layout directly and doesn't go through _base.html.twig), so this lives here rather
   than in either template's own addon_css block. */
.mp-page-card { transition: transform .15s ease, box-shadow .15s ease; }
.mp-page-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.mp-page-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}