/* Touch hit areas (WCAG 2.5.5): on a coarse pointer every control is at least 44x44 CSS px (--control-touch-height). Loaded last so it wins over the smaller touch sizes in mobile.css and popout.css. Fine pointers (mouse, trackpad) keep the desktop layout: nothing here applies to them. */ @media (pointer: coarse) { /* Square icon buttons: top bar, side-panel and sidebar toggles, Send, Open Agent Tab, refresh, Agent UI panel actions, Copy path, row kebabs. */ .top-bar-btn, #panel-toggle-btn, .tablet-sidebar-toggle, #popout-panel-toggle-btn, #terminal-open-window-link, .mobile-send-btn, .refresh-files-btn, .agent-ui-card button, .agent-ui-home-row, .agent-ui-actions .agent-ui-dismiss, .file-action-btn, .folder-copy-btn, .sidebar-kebab-btn { min-width: var(--control-touch-height); min-height: var(--control-touch-height); } /* The Open Agent Tab link is an anchor; centre its icon in the larger box. */ #terminal-open-window-link:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; } /* Tabs and inline selects keep their width; only short ones grow wider. */ .nav-select, .top-nav-tab, .agentic-tab { min-width: var(--control-touch-height); min-height: var(--control-touch-height); } .diff-mode-select { min-height: var(--control-touch-height); } /* Round 2 (#3098). The phone side-panel overlay fixes its tabs at 40px (mobile.css, more specific than .agentic-tab above); its strip grows to fit. */ .agentic-state.mobile-panel-overlay .agentic-tab, .agentic-state.mobile-panel-overlay #agentic-mobile-close-btn { height: var(--control-touch-height); min-height: var(--control-touch-height); } .agentic-state.mobile-panel-overlay .agentic-state-tabs { height: auto; } /* Small icon buttons in file rows (favourite stars, Browse row actions): the glyph keeps its size; the button around it is the 44px hit area. */ .file-star-btn, .explorer-action-btn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-touch-height); min-height: var(--control-touch-height); } /* Browse rows reveal their actions on hover, which a touch screen has not got. */ .explorer-actions { opacity: 1; } /* Phone layout pass (#4081): the small controls left at 320 to 414 px: the Chat/Terminal toggle and the header's Find button, a chat bubble's Copy, the Copy in the Info dialog, a dialog's close button (it was 32 wide), the job type buttons, and the Show/Hide of a password field (it floated at half the field's height). */ .live-view-toggle-btn, #chat-find-btn, .chat-copy-btn, .chat-save-btn, .mb-save-btn, .copy-btn, .modal-close-btn, .job-type-btn, .board-chat-toolbar .btn-nav, #board-chat-pause-btn, .board-select-btn, .board-chat-title { min-width: var(--control-touch-height); min-height: var(--control-touch-height); } /* Save for later (#4510) sits beside the 44 px Copy, not on it; both are always shown on touch. */ .chat-prose.chat-messages .chat-bubble .chat-save-btn { right: calc(var(--control-touch-height) - 4px); } .chat-prose.chat-messages .chat-bubble.human .chat-save-btn { right: -4px; } .chat-bubble .chat-save-btn { right: calc(var(--control-touch-height) - 4px); opacity: 1; } /* The 44 px Save and Copy hang under a message (45 px with their gap): the message's own bottom margin (22 px) plus the 24 px they need, so they sit in the gap and not over the next message. */ .chat-prose.chat-messages .chat-bubble.assistant, .chat-prose.chat-messages .chat-bubble.human { margin-bottom: 46px; } .chat-bubble.human .chat-save-btn { right: 6px; } .board-chat-title { display: inline-flex; align-items: center; } /* Scenes added in #4086: the Launch dialog's Back arrow and its Permissions toggle, the Servers form's fields, the goal button in an agent row (it only showed in landscape), and the "Details" disclosure inside a Servers row's error line (the hit area grows, the line does not: padding and an equal negative margin). */ .launch-back-btn, .permissions-toggle-btn, .sidebar-goal-btn { min-width: var(--control-touch-height); min-height: var(--control-touch-height); } .permissions-toggle-btn { display: flex; align-items: center; } .session-group-item .sidebar-goal-btn-inline { min-width: var(--control-touch-height); min-height: var(--control-touch-height); margin: -10px 0; /* the row keeps its height: only the hit area grows */ } .servers-form input:not([type="checkbox"]):not([type="radio"]) { min-height: var(--control-touch-height); } .servers-row-detail summary { display: inline-block; padding: 15px 6px; margin: -15px 0; } .terminal-header { height: auto; min-height: var(--control-touch-height); } .live-view-toggle-btn, #chat-find-btn { display: inline-flex; align-items: center; justify-content: center; } .pw-toggle { top: 0; bottom: 0; transform: none; display: flex; align-items: center; min-width: var(--control-touch-height); justify-content: center; } /* A disclosure row in a dialog ("Advanced", "Custom view code") is a whole-row tap target. */ .modal-content summary { display: list-item; /* keeps the disclosure marker */ box-sizing: border-box; min-height: var(--control-touch-height); padding-block: 12px; } /* Dropdown rows (#3131): the top-bar settings menu, the Cloud Hub account menu (Servers / Sign out) and the agent row menus share this class. */ .overflow-menu-item { min-height: var(--control-touch-height); } /* The docked sidebar on a tablet (#3131): its toolbar buttons, the agent search, the Display options rows (the label is the checkbox's hit area) and the agent rows. The phone agent list keeps its own row sizing (#mobile-session-list, mobile.css). */ .sidebar-collapse-btn, #sidebar-summary-btn { min-width: var(--control-touch-height); min-height: var(--control-touch-height); } #agent-search-input, .session-group-item, /* the compact one-line rows when summaries are hidden (layout.css) */ .sidebar.summary-hidden .session-group-item:not(:has(.session-unread-chip)), .sidebar.summary-hidden .board-card-agents .session-group-item:not(:has(.session-unread-chip)) { min-height: var(--control-touch-height); } /* The home view's link row (Documentation, GitHub, Forum, Mobile QR code). */ .welcome-links a, .welcome-links button { min-height: var(--control-touch-height); } .list-display-option { display: flex; align-items: center; min-height: var(--control-touch-height); } /* Browse and Team Artifacts rows, the file filter, the list actions and the Servers tab's Access select. */ .explorer-item, .files-search-input, .list-bar-search, .list-bar-filter-btn, .list-bar-clear-all, .list-bar-select, .list-bar-by, .list-bar-chip, .list-bar-field input[type="date"], .team-artifacts-action, .cs-launch select { min-height: var(--control-touch-height); } .list-bar-kept { min-height: var(--control-touch-height); } .list-bar-kept input[type="checkbox"] { width: 1.5rem; height: 1.5rem; } .list-bar-clear-q { width: var(--control-touch-height); height: var(--control-touch-height); right: 0; } } /* Inline icons drawn as follow the text size like the icon font's glyphs do (#4344, #4352): the attributes are pixels, so a larger browser text size left them small beside their rem labels. Same size at the default text size (N / 16 rem). A stylesheet rule that gives a particular icon its own width wins over these by being more specific. */ svg[width="8"][height="8"] { width: 0.5rem; height: 0.5rem; } svg[width="10"][height="10"] { width: 0.625rem; height: 0.625rem; } svg[width="12"][height="12"] { width: 0.75rem; height: 0.75rem; } svg[width="13"][height="13"] { width: 0.8125rem; height: 0.8125rem; } svg[width="14"][height="14"] { width: 0.875rem; height: 0.875rem; } svg[width="15"][height="15"] { width: 0.9375rem; height: 0.9375rem; } svg[width="16"][height="16"] { width: 1rem; height: 1rem; } svg[width="18"][height="18"] { width: 1.125rem; height: 1.125rem; } svg[width="24"][height="24"] { width: 1.5rem; height: 1.5rem; } svg[width="32"][height="32"] { width: 2rem; height: 2rem; } svg[width="48"][height="48"] { width: 3rem; height: 3rem; } /* A tablet or a touch laptop is wider than the phone rules above reach (768 px and up) but still touched: the command pane's key and send buttons and the history search box are 44 px targets on any touch screen (#4352). */ @media (pointer: coarse) { .command-pane-toolbar .btn-nav, #command-pane .btn-nav { min-height: var(--control-touch-height, 44px); min-width: var(--control-touch-height, 44px); } #history-search { min-height: var(--control-touch-height, 44px); } .board-task-sort, .board-task-status-wrap, .board-task-open { min-height: var(--control-touch-height, 44px); display: inline-flex; align-items: center; box-sizing: border-box; } .board-task-id { min-width: var(--control-touch-height, 44px); justify-content: center; } } /* The phone pass (#5219): controls the first walk of the new views found under 44 px on a coarse pointer. */ @media (pointer: coarse) { .preview-tab-close { min-width: var(--control-touch-height, 44px); min-height: var(--control-touch-height, 44px); display: inline-flex; align-items: center; justify-content: center; } .artifact-viewer-close, .artifact-viewer-download, .ac-toggle { min-width: var(--control-touch-height, 44px); min-height: var(--control-touch-height, 44px); } .ac-filter { min-width: var(--control-touch-height, 44px); } .terminal-branch-text, .title-branch .branch-text { min-height: var(--control-touch-height, 44px); min-width: var(--control-touch-height, 44px); line-height: var(--control-touch-height, 44px); vertical-align: middle; } .prompt-inspection-fragment summary { display: flex; align-items: center; min-height: var(--control-touch-height, 44px); } }