/* #region Reset */
body, body *:where(:not(html, iframe, canvas, img, svg, video, audio, svg, svg *, link, script, style)) {
  display: revert;
  all: unset;
}

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

a, button {
  cursor: revert;
}

ol, ul, menu {
  list-style: none;
}

[data-highlight] {
  outline: 1px solid #ff000050;
  background: #ff000025;
}

#fiveserver-info-wrapper {
  display: none ! important;
}

:root {
  --recommendation-transition-duration: .2s;
  --recommendation-ease-out: ease-out;
  --recommendation-ease-in: ease-in;
  --light-blue: #d6e5ff;
  --google-blue: #4285F4;
  interpolate-size: allow-keywords;
}

body {
  display: block;
  background: #f8f8f8;
  overflow: hidden;
  color: #222;
  font-family: SF Pro Display, SF Pro, Helvetica Neue, Helvetica, Arial;
}
/* #endregion Reset */

/* #region Chat styling */
.message-control {
  display: none;
}

.container {
  display: flex;
  height: 100dvh;
  /* overflow: auto; */
  .frame-wrapper {
    width: 100%;
    height: 100%;
  }

  &:hover {
    .input-container {
      opacity: 1;
    }
  }
}

.loading-message {
  position: fixed;
  bottom: 0;
}

.frame-wrapper {
  .url-bar {
    display: none;
  }
  .content-frame {
    border: 0;
    width: 100%;
    height: 100%;
  }
}

.frame-wrapper[data-url="chat"] {
  /* outline: 20px solid red; */
  position: static !important;
  /* border-right: 1px solid #8883; */
  width: 40%;
  /* Initial width, can be overridden by JS */
}


bosdy.viewer {
  width: 100dvw;
  height: 100dvh;
}
/*  */
/* .frame-wrapper[data-url="chat"] { */
/* display: flex; */
/* position: fixed; */
/* top: 5em; */
/* left: 5em; */
/* flex-direction: column; */
/* border: 1px solid #808080; */
/* border-radius: .5em; */
/* background: rgba(255, 255, 255, 0.3); */
/* width: 32vw; */
/* height: calc(100vh - 10em); */
/* animation: chatFrameFadeIn .2s linear; */
/* animation-fill-mode: both; */
/* backdrop-filter: blur(10px); */
/* } */
/*  */
/* @keyframes chatFrameFadeIn { */
/* 0% { */
/* opacity: 0; */
/* } */
/* 100% { */
/* opacity: 1; */
/* } */
/* } */
/*  */
/* .frame-wrapper[data-url="chat"].dragging { */
/* transition: none; */
/* z-index: 1000; */
/* } */
/*  */
/* .drag-handle { */
/* display: flex; */
/* align-items: center; */
/* justify-content: center; */
/* border-radius: .5em .5em 0 0; */
/* background-color: rgba(128, 128, 128, 0.2); */
/* cursor: move; */
/* height: 1.5em; */
/* color: #666; */
/* font-size: 14px; */
/* user-select: none; */
/* } */
/*  */
/* .drag-handle:hover { */
/* background-color: rgba(128, 128, 128, 0.3); */
/* } */

iframe {
  background: transparent;
}

body.chat {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;


  h1 {
    display: flex;
    align-items: baseline;
    padding: 1em;
    color: #4285F4;
    color: var(--google-blue);
    font-weight: bold;
    sup {
      display: inline-block;
      transform: translateY(-0.66em);
      margin-left: 0.5em;
      /* Add small space from title */
      text-transform: uppercase;
      letter-spacing: .1em;
      font-size: .5em;
    }
  }

  .download {
    position: absolute;

    top: 1.25em;
    right: .5em;

    text-align: center;
    display: flex;
    gap: .25em;
    line-height: .9;
    align-items: center;
    font-size: .75em;
    pointer-events: none;
    color: transparent;
    &:after {
      display: block;
      pointer-events: auto;
      content: "✦";
      font-size: 1.5em;
    color: #07B704;


    }
    &:hover {
      pointer-events: auto;
    color: #07B704;

      &:before {
        display: block;
      }
    }
  }
}

#container {
  height: 100dvh;
  overflow: auto;
  scroll-behavior: smooth;
  overflow-anchor: auto;


  #chatbox {

    /* padding: 1em; */
    display: block;
    flex: 1;
    padding-bottom: 8em;
    min-height: 100%;
    /* Increased padding */

    /* height: 50vh; */

    font-size: .8em;





    .message {

      display: block;
      b {
        font-weight: bold;
      }
    }
  }


  .input-container {
    /* Adjust padding */
    filter: drop-shadow(0px 2px 3px #8881) drop-shadow(0px 4px 6px #8881) drop-shadow(0px 8px 12px #8881);
    display: flex;
    position: fixed;
    /* Changed from absolute */
    right: 1em;
    /* Removed right: 0; left: 0; */
    bottom: 2.25em;
    /* Adjusted position */
    left: 1em;
    align-items: stretch;
    justify-content: space-between;
    /* Removed transition and opacity */
    border-top: none;
    /* Remove top border */
    border-radius: 2em;
    /* Pill shape */
    background: #fff;
    /* Always white */

    padding: 0.25em 0.5em;
    overflow: hidden;
    /* Removed :focus-within styles */

    textarea#input {
      /* Ensure box-sizing is border-box if not globally set */
      box-sizing: border-box;
      outline: none;
      /* Reset any browser default styles */
      border: none;
      background: transparent;
      padding: 1em;
      width: 100%;
      /* Take full width */
      /* Removed fixed height */
      min-height: 2em;
      /* Minimum height for one line + padding */
      max-height: 15em;
      /* Limit maximum height */
      overflow-y: auto;
      /* Add scrollbar if content exceeds max-height */
      resize: none;
      /* Disable manual resizing */
      line-height: 1.4;
      /* Adjust line height for better readability */
      field-sizing: content;
      /* Allow height to grow with content if supported */

    }

    button#send {
      margin: -0.25em -0.5em;
      border-radius: 2em;

      /* Add smooth transition */
      cursor: pointer;
      padding: .25em 1em 0 1em;
      padding-left: 1.4em;

      width: 4em;
      color: #ccc;
      /* Default to gray */
      &:hover {
        background: #eee;
        /* Lighter background on hover */
        /* Color will be set by :has() rule when active */
      }
    }
  }
}
}

/* Rule for active state */

#container .input-container textarea::placeholder {
  color: var(--light-blue);
}
#container .input-container:has(textarea:not(:placeholder-shown)),
#container .input-container:has(textarea:focus) {
  button#send {
    color: var(--google-blue);
    /* Active color */
    &:hover {
      background: var(--google-blue);

      /* Purple background on hover when active */
      color: #fff;
      /* White text on hover when active */
    }
  }
}

/* #endregion Chat styling */

/* #region Chat Message List Styling */
ul#chatbox {
  position: relative;
  margin: 0;
  /* Indent from right */
  padding: 0;
  list-style-type: none;
  /* Remove default bullet points */
  /* Add other desired styles for the list container */
}


#chatbox p {
  display: block;
}

#chatbox strong {
  margin-top: 1rem;
  /* color: #fff; */
  color: var(--google-blue);
  /* font-size: 1rem; */
  font-weight: 500;
}

#chatbox em {
  font-style: italic;
}

#chatbox li p > strong {
  margin-top: unset;
  /* color: #fff; */
  color: #303;
  font-size: unset;
  font-weight: 500;
}

#chatbox li h1,
#chatbox li h2,
#chatbox li h3 {
  display: block;
  margin-top: 1em;
  margin-bottom: .25em;
  font-size: 1rem;
}

#chatbox ul {
  display: block;
  margin-top: 1em;
  list-style-type: disc;
  li {
    display: list-item;
    margin-bottom: 1em;
    margin-left: 2em;
  }
}
#chatbox > li {
  display: block;
  margin-top: 1em;
  margin-bottom: .5em;
  border-radius: 1em;
  padding: 1em;
  ul, ol {
    display: block;
    margin-top: 1em;
    li {
      display: block;
      margin-bottom: 1em;
    }
  }
  /* Default list item styles */
}


#chatbox li.user {
  filter: drop-shadow(0px 2px 3px #8881) drop-shadow(0px 4px 6px #8881) drop-shadow(0px 8px 12px #8881);
  margin-right: 1em;
  /* margin-left: 40px; */
  margin-left: auto;
  margin-left: 50%;
  /* Indent from left */
  background-color: #fff;
  background-color: #fff;
  /* Light blue background for user messages */
  /* text-align: right; */
}

#chatbox li.reply {
  filter: drop-shadow(0px 2px 3px #8881) drop-shadow(0px 4px 6px #8881) drop-shadow(0px 8px 12px #8881);
  margin-right: 25%;
  margin-left: 1em;
  border: 1px solid #fff7;
  /* Indent from right */
  background: var(--light-blue);

  color: #303;
  hyphens: auto;
  /* Light grey background for AI replies */
}

#chatbox li.system {
  margin-right: 40px;
  background-color: #fff9c4;
  /* Light yellow for system messages */
  font-size: 0.9em;
  font-style: italic;
}


@keyframes textReveal2 {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}


@keyframes textReveal {
  0% {
    opacity: 1;
    background-position: 100% 0;
    height: 1.25em;
    height: 1.25em;
  }
  50% {
    opacity: 0;
    margin-top: 1em;
    margin-bottom: .5em;
    background-position: 0% 0;
    height: 1.25em;
  }
  100% {
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    height: 0;
  }
}

#chatbox .initial {
  dsiv {
    background: linear-gradient(to right,
        #000 0%,
        #000 25%,
        #000 70%,
        var(--google-blue) 74%,
        var(--google-blue) 75%,
        #0000 75%,
        #0000 100%);
    background-clip: text;
    background-repeat: repeat-y;
    background-position: 0% 0;
    background-size: 400% 100%;
    /* background: #a0a; */

    /* color: #555;  Let children define color */
    /* height: .5em; */
    animation: textReveal2 5s ease forwards;
    color: transparent;
    li {
      color: #000;
    }
  }

}
#chatbox li.log {
  /* display: inline-block; */
  display: block;
  opacity: .25;
  /* width: 2em; */
  margin-right: 1em;
  margin-left: 1em;

  /* margin-left: 100%; */
  border-radius: .5em;



  background: linear-gradient(to right,
      #000 0%,
      #000 25%,
      #000 70%,
      var(--google-blue) 74%,
      var(--google-blue) 75%,
      #0000 75%,
      #0000 100%);
  background-clip: text;
  background-repeat: repeat-y;
  background-position: 0% 0;
  background-size: 400% 100%;
  /* background: #a0a; */
  padding: 0;
  /* color: #555;  Let children define color */
  /* height: .5em; */
  height: 1.25em;
  overflow: hidden;
  animation: textReveal 5s ease forwards;
  color: transparent !important;

  * {
    color: transparent !important;
  }
  &:hover {
    /* height: unset; */
  }
}

#chatbox li.log span.logtext {
  /* Styles for the main log message text itself */
  color: grey;
  /* Override default italic if needed */
}

#chatbox li.log div {}

#chatbox li.log div span {

  /* Styles for the key part in the data preview */
  color: #555;
}

#chatbox li.log div.errorpreview {
  /* Styles specifically for the error message in data preview */
  color: red;
  font-style: italic;
}

#chatbox li.error {
  margin-right: 40px;
  border-left: 3px solid #d32f2f;
  background-color: #ffebee;
  /* Light red background */
  color: #c62828;
  /* Darker red text */
  font-weight: bold;
}

#chatbox li.pending {
  position: absolute;
  right: 0;
  /* left: 0; */
  bottom: 0em;
  left: 0;
  opacity: .5;
  /* margin-top: 100%; */

  background: linear-gradient(to right,
      #000 0%,
      #000 25%,
      #000 70%,
      var(--google-blue) 74%,
      var(--google-blue) 75%,
      #0000 75%,
      #0000 100%);
  background-clip: text;
  background-repeat: repeat-y;
  background-position: 0% 0;
  background-size: 400% 100%;
  /* background: #a0a; */
  padding: 0;
  /* color: #555;  Let children define color */
  /* height: .5em; */
  height: 1.5em;
  overflow: hidden;
  /* animation: textReveal 3s linear infinite alternate forwards; */
  animation: pulse 1.5s infinite ease-in-out alternate;

  /* Grey background for pending */
  text-align: center;
  color: #616161;
  color: transparent !important;
  font-style: italic;
}

#chatbox li.tool {
  margin-right: 40px;
  border-left: 3px solid #3f51b5;
  /* Indigo */
  background-color: #e8eaf6;
  /* Indigo lighten-5 */
  font-family: monospace;
  font-size: 0.9em;
}

#chatbox li.welcome {
  margin: 10px 0;
  text-align: center;
  color: #444;
  /* font-style: italic; */
  /* Handled by span */
}

#chatbox li.welcome span.welcometext {
  font-weight: bold;
  /* Example if needed */
  font-style: italic;
}

/* Span-based element styling */
#chatbox li span.sender,
#chatbox li span.errorlabel {
  margin-right: 0.5em;
  font-weight: bold;
}

#chatbox li.error span.errorlabel {
  color: inherit;
  /* Inherit from li.error */
}

#chatbox li.error span.errortext {
  /* Style for error text if needed, e.g., */
  /* color: inherit; */
}

#chatbox li.reply span.sender {
  display: block;
  margin: -1em;
  margin-bottom: 0.5em;
  border-radius: .33em;
  /* Replaces <br> */
  /* width: 100%; */
  /* background: #0005; */

  padding: 1em;
}
#chatbox li.reply .contentblock {
  margin-bottom: 0.5em;
}
#chatbox li.reply .metadata {
  color: #555;
  font-size: 0.9em;
  font-style: italic;
}
#chatbox li.reply .metadata .metalabel {
  margin-right: 0.3em;
  font-style: normal;
  /* Override italic */
}

/* Adjust code tag style */
#chatbox li.tool code.content {
  margin-left: 0.5em;
  /* Add some space after sender */
  border-radius: 3px;
  background-color: #f0f0f0;
  /* Example */
  padding: 2px 4px;
}

/* Remove default bold/italic styles if they conflict */
#chatbox b, #chatbox i {
  font-weight: normal;
  font-style: normal;
  /* Reset any global styles specifically for b/i inside chatbox */
}
/* #endregion Chat Message List Styling */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6.5em;
  /* Add scroll offset to the container */
}

body.table {
  background: #eee;
  overflow: auto;
  overflow-x: hidden;

  @keyframes cellReveal {
    0% {
      max-width: 0;
    }
    100% {
      max-width: 100%;
    }
  }

  table {
    --row: #8882;
    display: grid;
    grid-template-rows: min-content auto;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 13ch repeat(4, auto);
    grid-template-columns: 14ch 1fr 1fr 1fr 1fr;
    transition: grid var(--recommendation-transition-duration) linear;
    background: #eee;
    min-width: 100vw;
    height: 100vh;
    counter-reset: category 0;
  }

  thead, tbody, tfoot {
    display: table-header-group;
  }

  tbody {
    display: table-row-group;
    display: contents;
  }

  tfoot {
    display: table-footer-group;
  }

  tr {
    display: table-row;
    display: flex;
    display: contents;
  }

  td, th {
    display: table-cell;
    display: flex;
  }

  th, caption {
    text-align: end;
  }

  th:first-child, td:first-child {
    text-align: end;
  }

  th:hover {
    filter: drop-shadow(0 0 .5em #8882);
    z-index: 999;
    header {
      opacity: 1 !important;
    }

    article {
      bottom: unset;
      opacity: 1;
      background: #fff;
    }
  }

  td:not(:has(output:empty)) {
    border: 1ch solid #b0b8;

    output {
      display: block;
      outline: 0;
    }
    article {
      display: none;
    }
  }

  td {
    position: sticky;
    transition: all .15s linear;
    border-top: .5ch solid #8087;
    background: #eee;
    overflow: hidden;

    &:hover {
      header {}

      article {}
    }
    &:first-of-type {
      margin-left: .5ch;
      padding-left: 0;
      article {
        padding-left: 0;
      }
    }
  }
}

tfoot {
  th {
    font-weight: bold;
  }
}

body.table thead ul {
  display: block;
  margin-top: 1em;
  list-style-type: disc;
  li {
    display: list-item;
    margin-left: 1.5em;
  }
}

body.table thead th:not(first-child) {
  position: relative;
}

td, th {
  display: flex;
  display: flex;

  position: relative;
  align-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  min-width: 1vw;
  height: 12.5vh;
  height: 6em;

  &:after {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background: #aaa;
    height: 1px;
  }

  header {
    display: block;
    display: none;
    opacity: .33;
    padding-bottom: .25em;
    font-weight: bold;
    abbr {
      white-space: nowrap;
    }
    .category {
      display: none;
    }
    .level {
      display: inline-block;
    }

    .category {
      &:after {
        content: ':';
      }
    }

    .importance {
      position: absolute;
      top: 1.75em;
      right: 1em;
      opacity: 1;
      margin: 0 auto;
      overflow: hidden;
      text-transform: uppercase;
      letter-spacing: .025em;
      color: #888;
      font-size: .75em;
      font-weight: 500;

      &[title='Medium'] {
        width: 3.66ch;
      }
    }
  }

  article {
    display: block;
    display: none;
    position: absolute;
    top: 3em;
    right: 0;
    bottom: 2rem;
    left: 0;
    opacity: .33;
    padding: 0em 1rem 1rem 1rem;
    overflow: auto;
    text-align: start;
    font-size: .8em;

    hyphens: auto;
    &:hover {}

    p {
      line-height: 1.2;
    }
  }

  &:hover {}
}

output {
  display: block;
  margin: 0em 1em 1em 0.5em;
  margin-top: 1em !important;
  border: 1px solid transparent;
  width: 100%;
  height: calc(100% - 5em);
  overflow: auto;
  overflow: auto;
  text-align: start;
  line-height: 1;

  p {
    display: inline;
    font-size: .9em;
  }

  &:focus {
    background: #eee;
  }

  &:before, &:after {
    opacity: 0;
    pointer-events: none;
  }

  &:before {
    display: block;
    position: absolute;
    top: 0;
    right: 1em;
    font-size: .8em;
    content: counter(category);
    counter-increment: category;
  }
  &:after {
    display: block;
    position: absolute;
    top: 0;
    left: 1em;
    font-size: .8em;
    content: attr(id);
  }
}

output {
  p {
    background: linear-gradient(to right,
        #000 0%,
        #000 25%,
        #000 70%,
        #f0f 74%,
        #f0f 75%,
        #0000 75%,
        #0000 100%);
    background-clip: text;
    background-repeat: repeat-y;
    background-position: 0% 0;
    background-size: 400% 100%;
    animation: textReveal 10s ease forwards;
    color: transparent;
  }

  p {
    &:not(:last-of-type):after {
      display: block;
      visibility: hidden;
      height: 1em;
      content: '';
      strong {
        font-weight: bold;
      }
      em {
        font-style: italic;
      }
      ul {
        margin-left: 1em;
        list-style: disc;
      }
    }
  }
}

body.table td.current ~ td {
  border-color: #eee;
}

body.table td.current {
  border-top: 1ch solid #808;
  background: #faf0f9;
  padding-left: 1em;

  article {
    display: none;
    opacity: 0;
    height: 0;
  }

  header {
    opacity: 1;
    .level {}
  }

  article {
    display: block !important;
  }
}

body.table td.open {
  z-index: 99;
  output, article {
    display: block;
    flex: 1 !important;
  }
  output {
    border-color: #ddd;
  }
}

body.table td.open:not(.cell) {
  margin-top: -0ch;
}

body.table td.open.cell {
  background: #fff;
}

body.table td.open {}
body.table td.cell, body.table td.open {
  right: 1rem;
  left: 15ch;

  z-index: 999;
  margin-top: -2em;
  margin-bottom: 3em;
  width: 16em;
  width: 25vw;

  header {
    display: block;
    flex-basis: 100%;
    opacity: 1;
    padding: 1.5rem 1rem 0 1rem;
    width: 100%;
    font-size: 1.25em;
    .importance {
      transition: all var(--recommendation-transition-duration) linear;
      opacity: 0;
    }
  }

  output, article {
    flex: 1;
  }
  output {
    display: block;
    flex: 0;
    margin-top: 1vw;
    padding: 1rem;
    font-size: 1.1em;

    strong {
      display: block;
      margin-top: 35%;
      color: #888;
      font-size: 1rem;
    }
  }
  article {
    display: block !important;
    position: static;
    align-self: flex-start;
    opacity: 1;
    margin-top: .2rem;
    margin-left: .2rem;
    padding: 1em;
    color: #666;
    justify-self: flex-start;
    .button {
      display: block;
      margin-top: 1.5em;
      background: #eee;
      padding: 1em;
      text-align: center;
      color: #555;
      font-weight: 500;
      em {
        color: #808;
      }
    }
  }
}


body.table table {
  td.cell {
    filter: drop-shadow(0 0 1em #8888);
    border: 1px solid #8888;
    border-radius: .5em;
    background: #fff;

    .importance {
      transition: all var(--recommendation-transition-duration) linear;
      opacity: 1 !important;
    }
    output, article {
      opacity: 1;

    }
  }
}






table {
  counter-reset: category 0;
}









td.open {
  margin-right: -50vw !important;
  padding: 0 !important;
  width: calc(50vw - 1em) !important;
  height: 50vh !important;

  .input-container {
    display: block !important;
  }
  &:hover + tz {
    z-index: 99;
    outline: 1px dashed #f0f;
    background: #f0f2;
    height: calc(100% - 1em);
  }




}






body.table {
  .input-container {
    display: none;
    position: absolute;
    right: calc(1em + 2px);
    bottom: calc(1.5em + 4px);
    width: calc(50% - 1em - 4px);
  }




}









.tool-toggle {
  display: flex;
  display: none;
  position: fixed;
  bottom: 3em;
  align-items: center;
  margin-right: 10px;
  border-radius: 4px;
  background: #f5f5f5;
  padding: 4px 8px;
  gap: 8px;
}

.tool-toggle input[type="radio"] {
  margin: 0;
  cursor: pointer;
  all: unset;
  appearance: auto;
  -webkit-appearance: radio;
  -moz-appearance: radio;
}

.tool-toggle label {
  margin-right: 4px;
  cursor: pointer;
  color: #666;
  font-size: 12px;
  user-select: none;
}

.tool-toggle label:hover {
  color: #333;
}

.tool-instructions {
  display: inline-block;
  margin-left: 8px;
}

.tool-instructions input {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px 8px;
  width: 200px;
  font-size: 12px;
}

.tool-instructions input:focus {
  outline: none;
  border-color: #1976d2;
}




.object {
  display: inline;
  position: relative;
  transition: all 0.3s;
  border-bottom: 2px solid #7e57c2;
  border-radius: 4px;
  background-color: #ede7f6;
  cursor: pointer;
  padding: 3px 6px;
  color: #4527a0;
  font-weight: 600;
}

.object.active {
  border-color: #4527a0;
  background-color: #7e57c2;
  color: white;
}

.object.left::before,
.object.right::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.3s;
  opacity: 0;
  border-radius: 50%;
  background-color: #7e57c2;
  width: 8px;
  height: 8px;
  content: '';
}

.object.left::before {
  left: -4px;
}

.object.right::after {
  right: -4px;
}

.object.active.left::before,
.object.active.right::after {
  opacity: 1;
}

.line {
  opacity: 0.8;
  stroke: #9575cd;
  stroke-width: 3;
  fill: none;
}

.line.primary {
  opacity: 1;
  stroke: #673ab7;
  stroke-width: 4;
}

.line.originTop, .line.originBottom,
.line.targetTop, .line.targetBottom {
  stroke-dasharray: 4, 4;
}

.line-label {
  background: white;
  padding: 2px 4px;
  white-space: nowrap;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  fill: #5e35b1;
  text-anchor: middle;
  pointer-events: none;
}

.line-label.primary {
  font-weight: bold;
  fill: #4527a0;
}

.preview .line:not(.primary) {
  opacity: 0.2;
}

.visible {
  z-index: 5;
}

.visiblez {
  z-index: 4;
}

.paragraph-container {
  position: relative;
  margin-bottom: 2.2em;
  max-width: 95%;
}

.line-label-bg {
  opacity: 0.9;
  fill: white;
  stroke: white;
  stroke-width: 4;
  rx: 4;
}

p strong {
  color: var(--google-blue);
  font-weight: bold;
}

#chatbox li.system {
  background-color: #fff9c4;
  font-style: italic;
}

#chatbox li.log {}

#chatbox li.log span.logtext {
  color: grey;
}

#chatbox li.log div.logdata {
  word-break: break-all;
  color: #333;
}

#chatbox li.log div.logdatapair {
  margin-right: 5px;
}

#chatbox li.log div.logdatapair span {
  color: #555;
}

#chatbox li.log div.errorpreview {
  color: red;
  font-style: italic;
}

#chatbox li.error {
  background-color: #ffebee;
  color: #c62828;
}








body.ui {
  background: #f8f8f8;
  padding: 1em;
  padding-top: 0;
  overflow: auto;
  scroll-behavior: smooth;

  h2 {
    display: block;
    margin: 1em 0;
    color: #808;
    font-size: 2em;
  }

  .input-container {
    display: none;
  }
  #survey-response-output {
    display: none !important;
  }

}

@keyframes wipe {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }
  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }
  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }
  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}

@keyframes wipe-full {
  /* First half - reveal clockwise */
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }
  12.5% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }
  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }
  37.5% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
  /* Second half - hide clockwise */
  62.5% {
    clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
  75% {
    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);
  }
  87.5% {
    clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);
  }
  100% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes height {
  0% {
    height: 50%;
  }
  100% {
    height: 100%;
  }
}

@keyframes width {
  0% {
    width: 50%;
  }
  100% {
    width: 100%;
  }
}

@keyframes heightdown {
  0% {
    z-index: 99999;
    height: 200%;
  }
  99% {
    z-index: 99999;
  }
  100% {
    z-index: revert;
    height: 100%;
  }
}

@keyframes widthdown {
  0% {
    z-index: 99999;
    width: 200%;
  }
  99% {
    z-index: 99999;
  }
  100% {
    z-index: revert;
    width: 100%;
  }
}


.recommendation.inactive {
  opacity: 0.4;
  &:hover {
    opacity: 0.7;
  }
}

/* Remove old background highlight */
.recommendation.highlighted-target {
  opacity: 1;
  /* background-color: lime !important; /* REMOVED */
  /* background-color: #f3e5f5 !important; /* REMOVED - No background for general related hover */
  .description, .related {
    &:after {
      /* background: linear-gradient(to bottom, #fff0, #f3e5f5) !important; /* REMOVED */

    }
    &:before {
      /* background: linear-gradient(to top, #fff0, #f3e5f5) !important; /* REMOVED */
    }
  }
  .complete {
    /* background: #fff !important; /* REMOVED */
  }
  /* Lightest Purple - for related items */
}

/* Remove old background highlight */
/* Change specific highlight to use the LIGHT purple */
.recommendation.highlighted-target-specific {
  background-color: #f3e5f5 !important;
  /* CHANGED to Light Purple */
  background-color: var(--light-blue) !important;
  /* CHANGED to Light Purple */
  .description, .related {
    &:after {
      background: linear-gradient(to bottom, #fff0, #f3e5f5) !important;
      /* CHANGED to Light Purple */

    }
    &:before {
      background: linear-gradient(to top, #fff0, #f3e5f5) !important;
      /* CHANGED to Light Purple */
    }
  }
  .complete {
    background: #fff !important;
  }
  /* outline: 1px solid #f0f; */
  .title {
    color: #4285F4;
    color: var(--google-blue);
    /* Active State: Keep Purple */
  }
  /* Darker Purple - for specific hovered item */
  /* COMMENT UPDATED */
}

/* Remove old background highlight and apply new one */
li.recomsmendation:target {
  /* background: red !important; /* REMOVED */
  background-color: #f3e5f5;
  /* Active State: Keep Purple */
  .description, .related {
    &:after {
      background: linear-gradient(to bottom, #fff0, #f3e5f5);
      /* Active State: Keep Purple */

    }
    &:before {
      background: linear-gradient(to top, #fff0, #f3e5f5);
      /* Active State: Keep Purple */
    }
  }
  .complete {
    background: #fff;
  }
  /* outline: 1px solid #f0f; */
  .title {
    color: #808;
    /* Active State: Keep Purple */
  }
  /* Lightest Purple - for URL target */
}

/* Remove old background highlight */
li.recommendation.highlighted-category {
  /* background: red; background-color: #f0f0f0; /* REMOVED */
  opacity: 1;
  /* Ensure highlighted category items are fully opaque */
}

/* Dim non-highlighted items when a category is hovered */
.recommendations:has(li.recommendation.highlighted-category) li.recommendation:not(.highlighted-category) {
  opacity: 0.25;
}

/* --- START: New styles for hovering related items --- */
/* Dim unrelated recommendations when hovering the related links container in an open item */
/* This applies when the mouse is over the '.related' div */
.recommendations:has(li.recommendation.open .related:hover) li.recommendation:not(.highlighted-target):not(.open) {
  transition: opacity var(--recommendation-transition-duration) var(--recommendation-ease-out);
  /* Add smooth transition */
  opacity: 0.25;
  /* Dim unrelated items */
  /* Ensure the currently open item itself is not dimmed */
}

/* Ensure related items and the open item are fully opaque when the container is hovered */
/* This targets the specific related items marked by JS */
.recommendations:has(li.recommendation.open .related:hover) li.recommendation.highlighted-target,
.recommendations:has(li.recommendation.open .related:hover) li.recommendation.open {
  transition: opacity var(--recommendation-transition-duration) var(--recommendation-ease-out);
  /* Add smooth transition */
  opacity: 1;
  /* Keep related items and the open item fully visible */
}

/* Keep the open item fully visible by default (important for robustness) */
/* .recommendations li.recommendation.open { */
/*     opacity: 1 !important; /* Consider if !important is needed, trying without first */
/* } */
/* --- END: New styles for hovering related items --- */

.recommendations {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 7.5em;
  grid-auto-flow: dense;
  margin-right: .5em;
  padding-top: 0;
  gap: .5em;

  &.loading .recommendation {
    animation-duration: 0s !important;
  }
  .recommendation {
    filter: drop-shadow(0px 2px 3px #8881) drop-shadow(0px 4px 6px #8881)
      /* drop-shadow(0px 8px 12px #8881) */
    ;
    /* display: block; */
    display: flex;
    position: relative;
    flex-direction: column;
    transition: all var(--recommendation-transition-duration) var(--recommendation-ease-out), filter 0s linear;
    z-index: 100;
    margin-right: 0em;
    border-top: 1px solid white;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 1em;
    background: #fff;
    cursor: pointer;
    padding: 1em;
    overflow: hidden;
    animation: heightdown var(--recommendation-transition-duration) var(--recommendation-ease-out) forwards;
    scroll-margin-top: 5em;
    /* Add scroll offset */
    &:hover {
      filter: drop-shadow(0px 2px 3px #8882) drop-shadow(0px 4px 6px #8882) drop-shadow(0px 8px 12px #8882);
    }

    &:after {
      position: absolute;
      inset: 0;
      transition: opacity .2s linear;
      opacity: 0;
      border: 3px solid #ccc;
      /* Default: Use Gray */
      border-radius: inherit;

      content: '';
      pointer-events: none;
    }

    /* New style for the targeted recommendation */


    &.analyzing {
      /* background: blue; */
      &:after {
        /* opacity: .5; */
        opacity: 1;
        border-color: var(--light-blue);
        /* Default: Use Gray */
        animation: wipe-full 5s linear infinite;
      }
    }

    /* Active State: Purple border for analyzing when open */
    &.open.analyzing:after {
      border-color: var(--google-blue);
    }



    .info {
      display: flex;
      transition: opacity var(--recommendation-transition-duration) var(--recommendation-ease-out) 0s;
      opacity: 0;
      margin-top: .25em;
      /* margin-bottom: .5em; */

      /* overflow: hidden; */
      width: 100%;
      height: 5.75rem;
    }

    .description {
      position: relative;
      /* transition: all var(--recommendation-transition-duration) var(--recommendation-ease-out) 1s; */
      /* margin-top: -.5em; */
      /* padding-bottom: 1em; */
      /* display: block; */


      /* width: 100%; */
      width: 100%;
      height: 100%;
      overflow: auto;
      font-size: .9em;
      p {
        line-height: 1 !important;
      }
      &:after {
        display: block;
        position: sticky;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(to bottom, #fff0, #fff);
        height: .5em;
        content: '';
      }
      &:before {
        display: block;
        position: sticky;
        top: 0;
        right: 0;
        left: 0;
        background: linear-gradient(to top, #fff0, #fff);
        height: .5em;
        content: '';
      }
      p {
        display: block;
        line-height: 1.1;
        color: #666;
        /* Default: Use Gray */
        font-size: .9em;
        hyphens: auto;
        &:hover {
          /* background: #666; */
          /* Default Hover: Use Gray */
          /* color: #fff; */
        }
      }
    }

    .related {
      /* margin-left: 1.5rem; */
      transition: all var(--recommendation-transition-duration) var(--recommendation-ease-out);
      opacity: 0;
      padding-left: 0;
      width: 0;
      height: 100%;
      /* height: calc(100% - 5em); */
      /* outline: 1px solid red; */
      /* width: 10em; */
      overflow: auto;
      &:after {
        display: block;
        position: sticky;
        right: 0;
        bottom: 0;
        left: 0;

        transition: background var(--recommendation-transition-duration) var(--recommendation-ease-out);
        background: linear-gradient(to bottom, #fff0, #fff);
        height: .5em;
        content: '';
      }
      &:before {
        display: block;
        position: sticky;
        top: 0;
        right: 0;
        left: 0;
        transition: background var(--recommendation-transition-duration) var(--recommendation-ease-out);
        background: linear-gradient(to top, #fff0, #fff);
        height: .5em;
        content: '';
      }
      a {
        display: block;
        padding: .25em .125em .25em .15em;
        line-height: 1;
        /* width: 100%; */
        /* max-width: 100%; */
        /* overflow: hidden; */
        /* text-overflow: ellipsis; */
        /* white-space: nowrap; */
        color: #808;
        font-size: .9em;
        &:hover {
          background: #808;
          color: #fff;
        }
      }
    }

    &.dependencies {
      margin-right: -100%;

      /* background: */
      /* linear-gradient(to bottom, #8082, transparent 2em), */
      /* white; */
      animation: heightdown var(--recommendation-transition-duration) var(--recommendation-ease-out) forwards, widthdown var(--recommendation-transition-duration) var(--recommendation-ease-out) forwards;
      .title {
        &:before {
          display: inline-block;
          position: relative;
          top: -.125em;
          /* position: absolute; */
          /* top: 1em; */
          margin-right: .25em;
          border-radius: 100%;
          background: #4285F4;
          background: var(--google-blue);
          /* right: 1em; */
          width: .5em;
          height: .5em;
          overflow: hidden;
          color: transparent;
          content: 'Dependencies';
        }
      }

      .complete {
        opacity: .5;
        background: transparent;
      }
    }

    &.open {
      grid-row-end: span 2;
      transition: all var(--recommendation-transition-duration) var(--recommendation-ease-out);
      z-index: 999999;
      cursor: revert;
      animation: height var(--recommendation-transition-duration) var(--recommendation-ease-out) forwards;


      .info {
        transition-delay: var(--recommendation-transition-duration);
        opacity: 1;

      }
      .close {
        opacity: .5;
        pointer-events: auto;
      }
      .description {
        opacity: 1;
      }

      &.dependencies {
        grid-column-end: span 2;
        animation: height var(--recommendation-transition-duration) var(--recommendation-ease-out) forwards, width var(--recommendation-transition-duration) var(--recommendation-ease-out) forwards;
        .analyze {
          margin-left: 50%;
        }
        .title {
          /* width: 50%; */

        }

        .description {
          /* width: calc(50% - 1.5rem); */
          /* transition-delay: .2s; */
          /* height: calc(100% + 1rem); */
          /* width: 50%; */
        }

        .related {
          opacity: 1;
          /* margin-top: -.5rem; */
          margin-left: .5rem;

          /* width: calc(50% + 5rem); */
          width: 100%;
          /* height: calc(100% - .5rem); */
          font-size: .9em;

          /* padding-bottom: 1em; */
          /* width: 50%; */

          /* Active State: Purple links when open */
          a {
            border-radius: .25em;
            padding-left: .5em;
            /* hyphens: manual; */
            /* overflow-wrap: break-word; */
            word-break: break-all;
            color: #4285F4;
            color: var(--google-blue);
            &:hover {
              background: #4285F4;
              background: var(--google-blue);
              color: #fff;
            }
          }

        }
      }
    }
  }


  .header {
    display: flex;
    /* flex-direction: column; */
    /* flex: 1; */
    flex-wrap: wrap;
    /* align-items: center; */
    justify-content: space-between;
    /* width: 100%; */
    /* row-gap: 0.5em; */

    .title {
      display: -webkit-box;
      /* display: block; */
      /* transition: all var(--recommendation-transition-duration) linear; */
      /* flex-basis: 100%; */
      margin-bottom: 1em;
      /* flex: 1 1 100%; */
      width: 100%;
      min-height: 2.5em;
      overflow: hidden;
      text-overflow: ellipsis;
      letter-spacing: -.02em;
      /* width: 100%; */
      /* flex: 1; */
      color: #333;
      font-weight: bold;
      text-wrap: balance;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .category {
      display: block;
      margin: 0;
      /* margin-right: 0.5em; */
      text-transform: uppercase;
      /* margin-right: -100%; */
      color: #7e8f9e;
      font-size: .9em;
      font-weight: bold;
    }
    .importance {
      position: relative;
      bottom: -0.5em;
      margin-bottom: -3em;

      /* margin-left: -100%; */
      margin-left: -5ch;
      /* margin-right: -.5em; */
      /* display: inline-block; */
      /* margin-left: auto; */
      /* justify-self: flex-end; */
      /* border-radius: 9999px; */
      border-radius: .5em;
      background: #e4f2f5;
      background: #d4f6e1;
      padding: .33em .5em .25em .5em;
      height: 1.25rem;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: .03em;

      color: #555;
      font-size: .66em;
      font-weight: 500;
    }
    .level {
      /* display: block; */
      width: 100%;
      /* margin-top: -2em; */
      /* width: 100%; */
      color: #888;
      font-size: .8em;
    }
  }

  .recommendation.open .actions .close {
    &:hover {
      opacity: 1;
      &:before {
        bottom: 0;
        rotate: 45deg;
      }
    }
  }

  .actions {
    display: flex;
    flex-direction: column;

    .close {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      /* transition: all var(--recommendation-transition-duration) linear; */
      opacity: 0;

      /* background: red; */
      cursor: pointer;
      padding: .25em .5em 0 .5em;
      /* padding: 1em; */
      width: 2em;
      height: 1.5em;
      overflow: hidden;
      text-align: right;
      text-align: center;
      text-align: right;
      text-transform: uppercase;
      color: transparent;

      /* font-size: .5em; */
      font-weight: 500;
      pointer-events: none;
      /* background: red; */

      &:before {
        display: block;
        position: absolute;
        /* top: .5em; */
        bottom: .25em;
        left: .5em;
        transform-origin: 50% 50%;
        border-top: 1px solid black;
        border-left: 1px solid black;
        width: .66em;
        height: .66em;
        /* color: #888; */
        content: "✕";
        rotate: -135deg;
      }
    }
    .analyze {
      display: block;

      cursor: pointer;
      padding: .75em 0;
      text-align: center;
      color: #888;
      font-size: .8em;
      /* display: none; */
      &:hover {
        color: #000;
      }
    }
    .delete {
      display: none;
      position: absolute;
      bottom: 1em;
      left: 1em;
    }
    .complete {
      display: block;
      margin: 0 -.4em;
      margin-top: .1em;
      /* margin-top: -.5em; */
      /* margin-top: 1em; */
      border-radius: .5em;
      /* background: #eee5; */
      cursor: pointer;
      padding: .5em 0;
      text-align: center;
      font-weight: 500;

      &:hover {
        background: #aaa5;
        /* Default Hover: Use Gray */
        color: #000;
      }
    }
  }

  .related-items-display {
    display: flex;
    flex-direction: column;
    a {
      display: block;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #666;
      /* Default: Use Gray */
      font-size: .9em;
    }
  }
}

.recommendation-done {
  opacity: 0.8;
  background: #f8f8f8 !important;
  .recommendation & button {
    opacity: 0.7;
    &[title="Toggle Done"] {
      color: green !important;
    }
  }
}


.background-blur {
  position: relative;
}



#recommendation-counts {
  /* filter: drop-shadow(0px 2px 3px #8881) drop-shadow(0px 4px 6px #8881) drop-shadow(0px 8px 12px #8881); */
  display: flex;
  position: sticky;
  top: -.5em;
  top: 0;
  z-index: 99999999;

  margin-right: .5em;
  margin-bottom: 2em;
  margin-left: -4px;
  gap: 1em;
  isolation: isolate;

  /* ::before for the progressive blur effect */
  &::before {
    position: absolute;
    inset: 0;
    bottom: -2em;
    z-index: -2;
    /* Furthest back layer for blur */
    content: '';
    pointer-events: none;
    /* Removed background gradient */
    /* Apply the stronger blur */
    backdrop-filter: blur(4px);
    /* Mask to show blur mostly at the top, fading out */
    mask-image: linear-gradient(to bottom, black 2em, transparent 100%);
    /* -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%); */
  }

  /* ::after for the background opacity gradient */
  &::after {
    position: absolute;
    inset: 0;
    bottom: -2em;
    z-index: -1;
    /* Layer between blur and content */
    /* Apply the background gradient with opacity change */
    background: linear-gradient(to bottom, rgba(248, 248, 248, 1) 4em, rgba(248, 248, 248, 0) 100%);
    content: '';
    pointer-events: none;
    /* No backdrop-filter here */
  }

  .count-completed, .count-total {
    display: none;
  }
  .level {
    display: flex;
    flex: 1;

    flex-wrap: wrap;
    border-bottom-left-radius: 1.25em;
    border-bottom-right-radius: 1.25em;
    padding-top: 1em;
    /* REMOVED: flex-wrap: nowrap; */
    /* REMOVED: &:has(.title:hover) { background: #f0f1; } */
    /* background: red; */
    /* padding: .5em 0 em 0; */
    /* padding-bottom: 2em; */
    /* REMOVED: &:hover { background: #f0f1; li.item { background: #fff; } } */
    /* padding: 1em; */
    .list {
      display: flex;

      .item {
        display: block;

        margin-right: 1vw;
        /* border-radius: 9999px; */
        /* border-radius: 9999px; */
        /* border-radius: .25em; */
        /* border-bottom: 2px solid purple; */
        /* outline: 1px solid orange; */
        /* width: 10vw; */
        background: #f0f2;
        /* background: red !important; */

        text-align: center;
        font-size: .9em;
        /* REMOVED: &:hover {} */

        /* display:block; */
        /* REMOVED: &:hover { cursor: pointer; } */
      }
    }

    svg {
      display: none;
    }
    .title {
      /* width: 100%; */
      /* text-align: center; */
      margin-right: 100%;
      margin-bottom: .75rem;

      /* padding: .5em .75em; */
      margin-left: .125em;
      border-bottom: 2px solid transparent;
      /* font-size: 1.1em; */
      font-weight: bold;
      /* margin-left: .125em; */

      &:hover {
        /* color: #a0a; */
      }

      /* top: 0; */

      /* text-align: center; */
    }

  }
  .counts-header {
    display: none;
  }
}
#regenerate-recommendations-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  cursor: pointer;
  padding: .5em;
  text-transform: uppercase;
  font-size: .5em;
}

details {
  display: none !important;
}

#clear-all-recommendations-btn {
  display: none;
}

.resizer {
  position: relative;
  flex-shrink: 0;
  transition: background-color 0.2s ease-in-out;
  z-index: 10;
  background-color: transparent;
  cursor: col-resize;
  width: 5px;
  height: 100%;
}

.resizer::before {
  position: absolute;
  top: 0;
  right: -5px;
  bottom: 0;
  left: -5px;
  content: '';
}

.resizer:hover,
.resizer.dragging {
  background-color: #ccc;
}

.container.resizing iframe {
  pointer-events: none;
}

.recommendation-placeholder {
  border-radius: .5em;
  background: #eee1;
  /* Default: Use light gray */

}

.recommendations.loading {
  cursor: progress;
  .recommendation {
    opacity: .5;
    pointer-events: none;

  }
  .recommendation-placeholder {
    /* REMOVED: animation: pulse 1.5s infinite ease-in-out alternate !important; */
    /* Define animation properties individually */
    animation-name: pulse;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  /* Add staggered delays */
  .recommendation-placeholder:nth-child(3n + 1) {
    animation-delay: 0s;
  }
  .recommendation-placeholder:nth-child(3n + 2) {
    animation-delay: 0.15s;
  }
  .recommendation-placeholder:nth-child(3n + 3) {
    animation-delay: 0.30s;
  }
}

#Regenerate {
  /* Ensure it's treated like a grid item if needed, adjust display as necessary */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Specific styles for the regenerate placeholder */
  transition: all var(--recommendation-transition-duration) ease-in-out;
  /* Override italic */
  border-radius: 0.5em;

  /* Solid border */

  /* Specific background */
  cursor: pointer;
  animation: none;
  /* Ensure no pulse animation */
  color: #666;
  /* Specific text color */
  font-weight: bold;
  /* Make text bold */
  font-style: normal;

  &:hover {
    background: #fff;
    color: #333;
    /* Darker text on hover */
  }
}

@keyframes pulse {
  0% {
    opacity: 0.33;
  }
  100% {
    opacity: .66;
  }
}

/* #region Recommendation Counts Styling */
#recommendation-counts {
  /* ... existing styles ... */

  .level {
    /* ... existing styles ... */
    /* flex: 1 0 auto; */
    flex: auto;
    /* padding: 1em; */
    /* outline: 1px solid red; */
    /* padding:em; */

    &.empty-level {
      flex: 0;
      opacity: .33;
      font-size: .9em;
      /* pointer-events: none; */
      /* REMOVED: cursor: not-allowed !important; */
      .item, .title {
        pointer-events: none;

      }
      .title {
        color: #000;
      }
    }

    /* REMOVED: Hover for NON-FILTERED levels */
    /* &:not(.filtered):not(.empty-level):hover { ... } */

    &.filtered {
      /* background: #e1bee7; */
      /* Active State: Keep Purple */
      /* Active State: Purple title when level is filtered */
      .title {
        /* color: purple; */
        &:hover {
          /* color: #a0a; */
          /* Keep hover variant */
        }
      }
    }

    /* REMOVED: Hover for FILTERED levels */
    /* &.filtered:not(.empty-level):hover { ... } */

    .title {
      /* background: red; */
      cursor: default;
      /* justify-self: center; */

      /* Default: Use Gray */
      /* padding-lefT: 1.75em; */
      text-transform: uppercase;
      letter-spacing: .025em;

      /* Default cursor */
      /* Default state */
      color: #4285F4;
      color: var(--google-blue);
      font-weight: 600;
      /* Hover state - applies only when title is hovered */
      &:hover {
        /* text-decoration: underline; */
        border-bottom-color: #4285F4;
        border-bottom-color: var(--google-blue);
        cursor: pointer;
        /* Pointer cursor ONLY on title hover */
        /* Optional: Add visual feedback on title hover, e.g., underline */
        /* text-decoration: underline; */
        /* color: #a0a; */
        /* Keep interactive hover purple */
      }

      &.empty-level-title {
        opacity: 0.5;
        cursor: default !important;
        /* Ensure default cursor for empty */
        pointer-events: none;
        /* Disable clicks */
      }
    }



    .list {
      align-items: flex-start;
      flex: 1;
      flex-wrap: wrap;
      /* ... existing styles ... */
      /* Using item margins for spacing */
      gap: .25rem;

      .item {
        filter: drop-shadow(0px 2px 3px #8881) drop-shadow(0px 4px 6px #8881) drop-shadow(0px 8px 12px #8881);

        /* ... existing styles ... */
        position: relative;
        flex: 1;
        margin: 0;
        /* Add transition specifically for margin and border-radius */

        /** WHY IS THE MARGIN NOT BEING SMOOTHLY DOWN ANIMATED?**/
        border-radius: 9999px;
        /* Base rounded corners */
        background: #e8dfe8;
        background: var(--light-blue);
        /* Default: Use Light Gray */
        padding: .5em 0em .6em 0em;

        letter-spacing: .025em;
        font-weight: 500;

        /* REMOVED: Conditional hover styling based on filtered state */
        /* &:hover { background: #e1bee7 !important; } */

        /* Simple Hover for ALL items */
        &:hover {
          /* background: #ccc; */
          /* Default Hover: Use Medium Gray */
          background: #4285F4;
          background: var(--google-blue);
          cursor: pointer;
          color: #fff;
        }
        /* Padding for internal content */

        /* REMOVED: Hover for NON-FILTERED items */
        /* &:not(.filtered):hover { ... } */

        &.filtered {
          background: #4285F4;
          background: var(--google-blue);
          /* Active State: Keep Dark Purple */
          color: #fff;

          /* 4/4 Purple - Item Filtered */
          /* font-weight: 500; */
          &:hover {
            /* background: #7d4089; */

          }
        }

        /* --- Connect adjacent filtered items --- */
        /* Flatten right corners AND remove right margin if the NEXT sibling is also filtered */
        &.filtered:has(+ .item.filtered) {
          margin-right: -.5rem;
          /* padding-left: 1em; */
          /* margin-right: -.125em; */
          /* border-right: 1em solid blue; */
          border-right: .5rem solid transparent;
          /* Active State: Keep Dark Purple */
          /* margin-right: -.25em; */
          /* margin-right: -1em; */
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          /* padding-right: .5em; */

          /* Collapse right margin */
        }
        /* Flatten left corners AND remove left margin if it FOLLOWS another filtered item */
        &.filtered + .item.filtered {
          position: relative;
          margin-left: -.5rem;
          /* margin-left: -.125em; */
          border-left: .5rem solid transparent;
          /* padding-left: .5em; */
          /* border-left: .125em solid #7d40; */
          /* Active State: Keep Dark Purple Transparent */
          /* margin-left: calc(-.25em - 1px); */
          /* border-left: 1px solid #e1bee7; */
          /* margin-left: -1.5em; */
          /* Collapse left margin */
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          &:before {
            position: absolute;
            top: 0;
            bottom: 0;
            left: -.25em;
            z-index: 999;
            background: #fff;
            width: 1px;
            overflow: hidden;
            content: 'hi';
          }

          /* padding-left: .75em; */
        }
        /* Note: :has() might not be supported in all browsers. */
        /* --- End Connect adjacent filtered items --- */

        /* Visual status indicators - Keep as is unless specified */
        &.empty svg circle:nth-child(2) {
          stroke: #bbb;
        }
        &.progress svg circle:nth-child(2) {
          stroke: #666;
          /* Default: Use Gray */
        }
        /* Active State: Purple stroke for progress when level is filtered */
        .level.filtered &.progress svg circle:nth-child(2) {
          stroke: #8e24aa;
        }
        &.complete svg circle:nth-child(2) {
          stroke: #38761d;
        }

        .count-completed, .count-total {
          color: #555;
          font-size: 0.9em;
        }
      }
    }

    /* REMOVED: Style level title when filtered */
    /* &.filtered .title { ... } */

    /* REMOVED: Style level title when hovered */
    /* &:hover:not(.empty-level) .title {} */
  }
}
/* #endregion Recommendation Counts Styling */