.tl-toolbar {
    display: flex; flex-wrap: wrap; gap: 1.5rem;
    align-items: center; justify-content: space-between;
    background: #16161a; border: 1px solid #2a2a2d; border-radius: 8px;
    padding: 0.8rem 1rem; margin-bottom: 1rem;
}
.tl-filters { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
.tl-filters label {
    display: inline-flex; flex-direction: column; gap: 0.2rem;
    font-size: 0.7rem; color: #8a8a92; text-transform: uppercase; letter-spacing: 0.6px;
}
.tl-filters select, .tl-filters input {
    background: #0e0e10; border: 1px solid #2a2a2d; color: #e8e8ea;
    padding: 0.35rem 0.5rem; border-radius: 4px; font-size: 0.9rem;
    min-width: 120px;
}
.tl-filters input { min-width: 0; }
.tl-filters .checkbox-label {
    flex-direction: row; align-items: center; gap: 0.4rem;
    text-transform: none; letter-spacing: normal; font-size: 0.85rem;
    color: #c0c0c8; padding-bottom: 0.4rem;
}
.tl-filters .checkbox-label input { min-width: 0; width: auto; }
.tl-filters button {
    background: #4a4a55; color: #fff; border: none;
    padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; align-self: flex-end;
    font-size: 0.85rem;
}
.tl-filters button:hover { background: #5a5a66; }
.tl-stats { color: #888; font-size: 0.85rem; align-self: flex-end; }

.tl-legend { display: flex; gap: 1.2rem; align-items: center; font-size: 0.8rem; color: #a0a0a8; }
.tl-legend .leg { display: inline-flex; align-items: center; gap: 0.4rem; }
.tl-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tl-legend .dot-in { background: #ffb84d; }
.tl-legend .dot-out { background: transparent; border: 1.5px solid #4dd0e1; }
.tl-legend .swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.tl-legend .sw-me { background: rgba(255,90,90,0.5); }
.tl-legend .sw-them { background: rgba(255,217,90,0.45); }
.tl-legend .sw-stalled { background: rgba(140,140,150,0.35); }

#tl-chart { background: #0e0e10; border-radius: 8px; overflow: hidden; }
#tl-chart svg { display: block; width: 100%; }

/* lane backgrounds */
.lane-bg { transition: opacity 0.15s; }
.lane-bg.lane-waiting_me { fill: #ff5a5a; opacity: 0.07; }
.lane-bg.lane-waiting_them { fill: #ffd95a; opacity: 0.05; }
.lane-bg.lane-stalled { fill: #8a8a90; opacity: 0.04; }
.lane-bg.lane-closed { fill: #4dd0e1; opacity: 0.04; }
.lane-bg.lane-open { fill: #fff; opacity: 0.03; }
.lane-bg.hovered { opacity: 0.18; }

.lane-line { stroke: #2a2a2d; stroke-width: 1; }

/* axis */
.tl-axis line, .tl-axis path { stroke: #2a2a2d; }
.tl-axis text { fill: #888; font-size: 11px; font-family: monospace; }

/* labels (left) */
.lane-label {
    fill: #c0c0c8; font-size: 12px; cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.lane-label:hover { fill: #fff; }
.lane-meta { fill: #6a6a72; font-size: 10px; }
.lane-status-dot { stroke: #0e0e10; stroke-width: 1.5; }

/* event circles */
.event {
    cursor: pointer;
    transition: r 0.1s;
}
.event-in { fill: #ffb84d; }
.event-out { fill: none; stroke: #4dd0e1; stroke-width: 1.7; }
.event:hover { stroke: #fff; stroke-width: 1.5; }

/* connecting line per conversation (faint) */
.lane-thread { stroke: #2a2a2d; stroke-width: 1; opacity: 0.6; }

/* Tooltip */
.tl-tooltip {
    position: absolute;
    background: #1a1a1d;
    border: 1px solid #4a4a55;
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    color: #e8e8ea;
    font-size: 0.85rem;
    max-width: 380px;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
.tl-tooltip .tt-time { color: #888; font-family: monospace; font-size: 0.78rem; }
.tl-tooltip .tt-channel {
    background: #2a2a2d; padding: 0.05rem 0.4rem; border-radius: 3px;
    font-size: 0.7rem; margin-left: 0.4rem;
}
.tl-tooltip .tt-summary { margin-top: 0.3rem; color: #c0c0c8; }
.tl-tooltip .tt-arrow { color: #ffb84d; font-weight: bold; }
.tl-tooltip .tt-arrow-out { color: #4dd0e1; }