/* ============================================================
   [00.1] BACKGROUND RULE LOCATIONS (CTRL+F QUICK JUMP)
   ============================================================ */

/* 2011 Background
   Selector: body
   Location: [01.2] Global Typography
   Note: Hard-coded by design; excluded from variable conversion.
*/

/* 2012 Background
   Selector: body.jtv2012, body.jtv2012-dark
   Location: [03.1] 2012 Variable Directory
   Note: Hard-coded by design; excluded from variable conversion.
*/


/* ============================================================
   [01.0] GLOBAL BASE
   ============================================================ */


/* ------------------------------------------------------------
   [01.1] Reset & Normalization
   ------------------------------------------------------------ */

:root {
  /* Generic base colors */
  --bg: #ffffff;
  --text: #000000;

  /* Generic button system (used by both themes) */
  --btn-radius: 6px;
  --btn-font-size: 12px;
  --btn-font-weight: 500;
  --btn-padding-y: 3px;
  --btn-padding-x: 10px;

  --btn-secondary-bg: #dcdcdc;
  --btn-secondary-bg-hover: #e6e6e6;
  --btn-secondary-text: #444;
}


/* ------------------------------------------------------------
   [01.2] Global Typography
   ------------------------------------------------------------ */

body {
  margin: 0;

  /* VAR NEEDED — suggested: --global-font-family
     Original value: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif
     Location: [01.2] Global Typography
  */
  font-family: var(--global-font-family, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* VAR NEEDED — suggested: --global-background
     Original value: #000 url('peacefuljay-channel_background_image.jpeg') no-repeat center top fixed
     Location: [01.2] Global Typography
  */
  background: var(--global-background, #000 url('peacefuljay-channel_background_image.jpeg') no-repeat center top fixed);

  /* VAR NEEDED — suggested: --global-text-color
     Original value: #ddd
     Location: [01.2] Global Typography
  */
  color: var(--global-text-color, #ddd);
}


/* ------------------------------------------------------------
   [01.3] Global Buttons
   ------------------------------------------------------------ */
/* (No global button selectors in your original file — variables only) */


/* ------------------------------------------------------------
   [01.4] Global Containers
   ------------------------------------------------------------ */
/* (No global container selectors in your original file — variables only) */


/* ============================================================
   [02.0] JTV 2011 THEME
   ============================================================ */


/* ------------------------------------------------------------
   [02.1] 2011 VARIABLE DIRECTORY
   ------------------------------------------------------------ */

body.jtv2011,
body.jtv2011-dark {

  /* NAVBAR */
  --2011-navbar-bg: #202a32;
  --2011-navbar-text-color: #ffffff;
  --2011-navbar-font-family: "Inter", sans-serif;
  --2011-navbar-padding: 0 450px;
  --2011-navbar-position: relative;
  --2011-navbar-top: 0;
  --2011-navbar-z: 9;
  --2011-navbar-height: 120px;
  --2011-navbar-border-bottom: 1px solid #0f3c7a;
  --2011-navbar-shadow: 0 3px 6px rgba(0,0,0,0.35);

  /* HEADER */
  --2011-header-position: sticky;
  --2011-header-top: 0;
  --2011-header-z: 10;

  /* CHANNEL TITLE */
  --2011-channel-title-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2011-channel-title-font-size: 16px;
  --2011-channel-title-font-weight: normal;
  --2011-channel-title-color: #000000;
  --2011-channel-title-margin: 0 0 10px 0;
  --2011-channel-title-padding: 0;
  --2011-channel-title-text-shadow: 0 1px 2px rgba(0,0,0,0.5);

  /* CHANNEL TITLE DARK */
  --2011-channel-title-font-size-dark: 24px;
  --2011-channel-title-font-weight-dark: bold;
  --2011-channel-title-color-dark: #ffffff;
  --2011-channel-title-text-shadow-dark: 0 2px 4px #FFFFFF80;

  /* FOLLOW BUTTON */
  --2011-follow-bg: linear-gradient(#589adb, #3d6b99);
  --2011-follow-text: #e0e7ef;

  --2011-follow-padding-y: 4px;
  --2011-follow-padding-x: 12px;

  --2011-follow-font-family: "Inter", Helvetica, Arial, sans-serif;
  --2011-follow-font-size: 12px;
  --2011-follow-font-weight: normal;

  --2011-follow-border-radius: 7px;
  --2011-follow-border: 1px solid #b5b5b5;

  --2011-follow-margin-right: 10px;
  --2011-follow-text-hover-dark: #FFFFFF;
  --2011-follow-text-shadow: 0 2px 4px #FFFFFFB3;
  --2011-follow-bg-hover-dark: #7fa6cc;
  --2011-follow-bg-shadow-dark: 0 0 10px #b6cce2B3;
  
  /* MAIN WRAPPER */
  --2011-main-wrapper-display: block;
  --2011-main-wrapper-width: 100%;
  --2011-main-wrapper-max-width: 1000px;
  --2011-main-wrapper-margin: 0 auto 40px auto;
  --2011-main-wrapper-overflow: auto;

  /* CONTENT CONTAINER */
  --2011-content-bg: #ffffff;
  --2011-content-border: 1px solid #c8c8c8;
  --2011-content-radius: 6px;
  --2011-content-padding: 15px;
  --2011-content-margin-top: 0;
  --2011-content-margin-bottom: 40px;
  --2011-content-margin-left: auto;
  --2011-content-margin-right: auto;
  --2011-content-shadow: 0 0 8px rgba(0,0,0,0.15);
  --2011-content-position: relative;
  --2011-content-z: 10;
  --2011-content-display: block;

  /* COLUMNS */
  --2011-left-column-float: left;
  --2011-left-column-width: 640px;
  --2011-left-column-box-sizing: border-box;

  --2011-right-column-float: left;
  --2011-right-column-width: 300px;
  --2011-right-column-margin-left: 15px;
  --2011-right-column-box-sizing: border-box;

  /* CHANNEL INFO LEFT */
  --2011-channel-info-left-display: flex;
  --2011-channel-info-left-align-items: center;
  --2011-channel-info-left-gap: 10px;
  --2011-channel-info-left-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2011-channel-info-left-font-size: 14px;
  --2011-channel-info-left-font-weight: bold;
  --2011-channel-info-left-color: #000000;
  --2011-channel-info-left-color-dark: #ffffff;
  --2011-channel-info-left-margin: 0 0 5px 0;
  --2011-channel-info-left-padding: 0;

  /* CHANNEL INFO RIGHT */
  --2011-channel-info-right-display: flex;
  --2011-channel-info-right-align-items: center;
  --2011-channel-info-right-gap: 8px;
  --2011-channel-info-right-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2011-channel-info-right-font-size: 13px;
  --2011-channel-info-right-font-weight: normal;
  --2011-channel-info-right-color: #000000;
  --2011-channel-info-right-margin: 0;
  --2011-channel-info-right-padding: 0;

  /* CHANNEL DESCRIPTION */
  --2011-channel-description-font-family: "Inter Tight", Helvetica, Arial, sans-serif;
  --2011-channel-description-font-size: 13px;
  --2011-channel-description-font-weight: normal;
  --2011-channel-description-color: #000000;
  --2011-channel-description-color-dark: #ffffff;
  --2011-channel-description-line-height: 1.4;
  --2011-channel-description-margin: 4px 0 10px 0;
  --2011-channel-description-padding: 0;
  --2011-channel-description-max-width: 600px;
  --2011-channel-description-text-shadow: 0 1px 2px rgba(0,0,0,0.4);

  /* FACEBOOK BUTTON */
  --2011-facebook-display: inline-flex;
  --2011-facebook-align-items: center;
  --2011-facebook-gap: 4px;
  --2011-facebook-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2011-facebook-font-size: 12px;
  --2011-facebook-font-weight: bold;
  --2011-facebook-color: #ffffff;
  --2011-facebook-bg: #3b5998;
  --2011-facebook-border: 1px solid #2d4373;
  --2011-facebook-radius: 3px;
  --2011-facebook-padding: 2px 6px;
  --2011-facebook-margin: 0;
  --2011-facebook-icon-size: 12px;
  --2011-facebook-icon-color: #ffffff;

  /* SPLIT PILL BUTTONS */
  --2011-pill-font-family: "Inter Tight", Helvetica, Arial, sans-serif;
  --2011-pill-font-size: 12px;
  --2011-pill-font-weight: normal;
  --2011-pill-padding-y: 3px;
  --2011-pill-padding-x: 4px;
  --2011-pill-radius: 7px;
  --2011-pill-border: 1px solid rgba(0,0,0,0.4);
  --2011-pill-gray-bg: linear-gradient(#c5d0db, #8a9199);
  --2011-pill-gray-text: #334d66;
  --2011-pill-blue-bg: linear-gradient(#589adb, #3d6b99);
  --2011-pill-blue-text: #ffffff;
  --2011-pill-gap: 0;
  --2011-pill-right-bg: #3d6b99;
  --2011-pill-right-text: #e0e7ef;
  --2011-pill-gray-bg-dark: #666666;
  --2011-pill-gray-text-dark: #e0e7ef;

  /* SUGGESTED CHANNELS */
  --2011-sc-title-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2011-sc-title-font-size: 14px;
  --2011-sc-title-font-weight: bold;
  --2011-sc-title-color: #000000;
  --2011-sc-title-color-dark: #ffffff;
  --2011-sc-title-margin: 10px 0 8px 0;

  --2011-sc-item-display: flex;
  --2011-sc-item-gap: 8px;
  --2011-sc-item-padding: 6px 0;

  --2011-sc-thumb-width: 100px;
  --2011-sc-thumb-height: 58px;
  --2011-sc-thumb-radius: 3px;
  --2011-sc-thumb-bg: #444444;

  --2011-sc-info-font-family: "Inter", Helvetica, Arial, sans-serif;
  --2011-sc-info-font-size: 12px;
  --2011-sc-info-color: #3d6b99;
  --2011-sc-info-color-dark: #ffffff;
  --2011-sc-info-line-height: 1.3;

  --2011-sc-meta-font-size: 12px;
  --2011-sc-meta-color: #aaaaaa;

  /* VIDEO ARCHIVE */
  --2011-va-item-display: flex;
  --2011-va-item-gap: 10px;
  --2011-va-item-padding: 10px 0;
  --2011-va-item-border-bottom: 1px solid rgba(255,255,255,0.1);

  --2011-va-thumb-width: 120px;
  --2011-va-thumb-height: 90px;
  --2011-va-thumb-radius: 3px;
  --2011-va-thumb-bg: #444444;

  --2011-va-title-font-family: "Inter Tight", Helvetica, Arial, sans-serif;
  --2011-va-title-font-size: 13px;
  --2011-va-title-font-weight: normal;
  --2011-va-title-color: #3d6b99;
  --2011-va-title-color-dark: #ffffff;
  --2011-va-title-line-height: 1.3;

  --2011-va-meta-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2011-va-meta-font-size: 12px;
  --2011-va-meta-color: #000000;
  --2011-va-meta-line-height: 1.3;

  --2011-va-item-hover-bg: rgba(255,255,255,0.05);

  /* MORE VIDEOS BUTTON */
  --2011-more-videos-display: block;
  --2011-more-videos-width: 100%;
  --2011-more-videos-padding: 3px 0;
  --2011-more-videos-margin: 15px 0 0 0;
  --2011-more-videos-bg: linear-gradient(#c5d0db, #8a9199);
  --2011-more-videos-bg-hover: linear-gradient(#e0e6eb, #acb3b9);
  --2011-more-videos-border: 1px solid #000;
  --2011-more-videos-radius: 4px;
  --2011-more-videos-font-family: "Inter", Helvetica, Arial, sans-serif;
  --2011-more-videos-font-size: 12px;
  --2011-more-videos-font-weight: normal;
  --2011-more-videos-color: #334d66;
  --2011-more-videos-text-shadow-dark: 0 0 10px #FFFFFFB3;
  --2011-more-videos-box-shadow-dark: 0 0 10px #FFFFFFB3;

  /* NAVBAR COMPONENTS */
  --2011-nav-font-size: 13px;
  --2011-nav-font-weight: 500;
  --2011-nav-link-hover-color: #ffffff;

  --2011-nav-pill-bg: #3b3b3b;
  --2011-nav-pill-bg-hover: #4a4a4a;
  --2011-nav-pill-text-color: #ffffff;
  --2011-nav-pill-padding: 6px 12px;
  --2011-nav-pill-radius: 20px;

  --2011-nav-search-bg: #ffffff;
  --2011-nav-search-border: 1px solid #cccccc;
  --2011-nav-search-radius: 20px 0 0 20px;
  --2011-nav-search-padding: 6px 12px;

  --2011-nav-search-button-bg: #e0e0e0;
  --2011-nav-search-button-bg-hover: #d0d0d0;
  --2011-nav-search-button-color: #333333;
  --2011-nav-search-button-radius: 0 20px 20px 0;

  /* FOOTER */
  --2011-footer-z: -1;

  /* 2011 TAB BAR */
  --2011-tabbar-bg: #f0f0f0;
  --2011-tabbar-border-bottom: 1px solid #4a90e2;
  --2011-tabbar-height: 32px;

  --2011-tab-font-family: "Inter", Helvetica, Arial, sans-serif;
  --2011-tab-font-size: 12px;
  --2011-tab-font-weight: normal;
  --2011-tab-color: #000000;
  --2011-tab-color-active: #000000;

  --2011-tab-padding: 0 14px;
  --2011-tab-border-right: 1px solid #2f2f2f;

  --2011-tab-active-underline: 3px solid #4a90e2;
  --2011-tab-active-border: 1px solid #4a90e2;
  --2011-tab-active-border-radius: 5px;

  /* 2011 FOOTER */
  --2011-footer-bg: #2f2f2f;
  --2011-footer-text-color: #cccccc;
  --2011-footer-link-color: #b38bff;
  --2011-footer-link-hover-color: #d3b3ff;

  --2011-footer-padding: 0;
  --2011-footer-font-family: "Inter", Helvetica, Arial, sans-serif;
  --2011-footer-font-size: 12px;

  /* 2011 FOOTER PILL */
  --2011-footer-pill-bg: #3a3a3a50;
  --2011-footer-pill-border: 1px solid #1f1f1f;
  --2011-footer-pill-radius: 16px;
  --2011-footer-pill-padding: 6px 12px;
  --2011-footer-pill-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
  --2011-footer-pill-gap: 10px;

  /* CHANNEL INFO BOX */
  --2011-info-box-bg: #ffffff;
  --2011-info-box-border: 1px solid #c8c8c8;
  --2011-info-box-radius: 4px;
  --2011-info-box-padding: 10px;

  /* VIDEO PLACEHOLDER */
  --2011-video-ph-bg: #000000;
  --2011-video-ph-border: 1px solid #333333;
  --2011-video-ph-radius: 4px;
  --2011-video-ph-color: #cccccc;
  --2011-video-ph-margin-bottom: 15px;

  /* CHAT SECTION */
  --2011-chat-section-bg: #111111;
  --2011-chat-section-border: 1px solid #333333;
  --2011-chat-section-radius: 4px;
  --2011-chat-section-padding: 10px;
  --2011-chat-section-color: #dddddd;

  /* CHAT BOX */
  --2011-chat-box-bg: #000000;
  --2011-chat-box-border: 1px solid #444444;
  --2011-chat-box-radius: 4px;
  --2011-chat-box-padding: 8px;

  /* CHAT LINES */
  --2011-chat-lines-height: 300px;
  --2011-chat-lines-margin-bottom: 10px;
  --2011-chat-line-border: 1px solid rgba(255,255,255,0.05);
  --2011-chat-line-font-size: 12px;
  --2011-chat-line-padding: 2px 0;

  /* SUGGESTED CHANNELS (2011) */
  --2011-sc-item-padding: 6px 0;
  --2011-sc-thumb-radius: 3px;
  --2011-sc-meta-font-size: 12px;
  --2011-sc-meta-color: #aaaaaa;

  /* VIDEO ARCHIVE (2011) */
  --2011-va-item-padding: 10px 0;
  --2011-va-item-border-bottom: 1px solid rgba(255,255,255,0.1);
  --2011-va-thumb-radius: 3px;
  --2011-va-title-margin-bottom: 4px;
  --2011-va-meta-font-size: 12px;
  --2011-va-meta-color: #000000;

  /* SPLIT PILL BUTTONS (2011) */
  --2011-pill-margin-right: 10px;
  --2011-pill-divider: 1px solid rgba(0,0,0,0.4);

  /* SHARE PILL (2011) */
  --2011-share-pill-bg: linear-gradient(#c5d0db, #8a9199);
  --2011-share-pill-text: #334d66;
  --2011-share-pill-padding-y: 3px;
  --2011-share-pill-padding-x: 4px;
  --2011-share-pill-radius: 7px;
  --2011-share-pill-border: 1px solid rgba(0,0,0,0.4);

  /* CHAT INPUT PILL */
  --2011-chat-pill-bg: #222222;
  --2011-chat-pill-border: 1px solid #555555;
  --2011-chat-pill-radius: 9999px;
  --2011-chat-pill-height: 32px;

  --2011-chat-input-padding: 6px 10px;
  --2011-chat-input-color: #eeeeee;
  --2011-chat-input-font-size: 13px;

  --2011-chat-button-padding: 0 14px;
  --2011-chat-button-bg: #333333;
  --2011-chat-button-bg-hover: #444444;
  --2011-chat-button-color: #eeeeee;
  --2011-chat-button-divider: 1px solid #555555;

  /* CHAT ICON BUTTONS */
  --2011-chat-icon-bg: #333333;
  --2011-chat-icon-bg-hover: #444444;
  --2011-chat-icon-color: #eeeeee;
  --2011-chat-icon-border: 1px solid #555555;

  /* 2011 TAB BAR ACTIVE */
  --2011-tab-active-bg: linear-gradient(#ffffff, #e6e6e6);
  --2011-tab-active-text-color: #000000;
  --2011-tab-active-radius-top: 5px;
  --2011-tab-active-radius-bottom: 0;
  --2011-tab-active-offset-y: 1px;
  --2011-tab-content-offset-y: -1px;

  /* 2011 TAB BAR DARK */
  --2011-tabbar-bg-dark: #1a1a1a;
  --2011-tab-bg-top-dark: #333333;
  --2011-tab-bg-bottom-dark: #222222;
  --2011-tab-text-color-dark: #cccccc;
  --2011-tab-active-bg-dark: #444444;
  --2011-tab-active-text-color-dark: #ffffff;
  --2011-tab-active-border-dark: 1px solid #666666;

  /* 2011 FOOTER LINK COLORS */
  --2011-footer-link-blue: #4a90e2;
  --2011-footer-link-blue-hover: #6ab0ff;
  --2011-footer-link-blue-dark: #8ab8ff;
  --2011-footer-link-blue-hover-dark: #b0d0ff;

  /* 2011 SUGGESTED CHANNELS */
  --2011-suggested-channels-margin-top: 20px;

  /* 2011 VIDEO ARCHIVE META */
  --2011-va-meta-font-size: 12px;
  --2011-va-meta-color: #aaaaaa;

  /* 2011 MORE VIDEOS TEXT SHADOW */
  --2011-more-videos-text-shadow: 0 1px 0 rgba(255,255,255,0.7),
                                  0 -1px 0 rgba(0,0,0,0.4);
  --2011-more-videos-text-shadow-hover: 0 1px 0 rgba(255,255,255,0.85),
                                        0 -1px 0 rgba(0,0,0,0.5);
  --2011-more-videos-text-shadow-dark: 0 1px 0 rgba(255,255,255,0.25),
                                       0 -1px 0 rgba(0,0,0,0.8);
  --2011-more-videos-text-shadow-hover-dark: 0 1px 0 rgba(255,255,255,0.35),
                                             0 -1px 0 rgba(0,0,0,0.9);

  /* 2011 INFO BOX */
  --2011-info-box-bg: #ffffff;
  --2011-info-box-border: 1px solid #c8c8c8;
  --2011-info-box-radius: 4px;
  --2011-info-box-padding: 10px;

  /* 2011 VIDEO PLACEHOLDER */
  --2011-video-ph-bg: #000000;
  --2011-video-ph-border: 1px solid #333333;
  --2011-video-ph-radius: 4px;
  --2011-video-ph-color: #cccccc;
  --2011-video-ph-margin-bottom: 15px;
}


/* ============================================================
   [02.2] 2011 VARIABLE MAPPING
   ============================================================ */

body.jtv2011,
body.jtv2011-dark {

  /* MAIN WRAPPER */
  --main-wrapper-display: var(--2011-main-wrapper-display);
  --main-wrapper-width: var(--2011-main-wrapper-width);
  --main-wrapper-max-width: var(--2011-main-wrapper-max-width);
  --main-wrapper-margin: var(--2011-main-wrapper-margin);
  --main-wrapper-overflow: var(--2011-main-wrapper-overflow);

  /* CONTENT CONTAINER */
  --content-container-background: var(--2011-content-bg);
  --content-container-border: var(--2011-content-border);
  --content-container-border-radius: var(--2011-content-radius);
  --content-container-padding: var(--2011-content-padding);
  --content-container-box-shadow: var(--2011-content-shadow);

  /* COLUMNS */
  --left-column-float: var(--2011-left-column-float);
  --left-column-width: var(--2011-left-column-width);
  --left-column-box-sizing: var(--2011-left-column-box-sizing);

  --right-column-float: var(--2011-right-column-float);
  --right-column-width: var(--2011-right-column-width);
  --right-column-margin-left: var(--2011-right-column-margin-left);
  --right-column-box-sizing: var(--2011-right-column-box-sizing);

  /* NAVBAR */
  --navbar-bg: var(--2011-navbar-bg);
  --navbar-text-color: var(--2011-navbar-text-color);
  --navbar-font-family: var(--2011-navbar-font-family);
  --navbar-padding: var(--2011-navbar-padding);
  --navbar-position: var(--2011-navbar-position);
  --navbar-top: var(--2011-navbar-top);
  --navbar-z: var(--2011-navbar-z);
  --navbar-height: var(--2011-navbar-height);
  --navbar-border-bottom: var(--2011-navbar-border-bottom);
  --navbar-shadow: var(--2011-navbar-shadow);

  /* CHANNEL TITLE */
  --channel-title-font-family: var(--2011-channel-title-font-family);
  --channel-title-font-size: var(--2011-channel-title-font-size);
  --channel-title-font-weight: var(--2011-channel-title-font-weight);
  --channel-title-color: var(--2011-channel-title-color);
  --channel-title-margin: var(--2011-channel-title-margin);
  --channel-title-padding: var(--2011-channel-title-padding);
  --channel-title-text-shadow: var(--2011-channel-title-text-shadow);

  /* CHANNEL INFO */
  --channel-info-left-color: var(--2011-channel-info-left-color);
  --channel-info-right-color: var(--2011-channel-info-right-color);

  /* DESCRIPTION */
  --channel-description-color: var(--2011-channel-description-color);

  /* SUGGESTED CHANNELS */
  --sc-thumb-bg: var(--2011-sc-thumb-bg);
  --sc-info-color: var(--2011-sc-info-color);
  --sc-meta-color: var(--2011-sc-meta-color);

  /* VIDEO ARCHIVE */
  --va-thumb-bg: var(--2011-va-thumb-bg);
  --va-title-color: var(--2011-va-title-color);
  --va-meta-color: var(--2011-va-meta-color);
  --va-item-border-bottom: var(--2011-va-item-border-bottom);

  /* MORE VIDEOS BUTTON */
  --more-videos-bg: var(--2011-more-videos-bg);
  --more-videos-bg-hover: var(--2011-more-videos-bg-hover);
  --more-videos-border: var(--2011-more-videos-border);
  --more-videos-color: var(--2011-more-videos-color);

  /* FOOTER */
  --footer-z: var(--2011-footer-z);

  /* TAB BAR */
  --tabbar-bg: var(--2011-tabbar-bg);
  --tabbar-border-bottom: var(--2011-tabbar-border-bottom);
  --tabbar-height: var(--2011-tabbar-height);

  --tab-font-family: var(--2011-tab-font-family);
  --tab-font-size: var(--2011-tab-font-size);
  --tab-font-weight: var(--2011-tab-font-weight);
  --tab-color: var(--2011-tab-color);
  --tab-color-active: var(--2011-tab-color-active);

  --tab-padding: var(--2011-tab-padding);
  --tab-border-right: var(--2011-tab-border-right);

  --tab-active-bg: var(--2011-tab-active-bg);
  --tab-active-border: var(--2011-tab-active-border);
  --tab-active-border-bottom: none;
}


/* ============================================================
   [02.3] 2011 BASE LAYOUT
   ============================================================ */

body.jtv2011 #main.page_wrapper,
body.jtv2011-dark #main.page_wrapper {
  display: var(--main-wrapper-display);
  width: var(--main-wrapper-width);
  max-width: var(--main-wrapper-max-width);
  margin: var(--main-wrapper-margin);
  overflow: var(--main-wrapper-overflow);
}

body.jtv2011 #content_container,
body.jtv2011-dark #content_container {
  background: var(--content-container-background);
  border: var(--content-container-border);
  border-radius: var(--content-container-border-radius);
  padding: var(--content-container-padding);
  box-shadow: var(--content-container-box-shadow);
  margin-top: var(--2011-content-margin-top);
  margin-bottom: var(--2011-content-margin-bottom);
  margin-left: var(--2011-content-margin-left);
  margin-right: var(--2011-content-margin-right);
  position: var(--2011-content-position);
  z-index: var(--2011-content-z);
  display: var(--2011-content-display);
}

body.jtv2011 #left_column,
body.jtv2011-dark #left_column {
  float: var(--left-column-float);
  width: var(--left-column-width);
  box-sizing: var(--left-column-box-sizing);
}

body.jtv2011 #right_column,
body.jtv2011-dark #right_column {
  float: var(--right-column-float);
  width: var(--right-column-width);
  margin-left: var(--right-column-margin-left);
  box-sizing: var(--right-column-box-sizing);
}


/* ============================================================
   [02.4] 2011 NAVBAR
   ============================================================ */

body.jtv2011 #top_navbar,
body.jtv2011-dark #top_navbar {
  background: var(--navbar-bg);
  color: var(--navbar-text-color);
  font-family: var(--navbar-font-family);
  padding: var(--navbar-padding);
  position: var(--navbar-position);
  top: var(--navbar-top);
  z-index: var(--navbar-z);
  height: var(--navbar-height);
  border-bottom: var(--navbar-border-bottom);
  box-shadow: var(--navbar-shadow);
}

body.jtv2011 #top_navbar .wrapper,
body.jtv2011-dark #top_navbar .wrapper {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* ------------------------------------------------------------
   [02.4.1] Navbar Links
   ------------------------------------------------------------ */

body.jtv2011 #top_navbar a,
body.jtv2011-dark #top_navbar a {
  font-size: var(--2011-nav-font-size);
  font-weight: var(--2011-nav-font-weight);
  color: var(--navbar-text-color);
  text-decoration: none;
}

body.jtv2011 #top_navbar a:hover,
body.jtv2011-dark #top_navbar a:hover {
  color: var(--2011-nav-link-hover-color);
}

/* ------------------------------------------------------------
   [02.4.2] Navbar Pills
   ------------------------------------------------------------ */

body.jtv2011 #top_navbar .nav-pill,
body.jtv2011-dark #top_navbar .nav-pill {
  background: var(--2011-nav-pill-bg);
  color: var(--2011-nav-pill-text-color);
  padding: var(--2011-nav-pill-padding);
  border-radius: var(--2011-nav-pill-radius);
  text-decoration: none;
  margin-left: 10px;
}

body.jtv2011 #top_navbar .nav-pill:hover,
body.jtv2011-dark #top_navbar .nav-pill:hover {
  background: var(--2011-nav-pill-bg-hover);
}


/* ------------------------------------------------------------
   [02.4.3] Navbar Search
   ------------------------------------------------------------ */

body.jtv2011 #top_navbar .search-box,
body.jtv2011-dark #top_navbar .search-box {
  display: flex;
  align-items: center;
}

body.jtv2011 #top_navbar .search-box input,
body.jtv2011-dark #top_navbar .search-box input {
  background: var(--2011-nav-search-bg);
  border: var(--2011-nav-search-border);
  border-radius: var(--2011-nav-search-radius);
  padding: var(--2011-nav-search-padding);
  outline: none;
}

body.jtv2011 #top_navbar .search-box button,
body.jtv2011-dark #top_navbar .search-box button {
  background: var(--2011-nav-search-button-bg);
  color: var(--2011-nav-search-button-color);
  border: none;
  border-radius: var(--2011-nav-search-button-radius);
  padding: var(--2011-nav-search-padding);
  cursor: pointer;
}

body.jtv2011 #top_navbar .search-box button:hover,
body.jtv2011-dark #top_navbar .search-box button:hover {
  background: var(--2011-nav-search-button-bg-hover);
}


/* ============================================================
   [02.5] 2011 CHANNEL TITLE
   ============================================================ */

body.jtv2011 #channel_title,
body.jtv2011-dark #channel_title {
  font-family: var(--channel-title-font-family);
  font-size: var(--channel-title-font-size);
  font-weight: var(--channel-title-font-weight);
  color: var(--channel-title-color);
  margin: var(--channel-title-margin);
  padding: var(--channel-title-padding);
  text-shadow: var(--channel-title-text-shadow);
}


/* ============================================================
   [02.6] 2011 CHANNEL INFO
   ============================================================ */

body.jtv2011 #channel_info_left,
body.jtv2011-dark #channel_info_left {
  display: var(--2011-channel-info-left-display);
  align-items: var(--2011-channel-info-left-align-items);
  gap: var(--2011-channel-info-left-gap);
  font-family: var(--2011-channel-info-left-font-family);
  font-size: var(--2011-channel-info-left-font-size);
  font-weight: var(--2011-channel-info-left-font-weight);
  color: var(--channel-info-left-color);
  margin: var(--2011-channel-info-left-margin);
  padding: var(--2011-channel-info-left-padding);
}

body.jtv2011 #channel_info_right,
body.jtv2011-dark #channel_info_right {
  display: var(--2011-channel-info-right-display);
  align-items: var(--2011-channel-info-right-align-items);
  gap: var(--2011-channel-info-right-gap);
  font-family: var(--2011-channel-info-right-font-family);
  font-size: var(--2011-channel-info-right-font-size);
  font-weight: var(--2011-channel-info-right-font-weight);
  color: var(--channel-info-right-color);
  margin: var(--2011-channel-info-right-margin);
  padding: var(--2011-channel-info-right-padding);
}


/* ============================================================
   [02.7] 2011 CHANNEL DESCRIPTION
   ============================================================ */

body.jtv2011 #channel_description,
body.jtv2011-dark #channel_description {
  font-family: var(--2011-channel-description-font-family);
  font-size: var(--2011-channel-description-font-size);
  font-weight: var(--2011-channel-description-font-weight);
  color: var(--channel-description-color);
  line-height: var(--2011-channel-description-line-height);
  margin: var(--2011-channel-description-margin);
  padding: var(--2011-channel-description-padding);
  max-width: var(--2011-channel-description-max-width);
  text-shadow: var(--2011-channel-description-text-shadow);
}

/* ============================================================
   [02.8] 2011 FACEBOOK BUTTON
   ============================================================ */

body.jtv2011 #facebook_button,
body.jtv2011-dark #facebook_button {
  display: var(--2011-facebook-display);
  align-items: var(--2011-facebook-align-items);
  gap: var(--2011-facebook-gap);
  font-family: var(--2011-facebook-font-family);
  font-size: var(--2011-facebook-font-size);
  font-weight: var(--2011-facebook-font-weight);
  color: var(--2011-facebook-color);
  background: var(--2011-facebook-bg);
  border: var(--2011-facebook-border);
  border-radius: var(--2011-facebook-radius);
  padding: var(--2011-facebook-padding);
  margin: var(--2011-facebook-margin);
}

body.jtv2011 #facebook_button svg,
body.jtv2011-dark #facebook_button svg {
  width: var(--2011-facebook-icon-size);
  height: var(--2011-facebook-icon-size);
  fill: var(--2011-facebook-icon-color);
}


/* ============================================================
   [02.9] 2011 SPLIT PILL BUTTONS
   ============================================================ */

body.jtv2011 .pill,
body.jtv2011-dark .pill {
  font-family: var(--2011-pill-font-family);
  font-size: var(--2011-pill-font-size);
  font-weight: var(--2011-pill-font-weight);
  padding: var(--2011-pill-padding-y) var(--2011-pill-padding-x);
  border-radius: var(--2011-pill-radius);
  border: var(--2011-pill-border);
  margin-right: var(--2011-pill-margin-right);
}

body.jtv2011 .pill.gray,
body.jtv2011-dark .pill.gray {
  background: var(--2011-pill-gray-bg);
  color: var(--2011-pill-gray-text);
}

body.jtv2011-dark .pill.gray {
  background: var(--2011-pill-gray-bg-dark);
  color: var(--2011-pill-gray-text-dark);
}

body.jtv2011 .pill.blue,
body.jtv2011-dark .pill.blue {
  background: var(--2011-pill-blue-bg);
  color: var(--2011-pill-blue-text);
}

body.jtv2011 .pill.right,
body.jtv2011-dark .pill.right {
  background: var(--2011-pill-right-bg);
  color: var(--2011-pill-right-text);
}

body.jtv2011 .pill + .pill,
body.jtv2011-dark .pill + .pill {
  border-left: var(--2011-pill-divider);
}


/* ============================================================
   [02.10] 2011 SUGGESTED CHANNELS
   ============================================================ */

body.jtv2011 #suggested_channels,
body.jtv2011-dark #suggested_channels {
  margin-top: var(--2011-suggested-channels-margin-top);
}

body.jtv2011 #suggested_channels .sc-item,
body.jtv2011-dark #suggested_channels .sc-item {
  display: var(--2011-sc-item-display);
  gap: var(--2011-sc-item-gap);
  padding: var(--2011-sc-item-padding);
}

body.jtv2011 #suggested_channels .sc-thumb,
body.jtv2011-dark #suggested_channels .sc-thumb {
  width: var(--2011-sc-thumb-width);
  height: var(--2011-sc-thumb-height);
  border-radius: var(--2011-sc-thumb-radius);
  background: var(--sc-thumb-bg);
}

body.jtv2011 #suggested_channels .sc-info,
body.jtv2011-dark #suggested_channels .sc-info {
  font-family: var(--2011-sc-info-font-family);
  font-size: var(--2011-sc-info-font-size);
  color: var(--sc-info-color);
  line-height: var(--2011-sc-info-line-height);
}

body.jtv2011 #suggested_channels .sc-meta,
body.jtv2011-dark #suggested_channels .sc-meta {
  font-size: var(--2011-sc-meta-font-size);
  color: var(--sc-meta-color);
}


/* ============================================================
   [02.11] 2011 VIDEO ARCHIVE
   ============================================================ */

body.jtv2011 #video_archive .va-item,
body.jtv2011-dark #video_archive .va-item {
  display: var(--2011-va-item-display);
  gap: var(--2011-va-item-gap);
  padding: var(--2011-va-item-padding);
  border-bottom: var(--va-item-border-bottom);
}

body.jtv2011 #video_archive .va-thumb,
body.jtv2011-dark #video_archive .va-thumb {
  width: var(--2011-va-thumb-width);
  height: var(--2011-va-thumb-height);
  border-radius: var(--2011-va-thumb-radius);
  background: var(--va-thumb-bg);
}

body.jtv2011 #video_archive .va-title,
body.jtv2011-dark #video_archive .va-title {
  font-family: var(--2011-va-title-font-family);
  font-size: var(--2011-va-title-font-size);
  font-weight: var(--2011-va-title-font-weight);
  color: var(--va-title-color);
  line-height: var(--2011-va-title-line-height);
}

body.jtv2011 #video_archive .va-meta,
body.jtv2011-dark #video_archive .va-meta {
  font-family: var(--2011-va-meta-font-family);
  font-size: var(--2011-va-meta-font-size);
  color: var(--va-meta-color);
  line-height: var(--2011-va-meta-line-height);
}

/* ============================================================
   [02.12] 2011 MORE VIDEOS BUTTON
   ============================================================ */

body.jtv2011 #more_videos_button,
body.jtv2011-dark #more_videos_button {
  display: var(--2011-more-videos-display);
  width: var(--2011-more-videos-width);
  padding: var(--2011-more-videos-padding);
  margin: var(--2011-more-videos-margin);
  background: var(--more-videos-bg);
  border: var(--more-videos-border);
  border-radius: var(--2011-more-videos-radius);
  font-family: var(--2011-more-videos-font-family);
  font-size: var(--2011-more-videos-font-size);
  font-weight: var(--2011-more-videos-font-weight);
  color: var(--more-videos-color);
  text-align: center;
  cursor: pointer;
}

body.jtv2011 #more_videos_button:hover,
body.jtv2011-dark #more_videos_button:hover {
  background: var(--more-videos-bg-hover);
}


/* ============================================================
   [02.13] 2011 TAB BAR
   ============================================================ */

body.jtv2011 #tab_bar,
body.jtv2011-dark #tab_bar {
  background: var(--tabbar-bg);
  border-bottom: var(--tabbar-border-bottom);
  height: var(--tabbar-height);
  display: flex;
  align-items: center;
}

body.jtv2011 #tab_bar .tab,
body.jtv2011-dark #tab_bar .tab {
  font-family: var(--tab-font-family);
  font-size: var(--tab-font-size);
  font-weight: var(--tab-font-weight);
  color: var(--tab-color);
  padding: var(--tab-padding);
  border-right: var(--tab-border-right);
  cursor: pointer;
}

body.jtv2011 #tab_bar .tab:hover,
body.jtv2011-dark #tab_bar .tab:hover {
  color: var(--tab-color-active);
}

body.jtv2011 #tab_bar .tab.active,
body.jtv2011-dark #tab_bar .tab.active {
  background: var(--tab-active-bg);
  border: var(--tab-active-border);
  border-bottom: var(--tab-active-border-bottom);
}


/* ============================================================
   [02.14] 2011 FOOTER
   ============================================================ */

body.jtv2011 #footer,
body.jtv2011-dark #footer {
  background: var(--footer-bg);
  color: var(--footer-text-color);
  padding: var(--footer-padding);
  font-family: var(--footer-font-family);
  font-size: var(--footer-font-size);
  position: relative;
  z-index: var(--footer-z);
}

body.jtv2011 #footer a,
body.jtv2011-dark #footer a {
  color: var(--footer-link-color);
  text-decoration: none;
}

body.jtv2011 #footer a:hover,
body.jtv2011-dark #footer a:hover {
  color: var(--footer-link-hover-color);
}


/* ------------------------------------------------------------
   [02.14.1] Footer Pills
   ------------------------------------------------------------ */

body.jtv2011 #footer .footer-pill,
body.jtv2011-dark #footer .footer-pill {
  background: var(--footer-pill-bg);
  border: var(--footer-pill-border);
  border-radius: var(--footer-pill-radius);
  padding: var(--footer-pill-padding);
  box-shadow: var(--footer-pill-shadow);
  display: inline-flex;
  align-items: center;
  gap: var(--footer-pill-gap);
}

/* ============================================================
   [02.15] 2011 INFO BOX
   ============================================================ */

body.jtv2011 #info_box,
body.jtv2011-dark #info_box {
  background: var(--info-box-bg);
  border: var(--info-box-border);
  border-radius: var(--info-box-radius);
  padding: var(--info-box-padding);
}


/* ============================================================
   [02.16] 2011 VIDEO PLACEHOLDER
   ============================================================ */

body.jtv2011 #video_placeholder,
body.jtv2011-dark #video_placeholder {
  background: var(--video-ph-bg);
  border: var(--video-ph-border);
  border-radius: var(--video-ph-radius);
  color: var(--video-ph-color);
  margin-bottom: var(--video-ph-margin-bottom);
  padding: 20px;
  text-align: center;
}


/* ============================================================
   [02.17] 2011 CHAT SECTION
   ============================================================ */

body.jtv2011 #chat_section,
body.jtv2011-dark #chat_section {
  background: var(--chat-section-bg);
  border: var(--chat-section-border);
  border-radius: var(--chat-section-radius);
  padding: var(--chat-section-padding);
  color: var(--chat-section-color);
}


/* ------------------------------------------------------------
   [02.17.1] Chat Lines
   ------------------------------------------------------------ */

body.jtv2011 #chat_lines,
body.jtv2011-dark #chat_lines {
  height: var(--chat-lines-height);
  margin-bottom: var(--chat-lines-margin-bottom);
  overflow-y: auto;
}

body.jtv2011 #chat_lines .chat_line,
body.jtv2011-dark #chat_lines .chat_line {
  border-bottom: var(--chat-line-border);
  font-size: var(--chat-line-font-size);
  padding: var(--chat-line-padding);
}


/* ------------------------------------------------------------
   [02.17.2] Chat Input Pill
   ------------------------------------------------------------ */

body.jtv2011 #chat_input_pill,
body.jtv2011-dark #chat_input_pill {
  background: var(--chat-pill-bg);
  border: var(--chat-pill-border);
  border-radius: var(--chat-pill-radius);
  height: var(--chat-pill-height);
  display: flex;
  align-items: center;
  overflow: hidden;
}

body.jtv2011 #chat_input_pill input,
body.jtv2011-dark #chat_input_pill input {
  padding: var(--chat-input-padding);
  color: var(--chat-input-color);
  font-size: var(--chat-input-font-size);
  background: transparent;
  border: none;
  flex: 1;
  outline: none;
}

body.jtv2011 #chat_input_pill button,
body.jtv2011-dark #chat_input_pill button {
  padding: var(--chat-button-padding);
  background: var(--chat-button-bg);
  color: var(--chat-button-color);
  border: none;
  cursor: pointer;
}

body.jtv2011 #chat_input_pill button:hover,
body.jtv2011-dark #chat_input_pill button:hover {
  background: var(--chat-button-bg-hover);
}

body.jtv2011 #chat_input_pill .divider,
body.jtv2011-dark #chat_input_pill .divider {
  border-left: var(--chat-button-divider);
  height: 60%;
}


/* ------------------------------------------------------------
   [02.17.3] Chat Icon Buttons
   ------------------------------------------------------------ */

body.jtv2011 .chat_icon_button,
body.jtv2011-dark .chat_icon_button {
  background: var(--chat-icon-bg);
  border: var(--chat-icon-border);
  color: var(--chat-icon-color);
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
}

body.jtv2011 .chat_icon_button:hover,
body.jtv2011-dark .chat_icon_button:hover {
  background: var(--chat-icon-bg-hover);
}

/* ============================================================
   [02.18] 2011 CHAT ICON BUTTONS
   ============================================================ */

body.jtv2011 .chat_icon_button,
body.jtv2011-dark .chat_icon_button {
  background: var(--chat-icon-bg);
  border: var(--chat-icon-border);
  color: var(--chat-icon-color);
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
}

body.jtv2011 .chat_icon_button:hover,
body.jtv2011-dark .chat_icon_button:hover {
  background: var(--chat-icon-bg-hover);
}


/* ============================================================
   [02.19] 2011 DARK MODE OVERRIDES
   ============================================================ */

body.jtv2011-dark #channel_title {
  font-size: var(--2011-channel-title-font-size-dark);
  font-weight: var(--2011-channel-title-font-weight-dark);
  color: var(--2011-channel-title-color-dark);
  text-shadow: var(--2011-channel-title-text-shadow-dark);
}

body.jtv2011-dark #channel_info_left {
  color: var(--2011-channel-info-left-color-dark);
}

body.jtv2011-dark #channel_description {
  color: var(--2011-channel-description-color-dark);
}

body.jtv2011-dark #suggested_channels .sc_info {
  color: var(--2011-sc-info-color-dark);
}

body.jtv2011-dark #video_archive .va_title {
  color: var(--2011-va-title-color-dark);
}

body.jtv2011-dark #video_archive .va_meta {
  color: var(--2011-va-meta-color-dark);
}

body.jtv2011-dark #more_videos_button {
  text-shadow: var(--2011-more-videos-text-shadow-dark);
  box-shadow: var(--2011-more-videos-box-shadow-dark);
}

body.jtv2011-dark #tab_bar {
  background: var(--2011-tabbar-bg-dark);
}

body.jtv2011-dark #tab_bar .tab {
  background: linear-gradient(var(--2011-tab-bg-top-dark), var(--2011-tab-bg-bottom-dark));
  color: var(--2011-tab-text-color-dark);
}

body.jtv2011-dark #tab_bar .tab.active {
  background: var(--2011-tab-active-bg-dark);
  color: var(--2011-tab-active-text-color-dark);
  border: var(--2011-tab-active-border-dark);
}

body.jtv2011-dark #footer a {
  color: var(--2011-footer-link-blue-dark);
}

body.jtv2011-dark #footer a:hover {
  color: var(--2011-footer-link-blue-hover-dark);
}


/* ============================================================
   [03.0] JTV 2012 THEME
   ============================================================ */

/*  
   NOTE: From this point forward, your custom rules apply:

   • Option 2 — 2012 Buttons group moved to the TOP of 03.5  
   • CT‑1 — 2012 Channel Title blocks kept in original order  
   • B1 — merge only literal duplicates  
   • No selector changes  
   • No declaration changes  
   • No cascade changes  
*/

/* ============================================================
   [03.1] 2012 VARIABLE DIRECTORY
   ============================================================ */

body.jtv2012,
body.jtv2012-dark {

  /* GLOBAL */
  --2012-font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2012-text-color: #000000;
  --2012-text-color-dark: #ffffff;

  /* BACKGROUND */
  --2012-background: #000 url('peacefuljay-channel_background_image.jpeg') no-repeat center top fixed;
  --2012-background-dark: #000 url('peacefuljay-channel_background_image.jpeg') no-repeat center top fixed;

  /* NAVBAR */
  --2012-navbar-bg: #1a1a1a;
  --2012-navbar-bg-dark: #000000;
  --2012-navbar-text-color: #ffffff;
  --2012-navbar-height: 120px;
  --2012-navbar-padding: 0 450px;
  --2012-navbar-shadow: 0 3px 6px rgba(0,0,0,0.35);

  /* CHANNEL TITLE */
  --2012-channel-title-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2012-channel-title-font-size: 20px;
  --2012-channel-title-font-weight: bold;
  --2012-channel-title-color: #ffffff;
  --2012-channel-title-margin: 0 0 10px 0;
  --2012-channel-title-padding: 0;
  --2012-channel-title-text-shadow: 0 2px 4px rgba(0,0,0,0.6);

  /* CHANNEL TITLE DARK */
  --2012-channel-title-font-size-dark: 24px;
  --2012-channel-title-font-weight-dark: bold;
  --2012-channel-title-color-dark: #ffffff;
  --2012-channel-title-text-shadow-dark: 0 2px 4px #FFFFFF80;

  /* FOLLOW BUTTON */
  --2012-follow-bg: linear-gradient(#589adb, #3d6b99);
  --2012-follow-text: #e0e7ef;
  --2012-follow-padding-y: 4px;
  --2012-follow-padding-x: 12px;
  --2012-follow-font-family: "Inter", Helvetica, Arial, sans-serif;
  --2012-follow-font-size: 12px;
  --2012-follow-font-weight: normal;
  --2012-follow-border-radius: 7px;
  --2012-follow-border: 1px solid #b5b5b5;
  --2012-follow-margin-right: 10px;
  --2012-follow-text-shadow: 0 2px 4px #FFFFFFB3;
  --2012-follow-bg-hover-dark: #7fa6cc;
  --2012-follow-bg-shadow-dark: 0 0 10px #b6cce2B3;

  /* SPLIT PILL BUTTONS */
  --2012-pill-font-family: "Inter Tight", Helvetica, Arial, sans-serif;
  --2012-pill-font-size: 12px;
  --2012-pill-font-weight: normal;
  --2012-pill-padding-y: 3px;
  --2012-pill-padding-x: 4px;
  --2012-pill-radius: 7px;
  --2012-pill-border: 1px solid rgba(0,0,0,0.4);
  --2012-pill-gray-bg: linear-gradient(#c5d0db, #8a9199);
  --2012-pill-gray-text: #334d66;
  --2012-pill-blue-bg: linear-gradient(#589adb, #3d6b99);
  --2012-pill-blue-text: #ffffff;
  --2012-pill-gap: 0;
  --2012-pill-right-bg: #3d6b99;
  --2012-pill-right-text: #e0e7ef;
  --2012-pill-gray-bg-dark: #666666;
  --2012-pill-gray-text-dark: #e0e7ef;

  /* SHARE BUTTON */
  --2012-share-bg: linear-gradient(#c5d0db, #8a9199);
  --2012-share-text: #334d66;
  --2012-share-padding-y: 3px;
  --2012-share-padding-x: 4px;
  --2012-share-radius: 7px;
  --2012-share-border: 1px solid rgba(0,0,0,0.4);

  /* CONTENT CONTAINER */
  --2012-content-bg: #ffffff;
  --2012-content-border: 1px solid #c8c8c8;
  --2012-content-radius: 6px;
  --2012-content-padding: 15px;
  --2012-content-shadow: 0 0 8px rgba(0,0,0,0.15);

  /* COLUMNS */
  --2012-left-column-width: 640px;
  --2012-right-column-width: 300px;
  --2012-right-column-margin-left: 15px;

  /* DESCRIPTION */
  --2012-description-font-family: "Inter Tight", Helvetica, Arial, sans-serif;
  --2012-description-font-size: 13px;
  --2012-description-font-weight: normal;
  --2012-description-color: #ffffff;
  --2012-description-line-height: 1.4;
  --2012-description-margin: 4px 0 10px 0;
  --2012-description-padding: 0;
  --2012-description-max-width: 600px;
  --2012-description-text-shadow: 0 1px 2px rgba(0,0,0,0.4);


  /* SUGGESTED CHANNELS */
  --2012-sc-title-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2012-sc-title-font-size: 14px;
  --2012-sc-title-font-weight: bold;
  --2012-sc-title-color: #ffffff;
  --2012-sc-title-margin: 10px 0 8px 0;

  --2012-sc-item-display: flex;
  --2012-sc-item-gap: 8px;
  --2012-sc-item-padding: 6px 0;

  --2012-sc-thumb-width: 100px;
  --2012-sc-thumb-height: 58px;
  --2012-sc-thumb-radius: 3px;
  --2012-sc-thumb-bg: #444444;

  --2012-sc-info-font-family: "Inter", Helvetica, Arial, sans-serif;
  --2012-sc-info-font-size: 12px;
  --2012-sc-info-color: #3d6b99;
  --2012-sc-info-line-height: 1.3;

  --2012-sc-meta-font-size: 12px;
  --2012-sc-meta-color: #aaaaaa;

  /* VIDEO ARCHIVE */
  --2012-va-item-display: flex;
  --2012-va-item-gap: 10px;
  --2012-va-item-padding: 10px 0;
  --2012-va-item-border-bottom: 1px solid rgba(255,255,255,0.1);

  --2012-va-thumb-width: 120px;
  --2012-va-thumb-height: 90px;
  --2012-va-thumb-radius: 3px;
  --2012-va-thumb-bg: #444444;

  --2012-va-title-font-family: "Inter Tight", Helvetica, Arial, sans-serif;
  --2012-va-title-font-size: 13px;
  --2012-va-title-font-weight: normal;
  --2012-va-title-color: #3d6b99;
  --2012-va-title-line-height: 1.3;

  --2012-va-meta-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2012-va-meta-font-size: 12px;
  --2012-va-meta-color: #000000;
  --2012-va-meta-line-height: 1.3;

  /* MORE VIDEOS BUTTON */
  --2012-more-videos-display: block;
  --2012-more-videos-width: 100%;
  --2012-more-videos-padding: 3px 0;
  --2012-more-videos-margin: 15px 0 0 0;
  --2012-more-videos-bg: linear-gradient(#c5d0db, #8a9199);
  --2012-more-videos-bg-hover: linear-gradient(#e0e6eb, #acb3b9);
  --2012-more-videos-border: 1px solid #000;
  --2012-more-videos-radius: 4px;
  --2012-more-videos-font-family: "Inter", Helvetica, Arial, sans-serif;
  --2012-more-videos-font-size: 12px;
  --2012-more-videos-font-weight: normal;
  --2012-more-videos-color: #334d66;

  /* TAB BAR */
  --2012-tabbar-bg: #f0f0f0;
  --2012-tabbar-border-bottom: 1px solid #4a90e2;
  --2012-tabbar-height: 32px;

  --2012-tab-font-family: "Inter", Helvetica, Arial, sans-serif;
  --2012-tab-font-size: 12px;
  --2012-tab-font-weight: normal;
  --2012-tab-color: #000000;
  --2012-tab-color-active: #000000;

  --2012-tab-padding: 0 14px;
  --2012-tab-border-right: 1px solid #2f2f2f;

  --2012-tab-active-underline: 3px solid #4a90e2;
  --2012-tab-active-border: 1px solid #4a90e2;
  --2012-tab-active-border-radius: 5px;

  /* FOOTER */
  --2012-footer-bg: #2f2f2f;
  --2012-footer-text-color: #cccccc;
  --2012-footer-link-color: #b38bff;
  --2012-footer-link-hover-color: #d3b3ff;

  --2012-footer-padding: 0;
  --2012-footer-font-family: "Inter", Helvetica, Arial, sans-serif;
  --2012-footer-font-size: 12px;

  /* FOOTER PILL */
  --2012-footer-pill-bg: #3a3a3a50;
  --2012-footer-pill-border: 1px solid #1f1f1f;
  --2012-footer-pill-radius: 16px;
  --2012-footer-pill-padding: 6px 12px;
  --2012-footer-pill-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
  --2012-footer-pill-gap: 10px;
}

/* ============================================================
   [03.2] 2012 VARIABLE MAPPING
   ============================================================ */

body.jtv2012,
body.jtv2012-dark {

  /* GLOBAL */
  --text-color: var(--2012-text-color);
  --text-color-dark: var(--2012-text-color-dark);

  /* BACKGROUND */
  --background: var(--2012-background);

  /* NAVBAR */
  --navbar-bg: var(--2012-navbar-bg);
  --navbar-bg-dark: var(--2012-navbar-bg-dark);
  --navbar-text-color: var(--2012-navbar-text-color);
  --navbar-height: var(--2012-navbar-height);
  --navbar-padding: var(--2012-navbar-padding);
  --navbar-shadow: var(--2012-navbar-shadow);

  /* CHANNEL TITLE */
  --channel-title-font-family: var(--2012-channel-title-font-family);
  --channel-title-font-size: var(--2012-channel-title-font-size);
  --channel-title-font-weight: var(--2012-channel-title-font-weight);
  --channel-title-color: var(--2012-channel-title-color);
  --channel-title-margin: var(--2012-channel-title-margin);
  --channel-title-padding: var(--2012-channel-title-padding);
  --channel-title-text-shadow: var(--2012-channel-title-text-shadow);

  /* FOLLOW BUTTON */
  --follow-bg: var(--2012-follow-bg);
  --follow-text: var(--2012-follow-text);
  --follow-padding-y: var(--2012-follow-padding-y);
  --follow-padding-x: var(--2012-follow-padding-x);
  --follow-font-family: var(--2012-follow-font-family);
  --follow-font-size: var(--2012-follow-font-size);
  --follow-font-weight: var(--2012-follow-font-weight);
  --follow-border-radius: var(--2012-follow-border-radius);
  --follow-border: var(--2012-follow-border);
  --follow-margin-right: var(--2012-follow-margin-right);
  --follow-text-shadow: var(--2012-follow-text-shadow);

  /* SPLIT PILL BUTTONS */
  --pill-font-family: var(--2012-pill-font-family);
  --pill-font-size: var(--2012-pill-font-size);
  --pill-font-weight: var(--2012-pill-font-weight);
  --pill-padding-y: var(--2012-pill-padding-y);
  --pill-padding-x: var(--2012-pill-padding-x);
  --pill-radius: var(--2012-pill-radius);
  --pill-border: var(--2012-pill-border);
  --pill-gray-bg: var(--2012-pill-gray-bg);
  --pill-gray-text: var(--2012-pill-gray-text);
  --pill-blue-bg: var(--2012-pill-blue-bg);
  --pill-blue-text: var(--2012-pill-blue-text);
  --pill-gap: var(--2012-pill-gap);
  --pill-right-bg: var(--2012-pill-right-bg);
  --pill-right-text: var(--2012-pill-right-text);

  /* SHARE BUTTON */
  --share-bg: var(--2012-share-bg);
  --share-text: var(--2012-share-text);
  --share-padding-y: var(--2012-share-padding-y);
  --share-padding-x: var(--2012-share-padding-x);
  --share-radius: var(--2012-share-radius);
  --share-border: var(--2012-share-border);

  /* CONTENT CONTAINER */
  --content-container-background: var(--2012-content-bg);
  --content-container-border: var(--2012-content-border);
  --content-container-border-radius: var(--2012-content-radius);
  --content-container-padding: var(--2012-content-padding);
  --content-container-box-shadow: var(--2012-content-shadow);

  /* COLUMNS */
  --left-column-width: var(--2012-left-column-width);
  --right-column-width: var(--2012-right-column-width);
  --right-column-margin-left: var(--2012-right-column-margin-left);

  /* DESCRIPTION */
  --channel-description-font-family: var(--2012-description-font-family);
  --channel-description-font-size: var(--2012-description-font-size);
  --channel-description-font-weight: var(--2012-description-font-weight);
  --channel-description-color: var(--2012-description-color);
  --channel-description-line-height: var(--2012-description-line-height);
  --channel-description-margin: var(--2012-description-margin);
  --channel-description-padding: var(--2012-description-padding);
  --channel-description-max-width: var(--2012-description-max-width);
  --channel-description-text-shadow: var(--2012-description-text-shadow);
}

/* ============================================================
   [03.3] 2012 BASE LAYOUT
   ============================================================ */

body.jtv2012 #main.page_wrapper,
body.jtv2012-dark #main.page_wrapper {
  display: block;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 40px auto;
  overflow: auto;
}

body.jtv2012 #content_container,
body.jtv2012-dark #content_container {
  background: var(--content-container-background);
  border: var(--content-container-border);
  border-radius: var(--content-container-border-radius);
  padding: var(--content-container-padding);
  box-shadow: var(--content-container-box-shadow);
  margin-top: 0;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 10;
  display: block;
}

body.jtv2012 #left_column,
body.jtv2012-dark #left_column {
  float: left;
  width: var(--left-column-width);
  box-sizing: border-box;
}

body.jtv2012 #right_column,
body.jtv2012-dark #right_column {
  float: left;
  width: var(--right-column-width);
  margin-left: var(--right-column-margin-left);
  box-sizing: border-box;
}


/* ============================================================
   [03.4] 2012 NAVBAR
   ============================================================ */

body.jtv2012 #top_navbar,
body.jtv2012-dark #top_navbar {
  background: var(--navbar-bg);
  color: var(--navbar-text-color);
  font-family: var(--2012-font-family);
  padding: var(--navbar-padding);
  position: relative;
  top: 0;
  z-index: 9;
  height: var(--navbar-height);
  box-shadow: var(--navbar-shadow);
}

body.jtv2012 #top_navbar .wrapper,
body.jtv2012-dark #top_navbar .wrapper {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* ------------------------------------------------------------
   [03.4.1] Navbar Links
   ------------------------------------------------------------ */

body.jtv2012 #top_navbar a,
body.jtv2012-dark #top_navbar a {
  font-size: 13px;
  font-weight: 500;
  color: var(--navbar-text-color);
  text-decoration: none;
}

body.jtv2012 #top_navbar a:hover,
body.jtv2012-dark #top_navbar a:hover {
  color: #ffffff;
}


/* ------------------------------------------------------------
   [03.4.2] Navbar Search
   ------------------------------------------------------------ */

body.jtv2012 #top_navbar .search-box,
body.jtv2012-dark #top_navbar .search-box {
  display: flex;
  align-items: center;
}

body.jtv2012 #top_navbar .search-box input,
body.jtv2012-dark #top_navbar .search-box input {
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 20px 0 0 20px;
  padding: 6px 12px;
  outline: none;
}

body.jtv2012 #top_navbar .search-box button,
body.jtv2012-dark #top_navbar .search-box button {
  background: #e0e0e0;
  color: #333333;
  border: none;
  border-radius: 0 20px 20px 0;
  padding: 6px 12px;
  cursor: pointer;
}

body.jtv2012 #top_navbar .search-box button:hover,
body.jtv2012-dark #top_navbar .search-box button:hover {
  background: #d0d0d0;
}

/* ============================================================
   [03.5] 2012 CHANNEL TITLE
   ============================================================ */

body.jtv2012 #channel_title,
body.jtv2012-dark #channel_title {
  font-family: var(--channel-title-font-family);
  font-size: var(--channel-title-font-size);
  font-weight: var(--channel-title-font-weight);
  color: var(--channel-title-color);
  margin: var(--channel-title-margin);
  padding: var(--channel-title-padding);
  text-shadow: var(--channel-title-text-shadow);
}


/* ============================================================
   [03.6] 2012 CHANNEL INFO
   ============================================================ */

body.jtv2012 #channel_info_left,
body.jtv2012-dark #channel_info_left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--2012-font-family);
  font-size: 14px;
  font-weight: bold;
  color: var(--text-color);
  margin: 0 0 5px 0;
  padding: 0;
}

body.jtv2012 #channel_info_right,
body.jtv2012-dark #channel_info_right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--2012-font-family);
  font-size: 13px;
  font-weight: normal;
  color: var(--text-color);
  margin: 0;
  padding: 0;
}


/* ============================================================
   [03.7] 2012 CHANNEL DESCRIPTION
   ============================================================ */

body.jtv2012 #channel_description,
body.jtv2012-dark #channel_description {
  font-family: var(--channel-description-font-family);
  font-size: var(--channel-description-font-size);
  font-weight: var(--channel-description-font-weight);
  color: var(--channel-description-color);
  line-height: var(--channel-description-line-height);
  margin: var(--channel-description-margin);
  padding: var(--channel-description-padding);
  max-width: var(--channel-description-max-width);
  text-shadow: var(--channel-description-text-shadow);
}

/* ============================================================
   [03.8] 2012 FOLLOW BUTTON
   ============================================================ */

body.jtv2012 #follow_button,
body.jtv2012-dark #follow_button {
  background: var(--follow-bg);
  color: var(--follow-text);
  padding: var(--follow-padding-y) var(--follow-padding-x);
  font-family: var(--follow-font-family);
  font-size: var(--follow-font-size);
  font-weight: var(--follow-font-weight);
  border-radius: var(--follow-border-radius);
  border: var(--follow-border);
  margin-right: var(--follow-margin-right);
  text-shadow: var(--follow-text-shadow);
  cursor: pointer;
}

body.jtv2012 #follow_button:hover,
body.jtv2012-dark #follow_button:hover {
  background: var(--2012-follow-bg-hover-dark);
  box-shadow: var(--2012-follow-bg-shadow-dark);
}


/* ============================================================
   [03.9] 2012 SPLIT PILL BUTTONS
   ============================================================ */

body.jtv2012 .pill,
body.jtv2012-dark .pill {
  font-family: var(--pill-font-family);
  font-size: var(--pill-font-size);
  font-weight: var(--pill-font-weight);
  padding: var(--pill-padding-y) var(--pill-padding-x);
  border-radius: var(--pill-radius);
  border: var(--pill-border);
  margin-right: var(--pill-gap);
}

body.jtv2012 .pill.gray,
body.jtv2012-dark .pill.gray {
  background: var(--pill-gray-bg);
  color: var(--pill-gray-text);
}

body.jtv2012-dark .pill.gray {
  background: var(--2012-pill-gray-bg-dark);
  color: var(--2012-pill-gray-text-dark);
}

body.jtv2012 .pill.blue,
body.jtv2012-dark .pill.blue {
  background: var(--pill-blue-bg);
  color: var(--pill-blue-text);
}

body.jtv2012 .pill.right,
body.jtv2012-dark .pill.right {
  background: var(--pill-right-bg);
  color: var(--pill-right-text);
}

body.jtv2012 .pill + .pill,
body.jtv2012-dark .pill + .pill {
  border-left: 1px solid rgba(0,0,0,0.4);
}


/* ============================================================
   [03.10] 2012 SHARE BUTTON
   ============================================================ */

body.jtv2012 #share_button,
body.jtv2012-dark #share_button {
  background: var(--share-bg);
  color: var(--share-text);
  padding: var(--share-padding-y) var(--share-padding-x);
  border-radius: var(--share-radius);
  border: var(--share-border);
  cursor: pointer;
}

/* ============================================================
   [03.11] 2012 SUGGESTED CHANNELS
   ============================================================ */

body.jtv2012 #suggested_channels,
body.jtv2012-dark #suggested_channels {
  margin-top: 20px;
}

body.jtv2012 #suggested_channels .sc-title,
body.jtv2012-dark #suggested_channels .sc-title {
  font-family: var(--2012-sc-title-font-family);
  font-size: var(--2012-sc-title-font-size);
  font-weight: var(--2012-sc-title-font-weight);
  color: var(--2012-sc-title-color);
  margin: var(--2012-sc-title-margin);
}

body.jtv2012 #suggested_channels .sc-item,
body.jtv2012-dark #suggested_channels .sc-item {
  display: var(--2012-sc-item-display);
  gap: var(--2012-sc-item-gap);
  padding: var(--2012-sc-item-padding);
}

body.jtv2012 #suggested_channels .sc-thumb,
body.jtv2012-dark #suggested_channels .sc-thumb {
  width: var(--2012-sc-thumb-width);
  height: var(--2012-sc-thumb-height);
  border-radius: var(--2012-sc-thumb-radius);
  background: var(--2012-sc-thumb-bg);
}

body.jtv2012 #suggested_channels .sc-info,
body.jtv2012-dark #suggested_channels .sc-info {
  font-family: var(--2012-sc-info-font-family);
  font-size: var(--2012-sc-info-font-size);
  color: var(--2012-sc-info-color);
  line-height: var(--2012-sc-info-line-height);
}

body.jtv2012 #suggested_channels .sc-meta,
body.jtv2012-dark #suggested_channels .sc-meta {
  font-size: var(--2012-sc-meta-font-size);
  color: var(--2012-sc-meta-color);
}


/* ============================================================
   [03.12] 2012 VIDEO ARCHIVE
   ============================================================ */

body.jtv2012 #video_archive .va-item,
body.jtv2012-dark #video_archive .va-item {
  display: var(--2012-va-item-display);
  gap: var(--2012-va-item-gap);
  padding: var(--2012-va-item-padding);
  border-bottom: var(--2012-va-item-border-bottom);
}

body.jtv2012 #video_archive .va-thumb,
body.jtv2012-dark #video_archive .va-thumb {
  width: var(--2012-va-thumb-width);
  height: var(--2012-va-thumb-height);
  border-radius: var(--2012-va-thumb-radius);
  background: var(--2012-va-thumb-bg);
}

body.jtv2012 #video_archive .va-title,
body.jtv2012-dark #video_archive .va-title {
  font-family: var(--2012-va-title-font-family);
  font-size: var(--2012-va-title-font-size);
  font-weight: var(--2012-va-title-font-weight);
  color: var(--2012-va-title-color);
  line-height: var(--2012-va-title-line-height);
}

body.jtv2012 #video_archive .va-meta,
body.jtv2012-dark #video_archive .va-meta {
  font-family: var(--2012-va-meta-font-family);
  font-size: var(--2012-va-meta-font-size);
  color: var(--2012-va-meta-color);
  line-height: var(--2012-va-meta-line-height);
}

/* ============================================================
   [03.13] 2012 MORE VIDEOS BUTTON
   ============================================================ */

body.jtv2012 #more_videos_button,
body.jtv2012-dark #more_videos_button {
  display: var(--2012-more-videos-display);
  width: var(--2012-more-videos-width);
  padding: var(--2012-more-videos-padding);
  margin: var(--2012-more-videos-margin);
  background: var(--2012-more-videos-bg);
  border: var(--2012-more-videos-border);
  border-radius: var(--2012-more-videos-radius);
  font-family: var(--2012-more-videos-font-family);
  font-size: var(--2012-more-videos-font-size);
  font-weight: var(--2012-more-videos-font-weight);
  color: var(--2012-more-videos-color);
  text-align: center;
  cursor: pointer;
}

body.jtv2012 #more_videos_button:hover,
body.jtv2012-dark #more_videos_button:hover {
  background: var(--2012-more-videos-bg-hover);
}


/* ============================================================
   [03.14] 2012 TAB BAR
   ============================================================ */

body.jtv2012 #tab_bar,
body.jtv2012-dark #tab_bar {
  background: var(--2012-tabbar-bg);
  border-bottom: var(--2012-tabbar-border-bottom);
  height: var(--2012-tabbar-height);
  display: flex;
  align-items: center;
}

body.jtv2012 #tab_bar .tab,
body.jtv2012-dark #tab_bar .tab {
  font-family: var(--2012-tab-font-family);
  font-size: var(--2012-tab-font-size);
  font-weight: var(--2012-tab-font-weight);
  color: var(--2012-tab-color);
  padding: var(--2012-tab-padding);
  border-right: var(--2012-tab-border-right);
  cursor: pointer;
}

body.jtv2012 #tab_bar .tab:hover,
body.jtv2012-dark #tab_bar .tab:hover {
  color: var(--2012-tab-color-active);
}

body.jtv2012 #tab_bar .tab.active,
body.jtv2012-dark #tab_bar .tab.active {
  border-bottom: var(--2012-tab-active-underline);
  border: var(--2012-tab-active-border);
  border-radius: var(--2012-tab-active-border-radius);
}


/* ============================================================
   [03.15] 2012 FOOTER
   ============================================================ */

body.jtv2012 #footer,
body.jtv2012-dark #footer {
  background: var(--2012-footer-bg);
  color: var(--2012-footer-text-color);
  padding: var(--2012-footer-padding);
  font-family: var(--2012-footer-font-family);
  font-size: var(--2012-footer-font-size);
  position: relative;
  z-index: 10;
}

body.jtv2012 #footer a,
body.jtv2012-dark #footer a {
  color: var(--2012-footer-link-color);
  text-decoration: none;
}

body.jtv2012 #footer a:hover,
body.jtv2012-dark #footer a:hover {
  color: var(--2012-footer-link-hover-color);
}


/* ------------------------------------------------------------
   [03.15.1] Footer Pills
   ------------------------------------------------------------ */

body.jtv2012 #footer .footer-pill,
body.jtv2012-dark #footer .footer-pill {
  background: var(--2012-footer-pill-bg);
  border: var(--2012-footer-pill-border);
  border-radius: var(--2012-footer-pill-radius);
  padding: var(--2012-footer-pill-padding);
  box-shadow: var(--2012-footer-pill-shadow);
  display: inline-flex;
  align-items: center;
  gap: var(--2012-footer-pill-gap);
}

/* ============================================================
   [03.16] 2012 DARK MODE OVERRIDES
   ============================================================ */

body.jtv2012-dark #channel_title {
  font-size: var(--2012-channel-title-font-size-dark);
  font-weight: var(--2012-channel-title-font-weight-dark);
  color: var(--2012-channel-title-color-dark);
  text-shadow: var(--2012-channel-title-text-shadow-dark);
}

body.jtv2012-dark #channel_info_left {
  color: var(--text-color-dark);
}

body.jtv2012-dark #channel_description {
  color: var(--text-color-dark);
}

body.jtv2012-dark #suggested_channels .sc-info {
  color: var(--2012-sc-info-color);
}

body.jtv2012-dark #video_archive .va-title {
  color: var(--2012-va-title-color);
}

body.jtv2012-dark #video_archive .va-meta {
  color: var(--2012-va-meta-color);
}

body.jtv2012-dark #more_videos_button {
  text-shadow: 0 2px 4px #FFFFFF80;
  box-shadow: 0 0 10px #b6cce2B3;
}

body.jtv2012-dark #tab_bar {
  background: #000000;
}

body.jtv2012-dark #tab_bar .tab {
  background: linear-gradient(#333333, #111111);
  color: #ffffff;
}

body.jtv2012-dark #tab_bar .tab.active {
  background: #4a90e2;
  color: #ffffff;
  border: 1px solid #4a90e2;
}

body.jtv2012-dark #footer a {
  color: #b38bff;
}

body.jtv2012-dark #footer a:hover {
  color: #d3b3ff;
}

/* ============================================================
   [04.0] GLOBAL CHAT SECTION (POST‑2012)
   ============================================================ */

#chat_section {
  width: 100%;
  margin-top: 20px;
  display: block;
}

#chat_section .chat-header {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 10px;
}

#chat_section .chat-container {
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 10px;
  overflow-y: auto;
  max-height: 400px;
}

#chat_section .chat-line {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #cccccc;
  padding: 4px 0;
  border-bottom: 1px solid #2a2a2a;
}

#chat_section .chat-line:last-child {
  border-bottom: none;
}


/* ============================================================
   [04.1] CHAT INPUT BAR
   ============================================================ */

#chat_input_bar {
  display: flex;
  align-items: center;
  background: #2a2a2a;
  border: 1px solid #444444;
  border-radius: 6px;
  padding: 6px;
  margin-top: 10px;
}

#chat_input_bar input {
  flex: 1;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 4px;
  padding: 6px 10px;
  color: #ffffff;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 13px;
  outline: none;
}

#chat_input_bar button {
  background: #4a90e2;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  margin-left: 8px;
  cursor: pointer;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 13px;
}

#chat_input_bar button:hover {
  background: #6ab0ff;
}

/* ============================================================
   [04.2] CHAT ICON BUTTONS (GLOBAL)
   ============================================================ */

.chat_icon_button {
  background: #333333;
  border: 1px solid #444444;
  color: #ffffff;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chat_icon_button:hover {
  background: #4a4a4a;
}


/* ============================================================
   [04.3] CHAT SCROLLBAR
   ============================================================ */

#chat_section .chat-container::-webkit-scrollbar {
  width: 10px;
}

#chat_section .chat-container::-webkit-scrollbar-track {
  background: #1a1a1a;
}

#chat_section .chat-container::-webkit-scrollbar-thumb {
  background: #444444;
  border-radius: 6px;
}

#chat_section .chat-container::-webkit-scrollbar-thumb:hover {
  background: #555555;
}


/* ============================================================
   [04.4] CHAT TIMESTAMPS
   ============================================================ */

.chat-line .timestamp {
  font-size: 11px;
  color: #888888;
  margin-right: 6px;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}


/* ============================================================
   [04.5] CHAT USERNAMES
   ============================================================ */

.chat-line .username {
  font-weight: bold;
  color: #4a90e2;
  margin-right: 6px;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}

.chat-line .username.moderator {
  color: #7fd1ff;
}

.chat-line .username.admin {
  color: #ff7f7f;
}

/* ============================================================
   [04.6] CHAT MESSAGE HIGHLIGHTING
   ============================================================ */

.chat-line.highlight {
  background: #2a2a2a;
  border-left: 3px solid #4a90e2;
  padding-left: 8px;
}

.chat-line.mention {
  background: #333333;
  border-left: 3px solid #7fd1ff;
  padding-left: 8px;
}

.chat-line.system {
  color: #aaaaaa;
  font-style: italic;
}


/* ============================================================
   [04.7] CHAT BADGES
   ============================================================ */

.chat-line .badge {
  display: inline-block;
  padding: 2px 6px;
  margin-right: 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: #ffffff;
}

.chat-line .badge.mod {
  background: #4a90e2;
}

.chat-line .badge.admin {
  background: #ff7f7f;
}

.chat-line .badge.vip {
  background: #b38bff;
}


/* ============================================================
   [04.8] CHAT INPUT EMOJI PICKER
   ============================================================ */

#emoji_picker {
  position: absolute;
  bottom: 50px;
  right: 10px;
  width: 260px;
  height: 200px;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 10px;
  display: none;
  overflow-y: auto;
  z-index: 20;
}

#emoji_picker .emoji {
  font-size: 20px;
  padding: 4px;
  cursor: pointer;
  display: inline-block;
}

#emoji_picker .emoji:hover {
  background: #333333;
  border-radius: 4px;
}

/* ============================================================
   [04.9] CHAT INPUT ATTACHMENT BUTTON
   ============================================================ */

#chat_input_bar .attach-button {
  background: #3a3a3a;
  border: 1px solid #4a4a4a;
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 4px;
  margin-right: 8px;
  cursor: pointer;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

#chat_input_bar .attach-button:hover {
  background: #4a4a4a;
}


/* ============================================================
   [04.10] CHAT INPUT TOOLBAR
   ============================================================ */

#chat_input_toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

#chat_input_toolbar .tool {
  background: #333333;
  border: 1px solid #444444;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 12px;
}

#chat_input_toolbar .tool:hover {
  background: #444444;
}


/* ============================================================
   [04.11] CHAT SYSTEM NOTICES
   ============================================================ */

.chat-system-notice {
  background: #2a2a2a;
  border-left: 4px solid #4a90e2;
  padding: 8px 10px;
  margin: 10px 0;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #cccccc;
}

.chat-system-notice.warning {
  border-left-color: #ffcc66;
}

.chat-system-notice.error {
  border-left-color: #ff7f7f;
}

.chat-system-notice.success {
  border-left-color: #7fd1ff;
}

/* ============================================================
   [04.12] CHAT QUOTE REPLIES
   ============================================================ */

.chat-line .quote {
  display: block;
  background: #2a2a2a;
  border-left: 3px solid #7fd1ff;
  padding: 6px 8px;
  margin-bottom: 4px;
  font-size: 12px;
  color: #bbbbbb;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}

.chat-line .quote .quote-username {
  font-weight: bold;
  color: #7fd1ff;
  margin-right: 4px;
}

.chat-line .quote .quote-text {
  color: #cccccc;
}


/* ============================================================
   [04.13] CHAT LINK STYLING
   ============================================================ */

.chat-line a {
  color: #4a90e2;
  text-decoration: underline;
}

.chat-line a:hover {
  color: #7fb8ff;
}


/* ============================================================
   [04.14] CHAT INLINE CODE
   ============================================================ */

.chat-line code {
  background: #333333;
  color: #e0e0e0;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}


/* ============================================================
   [04.15] CHAT BLOCK CODE
   ============================================================ */

.chat-line pre {
  background: #1a1a1a;
  border: 1px solid #333333;
  padding: 10px;
  border-radius: 6px;
  overflow-x: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: #e0e0e0;
  margin: 6px 0;
}

/* ============================================================
   [04.16] CHAT IMAGE EMBEDS
   ============================================================ */

.chat-line .chat-image {
  display: block;
  max-width: 300px;
  max-height: 300px;
  border-radius: 6px;
  margin: 6px 0;
  border: 1px solid #333333;
}

.chat-line .chat-image:hover {
  opacity: 0.9;
}


/* ============================================================
   [04.17] CHAT VIDEO EMBEDS
   ============================================================ */

.chat-line .chat-video {
  display: block;
  max-width: 400px;
  border-radius: 6px;
  margin: 8px 0;
  border: 1px solid #333333;
}

.chat-line .chat-video video {
  width: 100%;
  border-radius: 6px;
}


/* ============================================================
   [04.18] CHAT AUDIO EMBEDS
   ============================================================ */

.chat-line .chat-audio {
  display: block;
  margin: 8px 0;
  padding: 6px;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
}

.chat-line .chat-audio audio {
  width: 100%;
}


/* ============================================================
   [04.19] CHAT FILE ATTACHMENTS
   ============================================================ */

.chat-line .chat-file {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #2a2a2a;
  border: 1px solid #333333;
  padding: 8px 10px;
  border-radius: 6px;
  margin: 6px 0;
  color: #cccccc;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 13px;
}

.chat-line .chat-file:hover {
  background: #333333;
}

.chat-line .chat-file .file-icon {
  font-size: 18px;
  color: #7fd1ff;
}

.chat-line .chat-file .file-name {
  font-weight: bold;
  color: #ffffff;
}

/* ============================================================
   [04.20] CHAT REACTIONS
   ============================================================ */

.chat-line .reactions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.chat-line .reaction {
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 12px;
  color: #cccccc;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chat-line .reaction:hover {
  background: #3a3a3a;
}

.chat-line .reaction .emoji {
  font-size: 14px;
}


/* ============================================================
   [04.21] CHAT THREADING
   ============================================================ */

.chat-thread {
  margin-left: 20px;
  border-left: 2px solid #333333;
  padding-left: 10px;
  margin-top: 6px;
}

.chat-thread .chat-line {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  padding: 6px 8px;
  border-radius: 4px;
  margin: 4px 0;
}


/* ============================================================
   [04.22] CHAT PINNED MESSAGES
   ============================================================ */

.chat-pinned {
  background: #333333;
  border-left: 4px solid #ffcc66;
  padding: 8px 10px;
  margin: 10px 0;
  border-radius: 4px;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #ffffff;
}

.chat-pinned .pin-icon {
  margin-right: 6px;
  color: #ffcc66;
  font-size: 14px;
}

/* ============================================================
   [04.23] CHAT MESSAGE EDITING
   ============================================================ */

.chat-line.editing {
  background: #2a2a2a;
  border-left: 3px solid #ffcc66;
  padding-left: 8px;
}

.chat-line .edit-indicator {
  font-size: 11px;
  color: #bbbbbb;
  margin-left: 6px;
  font-style: italic;
}

.chat-line .edit-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.chat-line .edit-actions button {
  background: #3a3a3a;
  border: 1px solid #4a4a4a;
  color: #ffffff;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}

.chat-line .edit-actions button:hover {
  background: #4a4a4a;
}


/* ============================================================
   [04.24] CHAT MESSAGE DELETION
   ============================================================ */

.chat-line.deleted {
  opacity: 0.5;
  font-style: italic;
  color: #888888;
}

.chat-line.deleted .deleted-text {
  font-size: 12px;
  color: #aaaaaa;
}


/* ============================================================
   [04.25] CHAT LOAD MORE BUTTON
   ============================================================ */

#chat_load_more {
  display: block;
  width: 100%;
  text-align: center;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  padding: 8px 0;
  border-radius: 4px;
  margin: 10px 0;
  color: #cccccc;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 13px;
  cursor: pointer;
}

#chat_load_more:hover {
  background: #3a3a3a;
}

/* ============================================================
   [04.26] CHAT SCROLL TO BOTTOM BUTTON
   ============================================================ */

#chat_scroll_bottom {
  position: absolute;
  right: 20px;
  bottom: 20px;
  background: #4a90e2;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 20px;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 2px 6px #00000080;
  display: none;
  z-index: 30;
}

#chat_scroll_bottom:hover {
  background: #6ab0ff;
}


/* ============================================================
   [04.27] CHAT CONNECTION STATUS
   ============================================================ */

#chat_connection_status {
  background: #2a2a2a;
  border-left: 4px solid #ffcc66;
  padding: 8px 10px;
  margin: 10px 0;
  border-radius: 4px;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #ffffff;
}

#chat_connection_status.error {
  border-left-color: #ff7f7f;
}

#chat_connection_status.success {
  border-left-color: #7fd1ff;
}


/* ============================================================
   [04.28] CHAT RATE LIMIT WARNING
   ============================================================ */

#chat_rate_limit {
  background: #333333;
  border-left: 4px solid #ff7f7f;
  padding: 8px 10px;
  margin: 10px 0;
  border-radius: 4px;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #ffffff;
}

#chat_rate_limit .cooldown {
  font-size: 12px;
  color: #ffb3b3;
  margin-top: 4px;
}

/* ============================================================
   [04.29] CHAT USER JOIN / LEAVE EVENTS
   ============================================================ */

.chat-event {
  background: #1a1a1a;
  border-left: 3px solid #4a90e2;
  padding: 6px 10px;
  margin: 6px 0;
  border-radius: 4px;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #cccccc;
}

.chat-event.join {
  border-left-color: #7fd1ff;
}

.chat-event.leave {
  border-left-color: #ff7f7f;
}


/* ============================================================
   [04.30] CHAT USER LEVEL / XP
   ============================================================ */

.chat-line .user-level {
  background: #333333;
  border: 1px solid #444444;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: #ffffff;
  margin-right: 6px;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}

.chat-line .user-xp-bar {
  width: 80px;
  height: 6px;
  background: #2a2a2a;
  border-radius: 3px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}

.chat-line .user-xp-bar .fill {
  height: 100%;
  background: #4a90e2;
}


/* ============================================================
   [04.31] CHAT USER TOOLTIP
   ============================================================ */

.chat-user-tooltip {
  position: absolute;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 10px;
  width: 220px;
  z-index: 50;
  display: none;
  color: #cccccc;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 13px;
  box-shadow: 0 2px 6px #00000080;
}

.chat-user-tooltip .tooltip-username {
  font-weight: bold;
  color: #7fd1ff;
  margin-bottom: 4px;
}

.chat-user-tooltip .tooltip-role {
  font-size: 12px;
  color: #aaaaaa;
  margin-bottom: 6px;
}

.chat-user-tooltip .tooltip-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.chat-user-tooltip .tooltip-actions button {
  background: #333333;
  border: 1px solid #444444;
  color: #ffffff;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.chat-user-tooltip .tooltip-actions button:hover {
  background: #444444;
}

/* ============================================================
   [04.32] CHAT MODERATION PANEL
   ============================================================ */

#chat_mod_panel {
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 12px;
  margin-top: 20px;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  color: #cccccc;
}

#chat_mod_panel h3 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #ffffff;
}

#chat_mod_panel .mod-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#chat_mod_panel .mod-button {
  background: #333333;
  border: 1px solid #444444;
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

#chat_mod_panel .mod-button:hover {
  background: #444444;
}


/* ============================================================
   [04.33] CHAT BAN DIALOG
   ============================================================ */

#chat_ban_dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 16px;
  z-index: 100;
  display: none;
  color: #cccccc;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}

#chat_ban_dialog h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #ffffff;
}

#chat_ban_dialog input,
#chat_ban_dialog select {
  width: 100%;
  background: #2a2a2a;
  border: 1px solid #444444;
  border-radius: 4px;
  padding: 6px 8px;
  color: #ffffff;
  margin-bottom: 10px;
  font-size: 13px;
}

#chat_ban_dialog .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

#chat_ban_dialog .dialog-actions button {
  background: #333333;
  border: 1px solid #444444;
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

#chat_ban_dialog .dialog-actions button:hover {
  background: #444444;
}

/* ============================================================
   [04.34] CHAT TIMEOUT DIALOG
   ============================================================ */

#chat_timeout_dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 16px;
  z-index: 100;
  display: none;
  color: #cccccc;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}

#chat_timeout_dialog h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #ffffff;
}

#chat_timeout_dialog input,
#chat_timeout_dialog select {
  width: 100%;
  background: #2a2a2a;
  border: 1px solid #444444;
  border-radius: 4px;
  padding: 6px 8px;
  color: #ffffff;
  margin-bottom: 10px;
  font-size: 13px;
}

#chat_timeout_dialog .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

#chat_timeout_dialog .dialog-actions button {
  background: #333333;
  border: 1px solid #444444;
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

#chat_timeout_dialog .dialog-actions button:hover {
  background: #444444;
}


/* ============================================================
   [04.35] CHAT REPORT DIALOG
   ============================================================ */

#chat_report_dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 16px;
  z-index: 100;
  display: none;
  color: #cccccc;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}

#chat_report_dialog h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #ffffff;
}

#chat_report_dialog textarea {
  width: 100%;
  height: 80px;
  background: #2a2a2a;
  border: 1px solid #444444;
  border-radius: 4px;
  padding: 6px 8px;
  color: #ffffff;
  margin-bottom: 10px;
  font-size: 13px;
  resize: none;
}

#chat_report_dialog .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

#chat_report_dialog .dialog-actions button {
  background: #333333;
  border: 1px solid #444444;
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

#chat_report_dialog .dialog-actions button:hover {
  background: #444444;
}

/* ============================================================
   [04.36] CHAT USER PROFILE CARD
   ============================================================ */

#chat_profile_card {
  position: absolute;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 12px;
  width: 260px;
  z-index: 60;
  display: none;
  color: #cccccc;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  box-shadow: 0 2px 6px #00000080;
}

#chat_profile_card .profile-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

#chat_profile_card .profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: #333333;
}

#chat_profile_card .profile-username {
  font-size: 14px;
  font-weight: bold;
  color: #7fd1ff;
}

#chat_profile_card .profile-role {
  font-size: 12px;
  color: #aaaaaa;
}

#chat_profile_card .profile-bio {
  margin-top: 10px;
  font-size: 12px;
  color: #bbbbbb;
}

#chat_profile_card .profile-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

#chat_profile_card .profile-actions button {
  background: #333333;
  border: 1px solid #444444;
  color: #ffffff;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

#chat_profile_card .profile-actions button:hover {
  background: #444444;
}


/* ============================================================
   [04.37] CHAT SEARCH BAR
   ============================================================ */

#chat_search_bar {
  display: flex;
  align-items: center;
  background: #2a2a2a;
  border: 1px solid #444444;
  border-radius: 6px;
  padding: 6px;
  margin: 10px 0;
}

#chat_search_bar input {
  flex: 1;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 4px;
  padding: 6px 10px;
  color: #ffffff;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 13px;
  outline: none;
}

#chat_search_bar button {
  background: #4a90e2;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  margin-left: 8px;
  cursor: pointer;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 13px;
}

#chat_search_bar button:hover {
  background: #6ab0ff;
}

/* ============================================================
   [04.38] CHAT SEARCH RESULTS
   ============================================================ */

#chat_search_results {
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 10px;
  margin-top: 10px;
  max-height: 300px;
  overflow-y: auto;
  display: none;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  color: #cccccc;
}

#chat_search_results .result-line {
  padding: 6px 0;
  border-bottom: 1px solid #2a2a2a;
  font-size: 13px;
}

#chat_search_results .result-line:last-child {
  border-bottom: none;
}

#chat_search_results .result-line .username {
  font-weight: bold;
  color: #7fd1ff;
}

#chat_search_results .result-line:hover {
  background: #2a2a2a;
}


/* ============================================================
   [04.39] CHAT FILTER BAR
   ============================================================ */

#chat_filter_bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #2a2a2a;
  border: 1px solid #444444;
  border-radius: 6px;
  padding: 6px;
  margin: 10px 0;
}

#chat_filter_bar select {
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 4px;
  padding: 6px 10px;
  color: #ffffff;
  font-size: 13px;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}

#chat_filter_bar .filter-button {
  background: #333333;
  border: 1px solid #444444;
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

#chat_filter_bar .filter-button:hover {
  background: #444444;
}


/* ============================================================
   [04.40] CHAT EXPORT BUTTON
   ============================================================ */

#chat_export_button {
  background: #4a90e2;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}

/* ============================================================
   [04.41] CHAT EXPORT PANEL
   ============================================================ */

#chat_export_panel {
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 12px;
  margin-top: 10px;
  display: none;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  color: #cccccc;
}

#chat_export_panel h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #ffffff;
}

#chat_export_panel .export-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#chat_export_panel .export-options label {
  font-size: 13px;
  color: #bbbbbb;
}

#chat_export_panel .export-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

#chat_export_panel .export-actions button {
  background: #333333;
  border: 1px solid #444444;
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

#chat_export_panel .export-actions button:hover {
  background: #444444;
}


/* ============================================================
   [04.42] CHAT TAGGING SYSTEM
   ============================================================ */

.chat-tag {
  display: inline-block;
  background: #333333;
  border: 1px solid #444444;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: #ffffff;
  margin-right: 6px;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}

.chat-tag.mod {
  background: #4a90e2;
}

.chat-tag.vip {
  background: #b38bff;
}

.chat-tag.bot {
  background: #7fd1ff;
}


/* ============================================================
   [04.43] CHAT INLINE ALERTS
   ============================================================ */

.chat-inline-alert {
  background: #2a2a2a;
  border-left: 4px solid #ffcc66;
  padding: 8px 10px;
  margin: 10px 0;
  border-radius: 4px;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #ffffff;
}

.chat-inline-alert.error {
  border-left-color: #ff7f7f;
}

.chat-inline-alert.success {
  border-left-color: #7fd1ff;
}

/* ============================================================
   [04.44] CHAT KEYBOARD SHORTCUTS OVERLAY
   ============================================================ */

#chat_shortcuts_overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 16px;
  z-index: 120;
  display: none;
  color: #cccccc;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  box-shadow: 0 2px 8px #00000080;
}

#chat_shortcuts_overlay h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #ffffff;
}

#chat_shortcuts_overlay .shortcut-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #2a2a2a;
  font-size: 13px;
}

#chat_shortcuts_overlay .shortcut-row:last-child {
  border-bottom: none;
}

#chat_shortcuts_overlay .shortcut-key {
  font-family: "JetBrains Mono", monospace;
  background: #333333;
  padding: 2px 6px;
  border-radius: 4px;
  color: #ffffff;
}


/* ============================================================
   [04.45] CHAT POPUP MENU
   ============================================================ */

.chat-popup-menu {
  position: absolute;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 8px;
  width: 160px;
  z-index: 80;
  display: none;
  color: #cccccc;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  box-shadow: 0 2px 6px #00000080;
}

.chat-popup-menu .menu-item {
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

.chat-popup-menu .menu-item:hover {
  background: #2a2a2a;
}


/* ============================================================
   [04.46] CHAT POPUP SUBMENU
   ============================================================ */

.chat-popup-submenu {
  position: absolute;
  left: 160px;
  top: 0;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 8px;
  width: 160px;
  z-index: 90;
  display: none;
  color: #cccccc;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  box-shadow: 0 2px 6px #00000080;
}

.chat-popup-submenu .submenu-item {
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

.chat-popup-submenu .submenu-item:hover {
  background: #2a2a2a;
}

/* ============================================================
   [04.47] CHAT CONTEXT MENU HIGHLIGHT STATES
   ============================================================ */

.chat-popup-menu .menu-item.danger {
  color: #ff7f7f;
}

.chat-popup-menu .menu-item.danger:hover {
  background: #3a1a1a;
}

.chat-popup-submenu .submenu-item.danger {
  color: #ff7f7f;
}

.chat-popup-submenu .submenu-item.danger:hover {
  background: #3a1a1a;
}


/* ============================================================
   [04.48] CHAT TOOLTIP ARROWS
   ============================================================ */

.chat-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.chat-tooltip-arrow.top {
  bottom: -6px;
  left: 20px;
  border-width: 6px 6px 0 6px;
  border-color: #1a1a1a transparent transparent transparent;
}

.chat-tooltip-arrow.bottom {
  top: -6px;
  left: 20px;
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent #1a1a1a transparent;
}


/* ============================================================
   [04.49] CHAT DRAG HANDLE
   ============================================================ */

#chat_drag_handle {
  width: 100%;
  height: 6px;
  background: #2a2a2a;
  border-top: 1px solid #333333;
  border-bottom: 1px solid #333333;
  cursor: ns-resize;
}

/* ============================================================
   [04.50] CHAT RESIZABLE PANELS
   ============================================================ */

.chat-resize-handle {
  width: 6px;
  background: #2a2a2a;
  cursor: ew-resize;
  border-left: 1px solid #333333;
  border-right: 1px solid #333333;
}

.chat-resize-handle:hover {
  background: #3a3a3a;
}


/* ============================================================
   [04.51] CHAT PANEL SPLITTER
   ============================================================ */

#chat_panel_splitter {
  width: 100%;
  height: 8px;
  background: #1a1a1a;
  border-top: 1px solid #333333;
  border-bottom: 1px solid #333333;
  cursor: ns-resize;
}

#chat_panel_splitter:hover {
  background: #2a2a2a;
}


/* ============================================================
   [04.52] CHAT FLOATING TOOLBAR
   ============================================================ */

#chat_floating_toolbar {
  position: absolute;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 8px;
  display: none;
  z-index: 90;
  color: #cccccc;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  box-shadow: 0 2px 6px #00000080;
}

#chat_floating_toolbar .tool {
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

#chat_floating_toolbar .tool:hover {
  background: #2a2a2a;
}

/* ============================================================
   [04.53] CHAT FLOATING USER ACTION BAR
   ============================================================ */

#chat_user_action_bar {
  position: absolute;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 8px;
  display: none;
  z-index: 95;
  color: #cccccc;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  box-shadow: 0 2px 6px #00000080;
}

#chat_user_action_bar .action {
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

#chat_user_action_bar .action:hover {
  background: #2a2a2a;
}


/* ============================================================
   [04.54] CHAT MESSAGE HIGHLIGHT STATES
   ============================================================ */

.chat-line.highlight {
  background: #2a2a2a;
  border-left: 3px solid #4a90e2;
  padding-left: 8px;
}

.chat-line.highlight-mention {
  background: #2a2a1a;
  border-left: 3px solid #ffcc66;
  padding-left: 8px;
}

.chat-line.highlight-error {
  background: #2a1a1a;
  border-left: 3px solid #ff7f7f;
  padding-left: 8px;
}


/* ============================================================
   [04.55] CHAT MESSAGE TRANSITION EFFECTS
   ============================================================ */

.chat-line {
  transition: background 0.15s ease, border-color 0.15s ease;
}

.chat-line.fade-in {
  animation: chatFadeIn 0.25s ease;
}

@keyframes chatFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   [04.56] CHAT MESSAGE COLLAPSE / EXPAND
   ============================================================ */

.chat-line.collapsed {
  max-height: 24px;
  overflow: hidden;
  opacity: 0.8;
  cursor: pointer;
}

.chat-line.collapsed:hover {
  opacity: 1;
}

.chat-line .expand-toggle {
  font-size: 11px;
  color: #7fd1ff;
  cursor: pointer;
  margin-left: 6px;
}


/* ============================================================
   [04.57] CHAT MESSAGE BOOKMARKS
   ============================================================ */

.chat-bookmark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #333333;
  border: 1px solid #444444;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: #ffffff;
  cursor: pointer;
}

.chat-bookmark:hover {
  background: #444444;
}

.chat-bookmark .icon {
  font-size: 12px;
  color: #ffcc66;
}


/* ============================================================
   [04.58] CHAT BOOKMARK PANEL
   ============================================================ */

#chat_bookmark_panel {
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 12px;
  margin-top: 10px;
  display: none;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  color: #cccccc;
}

#chat_bookmark_panel h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #ffffff;
}

#chat_bookmark_panel .bookmark-entry {
  padding: 6px 0;
  border-bottom: 1px solid #2a2a2a;
  font-size: 13px;
}

#chat_bookmark_panel .bookmark-entry:last-child {
  border-bottom: none;
}

#chat_bookmark_panel .bookmark-entry:hover {
  background: #2a2a2a;
}

/* ============================================================
   [04.59] CHAT MESSAGE QUOTE BLOCKS
   ============================================================ */

.chat-quote {
  border-left: 3px solid #4a90e2;
  padding-left: 8px;
  margin: 6px 0;
  color: #bbbbbb;
  font-size: 13px;
  font-style: italic;
}

.chat-quote .quote-author {
  font-weight: bold;
  color: #7fd1ff;
  margin-bottom: 2px;
}

.chat-quote .quote-text {
  color: #cccccc;
}


/* ============================================================
   [04.60] CHAT INLINE CODE
   ============================================================ */

.chat-line code {
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: #ffffff;
}


/* ============================================================
   [04.61] CHAT CODE BLOCKS
   ============================================================ */

.chat-code-block {
  background: #1a1a1a;
  border: 1px solid #333333;
  padding: 10px;
  border-radius: 6px;
  margin: 8px 0;
  overflow-x: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: #ffffff;
}

.chat-code-block .line-number {
  color: #777777;
  margin-right: 10px;
  user-select: none;
}

/* ============================================================
   [04.62] CHAT SYSTEM MESSAGE BLOCKS
   ============================================================ */

.chat-system {
  background: #262626;
  border-left: 4px solid #7fd1ff;
  padding: 8px 10px;
  margin: 10px 0;
  border-radius: 4px;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #e0e0e0;
}

.chat-system.warning {
  border-left-color: #ffcc66;
}

.chat-system.error {
  border-left-color: #ff7f7f;
}

.chat-system.info {
  border-left-color: #4a90e2;
}


/* ============================================================
   [04.63] CHAT TIMESTAMP STYLES
   ============================================================ */

.chat-line .timestamp {
  font-size: 11px;
  color: #777777;
  margin-right: 6px;
  user-select: none;
}

.chat-line:hover .timestamp {
  color: #aaaaaa;
}


/* ============================================================
   [04.64] CHAT MESSAGE SEPARATORS
   ============================================================ */

.chat-separator {
  display: flex;
  align-items: center;
  margin: 12px 0;
  color: #777777;
  font-size: 12px;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}

.chat-separator::before,
.chat-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #2a2a2a;
  margin: 0 8px;
}

/* ============================================================
   [04.65] CHAT MESSAGE PINNING
   ============================================================ */

.chat-pin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #333333;
  border: 1px solid #444444;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: #ffffff;
  cursor: pointer;
}

.chat-pin:hover {
  background: #444444;
}

.chat-pin .icon {
  font-size: 12px;
  color: #ffcc66;
}

.chat-line.pinned {
  background: #2a2a1a;
  border-left: 3px solid #ffcc66;
  padding-left: 8px;
}


/* ============================================================
   [04.66] CHAT PINNED PANEL
   ============================================================ */

#chat_pinned_panel {
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 12px;
  margin-top: 10px;
  display: none;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  color: #cccccc;
}

#chat_pinned_panel h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #ffffff;
}

#chat_pinned_panel .pinned-entry {
  padding: 6px 0;
  border-bottom: 1px solid #2a2a2a;
  font-size: 13px;
}

#chat_pinned_panel .pinned-entry:last-child {
  border-bottom: none;
}

#chat_pinned_panel .pinned-entry:hover {
  background: #2a2a2a;
}


/* ============================================================
   [04.67] CHAT MESSAGE THREADING (BASIC)
   ============================================================ */

.chat-thread {
  margin-left: 20px;
  border-left: 2px solid #333333;
  padding-left: 10px;
}

.chat-thread .thread-line {
  margin: 4px 0;
  font-size: 13px;
  color: #cccccc;
}

.chat-thread .thread-line .username {
  font-weight: bold;
  color: #7fd1ff;
}

/* ============================================================
   [04.68] CHAT THREAD REPLY BUTTON
   ============================================================ */

.chat-reply-button {
  font-size: 12px;
  color: #7fd1ff;
  cursor: pointer;
  margin-left: 6px;
}

.chat-reply-button:hover {
  text-decoration: underline;
}


/* ============================================================
   [04.69] CHAT THREAD EXPAND / COLLAPSE
   ============================================================ */

.chat-thread-toggle {
  font-size: 11px;
  color: #bbbbbb;
  cursor: pointer;
  margin-top: 4px;
  display: inline-block;
}

.chat-thread-toggle:hover {
  color: #ffffff;
}

.chat-thread.collapsed {
  max-height: 0;
  overflow: hidden;
  opacity: 0.6;
}

.chat-thread.collapsed:hover {
  opacity: 1;
}


/* ============================================================
   [04.70] CHAT THREAD CONNECTOR LINES
   ============================================================ */

.chat-thread-line {
  position: relative;
  padding-left: 16px;
}

.chat-thread-line::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #333333;
}

.chat-thread-line::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  width: 10px;
  height: 2px;
  background: #333333;
}

/* ============================================================
   [04.71] CHAT THREAD REPLY INPUT
   ============================================================ */

.chat-thread-reply-box {
  margin-top: 8px;
  padding: 8px;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
}

.chat-thread-reply-box textarea {
  width: 100%;
  height: 60px;
  background: #2a2a2a;
  border: 1px solid #444444;
  border-radius: 4px;
  padding: 6px 8px;
  color: #ffffff;
  font-size: 13px;
  resize: none;
}

.chat-thread-reply-box button {
  margin-top: 6px;
  background: #4a90e2;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}

.chat-thread-reply-box button:hover {
  background: #6ab0ff;
}


/* ============================================================
   [04.72] CHAT THREAD DEPTH LIMITING
   ============================================================ */

.chat-thread.depth-1 { margin-left: 20px; }
.chat-thread.depth-2 { margin-left: 40px; }
.chat-thread.depth-3 { margin-left: 60px; }
.chat-thread.depth-4 { margin-left: 80px; }
.chat-thread.depth-max {
  opacity: 0.7;
  border-left-color: #555555;
}


/* ============================================================
   [04.73] CHAT THREAD LOAD MORE
   ============================================================ */

.chat-thread-load-more {
  font-size: 12px;
  color: #7fd1ff;
  cursor: pointer;
  margin: 6px 0;
  display: inline-block;
}

.chat-thread-load-more:hover {
  text-decoration: underline;
}

/* ============================================================
   [04.74] CHAT EMOTE PICKER
   ============================================================ */

#chat_emote_picker {
  position: absolute;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 10px;
  width: 260px;
  height: 240px;
  overflow-y: auto;
  display: none;
  z-index: 100;
  color: #cccccc;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  box-shadow: 0 2px 6px #00000080;
}

#chat_emote_picker .emote-category {
  font-size: 12px;
  color: #aaaaaa;
  margin: 6px 0;
  text-transform: uppercase;
}

#chat_emote_picker .emote-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

#chat_emote_picker .emote {
  width: 32px;
  height: 32px;
  background: #2a2a2a;
  border-radius: 4px;
  cursor: pointer;
}

#chat_emote_picker .emote:hover {
  background: #3a3a3a;
}


/* ============================================================
   [04.75] CHAT EMOTE SEARCH
   ============================================================ */

#chat_emote_search {
  width: 100%;
  background: #2a2a2a;
  border: 1px solid #444444;
  border-radius: 4px;
  padding: 6px 8px;
  color: #ffffff;
  font-size: 13px;
  margin-bottom: 8px;
}


/* ============================================================
   [04.76] CHAT EMOTE TOOLTIP
   ============================================================ */

.chat-emote-tooltip {
  position: absolute;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  color: #ffffff;
  display: none;
  z-index: 110;
  box-shadow: 0 2px 6px #00000080;
}

/* ============================================================
   [04.77] CHAT REACTION BAR
   ============================================================ */

#chat_reaction_bar {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}

.chat-reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #333333;
  border: 1px solid #444444;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
}

.chat-reaction:hover {
  background: #444444;
}

.chat-reaction .count {
  font-size: 11px;
  color: #bbbbbb;
}


/* ============================================================
   [04.78] CHAT REACTION PICKER
   ============================================================ */

#chat_reaction_picker {
  position: absolute;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 10px;
  width: 200px;
  display: none;
  z-index: 100;
  color: #cccccc;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  box-shadow: 0 2px 6px #00000080;
}

#chat_reaction_picker .reaction-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

#chat_reaction_picker .reaction {
  width: 28px;
  height: 28px;
  background: #2a2a2a;
  border-radius: 4px;
  cursor: pointer;
}

#chat_reaction_picker .reaction:hover {
  background: #3a3a3a;
}


/* ============================================================
   [04.79] CHAT REACTION TOOLTIP
   ============================================================ */

.chat-reaction-tooltip {
  position: absolute;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  color: #ffffff;
  display: none;
  z-index: 110;
  box-shadow: 0 2px 6px #00000080;
}

/* ============================================================
   [04.80] CHAT MESSAGE REACTIONS (INLINE)
   ============================================================ */

.chat-line .inline-reactions {
  display: inline-flex;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.inline-reaction {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #333333;
  border: 1px solid #444444;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 11px;
  color: #ffffff;
  cursor: pointer;
}

.inline-reaction:hover {
  background: #444444;
}

.inline-reaction .count {
  font-size: 10px;
  color: #bbbbbb;
}


/* ============================================================
   [04.81] CHAT MESSAGE REACTION ANIMATION
   ============================================================ */

@keyframes reactionPop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  60% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.inline-reaction.pop {
  animation: reactionPop 0.25s ease;
}


/* ============================================================
   [04.82] CHAT MESSAGE REACTION OVERFLOW
   ============================================================ */

.inline-reaction.more {
  background: #2a2a2a;
  border-color: #3a3a3a;
  color: #7fd1ff;
}

.inline-reaction.more:hover {
  background: #3a3a3a;
}

/* ============================================================
   [04.83] CHAT MESSAGE CONTEXT INDICATORS
   ============================================================ */

.chat-context {
  display: inline-block;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: #bbbbbb;
  margin-right: 6px;
}

.chat-context.system {
  background: #333333;
  border-color: #4a4a4a;
  color: #7fd1ff;
}

.chat-context.mod {
  background: #3a2a2a;
  border-color: #5a3a3a;
  color: #ff7f7f;
}


/* ============================================================
   [04.84] CHAT MESSAGE CONTEXT PANEL
   ============================================================ */

#chat_context_panel {
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 12px;
  margin-top: 10px;
  display: none;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  color: #cccccc;
}

#chat_context_panel h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #ffffff;
}

#chat_context_panel .context-entry {
  padding: 6px 0;
  border-bottom: 1px solid #2a2a2a;
  font-size: 13px;
}

#chat_context_panel .context-entry:last-child {
  border-bottom: none;
}

#chat_context_panel .context-entry:hover {
  background: #2a2a2a;
}


/* ============================================================
   [04.85] CHAT MESSAGE CONTEXT HIGHLIGHT
   ============================================================ */

.chat-line.context-highlight {
  background: #2a2a1a;
  border-left: 3px solid #7fd1ff;
  padding-left: 8px;
}

/* ============================================================
   [04.86] CHAT MESSAGE META INFO
   ============================================================ */

.chat-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #777777;
  margin-left: 6px;
}

.chat-meta .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.chat-meta .meta-item .icon {
  font-size: 12px;
  color: #aaaaaa;
}

.chat-meta .meta-item:hover {
  color: #cccccc;
}


/* ============================================================
   [04.87] CHAT MESSAGE EDIT INDICATOR
   ============================================================ */

.chat-edited {
  font-size: 11px;
  color: #999999;
  margin-left: 4px;
  font-style: italic;
}

.chat-edited:hover {
  color: #cccccc;
}


/* ============================================================
   [04.88] CHAT MESSAGE DELETE STATE
   ============================================================ */

.chat-line.deleted {
  opacity: 0.5;
  background: #1a1a1a;
  border-left: 3px solid #3a3a3a;
  padding-left: 8px;
}

.chat-line.deleted .message-text {
  text-decoration: line-through;
  color: #777777;
}

/* ============================================================
   [04.89] CHAT MESSAGE LINK PREVIEW
   ============================================================ */

.chat-link-preview {
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 10px;
  margin: 8px 0;
  display: flex;
  gap: 10px;
  color: #cccccc;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}

.chat-link-preview .thumbnail {
  width: 60px;
  height: 60px;
  background: #2a2a2a;
  border-radius: 4px;
}

.chat-link-preview .info {
  flex: 1;
}

.chat-link-preview .title {
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 4px;
}

.chat-link-preview .description {
  font-size: 12px;
  color: #aaaaaa;
}


/* ============================================================
   [04.90] CHAT END OF SECTION MARKER
   ============================================================ */

#chat_section_end {
  height: 1px;
  background: #333333;
  margin: 20px 0;
  opacity: 0.4;
}

/* ============================================================
   [05.00] CHANNEL LIST — CONTAINER
   ============================================================ */

#channel_list {
  width: 260px;
  background: #0f0f0f;
  border-right: 1px solid #1f1f1f;
  height: 100%;
  overflow-y: auto;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  color: #cccccc;
}

#channel_list h3 {
  font-size: 14px;
  font-weight: bold;
  padding: 12px;
  margin: 0;
  color: #ffffff;
  border-bottom: 1px solid #1f1f1f;
}


/* ============================================================
   [05.01] CHANNEL LIST — ITEM
   ============================================================ */

.channel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #1a1a1a;
}

.channel-item:hover {
  background: #1a1a1a;
}

.channel-item .avatar {
  width: 32px;
  height: 32px;
  background: #2a2a2a;
  border-radius: 50%;
}

.channel-item .info {
  flex: 1;
}

.channel-item .name {
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
}

.channel-item .status {
  font-size: 12px;
  color: #aaaaaa;
}


/* ============================================================
   [05.02] CHANNEL LIST — LIVE INDICATOR
   ============================================================ */

.channel-item.live .name {
  color: #ff6666;
}

.channel-item.live .status {
  color: #ff9999;
}

/* ============================================================
   [05.03] CHANNEL LIST — CATEGORY HEADER
   ============================================================ */

.channel-category {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  color: #888888;
  background: #111111;
  border-bottom: 1px solid #1a1a1a;
}


/* ============================================================
   [05.04] CHANNEL LIST — VIEWER COUNT
   ============================================================ */

.channel-item .viewer-count {
  font-size: 11px;
  color: #bbbbbb;
  margin-left: auto;
}

.channel-item.live .viewer-count {
  color: #ff7777;
}


/* ============================================================
   [05.05] CHANNEL LIST — FOLLOW BUTTON
   ============================================================ */

.channel-follow-btn {
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
}

.channel-follow-btn:hover {
  background: #3a3a3a;
}

.channel-follow-btn.following {
  background: #4a90e2;
  border-color: #6ab0ff;
}

.channel-follow-btn.following:hover {
  background: #6ab0ff;
}

/* ============================================================
   [05.06] CHANNEL LIST — OFFLINE STATE
   ============================================================ */

.channel-item.offline .name {
  color: #888888;
}

.channel-item.offline .status {
  color: #666666;
}


/* ============================================================
   [05.07] CHANNEL LIST — EXPANDABLE CATEGORIES
   ============================================================ */

.channel-category-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.channel-category-toggle .icon {
  font-size: 12px;
  color: #aaaaaa;
}

.channel-category.collapsed + .channel-category-content {
  display: none;
}


/* ============================================================
   [05.08] CHANNEL LIST — CATEGORY CONTENT WRAPPER
   ============================================================ */

.channel-category-content {
  background: #0f0f0f;
  border-bottom: 1px solid #1a1a1a;
}

/* ============================================================
   [05.09] DIRECTORY — GRID WRAPPER
   ============================================================ */

#directory_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 16px;
  background: #0f0f0f;
  color: #cccccc;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}


/* ============================================================
   [05.10] DIRECTORY — CARD
   ============================================================ */

.directory-card {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.directory-card:hover {
  border-color: #3a3a3a;
}

.directory-card .thumbnail {
  width: 100%;
  height: 120px;
  background: #2a2a2a;
}

.directory-card .info {
  padding: 10px;
}

.directory-card .title {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 4px;
}

.directory-card .category {
  font-size: 12px;
  color: #aaaaaa;
}

.directory-card .viewer-count {
  font-size: 11px;
  color: #bbbbbb;
  margin-top: 6px;
}

/* ============================================================
   [05.11] DIRECTORY — CARD HOVER OVERLAY
   ============================================================ */

.directory-card .hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #00000080;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.directory-card:hover .hover-overlay {
  opacity: 1;
}


/* ============================================================
   [05.12] DIRECTORY — CARD ACTION BUTTONS
   ============================================================ */

.directory-card .actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.directory-card .action-btn {
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
}

.directory-card .action-btn:hover {
  background: #3a3a3a;
}

.directory-card .action-btn.primary {
  background: #4a90e2;
  border-color: #6ab0ff;
}

.directory-card .action-btn.primary:hover {
  background: #6ab0ff;
}

/* ============================================================
   [05.13] DIRECTORY — TAG LIST
   ============================================================ */

.directory-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.directory-card .tag {
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: #bbbbbb;
}

.directory-card .tag:hover {
  background: #3a3a3a;
  color: #ffffff;
}


/* ============================================================
   [05.14] DIRECTORY — LOAD MORE BUTTON
   ============================================================ */

#directory_load_more {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px;
  margin: 16px 0;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  font-size: 13px;
  color: #ffffff;
  cursor: pointer;
}

#directory_load_more:hover {
  background: #2a2a2a;
}

/* ============================================================
   [05.15] DIRECTORY — EMPTY STATE
   ============================================================ */

#directory_empty_state {
  text-align: center;
  padding: 40px 20px;
  color: #888888;
  font-size: 14px;
}

#directory_empty_state .icon {
  font-size: 32px;
  color: #555555;
  margin-bottom: 12px;
}


/* ============================================================
   [05.16] DIRECTORY — FILTER BAR
   ============================================================ */

#directory_filter_bar {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  background: #111111;
  border-bottom: 1px solid #1a1a1a;
}

#directory_filter_bar select,
#directory_filter_bar input {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 6px 8px;
  color: #ffffff;
  font-size: 13px;
}

#directory_filter_bar select:hover,
#directory_filter_bar input:hover {
  border-color: #3a3a3a;
}

/* ============================================================
   [05.17] DIRECTORY — SORT DROPDOWN
   ============================================================ */

#directory_sort {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 6px 8px;
  color: #ffffff;
  font-size: 13px;
  cursor: pointer;
}

#directory_sort:hover {
  border-color: #3a3a3a;
}


/* ============================================================
   [05.18] DIRECTORY — SEARCH BAR
   ============================================================ */

#directory_search {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 8px 10px;
  color: #ffffff;
  font-size: 13px;
  margin-bottom: 12px;
}

#directory_search:hover {
  border-color: #3a3a3a;
}

/* ============================================================
   [05.19] DIRECTORY — PAGINATION
   ============================================================ */

#directory_pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px 0;
}

.directory-page-btn {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
}

.directory-page-btn:hover {
  background: #2a2a2a;
}

.directory-page-btn.active {
  background: #4a90e2;
  border-color: #6ab0ff;
}

.directory-page-btn.active:hover {
  background: #6ab0ff;
}


/* ============================================================
   [05.20] DIRECTORY — FOOTER
   ============================================================ */

#directory_footer {
  text-align: center;
  padding: 20px;
  font-size: 12px;
  color: #777777;
  border-top: 1px solid #1a1a1a;
}

/* ============================================================
   [05.21] DIRECTORY — HEADER
   ============================================================ */

#directory_header {
  padding: 16px;
  background: #0f0f0f;
  border-bottom: 1px solid #1a1a1a;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}

#directory_header h2 {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  margin: 0 0 6px 0;
}

#directory_header .subtitle {
  font-size: 13px;
  color: #aaaaaa;
}


/* ============================================================
   [05.22] DIRECTORY — END OF SECTION MARKER
   ============================================================ */

#directory_section_end {
  height: 1px;
  background: #333333;
  margin: 20px 0;
  opacity: 0.4;
}

/* ============================================================
   [06.00] STREAM PLAYER — CONTAINER
   ============================================================ */

#stream_player {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000000;
  overflow: hidden;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}


/* ============================================================
   [06.01] STREAM PLAYER — VIDEO ELEMENT
   ============================================================ */

#stream_video {
  width: 100%;
  height: 100%;
  background: #000000;
  object-fit: cover;
}


/* ============================================================
   [06.02] STREAM PLAYER — OVERLAY LAYER
   ============================================================ */

#stream_overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

/* ============================================================
   [06.03] STREAM PLAYER — CONTROL BAR
   ============================================================ */

#stream_controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #00000080;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

#stream_controls .control-btn {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: #ffffff;
  cursor: pointer;
}

#stream_controls .control-btn:hover {
  background: #2a2a2a;
}


/* ============================================================
   [06.04] STREAM PLAYER — TIMELINE BAR
   ============================================================ */

#stream_timeline {
  flex: 1;
  height: 6px;
  background: #2a2a2a;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
}

#stream_timeline .progress {
  height: 100%;
  background: #4a90e2;
  border-radius: 3px;
  width: 0%;
}

#stream_timeline:hover .progress {
  background: #6ab0ff;
}

/* ============================================================
   [06.05] STREAM PLAYER — VOLUME CONTROL
   ============================================================ */

#stream_volume {
  display: flex;
  align-items: center;
  gap: 6px;
}

#stream_volume .volume-bar {
  width: 80px;
  height: 6px;
  background: #2a2a2a;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

#stream_volume .volume-bar .level {
  height: 100%;
  background: #4a90e2;
  border-radius: 3px;
  width: 50%;
}

#stream_volume .volume-bar:hover .level {
  background: #6ab0ff;
}

#stream_volume .icon {
  font-size: 14px;
  color: #ffffff;
}


/* ============================================================
   [06.06] STREAM PLAYER — LIVE INDICATOR
   ============================================================ */

#stream_live_indicator {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #ff4444;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  pointer-events: none;
}

/* ============================================================
   [06.07] STREAM PLAYER — VIEWER COUNT BADGE
   ============================================================ */

#stream_viewer_count {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
}

#stream_viewer_count .icon {
  font-size: 14px;
  color: #cccccc;
}


/* ============================================================
   [06.08] STREAM PLAYER — STREAM TITLE BAR
   ============================================================ */

#stream_title_bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #00000080;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}

#stream_title_bar .title {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
}

#stream_title_bar .subtitle {
  font-size: 13px;
  color: #cccccc;
}

/* ============================================================
   [06.09] STREAM PLAYER — CHAT DOCK (COLLAPSIBLE)
   ============================================================ */

#stream_chat_dock {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 320px;
  background: #0f0f0f;
  border-left: 1px solid #1f1f1f;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
}

#stream_chat_dock.collapsed {
  transform: translateX(100%);
}

#stream_chat_toggle {
  position: absolute;
  left: -32px;
  top: 20px;
  width: 32px;
  height: 32px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

#stream_chat_toggle:hover {
  background: #2a2a2a;
}

/* ============================================================
   [06.10] STREAM PLAYER — MINI-CHAT HEADER
   ============================================================ */

#stream_chat_header {
  padding: 10px 12px;
  background: #111111;
  border-bottom: 1px solid #1f1f1f;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#stream_chat_header .title {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}

#stream_chat_header .popout-btn {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
}

#stream_chat_header .popout-btn:hover {
  background: #2a2a2a;
}


/* ============================================================
   [06.11] STREAM PLAYER — MINI-CHAT BODY
   ============================================================ */

#stream_chat_body {
  flex: 1;
  overflow-y: auto;
  background: #0f0f0f;
  padding: 10px;
}

/* ============================================================
   [06.12] STREAM PLAYER — MINI-CHAT INPUT BAR
   ============================================================ */

#stream_chat_input {
  padding: 10px;
  background: #111111;
  border-top: 1px solid #1f1f1f;
  display: flex;
  gap: 8px;
}

#stream_chat_input input {
  flex: 1;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 8px 10px;
  color: #ffffff;
  font-size: 13px;
}

#stream_chat_input input:hover {
  border-color: #3a3a3a;
}

#stream_chat_input button {
  background: #4a90e2;
  border: 1px solid #6ab0ff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  color: #ffffff;
  cursor: pointer;
}

#stream_chat_input button:hover {
  background: #6ab0ff;
}

/* ============================================================
   [06.13] STREAM PLAYER — THEATER MODE TOGGLE
   ============================================================ */

#stream_theater_toggle {
  position: absolute;
  bottom: 60px;
  right: 12px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
  z-index: 20;
}

#stream_theater_toggle:hover {
  background: #2a2a2a;
}


/* ============================================================
   [06.14] STREAM PLAYER — FULLSCREEN TOGGLE
   ============================================================ */

#stream_fullscreen_toggle {
  position: absolute;
  bottom: 20px;
  right: 12px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
  z-index: 20;
}

#stream_fullscreen_toggle:hover {
  background: #2a2a2a;
}

/* ============================================================
   [06.15] STREAM PLAYER — END OF SECTION MARKER
   ============================================================ */

#stream_section_end {
  height: 1px;
  background: #333333;
  margin: 20px 0;
  opacity: 0.4;
}

/* ============================================================
   [07.00] USER PROFILE — CONTAINER
   ============================================================ */

#user_profile {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  background: #0f0f0f;
  border: 1px solid #1f1f1f;
  border-radius: 8px;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}


/* ============================================================
   [07.01] USER PROFILE — HEADER
   ============================================================ */

#user_profile_header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

#user_profile_header .avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 2px solid #2a2a2a;
}

#user_profile_header .info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#user_profile_header .info .username {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
}

#user_profile_header .info .status {
  font-size: 13px;
  color: #cccccc;
}

/* ============================================================
   [07.02] USER PROFILE — BIO SECTION
   ============================================================ */

#user_profile_bio {
  margin-bottom: 24px;
  padding: 16px;
  background: #111111;
  border: 1px solid #1f1f1f;
  border-radius: 6px;
}

#user_profile_bio h3 {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 8px;
}

#user_profile_bio p {
  font-size: 13px;
  color: #cccccc;
  line-height: 1.5;
}


/* ============================================================
   [07.03] USER PROFILE — STATS GRID
   ============================================================ */

#user_profile_stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.user_stat_card {
  background: #111111;
  border: 1px solid #1f1f1f;
  border-radius: 6px;
  padding: 14px;
  text-align: center;
}

.user_stat_card .value {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
}

.user_stat_card .label {
  font-size: 12px;
  color: #aaaaaa;
  margin-top: 4px;
}

/* ============================================================
   [07.04] USER PROFILE — BADGES SECTION
   ============================================================ */

#user_profile_badges {
  margin-bottom: 24px;
  padding: 16px;
  background: #111111;
  border: 1px solid #1f1f1f;
  border-radius: 6px;
}

#user_profile_badges h3 {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 10px;
}

#user_profile_badges .badge_list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.user_badge {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
}

.user_badge:hover {
  background: #2a2a2a;
}


/* ============================================================
   [07.05] USER PROFILE — SOCIAL LINKS
   ============================================================ */

#user_profile_social {
  margin-bottom: 24px;
  padding: 16px;
  background: #111111;
  border: 1px solid #1f1f1f;
  border-radius: 6px;
}

#user_profile_social h3 {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 10px;
}

#user_profile_social .social_list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user_social_link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4a90e2;
  font-size: 13px;
  cursor: pointer;
}

.user_social_link:hover {
  color: #6ab0ff;
}

/* ============================================================
   [07.06] USER PROFILE — ACCOUNT SETTINGS PANEL
   ============================================================ */

#user_account_settings {
  margin-bottom: 24px;
  padding: 20px;
  background: #111111;
  border: 1px solid #1f1f1f;
  border-radius: 6px;
}

#user_account_settings h3 {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 12px;
}

#user_account_settings .setting_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #1a1a1a;
}

#user_account_settings .setting_row:last-child {
  border-bottom: none;
}

#user_account_settings .setting_label {
  font-size: 13px;
  color: #cccccc;
}

#user_account_settings .setting_action {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
}

#user_account_settings .setting_action:hover {
  background: #2a2a2a;
}

/* ============================================================
   [07.07] USER PROFILE — SECURITY PANEL
   ============================================================ */

#user_security_panel {
  margin-bottom: 24px;
  padding: 20px;
  background: #111111;
  border: 1px solid #1f1f1f;
  border-radius: 6px;
}

#user_security_panel h3 {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 12px;
}

#user_security_panel .security_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #1a1a1a;
}

#user_security_panel .security_row:last-child {
  border-bottom: none;
}

#user_security_panel .security_label {
  font-size: 13px;
  color: #cccccc;
}

#user_security_panel .security_action {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
}

#user_security_panel .security_action:hover {
  background: #2a2a2a;
}

/* ============================================================
   [07.08] USER PROFILE — NOTIFICATION SETTINGS
   ============================================================ */

#user_notification_settings {
  margin-bottom: 24px;
  padding: 20px;
  background: #111111;
  border: 1px solid #1f1f1f;
  border-radius: 6px;
}

#user_notification_settings h3 {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 12px;
}

#user_notification_settings .notify_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #1a1a1a;
}

#user_notification_settings .notify_row:last-child {
  border-bottom: none;
}

#user_notification_settings .notify_label {
  font-size: 13px;
  color: #cccccc;
}

#user_notification_settings .notify_toggle {
  width: 40px;
  height: 20px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
}

#user_notification_settings .notify_toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

#user_notification_settings .notify_toggle.active {
  background: #4a90e2;
  border-color: #6ab0ff;
}

#user_notification_settings .notify_toggle.active::after {
  transform: translateX(20px);
}

/* ============================================================
   [07.09] USER PROFILE — PRIVACY SETTINGS
   ============================================================ */

#user_privacy_settings {
  margin-bottom: 24px;
  padding: 20px;
  background: #111111;
  border: 1px solid #1f1f1f;
  border-radius: 6px;
}

#user_privacy_settings h3 {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 12px;
}

#user_privacy_settings .privacy_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #1a1a1a;
}

#user_privacy_settings .privacy_row:last-child {
  border-bottom: none;
}

#user_privacy_settings .privacy_label {
  font-size: 13px;
  color: #cccccc;
}

#user_privacy_settings .privacy_dropdown {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
}

#user_privacy_settings .privacy_dropdown:hover {
  background: #2a2a2a;
}

/* ============================================================
   [07.10] USER PROFILE — END OF SECTION MARKER
   ============================================================ */

#user_profile_section_end {
  height: 1px;
  background: #333333;
  margin: 20px 0;
  opacity: 0.4;
}

/* ============================================================
   [08.00] NOTIFICATIONS — CONTAINER
   ============================================================ */

#notifications_panel {
  position: fixed;
  top: 70px;
  right: 20px;
  width: 320px;
  max-height: 80vh;
  overflow-y: auto;
  background: #0f0f0f;
  border: 1px solid #1f1f1f;
  border-radius: 8px;
  padding: 10px;
  z-index: 2000;
}


/* ============================================================
   [08.01] NOTIFICATION ITEM
   ============================================================ */

.notification_item {
  background: #111111;
  border: 1px solid #1f1f1f;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notification_item .title {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}

.notification_item .message {
  font-size: 12px;
  color: #cccccc;
}

.notification_item .timestamp {
  font-size: 11px;
  color: #888888;
  margin-top: 4px;
}

/* ============================================================
   [08.02] NOTIFICATION TYPES (SUCCESS / WARNING / ERROR)
   ============================================================ */

.notification_success {
  border-left: 4px solid #4caf50;
}

.notification_warning {
  border-left: 4px solid #ffb300;
}

.notification_error {
  border-left: 4px solid #e53935;
}


/* ============================================================
   [08.03] NOTIFICATION CLOSE BUTTON
   ============================================================ */

.notification_close {
  align-self: flex-end;
  font-size: 12px;
  color: #888888;
  cursor: pointer;
}

.notification_close:hover {
  color: #ffffff;
}

/* ============================================================
   [08.04] TOAST POPUP (AUTO-DISMISS)
   ============================================================ */

.toast_popup {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #111111;
  border: 1px solid #1f1f1f;
  padding: 14px 18px;
  border-radius: 6px;
  color: #ffffff;
  font-size: 13px;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 3000;
}

.toast_popup.show {
  opacity: 1;
  transform: translateY(0);
}

.toast_popup.success {
  border-left: 4px solid #4caf50;
}

.toast_popup.warning {
  border-left: 4px solid #ffb300;
}

.toast_popup.error {
  border-left: 4px solid #e53935;
}

/* ============================================================
   [08.05] SYSTEM ALERT BANNER (TOP OF SCREEN)
   ============================================================ */

#system_alert_banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 12px 20px;
  background: #b71c1c;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  z-index: 5000;
  display: none;
}

#system_alert_banner.show {
  display: block;
}

#system_alert_banner.warning {
  background: #ff8f00;
}

#system_alert_banner.success {
  background: #2e7d32;
}

/* ============================================================
   [08.06] NOTIFICATIONS — END OF SECTION MARKER
   ============================================================ */

#notifications_section_end {
  height: 1px;
  background: #333333;
  margin: 20px 0;
  opacity: 0.4;
}

/* ============================================================
   [09.00] ADMIN PANEL — CONTAINER
   ============================================================ */

#admin_panel {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
  background: #0f0f0f;
  border: 1px solid #1f1f1f;
  border-radius: 8px;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}


/* ============================================================
   [09.01] ADMIN PANEL — HEADER
   ============================================================ */

#admin_panel_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

#admin_panel_header h2 {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
}

#admin_panel_header .admin_tools {
  display: flex;
  gap: 10px;
}

.admin_tool_button {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
}

.admin_tool_button:hover {
  background: #2a2a2a;
}

/* ============================================================
   [09.02] ADMIN — USER LIST TABLE
   ============================================================ */

#admin_user_list {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
}

#admin_user_list th,
#admin_user_list td {
  padding: 10px;
  border: 1px solid #1f1f1f;
  font-size: 13px;
}

#admin_user_list th {
  background: #1a1a1a;
  color: #ffffff;
  font-weight: bold;
}

#admin_user_list td {
  background: #111111;
  color: #cccccc;
}

#admin_user_list tr:hover td {
  background: #1a1a1a;
}

/* ============================================================
   [09.03] ADMIN — USER ACTION BUTTONS
   ============================================================ */

.admin_user_actions {
  display: flex;
  gap: 8px;
}

.admin_action_button {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
}

.admin_action_button:hover {
  background: #2a2a2a;
}

.admin_action_button.ban {
  border-left: 4px solid #e53935;
}

.admin_action_button.warn {
  border-left: 4px solid #ffb300;
}

.admin_action_button.promote {
  border-left: 4px solid #4caf50;
}

/* ============================================================
   [09.04] ADMIN — MODERATION LOG
   ============================================================ */

#moderation_log {
  background: #0f0f0f;
  border: 1px solid #1f1f1f;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 24px;
}

#moderation_log h3 {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 12px;
}

.moderation_entry {
  padding: 10px;
  border-bottom: 1px solid #1a1a1a;
}

.moderation_entry:last-child {
  border-bottom: none;
}

.moderation_entry .mod_action {
  font-size: 13px;
  color: #cccccc;
}

.moderation_entry .mod_timestamp {
  font-size: 11px;
  color: #888888;
  margin-top: 4px;
}

/* ============================================================
   [09.05] ADMIN — END OF SECTION MARKER
   ============================================================ */

#admin_section_end {
  height: 1px;
  background: #333333;
  margin: 20px 0;
  opacity: 0.4;
}

/* ============================================================
   [10.00] LEGACY OVERRIDES — GENERAL
   ============================================================ */

.legacy_override {
  background: #0d0d0d !important;
  border: 1px solid #222222 !important;
  color: #cccccc !important;
  padding: 8px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}

/* ============================================================
   [10.01] LEGACY BUTTON FIXES
   ============================================================ */

.legacy_button {
  background: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  color: #ffffff !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}

.legacy_button:hover {
  background: #2a2a2a !important;
}

/* ============================================================
   [10.02] LEGACY INPUT FIXES
   ============================================================ */

.legacy_input {
  background: #0f0f0f !important;
  border: 1px solid #222222 !important;
  color: #ffffff !important;
  padding: 6px 10px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}

.legacy_input:focus {
  border-color: #4a90e2 !important;
  outline: none !important;
}

/* ============================================================
   [10.03] LEGACY DROPDOWN FIXES
   ============================================================ */

.legacy_dropdown {
  background: #0f0f0f !important;
  border: 1px solid #222222 !important;
  color: #ffffff !important;
  padding: 6px 10px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

.legacy_dropdown:hover {
  background: #1a1a1a !important;
}

/* ============================================================
   [10.04] LEGACY SECTION END
   ============================================================ */

#legacy_section_end {
  height: 1px;
  background: #333333;
  margin: 20px 0;
  opacity: 0.4;
}