/* Tokyo Night theme for Element Web */
/* Background image - /var/www/element-web/img/background.jpg */

:root {
    --cpd-color-bg-canvas-default: #1a1b26;
    --cpd-color-bg-canvas-secondary: #16161e;
    --cpd-color-text-primary: #c0caf5;
    --cpd-color-text-secondary: #a9b1d6;
    --cpd-color-border-interactive-primary: #7aa2f7;
}

/* Login / welcome screen background */
.mx_AuthPage {
    background-image: url('/img/background.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Room timeline background */
.mx_RoomView_timeline_rr_enabled .mx_RoomView_body,
.mx_RoomView_body {
    background-image: url('/img/background.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

/* Message bubbles — semi-transparent so bg shows through */
.mx_EventTile_line {
    background-color: rgba(26, 27, 38, 0.82) !important;
    border-radius: 8px !important;
}
.mx_EventTile_selected .mx_EventTile_line,
.mx_EventTile:hover .mx_EventTile_line {
    background-color: rgba(41, 46, 66, 0.90) !important;
}

/* Sidebar / room list */
.mx_LeftPanel_wrapper {
    background-color: #16161e !important;
}
.mx_RoomTile:hover,
.mx_RoomTile_selected {
    background-color: #292e42 !important;
}

/* Top bar */
.mx_RoomHeader {
    background-color: rgba(22, 22, 30, 0.95) !important;
    border-bottom: 1px solid #292e42 !important;
}

/* Input bar */
.mx_MessageComposer {
    background-color: rgba(22, 22, 30, 0.95) !important;
    border-top: 1px solid #292e42 !important;
}

/* Accent / links */
a, .mx_AccessibleButton_kind_link {
    color: #7aa2f7 !important;
}

/* Unread badge */
.mx_NotificationBadge {
    background-color: #f7768e !important;
}

/* Mention highlight */
.mx_EventTile_highlight .mx_EventTile_line {
    background-color: rgba(247, 118, 142, 0.12) !important;
    border-left: 3px solid #f7768e !important;
}

/* Code blocks */
code, pre {
    background-color: #16161e !important;
    color: #9ece6a !important;
    border: 1px solid #292e42 !important;
}