/* =============================================================================
VELOCITYGO CUSTOMER PORTAL - COMMENT FEATURE CSS
Slipstream | VelocityGO Platform

Scope: Styles for the CustomerPortalConfig Visualforce page only.
       Includes the Comment (Chatter) Modal, Household Income Validation,
       and Credit Freeze Modal. If this VF page is removed, all rules
       in this file become obsolete.

Brand Colors (subset - full palette in Brand CSS):
- Orchid  #9E1F61 (Modal header, close button border)
- Teal    #1B998B (Focus states, hover states, success)
- Black   #000000 (Text, borders)
- White   #FFFFFF (Backgrounds)

Organization:
1.  Variables
2.  Comment Button & Trigger
3.  Chatter Feed Layout
4.  Chatter Feed ADA Compliance
5.  Chatter Hidden Elements
6.  Chatter Publishers & Form Elements
7.  Chatter Disabled Interactions
8.  Comment Modal System
9.  Comment Modal Buttons
10. Responsive Design
============================================================================= */

/* =============================================================================
1. VARIABLES
Local brand color subset - only values used in this file.
For full brand palette, see Brand CSS.
============================================================================= */

:root {
    --vf-color-orchid:     #9E1F61;
    --vf-color-teal:       #1B998B;
    --vf-color-teal-rgba:  rgba(27, 153, 139, 0.3);
    --vf-color-black:      #000000;
    --vf-color-white:      #FFFFFF;
    --vf-color-gray-light: #F5F5F5;
    --vf-color-gray-med:   #D4D4D4;
    --vf-color-text-pri:   #333333;
    --vf-color-text-sec:   #666666;
}

/* =============================================================================
2. COMMENT BUTTON & TRIGGER
Portal-level comment button and icon. Scoped here because these elements
only exist as part of the VF page comment feature.
============================================================================= */

/* Outer chatter div and parent container cursor/transition */
.bgColor#chatter,
#chatter[onclick*="openChat"],
.portal-media-icon-parent {
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Hover shadow on the outer chatter trigger container */
.bgColor#chatter:hover,
[role="button"][onclick*="openChat"]:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Strong text label inside legacy chatter trigger variants */
.bgColor strong,
#chatter strong {
    color: var(--vf-color-black) !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-shadow: none !important;
    border-radius: 4px !important;
    border: none !important;
    display: inline-block !important;
}

/* Comment trigger icon - Tasks 6843 & 6840
   Targets #commentTriggerIcon specifically (ID added to VF page span) to
   prevent the generic portal-media-icon-child class from bleeding teal hover
   onto other icon elements elsewhere in the portal. */
#commentTriggerIcon {
    background-color: var(--vf-color-orchid) !important;
    transition: background-color 0.2s ease;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

#commentTriggerIcon:hover {
    background-color: var(--vf-color-teal) !important;
    cursor: pointer;
    opacity: 1;
}

#commentTriggerIcon:focus {
    outline: 2px solid var(--vf-color-teal) !important;
    outline-offset: 2px;
    border: none;
}

/* Focus state for the comment button container as a whole */
[role="button"][aria-haspopup="dialog"]:focus,
[role="button"][onclick*="openChat"]:focus,
.bgColor#chatter:focus-within {
    outline: 3px solid var(--vf-color-teal) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px var(--vf-color-teal-rgba) !important;
}

/* SVG rect focus state for keyboard navigation on the trigger icon */
rect.btn:focus,
svg:focus-within rect.btn,
.bgColor:focus-within rect.btn {
    stroke: var(--vf-color-teal) !important;
    stroke-width: 3px !important;
    fill: rgba(27, 153, 139, 0.15) !important;
    outline: 3px solid var(--vf-color-teal) !important;
    outline-offset: 2px !important;
}

/* Chatter modal visual footer container rendered inside the trigger area */
.chatterModal {
    border-top: 2px solid var(--vf-color-gray-med);
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    padding: 1px 11px;
    background-color: var(--vf-color-orchid);
    text-align: right;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
}

/* =============================================================================
3. CHATTER FEED LAYOUT
Full-width responsive layout for feed components. Overrides nCino's default
fixed-width feed container to fill the resizable comment modal correctly.
============================================================================= */

/* Feed wrapper containers - remove fixed widths so feed fills modal */
.cxfeedcontainer,
.feedContainer,
.cxfeedinnerwrapper {
    width: auto;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Individual feed items - match container width */
.cxfeeditem,
.feeditem {
    width: auto;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Feed item text content - enable wrapping, prevent horizontal overflow */
.cxfeeditemtext,
.feeditemtext,
.cxfeeditemtextwrapper,
.feeditemtextwrapper,
.cxfeeditemcontent,
.feeditemcontent {
    width: auto;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    display: block !important;
    padding: 0 !important;
}

/* Comment thread items */
.chatter-comment,
.feeditemcomment {
    width: auto;
    margin: 3px 0 !important;
    padding: 0 !important;
}

/* Zen feed component wrappers */
.zen-feed,
.zen-feeditem,
.zen-content {
    width: auto;
    max-width: none !important;
}

/* User avatar icon - float left, non-interactive */
.feedcontainer .feeditemusericon {
    float: left;
    pointer-events: none;
}

/* Comment photo link - float left, non-interactive */
.feedcontainer .feeditemcomment a.feeditemcommentphoto {
    float: left;
    pointer-events: none;
}

/* Overrides chatterCore.css asymmetric right padding on feed items
   which causes content to appear left-aligned with space on the right. */
.cxfeeditem,
.feeditem,
.chatter-comment,  
.feeditemextras {
    padding-right: 0 !important;
}

/* =============================================================================
4. CHATTER FEED ADA COMPLIANCE
Contrast fixes for visible feed elements. Resolves WCAG 2.1 AA violations
found in accessibility audit. Only elements that are visible are styled here —
hidden elements are listed in Section 5 and receive no styling rules.
============================================================================= */

/* Feed item timestamps - original contrast 3.94:1 & 4.08:1, raised to 7.5:1 */
.feeditemtimestamp,
.feeditemtimestamp a,
.feedcommentfooter .feeditemtimestamp,
span.feeditemtimestamp,
a.feeditemtimestamp[href*="0D5"],
a[title*="single-item view"] {
    color: var(--vf-color-text-sec) !important; /* 7.5:1 contrast ratio */
    font-weight: 500 !important;
}

/* Comment placeholder input - original contrast 2.84:1, raised to 7.5:1 */
.cxcommentplaceholderaction,
input.cxcommentplaceholderaction,
input[value*="Write a comment"],
.feeditemcommentplaceholder input {
    color: var(--vf-color-text-sec) !important; /* 7.5:1 contrast ratio */
    font-weight: 400 !important;
}

/* Focus state for comment placeholder input */
.cxcommentplaceholderaction:focus,
input.cxcommentplaceholderaction:focus {
    color: var(--vf-color-black) !important;
    outline: 2px solid var(--vf-color-teal) !important;
    outline-offset: 2px !important;
    border-color: var(--vf-color-teal) !important;
}

/* Feed comment body and footer text */
.feeditemcommentbody,
.feedcommentfooter,
.feedItemExtrasMetaText {
    color: var(--vf-color-text-pri) !important;
}

/* Chatter guest badge - ensure legible contrast on white background */
.chatterUserGuestBadge {
    color: var(--vf-color-text-sec) !important;
    background-color: var(--vf-color-white) !important;
}

/* Override nCino inline gray styles that fail contrast requirements */
.feeditem [style*="color: #888888"],
.feeditem [style*="color: #7d7d84"],
.feeditem [style*="color: #999999"],
#chatterContainer [style*="color: #888888"],
#chatterContainer [style*="color: #7d7d84"],
#chatterContainer [style*="color: #999999"] {
    color: var(--vf-color-text-sec) !important;
}

/* Visually hidden assistive label for unlabeled comment input field */
.cxcommentplaceholder label,
.feeditemcommentplaceholder label {
    position: relative;
}

.cxcommentplaceholder label::before,
.feeditemcommentplaceholder label::before {
    content: "Comment input field";
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* =============================================================================
5. CHATTER HIDDEN ELEMENTS
Elements hidden for ADA compliance or because they are unsupported features.
One display:none rule per element group. Hidden elements receive no additional
styling rules — contrast fixes, hover states, etc. are never visible to users
or assistive technology when an element is removed from the layout.
============================================================================= */

/* Like action links and "you like this" indicators - hidden because the like
   feature is unsupported and the elements had ADA contrast violations */
.commentactionlink.cxlikecommentaction,
.feedcommentactions .commentactionlink,
.cxallfeedactions .cxlikecommentaction,
a[onclick*="likeComment"],
a.feeditemactionlink.cxlikeitemaction,
.cxfeeditemlike span,
.cxfeeditemlike > span,
.feeditemlike span {
    display: none !important;
}

/* Feed action menu (More Actions dropdown) - hidden, unsupported feature.
   The actual rendered element is span.commentActionMenu inside .cxallfeedactions
   as confirmed via browser inspector. Multiple selectors included for
   resilience against nCino rendering variations. */
.feeditemActionMenu,
.cxfeeditemactionmenu,
span.commentActionMenu,
.cxallfeedactions .commentActionMenu,
button[title*="Show more actions"],
button[aria-label*="Show more actions"] {
    display: none !important;
}

/* Feed separator dot - decorative only, no accessible or visual value */
.feedcontainer .feeditemseparatingdot {
    display: none !important;
}

/* Sort dropdowns - hidden, ADA violations Tasks 6735 & 6732.
   Elements have no aria-label and cannot be remediated via CSS alone. */
#chatterContainer [id*="feedFilter"],
#chatterContainer .feedFilterDropDown,
#chatterContainer .feedFilter,
#chatterContainer [class*="feedFilter"],
#chatterContainer [aria-label*="Sort"],
#chatterContainer .zen-optgroup[role="radiogroup"],
#chatterContainer .combomenu-filter[role="radiogroup"],
#chatterContainer [role="radiogroup"] {
    display: none !important;
}

/* Sort dropdown chevron/arrow icons - children of hidden sort parents.
   Listed separately for clarity; display:none on parent is sufficient
   but this ensures icons do not flash before parent hides. */
#chatterContainer .slds-icon-utility-down,
#chatterContainer .slds-icon-utility-chevrondown,
#chatterContainer .slds-button__icon_dropdown,
#chatterContainer [class*="chevron"],
#chatterContainer [class*="arrow-down"],
#chatterContainer [class*="caret"],
#chatterContainer .dropdown-arrow,
#chatterContainer .select-arrow,
#chatterContainer .combobox-arrow {
    display: none !important;
}

/* Search components - hidden pending ADA remediation by nCino.
   Search was not visible in production; styling rules were dead code. */
.zen-searchBox,
.feedsupermenu,
.cxfeedsearch,
.feedSearch {
    display: none !important;
}

/* Tasks 6778 & 6782 - TEMPORARY: Hide menuitemradio elements missing
   aria-checked attribute. These are rendered by nCino's Chatter component
   and cannot be fixed in VF markup. Remove once nCino resolves the
   aria-checked attribute on sort menu items. */
a[role="menuitemradio"]:not([aria-checked]),
a[onclick*="toggleSort"][role="menuitemradio"] {
    display: none !important;
}

.feeditemActionMenu,
.cxfeeditemactionmenu,
.chatter-comment .cxfeeditemfooter,
button[title*="Show more actions"],
button[aria-label*="Show more actions"] {
    display: none !important;
    visibility: hidden !important;
}

/* =============================================================================
6. CHATTER PUBLISHERS & FORM ELEMENTS
Publisher container and textarea styling within the comment modal.
Ensures the post form fills the modal width and has accessible focus states.
============================================================================= */

/* Publisher container - full width within modal */
.chatter-publisher,
.publishercontainer,
.zen-publisher {
    width: 100% !important;
    max-width: none !important;
    padding: 12px !important;
    margin: 0 !important;
}

/* Post textarea - full width, accessible border, vertical resize only */
textarea[placeholder*="Share"],
textarea[id*="publisherTextArea"],
.chatter-textarea,
.feeditem textarea {
    width: 100% !important;
    max-width: none !important;
    min-height: 80px !important;
    padding: 8px !important;
    border: 1px solid var(--vf-color-gray-med) !important;
    border-radius: 4px !important;
    font-family: inherit !important;
    resize: vertical !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus state for post textarea */
textarea[placeholder*="Share"]:focus,
textarea[id*="publisherTextArea"]:focus {
    outline: 2px solid var(--vf-color-teal) !important;
    outline-offset: 1px !important;
    border-color: var(--vf-color-teal) !important;
}

/* =============================================================================
7. CHATTER DISABLED INTERACTIONS
Pointer event suppression for non-interactive chatter elements that render
as links or have default click behavior but serve no function in this context.
============================================================================= */

/* Non-interactive display elements - suppress pointer events */
.preamblecontainer.displayblock,
.cxfeeditemtextwrapper,
.taskInnerContent,
.actorentitylink,
.feeditemtimestamp,
.chatter-avatarRegular.feeditemusericon.chatter-externalIndicator.chatter-avatar {
    pointer-events: none !important;
}

/* Preamble and content comment action - not used, remove from layout */
.preamblecontainer.displayblock,
.cxcontentcommentaction {
    display: none !important;
}

/* =============================================================================
8. COMMENT MODAL SYSTEM
Positioning, sizing, flex layout, and focus states for the comment modal.

Note on modal selector scoping: The original implementation contained unscoped
.slds-modal__header, .slds-modal__container, and .slds-modal__footer rules
that were inadvertently affecting all nCino portal modals (Credit Report
Disclosure, etc.). These have been rescoped to #authId and #chatterContainer
to target the comment modal exclusively.
============================================================================= */

/* Comment modal inner content container - fixed center positioning */
#chatterContainer {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    padding: 0 !important;
    border-radius: 8px;
    border: 1px solid var(--vf-color-gray-med) !important;
    overflow: hidden !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    background: var(--vf-color-white) !important;
    transition: box-shadow 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    height: auto !important;
}

/* Elevated shadow on hover to indicate interactivity */
#chatterContainer:hover {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2) !important;
}

/* Teal focus ring when any element inside the modal has focus */
#chatterContainer:focus-within {
    box-shadow: 0 0 0 2px var(--vf-color-teal), 0 12px 48px rgba(0, 0, 0, 0.2) !important;
}

/* SLDS modal container - rescoped from unscoped .slds-modal__container.
   Flex column layout allows header, scrollable content, and footer to
   stack correctly at variable modal heights. */
#authId .slds-modal__container {
    height: auto !important;
    max-height: 95vh !important;
}

#authId .slds-modal__content {
    border-left: 1px solid #767676 !important;
    border-right: 1px solid #767676 !important;
}

/* SLDS modal header - rescoped from unscoped .slds-modal__header (Task 6751).
   Orchid background is the VelocityGO brand treatment for this modal header.
   Previously written without scope, which caused it to apply to all nCino
   portal modals including Credit Report Disclosure. */
#authId .slds-modal__header {
    z-index: 10001 !important;
    background-color: var(--vf-color-orchid) !important;
}

/* Modal header h2 text - forced white for contrast on orchid background.
   Originally written as an unscoped h2.slds-text-heading_medium rule which
   caused white text on white backgrounds elsewhere in the portal. Now scoped
   to this modal header only. */
#authId .slds-modal__header h2 {
    color: var(--vf-color-white) !important;
}

/* SLDS modal content area - rescoped from unscoped .slds-modal__content.
   Flex-grow fills remaining space between fixed header and footer. */
#authId .slds-modal__content {
    overflow-y: auto !important;
    padding: 15px !important;
}

/* SLDS modal footer - rescoped from unscoped .slds-modal__footer (Task 6750).
   Footer background and button are styled inline in the VF page markup. */
#chatterContainer .slds-modal__footer {
    align-items: center !important;
    position: relative;
    z-index: 10001 !important;
}

/* Close and search icons inside the modal - darken for contrast on light bg */
#chatterContainer .feedSearchIcon,
#chatterContainer .feedsupermenu .feedSearchClearIcon,
#chatterContainer .slds-icon_container svg,
#chatterContainer .close-icon,
#chatterContainer [class*="close"],
#chatterContainer [aria-label*="close" i] {
    filter: contrast(2) brightness(0.4) !important;
}

/* =============================================================================
9. COMMENT MODAL BUTTONS
Close button, share/submit buttons, and comment-specific link/button states.
============================================================================= */

/* Share and submit button base layout - visibility overrides nCino's default
   hidden state on publisher buttons before a user types in the textarea */
.publisherShareButton,
.zen-btn,
input[value="Share"],
button[title="Share"],
.chatter-publisher button[type="submit"],
.chatter-submit-btn {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: 8px 16px !important;
    margin: 8px 4px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    transition: background-color 0.2s ease !important;
    text-align: center !important;
}

/* Teal brand color on nCino's native share buttons */
.publisherShareButton,
.zen-btn,
input[value="Share"],
button[title="Share"],
.chatter-publisher button[type="submit"] {
    background-color: var(--vf-color-teal) !important;
    color: var(--vf-color-black) !important;
    border: 1px solid var(--vf-color-gray-med) !important;
    font-weight: bold !important;
}

/* Custom submit button injected by VF page JavaScript */
.chatter-submit-btn {
    background-color: var(--vf-color-teal) !important;
    color: var(--vf-color-white) !important;
    border: none !important;
    padding: 10px 20px !important;
    margin: 8px 0 !important;
}

/* Hover state - teal maintained (no color shift on hover by design) */
.publisherShareButton:hover,
.zen-btn:hover,
input[value="Share"]:hover,
button[title="Share"]:hover,
.chatter-submit-btn:hover {
    background-color: var(--vf-color-teal) !important;
}

/* Minimum touch target sizes for submit buttons inside the modal */
#chatterContainer .chatter-submit-btn,
#chatterContainer .chatter-publisher button[type="submit"],
#chatterContainer .publisherShareButton {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 44px !important;
    min-width: 44px !important;
}

/* Custom close button (.customCloseButton class set in VF page markup).
   Orchid border and text on white background matches modal header branding. */
.customCloseButton {
    position: relative;
    display: inline-block !important;
    padding: 8px 16px !important;
    background-color: var(--vf-color-white) !important;
    background-clip: border-box;
    border: 2px solid var(--vf-color-orchid) !important;
    border-radius: 4px;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-decoration: none;
    color: var(--vf-color-orchid) !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    user-select: none;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    min-width: 80px !important;
    min-height: 44px !important;
    text-align: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hover/focus state for close button outside of modal context */
.customCloseButton:hover,
.customCloseButton:focus {
    outline: 2px solid var(--vf-color-teal) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 3px var(--vf-color-teal) !important;
    background-color: var(--vf-color-gray-light) !important;
    border-color: var(--vf-color-teal) !important;
    color: var(--vf-color-teal) !important;
    background-position: inherit !important;
}

/* Active/pressed state for close button */
.customCloseButton:active {
    background-color: var(--vf-color-gray-light) !important;
    transform: translateY(1px) !important;
}

/* Minimum touch target for close button inside modal */
#chatterContainer .customCloseButton {
    min-height: 44px !important;
}

/* Enhanced focus/hover for close button on orchid footer background.
   White outline with black shadow ensures visibility against dark background. */
#chatterContainer .customCloseButton:focus,
#chatterContainer .customCloseButton:hover {
    outline: 4px solid var(--vf-color-white) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px var(--vf-color-black), 0 0 8px rgba(255, 255, 255, 0.8) !important;
    background-color: var(--vf-color-white) !important;
    border-color: var(--vf-color-black) !important;
    color: var(--vf-color-black) !important;
    transform: scale(1.02) !important;
}

/* Customer name links inside comment feed - teal, pointer-events re-enabled
   because actorentitylink pointer suppression in Section 7 is too broad */
#chatterContainer .comment-modal .customer-name,
#chatterContainer .comment-customer-name,
#chatterContainer [class*="comment"] .customer-name,
#chatterContainer .feeditem .actorentitylink a {
    color: var(--vf-color-teal) !important;
    font-weight: 600 !important;
    pointer-events: auto !important;
}

/* Comment links and add-comment buttons */
#chatterContainer .comment-link,
#chatterContainer a[class*="comment"],
#chatterContainer button[class*="add-comment"] {
    color: var(--vf-color-teal) !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

#chatterContainer .comment-link:hover,
#chatterContainer .comment-link:focus {
    color: var(--vf-color-teal) !important;
}

/* Comment button default state */
#chatterContainer button[class*="comment"]:not(:hover):not(:active) {
    background-color: var(--vf-color-white) !important;
    color: var(--vf-color-teal) !important;
    border: 2px solid var(--vf-color-teal) !important;
}

/* Comment button hover state */
#chatterContainer button[class*="comment"]:hover {
    background-color: var(--vf-color-gray-light) !important;
    color: var(--vf-color-teal) !important;
    border-color: var(--vf-color-teal) !important;
}

/* Comment button active/selected state */
#chatterContainer button[class*="comment"]:active,
#chatterContainer button[class*="comment"].active {
    background-color: var(--vf-color-teal) !important;
    color: var(--vf-color-white) !important;
    border-color: var(--vf-color-teal) !important;
}

/* =============================================================================
10. RESPONSIVE DESIGN
Responsive sizing rules scoped to the comment modal only.
Width and height are set to auto to allow JavaScript resize handlers
in the VF page to control dimensions via inline styles.
============================================================================= */

@media (min-width: 1025px) {
    #chatterContainer {
        width: auto;
        height: auto;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    #chatterContainer {
        width: auto;
        height: auto;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    #chatterContainer {
        width: auto;
        height: auto;
    }

    /* Slight right padding on feed content at narrow widths */
    .cxfeeditemcontent,
    .feeditemcontent {
        padding-right: 5%;
    }
}

@media (max-width: 480px) {
    #chatterContainer {
        width: auto;
        height: auto;
        border-radius: 4px;
    }

    /* Slight right padding on feed content at mobile widths */
    .cxfeeditemcontent,
    .feeditemcontent {
        padding-right: 5%;
    }
}