:root {
  --farmwise-bg: #f6fbfd;
  --farmwise-surface: #ffffff;
  --farmwise-surface-soft: #edf5f8;
  --farmwise-panel: #ffffff;
  --farmwise-border: #c7dce8;
  --farmwise-border-strong: #80b0d8;
  --farmwise-text: #10213a;
  --farmwise-muted: #516a85;
  --farmwise-primary: #184f88;
  --farmwise-secondary: #21a596;
  --farmwise-green: #3fba86;
  --farmwise-green-strong: #21a596;
  --farmwise-green-soft: #eef8f3;
  --farmwise-harvest: #f59e0b;
  --farmwise-danger: #b0123f;
  --farmwise-shadow: 0 12px 30px rgba(16, 33, 58, 0.09);
  color-scheme: light;
}

html[data-theme="dark"] {
  --farmwise-bg: #0d1724;
  --farmwise-surface: #142235;
  --farmwise-surface-soft: #1b2c42;
  --farmwise-panel: #111f30;
  --farmwise-border: #31465e;
  --farmwise-border-strong: #5f86aa;
  --farmwise-text: #ecf4fb;
  --farmwise-muted: #a9bbca;
  --farmwise-primary: #74b7f0;
  --farmwise-secondary: #54d7c6;
  --farmwise-green: #67d7a0;
  --farmwise-green-strong: #54d7c6;
  --farmwise-green-soft: #17392f;
  --farmwise-harvest: #f7ba4f;
  --farmwise-danger: #ff7d9e;
  --farmwise-shadow: 0 16px 34px rgba(0, 0, 0, 0.36);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: var(--farmwise-bg);
  color: var(--farmwise-text);
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Full-width container with padding */
.container {
  position: relative;
  width: min(calc(100vw - 24px), calc(100% - 24px));
  height: calc(100dvh - 10px);
  max-height: calc(100dvh - 10px);
  margin: 5px auto;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--farmwise-border);
  border-radius: 8px;
  box-shadow: var(--farmwise-shadow);
  padding: 18px 22px 20px 22px;
  overflow: hidden;
}

html[data-theme="dark"] .container {
  background: rgba(17, 31, 48, 0.97);
}

h1 {
  color: var(--farmwise-primary);
}

.chat-box {
    max-height: 390px;
    overflow-y: auto;
    border-radius: 8px;
    padding: .5rem;
    background: var(--farmwise-surface);
	border: 1px solid var(--farmwise-border);
}

.message {
  margin-bottom: 12px;
  padding: 15px 14px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(49, 72, 45, 0.07);
  transition: 0.3s;
  line-height: 1.5;
}

.message.user {
  background: #edf5f8;
  align-self: flex-end;
  text-align: left;
  margin-left: auto;
  max-width: 60%;
  border-width: 0.5px;
  border-style: solid;
  border-color: rgba(24, 79, 136, 0.34);
  transition: 0.3s;
}

.message.bot {
  background: var(--farmwise-surface);
  align-self: flex-start;
  text-align: left;
  max-width: 70%;
  border-width: 0.5px;
  border-style: solid;
  border-color: rgba(33, 165, 150, 0.40);
  transition: 0.3s;
  animation: message-fade-in 0.2s ease-out;
}

@keyframes message-fade-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.input-area {
  display: flex;
  gap: 10px;
  transition: 0.3s;
  margin-top: 8px;
}

#loader{
  padding: 8px;
  color: var(--farmwise-primary);
}

.loader {
  color: var(--farmwise-primary);
}

input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--farmwise-border-strong);
  border-radius: 6px;
  font-size: 16px;
  transition: 0.3s;
  background: #fffefb;
  color: var(--farmwise-text);
}

html[data-theme="dark"] input[type="text"] {
  background: #0f1a29;
}

input[type="text"]:focus {
  border-color: var(--farmwise-primary);
  box-shadow: 0 0 0 3px rgba(24, 79, 136, 0.14);
  outline: none;
}

input[type="range"] {
  accent-color: var(--farmwise-primary);
  height: 16px;
}

#send-btn{
  flex: 0 0 auto;
  padding: 14px 18px;
  background: var(--farmwise-primary);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  opacity: 0.7;
  transition: 0.5s;
}

#send-btn:hover {
  opacity: 1;
}

#reset-btn {
  padding: 8px 16px;
  background: #fff4f7;
  border: 1px solid rgba(176, 18, 63, 0.30);
  color: var(--farmwise-danger);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.9;
  transition: 0.2s;
}

#reset-btn:hover {
  opacity: 1;
  background: #fde8ee;
  border-color: rgba(176, 18, 63, 0.50);
}

select {
  border: 1px solid var(--farmwise-border);
  border-radius: 6px;
  background: #ffffff;
  color: var(--farmwise-text);
  padding: 5px 8px;
}