.aal-install-lib-root {
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size: 14px;
color: #ffffff;
background: #090f11;
display: flex;
flex-direction: column;
max-width: 1000px;
overflow: hidden;
user-select: none;
pointer-events: none;
position: relative;
margin: 20px 0;
}

.aal-install-lib-root::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7);
pointer-events: none;
z-index: 50;
}

.aal-install-lib-layout {
display: flex;
flex-direction: row;
flex: 1;
min-height: 0;
}

/* ──────────────────────────── SIDE PANEL */
.aal-install-lib-side-panel {
width: 54px;
flex-shrink: 0;
background: #090f11;
border-right: 1px solid #232b2e;
display: flex;
flex-direction: column;
padding: 16px 8px;
margin-top: 2px;
}

.aal-install-lib-nav-top    { display: flex; flex-direction: column; gap: 16px; }
.aal-install-lib-nav-middle { display: flex; flex-direction: column; gap: 16px; }
.aal-install-lib-nav-bottom { display: flex; flex-direction: column; gap: 16px; margin-top: auto; }

.aal-install-lib-nav-divider { height: 2px; background: #232b2e; margin: 16px 0; }

.aal-install-lib-nav-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
color: #ffffff;
height: 54px;
width: 100%;
cursor: default;
}

.aal-install-lib-nav-icon {
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(35, 43, 46, 1);
flex-shrink: 0;
}

.aal-install-lib-nav-label { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; }

.aal-install-lib-nav-link.is-active { color: #25c2c7; }
.aal-install-lib-nav-link.is-active .aal-install-lib-nav-icon { background: rgb(35, 55, 58); outline: 1px solid #25c2c7; }
.aal-install-lib-nav-link.is-muted { color: #5d6a6b; }

/* ──────────────────────────── OUTLET */
.aal-install-lib-outlet {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
background: #090f11;
overflow: hidden;
}

.aal-install-lib-app-detail { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ──────────────────────────── TOP BAR */
.aal-install-lib-top-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
height: 56px;
flex-shrink: 0;
gap: 16px;
}

.aal-install-lib-breadcrumbs {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #c9d2d2;
overflow: hidden;
}

.aal-install-lib-crumb-sep { color: #5d6a6b; font-size: 11px; }
.aal-install-lib-crumb-app { font-weight: 600; color: #ffffff; white-space: nowrap; }

.aal-install-lib-runtime-actions { display: flex; gap: 16px; align-items: center; flex-shrink: 0; }

.aal-install-lib-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
border: none;
cursor: default;
white-space: nowrap;
}

.aal-install-lib-btn-run  { background: #25c2c7; color: #171e21; }

/* ──────────────────────────── SPLIT */
.aal-install-lib-split {
flex: 1;
min-height: 0;
display: flex;
border-top: 1px solid #232b2e;
overflow: hidden;
}

/* Left panel */
.aal-install-lib-split-left {
width: 220px;
flex-shrink: 0;
display: flex;
flex-direction: column;
border-right: 1px solid #232b2e;
overflow: hidden;
}

.aal-install-lib-actions-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
flex-shrink: 0;
}

.aal-install-lib-icon-btn {
width: 28px;
height: 28px;
padding: 6px;
background: rgba(174, 184, 184, 0.15);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: default;
flex-shrink: 0;
}

.aal-install-lib-sidebar-toggle { margin-left: auto; }

.aal-install-lib-file-tree { flex: 1; overflow-y: auto; padding: 0 4px 8px; }

.aal-install-lib-section-header {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 2px;
height: 28px;
}

.aal-install-lib-section-title { font-size: 12px; font-weight: 700; color: #ffffff; flex: 1; }

.aal-install-lib-section-add {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
}

.aal-install-lib-file-item {
display: flex;
align-items: center;
gap: 6px;
padding: 2px 4px 2px 16px;
height: 22px;
border-radius: 4px;
cursor: default;
}

.aal-install-lib-file-item.is-active { background: #171e21; }

.aal-install-lib-file-name {
font-size: 12px;
font-family: 'Roboto Mono', 'Courier New', monospace;
color: #c9d2d2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.aal-install-lib-file-item.is-active .aal-install-lib-file-name { color: #ffffff; }

.aal-install-lib-empty-hint {
font-size: 11px;
color: #3a4547;
padding: 2px 4px 2px 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.aal-install-lib-lib-item {
display: flex;
align-items: center;
gap: 8px;
padding: 2px 4px 2px 16px;
height: 22px;
font-size: 12px;
color: #c9d2d2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* Right panel */
.aal-install-lib-split-right {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
background: #171e21;
}

.aal-install-lib-editor-tabs {
display: flex;
align-items: center;
border-bottom: 1px solid #232b2e;
padding: 0 8px;
gap: 2px;
flex-shrink: 0;
}

.aal-install-lib-editor-tab {
height: 36px;
padding: 0 14px;
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-family: 'Roboto Mono', 'Courier New', monospace;
color: #5d6a6b;
border-top: 2px solid transparent;
white-space: nowrap;
cursor: default;
}

.aal-install-lib-editor-tab.is-active { color: #c9d2d2; border-top-color: #c9d2d2; }

.aal-install-lib-editor-code {
flex: 1;
overflow: auto;
padding: 12px 16px;
font-family: 'Roboto Mono', 'Courier New', monospace;
font-size: 13px;
line-height: 1.7;
color: #c9d2d2;
}

.aal-install-lib-line { display: flex; gap: 16px; }
.aal-install-lib-ln   { color: #3a4547; min-width: 24px; text-align: right; flex-shrink: 0; font-size: 12px; }
.kw  { color: #25c2c7; }
.fn  { color: #7fcbcd; }
.str { color: #8adf9e; }
.cmt { color: #3a5254; font-style: italic; }
.num { color: #ffb86c; }

/* ──────────────────────────── FOOTER */
.aal-install-lib-footer {
height: 44px;
background: #090f11;
border-top: 1px solid #232b2e;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
flex-shrink: 0;
font-size: 11px;
color: #5d6a6b;
}

.aal-install-lib-footer-left   { display: flex; align-items: center; gap: 10px; }
.aal-install-lib-footer-center { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: #ffffff; }
.aal-install-lib-footer-right  { display: flex; align-items: center; gap: 12px; font-size: 10px; color: #3a4547; }

.aal-install-lib-board-name { color: #c9d2d2; font-weight: 600; font-size: 10px; }

/* scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #232b2e; border-radius: 2px; }

/* ══════════════════════════════════════
MODAL OVERLAY
══════════════════════════════════════ */
.aal-install-lib-modal-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}

.aal-install-lib-modal {
background: #1e2729;
border: 1px solid #2e3a3d;
border-radius: 6px;
width: 600px;
max-width: calc(100% - 32px);
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}

/* Modal header */
.aal-install-lib-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
flex-shrink: 0;
}

.aal-install-lib-modal-title {
font-size: 15px;
font-weight: 600;
color: #ffffff;
}

.aal-install-lib-modal-close {
width: 22px;
height: 22px;
background: #b83b3b;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

/* Search field */
.aal-install-lib-modal-search {
display: flex;
align-items: center;
gap: 8px;
margin: 0 16px 12px;
background: #141c1f;
border: 1px solid #2e3a3d;
border-radius: 4px;
padding: 0 10px;
height: 34px;
flex-shrink: 0;
}

.aal-install-lib-modal-search-input {
flex: 1;
min-width: 0;
font-size: 13px;
color: #c9d2d2;
background: transparent;
font-family: inherit;
}

.aal-install-lib-modal-search-clear {
width: 18px;
height: 18px;
background: #3a4547;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

/* Results area */
.aal-install-lib-modal-results {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
min-height: 0;
max-height: 340px;
}

/* Library result card */
.aal-install-lib-lib-result {
padding: 14px 16px;
border-top: 1px solid #2e3a3d;
}

.aal-install-lib-lib-result-header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 6px;
gap: 12px;
}

.aal-install-lib-lib-result-name {
font-size: 14px;
font-weight: 700;
color: #ffffff;
}

.aal-install-lib-lib-result-source {
font-size: 12px;
color: #5d6a6b;
white-space: nowrap;
flex-shrink: 0;
}

.aal-install-lib-lib-result-desc {
font-size: 12px;
color: #8fa3a6;
line-height: 1.55;
margin-bottom: 14px;
}

.aal-install-lib-lib-result-actions {
display: flex;
align-items: center;
gap: 10px;
}

/* Version dropdown */
.aal-install-lib-version-select {
display: flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 10px;
background: #141c1f;
border: 1px solid #2e3a3d;
border-radius: 4px;
font-size: 12px;
color: #c9d2d2;
white-space: nowrap;
}

/* Install button */
.aal-install-lib-install-btn {
height: 28px;
padding: 0 18px;
background: #25c2c7;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
color: #0d1517;
display: flex;
align-items: center;
}

/* More Info link */
.aal-install-lib-more-info {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: #25c2c7;
}
		
.ide-2-root * { margin: 0; padding: 0; box-sizing: border-box; }

.ide-2-root {
--bg:          #1f272a;
--panel:       #171e21;
--sidebar:     #101618;
--accent:      #0ca1a6;
--fg:          #dae3e3;
--fg-mid:      #7f8c8d;
--fg-dim:      #4e5b61;
--border:      #2c353a;
--output-bg:   #000000;
--output-fg:   #ffffff;
--dropdown-bg: #2c353a;
--btn-bg:      #0ca1a6;
--btn-fg:      #101618;
font-family: -apple-system, BlinkMacSystemFont, 'Open Sans', 'Segoe UI', Arial, sans-serif;
font-size: 13px;
color: var(--fg);
background: var(--bg);
display: flex;
flex-direction: column;
width: 100%;
max-width: 1000px;
height: 100%;
overflow: hidden;
user-select: none;
pointer-events: none;
border: 1px solid #c0c0c0;
}

/* ═══ TITLE BAR ═══ */
.ide-2-titlebar {
height: 32px;
background: #efefef;
border-bottom: 1px solid #d0d0d0;
display: flex;
align-items: center;
flex-shrink: 0;
font-size: 12px;
color: #222;
}
.ide-2-titlebar-icon {
width: 42px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ide-2-titlebar-title { flex: 1; text-align: left; font-size: 12px; color: #222; padding-left: 4px; }
.ide-2-win-controls { display: flex; align-items: center; flex-shrink: 0; }
.ide-2-win-btn {
width: 46px; height: 32px; display: flex; align-items: center; justify-content: center;
font-size: 11px; color: #444; cursor: default;
}

/* ═══ MENU BAR ═══ */
.ide-2-menubar {
height: 26px;
background: #ffffff;
border-bottom: 1px solid #ddd;
display: flex;
align-items: center;
padding: 0 4px;
flex-shrink: 0;
}
.ide-2-menu-item {
padding: 0 10px; height: 26px; display: flex; align-items: center;
font-size: 12px; color: #222; cursor: default;
}

/* ═══ TOOLBAR ═══ */
.ide-2-toolbar {
height: 52px;
background: var(--panel);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
padding: 0 8px;
flex-shrink: 0;
gap: 4px;
}
.ide-2-toolbar-left  { display: flex; align-items: center; gap: 4px; flex: 1; }
.ide-2-toolbar-right { display: flex; align-items: center; gap: 4px; }

.ide-2-tool-btn {
width: 36px; height: 36px; border-radius: 50%; background: var(--accent);
display: flex; align-items: center; justify-content: center;
cursor: default; flex-shrink: 0;
}
.ide-2-tool-btn-icon {
width: 28px; height: 28px; display: flex; align-items: center;
justify-content: center; cursor: default; flex-shrink: 0;
}

.ide-2-board-selector {
display: flex; align-items: center; gap: 8px;
height: 36px; padding: 0 16px;
background: transparent; border-radius: 1px; border: 1px solid var(--accent);
font-size: 13px; font-weight: 600; color: var(--fg);
margin-left: 6px; cursor: default; white-space: nowrap; flex-shrink: 0;
}

/* ═══ CONTENT ═══ */
.ide-2-content { flex: 1; min-height: 0; display: flex; flex-direction: row; }

/* ─── ACTIVITY BAR ─── */
.ide-2-activity-bar {
width: 48px;
flex-shrink: 0;
background: var(--panel);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 0;
gap: 2px;
}
.ide-2-act-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--fg-dim);
cursor: default;
border-radius: 4px;
flex-shrink: 0;
}
.ide-2-act-icon.active { color: var(--fg); border-left: 2px solid var(--accent); }
.ide-2-act-spacer { flex: 1; }

/* ─── MAIN ─── */
.ide-2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ─── EDITOR SECTION ─── */
.ide-2-editor-section { flex: 0 0 auto; display: flex; flex-direction: column; }

.ide-2-tab-bar {
height: 35px;
background: var(--panel);
border-bottom: 1px solid var(--border);
display: flex;
align-items: flex-end;
flex-shrink: 0;
}
.ide-2-tab {
display: flex;
align-items: center;
gap: 8px;
height: 35px;
padding: 0 16px;
font-size: 13px;
color: var(--fg-dim);
background: var(--panel);
border-top: 2px solid transparent;
cursor: default;
white-space: nowrap;
border-right: 1px solid var(--border);
}
.ide-2-tab.active {
color: var(--fg);
background: var(--bg);
border-top-color: var(--accent);
}
.ide-2-tab-sep { flex: 1; }
.ide-2-tab-more {
padding: 0 14px;
font-size: 16px;
color: var(--fg-dim);
letter-spacing: 2px;
align-self: center;
cursor: default;
}
.ide-2-tab-close {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
color: var(--fg-dim);
border-radius: 2px;
}

/* ─── EDITOR ─── */
.ide-2-editor {
overflow: hidden;
background: var(--bg);
}
.ide-2-code {
overflow: hidden;
padding: 6px 0;
font-family: 'Courier New', 'Roboto Mono', monospace;
font-size: 13px;
line-height: 22px;
}
.ide-2-line {
display: flex;
align-items: baseline;
min-height: 22px;
line-height: 22px;
}
.ide-2-line.hl { background: rgba(67, 79, 84, 0.09); }
.ide-2-ln {
min-width: 52px;
text-align: right;
padding-right: 18px;
color: #374146;
font-size: 12px;
flex-shrink: 0;
line-height: 22px;
}
.ide-2-code-text {
font-family: 'Courier New', 'Roboto Mono', monospace;
font-size: 13px;
color: var(--fg);
white-space: pre;
line-height: 22px;
}
/* Syntax tokens */
.ide-2-ck { color: #0ca1a6; }              /* keyword / type */
.ide-2-cf { color: #F39C12; }              /* function call */
.ide-2-cc { color: #7f8c8d; font-style: italic; } /* comment */
.ide-2-cn { color: #dae3e3; }              /* number literal */
.ide-2-cs { color: #0ca1a6; }              /* string */
.ide-2-cp { color: #0ca1a6; }              /* preprocessor */

/* Folded region indicator */
.ide-2-fold {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--fg-dim);
font-size: 12px;
}
.ide-2-fold-arrow { color: var(--fg-mid); }
.ide-2-fold-pill {
background: rgba(255,255,255,0.08);
border: 1px solid var(--border);
border-radius: 3px;
padding: 0 6px;
font-size: 11.5px;
color: var(--fg-mid);
}

/* ═══ BOTTOM PANEL ═══ */
.ide-2-bottom-panel {
flex: 0 0 268px;
display: flex;
flex-direction: column;
border-top: 1px solid var(--border);
}

.ide-2-panel-tab-bar {
height: 35px;
background: var(--panel);
border-bottom: 1px solid var(--border);
display: flex;
align-items: stretch;
flex-shrink: 0;
}
.ide-2-panel-tab {
display: flex;
align-items: center;
height: 35px;
padding: 0 16px;
font-size: 12px;
color: var(--fg-dim);
border-bottom: 2px solid transparent;
cursor: default;
white-space: nowrap;
}
.ide-2-panel-tab.active {
color: var(--fg);
border-bottom-color: var(--accent);
}
.ide-2-panel-tab-spacer { flex: 1; }
.ide-2-panel-actions {
display: flex;
align-items: center;
padding: 0 4px;
gap: 2px;
}
.ide-2-panel-btn {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
color: var(--fg);
border-radius: 3px;
cursor: default;
flex-shrink: 0;
}

/* ═══ SERIAL MONITOR ═══ */
.ide-2-serial-monitor { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.ide-2-serial-head {
display: flex;
align-items: center;
gap: 3px;
padding: 0 5px 5px 5px;
height: 32px;
background: var(--panel);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.ide-2-serial-input {
flex: 1;
min-width: 0;
height: 22px;
background: #000;
border: 1px solid var(--border);
color: var(--fg-dim);
font-size: 12px;
font-family: inherit;
padding: 0 8px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: flex;
align-items: center;
}
.ide-2-serial-select {
display: flex;
align-items: center;
gap: 4px;
height: 22px;
padding: 0 7px;
background: var(--sidebar);
border: 1px solid var(--border);
color: var(--fg);
font-size: 11.5px;
cursor: default;
white-space: nowrap;
flex-shrink: 0;
}

.ide-2-serial-body {
flex: 1;
min-height: 0;
overflow-y: auto;
background: var(--output-bg);
color: var(--output-fg);
padding: 5px 8px;
font-family: 'Courier New', 'Roboto Mono', monospace;
font-size: 12.5px;
line-height: 1.65;
white-space: pre-wrap;
word-break: break-all;
}

/* ═══ STATUS BAR ═══ */
.ide-2-statusbar {
height: 24px;
background: var(--panel);
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 0;
flex-shrink: 0;
font-size: 11.5px;
color: var(--fg-dim);
}
.ide-2-status-item {
display: flex;
align-items: center;
gap: 4px;
padding: 0 8px;
height: 24px;
cursor: default;
white-space: nowrap;
}
.ide-2-status-item + .ide-2-status-item {
border-left: 1px solid var(--border);
}

.ide-2-root ::-webkit-scrollbar { width: 4px; height: 4px; }
.ide-2-root ::-webkit-scrollbar-track { background: transparent; }
.ide-2-root ::-webkit-scrollbar-thumb { background: #374146; border-radius: 2px; }

.aal-root {
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size: 13px;
color: #ffffff;
background: #090f11;
display: flex;
flex-direction: column;
width: 100%;
max-width: 1000px;
overflow: hidden;
user-select: none;
pointer-events: none;
margin: 20px 0;
}

/* ═══════════════════════════ TOP BAR */
.aal-topbar {
height: 48px;
background: #0c1416;
border-bottom: 1px solid #1e2729;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
flex-shrink: 0;
gap: 8px;
}

.aal-topbar-left {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}

.aal-app-grid-icon {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.aal-app-emoji { font-size: 18px; flex-shrink: 0; display: flex; align-items: center; }

.aal-app-title {
font-size: 13px;
font-weight: 600;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 220px;
}

.aal-app-caret {
flex-shrink: 0;
display: flex;
align-items: center;
}

.aal-topbar-right { flex-shrink: 0; }

.aal-btn-stop-top {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 16px;
border-radius: 6px;
background: #c0392b;
color: #ffffff;
font-size: 13px;
font-weight: 700;
cursor: default;
}

/* ═══════════════════════════ MAIN */
.aal-main {
flex: 1;
min-height: 0;
display: flex;
flex-direction: row;
}

/* ─── COLLAPSED ICON RAIL (≈40px wide) */
.aal-icon-rail {
width: 42px;
flex-shrink: 0;
background: #0e1618;
border-right: 1px solid #1e2729;
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 0;
gap: 2px;
}

.aal-rail-icon {
width: 34px;
height: 34px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
color: #c9d2d2;
cursor: default;
flex-shrink: 0;
}

.aal-rail-icon.is-active {
background: rgba(37, 194, 199, 0.12);
color: #25c2c7;
}

.aal-rail-spacer { flex: 1; }

/* ─── RIGHT PANEL */
.aal-right-panel {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
background: #0e1618;
}

/* Editor area */
.aal-editor-area {
flex: 0 0 auto;
display: flex;
flex-direction: column;
}

.aal-editor-tabs {
display: flex;
align-items: center;
border-bottom: 1px solid #1e2729;
background: #0e1618;
padding: 0 4px;
flex-shrink: 0;
height: 38px;
}

.aal-editor-tab {
display: flex;
align-items: center;
gap: 6px;
height: 38px;
padding: 0 14px;
font-size: 13px;
color: #5d6a6b;
border-top: 2px solid transparent;
white-space: nowrap;
cursor: default;
font-family: 'Roboto Mono', 'Courier New', monospace;
}

.aal-editor-tab.is-active {
color: #e0e8e8;
border-top-color: #25c2c7;
background: #171e21;
}

.aal-tab-close {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
color: #5d6a6b;
border-radius: 3px;
margin-left: 2px;
}

.aal-editor-code {
flex: 1;
min-height: 0;
overflow: hidden;
background: #171e21;
padding: 6px 0;
max-height: 21px;
}

.aal-line {
display: flex;
align-items: baseline;
min-height: 21px;
line-height: 21px;
padding: 0 16px;
}

.aal-ln {
min-width: 36px;
color: #3a4547;
font-size: 12px;
font-family: 'Roboto Mono', 'Courier New', monospace;
text-align: right;
padding-right: 18px;
flex-shrink: 0;
}

.aal-line > span:last-child {
font-family: 'Roboto Mono', 'Courier New', monospace;
font-size: 13px;
color: #c9d2d2;
}

.kw  { color: #569cd6; }
.fn  { color: #dcdcaa; }
.str { color: #ce9178; }
.cmt { color: #4a5568; font-style: italic; }
.num { color: #b5cea8; }

/* ═══════════════════════════ CONSOLE PANEL */
.aal-console-panel {
flex: 0 0 310px;
display: flex;
flex-direction: column;
border-top: 2px solid #090f11;
}

.aal-console-header {
display: flex;
align-items: center;
justify-content: space-between;
background: #0e1618;
border-bottom: 1px solid #1e2729;
flex-shrink: 0;
height: 38px;
padding: 0 4px 0 0;
}

.aal-console-tabs {
display: flex;
align-items: center;
height: 100%;
}

.aal-console-tab {
display: flex;
align-items: center;
height: 100%;
padding: 0 16px;
font-size: 13px;
color: #5d6a6b;
cursor: default;
border-bottom: 2px solid transparent;
white-space: nowrap;
}

.aal-console-tab.is-active {
color: #e0e8e8;
border-bottom-color: #25c2c7;
}

.aal-console-actions {
display: flex;
align-items: center;
padding-right: 4px;
}

.aal-cbtn {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #c9d2d2;
border-radius: 5px;
cursor: default;
flex-shrink: 0;
}

.aal-cbtn-sep {
width: 1px;
height: 16px;
background: #2a3538;
margin: 0 3px;
flex-shrink: 0;
}

/* Serial input bar */
.aal-serial-input-bar {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: #0c1416;
border-bottom: 1px solid #1e2729;
flex-shrink: 0;
}

.aal-serial-input {
flex: 1;
min-width: 0;
height: 32px;
background: #171e21;
border: 1px solid #232b2e;
border-radius: 5px;
padding: 0 12px;
font-family: 'Roboto', sans-serif;
font-size: 12.5px;
color: #5d6a6b;
outline: none;
cursor: default;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: flex;
align-items: center;
}

.aal-serial-dropdown {
display: flex;
align-items: center;
gap: 5px;
height: 32px;
padding: 0 10px;
background: #171e21;
border: 1px solid #232b2e;
border-radius: 5px;
font-size: 12.5px;
color: #c9d2d2;
cursor: default;
white-space: nowrap;
flex-shrink: 0;
}

/* Empty serial output area (connected but no output yet, matching screenshot) */
.aal-serial-output {
flex: 1;
min-height: 0;
overflow-y: auto;
background: #0c1416;
padding: 8px 14px;
font-family: 'Roboto Mono', 'Courier New', monospace;
font-size: 12.5px;
line-height: 1.7;
border: 2px solid #090f11;
border-top: none;
white-space: pre-wrap;
word-break: break-all;
}

/* ═══════════════════════════ FOOTER */
.aal-footer {
height: 44px;
background: #090f11;
border-top: 1px solid #1e2729;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
flex-shrink: 0;
font-size: 12.5px;
gap: 8px;
}

.aal-footer-left {
display: flex;
align-items: center;
gap: 6px;
}

.aal-board-selector {
display: flex;
align-items: center;
gap: 6px;
padding: 0 10px;
height: 32px;
border-radius: 6px;
background: #0e1618;
border: 1px solid #232b2e;
color: #c9d2d2;
font-size: 12.5px;
cursor: default;
max-width: 185px;
}

.aal-board-name-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.aal-footer-center {
display: flex;
align-items: center;
gap: 5px;
color: #c9d2d2;
font-size: 12.5px;
font-weight: 500;
cursor: default;
}

.aal-footer-right {
display: flex;
align-items: center;
gap: 6px;
}

.aal-running-app {
display: flex;
align-items: center;
gap: 5px;
font-size: 12.5px;
color: #c9d2d2;
max-width: 170px;
}

.aal-running-app-emoji { font-size: 16px; flex-shrink: 0; }

.aal-running-app-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 600;
}

.aal-btn-stop-footer {
display: inline-flex;
align-items: center;
gap: 5px;
height: 30px;
padding: 0 12px;
border-radius: 5px;
background: #c0392b;
color: #ffffff;
font-size: 12.5px;
font-weight: 700;
cursor: default;
flex-shrink: 0;
}

.aal-footer-icon-btn {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #5d6a6b;
border-radius: 5px;
cursor: default;
flex-shrink: 0;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #232b2e; border-radius: 2px; }


.telegram-container {
	display: flex;
	height: auto;
	max-width: 1000px;
	margin: 0;
	background: white;
	box-shadow: 0 0 30px rgba(0,0,0,0.3);
	margin: 40px 0;
}

/* Left telegram-sidebar */
.telegram-sidebar {
	width: fit-content;
	background: #fff;
	border-right: 1px solid #dadce0;
	display: flex;
	flex-direction: column;
}

.telegram-search-box {
	padding: 8px 16px 12px 16px;
	background: #fff;
}

.telegram-search-box input {
	width: 100%;
	padding: 10px 16px;
	border: none;
	border-radius: 22px;
	background: #f1f3f4;
	outline: none;
	font-size: 14px;
}

.telegram-chat-list {
	flex: 1;
	overflow-y: auto;
	background: #fff;
}

.telegram-chat-item {
	padding: 12px 16px;
	display: flex;
	align-items: center;
	position: relative;
}

.telegram-chat-item.telegram-selected {
	background: #3390ec;
}

.telegram-chat-item.telegram-selected .telegram-chat-name,
.telegram-chat-item.telegram-selected .telegram-chat-preview,
.telegram-chat-item.telegram-selected .telegram-chat-time {
	color: white !important;
}

.telegram-chat-item.telegram-selected .telegram-verified-badge .telegram-badge-fill {
	fill: #ffffff;
}

.telegram-chat-item.telegram-selected .telegram-verified-badge .telegram-badge-check {
	fill: #3390ec;
}

.telegram-chat-avatar {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 500;
	font-size: 20px;
	margin-right: 14px;
	flex-shrink: 0;
}

.telegram-chat-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.telegram-chat-avatar.avatar-2 {
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.telegram-bot-icon {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #3390ec;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 500;
	font-size: 28px;
	margin-right: 14px;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}

.telegram-bot-icon.telegram-botfather {
	background: linear-gradient(135deg, #2481cc 0%, #1c6aa8 100%);
}

.telegram-bot-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.telegram-bot-svg {
	width: 30px;
	height: 30px;
}

.telegram-verified-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-left: 4px;
	vertical-align: middle;
}

.telegram-verified-badge svg {
	width: 16px;
	height: 16px;
}

.telegram-verified-badge .telegram-badge-fill {
	fill: #3390ec;
}

.telegram-verified-badge .telegram-badge-check {
	fill: #ffffff;
}

.telegram-chat-info {
	flex: 1;
	min-width: 0;
}

.telegram-chat-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 5px;
}

.telegram-chat-name {
	font-weight: 500;
	font-size: 16px;
	color: #000;
	display: flex;
	align-items: center;
}

.telegram-chat-time {
	font-size: 13px;
	color: #707579;
	margin-left: auto;
	padding-left: 10px;
}

.telegram-chat-preview {
	font-size: 15px;
	color: #707579;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Main Chat Area */
.telegram-chat-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: #fff;
}

.telegram-chat-header-main {
	padding: 10px 20px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #dadce0;
	min-height: 60px;
}

.telegram-chat-header-left {
	display: flex;
	align-items: center;
}

.telegram-chat-header-main .telegram-bot-icon {
	width: 42px;
	height: 42px;
	font-size: 22px;
	margin-right: 14px;
}

.telegram-chat-header-info h3 {
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 2px;
	color: #000;
}

.telegram-chat-header-status {
	font-size: 14px;
	color: #707579;
}

.telegram-chat-header-actions {
	display: flex;
	gap: 4px;
}

.telegram-icon-button {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: #707579;
}

/* Messages Area */
.telegram-messages-area {
	overflow-y: auto;
	padding: 20px;
	background: linear-gradient(180deg, #d4ebf7 0%, #b8ddf0 100%);
}

.telegram-message {
	display: flex;
	margin-bottom: 12px;
}

.telegram-message.telegram-sent {
	justify-content: flex-end;
}

.telegram-message-content {
	max-width: 70%;
	position: relative;
	padding: 6px 12px 8px 12px;
	border-radius: 12px;
	word-wrap: break-word;
	box-shadow: 0 1px 2px 0 rgba(16,35,47,0.15);
}

.telegram-message-content::after {
	content: "";
	display: table;
	clear: both;
}

.telegram-message.telegram-received .telegram-message-content {
	background: white;
	border-radius: 18px 18px 18px 2px;
}

.telegram-message.telegram-sent .telegram-message-content {
	background: #EEFFDE;
	border-radius: 18px 18px 2px 18px;
}

.telegram-message-text {
	font-size: 15px;
	line-height: 1.31;
	color: #000;
	margin: 0;
	word-wrap: break-word;
	white-space: pre-wrap;
}

.telegram-message-meta {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	float: right;
	margin-left: 4px;
	font-size: 12px;
	color: #a3adb6;
	line-height: 1;
	vertical-align: bottom;
}

.telegram-message.telegram-sent .telegram-message-meta {
	color: #4fae4e;
}

.telegram-message-time {
	font-size: 12px;
}

.telegram-message-status {
	font-size: 14px;
}

/* Input Area */
.telegram-input-area {
	padding: 12px 16px;
	background: white;
	border-top: 1px solid #dadce0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.telegram-input-area input {
	flex: 1;
	padding: 10px 16px;
	border: 1px solid #dadce0;
	border-radius: 24px;
	outline: none;
	font-size: 15px;
	background: #f1f3f4;
	pointer-events: none;
	user-select: none;
}

.telegram-attach-button, .telegram-emoji-button, .telegram-send-button {
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	pointer-events: none;
	background: transparent;
	color: #8d969c;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}

.telegram-send-button {
	background: #3390ec;
	color: white;
}

/* Date Separator */
.telegram-date-separator {
	text-align: center;
	margin: 20px 0;
}

.telegram-date-separator span {
	background: rgba(0, 0, 0, 0.08);
	padding: 6px 14px;
	border-radius: 12px;
	font-size: 13px;
	color: #707579;
	display: inline-block;
	font-weight: 500;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: #dadce0;
	border-radius: 3px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.telegram-container {
		max-width: 100%;
	}

	/* Hide telegram-sidebar on mobile */
	.telegram-sidebar {
		display: none;
	}

	/* Replace bot icon with Telegram logo on mobile */
	.telegram-chat-header-main .telegram-bot-icon {
		background: transparent;
	}

	.telegram-chat-header-main .telegram-bot-icon .telegram-bot-svg {
		display: none;
	}

	.telegram-chat-header-main .telegram-bot-icon::before {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		background-image: url('images/page/telegram-logo.svg');
		background-size: 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	/* Full width chat on mobile */
	.telegram-chat-main {
		width: 100%;
	}

	/* Adjust header */
	.telegram-chat-header-main {
		padding: 8px 12px;
		min-height: 56px;
	}

	.telegram-chat-header-main .telegram-bot-icon {
		width: 36px;
		height: 36px;
		margin-right: 10px;
	}

	.telegram-chat-header-info h3 {
		font-size: 15px;
	}

	.telegram-chat-header-status {
		font-size: 13px;
	}

	/* Messages area */
	.telegram-messages-area {
		padding: 12px;
	}

	.telegram-message-content {
		max-width: 85%;
		padding: 6px 10px 7px 10px;
	}

	.telegram-message-text {
		font-size: 14px;
	}

	.telegram-message-meta {
		font-size: 11px;
	}

	.telegram-message-time {
		font-size: 11px;
	}

	/* Input area */
	.telegram-input-area {
		padding: 8px 10px;
		gap: 6px;
	}

	.telegram-input-area input {
		padding: 9px 14px;
		font-size: 14px;
	}

	.telegram-attach-button, .telegram-emoji-button, .telegram-send-button {
		width: 36px;
		height: 36px;
	}

	/* Date separator */
	.telegram-date-separator span {
		padding: 5px 12px;
		font-size: 12px;
	}

	/* Icon buttons */
	.telegram-icon-button {
		width: 32px;
		height: 32px;
	}
}

/* Small mobile devices */
@media (max-width: 480px) {
	.telegram-message-content {
		max-width: 90%;
	}

	.telegram-chat-header-main {
		padding: 6px 10px;
	}

	.telegram-messages-area {
		padding: 8px;
	}

	.telegram-input-area {
		padding: 6px 8px;
	}
}