/* Cars on Site: Tools panel (shared with the chatbot page, styled by chat-ui.css inside .cos-tools-scope).
   Phone + tablet: full width under 480px, scrolls on its own, 44px tap targets, above the sticky header. */
.cos-tools-btn { cursor: pointer; }
a.cos-tools-btn { text-decoration: none; } /* the Bookings calendar button is a link styled like the Tools button */
.cos-tools-scope .tools-panel { height: 100vh; height: 100dvh; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cos-tools-scope .tools-panel .tools-header { padding-top: calc(env(safe-area-inset-top) + 16px); }
.cos-tools-scope .tools-panel .tools-content { padding-bottom: calc(env(safe-area-inset-bottom) + 40px); }
.cos-tools-scope #close-tools { width: 44px; height: 44px; }
.cos-tools-scope .tools-section-header { min-height: 48px; }
.cos-tools-scope .tools-content .gold-button, .cos-tools-scope .tools-content .red-button { min-height: 44px; }
.cos-tools-scope .tool-input { font-size: 16px !important; } /* stops iOS zooming on focus */
@media (max-width: 479.98px) {
    .cos-tools-scope .tools-panel { max-width: 100% !important; }
}
/* Phone app bar: sits next to the gear, same size */
@media (max-width: 639.98px) {
    #bookings-button { display: none; } /* phones: Bookings stays in the gear menu only, to keep the app bar uncrowded */
    #tools-button.cos-tools-btn { order: 2; flex: 0 0 auto; width: 40px; height: 40px; min-height: 40px; padding: 0; font-size: 16px; }
}
/* Landscape phones: short screens, keep the header compact so more of the tools fit */
@media (max-height: 500px) and (orientation: landscape) {
    .cos-tools-scope .tools-panel .tools-header { padding-top: calc(env(safe-area-inset-top) + 8px); padding-bottom: 8px; }
    .cos-tools-scope .tools-panel { max-width: min(28rem, 70vw) !important; }
}
body.cos-tools-open { overflow: hidden; } /* board doesn't scroll behind the panel */