UI Customization

/* 
  CSS Template for Customization of the Pria UI 
  01/22/2025 - version 1.4
*/

/*
Account for responsive breakpoints, use the following: 
*/
/*
max-sm	@media not all and (min-width: 640px) { ... }
max-md	@media not all and (min-width: 768px) { ... }
max-lg	@media not all and (min-width: 1024px) { ... }
max-xl	@media not all and (min-width: 1280px) { ... }
max-2xl	@media not all and (min-width: 1536px) { ... }
*/

/* ============================================
   COMMON / GLOBAL
   ============================================ */
.pria-ui-background {}

/* ============================================
   PRIA MAIN INTERFACE
   ============================================ */

/* Top Navigation Bar */
.pria-ui-topbar {}
.pria-ui-top-btn {}
.pria-ui-favorites-bar {}

/* Sidebar / Conversation List */
.pria-ui-sidebar {}

/* Main Content Area */
.pria-ui-main {}

/* Messages Container */
.pria-ui-messages {}

/* Individual Message */
.pria-ui-message {}
.pria-message-in {}
.pria-message-out {}

/* Input Area */
.pria-ui-input {}
.pria-ui-entrysearch {}
.pria-ui-tb-btn {} /* Toolbar buttons */

/* Welcome Screen */
.pria-ui-welcome {}
.pria-ui-welcome-options {}

/* Current Conversation Indicator */
.pria-ui-conversation-current {}

/* Zoom Controls */
.pria-ui-zoomin {}
.pria-ui-zoomout {}

/* ============================================
   ASSISTANTS
   ============================================ */
.pria-ui-assistants {}
.pria-ui-assistant {}
.pria-ui-assistant.active {}
.pria-ui-assistant.inactive {}
.pria-ui-assistant.unpublished {}

/* ============================================
   VOICES / LANGUAGE SELECTION
   ============================================ */
.pria-ui-voices {}
.pria-ui-languages-selection {}

/* ============================================
   FILES / UPLOADS
   ============================================ */
.pria-ui-files {}
.pria-ui-file {}
.pria-ui-file.selected {}
.pria-ui-file.active {}
.pria-ui-file.inactive {}
.pria-ui-file.error {}
.pria-ui-uploads {}

/* ============================================
   GALLERY (Digital Twins)
   ============================================ */
.pria-ui-gallery {}
.pria-ui-gallery-header {}
.pria-ui-gallery-carousel {}
.pria-ui-gallery-card {}
.pria-ui-gallery-card.selected {}

/* ============================================
   PRICING PAGE
   ============================================ */
.pria-ui-pricing-header {}
.pria-ui-pricing-container {}
.pria-ui-pricing-loading {}
.pria-ui-pricing-modal {}
.pria-ui-pricing-tabs {}
.pria-ui-pricing-actions {}
.pria-ui-pricing-about-header {}
.pria-ui-pricing-about {}
.pria-ui-pricing-badges {}

/* ============================================
   BADGES / TAGS
   ============================================ */
.pria-ui-badge {}
.pria-ui-badge-membership {}
.pria-ui-badge-role {}
.pria-ui-badge-credits {}
.pria-ui-badge-pool {}
.pria-ui-badge-sharing {}

/* ============================================
   CHARTS / VISUALIZATION
   ============================================ */
.pria-ui-chartcontainer {}

/* ============================================
   ADMIN SECTION
   ============================================ */
.pria-ui-wrapper {}
.pria-ui-tabpane {}

/* ============================================
   PROFILE SECTION
   ============================================ */
.pria-ui-profile-header {}

/* ============================================
   FEEDBACK / OUTPUT
   ============================================ */
.pria-ui-feedback {}
.pria-ui-output {}

/* ============================================
   REALTIME / CONVO MODE
   ============================================ */
.pria-ui-rt-window {}

/* ============================================
   COLLAPSIBLE SECTIONS
   ============================================ */
.pria-ui-details {}
.pria-ui-summary {}

/* ============================================
   VIEW-SPECIFIC SECTIONS
   ============================================ */
/* Upload View */
.pria-ui-view-upload {}
.pria-ui-view-upload-inner {}
.pria-ui-upload-top {}

/* History View */
.pria-ui-view-history {}
.pria-ui-view-history-inner {}
.pria-ui-view-history-inner-dialogues {}
.pria-ui-tool-icon {}

/* ============================================
   AUTHENTICATION BUTTONS
   ============================================ */
.pria-login-btn {}
.pria-signup-btn {}
.pria-request-tojoin-cancel-btn {}
.pria-request-tojoin-join-btn {}

/* ============================================
   EXAMPLE CUSTOMIZATIONS
   ============================================ */
/*
.pria-ui-topbar,
.pria-ui-sidebar,
.pria-ui-background,
.pria-ui-messages,
.pria-ui-input,
.pria-ui-profile-header,
.pria-ui-entrysearch,
.pria-ui-wrapper,
.pria-ui-tabpane,
.pria-ui-files,
.pria-ui-assistants,
.pria-ui-uploads,
.pria-ui-voices,
.pria-ui-chartcontainer,
.pria-ui-feedback,
.pria-ui-output,
.pria-ui-gallery,
.pria-ui-pricing-container {
    background: radial-gradient(circle, #FFFFE0, #fff7e6, #FFA500);
    background-size: cover;
    background-attachment: fixed;
}
*/

/*
.pria-ui-message:hover,
.pria-ui-message:focus {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

.pria-ui-assistant.active {
    background-color: rgba(255, 255, 255, 0.75) !important;
}

.pria-ui-assistant.unpublished {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

.pria-ui-assistant.inactive {
    background-color: rgba(0, 0, 0, 0.25) !important;
}

.pria-ui-file.selected {
    background-color: rgba(255, 255, 255, 0.75) !important;
}

.pria-ui-file.active {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

.pria-ui-file.inactive {
    background-color: rgba(0, 255, 0, 0.1) !important;
}

.pria-ui-file.error {
    background-color: rgba(255, 0, 0, 0.1) !important;
}

.pria-ui-gallery-card.selected {
    border-color: #3b82f6 !important;
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.3) !important;
}
*/