/**
 * AI Commerce — Frontend Styles
 *
 * Covers: recommendations grid, review summary, comparison table,
 *         chatbot widget, semantic search results.
 *
 * @package AiCommerce
 */

/* -----------------------------------------------------------------------
   AI badges / shared utilities
   ----------------------------------------------------------------------- */
.aic-ai-badge {
	display:       inline-block;
	font-size:     11px;
	font-weight:   600;
	padding:       2px 6px;
	border-radius: 3px;
	background:    #f0f0f1;
	color:         #50575e;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* -----------------------------------------------------------------------
   Recommendations section — product cards rendered by WooCommerce loop
   ----------------------------------------------------------------------- */
.aic-recommendations { margin: 2em 0; }
.aic-recommendations__title { font-size: 1.4em; margin-bottom: 1em; }

/* -----------------------------------------------------------------------
   Review summary box
   ----------------------------------------------------------------------- */
.aic-review-summary {
	border:        1px solid #e0e0e0;
	border-radius: 6px;
	padding:       1.25em 1.5em;
	margin:        1.5em 0;
	background:    #fafafa;
}

.aic-review-summary__title {
	font-size:   1.1em;
	margin:      0 0 0.75em;
	display:     flex;
	align-items: center;
	gap:         8px;
}

.aic-review-summary__badge {
	font-size:   11px;
	font-weight: 600;
	padding:     2px 6px;
	border-radius: 3px;
	background:  #e5e5e5;
	color:       #666;
	text-transform: uppercase;
}

.aic-review-summary__sentiment {
	font-weight:   700;
	margin-bottom: 0.75em;
}
.aic-sentiment--positive { color: #2e7d32; }
.aic-sentiment--negative { color: #c62828; }
.aic-sentiment--mixed    { color: #e65100; }
.aic-sentiment--neutral  { color: #555; }

.aic-review-summary__columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }

@media ( max-width: 600px ) {
	.aic-review-summary__columns { grid-template-columns: 1fr; }
}

.aic-review-summary__pros h4,
.aic-review-summary__cons h4 { margin: 0 0 0.5em; font-size: 0.95em; }

.aic-review-summary__pros ul,
.aic-review-summary__cons ul { margin: 0; padding: 0 0 0 1.2em; }
.aic-review-summary__pros li { color: #2e7d32; }
.aic-review-summary__cons li { color: #c62828; }

.aic-review-summary__text { margin-top: 0.75em; font-style: italic; color: #555; }
.aic-review-summary__meta { margin-top: 0.5em; font-size: 0.85em; color: #888; }

.aic-review-summary--loading { background: #fafafa; }
.aic-review-summary__spinner {
	display:     flex;
	align-items: center;
	gap:         8px;
	color:       #646970;
	font-size:   14px;
	padding:     4px 0;
}

/* -----------------------------------------------------------------------
   Product comparison table
   ----------------------------------------------------------------------- */
.aic-comparison { margin: 2em 0; }
.aic-comparison__title { font-size: 1.4em; margin-bottom: 1em; }

.aic-comparison__table-wrapper { overflow-x: auto; }

.aic-comparison__table {
	width:           100%;
	border-collapse: collapse;
	font-size:       0.95em;
}

.aic-comparison__table th,
.aic-comparison__table td {
	padding:     0.75em 1em;
	border:      1px solid #e0e0e0;
	text-align:  center;
	vertical-align: middle;
}

.aic-comparison__table thead th { background: #f5f5f5; font-weight: 700; }
.aic-comparison__table thead th:first-child { text-align: left; }
.aic-comparison__table td:first-child { text-align: left; font-weight: 600; background: #fafafa; }

.aic-comparison__table thead th a {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             6px;
	text-decoration: none;
	color:           inherit;
}
.aic-comparison__table thead img { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; }

.aic-comparison__row--price td { font-weight: 700; }
.aic-comparison__row--score td { background: #f0f0f1; }
.aic-value-score { font-weight: 700; font-size: 1.1em; }

.aic-comparison__verdict {
	margin-top:    1em;
	padding:       1em 1.25em;
	background:    #e8f5e9;
	border-radius: 6px;
	border-left:   4px solid #2e7d32;
}
.aic-comparison__winner { margin: 0 0 0.5em; }
.aic-comparison__reason { margin: 0; color: #444; font-style: italic; }

.aic-comparison__disclaimer { margin-top: 0.75em; text-align: right; }

/* -----------------------------------------------------------------------
   Chatbot widget
   ----------------------------------------------------------------------- */
#aic-chatbot-root {
	position: fixed;
	bottom:   24px;
	right:    24px;
	z-index:  99999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.aic-chat-toggle {
	width:         56px;
	height:        56px;
	border-radius: 50%;
	background:    #0073aa;
	border:        none;
	cursor:        pointer;
	box-shadow:    0 4px 12px rgba(0,0,0,.25);
	display:       flex;
	align-items:   center;
	justify-content: center;
	transition:    transform .2s, background .2s;
	padding: 0 !important;
}
.aic-chat-toggle:hover  { background: #006291; transform: scale(1.07); }
.aic-chat-toggle:focus  { outline: 2px solid #fff; outline-offset: 2px; }
.aic-chat-toggle svg    { width: 28px; height: 28px; fill: #fff; }

.aic-chat-panel {
	display:       none;
	position:      absolute;
	bottom:        68px;
	right:         0;
	width:         340px;
	max-width:     calc(100vw - 32px);
	background:    #fff;
	border-radius: 12px;
	box-shadow:    0 8px 32px rgba(0,0,0,.18);
	overflow:      hidden;
	flex-direction: column;
}

.aic-chat--open .aic-chat-panel { display: flex; }

.aic-chat-header {
	background:      #0073aa;
	color:           #fff;
	padding:         12px 16px;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	font-weight:     600;
}

.aic-chat-close {
	background:  transparent;
	border:      none;
	color:       #fff;
	font-size:   20px;
	cursor:      pointer;
	line-height: 1;
	padding:     0 4px;
}
.aic-chat-close:hover { opacity: .8; }

.aic-chat-messages {
	flex:       1;
	padding:    12px 16px;
	overflow-y: auto;
	max-height: 320px;
	display:    flex;
	flex-direction: column;
	gap:        8px;
}

.aic-chat-message {
	max-width:     80%;
	padding:       8px 12px;
	border-radius: 12px;
	font-size:     14px;
	line-height:   1.5;
	word-break:    break-word;
}
.aic-chat-message--user      { align-self: flex-end; background: #0073aa; color: #fff; border-bottom-right-radius: 4px; }
.aic-chat-message--assistant { align-self: flex-start; background: #f0f0f1; color: #1d2327; border-bottom-left-radius: 4px; }

.aic-chat-message--assistant ul { margin: 6px 0 4px; padding-left: 18px; }
.aic-chat-message--assistant li { margin-bottom: 4px; }

.aic-chat-link {
	color: #0073aa;
	text-decoration: underline;
}

.aic-chat-buy-btn {
	display:         inline-block;
	margin-top:      8px;
	padding:         7px 18px;
	background:      #0073aa;
	color:           #fff !important;
	font-size:       13px;
	font-weight:     600;
	border-radius:   4px;
	text-decoration: none;
	transition:      background 0.15s;
}
.aic-chat-buy-btn:hover {
	background:      #005a87;
	color:           #fff !important;
	text-decoration: none;
}

.aic-chat-form {
	display:    flex;
	padding:    10px 12px;
	gap:        8px;
	border-top: 1px solid #e0e0e0;
}

.aic-chat-input {
	flex:          1;
	border:        1px solid #c8c8c8;
	border-radius: 20px;
	padding:       8px 14px;
	font-size:     14px;
	outline:       none;
}
.aic-chat-input:focus { border-color: #0073aa; }

.aic-chat-send {
	background:    #0073aa;
	color:         #fff;
	border:        none;
	border-radius: 20px;
	padding:       8px 16px;
	cursor:        pointer;
	font-size:     14px;
	font-weight:   600;
	transition:    background .2s;
}
.aic-chat-send:hover   { background: #006291; }
.aic-chat-send:disabled { opacity: .6; cursor: default; }

/* -----------------------------------------------------------------------
   Semantic search live results
   ----------------------------------------------------------------------- */
.aic-search-results {
	position:   absolute;
	top:        100%;
	left:       0;
	right:      0;
	background: #fff;
	border:     1px solid #dcdcde;
	border-top: none;
	list-style: none;
	margin:     0;
	padding:    0;
	z-index:    9999;
	box-shadow: 0 4px 12px rgba(0,0,0,.12);
	border-radius: 0 0 6px 6px;
	max-height: 400px;
	overflow-y: auto;
}

.aic-search-form {
	position: relative;
}

.aic-search-input-wrap {
	position: relative;
}

.aic-search-result a {
	display:     flex;
	align-items: center;
	gap:         10px;
	padding:     8px 12px;
	text-decoration: none;
	color:       inherit;
	transition:  background .15s;
}
.aic-search-result a:hover { background: #f6f7f7; }

.aic-search-result img           { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.aic-search-result__name         { flex: 1; font-size: 14px; font-weight: 600; }
.aic-search-result__price        { font-size: 13px; color: #555; white-space: nowrap; }

/* -----------------------------------------------------------------------
   Image Search widget
   ----------------------------------------------------------------------- */
.aic-img-search-wrap {
	position:    relative;
	display:     inline-flex;
	align-items: stretch;
	width:       100%;
}

.aic-img-search-wrap input[type="search"],
.aic-img-search-wrap input[name="s"] {
	flex:          1;
	border-radius: 4px 0 0 4px !important;
	border-right:  none !important;
	min-width:     0;
}

.aic-img-search-btn {
	flex-shrink:     0;
	width:           42px;
	background:      #0073aa;
	border:          1px solid #0073aa;
	border-left:     none;
	border-radius:   0 4px 4px 0;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         0;
	transition:      background 0.2s;
	position:        relative;
}
.aic-img-search-btn:hover  { background: #005a87; border-color: #005a87; }
.aic-img-search-btn:focus  { outline: 2px solid #005a87; outline-offset: 1px; }
.aic-img-search-btn:disabled { opacity: 0.6; cursor: default; }

.aic-img-search-btn svg {
	width:  18px;
	height: 18px;
	color:  #fff;
	display: block;
}

/* Hide svg and show spinner while loading */
.aic-img-search-btn--loading svg { display: none; }
.aic-img-search-btn__spinner { display: none; }
.aic-img-search-btn--loading .aic-img-search-btn__spinner {
	display:       block;
	width:         16px;
	height:        16px;
	border:        2px solid rgba(255,255,255,0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation:     aic-spin 0.7s linear infinite;
}

/* Preview panel */
.aic-img-preview-panel {
	position:    absolute;
	top:         calc(100% + 4px);
	left:        0;
	right:       0;
	background:  #fff;
	border:      1px solid #dcdcde;
	border-radius: 6px;
	box-shadow:  0 4px 12px rgba(0,0,0,.12);
	z-index:     9999;
	padding:     10px 12px;
	display:     flex;
	align-items: center;
	gap:         10px;
	font-size:   13px;
	color:       #555;
}
.aic-img-preview-panel img {
	width:         48px;
	height:        48px;
	object-fit:    cover;
	border-radius: 4px;
	flex-shrink:   0;
}
.aic-img-preview-panel__error { color: #c62828; }

/* Results dropdown */
.aic-img-results {
	position:      absolute;
	top:           calc(100% + 4px);
	left:          0;
	right:         0;
	background:    #fff;
	border:        1px solid #dcdcde;
	border-radius: 6px;
	box-shadow:    0 4px 12px rgba(0,0,0,.12);
	z-index:       9999;
	max-height:    400px;
	overflow-y:    auto;
}

.aic-img-results__title {
	font-size:   11px;
	font-weight: 600;
	color:       #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin:      0;
	padding:     8px 12px 4px;
}

.aic-img-results__empty {
	padding:   14px 12px;
	margin:    0;
	font-size: 13px;
	color:     #888;
}

.aic-img-results__list {
	list-style: none;
	margin:     0;
	padding:    0;
}

.aic-img-results__list li a {
	display:         flex;
	align-items:     center;
	gap:             10px;
	padding:         8px 12px;
	text-decoration: none;
	color:           inherit;
	transition:      background 0.15s;
	font-size:       14px;
}
.aic-img-results__list li a:hover { background: #f6f7f7; }

.aic-img-results__list img {
	width:         40px;
	height:        40px;
	object-fit:    cover;
	border-radius: 4px;
	flex-shrink:   0;
}
.aic-img-results__no-img {
	width:         40px;
	height:        40px;
	background:    #f0f0f1;
	border-radius: 4px;
	flex-shrink:   0;
	display:       block;
}
.aic-img-results__name  { flex: 1; font-weight: 600; }
.aic-img-results__price { font-size: 13px; color: #555; white-space: nowrap; }
.aic-img-results__error { padding: 12px 14px; margin: 0; font-size: 13px; color: #c62828; }

/* Standalone shortcode widget */
.aic-img-search-standalone {
	margin: 1.5em 0;
}

.aic-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.aic-img-search-standalone__label {
	display:       block;
	font-weight:   600;
	margin-bottom: 10px;
	font-size:     15px;
}

.aic-img-search-standalone__body {
	position: relative;
}

.aic-img-upload-zone {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             10px;
	border:          2px dashed #c3c4c7;
	border-radius:   8px;
	padding:         32px 20px;
	cursor:          pointer;
	text-align:      center;
	color:           #646970;
	font-size:       14px;
	transition:      border-color 0.2s, background 0.2s;
	background:      #f9f9f9;
	min-height:      140px;
}
.aic-img-upload-zone:hover,
.aic-img-upload-zone--over {
	border-color: #0073aa;
	background:   #f0f8ff;
	color:        #0073aa;
}
.aic-img-upload-zone--loading {
	opacity: 0.6;
	pointer-events: none;
}

.aic-img-upload-zone svg {
	width:  40px;
	height: 40px;
	stroke: currentColor;
	opacity: 0.6;
}

.aic-img-upload-zone__preview {
	width:         80px;
	height:        80px;
	object-fit:    cover;
	border-radius: 6px;
}

.aic-img-upload-zone__searching {
	font-size:  13px;
	color:      #0073aa;
	font-weight: 600;
}

.aic-img-search-btn {
	position: relative;
	overflow: hidden;
}

.aic-img-search-btn__preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* Standalone results — shown below the zone, not as a dropdown */
#aic-img-search-results-standalone {
	margin-top:    12px;
	border:        1px solid #dcdcde;
	border-radius: 6px;
	background:    #fff;
	box-shadow:    0 2px 8px rgba(0,0,0,.08);
}

/* Search loader spinner */
.aic-search-loader {
	position:      absolute;
	top:           50%;
	right:         12px;
	transform:     translateY(-50%);
	width:         18px;
	height:        18px;
	border:        2px solid #e0e0e0;
	border-top-color: #0073aa;
	border-radius: 50%;
	animation:     aic-spin 0.7s linear infinite;
	pointer-events: none;
}

.aic-search-input--loading {
	padding-right: 38px !important;
}

@keyframes aic-spin {
	to { transform: translateY(-50%) rotate(360deg); }
}

/* -----------------------------------------------------------------------
   Semantic Search — standalone shortcode widget [ai_semantic_search]
   ----------------------------------------------------------------------- */
.aic-ss-widget {
	margin: 1.5em 0;
}

.aic-ss-form {
	display:     flex;
	align-items: stretch;
	width:       100%;
}

.aic-ss-widget .aic-ss-input-wrap {
	flex:      1;
	min-width: 0;
	margin-right: 10px;
	/* JS adds position:relative here when loader is injected */
}

.aic-ss-input {
	display:       block;
	width:         100%;
	padding:       10px 38px 10px 14px; /* right pad reserves space for loader spinner */
	border:        1px solid #dcdcde;
	border-right:  none;
	border-radius: 4px 0 0 4px;
	font-size:     15px;
	line-height:   1.4;
	background:    #fff;
	color:         inherit;
	box-sizing:    border-box;
	outline:       none;
	transition:    border-color .15s;
}
.aic-img-search-wrap .aic-ss-input{
	line-height: 40px;
}
.aic-ss-input:focus {
	border-color: #0073aa;
	box-shadow:   none;
}

.aic-ss-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	padding:         10px 18px;
	background:      #0073aa;
	color:           #fff;
	border:          1px solid #0073aa;
	border-radius:   4px 4px ;
	font-size:       14px;
	font-weight:     600;
	cursor:          pointer;
	white-space:     nowrap;
	flex-shrink:     0;
	line-height:     1;
	transition:      background .15s, border-color .15s;
}

.aic-ss-btn:hover {
	background:    #005177;
	border-color:  #005177;
	color:         #fff;
}

.aic-ss-btn svg {
	width:      16px;
	height:     16px;
	flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   Product Comparison — "Add to Compare" button
   ----------------------------------------------------------------------- */
.aic-compare-btn {
	display:     inline-flex;
	align-items: center;
	gap:         5px;
	font-size:   13px;
	margin-top:  6px;
	padding:     5px 10px;
	background:  #fff;
	border:      1px solid #ccc;
	border-radius: 4px;
	cursor:      pointer;
	transition:  background 0.15s, border-color 0.15s, color 0.15s;
	color:       #555;
	width:       100%;
	justify-content: center;
}
.aic-compare-btn:hover {
	border-color: #0073aa;
	color:        #0073aa ;
}
.aic-compare-btn--active {
	background:   #0073aa;
	border-color: #0073aa;
	color:        #fff;
}
.aic-compare-btn--active:hover {
	background:   #005a87;
	border-color: #005a87;
	color:        #fff;
}
.aic-compare-btn__icon { font-size: 15px; line-height: 1; }

/* -----------------------------------------------------------------------
   Product Comparison — sticky tray
   ----------------------------------------------------------------------- */
.aic-compare-tray {
	position:   fixed;
	bottom:     0;
	left:       0;
	right:      0;
	z-index:    99990;
	background: #1d2327;
	color:      #fff;
	padding:    10px 16px;
	box-shadow: 0 -4px 16px rgba(0,0,0,.25);
	transform:  translateY(100%);
	transition: transform 0.3s ease;
}
.aic-compare-tray--visible { transform: translateY(0); }

.aic-compare-tray__inner {
	max-width:   1200px;
	margin:      0 auto;
	display:     flex;
	align-items: center;
	gap:         12px;
	flex-wrap:   wrap;
}

.aic-compare-tray__products {
	display:  flex;
	align-items: center;
	gap:      8px;
	flex:     1;
	flex-wrap: wrap;
}

.aic-tray-product {
	display:      flex;
	align-items:  center;
	gap:          6px;
	background:   rgba(255,255,255,0.1);
	border-radius: 4px;
	padding:      5px 8px;
	font-size:    13px;
	max-width:    160px;
}
.aic-tray-product img {
	width:         32px;
	height:        32px;
	object-fit:    cover;
	border-radius: 3px;
	flex-shrink:   0;
}
.aic-tray-product__name {
	flex:          1;
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
	font-size:     12px;
}
.aic-tray-product__remove {
	background:  transparent;
	border:      none;
	color:       rgba(255,255,255,0.6);
	cursor:      pointer;
	font-size:   14px;
	line-height: 1;
	padding:     0 2px;
	flex-shrink: 0;
}
.aic-tray-product__remove:hover { color: #fff; }

.aic-compare-tray__actions {
	display:     flex;
	align-items: center;
	gap:         8px;
	flex-shrink: 0;
}

.aic-compare-now-btn {
	display:      inline-flex;
	align-items:  center;
	gap:          6px;
	background:   #0073aa;
	color:        #fff !important;
	border:       none;
	border-radius: 4px;
	padding:      8px 16px;
	font-size:    14px;
	font-weight:  600;
	cursor:       pointer;
	transition:   background 0.2s;
}
.aic-compare-now-btn:hover:not(:disabled) { background: #005a87; }
.aic-compare-now-btn:disabled { opacity: 0.5; cursor: default; }
.aic-compare-now-btn__count {
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	background:    rgba(255,255,255,0.25);
	border-radius: 50%;
	width:         20px;
	height:        20px;
	font-size:     12px;
	font-weight:   700;
}

.aic-compare-clear-btn {
	background:  transparent;
	border:      1px solid rgba(255,255,255,0.3);
	color:       rgba(255,255,255,0.8);
	border-radius: 4px;
	padding:     7px 12px;
	font-size:   13px;
	cursor:      pointer;
	transition:  border-color 0.15s, color 0.15s;
}
.aic-compare-clear-btn:hover {
	border-color: #fff;
	color:        #fff;
}

/* -----------------------------------------------------------------------
   Product Comparison — modal
   ----------------------------------------------------------------------- */
.aic-compare-modal {
	display: none;
}
.aic-compare-modal--open {
	display:         flex;
	align-items:     flex-start;
	justify-content: center;
	position:        fixed;
	inset:           0;
	z-index:         99999;
	overflow-y:      auto;
	padding:         24px 16px;
}

body.aic-compare-modal-open {
	overflow: hidden;
}

.aic-compare-modal__backdrop {
	position: fixed;
	inset:    0;
	background: rgba(0,0,0,.55);
}

.aic-compare-modal__dialog {
	position:      relative;
	background:    #fff;
	border-radius: 8px;
	box-shadow:    0 8px 40px rgba(0,0,0,.25);
	width:         100%;
	max-width:     900px;
	overflow:      hidden;
	z-index:       1;
}

.aic-compare-modal__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         14px 20px;
	background:      #f6f7f7;
	border-bottom:   1px solid #e0e0e0;
}
.aic-compare-modal__title {
	margin:    0;
	font-size: 1.1em;
}
.aic-compare-modal__close {
	background:  transparent;
	border:      none;
	font-size:   18px;
	cursor:      pointer;
	color:       #646970;
	line-height: 1;
	padding:     2px 6px;
	border-radius: 3px;
	transition:  background 0.15s;
}
.aic-compare-modal__close:hover { background: #e0e0e0; color: #1d2327; }

.aic-compare-modal__body {
	padding: 20px;
}

.aic-compare-modal__loading {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             12px;
	padding:         48px 20px;
	color:           #646970;
}
.aic-compare-modal__loading p { margin: 0; }

.aic-compare-modal__error {
	padding:       20px;
	background:    #fef2f2;
	border-radius: 6px;
	color:         #c62828;
}
.aic-compare-modal__error p { margin: 0; }

@media ( max-width: 640px ) {
	.aic-compare-tray__inner { flex-direction: column; align-items: stretch; }
	.aic-compare-tray__actions { justify-content: flex-end; }
	.aic-tray-product { max-width: none; }
}