/* STREAMING_CHUNK: Defining root variables and cybernetic neon color tokens */
:root {
--bg-dark: #02050c;
--bg-panel: rgba(5, 15, 35, 0.85);
--hud-cyan: #00f3ff;
--hud-blue: #0066ff;
--hud-red: #ff3e3e;
--hud-green: #00ff66;
--hud-yellow: #ffe600;

--hud-cyan-glow: 0 0 10px rgba(0, 243, 255, 0.35);
--hud-blue-glow: 0 0 10px rgba(0, 102, 255, 0.35);
--hud-red-glow: 0 0 10px rgba(255, 62, 62, 0.35);
--hud-green-glow: 0 0 10px rgba(0, 255, 102, 0.35);

--hud-panel-border: rgba(0, 243, 255, 0.15);
--hud-panel-border-active: rgba(0, 243, 255, 0.5);

--text-primary: #e2f5ff;
--text-secondary: #7fa8bf;
--text-muted: #4a6c80;

--font-mono: 'Share Tech Mono', monospace;
--font-sans: 'Inter', sans-serif;


}

/* STREAMING_CHUNK: Resetting base browser formatting and setting grid background */

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body.hud-theme {
background-color: var(--bg-dark);
color: var(--text-primary);
font-family: var(--font-sans);
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
background-image:
linear-gradient(rgba(0, 243, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 243, 255, 0.02) 1px, transparent 1px);
background-size: 30px 30px;
background-position: center;
position: relative;
}

/* STREAMING_CHUNK: Formatting header status dashboard and clocks */
.hud-header {
height: 50px;
background: rgba(2, 5, 12, 0.95);
border-bottom: 2px solid var(--hud-cyan);
box-shadow: 0 2px 15px rgba(0, 243, 255, 0.2);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
z-index: 100;
}

.header-left {
display: flex;
align-items: center;
gap: 12px;
}

.hud-pulse-dot {
width: 8px;
height: 8px;
background-color: var(--hud-green);
border-radius: 50%;
box-shadow: 0 0 10px var(--hud-green);
animation: pulse 1.8s infinite;
}

@keyframes pulse {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 102, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(0, 255, 102, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 102, 0); }
}

.hud-logo {
font-size: 1.15rem;
font-weight: 700;
color: var(--hud-cyan);
text-shadow: var(--hud-cyan-glow);
letter-spacing: 1px;
}

.header-center {
display: flex;
gap: 30px;
font-size: 0.85rem;
}

.hud-stat-box {
border-left: 3px solid var(--hud-blue);
padding-left: 10px;
}

.hud-stat-box span:first-child {
color: var(--text-secondary);
}

.text-green { color: var(--hud-green) !important; text-shadow: var(--hud-green-glow); }
.text-cyan { color: var(--hud-cyan) !important; text-shadow: var(--hud-cyan-glow); }
.text-red { color: var(--hud-red) !important; text-shadow: var(--hud-red-glow); }
.text-yellow { color: var(--hud-yellow) !important; }

.header-right {
font-size: 0.85rem;
color: var(--text-secondary);
}

/* STREAMING_CHUNK: Structuring primary layout split grids and bars */
.ide-body {
flex: 1;
display: flex;
position: relative;
overflow: hidden;
}

.hud-activity-bar {
width: 55px;
background: rgba(3, 10, 25, 0.95);
border-right: 2px solid var(--hud-panel-border);
display: flex;
flex-direction: column;
align-items: center;
padding-top: 15px;
gap: 15px;
z-index: 15;
flex-shrink: 0;
}

.activity-tab {
width: 40px;
height: 40px;
border-radius: 6px;
border: 1px solid transparent;
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.25s ease;
position: relative;
}

.activity-tab:hover {
color: var(--hud-cyan);
background: rgba(0, 243, 255, 0.05);
border-color: rgba(0, 243, 255, 0.15);
}

.activity-tab.active {
color: var(--hud-cyan);
background: rgba(0, 243, 255, 0.08);
border-color: var(--hud-cyan);
box-shadow: var(--hud-cyan-glow);
}

.activity-tab.active::before {
content: '';
position: absolute;
left: 0;
top: 25%;
height: 50%;
width: 3px;
background-color: var(--hud-cyan);
box-shadow: var(--hud-cyan-glow);
border-radius: 0 3px 3px 0;
}

/* STREAMING_CHUNK: Styling the dual modular bottom split drawer panels */
#bottom-vfs-drawer {
position: absolute;
bottom: 0;
left: 0;
width: 50%;
height: 250px;
background: rgba(3, 10, 25, 0.95);
border-top: 2px solid var(--hud-panel-border);
border-right: 1px solid var(--hud-panel-border);
transition: height 0.3s cubic-bezier(0.1, 0.9, 0.2, 1);
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 12;
}

#bottom-vfs-drawer.collapsed {
height: 35px;
}

#bottom-audio-drawer {
position: absolute;
bottom: 0;
left: 50%;
right: 0;
height: 250px;
background: rgba(3, 10, 25, 0.95);
border-top: 2px solid var(--hud-panel-border);
border-left: 1px solid var(--hud-panel-border);
transition: height 0.3s cubic-bezier(0.1, 0.9, 0.2, 1);
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 12;
}

#bottom-audio-drawer.collapsed {
height: 35px;
}

.vfs-pane {
display: flex;
flex-direction: row;
gap: 15px;
height: calc(100% - 35px);
width: 100%;
}

.audio-pane {
display: flex;
flex-direction: column;
gap: 10px;
height: calc(100% - 35px);
width: 100%;
}

/* STREAMING_CHUNK: Formulating HUD buttons and user micro-interfaces */
.hud-btn {
background: rgba(0, 102, 255, 0.1);
border: 1px solid var(--hud-blue);
color: var(--text-primary);
padding: 6px 12px;
border-radius: 4px;
font-family: var(--font-mono);
font-size: 0.8rem;
cursor: pointer;
transition: all 0.25s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
white-space: nowrap;
}

.hud-btn:hover {
background: rgba(0, 102, 255, 0.3);
box-shadow: var(--hud-blue-glow);
border-color: var(--hud-cyan);
}

.hud-btn.glow-cyan {
border-color: var(--hud-cyan);
background: rgba(0, 243, 255, 0.05);
}
.hud-btn.glow-cyan:hover {
background: rgba(0, 243, 255, 0.2);
box-shadow: var(--hud-cyan-glow);
}

.hud-btn.glow-blue {
border-color: var(--hud-blue);
background: rgba(0, 102, 255, 0.05);
}
.hud-btn.glow-blue:hover {
background: rgba(0, 102, 255, 0.25);
box-shadow: var(--hud-blue-glow);
}

.hud-btn.glow-green {
border-color: var(--hud-green);
background: rgba(0, 255, 102, 0.05);
}
.hud-btn.glow-green:hover {
background: rgba(0, 255, 102, 0.25);
box-shadow: var(--hud-green-glow);
}

.hud-btn.glow-red {
border-color: var(--hud-red);
background: rgba(255, 62, 62, 0.05);
}
.hud-btn.glow-red:hover {
background: rgba(255, 62, 62, 0.25);
box-shadow: var(--hud-red-glow);
}

.w-full { width: 100%; }
.text-center { justify-content: center; }
.cursor-pointer { cursor: pointer; }

/* STREAMING_CHUNK: Styling layout directory VFS explorer trees */
.file-actions {
display: flex;
flex-direction: column;
gap: 8px;
}

.folder-action-group {
display: flex;
gap: 6px;
}

.folder-action-group button {
flex: 1;
}

.current-path-display {
background: rgba(3, 8, 20, 0.7);
border: 1px solid rgba(0, 243, 255, 0.1);
padding: 4px 8px;
border-radius: 4px;
display: flex;
gap: 6px;
font-size: 0.75rem;
}

.path-label { color: var(--text-muted); }
.path-value {
color: var(--hud-cyan);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.file-tree {
display: flex;
flex-direction: column;
gap: 2px;
font-family: var(--font-mono);
font-size: 0.8rem;
}

.file-tree-node {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 8px;
border-radius: 4px;
cursor: pointer;
user-select: none;
border: 1px solid transparent;
transition: all 0.15s;
}

.file-tree-node:hover {
background: rgba(0, 243, 255, 0.05);
border-color: rgba(0, 243, 255, 0.15);
}

.file-node-left {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}

.file-node-left span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.node-toggle-icon {
width: 12px;
display: inline-flex;
justify-content: center;
transition: transform 0.2s;
}

.node-toggle-icon.expanded {
transform: rotate(90deg);
}

.depth-0 { padding-left: 6px; }
.depth-1 { padding-left: 20px; }
.depth-2 { padding-left: 34px; }
.depth-3 { padding-left: 48px; }
.depth-4 { padding-left: 62px; }

.active-dir {
background: rgba(0, 102, 255, 0.1);
border-color: rgba(0, 102, 255, 0.4);
color: var(--hud-cyan);
}

.active-file {
background: rgba(0, 243, 255, 0.08);
border-color: var(--hud-cyan);
color: #fff;
font-weight: bold;
}

.node-controls-group {
display: flex;
align-items: center;
gap: 4px;
}

.file-delete-btn, .file-rename-btn {
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: 4px;
border-radius: 3px;
transition: all 0.2s;
font-size: 0.75rem;
}

.file-delete-btn:hover {
color: var(--hud-red);
background: rgba(255, 62, 62, 0.1);
}

.file-rename-btn:hover {
color: var(--hud-cyan);
background: rgba(0, 243, 255, 0.1);
}

.empty-state {
color: var(--text-muted);
font-style: italic;
text-align: center;
padding: 20px 0;
font-size: 0.75rem;
}

/* STREAMING_CHUNK: Adjusting split containers in visual panels */
#middle-container {
flex: 1;
display: flex;
height: 100%;
overflow: hidden;
background: rgba(2, 5, 12, 0.5);
position: relative;
}

.hud-sub-panel {
transition: width 0.35s cubic-bezier(0.1, 0.9, 0.2, 1), flex 0.35s cubic-bezier(0.1, 0.9, 0.2, 1);
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border-right: 1px solid var(--hud-panel-border);
}

.hud-sub-panel:last-child {
border-right: none;
}

.hud-sub-panel.collapsed {
width: 0% !important;
min-width: 0 !important;
flex: 0 0 0 !important;
border-right: none !important;
}

.viewer-content {
flex: 1;
position: relative;
overflow: auto;
background: #02050c;
}

/* STREAMING_CHUNK: Structuring translation right-sidebar styles */
.hud-panel {
background: var(--bg-panel);
border: 1px solid var(--hud-panel-border);
display: flex;
flex-direction: column;
transition: width 0.3s cubic-bezier(0.1, 0.9, 0.2, 1);
position: relative;
z-index: 10;
}

#right-sidebar.sidebar-expanded { width: 320px; }
#right-sidebar.sidebar-collapsed { width: 45px; }
#right-sidebar { border-left: 2px solid var(--hud-panel-border); }

.panel-header {
height: 40px;
background: rgba(3, 10, 25, 0.9);
border-bottom: 1px solid var(--hud-panel-border);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 12px;
overflow: hidden;
white-space: nowrap;
flex-shrink: 0;
}

/* STREAMING_CHUNK: Overriding header overflow to allow dropdown menu projection */
#canvas-panel .panel-header {
overflow: visible !important;
}

.panel-title {
font-family: var(--font-mono);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--hud-cyan);
}

.toggle-btn {
background: transparent;
border: none;
color: var(--hud-cyan);
cursor: pointer;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s;
}

.toggle-btn:hover {
color: #fff;
text-shadow: var(--hud-cyan-glow);
}

.sidebar-content {
flex: 1;
padding: 12px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
}

.sidebar-collapsed .sidebar-content { display: none; }
.sidebar-collapsed .panel-title { display: none; }
.sidebar-collapsed .panel-header { justify-content: center; padding: 0; }

/* STREAMING_CHUNK: Formatting buttons and controllers inside viewer layouts */
.pdf-controls, .canvas-controls {
display: flex;
align-items: center;
gap: 8px;
}

.hud-icon-btn {
background: rgba(3, 10, 25, 0.8);
border: 1px solid var(--hud-panel-border);
color: var(--text-secondary);
width: 28px;
height: 28px;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}

.hud-icon-btn:hover, .hud-icon-btn.active {
color: var(--hud-cyan);
border-color: var(--hud-cyan);
box-shadow: var(--hud-cyan-glow);
background: rgba(0, 243, 255, 0.05);
}

.hud-icon-btn.glow-red:hover {
color: var(--hud-red);
border-color: var(--hud-red);
box-shadow: var(--hud-red-glow);
background: rgba(255, 62, 62, 0.05);
}

#zoom-percent, #page-num, #page-count {
font-size: 0.8rem;
color: var(--hud-cyan);
font-family: var(--font-mono);
}

/* STREAMING_CHUNK: Styling Canvas and Digital Memo boards */
#canvas-wrapper {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}

#memo-canvas {
display: block;
width: 100%;
height: 100%;
touch-action: none;
}

.hud-color-picker {
border: 1px solid var(--hud-panel-border);
background: transparent;
width: 28px;
height: 28px;
padding: 0;
cursor: pointer;
border-radius: 4px;
}

.hud-select {
background: rgba(3, 10, 25, 0.9);
border: 1px solid var(--hud-panel-border);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 0.8rem;
padding: 3px 6px;
border-radius: 4px;
outline: none;
cursor: pointer;
}

.hud-select:focus {
border-color: var(--hud-cyan);
}

/* STREAMING_CHUNK: Designing collapsible shapes tool box and HUD submenus */
.hud-tool-group {
position: relative;
display: inline-block;
}

.hud-submenu {
display: none;
flex-direction: column;
gap: 6px;
position: absolute;
top: 35px;
left: 50%;
transform: translateX(-50%);
background: rgba(3, 10, 25, 0.98);
border: 1px solid var(--hud-panel-border);
box-shadow: var(--hud-cyan-glow), 0 4px 15px rgba(0, 0, 0, 0.8);
border-radius: 4px;
padding: 6px;
z-index: 1000;
}

.hud-submenu.show {
display: flex;
}

.hud-submenu .submenu-item {
width: 28px;
height: 28px;
}

/* STREAMING_CHUNK: Designing Translation system visual components */
.translation-switch-box {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid rgba(0, 243, 255, 0.1);
background: rgba(3, 10, 25, 0.6);
padding: 10px;
border-radius: 4px;
}

.switch-label {
font-size: 0.75rem;
font-family: var(--font-mono);
color: var(--text-secondary);
}

.hud-switch {
position: relative;
display: inline-block;
width: 38px;
height: 20px;
}

.hud-switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(3, 10, 25, 0.9);
border: 1px solid var(--hud-panel-border);
transition: .3s cubic-bezier(0.1, 0.9, 0.2, 1);
border-radius: 10px;
}

.slider:before {
position: absolute;
content: "";
height: 12px;
width: 12px;
left: 3px;
bottom: 3px;
background-color: var(--text-muted);
transition: .3s cubic-bezier(0.1, 0.9, 0.2, 1);
border-radius: 50%;
}

input:checked + .slider {
border-color: var(--hud-cyan);
box-shadow: var(--hud-cyan-glow);
}

input:checked + .slider:before {
transform: translateX(18px);
background-color: var(--hud-cyan);
box-shadow: var(--hud-cyan-glow);
}

.translation-section {
display: flex;
flex-direction: column;
gap: 8px;
}

.hud-section-label {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-muted);
letter-spacing: 0.5px;
}

.hud-terminal-box {
background: rgba(2, 5, 12, 0.9);
border: 1px solid var(--hud-panel-border);
border-radius: 4px;
padding: 10px;
font-size: 0.8rem;
line-height: 1.4;
min-height: 90px;
max-height: 140px;
overflow-y: auto;
color: var(--text-primary);
outline: none;
transition: border-color 0.2s;
}

.hud-terminal-box.empty {
color: var(--text-muted);
}

.hud-terminal-box:focus {
border-color: var(--hud-cyan);
box-shadow: var(--hud-cyan-glow);
}

.hud-terminal-box-output {
background: rgba(3, 10, 25, 0.95);
border-left: 3px solid var(--hud-cyan);
border-top: 1px solid var(--hud-panel-border);
border-right: 1px solid var(--hud-panel-border);
border-bottom: 1px solid var(--hud-panel-border);
border-radius: 0 4px 4px 0;
padding: 12px;
font-size: 0.85rem;
line-height: 1.5;
min-height: 120px;
overflow-y: auto;
}

.hud-terminal-text {
font-family: var(--font-mono);
color: var(--text-secondary);
}

.translation-footer {
border-top: 1px dashed rgba(0, 243, 255, 0.1);
padding-top: 12px;
margin-top: auto;
}

/* STREAMING_CHUNK: Adjusting PDF alignment structures */
#pdf-scroll-container {
width: 100%;
height: 100%;
overflow: auto;
display: flex;
justify-content: center;
background: #030814;
padding: 15px;
}

#pdf-canvas-container {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(0, 243, 255, 0.1);
position: relative;
background: white;
}

#pdf-canvas {
display: block;
}

.textLayer {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
opacity: 0.25;
line-height: 1.0;
overflow: hidden;
}

.textLayer span {
color: transparent;
position: absolute;
white-space: pre;
cursor: text;
transform-origin: 0% 0%;
}

.textLayer ::selection {
background: rgba(0, 243, 255, 0.45);
color: transparent;
}

/* STREAMING_CHUNK: Styling the newly relocated AI Coprocessor in right-sidebar */
.ai-pane {
display: flex;
flex-direction: column;
gap: 8px;
}

.ai-chat-output {
background: rgba(2, 5, 12, 0.9);
border: 1px solid var(--hud-panel-border);
border-radius: 4px;
padding: 8px;
font-family: var(--font-mono);
font-size: 0.8rem;
display: flex;
flex-direction: column;
gap: 8px;
color: var(--text-primary);
}

.ai-msg {
line-height: 1.4;
padding: 4px 6px;
border-radius: 4px;
}

.ai-msg.user {
color: var(--hud-cyan);
background: rgba(0, 243, 255, 0.05);
border-left: 2px solid var(--hud-cyan);
}

.ai-msg.model {
color: var(--text-primary);
background: rgba(0, 255, 102, 0.02);
border-left: 2px solid var(--hud-green);
}

.ai-input-row .hud-input {
background: rgba(3, 8, 20, 0.95);
border: 1px solid var(--hud-panel-border);
color: var(--text-primary);
padding: 4px 8px;
border-radius: 4px;
font-family: var(--font-sans);
outline: none;
}

.ai-input-row .hud-input:focus {
border-color: var(--hud-cyan);
box-shadow: var(--hud-cyan-glow);
}

/* STREAMING_CHUNK: Common alerts and general glowing scrolls */
.hud-toast {
position: fixed;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
background: rgba(2, 5, 12, 0.95);
border: 1px solid var(--hud-cyan);
box-shadow: var(--hud-cyan-glow);
padding: 10px 25px;
border-radius: 4px;
z-index: 10000;
font-size: 0.85rem;
color: var(--text-primary);
letter-spacing: 0.5px;
transition: opacity 0.3s, transform 0.3s;
}

.hud-toast.hidden {
opacity: 0;
transform: translate(-50%, 15px);
pointer-events: none;
}

::-webkit-scrollbar {
width: 6px;
height: 6px;
}

::-webkit-scrollbar-track {
background: rgba(2, 5, 12, 0.4);
}

::-webkit-scrollbar-thumb {
background: rgba(0, 243, 255, 0.25);
border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
background: var(--hud-cyan);
}