/* Author stats section header underline and spacing */
.info-panel .label, .info-panel .section-header {
  font-weight: bold;
  text-decoration: underline;
  margin-bottom: 6px;
  font-size: 15px;
}
.info-panel .section {
  margin-bottom: 18px;
}

/* Monospace font for Activity by Hour and Per Month data */
.info-panel .monospace {
  font-family: monospace;
}

/* Remove bullets from lists in info panel */
.info-panel ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

/* Legend tweaks: reduce dot-label gap and item spacing */
.legend .traces .legendtoggle {
  margin-right: 2px !important;
}
.legend .traces .legendtext {
  margin-left: 2px !important;
  padding-left: 0 !important;
}
.legend .traces {
  margin-bottom: 2px !important;
  padding-bottom: 0 !important;
}
.legend {
  min-width: 0 !important;
  width: 70% !important;
  max-width: 220px !important;
}

/* Update Chart button to bottom right of its panel */
.tabbed-widget-box {
  position: relative;
}
.update-chart-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;
}
/* Twitter Archiver v2 redesign: white panels with black borders and solid blue drop shadows */
/* Inspired by bees_tools/youtube_visualizer/assets/recaller.css */

:root {
  --panel-bg: #ffffff;
  --panel-border: #000000;
  --panel-border-width: 4px;
  --panel-radius: 12px;
  --panel-shadow: #1DA1F2; /* Twitter blue shadow */
  --shadow-offset: 5px;
  --shadow-spread: 0px; /* Solid, no blur */
  --text-color: #000000;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #ffffff;
  color: var(--text-color);
  font-family: Arial, Helvetica, sans-serif;
}

.app-layout {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  color: #000000;
  box-sizing: border-box;
  overflow: hidden;
  padding: 12px; /* outer buffer to window edges */
}

.main-section {
  display: flex;
  flex-direction: column;
  width: 75%;
  margin-right: 12px; /* buffer between left and right columns */
  height: 100%;
}

/* Top chart takes most of the height */
.chart-box {
  height: 62%; /* reduced to increase bottom panels, similar to recaller proportions */
}

.bottom-section {
  display: flex;
  height: 36%;
  margin-top: 12px; /* buffer between top and bottom areas */
}

/* Three bottom boxes, similar proportions to recaller */
.footer-box { /* descriptor */
  width: 25%;
  margin-right: 12px;
  position: relative;
}

.tabbed-widget-box { /* options: author + radios + search */
  width: 50%;
  margin-right: 12px;
  position: relative;
}

.channel-info-box { /* search + vertical lines */
  width: 30%;
  position: relative;
}

/* Tall right-side info panel */
.info-panel {
  width: 25%;
  overflow-y: auto;
  height: 98%;
}

.widget-box {
  background-color: var(--panel-bg);
  border: var(--panel-border-width) solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-offset) var(--shadow-offset) var(--shadow-spread) var(--panel-shadow);
  padding: 10px;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 4px; /* buffer between boxes */
}

.widget-box > .widget-content {
  overflow-y: auto;
}

/* Prevent bottom-most outbound button from being visually clipped in descriptor panel */
.footer-box { overflow: visible; }
.footer-box .widget-content { padding-bottom: 16px; }

/* Force Plotly graphs to fill their parent */
.js-plotly-plot {
  height: 100% !important;
  width: 100% !important;
}

label, .label {
  font-weight: bold;
}

input, select, textarea {
  font-family: inherit;
}

/* Outbound buttons (tinted blue for Twitter theme) */
.outbound-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.outbound-buttons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #000000;
  border: 2px solid #000000;
  border-radius: 24px;
  box-shadow: 3px 3px 0px #000000;
  padding: 8px 12px;
  font-size: 11pt;
  font-weight: bold;
  cursor: pointer;
  text-transform: none;
  width: fit-content;
  text-decoration: none;
}
.outbound-buttons img {
  width: 18px;
  height: 18px;
}
.btn-kofi {
  background-color: #ffc300;
}
.btn-bluesky {
  background-color: var(--panel-shadow);
}
.btn-twitter {
  background-color: #000000;
  color: #ffffff !important;
}
.outbound-buttons:hover {
  filter: brightness(0.95);
}
.outbound-buttons:disabled {
  opacity: 0.35;
  box-shadow: none;
}

/* Notes (vertical line) rows */
.note-controls {
  margin-bottom: 8px;
}
.note-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
}
.note-clear {
  background-color: #000000;
  color: #ffffff;
  border: 2px solid #000000;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  font-weight: bold;
  cursor: pointer;
}
.note-date {
  width: 90px; /* 75% of previous 120px */
}
.note-label {
  flex: 0 0 40%; /* 75% of the row width instead of flexing to fill */
}

/* Option rows */
.options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Smaller screens: collapse the right panel if needed */
@media screen and (max-width: 1440px) {
  .info-panel { display: none !important; }
  .tabbed-widget-box { width: 75% !important; }
  .channel-info-box { width: 25% !important; }
}

/* Ensure the tall right info panel can scroll even though widget-box sets overflow hidden */
.widget-box.info-panel {
  overflow-y: auto;
  overflow-x: hidden;
}