.zhab{position:fixed;z-index:9999;font-family:inherit}
.zhab-trigger{width:56px;height:56px;border-radius:9999px;border:none;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 25px rgba(0,0,0,.18);background:#fff;padding:0}
.zhab-trigger img,.zhab-trigger svg{width:28px;height:28px}
.zhab-panel{position:absolute;bottom:64px;right:0;max-width:420px;width:88vw;background:#fff;border-radius:18px;box-shadow:0 16px 40px rgba(0,0,0,.22);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .25s ease, transform .25s ease}
.zhab-left .zhab-panel{left:0;right:auto}
.zhab[data-opened="1"] .zhab-panel{opacity:1;transform:translateY(0);pointer-events:auto}
.zhab .zhab-close{position:absolute;top:8px;right:12px;background:transparent;border:none;font-size:24px;line-height:1;cursor:pointer}
.zhab-inner{padding:16px}
.zhab-title{font-size:18px;margin:.2em 0 .4em;font-weight:800}
.zhab-cover{width:100%;height:auto;border-radius:12px;margin:.4em 0;display:block}
.zhab-content p{margin:.4em 0}
.zhab-content iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.16);}
.zhab.zhab-dragging{cursor:grabbing}.tsc-topbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.tsc-mid{display:flex;gap:8px;align-items:center;margin:8px 0}
.tsc-result{padding:10px;border-radius:8px;margin:6px 0;border:1px solid #22304f;background:#0f172a;color:#e2e8f0}
.tsc-result.ok{border-color:#225533}
.tsc-result.warn{border-color:#8a6d1a}
.tsc-result.bad{border-color:#8a1a1a}
.tsc-stats{font-size:14px;color:#9fb3c8;margin-top:6px}
.tsc-map-controls{font-size:14px;}
.tsc-map-controls label{user-select:none;} .tsc-lines-legend {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0 1rem;
}
.tsc-line-pill {
padding: 0.25rem 0.75rem;
border-radius: 999px;
border: 2px solid currentColor;
background: transparent;
cursor: pointer;
font-weight: 600;
font-size: 0.9rem;
line-height: 1.2;
}
.tsc-line-pill.active {
color: #fff !important;
} .tsc-widget {
--tsc-accent: #f59e0b;
}
.tsc-widget .tsc-calc {
background-color: var(--tsc-accent);
border-color: var(--tsc-accent);
} .tsc-map-wrap {
position: relative;
}
.tsc-map-tools-under {
margin: 8px 0 12px;
}
.tsc-tools-box {
pointer-events: auto;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(15, 23, 42, .25);
padding: 8px;
width: 320px;
max-width: 90vw;
font-size: 13px;
color: #111827;
}
.tsc-tools-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
}
.tsc-tools-row input[type="text"] {
flex: 1;
padding: 4px 7px;
border-radius: 999px;
border: 1px solid #d1d5db;
font-size: 13px;
}
.tsc-tools-box button {
border: none;
padding: 5px 9px;
border-radius: 999px;
background: #0ea5e9;
color: #fff;
font-size: 12px;
cursor: pointer;
white-space: nowrap;
}
.tsc-tools-box button:hover {
background: #0284c7;
} .tsc-tools-row-buttons {
flex-wrap: wrap;
} .tsc-tools-row-buttons button {
flex: 1 1 32%;
text-align: center;
}
.tsc-tools-row-poi span {
font-size: 11px;
color: #6b7280;
margin-right: 4px;
}
.tsc-tools-row-poi .tsc-poi-btn {
background: #f3f4f6;
color: #111827;
border: 1px solid #d1d5db;
padding: 4px 7px;
}
.tsc-tools-row-poi .tsc-poi-btn:hover {
background: #e5e7eb;
}
.tsc-gpt-output {
font-size: 12px;
max-height: 140px;
overflow: auto;
background: #f3f4f6;
border-radius: 6px;
padding: 4px 6px;
} .tsc-map-tools-under {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-start;
}
.tsc-tools-box {
flex: 0 1 340px;
}
.tsc-directions-box {
background: #ffffff;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(15, 23, 42, .25);
padding: 8px 10px;
font-size: 12px;
max-height: 360px;
overflow: auto;
flex: 1 1 260px;
}
.tsc-directions-title {
font-weight: 600;
margin-bottom: 4px;
}
.tsc-osrm-directions {
margin: 0;
padding-left: 18px;
}
.tsc-osrm-directions li {
margin-bottom: 3px;
} .tsc-tools-row-modes {
display: flex;
align-items: center;
gap: 6px;
}
.tsc-modes-label {
font-size: 11px;
color: #6b7280;
margin-right: 4px;
}
.tsc-mode-btn {
background: #f3f4f6;
color: #111827;
border: 1px solid #d1d5db;
padding: 4px 7px;
border-radius: 999px;
font-size: 14px;
cursor: pointer;
}
.tsc-mode-btn:hover {
background: #e5e7eb;
} .tsc-tools-row-toggle {
justify-content: flex-start;
}
.tsc-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-size: 12px;
}
.tsc-toggle input[type="checkbox"] {
display: none;
}
.tsc-toggle-slider {
width: 32px;
height: 18px;
border-radius: 999px;
background: #e5e7eb;
position: relative;
transition: background 0.2s ease;
}
.tsc-toggle-slider::before {
content: "";
position: absolute;
width: 14px;
height: 14px;
border-radius: 999px;
background: #ffffff;
top: 2px;
left: 2px;
transition: transform 0.2s ease;
box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
}
.tsc-toggle input[type="checkbox"]:checked + .tsc-toggle-slider {
background: #22c55e;
}
.tsc-toggle input[type="checkbox"]:checked + .tsc-toggle-slider::before {
transform: translateX(14px);
}
.tsc-toggle-label {
color: #374151;
}
.tsc-poi-btn.tsc-poi-active {
background-color: #00a3e0;
color: #fff;
} .tsc-tools-row-gpt button {
margin-right: 6px;
}
.tsc-chat-faq-list {
max-height: 240px;
overflow-y: auto;
padding-right: 4px;
}
.tsc-chat-faq-item summary {
cursor: pointer;
font-weight: 600;
}
.tsc-chat-faq-links {
margin: 0.5em 0 0;
padding-left: 1.2em;
} .tsc-osrm-directions li.tsc-osrm-step-motorway {
font-weight: 600;
}
.tsc-osrm-directions li.tsc-osrm-step-toll {
text-decoration: underline;
} .tsc-directions-box .tsc-osrm-motorway-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 6px 0 10px;
cursor: pointer;
font-size: 12px;
} .tsc-directions-box .tsc-osrm-motorway-toggle .tsc-toggle-slider {
width: 32px;
height: 18px;
border-radius: 999px;
background: #e5e7eb;
position: relative;
transition: background 0.2s ease;
} .tsc-directions-box .tsc-osrm-motorway-toggle .tsc-toggle-slider::before {
content: "";
position: absolute;
width: 14px;
height: 14px;
border-radius: 999px;
background: #ffffff;
top: 2px;
left: 2px;
box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
} .tsc-directions-box .tsc-osrm-motorway-toggle input[type="checkbox"]:checked + .tsc-toggle-slider {
background: #00a3e0;
} .tsc-directions-box .tsc-osrm-motorway-toggle .tsc-toggle-label {
color: #374151;
}
.tsc-directions-box .tsc-osrm-motorway-toggle input[type="checkbox"]:checked + .tsc-toggle-slider + .tsc-toggle-label {
font-weight: 600;
} .tsc-widget.tsc-widget--with-smc {
display: flex;
flex-direction: column;
} .tsc-widget.tsc-widget--with-smc .tsc-smc2-wrapper {
order: 1;
} .tsc-widget.tsc-widget--with-smc .tsc-map-wrap,
.tsc-widget.tsc-widget--with-smc .tsc-map-tools-under {
order: 2;
} .tsc-map-tools-under {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 16px;
}
.tsc-tools-box,
.tsc-directions-box {
max-width: 420px;
} .tsc-widget.tsc-widget--with-smc .tsc-map-wrap {
order: 1;
}
.tsc-widget.tsc-widget--with-smc .tsc-map-tools-under {
order: 2;
} .tsc-map-poi-under {
margin: 8px 0 4px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.tsc-map-poi-under .tsc-tools-row-poi--map {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(255,255,255,0.85);
box-shadow: 0 6px 18px rgba(15,23,42,0.25);
}
.tsc-map-poi-under .tsc-tools-row-poi--map span {
font-size: 12px;
font-weight: 500;
margin-right: 4px;
}
.tsc-map-poi-under .tsc-poi-btn--map {
border: none;
background: #f1f5f9;
border-radius: 999px;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
} .tsc-map-poi-under .tsc-poi-btn--map img,
.tsc-tools-row-poi .tsc-poi-btn img {
width: 24px;
height: 24px;
display: block;
}
.tsc-map-poi-under .tsc-poi-btn--map:hover {
background: #e2e8f0;
} .tsc-map-wrap {
position: relative;
}
.tsc-map-bus-toggle {
position: relative;
z-index: 1;
}
.tsc-map-bus-toggle .tsc-toggle--map {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
}
.tsc-map-bus-toggle .tsc-toggle-label {
font-size: 11px;
font-weight: 500;
color: #111827;
}