/* PPHC-inspired theme for SSO Chatbot */

:root {
  --pphc-navy: #1a2440;
  --pphc-blue: #2563eb;
  --pphc-lightblue: #8ed1fc;
  --pphc-gray: #e5e7eb;
  --pphc-bg: #2563eb; /* PPHC brilliant blue */
  --pphc-white: #fff;
  --pphc-accent: #0693e3;
  --pphc-red: #cf2e2e;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
}

body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  background: var(--pphc-bg) url('https://pphcompany.com/wp-content/uploads/2020/08/pphc-canvas.png') center center/cover no-repeat;
  background-blend-mode: multiply;
  /* The blue overlays the image for a branded effect */
  color: var(--pphc-navy);
  /* font-size: 18px; */
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Container styles */
.container,
.login-container,
.not-found-container {
  background: var(--pphc-white);
  padding: 2rem 3rem;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(26,36,64,0.18);
  text-align: center;
  align-self: center;
  max-width: 500px;
  margin: 4em auto;
}

/* Headings */
h1, h2, h3, h4 {
  font-family: inherit;
  font-weight: 700;
  color: var(--pphc-navy);
  margin-bottom: 1.2rem;
}

h1.access-denied {
  color: var(--pphc-red);
  font-size: 2.2em;
}

h1.not-found {
  color: var(--pphc-red);
  font-size: 2.2em;
}

h1, h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.3em;
  color: var(--pphc-blue);
  letter-spacing: 1px;
}

p {
  margin-bottom: 1.5em;
  color: #222;
  font-size: 1.1em;
}

/* Buttons */
.auth-btn,
.logout-btn,
.bd_button,
.header-bar button {
  background: var(--pphc-blue);
  color: var(--pphc-white);
  border: none;
  border-radius: 999px;
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(26,36,64,0.08);
  transition: background 0.2s, opacity 0.2s;
}

.auth-btn.microsoft {
  background: var(--pphc-navy);
}

.auth-btn.google {
  background: var(--pphc-accent);
}

.auth-btn:hover,
.logout-btn:hover,
.bd_button:hover,
.header-bar button:hover {
  background: var(--pphc-lightblue);
  color: var(--pphc-navy);
  opacity: 0.9;
}

/* Links */
a {
  color: var(--pphc-blue);
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.2s;
}
a:hover {
  color: var(--pphc-accent);
}

/* Header bar */
.header-bar {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2em 1.5em 1em 1.5em;
  background: var(--pphc-blue);
  border-bottom: 2px solid var(--pphc-gray);
  border-left: 2px solid var(--pphc-gray);
  border-right: 2px solid var(--pphc-gray);
  box-shadow: 0 8px 32px rgba(26,36,64,0.18);
  flex: 0 0 auto;
  border-radius: 0 0 16px 16px;
}

.header-logo img {
  max-height: 1.5rem;
  width: auto;
  border-radius: 0;
  box-shadow: none;
}

.header-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pphc-white);
  padding: 0.3rem 0;
}

.header-bar button {
  background: var(--pphc-gray);
  color: var(--pphc-navy);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  transition: background 0.2s;
}

.header-bar button:hover {
  background: var(--pphc-lightblue);
  color: var(--pphc-navy);
}

/* Chat styles */
#n8n-chat {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--pphc-white);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(26,36,64,0.18);
  margin: 2em auto;
  max-width: 85%;
  width: 90%;
  padding: 2em 2em 1em 2em;
  display: flex;
  flex-direction: column;
}

#n8n-chat .chat-header {
  padding: 0.5em 1em !important;
  margin-bottom: 0 !important;
  min-height: unset !important;
}

#n8n-chat .chat-header .chat-heading h1 {
  font-size: 1.2em !important;
  font-weight: 700 !important;
  margin-bottom: 0 !important;
  line-height: 1 !important;
  color: var(--pphc-navy) !important;
}

#n8n-chat .chat-header p {
  font-size: 1em !important;
  margin-bottom: 0 !important;
  line-height: 1.1 !important;
  color: #4b5563 !important;
}

#n8n-chat .chat-input textarea {
  border-radius: 8px !important;
  border: 1px solid var(--pphc-gray) !important;
  font-size: 1em !important;
  padding: 0.5em !important;
  background: var(--pphc-white) !important;
  color: #222 !important;
  margin-bottom: 0.1em !important;
}

#n8n-chat .chat-input button {
  background: var(--pphc-blue);
  color: var(--pphc-white);
  border-radius: 999px;
  border: none;
  padding: 0.7em 1.5em;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

#n8n-chat .chat-input button:hover {
  background: var(--pphc-lightblue);
  color: var(--pphc-navy);
}

/* Responsive */
@media (max-width: 700px) {
  #n8n-chat {
    margin: 0.5rem;
    padding: 0.5rem;
    max-width: 90%;
  }
  .header-bar {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.5rem;
    max-width: 90%;
  }
  .container,
  .login-container,
  .not-found-container {
    padding: 1.5rem 1rem;
    margin: 2rem auto;
  }
}

/* Footer styles (optional, if you have a footer) */
.bd_footer {
  background: var(--pphc-navy);
  color: var(--pphc-white);
  padding: 2em 0;
  border-radius: 16px 16px 0 0;
  margin-top: 2em;
  box-shadow: 0 -8px 32px rgba(26,36,64,0.18);
}
.bd_footer_nav a {
  color: var(--pphc-white);
  font-weight: 500;
  margin: 0 0.5em;
}
.bd_footer_nav a:hover {
  color: var(--pphc-lightblue);
}

/* Utility classes */
.bd_eyebrow {
  color: var(--pphc-blue);
  font-size: 1.1em;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 0.5em;
}
.bd_highlight_heading .highlight span {
  background: var(--pphc-lightblue);
  color: var(--pphc-navy);
  border-radius: 4px;
  padding: 0 0.2em;
  margin: 0 0.1em;
}

/* Form elements */
#n8n-chat input,
#n8n-chat textarea,
#n8n-chat select,
.chat-layout input,
.chat-layout textarea,
.chat-layout select {
  font-family: inherit !important;
  border-radius: 8px !important;
  border: 1px solid var(--pphc-gray) !important;
  background: var(--pphc-bg) !important;
  color: var(--pphc-navy) !important;
  padding: 0.5em 1em !important;
  font-size: 1em !important;
  transition: border-color 0.2s !important;
}
#n8n-chat input:focus,
#n8n-chat textarea:focus,
#n8n-chat select:focus,
.chat-layout input:focus,
.chat-layout textarea:focus,
.chat-layout select:focus {
  border-color: var(--pphc-blue) !important;
  outline: none !important;
}

/* Chat message bubbles */
.chat-message {
  background: var(--pphc-white) !important;
  color: var(--pphc-navy) !important;
  border-radius: 16px !important;
  border: 1px solid var(--pphc-gray) !important;
  padding: 1em 1.5em !important;
  margin-bottom: 1em !important;
  box-shadow: 0 2px 8px rgba(26,36,64,0.05) !important;
  max-width: 80% !important;
  word-break: break-word !important;
}
.chat-message-from-bot {
  background: var(--pphc-gray) !important;
  color: var(--pphc-navy) !important;
  border: 1px solid var(--pphc-gray) !important;
}
.chat-message-from-user {
  background: var(--pphc-white) !important;
  color: var(--pphc-navy) !important;
  border: 1px solid var(--pphc-gray) !important;
  align-self: flex-end !important;
}
.chat-message-markdown p {
  color: var(--pphc-navy) !important;
  font-size: 1.1em !important;
}

/* Avatar/Icon styles */
.chat-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--pphc-gray) !important;
  object-fit: cover !important;
  margin-right: 0.5em !important;
}

/* Scrollbar styling */
#n8n-chat,
.chat-messages-list {
  scrollbar-width: thin !important;
  scrollbar-color: var(--pphc-blue) var(--pphc-bg) !important;
}
#n8n-chat::-webkit-scrollbar,
.chat-messages-list::-webkit-scrollbar {
  width: 8px !important;
  background: var(--pphc-bg) !important;
}
#n8n-chat::-webkit-scrollbar-thumb,
.chat-messages-list::-webkit-scrollbar-thumb {
  background: var(--pphc-blue) !important;
  border-radius: 8px !important;
}

/* Message meta info */
.chat-meta,
.chat-timestamp {
  color: var(--pphc-gray) !important;
  font-size: 0.85em !important;
  margin-top: 0.2em !important;
}

/* Error/status messages */
.chat-error {
  color: var(--pphc-red) !important;
  background: #fff0f0 !important;
  border-radius: 8px !important;
  padding: 0.5em 1em !important;
  margin: 1em 0 !important;
}

/* Ensure all chat buttons use PPHC style */
.chat-layout button,
.chat-footer button,
#n8n-chat button {
  background: var(--pphc-blue) !important;
  color: var(--pphc-white) !important;
  border-radius: 999px !important;
  border: none !important;
  padding: 0.7em 1.5em !important;
  font-size: 1em !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
.chat-layout button:hover,
.chat-footer button:hover,
#n8n-chat button:hover {
  background: var(--pphc-lightblue) !important;
  color: var(--pphc-navy) !important;
}

/* Chat header and footer */
.chat-header {
  background: var(--pphc-white) !important;
  border-bottom: 1px solid var(--pphc-gray) !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 2px 8px rgba(26,36,64,0.03) !important;
}
.chat-footer {
  background: var(--pphc-white) !important;
  border-top: 1px solid var(--pphc-gray) !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 -2px 8px rgba(26,36,64,0.03) !important;
}