/* * AICustomerPilot: signup, login and dashboard. * Loaded after site.css and uses its colour tokens. */ /* Forms ------------------------------------------------------------------ */ .form { display: flex; flex-direction: column; gap: 18px; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 14px; font-weight: 600; } .input { width: 100%; min-height: 48px; padding: 11px 14px; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-3, #C9D1C6); border-radius: var(--radius); transition: border-color .15s ease, box-shadow .15s ease; } .input::placeholder { color: #8A978F; } .input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(11, 107, 69, .18); } .input.is-invalid { border-color: #C0362C; } .input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(192, 54, 44, .15); } .field__hint { font-size: 13px; color: var(--muted); } .field__error { margin: 0; font-size: 14px; color: #B02A20; } .password { position: relative; } .password .input { padding-right: 76px; } .password__toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); background: transparent; border: 0; border-radius: var(--radius-sm); padding: 8px 12px; cursor: pointer; } .password__toggle:hover { background: var(--soft); color: var(--ink); } .pw-meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 4px; } .pw-meter span { height: 6px; border-radius: 999px; background: var(--line); transition: background-color .2s ease; } .pw-meter[data-level="1"] span:nth-child(-n+1) { background: #C0362C; } .pw-meter[data-level="2"] span:nth-child(-n+2) { background: #D98A0B; } .pw-meter[data-level="3"] span:nth-child(-n+3) { background: #4FAE6E; } .pw-meter[data-level="4"] span { background: var(--green); } .pw-errors { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; } .pw-errors[hidden], .pw-strength[hidden] { display: none; } .form__alert { padding: 12px 14px; border-radius: var(--radius); font-size: 14px; background: #FCEDEB; color: #8E2219; border: 1px solid #F3C9C4; } .form__alert[hidden] { display: none; } .form__alert ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; } .form__alert--upgrade { background: var(--amber-soft); color: var(--amber-dark); border-color: var(--amber-line); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .form__alert-action { color: #FFFFFF; } .plan__summary .form__alert { margin: 0; } .form__terms a, .auth__switch a { font-weight: 600; } .checkbox { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; min-height: 44px; } .checkbox input { width: 18px; height: 18px; accent-color: var(--green); margin: 0; } .tel { display: flex; gap: 10px; } .tel .input { flex: 1; min-width: 0; } .tel__code { position: relative; flex: none; width: 96px; } .tel__code select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; } .tel__face { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 100%; min-height: 48px; padding: 0 10px 0 14px; border: 1px solid var(--line-3, #C9D1C6); border-radius: var(--radius); background: var(--surface); font-weight: 600; color: var(--ink); pointer-events: none; } .tel__face svg { color: var(--muted); flex: none; } .tel__code select:focus-visible + .tel__face { border-color: var(--green); box-shadow: 0 0 0 3px rgba(11, 107, 69, .18); } /* Auth pages ------------------------------------------------------------- */ .auth-body { background: var(--surface); } .auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); min-height: 100vh; } .auth__main { display: flex; flex-direction: column; align-items: center; padding: 32px 24px; gap: 28px; } .auth__main > .brand { align-self: flex-start; } .auth__card { width: 100%; max-width: 440px; margin: auto 0; } .auth__head { margin-bottom: 24px; } .auth__title { font-family: var(--font-display); font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 6px; } .auth__switch { margin-top: 22px; text-align: center; font-size: 15px; color: var(--muted); } .auth__legal { margin-top: auto; } .auth__aside { background: var(--green-deep); color: #E3EEE7; padding: 48px; display: flex; align-items: center; position: relative; overflow: hidden; } .auth__aside::before { content: ""; position: absolute; width: 420px; height: 420px; right: -140px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(159, 224, 184, .22) 0%, rgba(159, 224, 184, 0) 70%); } .auth__aside-inner { position: relative; display: flex; flex-direction: column; gap: 22px; max-width: 400px; } .auth__quote { font-family: var(--font-display); font-size: 34px; font-weight: 800; line-height: 1.15; color: #FFFFFF; letter-spacing: -0.02em; } .auth__demo { display: flex; flex-direction: column; gap: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-lg); padding: 18px; } .auth__bubble { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; } .auth__bubble--in { background: #FFFFFF; color: var(--ink); border-bottom-left-radius: 4px; } .auth__bubble--out { align-self: flex-end; background: var(--mint); color: var(--green-deep); border-bottom-right-radius: 4px; } .auth__ai { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; opacity: .7; } .auth__points { display: flex; flex-direction: column; gap: 10px; font-size: 15px; } .auth__points li { position: relative; padding-left: 28px; } .auth__points li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A1D' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat; } /* App shell (matches the Dashboard design) ------------------------------ */ .app-body { background: #F4F6F1; } .app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; } .app__main { padding: 24px 28px 48px; min-width: 0; display: flex; flex-direction: column; gap: 20px; } .sidebar { background: var(--ink); color: #DCE7E0; display: flex; flex-direction: column; padding: 20px 14px; gap: 20px; } /* Stays in place while the page scrolls; scrolls on its own if the window is short. */ .sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #36503F transparent; } .sidebar__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .sidebar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #FFFFFF; padding: 4px 8px; } .sidebar__brand:hover { color: #FFFFFF; } .sidebar__brand .brand__mark { width: 32px; height: 32px; border-radius: 9px; } .sidebar__brand-name { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; } .sidebar__brand-accent { color: #4CC38A; } .text-mint-strong, .text-mint { color: var(--mint); } .sidebar__menu-btn { display: none; font: inherit; font-size: 14px; font-weight: 600; color: #FFFFFF; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-sm); padding: 8px 14px; cursor: pointer; min-height: 40px; } .sidebar__panel { flex: 1; display: flex; flex-direction: column; gap: 20px; min-height: 0; } .sidebar__nav { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 500; } .nav-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; color: #DCE7E0; text-decoration: none; } .nav-link svg { flex: none; } .nav-link:hover { background: rgba(255, 255, 255, .06); color: #FFFFFF; } .nav-link.is-active { background: #24402F; color: #FFFFFF; } .nav-link.is-soon { color: #8FA699; cursor: default; } .nav-link.is-soon:hover { background: transparent; color: #8FA699; } .soon-tag { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8FA699; } .sidebar__group { margin: 12px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9FC9B0; } .sidebar__divider { border: 0; border-top: 1px solid rgba(255, 255, 255, .12); margin: 8px 12px; } .usage-card { margin-top: auto; background: #1B3128; border-radius: 12px; padding: 14px; font-size: 13px; } .usage-card__row { display: flex; justify-content: space-between; gap: 8px; color: #FFFFFF; font-weight: 600; } .usage-card__bar { height: 6px; background: #2E4A3C; border-radius: 999px; margin-top: 8px; overflow: hidden; } .usage-card__bar span { display: block; height: 100%; background: var(--mint); border-radius: inherit; } .usage-card__meta { color: #C4D6CB; margin-top: 8px; } .usage-card__link { display: inline-block; margin-top: 8px; color: var(--mint); font-weight: 600; text-decoration: none; } .usage-card__link:hover { color: #FFFFFF; } /* Store switcher */ .store-switch { position: relative; } .store-switch summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 12px; border-radius: 10px; background: #1B3128; } .store-switch summary::-webkit-details-marker { display: none; } .store-switch summary:hover { background: #22392F; } .store-switch[open] summary { box-shadow: inset 0 0 0 1px var(--mint); } .store-switch__text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; font-size: 13px; } .store-switch__label { font-size: 11px; font-weight: 600; color: #9FC9B0; text-transform: uppercase; letter-spacing: .06em; } .store-switch__name { color: #FFFFFF; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .store-switch__chev { flex: none; color: #9FC9B0; transition: transform .15s ease; } .store-switch[open] .store-switch__chev { transform: rotate(180deg); } .store-switch__panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: #1B3128; border: 1px solid #36503F; border-radius: 14px; padding: 8px; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .5); } .store-switch__heading { font-size: 11px; font-weight: 700; color: #9FC9B0; text-transform: uppercase; letter-spacing: .08em; padding: 6px 8px 8px; } .store-switch__list { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; } .store-switch__list form { margin: 0; } .store-option { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; font: inherit; font-size: 14px; color: #E3EEE7; background: transparent; border: 0; text-align: left; cursor: pointer; } button.store-option:hover { background: rgba(255, 255, 255, .07); } .store-option.is-current { background: rgba(159, 224, 184, .12); cursor: default; } .store-option__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .store-option__meta { font-size: 12px; color: #9FB3A7; flex: none; } .store-switch__add { width: 100%; margin-top: 6px; padding: 10px; font: inherit; font-size: 14px; font-weight: 600; color: var(--mint); background: transparent; border: 1px dashed #4A6656; border-radius: 10px; cursor: pointer; } .store-switch__add:hover { background: rgba(159, 224, 184, .08); border-color: var(--mint); } .store-badge { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--mint); color: var(--green-deep); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; font-family: var(--font-display); } .store-badge--sm { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; } /* Account menu (top right) */ .user-menu { position: relative; } .user-menu summary { list-style: none; cursor: pointer; border-radius: 50%; } .user-menu summary::-webkit-details-marker { display: none; } .user-menu__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--amber-tint); color: var(--amber-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; } .user-menu[open] .user-menu__avatar { box-shadow: 0 0 0 3px var(--amber-line); } .user-menu__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 25; width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: 0 20px 40px -16px rgba(16, 32, 26, .3); } .user-menu__who { display: flex; flex-direction: column; padding: 10px 10px 8px; border-bottom: 1px solid #EDF0EA; margin-bottom: 4px; font-size: 13px; min-width: 0; } .user-menu__who span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; } .user-menu__panel form { margin: 0; } .user-menu__item { display: block; width: 100%; text-align: left; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); background: none; border: 0; border-radius: 8px; padding: 9px 10px; text-decoration: none; cursor: pointer; } .user-menu__item:hover { background: var(--soft); color: var(--ink); } .user-menu__item--danger { color: var(--red); } /* Banners and notices */ .banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; border-radius: var(--radius); font-size: 14px; } .banner a { font-weight: 700; white-space: nowrap; } .banner--trial { background: var(--green-tint); color: var(--green-deep); border: 1px solid #C6E3D1; } .banner--trial a { color: var(--green-dark); } .banner--warn { background: var(--amber-tint); color: var(--amber-dark); border: 1px solid var(--amber-line); } .banner--warn a { color: var(--amber-dark); } .notice { padding: 12px 16px; border-radius: var(--radius); font-size: 14px; background: var(--indigo-soft); border: 1px solid var(--indigo-line); color: var(--indigo); } .notice--success { background: var(--green-tint); border-color: #C6E3D1; color: var(--green-deep); } /* Page content ----------------------------------------------------------- */ .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; } .page-title { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 4px; } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 14px; } .panel__title { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; } .panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tag-soft { font-size: 12px; font-weight: 700; color: var(--green-dark); background: var(--green-tint); padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .checklist-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .checklist-steps li { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid #EDF0EA; } .checklist-steps li:first-child { border-top: 0; padding-top: 0; } .checklist-steps li > div { flex: 1; min-width: 0; } .checklist-steps__body { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .step-dot { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--line-3, #C9D1C6); display: flex; align-items: center; justify-content: center; } .checklist-steps li.is-done .step-dot { background: var(--green); border-color: var(--green); } .checklist-steps li.is-done strong { color: var(--muted); } .usage-list { display: flex; flex-direction: column; gap: 14px; } .usage-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 6px; align-items: center; } .usage-list__icon { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; } .usage-list__label { font-size: 14px; font-weight: 600; } .usage-list__count { font-size: 14px; color: var(--muted); } .usage-list__count strong { color: var(--ink); } .usage-list .meter { grid-column: 2 / 4; } .meter { display: block; height: 6px; border-radius: 999px; background: #EDF0EA; overflow: hidden; } .meter span { display: block; height: 100%; border-radius: inherit; background: var(--green); } /* Dashboard */ .page-head--top { align-items: center; } .page-head > div:first-child { flex: 1 1 320px; min-width: 0; } .page-head__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; } .page-sub { color: var(--muted); } .page-sub a { font-weight: 600; text-decoration: none; } .health { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; } .health__chip { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; min-width: 0; overflow-wrap: anywhere; } .health__chip--empty { border-style: dashed; } .health__chip a { font-weight: 600; } .health__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #9DB0A4; } .health__dot--ok { background: var(--green); } .health__dot--wait { background: var(--amber); } .kpis { display: flex; flex-wrap: wrap; gap: 14px; } .kpi { flex: 1 1 180px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; } .kpi__label { color: var(--muted); font-size: 13px; } .kpi__value { font-family: var(--font-display); font-size: 32px; font-weight: 800; margin-top: 2px; line-height: 1.3; } .kpi__note { font-size: 12px; color: var(--muted); } .kpi--mint { background: var(--green-tint); border-color: #C3E1CE; } .kpi--mint .kpi__label, .kpi--mint .kpi__value, .kpi--mint .kpi__note { color: #0B4F33; } .dash-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; } .dash-row__wide { flex: 3 1 480px; min-width: 0; } .dash-row__narrow { flex: 2 1 320px; min-width: 0; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; } .card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .card__head--start { justify-content: flex-start; } .card__title { margin: 0; font-size: 17px; font-weight: 700; font-family: var(--font-body); } .card__meta { font-size: 13px; color: var(--muted); } .card__link { font-weight: 600; text-decoration: none; font-size: 13px; } .card--dark { background: var(--ink); border-color: var(--ink); color: #DCE7E0; } .card--dark .card__title { color: #FFFFFF; } .card--dark .card__head svg { color: var(--mint); } .digest__intro { font-size: 14px; color: #C4D6CB; } .digest { display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .digest li { background: #1B3128; border-radius: 10px; padding: 10px 12px; } .digest strong { color: #FFFFFF; } .card--dark .btn--block { margin-top: auto; padding: 12px; } .progress { height: 6px; background: #EDF0EA; border-radius: 999px; overflow: hidden; } .progress span { display: block; height: 100%; background: var(--green); border-radius: inherit; } .soon-pill { font-size: 12px; font-weight: 600; color: var(--muted); background: #EEF1EB; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 24px 16px; border: 1px dashed #D3DAD0; border-radius: 12px; background: #FBFCFA; } .empty__icon { width: 40px; height: 40px; border-radius: 12px; background: #EEF1EB; color: var(--muted); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .empty p { font-size: 13px; color: var(--muted); max-width: 420px; } /* Channels page */ .channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .channel-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 24px; } .channel-card:target { border-color: var(--green); box-shadow: 0 0 0 3px rgba(11, 107, 69, .12); } .channel-card__head { display: flex; align-items: center; gap: 12px; } .channel-card__icon { width: 40px; height: 40px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; } .channel-card__title { font-family: var(--font-display); font-size: 19px; font-weight: 800; } .channel-card__empty { font-size: 14px; color: var(--muted); padding: 14px; border: 1px dashed var(--line-3, #C9D1C6); border-radius: var(--radius); text-align: center; } .channel-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: auto; } .channel-list { display: flex; flex-direction: column; gap: 8px; } .channel-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--soft); border-radius: var(--radius); } .channel-list li > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; } .channel-list strong { font-size: 15px; overflow-wrap: anywhere; } .channel-list form { margin: 0; flex: none; } .status { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .status--pending { background: var(--amber-tint); color: var(--amber-dark); } .status--connected { background: var(--green-tint); color: var(--green-dark); } .link-button { font: inherit; font-size: 14px; font-weight: 600; color: var(--red); background: none; border: 0; padding: 6px; cursor: pointer; } .link-button:hover { text-decoration: underline; } /* Dialogs */ .dialog { width: min(460px, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(16, 32, 26, .4); } .dialog::backdrop { background: rgba(16, 32, 26, .5); } .dialog .form { gap: 14px; } .dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .dialog__close { flex: none; width: 36px; height: 36px; margin: -6px -6px 0 0; font-size: 22px; line-height: 1; color: var(--muted); background: transparent; border: 0; border-radius: 50%; cursor: pointer; } .dialog__close:hover { background: var(--soft); color: var(--ink); } .dialog__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; } /* Billing page */ .current-plan { display: flex; flex-wrap: wrap; gap: 12px 40px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 22px; } .current-plan > div { display: flex; flex-direction: column; } .current-plan strong { font-size: 17px; } .app__main .billing-toggle { margin: 0 0 20px; } .plan-row.is-highlight { border-color: var(--green); background: #F2F9F4; box-shadow: 0 0 0 3px rgba(11, 107, 69, .1); } .plan-row.is-floored .plan-row__note { color: var(--amber-dark); font-weight: 600; } /* Closed dropdowns take no space (newer Chrome still lays them out). */ .notif:not([open]) .notif__panel, .user-menu:not([open]) .user-menu__panel, .store-switch:not([open]) .store-switch__panel { display: none; } /* Header search */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hsearch { position: relative; } .hsearch__box { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0 8px 0 12px; min-height: 44px; width: 300px; max-width: 100%; color: var(--muted); } .hsearch__box:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(11, 107, 69, .15); } .hsearch__box svg { flex: none; } .hsearch__input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 14px; color: var(--ink); background: transparent; } .hsearch__input::-webkit-search-cancel-button { cursor: pointer; } .hsearch__kbd { font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; line-height: 20px; } .hsearch__box:focus-within .hsearch__kbd { display: none; } .hsearch__panel { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; width: max(100%, 360px); max-width: calc(100vw - 32px); max-height: 420px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: 0 20px 40px -16px rgba(16, 32, 26, .3); } .hsearch__panel[hidden] { display: none; } .hsearch__group { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 4px; } .hsearch__opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; } .hsearch__opt.is-active { background: var(--green-tint); } .hsearch__icon { width: 30px; height: 30px; flex: none; border-radius: 8px; background: #EEF1EB; color: var(--ink); display: flex; align-items: center; justify-content: center; } .hsearch__opt.is-active .hsearch__icon { background: var(--surface); color: var(--green-dark); } .hsearch__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; } .hsearch__text strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hsearch__text span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hsearch__empty { padding: 14px 10px; font-size: 13px; color: var(--muted); } /* Notifications */ .notif { position: relative; } .notif summary { list-style: none; } .notif summary::-webkit-details-marker { display: none; } .notif__btn { position: relative; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; } .notif__btn:hover, .notif[open] .notif__btn { border-color: var(--ink); } .notif__count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #C2410C; color: #FFFFFF; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid #F4F6F1; box-sizing: content-box; } .notif__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 360px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 40px -16px rgba(16, 32, 26, .3); overflow: hidden; } .notif__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #EDF0EA; } .notif__head form { margin: 0; } .notif__readall { font: inherit; font-size: 13px; font-weight: 600; color: var(--green); background: none; border: 0; padding: 4px; cursor: pointer; } .notif__readall:hover { text-decoration: underline; } .notif__empty { padding: 20px 16px; font-size: 13px; color: var(--muted); } .notif__list { max-height: 420px; overflow-y: auto; } .notif__item { display: flex; gap: 12px; padding: 12px 14px; color: var(--ink); text-decoration: none; border-bottom: 1px solid #F1F3EF; } .notif__list li:last-child .notif__item { border-bottom: 0; } .notif__item:hover { background: var(--soft); color: var(--ink); } .notif__item.is-unread { background: #F6FBF7; } .notif__icon { width: 32px; height: 32px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: #EEF1EB; color: var(--ink); } .notif__icon svg { width: 16px; height: 16px; } .notif__icon--welcome, .notif__icon--plan { background: var(--green-tint); color: var(--green-dark); } .notif__icon--trial { background: var(--amber-tint); color: var(--amber-dark); } .notif__icon--channel { background: var(--indigo-soft); color: var(--indigo); } .notif__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 1.4; } .notif__text strong { font-size: 14px; font-weight: 600; } .notif__text span { color: #3E4E46; } .notif__text time { font-size: 12px; color: var(--muted); } .notif__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; margin-top: 6px; } /* Shared bits: avatars, chips, stages, tags, tables ----------------------- */ .strong { font-weight: 600; } .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .link-plain { color: var(--ink); text-decoration: none; padding: 0; font-size: inherit; } .link-plain:hover { text-decoration: underline; color: var(--ink); } .text-red { color: var(--red) !important; } .nav-badge { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--mint); color: var(--green-deep); padding: 1px 8px; border-radius: 999px; } .notice--error { background: #FCEDEB; border-color: #F3C9C4; color: #8E2219; } .av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; } .av--lg { width: 48px; height: 48px; font-size: 16px; } .av--green { background: var(--green-tint); color: #0B4F33; } .av--pink { background: var(--pink-tint); color: var(--pink-dark); } .av--indigo { background: #E6E8FA; color: var(--indigo); } .av--amber { background: var(--amber-tint); color: var(--amber-dark); } .av--grey { background: #EEF1EB; color: var(--ink); } .av--red { background: #FCE4E1; color: #8E1F15; } .chips { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; } .chips--wrap { display: flex; gap: 6px; margin-top: 8px; } .chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: #EEF1EB; color: #3E4E46; } .chip--wa { background: var(--green-tint); color: #0B4F33; } .chip--ig { background: var(--pink-tint); color: var(--pink-dark); } .chip--em { background: var(--amber-tint); color: var(--amber-dark); } .chip--wc { background: #E6E8FA; color: var(--indigo); } .chip--red { background: #FCE4E1; color: #8E1F15; } .chip--grey { background: #EEF1EB; color: #3E4E46; } .stage { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .stage--lead { background: #EEF1EB; color: #3E4E46; } .stage--customer { background: var(--green-tint); color: #0B4F33; } .stage--vip { background: var(--ink); color: var(--mint); } .stage--risk { background: #FCE4E1; color: #8E1F15; } .tag { font-size: 12px; background: #EEF1EB; padding: 2px 9px; border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; } .tag--removable { margin: 0; } .tag--removable button { border: 0; background: none; font: inherit; font-size: 14px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 2px; } .tag--removable button:hover { color: var(--red); } .tag-add { margin: 0; } .tag-add input { font: inherit; font-size: 12px; border: 1px dashed #C9D1C6; border-radius: 999px; padding: 2px 10px; width: 100px; background: transparent; } .tag-add input:focus { outline: none; border-color: var(--green); width: 140px; } .overline-sm { display: block; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .card--flush { padding: 0; gap: 0; overflow: hidden; } .table-wrap { overflow-x: auto; position: relative; } .table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 10px 8px; background: #FBFCFA; border-top: 1px solid #E8ECE5; border-bottom: 1px solid #E8ECE5; white-space: nowrap; } .table td { padding: 12px 8px; border-bottom: 1px solid #EDF0EA; vertical-align: middle; } .table th:first-child, .table td:first-child { padding-left: 16px; } .table th:last-child, .table td:last-child { padding-right: 16px; } .table .num { text-align: right; font-variant-numeric: tabular-nums; } .table__check { width: 28px; } .table__check input, [data-check-all] { width: 16px; height: 16px; accent-color: var(--green); margin: 0; } .table__last { max-width: 260px; } .table tr.is-selected td, .table tr.is-checked td { background: #F2F9F4; } .table--plain { min-width: 480px; } .table--narrow { min-width: 280px; } .table--plain th { background: none; border-top: 0; } .table--plain td:first-child, .table--plain th:first-child { padding-left: 0; } /* Plain tables inside an edge-to-edge card need their own side padding. */ .card--flush .table--plain th, .card--flush .table--plain td { padding: 12px; } .card--flush .table--plain th { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #E8ECE5; } .card--flush .table--plain th:first-child, .card--flush .table--plain td:first-child { padding-left: 20px; } .card--flush .table--plain th:last-child, .card--flush .table--plain td:last-child { padding-right: 20px; } .card--flush .table--plain tbody tr:last-child td { border-bottom: 0; } .person { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-width: 0; } .person:hover strong { text-decoration: underline; } .person__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; } .person__text strong { font-weight: 600; } .person__text span { font-size: 12px; color: var(--muted); } /* Customers ------------------------------------------------------------------ */ .live-list { display: flex; flex-direction: column; gap: 20px; transition: opacity .15s; } .live-list.is-loading { opacity: .55; pointer-events: none; } .insight { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--green-tint); border: 1px solid #C6E3D1; border-radius: 14px; padding: 14px 18px; } .insight__icon { width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--green); color: #FFFFFF; display: flex; align-items: center; justify-content: center; } .insight__icon svg { width: 16px; height: 16px; } .insight__text { flex: 1 1 420px; display: flex; flex-direction: column; color: #0B4F33; font-size: 13px; } .insight__text strong { color: var(--green-deep); font-size: 14px; } .seg-tabs { display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid #E8ECE5; overflow-x: auto; } .seg-tab { font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--muted); text-decoration: none; padding: 10px 12px 11px; border-bottom: 3px solid transparent; } .seg-tab:hover { color: var(--ink); } .seg-tab.is-active { color: var(--ink); border-bottom-color: var(--green); } .seg-tab__count { font-size: 12px; color: var(--muted); background: #EEF1EB; border-radius: 999px; padding: 1px 8px; margin-left: 4px; } .filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px; } .filters__search { display: flex; align-items: center; gap: 8px; background: #F4F6F1; border-radius: 10px; padding: 0 12px; min-height: 40px; flex: 1 1 240px; max-width: 340px; color: var(--muted); } .filters__search input { border: 0; outline: none; font: inherit; background: transparent; flex: 1; min-width: 0; color: var(--ink); } .filters__search:focus-within { box-shadow: 0 0 0 2px var(--green); } .select, select.input, .inline-select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A5A52' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; padding-right: 30px; } .select { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); border: 1px solid #C9D1C6; border-radius: 9px; padding-left: 12px; min-height: 40px; height: 40px; line-height: 38px; cursor: pointer; max-width: 100%; } .select:hover { border-color: var(--ink); } .select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(11, 107, 69, .15); } select.input { cursor: pointer; } .filters__clear { font-size: 13px; font-weight: 600; } .filters__count { margin-left: auto; font-size: 13px; color: var(--muted); } .js .filters__go { display: none; } .bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 14px 12px; background: var(--ink); color: #FFFFFF; border-radius: 12px; padding: 8px 8px 8px 16px; font-size: 13px; } .bulkbar[hidden] { display: none; } .bulkbar__space { flex: 1; } .bulkbar__btn { font: inherit; font-size: 13px; font-weight: 600; background: #24402F; color: #FFFFFF; border: 0; border-radius: 8px; padding: 0 12px; min-height: 36px; cursor: pointer; } .bulkbar__btn:hover { background: #2E4A3C; } .bulkbar__btn--danger { background: #5A1E17; } .bulkbar__btn--danger:hover { background: #7A281F; } .pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; } .pager__btns { display: flex; gap: 6px; } .btn.is-disabled { opacity: .45; pointer-events: none; } .empty--inset { margin: 0 14px 14px; } .sugg { display: flex; flex-direction: column; gap: 10px; } .sugg__item { display: flex; align-items: center; gap: 12px; border: 1px solid #E8ECE5; border-radius: 12px; padding: 12px 14px; color: var(--ink); text-decoration: none; } .sugg__item:hover { border-color: var(--green); color: var(--ink); } .sugg__text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sugg__text span { font-size: 13px; color: var(--muted); } .sugg__count { font-weight: 700; font-size: 16px; } .profile { display: flex; flex-direction: column; gap: 16px; } .profile__head { display: flex; align-items: center; gap: 12px; } .profile__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; line-height: 1.25; } .profile__who strong { font-size: 17px; overflow-wrap: anywhere; line-height: 1.25; } .profile__who > span { font-size: 13px; color: var(--muted); line-height: 1.35; } .namebox__view { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; } .namebox__icon { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; } .namebox__icon:hover { background: var(--soft); color: var(--ink); } .namebox__icon--ok { color: #FFFFFF; background: var(--green); } .namebox__icon--ok:hover { background: #08502F; color: #FFFFFF; } .namebox__icon--no { border: 1px solid var(--line-3); } .namebox__form { display: flex; align-items: center; gap: 4px; margin: 0 0 2px; } .namebox__form[hidden], .namebox__view[hidden] { display: none; } .namebox__input { flex: 1; min-width: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); border: 1px solid var(--green); border-radius: 8px; padding: 4px 8px; height: 30px; box-shadow: 0 0 0 3px rgba(11, 107, 69, .15); } .namebox__input:focus { outline: none; } .namebox__error { margin: 2px 0 0; font-size: 12px; color: #8E1F15; } .namebox__error[hidden] { display: none; } .profile__lead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: 12px; padding: 12px 14px; } .profile__lead form { margin: 0; } .profile__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .profile__stats div { background: #F4F6F1; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; } .profile__stats span { font-size: 12px; color: var(--muted); } .profile__stats strong { font-size: 17px; } .profile__details { margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; } .profile__details > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .profile__details dt { color: var(--muted); } .profile__details dd { margin: 0; text-align: right; overflow-wrap: anywhere; } .inline-select { margin: 0; } .inline-select select { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); border: 1px solid #C9D1C6; border-radius: 8px; padding: 5px 28px 5px 10px; background-position: right 8px center; cursor: pointer; } .profile__notes { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin: 0; } .profile__notes textarea { width: 100%; font: inherit; font-size: 13px; border: 1px solid #C9D1C6; border-radius: 10px; padding: 8px 10px; resize: vertical; } .profile__notes textarea:focus { outline: none; border-color: var(--green); } .timeline { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; } .timeline li { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 10px; row-gap: 0; } .timeline li > a, .timeline li > span:last-child { grid-column: 2; } .timeline li > a { line-height: 1.35; } .timeline li > span:last-child { font-size: 12px; line-height: 1.3; margin-top: 2px; } .timeline a { color: var(--ink); text-decoration: none; } .timeline a:hover { text-decoration: underline; } .timeline__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--green); grid-row: 1 / 3; } .timeline__dot--instagram { background: var(--pink); } .timeline__dot--email { background: var(--amber); } .timeline__dot--webchat { background: var(--indigo); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .dialog--wide { width: min(620px, calc(100vw - 32px)); } .dialog--profile { width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 28px; } .dialog--profile__close { position: absolute; top: 14px; right: 14px; margin: 0; } .dialog--profile .profile__head { padding-right: 36px; } .sugg--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } textarea.input { min-height: 0; resize: vertical; } .attn { display: flex; flex-direction: column; } .attn li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #EEF1EB; } .attn__text { flex: 1 1 220px; min-width: 0; } .embed { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px dashed #C9D1C6; border-radius: 12px; padding: 12px; margin-top: 4px; } .embed__row { display: flex; gap: 8px; } .embed__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; min-height: 40px; padding: 8px 10px; flex: 1 1 auto; min-width: 0; width: auto; } .channel-list li > .embed { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; width: 100%; } .embed__row .btn { flex: none; } .channel-list li { flex-wrap: wrap; } /* Inbox ---------------------------------------------------------------------- */ .app__main--flush { padding: 0; gap: 0; } .inbox { display: flex; flex-wrap: wrap; align-items: stretch; min-height: 100vh; } .inbox__list { flex: 1 1 320px; max-width: 100%; min-width: 0; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0; } .inbox__list-head { padding: 18px 16px 10px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid #EDF0EA; } .inbox__title-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .inbox__title { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; } .inbox__search { display: flex; align-items: center; gap: 8px; background: #F4F6F1; border-radius: 10px; padding: 0 12px; min-height: 40px; color: var(--muted); margin: 0; } .inbox__search input { border: 0; outline: none; font: inherit; background: transparent; flex: 1; min-width: 0; color: var(--ink); } .inbox__search:focus-within { box-shadow: 0 0 0 2px var(--green); } .pills { display: flex; flex-wrap: wrap; gap: 6px; } .pill { font-size: 12px; font-weight: 600; text-decoration: none; background: #EEF1EB; color: var(--ink); border-radius: 999px; padding: 6px 12px; white-space: nowrap; } .pill--sm { padding: 4px 10px; } .pill:hover { color: var(--ink); filter: brightness(.96); } .pill--red { background: #FCE4E1; color: #8E1F15; } .pill.is-active { background: var(--ink); color: #FFFFFF; } /* Channel filter: a dropdown next to Resolved, with a tick on the chosen channel */ .chfilter { position: relative; } .chfilter__btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #DCE2D8; } .chfilter__btn::-webkit-details-marker { display: none; } .chfilter__btn.is-set { background: var(--green-tint); color: #0B4F33; box-shadow: inset 0 0 0 1px #CFE6D8; } .chfilter[open] > .chfilter__btn svg { transform: rotate(180deg); } .chfilter__menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 32px -16px rgba(16, 32, 26, .35); padding: 4px; display: flex; flex-direction: column; } .chfilter__menu a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; } .chfilter__menu a:hover { background: var(--soft); color: var(--ink); } .chfilter__tick { width: 14px; flex: none; color: #0B4F33; visibility: hidden; } .chfilter__menu a.is-on .chfilter__tick { visibility: visible; } .chfilter__n { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 500; } .inbox__convs { flex: 1; overflow-y: auto; padding: 6px 8px 12px; display: flex; flex-direction: column; gap: 2px; } .conv { display: flex; gap: 10px; padding: 12px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; } .conv:hover { background: #F4F6F1; color: var(--ink); } .conv.is-active { background: var(--green-tint); } .conv__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .conv__top { display: flex; justify-content: space-between; gap: 6px; } .conv__top strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv.is-unread .conv__top strong { font-weight: 800; } .conv__time { font-size: 11px; color: var(--muted); white-space: nowrap; } .conv__preview { font-size: 13px; color: #3E4E46; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conv__unread { font-size: 10px; font-weight: 700; color: #FFFFFF; background: var(--green); padding: 1px 7px; border-radius: 999px; } .conv-empty { padding: 24px 12px; text-align: center; color: var(--muted); font-size: 13px; } .inbox__thread { flex: 2 1 460px; min-width: 0; display: flex; flex-direction: column; background: #F4F6F1; height: 100vh; position: sticky; top: 0; } .inbox__thread--empty { align-items: center; justify-content: center; padding: 24px; } /* No chat open: the empty area also takes the contact panel's share, so the chat list keeps the width it has when a chat is open. */ .inbox { container-type: inline-size; } @container (min-width: 1080px) { .inbox__thread--empty { flex: 3 1 760px; } } .inbox__thread--empty .empty { max-width: 440px; flex: none; } .thread-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--surface); border-bottom: 1px solid var(--line); } .thread-head__who { display: flex; flex-direction: column; min-width: 0; } .thread-head__who strong { font-size: 16px; } .thread-head__who span { font-size: 12px; color: var(--muted); } .thread-head__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .thread-head__actions form { margin: 0; } .thread-head__actions { gap: 6px; } .thread-head__actions .btn { min-height: 28px; height: 28px; padding: 0 10px; font-size: 12px; border-radius: 8px; } .thread-head__actions .state { min-height: 28px; padding: 0 10px; font-size: 12px; gap: 6px; } .thread-head__actions .state span { width: 7px; height: 7px; } /* With the ⋯ menu: name and details with ⋯ on the right, buttons on the row below at full width. */ .thread-head:has(> .thread-more) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 12px; row-gap: 10px; } .thread-head > .thread-more { grid-column: 2; grid-row: 1; } .thread-head:has(> .thread-more) > .thread-head__who { grid-column: 1; grid-row: 1; } .thread-head:has(> .thread-more) > .thread-head__actions { grid-column: 1 / -1; grid-row: 2; } .thread-head > .thread-more > summary { min-height: 28px; height: 28px; min-width: 30px; padding: 0 8px; font-size: 14px; border-radius: 8px; } .thread-head > .thread-more .thread-more__menu { top: calc(100% + 4px); } .state { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 0 12px; border-radius: 999px; min-height: 34px; } .state span { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .state--green { background: var(--green-tint); color: #0B4F33; } .state--red { background: #FCE4E1; color: #8E1F15; } .state--grey { background: #EEF1EB; color: #3E4E46; } .thread { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; } .thread__day { align-self: center; font-size: 12px; color: var(--muted); background: #EEF1EB; padding: 3px 12px; border-radius: 999px; } .thread__empty { align-self: center; color: var(--muted); font-size: 13px; } .msg { max-width: 72%; padding: 10px 14px; border-radius: 14px; font-size: 14px; } .msg__body { white-space: pre-wrap; overflow-wrap: anywhere; } .msg__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; font-size: 11px; color: var(--muted); } .msg__who { font-weight: 700; background: var(--surface); color: #0B4F33; padding: 1px 7px; border-radius: 999px; } .msg__queued { color: var(--amber-dark); font-weight: 600; } .msg--in { align-self: flex-start; background: var(--surface); border: 1px solid #E3E7E0; border-bottom-left-radius: 4px; } .msg--out { align-self: flex-end; background: #DCEFE3; border-bottom-right-radius: 4px; } .msg--ai { background: #E3F1E8; } .msg--note { align-self: center; max-width: 80%; background: var(--amber-soft); border: 1px dashed var(--amber-line); } .msg--note .msg__who { background: var(--amber-tint); color: var(--amber-dark); } .msg--html { width: 680px; max-width: 92%; } .msg__html { display: block; width: 100%; height: 160px; border: 0; background: #FFFFFF; border-radius: 8px; } .composer { margin: 0 20px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .composer.is-note { background: var(--amber-soft); border-color: var(--amber-line); } .composer__notice { font-size: 12px; color: var(--amber-dark); background: var(--amber-soft); border-radius: 8px; padding: 6px 10px; } .composer__tabs { display: flex; gap: 4px; } .composer__tab { position: relative; } .composer__tab input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .composer__tab span { display: block; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; color: var(--muted); } .composer__tab input:checked + span { background: #EEF1EB; color: var(--ink); } .composer__tab--note input:checked + span { background: var(--amber-tint); color: var(--amber-dark); } .composer__tab input:focus-visible + span { outline: 2px solid var(--green); } .composer textarea { width: 100%; border: 0; resize: vertical; font: inherit; outline: none; background: transparent; min-height: 48px; } .composer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; } .composer__tools { display: flex; gap: 6px; align-items: center; } .composer__tools .btn svg { width: 14px; height: 14px; } .composer__hint { font-size: 12px; color: var(--muted); } .form__alert--inline { padding: 6px 10px; flex: 1 1 200px; } .suggest { background: #F4F6F1; border: 1px dashed var(--green); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .suggest[hidden] { display: none; } .suggest__head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #0B4F33; } .suggest__head span { color: var(--amber-dark); font-weight: 600; } .suggest__text { white-space: pre-wrap; } .suggest__actions { display: flex; flex-wrap: wrap; gap: 6px; } .inbox__contact { flex: 1 1 300px; min-width: 0; max-width: 100%; background: var(--surface); border-left: 1px solid var(--line); padding: 20px; height: 100vh; overflow-y: auto; position: sticky; top: 0; } /* Knowledge base ------------------------------------------------------------ */ .section-title { font-family: var(--font-display); font-size: 20px; font-weight: 800; } .field-label { font-size: 14px; font-weight: 600; } .form--tight { gap: 14px; } .btn--ghost { background: transparent; color: var(--muted); border-color: transparent; } .btn--ghost:hover { color: var(--ink); } .link-add { font: inherit; font-size: 13px; font-weight: 600; color: var(--green); background: none; border: 0; padding: 4px 0; cursor: pointer; text-align: left; } .link-add:hover { text-decoration: underline; } .card__head--pad { padding: 18px 20px 12px; } .dialog__actions--split { justify-content: space-between; flex-wrap: wrap; } .dialog__actions form { margin: 0; } .coverage { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; background: var(--ink); color: #DCE7E0; border-radius: 16px; padding: 22px 24px; } .coverage__main { flex: 1 1 320px; min-width: 0; } .coverage__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mint); } .coverage__big { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; flex-wrap: wrap; } .coverage__pct { font-family: var(--font-display); font-size: 44px; font-weight: 800; color: #FFFFFF; line-height: 1; } .coverage__bar { height: 8px; background: #2E4A3C; border-radius: 999px; margin-top: 14px; overflow: hidden; } .coverage__bar span { display: block; height: 100%; background: var(--mint); border-radius: inherit; } .coverage__stats { display: flex; flex-wrap: wrap; gap: 12px; } .coverage__stat { background: #1B3128; border-radius: 12px; padding: 12px 16px; min-width: 130px; display: flex; flex-direction: column; text-decoration: none; } .coverage__stat span { font-size: 12px; color: #9FC9B0; } .coverage__stat strong { font-size: 20px; color: #FFFFFF; } .coverage__stat--warn { background: var(--amber-tint); } .coverage__stat--warn span, .coverage__stat--warn strong { color: #6B3A03; } .coverage__stat--warn:hover { background: #F8E4C0; } .teach { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 20px; } .teach__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; } .teach__tile { font: inherit; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; color: var(--ink); } .teach__tile:hover { border-color: var(--green); box-shadow: 0 6px 18px -12px rgba(16, 32, 26, .4); } .teach__tile span:last-child { font-size: 13px; color: var(--muted); } .teach__icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .kb-cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; } .kb-cols__main { flex: 3 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; } .kb-cols__side { flex: 2 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 20px; } .table--kb { min-width: 640px; } .table .actions { text-align: right; } .src { display: flex; align-items: center; gap: 10px; } .src > div { min-width: 0; } .src strong { overflow-wrap: anywhere; } .src__icon { width: 32px; height: 32px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; } .src__error { max-width: 220px; margin-top: 4px; } .pill-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .pill-status--green { background: var(--green-tint); color: #0B4F33; } .pill-status--blue { background: #E6E8FA; color: var(--indigo); } .pill-status--red { background: #FCE4E1; color: #8E1F15; } .pill-status--amber { background: var(--amber-tint); color: #6B3A03; } .pill-status--grey { background: #EEF1EB; color: #3E4E46; } .pill-status__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.2s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .3; } } @media (prefers-reduced-motion: reduce) { .pill-status__dot { animation: none; } } .gaps { display: flex; flex-direction: column; gap: 10px; } .gap { border: 1px solid #E8ECE5; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .gap--top { border-color: var(--amber-line); background: var(--amber-soft); } .gap__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 10px; } .gap__meta { font-size: 12px; font-weight: 600; color: #6B3A03; } .gap__form { margin: 0; display: flex; flex-direction: column; gap: 8px; } .gap__form textarea { min-height: 0; } .faqs { display: flex; flex-direction: column; gap: 8px; } .faq { border: 1px solid #E8ECE5; border-radius: 12px; } .faq summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; justify-content: space-between; gap: 10px; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq__chev { width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); flex: none; transition: transform .15s; } .faq[open] .faq__chev { transform: rotate(-135deg); } .faq__form { padding: 0 14px 14px; gap: 12px; } .qchip { font: inherit; font-size: 12px; font-weight: 600; background: var(--surface); color: var(--ink); border: 1px solid #C9D1C6; border-radius: 999px; padding: 6px 12px; cursor: pointer; } .qchip:hover { border-color: var(--ink); } .testchat { background: #F4F6F1; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; max-height: 420px; overflow-y: auto; } .testchat__hint { margin: auto; font-size: 13px; color: var(--muted); text-align: center; } .tmsg { max-width: 92%; padding: 9px 13px; border-radius: 14px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; } .tmsg--q { align-self: flex-end; background: var(--surface); border: 1px solid #E3E7E0; border-bottom-right-radius: 4px; } .tmsg--a { align-self: flex-start; background: #DCEFE3; border-bottom-left-radius: 4px; } .tmsg--wait { align-self: flex-start; color: var(--muted); font-size: 13px; padding: 0; } .tmsg--handover { align-self: center; font-size: 12px; color: #6B3A03; background: var(--amber-tint); padding: 4px 12px; border-radius: 999px; } .tmsg__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--muted); white-space: normal; } .tmsg__src { font-weight: 600; color: #0B4F33; background: var(--surface); padding: 2px 8px; border-radius: 999px; } .testask { display: flex; gap: 8px; align-items: center; border: 1px solid #C9D1C6; border-radius: 12px; padding: 4px 4px 4px 12px; margin: 0; } .testask:focus-within { border-color: var(--green); } .testask input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; min-height: 36px; background: transparent; } .rules { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .rules legend { font-size: 14px; font-weight: 600; margin-bottom: 6px; padding: 0; } .rules__row { display: flex; gap: 6px; align-items: center; } .rules__row .input { min-height: 40px; padding: 8px 12px; font-size: 14px; } .rules__del { flex: none; width: 36px; height: 36px; border: 0; background: none; color: var(--muted); font-size: 20px; border-radius: 8px; cursor: pointer; } .rules__del:hover { background: var(--soft); color: var(--red); } .kb-box { border: 1px solid #E8ECE5; border-radius: 12px; padding: 14px; } .kb-items { max-height: 300px; overflow-y: auto; border: 1px solid #E8ECE5; border-radius: 12px; } .kb-items li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #F1F3EF; font-size: 13px; } .kb-items li:last-child { border-bottom: 0; } .kb-items form { margin: 0; flex: none; } .guide-view { display: flex; flex-direction: column; gap: 14px; } .guide-view[hidden], [data-guide-form][hidden], [data-faq-pane][hidden] { display: none; } .guide-view__rows { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .guide-view__rows > div { display: flex; justify-content: space-between; gap: 12px; } .guide-view__rows dt { color: var(--muted); } .guide-view__rows dd { margin: 0; font-weight: 600; text-align: right; } .guide-view__about p { font-size: 14px; color: #3E4E46; margin-top: 4px; } .ticks { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; font-size: 14px; } .ticks li { display: flex; gap: 8px; align-items: flex-start; } .ticks svg { flex: none; margin-top: 3px; } .btn-dashed { font: inherit; font-size: 14px; font-weight: 600; color: var(--green); background: transparent; border: 1px dashed #9FC9B0; border-radius: 10px; min-height: 42px; cursor: pointer; width: 100%; } .btn-dashed:hover { background: var(--green-tint); border-color: var(--green); } .seg--block { display: flex; } .seg--block label { flex: 1; text-align: center; } /* Settings ------------------------------------------------------------------- */ .crumb { font-size: 13px; color: var(--muted); margin-bottom: 2px; } .settings-tabs, .chan-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; } .settings-tab, .chan-tab { font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--muted); text-decoration: none; padding: 10px 14px 11px; border-bottom: 3px solid transparent; } .settings-tab:hover, .chan-tab:hover { color: var(--ink); } .settings-tab.is-active, .chan-tab.is-active { color: var(--ink); border-bottom-color: var(--green); } .chan-tabs { border-bottom: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px; width: max-content; max-width: 100%; } .chan-tab { border: 0; border-radius: 9px; padding: 8px 16px; } .chan-tab.is-active { background: var(--ink); color: #FFFFFF; } .wc-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; } .wc-form { flex: 3 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 20px; margin: 0; } .wc-form .card { gap: 16px; } .wc-form__save { align-self: flex-start; } .wc-publish { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-top: 1px solid #EEF1EB; padding-top: 16px; margin-top: 4px; } .autosave { font-size: 12px; color: var(--muted); font-weight: 500; } .autosave--ok { color: #0B4F33; font-weight: 600; } .autosave--error { color: var(--red); font-weight: 600; } .wc-side { flex: 2 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 20px; } .swatches { display: flex; gap: 10px; flex-wrap: wrap; } .swatch { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--sw, #FFFFFF); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); } .swatch input[type="radio"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; } .swatch:has(input:checked), .swatch.is-checked { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); } .swatch:has(input:focus-visible) { outline: 3px solid var(--mint); outline-offset: 4px; } .swatch--custom { background: conic-gradient(#E3463B, #F5B014, #2FB37A, #1F4FD1, #6D3FC4, #E3463B); overflow: hidden; } .swatch--custom input { position: absolute; inset: -8px; width: 56px; height: 56px; opacity: 0; cursor: pointer; border: 0; padding: 0; } .seg { display: inline-flex; background: #EEF1EB; border-radius: 10px; padding: 3px; } .seg label { position: relative; } .seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .seg span { display: block; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 8px; color: var(--muted); } .seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 32, 26, .15); } .seg input:focus-visible + span { outline: 2px solid var(--green); } .toggles { display: flex; flex-direction: column; } .toggle { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid #EDF0EA; cursor: pointer; position: relative; } .toggles .toggle:first-child { border-top: 0; padding-top: 0; } .toggle__text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .toggle__text span { font-size: 13px; color: var(--muted); } .toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; } .toggle__ui { flex: none; width: 44px; height: 26px; border-radius: 999px; background: #C9D1C6; position: relative; transition: background .15s; } .toggle__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s; } .toggle input:checked + .toggle__ui { background: var(--green); } .toggle input:checked + .toggle__ui::after { transform: translateX(18px); } .toggle input:focus-visible + .toggle__ui { outline: 3px solid var(--mint); outline-offset: 2px; } .toggle input:disabled + .toggle__ui { opacity: .45; } .toggle__more { padding: 0 0 14px; } .toggle__more[hidden] { display: none; } .guides { display: flex; flex-direction: column; border: 1px solid #E8ECE5; border-radius: 12px; } .guide { border-bottom: 1px solid #F1F3EF; } .guide:last-child { border-bottom: 0; } .guide summary { cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 14px; } .guide p { padding: 0 14px 12px; font-size: 13px; color: #3E4E46; } .howto { background: #F4F6F1; border-radius: 12px; padding: 14px 16px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; } .howto p { color: #3E4E46; } .pv { position: relative; height: 470px; border-radius: 14px; background: #EEF1EB; overflow: hidden; } .pv__site { position: absolute; inset: 16px; display: flex; flex-direction: column; gap: 10px; } .pv__site span { height: 14px; border-radius: 6px; background: #DDE2DA; } .pv__site span:nth-child(1) { width: 60%; height: 22px; } .pv__site span:nth-child(3) { width: 80%; } .pv__panel { position: absolute; right: 16px; bottom: 84px; width: min(300px, calc(100% - 32px)); background: #FFFFFF; border-radius: 16px; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .4); overflow: hidden; display: flex; flex-direction: column; font-size: 13px; } .pv--left .pv__panel { right: auto; left: 16px; } .pv--left .pv__proactive { right: auto; left: 80px; } .pv--left .pv__launcher { right: auto; left: 16px; } .pv__head { color: #FFFFFF; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; } .pv__head div { display: flex; flex-direction: column; } .pv__head span { font-size: 11px; opacity: .85; } .pv__x { font-size: 18px; } .pv__body { background: #F4F6F1; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .pv__msg { max-width: 85%; padding: 8px 11px; border-radius: 12px; line-height: 1.4; } .pv__msg--in { align-self: flex-start; background: #FFFFFF; border: 1px solid #E3E7E0; border-bottom-left-radius: 4px; } .pv__msg--out { align-self: flex-end; color: #FFFFFF; border-bottom-right-radius: 4px; } .pv__wa { align-self: flex-start; background: var(--green-tint); color: #0B4F33; font-weight: 600; font-size: 12px; border-radius: 999px; padding: 5px 10px; } .pv__wa[hidden], .pv__proactive[hidden] { display: none; } .pv__input { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid #E3E7E0; color: var(--muted); } .pv__send { color: #FFFFFF; font-weight: 600; border-radius: 8px; padding: 6px 10px; font-size: 12px; } .pv__foot { font-size: 10px; color: var(--muted); text-align: center; padding: 0 0 6px; min-height: 6px; } .pv__launcher { position: absolute; right: 16px; bottom: 16px; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .4); } .pv__proactive { position: absolute; right: 16px; bottom: 84px; width: 220px; background: #FFFFFF; border-radius: 12px; padding: 10px 12px; font-size: 13px; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .35); z-index: 2; bottom: 20px; right: 80px; width: 200px; } .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; margin: 0; } @media (max-width: 1100px) { .settings-grid { grid-template-columns: minmax(0, 1fr); } } .settings-grid__foot { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .hours { display: flex; flex-direction: column; gap: 8px; } .hours__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .hours__row .input--time { flex: 1 1 140px; min-width: 140px; width: auto; } .hours__day { width: 130px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; } .hours__day input { width: 16px; height: 16px; accent-color: var(--green); } .input--time { width: 120px; min-height: 40px; padding: 6px 10px; } .card--danger { border-color: #F3C9C4; } .danger-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .danger-row .input { flex: 1 1 260px; } /* Campaigns, automations, analytics ----------------------------------------- */ .pre { white-space: pre-wrap; overflow-wrap: anywhere; } .form__alert--ok { background: var(--green-tint); color: var(--green-deep); border-color: #C6E3D1; } .composer-card { position: sticky; top: 20px; } .composer-card__btns .btn--primary { margin-left: auto; } [data-email-only][hidden], [data-au-for][hidden], [data-step-for][hidden] { display: none; } .tokens { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .audience { border: 1px solid #E8ECE5; border-radius: 12px; padding: 12px 14px; margin: 0; display: flex; flex-direction: column; gap: 10px; } .audience legend { font-size: 14px; font-weight: 600; padding: 0 4px; } .audience__count { font-size: 14px; } .audience__count strong { color: var(--green-dark); } .rowmenu { position: relative; display: inline-block; } .rowmenu summary { list-style: none; cursor: pointer; padding: 6px 10px; border-radius: 8px; color: var(--muted); font-weight: 700; letter-spacing: .1em; } .rowmenu summary::-webkit-details-marker { display: none; } .rowmenu summary:hover, .rowmenu[open] summary { background: var(--soft); color: var(--ink); } .rowmenu:not([open]) .rowmenu__panel { display: none; } .rowmenu__panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; min-width: 180px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 16px 32px -16px rgba(16, 32, 26, .3); text-align: left; } .rowmenu__panel a, .rowmenu__panel button { display: block; width: 100%; text-align: left; font: inherit; font-size: 14px; color: var(--ink); background: none; border: 0; border-radius: 8px; padding: 8px 10px; text-decoration: none; cursor: pointer; } .rowmenu__panel a:hover, .rowmenu__panel button:hover { background: var(--soft); } .rowmenu__panel form { margin: 0; } .tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .tpl { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; } .tpl--new { font: inherit; font-weight: 600; color: var(--green); border-style: dashed; align-items: center; justify-content: center; min-height: 160px; cursor: pointer; } .tpl--new:hover { background: var(--green-tint); } .tpl__head { display: flex; justify-content: space-between; gap: 8px; align-items: center; } .tpl__body { font-size: 13px; color: #3E4E46; white-space: pre-wrap; flex: 1; } .tpl .btn-row { margin-top: 4px; } .tpl form { margin: 0; } .auto-layout { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr) minmax(260px, 1.2fr); gap: 20px; align-items: start; } .flows { display: flex; flex-direction: column; gap: 8px; } .flow { display: flex; align-items: center; gap: 8px; border: 1px solid #E8ECE5; border-radius: 12px; padding: 4px 10px 4px 4px; } .flow.is-active { border-color: var(--green); background: #F2F9F4; } .flow__link { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 8px; color: var(--ink); text-decoration: none; border-radius: 9px; } .flow__link:hover { color: var(--ink); background: rgba(0, 0, 0, .02); } .flow__link span { font-size: 12px; color: var(--muted); } .flow__stats { color: var(--green-dark) !important; font-weight: 600; } .flow__toggle { margin: 0; flex: none; } .toggle--bare { border: 0; padding: 0; } .flowbox { border: 1px solid #E8ECE5; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: #FBFCFA; } .flowbox__label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-dark); } .au-channels { border: 0; padding: 0; margin: 0; } .checkchip { position: relative; } .checkchip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .checkchip span { display: block; font-size: 13px; font-weight: 600; padding: 6px 12px; border: 1px solid #C9D1C6; border-radius: 999px; background: var(--surface); } .checkchip input:checked + span { background: var(--ink); color: #FFFFFF; border-color: var(--ink); } .checkchip input:focus-visible + span { outline: 2px solid var(--green); } .steps { display: flex; flex-direction: column; gap: 10px; counter-reset: step; margin: 0; padding: 0; list-style: none; } .steps .step { display: flex; flex: none; gap: 10px; align-items: flex-start; border: 1px solid #E8ECE5; border-radius: 12px; padding: 10px; background: var(--surface); box-shadow: none; min-height: 0; } .step__num { counter-increment: step; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--green-tint); color: var(--green-dark); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; margin-top: 8px; } .step__num::before { content: counter(step); } .step__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .step__body .input { min-height: 42px; padding: 8px 12px; } .auto-side { display: flex; flex-direction: column; gap: 20px; } .test-results { display: flex; flex-direction: column; gap: 8px; font-size: 13px; } .test-results li { background: #F4F6F1; border-radius: 10px; padding: 8px 10px; } .runs { display: flex; flex-direction: column; gap: 8px; font-size: 13px; } .runs li { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between; border-bottom: 1px solid #F1F3EF; padding-bottom: 8px; } .topics { display: flex; flex-direction: column; gap: 8px; } .topic { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #F1F3EF; } .topic__label { font-weight: 600; font-size: 14px; } .tpl-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; } .tpl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #E8ECE5; border-radius: 12px; padding: 10px 12px; } .tpl-row > div { display: flex; flex-direction: column; min-width: 0; } .tpl-row form { margin: 0; flex: none; } .legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); } .legend span { display: inline-flex; align-items: center; gap: 6px; } .legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } .bars { display: flex; align-items: flex-end; gap: 6px; height: 200px; padding-top: 8px; border-bottom: 1px solid #C9D1C6; } .bars__col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; } .bars__stack { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; } .bars__seg { display: block; min-height: 0; border-radius: 3px 3px 0 0; } .bars__label { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; } .bars + * { margin-top: 18px; } .card .bars { margin-bottom: 16px; } .hbars { display: flex; flex-direction: column; gap: 10px; } .hbars li { display: grid; grid-template-columns: minmax(80px, 120px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; } .hbars__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hbars li:has(.hbars__label--wide) { grid-template-columns: minmax(0, 2fr) minmax(60px, 1fr) auto; } .hbars__track { height: 10px; background: #EEF1EB; border-radius: 999px; overflow: hidden; } .hbars__fill { display: block; height: 100%; background: var(--green); border-radius: inherit; } .hbars__fill--instagram { background: var(--pink); } .hbars__fill--email { background: var(--amber); } .hbars__fill--webchat { background: var(--indigo); } .funnel { display: flex; flex-direction: column; gap: 10px; } .funnel li { position: relative; min-height: 40px; display: flex; align-items: center; } .funnel__bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green-tint); border-radius: 10px; } .funnel__text { position: relative; padding: 0 12px; font-size: 14px; } .segcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; } .segcard { border: 1px solid #E8ECE5; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; } .segcard strong { font-family: var(--font-display); font-size: 24px; } .choice { display: flex; gap: 6px; } .choice label { flex: 1; position: relative; } .choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .choice span { display: flex; align-items: center; justify-content: center; min-height: 42px; font-weight: 600; font-size: 14px; background: var(--surface); color: var(--ink); border: 1px solid #C9D1C6; border-radius: 10px; } .choice input:checked + span { background: var(--green-tint); color: #0B4F33; border-color: var(--green); } .choice input:focus-visible + span { outline: 3px solid var(--mint); outline-offset: 2px; } .note-pink { font-size: 13px; color: #4A5A52; background: var(--pink-soft); border-radius: 8px; padding: 8px 10px; } .more { font-size: 13px; } .more summary { cursor: pointer; font-weight: 600; color: var(--green); padding: 2px 0; } .more[open] summary { margin-bottom: 10px; } .preview { background: #E9EEE6; border-radius: 14px; padding: 16px; } .preview__label { font-size: 12px; font-weight: 600; color: #3E4E46; margin-bottom: 8px; } .preview__bubble { background: var(--surface); border-radius: 12px 12px 12px 4px; padding: 12px 14px; max-width: 320px; font-size: 14px; } .preview__title { font-weight: 600; } .preview__title:empty { display: none; } .preview__body { margin-top: 4px; color: #3E4E46; white-space: pre-wrap; overflow-wrap: anywhere; } .preview__foot { font-size: 11px; color: var(--muted); margin-top: 6px; } .send-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; } .send-row > .field { flex: 1 1 160px; } .send-row input[hidden] { display: none; } .costbox { flex: 1 1 160px; background: #F4F6F1; border-radius: 10px; padding: 10px 12px; font-size: 13px; display: flex; flex-direction: column; } .costbox span { color: var(--muted); } .costbox strong { font-size: 16px; } .composer-card__btns { display: flex; gap: 10px; } .composer-card__btns .btn { flex: 1; margin: 0; } .composer-card__foot { display: flex; flex-direction: column; gap: 4px; } /* Automations (design) */ .auto-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; } .flows-card { flex: 2 1 320px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 2px; } .flows-card__head { padding: 8px 10px 6px; display: flex; justify-content: space-between; align-items: center; } .flows-empty { padding: 8px 10px 12px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .flowitem { display: flex; align-items: center; gap: 12px; padding: 4px 12px 4px 4px; border-radius: 12px; } .flowitem:hover { background: #F7F9F5; } .flowitem.is-active { background: var(--green-tint); } .flowitem__link { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 8px; color: var(--ink); text-decoration: none; } .flowitem__link:hover { color: var(--ink); } .flowitem__link span { font-size: 12px; color: #3E4E46; } .flowitem form { margin: 0; } .flowitem__switch { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #0B4F33; cursor: pointer; } .flowitem__switch input { width: 18px; height: 18px; accent-color: var(--green); margin: 0; cursor: pointer; } .flowitem--locked { opacity: .7; } .flowitem__lock { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .builder { flex: 3 1 520px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; } .builder form { margin: 0; display: flex; flex-direction: column; gap: 14px; } .builder__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; } .builder__title { flex: 1 1 240px; min-width: 0; } .builder__name { width: 100%; font: inherit; font-size: 17px; font-weight: 700; color: var(--ink); border: 1px solid transparent; border-radius: 8px; padding: 2px 6px; margin-left: -6px; background: transparent; } .builder__name:hover { border-color: var(--line); } .builder__name:focus { outline: none; border-color: var(--green); background: var(--surface); } .builder__name.is-invalid { border-color: #C0362C; } .builder__btns { display: flex; flex-wrap: wrap; gap: 8px; } .builder__stats { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-size: 13px; color: #3E4E46; } .builder__stats strong { color: var(--ink); } .builder__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: flex-start; } .runsbox summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--green); } .runsbox .runs { margin-top: 8px; min-width: 280px; } .canvas { background: #F4F6F1; background-image: radial-gradient(#D4DBD0 1px, transparent 1px); background-size: 18px 18px; border-radius: 14px; padding: 24px 16px; display: flex; flex-direction: column; align-items: center; } .node { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .node--trigger { background: var(--ink); color: #FFFFFF; border-color: var(--ink); } .node--send { border-color: #C3E1CE; } .node--human { border-style: dashed; border-color: #9DB0A4; } .node__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mint); } .node__top { display: flex; align-items: center; gap: 8px; } .node__select { font: inherit; font-weight: 700; border-radius: 8px; padding: 6px 28px 6px 8px; cursor: pointer; -webkit-appearance: none; appearance: none; } .node__select--dark { width: 100%; color: #FFFFFF; background: #1B3128 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239FE0B8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center; border: 1px solid #36503F; font-size: 15px; } .node__select--label { flex: 1; min-width: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #0B4F33; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%230B4F33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center; border: 1px solid transparent; padding-left: 0; } .node__select--label:hover, .node__select--label:focus { border-color: var(--line); padding-left: 6px; outline: none; } .node--crm .node__select--label, .node--human .node__select--label { color: #3E4E46; } .node__del { flex: none; width: 28px; height: 28px; border: 0; background: none; color: var(--muted); font-size: 18px; border-radius: 6px; cursor: pointer; } .node__del:hover { background: var(--soft); color: var(--red); } .node__input { width: 100%; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); border: 1px solid #E3E7E0; border-radius: 8px; padding: 7px 10px; background: #FBFCFA; resize: vertical; } .node__input:focus { outline: none; border-color: var(--green); background: var(--surface); } .node__desc { font-size: 13px; color: var(--muted); } .node__field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #C4D6CB; } .node__field input { font: inherit; font-size: 14px; color: #FFFFFF; background: #1B3128; border: 1px solid #36503F; border-radius: 8px; padding: 7px 10px; } .node__field input:focus { outline: none; border-color: var(--mint); } .node__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: #C4D6CB; } .node__hint { color: #8FA699; } .darkchip { position: relative; } .darkchip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .darkchip span { display: block; font-size: 12px; font-weight: 600; padding: 3px 10px; border: 1px solid #36503F; border-radius: 999px; color: #DCE7E0; } .darkchip input:checked + span { background: var(--mint); color: var(--green-deep); border-color: var(--mint); } /* Tick drawn with CSS (a ✓ character can come from a taller fallback font and grow the chip). */ .node__channels .darkchip span { line-height: 18px; height: 26px; box-sizing: border-box; display: inline-flex; align-items: center; } .darkchip input:checked + span::before { content: ""; width: 7px; height: 4px; margin: -2px 6px 0 0; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); flex: none; } .node__channels { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #C4D6CB; } .darkchip input:focus-visible + span { outline: 2px solid var(--mint); outline-offset: 2px; } [data-au-for][hidden], [data-step-for][hidden] { display: none !important; } .flowsteps { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; align-items: center; } .flowstep { width: 100%; display: flex; flex-direction: column; align-items: center; } .flowstep__line, .canvas__line { width: 2px; height: 22px; background: #9DB0A4; display: block; } .canvas__add { font: inherit; font-size: 13px; font-weight: 600; color: var(--green); background: var(--surface); border: 1px dashed #9DB0A4; border-radius: 999px; padding: 8px 16px; cursor: pointer; } .canvas__add:hover { border-color: var(--green); background: var(--green-tint); } /* Wait and "Wait, then check" steps, with Yes / No branches */ .node--wait, .node--branch { border-style: dashed; border-color: #9DB0A4; } .node--wait .node__select--label, .node--branch .node__select--label { color: #3E4E46; } .node__wait { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .node__input--num { width: 72px; flex: none; } .node__input--unit { width: auto; flex: none; } .node__input--strong { font-weight: 700; } .node__check { display: flex; flex-direction: column; gap: 8px; } .node__hint-sm { font-size: 12px; } [data-if-for][hidden], [data-sub-for][hidden] { display: none !important; } .flowstep__line--short { height: 14px; } .branch { width: 100%; max-width: 640px; display: flex; flex-wrap: wrap; gap: 16px; } .branch__col { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; align-items: center; } .branch__tag { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; } .branch__tag--yes { color: #0B4F33; background: #E3F1E8; } .branch__tag--no { color: #6B3A03; background: #FBEFD9; } .branch__steps { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; align-items: center; } .branch__steps:empty { display: none; } .substep { width: 100%; display: flex; flex-direction: column; align-items: center; } .node--sub { max-width: none; padding: 10px 12px; } .branch__add { font: inherit; font-size: 12px; font-weight: 600; color: var(--green); background: var(--surface); border: 1px dashed #9DB0A4; border-radius: 999px; padding: 5px 12px; cursor: pointer; } .branch__add:hover { border-color: var(--green); background: var(--green-tint); } .branch--match { max-width: 100%; justify-content: center; } .branch--match .branch__col { flex: 1 1 220px; max-width: 320px; } .branch__match { width: 100%; display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid #C3E1CE; border-radius: 10px; padding: 6px 6px 6px 8px; } .node__input--match { flex: 1; min-width: 0; padding: 5px 8px; font-size: 13px; } .branch__add--match { align-self: flex-start; } .branch__add[hidden] { display: none; } .flowstep:has(> .branch:not([hidden])) + .flowstep > .flowstep__line { height: 28px; } .agentform { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; margin: 0; } .agentform .table-wrap { width: 100%; } .agent-table { min-width: 860px; } .agent-table td { padding-top: 10px; padding-bottom: 10px; } .modesel { font: inherit; font-size: 12px; font-weight: 700; border: 0; border-radius: 999px; padding: 4px 24px 4px 10px; cursor: pointer; -webkit-appearance: none; appearance: none; background-repeat: no-repeat; background-position: right 8px center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%233E4E46' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } .modesel--auto { background-color: var(--green-tint); color: #0B4F33; } .modesel--draft { background-color: var(--amber-tint); color: #6B3A03; } .modesel--collect { background-color: #E6E8FA; color: var(--indigo); } .modesel--human { background-color: #FCE4E1; color: #8E1F15; } .modesel:focus-visible { outline: 2px solid var(--green); } .when-input { width: 100%; min-width: 200px; font: inherit; font-size: 13px; color: #3E4E46; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; background: transparent; } .when-input:hover { border-color: var(--line); } .when-input:focus { outline: none; border-color: var(--green); background: var(--surface); } .agent-tiles { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .agent-tile { background: #F4F6F1; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .agent-tile label, .agent-tile__label { font-size: 12px; color: var(--muted); } .agent-tile strong { font-size: 14px; } .agent-tile__input { font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); border: 1px solid transparent; border-radius: 8px; padding: 4px 6px; margin-left: -6px; background: transparent; } .agent-tile__input:hover { border-color: #C9D1C6; } .agent-tile__input:focus { outline: none; border-color: var(--green); background: var(--surface); } select.agent-tile__input { -webkit-appearance: none; appearance: none; cursor: pointer; } .agent-tile--check { cursor: pointer; } .agent-tile__row { display: flex; gap: 8px; align-items: flex-start; } .agent-tile__row input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--green); flex: none; } /* Analytics (design) */ .kpis--6 .kpi { flex: 1 1 150px; } select.agent-tile__input { font-size: 13px; max-width: 100%; } .kpi__note--up { color: var(--green-dark); font-weight: 600; } .kpi__unit { font-size: 15px; color: var(--muted); font-weight: 600; } .dash-row__half { flex: 1 1 420px; min-width: 0; } .legend__dash { background: repeating-linear-gradient(90deg, #9DB0A4 0 4px, transparent 4px 7px) !important; height: 3px !important; width: 16px !important; } .linechart { display: flex; gap: 10px; } .linechart__y { display: flex; flex-direction: column; justify-content: space-between; height: 200px; font-size: 11px; color: var(--muted); text-align: right; } .linechart__plot { flex: 1; min-width: 0; } .linechart__plot svg { display: block; } .linechart__x { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; } .card__foot-note { font-size: 13px; color: #3E4E46; background: #F4F6F1; border-radius: 10px; padding: 10px 12px; margin-top: auto; } .stackbar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px; } .stackbar span { display: block; height: 100%; } .chlegend { display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .chlegend li { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .chlegend__name { display: flex; align-items: center; gap: 8px; } .chlegend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } .hours { border-top: 1px solid #EEF1EB; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; } .hours__bars { display: flex; align-items: flex-end; gap: 3px; height: 60px; } .hours__bars span { flex: 1; background: #C3E1CE; border-radius: 2px; } .hours__bars span.is-peak { background: var(--green); } .hours__x { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); } .revlist { display: flex; flex-direction: column; gap: 12px; } .revlist__row { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; } .revlist__track { height: 8px; background: #EEF1EB; border-radius: 999px; overflow: hidden; margin-top: 5px; } .revlist__track span { display: block; height: 100%; background: var(--green); border-radius: inherit; } .funnel2 { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .funnel2__row { display: flex; align-items: center; gap: 12px; } .funnel2__bar { min-width: 180px; border-radius: 8px; padding: 10px 12px; display: flex; justify-content: space-between; gap: 10px; font-size: 14px; } .funnel2__pct { font-size: 12px; color: var(--muted); } .qlist { display: flex; flex-direction: column; } .qlist li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid #EEF1EB; font-size: 14px; } .qlist__n { font-size: 12px; font-weight: 600; color: #0B4F33; white-space: nowrap; } .qlist__n--no { color: #8E1F15; } /* Web chat settings (design) */ .livepill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #0B4F33; background: var(--green-tint); border-radius: 999px; padding: 0 12px; min-height: 36px; } .livepill span { width: 8px; height: 8px; border-radius: 50%; background: var(--green); } .livepill--off { color: #6B3A03; background: var(--amber-tint); } .livepill--off span { background: var(--amber); } .qr-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .qr-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: #0B4F33; background: var(--green-tint); border: 1px solid #C3E1CE; border-radius: 999px; padding: 4px 4px 4px 8px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: box-shadow .15s, transform .15s; } .qr-chip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .qr-chip__grip { width: 6px; height: 12px; flex: none; background-image: radial-gradient(currentColor 1px, transparent 1.3px); background-size: 3px 4px; opacity: .55; margin-right: 2px; } .qr-chip.is-dragging { cursor: grabbing; background: #FFFFFF; border-color: var(--green); box-shadow: 0 8px 18px -8px rgba(16, 32, 26, .45); transform: scale(1.04); z-index: 2; position: relative; } .qr-edit.is-sorting { cursor: grabbing; } .qr-chip button { border: 0; background: none; color: #0B4F33; font-size: 16px; line-height: 1; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; } .qr-chip button:hover { background: rgba(0, 0, 0, .06); } .qr-add[hidden] { display: none; } .qr-add input { font: inherit; font-size: 13px; font-weight: 600; border: 1px dashed #9FC9B0; border-radius: 999px; padding: 5px 12px; width: 120px; color: var(--ink); background: transparent; } .qr-add input:focus { outline: none; border-color: var(--green); width: 180px; } .pv__qr { display: flex; flex-wrap: wrap; gap: 5px; } .pv__qr span { font-size: 11px; font-weight: 600; border: 1px solid var(--green); color: var(--green); background: #FFFFFF; border-radius: 999px; padding: 3px 9px; } .pv__qr:empty { display: none; } .wc-side { position: static; } .pv { height: 520px; } /* Responsive ------------------------------------------------------------- */ @media (max-width: 1080px) { .auto-layout { grid-template-columns: minmax(0, 1fr); } .composer-card { position: static; } .grid-2, .channel-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 960px) { .auth { grid-template-columns: minmax(0, 1fr); } .auth__aside { display: none; } } @media (max-width: 860px) { .wc-side { position: static; } .settings-grid { grid-template-columns: minmax(0, 1fr); } .inbox__list, .inbox__thread, .inbox__contact { height: auto; position: static; } .inbox__convs { max-height: 360px; } .thread { max-height: 70vh; } .form-grid { grid-template-columns: minmax(0, 1fr); } .app { grid-template-columns: minmax(0, 1fr); } .sidebar { position: sticky; top: 0; z-index: 30; padding: 12px 16px; gap: 0; height: auto; overflow: visible; } .sidebar__menu-btn { display: block; } .sidebar__panel { display: none; padding-top: 14px; max-height: calc(100vh - 64px); overflow-y: auto; } .sidebar.is-open .sidebar__panel { display: flex; } .app__main { padding: 20px 16px 48px; } .usage-card { margin-top: 0; } .page-title { font-size: 26px; } } @media (max-width: 520px) { .msg { max-width: 88%; } .composer { margin: 0 12px 12px; } .thread { padding: 14px 12px; } .thread-head { padding: 12px; } .filters__count { margin-left: 0; flex-basis: 100%; } .profile__stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hsearch { flex: 1 1 100%; order: -1; } .hsearch__box { width: auto; } .hsearch__panel { width: 100%; } .notif { position: static; } .notif__panel { left: 16px; right: 16px; width: auto; max-width: none; } .kpis { gap: 10px; } .kpi { flex-basis: 140px; padding: 14px; } .kpi__value { font-size: 26px; } .auth__main { padding: 20px 16px; } .auth__title { font-size: 27px; } .panel, .channel-card { padding: 18px; } .page-head__actions { width: 100%; position: relative; } .page-head__actions .btn { flex: 1; } .checklist-steps__body { flex-direction: column; align-items: flex-start; } .current-plan { gap: 12px 24px; } } /* Deals & tasks ----------------------------------------------------------- */ .kpi--dark { background: var(--ink); border-color: var(--ink); } .kpi--dark .kpi__label { color: var(--sage-2); } .kpi--dark .kpi__value { color: var(--mint); } .kpi--dark .kpi__note { color: #C9D8CF; } .chip--ai { background: var(--ink); color: var(--mint); } .av--xs { width: 24px; height: 24px; font-size: 10px; } .av--sm { width: 32px; height: 32px; font-size: 12px; } .text-red { color: #8E1F15; } .btn--danger-text { color: #8E1F15; border-color: #E8C2BC; } .btn--danger-text:hover { color: #8E1F15; border-color: #8E1F15; } .seg-tab__count--red { background: #FCE4E1; color: #8E1F15; } .viewtoggle { display: inline-flex; background: var(--surface); border: 1px solid var(--line-3); border-radius: 10px; padding: 3px; } .viewtoggle__btn { font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; border-radius: 7px; padding: 0 14px; min-height: 36px; display: inline-flex; align-items: center; } .viewtoggle__btn:hover { color: var(--ink); background: var(--soft); } .viewtoggle__btn.is-active { background: var(--ink); color: #FFFFFF; } .dl-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .dl-filters__label { font-size: 13px; color: var(--muted); font-weight: 600; margin-right: 2px; } .dl-filters__space { flex: 1 1 8px; } .dl-filters__search { flex: 1 1 150px; max-width: 220px; min-height: 36px; } .dl-filters__lost { font-size: 13px; font-weight: 600; color: var(--muted); padding: 0 6px; } .dl-filters .select { min-height: 36px; font-size: 13px; } .fchip { font-size: 13px; font-weight: 600; text-decoration: none; background: var(--surface); color: var(--ink); border: 1px solid var(--line-3); border-radius: 999px; padding: 0 14px; min-height: 36px; display: inline-flex; align-items: center; } .fchip:hover { color: var(--ink); border-color: var(--ink); } .fchip.is-on { background: var(--ink); border-color: var(--ink); color: #FFFFFF; } .board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 4px; } .board__col { background: #EAEEE6; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 140px; transition: background-color .15s, box-shadow .15s; } .board__col.is-over { background: #DCE7DE; box-shadow: inset 0 0 0 2px var(--green); } .board__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 6px; border-bottom: 3px solid #9AA79F; } .board__col--qualified .board__head { border-bottom-color: #4C5BD4; } .board__col--quote .board__head { border-bottom-color: #C77A12; } .board__col--won .board__head { border-bottom-color: var(--green); } .board__name { display: flex; align-items: center; gap: 8px; } .board__count { font-size: 12px; font-weight: 700; background: var(--surface); border-radius: 999px; padding: 1px 8px; color: var(--ink-2); } .board__total { font-size: 13px; font-weight: 700; color: var(--ink-2); } .board__hint { margin: -2px 6px 0; font-size: 12px; color: var(--muted); } .board__add { font: inherit; font-size: 13px; font-weight: 600; background: transparent; border: 1px dashed #B7C2B3; border-radius: 10px; color: var(--ink-2); min-height: 36px; cursor: pointer; } .board__add:hover { background: rgba(255, 255, 255, .6); border-color: var(--ink-2); } .board__tip { margin: -8px 0 0; } .dcard { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 2px solid var(--surface); border-radius: 12px; padding: 12px; color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgba(16, 32, 26, .06); cursor: grab; } .dcard:hover { color: var(--ink); border-color: var(--line-3); } .dcard.is-selected { border-color: var(--green); } .dcard.is-dragging { opacity: .5; } .dcard__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .dcard__title { font-weight: 600; line-height: 1.3; } .dcard__value { font-family: var(--font-display); font-weight: 800; white-space: nowrap; } .dcard__who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); min-width: 0; } .dcard__meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .dcard__age { font-size: 12px; color: var(--muted); margin-left: auto; } .dcard__age.is-late { color: #8E1F15; font-weight: 600; } .dcard__next { font-size: 12px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 8px; } .dstage { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; background: #EEF1EB; color: var(--ink-2); } .dstage--qualified { background: #E6E8FA; color: var(--indigo); } .dstage--quote { background: var(--amber-tint); color: var(--amber-dark); } .dstage--won { background: var(--green-tint); color: #0B4F33; } .dstage--lost { background: #FCE4E1; color: #8E1F15; } .dl-layout { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; } .dl-detail { flex: 2 1 520px; min-width: 0; padding: 22px 24px; gap: 18px; scroll-margin-top: 16px; } .dl-detail:focus { outline: none; } .dl-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .dl-detail__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; } .dl-detail__title { margin: 8px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; } .dl-detail__head p { margin: 2px 0 0; } .dl-detail__head p a { padding: 0; } .dl-detail__value { text-align: right; } .dl-detail__amount { font-family: var(--font-display); font-size: 30px; font-weight: 800; line-height: 1.2; } .dsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } .dsteps button { font: inherit; font-size: 12px; font-weight: 600; color: #8A968F; background: none; border: 0; padding: 0 0 4px; width: 100%; text-align: left; display: flex; flex-direction: column; gap: 6px; cursor: pointer; } .dsteps button:disabled { cursor: default; } .dsteps button:hover:not(:disabled) { color: var(--ink); } .dsteps__bar { height: 6px; border-radius: 999px; background: #E3E7E0; } .dsteps__step.is-done button { color: var(--ink); } .dsteps__step--new.is-done .dsteps__bar { background: #9AA79F; } .dsteps__step--qualified.is-done .dsteps__bar { background: #4C5BD4; } .dsteps__step--quote.is-done .dsteps__bar { background: #C77A12; } .dsteps__step--won.is-done .dsteps__bar { background: var(--green); } .dsteps__step.is-current button { font-weight: 800; } .dl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .dl-fact { background: var(--soft); border-radius: 12px; padding: 12px 14px; min-width: 0; } .dl-fact__label { font-size: 12px; color: var(--muted); } .dl-fact__value { font-weight: 600; overflow-wrap: anywhere; } .dl-ai { background: var(--green-tint); border-radius: 12px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; } .dl-ai__badge { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--ink); color: var(--mint); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; } .dl-ai__badge--sm { width: 26px; height: 26px; font-size: 10px; } .dl-ai__body { flex: 1; min-width: 0; } .dl-ai__title { font-weight: 700; color: #0B4F33; } .dl-ai__body p { margin: 2px 0 0; } .dl-h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; font-family: var(--font-body); } .dl-note { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .dl-note .input { flex: 1 1 240px; min-height: 44px; font-size: 14px; } .dl-note .form__alert { flex-basis: 100%; } .dl-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .dl-activity li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; } .dl-activity__dot { width: 8px; height: 8px; flex: none; margin-top: 6px; border-radius: 50%; background: #9AA79F; } .dl-activity__dot--stage { background: var(--green); } .dl-activity__dot--message { background: var(--indigo); } .dl-activity__dot--note { background: var(--amber); } .dl-activity__text { flex: 1; min-width: 0; overflow-wrap: anywhere; } .dl-activity__when { color: var(--muted); white-space: nowrap; } .dl-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid #EDF0EA; padding-top: 16px; } .dl-actions__space { flex: 1; } .attnlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .attnlist__item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 13px; color: var(--ink); text-decoration: none; background: #EEF1EB; } .attnlist__item:hover { color: var(--ink); filter: brightness(.98); } .attnlist__item--red { background: #FCE4E1; } .attnlist__item--amber { background: var(--amber-tint); } .attnlist__mark { font-weight: 800; color: #8E1F15; } .attnlist__item--amber .attnlist__mark { color: var(--amber-dark); } .wonbars { display: flex; flex-direction: column; gap: 10px; } .wonbars__label { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; } .wonbars__track { height: 8px; background: #EEF1EB; border-radius: 999px; margin-top: 4px; overflow: hidden; } .wonbars__fill { height: 100%; border-radius: inherit; background: #25A36A; } .wonbars__fill--instagram { background: #C1357F; } .wonbars__fill--email { background: #C77A12; } .wonbars__fill--webchat { background: #4C5BD4; } .wonbars__fill--other { background: #9AA79F; } /* Tasks */ .tk-layout { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; } .tk-main { flex: 2 1 560px; min-width: 0; overflow: visible; } .tk-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .tk-tabsrow { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px; border-bottom: 1px solid #E8ECE5; } .tk-tabsrow .seg-tabs { border-bottom: 0; flex: 1 1 auto; } .tk-assignee { padding: 8px 14px; } .tk-assignee .select { min-height: 36px; font-size: 13px; } .tk-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; border-bottom: 1px solid #EDF0EA; background: #FAFBF8; } .tk-quick__field { flex: 1 1 260px; min-width: 0; } .tk-quick .input { min-height: 44px; font-size: 14px; } .tk-quick .form__alert { flex-basis: 100%; } .tk-empty { margin-top: 14px; } .tk-list { list-style: none; margin: 0; padding: 0; } .tk { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid #EDF0EA; } .tk:last-child { border-bottom: 0; border-radius: 0 0 16px 16px; } .tk.is-late { background: #FFF8F7; } .tk__check button { width: 26px; height: 26px; flex: none; margin-top: -1px; border-radius: 7px; border: 2px solid #9AA79F; background: var(--surface); color: transparent; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: background-color .15s, border-color .15s; } .tk__check button:hover { border-color: var(--green); } .tk.is-done .tk__check button { background: var(--green); border-color: var(--green); color: #FFFFFF; } .tk__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .tk__title-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .tk__title { font-weight: 600; } .tk.is-done .tk__title { text-decoration: line-through; color: #8A968F; } .tk__links { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; color: var(--muted); } .tk__who { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; } .tk__who:hover { color: var(--green); } .tk__deal { color: var(--muted); } .tk__chat { font-weight: 600; } .tk__note { margin: 0; font-size: 13px; color: var(--ink-2); background: var(--soft); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; } .tk__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; } .tk__side-row { display: flex; align-items: center; gap: 2px; } .tk__due { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #EEF1EB; color: var(--ink-2); white-space: nowrap; } .tk__due--today { background: var(--amber-tint); color: var(--amber-dark); } .tk__due--late { background: #FCE4E1; color: #8E1F15; } .tk__due--done { background: var(--green-tint); color: #0B4F33; } .tk-side__head { display: flex; align-items: center; gap: 8px; } .sugglist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .sugglist__item { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; } .sugglist__btns { display: flex; gap: 6px; align-items: center; margin-top: 4px; } .sugglist__btns .link-button { color: var(--muted); font-size: 13px; } .teamlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .teamlist li { display: flex; align-items: center; gap: 10px; } .teamlist__main { flex: 1; min-width: 0; } .teamlist__row { display: flex; justify-content: space-between; font-size: 13px; } .teamlist__track { height: 6px; background: #EEF1EB; border-radius: 999px; margin-top: 4px; overflow: hidden; } .teamlist__track span { display: block; height: 100%; background: var(--green); border-radius: inherit; } .tk-digest { background: var(--green-tint); border-color: #C6E3D1; } .tk-digest .card__title { color: #0B4F33; } .tk-digest p { margin: 0; } .tk-digest form { display: flex; align-items: center; gap: 10px; } .tk-digest__on { color: #0B4F33; font-weight: 700; } @media (max-width: 860px) { .board { grid-template-columns: repeat(4, minmax(240px, 82vw)); scroll-snap-type: x mandatory; } .board__col { scroll-snap-align: start; } .dl-filters__search { flex: 1 1 100%; } .dl-detail { padding: 18px; } .dl-detail__value { text-align: left; } } @media (max-width: 520px) { .tk { flex-wrap: wrap; } .tk__side { flex-direction: row; width: 100%; justify-content: space-between; padding-left: 38px; } .dsteps button { font-size: 11px; } } /* Analytics -------------------------------------------------------------- */ .an-head .page-head__actions { align-items: center; } .rangebar { display: inline-flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 3px; position: relative; } .rangebar__btn { font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; border-radius: 8px; padding: 0 12px; min-height: 36px; display: inline-flex; align-items: center; white-space: nowrap; cursor: pointer; list-style: none; } .rangebar__btn::-webkit-details-marker { display: none; } .rangebar__btn:hover { color: var(--ink); background: var(--soft); } .rangebar__btn.is-active, .rangebar__btn.is-active:hover { background: var(--ink); color: #FFFFFF; } .rangebar__custom { position: static; } .rangebar__custom:not([open]) .rangebar__panel { display: none; } .rangebar__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(16, 32, 26, .25); padding: 14px; display: flex; flex-direction: column; gap: 10px; } .rangebar__panel .input { min-height: 42px; font-size: 14px; } .exportmenu { position: relative; } .exportmenu__btn { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; cursor: pointer; } .exportmenu__btn::-webkit-details-marker { display: none; } .exportmenu:not([open]) .exportmenu__panel { display: none; } .exportmenu__panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 280px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(16, 32, 26, .25); padding: 6px; } .exportmenu__panel a, .exportmenu__schedule { display: block; width: 100%; text-align: left; font: inherit; color: var(--ink); text-decoration: none; background: transparent; border: 0; border-radius: 8px; padding: 10px 12px; min-height: 44px; cursor: pointer; } .exportmenu__panel a:hover, .exportmenu__schedule:hover { background: var(--soft); color: var(--ink); } .exportmenu__panel strong { display: block; font-size: 14px; } .exportmenu__panel span { display: block; font-size: 12px; color: var(--muted); } .exportmenu__sep { height: 1px; background: #EEF1EB; margin: 4px 6px; } .exportmenu__schedule { background: var(--soft); } .exportmenu__schedule.is-on { background: var(--green-tint); } .exportmenu__schedule.is-on strong { color: #0B4F33; } .an-tabs { margin-top: -4px; } .kpi--amber { background: var(--amber-soft); border-color: var(--amber-line); } .kpi--amber .kpi__label, .kpi--amber .kpi__value, .kpi--amber .kpi__note { color: #6B3A03; } .kpi__note--down { color: var(--red); font-weight: 600; } .kpis--7 .kpi { flex: 1 1 140px; } .kpis--6 .kpi__value, .kpis--7 .kpi__value { font-size: 28px; } .an-card { padding: 18px; } .an-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; } .an-row__half { flex: 1 1 400px; min-width: 0; } .an-row__wide { flex: 3 1 480px; min-width: 0; } .an-row__narrow { flex: 2 1 320px; min-width: 0; } .an-foot { margin: 0; font-size: 13px; color: var(--ink-2); } .an-tight { margin: -6px 0 0; } .an-head-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .vchart { display: flex; gap: 10px; } .vchart__y { display: flex; flex-direction: column; justify-content: space-between; height: 200px; font-size: 11px; color: var(--muted); text-align: right; flex: none; } .vchart__y--short { height: 190px; } .vchart__plot { flex: 1; min-width: 0; } .vchart__plot svg { display: block; } .vchart__x { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; } .anbars { display: flex; flex-direction: column; gap: 12px; } .anbars__row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .anbars__track { height: 12px; background: #EEF1EB; border-radius: 999px; margin-top: 5px; overflow: hidden; } .anbars__fill { height: 100%; border-radius: 0; } .paytiles { display: flex; flex-wrap: wrap; gap: 12px; } .paytiles > div { flex: 1 1 120px; background: var(--soft); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; } .paytiles span { font-size: 12px; color: var(--muted); } .paytiles strong { font-size: 20px; } .linkstats { border-top: 1px solid #EEF1EB; padding-top: 12px; } .linkstats__row { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 8px; } .linkstats__row span { display: block; font-size: 12px; color: var(--muted); } .linkstats__row strong { font-size: 18px; } .an-note { background: var(--soft); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--ink-2); } .an-note strong { color: var(--ink); } .an-note a { font-weight: 600; } .an-note--amber { background: var(--amber-soft); } .an-note--mint { background: var(--green-tint); color: var(--ink); } .an-note__eyebrow { display: block; font-size: 12px; color: #0B4F33 !important; } .segtoggle { display: inline-flex; background: var(--soft); border-radius: 10px; padding: 3px; } .segtoggle button { font: inherit; font-size: 13px; font-weight: 600; background: transparent; color: var(--ink-2); border: 0; border-radius: 8px; padding: 0 14px; min-height: 34px; cursor: pointer; } .segtoggle button[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; } .pertable[hidden] { display: none; } .table--period { min-width: 900px; } .table--period th, .table--period td { white-space: nowrap; } .table--period thead th { text-transform: none; letter-spacing: 0; font-size: 13px; } .table--period th.is-current { background: var(--green-tint); color: var(--ink); } .table--period td.is-current { background: #F1F8F3; } .table--period tbody th { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); font-weight: 600; } .pertable__first { position: sticky; left: 0; background: var(--surface); text-align: left; min-width: 120px; z-index: 1; } .pertable__total { background: var(--soft); border-left: 2px solid var(--line-3); font-weight: 700; } .hourbars { display: flex; align-items: flex-end; gap: 3px; height: 110px; border-bottom: 1px solid var(--line-3); } .hourbars span { flex: 1; border-radius: 2px 2px 0 0; } .hourbars__x { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: -8px; } .stackcols { display: flex; align-items: flex-end; gap: 14px; height: 190px; border-bottom: 1px solid var(--line-3); } .stackcols__col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; } .stackcols__seg { display: block; min-height: 2px; } .stackcols__seg--ret { background: #9FCDB2; border-radius: 4px 4px 0 0; } .stackcols__seg--new { background: var(--green); } .stackcols__seg--ret + .stackcols__seg--new { border-radius: 0; } .stackcols__seg--new:first-child { border-radius: 4px 4px 0 0; } .stackcols__x { display: flex; gap: 14px; font-size: 11px; color: var(--muted); margin-top: 6px; text-align: center; } .stackcols__x span { flex: 1; min-width: 0; } .segboxes { display: flex; flex-wrap: wrap; gap: 12px; } .segbox { flex: 1 1 180px; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; } .segbox--warn { background: var(--amber-soft); border-color: var(--amber-line); } .segbox__label { font-size: 12px; font-weight: 600; color: #0B4F33; } .segbox--warn .segbox__label { color: #6B3A03; } .segbox__n { font-family: var(--font-display); font-size: 24px; font-weight: 800; line-height: 1.2; } .segbox__who { font-size: 12px; color: var(--ink-2); flex: 1; } .segbox__btn { margin-top: 4px; justify-content: center; } .cohort { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 4px; font-size: 14px; } .cohort thead th { text-align: center; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; padding: 6px 8px; } .cohort thead th:first-child { text-align: left; padding-left: 0; } .cohort tbody th { text-align: left; padding: 8px 8px 8px 0; } .cohort .num { text-align: right; padding: 8px; } .cohort__cell { text-align: center; border-radius: 6px; padding: 8px; font-weight: 600; } .cohort__cell.is-empty { background: var(--soft); color: var(--muted); font-weight: 400; } .citylist { list-style: none; margin: 0; padding: 0; } .citylist li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid #EEF1EB; } .print-only { display: none; } @media print { .sidebar, .page-head__actions, .skip-link, .an-tabs, .banner, .notice, .segtoggle, .btn, .card__link { display: none !important; } .app { display: block; } .app__main { padding: 0; } .print-only { display: block; } .card, .kpi { break-inside: avoid; box-shadow: none; } .pertable[hidden] { display: block !important; } .pertable { margin-bottom: 12px; } body { background: #FFFFFF; } } @media (max-width: 860px) { .rangebar { overflow-x: auto; max-width: 100%; } .rangebar__panel { position: fixed; left: 16px; right: 16px; top: 120px; width: auto; } .exportmenu__panel { position: fixed; left: 16px; right: 16px; top: 120px; width: auto; } } /* Email inboxes ---------------------------------------------------------- */ .status--error { background: #FCE4E1; color: #8E1F15; } .mailopts { display: flex; flex-direction: column; gap: 10px; } .mailopt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; color: var(--ink); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .mailopt:hover { border-color: var(--green); color: var(--ink); box-shadow: 0 8px 20px -14px rgba(16, 32, 26, .5); } .mailopt.is-off { cursor: default; opacity: .7; background: var(--soft); } .mailopt.is-off:hover { border-color: var(--line); box-shadow: none; } .mailopt__logo { width: 40px; height: 40px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: #FFFFFF; } .mailopt__logo--google { background: #EA4335; } .mailopt__logo--ms { background: #0F6CBD; } .mailopt__logo--smtp { background: var(--ink); color: var(--mint); } .mailopt__text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mailopt__text span { font-size: 13px; color: var(--muted); } .mailopt__go { font-size: 18px; color: var(--muted); } .smtpset { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 14px; margin: 0; } .smtpset legend { font-size: 13px; font-weight: 700; padding: 0 6px; } .smtpset__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(70px, .7fr) minmax(0, 1fr); gap: 10px; } .channel-list li > .mailrow { display: flex; flex-direction: column; align-items: stretch; flex-basis: 100%; width: 100%; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 2px; } .mailrow p { margin: 0; } .mailrow__error { font-size: 13px; color: #8E1F15; background: #FCE4E1; border-radius: 8px; padding: 8px 10px; } .mailrow__settings { display: grid; grid-template-columns: fit-content(152px) minmax(0, 1fr); align-items: center; gap: 6px 10px; } .mailrow__mode { display: contents; } .mailrow__mode .select { min-height: 36px; font-size: 13px; width: 100%; min-width: 0; padding-left: 9px; padding-right: 22px; } @media (max-width: 380px) { .mailrow__settings { grid-template-columns: minmax(0, 1fr); gap: 4px; } } .mailrow__btns { margin-top: 0; } .mailrow__btns form { margin: 0; } .msg__failed { color: #8E1F15; } @media (max-width: 520px) { .smtpset__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .smtpset__row .field:first-child { grid-column: 1 / -1; } } /* Plan & billing: the button follows the plan details instead of sitting at the bottom. */ .app .plan__summary { align-self: flex-start; } .app .plan__summary .btn--block { margin-top: 0; } /* Store menu floats over the page. With JS it's placed against the window (position: fixed), so it isn't drawn inside the scrolling sidebar, where browsers didn't always repaint it on close. */ .store-switch.is-floating .store-switch__panel { position: fixed; right: auto; z-index: 60; max-height: calc(100vh - 24px); overflow-y: auto; transform: translateZ(0); } /* While renaming, give the name field the whole row. */ .profile__head:has(.namebox__form:not([hidden])) > .stage { display: none; } /* Profile: notes save as you type; tasks for the customer */ .profile__notes-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; } .profile__tasks { display: flex; flex-direction: column; gap: 8px; } .profile__addtask { min-height: 30px; padding: 4px 10px; font-size: 12px; } .ptasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .ptasks:empty, .ptasks:not(:has(li)) { display: none; } .ptasks__empty { margin: -2px 0 0; } .ptasks li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; background: var(--soft); border-radius: 8px; padding: 6px 8px; } .ptasks__due { flex: none; font-size: 11px; font-weight: 700; color: var(--amber-dark); background: var(--amber-tint); border-radius: 999px; padding: 1px 8px; } .ptasks__due.is-late { color: #8E1F15; background: #FCE4E1; } .ptasks__title { min-width: 0; overflow-wrap: anywhere; } .ptasks li.is-new { animation: ptask-in .6s ease; } @keyframes ptask-in { from { background: var(--green-tint); } } .ptasks__empty[hidden], .ptasks__all[hidden] { display: none; } /* Name + "Web chat · added …" sit close together: the small edit icon doesn't add height. */ .profile__who .namebox__view { line-height: 1.2; } .profile__who .namebox__view .namebox__icon { width: 22px; height: 22px; margin: -3px 0; border-radius: 6px; } .profile__who .namebox__view .namebox__icon svg { width: 13px; height: 13px; } .profile__who strong { line-height: 1.2; } .profile__who > span { line-height: 1.3; margin-top: 1px; } /* Quick-add rows: field and button the same height. */ .tk-quick { align-items: flex-start; } .tk-quick .input, .tk-quick .btn, .dl-note .input, .dl-note .btn { height: 44px; min-height: 44px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; } .tk-quick .input, .dl-note .input { padding-left: 14px; padding-right: 14px; } /* Dashboard: conversations chart, deals pipeline, my tasks, last campaign */ .dash-stack { display: flex; flex-direction: column; gap: 16px; } .dash-stack > .card { flex: 0 0 auto; } .bars-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); flex-wrap: wrap; } .bars-legend > span { display: inline-flex; align-items: center; gap: 6px; } .bars-legend__key { width: 10px; height: 10px; border-radius: 2px; } .bars-legend__key--ai, .bars__seg--ai { background: var(--green); } .bars-legend__key--team, .bars__seg--team { background: #9DB0A4; } .bars { display: flex; gap: 10px; } .bars__axis { display: flex; flex-direction: column; justify-content: space-between; height: 180px; font-size: 11px; color: var(--muted); text-align: right; } .bars__main { flex: 1; min-width: 0; } .bars__plot { display: flex; align-items: flex-end; gap: 14px; height: 180px; border-bottom: 1px solid var(--line-3, #C9D1C6); border-top: 1px dashed var(--line-2); } .bars__col { flex: 1; height: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 2px; min-width: 0; } .bars__seg { width: 100%; min-height: 3px; } .bars__col .bars__seg:last-child { border-radius: 4px 4px 0 0; } .bars__labels { display: flex; gap: 14px; font-size: 11px; color: var(--muted); margin-top: 6px; text-align: center; } .bars__labels span { flex: 1; } .bars-foot { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: var(--ink-2, #3E4E46); } .bars-foot strong { color: var(--ink); } .pipe-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .pipe-bars__row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; } .pipe-bars__track { height: 10px; background: #EEF1EB; border-radius: 999px; margin-top: 5px; overflow: hidden; } .pipe-bars__track span { display: block; height: 100%; min-width: 0; border-radius: 999px; } .pipe-note { margin: auto 0 0; background: #F4F6F1; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--ink-2, #3E4E46); } .pipe-note strong { color: var(--ink); } .dash-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .dash-tasks li { display: flex; align-items: center; gap: 10px; min-height: 36px; } .dash-tasks label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; } .dash-tasks input { width: 18px; height: 18px; accent-color: var(--green); flex: none; margin: 0; } .dash-tasks__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-tasks li.is-done { color: var(--muted); } .dash-tasks li.is-done .dash-tasks__title { text-decoration: line-through; } .dash-tasks__due { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; } .dash-tasks__due.is-late { color: #A3261B; font-weight: 600; } .dash-tasks__all { align-self: flex-start; } .dash-pill { font-size: 12px; font-weight: 600; color: #0B4F33; background: var(--green-tint); padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .card__title-link { color: inherit; text-decoration: none; } .card__title-link:hover { color: var(--green); } .camp-sum { margin: -6px 0 0; color: var(--ink-2, #3E4E46); overflow-wrap: anywhere; } .camp-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } .camp-stats > div { flex: 1 1 70px; } .camp-stats dt { font-size: 12px; color: var(--muted); } .camp-stats dd { margin: 0; font-size: 18px; font-weight: 700; } .camp-stats__money dt, .camp-stats__money dd { color: #0B4F33; } .pipe-bars .text-green-dark { color: #0B4F33; } /* Deals: details in a popup; the side cards sit in a row under the board */ .dialog--deal { width: min(780px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 26px 28px; } .dialog--deal__close { position: absolute; top: 14px; right: 14px; margin: 0; } .dialog--deal .dl-detail { display: flex; flex-direction: column; gap: 18px; padding: 0; } .dialog--deal .dl-detail__head { padding-right: 36px; } .dl-side--row { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: stretch; } .dl-side--row > .card { flex: 1 1 320px; min-width: 0; } @media (max-width: 640px) { .dialog--deal { padding: 20px 18px; } } .dcard__name { cursor: pointer; border-radius: 4px; } .dcard__name:hover { color: var(--green); text-decoration: underline; } .dcard__name:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } /* ---------- Boards (Deals and Tasks): fixed-width columns that scroll sideways, like Trello ---------- */ .board { --colw: max(250px, calc((100% - 36px) / 4)); display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 10px; scroll-behavior: smooth; } .board > .board__col { flex: 0 0 var(--colw); min-height: 260px; } .board > .board__col--new-list { flex: 0 0 240px; min-height: 0; background: transparent; padding: 0; } .board__col--custom .board__head { border-bottom-color: #5E8C74; } .board__head { position: relative; flex-wrap: nowrap; } .board__name { min-width: 0; flex: 1; } .board__title { font: inherit; font-weight: 700; color: var(--ink); background: none; border: 0; padding: 2px 4px; margin-left: -4px; border-radius: 6px; cursor: text; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .board__title:hover { background: rgba(255, 255, 255, .7); } .board__rename { flex: 1; min-width: 0; } .board__rename .input { width: 100%; } .board__menu summary { padding: 2px 8px; } .board__menu .rowmenu__panel { min-width: 210px; } .rowmenu__note { margin: 4px 0 0; padding: 8px 10px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line-2); } .board__newcol { font: inherit; font-weight: 600; width: 100%; text-align: left; background: rgba(16, 32, 26, .05); border: 2px dashed #C9D1C6; border-radius: 14px; padding: 14px 16px; color: var(--ink-2); cursor: pointer; } .board__newcol:hover { background: rgba(16, 32, 26, .08); border-color: var(--ink-2); } .board__newform { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .board__newform p { margin: 0; } .board__newbtns { display: flex; gap: 6px; } .input--sm { min-height: 36px; padding: 0 10px; font-size: 14px; } .select--sm { min-height: 32px; padding: 0 28px 0 10px; font-size: 13px; } .dsteps__step--custom.is-done .dsteps__bar { background: #5E8C74; } @media (max-width: 860px) { .board { --colw: min(300px, 82vw); scroll-snap-type: x mandatory; } } /* Tasks board */ .tcol { padding: 10px; } .tcol--done { background: #E4EEE7; } .tcol.is-over { background: #DCE7DE; box-shadow: inset 0 0 0 2px var(--green); } .tcol__donetag { font-size: 10px; font-weight: 700; color: #0B4F33; background: #CFE6D7; border-radius: 999px; padding: 2px 8px; white-space: nowrap; } .tcol__cards { display: flex; flex-direction: column; gap: 8px; min-height: 24px; } .tcol__addform { display: flex; flex-direction: column; gap: 6px; } .tcol__addform textarea { resize: none; min-height: 64px; } .tcard { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 2px solid var(--surface); border-radius: 12px; padding: 11px 12px; color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgba(16, 32, 26, .06); cursor: grab; } .tcard:hover { color: var(--ink); border-color: var(--line-3); } .tcard.is-selected { border-color: var(--green); } .tcard.is-dragging { opacity: .45; } .tcard.is-done .tcard__title { color: var(--muted); text-decoration: line-through; } .tcard__labels { display: flex; flex-wrap: wrap; gap: 4px; } .tcard__title { font-weight: 600; line-height: 1.35; display: flex; gap: 6px; align-items: flex-start; } .tcard__tick { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; } .tcard__who { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); min-width: 0; flex-wrap: wrap; } .tcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); } .tcard__owner { margin-left: auto; } .tcard-drop { height: 4px; border-radius: 4px; background: var(--green); margin: -2px 0; } .tbadge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: #F4F6F1; color: var(--muted); } .tbadge--today { background: #FBEFD9; color: #7A4304; } .tbadge--late { background: #FCE4E1; color: #8E1F15; } .tbadge--ok { background: #DCEFE3; color: #0B4F33; } .tbadge--plain { background: none; padding: 2px 0; font-weight: 500; } .label { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .label--red { background: #FCE4E1; color: #8E1F15; } .label--amber { background: #FBEFD9; color: #7A4304; } .label--indigo { background: #E6E8FA; color: #2E3A8C; } .label--green { background: #E3F1E8; color: #0B4F33; } .label--pink { background: #F9E1EE; color: #8A1C5A; } .chip--green { background: var(--green-tint); color: #0B4F33; } .av--dark { background: var(--ink); color: #9FE0B8; } .tsugg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; background: var(--ink); color: #DCE7E0; border-radius: 14px; padding: 10px 12px; } .tsugg__title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #FFFFFF; font-size: 14px; } .tsugg__item { display: flex; align-items: center; gap: 8px; flex: 1 1 360px; max-width: 100%; background: #1B3128; border: 1px solid #2E4A3C; border-radius: 10px; padding: 6px 6px 6px 12px; font-size: 13px; min-width: 0; } .tsugg__item form { margin: 0; flex: 0 0 auto; } .tsugg__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .tsugg__text strong { color: #FFFFFF; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; } .tsugg__who { color: #9FC9B0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsugg__add { font: inherit; font-size: 12px; font-weight: 700; background: #9FE0B8; color: #0B2A1D; border: 0; border-radius: 8px; padding: 0 12px; min-height: 30px; cursor: pointer; white-space: nowrap; } .tsugg__x { font: inherit; font-size: 18px; line-height: 1; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: #9FC9B0; cursor: pointer; } .tsugg__x:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; } /* Task card popup */ .dialog--task { width: min(880px, calc(100vw - 32px)); } .tcardd { display: flex; flex-direction: column; gap: 18px; } .tcardd__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-right: 44px; } .tcardd__list { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 0; } .tcardd__form { display: flex; flex-direction: column; gap: 12px; margin: 0; } .tcardd__grid { display: flex; flex-wrap: wrap; gap: 20px 24px; align-items: flex-start; } .tcardd__main { flex: 3 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .tcardd__side { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 10px; } .tcardd__side .field { margin: 0; } .tcardd__title { font: inherit; font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); width: 100%; box-sizing: border-box; border: 1px solid transparent; border-radius: 8px; padding: 2px 6px; margin-left: -6px; background: transparent; } .tcardd__title:hover { border-color: var(--line); } .tcardd__title:focus { border-color: var(--green); outline: none; background: #FFFFFF; } .tcardd__h { margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .tcardd__labels { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .tcardd__labels legend { float: left; width: 100%; margin-bottom: 6px; } .labelpick { position: relative; cursor: pointer; } .labelpick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .labelpick span { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: #FFFFFF; color: var(--muted); } .labelpick.label--red input:checked + span { background: #FCE4E1; color: #8E1F15; border-color: #F3C3BD; } .labelpick.label--amber input:checked + span { background: #FBEFD9; color: #7A4304; border-color: #EED3A6; } .labelpick.label--indigo input:checked + span { background: #E6E8FA; color: #2E3A8C; border-color: #C7CCF2; } .labelpick.label--green input:checked + span { background: #E3F1E8; color: #0B4F33; border-color: #BFDFCB; } .labelpick.label--pink input:checked + span { background: #F9E1EE; color: #8A1C5A; border-color: #EDC0D8; } .labelpick input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; } .tcardd__quote { margin: 0; font-size: 14px; color: var(--ink-2); background: var(--soft); border-radius: 10px; padding: 10px 12px; } .tcardd__save { display: flex; justify-content: flex-end; } .tcardd__grid--lower { border-top: 1px solid var(--line-2); padding-top: 18px; } .tcardd__block { display: flex; flex-direction: column; gap: 8px; } .tcardd__row { display: flex; justify-content: space-between; align-items: center; } .tcardd__pct { font-size: 13px; font-weight: 700; color: #0B4F33; } .tcardd__bar { height: 8px; background: #EEF1EB; border-radius: 999px; overflow: hidden; } .tcardd__bar span { display: block; height: 100%; background: var(--green); border-radius: 999px; transition: width .2s; } .tcardd__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .tcardd__items li { display: flex; align-items: center; gap: 6px; min-height: 36px; } .tcardd__items label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; } .tcardd__items input { width: 18px; height: 18px; accent-color: var(--green); margin: 0; flex: none; } .tcardd__items li.is-done span { text-decoration: line-through; color: var(--muted); } .tcardd__items form { margin: 0; } .tcardd__x { font: inherit; font-size: 18px; line-height: 1; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; } .tcardd__x:hover { background: var(--soft); color: #A3261B; } .tcardd__inline { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .tcardd__inline .input { flex: 1 1 200px; min-width: 0; } .tcardd__inline .form__alert { flex: 1 1 100%; } .tcardd__activity { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .tcardd__activity li { display: flex; gap: 10px; font-size: 14px; } .tcardd__activity li.is-event { color: var(--ink-2); } .tcardd__comment { margin: 2px 0 0; background: var(--soft); border-radius: 10px; padding: 8px 10px; white-space: pre-line; } .tcardd__cust { background: var(--soft); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .tcardd__custname { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none; } .tcardd__custname:hover { color: var(--green); } .tcardd__links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .board [data-inline-view][hidden], .board [data-inline-form][hidden] { display: none !important; } .board__menu .rowmenu__panel { width: 240px; min-width: 0; z-index: 60; } .tcol__add .board__add { width: 100%; } .board__tiprow { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: -8px; } .board__tiprow .board__tip { margin: 0; } .board__tiprow .link-button { color: var(--green); font-weight: 600; text-decoration: none; } .board__tiprow .link-button:hover { text-decoration: underline; } .labelpick { background: none; padding: 0; border-radius: 999px; } /* Task popup: details as text, Edit opens the form; labels menu */ .tcardd__head { display: flex; flex-direction: column; gap: 10px; } .tcardd__name { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; padding-right: 8px; } .tcardd__labelrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .labelmenu { position: relative; } .labelmenu summary { list-style: none; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--ink-2); border: 1px dashed var(--line-3); border-radius: 999px; padding: 3px 10px; } .labelmenu summary::-webkit-details-marker { display: none; } .labelmenu summary:hover, .labelmenu[open] summary { border-color: var(--ink-2); background: var(--soft); } .labelmenu__panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 40px -18px rgba(16, 32, 26, .35); padding: 12px; display: flex; flex-direction: column; gap: 12px; } .labelmenu__list { display: flex; flex-direction: column; gap: 2px; margin: 0; max-height: 220px; overflow-y: auto; } .labelmenu__list .tcardd__h, .labelmenu__new .tcardd__h { margin-bottom: 4px; } .labelmenu__item { display: flex; align-items: center; gap: 10px; padding: 5px 4px; border-radius: 8px; cursor: pointer; } .labelmenu__item:hover { background: var(--soft); } .labelmenu__item input { width: 16px; height: 16px; accent-color: var(--green); margin: 0; } .labelmenu__new { display: flex; flex-direction: column; gap: 8px; margin: 0; border-top: 1px solid var(--line-2); padding-top: 12px; } .labelmenu__colours { border: 0; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; } .swatch { position: relative; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; } .swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .swatch:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 2px #FFFFFF; } .swatch:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; } .label--teal { background: #DDF1F0; color: #0E5552; } .label--grey { background: #EEF1EB; color: #3E4E46; } .tcardd__details { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; } .tcardd__details [data-inline-view][hidden], .tcardd__details [data-inline-form][hidden] { display: none !important; } .tcardd__details > [data-inline-view] { display: flex; flex-direction: column; gap: 12px; } .tcardd__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px 16px; margin: 0; } .tcardd__facts dt { font-size: 12px; color: var(--muted); } .tcardd__facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; } .tcardd__desc p { margin: 4px 0 0; white-space: pre-line; } .tcardd__edit { align-self: flex-start; } .tcardd__form .form-grid { margin: 0; } .tcardd__save { display: flex; justify-content: flex-end; gap: 8px; } /* Deal popup: every activity, in a short box that scrolls */ .dl-activity { max-height: 188px; overflow-y: auto; padding: 10px 12px; margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: #FAFBF8; overscroll-behavior: contain; scrollbar-width: thin; } .dl-activity:empty { display: none; } .dl-activity:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } /* Deal popup: team comments */ .dl-comments { display: flex; flex-direction: column; gap: 10px; } .dl-comment-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 0; } .dl-comment-form textarea { flex: 1 1 240px; min-width: 0; min-height: 44px; resize: vertical; } .dl-comment-form .form__alert { flex: 1 1 100%; } .dl-commentlist { list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 12px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .dl-commentlist li { display: flex; gap: 10px; align-items: flex-start; } .dl-comment { flex: 1; min-width: 0; } .dl-comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; } .dl-comment__head form { margin: 0 0 0 auto; } .dl-comment p { margin: 4px 0 0; background: var(--soft); border-radius: 0 12px 12px 12px; padding: 8px 12px; font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; } .dl-h3 .small { font-weight: 500; } .dl-comment__del { font: inherit; font-size: 12px; color: var(--muted); background: none; border: 0; padding: 2px 4px; border-radius: 6px; cursor: pointer; } .dl-comment__del:hover { color: #A3261B; background: #FCE4E1; } /* Comments sit in a scrolling box like Activity; the comment form stays above it. */ .dl-commentlist { max-height: 260px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #FAFBF8; gap: 10px; } .dl-commentlist .dl-comment p { background: #FFFFFF; border: 1px solid var(--line-2); } .dl-commentlist:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } /* Deal popup: actions stay at the bottom while the details scroll */ .dialog--deal .dl-actions { position: sticky; bottom: -26px; z-index: 2; margin: 0 -28px -26px; padding: 10px 28px 12px; background: var(--surface); border-top: 1px solid #EDF0EA; box-shadow: 0 -10px 20px -16px rgba(16, 32, 26, .25); gap: 6px; } .dialog--deal .dl-actions form { margin: 0; } .dl-actions__delete { font-size: 13px; } @media (max-width: 640px) { .dialog--deal .dl-actions { bottom: -20px; margin: 0 -18px -20px; padding: 10px 18px 12px; } } /* Task popup: breathing room above Comments and Activity */ .tcardd__main > .tcardd__block + .tcardd__block { margin-top: 10px; } .tcardd__block .dl-activity { margin-top: 0; } .mailrow__sync { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; } .mailrow__sync .select { min-height: 32px; } /* Emails left out of the Inbox (newsletters, no-reply), with "Bring in" per sender */ .mailskip { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13px; } .mailskip summary { cursor: pointer; font-weight: 600; color: var(--ink); } .mailskip__list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; } .mailskip__list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--soft); border-radius: 8px; } .mailskip__list form { margin: 0; flex: none; } .mailskip__who { min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow-wrap: anywhere; } .mailskip__subject { color: var(--ink); } .mailskip__why { font-size: 12px; color: var(--muted); } /* Blocked email addresses */ .thread-notice { margin: 0; padding: 8px 20px; font-size: 13px; background: #FCE4E1; color: #8E1F15; border-bottom: 1px solid #F3C9C3; } .blocklist { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; } .blocklist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--soft); border-radius: 8px; font-size: 13px; overflow-wrap: anywhere; } .blocklist form { margin: 0; flex: none; } .blocklist__empty { margin: 12px 0 0; font-size: 13px; color: var(--muted); } .thread-more { position: relative; } .thread-more > summary { list-style: none; min-width: 34px; padding: 0 10px; font-size: 16px; letter-spacing: 1px; } .thread-more > summary::-webkit-details-marker { display: none; } .thread-more__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 32px -16px rgba(16, 32, 26, .35); padding: 4px; } .thread-more__menu form { margin: 0; } .thread-more__menu button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 7px; padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; overflow-wrap: anywhere; } .thread-more__menu button:hover { background: var(--soft); } .thread-more__menu button.text-red { color: #8E1F15; } .thread-notice--ok { background: var(--green-tint); color: #0B4F33; border-bottom-color: #CFE6D8; } /* Campaign emails on Plan & billing */ .emailcredits { margin-top: 20px; } .emailcredits__now { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 18px; } .emailcredits__now > div { background: var(--soft); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } .emailcredits__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .emailcredits__big { font-family: var(--font-display); font-size: 26px; font-weight: 800; } .emailcredits__big small { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted); } .emailcredits__h { margin: 0 0 10px; } .meter { height: 8px; border-radius: 999px; background: #E3E7E0; overflow: hidden; } .meter span { display: block; height: 100%; background: var(--green); border-radius: inherit; } .packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; } .pack { margin: 0; border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; } .pack__n { font-family: var(--font-display); font-size: 24px; font-weight: 800; line-height: 1.1; } .pack__label { font-size: 12px; color: var(--muted); } .pack__price { font-weight: 700; margin-top: 6px; } .pack__per { font-size: 12px; color: var(--muted); margin-bottom: 10px; } .plainlist { margin: 8px 0 0; padding-left: 18px; font-size: 13px; } /* ---------- New campaign: start screen ---------- */ .backlink { font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; } .backlink:hover { color: var(--ink); } .genbrand { display: flex; flex-direction: row; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; background: linear-gradient(135deg, #F0F8F3 0%, #FFFFFF 70%); } .genbrand__text { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; } .genbrand__text p { margin: 0; } .genbrand__badge { align-self: flex-start; font-size: 11px; font-weight: 700; color: #0B4F33; background: var(--green-tint); border-radius: 999px; padding: 2px 10px; } .genbrand__form { flex: 1 1 340px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 0; } .genbrand__form .btn { flex: none; } .genbrand__form .input { flex: 1 1 200px; } .genbrand__form .field__error { flex-basis: 100%; margin: 0; } .startgrid__title { margin: 6px 0 -4px; } .startgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; } .starter { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; } .starter:hover .starter__thumb { border-color: var(--green); box-shadow: 0 10px 24px -14px rgba(16, 32, 26, .35); } .starter__thumb { position: relative; display: block; height: 260px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #F4F6F1; margin-bottom: 6px; transition: box-shadow .15s, border-color .15s; } .starter__thumb iframe { width: 640px; height: 860px; border: 0; transform: scale(.34); transform-origin: 0 0; pointer-events: none; position: absolute; left: 0; top: 0; } .starter__thumb--wa { display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; color: #0B4F33; background: #E7F6EC; font-weight: 700; } .starter__thumb--wa svg { width: 34px; height: 34px; } .tpl--link { color: var(--ink); text-decoration: none; } .tpl--link:hover { border-color: var(--green); } /* ---------- Campaign editor ---------- */ .app__main--editor { padding: 0; gap: 0; } .ed-form { display: flex; flex-direction: column; min-height: 100vh; margin: 0; } .ed-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--surface); border-bottom: 1px solid var(--line); } .ed-top__back { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 18px; } .ed-top__back:hover { background: var(--soft); } .ed-top__name { flex: 1 1 200px; min-width: 0; font: inherit; font-size: 17px; font-weight: 700; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; background: transparent; color: var(--ink); } .ed-top__name:hover, .ed-top__name:focus { border-color: var(--line); outline: none; background: var(--surface); } .ed-top__status { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; } .ed-top__btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .ed-alert { margin: 10px 18px 0; } .ed { flex: 1; display: grid; grid-template-columns: 330px minmax(0, 1fr); min-height: 0; } .ed-side { border-right: 1px solid var(--line); background: var(--surface); padding: 14px 16px 40px; position: sticky; top: 55px; height: calc(100vh - 55px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } .ed-tabs { display: flex; gap: 4px; background: var(--soft); border-radius: 10px; padding: 4px; } .ed-tab { flex: 1; font: inherit; font-size: 13px; font-weight: 600; border: 0; border-radius: 7px; padding: 7px 6px; background: transparent; color: var(--muted); cursor: pointer; } .ed-tab.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 32, 26, .1); } .ed-tab[hidden] { display: none; } .ed-pane { display: flex; flex-direction: column; gap: 12px; } .ed-pane[hidden] { display: none; } .ed-pane .field { margin: 0; } .ed-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 4px; } .ed-h--sel { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); } .ed-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .ed-blockbtn { font: inherit; font-size: 12px; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; } .ed-blockbtn span { font-size: 16px; color: var(--green); line-height: 1; } .ed-blockbtn:hover { border-color: var(--green); background: var(--green-tint); } .ed-props { display: flex; flex-direction: column; gap: 10px; } .ed-props .field label { font-size: 12px; } .ed-props .input { min-height: 36px; font-size: 13px; } .ed-img { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .ed-img img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); } .ed-upload { cursor: pointer; } .ed-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ed-inline .input { flex: 1 1 150px; min-width: 0; } .ed-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ed-color { width: 100%; height: 36px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; } .ed-inline .ed-color { width: 56px; } .ed-from { font-size: 13px; font-weight: 600; background: var(--soft); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; } .ed-inbox { display: flex; flex-direction: column; gap: 2px; font-size: 13px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #FBFCFA; } .ed-inbox > span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ed-inbox b { color: var(--ink); } .ed-canvas { min-width: 0; background: #ECEFE9; display: flex; flex-direction: column; } .ed-canvas__bar { position: sticky; top: 55px; z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: rgba(236, 239, 233, .94); backdrop-filter: blur(4px); } .ed-device { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 3px; } .ed-device button { font: inherit; font-size: 12px; font-weight: 600; border: 0; background: none; border-radius: 6px; padding: 5px 10px; cursor: pointer; color: var(--muted); } .ed-device button.is-active { background: var(--ink); color: #FFFFFF; } .ed-toolbar { display: inline-flex; align-items: center; gap: 2px; background: var(--ink); border-radius: 9px; padding: 3px; } .ed-toolbar[hidden] { display: none; } .ed-toolbar button { font: inherit; font-size: 13px; min-width: 30px; height: 28px; border: 0; background: none; color: #FFFFFF; border-radius: 6px; cursor: pointer; padding: 0 6px; } .ed-toolbar button:hover { background: #2A3F35; } .ed-toolbar__sep { width: 1px; height: 18px; background: #3E5248; margin: 0 4px; } .ed-stage { flex: 1; padding: 8px 16px 60px; overflow-x: auto; } .ed-email { padding: 24px 10px; border-radius: 12px; min-height: 400px; transition: max-width .2s; margin: 0 auto; } .ed-stage.is-mobile .ed-email { max-width: 390px; } .ed-stage.is-mobile .eb-cols { flex-direction: column; } .ed-card { margin: 0 auto; padding-bottom: 12px; overflow: visible; box-shadow: 0 1px 3px rgba(16, 32, 26, .06); } .ed-foot { max-width: 600px; margin: 14px auto 0; text-align: center; font-size: 12px; color: #6B7A72; font-family: Arial, sans-serif; } .eb-empty { padding: 60px 24px; text-align: center; color: var(--muted); } .eb { position: relative; outline: 2px solid transparent; outline-offset: -2px; cursor: pointer; } .eb:hover { outline-color: #B9DCC7; } .eb.is-sel { outline-color: var(--green); } .eb--nested { flex: 1; } .eb-tools { position: absolute; top: -14px; right: 8px; z-index: 5; display: none; align-items: center; gap: 2px; background: var(--ink); color: #FFFFFF; border-radius: 8px; padding: 2px 4px; font-family: var(--font-body, Inter, Arial, sans-serif); } .eb.is-sel > .eb-tools, .eb:hover > .eb-tools { display: inline-flex; } .eb--nested > .eb-tools { right: 4px; top: 4px; } .eb-tools__name { font-size: 11px; font-weight: 700; padding: 0 6px; color: var(--mint); } .eb-tools button { font: inherit; font-size: 12px; width: 24px; height: 24px; border: 0; border-radius: 5px; background: none; color: #FFFFFF; cursor: pointer; } .eb-tools button:hover { background: #2A3F35; } .eb-drag { cursor: grab !important; } .eb-add { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); z-index: 6; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--green); color: #FFFFFF; font-size: 16px; line-height: 1; cursor: pointer; display: none; box-shadow: 0 2px 6px rgba(16, 32, 26, .25); } .eb:hover > .eb-add, .eb.is-sel > .eb-add { display: block; } .eb-menu { position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); z-index: 40; display: grid; grid-template-columns: repeat(3, auto); gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 6px; box-shadow: 0 16px 32px -16px rgba(16, 32, 26, .35); font-family: var(--font-body, Inter, Arial, sans-serif); } .eb-menu button { font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; border: 0; background: none; border-radius: 6px; padding: 6px 10px; color: var(--ink); cursor: pointer; text-align: left; } .eb-menu button:hover { background: var(--green-tint); } .eb.drop-before { box-shadow: 0 -3px 0 var(--green); } .eb.drop-after { box-shadow: 0 3px 0 var(--green); } .eb.is-drag { opacity: .4; } .eb-edit { outline: none; cursor: text; min-height: 1em; } .eb-edit:focus { background: rgba(185, 220, 199, .18); border-radius: 4px; } .eb-edit p { margin: 0 0 12px; } .eb-edit ul, .eb-edit ol { margin: 0 0 12px; padding-left: 22px; } .eb-ph { padding: 30px 12px; text-align: center; font-size: 13px; color: var(--muted); background: repeating-linear-gradient(45deg, #F4F6F1, #F4F6F1 10px, #EEF1EB 10px, #EEF1EB 20px); border-radius: 8px; margin-bottom: 8px; } .eb-btn { display: inline-block; padding: 12px 24px; border-radius: 8px; font-size: 15px; font-weight: 700; } .eb-social { display: inline-block; margin: 3px 4px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; } .eb-spacer { background: repeating-linear-gradient(90deg, transparent, transparent 6px, rgba(157, 176, 164, .15) 6px, rgba(157, 176, 164, .15) 12px); } .eb-cols { display: flex; gap: 0; } .eb-col { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ed-phone { flex: 1; display: flex; justify-content: center; padding: 30px 16px; } .ed-phone__screen { width: 320px; min-height: 520px; background: #E5DDD5; border-radius: 28px; border: 10px solid #1B2A23; padding: 20px 12px; } .ed-phone__bubble { background: #FFFFFF; border-radius: 0 10px 10px 10px; padding: 10px 12px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); } [data-email-part][hidden], [data-wa-part][hidden], [data-both-part][hidden] { display: none !important; } .ed-preview-dialog { width: min(760px, calc(100vw - 32px)); } .ed-preview-dialog .dialog__head { gap: 10px; } .ed-pv { background: #ECEFE9; border-radius: 10px; padding: 12px; display: flex; justify-content: center; } .ed-pv iframe { width: 100%; height: 70vh; border: 0; background: #FFFFFF; border-radius: 8px; transition: width .2s; } .ed-pv.is-mobile iframe { width: 375px; } .ed-review { display: flex; flex-direction: column; gap: 12px; } .ed-reviewbox { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .ed-reviewbox > div { background: var(--soft); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .ed-reviewbox strong { font-size: 18px; } .ed-reviewbox > div[hidden] { display: none; } .ed-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .ed-checks li::before { content: "✓"; display: inline-block; width: 18px; font-weight: 800; color: var(--green); } .ed-checks li.warn::before { content: "!"; color: var(--amber-dark); } .text-green { color: #0B4F33; } @media (max-width: 900px) { .ed { grid-template-columns: 1fr; } .ed-side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); } .ed-top { flex-wrap: wrap; } } .check { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; } .side-card { display: flex; flex-direction: column; gap: 10px; } .side-card .card__head { margin: 0; } .side-card p { margin: 0; } .side-card__big { font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: 1; } .side-card__big small { font-size: 13px; font-weight: 600; color: var(--muted); font-family: inherit; } .dnsrecs { display: flex; flex-direction: column; gap: 6px; } .dnsrec { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; background: var(--soft); border-radius: 8px; padding: 6px 8px; } .dnsrec code { font-size: 11px; overflow-wrap: anywhere; user-select: all; } .tpl-grid--starters { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .kb-cols__side { display: flex; flex-direction: column; gap: 16px; } .ed-pane > [data-email-part], .ed-pane > [data-wa-part], .ed-pane > [data-both-part] { display: flex; flex-direction: column; gap: 12px; } .report-email { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #F4F6F1; } .report-email iframe { display: block; width: 100%; height: 520px; border: 0; } .link-btn { font: inherit; background: none; border: 0; padding: 0; color: var(--green); font-weight: 600; cursor: pointer; text-decoration: none; } .link-btn:hover { text-decoration: underline; } #buy-emails-dialog .packs { margin-top: 12px; } .genbrand__about { flex: 1 1 100% !important; } /* Richer email blocks in the editor canvas */ .eb-it { display: flex; gap: 20px; align-items: center; } .eb-it > div { flex: 1; min-width: 0; } .eb-it--r { flex-direction: row-reverse; } .eb-row { display: flex; gap: 16px; } .eb-row > div { flex: 1; min-width: 0; } .ed-stage.is-mobile .eb-it, .ed-stage.is-mobile .eb-it--r, .ed-stage.is-mobile .eb-row { flex-direction: column; align-items: stretch; } .eb-multi { white-space: pre-line; } .ed-h--sub { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; } .ed-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 10px; } .ed-item__h { font-size: 12px; font-weight: 700; margin-bottom: 6px; } .ed-grid2--icon { grid-template-columns: 70px 1fr; } .eb-btns { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: inherit; } .eb-btns--full { display: flex; } .eb-btns--full .eb-btn { flex: 1; } .ed-toolbar select { font: inherit; font-size: 12px; height: 28px; max-width: 96px; border: 0; border-radius: 6px; background: #2A3F35; color: #FFFFFF; padding: 0 4px; cursor: pointer; } .ed-toolbar select option { background: #FFFFFF; color: #10201A; } .ed-toolbar__color { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px; border-radius: 6px; color: #FFFFFF; font-weight: 700; cursor: pointer; } .ed-toolbar__color:hover { background: #2A3F35; } .ed-toolbar__color span { border-bottom: 3px solid #E11D48; line-height: 1; padding-bottom: 1px; } .ed-toolbar__color input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; } .eb-rich h2 { font-family: var(--hfont); font-size: 24px; line-height: 1.25; margin: 0 0 10px; } .eb-rich h3 { font-family: var(--hfont); font-size: 18px; line-height: 1.3; margin: 0 0 8px; } /* Selected block's settings come first; "Add a block" moves below them. */ .ed-addsec, .ed-selsec { display: flex; flex-direction: column; gap: 12px; } .ed-parts.has-sel .ed-selsec { order: -1; } .ed-parts.has-sel .ed-h--sel { margin-top: 0; padding-top: 0; border-top: 0; } .ed-parts.has-sel .ed-addsec { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); } .ed-tip { background: var(--green-tint); border-radius: 8px; padding: 8px 10px; } .ed-toolbar.is-inline [data-tb="block"], .ed-toolbar.is-inline [data-cmd="insertUnorderedList"], .ed-toolbar.is-inline [data-cmd="insertOrderedList"] { display: none; } .eb-socialicon { display: inline-block; vertical-align: middle; } .starttabs { padding: 0; margin: 6px 0 2px; } .empty-drafts { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .draft__subject { color: var(--ink); } /* Campaigns: the broadcast list full width, emails and sender cards side by side below it. */ .cmp-stack { display: flex; flex-direction: column; gap: 20px; } .cmp-stack__main { display: flex; flex-direction: column; gap: 20px; } .cmp-stack__side { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; } .cmp-stack__side .side-card { margin: 0; } .ed-lists { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; } .ed-lists[hidden] { display: none; } .ed-lists legend { padding: 0 4px; } .ed-lists__all { margin-bottom: 6px; } .ed-lists__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; } /* Campaigns → Subscribers */ .stage--sub { background: #E6F0FB; color: #1F4E79; } .subs-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 14px; } .subs-head .h4 { margin: 0 0 2px; } .subs-head p { margin: 0; } .subs { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: start; } @media (max-width: 860px) { .subs { grid-template-columns: 1fr; } } .subs-lists { padding: 12px; display: flex; flex-direction: column; gap: 2px; } .subs-lists__head { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px 8px; } .subs-lists__empty { padding: 6px 8px 0; margin: 0; } .subs-list { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; } .subs-list span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .subs-list:hover { background: #F4F6F1; } .subs-list.is-active { background: var(--green-tint); font-weight: 600; } .subs-list--muted { color: var(--muted); } .subs-list__n { color: var(--muted); font-size: 13px; font-weight: 500; } .subs-listbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 4px; } .subs-listbar .card__title { margin: 0; } .bulkbar__select { font: inherit; font-size: 13px; min-height: 36px; border-radius: 8px; border: 0; padding: 0 8px; max-width: 180px; } .sub-paste { margin: -4px 0 12px; } .sub-paste summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--green); margin-bottom: 8px; } .sub-newlist { margin-top: 8px; } .sub-consent { margin: 4px 0 2px; font-weight: 600; } fieldset.field { border: 0; padding: 0; margin-inline: 0; min-width: 0; } .composer__alert { margin-top: 8px; padding: 8px 12px; } .nav-badge[hidden] { display: none; } /* WhatsApp connection on the Channels page */ .wahook { display: grid; gap: 8px; margin: 8px 0 10px; } .wahook .field { margin: 0; } .wasteps { background: #F4F6F1; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; } .wasteps summary { cursor: pointer; font-weight: 700; color: var(--green); } .wasteps ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; } .msg__ticks { font-size: 12px; letter-spacing: -2px; color: var(--muted); } .msg__ticks.is-read { color: #34B7F1; } .composer__notice--wa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .watpl__preview { white-space: pre-line; background: #E7FFDB; border-radius: 10px; padding: 10px 12px; font-size: 14px; margin-bottom: 12px; } /* Photos, videos, voice notes and files in chats */ .msg__media { margin-bottom: 4px; } .msg__media img { display: block; max-width: 260px; max-height: 320px; border-radius: 10px; object-fit: cover; } .msg__media video { display: block; max-width: 280px; max-height: 320px; border-radius: 10px; } .msg__media audio { display: block; width: 240px; max-width: 100%; } .msg__file { display: inline-flex; gap: 6px; align-items: center; padding: 8px 12px; border-radius: 10px; background: rgba(0, 0, 0, .05); color: inherit; text-decoration: none; font-weight: 600; font-size: 14px; } .msg__file span { font-weight: 400; font-size: 12px; opacity: .7; } /* WhatsApp templates page */ .watpl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; } @media (max-width: 1000px) { .watpl { grid-template-columns: 1fr; } } .watpl__item { padding: 14px 18px; border-top: 1px solid var(--line); } .watpl__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 8px; } .watpl__del { margin-left: auto; } .watpl__bubble { background: #E7FFDB; border-radius: 0 12px 12px 12px; padding: 10px 12px; font-size: 14px; line-height: 1.5; white-space: pre-line; max-width: 420px; color: #10201A; } .watpl__bubble strong { display: block; margin-bottom: 4px; } .watpl__bubble mark { background: #CFF5BA; border-radius: 4px; padding: 0 2px; } .watpl__footer { color: #667781; font-size: 12px; margin-top: 6px; } .watpl__btns { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .watpl__btns span { background: #FFFFFF; border-radius: 8px; padding: 6px; text-align: center; color: #0B7FD1; font-weight: 600; font-size: 13px; } .watpl__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; } .watpl__btnrow { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 8px; margin-bottom: 8px; } .watpl__btnrow [hidden] { display: none; } .watpl__preview-wrap { background: #ECE5DD; border-radius: 12px; padding: 12px; margin: 6px 0 14px; } .choice span:has(small) { flex-direction: column; gap: 2px; padding: 8px 10px; text-align: center; line-height: 1.3; } .choice small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; } /* Instagram comment campaigns */ .igc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .igc-head p { margin: 0; max-width: 720px; } .igc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; margin-bottom: 16px; } .igc { display: flex; flex-direction: column; gap: 12px; } .igc__top { display: flex; gap: 12px; align-items: flex-start; } .igc__thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--pink-tint); display: grid; place-items: center; color: var(--pink-dark); font-weight: 700; font-size: 13px; } .igc__thumb img { width: 100%; height: 100%; object-fit: cover; } .igc__main { min-width: 0; flex: 1; } .igc__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .igc__title .h4 { margin: 0; } .igc__where { margin: 2px 0 6px; overflow-wrap: anywhere; } .igc__keys { display: flex; flex-wrap: wrap; gap: 6px; } .igc__dm { margin: 0; padding: 10px 12px; background: #F4F6F2; border-radius: 12px; font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; } .igc__hits summary { cursor: pointer; font-weight: 600; font-size: 13px; } .igc__hits ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; } .igc__hits li { font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; } .igc-pick { border: 0; padding: 0; margin: 0; min-width: 0; } .igc-pick legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; padding: 0; } .igc-pick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; padding: 2px; } .igc-post { display: flex; flex-direction: column; gap: 4px; padding: 0; background: none; border: 2px solid transparent; border-radius: 10px; cursor: pointer; text-align: left; font: inherit; color: inherit; } .igc-post__img { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--pink-tint); color: var(--pink-dark); font-weight: 700; font-size: 13px; } .igc-post__img img { width: 100%; height: 100%; object-fit: cover; } .igc-post__type { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 600; } .igc-post__img > span:only-child { position: static; background: none; color: inherit; font-size: 13px; } .igc-post__cap { font-size: 12px; line-height: 1.3; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0 4px 4px; } .igc-post.is-picked { border-color: var(--green); background: var(--green-tint); } .igc-post:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; } @media (max-width: 720px) { .igc-head { flex-direction: column; align-items: stretch; } .igc-list { grid-template-columns: 1fr; } } .nowrap { white-space: nowrap; } .stage + .stage { margin-left: 4px; } .sub-toggle .check { font-weight: 500; }