/*
   theme
*/

/* Blue-grey Light scheme (Default) */
/* Can be forced with data-theme="light" */
/* Slate color for light color scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme=light],
:root:not([data-theme=dark]) {
  --pico-text-selection-color: rgba(51, 52, 54, 0.25);
  --pico-primary: #5d6b89;
  --pico-primary-background: #525f7a;
  --pico-primary-underline: rgba(93, 107, 137, 0.5);
  --pico-primary-hover: #48536b;
  --pico-primary-hover-background: #48536b;
  --pico-primary-focus: rgba(129, 145, 181, 0.25);
  --pico-primary-inverse: #fff;

  --message-user-background: #f8f8f8d6;
  --message-assistant-background: #c0c0c0;
  --message-text: #333333;
  --message-placeholder: #c8c8c8;
  --score-box-color: #a8c8de;
  --secondary-buttons: #676767;
  --tooltip-hover-proceed: #58647f;
  --tooltip-hover-exit: #7b7b7b;
  --infobox-text: #555555;
  --help-button: var(--pico-primary);
  --loading-background: rgba(255, 255, 255, 0.8)
}

/* Slate color for dark color scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-text-selection-color: rgba(144, 158, 190, 0.1875);
    --pico-primary: #909ebe;
    --pico-primary-background: #525f7a;
    --pico-primary-underline: rgba(144, 158, 190, 0.5);
    --pico-primary-hover: #b0b9d0;
    --pico-primary-hover-background: #5d6b89;
    --pico-primary-focus: rgba(144, 158, 190, 0.25);
    --pico-primary-inverse: #fff;

    --message-user-background: #777777;
    --message-assistant-background: #444;
    --message-text: var(--pico-primary-inverse);
    --message-placeholder: #c8c8c8;
    --score-box-color: #4c7a9a;
    --secondary-buttons: #676767;
    --tooltip-hover-proceed: #58647f;
    --tooltip-hover-exit: #7b7b7b;
    --infobox-text: var(--message-placeholder);
    --help-button: var(--pico-primary-inverse);
    --loading-background: var(--pico-background-color)
  }
}

/* Slate color for dark color scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme=dark] {
  --pico-text-selection-color: rgba(144, 158, 190, 0.1875);
  --pico-primary: #909ebe;
  --pico-primary-background: #525f7a;
  --pico-primary-underline: rgba(144, 158, 190, 0.5);
  --pico-primary-hover: #b0b9d0;
  --pico-primary-hover-background: #5d6b89;
  --pico-primary-focus: rgba(144, 158, 190, 0.25);
  --pico-primary-inverse: #fff;

  --message-user-background: #777777;
  --message-assistant-background: #444;
  --message-text: var(--pico-primary-inverse);
  --message-placeholder: #c8c8c8;
  --score-box-color: #4c7a9a;
  --secondary-buttons: #676767;
  --tooltip-hover-proceed: #58647f;
  --tooltip-hover-exit: #7b7b7b;
  --infobox-text: var(--message-placeholder);
  --help-button: var(--pico-primary-inverse);
  --loading-background: var(--pico-background-color)
}


/* more customization */
:root {
  /* --font-family: tahoma; */
  /* --line-height: 1.5; */
  --pico-line-height: 1.4;
  --pico-font-weight: 400;
  /* --pico-font-size: 16px; */
  --pico-font-size: 15px;
  /* --pico-border-radius: 0.25rem; */
  --pico-border-radius: 0.15rem;

  --pico-block-spacing-horizontal: var(--pico-spacing);
  --pico-grid-spacing-vertical: 0;

  /* --pico-form-element-spacing-vertical: 0.75rem; */
  --pico-form-element-spacing-vertical:   0.65rem;
  --pico-form-element-spacing-horizontal: 1rem;

  --pico-nav-element-spacing-vertical: 1rem;
  /* --pico-nav-element-spacing-horizontal: 0.5rem; */
  --pico-nav-element-spacing-horizontal: 0.95rem;

  --pico-nav-link-spacing-vertical:   0.5rem;
  /* --pico-nav-link-spacing-horizontal: 0.5rem; */
  --pico-nav-link-spacing-horizontal: 0.95rem;


  /* turing markets customizations */
  /* at least 3rem margins - even on ultra narrow screens  */
  --content-margin: max( 2% , 3rem);
  /* this is already done by pico css */
  --content-margin: max( 0.0% , 0.0rem);
  --content-width-max:  calc( 100% - 2*var(--content-margin) );
  /* limit width on ultra wide screens  */
  --content-width:  min( var(--content-width-max), 48rem )  ;

  --msg-padding-hori: 12px;
  --msg-padding-vert:  12px;
  --msg-margin-vert:  25px;
  --msg-margin-hori:  20px;
  --width-user-icon:  25px;
  --width-assistant-icon:  30px;
  --indent-icon: calc( var(--width-user-icon) + var(--msg-padding-hori) );

  /* More individual colors */
  --color-worst: var(--pico-primary);
  --color-harmfulness: #b645cd;
  --color-novelty: #55c21e;
}


main {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Make the main container take up the full height of the viewport */
  padding: 0.8rem 0.2rem !important;
  width: var(--content-width) !important;
  background-color: transparent;
}

body:has(#msgs) {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevent overflow */
}

body:has(#msgs) main.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  max-width: 100%; /* Ensure it doesn't exceed the viewport width */
  overflow: hidden; /* Prevent overflow in any direction */
  padding: 0; /* Remove padding to avoid overflow */
  box-sizing: border-box; /* Ensure padding is included in width/height */
}

@media (max-width: 600px) {
  body:has(#msgs) {
      overflow-y: auto; /* Allow vertical scrolling */
  }

  body:has(#msgs) main.container {
      height: auto; /* Let the height adjust naturally */
      min-height: 100vh; /* Ensure at least full viewport height */
      overflow-y: auto; /* Allow vertical scrolling */
  }
}

/* ==========================================================================
Loader
=============================================================================*/

#loadingIndicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--loading-background);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.hidden {
  display: none !important;
}

/* ==========================================================================
Instructions page
=============================================================================*/

#instructions-buttons-container {
  display: flex;
  justify-content: flex-end; /* Right align the buttons */
  margin-top: 20px; /* Space between button groups */
  margin-bottom: 10px; /* Space between button groups */
  gap: 5px;
}

#instruction-note {
  border-radius: calc(var(--pico-border-radius)*2);
  border: 1px solid var(--pico-form-element-border-color);
  padding: 5px 10px;
}

.instruction-element {
  margin-top: 30px;
}
.instruction-screenshot {
  margin-top: 15px;
  margin-bottom: 15px;
  border: 2px solid var(--pico-form-element-border-color);
  padding: 10px 10px;
}

.instructions-buttons {
  background-color: var(--secondary-buttons);
  border-color: var(--secondary-buttons);
}

.hidden {
  display: none; 
}


/* ==========================================================================
Attenion Check page
=============================================================================*/
.check-item {
  margin-top: 20px; /* Increased margin-bottom to add more space */
  margin-bottom: 20px; /* Increased margin-bottom to add more space */
}

.label-container {
  display: inline-block;
  width: 100%
}

.check-lbl {
  display: block;
  margin-bottom: 10px;
}

.check-response-container {
  display: inline-block;
  vertical-align: top;
}

.check-button-container {
  display: flex;
  align-items: center;
}

.check-button-container input[type="radio"] {
  margin-right: 10px; /* Adjust the spacing as needed */
}

.check-radio-button {
  margin-bottom: 10px;
}

#check-btn-help {
  float: left;
  margin-top: 20px;
  margin-bottom: 10px;
  width: 30%;
  border-color: var(--secondary-buttons);
  background-color: var(--secondary-buttons);
  flex-shrink: 0;
}

/* Adjust width for mobile screens */
@media (max-width: 600px) {
  #btn-help-attention {
    width: 80%; /* Set a static width for mobile screens */
    margin-left: auto; /* Center the button */
    margin-right: auto; /* Center the button */
    float: none; /* Remove float to center properly */
  }
}


/* ==========================================================================
Survey pages
=============================================================================*/
.lbl-survey {
  display: inline-block;
  vertical-align: top;
  margin-bottom : 5px;

  position: relative;
  top:  0.3rem;
  left: 0.1rem;

  font-size: 90%;
}

/* Style the grid container */
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* two columns */
  gap: 20px; /* space between grid items */
}

/* Style individual grid items */
.grid-item {
  display: flex;
  flex-direction: column;
}

@media (max-width: 600px) { /* Adjust this value based on the breakpoint you want for mobile devices */
  .grid-container {
    grid-template-columns: 1fr; /* one column on small screens */
  }
}


/* ==========================================================================
Chat page
=============================================================================*/

 #above-msgs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
 }

 #chat-counter {
  flex-grow: 1; /* This ensures it stays on the left */
  text-align: left;
}

#btn-help {
  border: none;
  background-color: transparent; /* Ensures no unwanted background */
  display: flex; /* Use flexbox to center the SVG */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  overflow: visible; /* Allow the tooltip to be displayed outside the button */
  flex-shrink: 0; /* Prevents the button from shrinking */
  border-radius: 50%; /* Make it circular */
  height: 1.1em;
  width: 1.1em; /* Match height for a perfect circle */
  padding: 0; /* Remove default padding */
  margin-bottom: 0; /* Remove margin */
}

.svg-help {
  width: 100%; /* Make the SVG fill the button */
  height: auto; /* Keep aspect ratio intact */
  display: block; /* Ensure it’s treated as a block-level element */
  fill: var(--help-button);
}

#past-reward {
  flex-grow: 1; /* This ensures it stays on the right */
  text-align: right;
}


/* ------------------------------------------ 
Stuff for text messages
---------------------------------------------*/

#msgs {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Allow #msgs to grow and fill remaining space */
  min-height: 150; /* Minimum height of 150px */
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--pico-form-element-border-color);
  border-radius: calc(var(--pico-border-radius) * 2);
  padding-top: var(--msg-padding-vert);
}
/* Media query for mobile devices */
@media (max-width: 600px) {
  #msgs {
    min-height: 100px; /* Reduce the min-height on smaller screens */
    flex-grow: 1; /* Ensure it still takes remaining space */
    max-height: calc(100vh - 150px);
    overflow-y: auto; /* Allow vertical scrolling */
  }
}

/* Additional styles to ensure that the elements above and below msgs do not collapse */
#above-msgs, #below-msgs {
  flex-shrink: 0;
}
/* Add extra space to first message such that icon is visible */
#msgs > div:first-child {
  margin-top: calc(var(--msg-margin-vert) + 20px);
}

#msgs > div:last-child {
  margin-bottom: calc(var(--msg-margin-vert) + 20px);
}

div.user, div.assistant {
  margin: var(--msg-margin-vert) var(--msg-margin-hori);
  position: relative;
  max-width: 80%;
}

div.user-text, div.assistant-text {
  padding:        var(--msg-padding-vert) var(--msg-padding-hori);
  border-radius:  calc( var(--msg-padding-hori)*0.5 );
  color: var(--message-text)
}

div.user {
  align-self: flex-start;
  margin-left: var(--msg-margin-hori);
}

div.user-text {
  background: var(--message-user-background);
}

div.assistant {
  align-self: flex-end;
  margin-right: var(--msg-margin-hori);
  min-width: 30%;
}

div.assistant-text {
  background: var(--message-assistant-background);
}

div.user-text.worst, div.assistant-text.worst {
  border: 2px solid var(--color-worst);
}

.message-scoring {
  display: block;
  font-size: 70%;
  margin-top: calc(var(--msg-margin-vert)*0.25);
  position: absolute;
  width: 100%;
  left: 0;
}

div.user .message-scoring {
  padding-left: calc(var(--msg-padding-hori)*0.6);
  text-align: left;
  top: 100%;
}

div.assistant .message-scoring {
  padding-right: calc(var(--msg-padding-hori)*0.6);
  text-align: right;
  top: 100%;
}


div.user::before, div.assistant::before {
  content: '';
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;

}

div.user::before {
  background-image: url('../img/user-solid.svg');
  width:    var(--width-user-icon);
  height:   var(--width-user-icon);
  left: 0;
  top: calc( var(--indent-icon) * -0.9);
}
div.assistant::before {
  background-image: url('../img/robot-solid.svg');
  width:    var(--width-assistant-icon);
  height:   var(--width-assistant-icon);
  right: 0;
  top: calc( var(--indent-icon) * -0.9);
}

/* Include a background for icons in dark mode */
@media (prefers-color-scheme: dark) {

  div.user::before {
    background-image: url('../img/user-white.svg');
  }

  div.assistant::before {
    background-image: url('../img/robot-white.svg');
  }
}

.harmfulness {
  color: var(--color-harmfulness);
}

.novelty {
  color: var(--color-novelty);
}

.worst {
  color: var(--color-worst);
}

div.formula {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: center;
}

div.formula .element {
  flex: 0 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

div.formula .element .description {
  font-size: 70%;
}



/* ------------------------------------------ 
Stuff for input elements
---------------------------------------------*/

#below-msgs {
  margin-top: calc( 0.5 * var(--msg-margin-vert) );
  /* slightly smaller */
  margin-left:  0;
  margin-right: 0;
  flex-shrink: 0
}

#below-msgs .input-box {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--pico-form-element-background-color);
  border: 1px solid var(--pico-form-element-border-color);
  border-radius: calc(var(--msg-padding-hori) * 0.5);
  height: 7rem;
  margin-bottom: 5px;
}

#below-msgs .input-box textarea {
  flex-grow: 1;
  height: 100%; /* Textarea should have full height */
  max-height: 100%;
  border: none;
  outline: none;
  box-shadow: none;
  background-color: transparent;
  resize: none;
  margin: 0 2px 0 0; /* Ensure no margin interferes */
  padding: 0.5rem 0.7rem 0.5rem 0.7rem;  /*Padding for better text spacing */
}

#below-msgs .input-box textarea::placeholder {
  color: var(--message-placeholder);
}

#below-msgs .button-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
  margin-right: 0.3rem; /* Distance to the right */
}

#below-msgs #btn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: var(--pico-primary);
  border: none;
  border-radius: 50%;
  padding: 0.5rem;
  width: 2rem;
  height: 2rem;
}

#below-msgs #btn-submit svg {
  fill: none;
  stroke: white;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#below-msgs #btn-submit:hover {
  background-color: var(--pico-primary-hover);
}

/* ------------------------------------------ 
Chat infos (token/chat no)
---------------------------------------------*/

#chat-infos {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 75%;
}

#token-counter {
  display: flex;
  align-items: center;
}

#token-counter {
  justify-content: flex-start;
}


/* ------------------------------------------ 
Flex box for area below the chat-input
---------------------------------------------*/
/* General style for the final container */
#reward-button-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 20px;
}

/* Ensure the article takes most of the space */
#reward-article {
  flex: 3;
  border: 2px solid var(--color-worst);
  border-radius: calc(var(--pico-border-radius)*2);
  padding: calc(var(--msg-padding-vert)*0.4) 0
}

/* Ensure buttons have the same width and spacing */
#continue-btns button {
  width: 100%;
  margin-bottom: 10px;
}

/* Flexbox to distribute space evenly between buttons */
#continue-btns {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: 20px;
  flex: 1;
  gap: 10px; /* Ensures equal space between buttons */
}

/* Media query for screens less than 600px */
@media (max-width: 600px) {
  /* Adjust the flex direction to stack the article and buttons vertically */
  #reward-button-container {
    flex-direction: column;
    align-items: center; /* Center align items for better appearance */
  }

  /* Ensure the article takes full width */
  #reward-article {
    width: 100%;
    margin-bottom: 10px; /* Add some spacing below the article */
  }

  /* Adjust the button container to stack buttons horizontally */
  #continue-btns {
    margin-left: 0;
    margin-top: 10px;
    flex-direction: row;
    justify-content: space-between; /* Ensures buttons are spaced evenly */
    width: 100%;
  }

  /* Ensure buttons take up equal space when stacked horizontally */
  #continue-btns button {
    width: 48%;
    margin-bottom: 0;
  }
}


/* ------------------------------------------ 
Continuation/exit buttons
---------------------------------------------*/

#below-msgs #continue-btns {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap; /* Ensure buttons wrap on smaller screens */
}

#below-msgs button {
  border-radius:  calc( var(--msg-padding-hori)*0.5 );
  border: none;
}

#below-msgs #btn-exit {
  background-color: var(--secondary-buttons);
  margin-right: 10px;
}

@media screen and (max-width: 600px) {
  #below-msgs #continue-btns {
    justify-content: center; /* Center buttons on small screens */
  }
}


/* ------------------------------------------ 
Stuff for score boxes elements
---------------------------------------------*/

#below-msgs #score-boxes {
  display: flex; 
  flex-direction: column;
  gap: 5px; /* Space between elements */
  margin-bottom: 10px;
}

#below-msgs .score-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  font-size: 90%;
  text-align: center; 
}

#below-msgs .score-grid-item {
  background-color: var(--score-box-color);
  color:   var(--message-text);
  padding: 10px;
  margin-bottom: 10px;
}

#below-msgs #score-wide-item {
  background-color: var(--score-box-color);
  color: var(--infobox-text);
  padding: 10px;
  grid-column: span 3;
  font-size: 80%;
  width: 65%; /* Width of the score boxes div */
  margin: 0 auto; /* Center the score boxes div */
}

#below-msgs #score-wide-item ul {
  list-style-type: disc;
  padding-left: 20px; /* Adjust as needed for list indentation */
  text-align: left; /* Left align list items for better readability */
  margin-bottom: 0px;
  color: var(--infobox-text);
}


/* Media query for mobile devices */
@media (max-width: 600px) {
  #below-msgs .score-grid {
      gap: 5px; /* Reduce the gap to 5px for mobile devices */
  }
  #below-msgs #score-wide-item {
    width: 100%; /* Width of the score boxes div */
  }
}
    width: 100%; /* Width of the score boxes div */
  }
}