/* Miqdaar — Responsive Islamic Calculator UI */

:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --primary: #0f766e;
  --max-content: 42rem;
}

@media (min-width: 768px) {
  :root { --max-content: 48rem; }
}
@media (min-width: 1024px) {
  :root { --max-content: 56rem; }
}

.safe-area-bottom { padding-bottom: var(--safe-bottom); }

[dir="rtl"] { font-family: 'Amiri', 'Noto Naskh Arabic', serif; }
.font-arabic { font-family: 'Amiri', 'Noto Naskh Arabic', serif; line-height: 1.85; }

.app-shell { max-width: var(--max-content); margin-left: auto; margin-right: auto; }

.card {
  background: white; border-radius: 1rem; border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.card-interactive {
  background: white; border-radius: 1rem; border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
}
.card-interactive:hover {
  box-shadow: 0 4px 12px rgba(15,118,110,0.08);
  border-color: #99f6e4;
}
.card-interactive:active { transform: scale(0.99); }

.progress-dot {
  width: 0.625rem; height: 0.625rem; border-radius: 9999px;
  background: #cbd5e1; transition: all 0.2s;
}
.progress-dot.active { background: #0f766e; transform: scale(1.25); }
.progress-dot.done { background: #2dd4bf; }

.badge-verified {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.125rem 0.625rem; border-radius: 9999px;
  font-size: 0.75rem; font-weight: 500;
  background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0;
}
.badge-warning {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.125rem 0.625rem; border-radius: 9999px;
  font-size: 0.75rem; font-weight: 500;
  background: #fffbeb; color: #b45309; border: 1px solid #fde68a;
}
.badge-scholar {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.125rem 0.625rem; border-radius: 9999px;
  font-size: 0.75rem; font-weight: 500;
  background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1;
}

.btn-primary {
  width: 100%; padding: 0.875rem 1.5rem; border-radius: 0.75rem;
  background: #0f766e; color: white; font-weight: 600; font-size: 1rem;
  transition: background 0.15s;
}
.btn-primary:hover { background: #115e59; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  width: 100%; padding: 0.875rem 1.5rem; border-radius: 0.75rem;
  background: white; color: #0f766e; font-weight: 600; font-size: 1rem;
  border: 2px solid #99f6e4; transition: background 0.15s;
}
.btn-secondary:hover { background: #f0fdfa; }

.btn-ghost {
  padding: 0.625rem 1rem; border-radius: 0.5rem;
  color: #475569; font-weight: 500; transition: background 0.15s;
}
.btn-ghost:hover { background: #f1f5f9; }

.input-field {
  width: 100%; padding: 0.75rem 1rem; border-radius: 0.75rem;
  border: 1px solid #cbd5e1; background: white; font-size: 1rem;
}
.input-field:focus {
  outline: none; border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15,118,110,0.15);
}
.input-field::placeholder { color: #94a3b8; }

.select-field {
  width: 100%; padding: 0.75rem 2.5rem 0.75rem 1rem; border-radius: 0.75rem;
  border: 1px solid #cbd5e1; background: white; font-size: 1rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.25rem;
}
.select-field:focus {
  outline: none; border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15,118,110,0.15);
}

.ayah-card {
  background: white; border-radius: 1rem; border: 1px solid #e2e8f0;
  border-right: 4px solid #0f766e; padding: 1.25rem;
}
.hadith-card {
  background: white; border-radius: 1rem; border: 1px solid #e2e8f0;
  border-right: 4px solid #d97706; padding: 1.25rem;
}

.logo-home {
  width: 7rem; height: 7rem; object-fit: contain; margin: 0 auto;
}
@media (min-width: 640px) {
  .logo-home { width: 9rem; height: 9rem; }
}

@media (min-width: 768px) {
  .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .calc-full { grid-column: 1 / -1; }
}

.chat-fab {
  position: fixed; bottom: 5.5rem; right: 1rem; z-index: 45;
  width: 3.5rem; height: 3.5rem; border-radius: 9999px;
  background: #0f766e; color: white;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(15,118,110,0.4);
  transition: transform 0.15s, background 0.15s;
  border: none; cursor: pointer;
}
.chat-fab:hover { background: #115e59; transform: scale(1.05); }
@media (min-width: 768px) {
  .chat-fab { bottom: 2rem; right: 2rem; }
}

.chat-panel {
  position: fixed; bottom: 9.5rem; right: 1rem; z-index: 45;
  width: min(22rem, calc(100vw - 2rem));
  max-height: 28rem;
  background: white; border-radius: 1rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  display: flex; flex-direction: column; overflow: hidden;
}
@media (min-width: 768px) {
  .chat-panel { bottom: 6rem; right: 2rem; width: 24rem; max-height: 32rem; }
}

.chat-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.chat-bubble-user {
  align-self: flex-end; background: #0f766e; color: white;
  padding: 0.5rem 0.875rem; border-radius: 1rem 1rem 0.25rem 1rem;
  max-width: 85%; font-size: 0.875rem;
}
.chat-bubble-bot {
  align-self: flex-start; background: #f1f5f9; color: #1e293b;
  padding: 0.5rem 0.875rem; border-radius: 1rem 1rem 1rem 0.25rem;
  max-width: 90%; font-size: 0.875rem;
}

.option-chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.5rem 0.875rem; border-radius: 9999px;
  border: 1px solid #e2e8f0; background: white;
  font-size: 0.875rem; font-weight: 500; cursor: pointer;
  transition: all 0.15s;
}
.option-chip:hover { border-color: #99f6e4; background: #f0fdfa; }
.option-chip.active {
  border-color: #0f766e; background: #ccfbf1; color: #115e59;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

@media print {
  #header, #bottom-nav, #side-menu, .chat-fab, .chat-panel, .no-print { display: none !important; }
}