/*****************
Chat card layout - start 
******************/
body.crlngn-ui {

  .chat-sidebar {
    --chat-message-spacing: 6px;
    background: var(--sidebar-background, var(--color-cool-5-90));
    border-radius: 0;
    width: var(--sidebar-width);

    &.no-bg{
      background: transparent;
    }
  }
}

body.crlngn-ui.crlngn-chat {

  &.player-chat-borders,
  &.roll-chat-borders {
    :is(.chat-popout, #chat-log, .chat-log) .chat-message,
    :is(.chat-popout, #chat-log, .chat-log) .chat-message.whisper,
    :is(.chat-popout, #chat-log, .chat-log) .chat-message.blind{
      transition: border .2s ease-in-out; 
      border-width: 1px;
      border-style: solid;
    }
    :is(.chat-popout, #chat-log, .chat-log) .chat-message.left-border {
      border-width: 0;
      border-left-width: 3px;
    }
    :is(.chat-popout, #chat-log, .chat-log) .chat-message.right-border {
      border-width: 0;
      border-right-width: 3px;
    }
    :is(.chat-popout, #chat-log, .chat-log) .chat-message.top-border {
      border-width: 0;
      border-top-width: 3px;
    }
  }
  
  /* DND5e */
  /* use colors per roll type */
  &.roll-chat-borders {
    --ddb-color-custom-roll: #f5a623;
    --ddb-color-attack-roll: #1b9af0;
    --ddb-color-damage-roll: #df7b7b;
    --ddb-color-ability-roll: #b55dff;
    --ddb-color-heal-roll: #6cbf5b;

    &.system-dnd5e :is(.chat-popout, #chat-log) li.message:is(.roll),
    &.system-dnd5e :is(.chat-popout, #chat-log) li.message:is(.custom) {
      border: 1px solid var(--ddb-color-custom-roll);
    }
    &.system-dnd5e :is(.chat-popout, #chat-log) li.message:is(.attack) {
      border: 1px solid var(--ddb-color-attack-roll);
    }
    &.system-dnd5e :is(.chat-popout, #chat-log) li.message:is(.damage) {
      border: 1px solid var(--ddb-color-damage-roll);
    }
    &.system-dnd5e :is(.chat-popout, #chat-log) li.message:is(.check),
    &.system-dnd5e :is(.chat-popout, #chat-log) li.message:is(.skill),
    &.system-dnd5e :is(.chat-popout, #chat-log) li.message:is(.ability),
    &.system-dnd5e :is(.chat-popout, #chat-log) li.message:is(.tool) {
      border: 1px solid var(--ddb-color-ability-roll);
    }
    &.system-dnd5e :is(.chat-popout, #chat-log) li.message:is(.heal), 
    &.system-dnd5e :is(.chat-popout, #chat-log) li.message:is(.healing),
    &.system-dnd5e :is(.chat-popout, #chat-log) li.message:is(.save) {
      border: 1px solid var(--ddb-color-heal-roll);
    }
    
    /* flavor text - roll type */
    &.system-dnd5e :is(.chat-popout, #chat-log) .chat-message.crlngn span.roll {
      color: var(--ddb-color-custom-roll);
    }
    &.system-dnd5e :is(.chat-popout, #chat-log) .chat-message.crlngn span.tohit {
      color: var(--ddb-color-attack-roll);
    }
    &.system-dnd5e :is(.chat-popout, #chat-log) .chat-message.crlngn span.damage {
      color: var(--ddb-color-damage-roll);
    }
    &.system-dnd5e :is(.chat-popout, #chat-log) .chat-message.crlngn span.check {
      color: var(--ddb-color-ability-roll);
    }
    &.system-dnd5e :is(.chat-popout, #chat-log) .chat-message.crlngn span.heal, 
    &.system-dnd5e :is(.chat-popout, #chat-log) .chat-message.crlngn span.save {
      color: var(--ddb-color-heal-roll);
    }
    &.system-dnd5e :is(.chat-popout, #chat-log) .chat-message.left-border {
      border-width: 0;
      border-left-width: 3px;
    }
  }
}

body.crlngn-ui.crlngn-chat:not(.system-daggerheart) {
  /* variables for the custom dnd5e card buttons */
  --crlngn-i18n-attack: "attack";
  --crlngn-i18n-healing: "healing";
  --crlngn-i18n-damage: "damage";
  --crlngn-i18n-template: "template";
  --crlngn-i18n-consume: "consume";
  --crlngn-i18n-summons: "summons";
  --crlngn-i18n-refund: "refund";
  --crlngn-i18n-macro: "macro";
  --crlngn-i18n-save-dc: " save DC ";
  --crlngn-i18n-save: " save ";

  #ui-right,
  .chat-popout {
    --dnd5e-color-gold: var(--color-warm-2);
    --checkbox-fill-color: var(--color-warm-2);
    --checkbox-border-color: var(--color-warm-2);
  }

  .chat-message{
    color: var(--default-color);
  }
  .chat-message p.supplement > strong{
    color: var(--default-color);
  }
  .chat-message .message-content {
    > h1, h2{
      font-size: var(--font-size-20);
    }
    > h3{
      font-size: var(--font-size-16);
    }
    > h4{
      font-size: var(--font-size-15);
    }
  }
  .chat-message .message-content:not(.dnd5e2) {
    /*font-size: var(--font-size-13);*/
    p, ul, ol, li, span, a, b, strong {
      font-family: var(--crlngn-font-family);
    }
    h3, h4, h5, h6 {
      font-family: var(--crlngn-font-family);
      font-weight: 600;
    }
    
    h1, h2{
      font-family: var(--crlngn-font-titles);
      font-size: var(--font-size-21);
      font-weight: 600;
    }
    h3{
      font-size: var(--font-size-16);
    }
    .action-glyph{
      font-family: "Pathfinder2eActions", sans-serif;
    }
  }

  /*
  .chat-message .message-content:not(:has(div)){
    margin: 1em 0;
  }
  */

  .chat-message .message-content .gold-icon{
    border: 1px solid var(--color-dark-bg-50);
  }

  #chat{
    padding: 0.5rem 0;
  }

  #chat ul.dnd5e2.unlist.evaluation li {
    padding: 0.25rem 0;

    &:first-child{
      padding-top: 0.5rem;
    }
    &:last-child{
      padding-bottom: 0.5rem;
    }
  }

  .pill-lg{
    border: none;
  }

  .chat-card .pills .pill {
    border: none;
    font-size: var(--font-size-10);
    font-weight: 500;
    background-color: var(--chat-button-bg-15);
    padding: 3px 5px;
  }
  .chat-card .pills{
    gap: 0.2em;
  }
  :is(.chat-popout, #chat-log, .chat-log) .chat-message .ddb-game-log-chat-card .ddb-card-content a.inline-roll {
    border-radius: 6px;
    border: none;
    color: var(--color-highlights); 
  }
  
  :is(.chat-popout, #chat-log, .chat-log) .chat-message {
    .message-header time {
      color: inherit;
      opacity: 0.5;
    }
  }
  .chat-message, .chat-message.whisper, .chat-message.blind {
    border-radius: 6px;
    background: var(--card-color-bg) !important;
    box-shadow: 0 0 0px var(--dnd5e-shadow-45);
  }
  .chat-message .message-header .whisper-to {
    margin-top: 1.25em;
  }
  .chat-message.whisper{
    background: var(--card-color-bg) !important;
    background-image: var(--striped-bg) !important;
  }
  .chat-message.blind{
    background: var(--card-color-bg) !important;
    background-image: var(--striped-bg-2) !important;
  }
  .chat-message.whisper span.message-metadata {
    position: relative;
  }
  .chat-message.whisper span.message-metadata:after,
  .chat-message.blind span.message-metadata:after{
    content: 'whisper';
    display: inline-block;
    position: absolute;
    right: 0;
    top: 22px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
    padding: 2px 4px;
    opacity: 1;
  }

  .chat-message.blind span.message-metadata:after{
    content: 'blind';
  }

  .chat-card .gold-icon,
  :is(.card-tray, .effects-tray) .targets .target > img {
    border: 0;
    border-radius: 3px;
  }
  .chat-message.crlngn h1, 
  .chat-message.crlngn h2, 
  .chat-message.crlngn h3{
    font-family: var(--crlngn-font-titles);
  }

  .chat-message.crlngn, 
  .chat-message.crlngn h4, 
  .chat-message.crlngn h5,
  .chat-message.crlngn h6,
  .chat-message.crlngn .card-header {
    font-family: var(--crlngn-font-family);
  }
  /*
  &.no-borders{
    :is(.chat-popout, #chat-log, .chat-log) .chat-message,
    :is(.chat-popout, #chat-log, .chat-log) .chat-message.whisper,
    :is(.chat-popout, #chat-log, .chat-log) .chat-message.blind{
      border-width: 1px;
      border-style: solid;
      border-color: transparent;
    }
  }*/
  
  
  .chat-message.damage ul.target.unlist{
    width: calc(100% - 40px);
    flex: 1 1 calc(100% - 40px);
  }
  
  /* card headers */
  .chat-message .message-header .name-stacked .title,
  &.system-dnd5e .chat-message .name-stacked .title {
    letter-spacing: 0.015em;
    font-weight: 600;
    font-family: var(--crlngn-font-titles);
  }

  .crlngn.ddbgl .chat-card .card-header.collapsed{
    max-height: 0px;
    padding: 0;
  }
  .chat-message.ddb-game-log-open-card .ddb-game-log-chat-card {
    overflow: auto;
  }
  :is(.chat-popout, #chat-log, .chat-log) .crlngn .message-header .message-sender {
    gap: 0.5em;
  }
  :is(.chat-popout, #chat-log, .chat-log) .chat-message.message .message-header .message-sender img,
  :is(.chat-popout, #chat-log, .chat-log) .crlngn .message-header .message-sender img,
  :is(.chat-popout, #chat-log, .chat-log) .crlngn .message-header .message-sender .avatar img {
    border-radius: 4px;
  }
  
  
  :is(.chat-popout, #chat-log, .chat-log) .crlngn .message-header .subtitle {
    text-transform: uppercase;
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0.02em;
    margin-top:3px;
    /*font-size: var(--font-size-12);*/
  }
  
  :is(.chat-popout, #chat-log, .chat-log) .message:not(.ddbgl) .message-header .flavor-text {
    /*text-transform: uppercase;*/
    letter-spacing: 0.02em;
    /*font-size: var(--font-size-12);*/
    line-height: 1.4;
    margin: 0.5em 0;
  }
  :is(.chat-popout, #chat-log) .message .message-header .message-sender img {
    background: var(--color-dark-bg-25);
    box-shadow: 0 0 4px var(--color-dark-bg-50);
  }

  .chat-message a.content-link, 
  .chat-message a.inline-roll {
    background: transparent;
    padding: 2px 6px;
    line-height: 1.6;
    border: none;
    border-radius: 3px;
    white-space: nowrap;
    word-break: break-all; 
  }

  .chat-message .cards-notification{
    margin: 1rem 0;
    img{
      border: none;
    }

  }
  /*.crlngn .chat-card .card-header.description:not(.collapsible){
    display: none;
  }*/
  .chat-card .collapsible.card-tray .collapsible-content {
    padding: 0.5rem 0;
  }
  
  /* content */
  .chat-card,
  :is(.chat-popout, #chat-log) .message-content {
    line-height: 1.25;
  }

  .chat-card .description {
    background-color: transparent;
    border: none;
  }

  .chat-card .description{
    background: rgba(255,255,255,0.35);
    border: none;
    line-height: 1.35;
    padding: 0.25rem 0;

    > *:not(header){
      margin: 2px 0;
    }
    header {
      margin: 0 0 6px 0;
    }
  }

  .chat-card .description .details, 
  .chat-card .description .details p {
    line-height: 1.15rem; 
    /*font-size: var(--font-size-12); */
  }

  .chat-card .description .details > .wrapper {
    display: block;
    line-height: 1.4;
    
  }
  .chat-card .description .details span,
  .chat-card .description .details span.reference-link{
    display: inline-block;
  }
  .chat-card .description details {
    margin: 10px 0;
  }
  .chat-card .description details summary{
    margin: 10px 0;
  }
  .chat-message .ddb-game-log-chat-card .ddb-card-content p{
    /*font-size: var(--font-size-12);*/
  }
  .sidebar-tab .chat-message .message-content .dice-total, 
  .sidebar-tab .chat-message.ddb-game-log-message h4.dice-total {
    font-weight: 600;
  }
  .chat-message .message-content .dice-total, 
  .chat-message.ddb-game-log-message .dice-total, 
  .chat-message .message-content .dice-formula, 
  .chat-message.ddb-game-log-message .dice-formula {
    border: 1px solid transparent;
    box-shadow: none;
    background: var(--color-dark-bg-10);
  }
  /* card button layout */
  .chat-card .card-buttons:not(.midi-buttons) {
    flex-direction: row; 
    flex-wrap: wrap; 
  }
  .chat-card .card-buttons {
    gap: 0.25em;
  }
  .chat-card .card-buttons:not(.midi-buttons) > button {
    flex: 1 1 auto;
    min-width: calc((100% - 10px) / 2);
    width: auto;
    font-size: var(--font-size-12);
    span{
      font-size: var(--font-size-12);
    }
  }
  .chat-card .card-buttons button[data-action=rollRequest] {
    flex: 1 1 auto;
    min-width: calc(100%);
    width: auto;
  }

  .chat-message .rsr-title dnd5e-icon,
  .chat-message button[data-type=skill] dnd5e-icon {
    display: none;
  }
  .chat-message .card-buttons > button[data-action=rollAttack],
  .chat-message .chat-card > button[data-action=rollAttack],
  .chat-message.attack .rsr-section-attack .rsr-title {
    *:first-child {
      display: none;
    }
    &:before{
      content: '\2694';
      font-size: var(--font-size-16);
      color: var(--color-text-dark-1);
    }
    &:hover:before{
      color: var(--color-light-1);
    }
  }

  .chat-message .card-buttons > button[data-action=rollHealing],
  .chat-message.heal .rsr-title {
    *:first-child {
      display: none;
    }
    &:before{
      content: '\2695';
      /*font-family: var(--font-awesome);*/
      font-size: var(--font-size-16);
      color: var(--color-text-dark-1);
    }
  }

  &.system-dnd5e .chat-message button[data-type=skill] {
    &:before{
      content: '\f552';
      font-family: var(--font-awesome);
      font-size: var(--font-size-12);
      color: var(--color-text-dark-1);
    }
    &:hover:before{
      color: var(--color-light-1);
    }
  }

  &.system-dnd5e .chat-card .card-buttons > button {
    &[data-action=placeSummons],
    &[data-action=rollAttack],
    &[data-action=rollHealing],
    &[data-action=rollDamage],
    &[data-action=placeTemplate],
    &[data-action=consumeResource],
    &[data-action=refundResource],
    &[data-action=executeMacro],
    &[data-action=rollSave] {
      span{
        font-size: 0;
        align-self: center;
        /*display: inline-flex;*/
        align-items: center;
      }
    }

    &[data-action=placeSummons],
    &[data-action=rollAttack],
    &[data-action=rollHealing],
    &[data-action=rollDamage],
    &[data-action=placeTemplate],
    &[data-action=consumeResource],
    &[data-action=refundResource],
    &[data-action=executeMacro] {
      > span:before {
        content: "";
        display: flex;
      }
    }
    span.hidden-dc:after, span.visible-dc:after {
      content: "";
      display: flex;
    }

    span:not(.hidden-dc, .visible-dc) {
      display: flex;
      align-items: center;

      > i {
        margin-right: 0.25rem;
      }
    }
  }
  


  &.system-dnd5e .chat-card .description .summary > img {
    align-self: flex-start;
  }

  &.system-dnd5e .chat-card .card-buttons > button span:before {
    content: "";
    display: flex;
    font-size: var(--font-size-12);
  }

  &.system-dnd5e .chat-card .card-buttons > button[data-action=placeSummons] span:before {
    /*content: "summons";*/
    content: var(--crlngn-i18n-summons);
  }
  
  &.system-dnd5e .chat-card .card-buttons > button[data-action=rollAttack] span:before {
    /*content: "attack";*/
    content: var(--crlngn-i18n-attack);
  }
  
  &.system-dnd5e .chat-card .card-buttons > button[data-action=rollHealing] span:before {
    /*content: "healing";*/
    content: var(--crlngn-i18n-healing);
  }
  
  &.system-dnd5e .chat-card .card-buttons > button[data-action=rollDamage] span:before {
    /*content: "damage";*/
    content: var(--crlngn-i18n-damage);
  }
  
  &.system-dnd5e .chat-card .card-buttons > button[data-action=placeTemplate] span:before {
    /*content: "template";*/
    content: var(--crlngn-i18n-template);
  }
  
  &.system-dnd5e .chat-card .card-buttons > button[data-action=consumeResource] span:before {
    /*content: "consume";*/
    content: var(--crlngn-i18n-consume);
  }
  
  &.system-dnd5e .chat-card .card-buttons > button[data-action=refundResource] span:before {
    /*content: "refund";*/
    content: var(--crlngn-i18n-refund);
  }
  
  &.system-dnd5e .chat-card .card-buttons > button[data-action=executeMacro] span:before {
    /*content: "macro";*/
    content: var(--crlngn-i18n-macro);
  }
  
  .chat-card .card-buttons button[data-action=rollSave] span.visible-dc:after {
    content: attr(data-ability) " " var(--crlngn-i18n-save-dc) " " attr(data-dc);
    text-transform: uppercase;
    display: inherit;
    font-size: var(--font-size-12);
  }
  
  .chat-card .card-buttons button[data-action=rollSave] span.visible-dc:after {
    content: attr(data-ability) " " var(--crlngn-i18n-save-dc) " " attr(data-dc);
    text-transform: uppercase;
    display: flex;
    font-size: var(--font-size-12);
  }
  .chat-card .card-buttons button[data-action=rollSave] span.hidden-dc:after {
    content: attr(data-ability,'') " " var(--crlngn-i18n-save,'');
    text-transform: uppercase;
    display: flex;
    font-size: var(--font-size-12);
  }
  
  /* effects / targets list */
  :is(.card-tray, .effects-tray) .targets .target {
    flex-direction: row;
  }
  :is(.card-tray, .effects-tray) .effects .effect:not(:last-child),
  :is(.card-tray, .effects-tray) .targets .effect:not(:last-child),
  :is(.card-tray, .effects-tray) .effects .target:not(:last-child),
  :is(.card-tray, .effects-tray) .targets .target:not(:last-child) {
    margin-bottom: 6px;
  } 
  :is(.card-tray, .effects-tray) .target-source-control {
    margin: 4px 0 6px 0;
  }

  :is(.card-tray, .effects-tray) .target-source-control button {
    height: 1.5em;
    line-height: 1.5em;
  }
  
  :is(.card-tray, .effects-tray) button:not(.unbutton),
  .chat-card button:not(.unbutton){
    min-height: 30px;
    font-size: var(--font-size-12);
    padding: 5px;
    border: 1px solid var(--color-dark-bg-10);
    margin: 2px 0 0 0;
    line-height: 1.25;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dnd5e2 :is(.card-tray, .effects-tray) .wrapper > button, 
  .dnd5e2.card-tray .wrapper > button {
    width: 100%;
  }
  
  /* dnd5e buttons */
  :is(.card-tray, .effects-tray) .targets .target .damage-multipliers button, 
  .card-tray .targets .target .damage-multipliers button {
    border: 1px solid var(--color-dark-bg-10);
  }
  :is(.card-tray, .effects-tray) .targets .target .damage-multipliers button::after, 
  .card-tray .targets .target .damage-multipliers button::after {
    display: none;
  }
  :is(.card-tray, .effects-tray) .targets .target .damage-multipliers button[aria-pressed="true"], 
  .card-tray .targets .target .damage-multipliers button[aria-pressed="true"] {
    box-shadow: 0 0 102px var(--color-dark-bg-10);
    border: 1px solid var(--color-text-hyperlink);
  }
  :is(.card-tray, .effects-tray) .targets .target .damage-multipliers::before, 
  .card-tray .targets .target .damage-multipliers::before {
    display: none;
  }
  :is(.card-tray, .effects-tray) .targets .target .damage-multipliers, 
  .card-tray .targets .target .damage-multipliers {
    grid-template-columns: repeat(6, 1fr);
    margin-inline: 0;
  }
  :is(.card-tray, .effects-tray) > label, 
  .card-tray > label {
    padding: 8px 0 0 0;
  }

  .chat-card .card-buttons > * span {
    font-size: var(--font-size-12);
  }

  section.card-header.description.rsr-section-attack,
  section.card-header.description.rsr-section-damage {
    padding: 0;
  }

  .chat-message .message-content .midi-results{
    line-height: 1.6;
  }

  /* Chat card layout - end */
  /*********
  DARK MODE 
  **********/
  &.stream.theme-dark .chat-message,
  #interface.theme-dark .chat-message {
    color: var(--color-light-1);
  }
  &.stream.theme-dark .chat-message p.supplement > strong,
  #interface.theme-dark .chat-message p.supplement > strong,
  #interface.theme-dark .rsr-supplement strong{
    color: var(--color-light-1);
  }
  &.stream.theme-dark,
  #interface.theme-dark,
  .chat-popout.theme-dark,
  #chat-popout.theme-dark,
  #chat-pins.theme-dark {
    color: var(--color-light-1);

    .chat-message div:not(.target-dc-result, .result, .target-dc) span:not(.tag, .degree, .die),
    .chat-message div:not(.roll, .success, .critical-success, .failure, .critical-failure, .icons),
    .chat-message p,
    .chat-message table,
    .chat-message ul,
    .chat-message ol,
    .chat-message li:not(.die),
    .chat-message header,
    .chat-message .message-header {
      color: var(--color-light-1);
    }
  }
  &.stream.theme-light,
  #interface.theme-light,
  .chat-popout.theme-light,
  #chat-popout.theme-light,
  #chat-pins.theme-light {
    color: var(--color-dark-1);

    .chat-message div:not(.target-dc-result, .result, .target-dc) span:not(.tag, .degree),
    .chat-message p,
    .chat-message div,
    .chat-message table,
    .chat-message ul,
    .chat-message ol,
    .chat-message li,
    .chat-message header,
    .chat-message .message-header {
      color: var(--color-dark-1);
    }
  }
  
  &.stream.theme-light .chat-log,
  #interface.theme-light, 
  #interface.theme-light .chat-log, 
  & > .chat-log.themed.theme-light, #chat-popout.theme-light,
  .chat-popout.theme-light,
  #chat-popout.theme-light button,
  #chat-pins.theme-light, #chat-pins.theme-light button {
    --dnd5e-background-card: rgba(244, 239, 237,0.8);
    --dnd5e-color-parchment: rgba(244, 239, 237, 1);
    --card-color-bg: var(--dnd5e-background-card, #e8e8ef);
    --dnd5e-color-card: var(--dnd5e-background-card, #e8e8ef);
    --table-background-color: var(--dnd5e-background-card, #e8e8ef);
  }

  &.stream.theme-dark .chat-log,
  #interface.theme-dark, #interface.theme-dark .chat-log, 
  & > .chat-log.themed.theme-dark, 
  .chat-popout.theme-dark,
  #interface.theme-dark .chat-message,
  #chat-popout.theme-dark, #chat-popout.theme-dark button, 
  #chat-pins.theme-dark, #chat-pins.theme-dark button {
    --dnd5e-color-parchment: rgb(32, 37, 43);
    --dnd5e-background-card: rgb(32, 37, 43); 
    --card-color-bg: var(--chat-dark-blue);
    --dnd5e-color-card: var(--chat-dark-blue);
    --table-background-color: var(--chat-dark-blue);
    --dnd5e-color-success-background: rgba(108, 215, 119, 0.35);
    --dnd5e-color-failure-background: rgba(209, 83, 83, 0.35);
    --dnd5e-text-color-success: #719f50;
    --dnd5e-text-color-failure: #c15d5d;
    --dnd5e-color-success: #719f50;
    --dnd5e-color-failure: #c15d5d;
    --dnd5e-color-crimson: var(--color-highlights-75);
    --color-text-primary: var(--color-light-3);
  }

  &.stream.theme-dark,
  #interface.theme-dark,
  #chat-popout.theme-dark,
  #chat-pins.theme-dark {
    .chat-message .message-header .name-stacked .title,
    &.system-dnd5e .chat-message .name-stacked .title {
      color: var(--color-light-1, var(--color-light-1));
    }

    .sidebar-tab{
      .chat-message .message-content:not(.dnd5e2) {
        p, ul, ol, li, a, b, strong {
          background-color: transparent;
        }
      }
    }

    /*:is(.chat-popout, #chat-log, .chat-log) .message,
    :is(.chat-popout, #chat-log, .chat-log) .chat-message,*/
    #chat-popout .chat-message,
    #chat .chat-message,
    #chat-popout .chat-message.whisper,
    #chat .chat-message.whisper,
    #chat-popout .chat-message.blind,
    #chat .chat-message.blind {
      background: var(--card-color-bg); 
      color: var(--color-text-gray-blue-b);
      border-color: transparent;
    }


    /*:is(.chat-popout, #chat-log, .chat-log) .chat-message.whisper,*/
    #chat-popout .chat-message.whisper,
    #chat .chat-message.whisper {
      background: var(--card-color-bg); 
      background-image: var(--striped-bg);
    }
    /*:is(.chat-popout, #chat-log, .chat-log) .chat-message.blind,*/
    #chat-popout .chat-message.blind,
    #chat .chat-message.blind {
      background: var(--card-color-bg); 
      background-image: var(--striped-bg-2);
    }
    
    .chat-message h1, 
    .chat-message h2, 
    .chat-message h3{
      color: var(--color-light-1);
      font-family: var(--crlngn-font-titles);
      &:hover{
        color: var(--color-text-light);
      }
    }
  
    .chat-message, 
    .chat-message h4, 
    .chat-message h5,
    .chat-message h6,
    .chat-message .card-header {
      color: var(--color-light-1);
      font-family: var(--crlngn-font-family);
      &:hover{
        color: var(--color-text-light);
      }
    }
  
    /* CHAT MESSAGE CARD */
    .chat-message .table-draw .table-results{
      margin: 10px 0;

      .table-result {
        align-items: flex-start;
        gap: 10px;
    
        p{
          margin: 0;
        }

        .result-image{
          flex: 0 0 25%;
          width: 25%;
        }
      }
    } 
    .chat-message .table-draw ul.table-results li > .description {
      flex: 1;
    }

    .chat-message .table-draw ul.table-results li > img {
      border: none;
      background-color: rgba(235, 235, 255, 0.3);
      border-radius: 4px;
      margin-right: 10px;
    }
    
    .chat-message .table-draw .table-results .table-result img.result-image {
      border: none;
      background-color: rgba(235, 235, 255, 0.3);
      border-radius: 4px;
      margin-right: 10px;
    }

    .chat-message:before {
      opacity: 0.2;
    }
    .chat-message a.content-link, 
    .chat-message a.inline-roll {
      background: var(--chat-button-bg-50);
      color: var(--color-text-light-5);
      opacity: 0.8;
    }
    .chat-message .message-content,
    .chat-message .message-content > * {
      color: var(--color-text-light);
    }
    .chat-message.ddb-game-log-message .message-content .ddb-card-content a {
      color: var(--color-text-hyperlink);
    }
    .chat-message ol.table-results {
      margin: 0;
      padding: 0;
    }
  
    /* headers */
    :is(.chat-popout, #chat-log, .chat-log) .chat-message .message-header .title,
    :is(.chat-popout, #chat-log, .chat-log) .chat-message .message-header h4.message-sender {
      color: var(--color-light-1);
      font-size: var(--font-size-16);
      line-height: 110%;
      margin-bottom: 4px;
    }
    :is(.chat-popout, #chat-log, .chat-log) .message .message-header .subtitle,
    :is(.chat-popout, #chat-log, .chat-log) .message .flavor-text, 
    :is(.chat-popout, #chat-log, .chat-log) .message .user {
      color: var(--color-light-3);
    }
  
    :is(.card-tray, .effects-tray) > label::before, 
    :is(.card-tray, .effects-tray) > label::after {
      opacity: 0.35;
    }
  
    .dice-tooltip .dice-rolls .roll:not(.die) {
      color: var(--color-dark-1);
    }
    
    .dice-tooltip .dice-rolls .roll.discarded, 
    .dice-tooltip .dice-rolls .roll.rerolled {
      color: var(--color-dark-3);
      filter: contrast(1) opacity(0.6) invert(1);
    }

    /* savage worlds */
    li.die label.color {
      color: var(--color-dark-1);
    }
  
    .chat-message .message-content .dice-result .dice-formula, 
    .chat-message.ddb-game-log-message .dice-result .dice-formula,
    .chat-message .message-content .dice-result .dice-total, 
    .chat-message.ddb-game-log-message .dice-result .dice-total {
      border: 0;
      box-shadow: none;
      background: var(--chat-button-bg-75);
      color: var(--color-light-1);
    }
    .dice-result .dice-total::before {
      border-left: 1px solid var(--color-border-dark-1);
    }
    .dice-result .dice-total.success {
      border: 1px solid var(--dnd5e-color-success);
    }
    .chat-message.ddb-game-log-message .dice-formula, 
    .chat-message.ddb-game-log-message .dice-total {
      border: 0;
    }
    .dice-result .dice-tooltip .tooltip-part {
        border-bottom: 1px solid var(--color-border-dark-1);
    }
    .chat-message .pills .pill {
      background: var(--chat-dark-bg);
      color: var(--color-text-gray-blue);
    }
  
    .chat-message .message-content {
      color: #cad1d6;
    }
    .chat-message.ddb-game-log-message .dice-formula, 
    .chat-message.ddb-game-log-message .dice-total {
      border: 1px solid var(--color-dark-1);
      box-shadow: none;
    }
  
    .chat-message .message-content .dice-total.success {
      border: 1px solid var(--dnd5e-color-success-background);
    }
  
    .chat-message .message-content .dice-total.miss,
    .chat-message .message-content .dice-total.failure {
      border: 1px solid var(--dnd5e-color-failure-background);
    } 
  
    .chat-message .dice-result .dice-total.success,
    .chat-message.ddb-game-log-message .dice-result .dice-total.success {
      color: var(--dnd5e-text-color-success);
    }
  
    .chat-message .dice-result .dice-total .die-icon,
    .chat-message.ddb-game-log-message .dice-result .dice-total .die-icon {
      color: var(--color-dark-1);
    }
  
    .chat-message .dice-result .dice-total.failure,
    .chat-message.ddb-game-log-message .dice-result .dice-total.failure {
      color:var(--dnd5e-text-color-failure);
    }
    
    /* bold highlights */
    .chat-card p.supplement > strong {
      color: var(--color-text-gray-blue);
    }
  
    /* description and details */
    .chat-card .description {
      background: var(--color-dark-bg-10);
      border: 0;
      padding: 0.5rem 0;
    }
  
    .crlngn.chat-card .description .details,
    .crlngn.chat-card .message-content .description .details p {
      color: var(--color-dark-4);
    }

    .chat-message .ddb-game-log-chat-card .ddb-item-name,
    .sidebar-tab .chat-message hr {
      border-color: var(--color-dark-bg-50);
    }
  
    /* effects / targets list */
  
    :is(.card-tray, .effects-tray) .target-source-control,
    .card-tray .target-source-control {
      margin: 4px 0 6px 0;
    }
  
    :is(.card-tray, .effects-tray) .target-source-control button, 
    .card-tray .target-source-control button,
    .chat-message .message-content button {
      color: var(--color-text-dark);
    }
  
    .dnd5e-theme-dark button:not(.pip):hover,
    .chat-message .message-content button:not(.unbutton):hover,
    .chat-message .message-content button:not(.unbutton):focus {
      border-color: var(--color-highlights);
      color: var(--color-light-1);
      background: var(--color-highlights);
    }
  
    :is(.card-tray, .effects-tray) .target-source-control button:hover, 
    :is(.card-tray, .effects-tray) .target-source-control button:focus, 
    :is(.card-tray, .effects-tray) .target-source-control button[aria-pressed="true"], 
    .card-tray .target-source-control button[aria-pressed="true"],
    .chat-message .message-content button:hover {
      background: var(--color-dark-bg-75);
      border: 1px solid transparent;
      opacity: 1;
      color: var(--color-light-1);
    }
  
    .effects .effect:not(:last-child), 
    .targets .effect:not(:last-child), 
    .effects .target:not(:last-child),
    .targets .target:not(:last-child) {
      border-bottom: 1px solid var(--color-dark-1);
    } 

    :is(.chat-popout, #chat-log) .message .evaluation .target{
      color: var(--color-light-1);
      padding: 6px 8px;
    }

    :is(.chat-popout, #chat-log) .message .evaluation .target.hit,
    :is(.chat-popout, #chat-log) .message .evaluation .target.success {
      border: 0;
    }
  
    :is(.chat-popout, #chat-log) .message .evaluation .target.miss,
    :is(.chat-popout, #chat-log) .message .evaluation .target.failure {
      border: 0;
    } 
  
    /* card buttons */
    :is(.card-tray, .effects-tray) button:not(.unbutton),
    .chat-card button:not(.unbutton),
    .chat-message .message-content button:not(.unbutton) {
      background: var(--chat-button-bg-50);
      border: 1px solid var(--color-dark-bg-50);
      color: var(--color-text-dark); 
    }
    :is(.card-tray, .effects-tray) button:hover {
      box-shadow: none;
    }

    .chat-message .chat-card > button[data-action=rollAttack],
    .chat-message .card-buttons > button[data-action=rollAttack],
    .chat-message .card-buttons > button[data-action=rollHealing],
    .chat-message .chat-card .rsr-title {
      &:before{
        color: var(--color-light-1);
      }
    }
    
    .dnd5e2:not(.chat-card, .create-document) button:not(.pip):focus, 
    .dnd5e2.dnd5e-theme-dark button:not(.pip):focus {
      border: 1px solid var(--color-highlights);
    }

    .dnd5e2 :is(.card-tray, .effects-tray) .targets .target .change-source > * , 
    .dnd5e2.card-tray .targets .target .change-source > * {
      filter: invert(1);
    }
  
    /* inline rolls  */ 
    :is(.dnd5e2) a:is(.content-link, .inline-roll) > i, 
    :is(.dnd5e2) :is(.roll-link, .reference-link) a > i,
    :is(.dnd5e2) :is(.roll-link-group, .reference-link) a > i,
    :is(.card-tray, .effects-tray) .roll-link a i,
    :is(.card-tray, .effects-tray) .reference-link a>i, 
    :is(.card-tray, .effects-tray) .roll-link a i, 
    :is(.card-tray, .effects-tray) .roll-link a>i, 
    :is(.card-tray, .effects-tray) a.content-link>i, 
    :is(.card-tray, .effects-tray) a.inline-roll>i, 
    /*.dnd5e2-journal .reference-link a>i, 
    .dnd5e2-journal .roll-link a>i, 
    .dnd5e2-journal a.content-link>i, 
    .dnd5e2-journal a.inline-roll>i,*/
    :is(.dnd5e2) .message a > i {
      border: none;
      text-underline-offset: 2px;
      color: var(--color-text-dark-1);
      filter: brightness(100);
    }
  
    .message-metadata {
      color: rgba(255,255,255,0.4);
      font-size: var(--font-size-10);
      font-weight: 600;
    }

    .chat-message .crlngn-news {
      h3{
        padding: 6px 0;
      }
      .crlngn-news-content {
        padding: 6px 0;
  
        b{
          font-weight: 600;
        }
  
        ul{
          margin: 12px 0;
  
          > li{
            margin: 6px 0;
          }
        }
      }
    }
  }
  /*******
  PF2e 
  *******/
  &.system-pf2e #interface.theme-dark .damage {
    --color-border-physical: rgb(255, 255, 255, 0.5);
    --color-text-dark-secondary: rgb(255, 255, 255, 0.75); 
    --color-text-physical: rgb(255, 255, 255, 0.75); 
    --color-text-acid: rgb(59, 114, 59);
    --color-text-bleed: rgb(97, 64, 70);
    --color-text-chaotic: rgb(109, 80, 109);
    --color-text-cold: rgb(79, 79, 110);
    --color-text-electricity: rgb(127, 118, 97);
    --color-text-evil: rgb(84, 71, 94);
    --color-text-fire: rgb(105, 84, 76);
    --color-text-force: rgb(107, 85, 123);
    --color-text-good: rgb(119, 109, 85);
    --color-text-lawful: rgb(77, 77, 77);
    --color-text-mental: rgb(58, 58, 76);
    --color-text-physical: rgb(186, 186, 186); 
    --color-text-poison: rgb(151, 175, 113);
    --color-text-sonic: rgb(70, 112, 112); 
    --color-text-spirit: rgb(92, 87, 128);  
    --color-text-vitality: rgb(193, 193, 141);
    --color-text-void:rgb(111, 107, 132);
    --pfe-color-success: rgb(105 177 231);
  }
  &.system-pf2e #interface.theme-dark  {
    --visibility-gm-bg: rgba(255,255,255,0.1)
    --visibility-owner-bg: rgba(235,235,235,0.1)
  }
  &.system-pf2e #interface.theme-dark .chat-message .flavor-text > * {
    margin: 0.5em 0;
  }

  &.system-pf2e #interface.theme-dark .chat-message .message-header .tag {
    color: rgba(255,255,255,0.6);
    font-size: var(--font-size-10);
    padding: 3px;
  }
  &.system-pf2e #interface.theme-dark .chat-message .message-header .flavor-text .modifiers {
    margin: 1em 0;
    .tag {
      background: var(--chat-button-bg-50);
      color: rgba(255,255,255,0.6);
    }
  }
  &.system-pf2e #interface.theme-dark .chat-message .message-sender {
    font-weight: 600;
  }
  
  &.system-pf2e #interface.theme-dark,
  &.system-pf2e #chat-popout.theme-dark {
    color: var(--color-light-1);
    background-color: transparent;
    .chat-message p,
    /*.chat-message span,*/
    .chat-message div:not(.icons, .success, .failure, .critical-success, .critical-failure),
    .chat-message table,
    .chat-message ul,
    .chat-message ol,
    .chat-message li,
    .chat-message header,
    .chat-message .message-header {
      color: var(--color-light-1);
      background-color: transparent;
      background: transparent;
    }
    .chat-card .card-header,
    .chat-card footer {
      border-top: 1px solid rgba(0, 0, 0, 0.35);
    }
    .chat-card .tags {
      border-bottom: 1px solid rgba(0, 0, 0, 0.35);
    }
    .chat-card footer span {
      border-right: 1px solid rgba(0, 0, 0, 0.5);
      padding: 0 4px;
    }
  }
  &.system-pf2e #interface.theme-dark .chat-message i.fa-solid {
    color: rgb(255,255,255);
  }
  &.system-pf2e .chat-message .message-content {
    font-size: var(--font-size-12);
  }
  &.system-pf2e .chat-message .dice-tooltip .part-header {
    line-height: 1.5em;
    border-bottom: 1px solid rgba(0,0,0,0.3);
  }
  &.system-pf2e .chat-message .dice-tooltip .part-header .part-total {
    border: 1px solid rgba(0,0,0,0.3);
  }
  &.system-pf2e .chat-message .message-content .damage-application button.half-damage i.fa-heart-broken {
    background-image: linear-gradient(to right, var(--color-light-1) 50%, var(--color-text-light-6) 50%);
  }
  &.system-pf2e #interface.theme-dark .chat-message .message-content .damage-application button > img {
    filter: invert(1);
  }
  &.system-pf2e .chat-message .message-content button > img {
    height: var(--font-size-16);
  }
  &.system-pf2e #interface.theme-dark .message-content .dice-result .dice-formula {
    color: var(--color-text-light);
  }
  &.system-pf2e .chat-message .message-content button {
    font-size: var(--font-size-12);
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.15em 0;
  }
  &.system-pf2e .chat-message .message-content .damage-application button {
    font-size: var(--font-size-16);
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.25em 0;
    height: auto;

    label{
      font-size: var(--font-size-14);
      font-weight: 600;
    }
  }

  &.system-pf2e #interface.theme-dark .chat-message > .message-content .dice-roll .dice-tooltip {
    background: var(--color-dark-bg-50);
    border: none;
    padding: 0;
  }

  &.system-pf2e #interface.theme-dark  .chat-message>.message-content .dice-roll .dice-tooltip{
    background-color: transparent;
    color: var(--color-text-light);
    font-size: var(--font-size-12);
  }

  &.system-pf2e #interface.theme-dark .chat-message .message-content .dice-result .dice-tooltip .instance {
    border: none;
    border-width: 0;
    border-radius: 0;
    color: var(--color-text-light);
    > *{
      color: var(--color-text-light);
    }
  }

  &.system-pf2e #interface.theme-dark .chat-message .tag[data-visibility=gm] {
    background-color: rgba(255,255,255,0.1);;
  }

  &.system-pf2e #interface.theme-dark .chat-message .tag[data-visibility=gm],
  &.system-pf2e #interface.theme-dark .chat-message span[data-visibility=gm] {
    background-color: var(--color-secondary-50);
    color: inherit;
  }

  &.system-pf2e #interface.theme-light .chat-message .tag[data-visibility=gm],
  &.system-pf2e #interface.theme-light .chat-message span[data-visibility=gm] {
    background-color: var(--color-secondary-50);
    color: inherit;
  }


  &.system-pf2e #interface.theme-dark, &.system-pf2e.theme-dark #chat-pins {

    .chat-message .tags.traits .tag, 
    .chat-message .tags.traits .tag option {
      color: var(--color-light-1);
    }
  }

  &.system-pf2e .action-glyph {
    font-family: "Pathfinder2eActions", sans-serif;
  }

  &.system-pf2e .chat-message ol.dice-rolls, 
  &.system-pf2e .chat-message .die {
    color: inherit;
  }

  &.system-pf2e #interface.theme-dark .chat-message li.roll.failure, 
  &.system-pf2e #interface.theme-dark .chat-message li.roll.min {
    color: var(--color-pf-text-failure);
    filter: none;
  }
  
  &.system-pf2e #interface.theme-dark .chat-message li.roll.success, 
  &.system-pf2e #interface.theme-dark .chat-message li.roll.max {
    color: var(--color-pf-text-success);
    filter: none;
  }

}
