/*                      MAIN ELEMENTS
------------------------------------------------------------------------- */
:root {
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  --safe-area-inset-left: env(safe-area-inset-left);
  --safe-area-inset-right: env(safe-area-inset-right);
}

body
{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: white;
}

body.dark-mode {
  background-color: #1d1f1d;
}

div
{
  box-sizing: border-box;
}
div:focus {
  outline: 0;
}

#app-ui
{
  width:100%;
  height:100%;
  overflow: auto;
  position: absolute;
  background-color: #FFFFFF;
  -webkit-overflow-scrolling: touch;
  transition: width 0.3s ease-in-out;
  left: 0;
}

#app-ui.dark-mode {
  background-color: #1d1f1d;
}

#app-ui.app-ui-with-chat {
  /* Width is bound to the drawer's actual width — JS updates the CSS variable
     when the user resizes the drawer via its left-edge handle (#14057). */
  width: calc(100% - var(--nlux-drawer-width, 400px));
}

/* For smaller screens, overlay chat instead of resizing */
@media (max-width: 768px) {
  #app-ui.app-ui-with-chat {
    width: 100%;
  }
}

input[type=button]
{
  -webkit-appearance: button;
}

body > svg {
  display: none;
}

/*                      FRAMEWORK ELEMENTS
------------------------------------------------------------------------- */

/*                      POPUP - DIALOG - MODAL
------------------------------------------------------------------------- */

.dialog-ext
{
  display: flex;
  display: -webkit-flex;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  pointer-events: none;
}

.dialog-ext-modal
{
  display: flex;
  display: -webkit-flex;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: rgba(170, 170, 170, 0.5);
  z-index: 999;
}

.dialog-int
{
  margin: auto;
  pointer-events: auto;
}

.whisker-ext
{
  border-style: solid;
  border-color: transparent;
  width: 0;
  position: absolute;

}

.whisker-int
{
  border-style: solid;
  border-color: transparent;
  width: 0;
  position: absolute;
}


/*                      ERROR DIALOG POPUP
------------------------------------------------------------------------- */

.element-invalid
{
  border-color: red;
}

.error-popup
{
  display: flex;
  display: -webkit-flex;
  border-color: #bababa;
  border-radius: 2px;
  box-shadow: 1px 1px 8px #bababa;
  background-color: #fbfbfb;
  padding: 5px;
}

.error-popup + .whisker-ext
{
  border-bottom-color: #bababa;
}

.error-popup + .whisker-ext + .whisker-int
{
  z-index: 3;
}

/*                      POPUP LIST
------------------------------------------------------------------------- */

.menu-list
{
  overflow-y: auto;
  overflow-x: hidden;
}

.menu-item
{
  min-height: 24px;
  padding: 4px;
  font-family: sans-serif;
  cursor: pointer;
  border-bottom: 1px solid lightgray;
  width: 100%;
  display: flex;
  display: -webkit-flex;
}

.menu-item:hover
{
  background-color:lightgray;
}

.menu-item-right
{
  flex: 1;
  -webkit-flex: 1;
  align-self: center;
  -webkit-align-self: center;
}

.menu-item-detail
{
  font-size: 10px;
  color: #A0A0A0;
}

.menu-item-name
{
  font-size: 12px;
  white-space: nowrap;
}

.menu-item-svg, .menu-item-cls, .menu-item-img
{
  width: 18px;
  height: 18px;
  padding-right: 2px;
}

/*                      SELECT
------------------------------------------------------------------------- */

.element-autocomplete-container
{
  display: flex;
  font-family: sans-serif;
  border: 1px solid lightgray;
  padding: 2px;
  font-size: 12px;
  width: 90px;
  height: 20px;
  flex-direction: row;
  background-color: white;
}

.element-autocomplete-disabled
{
  color: gray;
}

.element-autocomplete-caption
{
  width: 40px;
  flex-grow: 1;
  flex-shrink: 1;
  height: 100%;
  border: none;
  background-color: transparent;
}

.element-autocomplete-input
{
  width: 40px;
  flex-grow: 1;
  flex-shrink: 1;
  height: 100%;
  border: none;
  background-color: transparent;
  padding: 1px;
}

.element-autocomplete-input:focus
{
  outline: none;
}

.element-autocomplete-placeholder
{
  color: lightgray;
}

.element-autocomplete-icon, .element-autocomplete-righticon
{
  width: 18px;
  height: 18px;
  align-self:center;
  -webkit-align-self: center;
  padding-right: 2px;
  flex-grow: 0;
  flex-shrink: 0;
}

.element-autocomplete-attvalue
{
  background: rgb(231,237,247);
}

.element-autocomplete-attvalue:hover
{
  background-color: lightblue;
}

.element-autocomplete-dialog {
  background-color: white;
  max-height: 240px;
  border: 1px solid lightgray;
}

.element-autocomplete-value-hl {
  background-color: #d6d617;
}

.element-autocomplete-mobile-row {
  height: 40px;
}

/*                      LAYOUT
------------------------------------------------------------------------- */

.container-horizontal
{
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
}

.container-horizontal > *
{
  flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
}

.container-vertical
{
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
}

.container-absolute > *
{
  position: absolute;
}

/*                      SPLITVIEW
------------------------------------------------------------------------- */

.splitview-backpanel
{
  width: 100%;
  height: 100%;
}

.splitview-leftpanel
{
  height:100%;
  position:absolute;
  border-right: 1px solid lightgray;
}

.splitview-rightpanel
{
  height:100%;
}

/*                      SWIPEMENU
------------------------------------------------------------------------- */

.swipe-menu-item
{
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  padding: 0 10px;
  cursor: pointer;
  align-items: center;
}

.swipe-menu
{
  position: absolute;
  display: flex;
  display: -webkit-flex;
  z-index: 0;
}

.swipe-menu-item-value
{
  margin: auto;
}

/*                      ALTCONTAINER
------------------------------------------------------------------------- */

.altcontainer-flip-container
{
  -webkit-perspective: 1000;
  perspective: 1000;
  transform-style: preserve-3d;
}

.altcontainer-swiping-page-container
{
  position: relative;
}

.altcontainer-swiping-page
{
  position: absolute;
  top: 0px;
  left: 0px;
}

.altcontainer-swipe-animation
{
  transition-timing-function: ease-out;
  transition-duration: 250ms;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 250ms;
  -webkit-transition-property: transform;
}

.altcontainer-parallax-page
{
  box-shadow: -2px 0px 8px rgba(0, 0, 0, 0.4);
}

/*                      RIPPLE ANIMATION
------------------------------------------------------------------------- */

.animation-ripple-container
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/*                      LIST REORDER
------------------------------------------------------------------------- */

.listhandle
{
  cursor: pointer;
  fill: currentColor;
  width: 40px;
  height: 40px;
}
.listhandle:focus
{
  outline: invert none medium;
}

.slip-reordering IMG
{
  pointer-events: none;
}

/*                      CANVAS GAUGE
------------------------------------------------------------------------- */

.canvasgauge
{
  position:relative;
  overflow:hidden;
}
.canvasgauge canvas
{
  position:absolute;
  top:0;
  left:0;
}

/*                      INDEX SCROLLBAR
------------------------------------------------------------------------- */

.index-scrollbar
{
  -webkit-user-select: none;
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}

/*                      CONTAINER - MORE ROW - SCROLLER
------------------------------------------------------------------------- */

.more-rows
{
  width: 100%;
  height: 60px;
  color: black;
  text-align: center;
  font-size: 20px;
  font-weight:bold;
}

.more-rows::after
{
  content: "...";
}

.window-scroller
{
  position: absolute;
  top: 0;
  z-index:-1000;
  pointer-events: none;
  width: 1px;
  background: transparent;
}

/*                      SCROLLCONTAINER
------------------------------------------------------------------------- */

.pulltemplate
{
  position:absolute;
  top: 0px;
  transition: transform 500ms;
  transition-timing-function: ease;
  transform: translate3d(0px, -100%, 0px);
}

.pulltemplate.visible
{
  transform: translate3d(0px, 0px, 0px);
}

/*                      OFFLINE
------------------------------------------------------------------------- */

.app-offline-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(57, 64, 58, 0.9);
  z-index: 3000;
  opacity: 0;
  -webkit-transition: opacity 0.4s cubic-bezier(0.5, 0, 0.5, 1);
  -moz-transition: opacity 0.4s cubic-bezier(0.5, 0, 0.5, 1);
  -o-transition: opacity 0.4s cubic-bezier(0.5, 0, 0.5, 1);
  transition: opacity 0.4s cubic-bezier(0.5, 0, 0.5, 1);
}
.app-offline-screen.visible {
  opacity: 1;
}

.app-screencover-content {
  font-family: "Source Sans Pro", Helvetica, "Lucida Grande", Arial, sans-serif;
  width: 300px;
  height: 350px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
.app-screencover-content .screencover-icon {
  width: 160px;
  height: 160px;
  fill: #999999;
}
.app-screencover-content h1 {
  font-size: 2em;
  line-height: 2em;
  margin: 0px;
  color: #FFFFFF;
}
.app-screencover-content h2 {
  font-size: 1.5em;
  line-height: 1.5em;
  margin: 0px;
  font-weight: 400;
  color: #999999;
}

/*                      PREVIEW EDITING
------------------------------------------------------------------------- */

.editing {
}

.hilightClass
{
  outline: 2px dotted red !important;
  outline-offset: -2px !important;
  mix-blend-mode: normal !important;
}
body[style*="zoom: 50%"] .hilightClass {
  outline: 4px dotted red !important;
  outline-offset: -4px !important;
}

.element-hidden-highlighted
{
  outline: 2px dotted #717171 !important;
  outline-offset: -2px !important;
  mix-blend-mode: normal !important;
}
body[style*="zoom: 50%"] .element-hidden-highlighted {
  outline: 4px dotted #717171 !important;
  outline-offset: -4px !important;
}

.drop-left {
  border-left: 2px solid #37B349;
}
.drop-top {
  border-top: 2px solid #37B349;
}
.drop-right {
  border-right: 2px solid #37B349;
}
.drop-bottom {
  border-bottom: 2px solid #37B349;
}
.drop-over {
  border: 2px solid #37B349;
}
.overHilight {
  box-shadow: 3px 3px 5px #888888;
  opacity: 0.9;
}


.rectSelection
{
  border: 2px dotted #37B349;
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
}


body[style*="zoom: 25%"] .rectSelection {
  border: 4px dotted #37B349;
}
body[style*="zoom: 50%"] .rectSelection {
  border: 4px dotted #37B349;
}
body[style*="zoom: 75%"] .rectSelection {
  border: 4px dotted #37B349;
}
body[style*="zoom: 100%"] .rectSelection {
  border: 2px dotted #37B349;
}
body[style*="zoom: 125%"] .rectSelection {
  border: 2px dotted #37B349;
}
body[style*="zoom: 150%"] .rectSelection {
  border: 1px dotted #37B349;
}
body[style*="zoom: 175%"] .rectSelection {
  border: 1px dotted #37B349;
}
body[style*="zoom: 200%"] .rectSelection {
  border: 1px dotted #37B349;
}


.editing #app-ui::-webkit-scrollbar{
  width:10px;
  height:10px;
}
.editing #app-ui::-webkit-scrollbar-track{
  background-color:rgba(0,0,0,0.0);
}
.editing #app-ui::-webkit-scrollbar-track:hover{
  background-color:rgba(0,0,0,0.05);
}
.editing #app-ui::-webkit-scrollbar-thumb{
  background-color:#7EDB7E;
}
.editing #app-ui::-webkit-scrollbar-thumb:hover{
  background-color:#15A515;
}

.editing #app-ui
{
  user-select: none;
  -webkit-user-select: none;
}

.emptycontainer
{
  min-width: 30px;
  min-height: 15px;
  border: 1px dashed gray;
  mix-blend-mode: difference;
}

span.emptycontainer
{
  display: inline-block;
}

img.emptycontainer
{
  width: 50px;
  height: 50px;
}

/*                      PREVIEW EDITOR COMMON CLASSES
------------------------------------------------------------------------- */

#widget-editor-overlay
{
  text-align: center;
  white-space: nowrap;
  display:block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
}

#widget-editor
{
  width: 80%;
  height: 85%;
  display: inline-block;
  margin: 20px auto;
  padding: 20px;
  text-align: left;
  white-space: normal;
  background-color: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  position: relative;
  /* vertical-align: middle; */
  font-family: "Source Sans Pro", Helvetica, "Lucida Grande", Arial, sans-serif;
  overflow: hidden;
}

#widget-editor-title
{
  font-weight: 200;
  padding-bottom: 1em;
  font-size: 1.4em;
  margin: 20px 0;
  padding: 0;
  font-family: "Source Sans Pro", Helvetica, "Lucida Grande", Arial, sans-serif;
}

#widget-editor-help
{
  font-family: "Source Sans Pro", Helvetica, "Lucida Grande", Arial, sans-serif;
  font-size: 10pt;
  font-style: italic;
  text-align: center;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  float: right;
  margin-top: 2px;
  padding: 3px 5px 3px 3px;
  border: solid 1px #CCCCCC;
  background-color: whitesmoke;
  cursor: pointer;
}

#widget-editor-buttons
{
  height: 40px;
  margin: 20px 20px 0 20px;
  position: relative;
  clear: both;
}

#confirm-btn-div
{
  position: absolute;
  top: 0;
  right: 0;
}

#confirm-button
{
  float: right;
  padding: 0px 20px;
  min-width: 120px;
  text-align: center;
  background-color: #37B349;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  overflow: hidden;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  border:none;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-appearance: button;
  text-transform: none;
  color: white;
  font-family: "Source Sans Pro", Helvetica, "Lucida Grande", Arial, sans-serif;
}

#cancel-btn-div
{
  position: absolute;
  top: 0;
  left: 0;
}

#cancel-button
{
  float: left;
  padding: 0 20px;
  min-width: 120px;
  text-align: center;
  background-color: #9DA69F;
  color: white;
  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  overflow: hidden;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  border: none;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-appearance: button;
  text-transform: none;
  cursor: pointer;
  font-family: "Source Sans Pro", Helvetica, "Lucida Grande", Arial, sans-serif;
}

#widget-editor-tabbar
{
  display: inline-flex;
  display: -webkit-inline-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  margin-left: 1px;
  margin-top: -2px;
  font-family: "Source Sans Pro", Helvetica, "Lucida Grande", Arial, sans-serif;
}

#widget-options-container
{
  overflow: auto;
  border-top: solid 1px #CCCCCC;
  padding: 5px;
  margin-top: -1px;
  font-family: "Source Sans Pro", Helvetica, "Lucida Grande", Arial, sans-serif;
}

.widget-section-groupHeader
{
  width: 100%;
  font-weight: bold;
  margin-bottom: 5px;
}

.widget-next-section-groupHeader
{
  margin-top: 20px;
  padding-top: 10px;
  border-top: solid 1px #CCCCCC;
}

#widget-property-container
{
  width: 100%;
  display: flex;
  display: -webkit-flex;
  font-size: 10pt;
  margin: 5px 0px 5px 0px;
  font-family: "Source Sans Pro", Helvetica, "Lucida Grande", Arial, sans-serif;
}

#widget-property-label
{
  width: 40%;
  padding: 4px 0px;
  font-family: "Source Sans Pro", Helvetica, "Lucida Grande", Arial, sans-serif;
  margin-top: 10px;
}

.widget-color-label
{
  display: block;
  width: calc(25% - 42px);
  height: 25px;
  margin-right: 10px;
  margin-top: 13px;
  border: solid 1px #CCCCCC;
  border-radius: 80px 20px;
  cursor: pointer;
}

.widget-property-textvalue
{
  font-size: 10pt;
  display: block;
  width: 35%;
  height: 18px;
  border: solid 1px #CCCCCC;
  padding: 1px 4px;
  font-family: "Source Sans Pro", Helvetica, "Lucida Grande", Arial, sans-serif;
}

.widget-input-field
{
  font-size: 10pt;
  width: 60%;
  font-family: "Source Sans Pro", Helvetica, "Lucida Grande", Arial, sans-serif;
}

.widget-checkbox
{
  margin-left: calc(50% - 10px);
}

.widget-text
{
  width: calc(60% - 30px);
}

/*                      CALENDAR CONFIGURATOR COMPONENT
------------------------------------------------------------------------- */

.fullcalendar-subproperty-name
{
  display: inline-block;
  width: 30%;
}

.fullcalendar-subproperty-textvalue, .widget-text, .widget-property-textvalue
{
  height: 30px;
  padding: 0 10px;
  border: 1px solid #DDDDDD;
  border-radius: 3px;
  background-color: #FFFFFF;
  outline: none;
  color: #39403A;
  font-size: 0.9em;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  -webkit-font-smoothing: subpixel-antialiased;
  line-height: normal;
  margin-top: 10px;
}

.fullcalendar-subproperty-textvalue, .widget-property-textvalue {
  min-width: 200px;
}

.fullcalendar-tab
{
  border: solid 1px #CCCCCC;
  background-color: whitesmoke;
  line-height: 1.5;
  text-align: center;
  font-size: 10pt;
  cursor: pointer;
  margin-top: -1px;
  margin-left: -1px;
  padding: 10px 10px;
}

/*                      COLORPICKER FOR CONFIGURATOR COMPONENT
------------------------------------------------------------------------- */

#widget-editor-colorpicker-overlay
{
  width: 100%;
  height: 100%;
  top: 0px;
  position: absolute;
  background-color: rgba(0,0,0,0);
}

#widget-editor-colorpicker-popup
{
  position: absolute;
  width: 430px;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 5px black;
  border-radius: 5px;
  border-color: #CCCCCC;
}

#widget-editor-colorpicker-buttons
{
  width: 100%;
  text-align: center;
  padding: 0px 10px 10px 10px;
  font-family: Open Sans, sans-serif;
  font-size: 10pt;
}

#confirm-button-colorpicker, #cancel-button-colorpicker
{
  display: inline-block;
  width: 50%;
  padding: 14px 0px;
  cursor: pointer;
}

.widget-colorpicker
{
  font-family: Open Sans, sans-serif;
  font-size: 10pt;
  padding: 4px;
  border-radius: 5px;
  float: none !important;
}


/*                      CHARTJS
------------------------------------------------------------------------- */

.chartjs-container
{
  position:relative;
  width: 100%;
  height: 100%;
}

.chartjs-container canvas {
  margin:auto;
}


/*                      CHARTJS CONFIGURATOR COMPONENT
------------------------------------------------------------------------- */

.chartjs-textarea
{
  font-size: 10pt;
  font-family: Open Sans, sans-serif;
  width: 60%;
  height: 100px;
  border: solid 1px #CCCCCC;
}


.chartjs-tab
{
  padding: 6px 10px;
  border: solid 1px #CCCCCC;
  background-color: whitesmoke;
  line-height: 1.5;
  text-align: center;
  font-size: 10pt;
  cursor: pointer;
  margin-top: -1px;
  margin-left: -1px;
}


.chartjs-global-options-tab
{
  padding: 15px 10px 4px 10px;
}


.chartjs-type-tab
{
  padding-top: 4px;
  cursor: pointer;
}


.chartjs-dataset-tab
{
  margin-left: -1px;
  padding: 5px 10px 4px 10px;
}


.chartjs-dataset-title-tab
{
  font-style: italic;
  font-size: 8pt;
}

/*                      SHELL EMULATOR - CAMERA
------------------------------------------------------------------------- */

#getPicture-overlay
{
  overflow: hidden;
  z-index: 50000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: 100%;
  display: -webkit-flex;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  max-height: 600px;
  max-width: 600px;
  margin: auto;
  border: 1px solid rgba(222,222,222,1);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

#video-container {
  height:100%;
  width: 100%;
}

#device-camera-video {
  height:100%;
  width: 100%;
  object-fit: cover;
}

#getPicture-container
{
  height: 100%;
  width:100%;
  background-color: #FFFFFF;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
}

#getPicture-buttons-cell
{
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  padding: 5px;
  position:absolute;
  bottom:0;
  width:100%;
  background-color: white;
  padding-top: 5px;
  padding-right: 0px;
  padding-left: 0px;
}

#getPicture-confirm-button, #getPicture-cancel-button
{
  text-align: center;
  padding: 14px 0px;
  width: 48%;
  cursor: pointer;
}

#getPicture-confirm-button
{
  border: solid 1px #47aa4d;
  background-color: #47aa4d;
  color: #FFFFFF;
}

#getPicture-confirm-button:hover
{
  box-shadow: 0px 0px 3px #4d4d4d;
}

#getPicture-confirm-button:active
{
  box-shadow: 0px 0px 1px #4d4d4d;
  border: solid 1px #FFFFFF;
}

#getPicture-cancel-button
{
  border: solid 1px #d14836;
  background-color: #d14836;
  color: #FFFFFF;
}

#getPicture-cancel-button:hover
{
  box-shadow: 0px 0px 3px #4d4d4d;
}

#getPicture-cancel-button:active
{
  box-shadow: 0px 0px 1px #4d4d4d;
  border: solid 1px #FFFFFF;
}

#getPicture-flash
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-color: rgba(255,255,255,0.3);
}

#getPicture-dropzone {
  border:2px dotted blue;
  flex-grow: 1;
}


#fromLibrary-cancel-button {
  margin-top: 20px;
  box-shadow: 0px 0px 1px #4d4d4d;
  border: solid 1px #FFFFFF;
  width:200px;
  text-align: center;
  padding: 14px 0px;
  width: 48%;
  cursor: pointer;
  border: solid 1px #d14836;
  background-color: #d14836;
  color: #FFFFFF;
}


/*                      SHELL EMULATOR - BARCODE SCANNER
------------------------------------------------------------------------- */

.barcode-scanning-line {
  height: 5px;
  background-color: #d14836;
  animation : MoveUpDown 3s linear infinite;
  position: absolute;
  top: 50%;
}

.barcode-cancel-button {
  flex-grow: 1;
  margin-right: 5px;
  margin-left: 5px;
}

.barcode-shadow {
  position: absolute;
  opacity: 0.6;
  box-shadow: 10px 10px 10px 20000px #000000;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

@keyframes MoveUpDown {
  0%, 50%, 100% {
    top: calc(50% - 5px);
  }
  25% {
    top: calc(100% - 5px);
  }
  75% {
    top: 0%;
  }
}

/*                      SHELL EMULATOR - SOCIAL SHARING
------------------------------------------------------------------------- */

#socialSharing-overlay
{
  overflow: hidden;
  z-index: 50000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: 100%;
  display: -webkit-flex;
  justify-content: space-around;
  -webkit-justify-content: space-around;
}

#socialSharing-main-container
{
  background-color: #FFFFFF;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  max-height: 600px;
  max-width: 600px;
  margin: auto;
  border: 1px solid rgba(222,222,222,1);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  padding:8px;
}

#socialSharing-main-container > h4
{
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 15px;
}

#socialSharing-items-container
{
  flex-basis: 80%;
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
  align-items: center;
  justify-content: space-around;
}


.socialSharing-item {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  align-items: center;
  padding:10px;
  width: 90px;
  height:40%;
  margin: 10px;
}

@media  (orientation: landscape) and (max-width:576px)  {
  .socialSharing-item {
    width: 20%;
    height: 100%;
  }
}


#socialSharing-btn-container
{
  flex-basis: 20%;
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  padding: 15px;
  align-items: flex-end;
}


#socialSharing-btn-cancel {
  text-transform: uppercase;
  color: #387ef5;
  cursor:pointer;
}


.socialSharing-svg
{
  cursor:pointer;
}


.socialSharing-svg-facebook
{
  fill: #306199;
}


.socialSharing-svg-facebook:hover
{
  fill: #18304b;
}


.socialSharing-svg-linkedin
{
  fill: #007bb6;
}


.socialSharing-svg-linkedin:hover
{
  fill: #003650;
}


.socialSharing-svg-twitter
{
  fill: #26c4f1;
}


.socialSharing-svg-twitter:hover
{
  fill: #0eaad6;
}


.socialSharing-svg-googleplus
{
  fill: #e93f2e;
}


.socialSharing-svg-googleplus:hover
{
  fill: #ce2616;
}

/*                      MARK AREAS
------------------------------------------------------------------------- */
.markablearea {
  border: 2px dotted #999999;
  mix-blend-mode: difference;
  cursor: pointer;
}
.markablearea:hover {
  background-color: rgba(153, 153, 153, 0.3);
}
.markablearea.mark-selected {
  mix-blend-mode: initial;
  border: 2px dotted #37B349;
  background-color: rgba(55, 179, 73, 0.3);
}
.markablearea.error {
  mix-blend-mode: initial;
  border: 2px dotted #E74C3C;
  background-color: rgba(231, 76, 60, 0.3);
}


/*                FEEDBACK
----------------------------------------------------------------------*/

.feedbackscreen {
  z-index: 10000000;
  position: fixed;
  top: 100%;
  opacity: 0.3;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

@media screen and (min-width: 900px) {
  .feedbackscreen {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

.feedbackscreen.visible {
  top: 0;
  opacity: 1;
}

.feedbackform {
  width: 100%;
  max-width: 640px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  min-height: 90%;
  margin-top: 0;
}

@media screen and (min-width: 900px) {
  .feedbackform {
    padding: 0px 20px 10px 20px;
    text-align: left;
    white-space: normal;
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
    border-radius: 2px;
    position: relative;
    vertical-align: middle;
  }
}

.feedback-popup-small {
  min-height: 50px;
  height: auto;
}

.feedbackscreen h2 {
  text-align: center;
  color: white;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 500;
}

.feedbackscreen textarea {
  display: block;
  font-size: 1em;
  font-family: "Source Sans Pro", Helvetica, "Lucida Grande", Arial, sans-serif;
  border: none;
  padding: 0.5em;
  margin-bottom: 1em;
  resize: none;
  outline: none;
}

.feedbackscreen input[type="text"] {
  display: block;
  border: none;
  margin-bottom: 1em;
  resize: none;
  outline: none;
  height: 33px;
  font-size: 1em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.feedback-buttons, .feedback-checks {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
}

.feedback-buttons button {
  height: 34px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  font-size: 0.9em;
}

.feedback-submit:disabled {
  background-color: #444;
  color: #999;
  cursor: default;
}

.feedback-submit {
  display: block;
  width: 100%;
  border: none;
  padding: 0.5em 0;
  margin-bottom: 1em;
  background-color: #37B349;
  color: white;
  outline: none;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
  text-transform: uppercase;
  line-height: 1.1em;
}

.feedback-close {
  display: block;
  width: 100%;
  padding: 0.5em 0;
  text-transform: uppercase;
  border: none;
  background-color: grey;
  color: white;
  outline: none;
}

@media screen and (min-width: 454px) {
  .feedback-buttons button {
    width: calc(50% - 7.5px) !important;
  }
}

@media screen and (min-width: 454px) {
  .feedback-checks .row {
    width: calc(50% - 7.5px) !important;
  }
}

.feedback-popup-small .feedback-close{
  width: 100% !important;
}

.feedback-formrow {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin-bottom: 1em;
  width: 100%;
}

.feedback-formrow label {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  line-height: 30px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 5px;
  font-size: 0.9em;
  text-transform: uppercase;
  border: none;
  background-color: transparent;
  color: white;
  outline: none;
}

.feedback-formrow input,
.feedback-formrow select,
.feedback-formrow textarea {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  font-size: 0.8em;
}

.feedback-formrow input,
.feedback-formrow select {
  height: 30px;
}

.feedback-positive {
  background-color: #37B349;
}

.screenshot-checkbox:after, .screenshot-checkbox:before {
  content: ' ';
  display: table;
}

.screenshot-checkbox input[type=checkbox] {
  display: none;
}

.screenshot-checkbox span {
  float: left;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border: 1px solid #ddd;
  outline: 0;
  color: #39403a;
  font-size: .9em;
  vertical-align: middle;
  cursor: pointer;
  background-size: auto;
  background-repeat: no-repeat;
  background-color: #fff;
  background-position: 50% 50%;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

.screenshot-checkbox:after {
  clear: both;
}

.screenshot-checkbox.checked span {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.07%2011.197l-4.246-4.31L1%209.76l5.654%205.747%201.416%201.436%2010.9-11.07L16.14%203%208.07%2011.197%22%20fill%3D%22%2339403A%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
}

.feedbackform input {
  border: solid 1px transparent;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

.feedbackform textarea {
  border: solid 1px transparent;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  flex-grow: 1;
}

.ios-feedback-textarea {
  margin-left: 0px;
  margin-right: 0px;
}

.feedback-message-cnt {
  line-height: 30px;
  overflow: hidden;
  font-size: 1.2em;
  text-transform: uppercase;
  color: white;
  outline: none;
  margin: 0px auto;
  margin-top: 20px;
  text-align: center;
}

.feedback-message-cnt a {
  color: limegreen;
}

.feedback-invisible {
  display:none !important;
}

.feedback-transparent {
  background-color:transparent !important;
}

input[type="checkbox"] {
  width: 30px;
  cursor: pointer;
  background-size: auto;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: 50% 50%;
  margin-right: 20px;
}

/* For tabbed view: enable click on tab and block click on the tabs content */
ion-tabs[data-widget="1"] * {
  pointer-events: none !important;
}
ion-tabs[data-widget="1"].widget-selected ion-tabbar {
  pointer-events: auto !important;
}
ion-tabs[data-widget="1"].widget-selected ion-tabbar * {
  pointer-events: auto !important;
}

.ui-color-picker {
  min-width: 10px;
  min-height: 10px;
}

.modal-drag-area {
  cursor: move;
}

.oidc-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

/*                      NLUX CHAT COMPONENTS
------------------------------------------------------------------------- */

/* Chat drawer container */
.nlux-chat-drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 400px;
  z-index: 10000;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  background-color: #fff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Drawer resize handle (left edge) — see Client.Nlux._setupDrawerResizeHandle */
.nlux-drawer-resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s;
  z-index: 10001;
  touch-action: none;
}
/* Grip visible at rest, so the handle can be discovered without hovering it */
.nlux-drawer-resize-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 36px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.2);
}
.nlux-drawer-resize-handle:hover,
.nlux-drawer-resize-handle:active {
  background: rgba(0, 0, 0, 0.1);
}
.nlux-chat-drawer.dark-mode .nlux-drawer-resize-handle::after {
  background: rgba(255, 255, 255, 0.25);
}
.nlux-chat-drawer.dark-mode .nlux-drawer-resize-handle:hover,
.nlux-chat-drawer.dark-mode .nlux-drawer-resize-handle:active {
  background: rgba(255, 255, 255, 0.1);
}
/* In notification mode the drawer is a card centered at the top: it is not
   resizable, so the handle must be neither visible nor clickable */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-drawer-resize-handle {
  display: none;
}

/* Chat close button */
.nlux-chat-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background-color: #f0f0f0;
  color: #333;
  font-size: 20px;
  cursor: pointer;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.nlux-chat-close-button:hover {
  background-color: #e0e0e0;
}

.nlux-chat-close-button.hidden {
  display: none;
}

/* New conversation button */
.nlux-chat-new-button {
  position: absolute;
  top: 10px;
  right: 52px; /* Position to the left of close button */
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background-color: #f0f0f0;
  color: #333;
  font-size: 20px;
  cursor: pointer;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.nlux-chat-new-button:hover {
  background-color: #e0e0e0;
}

.nlux-chat-new-button.hidden {
  display: none;
}

/* Dark mode for non-notification chat styles. The .dark-mode class is toggled
   by Client.Nlux._applyHostTheme to mirror the host app theme. Notification
   mode has its own dark block further down (higher specificity, wins). */
.nlux-chat-drawer.dark-mode {
  background-color: #1d1f1d;
  /* A black shadow is invisible against a dark app — use a light 1px hairline
     as the visible divider, plus a soft shadow for depth. */
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.16), -8px 0 24px rgba(0, 0, 0, 0.6);
}

.nlux-chat-drawer.dark-mode .nlux-chat-close-button,
.nlux-chat-drawer.dark-mode .nlux-chat-new-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

.nlux-chat-drawer.dark-mode .nlux-chat-close-button:hover,
.nlux-chat-drawer.dark-mode .nlux-chat-new-button:hover {
  background-color: rgba(255, 255, 255, 0.18);
}

/* Hide in notification mode */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-chat-new-button {
  display: none;
}

/* Fix for Ionic CSS interference with NLUX messages */
.nlux-comp-chatItem--sent .nlux-comp-message p {
  color: inherit !important;
}

.nlux-comp-chatItem--received .nlux-comp-message p {
  color: inherit !important;
}

.nlux-comp-chatItem--sent .nlux-markdown-container {
  color: var(--nlux-hmMsg--txtClr) !important;
}

.nlux-comp-chatItem--received .nlux-markdown-container {
  color: var(--nlux-aiMsg--txtClr) !important;
}

/* AI highlight for elements being modified.
   The pulse grows a shadow and not the outline width because the outline is !important, and an
   important declaration beats an animation: animating the width was a no-op. */
.ai-highlight {
  outline: 2px solid #ff4444 !important;
  outline-offset: 2px;
  animation: ai-pulse-glow 0.6s ease-in-out;
}

@keyframes ai-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0); }
  50% { box-shadow: 0 0 0 5px rgba(255, 68, 68, 0.35); }
}

/* Inside a grid an outline cannot draw a whole frame, whichever side of the box it sits on.
   OUTSIDE (the rule above) it falls in the neighbour's box, and whoever paints later covers it: a
   row showed its top edge only (the row below paints over the bottom one) and a header cell its
   left edge only (the cell to its right paints over it), while the header row's own height leaves
   the top band outside the grid altogether.
   INSIDE it disappears completely: an outline is painted with the element's own border, BEFORE its
   descendants, so the cells' backgrounds cover the inset outline of the row that holds them.
   So here the frame is a box of its own, laid over the element and above its content. `::before`
   and not `::after`: the theme already hangs the filter and hide icons of a column on `:after`. */
.panel-list-data-row.ai-highlight,
.panel-list-col.ai-highlight,
.panel-form-col-value.ai-highlight,
.panel-form-col-header.ai-highlight {
  position: relative;
  z-index: 5;
  outline: none !important;
}

.panel-list-data-row.ai-highlight::before,
.panel-list-col.ai-highlight::before,
.panel-form-col-value.ai-highlight::before,
.panel-form-col-header.ai-highlight::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid #ff4444;
  /* Positioned and lifted, so it paints above the cell contents whatever their order */
  z-index: 1;
  pointer-events: none;
}

@keyframes ai-pulse {
  0% { outline-width: 2px; }
  50% { outline-width: 4px; }
  100% { outline-width: 2px; }
}

/* AI click animation */
.ai-click-ripple {
  position: relative;
  overflow: hidden;
}

.ai-click-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 68, 68, 0.5);
  transform: translate(-50%, -50%);
  animation: ai-ripple 0.6s ease-out;
  pointer-events: none;
}

@keyframes ai-ripple {
  to {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

/* AI swipe command highlight */
.ai-swipe-highlight {
  background-color: rgba(255, 68, 68, 0.3) !important;
  outline: 2px solid #ff4444 !important;
  outline-offset: -2px;
  animation: ai-pulse 0.5s ease-in-out;
}

/*                      NLUX VOICE INPUT
------------------------------------------------------------------------- */
/* Voice button container - set width */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-voice-button {
  width: 40px !important;
  height: 40px !important;
}

/* Voice icon container styling */
.nlux-voice-icon-container {
  width: 24px !important;
  height: 24px !important;
  mask: none !important;
  border-radius: 100% !important;
  padding: 3px !important;
  margin-bottom: 4px !important;
  background-color: var(--nlux-sbmBt-dslb--txtClr) !important;
}
/* Voice button recording state (active listening) */
.recording .nlux-voice-icon-container {
  background-color: #ff4444 !important;
  animation: pulse 1.5s infinite;
}
/* Voice button passive listening state (waiting for activation word) */
.passive-listening .nlux-voice-icon-container {
  background-color: #ffa500 !important;
  animation: pulse-slow 3s infinite;
}
/* Pulse animation for recording state */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 68, 68, 0);
  }
}
/* Pulse animation for passive listening state (slower, orange) */
@keyframes pulse-slow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 165, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 165, 0, 0);
  }
}
/* Voice tooltip */
.nlux-voice-tooltip {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Remove horizontal padding from textarea to align with voice button (only when voice button is present) */
.nlux-comp-composer.has-voice-button textarea {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.nlux-comp-composer {
  position: relative; /* For absolute positioning of stop button */
}

.nlux-comp-composer textarea {
  cursor: text !important; /* Fix cursor from pointer to text */
}

/* Override NLUX default max-height for composer textarea */
.nlux-AiChat-root {
  --nlux-PromptInput-Max-Height: 30vh !important;
}

/* --------------------------------------------------------------------------
                     NLUX STOP BUTTON
-------------------------------------------------------------------------- */
/* Stop button - appears in place of send button during processing */
.nlux-stop-button {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  position: absolute !important;
  right: 20px !important;
  top: 15px !important;
  background-color: var(--nlux-sbmBt--clr, #6B7280) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.nlux-stop-button:hover {
  opacity: 0.8 !important;
}

.nlux-stop-button.hidden {
  display: none !important;
}

/* Hide stop button in notification mode (tap on message is used instead) */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-stop-button {
  display: none !important;
}

/* Stop icon container - match sendIcon structure */
.nlux-comp-stopIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.nlux-comp-stopIcon svg {
  width: 12px !important;
  height: 12px !important;
  fill: white !important;
}

/* Disabled buttons while agent is working */
.nlux-comp-composer button:disabled,
.nlux-attach-button:disabled,
.nlux-voice-button:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* --------------------------------------------------------------------------
                     NLUX MESSAGE OVERFLOW
   The drawer defends its width by clipping: nova.css sets `overflow:hidden` on
   the chat room, on the conversation container and on the message box. Every
   kind of content has to declare how it stays inside, so that the clipping is a
   backstop and not the mechanism. Code blocks and tables comply by scrolling
   inside themselves, prose complies by wrapping.
   Declared on the two roots that hold rendered text and inherited from there,
   so message parts the library adds later are covered as well.
   `anywhere` rather than `break-word` because it also lowers the minimum width
   the text asks for: the rule then holds however the library sizes the bubble,
   which is why it can live outside nova.css. `break-word` is the fallback for
   browsers older than Safari 15.4, which do not know `anywhere`.
-------------------------------------------------------------------------- */
.nlux-comp-message,
.nlux-comp-welcomeMessage {
  overflow-wrap: break-word !important;
  overflow-wrap: anywhere !important;
}

/* --------------------------------------------------------------------------
                     NLUX MARKDOWN HEADERS
-------------------------------------------------------------------------- */
/* Better rendering for markdown headers in chat */
.nlux-comp-message .nlux-markdown-container h1 {
  font-size: 1.2em !important;
  font-weight: 600 !important;
  margin-top: 0.5em !important;
  margin-bottom: 0.3em !important;
}

.nlux-comp-message .nlux-markdown-container h2 {
  font-size: 1.1em !important;
  font-weight: 600 !important;
  margin-top: 0.4em !important;
  margin-bottom: 0.3em !important;
  border-bottom: 1px solid rgba(0,0,0,0.1) !important;
  padding-bottom: 0.2em !important;
}

.nlux-comp-message .nlux-markdown-container h3 {
  font-size: 1.05em !important;
  font-weight: 600 !important;
  margin-top: 0.3em !important;
  margin-bottom: 0.2em !important;
}

.nlux-comp-message .nlux-markdown-container h4,
.nlux-comp-message .nlux-markdown-container h5,
.nlux-comp-message .nlux-markdown-container h6 {
  font-size: 1em !important;
  font-weight: 600 !important;
  margin-top: 0.3em !important;
  margin-bottom: 0.2em !important;
}

/* --------------------------------------------------------------------------
                     NLUX INLINE CODE
-------------------------------------------------------------------------- */
/* Cleaner inline code styling - overrides nova.css yellowish theme */
.nlux-comp-message .nlux-markdown-container code {
  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace !important;
  font-size: 0.875em !important;
  padding: 0.15em 0.4em !important;
  color: #c7254e !important;
  background-color: #f9f2f4 !important;
  border: none !important;
  border-radius: 4px !important;
}

/* Dark mode support for inline code */
.nlux-comp-message .nlux-markdown-container code[data-theme="dark"],
[data-theme="dark"] .nlux-comp-message .nlux-markdown-container code {
  color: #f8b4c4 !important;
  background-color: #3d2a2e !important;
}

/* --------------------------------------------------------------------------
                     NLUX MARKDOWN LINKS
   Nobody declares a colour for links: the bubble is styled as a pair of
   background and text colour picked to be legible together, and the link falls
   back to the browser default blue, chosen without knowing what is behind it.
   It is unreadable on a dark bubble, which the default palette produces in
   both themes.
   Inheriting the bubble's own text colour is legible by construction on any
   theme and any app palette, without the product knowing a palette at all.
   With the colour inherited the underline is the only thing left that marks a
   link, so it is declared here instead of being left to the browser default.
-------------------------------------------------------------------------- */
.nlux-comp-message .nlux-markdown-container a {
  color: inherit !important;
  text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
                     NLUX MARKDOWN TABLES
-------------------------------------------------------------------------- */
/* The markdown renderer emits a bare <table> with no wrapper: make the table
   itself the scroll container, so wide tables scroll horizontally inside the
   message instead of overflowing the drawer */
.nlux-comp-message .nlux-markdown-container table {
  display: block !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  border-collapse: collapse !important;
  font-size: 0.875em !important;
}

.nlux-comp-message .nlux-markdown-container th,
.nlux-comp-message .nlux-markdown-container td {
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  padding: 0.3em 0.6em !important;
  /* Cells opt out of the message-wide wrapping: the table complies by
     scrolling, and breaking inside the cells would collapse the columns to fit
     and take the scroll away */
  overflow-wrap: normal !important;
}

/* Only where the markdown did not specify an alignment: `th` is centered by
   the UA stylesheet, `td` already inherits left from the message */
.nlux-comp-message .nlux-markdown-container th:not([align]),
.nlux-comp-message .nlux-markdown-container td:not([align]) {
  text-align: left !important;
}

.nlux-comp-message .nlux-markdown-container th {
  background-color: rgba(0, 0, 0, 0.05) !important;
  font-weight: 600 !important;
}

/* Dark mode support for tables */
.nlux-chat-drawer.dark-mode .nlux-comp-message .nlux-markdown-container th,
.nlux-chat-drawer.dark-mode .nlux-comp-message .nlux-markdown-container td {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.nlux-chat-drawer.dark-mode .nlux-comp-message .nlux-markdown-container th {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* --------------------------------------------------------------------------
                     NLUX NOTIFICATION MODE - MOBILE UX
   See: docs/app-ai-mobile-notification-css-spec.md for complete spec
-------------------------------------------------------------------------- */

/* NLUX Notification Mode - CSS Custom Properties */
:root {
  /* Layout */
  --nlux-notification-max-width: 500px;
  --nlux-notification-padding-h: 16px;
  --nlux-notification-padding-v: 8px;
  --nlux-notification-border-radius: 16px;
  --nlux-notification-spacing: 12px;

  /* Timing */
  --nlux-notification-slide-duration: 350ms;
  --nlux-notification-fade-duration: 250ms;
  --nlux-notification-expand-duration: 400ms;
  --nlux-notification-stack-duration: 200ms;

  /* Easing */
  --nlux-notification-ease-in: ease-in;
  --nlux-notification-ease-out: ease-out;
  --nlux-notification-ease-in-out: ease-in-out;

  /* Colors */
  --nlux-notification-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --nlux-notification-backdrop: rgba(0, 0, 0, 0.3);
  --nlux-notification-bg: #ffffff;
  --nlux-notification-bg-dark: #1d1f1d;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  NLUX NOTIFICATION MODE - BASE CONTAINER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/* Base notification mode container */
.nlux-chat-drawer[data-chat-style="notification"] {
  /* Positioning: top center instead of right sidebar */
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 0;
  right: 0;
  bottom: auto;  /* Auto height based on content - JS will override for expansion animation */

  /* Dimensions - centered with margin auto (left/right: 0 required for margin auto with fixed positioning) */
  width: calc(100% - 32px);
  max-width: 500px;
  height: auto;
  /* Keep long toast previews inside the viewport: the response scrolls inside the preview. */
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
  margin: 0 auto;

  /* Transform: ONLY vertical movement (no horizontal translateX) */
  --notification-y: calc(-100% - env(safe-area-inset-top, 0px) - 30px);
  transform: translateY(var(--notification-y));

  /* Visual */
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

  /* Animation: animate vertical transform and expansion */
  transition: transform 350ms ease-out,
              top 300ms ease-in-out,
              bottom 300ms ease-in-out,
              box-shadow 200ms ease-out;

  /* Optimize bottom animation performance */
  will-change: bottom;

  /* Layout */
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Z-index */
  z-index: 10000;
}

/* Dark mode support */
.nlux-chat-drawer[data-chat-style="notification"].dark-mode {
  background-color: #1d1f1d;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Visible state */
.nlux-chat-drawer[data-chat-style="notification"].visible {
  --notification-y: 0px;
}

/* Close button - hidden in notification mode */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-chat-close-button {
  display: none;
}

/* Exception box - hidden when empty */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-comp-exceptionBox:empty {
  display: none;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  FLEXBOX ORDER - Element Reordering
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.nlux-chat-drawer[data-chat-style="notification"] .nlux-chatRoom-container {
  display: flex;
  flex-direction: column;
}

/* Let the chat shrink to the drawer max-height, so that a long response scrolls in its container
   instead of being cut by the drawer */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-AiChat-root {
  min-height: 0;
}

/* 1. Composer at top */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-composer-container {
  order: 1;
  flex-shrink: 0;
}

/* 2. Attachments preview below composer */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-attachments-preview {
  order: 2;
  flex-shrink: 0;
}

/* 3. Conversation starters below attachments */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-launchPad-container {
  order: 3;
  flex-shrink: 0;
  border-top: none !important;
}

.nlux-chat-drawer[data-chat-style="notification"] .nlux-launchPad-container:empty {
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* 4. Messages at bottom */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-conversation-container {
  order: 4;
  flex-shrink: 1;
}

/* 5. Feedback below messages */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-feedback-container {
  order: 5;
  flex-shrink: 0;
}

/* 6. Disclaimer at very bottom */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-disclaimer-subtle {
  order: 6;
  flex-shrink: 0;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  LAUNCHPAD & CONVERSATION STARTERS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/* nova.css centers the welcome message column but leaves its name and tagline
   without text alignment, max width or side padding: once they wrap, the lines
   fall back to the left and reach the chat borders. The max width sits above the
   400px drawer, so it leaves the usual widths untouched and caps the text only if
   the drawer gets wider */
.nlux-comp-welcomeMessage > .nlux-comp-welcomeMessage-personaName,
.nlux-comp-welcomeMessage > .nlux-comp-welcomeMessage-text {
  text-align: center;
  max-width: 520px;
  padding-left: 16px;
  padding-right: 16px;
}

/* Hide welcome message in notification mode */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-comp-welcomeMessage {
  display: none;
}

/* Conversation starters container */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-conversationStarters-container {
  padding: 0 16px 12px 16px;
  max-height: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nlux-chat-drawer[data-chat-style="notification"] .nlux-conversationStarters-container:empty {
  display: none;
}

/* Hide starters and user messages when showing assistant response (but not in history mode) */
.nlux-chat-drawer[data-chat-style="notification"].has-messages:not(.history-expanded) .nlux-conversationStarters-container,
.nlux-chat-drawer[data-chat-style="notification"].has-messages:not(.history-expanded) .nlux-comp-chatItem--sent {
  display: none;
}

/* Hide composer off-screen when showing messages */
.nlux-chat-drawer[data-chat-style="notification"].has-messages .nlux-composer-container {
  position: absolute;
  transform: translateY(-200%);
  /* opacity and pointer-events removed - already off-screen, need input events to work */
}

/* Hide cost indicator in notification mode unless history is expanded */
.nlux-chat-drawer[data-chat-style="notification"]:not(.history-expanded) .nlux-cost-indicator {
  display: none !important;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  MESSAGES CONTAINER - Toast Mode
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/* Conversation container in notification mode */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-conversation-container {
  position: relative;
  max-height: 400px;
  overflow: hidden;
  padding: 0 16px;
}

/* Hide all non-toast messages in notification mode - only toasts should be visible */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-chatSegment:not(.toast-visible) {
  display: none !important;
}

/* When showing messages, remove the fixed height limit and the padding: the drawer bounds the
   height, and a response that does not fit scrolls */
.nlux-chat-drawer[data-chat-style="notification"].has-messages .nlux-conversation-container {
  max-height: none;
  overflow-y: auto;
  padding: 12px 0 12px 16px; /* No padding right */
  background-color: var(--nlux-aiMsg--bgClr) !important; /* Use Nova AI message color */
}

/* Remove message background and padding to blend with drawer */
.nlux-chat-drawer[data-chat-style="notification"].has-messages .nlux-comp-chatItem--received {
  background: transparent !important;
  align-items: flex-start !important; /* Avatar at top */
  padding-right: 0 !important; /* No padding right */
}

/* Remove message bubble styling */
.nlux-chat-drawer[data-chat-style="notification"].has-messages .nlux-comp-message.nlux_msg_received {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Reset segment positioning when has-messages (except during animations) */
.nlux-chat-drawer[data-chat-style="notification"].has-messages .nlux-chatSegment.toast-visible:not(.toast-entering):not(.toast-exiting) {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Hide old segments (non-visible) */
.nlux-chat-drawer[data-chat-style="notification"].has-messages .nlux-chatSegment:not(.toast-visible) {
  display: none !important;
}

/* Chat segments container */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-chatSegments-container {
  position: relative;
  min-height: 0;
}

/* Individual chat segment - default hidden state */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-chatSegment {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 350ms ease-out,
              opacity 250ms ease-out;
}

/* Visible toast - relative to take up space */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-chatSegment.toast-visible {
  position: relative;
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}


/* Hidden toast */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-chatSegment.toast-hidden {
  display: none !important;
  position: absolute;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Entering/exiting animations now handled by inline styles in JavaScript */

/* Pinned toast indicator */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-chatSegment.toast-pinned::after {
  content: '📌';
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 16px;
  opacity: 0.7;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  HISTORY EXPANDED MODE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/* Full-screen history mode - JS will set explicit bottom value for animation */
.nlux-chat-drawer[data-chat-style="notification"].history-expanded {
  /* Maintain same width, expand vertically */
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;  /* Override inline style for animation */
  /* Keep original horizontal positioning and width */
  left: 0;
  right: 0;
  width: calc(100% - 16px);
  max-width: 500px;
  margin: 0 auto;
  /* Reset transform to 0 (visible) */
  transform: translateY(0);
  border-radius: 16px;
  /* Transition inherited from base */
}

/* Match the toast rule's specificity so expanded history sets its own height limit. The scroll
   is the one of the toast rule. */
.nlux-chat-drawer[data-chat-style="notification"].history-expanded .nlux-conversation-container {
  /* Account for safe areas, margins (16px total), and drag handle (20px) */
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 52px);
  -webkit-overflow-scrolling: touch;
}

/* All messages visible in expanded mode */
.nlux-chat-drawer.history-expanded .nlux-chatSegment {
  position: relative !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  margin-bottom: 16px;
}

.nlux-chat-drawer.history-expanded .nlux-chatSegment:last-child {
  margin-bottom: 0;
}

/* Hide composer in expanded history mode */
.nlux-chat-drawer.history-expanded .nlux-composer-container {
  display: none !important;
}

/* Hide starters and feedback in expanded mode */
.nlux-chat-drawer.history-expanded .nlux-conversationStarters-container,
.nlux-chat-drawer.history-expanded .nlux-feedback-container {
  display: none;
}

/* Drag handle for collapsing */
.nlux-chat-drawer.history-expanded::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  z-index: 101;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  COMPOSER (INPUT AREA)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/* Composer container */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-composer-container {
  padding: 12px 16px;
  background: inherit;
  overflow: hidden; /* No scrollbar */
}


/* Textarea */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-comp-composer textarea {
  min-height: 44px; /* iOS touch target */
  max-height: 120px;
  font-size: 16px; /* Prevents iOS zoom on focus */
  border-radius: 12px;
  padding: 10px 12px;
}

/* Attach button and Mute button */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-attach-button,
.nlux-chat-drawer[data-chat-style="notification"] .nlux-mute-button {
  width: 25px !important;
  height: 25px !important;
  border-radius: 50% !important;
  background-color: var(--nlux-sbmBt-dslb--txtClr) !important;
  padding: 0 !important;
  align-self: flex-start;
  opacity: 1 !important;
  margin-top: 6px;
  color: black;
}

.nlux-chat-drawer[data-chat-style="notification"] .nlux-attach-button:hover {
  background-color: white;
}

/* Attach button icon - reduce size */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-attach-button svg,
.nlux-chat-drawer[data-chat-style="notification"] .nlux-attach-button img {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
}

/* Send button */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-comp-composer > button:not([title]) {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  ATTACHMENTS PREVIEW
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/* Attachments expand toast downward */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-attachments-preview {
  padding: 0 16px 12px 16px;
  max-height: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Individual attachment item */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-attachment-item {
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.05);
}

.nlux-chat-drawer[data-chat-style="notification"] .nlux-attachment-item:last-child {
  margin-bottom: 0;
}

/* Attachment icon/image */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-attachment-icon {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
}

.nlux-chat-drawer[data-chat-style="notification"] .nlux-attachment-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  FEEDBACK & DISCLAIMER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/* Feedback container */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-feedback-container {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Feedback buttons */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-feedback-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.05);
  transition: background 150ms ease-out, transform 150ms ease-out;
}

.nlux-chat-drawer[data-chat-style="notification"] .nlux-feedback-btn:active {
  transform: scale(0.9);
}

/* Disclaimer */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-disclaimer-subtle {
  padding: 4px 16px 8px 16px;
  font-size: 11px;
  text-align: center;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  TOOL MESSAGES (COLLAPSED)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/* Tool messages container */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-tool-messages-collapsed {
  margin: 8px 0;
  border-radius: 8px;
  overflow: hidden;
}

/* Expand button */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-tool-expand-btn {
  width: 100%;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 8px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 150ms ease-out;
}

.nlux-chat-drawer[data-chat-style="notification"] .nlux-tool-expand-btn:active {
  background: rgba(0, 0, 0, 0.1);
}

/* Expanded tool messages */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-tool-messages-wrapper {
  padding: 8px 0;
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Individual tool message */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-tool-message-item {
  margin-bottom: 6px;
  opacity: 0.8;
  font-size: 13px;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  ANIMATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/* Slide down (toast entry) */
@keyframes notificationSlideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Slide up (toast exit) */
@keyframes notificationSlideUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

/* Fade in */
@keyframes notificationFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fade out */
@keyframes notificationFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Pulse (for attention) */
@keyframes notificationPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  MEDIA QUERIES & RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/* Landscape mode: switch to drawer (if auto mode) */
@media (orientation: landscape) and (max-width: 768px) {
  .nlux-chat-drawer[data-chat-style="auto"] {
    /* Reset to drawer mode in landscape */
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    left: auto;
    width: 400px;
    max-width: 400px;
    transform: translateX(100%);
    border-radius: 0;
  }

  .nlux-chat-drawer[data-chat-style="auto"].visible {
    transform: translateX(0);
  }
}

/* Very small screens (< 360px width) */
@media (max-width: 360px) {
  .nlux-chat-drawer[data-chat-style="notification"] {
    width: calc(100% - 16px); /* Less padding */
    top: calc(env(safe-area-inset-top, 0px) + 4px);
  }

  .nlux-chat-drawer[data-chat-style="notification"] .nlux-conversationStarters-container,
  .nlux-chat-drawer[data-chat-style="notification"] .nlux-attachments-preview {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Safe area support (iOS notch, Android navigation) */
@supports (padding: env(safe-area-inset-top)) {
  .nlux-chat-drawer[data-chat-style="notification"] {
    top: calc(env(safe-area-inset-top) + 8px);
  }

  .nlux-chat-drawer[data-chat-style="notification"].history-expanded .nlux-composer-container {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  DARK MODE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.nlux-chat-drawer[data-chat-style="notification"][data-color-scheme="dark"],
.nlux-chat-drawer[data-chat-style="notification"].dark-mode {
  background-color: #1d1f1d;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.nlux-chat-drawer[data-chat-style="notification"][data-color-scheme="dark"] .nlux-attachment-item,
.nlux-chat-drawer[data-chat-style="notification"].dark-mode .nlux-attachment-item {
  background: rgba(255, 255, 255, 0.1);
}

.nlux-chat-drawer[data-chat-style="notification"][data-color-scheme="dark"] .nlux-feedback-btn,
.nlux-chat-drawer[data-chat-style="notification"].dark-mode .nlux-feedback-btn {
  background: rgba(255, 255, 255, 0.1);
}

.nlux-chat-drawer[data-chat-style="notification"][data-color-scheme="dark"] .nlux-tool-expand-btn,
.nlux-chat-drawer[data-chat-style="notification"].dark-mode .nlux-tool-expand-btn {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.nlux-chat-drawer[data-chat-style="notification"][data-color-scheme="dark"] .nlux-disclaimer-subtle,
.nlux-chat-drawer[data-chat-style="notification"].dark-mode .nlux-disclaimer-subtle {
  color: rgba(255, 255, 255, 0.4);
}

.nlux-chat-drawer[data-chat-style="notification"][data-color-scheme="dark"]::before,
.nlux-chat-drawer[data-chat-style="notification"].dark-mode::before {
  background: rgba(255, 255, 255, 0.3);
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  PERFORMANCE OPTIMIZATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/* Use GPU acceleration for animations */
.nlux-chat-drawer[data-chat-style="notification"],
.nlux-chat-drawer[data-chat-style="notification"] .nlux-chatSegment {
  will-change: transform, opacity;
}

/* Disable will-change when not animating (cleanup via JS) */
.nlux-chat-drawer[data-chat-style="notification"].animation-complete {
  will-change: auto;
}

/* Use contain for layout isolation */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-chatSegment {
  contain: layout style paint;
}

/* Optimize scrolling */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-conversation-container,
.nlux-chat-drawer[data-chat-style="notification"] .nlux-conversationStarters-container,
.nlux-chat-drawer[data-chat-style="notification"] .nlux-attachments-preview {
  -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
  scroll-behavior: smooth;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  ACCESSIBILITY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/* Focus indicators for keyboard navigation */
.nlux-chat-drawer[data-chat-style="notification"] button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.nlux-chat-drawer[data-chat-style="notification"] textarea:focus-visible {
  outline: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .nlux-chat-drawer[data-chat-style="notification"] {
    border: 2px solid currentColor;
  }

  .nlux-chat-drawer[data-chat-style="notification"] .nlux-chatSegment {
    border: 1px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .nlux-chat-drawer[data-chat-style="notification"],
  .nlux-chat-drawer[data-chat-style="notification"] .nlux-chatSegment {
    transition: none;
    animation: none;
  }

  @keyframes notificationSlideDown {
    from, to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes notificationSlideUp {
    from, to {
      opacity: 1;
      transform: none;
    }
  }
}

/* --------------------------------------------------------------------------
                     NLUX IDF MODE
   When AIChat runs inside IDF iframe, the drawer is always visible and
   app-ui is hidden since IDF handles the open/close animations.
-------------------------------------------------------------------------- */

/* In IDF mode, hide app-ui (contains the chat open button) */
body.idf-mode #app-ui {
  display: none !important;
}

/* In IDF mode, chat drawer is always visible and fills the container */
body.idf-mode .nlux-chat-drawer {
  width: 100%;
  height: 100%;
  transform: none !important;
  transition: none;
  box-shadow: none;
  border-left: none;
}

/* --------------------------------------------------------------------------
                     ADAPTIVE CARDS POPUP
-------------------------------------------------------------------------- */
/* Overlay for card popup - fixed positioning when on body */
.ai-card-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-in;
}

/* Overlay when inside app-ui container - absolute positioning */
#app-ui .ai-card-overlay {
  position: absolute;
}

/* Card popup container */
.ai-card-popup {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  min-width: 600px;
  min-height: 480px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  position: relative;
  resize: both;
  animation: slideUp 0.3s ease-out;
  display: flex;
  flex-direction: column;
}

/* Card popup when replacing existing (smoother transition) */
.ai-card-popup.replacing {
  animation: fadeIn 0.2s ease-out;
}

/* Drag handle — transparent strip across the top that acts as a title bar.
   Absolutely positioned so it adds no layout height; the close button keeps a
   higher z-index and stays clickable. */
.ai-card-popup-dragbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  cursor: move;
  z-index: 5;
}

/* While dragging: stop the entry animation and any text selection */
.ai-card-popup.dragging {
  animation: none !important;
  user-select: none;
}

/* Close button for card popup */
.ai-card-popup-close {
  position: absolute;
  top: 10px; 
  right: 10px;
  background: white;
  border: 1px solid #ddd;
  font-size: 18px;
  cursor: pointer;
  padding: 5px 10px;
  color: #666;
  transition: all 0.2s;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ai-card-popup-close:hover {
  background: #f0f0f0;
  transform: scale(1.1);
}

/* Dark mode — the popup is appended to <body>, which carries the dark-mode
   class. The Adaptive Card content itself is themed via the HostConfig in
   cardRenderer.js; these rules cover the popup frame and close button. */
body.dark-mode .ai-card-popup {
  background: #1d1f1d;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

body.dark-mode .ai-card-popup-close {
  background: #2a2d2a;
  border-color: #3f3f46;
  color: #d4d4d8;
}

body.dark-mode .ai-card-popup-close:hover {
  background: #3f3f46;
}

/* Card content container */
.ai-card-container {
  padding: 20px;
  min-width: 560px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Adaptive Card element - make it take full height */
.ai-card-container .ac-adaptiveCard {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1 !important;
}

/* Animations for card popup */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideUp {
  from { 
    transform: translateY(20px);
    opacity: 0;
  }
  to { 
    transform: translateY(0);
    opacity: 1;
  }
}

/* NLUX Chat Tool Messages Styling */
/* Reduce spacing when a segment with tool message follows another segment with tool message */
.nlux-chatSegment:has(.nlux-tool-message-item) + .nlux-chatSegment:has(.nlux-tool-message-item) .nlux-tool-message-item {
  margin-top: -0.8em !important;
}

/* Make avatar invisible but keep space for alignment */
.nlux-tool-message-item .nlux-comp-avatar {
  visibility: hidden !important;
}

/* Hide participant name but keep avatar space */
.nlux-tool-message-item .nlux-comp-chatItem-participantName {
  display: none !important;
}

/* Style the message content for tool messages.
   `color` needs !important: nova colors received messages via a 4-class
   selector that outranks this rule, so without it the tool name keeps the
   app's AiMessage text color (dark) and is invisible in dark mode. */
.nlux-tool-message-item .nlux-comp-message {
  padding: 5px 15px !important;
  min-height: auto !important;
  background-color: transparent !important;
  border: none !important;
  font-size: 0.85em;
  font-style: italic;
  color: #71717a !important;
  opacity: 0.8;
}

/* Dark mode adjustments */
[data-color-scheme="dark"] .nlux-tool-message-item .nlux-comp-message {
  color: #a1a1aa !important;
}

/* Claude commentary messages - temporary messages that collapse after 1s */
.nlux-commentary-message-item {
  animation: commentaryCollapse 1.5s ease-out forwards;
  overflow: hidden;
}

/* Animation for commentary messages: stay visible for 1s, then collapse vertically */
@keyframes commentaryCollapse {
  0% {
    max-height: 500px;
    margin-bottom: 1em;
  }
  66% {
    max-height: 500px;
    margin-bottom: 1em;
  }
  100% {
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Collapsed tool messages container */
.nlux-tool-messages-collapsed {
  margin: 0.5em 0;
  text-align: center;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Wrapper for animated tool messages */
.nlux-tool-messages-wrapper {
  overflow: hidden;
  transition: height 0.3s ease-out, opacity 0.2s ease-out;
}

/* Hide loader after tool messages to prevent scrolling jitter */
.nlux-chatSegment:has(.nlux-tool-message-item) ~ .nlux-chatSegment > .nlux-chatSegment-loader-container {
  display: none;
}

/* Expand/collapse button for tool messages */
.nlux-tool-expand-btn {
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.85em;
  color: #71717a;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nlux-tool-expand-btn:hover {
  background: #e4e4e7;
  color: #52525b;
}

.nlux-tool-expand-icon {
  transition: transform 0.2s ease;
  font-size: 0.8em;
}

/* Dark mode for expand button */
[data-color-scheme="dark"] .nlux-tool-expand-btn {
  background: #27272a;
  border-color: #3f3f46;
  color: #a1a1aa;
}

[data-color-scheme="dark"] .nlux-tool-expand-btn:hover {
  background: #3f3f46;
  color: #d4d4d8;
}

/* Animation classes for collapsing/expanding */
.nlux-collapsing {
  animation: collapseHeight 0.3s ease-out;
  overflow: hidden;
}

.nlux-expanding {
  animation: expandHeight 0.3s ease-out;
  overflow: hidden;
}

/* NLUX Disclaimer - Subtle style between chat and composer */
.nlux-disclaimer-subtle {
  padding: 8px 12px;
  text-align: center;
  animation: fadeIn 0.3s ease-out;
  background: rgba(255, 255, 255, 0.9);
}

.nlux-disclaimer-subtle .nlux-disclaimer-text {
  font-size: 0.75em;
  color: #6b7280;
  line-height: 1.4;
  display: inline-block;
}

/* Dark mode disclaimer */
[data-color-scheme="dark"] .nlux-disclaimer-subtle {
  background: rgba(39, 39, 42, 0.9);
}

[data-color-scheme="dark"] .nlux-disclaimer-subtle .nlux-disclaimer-text {
  color: #9ca3af;
}

/* Disclaimer fade out animation */
.nlux-disclaimer-fading {
  animation: fadeOut 0.2s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* NLUX Feedback UI */
.nlux-feedback-container {
  padding: 8px 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  animation: fadeIn 0.3s ease-out;
  background: rgba(255, 255, 255, 0.5);
}

.nlux-feedback-prompt {
  font-size: 0.8em;
  color: #4b5563;
}

.nlux-feedback-btn {
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 1.1em;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 36px;
}

.nlux-feedback-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  transform: scale(1.1);
}

.nlux-feedback-positive:hover {
  background: #dcfce7;
  border-color: #86efac;
}

.nlux-feedback-negative:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

/* Feedback done state */
.nlux-feedback-done {
  background: #f0fdf4;
}

.nlux-feedback-thanks {
  font-size: 0.8em;
  color: #16a34a;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Dark mode feedback */
[data-color-scheme="dark"] .nlux-feedback-container {
  background: rgba(39, 39, 42, 0.5);
}

[data-color-scheme="dark"] .nlux-feedback-prompt {
  color: #9ca3af;
}

[data-color-scheme="dark"] .nlux-feedback-btn {
  border-color: #374151;
}

[data-color-scheme="dark"] .nlux-feedback-btn:hover {
  background: #374151;
  border-color: #4b5563;
}

[data-color-scheme="dark"] .nlux-feedback-positive:hover {
  background: #14532d;
  border-color: #166534;
}

[data-color-scheme="dark"] .nlux-feedback-negative:hover {
  background: #7f1d1d;
  border-color: #991b1b;
}

[data-color-scheme="dark"] .nlux-feedback-done {
  background: rgba(20, 83, 45, 0.2);
}

[data-color-scheme="dark"] .nlux-feedback-thanks {
  color: #86efac;
}

/* Feedback fade animation */
.nlux-feedback-fading {
  animation: fadeOut 0.3s ease-out forwards;
}

/* Feedback comment area for negative feedback */
.nlux-feedback-comment-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  animation: fadeIn 0.2s ease-out;
}

.nlux-feedback-comment-prompt {
  font-size: 0.85em;
  color: #4b5563;
  font-weight: 500;
}

.nlux-feedback-comment-input {
  width: 100%;
  min-height: 60px;
  padding: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 0.85em;
  font-family: inherit;
  resize: vertical;
  max-height: 120px;
  transition: border-color 0.2s ease;
}

.nlux-feedback-comment-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.nlux-feedback-comment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.nlux-feedback-comment-cancel,
.nlux-feedback-comment-submit {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85em;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.nlux-feedback-comment-cancel {
  background: transparent;
  color: #6b7280;
  border-color: #e5e7eb;
}

.nlux-feedback-comment-cancel:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.nlux-feedback-comment-submit {
  background: #3b82f6;
  color: white;
  font-weight: 500;
}

.nlux-feedback-comment-submit:hover {
  background: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Dark mode comment area */
[data-color-scheme="dark"] .nlux-feedback-comment-prompt {
  color: #d1d5db;
}

[data-color-scheme="dark"] .nlux-feedback-comment-input {
  background: #1f2937;
  border-color: #374151;
  color: #f3f4f6;
}

[data-color-scheme="dark"] .nlux-feedback-comment-input:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.1);
}

[data-color-scheme="dark"] .nlux-feedback-comment-cancel {
  color: #9ca3af;
  border-color: #374151;
}

[data-color-scheme="dark"] .nlux-feedback-comment-cancel:hover {
  background: #374151;
  border-color: #4b5563;
  color: #d1d5db;
}

[data-color-scheme="dark"] .nlux-feedback-comment-submit {
  background: #2563eb;
}

[data-color-scheme="dark"] .nlux-feedback-comment-submit:hover {
  background: #1d4ed8;
}

/* Removed unused keyframes - animation handled by JavaScript using scrollHeight */

/* Conversation cost indicator */
.nlux-cost-container {
  position: absolute;
  top: 10px;
  left: 10px;  /* Moved to left to avoid close button */
  z-index: 1000000;
}

/* Same size and color as the close and new conversation buttons, without their background */
.nlux-cost-indicator {
  background: transparent;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  color: #333;
}

.nlux-cost-icon {
  width: 20px;
  height: 20px;
}

/* Cost tooltip */
.nlux-cost-tooltip {
  position: absolute;
  top: 100%;
  left: 0;  /* Tooltip to the right */
  margin-top: 8px;
  background: white;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  min-width: 250px;
  z-index: 1000001;  /* Above the cost indicator */
}

.nlux-cost-tooltip-content {
  padding: 12px;
}

.nlux-cost-title {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
  color: #18181b;
}

.nlux-cost-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
  color: #52525b;
}

.nlux-cost-divider {
  height: 1px;
  background: #e4e4e7;
  margin: 8px 0;
}

.nlux-cost-total {
  font-weight: 600;
  color: #18181b;
}

/* Dark mode for cost indicator */
[data-color-scheme="dark"] .nlux-cost-indicator,
.nlux-chat-drawer.dark-mode .nlux-cost-indicator {
  color: #e0e0e0;
}

[data-color-scheme="dark"] .nlux-cost-tooltip {
  background: #18181b;
  border-color: #3f3f46;
}

[data-color-scheme="dark"] .nlux-cost-title {
  color: #f4f4f5;
}

[data-color-scheme="dark"] .nlux-cost-row {
  color: #a1a1aa;
}

[data-color-scheme="dark"] .nlux-cost-divider {
  background: #3f3f46;
}

[data-color-scheme="dark"] .nlux-cost-total {
  color: #f4f4f5;
}

/* ============================================
   NLUX Conversation Starters - Custom Styles
   ============================================ */

/* Center content horizontally in starter boxes with border and transitions */
.nlux-comp-conversationStarter {
  align-items: center !important;
  text-align: center;
  border: 1px solid #e5e7eb !important;
  transition: background-color 0.2s ease !important;
  cursor: pointer;
  /* Grow with long labels: NLUX height becomes the minimum */
  height: auto !important;
  min-height: var(--nlux-cvStrt--hg) !important;
}

/* Hover effect - only background color change */
.nlux-comp-conversationStarter:hover {
  background-color: #f9fafb !important;
}

/* Dark mode border */
[data-color-scheme="dark"] .nlux-comp-conversationStarter {
  border-color: #4b5563 !important;
}

/* Dark mode hover - only background color change */
[data-color-scheme="dark"] .nlux-comp-conversationStarter:hover {
  background-color: #374151 !important;
}

/* Increase icon size - override inline width attribute */
.nlux-comp-conversationStarter > img {
  width: 32px !important;
  height: 32px !important;
  margin-bottom: 8px;
}

/* Also handle icon in container if present */
.nlux-comp-conversationStarter > .nlux-comp-conversationStarter-icon-container {
  width: 32px !important;
  height: 32px !important;
  margin-bottom: 8px;
}

/* Center prompt text */
.nlux-comp-conversationStarter > .nlux-comp-conversationStarter-prompt {
  text-align: center;
  line-height: unset !important;
  -webkit-line-clamp: 4 !important;
}

/* Container for conversation starters - flexible layout, same height on each row */
.nlux-comp-conversationStarters {
  width: unset !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}


/* ============================================
   NLUX Conversation Starters - Custom Styles / NOTIFICATION MODE ONLY
   ============================================ */

/* Compact chip style for conversation starters - only notification-specific overrides */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-comp-conversationStarter {
  margin: 4px 4px 4px 0 !important;
  min-height: 32px !important;
  height: auto !important;
  max-height: none !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  width: auto !important;
  flex-direction: row !important;
  gap: 6px !important;
  align-items: center !important;
  text-align: initial !important;
}

/* Small inline icons in chip style - override base 32px icons */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-comp-conversationStarter > img {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.nlux-chat-drawer[data-chat-style="notification"] .nlux-comp-conversationStarter > .nlux-comp-conversationStarter-icon-container {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.nlux-chat-drawer[data-chat-style="notification"] .nlux-comp-conversationStarter > .nlux-comp-conversationStarter-icon-container > img {
  width: 16px !important;
  height: 16px !important;
}

/* Compact prompt text - override base centered text */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-comp-conversationStarter > .nlux-comp-conversationStarter-prompt {
  text-align: left !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: 2 !important;
}

/* Container - add flex layout properties */
.nlux-chat-drawer[data-chat-style="notification"] .nlux-comp-conversationStarters {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 4px !important;
}

/* NLUX Attachments Styles
--------------------------------------------------------------------------- */
/* Attach button styling - match NLUX button style */
.nlux-attach-button {
  background: transparent;
  border: none;
  padding: 0;
  padding-bottom: 4px;
  cursor: pointer;
  color: var(--nlux-sbmBt--clr);
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: 32px;
  align-self: center;
  transition: background-color 0.2s, opacity 0.2s;
  opacity: 0.7;
  margin-left: 8px;  /* Add some spacing from voice button */
}

/* Mute button styling - same as attach button */
.nlux-mute-button {
  background: transparent;
  border: none;
  padding: 0;
  padding-bottom: 4px;
  cursor: pointer;
  color: var(--nlux-sbmBt--clr);
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: 32px;
  align-self: center;
  transition: background-color 0.2s, opacity 0.2s;
  opacity: 0.7;
  margin-left: 8px;
  order: 0;  /* Position in composer */
}

.nlux-mute-button:hover {
  opacity: 1;
}

.nlux-mute-button.active {
  background-color: var(--nlux-sbmBt--clr);
  border-radius: 50%;
  opacity: 1;
}

.nlux-mute-button.active svg {
  stroke: white;
}

.nlux-mute-button svg {
  width: 20px;
  height: 20px;
}

/* Attach button icon size - general */
.nlux-attach-button svg,
.nlux-attach-button img {
  width: 20px;
  height: 20px;
}

.nlux-attach-button:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.05);
}

/* Send button should appear last - first button after textarea in composer */
.nlux-comp-composer textarea + button {
  order: 1;
}

/* Dark mode attach button */
[data-color-scheme="dark"] .nlux-attach-button {
  color: #9ca3af;
}

[data-color-scheme="dark"] .nlux-attach-button:hover {
  background-color: #374151;
  color: #d1d5db;
}

/* Attachments preview container */
.nlux-attachments-preview {
  padding: 12px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  max-height: 200px;
  overflow-y: auto;
}

.nlux-attachments-preview.uploading {
  opacity: 0.7;
  pointer-events: none;
}

/* Dark mode preview container */
[data-color-scheme="dark"] .nlux-attachments-preview {
  background: #1f2937;
  border-color: #374151;
}

/* Attachment item */
.nlux-attachment-item {
  display: flex;
  align-items: center;
  padding: 8px;
  background: white;
  border-radius: 6px;
  margin-bottom: 8px;
  border: 1px solid #e5e7eb;
  position: relative;
}

.nlux-attachment-item:last-child {
  margin-bottom: 0;
}

/* Dark mode attachment item */
[data-color-scheme="dark"] .nlux-attachment-item {
  background: #111827;
  border-color: #374151;
}

/* Attachment icon/thumbnail */
.nlux-attachment-icon {
  width: 40px;
  height: 40px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  flex-shrink: 0;
}

.nlux-attachment-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* Dark mode icon */
[data-color-scheme="dark"] .nlux-attachment-icon {
  color: #9ca3af;
}

/* Attachment name */
.nlux-attachment-name {
  flex: 1;
  font-size: 0.9em;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dark mode name */
[data-color-scheme="dark"] .nlux-attachment-name {
  color: #f3f4f6;
}

/* Attachment size */
.nlux-attachment-size {
  font-size: 0.8em;
  color: #6b7280;
  margin-right: 12px;
}

/* Dark mode size */
[data-color-scheme="dark"] .nlux-attachment-size {
  color: #9ca3af;
}

/* Remove button */
.nlux-attachment-remove {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  transition: all 0.2s;
}

.nlux-attachment-remove:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: white;
  transform: scale(1.1);
}

/* Dark mode remove button */
[data-color-scheme="dark"] .nlux-attachment-remove {
  border-color: #374151;
  color: #9ca3af;
}

[data-color-scheme="dark"] .nlux-attachment-remove:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: white;
}

/* Drag and drop overlay */
.nlux-drag-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(59, 130, 246, 0.1);
  border: 2px dashed #3b82f6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  pointer-events: none;
}

.nlux-drag-message {
  background: white;
  padding: 16px 24px;
  border-radius: 8px;
  font-size: 1.1em;
  color: #3b82f6;
  font-weight: 500;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Dark mode drag overlay */
[data-color-scheme="dark"] .nlux-drag-overlay {
  background: rgba(96, 165, 250, 0.1);
  border-color: #60a5fa;
}

[data-color-scheme="dark"] .nlux-drag-message {
  background: #1f2937;
  color: #60a5fa;
}

/* Attachment previews in user messages */
.nlux-attachment-previews {
  margin: 8px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nlux-attachment-previews img {
  max-width: 200px;
  max-height: 150px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s;
  object-fit: cover;
}

/* Non-image file attachment in sent messages */
.nlux-attachment-preview-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  max-width: 240px;
}

.nlux-attachment-preview-file .nlux-attachment-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  width: auto;
  height: auto;
  margin-right: 0;
}

.nlux-attachment-preview-file .nlux-attachment-name {
  font-size: 0.85em;
  color: inherit;
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dark mode */
[data-color-scheme="dark"] .nlux-attachment-preview-file {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

/* All images in sent messages, including markdown-rendered ones */
.nlux-msg_sent img,
.nlux-comp-chatItem--sent img {
  max-width: 200px;
  max-height: 150px;
  border-radius: 8px;
  margin: 8px 0;
  display: inline-block;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s;
  object-fit: contain;
}

.nlux-attachment-previews img:hover,
.nlux-msg_sent img:hover,
.nlux-comp-chatItem--sent img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Ensure proper spacing for text with attachments */
.nlux-msg_sent p {
  margin: 4px 0;
  line-height: 1.5;
}

/* Dark mode adjustments for attachment previews */
[data-color-scheme="dark"] .nlux-attachment-previews img,
[data-color-scheme="dark"] .nlux-msg_sent img,
[data-color-scheme="dark"] .nlux-comp-chatItem--sent img {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-color-scheme="dark"] .nlux-attachment-previews img:hover,
[data-color-scheme="dark"] .nlux-msg_sent img:hover,
[data-color-scheme="dark"] .nlux-comp-chatItem--sent img:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* CardRenderer loading - pulse dots */
.cardrenderer-pulse-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cardrenderer-dot {
  width: 12px;
  height: 12px;
  background: #3498db;
  border-radius: 50%;
  animation: cardrenderer-pulse 1.4s ease-in-out infinite;
}

.cardrenderer-dot:nth-child(1) {
  animation-delay: 0s;
}

.cardrenderer-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.cardrenderer-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes cardrenderer-pulse {
  0%, 60%, 100% {
    transform: scale(1);
    opacity: 0.4;
  }
  30% {
    transform: scale(1.3);
    opacity: 1;
  }
}

.cardrenderer-container {
  width: 100%;
  height: 100%;
}

/* Enable text selection in app chat messages (overrides div { user-select: none } from IDE) */
.nlux-chat-drawer .nlux-conversation-container,
.nlux-chat-drawer .nlux-conversation-container *,
.nlux-chat-drawer .nlux-comp-message,
.nlux-chat-drawer .nlux-comp-message *,
.nlux-chat-drawer .nlux-markdown-container,
.nlux-chat-drawer .nlux-markdown-container * {
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text;
}

.nlux-chat-drawer .nlux-comp-composer,
.nlux-chat-drawer .nlux-comp-composer *,
.nlux-chat-drawer button,
.nlux-chat-drawer button * {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: default;
}

/* Cursor pointer per elementi cliccabili (link nei messaggi e bottoni) */
.nlux-chat-drawer .nlux-markdown-container a,
.nlux-chat-drawer .nlux-markdown-container a *,
.nlux-chat-drawer button,
.nlux-chat-drawer button * {
  cursor: pointer;
}