intelligent-system-design-language 0.3.22 → 0.3.24

package/out/styles.scss

@@ -1,763 +1,829 @@
-@use "./backgrounds";
-@use "./handlebars";
-@use "./vuetifyStyles";
-@use "./vuetifyOverrides";
-@use "./isdlStyles";
-
-/* -------------------------------------------- */
-/*  Vuetify Overrides                           */
-/* -------------------------------------------- */
-
-.#{$dynamic-id}.vue-application {
-
-  html {
-    overflow-x: hidden;
-    overflow-y: scroll;
-  }
-}
-
-/* -------------------------------------------- */
-/*  System Stylesheet                           */
-/* -------------------------------------------- */
-
-.#{$dynamic-id}.handlebars-sheet {
-  @include handlebars.handlebarsSheet;
-}
-
-.v-overlay-container {
-  @include vuetifyStyles.vuetifyStyles;
-  @include vuetifyOverrides.vuetifyOverrides;
-
-  --v-theme-overlay-multiplier: 1;
-  --v-disabled-opacity: 0.7;
-}
-
-// Copy of Foundry app styles for vue apps
-.#{$dynamic-id}.vue-application {
-
-  --color-text-primary: var(--color-light-2);
-  --color-header-background: rgba(0, 0, 0, 0.5);
-  --color-border: var(--color-cool-4);
-  --color-fieldset-border: var(--color-light-6);
-  --color-form-hint: var(--color-light-5);
-  --color-form-hint-hover: var(--color-light-4);
-  --color-form-label: var(--color-light-4);
-  --color-form-label-hover: var(--color-light-2);
-  --color-select-option-bg: transparent;
-  --v-theme-overlay-multiplier: 1;
-  --v-disabled-opacity: 0.7;
-
-
-  .window-content {
-    @include vuetifyStyles.vuetifyStyles;
-    @include vuetifyOverrides.vuetifyOverrides;
-
-    --color-text-primary: var(--color-light-2);
-    --color-header-background: rgba(0, 0, 0, 0.5);
-    --color-border: var(--color-cool-4);
-    --color-fieldset-border: var(--color-light-6);
-    --color-form-hint: var(--color-light-5);
-    --color-form-hint-hover: var(--color-light-4);
-    --color-form-label: var(--color-light-4);
-    --color-form-label-hover: var(--color-light-2);
-    --color-select-option-bg: transparent;
-    --v-theme-overlay-multiplier: 1;
-    --v-disabled-opacity: 0.7;
-
-    overflow-y: scroll;
-
-    input[type="text"]:focus,
-    input[type="number"]:focus,
-    input[type="password"]:focus,
-    input[type="date"]:focus,
-    input[type="time"]:focus,
-    input[type="search"]:focus {
-      box-shadow: none;
-    }
-
-    .v-application {
-      @include isdlStyles.isdlStyles;
-    }
-  }
-
-  &.document-creation {
-
-    .window-content {
-      overflow: hidden;
-    }
-
-    // With the window sized to content (height: auto), neutralize Vuetify's 100vh
-    // min-heights so the layout collapses to the form instead of leaving dark space.
-    .v-application__wrap {
-      min-height: unset;
-    }
-
-    .v-main {
-      flex: 1 1 auto;
-      min-height: 0;
-    }
-
-    .v-container {
-      padding: 1rem;
-    }
-  }
-
-  &.isdl-prompt {
-
-    // Cap prompt windows at 80% of the viewport (overrides the base max-height: 100%).
-    max-height: 80vh;
-
-    // When a prompt exceeds the cap, scroll the content. We scroll at .window-content
-    // rather than an inner field-list scroller because the window is height:auto and
-    // max-height is NOT a definite height, so a percentage/flex height cascade can't
-    // bound an inner scroller. window-content has a real used height, so it scrolls
-    // reliably; the Submit/Cancel footer stays visible via position: sticky.
-    .window-content {
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
-
-    .isdl-prompt-footer {
-      position: sticky;
-      bottom: 0;
-      z-index: 2;
-      background: rgb(var(--v-theme-surface));
-      border-top: 1px solid rgba(0, 0, 0, 0.12);
-    }
-
-    .v-application__wrap {
-      min-height: unset;
-    }
-
-    .v-main {
-      flex: 1 1 auto;
-      min-height: 0;
-    }
-  }
-
-  &.active-effect {
-    .v-col {
-      padding: 0;
-    }
-
-    .v-card {
-      padding: 0.25rem;
-
-      > .v-card-title {
-        padding-top: 0;
-        padding-bottom: 0;
-      }
-    }
-
-    .v-autocomplete__selection {
-      .v-chip__close {
-        border: none;
-        background: none;
-      }
-    }
-
-  }
-
-  position: absolute;
-  z-index: var(--z-index-window);
-  transform-origin: top left;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  min-width: 200px;
-  max-height: 100%;
-  max-width: 100%;
-  overflow: hidden;
-  background: var(--background);
-  font-size: var(--font-size-14);
-  color: var(--color-text-primary);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  box-shadow: 0 0 10px #000;
-
-  > .window-resize-handle {
-    position: absolute;
-    inset: auto 0px 0px auto;
-    width: 11px;
-    height: 11px;
-    cursor: nwse-resize;
-    background: transparent url(/ui/resize-handle.webp) no-repeat center / contain;
-  }
-
-  > .window-header {
-    --button-size: 24px;
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    flex: 0 0 var(--header-height);
-    position: relative;
-    overflow: hidden;
-    padding: 0 0.5rem;
-    gap: 0.25rem;
-    z-index: 1;
-    cursor: grab;
-    background: var(--color-cool-5-90);
-    font-size: var(--font-size-13);
-    color: var(--color-light-1);
-    border-bottom: 1px solid var(--color-border);
-    font: unset;
-
-    > .window-title {
-      flex: 1;
-      font-size: inherit;
-      font-family: inherit;
-      font-weight: inherit;
-      text-shadow: none;
-      margin: 0;
-      line-height: var(--header-height);
-      border: none;
-      overflow: hidden;
-      text-align: left;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    > .header-control {
-      flex: 0 0 var(--button-size);
-      height: var(--button-size);
-      padding: 0;
-      margin: 0;
-      border: none;
-      color: var(--color-light-text-heading);
-      background: none;
-    }
-  }
-
-  > .controls-dropdown {
-    position: absolute;
-    overflow: hidden auto;
-    top: var(--header-height);
-    right: 0;
-    width: max-content;
-    min-width: 100px;
-    max-width: 300px;
-    max-height: 0;
-    z-index: 1;
-    list-style: none;
-    margin: 0 0.25rem;
-    padding: 0;
-    background: var(--background);
-    border-radius: 0 0 4px 4px;
-    transition: max-height 0.5s;
-    pointer-events: none;
-
-    > .header-control {
-      margin: 0.25rem;
-
-      > button {
-        --button-background-color: none;
-        --button-text-color: var(--color-text-primary);
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        border: none;
-        font-size: var(--font-size-12);
-        color: var(--button-text-color);
-        background: var(--button-background-color);
-
-        > i {
-          line-height: 28px;
-        }
-      }
-    }
-
-    &.expanded {
-      max-height: calc(100% - var(--header-height));
-      pointer-events: all;
-      box-shadow: 0 0 8px var(--color-cool-3);
-    }
-  }
-
-  > .window-content {
-    backdrop-filter: blur(4px);
-  }
-
-
-}
-
-
-.#{$dynamic-id} {
-
-
-  --header-height: 36px;
-  --minimized-width: 200px;
-  --background: var(--color-cool-5-90);
-  --color-text-primary: var(--color-light-2);
-  --color-header-background: rgba(0, 0, 0, 0.5);
-  --color-border: var(--color-cool-4);
-  --color-fieldset-border: var(--color-light-6);
-  --color-form-hint: var(--color-light-5);
-  --color-form-hint-hover: var(--color-light-4);
-  --color-form-label: var(--color-light-4);
-  --color-form-label-hover: var(--color-light-2);
-  --color-select-option-bg: transparent;
-  --color-text-light-highlight: #f0f0e0;
-  --color-text-light-heading: #c9c7b8;
-  --color-text-light-primary: #b5b3a4;
-  --color-text-dark-primary: #191813;
-  --color-text-dark-secondary: #4b4a44;
-  --color-text-dark-header: #23221d;
-  --color-text-dark-inactive: #7a7971;
-  --color-text-hyperlink: #ff6400;
-  --color-text-selection: #f7f3e8;
-  --color-text-selection-bg: #777;
-  --color-text-light-0: #fff;
-  --color-text-light-1: #eee;
-  --color-text-light-2: #ddd;
-  --color-text-light-3: #ccc;
-  --color-text-light-4: #bbb;
-  --color-text-light-5: #aaa;
-  --color-text-light-6: #999;
-  --color-text-light-7: #888;
-  --color-text-dark-1: #111;
-  --color-text-dark-2: #222;
-  --color-text-dark-3: #444;
-  --color-text-dark-4: #555;
-  --color-text-dark-5: #666;
-  --color-text-dark-6: #777;
-  --color-border-light-1: #ddd;
-  --color-border-light-2: #999;
-  --color-border-dark-1: #111;
-  --color-border-dark-2: #222;
-  --color-border-dark-3: #333;
-  --color-border-dark-4: #444;
-  --color-border-dark-5: #666;
-  --color-shadow-primary: #ff0000;
-  --color-shadow-highlight: #ff6400;
-  --color-shadow-dark: #000;
-  --color-underline-inactive: #7a7971;
-  --color-underline-active: #44191A;
-  --color-underline-header: #782e22;
-  --color-border-light-highlight: #f0f0e0;
-  --color-border-light-primary: #b5b3a4;
-  --color-border-light-secondary: #c9c7b8;
-  --color-border-light-tertiary: #7a7971;
-  --color-border-dark: #000;
-  --color-border-dark-primary: #191813;
-  --color-border-dark-secondary: #23221d;
-  --color-border-dark-tertiary: #4b4a44;
-  --color-border-highlight: #ff6400;
-  --color-border-highlight-alt: #ff0000;
-  --color-bg-btn-minor-inactive: #c9c7b8;
-  --color-bg-btn-minor-active: #b5b3a4;
-  --color-select-option-bg: #dad8cc;
-  --color-checkbox-checked: #666;
-  --color-ownership-none: #5500ff;
-  --color-ownership-observer: #7a7971;
-  --color-ownership-owner: #b5b3a4;
-  --sidebar-width: 300px;
-  --sidebar-header-height: 32px;
-  --sidebar-item-height: 48px;
-  --hotbar-height: 52px;
-  --hotbar-width: 578px;
-  --macro-size: 50px;
-  --color-scrollbar: #782e22;
-  --color-scrollbar-track: transparent;
-  --color-scrollbar-border: #ff6400;
-  --players-width: 200px;
-  --form-field-height: 26px;
-  --font-primary: "Signika", sans-serif;
-  --line-height-12: 0.75rem;
-  --line-height-16: 1rem;
-  --line-height-20: 1.25rem;
-  --line-height-30: 1.875rem;
-
-  &.create-document {
-    ol.unlist {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-      gap: 1rem;
-      list-style: none;
-
-      label {
-        display: block;
-        padding-bottom: 5px;
-      }
-
-      img {
-        border-bottom: none;
-      }
-    }
-  }
-
-  &.chat-card {
-
-    .chat-header {
-      border: 2px solid gray;
-      border-radius: 2px;
-      align-items: center;
-      transition: max-height 500ms ease;
-
-      .name {
-        font-size: 16px;
-        font-weight: bold;
-      }
-
-      .type {
-        font-style: italic;
-        font-size: 14px;
-      }
-
-      > header {
-        align-items: center;
-
-        > img {
-          flex: 0;
-          border-radius: 0;
-          margin-right: 1rem;
-        }
-
-        > i {
-          flex: 0;
-        }
-      }
-    }
-
-    i {
-      transition: all 250ms ease;
-      margin-right: 0.25rem;
-    }
-
-    .collapsible-content {
-      transition: height 500ms ease;
-      padding: 0.25rem;
-    }
-
-    .collapsible > header {
-      cursor: pointer;
-    }
-
-    .collapsed {
-      max-height: 54px;
-      overflow: hidden;
-
-      .collapse-icon {
-        transform: rotate(-90deg);
-      }
-
-      .collapsible-content {
-        opacity: 0;
-        height: 0px;
-      }
-    }
-
-    .chat-info {
-      color: black;
-      .wide {
-        flex-basis: 100%;
-
-        > dd {
-          padding-left: 0.5rem;
-        }
-      }
-
-      dl {
-        display: flex;
-        flex-wrap: wrap;
-        margin: 0.5em 0;
-        color: black;
-        text-shadow: none;
-      }
-
-      dt {
-        flex-basis: 25%;
-        color: black;
-        text-shadow: none;
-      }
-
-      dd {
-        flex-basis: 25%;
-        margin: 0;
-        padding: 0 0 10px 0;
-
-        > p {
-          line-height: 1.5rem;
-        }
-      }
-
-      .dice-roll {
-        .dice-total {
-          height: 35px;
-          line-height: 35px;
-          margin-bottom: 0.5rem;
-          font-weight: normal;
-          font-size: 16px;
-          text-align: left;
-
-          > i {
-            padding-left: 0.5rem;
-            line-height: 35px;
-            position: absolute;
-          }
-
-          .dice-info {
-            display: inline-block;
-            width: 200px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            margin-left: 30px;
-          }
-
-          > .label {
-            font-weight: bold;
-          }
-
-          > .result {
-            font-size: 20px;
-            font-weight: bold;
-            right: 10px;
-            position: absolute;
-            border-left: 1px solid gray;
-            padding-left: 10px;
-            line-height: 33px;
-          }
-        }
-
-        // Enhanced styling for damage rolls
-        &.damage-roll {
-          position: relative;
-
-          .dice-total {
-            .damage-type {
-              font-weight: normal;
-              font-size: 14px;
-              margin-left: 8px;
-              opacity: 0.9;
-            }
-          }
-
-          .damage-metadata {
-            margin-top: 0.25rem;
-            margin-left: 0.25px;
-            font-size: 12px;
-            color: var(--color-text-dark-1);
-
-            .damage-property {
-              display: inline-block;
-              padding: 2px 6px;
-              background: rgba(0, 0, 0, 0.2);
-              border-radius: 3px;
-              border: 1px solid rgba(255, 255, 255, 0.1);
-            }
-          }
-
-        }
-      }
-
-      .measured-template {
-        display: flex;
-
-        .measured-template-button {
-          flex: 0 0 100%;
-          height: 35px;
-          line-height: 35px;
-          margin: 0;
-          margin-bottom: 0.5rem;
-          font-weight: normal;
-          font-size: 16px;
-          text-align: left;
-          position: relative;
-          background: rgba(0, 0, 0, 0.1);
-          --color-border-light-2: #999;
-          border: 1px solid var(--color-border-light-2);
-          border-radius: 3px;
-          box-shadow: 0 0 2px #FFF inset;
-          word-break: break-all;
-
-          > i {
-            padding-left: 0.5rem;
-            line-height: 30px;
-            position: absolute;
-          }
-
-          .summary {
-            display: inline-block;
-            width: 100%;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            margin-left: 8px;
-            font-size: 16px;
-            font-weight: normal;
-
-            > .result {
-              font-size: 20px;
-              font-weight: bold;
-              right: 2px;
-              position: absolute;
-              border-left: 1px solid gray;
-              padding-left: 7px;
-              height: 34px;
-
-              > i {
-                &:hover {
-                  cursor: pointer;
-                  box-shadow: 0 0 10px var(--color-shadow-highlight);
-                }
-              }
-            }
-          }
-        }
-      }
-
-      .chat-info-tags {
-        display: grid;
-        grid-template-columns: repeat(4, auto);
-        gap: 5px;
-        /* Space between items */
-
-        .tag {
-          border: 2px outset whitesmoke;
-          border-radius: 2px;
-          display: flex;
-          flex-direction: column;
-          font-size: 12px;
-          text-align: center;
-
-          .label {
-            font-weight: bold;
-          }
-        }
-      }
-    }
-
-    .chat-effects {
-
-      .title {
-        margin-top: 1rem;
-        font-size: 1.25em;
-        border-bottom: 1px solid var(--color-underline-header);
-        color: var(--color-text-dark-primary);
-
-        > i {
-          right: 1rem;
-        }
-      }
-
-      img {
-        flex: 0;
-      }
-
-      .effect {
-        .name {
-          margin-left: 0.5rem;
-          line-height: 30px;
-          font-size: 16px;
-        }
-
-        &:not(:last-child) {
-          border-bottom: 1px dashed gray;
-          margin-bottom: 0.75rem;
-          padding-bottom: 0.25rem;
-        }
-
-        &:hover {
-          cursor: pointer;
-          border: 1px dashed var(--color-shadow-primary);
-        }
-      }
-    }
-  }
-}
-
-
-/* ----------------------------------------- */
-/*  Context Dropdown Menu
-/* ----------------------------------------- */
-#context-menu2 {
-  width: max-content;
-  height: max-content;
-  min-width: 200px;
-  max-width: 360px;
-  // Rendered to <body> with explicit viewport coordinates (see ContextMenu2._setPosition) so
-  // the menu escapes the chat log's overflow clipping and any transformed sheet ancestor.
-  position: fixed;
-  background: linear-gradient(180deg, rgba(24, 23, 20, 0.8) 0%, rgba(35, 34, 29, 0.8) 100%);
-  border: 1px solid #000;
-  box-shadow: 0 0 20px -2px #000;
-  border-radius: 5px;
-  color: #EEE;
-  z-index: 100000;
-
-  h2 {
-    font-family: 'warnock-pro', sans-serif;
-    line-height: 44px;
-    padding: 0 5px;
-    border-bottom: 1px solid var(--color-border-highlight);
-    text-shadow: none;
-  }
-}
-
-// Positioning is set inline from the target's viewport rect (ContextMenu2._setPosition);
-// these classes remain only as open-direction markers for the slide animation.
-#context-menu2.expand-down {
-  transform-origin: top;
-}
-
-#context-menu2.expand-up {
-  transform-origin: bottom;
-}
-
-#context-menu2 ol.context-items {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-#context-menu2 li.context-item {
-  padding: 0 5px;
-  line-height: 32px;
-  text-shadow: none;
-}
-
-#context-menu2 li.context-item:hover {
-  color: #FFF;
-  text-shadow: 0 0 4px red;
-}
-
-#context-menu2 li.context-item > i {
-  margin-right: 5px;
-}
-
-// The menu now mounts on <body>, so its damage-apply buttons/modifiers (which only exist in
-// the chat context) are styled by id alone rather than via a #chat-log ancestor selector.
-#context-menu2 {
-  button {
-    font-size: 12px;
-    background: transparent;
-    color: #fff;
-    border: 1px dashed var(--color-border-highlight);
-    box-shadow: none;
-    opacity: 0.5;
-    background: rgba(160, 157, 231, 0.5);
-
-    &.active,
-    &:hover {
-      border: 1px solid var(--color-border-highlight);
-      color: #fff;
-      opacity: 1;
-      box-shadow: inset 0 0 10px 0px var(--color-shadow-primary);
-    }
-
-    &:hover {
-      border: 1px solid #35a7e9;
-      box-shadow: inset 0 0 8px 2px var(--color-shadow-primary);
-    }
-  }
-
-  .reroll,
-  .modifiers {
-    border-top: 1px solid var(--color-border-highlight);
-  }
-
-  .modifiers {
-    margin: 6px 0 0;
-    padding-top: 6px;
-  }
+@use "./backgrounds";
+@use "./handlebars";
+@use "./vuetifyStyles";
+@use "./vuetifyOverrides";
+@use "./isdlStyles";
+
+/* -------------------------------------------- */
+/*  Vuetify Overrides                           */
+/* -------------------------------------------- */
+
+.#{$dynamic-id}.vue-application {
+
+  html {
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+}
+
+/* -------------------------------------------- */
+/*  System Stylesheet                           */
+/* -------------------------------------------- */
+
+.#{$dynamic-id}.handlebars-sheet {
+  @include handlebars.handlebarsSheet;
+}
+
+.v-overlay-container {
+  @include vuetifyStyles.vuetifyStyles;
+  @include vuetifyOverrides.vuetifyOverrides;
+
+  --v-theme-overlay-multiplier: 1;
+  --v-disabled-opacity: 0.7;
+}
+
+// Copy of Foundry app styles for vue apps
+.#{$dynamic-id}.vue-application {
+
+  --color-text-primary: var(--color-light-2);
+  --color-header-background: rgba(0, 0, 0, 0.5);
+  --color-border: var(--color-cool-4);
+  --color-fieldset-border: var(--color-light-6);
+  --color-form-hint: var(--color-light-5);
+  --color-form-hint-hover: var(--color-light-4);
+  --color-form-label: var(--color-light-4);
+  --color-form-label-hover: var(--color-light-2);
+  --color-select-option-bg: transparent;
+  --v-theme-overlay-multiplier: 1;
+  --v-disabled-opacity: 0.7;
+
+
+  .window-content {
+    @include vuetifyStyles.vuetifyStyles;
+    @include vuetifyOverrides.vuetifyOverrides;
+
+    --color-text-primary: var(--color-light-2);
+    --color-header-background: rgba(0, 0, 0, 0.5);
+    --color-border: var(--color-cool-4);
+    --color-fieldset-border: var(--color-light-6);
+    --color-form-hint: var(--color-light-5);
+    --color-form-hint-hover: var(--color-light-4);
+    --color-form-label: var(--color-light-4);
+    --color-form-label-hover: var(--color-light-2);
+    --color-select-option-bg: transparent;
+    --v-theme-overlay-multiplier: 1;
+    --v-disabled-opacity: 0.7;
+
+    overflow-y: scroll;
+
+    input[type="text"]:focus,
+    input[type="number"]:focus,
+    input[type="password"]:focus,
+    input[type="date"]:focus,
+    input[type="time"]:focus,
+    input[type="search"]:focus {
+      box-shadow: none;
+    }
+
+    .v-application {
+      @include isdlStyles.isdlStyles;
+    }
+  }
+
+  &.document-creation {
+
+    .window-content {
+      overflow: hidden;
+    }
+
+    // With the window sized to content (height: auto), neutralize Vuetify's 100vh
+    // min-heights so the layout collapses to the form instead of leaving dark space.
+    .v-application__wrap {
+      min-height: unset;
+    }
+
+    .v-main {
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+
+    .v-container {
+      padding: 1rem;
+    }
+  }
+
+  &.isdl-prompt {
+
+    // Cap prompt windows at 80% of the viewport (overrides the base max-height: 100%).
+    max-height: 80vh;
+
+    // When a prompt exceeds the cap, scroll the content. We scroll at .window-content
+    // rather than an inner field-list scroller because the window is height:auto and
+    // max-height is NOT a definite height, so a percentage/flex height cascade can't
+    // bound an inner scroller. window-content has a real used height, so it scrolls
+    // reliably; the Submit/Cancel footer stays visible via position: sticky.
+    .window-content {
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    .isdl-prompt-footer {
+      position: sticky;
+      bottom: 0;
+      z-index: 2;
+      background: rgb(var(--v-theme-surface));
+      border-top: 1px solid rgba(0, 0, 0, 0.12);
+    }
+
+    .v-application__wrap {
+      min-height: unset;
+    }
+
+    .v-main {
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+  }
+
+  &.active-effect {
+    .v-col {
+      padding: 0;
+    }
+
+    .v-card {
+      padding: 0.25rem;
+
+      > .v-card-title {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+
+    .v-autocomplete__selection {
+      .v-chip__close {
+        border: none;
+        background: none;
+      }
+    }
+
+  }
+
+  position: absolute;
+  z-index: var(--z-index-window);
+  transform-origin: top left;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  min-width: 200px;
+  max-height: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  background: var(--background);
+  font-size: var(--font-size-14);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  box-shadow: 0 0 10px #000;
+
+  > .window-resize-handle {
+    position: absolute;
+    inset: auto 0px 0px auto;
+    width: 11px;
+    height: 11px;
+    cursor: nwse-resize;
+    background: transparent url(/ui/resize-handle.webp) no-repeat center / contain;
+  }
+
+  > .window-header {
+    --button-size: 24px;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    flex: 0 0 var(--header-height);
+    position: relative;
+    overflow: hidden;
+    padding: 0 0.5rem;
+    gap: 0.25rem;
+    z-index: 1;
+    cursor: grab;
+    background: var(--color-cool-5-90);
+    font-size: var(--font-size-13);
+    color: var(--color-light-1);
+    border-bottom: 1px solid var(--color-border);
+    font: unset;
+
+    > .window-title {
+      flex: 1;
+      font-size: inherit;
+      font-family: inherit;
+      font-weight: inherit;
+      text-shadow: none;
+      margin: 0;
+      line-height: var(--header-height);
+      border: none;
+      overflow: hidden;
+      text-align: left;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    > .header-control {
+      flex: 0 0 var(--button-size);
+      height: var(--button-size);
+      padding: 0;
+      margin: 0;
+      border: none;
+      color: var(--color-light-text-heading);
+      background: none;
+    }
+  }
+
+  > .controls-dropdown {
+    position: absolute;
+    overflow: hidden auto;
+    top: var(--header-height);
+    right: 0;
+    width: max-content;
+    min-width: 100px;
+    max-width: 300px;
+    max-height: 0;
+    z-index: 1;
+    list-style: none;
+    margin: 0 0.25rem;
+    padding: 0;
+    background: var(--background);
+    border-radius: 0 0 4px 4px;
+    transition: max-height 0.5s;
+    pointer-events: none;
+
+    > .header-control {
+      margin: 0.25rem;
+
+      > button {
+        --button-background-color: none;
+        --button-text-color: var(--color-text-primary);
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        border: none;
+        font-size: var(--font-size-12);
+        color: var(--button-text-color);
+        background: var(--button-background-color);
+
+        > i {
+          line-height: 28px;
+        }
+      }
+    }
+
+    &.expanded {
+      max-height: calc(100% - var(--header-height));
+      pointer-events: all;
+      box-shadow: 0 0 8px var(--color-cool-3);
+    }
+  }
+
+  > .window-content {
+    backdrop-filter: blur(4px);
+  }
+
+
+}
+
+
+.#{$dynamic-id} {
+
+
+  --header-height: 36px;
+  --minimized-width: 200px;
+  --background: var(--color-cool-5-90);
+  --color-text-primary: var(--color-light-2);
+  --color-header-background: rgba(0, 0, 0, 0.5);
+  --color-border: var(--color-cool-4);
+  --color-fieldset-border: var(--color-light-6);
+  --color-form-hint: var(--color-light-5);
+  --color-form-hint-hover: var(--color-light-4);
+  --color-form-label: var(--color-light-4);
+  --color-form-label-hover: var(--color-light-2);
+  --color-select-option-bg: transparent;
+  --color-text-light-highlight: #f0f0e0;
+  --color-text-light-heading: #c9c7b8;
+  --color-text-light-primary: #b5b3a4;
+  --color-text-dark-primary: #191813;
+  --color-text-dark-secondary: #4b4a44;
+  --color-text-dark-header: #23221d;
+  --color-text-dark-inactive: #7a7971;
+  --color-text-hyperlink: #ff6400;
+  --color-text-selection: #f7f3e8;
+  --color-text-selection-bg: #777;
+  --color-text-light-0: #fff;
+  --color-text-light-1: #eee;
+  --color-text-light-2: #ddd;
+  --color-text-light-3: #ccc;
+  --color-text-light-4: #bbb;
+  --color-text-light-5: #aaa;
+  --color-text-light-6: #999;
+  --color-text-light-7: #888;
+  --color-text-dark-1: #111;
+  --color-text-dark-2: #222;
+  --color-text-dark-3: #444;
+  --color-text-dark-4: #555;
+  --color-text-dark-5: #666;
+  --color-text-dark-6: #777;
+  --color-border-light-1: #ddd;
+  --color-border-light-2: #999;
+  --color-border-dark-1: #111;
+  --color-border-dark-2: #222;
+  --color-border-dark-3: #333;
+  --color-border-dark-4: #444;
+  --color-border-dark-5: #666;
+  --color-shadow-primary: #ff0000;
+  --color-shadow-highlight: #ff6400;
+  --color-shadow-dark: #000;
+  --color-underline-inactive: #7a7971;
+  --color-underline-active: #44191A;
+  --color-underline-header: #782e22;
+  --color-border-light-highlight: #f0f0e0;
+  --color-border-light-primary: #b5b3a4;
+  --color-border-light-secondary: #c9c7b8;
+  --color-border-light-tertiary: #7a7971;
+  --color-border-dark: #000;
+  --color-border-dark-primary: #191813;
+  --color-border-dark-secondary: #23221d;
+  --color-border-dark-tertiary: #4b4a44;
+  --color-border-highlight: #ff6400;
+  --color-border-highlight-alt: #ff0000;
+  --color-bg-btn-minor-inactive: #c9c7b8;
+  --color-bg-btn-minor-active: #b5b3a4;
+  --color-select-option-bg: #dad8cc;
+  --color-checkbox-checked: #666;
+  --color-ownership-none: #5500ff;
+  --color-ownership-observer: #7a7971;
+  --color-ownership-owner: #b5b3a4;
+  --sidebar-width: 300px;
+  --sidebar-header-height: 32px;
+  --sidebar-item-height: 48px;
+  --hotbar-height: 52px;
+  --hotbar-width: 578px;
+  --macro-size: 50px;
+  --color-scrollbar: #782e22;
+  --color-scrollbar-track: transparent;
+  --color-scrollbar-border: #ff6400;
+  --players-width: 200px;
+  --form-field-height: 26px;
+  --font-primary: "Signika", sans-serif;
+  --line-height-12: 0.75rem;
+  --line-height-16: 1rem;
+  --line-height-20: 1.25rem;
+  --line-height-30: 1.875rem;
+
+  &.create-document {
+    ol.unlist {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+      gap: 1rem;
+      list-style: none;
+
+      label {
+        display: block;
+        padding-bottom: 5px;
+      }
+
+      img {
+        border-bottom: none;
+      }
+    }
+  }
+
+  &.chat-card {
+
+    .chat-header {
+      border: 2px solid gray;
+      border-radius: 2px;
+      align-items: center;
+      transition: max-height 500ms ease;
+
+      .name {
+        font-size: 16px;
+        font-weight: bold;
+      }
+
+      .type {
+        font-style: italic;
+        font-size: 14px;
+      }
+
+      > header {
+        align-items: center;
+
+        > img {
+          flex: 0;
+          border-radius: 0;
+          margin-right: 1rem;
+        }
+
+        > i {
+          flex: 0;
+        }
+      }
+    }
+
+    i {
+      transition: all 250ms ease;
+      margin-right: 0.25rem;
+    }
+
+    .collapsible-content {
+      transition: height 500ms ease;
+      padding: 0.25rem;
+    }
+
+    .collapsible > header {
+      cursor: pointer;
+    }
+
+    .collapsed {
+      max-height: 54px;
+      overflow: hidden;
+
+      .collapse-icon {
+        transform: rotate(-90deg);
+      }
+
+      .collapsible-content {
+        opacity: 0;
+        height: 0px;
+      }
+    }
+
+    .chat-info {
+      color: black;
+      .wide {
+        flex-basis: 100%;
+
+        > dd {
+          padding-left: 0.5rem;
+        }
+      }
+
+      dl {
+        display: flex;
+        flex-wrap: wrap;
+        margin: 0.5em 0;
+        color: black;
+        text-shadow: none;
+      }
+
+      dt {
+        flex-basis: 25%;
+        color: black;
+        text-shadow: none;
+      }
+
+      dd {
+        flex-basis: 25%;
+        margin: 0;
+        padding: 0 0 10px 0;
+
+        > p {
+          line-height: 1.5rem;
+        }
+      }
+
+      .dice-roll {
+        .dice-total {
+          height: 35px;
+          line-height: 35px;
+          margin-bottom: 0.5rem;
+          font-weight: normal;
+          font-size: 16px;
+          text-align: left;
+
+          > i {
+            padding-left: 0.5rem;
+            line-height: 35px;
+            position: absolute;
+          }
+
+          .dice-info {
+            display: inline-block;
+            width: 200px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-left: 30px;
+          }
+
+          > .label {
+            font-weight: bold;
+          }
+
+          > .result {
+            font-size: 20px;
+            font-weight: bold;
+            right: 10px;
+            position: absolute;
+            border-left: 1px solid gray;
+            padding-left: 10px;
+            line-height: 33px;
+          }
+        }
+
+        // Enhanced styling for damage rolls
+        &.damage-roll {
+          position: relative;
+
+          .dice-total {
+            .damage-type {
+              font-weight: normal;
+              font-size: 14px;
+              margin-left: 8px;
+              opacity: 0.9;
+            }
+          }
+
+          .damage-metadata {
+            margin-top: 0.25rem;
+            margin-left: 0.25px;
+            font-size: 12px;
+            color: var(--color-text-dark-1);
+
+            .damage-property {
+              display: inline-block;
+              padding: 2px 6px;
+              background: rgba(0, 0, 0, 0.2);
+              border-radius: 3px;
+              border: 1px solid rgba(255, 255, 255, 0.1);
+            }
+          }
+
+        }
+
+        // Crit / fumble result highlighting (issue #10). The roll exposes
+        // crit/fumble booleans; the chat card adds these modifier classes.
+        // Crit is green, fumble red; keep the glow tight so the text stays crisp.
+        &.roll--crit {
+          .dice-total,
+          .dice-total > .result {
+            color: #2f9e44;
+            text-shadow: 0 0 3px rgba(56, 161, 105, 0.55);
+          }
+          .roll-flag-crit {
+            color: #40c057;
+          }
+        }
+
+        &.roll--fumble {
+          .dice-total,
+          .dice-total > .result {
+            color: #c92a2a;
+            text-shadow: 0 0 3px rgba(220, 40, 40, 0.5);
+          }
+          .roll-flag-fumble {
+            color: #e03131;
+          }
+        }
+
+        // Rare "crit-fumble" -- a roll flagged BOTH crit and fumble (only really
+        // reachable via manual marking). Both modifier classes apply, so this
+        // combined selector (specificity 0,2,0) overrides the single-flag styling
+        // above. Green->red shimmer on the total (no blur filter -- gradient text
+        // stays crisp), pulsing dual-glow yin-yang icon.
+        &.roll--crit.roll--fumble {
+          .dice-total,
+          .dice-total > .result {
+            background: linear-gradient(100deg, #40c057 0%, #2f9e44 25%, #c92a2a 50%, #2f9e44 75%, #40c057 100%);
+            background-size: 200% auto;
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            color: transparent;
+            animation: isdl-crit-fumble-shimmer 3s linear infinite;
+          }
+          // Crisp green->red gradient glyph (no blur filter); just the scale pulse.
+          // The gradient lives on ::before (whose box wraps the glyph exactly) so
+          // background-clip:text doesn't clip the right edge of the icon.
+          .roll-flag-crit-fumble {
+            animation: isdl-crit-fumble-pulse 1.2s ease-in-out infinite;
+            &::before {
+              background: linear-gradient(135deg, #40c057 0%, #2f9e44 45%, #c92a2a 55%, #e03131 100%);
+              -webkit-background-clip: text;
+              background-clip: text;
+              -webkit-text-fill-color: transparent;
+              color: transparent;
+            }
+          }
+        }
+      }
+
+      @keyframes isdl-crit-fumble-shimmer {
+        from { background-position: 0% center; }
+        to   { background-position: 200% center; }
+      }
+
+      @keyframes isdl-crit-fumble-pulse {
+        0%, 100% { transform: scale(1); }
+        50%      { transform: scale(1.18); }
+      }
+
+      .measured-template {
+        display: flex;
+
+        .measured-template-button {
+          flex: 0 0 100%;
+          height: 35px;
+          line-height: 35px;
+          margin: 0;
+          margin-bottom: 0.5rem;
+          font-weight: normal;
+          font-size: 16px;
+          text-align: left;
+          position: relative;
+          background: rgba(0, 0, 0, 0.1);
+          --color-border-light-2: #999;
+          border: 1px solid var(--color-border-light-2);
+          border-radius: 3px;
+          box-shadow: 0 0 2px #FFF inset;
+          word-break: break-all;
+
+          > i {
+            padding-left: 0.5rem;
+            line-height: 30px;
+            position: absolute;
+          }
+
+          .summary {
+            display: inline-block;
+            width: 100%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-left: 8px;
+            font-size: 16px;
+            font-weight: normal;
+
+            > .result {
+              font-size: 20px;
+              font-weight: bold;
+              right: 2px;
+              position: absolute;
+              border-left: 1px solid gray;
+              padding-left: 7px;
+              height: 34px;
+
+              > i {
+                &:hover {
+                  cursor: pointer;
+                  box-shadow: 0 0 10px var(--color-shadow-highlight);
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .chat-info-tags {
+        display: grid;
+        grid-template-columns: repeat(4, auto);
+        gap: 5px;
+        /* Space between items */
+
+        .tag {
+          border: 2px outset whitesmoke;
+          border-radius: 2px;
+          display: flex;
+          flex-direction: column;
+          font-size: 12px;
+          text-align: center;
+
+          .label {
+            font-weight: bold;
+          }
+        }
+      }
+    }
+
+    .chat-effects {
+
+      .title {
+        margin-top: 1rem;
+        font-size: 1.25em;
+        border-bottom: 1px solid var(--color-underline-header);
+        color: var(--color-text-dark-primary);
+
+        > i {
+          right: 1rem;
+        }
+      }
+
+      img {
+        flex: 0;
+      }
+
+      .effect {
+        .name {
+          margin-left: 0.5rem;
+          line-height: 30px;
+          font-size: 16px;
+        }
+
+        &:not(:last-child) {
+          border-bottom: 1px dashed gray;
+          margin-bottom: 0.75rem;
+          padding-bottom: 0.25rem;
+        }
+
+        &:hover {
+          cursor: pointer;
+          border: 1px dashed var(--color-shadow-primary);
+        }
+      }
+    }
+  }
+}
+
+
+/* ----------------------------------------- */
+/*  Context Dropdown Menu
+/* ----------------------------------------- */
+#context-menu2 {
+  width: max-content;
+  height: max-content;
+  min-width: 200px;
+  max-width: 360px;
+  // Rendered to <body> with explicit viewport coordinates (see ContextMenu2._setPosition) so
+  // the menu escapes the chat log's overflow clipping and any transformed sheet ancestor.
+  position: fixed;
+  background: linear-gradient(180deg, rgba(24, 23, 20, 0.8) 0%, rgba(35, 34, 29, 0.8) 100%);
+  border: 1px solid #000;
+  box-shadow: 0 0 20px -2px #000;
+  border-radius: 5px;
+  color: #EEE;
+  z-index: 100000;
+
+  h2 {
+    font-family: 'warnock-pro', sans-serif;
+    line-height: 44px;
+    padding: 0 5px;
+    border-bottom: 1px solid var(--color-border-highlight);
+    text-shadow: none;
+  }
+}
+
+// Positioning is set inline from the target's viewport rect (ContextMenu2._setPosition);
+// these classes remain only as open-direction markers for the slide animation.
+#context-menu2.expand-down {
+  transform-origin: top;
+}
+
+#context-menu2.expand-up {
+  transform-origin: bottom;
+}
+
+#context-menu2 ol.context-items {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+#context-menu2 li.context-item {
+  padding: 0 5px;
+  line-height: 32px;
+  text-shadow: none;
+}
+
+#context-menu2 li.context-item:hover {
+  color: #FFF;
+  text-shadow: 0 0 4px red;
+}
+
+#context-menu2 li.context-item > i {
+  margin-right: 5px;
+}
+
+// The menu now mounts on <body>, so its damage-apply buttons/modifiers (which only exist in
+// the chat context) are styled by id alone rather than via a #chat-log ancestor selector.
+#context-menu2 {
+  button {
+    font-size: 12px;
+    background: transparent;
+    color: #fff;
+    border: 1px dashed var(--color-border-highlight);
+    box-shadow: none;
+    opacity: 0.5;
+    background: rgba(160, 157, 231, 0.5);
+
+    &.active,
+    &:hover {
+      border: 1px solid var(--color-border-highlight);
+      color: #fff;
+      opacity: 1;
+      box-shadow: inset 0 0 10px 0px var(--color-shadow-primary);
+    }
+
+    &:hover {
+      border: 1px solid #35a7e9;
+      box-shadow: inset 0 0 8px 2px var(--color-shadow-primary);
+    }
+  }
+
+  .reroll,
+  .modifiers {
+    border-top: 1px solid var(--color-border-highlight);
+  }
+
+  .modifiers {
+    margin: 6px 0 0;
+    padding-top: 6px;
+  }
 }