@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #ffffff;
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 100px auto;
    padding: 20px;
  }
}

/* adjusts both search boxes */
.search-box {
  display: flex;
  width: 280px; /* adjusts right width */
  background: transparent;
  border-radius: 9999px; /* adjusts how circular the box is */
  padding: 6px 14px; /* stretch: vertical(px) horizontal(px) */
  margin-bottom: 18px; /* space between the two boxes */
  transition: border-color 0.2s, box-shadow 0.2s;
}

#search-ddg { /* affects only duckduckgo */
	border: 1px solid #de5833;
	margin-top: 20px;
}

#search-wiki { /* affects only wikipedia */
	border: 1px solid #36c;
}

#search-google { /* affects only google */
	border: 1px solid #EA4335;
}

#search-ddg:hover {
  box-shadow: 0 0 0 3px rgba(222, 88, 51, 0.25);
}

#search-wiki:hover {
  box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.25);
}

#search-google:hover {
	box-shadow: 0 0 0 3px rgba(234, 67, 53, 0.25);
}

#search-ddg:focus-within {
  border-color: #de5833; /* orange */
  box-shadow: 0 0 0 3px rgba(222, 88, 51, 0.25);
}

#search-wiki:focus-within {
  border-color: #36c; /* blue */
  box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.25);
}

#search-google:focus-within {
	border-color: #EA4335;
	box-shadow: 0 0 0 3px rgba(234, 67, 53, 0.25);
}

/* BEGIN STARTPAGE SEARCH */

#search-startpage { /* affects only startpage */    
    border: 1px solid #653780;
}

#search-startpage:hover {    
    box-shadow: 0 0 0 3px rgba(101, 55, 128, 0.25);
}

#search-startpage:focus-within {
    border-color: #653780;
    box-shadow: 0 0 0 3px rgba(101, 55, 128, 0.25);
}

/* END STARTPAGE SEARCH */

/* adjusts both search box inputs */
.search-box input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #444;
  caret-color: #222; /* allows cursor to show */
  font-size: 15px;
  padding: 4px 0;
}

.search-box input::placeholder {
  color: #888;
}

/* ===== HOME PAGE CHAT BUTTON ===== */
.pill-btn {
  display: block;
  width: 280px;
  background: rgba(128, 128, 128, 0.5); /* grey, 0.5 transparency */
  border: 1px solid #2ecc40;            /* green border */
  border-radius: 9999px;
  color: #ffffff;
  font-size: 15px;
  padding: 10px 14px;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.pill-btn:hover {
  box-shadow: 0 0 0 3px rgba(46, 204, 64, 0.25);
}

/* ===== CHAT VIEW (always dark) ===== */
body.chat-mode {
  background-color: #121212;
  color: #ffffff;
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  height: 100vh;
  box-sizing: border-box;
}
#chat-view {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 40px);
}
#chat-view[hidden] { display: none; }

.chat-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
  font-size: 18px;
}
.back-link {
  background: none;
  border: none;
  color: #aaa;
  font-size: 15px;
  cursor: pointer;
  padding: 0;
}
.back-link:hover { color: #fff; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  border: 1px solid #333;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  white-space: pre-wrap;   /* plaintext display */
  overflow-wrap: anywhere;
  line-height: 1.4;
  font-size: 15px;
}
.msg.user {
  align-self: flex-end;
  background: #1f3d2a;
  border: 1px solid #2ecc40;
}
.msg.bot {
  align-self: flex-start;
  background: #1e1e1e;
  border: 1px solid #333;
}
.msg.error {
  align-self: flex-start;
  background: #3a1a1a;
  border: 1px solid #EA4335;
}

.chat-input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.chat-input-row textarea {
  flex: 1;
  resize: none;
  max-height: 140px;
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #333;
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
}
.chat-input-row textarea:focus { border-color: #2ecc40; }

.send-btn {
  background: rgba(46, 204, 64, 0.15);
  border: 1px solid #2ecc40;
  border-radius: 9999px;
  color: #ffffff;
  font-size: 15px;
  padding: 10px 24px;
  cursor: pointer;
}
.send-btn:hover { box-shadow: 0 0 0 3px rgba(46, 204, 64, 0.25); }
.send-btn:disabled { opacity: 0.5; cursor: default; }