.tal-dti { width:100%; box-sizing:border-box; }
.tal-dti * { box-sizing:border-box; }

.tal-dti-widget {
    display:grid;
    grid-template-columns:minmax(300px,420px) 1fr;
    height:700px;
    border:1px solid #e6e6e6;
    border-radius:14px;
    overflow:hidden;
    background:#fff;
}

/* Left: internally scrolling timeline. The map never scrolls with it. */
.tal-dti-timeline {
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:#cfcfcf transparent;
    border-right:1px solid #ececec;
}
.tal-dti-timeline::-webkit-scrollbar { width:6px; }
.tal-dti-timeline::-webkit-scrollbar-thumb { background:#d6d6d6; border-radius:3px; }

.tal-dti-timeline-inner { padding:18px 16px; }

.tal-dti-day-row {
    display:grid;
    grid-template-columns:24px 46px 88px 1fr;
    gap:12px;
    align-items:start;
    padding:12px 10px;
    border-radius:10px;
    scroll-margin-top:16px;
    cursor:pointer;
    transition:background-color .35s ease;
}
.tal-dti-day-row:hover { background:#f5f6fa; }
.tal-dti-day-row.is-active:hover { background:#eef2ff; }
.tal-dti-day-row.is-active { background:#eef2ff; }

.tal-dti-row-rail { position:relative; display:flex; justify-content:center; }
.tal-dti-row-rail::before {
    content:'';
    position:absolute;
    top:28px;
    bottom:-24px;
    left:50%;
    width:2px;
    margin-left:-1px;
    background-image:linear-gradient(#d9d9d9 55%, rgba(255,255,255,0) 0%);
    background-size:2px 8px;
    background-repeat:repeat-y;
}
.tal-dti-day-row:last-child .tal-dti-row-rail::before { display:none; }

.tal-dti-row-status {
    position:relative;
    z-index:1;
    width:24px;
    height:24px;
    border-radius:50%;
    border:2px solid #c7c7c7;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:border-color .3s ease, background-color .3s ease;
}
.tal-dti-day-row.is-done .tal-dti-row-status { border-color:#9aa0a6; background:#9aa0a6; }
.tal-dti-day-row.is-done .tal-dti-row-status::after {
    content:'';
    width:6px; height:10px;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    transform:rotate(45deg) translate(-1px,-1px);
}
.tal-dti-day-row.is-active .tal-dti-row-status { border-color:#2f6fed; }
.tal-dti-day-row.is-active .tal-dti-row-status::after {
    content:'';
    width:9px; height:9px;
    border-radius:50%;
    background:#2f6fed;
}

.tal-dti-row-daymeta { padding-top:2px; }
.tal-dti-row-daylabel { font-size:11px; letter-spacing:.06em; font-weight:700; color:#3a3a3a; white-space:nowrap; }
.tal-dti-row-date { font-size:11px; color:#9a9a9a; margin-top:3px; white-space:nowrap; }

.tal-dti-row-thumb img { width:88px; height:66px; object-fit:cover; border-radius:8px; display:block; }

.tal-dti-row-title { margin:0 0 6px; font-size:16px; line-height:1.25; font-weight:600; color:#1a1a1a; }
.tal-dti-row-locations { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.tal-dti-row-locations li { font-size:12.5px; color:#666; padding-left:13px; position:relative; }
.tal-dti-row-locations li::before {
    content:'';
    position:absolute; left:0; top:5px;
    width:5px; height:5px; border-radius:50%;
    background:#9aa0a6;
}
.tal-dti-row-description { font-size:12px; color:#7a7a7a; margin-top:6px; line-height:1.55; }

/* Right: fixed map pane, fills the widget height, never moves. */
.tal-dti-map-pane { position:relative; height:100%; }
.tal-dti-map { width:100%; height:100%; background:#eee; }

.tal-dti-map-badge {
    position:absolute;
    transform:translate(-50%, calc(-100% - 2px));
    display:flex;
    flex-direction:column;
    align-items:center;
    pointer-events:auto;
    cursor:pointer;
}
.tal-dti-map-badge-number {
    width:28px; height:28px;
    border-radius:50%;
    background:#9aa0a6;
    color:#fff;
    font-size:12.5px;
    font-weight:700;
    display:flex; align-items:center; justify-content:center;
    border:2px solid #fff;
    box-shadow:0 1px 5px rgba(0,0,0,.25);
    transition:background-color .3s ease, transform .3s ease;
}
.tal-dti-map-badge.is-active .tal-dti-map-badge-number { background:#2f6fed; transform:scale(1.12); }
.tal-dti-map-badge.is-done .tal-dti-map-badge-number { background:#6b7280; }

.tal-dti-map-badge-card {
    margin-top:5px;
    background:#fff;
    border-radius:8px;
    padding:7px 10px;
    box-shadow:0 2px 10px rgba(0,0,0,.16);
    font-size:11px;
    max-width:170px;
    text-align:left;
    transition:box-shadow .3s ease;
}
.tal-dti-map-badge.is-active .tal-dti-map-badge-card { box-shadow:0 4px 16px rgba(47,111,237,.28); }
.tal-dti-map-badge-card strong { display:block; font-size:12.5px; color:#1a1a1a; margin-bottom:2px; }
.tal-dti-map-badge-card ul { list-style:none; margin:0; padding:0; }
.tal-dti-map-badge-card li { font-size:11px; color:#666; line-height:1.5; }

/* Small tail connecting the label card down to its actual map coordinate. */
.tal-dti-map-badge-pointer {
    width:0; height:0;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:7px solid #fff;
    margin-top:-1px;
}

.tal-dti-empty { padding:30px; background:#f7f7f7; }

@media (max-width: 767px) {
    .tal-dti-widget { grid-template-columns:1fr; height:auto; }
    .tal-dti-map-pane { height:280px; order:-1; }
    .tal-dti-timeline { height:440px; border-right:0; border-top:1px solid #ececec; }
    .tal-dti-row-thumb img { width:70px; height:54px; }
    .tal-dti-day-row { grid-template-columns:20px 40px 70px 1fr; gap:10px; }
}