/* Chat-specific background */
body {
    background: linear-gradient(rgba(15, 20, 25, 0.7), rgba(15, 20, 25, 0.7)), url('../images/zen-bg-chat.jpg') center/cover fixed no-repeat !important;
}

.chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    max-width: 800px;
    margin: 0 auto;
    background: transparent;
    position: relative;
}

/* Header with logo */
.chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 1rem 14px 68px;
    padding-top: max(14px, calc(8px + env(safe-area-inset-top, 8px)));
    border-bottom: 1px solid var(--border-color);
    background: rgba(36, 40, 49, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.header-logo {
    font-size: 1.3rem;
}

.header-title {
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--text-color);
}

/* Scrollable messages area */
.chat-messages {
    flex: 1;
    padding: 1rem;
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: transparent;
}

.message {
    max-width: 70%;
    padding: 0.75rem 1rem;
    border-radius: 16px;
    word-wrap: break-word;
}

.message.user {
    align-self: flex-end;
    background: var(--accent-color);
    color: white;
}

.message.assistant {
    align-self: flex-start;
    background: rgba(36, 40, 49, 0.9);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Typing indicator — inside scroll area */
.typing-indicator {
    display: none;
    align-self: flex-start;
    padding: 0.75rem 1rem;
    background: rgba(36, 40, 49, 0.95);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    font-style: italic;
    opacity: 0.7;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Suggestion chips — inside scroll area, above input */
.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 4px 0;
}

.chat-suggestions.hidden {
    display: none;
}

.suggestion-chip {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.suggestion-chip:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(255, 255, 255, 0.12);
}

/* Input area — fixed to bottom */
.chat-input-container {
    padding: 12px 1rem;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
    border-top: 1px solid var(--border-color);
    background: rgba(36, 40, 49, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.chat-input-form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.chat-input {
    flex: 1;
    min-height: 44px;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-color);
    resize: none;
    min-height: 20px;
    max-height: 100px;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.2s ease;
}

.chat-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

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

.send-button {
    min-height: 44px;
    padding: 12px 20px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 24px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.send-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.send-button:hover:not(:disabled) {
    filter: brightness(1.1);
}

@media (display-mode: standalone) {
    .chat-header {
        padding-top: calc(14px + env(safe-area-inset-top, 0px));
    }
}

@media (max-width: 768px) {
    .message {
        max-width: 85%;
    }

    .chat-messages {
        padding: 0.5rem;
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }

    .chat-input-container {
        padding: 8px 0.5rem;
        padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
    }

    .chat-header {
        padding: 12px 0.75rem 12px 60px;
    }
}

/* ── FEEDBACK MODAL ── */
.feedback-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
.feedback-overlay.open { display: flex; }

.feedback-modal {
  background: var(--surface, #1e2a1e);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  width: min(420px, 90vw);
  color: var(--text-primary, #e8ede8);
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
}

.feedback-modal h3 {
  font-size: 1.1rem; font-weight: 500; margin-bottom: 0.35rem;
}

.feedback-modal p {
  font-size: 0.85rem; opacity: 0.6; margin-bottom: 1.5rem;
}

.star-row {
  display: flex; gap: 0.5rem; margin-bottom: 1.25rem;
}

.star-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1.75rem; line-height: 1; padding: 0;
  color: rgba(255,255,255,0.2);
  transition: color 0.15s, transform 0.1s;
}
.star-btn:hover, .star-btn.active { color: #c8a84b; transform: scale(1.15); }

.feedback-textarea {
  width: 100%; min-height: 90px; resize: vertical;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: inherit; font-size: 0.9rem; padding: 0.75rem;
  font-family: inherit; margin-bottom: 1.25rem;
  outline: none;
}
.feedback-textarea:focus { border-color: rgba(255,255,255,0.28); }
.feedback-textarea::placeholder { opacity: 0.35; }

.feedback-actions {
  display: flex; gap: 0.75rem; justify-content: flex-end;
}

.btn-feedback-cancel {
  background: none; border: 1px solid rgba(255,255,255,0.15);
  color: inherit; padding: 0.55rem 1.1rem; border-radius: 100px;
  font-size: 0.875rem; cursor: pointer; font-family: inherit;
  transition: background 0.15s;
}
.btn-feedback-cancel:hover { background: rgba(255,255,255,0.06); }

.btn-feedback-submit {
  background: var(--accent, #6a9e6a); border: none;
  color: white; padding: 0.55rem 1.25rem; border-radius: 100px;
  font-size: 0.875rem; cursor: pointer; font-family: inherit;
  font-weight: 500; transition: opacity 0.15s;
}
.btn-feedback-submit:disabled { opacity: 0.4; cursor: default; }
.btn-feedback-submit:not(:disabled):hover { opacity: 0.85; }

.feedback-thanks {
  text-align: center; padding: 1rem 0 0.5rem;
  font-size: 1rem; opacity: 0.8;
}