/* OutdoorCushions.com AI Assistant — floating chat widget
   Scoped under #ocChatRoot so it never collides with site styles.
   Palette, panel chrome, and responsive breakpoints follow the existing
   /chatkit/mini.css ChatKit widget (light theme, gold accent) so this
   replacement feels identical to the user. */

#ocChatRoot, #ocChatRoot * { box-sizing: border-box; }
/* The site-wide stylesheet sets a { font: normal 14px 'Droid Sans'...;
   vertical-align: middle } which overrides inherited font-size and
   baseline. Reset both so links inside the widget sit on the same
   line and match the surrounding text. */
#ocChatRoot a { font: inherit; vertical-align: baseline; }

#ocChatRoot {
      /* Site tokens, mirrored here rather than imported: the widget also runs
         standalone at /chatbot/ and inside an iframe, where stylesheet.css is
         not loaded. Keep these in step with :root in stylesheet.css. */
      --oc-ink:#1b2a41;
      --oc-accent:#8a7250;
      --oc-accent-dk:#6d5a3e;
      --oc-navy:#1b2a41;
      --oc-sand:#f7f3ec;
      --oc-line:#ddd5c7;
      --oc-serif:"Georgia","Iowan Old Style","Times New Roman",Times,serif;
    /* No positioning on the wrapper itself — both children (#psChatLauncher
       and #psChatPanel) use `position: fixed` and pin themselves directly to
       the viewport, mirroring mini.html's sibling layout. */
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    color: #1b2a41;
}

/* --- Launcher button (mirrors #mini_chat_btn) --- */
#psChatLauncher {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1100;
    width: 60px;
    height: 60px;
    padding: 0;
    text-align: center;
    border: none;
    background: none;
    cursor: pointer;
}
#psChatLauncher .psLauncherBubble {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    background: none;
}
#psChatLauncher .psLauncherIcon {
    display: none;
    box-sizing: border-box;
    width: 100%;
    background: none;
}
#ocChatRoot.open #psChatLauncher { display: none; }

/* --- Chat panel (mirrors #mini_chat_wrapper) --- */
#psChatPanel {
    display: none;
    flex-direction: column;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2147483000;
    width: 100%;
    max-width: 380px;
    height: 620px;
    min-height: 620px;
    max-height: calc(100vh - 40px);
    padding: 5px;
    background: #ffffff;
    border: solid 3px #ddd5c7;
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    color: #1b2a41;
}
#ocChatRoot.open #psChatPanel { display: flex; }

/* --- Header --- */
#psChatHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #ffffff;
    color: #1b2a41;
    border-bottom: 1px solid #ebe5da;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
#psChatHeader .psHeaderLeft {
    display: flex;
    align-items: center;
    gap: 10px;
}
#psChatHeader .psBotIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: #ffffff;
}
#psChatHeader .psBotIcon img { width: 30px; height: 30px; display: block; }
#psChatHeader .title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: #1b2a41;
}
#psChatHeader .subtitle {
    font-size: 11px;
    color: #7a7a7a;
    font-weight: 400;
}
#psChatHeader .actions { display: flex; gap: 4px; }
#psChatHeader button {
    background: transparent;
    border: none;
    color: #666666;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#psChatHeader button:hover { background: #f2f2f2; color: #1b2a41; }
#psChatHeader svg { width: 16px; height: 16px; fill: currentColor; }

/* --- Message list --- */
#psChatLog {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#psChatLog::-webkit-scrollbar { width: 8px; }
#psChatLog::-webkit-scrollbar-track { background: transparent; }
#psChatLog::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 4px; }

.psMsg {
    max-width: 85%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.45;
    word-wrap: break-word;
}
.psMsg.user {
    align-self: flex-end;
    background: #8a7250;
    color: #ffffff;
    border-bottom-right-radius: 4px;
}
.psMsg.assistant {
    align-self: flex-start;
    background: #faf8f4;
    color: #1b2a41;
    border: 1px solid #ddd5c7;
    border-bottom-left-radius: 4px;
}
.psMsg.error {
    align-self: center;
    background: #fdecea;
    color: #a1251e;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #f5c2c0;
}
.psMsg p { margin: 0 0 8px 0; }
.psMsg p:last-child { margin-bottom: 0; }
.psMsg ul, .psMsg ol { margin: 4px 0 8px 20px; padding: 0; }
.psMsg li { margin: 2px 0; }
.psMsg a {
    color: #8a7250;
    text-decoration: underline;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.psMsg.user a { color: #ffffff; text-decoration: underline; }
.psMsg code {
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 13px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    color: #3a4a60;
}
.psMsg.user code { background: rgba(0, 0, 0, 0.25); color: #ffffff; }
.psMsg strong { font-weight: 600; }
.psMsg img {
    display: block;
    max-width: 100%;
    max-height: 260px;
    margin: 8px 0;
    border-radius: 6px;
    border: 1px solid #ddd5c7;
    background: #ffffff;
}
.psMsg table {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0;
    font-size: 13px;
}
.psMsg th, .psMsg td {
    border: 1px solid #ddd5c7;
    padding: 4px 7px;
    text-align: left;
}
.psMsg.user table th, .psMsg.user table td { border-color: rgba(255,255,255,0.3); }

/* Typing indicator */
.psTyping {
    display: flex;
    gap: 4px;
    padding: 12px 14px;
    align-self: flex-start;
    background: #faf8f4;
    border: 1px solid #ddd5c7;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
}
.psTyping span {
    width: 7px;
    height: 7px;
    background: #9ca3af;
    border-radius: 50%;
    animation: psBlink 1.2s infinite ease-in-out;
}
.psTyping span:nth-child(2) { animation-delay: 0.15s; }
.psTyping span:nth-child(3) { animation-delay: 0.3s; }
@keyframes psBlink {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-2px); }
}

/* --- Composer --- */
#psChatForm {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid #ebe5da;
    background: #ffffff;
}
#psChatInput {
    flex: 1;
    resize: none;
    max-height: 100px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    border: 1px solid #ddd5c7;
    border-radius: 10px;
    outline: none;
    color: #1b2a41;
    background: #ffffff;
}
#psChatInput::placeholder { color: #6d7889; }
#ocChatRoot:not(.fullpage) #psChatInput::placeholder { font-size: 13px; line-height: 17px; }
#psChatInput:focus {
    border-color: #8a7250;
    box-shadow: 0 0 0 3px rgba(173, 145, 48, 0.15);
}
#psChatSend {
    background: #8a7250;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 0 16px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    min-width: 60px;
}
#psChatSend:disabled { opacity: 0.5; cursor: not-allowed; }
#psChatSend:hover:not(:disabled) { background: #c7a93a; }

#psChatFooter {
    font: normal 11px Arial;
    color: #828282;
    text-align: center;
    padding: 4px 0;
    background: #ffffff;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
#psChatFooter a { color: #8a7250; text-decoration: none; }
#psChatFooter a:hover { text-decoration: underline; }

/* Greeting / suggestions */
.psSuggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
}
.psSuggestions button {
    background: #ffffff;
    border: 1px solid #ddd5c7;
    color: #3a4a60;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
}
.psSuggestions button:hover {
    background: #8a7250;
    color: #ffffff;
    border-color: #8a7250;
}

/* --- Standalone full-page view (dark palette, mirrors /chatkit/index.html) --- */
#ocChatRoot.fullpage {
    position: static;
    right: auto;
    bottom: auto;
    display: flex;
    justify-content: center;
    padding: 20px;
    color: #e8e3d9;
}
#ocChatRoot.fullpage #psChatLauncher { display: none; }
#ocChatRoot.fullpage #psChatPanel {
    display: flex;
    position: static;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 1200px;
    height: 800px;
    min-height: 0;
    max-height: none;
    margin: 0 auto;
    padding: 0;
    background: #1b2a41;
    border: none;
    border-radius: 10px;
    color: #e8e3d9;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

/* --- Responsive breakpoints (from mini.css) --- */
@media (orientation: portrait) and (max-width: 410px) {
    #psChatPanel {
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        max-width: none;
        min-height: 0;
        max-height: calc(100vh - 20px);
        height: calc(100vh - 20px);
    }
}
@media (orientation: portrait) and (max-height: 620px) {
    #psChatPanel { right: 10px; top: 10px; bottom: auto; max-height: calc(100vh - 20px); }
}
@media (orientation: landscape) and (max-height: 620px) {
    #psChatPanel { right: 10px; top: 10px; bottom: auto; max-height: calc(100vh - 20px); }
}

/*  Between the full 60px disc and the compact bar launcher below. 40px was too
    steep a drop straight off the full size, so this sits halfway.            */
@media all and (max-width: 1200px) {
    #psChatLauncher { right: 10px; bottom: 10px; width: 50px; height: 50px; }
}

@media (max-width: 900px), (orientation: landscape) and (max-height: 800px) {
    /*  Compact bar launcher, built to match toggle.svg rather than merely
        borrowing its color. The disc there is three things: a navy gradient
        (#2b3d59 -> #152437), a bronze ring set IN from the edge rather than on
        it (r 46.5 inside r 52, #8a7250 at .65), and a drop shadow. A single
        flat border reproduces none of that, so the ring is a ::before inset
        from the edge and the shadow throws up and left, which is where the
        light would fall on a control parked in the bottom-right corner.

        Flex centering rather than the base rule's text-align:center: the icon
        is an inline-block image and would otherwise sit on the text baseline
        and ride to the top of a button this short.                          */
    #psChatLauncher {
        position: fixed;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 51px;
        height: 41px;
        /*  The ring is inset 4px on the top and left and flush on the right and
            bottom, because those two edges run off the corner of the screen.
            Dead center of the area it encloses is therefore 2px right and 2px
            down of the button's own center; this pads to 4px, slightly past
            that, which sits better optically against the open corner.
            Flex centering halves the padding, so 6px here is a 3px shift.     */
        padding: 6px 0 0 6px;
        border: none;
        border-radius: 17px 0 0 0;
        background: linear-gradient(160deg, #2b3d59 0%, #152437 100%);
        box-shadow: -2px -2px 8px rgba(13, 24, 38, .38);
    }
    #psChatLauncher::before {
        content: "";
        position: absolute;
        inset: 4px 0 0 4px;
        border: 1px solid rgba(138, 114, 80, .65);
        border-right: 0;
        border-bottom: 0;
        border-radius: 13px 0 0 0;
        pointer-events: none;
    }
    #psChatLauncher .psLauncherBubble { display: none; }
    #psChatLauncher .psLauncherIcon { display: block; width: auto; max-width: 26px; max-height: 26px; }
}

@media (orientation: portrait) and (max-width: 568px) {
    /*  Commented out, not deleted. These restyled the launcher a second time
        below 568px - a different height, bottom offset and corner radius from
        the block above. With them off, the <=900px rules carry all the way
        down and the toggle looks the same at every size it appears at.
        Uncomment to give narrow portrait phones their own treatment again.

    #psChatLauncher {
        position: fixed;
        right: 0;
        bottom: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 51px;
        height: 45px;
        padding: 0 0 0 6px;
        border: none;
        border-radius: 17px 0 0 17px;
        background: linear-gradient(160deg, #2b3d59 0%, #152437 100%);
        box-shadow: -2px -2px 8px rgba(13, 24, 38, .38);
    }
    #psChatLauncher::before {
        content: "";
        position: absolute;
        inset: 4px 0 4px 4px;
        border: 1px solid rgba(138, 114, 80, .65);
        border-right: 0;
        border-radius: 13px 0 0 13px;
        pointer-events: none;
    }
    #psChatLauncher .psLauncherBubble { display: none; }
    #psChatLauncher .psLauncherIcon { display: block; width: auto; max-width: 28px; max-height: 28px; }
    */

    /*  Same launcher, a little smaller. Only the dimensions are overridden -
        the gradient, the inset bronze ring, the shadow and the corner shape
        all carry down from the <=900px block, so nothing about how it looks
        changes. Padding and ring inset step down with it to keep the icon
        sitting in the same place relative to the ring.                     */
    #psChatLauncher { width: 42px; height: 34px; padding: 4px 0 0 4px; border-radius: 14px 0 0 0; }
    #psChatLauncher::before { inset: 3px 0 0 3px; border-radius: 11px 0 0 0; }
    #psChatLauncher .psLauncherIcon { max-width: 22px; max-height: 22px; }

    /* On product pages, shift the launcher up 60px so it clears the sticky
       product-summary bar — matches the #mini_chat_btn.product rule in
       chat/mini.css. Host page opts in by setting data-product="true" on
       #ocChatRoot (see HtmlEngine.ChatbotWidget(true)). */
    #psChatLauncher.psProduct { height: 41px; bottom: 60px; border-radius: 17px 0 0 0; }
}

/* --- Fullpage dark-theme palette overrides (scoped to .fullpage only so the
       floating popup keeps its light chat/mini.css styling) --- */
#ocChatRoot.fullpage #psChatHeader {
    background: #1b2a41;
    color: #e8e3d9;
    border-bottom: 1px solid #3a4a60;
}
#ocChatRoot.fullpage #psChatHeader .psBotIcon { background: #1b2a41; }
#ocChatRoot.fullpage #psChatHeader .title { color: #ffffff; }
#ocChatRoot.fullpage #psChatHeader .subtitle { color: #6d7889; }
#ocChatRoot.fullpage #psChatHeader button { color: #e8e3d9; }
#ocChatRoot.fullpage #psChatHeader button:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

#ocChatRoot.fullpage #psChatLog { background: #132032; }
#ocChatRoot.fullpage #psChatLog::-webkit-scrollbar-thumb { background: #3d3d3d; }

#ocChatRoot.fullpage .psMsg.assistant {
    background: #1b2a41;
    color: #e8e3d9;
    border-color: #3a4a60;
}
#ocChatRoot.fullpage .psMsg.assistant code {
    background: rgba(255, 255, 255, 0.08);
    color: #ebe5da;
}
#ocChatRoot.fullpage .psMsg img {
    border-color: #3a4a60;
    background: #132032;
}
#ocChatRoot.fullpage .psMsg th,
#ocChatRoot.fullpage .psMsg td { border-color: #3a4a60; }
#ocChatRoot.fullpage .psMsg.error {
    background: rgba(204, 68, 68, 0.12);
    color: #f5b0a8;
    border-color: rgba(204, 68, 68, 0.5);
}

#ocChatRoot.fullpage .psTyping {
    background: #1b2a41;
    border-color: #3a4a60;
}
#ocChatRoot.fullpage .psTyping span { background: #6d7889; }

#ocChatRoot.fullpage #psChatForm {
    background: #132032;
    border-top: 1px solid #3a4a60;
}
#ocChatRoot.fullpage #psChatInput {
    background: #1a1a1a;
    color: #ebe5da;
    border-color: #3a4a60;
}
#ocChatRoot.fullpage #psChatInput::placeholder { color: #6d7889; }

#ocChatRoot.fullpage #psChatFooter {
    background: #132032;
    color: #6d7889;
}

#ocChatRoot.fullpage .psSuggestions button {
    background: transparent;
    border-color: #555555;
    color: #ebe5da;
}
#ocChatRoot.fullpage .psSuggestions button:hover {
    background: #8a7250;
    color: #ffffff;
    border-color: #8a7250;
}