:root {--primary-color: #424242;--secondary-color: #666666;--accent-color: #2196f3;--accent-light: #e3f2fd;--background-color: #f5f5f5;--secondary-background-color: #f9f9f9;--text-color: #333;--text-secondary: #666;--border-color: #ddd;--shadow-color: rgba(0, 0, 0, 0.1);--border-radius: 8px;--transition: all 0.3s ease;--font-family: sans-serif;--header-height: 75px;--main-offset-top: 0;--main-offset-bottom: 0;--user-message-bg: #2196f3;--user-message-text: white;--ai-message-bg: #f0f0f0;--ai-message-text: #333} .plants-theme {--primary-color: #6945af;--secondary-color: #8b7cc8;--accent-color: #6945af;--accent-light: #f3f0ff;--background-color: #fbf7f4;--error-color: #D98185;--secondary-background-color: rgb(244, 235, 228);--text-color: #241a2d;--text-secondary: #8b7cc8;--border-color: #e8e0db;--shadow-color: rgba(105, 69, 175, 0.1);--font-family: 'Raleway', sans-serif;--header-height: 75px;--main-offset-top: -3rem;--main-offset-bottom: -6rem;--user-message-bg: #6945af;--user-message-text: white;--ai-message-bg: #f8f5ff;--ai-message-text: #241a2d} .supplements-theme {--primary-color: #1976d2;--secondary-color: #2196f3;--accent-color: #03a9f4;--accent-light: #e1f5fe;--background-color: #e3f2fd;--secondary-background-color: #f1f8fd;--text-color: #1976d2;--text-secondary: #2196f3;--border-color: #bbdefb;--shadow-color: rgba(25, 118, 210, 0.1);--main-offset-top: 0;--main-offset-bottom: 0;--user-message-bg: #03a9f4;--user-message-text: white;--ai-message-bg: #f1f8fd;--ai-message-text: #1976d2} .generic-theme {--primary-color: #424242;--secondary-color: #666666;--accent-color: #2196f3;--accent-light: #e3f2fd;--background-color: #f5f5f5;--secondary-background-color: #f9f9f9;--text-color: #333;--text-secondary: #666;--border-color: #ddd;--shadow-color: rgba(0, 0, 0, 0.1);--main-offset-top: 0;--main-offset-bottom: 0;--user-message-bg: #2196f3;--user-message-text: white;--ai-message-bg: #f0f0f0;--ai-message-text: #333} @layer chat-products {.product-card {background: white;border-radius: var(--border-radius);box-shadow: 0 2px 8px var(--shadow-color);overflow: hidden;transition: var(--transition);position: relative;display: flex;flex-direction: column;height: 100%} .product-card:hover {transform: translateY(-4px);box-shadow: 0 4px 16px var(--shadow-color)} .product-card.list {flex-direction: row;height: auto} .product-card.compact {height: auto} .product-image-container {position: relative;overflow: hidden} .product-image {width: 100%;height: 200px;object-fit: cover;transition: var(--transition)} .product-card.list .product-image {width: 200px;height: 150px} .product-card.compact .product-image {height: 150px} .product-image:hover {transform: scale(1.05)} .availability-indicator {position: absolute;top: 8px;right: 8px;padding: 4px 8px;border-radius: 16px;font-size: 12px;font-weight: 500;color: white} .availability-indicator.available {background-color: var(--accent-color)} .availability-indicator.unavailable {background-color: #f44336} .product-info {padding: 16px;flex: 1;display: flex;flex-direction: column} .product-title {font-size: 18px;font-weight: 600;color: var(--primary-color);margin: 0 0 8px 0;line-height: 1.3} .product-description {color: var(--text-color);font-size: 14px;line-height: 1.4;margin: 0 0 12px 0;opacity: 0.8} .product-card.compact .product-description {display: none} .price-container {margin: 0 0 12px 0} .price-display {font-size: 20px;font-weight: 700;color: var(--primary-color);margin-bottom: 8px} .variant-selector {width: 100%;padding: 8px;border: 1px solid var(--border-color);border-radius: var(--border-radius);font-size: 14px;background: white} .attributes-container {margin: 0 0 12px 0} .attributes-container.compact {margin: 0 0 8px 0} .attribute-category {margin-bottom: 12px} .attributes-container.compact .attribute-category {margin-bottom: 4px} .category-title {font-size: 14px;font-weight: 600;color: var(--primary-color);margin: 0 0 6px 0} .attributes-list {display: flex;flex-wrap: wrap;gap: 8px} .attributes-container.compact .attributes-list {gap: 4px} .attribute-item {display: flex;align-items: center;gap: 4px;padding: 4px 8px;background: var(--background-color);border-radius: 16px;font-size: 12px;color: var(--text-color)} .attribute-item.compact {padding: 2px 6px;font-size: 11px} .attribute-icon {font-size: 14px} .attribute-item.compact .attribute-icon {font-size: 12px} .attribute-label {font-weight: 500;color: var(--primary-color)} .attribute-value {color: var(--text-color)} .seasonal-container {margin: 0 0 12px 0} .seasonal-indicator {display: flex;align-items: center;gap: 6px;padding: 6px 12px;border-radius: 20px;font-size: 12px;font-weight: 500;margin-bottom: 6px} .seasonal-indicator.flowering {background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));color: white} .seasonal-indicator.non-flowering {background: var(--background-color);color: var(--text-color)} .flowering-badge {background: rgba(255, 255, 255, 0.2);padding: 2px 6px;border-radius: 12px;font-size: 10px;margin-left: 6px} .seasonal-advice {font-size: 12px;color: var(--text-color);opacity: 0.8;font-style: italic} .tags-container {margin: 0 0 12px 0} .tags-label {font-size: 12px;font-weight: 500;color: var(--primary-color);margin-right: 6px} .tags-list {display: flex;flex-wrap: wrap;gap: 4px;margin-top: 4px} .tag-item {background: var(--secondary-color);color: white;padding: 2px 8px;border-radius: 12px;font-size: 11px;font-weight: 500} .product-actions {display: flex;gap: 8px;margin-top: auto} .btn {padding: 8px 16px;border: none;border-radius: var(--border-radius);font-size: 14px;font-weight: 500;cursor: pointer;transition: var(--transition);text-align: center;text-decoration: none;display: inline-flex;align-items: center;justify-content: center;flex: 1} .btn:hover {transform: translateY(-1px)} .btn:active {transform: translateY(0)} .btn-primary {background: var(--primary-color);color: white} .btn-primary:hover {background: color-mix(in srgb, var(--primary-color) 80%, black)} .btn-primary:disabled {background: #ccc;cursor: not-allowed;transform: none} .btn-secondary {background: transparent;color: var(--primary-color);border: 1px solid var(--primary-color)} .btn-secondary:hover {background: var(--primary-color);color: white} .product-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap: 24px;padding: 24px} .product-list {display: flex;flex-direction: column;gap: 16px;padding: 24px} .search-interface {max-width: 1200px;margin: 0 auto;padding: 24px} .search-header {display: flex;align-items: center;gap: 16px;margin-bottom: 24px} .search-input-container {position: relative;flex: 1} .search-input {width: 100%;padding: 12px 48px 12px 16px;border: 2px solid var(--border-color);border-radius: var(--border-radius);font-size: 16px;background: white;transition: var(--transition)} .search-input:focus {outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 3px rgba(var(--primary-color), 0.1)} .search-button {position: absolute;right: 4px;top: 4px;bottom: 4px;background: var(--primary-color);color: white;border: none;border-radius: calc(var(--border-radius) - 2px);padding: 0 12px;cursor: pointer;transition: var(--transition)} .search-button:hover {background: color-mix(in srgb, var(--primary-color) 80%, black)} .clear-search {position: absolute;right: 44px;top: 50%;transform: translateY(-50%);background: none;border: none;font-size: 16px;cursor: pointer;color: var(--text-color);opacity: 0.6;transition: var(--transition)} .clear-search:hover {opacity: 1} .search-options {display: flex;align-items: center;gap: 12px} .filter-toggle {display: flex;align-items: center;gap: 6px;padding: 8px 16px;background: transparent;border: 1px solid var(--border-color);border-radius: var(--border-radius);cursor: pointer;transition: var(--transition)} .filter-toggle:hover {background: var(--background-color)} .filter-toggle.active {background: var(--primary-color);color: white;border-color: var(--primary-color)} .filter-count {background: var(--accent-color);color: white;padding: 2px 6px;border-radius: 10px;font-size: 11px;font-weight: 500} .toggle-label {display: flex;align-items: center;gap: 6px;cursor: pointer;font-size: 14px} .toggle-label input[type="checkbox"] {margin: 0} .search-body {display: flex;gap: 24px;position: relative} .filter-panel {width: 280px;background: white;border-radius: var(--border-radius);box-shadow: 0 2px 8px var(--shadow-color);height: fit-content;position: sticky;top: 24px;transform: translateX(-100%);transition: var(--transition)} .filter-panel.open {transform: translateX(0)} .filter-panel-header {display: flex;justify-content: space-between;align-items: center;padding: 16px;border-bottom: 1px solid var(--border-color)} .filter-panel-header h3 {margin: 0;font-size: 18px;color: var(--primary-color)} .clear-filters {background: none;border: none;color: var(--accent-color);cursor: pointer;font-size: 14px;font-weight: 500} .clear-filters:hover {text-decoration: underline} .filter-groups {padding: 16px} .filter-group {margin-bottom: 16px} .filter-group-header {display: flex;justify-content: space-between;align-items: center;cursor: pointer;margin-bottom: 8px} .filter-group-title {display: flex;align-items: center;gap: 6px;font-size: 14px;font-weight: 600;color: var(--primary-color);margin: 0} .filter-group-toggle {background: none;border: none;font-size: 16px;cursor: pointer;color: var(--text-color)} .filter-group-content {display: flex;flex-direction: column;gap: 6px;transition: var(--transition);overflow: hidden} .filter-group-content.collapsed {height: 0;opacity: 0} .filter-option {display: flex;align-items: center;gap: 8px;cursor: pointer;padding: 4px 0;font-size: 14px} .filter-option:hover {background: var(--background-color);border-radius: 4px;padding-left: 4px;padding-right: 4px} .filter-checkbox {margin: 0} .search-results-container {flex: 1} .search-summary {display: flex;justify-content: space-between;align-items: center;margin-bottom: 16px;padding-bottom: 16px;border-bottom: 1px solid var(--border-color)} .search-summary-content {display: flex;justify-content: space-between;align-items: center;width: 100%} .summary-text {font-size: 16px;font-weight: 500;color: var(--primary-color)} .sort-options {display: flex;align-items: center;gap: 8px} .sort-options label {font-size: 14px;color: var(--text-color)} .sort-options select {padding: 6px 8px;border: 1px solid var(--border-color);border-radius: var(--border-radius);font-size: 14px;background: white} .active-filters {margin-bottom: 16px} .active-filters-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 8px} .active-filters-header span {font-size: 14px;font-weight: 500;color: var(--primary-color)} .clear-all-filters {background: none;border: none;color: var(--accent-color);cursor: pointer;font-size: 14px;font-weight: 500} .clear-all-filters:hover {text-decoration: underline} .active-filters-list {display: flex;flex-wrap: wrap;gap: 8px} .active-filter-tag {display: flex;align-items: center;gap: 6px;background: var(--primary-color);color: white;padding: 4px 8px;border-radius: 16px;font-size: 12px;font-weight: 500} .remove-filter {background: rgba(255, 255, 255, 0.3);border: none;color: white;border-radius: 50%;width: 16px;height: 16px;cursor: pointer;font-size: 12px;display: flex;align-items: center;justify-content: center} .remove-filter:hover {background: rgba(255, 255, 255, 0.5)} .search-loading {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 64px;text-align: center} .loading-spinner {width: 32px;height: 32px;border: 3px solid var(--border-color);border-top: 3px solid var(--primary-color);border-radius: 50%;animation: spin 1s linear infinite;margin-bottom: 16px} @keyframes spin {0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} } .search-empty {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 64px;text-align: center} .empty-icon {font-size: 48px;margin-bottom: 16px;opacity: 0.6} .search-empty h3 {margin: 0 0 8px 0;color: var(--primary-color)} .search-empty p {margin: 0;color: var(--text-color);opacity: 0.8} .search-error {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 64px;text-align: center} .error-icon {font-size: 48px;margin-bottom: 16px} .search-error h3 {margin: 0 0 8px 0;color: #f44336} .search-error p {margin: 0 0 16px 0;color: var(--text-color)} .search-error button {background: var(--primary-color);color: white;border: none;padding: 8px 16px;border-radius: var(--border-radius);cursor: pointer;font-size: 14px;font-weight: 500} @media (max-width: 768px) {.search-interface {padding: 16px} .search-header {flex-direction: column;gap: 12px} .search-options {width: 100%;justify-content: space-between} .search-body {flex-direction: column;gap: 16px} .filter-panel {position: fixed;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;z-index: 1000;border-radius: 0;transform: translateY(100%);overflow-y: auto} .filter-panel.open {transform: translateY(0)} .product-grid {grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));gap: 16px;padding: 16px} .product-list {padding: 16px} .product-card.list {flex-direction: column} .product-card.list .product-image {width: 100%;height: 200px} .search-summary-content {flex-direction: column;gap: 12px;align-items: flex-start} .sort-options {align-self: flex-end} } @media (max-width: 480px) {.product-grid {grid-template-columns: 1fr;gap: 12px;padding: 12px} .search-interface {padding: 12px} .search-input {font-size: 16px} .product-actions {flex-direction: column;gap: 8px} .btn {padding: 12px 16px} } @media (prefers-color-scheme: dark) {:root {--text-color: #e0e0e0;--background-color: #1a1a1a;--border-color: #333;--shadow-color: rgba(0, 0, 0, 0.3)} .product-card, .filter-panel {background: #2a2a2a;border: 1px solid var(--border-color)} .search-input, .variant-selector, .sort-options select {background: #2a2a2a;color: var(--text-color);border-color: var(--border-color)} .search-input::placeholder {color: #888} } @media print {.search-interface {color: black;background: white} .search-header, .filter-panel, .product-actions, .search-loading, .search-empty, .search-error {display: none} .product-grid {display: block} .product-card {break-inside: avoid;margin-bottom: 16px;box-shadow: none;border: 1px solid #ccc} } } .chat-message {display: flex;flex-direction: column;max-width: 85%;opacity: 0;transform: translateY(10px);transition: all 0.3s ease} .chat-message.visible {opacity: 1;transform: translateY(0)} .chat-message.user {align-self: flex-end} .chat-message.assistant {align-self: flex-start} .message-content {background: white;padding: 12px 16px;border-radius: 12px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);font-size: 14px;line-height: 1.4;word-wrap: break-word} .message-content p {margin: 0 0 12px 0} .message-content p:last-child {margin-bottom: 0} .message-content ul {margin: 8px 0 0 0;padding-left: 20px} .message-content ul:last-child {margin-bottom: 0} .message-content li {margin: 4px 0} .chat-message.user .message-content {background: var(--primary-color);color: white} .chat-message.assistant .message-content {background: white;color: var(--text-color)} .message-time {font-size: 11px;color: var(--secondary-color);margin-top: 4px;padding: 0 8px} .chat-message.user .message-time {text-align: right} .message-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 8px} .message-avatar {font-size: 12px;font-weight: 600;color: var(--secondary-color)} .chat-typing-indicator {display: flex;align-items: center;gap: 8px;padding: 12px 16px;background: rgba(255, 255, 255, 0.9)} .typing-dots {display: flex;gap: 4px} .typing-dots span {width: 6px;height: 6px;background: var(--secondary-color);border-radius: 50%;animation: typing 1.4s infinite} .typing-dots span:nth-child(2) {animation-delay: 0.2s} .typing-dots span:nth-child(3) {animation-delay: 0.4s} @keyframes typing {0%, 60%, 100% {transform: translateY(0);opacity: 0.5} 30% {transform: translateY(-5px);opacity: 1} } .typing-text {font-size: 12px;color: var(--text-color);font-style: italic;opacity: 0.7} .chat-input {flex: 1;border: none;outline: none;background: transparent;font-size: 14px;line-height: 1.4;resize: none;min-height: 20px;max-height: 100px;padding: 6px 0;font-family: inherit} .chat-input::placeholder {color: var(--text-color);opacity: 0.3} .chat-send {width: 32px;height: 32px;background: var(--primary-color);border: none;border-radius: 50%;color: white;cursor: pointer;font-size: 16px;transition: var(--transition);display: flex;align-items: center;justify-content: center;flex-shrink: 0} .chat-send:hover:not(:disabled) {background: color-mix(in srgb, var(--primary-color) 80%, black);transform: scale(1.1)} .chat-send:disabled {background: var(--secondary-color);cursor: not-allowed;transform: none} .chat-retry-button {background: var(--primary-color);color: white;border: none;border-radius: 20px;padding: 8px 16px;margin: 8px 0;cursor: pointer;font-size: 14px;font-weight: 500;transition: background-color 0.2s ease;align-self: flex-start;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)} .chat-retry-button:hover {background: color-mix(in srgb, var(--primary-color) 80%, black);transform: translateY(-1px)} .chat-retry-button:active {transform: translateY(1px)} .chat-retry-button:focus {outline: 2px solid var(--primary-color);outline-offset: 2px} .chat-suggestions {display: flex;flex-wrap: wrap;gap: 6px;margin-bottom: 8px} .suggestion-btn {background: white;border: 1px solid var(--border-color);border-radius: 16px;padding: 6px 12px;font-size: 12px;cursor: pointer;transition: var(--transition);color: var(--text-color)} .suggestion-btn:hover {background: var(--primary-color);color: white;border-color: var(--primary-color)} .chat-product-recommendations {margin: 16px 0} .recommendations-title {font-size: 16px;font-weight: 600;color: var(--primary-color);margin: 0 0 12px 0} .recommendations-grid {display: flex;flex-direction: column;gap: 12px} .recommendation-card {background: white;border-radius: 12px;overflow: hidden;transition: var(--transition)} .recommendation-card:hover {transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)} .rec-image {position: relative;height: 120px;overflow: hidden} .rec-image img {width: 100%;height: 100%;object-fit: cover} .rec-image.no-image-placeholder {display: flex;align-items: center;justify-content: center;background: var(--background-color, #f5f5f5);border: 1px dashed var(--border-color, #ddd)} .no-image-content {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;color: var(--text-color, #666)} .no-image-text {font-size: 12px;font-weight: 500;opacity: 0.7;max-width: 120px;line-height: 1.3} .confidence-badge {position: absolute;top: 8px;right: 8px;background: var(--accent-color);color: white;padding: 4px 8px;border-radius: 12px;font-size: 11px;font-weight: 600} .rec-info {padding: 12px} .rec-title {font-size: 14px;font-weight: 600;color: var(--primary-color);margin: 0 0 6px 0} .rec-reasoning {font-size: 12px;color: var(--text-color);margin: 0 0 8px 0;opacity: 0.8} .rec-attributes {display: flex;flex-wrap: wrap;gap: 4px;margin: 0 0 12px 0} .rec-attribute {display: flex;align-items: center;gap: 3px;background: var(--background-color);padding: 3px 6px;border-radius: 8px;font-size: 11px;color: var(--text-color)} .rec-actions {display: flex;gap: 8px} .rec-btn {flex: 1;padding: 8px 12px;border: none;border-radius: 6px;font-size: 12px;font-weight: 500;cursor: pointer;transition: var(--transition)} .rec-btn-details {background: transparent;color: var(--primary-color);border: 1px solid var(--primary-color)} .rec-btn-details:hover {background: var(--primary-color);color: white} .rec-btn-cart {background: var(--primary-color);color: white} .rec-btn-cart:hover {background: color-mix(in srgb, var(--primary-color) 80%, black)} @keyframes pulse {0% {transform: scale(1)} 50% {transform: scale(1.1)} 100% {transform: scale(1)} } @keyframes slideIn {from {transform: translateY(-100%);opacity: 0} to {transform: translateY(0);opacity: 1} } .chat-messages::-webkit-scrollbar {width: 4px} .chat-messages::-webkit-scrollbar-track {background: transparent} .chat-messages::-webkit-scrollbar-thumb {background: var(--secondary-color);border-radius: 2px} .chat-send:focus, .suggestion-btn:focus, .rec-btn:focus {outline: 2px solid var(--primary-color);outline-offset: 2px} .sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0} @media (prefers-reduced-motion: reduce) {.chat-message, .recommendation-card {transition: none} .typing-dots span {animation: none} } @media (prefers-contrast: high) {.chat-message .message-content {border: 1px solid var(--border-color)} .suggestion-btn {border: 2px solid var(--primary-color)} } @media print {.chat-suggestions, .chat-send, .rec-actions {display: none} } .form-field {margin-bottom: 24px} .form-label {display: block;font-size: 14px;font-weight: 500;color: #374151;margin-bottom: 8px;line-height: 1.4} .form-select {width: 100%;padding: 12px 16px;border: 1.5px solid #d1d5db;border-radius: 8px;font-size: 16px;color: #111827;background: white;transition: all 0.2s ease;box-sizing: border-box;appearance: none;background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position: right 12px center;background-repeat: no-repeat;background-size: 16px;padding-right: 40px} .form-select:focus {outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1)} .form-select[multiple] {background-image: none;padding-right: 16px;min-height: 120px} .form-select[multiple] option {padding: 8px 12px;border-radius: 4px;margin: 2px 0} .form-select[multiple] option:checked {background: var(--primary-color);color: white} .form-actions {margin-top: 32px;padding-top: 24px;border-top: 1px solid #e5e7eb} .form-warning {font-size: 14px;color: #6b7280;margin: 0 0 20px 0;padding: 12px 16px;background: #f9fafb;border-radius: 6px;border-left: 4px solid var(--error-color);line-height: 1.5} .form-submit {width: 100%;padding: 14px 24px;background: var(--primary-color);color: white;border: none;border-radius: 8px;font-size: 16px;font-weight: 500;cursor: pointer;transition: all 0.2s ease;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)} .form-submit:hover:not(:disabled) {background: var(--primary-color);transform: translateY(-1px);box-shadow: 0 4px 12px rgba(5, 150, 105, 0.2)} .form-submit:disabled {background: #9ca3af;cursor: not-allowed;transform: none;box-shadow: none} .context-edit, .chat-reset, .feedback-link, .disclaimer-link {font-size: 13px;color: var(--secondary-color);cursor: pointer;text-decoration: none;transition: color 0.2s ease;opacity: 0.6} .context-edit:hover, .chat-reset:hover, .feedback-link:hover, .disclaimer-link:hover {color: var(--primary-color)} @media (max-width: 768px) {.form-field {margin-bottom: 20px} .form-actions {margin-top: 24px;padding-top: 20px} .context-edit, .chat-reset, .feedback-link, .disclaimer-link {font-size: 12px} } .chat-modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 10000;display: flex;align-items: center;justify-content: center;padding: 20px;box-sizing: border-box} .chat-widget .modal-overlay, .full-page-assistant .modal-overlay, .enhanced-chat-widget .modal-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.6);backdrop-filter: blur(3px)} .chat-widget .modal-container, .full-page-assistant .modal-container, .enhanced-chat-widget .modal-container {position: relative;background: var(--background-color);border-radius: var(--border-radius);box-shadow: 0 20px 60px var(--shadow-color);max-width: 500px;width: 100%;max-height: 90vh;overflow-y: auto;animation: modalSlideIn 0.3s ease-out} @keyframes modalSlideIn {from {opacity: 0;transform: translateY(-20px) scale(0.95)} to {opacity: 1;transform: translateY(0) scale(1)} } .chat-widget .modal-header, .full-page-assistant .modal-header, .enhanced-chat-widget .modal-header {display: flex;justify-content: space-between;align-items: center;padding: 24px 24px 16px;border-bottom: 1px solid var(--border-color)} .chat-widget .modal-header h2, .full-page-assistant .modal-header h2, .enhanced-chat-widget .modal-header h2 {margin: 0;font-size: 24px;font-weight: 600;color: var(--text-color);padding: 0} .chat-widget .modal-close, .full-page-assistant .modal-close, .enhanced-chat-widget .modal-close {background: none;border: none;font-size: 24px;color: var(--text-secondary);cursor: pointer;padding: 4px;border-radius: 4px;transition: var(--transition);width: 40px} .chat-widget .modal-close:hover, .full-page-assistant .modal-close:hover, .enhanced-chat-widget .modal-close:hover {background-color: var(--secondary-background-color);color: var(--text-color)} .chat-widget .modal-content, .full-page-assistant .modal-content, .enhanced-chat-widget .modal-content {padding: 24px} .chat-widget .modal-step, .full-page-assistant .modal-step, .enhanced-chat-widget .modal-step {animation: stepFadeIn 0.3s ease-out} @keyframes stepFadeIn {from {opacity: 0;transform: translateX(10px)} to {opacity: 1;transform: translateX(0)} } .chat-widget .modal-content p, .full-page-assistant .modal-content p, .enhanced-chat-widget .modal-content p {margin: 0 0 16px;line-height: 1.6;color: var(--text-color)} .chat-widget .modal-content p:last-child, .full-page-assistant .modal-content p:last-child, .enhanced-chat-widget .modal-content p:last-child {margin-bottom: 0} .chat-widget .modal-buttons, .full-page-assistant .modal-buttons, .enhanced-chat-widget .modal-buttons {display: flex;gap: 12px;margin: 24px 0;justify-content: center} .chat-widget .modal-buttons .modal-btn:only-child, .full-page-assistant .modal-buttons .modal-btn:only-child, .enhanced-chat-widget .modal-buttons .modal-btn:only-child {flex: 0 0 auto;min-width: 140px;max-width: 200px} .chat-widget .modal-btn, .full-page-assistant .modal-btn, .enhanced-chat-widget .modal-btn {flex: 1;padding: 12px 20px;border: none;border-radius: var(--border-radius);font-size: 16px;font-weight: 500;cursor: pointer;transition: var(--transition);text-decoration: none;display: inline-flex;align-items: center;justify-content: center;min-height: 48px} .chat-widget .modal-btn.primary, .full-page-assistant .modal-btn.primary, .enhanced-chat-widget .modal-btn.primary {background-color: var(--primary-color);color: white} .chat-widget .modal-btn.primary:hover, .full-page-assistant .modal-btn.primary:hover, .enhanced-chat-widget .modal-btn.primary:hover {transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)} .chat-widget .modal-btn.secondary, .full-page-assistant .modal-btn.secondary, .enhanced-chat-widget .modal-btn.secondary {background-color: var(--secondary-background-color);color: var(--text-color);border: 1px solid var(--border-color)} .chat-widget .modal-btn.secondary:hover, .full-page-assistant .modal-btn.secondary:hover, .enhanced-chat-widget .modal-btn.secondary:hover {background-color: var(--background-color)} .chat-widget .modal-btn.tertiary, .full-page-assistant .modal-btn.tertiary, .enhanced-chat-widget .modal-btn.tertiary {background-color: transparent;color: var(--primary-color);border: 1px solid var(--primary-color);font-size: 14px;padding: 10px 16px} .chat-widget .modal-btn.tertiary:hover, .full-page-assistant .modal-btn.tertiary:hover, .enhanced-chat-widget .modal-btn.tertiary:hover {background-color: var(--primary-color);color: white} .chat-widget .modal-btn:disabled, .full-page-assistant .modal-btn:disabled, .enhanced-chat-widget .modal-btn:disabled {opacity: 0.6;cursor: not-allowed;transform: none !important} .chat-widget .modal-alternative, .full-page-assistant .modal-alternative, .enhanced-chat-widget .modal-alternative {margin-top: 32px;padding-top: 24px;border-top: 1px solid var(--border-color);text-align: center} .chat-widget .modal-alternative p, .full-page-assistant .modal-alternative p, .enhanced-chat-widget .modal-alternative p {font-size: 14px;color: var(--text-secondary);margin-bottom: 16px} .email-input-container {display: flex;gap: 12px;margin: 20px 0} .email-input-container input {flex: 1;padding: 12px 16px;border: 1px solid var(--border-color);border-radius: var(--border-radius);font-size: 16px;transition: var(--transition)} .email-input-container input:focus {outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 3px var(--accent-light)} .email-input-container .modal-btn {flex: none;white-space: nowrap} .success-message {text-align: center;margin-bottom: 24px} .success-message h3 {margin: 0 0 8px;color: var(--primary-color);font-size: 20px} .success-message p {color: var(--text-color);margin: 0} @media (max-width: 640px) {.modal-container {margin: 20px;max-width: none;width: calc(100% - 40px)} .modal-buttons {flex-direction: column} .email-input-container {flex-direction: column} .modal-header h2 {font-size: 20px} } .chat-widget .form-group, .full-page-assistant .form-group, .enhanced-chat-widget .form-group {margin-bottom: 16px} .chat-widget .form-group label, .full-page-assistant .form-group label, .enhanced-chat-widget .form-group label {display: block;margin-bottom: 6px;font-weight: 500;color: var(--text-color);font-size: 14px} .chat-widget .form-group input, .chat-widget .form-group select, .chat-widget .form-group textarea, .full-page-assistant .form-group input, .full-page-assistant .form-group select, .full-page-assistant .form-group textarea, .enhanced-chat-widget .form-group input, .enhanced-chat-widget .form-group select, .enhanced-chat-widget .form-group textarea {width: 100%;padding: 10px 12px;border: 1px solid var(--border-color);border-radius: var(--border-radius);font-size: 14px;font-family: inherit;background-color: var(--background-color);color: var(--text-color);transition: var(--transition);box-sizing: border-box} .chat-widget .form-group input:focus, .chat-widget .form-group select:focus, .chat-widget .form-group textarea:focus, .full-page-assistant .form-group input:focus, .full-page-assistant .form-group select:focus, .full-page-assistant .form-group textarea:focus, .enhanced-chat-widget .form-group input:focus, .enhanced-chat-widget .form-group select:focus, .enhanced-chat-widget .form-group textarea:focus {outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 74, 144, 226), 0.1)} .chat-widget .form-group textarea, .full-page-assistant .form-group textarea, .enhanced-chat-widget .form-group textarea {resize: vertical;min-height: 80px} .chat-widget .char-count, .full-page-assistant .char-count, .enhanced-chat-widget .char-count {text-align: right;font-size: 12px;color: var(--text-secondary);margin-top: 4px} .chat-widget .success-message, .full-page-assistant .success-message, .enhanced-chat-widget .success-message {text-align: center;padding: 20px 0} .chat-widget .success-message h3, .full-page-assistant .success-message h3, .enhanced-chat-widget .success-message h3 {color: var(--success-color, #27ae60);margin: 0 0 12px;font-size: 18px} .chat-widget .success-message p, .full-page-assistant .success-message p, .enhanced-chat-widget .success-message p {color: var(--text-color);margin: 0;line-height: 1.5} .chat-widget .reset-btn, .full-page-assistant .reset-btn, .enhanced-chat-widget .reset-btn {background: none;color: var(--text-color);border: none;border-radius: 4px;padding: 8px;font-size: 0.8rem;cursor: pointer;transition: all 0.2s ease;display: inline-block;margin-left: -4px;opacity: 0.4} .chat-widget .reset-btn:hover, .full-page-assistant .reset-btn:hover, .enhanced-chat-widget .reset-btn:hover {opacity: 1} .chat-widget .reset-btn:focus, .full-page-assistant .reset-btn:focus, .enhanced-chat-widget .reset-btn:focus {outline: 2px solid var(--primary-color);outline-offset: 2px} .reset-btn {background: none;color: var(--text-color);border: none;border-radius: 4px;padding: 8px 0;font-size: 0.8rem;cursor: pointer;transition: all 0.2s ease;display: inline-block;opacity: 0.4} .reset-btn:hover {opacity: 1} .reset-btn:focus {outline: 2px solid var(--primary-color);outline-offset: 2px} .full-page-assistant {min-height: calc(100vh - var(--header-height));position: relative;background: var(--background-color);font-family: var(--font-family);margin-top: var(--main-offset-top);margin-bottom: var(--main-offset-bottom)} .full-page-assistant .container {display: flex;flex-direction: column;min-height: inherit;position: relative} @media (min-width: 996px) {.desktop-only-message {display: none !important} } @media (max-width: 995px) {.welcome-screen, .questionnaire-screen, .assistant-layout {display: none !important} .desktop-only-message {display: flex !important} } .desktop-only-message {display: flex;align-items: center;justify-content: center;min-height: 60vh;padding: 40px 20px;background: var(--background-color, #ffffff);color: var(--text-color, #333333)} .desktop-only-content {text-align: center;max-width: 500px;padding: 40px;background: var(--card-background, #f8f9fa);border-radius: 12px;border: 1px solid var(--border-color, #e0e0e0);box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05)} .desktop-only-content h2 {margin: 0 0 20px 0;font-size: 28px;font-weight: 600;color: var(--heading-color, var(--text-color, #333333));padding: 0} .desktop-only-content p {margin: 0;font-size: 16px;line-height: 1.6;color: var(--text-color, #666666)} .assistant-header {color: white;padding: 16px 20px;display: flex;align-items: left;justify-content: left;flex-shrink: 0} .assistant-title {margin: 0;font-size: 32px;font-weight: 600;color: var(--text-color);text-align: left} .assistant-layout {display: flex;flex: 1;min-height: calc(100vh - var(--header-height) - 80px);position: relative;transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1)} .assistant-layout.chat-only-state {justify-content: center} .assistant-layout.with-recommendations-state {justify-content: flex-start} .chat-column {width: 30%;display: flex;flex-direction: column;height: calc(100vh - var(--header-height));max-height: calc(100vh - var(--header-height));position: sticky;top: 0;z-index: 1;align-self: flex-start;background: var(--background-color);transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1)} .assistant-layout.chat-only-state .chat-column {width: min(600px, 90vw);max-width: 600px} .assistant-layout.with-recommendations-state .chat-column {width: 30%} .content-column {width: 70%;background: transparent;display: flex;flex-direction: column;padding: 40px;height: calc(100vh - var(--header-height));max-height: calc(100vh - var(--header-height));position: relative;z-index: 3;overflow-y: scroll;transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1)} .assistant-layout.chat-only-state .content-column {width: 0;opacity: 0;padding: 0;overflow: hidden} .assistant-layout.with-recommendations-state .content-column {width: 70%;opacity: 1;padding: 40px} .content-column-background {position: absolute;top: 0;left: 30%;border-left: 1px solid var(--border-color);right: 0;bottom: 0;background: var(--secondary-background-color);z-index: 2;width: 300%;opacity: 0;visibility: hidden;transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out} .content-column-background.visible {opacity: 1;visibility: visible} .content-placeholder {display: flex;align-items: center;justify-content: center;flex: 1;color: var(--secondary-color);font-style: italic} .chat-container {display: flex;flex-direction: column;height: 100%} .chat-messages-container {flex: 1;overflow-y: auto;padding: 40px 20px 20px 0;display: flex;flex-direction: column;min-height: 0} .chat-messages {display: flex;flex-direction: column;gap: 10px;flex: 1} .chat-message {margin-bottom: 16px;opacity: 0;transform: translateY(10px);transition: all 0.3s ease} .full-page-assistant .chat-retry-button {margin: -14px 0 16px 0;align-self: flex-start;display: inline-block} .chat-message.visible {opacity: 1;transform: translateY(0)} .chat-message.user {align-self: flex-end} .chat-message.user .message-content {background: var(--primary-color);color: white;border-radius: 12px 12px 4px 12px} .chat-message.assistant {align-self: flex-start} .chat-message.assistant .message-content {background: var(--secondary-background-color);color: var(--text-color);border-radius: 12px 12px 12px 4px} .message-content {padding: 12px 16px;max-width: 100%;word-wrap: break-word;line-height: 1.4;font-size: 14px} .message-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 3px;font-size: 11px;color: var(--secondary-color);padding: 0 4px} .message-avatar {font-weight: 600} .message-time {opacity: 0.7} .questionnaire-button-container {margin-top: 12px;padding-top: 12px;border-top: 1px solid rgba(0, 0, 0, 0.1)} .questionnaire-launch-btn {background: var(--primary-color);color: white;border: none;border-radius: 8px;padding: 12px 20px;font-size: 14px;font-weight: 600;cursor: pointer;transition: all 0.2s ease;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)} .questionnaire-launch-btn:hover {background: var(--primary-color-hover, var(--primary-color));transform: translateY(-1px);box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15)} .questionnaire-launch-btn:active {transform: translateY(0);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)} .questionnaire-launch-btn:disabled {background: #6b7280 !important;color: white;cursor: default !important;transform: none !important;box-shadow: none !important;opacity: 0.8} .questionnaire-launch-btn:disabled:hover {background: #6b7280 !important;transform: none !important;box-shadow: none !important} .chat-message.questionnaire-prompt .message-content {border: 1px solid var(--primary-color);background: rgba(var(--primary-color-rgb, 76, 175, 80), 0.02)} .chat-typing-indicator {display: flex;align-items: center;justify-content: left;gap: 8px;padding: 12px 20px 12px 0;margin: 0;background: #f1f3f4;border-top: 1px solid var(--border-color);width: 100%;position: relative;flex-shrink: 0} .chat-typing-indicator::before {content: '';border-top: 1px solid var(--border-color);position: absolute;top: -1px;left: -300%;right: 0;bottom: 0;background: #f1f3f4;z-index: -1;width: 400%} .chat-typing-indicator::after {content: '';border-top: 1px solid var(--border-color);position: absolute;top: -1px;right: -300%;left: 0;bottom: 0;background: #f1f3f4;z-index: -1;width: 400%} .typing-dots {display: flex;gap: 3px} .typing-dots span {width: 6px;height: 6px;background: var(--secondary-color);border-radius: 50%;animation: typing 1.5s infinite} .typing-dots span:nth-child(1) {animation-delay: 0s} .typing-dots span:nth-child(2) {animation-delay: 0.2s} .typing-dots span:nth-child(3) {animation-delay: 0.4s} @keyframes typing {0%, 60%, 100% {transform: translateY(0);opacity: 0.4} 30% {transform: translateY(-8px);opacity: 1} } .typing-text {font-size: 12px;color: var(--secondary-color)} .chat-disclaimer-notice {padding: 12px 30px;border-top: 1px solid var(--border-color);background: white;position: relative;flex-shrink: 0;font-size: 13px;line-height: 1.4;color: var(--text-color)} .chat-disclaimer-notice::before {content: '';border-top: 1px solid var(--border-color);position: absolute;top: -1px;left: -300%;right: 0;bottom: 0;background: white;z-index: -1;width: 400%} .chat-disclaimer-notice::after {content: '';border-top: 1px solid var(--border-color);position: absolute;top: -1px;right: -300%;left: 0;bottom: 0;background: white;z-index: -1;width: 400%} .disclaimer-notice-content {display: flex;align-items: center;justify-content: space-between;gap: 12px} .disclaimer-notice-text {flex: 1} .disclaimer-notice-text a {color: var(--primary-color);text-decoration: none;font-weight: 500;transition: var(--transition)} .disclaimer-notice-text a:hover {text-decoration: underline;color: color-mix(in srgb, var(--primary-color) 80%, black)} .disclaimer-notice-close {background: none;border: none;font-size: 18px;color: var(--secondary-color);cursor: pointer;padding: 4px;line-height: 1;border-radius: 3px;transition: var(--transition);flex-shrink: 0;width: 24px;height: 24px;display: flex;align-items: center;justify-content: center} .disclaimer-notice-close:hover {background: #f3f4f6;color: var(--text-color)} .welcome-disclaimer-text {margin-top: 20px;font-size: 13px;line-height: 1.4;color: var(--text-color);text-align: center;opacity: 0.8} .welcome-disclaimer-text a {color: var(--primary-color);text-decoration: none;font-weight: 500;transition: var(--transition)} .welcome-disclaimer-text a:hover {text-decoration: underline;color: color-mix(in srgb, var(--primary-color) 80%, black)} .chat-input-section {padding: 20px 30px 0 0;border-top: 1px solid var(--border-color);background: white;position: relative;flex-shrink: 0;opacity: 1;transform: translateY(0);transition: opacity 0.4s ease, transform 0.4s ease} .chat-input-section.chat-input-initial {opacity: 0;transform: translateY(20px)} .chat-input-section::before {content: '';border-top: 1px solid var(--border-color);position: absolute;top: -1px;left: -300%;right: 0;bottom: 0;background: white;z-index: -1;width: 400%} .chat-input-section::after {content: '';border-top: 1px solid var(--border-color);position: absolute;top: -1px;right: -300%;left: 0;bottom: 0;background: white;z-index: -1;width: 400%} .chat-suggestions {margin-bottom: 32px} .suggestions-header h4 {padding-top: 0;margin: 0;font-size: 14px;font-weight: 600;color: var(--primary-color)} .suggestions-grid {display: flex;flex-direction: column;gap: 8px} .suggestion-btn {background: white;border: 1px solid var(--border-color);border-radius: 8px;padding: 10px 12px;font-size: 13px;text-align: left;cursor: pointer;transition: all 0.2s ease;color: var(--text-color);display: flex;align-items: center;gap: 8px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08)} .suggestion-btn:hover {background: var(--primary-color);color: white;border-color: var(--primary-color)} .suggestion-icon {font-size: 14px} .suggestion-text {flex: 1} .chat-input-container {display: flex;align-items: flex-end;gap: 12px;background: var(--background-color);border-radius: 12px;padding: 12px 16px;border: 1px solid var(--border-color);transition: all 0.2s ease} .chat-input-container:focus-within {border-color: var(--primary-color);box-shadow: 0 0 0 2px var(--shadow-color)} .chat-input {flex: 1;border: none;background: transparent;resize: none;outline: none;font-family: inherit;font-size: 14px;line-height: 1.4;color: var(--text-color);min-height: 20px;max-height: 120px} .chat-input::placeholder {color: var(--secondary-color)} .chat-send {width: 32px;height: 32px;background: var(--primary-color);border: none;border-radius: 50%;color: white;cursor: pointer;font-size: 16px;transition: var(--transition);display: flex;align-items: center;justify-content: center;flex-shrink: 0} .chat-send:hover:not(:disabled) {background: color-mix(in srgb, var(--primary-color) 80%, black);transform: scale(1.1)} .chat-send:disabled {background: var(--secondary-color);cursor: not-allowed;transform: none} .chat-send.processing {position: relative} .chat-send.processing::after {content: '';position: absolute;top: 50%;left: 50%;width: 16px;height: 16px;margin: -8px 0 0 -8px;border: 2px solid #fff;border-top: 2px solid transparent;border-radius: 50%;animation: spin 1s linear infinite} .chat-send.processing .send-icon {display: none} @keyframes spin {0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} } @keyframes shake {0%, 100% {transform: translateX(0)} 25% {transform: translateX(-5px)} 75% {transform: translateX(5px)} } .chat-input:disabled {background-color: #f5f5f5;color: #999;cursor: not-allowed;opacity: 0.6} .chat-input:disabled::placeholder {color: #666;font-weight: 500} .chat-footer {padding: 10px 0 14px 0;text-align: center} .recommendations-container {min-height: 100%;display: flex;flex-direction: column;position: relative} .recommendations-title {margin: 0 0 20px 0;font-size: 24px;font-weight: 600;color: var(--primary-color)} .recommendations-grid {display: flex;flex-direction: column;gap: 16px;padding-bottom: 40px} .recommendations-grid-2col {display: grid !important;grid-template-columns: 1fr 1fr;gap: 20px;flex-direction: unset} .recommendation-card {background: transparent;border: none;border-radius: 0;padding: 0;margin: 0;transition: all 0.2s ease;overflow: visible;opacity: 0;transform: translateY(20px)} .recommendation-card.fade-in {opacity: 1;transform: translateY(0);transition: opacity 0.5s ease-out, transform 0.5s ease-out} .recommendation-card:hover {transform: translateY(-2px);box-shadow: none} .rec-link {display: block;text-decoration: none;color: inherit;height: 100%} .rec-link:hover {text-decoration: none} .rec-link:hover * {text-decoration: none} .rec-image-container {width: 100%;height: 240px;overflow: hidden;background: #f8f9fa;border-radius: 4px;position: relative} .rec-image {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;border-radius: 4px} .rec-image.no-image-placeholder {display: flex;align-items: center;justify-content: center;background: var(--background-color, #f8f9fa);border: 1px dashed var(--border-color, #dee2e6);object-fit: unset} .no-image-content {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;color: var(--text-color, #666)} .no-image-text {font-size: 14px;font-weight: 500;opacity: 0.6;max-width: 140px;line-height: 1.4} .rec-link:hover .rec-image {transform: scale(1.05)} .rec-link:hover .rec-image.no-image-placeholder {transform: none} .rec-image-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.2);display: flex;align-items: center;justify-content: center;opacity: 0;transition: opacity 0.3s ease;border-radius: 4px} .rec-link:hover .rec-image-overlay {opacity: 1} .rec-overlay-btn {background: transparent;color: white;border: 1px solid white;border-radius: 4px;padding: 8px 16px;font-size: 14px;font-weight: 500;cursor: pointer;transition: all 0.2s ease} .rec-overlay-btn:hover {background: rgba(255, 255, 255, 0.1)} .rec-content {padding: 10px 16px 16px 16px;display: flex;flex-direction: column;gap: 4px} .rec-price {font-size: 18px;font-weight: 700;margin: 0;color: var(--text-color);opacity: 0.6} .rec-details {display: flex;flex-direction: column;gap: 4px;font-size: 12px;color: var(--text-color);opacity: 0.6} .rec-details-line {display: flex;flex-direction: row;align-items: center;justify-content: space-between} .rec-height-spread, .rec-pot-size, .rec-delivery {margin: 0} .rec-header {display: flex;gap: 12px;margin-bottom: 12px} .rec-image img {width: 60px;height: 60px;border-radius: 8px;object-fit: cover} .rec-info {flex: 1} .rec-title {margin: 0 0 6px 0;font-size: 1rem;font-weight: 600;color: var(--text-color);padding: 0} .rec-confidence {display: flex;align-items: center;gap: 6px;font-size: 12px;color: var(--secondary-color)} .confidence-badge {background: var(--primary-color);color: white;padding: 2px 6px;border-radius: 4px;font-weight: 600} .rec-reasoning {margin: 0;font-size: 13px;color: var(--text-color);line-height: 1.4} .rec-attributes {display: flex;flex-wrap: wrap;gap: 8px;margin: 12px 0} .rec-attribute {display: flex;align-items: center;gap: 4px;font-size: 12px;background: #f8f9fa;padding: 4px 8px;border-radius: 6px} .attr-label {font-weight: 600;color: var(--secondary-color)} .attr-value {color: var(--text-color)} .rec-footer {display: flex;gap: 8px;margin-top: 12px} .rec-btn {flex: 1;padding: 8px 12px;border: 1px solid var(--border-color);border-radius: 6px;font-size: 12px;cursor: pointer;transition: all 0.2s ease;background: white;color: var(--text-color)} .rec-btn:hover {background: var(--primary-color);color: white;border-color: var(--primary-color)} @media (max-width: 768px) {.full-page-assistant {min-height: calc(100vh - var(--header-height));margin-top: var(--main-offset-top);margin-bottom: var(--main-offset-bottom)} .assistant-layout {flex-direction: column;min-height: calc(100vh - var(--header-height) - 80px)} .chat-column, .assistant-layout.chat-only-state .chat-column, .assistant-layout.with-recommendations-state .chat-column {width: 100%;max-width: none;border-right: none;border-bottom: 1px solid var(--border-color);height: 50vh;max-height: 50vh;position: static} .content-column, .assistant-layout.chat-only-state .content-column, .assistant-layout.with-recommendations-state .content-column {width: 100%;height: 50vh;min-height: 50vh;padding: 16px;opacity: 1;overflow: visible} .assistant-layout.chat-only-state .content-column {display: none} .content-column-background {left: 0;right: 0;top: 50vh;bottom: 0;width: 100%} .chat-messages-container, .chat-input-section {padding: 16px} .suggestion-btn {padding: 12px;font-size: 14px} .rec-footer {flex-direction: column} .recommendations-grid-2col {grid-template-columns: 1fr !important;gap: 16px} } @media (max-width: 480px) {.assistant-header {padding: 12px 16px} .assistant-title {font-size: 24px} .chat-messages-container, .chat-input-section {padding: 12px} .message-content {font-size: 13px;max-width: 90%} .full-page-assistant {min-height: calc(100vh - var(--header-height));margin-top: var(--main-offset-top);margin-bottom: var(--main-offset-bottom)} } .chat-send:focus, .suggestion-btn:focus, .rec-btn:focus {outline: 2px solid var(--primary-color);outline-offset: 2px} @media (prefers-reduced-motion: reduce) {.chat-message, .typing-dots span {transition: none;animation: none} } .feature-preference-group {margin-bottom: 24px;padding: 16px;background: #f8f9fa;border-radius: 8px;border: 1px solid #e9ecef} .feature-preference-title {margin: 0 0 6px 0;font-size: 16px;font-weight: 600;color: var(--text-color);padding: 0} .feature-preference-description {margin: 0 0 12px 0;font-size: 13px;color: var(--secondary-color);line-height: 1.4} .feature-preference-options {display: flex;gap: 8px;flex-wrap: wrap} .feature-preference-options .option-label {flex: 0 0 auto;min-width: 110px;padding: 8px 12px;margin: 0;font-size: 13px} .other-input-container {margin-top: 8px;margin-left: 32px} .other-text-input {width: 100%;max-width: 300px;padding: 8px 12px;border: 1px solid var(--border-color);border-radius: 6px;font-size: 14px;background: white;color: var(--text-color)} .other-text-input:focus {outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 2px var(--shadow-color)} .other-text-input::placeholder {color: var(--secondary-color);opacity: 0.7} @media (max-width: 768px) {.feature-preference-options {flex-direction: column} .feature-preference-options .option-label {min-width: unset;flex: 1} .other-input-container {margin-left: 16px} } @media (max-width: 480px) {.feature-preference-group {padding: 12px;margin-bottom: 20px} .feature-preference-title {font-size: 15px} .feature-preference-options .option-label {padding: 10px 12px;font-size: 14px} .other-input-container {margin-left: 8px} .other-text-input {font-size: 16px} } .welcome-screen {display: block;min-height: calc(100vh - var(--header-height));background: var(--background-color);padding: 60px 20px 200px 20px;overflow-y: auto;transition: opacity 0.45s ease} .welcome-container {max-width: 800px;margin: 0 auto;display: flex;flex-direction: column;gap: 30px} .welcome-header {text-align: center;max-width: 600px;margin: 0 auto} .welcome-title {font-size: 3rem;color: var(--text-color);margin: 0;line-height: 1.3;font-weight: 500;letter-spacing: -0.5px} .welcome-subtitle {font-size: 1rem;color: #6b7280;margin: 0 0 10px 0;line-height: 1.5;font-weight: 400} .welcome-conversations-section h2 {color: var(--text-color);margin: 0 0 16px 0;text-align: center} .welcome-example {position: relative;min-height: 400px;margin-bottom: 10px} .example-conversations-container {position: relative;width: 100%;height: 460px;max-width: 700px;margin: 0 auto} .example-conversation {position: absolute;background: var(--secondary-background-color);border: 1px solid var(--border-color);border-radius: 12px;padding: 20px 30px;box-shadow: 0 4px 12px rgb(232, 224, 219);width: 360px;display: flex;flex-direction: column;gap: 12px} .example-conversation * {cursor: default !important} .recommendation-example {top: 0;left: -5px;z-index: 2} .qa-example {bottom: 0;right: -25px;z-index: 1;width: 380px;padding-left: 40px} .welcome-example h3 {color: var(--text-color);margin: 0 0 24px 0;font-weight: 500;padding: 0;text-align: center} .example-conversation .chat-message {margin-bottom: 12px;opacity: 1;transform: translateY(0)} .example-conversation .chat-message.assistant .message-content {background: white} .example-products {margin: 12px 0;display: flex;flex-direction: column;gap: 4px;width: 100%} .example-product {padding: 6px 12px;background: var(--secondary-color);border-radius: 4px;font-size: 0.8rem;color: white;border: 1px solid var(--primary-color)} @media (max-width: 768px) {.example-conversations-container {height: 480px;max-width: 90%} .example-conversation {width: 300px;padding: 16px} .recommendation-example {top: 10px;left: 10px} .qa-example {bottom: 10px;right: 10px} } @media (max-width: 480px) {.example-conversations-container {height: 520px;max-width: 95%} .example-conversation {width: 260px;padding: 14px} .recommendation-example {top: 20px;left: 5px} .qa-example {bottom: 20px;right: 5px} .example-conversation .chat-message .message-content {font-size: 0.85rem} } .how-it-works {text-align: center;max-width: 650px;margin: -20px auto 0 auto} .how-it-works-toggle {background: none;border: none;color: #6b7280;font-size: 0.9rem;cursor: pointer;display: inline-flex;align-items: center;gap: 8px;padding: 0 12px 8px 12px;transition: color 0.2s ease;border-radius: 4px} .how-it-works-toggle:hover {opacity: 1} .toggle-icon {font-size: 0.5rem;transition: transform 0.2s ease;color: #9ca3af} .how-it-works-explanation {margin-top: 5px;padding: 24px;background: white;border-radius: 8px;border: 1px solid #e5e7eb;animation: slideDown 0.2s ease-out;text-align: left;max-width: 100%;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05)} .how-it-works-explanation p {margin: 0 0 16px 0;font-size: 0.95rem;line-height: 1.6;color: #374151} .how-it-works-explanation p:last-child {margin-bottom: 0} .how-it-works-explanation em {font-style: italic;color: #6b7280;font-weight: 500} .how-it-works-explanation strong {font-weight: 600} @keyframes slideDown {from {opacity: 0;transform: translateY(-10px)} to {opacity: 1;transform: translateY(0)} } .welcome-pathways {text-align: center} .welcome-pathways h2 {margin: 0;font-size: 2rem;color: var(--text-color);font-weight: 500;padding-bottom: 4px} .pathways-subtitle {margin: 0 0 30px 0;font-size: 0.9rem;color: #6b7280;font-weight: 400} .pathways-subtitle strong {font-weight: 400;text-decoration: underline} .pathway-buttons {display: flex;flex-direction: column;gap: 16px;max-width: 500px;margin: 0 auto} .pathway-btn {display: flex;align-items: center;padding: 32px 16px 32px 24px;border: 2px solid var(--border-color);border-radius: 8px;background: white;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);text-align: left;cursor: pointer;transition: all 0.2s ease;text-decoration: none;color: inherit;position: relative} .pathway-left {display: flex;align-items: center;gap: 18px} .pathway-btn:hover {border-color: var(--primary-color);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);background: #fafafa;transform: translateY(-1px)} .pathway-btn.primary-pathway {border: 2px solid var(--border-color);background: white} .pathway-btn.primary-pathway:hover {background: #fafafa;border-color: var(--primary-color)} .pathway-btn.secondary-pathway {opacity: 0.6;border-style: dashed} .pathway-btn.secondary-pathway:hover {opacity: 0.8} .pathway-icon {font-size: 1.5rem;flex-shrink: 0;width: 40px;text-align: center;color: var(--primary-color)} .pathway-content h4 {margin: 0 0 6px 0;font-size: 1rem;font-weight: 600;padding-top: 0;margin-bottom: 0;color: var(--text-color);letter-spacing: 0.15rem} .pathway-content p {margin: 0;font-size: 0.9rem;line-height: 1.4;opacity: 0.8} .welcome-direct-input {text-align: center;max-width: 500px;min-width: 400px;margin: 0 auto;padding-top: 50px} .welcome-direct-input h2 {margin: 0;font-size: 2rem;color: var(--text-color);font-weight: 500;padding-bottom: 32px} .direct-input-subtitle {margin: 0 0 30px 0;font-size: 0.9rem;color: #6b7280;font-weight: 400} .direct-input-container {max-width: 650px;margin: 0 auto} .direct-input-wrapper {display: flex;align-items: flex-end;gap: 12px;background: white;border: 2px solid var(--border-color);border-radius: 12px;padding: 16px;transition: all 0.2s ease} .direct-input-wrapper:focus-within {border-color: var(--primary-color);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)} .welcome-input-field {flex: 1;border: none;outline: none;background: transparent;font-size: 14px;line-height: 1.4;resize: none;min-height: 20px;max-height: 100px;padding: 6px 0;font-family: inherit;color: var(--text-color)} .welcome-input-field::placeholder {color: var(--text-color);opacity: 0.5} .welcome-send-btn {width: 32px;height: 32px;background: var(--primary-color);border: none;border-radius: 50%;color: white;cursor: pointer;font-size: 16px;transition: var(--transition);display: flex;align-items: center;justify-content: center;flex-shrink: 0} .welcome-send-btn:hover:not(:disabled) {background: color-mix(in srgb, var(--primary-color) 80%, black);transform: scale(1.1)} .welcome-send-btn:disabled {background: var(--secondary-color);cursor: not-allowed;transform: none} @media (max-width: 768px) {.welcome-screen {padding: 40px 15px 150px 15px} .welcome-container {gap: 35px;padding: 0} .welcome-title {font-size: 1.9rem} .welcome-subtitle {font-size: 1rem} .pathway-btn {padding: 18px 20px} .pathway-left {gap: 16px} .pathway-icon {font-size: 1.3rem;width: 36px} .welcome-direct-input h2 {font-size: 1.7rem} .direct-input-wrapper {padding: 14px;gap: 10px} .welcome-send-btn {width: 32px;height: 32px;font-size: 16px} } @media (max-width: 480px) {.welcome-screen {padding: 30px 12px 60px 12px} .welcome-container {gap: 30px} .welcome-title {font-size: 1.6rem} .welcome-subtitle {font-size: 0.95rem} .pathway-buttons {gap: 10px} .pathway-btn {padding: 16px 18px} .pathway-left {gap: 14px} .pathway-content h4 {font-size: 0.95rem} .pathway-content p {font-size: 0.85rem} .welcome-direct-input h2 {font-size: 1.5rem} .direct-input-subtitle {font-size: 0.85rem} .direct-input-wrapper {padding: 12px;gap: 8px} .welcome-input-field {font-size: 14px} .welcome-send-btn {width: 32px;height: 32px;font-size: 16px} } .questionnaire-back-external {position: absolute;left: 20px;top: calc(var(--header-height) + 20px);background: none;border: none;color: var(--text-secondary);cursor: pointer;font-size: 0.9rem;padding: 8px 12px;border-radius: 4px;transition: all 0.2s ease;z-index: 0} .questionnaire-back-external:hover {background: rgba(0, 0, 0, 0.05);color: var(--text-color)} .questionnaire-screen {display: none;min-height: calc(100vh - var(--header-height));background: var(--background-color);padding: 40px 20px 80px 20px;overflow-y: auto;transition: opacity 0.45s ease} .questionnaire-container {max-width: 600px;margin: 0 auto;display: flex;flex-direction: column;gap: 5px} .questionnaire-header {text-align: center;position: relative} .questionnaire-title {font-size: 2rem;color: var(--text-color);margin: 0;line-height: 1.2;padding-bottom: 0.75rem} .questionnaire-subtitle {font-size: 1rem;color: var(--primary-color);margin: 0;line-height: 1.4;margin-bottom: 4rem} .questionnaire-form {display: flex;flex-direction: column;gap: 40px} #questionnaire-step-content {transition: opacity 0.3s ease} .question-group {background: white;border: 1px solid var(--border-color);border-radius: 12px;padding: 24px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05)} .question-title {margin: 10px 0;font-size: 1.1rem;font-weight: 600;color: var(--text-color);line-height: 1.3;padding-top: 0} .multiple-note, .optional-note {font-weight: 400;font-size: 0.7rem;color: var(--text-secondary)} .question-options {display: flex;flex-direction: column;gap: 6px} .option-label {display: flex;align-items: center;gap: 12px;padding: 12px 16px;border: 2px solid var(--border-color);border-radius: 8px;cursor: pointer;transition: all 0.2s ease;background: white;margin: 0;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08)} .option-label:hover {background: var(--secondary-background-color)} .option-label input[type="radio"], .option-label input[type="checkbox"] {width: 16px;height: 16px;margin: 0;accent-color: var(--accent-color);cursor: pointer} .option-label input[type="radio"]:checked + .option-text, .option-label input[type="checkbox"]:checked + .option-text {font-weight: 600;color: var(--accent-color)} .option-label:has(input:checked) {border-color: var(--accent-color);background: var(--accent-light)} .option-text {flex: 1;font-size: 0.95rem;color: var(--text-color);line-height: 1.4;transition: all 0.2s ease} .questionnaire-progress {margin: 24px 0;padding: 0 4px} .progress-bar {width: 100%;height: 8px;background-color: #f0f0f0;border-radius: 4px;overflow: hidden;margin-bottom: 8px} .progress-fill {height: 100%;background: linear-gradient(90deg, var(--primary-color), var(--primary-color-dark, var(--primary-color)));border-radius: 4px;transition: width 0.3s ease} .progress-text {text-align: center;font-size: 0.9rem;color: var(--text-secondary);font-weight: 500} .question-step {min-height: 300px;display: flex;flex-direction: column;background: white;border: 1px solid var(--border-color);border-radius: 12px;padding: 24px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05)} .question-step .question-title {margin: 10px 0 20px 0;font-size: 1.1rem;font-weight: 600;color: var(--text-color);line-height: 1.3;padding-top: 0} .question-step .question-options {flex: 1;display: flex;flex-direction: column;gap: 6px} .questionnaire-navigation {display: flex;justify-content: space-between;align-items: center} .questionnaire-prev, .questionnaire-next {padding: 12px 24px;border: 2px solid var(--primary-color);background: var(--primary-color);color: white;border-radius: 8px;font-size: 1rem;font-weight: 500;cursor: pointer;transition: all 0.2s ease;min-width: 120px} .questionnaire-prev:hover, .questionnaire-next:hover {background: var(--primary-color-dark, var(--primary-color));border-color: var(--primary-color-dark, var(--primary-color));transform: translateY(-1px)} .questionnaire-prev:active, .questionnaire-next:active {transform: translateY(0)} .questionnaire-next {margin-left: auto} .question-step .feature-preference-group {margin-bottom: 24px;padding: 20px;background: var(--background-secondary, #f8f9fa);border-radius: 8px;border: 1px solid var(--border-color)} .question-step .feature-preference-group:last-child {margin-bottom: 0} .question-step .feature-preference-title {margin-bottom: 8px;font-size: 1.1rem;font-weight: 600;color: var(--text-primary)} .question-step .feature-preference-description {margin-bottom: 16px;color: var(--text-secondary);line-height: 1.5} .question-step .feature-preference-options {display: flex;flex-direction: column;gap: 8px} .question-step .option-label {padding: 16px 20px;margin-bottom: 8px;border: 2px solid var(--border-color);border-radius: 8px;cursor: pointer;transition: all 0.2s ease;background: white;display: flex;align-items: center;gap: 12px} .question-step .option-label:hover {border-color: var(--border-color);background: var(--border-color)} .question-step .option-label input:checked + .option-text {font-weight: 600;color: var(--primary-color)} .question-step .option-label:has(input:checked) {border-color: var(--primary-color);background: var(--border-color)} .question-step .other-input-container {margin-left: 0 !important;margin-top: -8px !important;margin-bottom: 8px !important;padding: 12px 20px 16px 20px;background: var(--border-color);border: 2px solid var(--border-color);border-top: none;border-radius: 8px} .question-step .other-text-input {width: 100%;padding: 12px 16px;border: 2px solid var(--border-color);border-radius: 6px;font-size: 1rem;background: white;transition: border-color 0.2s ease} .question-step .other-text-input:focus {outline: none;border-color: var(--primary-color)} .questionnaire-footer {text-align: center;padding-top: 20px} .questionnaire-submit {background: var(--primary-color);color: white;border: 2px solid var(--primary-color);border-radius: 8px;padding: 12px 32px;font-size: 1rem;font-weight: 600;cursor: pointer;transition: all 0.2s ease;min-width: 200px} .questionnaire-submit:hover {background: var(--primary-color-dark, var(--primary-color));border-color: var(--primary-color-dark, var(--primary-color));transform: translateY(-1px)} .questionnaire-submit:disabled {background: var(--secondary-color);cursor: not-allowed;transform: none;box-shadow: none} @media (max-width: 768px) {.questionnaire-screen {padding: 20px 15px 60px 15px} .questionnaire-back-external {left: 15px;top: calc(var(--header-height) + 15px);font-size: 0.85rem;padding: 6px 10px} .questionnaire-container {gap: 25px} .questionnaire-title {font-size: 1.6rem} .questionnaire-subtitle {font-size: 1rem} .question-group {padding: 20px} .question-title {font-size: 1rem;margin-bottom: 16px} .option-label {padding: 10px 14px} .option-text {font-size: 0.9rem} .questionnaire-prev, .questionnaire-next, .questionnaire-submit {width: 100%;min-width: unset;margin-left: 0} .questionnaire-navigation {flex-direction: column-reverse;gap: 16px} .question-step {min-height: 250px} .progress-text {font-size: 0.85rem} } @media (max-width: 480px) {.questionnaire-screen {padding: 15px 10px 150px 10px} .questionnaire-back-external {left: 10px;top: calc(var(--header-height) + 10px);font-size: 0.8rem;padding: 5px 8px} .questionnaire-header {margin-bottom: 20px} .questionnaire-title {font-size: 1.4rem} .questionnaire-form {gap: 30px} .question-group {padding: 16px} .question-options {gap: 10px} .option-label {padding: 8px 12px} .questionnaire-submit {width: 100%;min-width: unset} } .questionnaire-submit:focus {outline: 2px solid var(--accent-color);outline-offset: 2px} @media (prefers-reduced-motion: reduce) {.option-label, .questionnaire-submit {transition: none} .questionnaire-submit:hover {transform: none} } .context-editor-overlay {position: absolute;top: -1px;left: 0;right: 0;bottom: 0;z-index: 1000;transform: translateY(100%);transition: transform 0.3s ease-out} .context-editor-overlay.show {transform: translateY(0)} .context-editor-container {background: var(--background-color);box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);width: 100%;height: 100%;overflow-y: auto;position: relative;border: 1px solid #e5e7eb;border-bottom: none} .chat-column {position: relative} @keyframes slideUpFade {from {opacity: 0;transform: translateY(30px)} to {opacity: 1;transform: translateY(0)} } .context-editor-header {position: sticky;top: 0;background: white;padding: 16px 24px;border-bottom: 1px solid #e5e7eb;display: flex;justify-content: space-between;align-items: center;z-index: 1} .context-editor-title {font-size: 24px;font-weight: 600;color: #111827;margin: 0;padding:0} .context-editor-close {background: none;border: none;font-size: 24px;cursor: pointer;color: #6b7280;padding: 8px;line-height: 1;border-radius: 6px;transition: all 0.2s ease} .context-editor-close:hover {background: #f3f4f6;color: #374151} .context-editor-form {padding: 24px} .chat-footer {display: flex;align-items: center;justify-content: center;gap: 0} .disclaimer-link {order: 0} .disclaimer-link:after {content: "•";color: var(--primary-color);font-size: 13px;padding: 0 6px} .feedback-link {order: 1} .context-edit {order: 2} .chat-footer.has-context-edit .feedback-link:after {content: "•";color: var(--primary-color);font-size: 13px;padding: 0 6px} .disclaimer-content {font-size: 15px;line-height: 1.5;color: var(--text-color)} .disclaimer-content a {text-decoration: underline} .disclaimer-content a:hover {text-decoration: none} .disclaimer-content p {margin: 0} @media (max-width: 768px) {.context-editor-container {border-radius: 8px 8px 0 0} .context-editor-header {padding: 20px 20px 0 20px} .context-editor-title {font-size: 20px} .context-editor-form {padding: 20px} } .show-footer-link {position: fixed;bottom: 10px;right: 10px;z-index: 1000;font-family: inherit;display: flex;align-items: center;gap: 0} .show-footer-btn {background: none;color: var(--text-color);border: none;border-radius: 4px;padding: 8px 0;font-size: 0.8rem;cursor: pointer;transition: all 0.2s ease;display: inline-block;opacity: 0.4} .show-footer-btn:after {content: "•";color: var(--text-color);opacity: 0.7;padding: 0 6px;pointer-events: none} .show-footer-btn:hover {opacity: 1} .show-footer-btn:focus {outline: 2px solid var(--primary-color);outline-offset: 2px} .reset-btn {padding-right: 8px} @media (max-width: 768px) {.show-footer-link {bottom: 15px;right: 15px} .show-footer-btn {padding: 10px 14px;font-size: 0.85rem} } @media (max-width: 480px) {.show-footer-link {bottom: 12px;right: 12px} .show-footer-btn {padding: 8px 12px;font-size: 0.8rem} } .content-header {position: absolute;top: -1px;left: 30%;z-index: 10;transition: top 0.3s ease} .content-header.sidebar-open {top: -30px} .history-toggle {display: none;padding: 4px 10px;background: var(--background-color);border: 1px solid var(--border-color);border-left: none;border-radius: 0 0 4px 0;color: var(--secondary-color);font-size: 0.8rem;cursor: pointer;transition: all 0.2s ease} .history-toggle:hover {box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05)} .history-icon {font-size: 1.1rem} .history-text {font-weight: 500} .history-sidebar {position: absolute;top: 0;left: 30%;width: 20%;height: 100%;background: var(--background-color);border-right: 1px solid var(--border-color);z-index: 20;overflow-y: auto;border-left: 1px solid var(--border-color);transform: translateX(-100%);transition: all 0.3s ease;opacity: 0} .history-sidebar.visible {transform: translateX(0);opacity: 1} .history-header {display: flex;align-items: center;justify-content: space-between;padding: 4px 16px;border-bottom: 1px solid var(--border-color);background: var(--background-secondary)} .history-header h3 {margin: 0;font-size: 1.1rem;font-weight: 600;color: var(--text-color);padding: 0} .history-close {background: none;border: none;font-size: 1.5rem;color: var(--text-secondary);cursor: pointer;padding: 4px 8px;border-radius: 4px;transition: all 0.2s ease} .history-close:hover {background: var(--background-hover);color: var(--text-color)} .history-list {padding: 16px} .history-item {padding: 8px 16px;border: 1px solid var(--border-color);border-radius: 8px;margin-bottom: 12px;cursor: pointer;transition: all 0.2s ease;background: var(--background-color)} .history-item:hover {background: var(--background-hover);border-color: var(--primary-color);box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)} .history-item.active {background: var(--primary-color-light);border-color: var(--primary-color);box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.2)} .history-item-name {font-weight: 600;color: var(--text-color);font-size: 0.85rem;line-height: 1.3} .history-item-meta {color: var(--text-secondary);font-size: 0.8rem;margin-top: 4px} .return-to-current {padding: 16px 20px;border-top: 1px solid var(--border-color)} .return-btn {width: 100%;padding: 12px 16px;background: var(--primary-color);color: white;border: none;border-radius: 6px;font-size: 0.9rem;font-weight: 500;cursor: pointer;transition: all 0.2s ease} .return-btn:hover {transform: translateY(-1px);box-shadow: 0 3px 8px rgba(var(--primary-color-rgb), 0.3)} .history-limited-message {margin-top: 20px;padding: 12px 16px;background-color: white;border: 2px solid var(--border-color);border-radius: 4px} .history-limited-text {font-size: 14px;line-height: 1.4} .storage-cleared-notification {position: fixed;top: 20px;right: 20px;background: var(--warning-background, #fff3cd);border: 1px solid var(--warning-border, #ffeaa7);border-radius: 8px;padding: 12px 16px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);z-index: 1000;max-width: 400px;animation: slideInRight 0.3s ease} .notification-content {display: flex;align-items: center;gap: 12px} .notification-icon {font-size: 18px;flex-shrink: 0} .notification-text {font-size: 14px;color: var(--warning-text, #856404);line-height: 1.4} @keyframes slideInRight {from {transform: translateX(100%);opacity: 0} to {transform: translateX(0);opacity: 1} } .content-main {min-height: 100%} .history-sidebar-overlay {position: fixed;background: rgba(0, 0, 0, 0.3);z-index: 15;opacity: 0;pointer-events: none;transition: opacity 0.3s ease} .history-sidebar-overlay.visible {opacity: 1;pointer-events: auto} .chat-column.read-only-mode {opacity: 0.5;transition: opacity 0.3s ease;position: relative} .chat-column.read-only-mode > * {pointer-events: none} .chat-column.read-only-mode .chat-input-container {pointer-events: auto} .chat-column.read-only-mode::before {content: "Go back to your most recent product search to enable chat";position: absolute;top: 45%;left: 50%;transform: translate(-50%, -50%);background: rgba(0, 0, 0, 0.8);color: white;padding: 8px 12px;border-radius: 6px;font-size: 0.85rem;font-weight: 500;max-width: calc(100% - 32px);text-align: center;line-height: 1.3;opacity: 0;pointer-events: none;transition: opacity 0.2s ease;z-index: 100;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2)} .chat-column.read-only-mode:hover::before {opacity: 1} .read-only-banner {background: var(--primary-color);color: white;padding: 12px 20px;margin-bottom: 6rem;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);width: 100%} .banner-content {display: flex;align-items: center;justify-content: space-between;gap: 12px} .banner-text {font-weight: 500;font-size: 0.9rem} .banner-name {font-weight: 600;font-size: 1rem;flex: 1} .banner-close {background: rgba(255, 255, 255, 0.2);color: white;border: none;padding: 6px 12px;border-radius: 4px;font-size: 0.85rem;font-weight: 500;cursor: pointer;transition: all 0.2s ease} .banner-close:hover {background: rgba(255, 255, 255, 0.3);transform: translateY(-1px)} @media (max-width: 1200px) {.history-sidebar {width: 35%} } @media (max-width: 768px) {.history-sidebar {width: 100%;position: fixed;left: -100%;transition: left 0.3s ease} .history-sidebar.mobile-visible {left: 0} } .recommendations-section {margin-bottom: 20px} .recommendations-section-title {font-size: 24px;margin: 0 0 16px 0;padding: 0;border-bottom: 1px solid var(--border-color);padding-bottom: 8px} .show-more-container {display: flex;justify-content: center;margin: 0 0 32px 0} .show-more-btn {display: flex;align-items: center;gap: 8px;background: var(--primary-color);color: white;border: none;padding: 12px 24px;border-radius: 4px;font-size: 14px;font-weight: 500;cursor: pointer;transition: all 0.3s ease;box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);min-width: 200px;justify-content: center;opacity: 0.8} .show-more-btn:hover:not(:disabled) {transform: translateY(-1px);opacity: 1} .show-more-btn:disabled {opacity: 0.4;cursor: not-allowed;transform: none} .show-more-text {flex: 1} .show-more-icon {font-size: 16px;transition: transform 0.3s ease} .show-more-btn:hover:not(:disabled) .show-more-icon {transform: scale(1.1)} .more-recommendations-explanation {font-size: 0.9rem;opacity: 0.7;margin-bottom: 2rem} .recommendation-card.fade-in {animation: fadeInUp 0.5s ease forwards} @keyframes fadeInUp {from {opacity: 0;transform: translateY(20px)} to {opacity: 1;transform: translateY(0)} } .plants .recommendations-section-title {color: #2d5016;border-bottom-color: #90c695} .plants .show-more-btn {background: linear-gradient(135deg, #5c8a3c 0%, #4a7230 100%);box-shadow: 0 2px 8px rgba(92, 138, 60, 0.3)} .plants .show-more-btn:hover:not(:disabled) {background: linear-gradient(135deg, #4a7230 0%, #3d5f26 100%);box-shadow: 0 4px 12px rgba(92, 138, 60, 0.4)}