/* Gajim Application CSS File

libadwaita colors:
https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/css-variables.html
*/

/* GTK specific changes =================================================== */
/* Remove backdrop anomation */
row:backdrop { transition: none; }

/* GtkLinkButton style */
button.flat.link { padding: 0; border: 0; }

/* ========================================================================= */
/* Text style */
.bold { font-weight: bold; }
.small-label {
    font-size: 90%;
}
.draft {
    font-style: italic;
    color: var(--warning-color);
}

/* General Padding / Margin */
.m-3 { margin: 3px; }
.m-6 { margin: 6px; }
.m-9 { margin: 9px; }
.m-12 { margin: 12px; }
.m-18 { margin: 18px; }
.m-24 { margin: 24px; }

.mt-3 { margin-top: 3px; }
.mt-6 { margin-top: 6px; }
.mt-9 { margin-top: 9px; }
.mt-12 { margin-top: 12px; }
.mt-18 { margin-top: 18px; }
.mt-24 { margin-top: 24px; }

.mb-3 { margin-bottom: 3px; }
.mb-6 { margin-bottom: 6px; }
.mb-9 { margin-bottom: 9px; }
.mb-12 { margin-bottom: 12px; }
.mb-18 { margin-bottom: 18px; }
.mb-24 { margin-bottom: 24px; }

.ms-3 { margin-left: 3px; }
.ms-6 { margin-left: 6px; }
.ms-9 { margin-left: 9px; }
.ms-12 { margin-left: 12px; }
.ms-18 { margin-left: 18px; }
.ms-24 { margin-left: 24px; }

.me-3 { margin-right: 3px; }
.me-6 { margin-right: 6px; }
.me-9 { margin-right: 9px; }
.me-12 { margin-right: 12px; }
.me-18 { margin-right: 18px; }
.me-24 { margin-right: 24px; }

.mx-3 { margin-left: 3px; margin-right: 3px; }
.mx-6 { margin-left: 6px; margin-right: 6px;}
.mx-9 { margin-left: 9px; margin-right: 9px;}
.mx-12 { margin-left: 12px; margin-right: 12px;}
.mx-18 { margin-left: 18px; margin-right: 18px;}
.mx-24 { margin-left: 24px; margin-right: 24px;}

.my-3 { margin-top: 3px; margin-bottom: 3px; }
.my-6 { margin-top: 6px; margin-bottom: 6px;}
.my-9 { margin-top: 9px; margin-bottom: 9px;}
.my-12 { margin-top: 12px; margin-bottom: 12px;}
.my-18 { margin-top: 18px; margin-bottom: 18px;}
.my-24 { margin-top: 24px; margin-bottom: 24px;}

.p-3 { padding: 3px; }
.p-6 { padding: 6px; }
.p-9 { padding: 9px; }
.p-12 { padding: 12px; }
.p-18 { padding: 18px; }
.p-24 { padding: 24px; }

.pt-3 { padding-top: 3px; }
.pt-6 { padding-top: 6px; }
.pt-9 { padding-top: 9px; }
.pt-12 { padding-top: 12px; }
.pt-18 { padding-top: 18px; }
.pt-24 { padding-top: 24px; }

.pb-3 { padding-bottom: 3px; }
.pb-6 { padding-bottom: 6px; }
.pb-9 { padding-bottom: 9px; }
.pb-12 { padding-bottom: 12px; }
.pb-18 { padding-bottom: 18px; }
.pb-24 { padding-bottom: 24px; }

.ps-3 { padding-left: 3px; }
.ps-6 { padding-left: 6px; }
.ps-9 { padding-left: 9px; }
.ps-12 { padding-left: 12px; }
.ps-18 { padding-left: 18px; }
.ps-24 { padding-left: 24px; }

.pe-3 { padding-right: 3px; }
.pe-6 { padding-right: 6px; }
.pe-9 { padding-right: 9px; }
.pe-12 { padding-right: 12px; }
.pe-18 { padding-right: 18px; }
.pe-24 { padding-right: 24px; }

.px-3 { padding-left: 3px; padding-right: 3px; }
.px-6 { padding-left: 6px; padding-right: 6px;}
.px-9 { padding-left: 9px; padding-right: 9px;}
.px-12 { padding-left: 12px; padding-right: 12px;}
.px-18 { padding-left: 18px; padding-right: 18px;}
.px-24 { padding-left: 24px; padding-right: 24px;}

.py-3 { padding-top: 3px; padding-bottom: 3px; }
.py-6 { padding-top: 6px; padding-bottom: 6px;}
.py-9 { padding-top: 9px; padding-bottom: 9px;}
.py-12 { padding-top: 12px; padding-bottom: 12px;}
.py-18 { padding-top: 18px; padding-bottom: 18px;}
.py-24 { padding-top: 24px; padding-bottom: 24px;}

/* Colors */
.encrypted-color { color: var(--success-color); }
.unencrypted-color { color: var(--error-color); }

.bg-transparent {
    background-color: transparent;
}

/* Generic animations */
@keyframes pulse-opacity {
    0%  { opacity: 1.0; }
    20% { opacity: 0.7; }
    45% { opacity: 1.0; }
}
.pulse-opacity {
    animation-name: pulse-opacity;
    animation-duration: 2.0s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.dnd-target {
    animation-name: pulse-opacity;
    animation-duration: 1.6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes pulse-transform {
    0%  { -gtk-icon-transform: scale(1.0); }
    20% { -gtk-icon-transform: scale(1.1); }
    35% { -gtk-icon-transform: scale(1.0); }
}
.pulse-transform {
    animation-name: pulse-transform;
    animation-duration: 2.0s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes spin {
    to { -gtk-icon-transform: rotate(1turn); }
}
.spin {
    animation-name: spin;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.opacity-0 {
    opacity: 0;
}

/* General purpose classes ================================================= */
/* use .frame to add regular borders */
.no-border { border: none; }
.scrolled-no-border { border: none; }
.preview-image {
    border-radius: 4px;
    box-shadow: 0px 0px 3px 0px alpha(var(--view-fg-color), 0.2);
}

/* Scrollbars */
.no-scroll-indicator undershoot.top, undershoot.bottom { box-shadow: none; background-image: none; }
.scrollbar-style scrollbar trough {background-color:var(--view-bg-color); }
.scrollbar-style scrollbar {border:none; }

/* Treeview */
.gajim-treeview { padding: 5px; }
.gajim-treeview check { padding: 0px; }

/* InfoBar */
.infobar > box {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-color);
}
.infobar.info > box {
    color: var(--accent-blue);
    background-color: alpha(var(--accent-blue), 0.1);
}

/* Drag and drop */
.dnd-area {
    border: 2px dashed var(--accent-bg-color);
    border-radius: 6px;
    padding: 18px;
}

/* Unread counter */
.unread-counter {
    background-color: var(--accent-blue);
    color: var(--light-2);
    font-weight: bold;
    font-size: 80%;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 10px;
}
.unread-counter-silent {
    color: var(--dark-5);
    background-color: var(--light-3);
}

.badge {
    color: var(--light-2);
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 0.375rem;
    font-size: 80%;
    font-weight: bold;
}
.badge-hat {
  background-color: var(--accent-teal);
  font-size: 100%;
}
.badge-update {
    background-color: var(--accent-slate);
}
.badge-restart {
    color: var(--warning-fg-color);
    background-color: var(--warning-bg-color);
}
.badge-group {
    color: var(--light-1);
    background-color: var(--light-5);
}
.badge-accent {
    color: var(--accent-blue);
    border: 1px solid alpha(var(--accent-blue), 0.1);
    background-color: alpha(var(--accent-blue), 0.1);
}

.link-button { min-height: 0px; }

/* Main Window ============================================================= */
.mainwindow-grid {
    background: var(--view-bg-color);
}

.gajim-app-window .window-padding {
    padding: 18px;
}

/* Generic sidebar / chatlist elements */
.account-identifier-bar {
    border-radius: 6px;
    min-width: 3px;
}

.selection-bar {
    border-radius: 6px;
}

/* AppSideBar */
#AppSideBar {
    border-right: 1px solid color-mix(in srgb, currentColor 15%, transparent);
    background: var(--window-bg-color);
    padding-bottom: 10px;
    padding-top: 5px;
}

/* AccountPopover */
#AccountPopoverRow image {
    -gtk-icon-size: 24px;
}

/* SideBarListBox */

#SideBarListBox {
    background: transparent;
}

.sidebar-listbox-row {
  min-width: 57px;
  padding: 6px 0px 6px 0px;
}

.sidebar-listbox-row:active {
  background: transparent;
}

.sidebar-listbox-row image {
    -gtk-icon-size: 24px;
    padding: 6px;
}

.sidebar-listbox-row .selection-bar {
    margin-left: 4px;
    padding-left: 3px;
}

.sidebar-listbox-row:selected .selection-bar {
    background-color: lighter(var(--accent-bg-color));
}

.sidebar-listbox-row:hover .selection-bar {
    background-color: var(--accent-bg-color);
}

.sidebar-listbox-row:hover, .sidebar-listbox-row:selected {
    background-color: transparent;
}

.sidebar-row-image {
    border: 2px solid transparent;
    border-radius: 12px;
}

.dnd-target .sidebar-row-image {
    border: 2px dashed var(--accent-bg-color);
}

/* WorkspaceListBox */

#WorkspaceListBox {
    background: transparent;
}

.workspace-scrolled {
    background: transparent;
}

.workspace-listbox-row {
    padding: 4px 0px 4px 0px;
}

.workspace-listbox-row image {
    -gtk-icon-size: 36px;
    padding: 0;
}

/* ActivityPage */
.activity-page {
    padding: 18px;
    margin-top: 12px;
}

/* AccountPage */
.account-page {
    background: transparent;
}
.account-page-box {
    padding: 18px;
}

/* ActivityListView */
.activity-list-view row {
    transition: none;
    padding: 4px 0px 4px 6px;
    margin: 0 10px 3px 10px;
    border: 2px solid transparent;
    border-radius: 6px;
}
.activity-list-view row:active,
.activity-list-view row:selected:active {
    box-shadow: none;
}
.activity-list-view row:selected {
    background-color: mix(var(--view-bg-color), var(--window-fg-color), 0.1);
    outline: none;
}
.activity-list-view row:selected label {
    color: var(--view-fg-color);
}
.activity-list-view row button {
    min-width: 25px;
    min-height: 25px;
    padding: 0px;
}
.activity-list-view row:selected button {
	color: var(--window-fg-color);
    border-color: var(--border-color);
}
.activity-list-view row:selected image {
	color: var(--window-fg-color);
}

/* Middle Grid (ChatList and widgets on top) */
.middle-grid > scrolledwindow { background: transparent; }

.chat-filter-active {
    background: var(--accent-bg-color);
    border-radius: 50%;
}

/* ChatList */
.chatlist {
    background: transparent;
}
.chatlist-row {
    transition: none;
    padding: 4px 0px 4px 6px;
    margin: 0 10px 3px 10px;
    border: 2px solid transparent;
    border-radius: 6px;
    background-color: var(--view-bg-color);
}
.chatlist-row:hover{
	background-color: mix(var(--view-bg-color), var(--window-fg-color), 0.05);
}
.chatlist-row:active,
.chatlist-row:selected:active {
    box-shadow: none;
}
.chatlist-row:selected {
    background-color: mix(var(--view-bg-color), var(--window-fg-color), 0.1);
    outline: none;
}
.chatlist-row:selected label:not(.unread-counter){
    color: var(--view-fg-color);
}
.chatlist-row button {
    min-width: 25px;
    min-height: 25px;
    padding: 0px;
}
.chatlist-row:selected button {
	color: var(--window-fg-color);
    border-color: var(--border-color);
}
.chatlist-row:selected image {
	color: var(--window-fg-color);
}
.chatlist-row:selected spinner {
    color: var(--window-fg-color);
}
.dnd-target-chatlist {
    animation-name: pulse-opacity;
    animation-duration: 2.0s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    border: 2px dashed var(--accent-bg-color);
}

@keyframes composing {
    0%  {
	    -gtk-icon-transform: translate(0px, 2px);
	}
    10% {
	    -gtk-icon-transform: translate(0px, -1px) rotate(20deg);
	}
    30% {
	    -gtk-icon-transform: translate(0px, -1px) rotate(-20deg);
	}
    40% {
	    -gtk-icon-transform: translate(0px, 2px);
	}
    100% {
        -gtk-icon-transform: translate(0px, 2px);
    }
}
.chat-state-icon {
    animation-name: composing;
    animation-duration: 2.0s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.header-box label {
	padding: 12px 18px 6px 18px;
	font-weight: bold;
	color: color-mix(in srgb, var(--window-fg-color) 50%, transparent);
	font-size: 90%;
}
.header-box-first label {
	padding: 0px 18px 6px 18px;
}

/* SearchView */
.search-view {
    padding: 13px 12px 12px 12px;
    border-left: 1px solid var(--border-color);
    background-color: var(--view-bg-color);
}
.search-view-row {
    padding: 4px 3px 4px 6px;
    border-radius: 4px;
    transition: opacity 500ms ease-in-out;
}
.search-view-row-grid textview {
	background: transparent;
}
.search-view-row-grid textview text {
	background: transparent;
}
.search-view-counter label {
    font-style: italic;
    color: color-mix(in srgb, var(--window-fg-color) 50%, transparent);
}
.search-view-header {
    padding: 12px 6px 6px 6px;
}
.search-view-header label {
    color: alpha(var(--view-fg-color), 0.7);
}

/* Banner */

#ChatBanner { padding: 5px; }
.avatar-button * {
    filter: none;
    -gtk-icon-filter: none;
}

/* MessageActionsBox */
.message-actions-box { margin: 2px 13px 8px 8px; }
.message-actions-box > box > box > button:not(:hover),
.message-actions-box > box > box > menubutton > button:not(:hover) {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}
.message-actions-box > box > box > button:hover,
.message-actions-box > box > box > menubutton > button:hover {
    border: 1px solid transparent;
    border-radius: 8px;
}

/* MessageInputTextView */
.message-input-textview,
.message-input-textview text {
    background-color: transparent;
}
.message-input-border {
    border: 2px solid var(--border-color);
    border-radius: 4px;
}
.message-input-focus {
    border: 2px solid var(--accent-bg-color);
    border-radius: 4px;
}

/*CompletionPopover*/
.completion-popover > contents {
    padding: 12px;
}
.completion-popover > contents > box > label {
    padding: 0px 0px 6px 3px;
}
.completion-popover listview {
    background-color: transparent;
}
.nickname-completion > row,
.command-completion > row,
.emoji-completion > row {
    padding: 6px 9px 6px 9px;
}
.nickname-completion > row:selected,
.command-completion > row:selected,
.emoji-completion > row:selected {
    border-radius: 18px;
}

.emoji-completion > row button { padding: 0px 12px 0px 12px; }

/* GroupchatRoster */

#GroupchatRoster > box { 
    border-spacing: 6px;
}

#GroupchatRoster > box > box { 
    margin: 12px 18px 6px 18px;
    border-spacing: 12px;
}

#GroupchatRoster listview { 
    padding-left: 12px; padding-right: 12px;
}

#GroupchatRoster header:first-child { 
    padding-top: 6px;
}


/* ConversationView ======================================================== */

/* BaseRow */
.conversation-row {
    padding: 10px 3px 4px 6px;
    border-radius: 4px;
    margin-left: 8px;
    margin-right: 2px;
}
.conversation-row:hover button {
    opacity: 1;
}
.conversation-row grid textview:not(.sourceview),
.conversation-row grid textview:not(.sourceview) text {
	background: transparent;
}

/* Help class for emulating prelight state */
.conversation-row-hover {
    background-color: var(--window-bg-color);
}

/* FileTransferJingleRow */
.file-transfer {
    padding: 10px;
    margin: 5px;
    background-color: var(--view-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

/* SystemRow */
.conversation-system-row {
    padding: 18px;
}

/* DateRow */
.conversation-date-row {
    padding: 12px;
}

/* CommandRow */
.conversation-command-row .gajim-command-error,
.conversation-command-row .gajim-command-output {
    font-weight: 600;
    border-radius: 6px;
    padding: 12px;
}

/* Conversation row styles */
.merged { padding-top: 1px; }
.retracted-message { opacity: 0.4; }
.transparent-selection > selection {
    background-color: transparent;
    color: var(--window-fg-color);
}

.conversation-row-highlight {
    transition: background-color 1s;
    background-color: alpha(var(--accent-bg-color), 0.8);
}

/* Row widgets ============================================================ */
.conversation-subject-box,
.conversation-call-box {
    border-radius: 6px;
    padding: 12px;
}

/* QuoteWidget */
.conversation-quote {
    padding-bottom: 6px;
}
.conversation-quote textview text,
.conversation-quote label {
    color: alpha(var(--view-fg-color), 0.6);
}
.conversation-quote-bar {
    background-color: alpha(var(--view-fg-color), 0.2);
}

/* CodeWidget */
.code-widget {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin: 6px 0;
    padding: 12px;
    background: alpha(var(--shade-color), 0.3);
}
.code-widget-header {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-bottom: 12px;
}
.code-widget-header label {
    font-weight: bold;
    color: alpha(var(--window-fg-color), 0.7);
}

.code-widget .view {
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* ReferencedMessageWidget */
.referenced-message {
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: alpha(var(--shade-color), 0.5);
}

.referenced-message #quote-bar {
    background-color: alpha(var(--window-fg-color), 0.3);
    border-radius: 3px;
}

/* PreviewWidget */
.preview-box {
    border: 1px solid;
    border-color: var(--border-color);
    border-radius: 4px;
    padding: 10px;
    background-color: var(--view-bg-color);
}
.preview-image-button,
.preview-image-button:hover {
    padding: 0px;
    border: none;
    outline: none;
    transition: none;
    -gtk-icon-shadow: none;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
}
.preview-image-button > picture {
    border-radius: 4px;
}
.preview-image-overlay {
    background: alpha(var(--window-bg-color), 0.9);
    padding: 4px 12px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.preview-image-overlay-button {
    background: @theme_bg_color;
}
.preview-image-overlay-button:hover {
    background: shade(@theme_bg_color, 0.92);
}
.preview-video-overlay {
    background-color: black;
}
.open-graph-preview {
    padding: 0;
}
.open-graph-preview button {
    min-width: 25px;
    min-height: 25px;
    padding: 0px;
    margin-right: 9px;
}

/* Conversation meta elements */
.conversation-meta {
    opacity: 0.6;
}
.conversation-nickname {
    font-weight: bold;
}

/* Message row actions */
.row-actions-button-box {
    background: var(--window-bg-color);
    border-radius: 8px;
}

/* ReactionsBar */
.reaction {
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 2px 6px;
    outline: none;
 }
 .reaction:hover {
    border-color: var(--accent-bg-color);
    background: alpha(var(--accent-bg-color), 0.3);
 }
 .reaction-from-us {
    border-color: alpha(var(--accent-bg-color), 0.9);
    background: alpha(var(--accent-bg-color), 0.1);
}
.reaction-add-show-all > button {
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 2px;
}
.dummy-emoji-entry {
    padding: 0;
    border: 0;
}

/* Multi-purpose elements / widgets ======================================== */

/* ContactFlowBox */
.contact-flowbox-item {
    background-color: alpha(var(--border-color), 0.4);
    border-radius: 12px;
    padding: 6px;
}
.contact-flowbox-item button {
    background: none;
    border: 1px solid alpha(var(--border-color), 0.4);
}
.contact-flowbox-item button:hover {
    border: 1px solid var(--border-color);
}

/* ResourceSelector */
.resource-selector list row {
    padding: 6px;
    border-bottom: 1px solid var(--border-color);
}

/* AvatarSelector */
.avatar-selector {
    border: 2px dotted var(--accent-bg-color);
    border-radius: 12px;
    padding: 18px;
}

/* DataFormWidget */
.field-fixed { font-weight: bold; padding-top:5px;}
.data-form-widget grid { margin: 0px 18px 18px 18px; }
.data-form-widget treeview { padding: 5px; }
.data-form-widget scrolledwindow { border: 1px solid; border-color: color-mix(in srgb, currentColor 15%, transparent); }
.data-form-widget textview { padding: 5px; }

/* Settings widgets ======================================================== */

/* Settings Window */
list.sidebar-switcher row {
    padding: 2px 12px 2px 12px;
    margin-left: 6px;
    margin-right: 6px;
    min-width: 170px;
    min-height: 36px;
}

list.sidebar-switcher .sidebar-row-header {
    padding: 12px 18px;
    font-weight: bold;
}

/* Dialogs ================================================================= */

/* ProfileWindow */
#ProfileWindow grid { padding: 18px; }
#ProfileWindow grid > button {
    padding-left: 4px;
    padding-right: 4px;
}
#ProfileWindow popover { padding: 6px; }
#ProfileWindow actionbar > revealer > box  {
    padding: 0px;
    background-color: var(--window-bg-color);
}
#ProfileWindow actionbar button {
   margin-top: 12px;
}
.profile-scrolled-read textview {
    background: transparent;
}
.profile-scrolled-read textview text {
    background: transparent;
    color: var(--view-fg-color);
}

/* ManageRoster */
#ManageRoster listview header {
    font-weight: bold;
    padding: 6px;
    background: alpha(var(--border-color), 0.3);
}

/* AccountWizard */
.tls-error-list {
    border: 1px solid var(--border-color);
}
.tls-error-list > row {
    border-bottom: 1px solid; border-color: var(--view-bg-color);
    padding: 6px;
}
.tls-error-list > row:last-child {
    border-bottom: 0px;
}

/* OMEMO */
.omemo-inactive-color { color: var(--light-5); }
.omemo-undecided-color { color: var(--warning-color); }
.omemo-verified-color { color: var(--success-color); }
.omemo-blind-color { color: var(--success-color); }
.omemo-untrusted-color { color: var(--error-color); }
.omemo-device-row .title .title {
    font-family: monospace;
}

/* StartChatDialog */
.start-chat-treeview { padding: 5px; }
.start-chat-treeview:focus {outline: none; }
.start-chat-row { border-bottom: 1px solid; border-color: var(--view-bg-color); }
.start-chat-row:last-child { border-bottom: 0px; }
.start-chat-row.activatable:active { box-shadow: none; }
.start-chat-row { padding: 5px 20px 5px 8px; }
.start-chat-row:focus { outline: none; }

/* AvatarStack */

#AvatarStack button { border-radius: 18px; }
#AvatarStack button:not(:hover) { background-color: transparent; }
#AvatarStack button > box { padding-left: 6px; margin-right: -3px; }
#AvatarStack button image { margin-left: -9px; }
#AvatarStackPopover contents { padding: 0px; }
