@charset "UTF-8";

/* Theme color variables using @eval */
@eval THEME_DEFAULT_BACKGROUND org.rstudio.core.client.theme.ThemeColors.defaultBackground;
@eval THEME_DEFAULT_BORDER org.rstudio.core.client.theme.ThemeColors.defaultBorder;
@eval THEME_DARKGREY_BACKGROUND org.rstudio.core.client.theme.ThemeColors.darkGreyBackground;
@eval THEME_DARKGREY_BORDER org.rstudio.core.client.theme.ThemeColors.darkGreyBorder;
@eval THEME_ALTERNATE_BACKGROUND org.rstudio.core.client.theme.ThemeColors.alternateBackground;
@eval THEME_ALTERNATE_BORDER org.rstudio.core.client.theme.ThemeColors.alternateBorder;

/* Declare external theme classes */
@external rstudio-themes-dark-grey, rstudio-themes-alternate;

/* Notification panel - base light theme style */
.chatUpdateNotification {
   background-color: THEME_DEFAULT_BACKGROUND;
   padding: 6px;
   border-bottom: 1px solid THEME_DEFAULT_BORDER;
   overflow: hidden;
}

/* Notification content - horizontal layout with message and buttons side by side */
.chatNotificationContent {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 10px;
}

/* Message label */
.chatUpdateMessage {
   line-height: normal;
   flex: 1;
}

/* Button panel for vertical button layout */
.chatNotificationButtonPanel {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 4px;
   flex-shrink: 0;
}

/* Notification panel - dark theme override */
.rstudio-themes-dark-grey .chatUpdateNotification {
   background-color: THEME_DARKGREY_BACKGROUND !important;
   border-bottom: 1px solid THEME_DARKGREY_BORDER !important;
}

/* Notification panel - alternate theme override */
.rstudio-themes-alternate .chatUpdateNotification {
   background-color: THEME_ALTERNATE_BACKGROUND !important;
   border-bottom: 1px solid THEME_ALTERNATE_BORDER !important;
}

/* Buttons in notification panel - base light theme */
.chatNotificationButton {
   padding: 5px 12px;
   font-size: 12px;
   cursor: pointer;
   border-radius: 3px;
   border: 1px solid THEME_DEFAULT_BORDER;
   background-color: THEME_DEFAULT_BACKGROUND;
   color: #333;
}

.chatNotificationButton:hover {
   background-color: THEME_DEFAULT_BORDER;
}

/* Buttons - dark theme override */
.rstudio-themes-dark-grey .chatNotificationButton {
   border: 1px solid THEME_DARKGREY_BORDER !important;
   background-color: THEME_DARKGREY_BACKGROUND !important;
   color: #fff !important;
}

.rstudio-themes-dark-grey .chatNotificationButton:hover {
   background-color: THEME_DARKGREY_BORDER !important;
}

/* Buttons - alternate theme override */
.rstudio-themes-alternate .chatNotificationButton {
   border: 1px solid THEME_ALTERNATE_BORDER !important;
   background-color: THEME_ALTERNATE_BACKGROUND !important;
}

.rstudio-themes-alternate .chatNotificationButton:hover {
   background-color: THEME_ALTERNATE_BORDER !important;
}
