@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

:root {
    --body-bg: radial-gradient(#393939, #000000);
    
    /* Modern Chat Design System - 2025 */
    --chat-bg-primary: #0f0f0f;
    --chat-bg-secondary: #1a1a1a;
    --chat-panel-bg: #1e1e1e;
    --chat-panel-secondary: #252525;
    
    /* Borders & Shadows */
    --border: 1px solid rgba(255, 255, 255, 0.08);
    --border-subtle: 1px solid rgba(255, 255, 255, 0.05);
    --border-radius: 12px;
    --border-radius-message: 16px;
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --box-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.5);
    --message-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    
    /* Message Bubbles */
    --msger-width: 800px;
    --msger-height: 700px;
    --msger-bubble-width: 65%;
    --msger-bg: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
    --left-msg-bg: #2a2f32;
    --right-msg-bg: #128C7E;
    --private-msg-bg: #6b1f8b;
    
    /* UI Elements */
    --wb-width: 800px;
    --wb-height: 600px;
    --wb-bg: radial-gradient(#393939, #000000);
    --select-bg: #2a2a2a;
    --settings-bg: radial-gradient(#393939, #000000);
    --tab-btn-active: rgb(42 42 42 / 70%);
    --btns-bg-color: rgba(0, 0, 0, 0.7);
    --btns-hover-scale: scale(1.05);
    
    /* Colors */
    --accent-blue: #0088cc;
    --accent-green: #25d366;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.6);
    --text-timestamp: rgba(255, 255, 255, 0.5);
    
    /* Hover & Active States */
    --hover-bg: rgba(255, 255, 255, 0.05);
    --active-bg: rgba(255, 255, 255, 0.1);
    
    /* Animation Timing */
    --transition-fast: 0.15s cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-normal: 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-slow: 0.3s ease-in-out;
    /* buttons bar horizontal */
    --btns-top: 50%;
    --btns-right: 0%;
    --btns-left: 10px;
    --btns-margin-left: 0px;
    --btns-width: 60px;
    --btns-flex-direction: column;
    /* buttons bar horizontal
    --btns-top: 95%;
    --btns-right: 25%;
    --btns-left: 50%;
    --btns-margin-left: -160px;
    --btns-width: 320px;
    --btns-flex-direction: row;
    */
    /* bottom buttons bar horizontal default */
    --bottom-btns-top: auto;
    --bottom-btns-left: 50%;
    --bottom-btns-bottom: 0;
    --bottom-btns-translate-X: -50%;
    --bottom-btns-translate-Y: 0%;
    --bottom-btns-margin-bottom: 18px;
    --bottom-btns-flex-direction: row;

    --transcription-height: 680px;
    --transcription-width: 420px;
    --trx-bg: radial-gradient(#393939, #000000);

    --editor-container-width: 100%;
    --editor-container-height: 100%;
    --editor-height: 85vh;

    --vmi-wh: 15vw;
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
    --videoObjFit: cover;

    --dd-color: #ffffff;

    --videoBar-active: 0.1px solid rgba(102, 190, 255, 0.32);
}

* {
    outline: none;
    font-family: 'Montserrat';
}