/* ============================================
   CONCIERGE MODULE - Lu Nibareddu
   ============================================ */

/* === CONCIERGE HEADER === */
.concierge-header {
    text-align: center;
    padding: var(--space-8) var(--space-4) var(--space-6);
    background: transparent;
}

.concierge-logo {
    height: 80px;
    width: auto;
    margin-bottom: var(--space-4);
}

.concierge-header .view-title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--text-inverse);
}

.concierge-header .view-subtitle {
    font-size: var(--text-lg);
    margin-top: var(--space-2);
    color: rgba(255, 255, 255, 0.85);
}

/* === CONCIERGE CONTENT === */
.concierge-content {
    padding: 0 var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* === CONCIERGE CARD === */
.concierge-card {
    background: var(--bg-secondary);
    border: none;
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-float);
}

.concierge-section-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--space-4);
}

/* === CONTACT ITEMS === */
.contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);

    padding: var(--space-4);
    margin: 0 calc(-1 * var(--space-5));

    text-decoration: none;
    color: inherit;

    border-bottom: 1px solid var(--border-light);

    transition: background var(--duration-fast) var(--ease-out);
}

.contact-item:first-of-type {
    margin-top: calc(-1 * var(--space-1));
}

.contact-item:last-of-type {
    border-bottom: none;
    margin-bottom: calc(-1 * var(--space-1));
}

.contact-item:hover {
    background: var(--bg-tertiary);
}

.contact-item:active {
    background: var(--border-light);
}

.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;
    flex-shrink: 0;

    background: rgba(107, 83, 68, 0.1);
    border-radius: var(--radius-lg);

    color: var(--brand-brown);
}

.contact-icon svg {
    width: 24px;
    height: 24px;
}

.contact-icon.material-symbols-outlined {
    font-size: 24px;
}

/* WhatsApp special styling */
.contact-whatsapp .contact-icon {
    background: #25D366;
    color: white;
}

.contact-info {
    flex: 1;
    min-width: 0;
}

.contact-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-bottom: var(--space-1);
}

.contact-value {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}

.contact-arrow {
    color: var(--text-muted);
    font-size: 20px;
}

/* === HOURS GRID === */
.hours-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.hours-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hours-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.hours-value {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

/* === INFO LIST === */
.info-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.info-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);

    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.info-item .material-symbols-outlined {
    font-size: 20px;
    color: var(--brand-brown);
}

/* === WIFI COPY ZONES (Concierge) === */
.concierge-wifi-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
}

.concierge-wifi-zone:last-child {
    border-bottom: none;
}

.concierge-wifi-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.concierge-wifi-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.concierge-wifi-network {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.concierge-wifi-copy {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-tertiary, #f5f5f5);
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.concierge-wifi-copy:active {
    transform: scale(0.97);
}

.concierge-wifi-copy:hover {
    background: var(--bg-secondary, #eee);
}

.concierge-wifi-copy code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.concierge-wifi-copy .material-symbols-outlined {
    font-size: 18px;
    color: var(--brand-brown);
}

/* === INFO SECTION ITEMS (dynamic accordion content) ===
   Ogni voce e' un <details> nativo — click sul summary toggla l'apertura.
   Il map link (se presente) si preserva via stopPropagation nel JS. */
.info-section-item {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
}

.info-section-item:last-child {
    border-bottom: none;
}

/* Rimuovi marker default (triangolino) su tutti i browser */
.info-section-item > summary::-webkit-details-marker { display: none; }
.info-section-item > summary { list-style: none; }

.info-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    user-select: none;
}

.info-section-header strong {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.info-section-chevron {
    font-size: 20px !important;
    color: var(--text-secondary);
    transition: transform 0.25s ease;
}
.info-section-item[open] .info-section-chevron {
    transform: rotate(180deg);
}

.info-section-map {
    display: flex;
    align-items: center;
    color: var(--brand-nature, #2E856E);
    text-decoration: none;
}

.info-section-map .material-symbols-outlined {
    font-size: 20px;
}

.info-section-content {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    margin: var(--space-2) 0 var(--space-1) calc(20px + var(--space-2));
    white-space: pre-wrap;
    animation: info-section-expand 0.22s ease;
}

@keyframes info-section-expand {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === EMERGENCY CARD === */
.concierge-emergency {
    background: #FEF2F2;
    border: 2px solid rgba(196, 92, 74, 0.3);
}

.concierge-emergency .concierge-section-title {
    color: var(--status-error);
}

/* === LEGAL INFO === */
.legal-info .concierge-section-title {
    margin-bottom: var(--space-3);
}

.legal-content {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    line-height: 1.6;
}

.legal-content p {
    margin: 0 0 var(--space-1) 0;
}

.legal-content p:last-child {
    margin-bottom: 0;
}

.legal-content strong {
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
}

/* ============================================
   CONCIERGE AI CHAT (F15)
   ============================================ */

/* === CHAT CONTAINER === */
.concierge-chat {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
    overflow: hidden;
    min-height: 500px;
    max-height: 80vh;
}

/* === CHAT MESSAGES === */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* === WELCOME MESSAGE === */
.chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    text-align: center;
}

.chat-welcome-icon {
    font-size: 48px;
    color: var(--brand-brown);
    opacity: 0.8;
}

.chat-welcome-text {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 300px;
}

/* === CHAT MESSAGE BUBBLES === */
.chat-msg {
    display: flex;
    max-width: 85%;
}

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

.chat-msg--assistant {
    align-self: flex-start;
}

.chat-msg--system {
    align-self: center;
    max-width: 90%;
}

.chat-bubble {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    line-height: 1.5;
    word-break: break-word;
}

.chat-msg--user .chat-bubble {
    background: var(--brand-brown);
    color: white;
    border-bottom-right-radius: var(--radius-sm);
}

.chat-msg--assistant .chat-bubble {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-bottom-left-radius: var(--radius-sm);
}

.chat-msg--system .chat-bubble {
    background: transparent;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    text-align: center;
    font-style: italic;
}

/* === TYPING INDICATOR === */
.typing-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    height: 20px;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: typing-bounce 1.4s infinite ease-in-out;
}

.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-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* === REMAINING QUESTIONS (F21) === */
.chat-remaining {
    text-align: center;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    border-top: 1px solid var(--border-light);
}

.chat-remaining--warning {
    color: #b45309;
    font-weight: var(--weight-medium);
}

.chat-remaining--exhausted {
    color: var(--status-error);
    font-weight: var(--weight-semibold);
}

/* === CHAT INPUT === */
.chat-input-area {
    border-top: 1px solid var(--border-light);
    padding: var(--space-3);
}

.chat-form {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.chat-input {
    flex: 1;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--duration-fast) var(--ease-out);
}

.chat-input:focus {
    border-color: var(--brand-brown);
}

.chat-input::placeholder {
    color: var(--text-muted);
}

.chat-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--brand-brown);
    color: white;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.chat-send-btn:active {
    opacity: 0.7;
}

.chat-send-btn .material-symbols-outlined {
    font-size: 20px;
}

/* === COLLAPSIBLE DETAILS (Contact/Info) === */
.concierge-details {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
    overflow: hidden;
}

.concierge-details-summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    list-style: none;
}

.concierge-details-summary::-webkit-details-marker {
    display: none;
}

.concierge-details-summary .material-symbols-outlined {
    font-size: 20px;
    color: var(--brand-brown);
}

.concierge-chevron {
    margin-left: auto;
    transition: transform var(--duration-normal) var(--ease-out);
}

.concierge-details[open] .concierge-chevron {
    transform: rotate(180deg);
}

.concierge-details-body {
    padding: 0 var(--space-5) var(--space-5);
}