/* ============================================================
   FRONT, as the Front page's setup video draws it (Dom, 30 Oct 2026):
   app.frontapp.com seen on 30 Oct 2026 (InterVariable 14px, text #15131B,
   names #352C3A, previews #656972, the purple #6257F4 of "Create agent";
   its own icons, copied from it: 16px, filled, #352C3A in menus, #656972
   in the rail):
   a rail of icons; Settings > Company > Agents and its Create agent
   screens (Identity, AI engine, Credentials, Permissions, Escalation, the
   fields an agent's Settings shows); and the inbox: Sales, a quote
   request, the assignee menu with its "Agents" group, Askpilot's replies
   and comments. Plus what this video adds to the Askpilot app: the Front
   source's "Bring your AI agent" tab, and Front's sign-in window.
   Markup: tools/demos/front-setup.html; script: js/demos/front-setup.js.
   ============================================================ */
.dv-app.fr.dp-cur { display: flex; background: #ECEBF1; font-family: Inter, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; color: #15131B; }
.fr svg { stroke-width: 1.7; }
.fr-page { display: none; }
.fr-page.dp-cur { display: flex; flex: 1; min-width: 0; }

/* the rail */
.fr-rail { flex: none; display: flex; flex-direction: column; align-items: center; gap: 16px; width: 52px; padding: 14px 0 12px; box-sizing: border-box; }
.fr-rail span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: #656972; transition: background-color .15s ease; }
.fr-rail span svg { width: 16px; height: 16px; }
.fr-rail span.is-cur { background: #FCFBFE; color: #6257F4; box-shadow: 0 1px 2px rgba(21, 19, 27, .08); }
.fr-rail span.is-hover { background: #DDDCE4; }
.fr-rail .fr-ri-f, .fr-rail .is-cur > .fr-ri-o { display: none; }
.fr-rail .is-cur > .fr-ri-f { display: block; }
.fr-rail-sep { width: 20px; height: 1px; margin: -6px 0; background: #D3D1DA; }
.fr-rail-help { margin-top: auto; }
.fr-rail-me { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #F2C46B; font-size: 10px; font-weight: 700; color: #3C2E10; }

/* Settings and Inbox sidebars */
.fr-snav, .fr-inav { flex: none; display: flex; flex-direction: column; gap: 1px; width: 236px; padding: 14px 10px 0 6px; box-sizing: border-box; overflow: hidden; white-space: nowrap; }
.fr-snav-h { display: flex; align-items: center; justify-content: space-between; height: 30px; margin: 0 0 8px 8px !important; }
.fr-snav-h b { font-size: 16px; font-weight: 700; }
.fr-snav-h svg { width: 20px; height: 20px; color: #352C3A; }
.fr-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px 6px !important; }
.fr-seg span { display: flex; align-items: center; justify-content: center; height: 28px; box-sizing: border-box; border: 1px solid #D8D6DB; border-radius: 6px; color: #352C3A; }
.fr-seg span.is-cur { background: rgba(0, 0, 0, .08); }
.fr-seg svg { width: 16px; height: 16px; }
.fr-seg i { width: 3px; height: 13px; margin-left: 1px; border-radius: 0 3px 3px 0; background: #CFF1F4; }
.fr-seg i + i { opacity: .5; }
.fr-snav small, .fr-inav small { margin: 14px 0 4px 10px; font-size: 12px; font-weight: 600; color: #656972; }
.fr-si { display: flex; align-items: center; gap: 8px; height: 32px; padding: 3px 5px 3px 8px; box-sizing: border-box; border-radius: 6px; font-size: 14px; color: #15131B; transition: background-color .15s ease; }
.fr-si svg { flex: none; width: 16px; height: 16px; color: #352C3A; }
.fr-si.is-cur { background: rgba(0, 0, 0, .08); }
.fr-si.is-hover:not(.is-cur) { background: rgba(0, 0, 0, .05); }
.fr-si em { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: #D2F2F6; font-size: 11.5px; font-style: normal; font-weight: 500; color: #00758A; }
.fr-si em.fr-n { margin-left: auto; padding: 0; background: none; font-size: 12.5px; color: #4B4955; }
.fr-si-sub { padding-left: 24px; }
.fr-compose { display: flex; align-items: center; gap: 4px; height: 28px; margin-left: 8px; padding: 0 6px; box-sizing: border-box; border-radius: 6px; background: #6257F4; color: #fff; }
.fr-compose svg { width: 18px; height: 18px; color: #fff; }
.fr-compose i { width: 1px; height: 14px; background: rgba(255, 255, 255, .35); }
.fr-compose .fr-compose-c { width: 12px; height: 12px; }
.fr-ws { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 4px; background: #CFF1F4; font-size: 9px; font-style: normal; font-weight: 700; color: #00758A; }
.fr-si em.fr-ws { margin: 0; padding: 0; font-size: 9px; }

/* the white panel */
.fr-panel { display: none; flex: 1; min-width: 0; margin: 8px 8px 0 0; padding: 28px 32px 0; box-sizing: border-box; overflow: hidden; border-radius: 12px 12px 0 0; background: #FCFCFD; box-shadow: 0 0 0 1px rgba(21, 19, 27, .04); }
.fr-panel.dp-cur { display: block; }
.fr-crumb { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #727683; }
.fr-crumb svg { width: 12px; height: 12px; }
.fr-crumb-c { width: 12px !important; height: 12px !important; margin: 0 2px; }
.fr-h { margin-top: 8px !important; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.fr-tabs { display: flex; gap: 18px; margin-top: 18px !important; border-bottom: 1px solid #E8E7ED; }
.fr-tabs span { padding-bottom: 9px; font-size: 14px; color: #4B4955; }
.fr-tabs span.is-cur { position: relative; font-weight: 500; color: #15131B; }
.fr-tabs span.is-cur::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #15131B; }
.fr-tools { display: flex; align-items: center; justify-content: space-between; margin-top: 20px !important; }
.fr-search { display: flex; align-items: center; gap: 8px; width: 270px; height: 30px; padding: 0 10px; box-sizing: border-box; border-radius: 7px; background: #F0EFF3; font-size: 13.5px; color: #8D8A96; }
.fr-search svg { width: 16px; height: 16px; }
.fr-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; box-sizing: border-box; border-radius: 7px; background: #6257F4; font-size: 14px; font-weight: 500; color: #fff; white-space: nowrap; transition: background-color .15s ease, box-shadow .15s ease; }
.fr-btn.is-hover { background: #5144E0; box-shadow: 0 0 0 3px rgba(98, 87, 244, .18); }
.fr-btn-g { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; box-sizing: border-box; border: 1px solid #DAD8E0; border-radius: 7px; background: #fff; font-size: 14px; font-weight: 500; color: #15131B; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease; }
.fr-btn-g svg { width: 16px; height: 16px; }
.fr-btn-g.is-hover { background: #F3F2F7; border-color: #C9C6D1; }

/* the Agents table */
.fr-table { margin-top: 16px; border: 1px solid #E8E7ED; border-radius: 10px; background: #fff; overflow: hidden; }
.fr-th, .fr-tr { display: grid; grid-template-columns: 1fr 110px 230px; align-items: center; gap: 12px; padding: 0 16px; }
.fr-th { height: 40px; border-bottom: 1px solid #EEEDF2; font-size: 12.5px; font-weight: 500; color: #6F6C78; }
.fr-tr { height: 54px; }
.fr-tr + .fr-tr, .fr-table .dv-in.is-on + .fr-tr { border-top: 1px solid #EEEDF2; }
.fr-tr > span:first-child { display: flex; align-items: center; gap: 11px; min-width: 0; }
.fr-tr > span:first-child > span:last-child { min-width: 0; }
.fr-tr b { display: block; font-size: 14px; font-weight: 700; }
.fr-tr small { display: block; font-size: 12px; color: #6F6C78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-tr > span:last-child { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.fr-tr-new { transition: background-color .6s ease; }
.fr-tr-new.is-flash { background: #F2F0FE; }
.fr-sw { position: relative; display: block; width: 32px; height: 18px; border-radius: 9px; background: #CFCDD6; }
.fr-sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s ease; }
.fr-sw.is-on { background: #6257F4; }
.fr-sw.is-on::after { transform: translateX(14px); }
.fr-av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: #EDE8FE; color: #6257F4; overflow: hidden; }
.fr-av svg { width: 18px; height: 18px; }
.fr-av-ap { background: #fff; box-shadow: inset 0 0 0 1px #E3E1EA; }
.fr-av-ap img { width: 18px; height: 18px; }
.fr-av-s { width: 22px; height: 22px; border-radius: 6px; font-size: 9.5px; font-weight: 700; }
.fr-av-s img { width: 13px; height: 13px; }
.fr-av-s svg { width: 14px; height: 14px; }
.fr-av-def { background: none; }
.fr-av-def svg, .fr-av-s.fr-av-def svg { width: 100%; height: 100%; }
.fr-tr .fr-av { width: 32px; height: 32px; border-radius: 6px; }
.fr-av-c { border-radius: 50%; background: #D8EEF9; font-size: 11px; font-weight: 700; color: #1F5F80; }
.fr-av-p { border-radius: 50%; background: #F2C46B; color: #3C2E10; }
.fr-av-p2 { border-radius: 50%; background: #C8E6C9; color: #24532A; }

/* Create agent */
.fr-steps { display: flex; gap: 6px; margin: 18px 0 0 !important; list-style: none; }
.fr-steps li { display: flex; align-items: center; gap: 8px; flex: 1; height: 34px; padding: 0 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: #8D8A96; transition: background-color .25s ease, color .25s ease; }
.fr-steps li i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #E6E5EB; font-size: 11px; font-style: normal; font-weight: 600; color: #6F6C78; transition: background-color .25s ease, color .25s ease; }
.fr-steps li.is-cur { background: #F0EEFE; color: #15131B; }
.fr-steps li.is-cur i { background: #6257F4; color: #fff; }
.fr-steps li.is-done { color: #15131B; }
.fr-steps li.is-done i { background: #DCD8FD; color: #4B3FD8; }
.fr-card { position: relative; margin-top: 14px; height: 534px; padding: 20px 22px 0; box-sizing: border-box; border: 1px solid #E8E7ED; border-radius: 10px; background: #fff; }
.fr-pane { display: none; }
.fr-pane.is-on { display: block; animation: dv-fade .25s ease; }
.fr-ph-h { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; margin-bottom: 14px !important; }
.fr-ph-h b, .fr-ph-h span { grid-column: 2; }
.fr-ph-i { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: #EEEDF2; color: #352C3A; }
.fr-ph-i svg { width: 16px; height: 16px; }
.fr-ph-h b { font-size: 15px; font-weight: 600; }
.fr-ph-h span { font-size: 13px; color: #6F6C78; }
.fr-ph-h2 { display: flex; align-items: baseline; justify-content: space-between; }
.fr-ph-h2 u { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 500; color: #5B4FE9; text-decoration: none; }
.fr-ph-h2 u svg, .fr-note u svg { width: 14px; height: 14px; color: #5B4FE9; }
.fr-card label { display: block; margin: 12px 0 6px; font-size: 13px; font-weight: 600; color: #3B3944; }
.fr-card label i { font-style: normal; color: #E03E52; }
.fr-card label svg { display: inline-block; width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; color: #656972; }
.fr-row2 { display: flex; align-items: center; gap: 8px; }
.fr-in { display: flex; align-items: center; height: 32px; padding: 0 10px; box-sizing: border-box; border-radius: 7px; background: #F1F0F4; font-size: 14px; white-space: nowrap; overflow: hidden; transition: box-shadow .15s ease, background-color .15s ease; }
.fr-in.is-focus { background: #fff; box-shadow: 0 0 0 1px #6257F4, 0 0 0 4px rgba(98, 87, 244, .14); }
.fr-in-name { width: 260px; }
.fr-in-user { width: 302px; }
.fr-in-desc { width: 560px; height: 52px; align-items: flex-start; padding-top: 8px; }
.fr-in-hook { flex: 1; min-width: 0; }
.fr-in-ro { flex: 1; min-width: 0; color: #8D8A96; }
.fr-mono { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: 13px; }
.fr-ph { color: #8D8A96; }
.is-filled > .fr-ph { display: none; }
.fr-caret { display: none; flex: none; width: 1.5px; height: 16px; margin-left: 1px; background: #15131B; animation: adv-blink 1s steps(1) infinite; }
.is-focus > .fr-caret { display: inline-block; }
.is-typing > .fr-caret { animation: none; }
.fr-avbox { position: relative; display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 6px; overflow: hidden; transition: background-color .2s ease, box-shadow .2s ease; }
.fr-avbox svg { width: 32px; height: 32px; }
.fr-avbox img { display: none; width: 20px; height: 20px; }
.fr-avbox.is-hover { box-shadow: 0 0 0 3px rgba(98, 87, 244, .18); }
.fr-avbox.is-set { background: #fff; box-shadow: inset 0 0 0 1px #E3E1EA; }
.fr-avbox.is-set svg { display: none; }
.fr-avbox.is-set img { display: block; animation: dv-fade .3s ease; }
.fr-note { display: grid; gap: 4px; width: 560px; margin-top: 18px; padding: 12px 14px; box-sizing: border-box; border-radius: 8px; background: #E9E7FD; font-size: 13px; line-height: 1.45; color: #3B3944; }
.fr-note b { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: #15131B; }
.fr-note svg { width: 16px; height: 16px; color: #6257F4; }
.fr-note u { display: inline-flex; align-items: center; gap: 4px; justify-self: start; margin-top: 4px; font-size: 13px; font-weight: 500; color: #5B4FE9; text-decoration: none; }
.fr-eng { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.fr-eng-c { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 10px; padding: 16px; border: 1px solid #E3E1EA; border-radius: 10px; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.fr-eng-c svg { width: 20px; height: 20px; color: #6257F4; }
.fr-eng-c b { font-size: 14.5px; font-weight: 600; }
.fr-eng-c em { grid-column: 3; grid-row: 1; justify-self: end; padding: 2px 7px; border-radius: 6px; background: #F1F0F4; font-size: 11.5px; font-style: normal; font-weight: 500; color: #6F6C78; }
.fr-eng-c span { grid-column: 1 / -1; font-size: 13px; line-height: 1.45; color: #6F6C78; }
.fr-radio { grid-column: 3; grid-row: 1; justify-self: end; width: 16px; height: 16px; box-sizing: border-box; border: 1.5px solid #C9C6D1; border-radius: 50%; background: #fff; transition: border .2s ease; }
.fr-eng-c.is-hover { border-color: #B8B2F7; }
.fr-eng-c.is-sel { border-color: #6257F4; background: #F7F6FF; box-shadow: 0 0 0 3px rgba(98, 87, 244, .12); }
.fr-eng-c.is-sel .fr-radio { border: 5px solid #6257F4; }
.fr-cc { margin-bottom: 10px; padding: 10px 14px 12px; border: 1px solid #E8E7ED; border-radius: 8px; }
.fr-cc .fr-in { height: 30px; }
.fr-cc .fr-ib { width: 26px; height: 26px; }
.fr-cc label { margin: 8px 0 4px; font-size: 12.5px; }
.fr-cc-h { display: flex; align-items: center; gap: 8px; }
.fr-cc-h i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #F1F0F4; font-size: 11px; font-style: normal; font-weight: 600; color: #6F6C78; }
.fr-cc-h b { font-size: 14px; font-weight: 600; }
.fr-ok { display: none; margin-left: auto; padding: 1px 7px; border-radius: 6px; background: #DDF5E6; font-size: 11.5px; font-style: normal; font-weight: 600; color: #1E7A45; }
.fr-ok.is-on { display: inline-block; animation: dv-fade .3s ease; }
.fr-sent { display: none; align-items: center; gap: 6px; margin-top: 5px !important; font-size: 12.5px; font-weight: 500; color: #1E7A45; }
.fr-sent svg { width: 14px; height: 14px; }
.fr-sent.is-on { display: flex; animation: dv-fade .3s ease; }
.fr-ib { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 7px; color: #4B4955; transition: background-color .15s ease, color .15s ease; }
.fr-ib svg { width: 16px; height: 16px; }
.fr-ib.is-hover { background: #F1F0F4; }
.fr-ib.is-done { background: #EAE7FE; color: #5144E0; }
.fr-warn { margin-top: 5px !important; font-size: 12px; color: #A0561A; }
.fr-chips { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: 7px; background: #EEEBFE; font-size: 14px; }
.fr-chips svg { width: 16px; height: 16px; color: #352C3A; }
.fr-chips-c { width: 14px !important; height: 14px !important; }
.fr-perm { display: grid; gap: 4px; width: 560px; margin-top: 7px; padding: 9px 12px; box-sizing: border-box; border: 1px solid #E8E7ED; border-radius: 8px; }
.fr-perm b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; line-height: 18px; }
.fr-perm b svg { width: 16px; height: 16px; color: #352C3A; }
.fr-perm span { display: flex; align-items: center; gap: 9px; padding-left: 4px; font-size: 13px; line-height: 18px; }
.fr-perm i { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 4px; background: #6257F4; color: #fff; }
.fr-perm i svg { width: 12px; height: 12px; }
.fr-esc { display: flex; align-items: center; gap: 8px; width: 560px; height: 46px; margin-bottom: 8px !important; padding: 0 14px; box-sizing: border-box; border: 1px solid #E8E7ED; border-radius: 8px; font-size: 14px; }
.fr-esc-h { margin: 14px 0 8px !important; font-size: 13px; font-weight: 600; color: #3B3944; }
.fr-sel { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: 6px; background: #F1F0F4; font-size: 14px; transition: box-shadow .15s ease; }
.fr-sel b { font-weight: 400; }
.fr-sel svg { width: 16px; height: 16px; color: #352C3A; }
.fr-sel .fr-esc-b { display: none; }
.fr-sel.is-b .fr-esc-a { display: none; }
.fr-sel.is-b .fr-esc-b { display: inline; }
.fr-sel.is-hover { box-shadow: 0 0 0 2px rgba(98, 87, 244, .25); }
.fr-sel-g { color: #8D8A96; }
.fr-card-f { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #EEEDF2; }
.fr-card-f .fr-next-b { display: none; }
.fr-card-f .fr-btn.is-last .fr-next-a { display: none; }
.fr-card-f .fr-btn.is-last .fr-next-b { display: inline; }
.fr-card-f b { font-weight: 500; }

/* the inbox */
.fr-list { flex: none; width: 336px; margin: 8px 0 0; padding: 14px 8px 0; box-sizing: border-box; overflow: hidden; border-radius: 12px 0 0 0; background: #FCFCFD; border-right: 1px solid #EEEDF2; }
.fr-list-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 2px 8px 10px !important; }
.fr-list-h b { font-size: 15px; font-weight: 600; }
.fr-list-a { display: flex; gap: 12px; color: #352C3A; }
.fr-list-h svg { width: 16px; height: 16px; }
.fr-ci { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid transparent; border-radius: 9px; transition: background-color .2s ease, border-color .2s ease; }
.fr-ci + .fr-ci { margin-top: 2px; }
.fr-ci.is-sel { background: #F2F1FE; border-color: #CBC6FA; }
.fr-ci-t { display: flex; align-items: center; gap: 5px; }
.fr-ci-t b { font-size: 14px; font-weight: 500; color: #352C3A; }
.fr-ci-to { display: none; font-size: 14px; color: #5B4FE9; }
.fr-ci-to.is-on { display: inline; animation: dv-fade .3s ease; }
.fr-ci time { margin-left: auto; font-size: 12px; color: #8D8A96; }
.fr-ci-s { font-size: 14px; font-weight: 500; color: #15131B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-ci-p { font-size: 14px; color: #656972; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-t-b { display: none; }
.is-b > .fr-t-a, .fr-ci.is-b .fr-t-a { display: none; }
.is-b > .fr-t-b, .fr-ci.is-b .fr-t-b { display: inline; }
.fr-conv { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; margin: 8px 8px 0 0; border-radius: 0 12px 0 0; background: #fff; }
.fr-conv-h { display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 16px 0 20px; }
.fr-conv-h > b { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-hi { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: #4B4955; }
.fr-hi svg { width: 20px; height: 20px; }
.fr-assign { display: inline-flex; align-items: center; gap: 7px; height: 32px; margin-left: 4px; padding: 0 10px; box-sizing: border-box; border: 1px solid #DAD8E0; border-radius: 8px; font-size: 14px; transition: background-color .15s ease, border-color .15s ease; }
.fr-assign svg { width: 16px; height: 16px; color: #352C3A; }
.fr-assign .fr-as-c { width: 16px; height: 16px; }
.fr-as-a, .fr-as-b { display: inline-flex; align-items: center; gap: 7px; }
.fr-as-b { display: none; }
.fr-assign.is-ap .fr-as-a { display: none; }
.fr-assign.is-ap .fr-as-b { display: inline-flex; }
.fr-assign.is-hover { background: #F3F2F7; border-color: #C9C6D1; }
.fr-arch { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; box-sizing: border-box; border: 1px solid #DAD8E0; border-radius: 8px; font-size: 14px; }
.fr-arch svg { width: 16px; height: 16px; color: #352C3A; }
.fr-conv-m { display: flex; align-items: center; gap: 7px; padding: 0 20px 12px; border-bottom: 1px solid #EEEDF2; }
.fr-inbox-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: #3B3944; }
.fr-inbox-chip svg { width: 16px; height: 16px; }
.fr-tag { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.fr-tag-q { background: #E5EEFD; color: #2B5BB8; }
.fr-tag-b { background: #DDF5E6; color: #1E7A45; }
.fr-tag-in { display: inline-grid; }
/* the newest at the bottom, as Front keeps it: what came before slides up */
.fr-feed { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
.fr-feed-in { flex: none; display: flex; flex-direction: column; gap: 12px; min-height: 100%; padding: 16px 20px 18px; box-sizing: border-box; }
.fr-msg { border: 1px solid #E8E7ED; border-radius: 10px; background: #fff; }
.fr-msg-out { background: #FBFAFF; border-color: #E2DFFA; }
.fr-msg-h { display: flex; align-items: center; gap: 10px; padding: 11px 14px 0; }
.fr-msg-h > span:nth-child(2) { display: grid; }
.fr-msg-h b { font-size: 14px; font-weight: 600; color: #15131B; }
.fr-msg-h small { font-size: 12px; color: #8D8A96; }
.fr-msg-h time { margin-left: auto; font-size: 12px; color: #8D8A96; }
.fr-msg-b { display: grid; gap: 8px; padding: 10px 14px 13px 54px; font-size: 14px; line-height: 1.5; color: #2E2C36; }
.fr-msg-b small { color: #8D8A96; }
.fr-act { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 2px 0; font-size: 12.5px; color: #6F6C78; }
.fr-act svg { width: 12px; height: 12px; }
.fr-com { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: start; }
.fr-com > div b { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: #352C3A; }
.fr-com > div p { display: inline-block; max-width: 520px; padding: 7px 11px; border-radius: 10px; background: #EEEDF2; font-size: 14px; line-height: 1.45; color: #504C57; }
.fr-com time { margin-top: 26px; font-size: 12px; color: #8D8A96; }
.fr-composer { display: flex; align-items: center; gap: 12px; margin: 0 16px 14px; padding: 10px 14px; border: 1px solid #E3E1EA; border-radius: 10px; font-size: 14px; color: #15131B; }
.fr-composer span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-composer em { font-style: normal; color: #8D8A96; }
.fr-composer svg { flex: none; width: 16px; height: 16px; color: #656972; }

/* the assignee menu */
.fr-amenu { position: absolute; right: 94px; top: 50px; z-index: 6; display: none; width: 280px; padding: 6px; box-sizing: border-box; border: 1px solid #E3E1EA; border-radius: 10px; background: #fff; box-shadow: 0 18px 40px -16px rgba(21, 19, 27, .35); }
.fr-amenu.is-on { display: block; animation: dv-dlg .2s cubic-bezier(.2, .8, .2, 1); }
.fr-am-s { display: flex; align-items: center; gap: 8px; height: 34px; margin: -2px -2px 4px !important; padding: 0 10px; border-bottom: 1px solid #EEEDF2; font-size: 14px; color: #8D8A96; }
.fr-am-s svg { width: 16px; height: 16px; }
.fr-amenu small { display: block; margin: 8px 8px 4px; font-size: 12px; font-weight: 600; color: #6F6C78; }
.fr-am-i { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 8px; border-radius: 7px; font-size: 14px; transition: background-color .15s ease; }
.fr-am-i > svg { width: 16px; height: 16px; color: #352C3A; }
.fr-am-i .fr-am-ok { margin-left: auto; color: #6257F4; }
.fr-am-i.is-hover { background: #F1F0F5; }

/* ---------- what this video adds to the Askpilot app ---------- */
.apx-pane-agent { display: none; }
.apx-pane-agent.is-on { display: block; animation: dv-fade .25s ease; }
.apx-agent { margin-top: 16px; }
.apx-agform { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; max-width: 760px; margin-top: 10px; }
.apx-agform label { display: block; margin: 10px 0 6px; font-size: 13.5px; font-weight: 600; }
.apx-agform label:nth-of-type(odd) { grid-column: 1; }
.apx-agform-f { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin-top: 16px !important; }
.apx-agst { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: #7C8B91; }
.apx-agst i { width: 8px; height: 8px; border-radius: 50%; background: #C5CED3; }
.apx-agst b { font-weight: 500; }
.apx-agst .apx-agst-b, .apx-agst .apx-agst-c { display: none; }
.apx-agst.is-saved .apx-agst-a { display: none; }
.apx-agst.is-saved .apx-agst-c { display: inline; }
.apx-agst.is-saved i { background: #F5B544; }
.apx-agst.is-on .apx-agst-a, .apx-agst.is-on .apx-agst-c { display: none; }
.apx-agst.is-on .apx-agst-b { display: inline; color: #15803D; font-weight: 600; }
.apx-agst.is-on i { background: #16A34A; box-shadow: 0 0 0 4px rgba(22, 163, 74, .15); }
.apx-step .apx-step-i { width: 14px; height: 14px; color: #141C20; }

/* Front's sign-in window */
.dv-pop-fr .dv-pop-b { background: linear-gradient(160deg, #F2F0FE 0%, #F7F5FF 45%, #F6F7FB 100%); font-family: Inter, -apple-system, sans-serif; }
.dv-pop-fr .dv-pop-f span { min-width: 110px; justify-content: center; }