/* Camino Downloads Theme – styles.css */
/* Author: Simon + Copilot | Date: 2025-09-14 */

/* New Portal Base colors */
:root {
  --camino-dark: #1A1A1A;
  --camino-accent: #0DE59D;
  --camino-bg: #F8F9FA;
  --camino-border: #E0E0E0;
  --camino-green: #0EA353;
  --camino-green-light: #14EB77;
  --camino-portal-green: #0C8C48;
  /* Add missing variables used in footer */
  --camino-portal-dark: #121212;
  --camino-portal-green-light: #12D96B;
  --camino-portal-accent: #0BCB8B;
  --camino-portal-border: #D6D8DA;
}

/* Body and typography */
body {
  background-color: var(--camino-bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #333;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--camino-green);
}

/* Tables */
.table {
  border: 1px solid var(--camino-border);
}
.table th {
  background-color: var(--camino-green);
  color: #fff;
}
.table td {
  vertical-align: middle;
}
.table-bordered th,
.table-bordered td {
  border-color: var(--camino-border);
}

/* Footer */
footer {
  background-color: var(--camino-portal-dark);
  color: #fff;
}
footer h5 {
  color: var(--camino-portal-green-light);
}
footer a {
  color: #fff;
}
footer a:hover {
  color: var(--camino-portal-accent);
  text-decoration: underline;
}
footer hr {
  border-top: 1px solid var(--camino-portal-border);
}

/* Alerts */
.alert-danger {
  background-color: #dc3545;
  color: #fff;
}
.alert-warning {
  background-color: #ffc107;
  color: #212529;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .navbar-brand {
    font-size: 1rem;
  }
  footer .row > div {
    text-align: center;
  }
}

/*AI Chat*/
#userInput:focus {
  outline: none;
  box-shadow: none;
  border: 1px solid #ccc;
  background-color: white;
  caret-color: auto;
}

.chat-messages {
  border: 1px solid #dee2e6;
}
.chat-message {
  animation: fadeIn 0.3s ease-in;
  margin-bottom: 1rem;
}

.user-message .alert {
  background-color: rgba(13, 110, 253, 0.35); /* Deep tint of --bs-primary */
  color: #0a0a0a; /* Very dark gray, nearly black */
  border: 1px solid rgba(13, 110, 253, 0.5);
  border-radius: 1rem 1rem 0 1rem;
  margin-left: auto;
  padding: 0.75rem 1rem;
  max-width: 60%;
}

.ai-message .alert {
  background: var(--bs-light);
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem 1rem 1rem 0;
  padding: 0.75rem 1rem;
  margin-right: auto;
  max-width: 100%;
}

.typing-dots {
  display: inline-flex;
  gap: 4px;
}
.typing-dots span {
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background-color: #6c757d;
  animation: typing-dot 1.4s ease-in-out infinite both;
}
.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing-dot {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/*AI chat sidebar*/
.context-menu {
    min-width: 150px;
    border: 1px solid #dee2e6;
}

.context-menu-item {
    font-size: 14px;
}

.context-menu-item:hover {
    background-color: #f8f9fa;
}

.context-menu-item:first-child {
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

.context-menu-item:last-child {
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

/* GPX Builder Download Modal */
#loadingModal {
    z-index: 99999 !important;
}

#loadingModal .modal-backdrop {
    z-index: 99998 !important;
}

#loadingModal .spinner-border {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ---------------------------------------------------------
   Camino GPX Tools – Shared UI Tweaks
   Ensures consistent look across Builder, Viewer, Simplifier
---------------------------------------------------------- */

/* Floating control card (matches Builder) */
.gpx-tools-floating-card {
    width: 320px;
    z-index: 9999;
    top: 15px;
    right: 15px;
}

/* Collapse button (tight, minimal) */
.gpx-tools-collapse-btn {
    padding: 2px 6px;
    line-height: 1;
}

/* Map container consistency */
#simplifierMap {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

/* Results box typography */
#resultsBox p {
    font-size: 0.875rem;
}

/* Card shadow consistency */
.gpx-tools-floating-card .card {
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.15);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .gpx-tools-floating-card {
        width: 90%;
        right: 5%;
        top: 10px;
    }
}