/*
  Global styles for the Freebird proxy UI.  The palette and layout
  borrow inspiration from modern privacy‑focused browsers such as
  Brave and Vivaldi while keeping the interface minimal.  Light and
  dark themes are supported via CSS variables on the body element.
*/

/* Base variables for dark mode (default). */
body.dark {
  --bg-color: #0f1115;
  --fg-color: #e4e4e4;
  --accent-color: #1a1d23;
  --border-color: #2c3038;
  --tab-active: #262a31;
  --address-bg: #1d2026;
  --highlight-color: #4d8bf5;
  --modal-header: #16191f;
  --modal-bg: #1a1d23;
}

/* Override variables for light mode. */
body.light {
  --bg-color: #f9f9fb;
  --fg-color: #1f1f1f;
  --accent-color: #e0e0e6;
  --border-color: #c5c5d0;
  --tab-active: #ffffff;
  --address-bg: #ffffff;
  --highlight-color: #2979ff;
  --modal-header: #d7d7e3;
  --modal-bg: #ffffff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  background: var(--bg-color);
  color: var(--fg-color);
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Browser container */
.browser {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* Tab bar at the very top */
.tab-bar {
  display: flex;
  background: var(--accent-color);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}
.tab-bar::-webkit-scrollbar {
  display: none;
}

/* Individual tab headers */
.tab {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 32px;
  cursor: pointer;
  border-right: 1px solid var(--border-color);
  color: var(--fg-color);
  user-select: none;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.2s;
}

.tab.active {
  background: var(--tab-active);
}

.tab .close-btn {
  margin-left: 8px;
  font-size: 14px;
  cursor: pointer;
  color: var(--fg-color);
  opacity: 0.7;
  transition: opacity 0.2s;
}
.tab .close-btn:hover {
  opacity: 1;
}

/* New tab button */
#new-tab-button {
  padding: 0 12px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--fg-color);
  font-size: 18px;
  border-left: 1px solid var(--border-color);
  user-select: none;
}
#new-tab-button:hover {
  background: var(--tab-active);
}

/* Navigation bar with back/forward/reload/address */
.nav-bar {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  background: var(--accent-color);
  border-bottom: 1px solid var(--border-color);
  gap: 8px;
}

.nav-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  color: var(--fg-color);
  font-size: 16px;
}

.nav-btn:hover {
  background: var(--tab-active);
}

/* Address bar */
.address-bar {
  flex: 1;
  padding: 6px 8px;
  border: none;
  background: var(--address-bg);
  color: var(--fg-color);
  border-radius: 6px;
  font-size: 14px;
  outline: none;
}

/* Container for tab contents */
.iframe-container {
  flex: 1;
  position: relative;
  background: var(--bg-color);
}

.tab-content {
  display: none;
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
}

.tab-content.active {
  display: block;
}

/* Notification container */
#notification-container {
  position: fixed;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
}

.notification {
  background: var(--accent-color);
  color: var(--fg-color);
  padding: 12px 16px 16px 16px;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  min-width: 260px;
  position: relative;
  transform: translateX(120%);
  animation: slideIn 0.3s ease-out forwards;
}

@keyframes slideIn {
  to {
    transform: translateX(0);
  }
}

@keyframes slideOut {
  to {
    transform: translateX(120%);
  }
}

.notification.exit {
  animation: slideOut 0.3s ease-in forwards;
}

.timer-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: var(--highlight-color);
  animation: shrink 5s linear forwards;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

@keyframes shrink {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}

/* Modal overlay and content */
#modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s;
}

#modal-overlay.active {
  visibility: visible;
  opacity: 1;
}

.modal {
  background: var(--modal-bg);
  color: var(--fg-color);
  width: 400px;
  max-width: 90%;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--modal-header);
  user-select: none;
}

.modal-header .title {
  font-weight: bold;
  font-size: 14px;
}

.modal-header .window-controls {
  display: flex;
  gap: 6px;
}

.window-control {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}

.window-control.red {
  background: #ff5f57;
}
.window-control.yellow {
  background: #febc2e;
}
.window-control.green {
  background: #28c93f;
}

.window-control.red::after {
  content: '\00d7';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: transparent;
  transition: color 0.2s;
}

.window-control.red:hover::after {
  color: #fff;
}

.modal-content {
  padding: 20px;
  font-size: 14px;
}

.modal-content .status {
  margin-top: 12px;
  font-style: italic;
}

/* Styles for landing page */
#landing-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 60px;
  height: 100%;
  text-align: center;
}

#logo-placeholder {
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: var(--tab-active);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--highlight-color);
}

#landing-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 70%;
  max-width: 600px;
  margin-bottom: 20px;
}

#landing-search select {
  padding: 6px;
  background: var(--address-bg);
  border: none;
  border-radius: 6px;
  color: var(--fg-color);
}

#landing-search input {
  flex: 1;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: var(--address-bg);
  color: var(--fg-color);
  font-size: 16px;
  outline: none;
}

#shortcuts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 800px;
}

.shortcut {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background: var(--accent-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--fg-color);
  text-decoration: none;
  font-size: 14px;
  padding: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

.shortcut:hover {
  transform: translateY(-4px);
}

/* News feed slide out for landing page */
#news-toggle {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

#news-toggle span {
  font-size: 20px;
}

#news-toggle .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff5555;
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#news-feed {
  position: fixed;
  top: 0;
  right: -350px;
  width: 320px;
  height: 100%;
  background: var(--accent-color);
  box-shadow: -4px 0 8px rgba(0,0,0,0.3);
  overflow-y: auto;
  padding: 20px;
  transition: right 0.3s ease;
  z-index: 900;
}

#news-feed.open {
  right: 0;
}

.news-card {
  background: var(--tab-active);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.news-card h3 {
  margin: 0 0 4px 0;
  font-size: 16px;
}

.news-card h4 {
  margin: 0 0 6px 0;
  font-size: 13px;
  color: var(--highlight-color);
}

.news-card p {
  margin: 0;
  font-size: 14px;
}

/* Settings page styles */
#settings-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings-section {
  background: var(--accent-color);
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.settings-section h2 {
  margin-top: 0;
  font-size: 18px;
}

.settings-section label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}

.settings-section input[type="text"],
.settings-section select {
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: var(--address-bg);
  color: var(--fg-color);
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

.settings-section input[type="text"]::placeholder {
  color: #888;
}

.settings-section button {
  margin-top: 10px;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: var(--highlight-color);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}
.settings-section button:hover {
  background: #386dcf;
}

/* Newtab shortcuts editor */
.shortcut-editor {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

.shortcut-editor input[type="text"] {
  flex: 1;
}

.shortcut-editor .order-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  background: var(--tab-active);
  color: var(--fg-color);
  cursor: pointer;
}

.shortcut-editor .remove-btn {
  background: #ff5f57;
  color: #fff;
}

/* Miscellaneous */
a {
  color: inherit;
}

/* Add a CSS variable for the news width so the toggle can calculate its offset */
:root {
  --news-width: 320px;
  --news-offset-gap: 10px; /* gap from screen edge */
}

/* News feed slide out for landing page */
#news-toggle {
  position: fixed;
  top: var(--news-offset-gap);
  right: var(--news-offset-gap);
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  z-index: 1002; /* above the news feed */
  transition: right 0.32s cubic-bezier(.2,.9,.2,1), transform 0.18s ease;
  border: none;
  color: var(--fg-color);
  font-size: 18px;
}

#news-toggle:active {
  transform: scale(0.98);
}

#news-toggle.shifted {
  /* when feed is open, push the toggle to the left by the width of the news feed */
  right: calc(var(--news-width) + var(--news-offset-gap));
}

/* Keep badge styling but ensure it stays visually attached */
#news-toggle .badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ff5555;
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* News panel uses the css variable for width */
#news-feed {
  position: fixed;
  top: 0;
  right: calc(-1 * var(--news-width));
  width: var(--news-width);
  height: 100%;
  background: var(--accent-color);
  box-shadow: -6px 0 14px rgba(0,0,0,0.35);
  overflow-y: auto;
  padding: 20px;
  transition: right 0.32s cubic-bezier(.2,.9,.2,1);
  z-index: 1000;
}

/* open state */
#news-feed.open {
  right: 0;
}

/* ensure news cards and text still look good */
.news-card {
  background: var(--tab-active);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* small responsive tweak: on small screens make feed slightly narrower */
@media (max-width: 420px) {
  :root { --news-width: 280px; }
  #news-toggle.shifted { right: calc(var(--news-width) + var(--news-offset-gap)); }
}

/* Logo: constrain size and remove card background/shadow */
#logo-placeholder {
  width: min(160px, 28vw);
  height: min(160px, 28vw);
  margin-bottom: 20px;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

/* Make the image fit the container without stretching or overflowing */
#logo-placeholder img,
#logo-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* keep whole logo visible */
  display: block;
}

/* Center landing search and make it visually clean */
#landing-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 60px;
  height: 100%;
  text-align: center;
}

/* Constrain and remove card look from logo */
#logo-placeholder {
  width: min(160px, 28vw);
  height: min(160px, 28vw);
  margin-bottom: 20px;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

#logo-placeholder img,
#logo-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Centered search bar layout */
#landing-search {
  display: flex;
  align-items: center;
  justify-content: center; /* keeps inner content centered */
  gap: 8px;
  width: min(720px, 90%);
  margin: 10px auto 20px; /* centers the whole search block */
}

/* The single input expands to fill the center area */
#landing-search input[type="text"],
#landing-query {
  width: 100%;
  max-width: 680px;
  padding: 12px 14px;
  border: none;
  border-radius: 10px;
  background: var(--address-bg);
  color: var(--fg-color);
  font-size: 16px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Remove any leftover select if present elsewhere */
#search-engine {
  display: none !important;
}

/* Tiny responsive tweak so the search doesn't look massive on very small screens */
@media (max-width: 420px) {
  #landing-search {
    width: 92%;
  }
  #landing-query {
    padding: 10px 12px;
    font-size: 15px;
  }
}

/* Settings button (top-left) */
#settings-btn {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1005;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 6px;
  border-radius: 8px;
  background: var(--accent-color);
  color: var(--fg-color);
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  font-size: 18px;
  line-height: 1;
}
#settings-btn:hover {
  transform: translateY(-1px);
}
#settings-btn:focus {
  outline: 2px solid var(--highlight-color);
  outline-offset: 2px;
}

#home-btn {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1005;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 6px;
  border-radius: 8px;
  background: var(--accent-color);
  color: var(--fg-color);
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  font-size: 18px;
  line-height: 1;
}
#home-btn:hover {
  transform: translateY(-1px);
}
#home-btn:focus {
  outline: 2px solid var(--highlight-color);
  outline-offset: 2px;
}

/* Make sure the news toggle stays in the top-right and doesn't overlap the settings button */
@media (min-width: 0px) {
  :root { --news-offset-gap: 10px; }
}

.shortcut {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background: var(--accent-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--fg-color);
  text-decoration: none;
  font-size: 14px;
  padding: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

/* Icon inside shortcut tiles */
.shortcut-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin-bottom: 8px;
  object-fit: contain;
  pointer-events: none;
}

/* Text label under the icon */
.shortcut-label {
  display: block;
  text-align: center;
  max-width: 100%;
  word-break: break-word;
}

:root {
  /* Tweak if you want larger/smaller shortcut icons */
  --shortcut-icon-size: 56px;
}

/* Shortcut tile (unchanged if you already have something similar) */
.shortcut {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background: var(--accent-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--fg-color);
  text-decoration: none;
  font-size: 14px;
  padding: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

/* Uniform square box for icons */
.shortcut-logo {
  width: var(--shortcut-icon-size);
  height: var(--shortcut-icon-size);
  aspect-ratio: 1 / 1;        /* guarantees a square */
  object-fit: contain;         /* preserve aspect ratio */
  display: block;
  margin-bottom: 8px;
  pointer-events: none;

  /* Optional: pixel-art support; harmless for vector/hi-res logos */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Label */
.shortcut-label {
  display: block;
  text-align: center;
  max-width: 100%;
  word-break: break-word;
}