.inbox-demo{--demo-ink:#24342e;--demo-muted:#62746b;--demo-line:#e0e7e1;background:#fff;color:var(--demo-ink);font-size:13px;line-height:1.5;text-align:left;color-scheme:light}
.inbox-demo *{box-sizing:border-box}
.inbox-demo button,.inbox-demo input,.inbox-demo textarea,.inbox-demo select{font:inherit;letter-spacing:normal}
.inbox-demo button{cursor:pointer}
.inbox-demo button:focus-visible,.inbox-demo input:focus-visible,.inbox-demo textarea:focus-visible,.inbox-demo select:focus-visible{outline:2px solid #247a65;outline-offset:2px}
.demo-topbar{height:54px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--demo-line);background:#fff}
.demo-brand{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;white-space:nowrap}
.demo-brand img{width:22px;height:22px;object-fit:contain}
.demo-badge{margin-left:auto;padding:4px 7px;border-radius:4px;background:#eff5ef;color:#46654f;font-size:10px;font-weight:600;white-space:nowrap}
.demo-reset{border:0;background:none;color:#62746b;padding:6px;display:flex;align-items:center;border-radius:4px}
.demo-reset:hover{background:#eef3ee;color:#163e30}
.demo-workspace{display:grid;grid-template-columns:36% minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:434px}
.demo-inbox{display:flex;flex-direction:column;border-right:1px solid var(--demo-line);min-width:0;min-height:0;background:#fff;padding-top:15px}
.demo-inbox-heading{display:flex;align-items:center;gap:8px;padding:0 14px 12px;font-size:15px}
.demo-inbox-heading>span{font-size:10px;background:#e9f0ea;color:#3c5c47;padding:1px 6px;border-radius:20px}
.demo-search{display:flex;align-items:center;gap:6px;margin:0 12px 10px;padding:7px 8px;border-radius:5px;background:#f3f6f3;color:#77877e}
.demo-search input{width:100%;min-width:0;border:0;background:transparent;padding:0;outline:none;color:var(--demo-ink);font-size:11px}
.demo-search input::placeholder{color:#6c7e73;opacity:1}
.demo-filters{display:flex;gap:5px;padding:0 12px 12px;border-bottom:1px solid var(--demo-line)}
.demo-filters button{height:30px;min-width:31px;padding:5px 7px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e5ebe6;border-radius:5px;color:#4c6355;font-size:11px}
.demo-filters button[aria-pressed="true"]{background:#e0f0e7;border-color:#8cb8a2;color:#214a36}
.demo-filters img{width:16px;height:16px;object-fit:contain}
.demo-conversations{flex:1;min-height:0;overflow-y:auto}
.demo-contact{width:100%;display:flex;align-items:flex-start;gap:9px;text-align:left;padding:15px 12px;background:#fff;color:var(--demo-ink);border:0;border-bottom:1px solid #edf0ec;border-radius:0}
.demo-contact:hover{background:#f5f8f4}
.demo-contact[aria-pressed="true"]{background:#e9f3ec;box-shadow:inset 3px 0 #43795b}
.demo-avatar{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:31px;height:31px;border-radius:50%;font-size:12px;font-weight:600;color:#355840}
.avatar-sage{background:#d5e9d6}.avatar-sand{background:#f1e4cf;color:#79633e}.avatar-blue{background:#dfebee;color:#45717a}
.demo-contact-text{display:flex;flex-direction:column;min-width:0;gap:3px}
.demo-contact-text strong{font-size:12px;font-weight:700}
.demo-contact-text>span{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#586b5f;max-width:100%}
.demo-contact-text small{font-size:9px;color:#587860}
.inbox-demo .demo-data-label{font-size:9px;line-height:1.5;color:#617669;margin:auto 12px 12px;padding-top:16px}
.inbox-demo .demo-empty{margin:20px 12px;font-size:12px;color:#62746b}
.demo-chat{display:flex;flex-direction:column;min-width:0;min-height:0;background:#f1f5f0}
.demo-chat[hidden],.inbox-demo [hidden]{display:none!important}
.demo-chat-header{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:66px;padding:10px 13px;background:#fff;border-bottom:1px solid var(--demo-line)}
.demo-current{display:flex;align-items:center;gap:8px;min-width:0}
.demo-current>div{min-width:0}
.demo-current strong{display:block;font-size:13px}
.demo-current>div>span{display:block;font-size:9px;color:#617467;white-space:nowrap}
.demo-owner{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.demo-owner>span{font-size:8px;color:#65796c}
.demo-owner select{max-width:104px;border:0;background:#f0f5f0;border-radius:4px;color:#42634d;font-size:10px;padding:3px 4px}
.demo-messages{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;scrollbar-width:thin;scrollbar-color:#becfc1 transparent}
.demo-day{display:block;width:100%;text-align:center;font-size:9px;color:#708276;margin-bottom:2px}
.demo-message{max-width:91%;padding:9px 11px 6px;border-radius:8px 8px 8px 2px;background:#fff;box-shadow:0 1px 1px #203c1d08;font-size:11px;line-height:1.6;flex-shrink:0;overflow-wrap:anywhere}
.demo-message.outgoing{align-self:flex-end;border-radius:8px 8px 2px 8px;background:#d8ecdf}
.demo-message.note{background:#fbefd5;border:1px solid #e9d6ad;width:100%;max-width:100%;color:#705b31;border-radius:6px}
.inbox-demo .demo-message p{font-size:inherit;line-height:inherit;color:inherit;margin:0}
.demo-message strong{display:block;font-size:9px;margin-bottom:4px}
.demo-message small{display:block;font-size:8px;color:#65776a;text-align:right;margin-top:3px}
.demo-composer{margin:0;background:#fff;padding:10px 12px 12px;border-top:1px solid var(--demo-line);position:relative}
.demo-compose-modes{display:flex;gap:10px;margin-bottom:8px;padding-right:4px}
.demo-compose-modes button{display:flex;align-items:center;gap:4px;border:0;background:none;color:#627669;font-size:10px;padding:3px 0;border-bottom:1px solid transparent;border-radius:0}
.demo-compose-modes button[aria-pressed="true"]{color:#275e43;border-bottom-color:#4d8666;font-weight:600}
.demo-suggestion{position:absolute;right:12px;top:12px;background:none;border:0;padding:0;color:#36664d;font-size:9px!important;text-decoration:underline;text-underline-offset:3px}
.demo-input-row{display:flex;align-items:flex-end;gap:7px}
.demo-input-row textarea{display:block;min-width:0;flex:1;resize:none;border:1px solid #cbd9ce;background:#fafcf9;color:#283d2d;border-radius:5px;min-height:51px;max-height:110px;padding:8px 9px;font-size:11px;line-height:1.5}
.demo-input-row textarea::placeholder{color:#708575;opacity:1}
.demo-send{display:flex;align-items:center;justify-content:center;width:35px;height:35px;border:0;border-radius:5px;background:#256847;color:#fff;flex-shrink:0}
.demo-send:disabled{background:#e5ede7;color:#93a397;cursor:default}
.is-note .demo-input-row textarea{background:#fffbef;border-color:#dcc797}
.demo-caption{min-height:43px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--demo-line);padding:10px 14px;background:#fff;color:#54705b;font-size:10px}
.demo-caption button{display:flex;align-items:center;gap:5px;background:none;border:0;padding:0;color:#2b6346;font-size:10px;white-space:nowrap}
@media(min-width:1101px){.simple-hero{grid-template-columns:.8fr 1.35fr;gap:44px}}
@media(min-width:901px) and (max-height:800px){.simple-hero{padding-top:32px;padding-bottom:44px;min-height:0}.demo-workspace{height:370px}.demo-topbar{height:48px}.demo-caption{min-height:38px}.demo-chat-header{min-height:60px}.demo-messages{gap:8px;padding:10px}.demo-message{padding:7px 10px 5px}}
@media(max-width:1100px) and (min-width:901px){.simple-hero{grid-template-columns:.7fr 1.3fr;gap:26px}.simple-hero h1{font-size:48px}.demo-workspace{grid-template-columns:33% minmax(0,1fr)}.demo-avatar{width:26px;height:26px}.demo-contact{padding:14px 9px;gap:7px}.demo-badge{font-size:9px}.demo-topbar{padding:0 12px}.demo-owner>span{display:none}}
@media(min-width:901px){.simple-features{padding:46px 0 52px}.simple-features .simple-section-heading{margin-bottom:28px;align-items:center}.simple-features h2{font-size:clamp(32px,3vw,44px)}.simple-features h2 br{display:none}.simple-feature-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:25px}.simple-caption{margin:16px 0 8px}.simple-caption h3{font-size:clamp(18px,1.6vw,23px);line-height:1.25}.simple-feature p{font-size:15px;line-height:1.65}.simple-feature-image img{object-position:center}}
@media(min-width:651px) and (max-width:900px){.simple-features{padding:36px 0 40px}.simple-features .simple-section-heading{margin-bottom:24px}.simple-features h2{font-size:34px}.simple-features h2 br{display:none}.simple-feature-grid{gap:24px}.simple-feature-image{height:130px;aspect-ratio:auto}.simple-caption{margin:14px 0 7px}.simple-caption h3{font-size:22px}.simple-feature p{font-size:15px;line-height:1.6}}
@media(max-width:650px){.demo-topbar{height:46px;padding:0 11px;gap:8px}.demo-brand{font-size:12px}.demo-badge{font-size:8px;padding:3px 5px}.demo-reset{padding:4px}.demo-workspace{height:472px;grid-template-columns:74px minmax(0,1fr)}.demo-inbox{padding-top:12px}.demo-inbox-heading{padding:0 10px 10px;font-size:12px;gap:6px}.demo-inbox-heading>span{font-size:8px;padding:0 4px}.demo-search{display:none}.demo-filters{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;padding:0 8px 10px}.demo-filters button{min-width:0;width:26px;height:27px;padding:5px;font-size:10px}.demo-filters img{width:14px;height:14px}.demo-contact{display:flex;flex-direction:column;align-items:center;gap:6px;padding:13px 4px}.demo-contact-text{gap:0;text-align:center}.demo-contact-text strong{font-size:9px}.demo-contact-text>span,.demo-contact-text small,.demo-data-label{display:none}.demo-avatar{width:28px;height:28px}.demo-chat-header{padding:9px;gap:6px;flex-wrap:wrap;min-height:75px}.demo-current{gap:6px}.demo-current strong{font-size:12px}.demo-current>div>span{font-size:8px}.demo-owner{flex-direction:row;align-items:center;gap:6px;padding-left:34px}.demo-owner>span{font-size:8px}.demo-owner select{font-size:9px}.demo-messages{padding:10px;gap:10px}.demo-message{max-width:96%;font-size:11px;padding:8px 9px 5px}.demo-composer{padding:9px}.demo-compose-modes{gap:12px;margin-bottom:29px}.demo-suggestion{right:auto;left:9px;top:36px;font-size:9px!important}.demo-input-row{gap:5px}.demo-input-row textarea{font-size:16px;line-height:1.4;padding:7px;min-height:59px}.demo-send{width:30px;height:33px}.demo-caption{padding:9px 10px;font-size:9px;align-items:flex-start;gap:12px}.demo-caption button{font-size:9px}.demo-empty{font-size:9px!important;margin:16px 8px!important}.simple-features{padding:36px 0 40px}.simple-features .simple-section-heading{margin-bottom:20px}.simple-features h2{font-size:31px}.simple-features h2 br{display:none}.simple-features .simple-section-heading .simple-link{font-size:13px;margin-top:10px}.simple-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.simple-caption{margin:12px 0 6px}.simple-caption h3{font-size:18px;line-height:1.3}.simple-feature p{font-size:14px;line-height:1.6}}