/**
 * Detail-Modal Composer SSOT (Phase 1+)
 * Aktiv nur wenn .pulse-feed-detail-composer-dock.is-composer-v2 gesetzt ist (post.js Phase 2).
 * Icon-Kacheln an Tab-Dock (.laizos-more-quick-tile / .detail-tab-dock-tile) angelehnt.
 */
:root {
    --detail-dock-tile-radius: 14px;
    --detail-dock-tile-bg: rgba(255, 255, 255, 0.04);
    --detail-dock-tile-border: rgba(255, 255, 255, 0.14);
    --detail-dock-tile-bg-hover: rgba(255, 255, 255, 0.06);
    --detail-dock-tile-on-bg: rgba(42, 157, 143, 0.2);
    --detail-dock-tile-on-border: rgba(42, 157, 143, 0.55);
    --detail-dock-tile-on-inset: rgba(42, 157, 143, 0.22);
    --detail-dock-icon-color: #d8e0e8;
    --detail-composer-row-h: 68px;
    --detail-composer-btn-w: 40px;
    --detail-composer-actions-gap: 4px;
    --detail-composer-stack-btn-h: calc(
        (var(--detail-composer-row-h) - var(--detail-composer-actions-gap)) / 2
    );
}

/* —— Dock-Container (kein Gradient / kein schwarzer Streifen) —— */
.pulse-feed-detail-composer-dock.is-composer-v2:not([hidden]) {
    flex: 0 0 auto;
    z-index: 7;
    padding: 6px 10px 4px;
    background: transparent !important;
    border-top: none !important;
    box-shadow: none !important;
}

.pulse-feed-detail-card.is-detail-dock-v2.has-detail-composer-dock > .pulse-feed-detail-composer-dock.is-composer-v2:not([hidden]) {
    padding: 6px 10px 4px !important;
    background: transparent !important;
    border-top: none !important;
    box-shadow: none !important;
}

.pulse-feed-detail-composer-dock.is-composer-v2 .add-comment-form,
.pulse-feed-detail-composer-dock.is-composer-v2 .climb-comm-composer {
    width: 100%;
    padding: 0;
    margin: 0;
    border: none !important;
    border-top: none !important;
    display: block;
}

.pulse-feed-detail-composer-dock.is-composer-v2 .add-comment-form.has-detail-composer-row {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: 0 !important;
}

/* —— Zeile: Textarea + Actions —— */
.pulse-feed-detail-composer-dock.is-composer-v2 .climb-comm-dock-row,
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-modal-composer-row,
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
}

.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-input,
.pulse-feed-detail-composer-dock.is-composer-v2 .climb-comm-dock-row textarea.form-control,
.pulse-feed-detail-composer-dock.is-composer-v2 .climb-comm-dock-row .comment-text-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    min-height: var(--detail-composer-row-h);
    max-height: 120px;
    margin: 0;
    box-sizing: border-box;
    resize: vertical;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.22);
    color: inherit;
    font: inherit;
    padding: 8px 10px;
    line-height: 1.35;
}

.pulse-feed-detail-composer-dock.is-composer-v2 .detail-modal-composer-actions,
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: var(--detail-composer-actions-gap);
    flex: 0 0 auto;
    height: var(--detail-composer-row-h);
    max-height: var(--detail-composer-row-h);
    box-sizing: border-box;
}

.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-actions[data-actions="2"] {
    justify-content: center;
}

/* —— Icon-Kacheln (rechteckig wie Tab-Dock, nicht Kreis) —— */
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-dock-icon-btn,
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-btn {
    flex: 0 0 auto;
    width: var(--detail-composer-btn-w);
    min-width: var(--detail-composer-btn-w);
    height: var(--detail-composer-btn-w);
    min-height: var(--detail-composer-btn-w);
    padding: 0;
    margin: 0;
    border-radius: var(--detail-dock-tile-radius);
    border: 1px solid var(--detail-dock-tile-border);
    background: var(--detail-dock-tile-bg);
    color: var(--detail-dock-icon-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    font-weight: inherit;
    line-height: 1;
}

.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-actions[data-actions="2"] .detail-dock-icon-btn,
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-actions[data-actions="2"] .detail-composer-btn,
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-actions[data-actions="2"] .comment-send-btn,
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-actions[data-actions="2"] .comment-image-btn {
    width: var(--detail-composer-btn-w);
    min-width: var(--detail-composer-btn-w);
    max-width: var(--detail-composer-btn-w);
    height: var(--detail-composer-stack-btn-h);
    min-height: var(--detail-composer-stack-btn-h) !important;
    max-height: var(--detail-composer-stack-btn-h);
    padding: 0 !important;
    margin: 0;
    line-height: 1;
    font-size: 1rem;
}

/* Stimmen / ein Senden-Icon direkt in der Zeile (nicht gestapelt) */
.pulse-feed-detail-composer-dock.is-composer-v2 .climb-comm-dock-row > .detail-dock-icon-btn,
.pulse-feed-detail-composer-dock.is-composer-v2 .climb-comm-dock-row > .detail-composer-btn,
.pulse-feed-detail-composer-dock.is-composer-v2 .climb-comm-dock-row > .comment-send-btn.climb-comm-send-icon,
.pulse-feed-detail-composer-dock.is-composer-v2 .climb-comm-dock-row > .climb-comm-send-icon {
    align-self: center;
    flex: 0 0 auto;
    width: var(--detail-composer-btn-w);
    min-width: var(--detail-composer-btn-w);
    height: var(--detail-composer-btn-w);
    min-height: var(--detail-composer-btn-w) !important;
    max-height: var(--detail-composer-btn-w);
    padding: 0 !important;
}

.pulse-feed-detail-composer-dock.is-composer-v2 .comment-send-btn.chat-composer-action {
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: var(--detail-dock-tile-radius) !important;
    transform: none !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

.pulse-feed-detail-composer-dock.is-composer-v2 .detail-dock-icon-btn:hover,
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-btn:hover {
    background: var(--detail-dock-tile-bg-hover);
    border-color: rgba(255, 255, 255, 0.2);
}

.pulse-feed-detail-composer-dock.is-composer-v2 .detail-dock-icon-btn:focus-visible,
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-btn:focus-visible {
    outline: 2px solid rgba(42, 157, 143, 0.55);
    outline-offset: 2px;
}

.pulse-feed-detail-composer-dock.is-composer-v2 .detail-dock-icon-btn:disabled,
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Senden: Akzent-Icon, Kachel wie Tab */
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-dock-icon-btn.is-send,
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-btn.is-send:not(:disabled) {
    border-color: var(--detail-dock-tile-on-border);
    background: var(--detail-dock-tile-on-bg);
    box-shadow: inset 0 0 0 1px var(--detail-dock-tile-on-inset);
    color: #06150c;
}

.pulse-feed-detail-composer-dock.is-composer-v2 .detail-dock-icon-btn.is-send i,
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-btn.is-send:not(:disabled) i {
    color: var(--color-brand, #4caf50);
}

/* Chat/Pinnwand: Kamera gleiche Kachel wie Mikro (Icon dezent hell) */
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-actions .detail-dock-icon-btn.is-camera,
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-actions .detail-composer-btn.is-camera {
    border-color: var(--detail-dock-tile-on-border);
    background: var(--detail-dock-tile-on-bg);
    box-shadow: inset 0 0 0 1px var(--detail-dock-tile-on-inset);
    color: var(--detail-dock-icon-color);
}

.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-actions .detail-dock-icon-btn.is-camera i,
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-actions .detail-composer-btn.is-camera i {
    color: var(--detail-dock-icon-color);
}

/* Chat: Mikro (gleiche Kachel wie Kamera) */
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-actions .detail-dock-icon-btn.chat-composer-action,
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-actions .detail-composer-btn.chat-composer-action {
    border-color: var(--detail-dock-tile-on-border);
    background: var(--detail-dock-tile-on-bg);
    box-shadow: inset 0 0 0 1px var(--detail-dock-tile-on-inset);
    color: #06150c;
}

.pulse-feed-detail-composer-dock.is-composer-v2 .detail-dock-icon-btn.chat-composer-action.is-mic,
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-btn.chat-composer-action.is-mic {
    border-color: var(--detail-dock-tile-on-border);
    background: var(--detail-dock-tile-on-bg);
    color: #06150c;
}

.pulse-feed-detail-composer-dock.is-composer-v2 .detail-dock-icon-btn.chat-composer-action.is-mic i,
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-btn.chat-composer-action.is-mic i {
    color: var(--accent-color, #c9a227);
}

.pulse-feed-detail-composer-dock.is-composer-v2 .detail-dock-icon-btn.chat-composer-action.is-recording,
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-btn.chat-composer-action.is-recording {
    background: rgba(198, 40, 40, 0.35);
    border-color: #c62828;
    color: #fff;
}

.pulse-feed-detail-composer-dock.is-composer-v2 .detail-dock-icon-btn.chat-composer-action.is-uploading,
.pulse-feed-detail-composer-dock.is-composer-v2 .detail-composer-btn.chat-composer-action.is-uploading {
    opacity: 0.75;
}

/* Legacy-Klassen im v2-Dock neutralisieren (runde/grüne Overrides) */
.pulse-feed-detail-composer-dock.is-composer-v2 .climb-comm-send-icon,
.pulse-feed-detail-composer-dock.is-composer-v2 .comment-send-btn,
.pulse-feed-detail-composer-dock.is-composer-v2 .comment-image-btn {
    border-radius: var(--detail-dock-tile-radius);
}

.pulse-feed-detail-composer-dock.is-composer-v2 .add-comment-form.chat-composer-form {
    display: block !important;
    flex-wrap: unset !important;
    align-items: unset !important;
    gap: unset !important;
}

.pulse-feed-detail-composer-dock.is-composer-v2 .pulse-wall-composer .pulse-wall-topic-picker,
.pulse-feed-detail-composer-dock.is-composer-v2 .pulse-wall-md-hint {
    display: none;
}

/* FAB „Neue Gruppe“ im Profil-Chat (Phase 4: gleiche Kachel) */
.chat-embed-fork-fab.detail-dock-icon-btn {
    width: var(--detail-composer-btn-w);
    height: var(--detail-composer-btn-w);
    min-width: var(--detail-composer-btn-w);
    min-height: var(--detail-composer-btn-w);
    padding: 0;
    border-radius: var(--detail-dock-tile-radius);
    border: 1px solid var(--detail-dock-tile-border);
    background: var(--detail-dock-tile-bg);
    color: var(--detail-dock-icon-color);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.chat-embed-fork-fab.detail-dock-icon-btn:hover {
    background: var(--detail-dock-tile-bg-hover);
}

/* Upload / Bild-Dialog über Detail-Modal (ohne globale z-index-Anpassung) */
.pulse-feed-detail-overlay > .detail-modal-aux-layer,
#venue-detail-overlay > .detail-modal-aux-layer,
.detail-modal-shell-overlay > .detail-modal-aux-layer {
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: none;
}

.detail-modal-aux-layer > .detail-modal-aux-host,
.detail-modal-aux-layer > #universal-uploader.detail-modal-aux-host {
    pointer-events: auto;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
}

.detail-modal-aux-layer > #chat-voice-perm-modal.detail-modal-aux-host,
.detail-modal-aux-layer > #chat-image-dest-modal.detail-modal-aux-host {
    pointer-events: auto;
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

/* Venue/Feed: kein Scroll-Padding für „Phantom-Composer“ (Footer im Flex-Fluss) */
.pulse-feed-detail-card.is-detail-dock-v2 > .pulse-feed-detail-scroll,
.venue-modal-card--has-dock.is-detail-dock-v2 > .pulse-feed-detail-scroll,
.product-detail-shell.is-detail-dock-v2 > .product-detail-panes {
    padding-bottom: 0 !important;
}

.venue-modal-card--has-dock:not([data-detail-layout="fill"]) .pulse-feed-detail-panel,
.venue-modal-card--has-dock:not([data-detail-layout="fill"]) .pulse-feed-detail-swipe-track,
.pulse-feed-detail-card.is-detail-dock-v2:not([data-detail-layout="fill"]) .pulse-feed-detail-panel,
.pulse-feed-detail-card.is-detail-dock-v2:not([data-detail-layout="fill"]) .pulse-feed-detail-swipe-track {
    height: auto !important;
    min-height: 0;
    align-items: flex-start;
}

/* Chat/Pinnwand/Community/Produkt-Feed: Panel flex, Liste scrollt (kein 400px-Cap aus style.css) */
.pulse-feed-detail-card.is-laizos-book-swipe.is-community-fill
    .pulse-feed-detail-panel[data-pulse-detail-panel="chat"],
.pulse-feed-detail-card.is-laizos-book-swipe.is-community-fill
    .pulse-feed-detail-panel[data-pulse-detail-panel="pinnwand"],
.pulse-feed-detail-card.is-laizos-book-swipe.is-community-fill
    .pulse-feed-detail-panel[data-pulse-detail-panel="community"],
.pulse-feed-detail-card.is-laizos-book-swipe.has-detail-composer-dock
    .product-detail-pane[data-pdtab-pane="feed"] {
    flex: 0 0 100% !important;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.pulse-feed-detail-overlay.person-profile-foreign-modal
    .pulse-feed-detail-card.has-detail-composer-dock
    .comment-list,
.pulse-feed-detail-card.has-detail-composer-dock.is-composer-v2
    .pulse-wall-wrap
    .comment-list,
.pulse-feed-detail-card.has-detail-composer-dock.is-composer-v2
    .climb-comm-list,
.product-detail-shell.has-detail-composer-dock
    .product-detail-feed
    .climb-comm-list {
    max-height: none !important;
    margin-bottom: 0 !important;
    flex: 1 1 auto;
    min-height: 0;
}

.pulse-feed-detail-card.has-detail-composer-dock.is-composer-v2
    .pulse-feed-detail-composer-dock:not([hidden]) {
    background: transparent !important;
    border-top: none !important;
    box-shadow: none !important;
}

.venue-modal-card--has-dock:not([data-detail-layout="fill"]) > .pulse-feed-detail-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.venue-modal-card--has-dock:not([data-detail-layout="fill"]) > .pulse-feed-detail-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.venue-modal-card--has-dock:not([data-detail-layout="fill"]) .pulse-feed-detail-swipe-viewport {
    flex: none;
    height: auto;
    min-height: 0;
    overflow: visible;
}

.venue-modal-card--has-dock:not([data-detail-layout="fill"]) [data-venue-pane] {
    height: auto !important;
    min-height: 0;
    overflow: visible;
    scrollbar-width: none;
}