/* ===========================================================
   VARIABLES
   =========================================================== */
   
:root {
  --primary: #7c9fee;
  --primary-hover: #4f7ce0;
  --primary-diabled: #E5E7EB;
  --secondary: #d6e6d9;
  --secondary-text: #344b42;
  --primary-text: #ffffff;
  --text-dark: #1f2937;
  --text-light: #6c757d;
  --text-success: #8bb38f;
  --text-error: #9b1c28;
  --text-typing: #8bb38f;
  --background: linear-gradient(180deg, #eef4f2 0%, #f8f9fa 100%);
  --container-bg: #ffffff;
  --border: #e5e7eb;
  --scrollbar-thumb: #c1c1c1;
  --dialog-section-bg: #F8FAFC;
  --pdf-bg: #f8f9fa;
  --pdf-bg-hover: #eef1f4;
  --pdf-border-hover: #d5d9df;
  --focus-ring: 0 0 0 3px rgba(139,167,233,0.35);
  --focus-color: var(--primary);
  --focus-radius: 12px;
}

/* ===========================================================
   DOCUMENT
   =========================================================== */
  
body {
  margin: 0;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  background: var(--background);
  color: var(--text-dark);
  display: flex;
  justify-content: center;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }

/* Focus appearance -------------------------------------------*/

a,
button,
input,
textarea,
select,
.form-control,
.btn,
[tabindex]:not([tabindex="-1"]) {
  outline: none;
}   
   
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.form-control:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  border-color: var(--focus-color);
  box-shadow: var(--focus-ring);
  border-radius: var(--focus-radius);
}

/* btn-primary-custom -----------------------------------------*/

.btn-primary-custom {
  background: var(--primary);
  color: var(--primary-text);
  border: none;
  border-radius: 12px;
  font-weight: 500;
}

.btn-primary-custom:hover {
  background: var(--primary-hover);
  color: var(--primary-text);
}

.btn-primary-custom:focus-visible {
  background: var(--primary-hover);
  color: var(--primary-text);
  box-shadow: var(--focus-ring);
}

.btn.btn-primary-custom:active,
.btn.btn-primary-custom:active:focus {
  background: var(--primary-hover);
  color: var(--primary-text);
}

.btn-primary-custom:disabled,
.btn-primary-custom.disabled {
  background-color: var(--primary-diabled);
  color: #fff;
  cursor: not-allowed;
  opacity: 0.75;
  box-shadow: none;
}

/* ===========================================================
   CHAT
   =========================================================== */

/* Chat Container ---------------------------------------------*/

#chat-container {
	width: 100%;
	max-width: 820px;
	height: 100vh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	background-color: var(--container-bg);
	border-radius: 24px;
	overflow: hidden;
	margin: 0 auto;
	border: 1px solid #e6e6e6;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Chat Intro ----------------------------------------------*/

.chat-intro { 
	background-color: #fafafa; 
	border-bottom: 1px solid #eee; 
	border-radius: 0;
	padding: 0.75em 1em;
	font-size: 0.9rem; 
	line-height: 1.4; 
	color: #333; 
	position: sticky; 
	top: env(safe-area-inset-top); 
	z-index: 10; 
}

#progress-text {
	display: flex;          
	align-items: center;
	justify-content: center; 
	gap: 6px;
	font-size: 0.85rem;
	color: var(--text-light);
	text-align: left;        
	margin: 0.75rem auto 0;  
	max-width: 90%;          
	word-break: break-word;  
}

#progress-text .icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: url("/static/chat/time.7e32fbaf427c.png") center / contain no-repeat;
}

#progress-text.status-final .icon {
  background-image: url("/static/chat/check.7ac889589b3c.png");
}

/* Chat Box ---------------------------------------------------*/

#chat-box { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 12px; background-color: #f7f9fa; scroll-behavior: smooth; }

#chat-box::-webkit-scrollbar { width: 6px; }

#chat-box::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 3px; }

.message {  
	border-radius: 1.1em;
	padding: 0.75em 1em;
	max-width: 85%; 
	word-break: break-word; 
	box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
	line-height: 1.45; }

.message.bot { align-self: flex-start; background: var(--secondary); color: var(--secondary-text); }

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

.message.system { align-self: center; text-align: center; font-style: italic; max-width: 70%; background: transparent; padding: 0;  box-shadow: none; }

.message.typing { background: transparent; color: var(--text-typing); font-style: italic; }

.message.error { background: transparent; color: var(--text-error); }

.debug-info { border: 2px solid #f5b01b; }

/* Input Area -------------------------------------------------*/

#input-area { display: flex; align-items: stretch; gap: 0.5rem; border-top: 1px solid #dee2e6; background-color: var(--container-bg); padding: 0.75rem; padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }

#message-input { 
	min-height: 2.8em;
	padding: 0.6em 0.8em;
	flex: 1; 
	resize: none;  
	border-radius: 12px; 
	border: 1px solid #d1d5db; 
}

/* Footer -----------------------------------------------------*/

#chat-footer { text-align: center; font-size: 0.9rem; padding: 0.75rem 1rem; background-color: #f8f9fa; border-top: 1px solid #dee2e6; }

#chat-footer a { color: var(--text-light); }

#chat-footer a:hover { text-decoration: underline; }

/* ===========================================================
   MODALS
   =========================================================== */
   
.modal-content {
  border-radius: 20px !important;
  border: 1px solid var(--border) !important;
  background: var(--container-bg);
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
}

.slim-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem;
  background: #eef2fb !important;
  border-bottom: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
}

.slim-header h5 {
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0;
}

.modal-body { padding: 1.5rem 1.75rem; }

.modal-footer { border-top: none !important; padding: 1rem 1.75rem; }

.modal-content {overflow: hidden;}

/* Close Button -----------------------------------------------*/

.modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 2.2em;
	height: 2.2em;
	font-size: 1.4em;
    border: none;
    border-radius: 50%;
    background: transparent;
    line-height: 1;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}

.modal-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.modal-close:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(139,167,233,0.35);
}

/* Report Dialog ----------------------------------------------*/

#reportModal .modal-body { padding: 0; }

/* Report Loading ---------------------------------------------*/

.report-loading {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  font-size: 1rem;
  text-align: center;
}

.report-loading i {
  font-size: 2.5em;
  margin-bottom: 0.75rem;
  color: var(--primary);
}

/* Report Wrapper ---------------------------------------------*/

.report-wrapper {
	padding: 20px;
}

/* Download Section -------------------------------------------*/

.report-download-section { 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	padding: 1rem 1.5rem 1rem; 
	background-color: var(--dialog-section-bg); 
	border-top: 1px solid var(--border);
}

/* Paywall ----------------------------------------------------*/

.paywall-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem 1rem;
	background-color: var(--dialog-section-bg);
	border-top: 1px solid var(--border);
}

.paywall-content {
    width: 100%;
    text-align: center;
}
.paywall-headline {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
	margin-bottom: 0.5rem;
}

.paywall-benefits {
    list-style: none;
    padding: 0;
    margin-bottom: 0.4rem;
	display: inline-block; 
    max-width: 420px;
}

.paywall-benefits li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.4rem;
    text-align: left;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.paywall-benefits li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary);
    font-weight: 600;
}

.paywall-price {
    font-size: 1rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.paywall-trust {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 0.75rem;
}

/* Payment State ----------------------------------------------*/

.payment-state {
    width: 100%;
    padding: 1rem 1.5rem 1rem;
	background-color: var(--dialog-section-bg);
	border-top: 1px solid var(--border);
    text-align: center;
}

.payment-headline {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
	margin-bottom: 1rem;
}

#payment-form {
    max-width: 420px;
    margin: 0 auto;
    text-align: left;
}

#payment-element {
    margin-bottom: 1.25rem;
}

#report-dialog-payment-button {
    width: 100%;
    margin-top: 0.5rem;
}

.payment-trust {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-light);
    text-align: center;
}

.payment-message {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: #dc2626; 
    text-align: center;
}

#payment-processing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-light);
}

#payment-processing .spinner-border {
    width: 1rem;
    height: 1rem;
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
   
@media (max-width: 768px) {
	#chat-container { width: 100%; border-radius: 0; border:none; box-shadow:none; }
	#chat-box { padding: 1rem 0.75rem; gap:16px; }
	#input-area { padding:1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom));}
	#message-input { min-height:55px; padding:0.75rem 1rem; }
	#send-button { padding: 0.7em 1.4em; }
	#chat-footer { display:none !important; }
}

@media (min-width: 768px) {
  body {
    padding: 2rem 0;
  }

  #chat-container {
    height: calc(100dvh - 4rem);
    border-radius: 24px;
    border: 1px solid #e6e6e6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
}