/**
 * De Hoeve Multipower B.V. - AI Product Finder Chatbot Styles
 *
 * Styles for:
 *   - .btn-ai-finder trigger button (hero sections)
 *   - #aiChatPanel slide-in panel
 *   - Chat bubbles, typing animation, links, error states
 *
 * Uses CSS custom properties defined in style.css. No external dependencies.
 *
 * @package DeHoeve
 * @version 1.0.0
 */

/* =============================================================================
   AI FINDER TRIGGER BUTTON
   Placed in hero sections of products.php and product.php.
   Outline-accent variant on dark background.
   ============================================================================= */

.btn-ai-finder {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem; /* Safari 14.1+ */
    padding:         0.625rem 1.25rem;
    border:          2px solid var(--color-accent, #a12122);
    border-radius:   var(--radius-full, 9999px);
    background:      transparent;
    color:           #ffffff;
    font-family:     var(--font-family, 'Manrope', sans-serif);
    font-size:       0.9375rem;
    font-weight:     600;
    line-height:     1;
    white-space:     nowrap;
    cursor:          pointer;
    text-decoration: none;
    transition:      background var(--transition, 200ms ease),
                     border-color var(--transition, 200ms ease),
                     color var(--transition, 200ms ease),
                     box-shadow var(--transition, 200ms ease);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select:         none;
}

.btn-ai-finder .btn-ai-icon {
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform 300ms ease;
}

.btn-ai-finder:hover,
.btn-ai-finder:focus,
.btn-ai-finder:focus-visible {
    background:    var(--color-accent, #a12122);
    border-color:  var(--color-accent, #a12122);
    color:         #ffffff;
    box-shadow:    0 0 0 3px rgba(161, 33, 34, 0.35);
    outline:       none;
}

.btn-ai-finder:hover .btn-ai-icon {
    transform: rotate(20deg) scale(1.15);
}

.btn-ai-finder:active {
    background:   var(--color-accent-hover, #8a1b1c);
    border-color: var(--color-accent-hover, #8a1b1c);
    transform:    scale(0.97);
}

/* ── Compact variant — for the header top bar (44px tall) ─────────────────── */
/* Smaller padding + font so the pill fits the top bar. Uses the proven
   .btn-ai-finder base; overrides only size-related properties.              */
.btn-ai-finder--compact {
    padding:   0.25rem 0.875rem;
    font-size: 0.8125rem;
}

.btn-ai-finder--compact .btn-ai-icon {
    font-size: 0.875rem;
}

/* ── Hero integration wrapper ─────────────────────────────────────────────── */

/* products.php: page-hero-content becomes a flex row on desktop */
.page-hero-inner {
    display:         -webkit-flex;
    display:         flex;
    -webkit-align-items:     flex-start;
    align-items:     flex-start;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    gap:             1.5rem;
    -webkit-flex-wrap: wrap;
    flex-wrap:       wrap;
}

.page-hero-text {
    flex:     1 1 auto;
    min-width: 0;
}

.page-hero-ai-action {
    flex:        0 0 auto;
    display:     flex;
    align-items: flex-end;
    padding-top: 0.25rem; /* optical alignment with h1 */
}

/* Mobile breadcrumb collapse — hide middle items, show ellipsis instead */
@media (max-width: 768px) {
    .breadcrumb-item--hidden-mobile {
        display: none;
    }
    .breadcrumb-item--ellipsis {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
    }
}

/* Desktop: ellipsis placeholder never shows */
@media (min-width: 769px) {
    .breadcrumb-item--ellipsis {
        display: none;
    }
}

/* product.php: hero header row = breadcrumb left, button right (legacy, kept for safety) */
.product-hero-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    flex-wrap:       wrap;
    margin-bottom:   1.25rem;
}

.product-hero-header .breadcrumb {
    margin-bottom: 0; /* override default bottom margin */
}

/* =============================================================================
   AI CHAT PANEL
   Slide-in panel from right side. 420px wide on desktop, full-width mobile.
   ============================================================================= */

/* Overlay / backdrop */
#aiChatOverlay {
    position:   fixed;
    top:        0;
    right:      0;
    bottom:     0;
    left:       0;
    background: rgba(0, 0, 0, 0.55);
    z-index:    1090;
    opacity:    0;
    visibility: hidden;
    transition: opacity 260ms ease, visibility 260ms ease;
    -webkit-tap-highlight-color: transparent;
}

#aiChatOverlay.is-visible {
    opacity:    1;
    visibility: visible;
}

/* Scoped box-sizing — ensures padding never adds to declared widths
   for any element inside the panel. Without this, textarea padding,
   footer padding, and card padding all contribute to horizontal overflow. */
#aiChatPanel,
#aiChatPanel * {
    box-sizing: border-box;
}

/* Panel shell */
#aiChatPanel {
    position:         fixed;
    top:              0;
    right:            0;
    bottom:           0;
    width:            420px;
    max-width:        100vw;
    z-index:          1091;
    display:          flex;
    flex-direction:   column;
    overflow:         hidden; /* clip any child that escapes panel bounds */
    background:       var(--color-gray-900, #111827);
    box-shadow:       none;
    transform:        translateX(100%);
    transition:       transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change:      transform;
    /* iOS in-app browser safe area — constant() for iOS 11.0, env() for iOS 11.2+ */
    padding-bottom:   constant(safe-area-inset-bottom, 0px);
    padding-bottom:   env(safe-area-inset-bottom, 0px);
}

#aiChatPanel.is-open {
    transform:  translateX(0);
    box-shadow: -6px 0 32px rgba(0, 0, 0, 0.45);
}

/* ── Panel header ─────────────────────────────────────────────────────────── */
.ai-panel-header {
    display:          flex;
    align-items:      center;
    gap:              0.75rem; /* Safari 14.1+ */
    padding:          1rem 1.25rem;
    background:       var(--color-gray-800, #1f2937);
    border-bottom:    1px solid var(--color-gray-700, #374151);
    flex-shrink:      0;
}

.ai-panel-icon {
    width:          2.25rem;
    height:         2.25rem;
    border-radius:  var(--radius-full, 9999px);
    background:     var(--color-accent, #a12122);
    display:        flex;
    align-items:    center;
    justify-content: center;
    flex-shrink:    0;
    color:          #ffffff;
    font-size:      0.9375rem;
}

.ai-panel-titles {
    flex: 1 1 auto;
    min-width: 0;
}

.ai-panel-title {
    font-size:   0.9375rem;
    font-weight: 700;
    color:       #ffffff;
    line-height: 1.2;
    margin:      0;
}

.ai-panel-subtitle {
    font-size:  0.75rem;
    color:      var(--color-gray-400, #9ca3af);
    margin:     0.125rem 0 0;
    line-height: 1.3;
}

.ai-panel-actions {
    display:     flex;
    align-items: center;
    gap:         4px;
    flex-shrink: 0;
}

.ai-panel-close,
.ai-panel-new {
    width:            2rem;
    height:           2rem;
    border:           none;
    background:       transparent;
    color:            var(--color-gray-400, #9ca3af);
    font-size:        1.125rem;
    cursor:           pointer;
    border-radius:    var(--radius, 8px);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    transition:       color var(--transition, 200ms ease),
                      background var(--transition, 200ms ease);
    -webkit-tap-highlight-color: transparent;
}

.ai-panel-new {
    font-size: 0.9rem;
}

.ai-panel-close:hover,
.ai-panel-close:focus,
.ai-panel-close:focus-visible,
.ai-panel-new:hover,
.ai-panel-new:focus,
.ai-panel-new:focus-visible {
    color:      #ffffff;
    background: var(--color-gray-700, #374151);
    outline:    none;
}

/* ── gap fallback for Safari < 14.1 ──────────────────────────────────────────
   flex gap not supported below Safari 14.1 / iOS 14.5.
   @supports not (gap) targets those browsers specifically.              ──── */
@supports not (gap: 1px) {
    .btn-ai-finder { gap: 0; }
    .btn-ai-finder .btn-ai-icon { margin-right: 0.5rem; }
    .ai-panel-header { gap: 0; }
    .ai-panel-header > * + * { margin-left: 0.75rem; }
    .ai-panel-titles { margin-right: auto; margin-left: 0.75rem; }
    .ai-panel-actions { margin-left: 0; }
    .ai-panel-actions { gap: 0; }
    .ai-panel-actions > * + * { margin-left: 4px; }
    .ai-input-row { gap: 0; }
    .ai-input-row > * + * { margin-left: 0.5rem; }
    .ai-chat-messages { gap: 0; }
    .ai-chat-messages > * + * { margin-top: 0.875rem; }
    .ai-typing { gap: 0; }
    .ai-typing span + span { margin-left: 4px; }
    .ai-card-specs { gap: 0; }
    .ai-card-specs > * { margin-right: 4px; margin-bottom: 4px; }
    .ai-product-card { gap: 0; }
    .ai-product-card > * + * { margin-top: 6px; }
    .ai-card-head { gap: 0; }
    .ai-card-head > * + * { margin-left: 6px; }
}

/* ── Chat messages area ───────────────────────────────────────────────────── */
.ai-chat-messages {
    flex:           1 1 auto;
    overflow-y:     auto;
    overflow-x:     hidden;
    padding:        1.25rem;
    display:        flex;
    flex-direction: column;
    gap:            0.875rem;
    /* Prevent any child from causing horizontal bleed */
    min-width:      0;
    /* Smooth scrolling */
    scroll-behavior: smooth;
    /* iOS momentum scrolling */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Custom scrollbar (Webkit/Blink) */
.ai-chat-messages::-webkit-scrollbar {
    width: 5px;
}
.ai-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}
.ai-chat-messages::-webkit-scrollbar-thumb {
    background:    var(--color-gray-700, #374151);
    border-radius: 10px;
}

/* ── Message bubbles ──────────────────────────────────────────────────────── */
.ai-msg {
    display:        flex;
    flex-direction: column;
    max-width:      88%;
    min-width:      0; /* prevent flex item from overflowing its container */
    animation:      aiMsgIn 220ms ease forwards;
}

@keyframes aiMsgIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ai-msg--bot {
    align-self:  flex-start;
    align-items: flex-start;
}

.ai-msg--user {
    align-self:  flex-end;
    align-items: flex-end;
}

.ai-msg-bubble {
    padding:       0.625rem 0.875rem;
    border-radius: var(--radius-lg, 12px);
    font-size:     0.875rem;
    line-height:   1.55;
    word-break:    break-word;
    overflow-wrap: break-word;
    overflow-wrap: anywhere; /* progressive enhancement over break-word */
    min-width:     0; /* flex child safety */
    max-width:     100%; /* never wider than its parent .ai-msg */
}

.ai-msg--bot .ai-msg-bubble {
    background:             var(--color-gray-800, #1f2937);
    color:                  var(--color-gray-100, #f3f4f6);
    border-bottom-left-radius: 4px;
}

.ai-msg--user .ai-msg-bubble {
    background:              var(--color-accent, #a12122);
    color:                   #ffffff;
    border-bottom-right-radius: 4px;
}

/* Lists within bot bubbles */
.ai-msg-bubble .chat-list {
    margin:      0.5rem 0 0.25rem 0;
    padding-left: 1.25rem;
    list-style:  disc;
}

.ai-msg-bubble .chat-list li {
    margin-bottom: 0.35rem;
    line-height:   1.5;
}

.ai-msg-bubble .chat-list li:last-child {
    margin-bottom: 0;
}

/* Links within bot bubbles */
.ai-msg-bubble .chat-link {
    color:           #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255,255,255,0.5);
    font-weight:     600;
    transition:      text-decoration-color var(--transition, 200ms ease);
}

.ai-msg--bot .ai-msg-bubble .chat-link:hover,
.ai-msg--bot .ai-msg-bubble .chat-link:focus {
    text-decoration-color: #ffffff;
}

/* ── Typing animation ─────────────────────────────────────────────────────── */
.ai-typing {
    display:    flex;
    align-items: center;
    gap:         4px;
    padding:    0.5rem 0.75rem;
    background: var(--color-gray-800, #1f2937);
    border-radius: var(--radius-lg, 12px);
    border-bottom-left-radius: 4px;
    width:      -webkit-fit-content;
    width:      fit-content;
}

.ai-typing span {
    width:            7px;
    height:           7px;
    border-radius:    50%;
    background:       var(--color-gray-400, #9ca3af);
    animation:        aiTypingDot 1.2s infinite ease-in-out;
    display:          block;
}

.ai-typing span:nth-child(1) { animation-delay: 0s; }
.ai-typing span:nth-child(2) { animation-delay: 0.18s; }
.ai-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes aiTypingDot {
    0%, 60%, 100% { transform: scale(0.8); opacity: 0.4; }
    30%            { transform: scale(1.2); opacity: 1; }
}

/* ── Error message ────────────────────────────────────────────────────────── */
.ai-msg-error .ai-msg-bubble {
    background: rgba(161, 33, 34, 0.18);
    color:      #fca5a5;
    border:     1px solid rgba(161, 33, 34, 0.4);
}

/* ── Input area ───────────────────────────────────────────────────────────── */
.ai-chat-footer {
    border-top:    1px solid var(--color-gray-700, #374151);
    padding:       0.875rem 1rem;
    background:    var(--color-gray-800, #1f2937);
    flex-shrink:   0;
}

/* Honeypot field — visually hidden from users.
   IMPORTANT: For full accessibility-tree exclusion, the HTML element
   MUST also carry the attributes:  tabindex="-1" aria-hidden="true" autocomplete="off"
   These are HTML attributes and cannot be set via CSS. */
.ai-honeypot {
    position:   absolute;
    left:       -9999px;
    width:      1px;
    height:     1px;
    overflow:   hidden;
    opacity:    0;
}

.ai-input-row {
    display:     flex;
    align-items: flex-end;
    gap:         0.5rem;
}

.ai-chat-input {
    flex:             1 1 auto;
    min-height:       44px;
    max-height:       7rem;
    padding:          0.5625rem 0.875rem;
    border:           1px solid var(--color-gray-700, #374151);
    border-radius:    var(--radius-lg, 12px);
    background:       var(--color-gray-900, #111827);
    color:            var(--color-gray-100, #f3f4f6);
    font-family:      var(--font-family, 'Manrope', sans-serif);
    font-size:        1rem;
    line-height:      1.5;
    resize:           none;
    overflow-y:       auto;
    transition:       border-color var(--transition, 200ms ease),
                      box-shadow var(--transition, 200ms ease);
    /* iOS in-app browsers */
    -webkit-appearance: none;
    appearance:       none;
}

.ai-chat-input::placeholder {
    color: var(--color-gray-400, #9ca3af);
}

.ai-chat-input:focus {
    outline:      none;
    border-color: var(--color-accent, #a12122);
    box-shadow:   0 0 0 3px rgba(161, 33, 34, 0.25);
}

.ai-chat-input:disabled {
    opacity: 0.5;
    cursor:  not-allowed;
}

.ai-send-btn {
    width:            44px;
    height:           44px;
    flex-shrink:      0;
    border:           none;
    background:       var(--color-accent, #a12122);
    color:            #ffffff;
    border-radius:    var(--radius-lg, 12px);
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        0.9375rem;
    transition:       background var(--transition, 200ms ease),
                      transform var(--transition, 200ms ease),
                      box-shadow var(--transition, 200ms ease);
    -webkit-tap-highlight-color: transparent;
}

.ai-send-btn:hover:not(:disabled),
.ai-send-btn:focus:not(:disabled),
.ai-send-btn:focus-visible:not(:disabled) {
    background:  var(--color-accent-hover, #8a1b1c);
    box-shadow:  0 0 0 3px rgba(161, 33, 34, 0.35);
    outline:     none;
}

.ai-send-btn:active:not(:disabled) {
    transform: scale(0.93);
}

.ai-send-btn:disabled {
    opacity: 0.45;
    cursor:  not-allowed;
}

.ai-char-count {
    font-size:  0.6875rem;
    color:      var(--color-gray-400, #9ca3af);
    text-align: right;
    margin-top: 0.25rem;
    line-height: 1;
}

.ai-char-count.is-near-limit {
    color: #fbbf24; /* amber warning */
}

.ai-char-count.is-at-limit {
    color: #f87171; /* red at limit */
}

/* ── Rate limit / session cap notice ─────────────────────────────────────── */
.ai-limit-notice {
    font-size:    0.8125rem;
    color:        var(--color-gray-400, #9ca3af);
    text-align:   center;
    padding:      0.625rem 0 0;
    line-height:  1.4;
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================= */

/* Tablet and smaller: panel takes full width */
@media (max-width: 480px) {
    #aiChatPanel {
        width: 100vw;
    }

    .page-hero-ai-action {
        width:      100%;
        padding-top: 1rem;
    }

    .btn-ai-finder {
        width:           100%;
        justify-content: center;
    }

    .product-hero-header {
        flex-direction: column;
        align-items:    flex-start;
        gap:            0.75rem;
    }
}

/* On mobile landscape and small devices: ensure panel doesn't obscure entire viewport */
@media (max-width: 767px) {
    .ai-chat-messages {
        padding: 1rem 0.875rem;
    }

    .ai-chat-footer {
        padding: 0.75rem 0.875rem;
    }
}

/* On desktop: hero inner layout is always flex row */
@media (min-width: 768px) {
    .page-hero-ai-action {
        padding-top: 0.75rem; /* align with page-hero-title top */
    }
}

/* =============================================================================
   PRODUCT INFO TAGS — brand badge + item code tag row
   ============================================================================= */

.product-info-tags {
    display:     flex;
    align-items: center;
    gap:         var(--spacing-2, 0.5rem);
    flex-wrap:   wrap;
}

/* Item code tag — styled as monospace pill to complement brand badge */
.product-info-sku-tag {
    display:         inline-block;
    font-family:     'Courier New', Courier, monospace;
    font-size:       var(--font-size-xs, 0.75rem);
    font-weight:     600;
    color:           var(--color-gray-600, #4b5563);
    background:      var(--color-gray-100, #f3f4f6);
    border:          1px solid var(--color-gray-200, #e5e7eb);
    border-radius:   var(--radius-full, 9999px);
    padding:         var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem);
    letter-spacing:  0.04em;
    white-space:     nowrap;
}

/* ── Product Cards ──────────────────────────────────────────────────────────── */
.ai-product-grid {
    display:               grid;
    /* min 150px keeps two columns comfortable in a 320px+ content area.
       The panel has 1.25rem (20px) padding each side = 40px consumed,
       so available content = panel width - 40px. At 320px phone: 280px ÷ 150px = 1.8 → 1 col.
       At 390px phone: 350px ÷ 150px = 2.3 → 2 cols. Correct in both cases. */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap:                   10px;
    margin-top:            12px;
    width:                 100%;
    /* Prevent grid from escaping its container */
    min-width:             0;
    max-width:             100%;
}

.ai-product-card {
    display:         flex;
    flex-direction:  column;
    gap:             6px;
    padding:         12px;
    background:      var(--color-gray-800, #1f2937);
    border:          1px solid rgba(255,255,255,0.10);
    border-radius:   8px;
    text-decoration: none;
    color:           inherit;
    min-width:       0; /* grid cell safety — prevents content from stretching cell */
    overflow:        hidden; /* clip any long SKU or name that would bleed */
    transition:      border-color 150ms ease, box-shadow 150ms ease;
}

.ai-product-card:hover,
.ai-product-card:focus {
    border-color: var(--color-accent, #a12122);
    box-shadow:   0 0 0 1px var(--color-accent, #a12122);
    outline:      none;
}

.ai-card-head {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             6px;
}

.ai-card-sku {
    font-family:  'JetBrains Mono', 'Courier New', monospace;
    font-size:    12px;
    font-weight:  600;
    color:        #ffffff;
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow:ellipsis;
}

.ai-card-brand {
    font-size:        10px;
    font-weight:      600;
    color:            var(--color-accent, #a12122);
    text-transform:   uppercase;
    letter-spacing:   0.04em;
    white-space:      nowrap;
    flex-shrink:      0;
}

.ai-card-name {
    font-size:     12px;
    line-height:   1.4;
    color:         rgba(255,255,255,0.85);
    display:       -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:      hidden;
}

.ai-card-specs {
    display:   flex;
    flex-wrap: wrap;
    gap:       4px;
}

.ai-spec {
    font-size:     10px;
    font-weight:   600;
    padding:       2px 6px;
    border-radius: 4px;
}

.ai-spec--v   { background: rgba(59,130,246,0.20);  color: #93c5fd; }
.ai-spec--ah  { background: rgba(34,197,94,0.20);   color: #86efac; }
.ai-spec--cca { background: rgba(168,85,247,0.20);  color: #d8b4fe; }
.ai-spec--w   { background: rgba(239,68,68,0.20);   color: #fca5a5; }
.ai-spec--t   { background: rgba(245,158,11,0.20);  color: #fcd34d; }

.ai-card-foot {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-top:      auto;
    padding-top:     6px;
    border-top:      1px solid rgba(255,255,255,0.07);
}

.ai-card-type {
    font-size:  10px;
    color:      rgba(255,255,255,0.40);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    overflow:   hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.ai-card-link {
    font-size: 11px;
    color:     rgba(255,255,255,0.35);
    flex-shrink: 0;
    transition: color 150ms ease;
}

.ai-product-card:hover .ai-card-link,
.ai-product-card:focus .ai-card-link {
    color: var(--color-accent, #a12122);
}

/* Single-column on very narrow viewports (e.g. 320px phones) */
@media (max-width: 360px) {
    .ai-product-grid {
        grid-template-columns: 1fr;
    }
}