/* Prevent all zoom behavior on mobile */
html {
    touch-action: manipulation;
}

/* === Dark Scrollbars === */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #444 #1a1a1a;
}

/* === Client Main Area === */
#client-main {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

/* === Toolbar === */
#client-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background-color: #1e1e1e;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

#toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

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

#client-title {
    font-weight: bold;
    color: #ffcc00;
    font-size: 1rem;
}

/* Connection status */
#connection-status {
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.status-disconnected {
    color: #ff4444;
    background-color: rgba(255, 68, 68, 0.15);
}

.status-connecting {
    color: #ffaa00;
    background-color: rgba(255, 170, 0, 0.15);
}

.status-connected {
    color: #44ff44;
    background-color: rgba(68, 255, 68, 0.15);
}

/* Toolbar buttons */
.toolbar-btn {
    background-color: #2b2b2b;
    color: #f1f1f1;
    border: 1px solid #444;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    border-radius: 3px;
    transition: background-color 0.2s, color 0.2s;
    letter-spacing: 0.3px;
}

.toolbar-btn:hover:not(:disabled) {
    background-color: #444;
    color: #ffcc00;
}

.toolbar-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.toolbar-btn-danger {
    color: #ff6666 !important;
    border-color: #663333 !important;
}

.toolbar-btn-danger:hover {
    background-color: #3a1a1a !important;
    color: #ff8888 !important;
}

/* Visual separator before automation buttons */
#btn-triggers {
    margin-left: 8px;
    border-left: 2px solid #3a3a3a;
}

/* === Vitals Bar === */
#vitals-bar {
    display: flex;
    align-items: center;
    padding: 5px 12px;
    background-color: #1a1a1a;
    border-top: 1px solid #2a2a2a;
    border-bottom: 1px solid #333;
    gap: 16px;
    flex-shrink: 0;
}

#vitals-char-info {
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

#char-name {
    color: #FFD700;
    font-weight: bold;
    font-size: 0.9rem;
}


#vitals-bars {
    display: flex;
    gap: 12px;
    flex: 1;
}

.vital-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.vital-label {
    color: #aaa;
    font-size: 0.75rem;
    min-width: 24px;
    text-transform: uppercase;
}

.vital-bar-bg {
    flex: 1;
    height: 18px;
    background-color: #2b2b2b;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #444;
    position: relative;
}

.vital-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease, background-color 0.4s ease;
    width: 0%;
}

.vital-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-family: monospace;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    white-space: nowrap;
}

/* === Game Area (Terminal + Sidebar) === */
#game-area {
    display: flex;
    flex: 1;
    overflow: hidden;
}

#terminal-container {
    flex: 1;
    overflow: hidden;
    background-color: #121212;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: none; /* Disable ALL browser touch behaviors - our handler must control everything */
}

#terminal-container .xterm {
    height: 100%;
    padding: 4px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Disable xterm.js selection layer to prevent touch interference with scrolling */
.xterm-selection {
    pointer-events: none !important;
    display: none !important;
}

/* === Right Sidebar === */
#game-sidebar {
    width: 220px;
    background: linear-gradient(180deg, #1c1c1c 0%, #181818 100%);
    border-left: 1px solid #333;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    flex-shrink: 0;
    transition: width 0.3s ease;
}

#game-sidebar.collapsed {
    width: 0;
    overflow: hidden;
    border-left: none;
}

.sidebar-collapse-btn {
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 0.7rem;
    text-align: right;
    transition: color 0.2s;
}

.sidebar-collapse-btn:hover {
    color: #ffcc00;
}

.sidebar-section {
    padding: 10px 12px;
    border-bottom: 1px solid #2b2b2b;
}

.sidebar-section-title {
    color: #ff8800;
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: bold;
    letter-spacing: 0.5px;
    border-left: 2px solid #ff8800;
    padding-left: 6px;
}

#room-name {
    color: #FFD700;
    font-weight: bold;
    font-size: 0.85rem;
}

.room-sub {
    color: #888;
    font-size: 0.75rem;
    margin-top: 2px;
}

/* === Exit Compass Grid === */
.exit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    max-width: 130px;
    margin: 0 auto;
}

.exit-spacer {
    /* empty grid cell */
}

.exit-btn {
    background-color: #2b2b2b;
    color: #777;
    border: 1px solid #3a3a3a;
    padding: 6px 0;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 3px;
    text-align: center;
    transition: all 0.15s ease;
}

.exit-btn:hover {
    background-color: #3a3a3a;
    color: #ffcc00;
    border-color: #ffcc00;
}

.exit-btn:active {
    background-color: #444;
    transform: scale(0.95);
}

.exit-btn.available {
    color: #f1f1f1;
    border-color: #666;
    background-color: #333;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset;
}

.exit-btn.available:hover {
    background-color: #444;
    color: #ffcc00;
    border-color: #ffcc00;
}

.exit-center {
    border: 1px solid #2b2b2b;
    border-radius: 3px;
}

.exit-ud {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: 4px;
}

.exit-ud .exit-btn {
    width: 40px;
}

/* === Affects === */
.affects-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.affect-item {
    color: #ccc;
    font-size: 0.78rem;
    padding: 1px 0;
}

.no-data {
    color: #555;
    font-size: 0.75rem;
    font-style: italic;
}

/* === Opponent === */
#opponent-name {
    color: #FF4500;
    font-weight: bold;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

#bar-opponent {
    background-color: #cc0000;
}

/* === Channel Log === */
#section-channels {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

#channel-tab-strip {
    display: flex;
    overflow-x: auto;
    background-color: #161616;
    border-bottom: 1px solid #2b2b2b;
    flex-shrink: 0;
    scrollbar-width: none;
}

#channel-tab-strip::-webkit-scrollbar {
    display: none;
}

.ch-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #666;
    font-size: 0.72rem;
    padding: 6px 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
    position: relative;
    flex-shrink: 0;
}

.ch-tab:hover {
    color: #ccc;
}

.ch-tab.active {
    color: #ffcc00;
    border-bottom-color: #ffcc00;
}

.ch-unread {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #ffcc00;
    border-radius: 50%;
    margin-left: 3px;
    vertical-align: middle;
    margin-bottom: 1px;
}

#channel-log {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
}

.ch-msg {
    font-size: 0.75rem;
    line-height: 1.5;
    word-break: break-word;
}

.ch-msg-time {
    color: #444;
    font-family: monospace;
    font-size: 0.7rem;
    margin-right: 4px;
    flex-shrink: 0;
}

/* Mobile drawer channel select */
#drawer-channel-select-wrap {
    padding: 8px 12px 4px;
}

#drawer-channel-select {
    width: 100%;
    background-color: #2b2b2b;
    color: #f1f1f1;
    border: 1px solid #444;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    outline: none;
    cursor: pointer;
}

#drawer-channel-select:focus {
    border-color: #ffcc00;
}

#drawer-channel-log {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 35vh;
    overflow-y: auto;
}

/* === Stats Panel === */
.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #333;
}

.stats-name {
    color: #FFD700;
    font-weight: bold;
    font-size: 0.95rem;
}

.stats-race {
    color: #aaa;
    font-size: 0.8rem;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.stats-table td {
    padding: 2px 0;
}

.stats-section-row td {
    color: #ff8800;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    padding-top: 8px;
    padding-bottom: 2px;
    letter-spacing: 0.5px;
}

.stats-label {
    color: #888;
    width: 40%;
}

.stats-value {
    color: #f1f1f1;
    text-align: right;
    font-family: "Cascadia Code", "Fira Code", "Consolas", monospace;
}

/* === Action Bar === */
#action-bar {
    background-color: #1e1e1e;
    border-top: 1px solid #333;
    flex-shrink: 0;
}

#quick-actions {
    display: flex;
    gap: 4px;
    padding: 5px 8px 0;
    flex-wrap: wrap;
}

.action-btn {
    background-color: #2b2b2b;
    color: #ccc;
    border: 1px solid #444;
    padding: 3px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    border-radius: 3px;
    font-family: monospace;
    transition: all 0.15s ease;
}

.action-btn:hover {
    background-color: #444;
    color: #ffcc00;
    border-color: #ffcc00;
}

.action-btn:active {
    background-color: #555;
}

/* === Command Input Bar === */
#command-bar {
    display: flex;
    padding: 5px 8px;
    gap: 6px;
    flex-shrink: 0;
}

#command-input {
    flex: 1;
    background-color: #2b2b2b;
    color: #f1f1f1;
    border: 1px solid #444;
    padding: 7px 10px;
    font-size: 16px;
    font-family: "Cascadia Code", "Fira Code", "Consolas", "Courier New", monospace;
    border-radius: 3px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#command-input:focus {
    border-color: #ffcc00;
    box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.3);
}

/* Prevent mobile zoom on touch */
#command-bar,
#command-input {
    touch-action: manipulation;
}

#command-input::placeholder {
    color: #555;
}

/* Repeat mode toggle */
.repeat-btn {
    background-color: #2b2b2b;
    color: #666;
    border: 1px solid #444;
    padding: 7px 10px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 1rem;
    line-height: 1;
    transition: all 0.15s ease;
}

.repeat-btn:hover {
    background-color: #3a3a3a;
    color: #aaa;
}

.repeat-btn.active {
    background-color: rgba(255, 204, 0, 0.15);
    color: #ffcc00;
    border-color: #ffcc00;
}

#command-send {
    background-color: #ffcc00;
    color: #121212;
    border: none;
    padding: 7px 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 3px;
    font-size: 15px;
    font-family: inherit;
    transition: background-color 0.15s;
}

#command-send:hover {
    background-color: #ffe066;
}

#command-send:active {
    background-color: #e6b800;
    transform: scale(0.97);
}

/* === Mobile Direction Bar === */
#mobile-dir-bar {
    display: none; /* shown via media query on mobile */
}

.dir-btn {
    background-color: #2b2b2b;
    color: #ccc;
    border: 1px solid #444;
    padding: 8px 0;
    flex: 1;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
    transition: all 0.15s ease;
}

.dir-btn:hover {
    background-color: #3a3a3a;
    color: #ffcc00;
}

.dir-btn:active {
    background-color: #444;
    color: #ffcc00;
    transform: scale(0.95);
}

.drawer-toggle-btn {
    background-color: #ffcc00 !important;
    color: #121212 !important;
    font-weight: bold;
    border-color: #ffcc00 !important;
}

.drawer-toggle-btn:active {
    background-color: #e6b800 !important;
}

/* === Mobile Drawer === */
#mobile-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #1a1a1a;
    border-top: 2px solid #ffcc00;
    z-index: 200;
    max-height: 60vh;
    overflow-y: auto;
    transition: transform 0.3s ease;
}

#mobile-drawer.drawer-hidden {
    transform: translateY(100%);
}

#drawer-tabs {
    display: flex;
    border-bottom: 1px solid #333;
    position: sticky;
    top: 0;
    background-color: #1a1a1a;
    z-index: 1;
}

.drawer-tab {
    flex: 1;
    padding: 10px 4px;
    background: none;
    border: none;
    color: #666;
    font-size: 0.8rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.drawer-tab:hover {
    color: #ccc;
}

.drawer-tab.active {
    color: #ffcc00;
    border-bottom-color: #ffcc00;
}

.drawer-tab.has-unread {
    color: #ffcc00;
}

#btn-drawer.has-unread {
    background-color: #cc2200 !important;
    border-color: #cc2200 !important;
    color: #fff !important;
}

#drawer-content {
    padding: 12px;
    min-height: 80px;
}

#drawer-close {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #222;
    color: #888;
    border: none;
    border-top: 1px solid #333;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.15s, color 0.15s;
}

#drawer-close:hover {
    background-color: #2b2b2b;
    color: #ffcc00;
}

/* === Fullscreen Mode === */
body.fullscreen-mode header,
body.fullscreen-mode .sidebar,
body.fullscreen-mode footer {
    display: none !important;
}

body.fullscreen-mode .content {
    height: 100vh;
}

body.fullscreen-mode #client-main {
    height: 100vh;
}

body.fullscreen-mode #site-container {
    height: 100vh;
}

/* === Mobile-only elements === */
.mobile-only {
    display: none;
}

/* === Responsive: auto-fullscreen on small screens === */
@media (max-width: 768px) {
    /* Auto-enter fullscreen on mobile */
    header, .sidebar, footer {
        display: none !important;
    }

    html, body {
        height: 100%;
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    .content {
        height: 100vh;
        height: 100dvh;
    }

    #client-main {
        height: 100vh;
        height: 100dvh;
    }

    #site-container {
        height: 100vh;
        height: 100dvh;
    }

    /* Hide desktop sidebar on mobile */
    #game-sidebar {
        display: none !important;
    }

    /* Hide fullscreen button on mobile */
    #btn-fullscreen {
        display: none;
    }

    /* Reduce gap between toolbar buttons on mobile */
    #toolbar-right {
        gap: 4px;
    }

    /* Show mobile direction bar */
    #mobile-dir-bar {
        display: flex;
        gap: 3px;
        padding: 4px 6px;
        background-color: #1e1e1e;
        border-top: 1px solid #333;
    }

    /* Compact vitals bar on mobile */
    #vitals-char-info {
        display: none;
    }

    #vitals-bar {
        padding: 3px 8px;
        gap: 8px;
    }

    .vital-label {
        font-size: 0.65rem;
        min-width: 18px;
    }

    .vital-bar-bg {
        height: 10px;
    }

    .vital-value {
        display: none;
    }

    /* Hide quick actions on mobile (accessible via drawer) */
    #quick-actions {
        display: none;
    }

    /* Mobile toolbar - custom layout */
    #client-toolbar {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 6px 8px;
        gap: 4px;
        flex-wrap: nowrap;
    }

    #toolbar-left {
        display: flex;
        align-items: center;
        gap: 4px;
        order: 0;
    }

    #toolbar-right {
        display: flex;
        gap: 4px;
        flex: 1;
        align-items: center;
        flex-wrap: nowrap;
        order: 1;
    }

    #client-title {
        display: inline-block !important;
        font-size: 0.85rem;
        color: #ffcc00;
        font-weight: bold;
    }

    /* Connection status as LED indicator circle (first) */
    #connection-status {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        padding: 0 !important;
        display: inline-block !important;
        flex-shrink: 0;
        font-size: 0 !important;
        order: 1;
        border: none;
    }

    /* LED status colors - bright and vibrant */
    #connection-status.status-disconnected {
        background-color: #ff3333 !important;
        box-shadow: 0 0 8px rgba(255, 51, 51, 0.6);
    }

    #connection-status.status-connecting {
        background-color: #ffaa00 !important;
        box-shadow: 0 0 8px rgba(255, 170, 0, 0.6);
    }

    #connection-status.status-connected {
        background-color: #33ff33 !important;
        box-shadow: 0 0 8px rgba(51, 255, 51, 0.6);
    }

    .toolbar-btn {
        padding: 4px 8px;
        font-size: 0.8rem;
        min-width: auto;
        white-space: nowrap;
    }

    /* Toolbar button order */
    #btn-reconnect {
        order: 2;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0 !important;
        font-size: 0;
    }

    #btn-reconnect::before {
        content: '↻';
        font-size: 0.9rem;
        display: block;
    }

    #btn-home {
        order: 3;
        display: inline-block !important;
    }

    #btn-font-down {
        order: 4;
        display: inline-block !important;
    }

    #font-size-label {
        order: 5;
        font-size: 0.75rem;
        min-width: 20px;
        text-align: center;
        color: #aaa;
        display: inline-block !important;
    }

    #btn-font-up {
        order: 6;
        display: inline-block !important;
    }

    /* Tools button (automations) goes to the right */
    #automations-wrap {
        order: 7;
        margin-left: auto;
        flex-shrink: 0;
    }

    #btn-automations {
        padding: 4px 8px;
        font-size: 0.8rem;
    }

    /* Hide buttons not in mobile toolbar */
    #btn-fullscreen,
    #btn-triggers,
    #btn-aliases,
    #btn-timers,
    #btn-popups,
    #btn-forget-login {
        display: none !important;
    }

    /* Absolutely hide disconnect button on mobile */
    #btn-disconnect {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* Hide the text version of connection status (we show the circle indicator) */
    #toolbar-left #connection-status {
        display: inline-block !important;
    }

    #command-input {
        font-size: 16px !important;
    }

    #command-bar {
        padding: 4px 6px;
    }

    .mobile-only {
        display: inline-block !important;
    }

    .desktop-only {
        display: none !important;
    }
}

/* === Search bar overlay (Ctrl+Shift+F) === */
.xterm-search-bar {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 100;
    background-color: #1e1e1e;
    border: 1px solid #444;
    padding: 6px;
    border-radius: 3px;
    display: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.xterm-search-bar.visible {
    display: flex;
    gap: 4px;
}

.xterm-search-bar input {
    background-color: #2b2b2b;
    color: #f1f1f1;
    border: 1px solid #555;
    padding: 4px 8px;
    font-family: monospace;
    font-size: 0.85rem;
    outline: none;
    border-radius: 2px;
}

.xterm-search-bar input:focus {
    border-color: #ffcc00;
}

.xterm-search-bar button {
    background-color: #333;
    color: #f1f1f1;
    border: 1px solid #555;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.85rem;
    border-radius: 2px;
    transition: background-color 0.15s;
}

.xterm-search-bar button:hover {
    background-color: #555;
    color: #ffcc00;
}

/* === Save Credentials Overlay === */
#save-creds-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
}

.save-creds-box {
    background-color: #1e1e1e;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 24px;
    max-width: 340px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.save-creds-title {
    color: #FFD700;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 12px;
}

.save-creds-box p {
    color: #ccc;
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.4;
}

.save-creds-box strong {
    color: #ffcc00;
}

.save-creds-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.save-creds-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.15s;
}

.save-creds-yes {
    background-color: #ffcc00;
    color: #121212;
}

.save-creds-yes:hover {
    background-color: #ffe066;
}

.save-creds-no {
    background-color: #333;
    color: #aaa;
    border: 1px solid #555;
}

.save-creds-no:hover {
    background-color: #444;
    color: #f1f1f1;
}

/* === Trigger / Alias / Timer Modals === */
#trigger-modal,
#alias-modal,
#timer-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fix: apply to all three modals, not just #trigger-modal */
.trigger-modal-hidden {
    display: none !important;
}

#trigger-modal-box,
#alias-modal-box,
#timer-modal-box {
    background: #1e1e1e;
    border: 1px solid #444;
    border-radius: 6px;
    width: 560px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,204,0,0.08);
}

#trigger-modal-header,
#alias-modal-header,
#timer-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #2b2b2b;
    border-bottom: 1px solid #444;
    flex-shrink: 0;
}

#trigger-modal-title,
#alias-modal-title,
#timer-modal-title {
    color: #ffcc00;
    font-weight: bold;
    font-size: 1rem;
}

#trigger-modal-close,
#alias-modal-close,
#timer-modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

#trigger-modal-close:hover,
#alias-modal-close:hover,
#timer-modal-close:hover {
    color: #fff;
}

#trigger-modal-body,
#alias-modal-body,
#timer-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

#trigger-modal-footer,
#alias-modal-footer,
#timer-modal-footer {
    padding: 10px 16px;
    border-top: 1px solid #333;
    flex-shrink: 0;
}

#btn-add-trigger,
#btn-add-alias,
#btn-add-timer {
    background: #2b2b2b;
    border: 1px solid #555;
    color: #ffcc00;
    padding: 7px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.15s;
}

#btn-add-trigger:hover,
#btn-add-alias:hover,
#btn-add-timer:hover {
    background: #333;
}

/* Trigger list rows */
.trigger-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid #2b2b2b;
}

.trigger-row:last-child {
    border-bottom: none;
}

.trigger-row:hover {
    background: #222;
}

.trigger-row-info {
    flex: 1;
    min-width: 0;
}

.trigger-row-name {
    color: #f1f1f1;
    font-size: 0.85rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trigger-row-pattern {
    color: #888;
    font-size: 0.75rem;
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trigger-toggle {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: #ffcc00;
    transition: all 0.15s;
}

.trigger-btn {
    background: #2b2b2b;
    border: 1px solid #444;
    color: #ccc;
    padding: 4px 9px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: background-color 0.15s;
}

.trigger-btn:hover {
    background: #383838;
    color: #fff;
}

.trigger-btn-delete {
    color: #cc4444;
    border-color: #553333;
}

.trigger-btn-delete:hover {
    color: #ff6666;
    background: #3a2020;
}

.trigger-no-triggers {
    color: #555;
    font-size: 0.85rem;
    padding: 24px 16px;
    text-align: center;
    line-height: 1.6;
}

/* Trigger add/edit form */
.trigger-form-hidden {
    display: none;
}

#trigger-form,
#alias-form,
#timer-form {
    padding: 12px 16px;
    border-top: 1px solid #333;
    background: #161616;
}

#trigger-form label,
#alias-form label,
#timer-form label {
    display: block;
    color: #aaa;
    font-size: 0.78rem;
    margin-bottom: 4px;
    margin-top: 10px;
}

#trigger-form label:first-child,
#alias-form label:first-child,
#timer-form label:first-child {
    margin-top: 0;
}

#trigger-form input[type="text"],
#trigger-form textarea,
#alias-form input[type="text"],
#alias-form textarea,
#timer-form input[type="text"],
#timer-form input[type="number"],
#timer-form textarea {
    width: 100%;
    box-sizing: border-box;
    background: #2b2b2b;
    border: 1px solid #444;
    color: #f1f1f1;
    padding: 7px 9px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
}

#trigger-form input[type="text"]:focus,
#trigger-form textarea:focus,
#alias-form input[type="text"]:focus,
#alias-form textarea:focus,
#timer-form input[type="text"]:focus,
#timer-form input[type="number"]:focus,
#timer-form textarea:focus {
    outline: none;
    border-color: #ffcc00;
}

#trigger-form textarea,
#alias-form textarea,
#timer-form textarea {
    font-family: monospace;
    min-height: 72px;
}

.trigger-case-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.trigger-case-row input {
    accent-color: #ffcc00;
}

.trigger-case-row label {
    color: #aaa;
    font-size: 0.78rem;
    margin: 0;
    cursor: pointer;
}

.trigger-form-hint {
    color: #666;
    font-size: 0.72rem;
    margin-top: 3px;
}

.trigger-form-buttons {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    justify-content: flex-end;
}

.trigger-form-save {
    background: #3a5a1a;
    border: 1px solid #5a8a2a;
    color: #8ae234;
    padding: 7px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

.trigger-form-save:hover {
    background: #4a6e22;
}

.trigger-form-cancel {
    background: #2b2b2b;
    border: 1px solid #555;
    color: #aaa;
    padding: 7px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

.trigger-form-cancel:hover {
    background: #333;
    color: #fff;
}

.trigger-form-error {
    color: #ef2929;
    font-size: 0.78rem;
    margin-top: 8px;
    display: none;
}

/* Mobile: full-screen trigger/alias/timer modals */
@media (max-width: 768px) {
    #trigger-modal,
    #alias-modal,
    #timer-modal {
        align-items: flex-start;
        justify-content: flex-start;
    }

    #trigger-modal-box,
    #alias-modal-box,
    #timer-modal-box {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    #trigger-modal-header,
    #alias-modal-header,
    #timer-modal-header {
        padding: 10px 14px;
    }

    #trigger-modal-close,
    #alias-modal-close,
    #timer-modal-close {
        font-size: 1.6rem;
        padding: 0 6px;
    }

    .trigger-row {
        padding: 10px 14px;
        min-height: 44px;
    }

    .trigger-toggle {
        width: 22px;
        height: 22px;
    }

    .trigger-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
        min-height: 36px;
    }
}

/* === Long-Press Copy Popup === */
#longpress-popup {
    position: fixed;
    z-index: 2000;
    background: #1e1e1e;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 10px;
    width: 300px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
}

#longpress-input {
    width: 100%;
    box-sizing: border-box;
    background: #2b2b2b;
    border: 1px solid #ffcc00;
    color: #f1f1f1;
    padding: 7px 9px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: monospace;
    margin-bottom: 8px;
}

#longpress-input:focus {
    outline: none;
}

.longpress-btn-row {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.longpress-btn {
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid #555;
    cursor: pointer;
    font-size: 0.82rem;
    min-height: 36px;
}

.longpress-copy {
    background: #3a5a1a;
    border-color: #5a8a2a;
    color: #8ae234;
}

.longpress-copy:hover {
    background: #4a6e22;
}

.longpress-close {
    background: #2b2b2b;
    color: #aaa;
}

.longpress-close:hover {
    background: #383838;
    color: #fff;
}

/* === Timer status indicator === */
.timer-status {
    font-size: 0.72rem;
    font-weight: bold;
    flex-shrink: 0;
    white-space: nowrap;
}

.timer-status-running {
    color: #8ae234;
}

.timer-status-stopped {
    color: #555;
}

.timer-start-btn {
    background: #3a5a1a;
    border: 1px solid #5a8a2a;
    color: #8ae234;
    padding: 4px 9px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.timer-start-btn:hover {
    background: #4a6e22;
}

.timer-stop-btn {
    background: #5a1a1a;
    border: 1px solid #8a2a2a;
    color: #ef2929;
    padding: 4px 9px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.timer-stop-btn:hover {
    background: #6e2222;
}

.timer-type-row {
    display: flex;
    gap: 16px;
    margin-top: 6px;
}

.timer-type-row label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #aaa;
    font-size: 0.78rem;
    margin: 0 !important;
    cursor: pointer;
}

.timer-type-row input[type="radio"] {
    accent-color: #ffcc00;
}

/* === Automations submenu (mobile Tools button) === */
#automations-wrap {
    position: relative;
}

.automations-menu-hidden {
    display: none;
}

#automations-menu {
    position: fixed;
    top: 36px;
    right: 8px;
    background: #1e1e1e;
    border: 1px solid #555;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.7);
    z-index: 900;
    min-width: 160px;
    overflow: hidden;
}

.automations-item {
    display: block;
    width: 100%;
    padding: 13px 18px;
    background: none;
    border: none;
    border-bottom: 1px solid #2b2b2b;
    color: #f1f1f1;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.automations-item:last-child {
    border-bottom: none;
}

.automations-item:hover,
.automations-item:active {
    background: #2b2b2b;
    color: #ffcc00;
}

/* === Modal help button & panel === */
.modal-header-btns {
    display: flex;
    align-items: center;
    gap: 4px;
}

.modal-help-btn {
    background: none;
    border: 1px solid #555;
    color: #888;
    font-size: 0.8rem;
    font-weight: bold;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.15s, border-color 0.15s;
}

.modal-help-btn:hover {
    color: #ffcc00;
    border-color: #ffcc00;
}

.modal-help-btn.active {
    color: #ffcc00;
    border-color: #ffcc00;
    background: rgba(255, 204, 0, 0.1);
}

.modal-help-panel {
    background: #161616;
    border-bottom: 1px solid #2b2b2b;
    padding: 14px 16px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: #bbb;
}

.modal-help-hidden {
    display: none;
}

.modal-help-panel p {
    margin: 0 0 8px;
}

.modal-help-panel p:last-child {
    margin-bottom: 0;
}

.modal-help-panel code {
    background: #2b2b2b;
    color: #ffcc00;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.85em;
}

.modal-help-note {
    color: #888;
    font-size: 0.78rem;
    padding-top: 6px;
    border-top: 1px solid #2b2b2b;
    margin-top: 8px !important;
}

/* === Channel Popup Overlay === */
#popup-container {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    z-index: 10;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ch-popup-card {
    pointer-events: auto;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 150ms ease;
    max-width: 100%;
    overflow: hidden;
}

.ch-popup-label {
    display: block;
    font-size: 10px;
    color: #aaaaaa;
    margin-bottom: 1px;
    font-family: monospace;
}

.ch-popup-msg {
    display: block;
    font-size: 13px;
    color: #ffffff;
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Combo History Bar === */
#combo-bar {
    padding: 4px 12px;
    text-align: center;
    font-family: monospace;
    font-weight: bold;
    font-size: 13px;
    background: #1e1e1e;
    color: #FFD700;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
    transition: opacity 400ms ease;
}

#combo-bar.combo-break {
    background: #cc0000;
    color: #ffffff;
    border-color: #aa0000;
}

/* === Popup Settings Modal === */
#popup-modal-box {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 6px;
    width: 360px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

#popup-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #333;
    background: #252525;
    flex-shrink: 0;
}

#popup-modal-title {
    font-weight: bold;
    color: #f1f1f1;
    font-size: 1rem;
}

#popup-modal-body {
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1;
}

.popup-channel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #2b2b2b;
    color: #f1f1f1;
    font-size: 0.9rem;
}

.popup-channel-row:last-child {
    border-bottom: none;
}

.popup-fade-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    color: #aaa;
    font-size: 0.85rem;
}

.popup-fade-row input {
    width: 60px;
    background: #2b2b2b;
    border: 1px solid #444;
    color: #f1f1f1;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 0.9rem;
}