#smart-customer{--page: #eef1ee; --surface: #ffffff; --surface-soft: #f6f8f6; --ink: #1f2823; --muted: #66716a; --line: #dce3de; --brand: #2f5d4c; --brand-soft: #e6f0ea; --blue: #315f84; --blue-soft: #e9f1f7; --amber: #8b641f; --amber-soft: #fbf3df; --red: #9b4638; --red-soft: #f9ebe7; --shadow: 0 8px 22px rgba(31, 40, 35, .06);}
#smart-customer *{box-sizing: border-box;}

#smart-customer{margin: 0px; background: var(--page); color: var(--ink); font: 14px / 1.58 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;}
#smart-customer button, #smart-customer input, #smart-customer textarea, #smart-customer a{font: inherit;}
#smart-customer button, #smart-customer a{-webkit-tap-highlight-color: transparent;}
#smart-customer button{cursor: pointer;}
#smart-customer a{color: inherit;}
#smart-customer button:focus-visible, #smart-customer a:focus-visible, #smart-customer textarea:focus-visible, #smart-customer input:focus-visible{outline: rgb(140, 183, 164) solid 3px; outline-offset: 2px;}
#smart-customer [hidden]{display: none !important;}


#smart-customer .eyebrow{color: var(--brand); font-size: 12px; font-weight: 700;}















#smart-customer .appbar{min-height: 58px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 9px 16px 12px;}
#smart-customer .appbar > div{min-width: 0px; flex: 1 1 0%;}
#smart-customer .appbar h3{margin: 0px; font-size: 16px; line-height: 1.35; letter-spacing: 0px;}
#smart-customer .appbar small{display: block; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap;}
#smart-customer .back{width: 44px; height: 44px; display: inline-grid; flex: 0 0 44px; place-items: center; border: 0px; background: transparent; color: var(--ink); text-decoration: none; font-size: 25px; line-height: 1;}
#smart-customer .phone-body{min-height: 0px; flex: 1 1 0%; overflow-y: auto; padding: 18px; scrollbar-width: thin;}
#smart-customer .phone-actions{border-top: 1px solid var(--line); padding: 14px 18px 17px; background: var(--surface);}
#smart-customer .phone-actions .hint{margin: 7px 0px 0px; text-align: center;}
#smart-customer h3, #smart-customer h4, #smart-customer p{margin-top: 0px;}
#smart-customer .title{margin: 0px; font-size: 19px; line-height: 1.4; letter-spacing: 0px;}
#smart-customer .lead{margin: 6px 0px 0px; color: var(--muted); font-size: 12px;}
#smart-customer .section-label{margin: 20px 0px 8px; color: var(--muted); font-size: 11px; font-weight: 700;}
#smart-customer .hint{color: var(--muted); font-size: 11px;}
#smart-customer .error-text{min-height: 18px; margin: 7px 0px 0px; color: var(--red); font-size: 11px;}
#smart-customer .status-line{display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
#smart-customer .status-dot{width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: rgb(79, 133, 107);}
#smart-customer .status-dot.amber{background: rgb(180, 132, 41);}
#smart-customer .status-dot.red{background: rgb(181, 90, 72);}
#smart-customer .hero{display: flex; align-items: center; gap: 12px;}
#smart-customer .agent-mark{width: 48px; height: 48px; display: grid; flex: 0 0 48px; place-items: center; border-radius: 8px; background: var(--brand-soft); color: var(--brand); font-size: 21px; font-weight: 800;}
#smart-customer .hero .title{font-size: 20px;}
#smart-customer .tag{display: inline-flex; min-height: 24px; align-items: center; border-radius: 6px; background: var(--surface-soft); color: rgb(89, 101, 94); padding: 3px 7px; font-size: 10px; font-weight: 700;}
#smart-customer .tag.green{background: var(--brand-soft); color: var(--brand);}
#smart-customer .tag.blue{background: var(--blue-soft); color: var(--blue);}
#smart-customer .tag.amber{background: var(--amber-soft); color: var(--amber);}
#smart-customer .tag.red{background: var(--red-soft); color: var(--red);}
#smart-customer .tag + .tag{margin-left: 4px;}
#smart-customer .plain-group{border-top: 1px solid var(--line);}
#smart-customer .plain-row{min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 10px 0px;}
#smart-customer .plain-row > div:first-child{min-width: 0px; flex: 1 1 0%;}
#smart-customer .plain-row strong{display: block; font-size: 13px;}
#smart-customer .plain-row small{display: block; color: var(--muted); font-size: 10px;}
#smart-customer .plain-row .right{flex: 0 0 auto; text-align: right;}
#smart-customer .skill-block{border-bottom: 1px solid var(--line); padding: 10px 0px;}
#smart-customer .skill-block:last-child{border-bottom: 0px;}
#smart-customer .skill-block strong{display: block; margin-bottom: 3px; font-size: 12px;}
#smart-customer .skill-block p{margin: 0px; color: rgb(86, 98, 91); font-size: 11px;}
#smart-customer .channel-row{display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); padding: 13px 0px;}
#smart-customer .channel-row:last-child{border-bottom: 0px;}
#smart-customer .channel-mark{width: 34px; height: 34px; display: grid; flex: 0 0 34px; place-items: center; border-radius: 8px; background: rgb(237, 241, 239); font-weight: 800;}
#smart-customer .channel-main{min-width: 0px; flex: 1 1 0%;}
#smart-customer .channel-main strong{display: block; font-size: 13px;}
#smart-customer .channel-main small{display: block; color: var(--muted); font-size: 10px;}
#smart-customer .channel-row input{width: 20px; height: 20px; accent-color: var(--brand);}
#smart-customer .switch-row{display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 0px;}
#smart-customer .switch-row strong{display: block; font-size: 13px;}
#smart-customer .switch-row small{display: block; max-width: 240px; color: var(--muted); font-size: 10px;}
#smart-customer .switch{width: 52px; height: 44px; position: relative; flex: 0 0 52px; border: 0px; border-radius: 8px; background: transparent; padding: 0px;}
#smart-customer .switch::before{content: ""; width: 48px; height: 28px; position: absolute; top: 8px; left: 2px; border-radius: 14px; background: rgb(185, 194, 188);}
#smart-customer .switch::after{content: ""; width: 22px; height: 22px; position: absolute; top: 11px; left: 5px; border-radius: 50%; background: white; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px; transition: transform 0.18s;}
#smart-customer .switch[aria-checked="true"]::before{background: var(--brand);}
#smart-customer .switch[aria-checked="true"]::after{transform: translateX(20px);}
#smart-customer .notice{border-left: 3px solid var(--blue); background: var(--blue-soft); padding: 11px 12px;}
#smart-customer .notice.amber{border-left-color: var(--amber); background: var(--amber-soft);}
#smart-customer .notice.red{border-left-color: var(--red); background: var(--red-soft);}
#smart-customer .notice.green{border-left-color: var(--brand); background: var(--brand-soft);}
#smart-customer .notice strong{display: block; font-size: 12px;}
#smart-customer .notice p{margin: 3px 0px 0px; color: rgb(83, 97, 90); font-size: 11px;}
#smart-customer .segmented{display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 3px; margin: 14px 0px; border-radius: 8px; background: rgb(237, 241, 238); padding: 3px;}
#smart-customer .segmented button{min-height: 44px; border: 0px; border-radius: 6px; background: transparent; color: var(--muted); padding: 6px 3px; font-size: 11px;}
#smart-customer .segmented button.active{background: white; color: var(--ink); box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 3px; font-weight: 700;}
#smart-customer .record-list{border-top: 1px solid var(--line);}
#smart-customer .record{display: block; border-bottom: 1px solid var(--line); padding: 13px 2px; text-decoration: none;}
#smart-customer .record-top{display: flex; align-items: center; justify-content: space-between; gap: 10px;}
#smart-customer .record strong{min-width: 0px; overflow-wrap: anywhere; font-size: 12px;}
#smart-customer .record p{margin: 5px 0px 3px; color: rgb(78, 89, 83); font-size: 11px;}
#smart-customer .record small{color: var(--muted); font-size: 10px;}
#smart-customer .empty{padding: 36px 8px; text-align: center;}
#smart-customer .empty strong{display: block; font-size: 15px;}
#smart-customer .empty p{margin: 5px auto 0px; max-width: 230px; color: var(--muted); font-size: 11px;}
#smart-customer .context-head{display: flex; align-items: center; gap: 10px;}
#smart-customer .avatar{width: 34px; height: 34px; display: grid; flex: 0 0 34px; place-items: center; border-radius: 50%; background: rgb(236, 239, 235); color: rgb(78, 91, 83); font-weight: 800;}
#smart-customer .context-head strong{display: block; font-size: 12px;}
#smart-customer .context-head small{display: block; color: var(--muted); font-size: 10px;}
#smart-customer .post-quote{margin: 13px 0px 0px; border-left: 2px solid rgb(183, 193, 186); padding: 7px 0px 7px 11px; color: rgb(84, 96, 89); font-size: 11px;}
#smart-customer .bubble{max-width: 90%; margin-top: 10px; border-radius: 8px; background: rgb(240, 243, 241); padding: 10px 12px; font-size: 12px;}
#smart-customer .bubble.reply{margin-left: auto; background: var(--brand-soft);}
#smart-customer .bubble small{display: block; margin-bottom: 3px; color: var(--muted); font-size: 9px;}
#smart-customer .evidence{margin: 12px 0px 0px; padding-left: 13px; border-left: 1px solid rgb(207, 216, 209);}
#smart-customer .evidence li{position: relative; list-style: none; padding: 0px 0px 11px 6px; font-size: 11px;}
#smart-customer .evidence li::before{content: ""; width: 6px; height: 6px; position: absolute; top: 5px; left: -17px; border-radius: 50%; background: rgb(100, 132, 111);}
#smart-customer .evidence small{display: block; color: var(--muted); font-size: 9px;}
#smart-customer .reason-list{margin: 8px 0px 0px; padding: 0px;}
#smart-customer .reason-list li{position: relative; list-style: none; padding: 7px 0px 7px 18px; border-bottom: 1px solid var(--line); font-size: 11px;}
#smart-customer .reason-list li::before{content: "•"; position: absolute; left: 4px; color: var(--amber);}
#smart-customer .editor-label{display: flex; justify-content: space-between; gap: 10px; margin: 18px 0px 7px; font-size: 11px; font-weight: 700;}
#smart-customer textarea{width: 100%; min-height: 118px; resize: vertical; border: 1px solid rgb(174, 187, 178); border-radius: 8px; background: white; color: var(--ink); padding: 11px; line-height: 1.55;}
#smart-customer .data-list{border-top: 1px solid var(--line);}
#smart-customer .data-row{display: grid; grid-template-columns: 82px minmax(0px, 1fr); gap: 12px; border-bottom: 1px solid var(--line); padding: 10px 0px;}
#smart-customer .data-row dt{color: var(--muted); font-size: 10px;}
#smart-customer .data-row dd{margin: 0px; overflow-wrap: anywhere; text-align: right; font-size: 11px; font-weight: 600;}
#smart-customer .text-link{display: inline-flex; min-height: 44px; align-items: center; color: var(--brand); font-size: 12px; font-weight: 700; text-decoration: none;}
#smart-customer .text-link::after{content: "›"; margin-left: 5px; font-size: 18px;}
#smart-customer .btn{width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgb(174, 187, 178); border-radius: 8px; background: white; color: var(--brand); padding: 9px 13px; text-align: center; text-decoration: none; font-size: 13px; font-weight: 700;}
#smart-customer .btn.primary{border-color: var(--brand); background: var(--brand); color: white;}
#smart-customer .btn.danger{border-color: rgb(201, 154, 141); color: var(--red);}
#smart-customer .btn:disabled{cursor: default; opacity: 0.52;}
#smart-customer .btn + .btn{margin-top: 8px;}







@media (max-width: 1100px) {
}
@media (max-width: 650px) {






#smart-customer .phone-body{padding: 16px;}
#smart-customer .phone-actions{padding: 13px 16px 15px;}
}
@media (max-width: 350px) {

#smart-customer .phone-body{padding: 14px;}
#smart-customer .appbar{padding-left: 10px; padding-right: 12px;}
#smart-customer .data-row{grid-template-columns: 68px minmax(0px, 1fr); gap: 8px;}
#smart-customer .segmented button{font-size: 10px;}}
@media (prefers-reduced-motion: reduce) {
#smart-customer .switch::after{transition: none;}}
#smart-customer{--touch: 48px;}









#smart-customer .phone-body{padding: 20px; scrollbar-gutter: stable;}
#smart-customer .phone-body:focus{outline: none;}
#smart-customer .appbar{min-height: 70px; padding: 8px 12px;}
#smart-customer .appbar h3{font-size: 17px;}
#smart-customer .appbar small, #smart-customer .hint{font-size: 12px;}
#smart-customer .back{width: 48px; height: 48px; flex-basis: 48px;}
#smart-customer .back svg{width: 22px; height: 22px;}
#smart-customer .btn, #smart-customer .text-link{min-height: 48px;}
#smart-customer .btn{border-radius: 8px; font-size: 14px;}
#smart-customer .btn:disabled{opacity: 1; background: rgb(227, 231, 228); color: rgb(117, 128, 121); border-color: rgb(227, 231, 228);}
#smart-customer button:not(:disabled):active, #smart-customer a:active{filter: brightness(0.95);}
#smart-customer button:hover:not(:disabled), #smart-customer a:hover{filter: brightness(0.97);}
#smart-customer .plain-row{min-height: 68px; gap: 10px;}
#smart-customer .plain-row strong, #smart-customer .channel-main strong{font-size: 14px;}
#smart-customer .plain-row small, #smart-customer .channel-main small{font-size: 12px; line-height: 1.55;}
#smart-customer .plain-row .right{font-size: 12px;}
#smart-customer .plain-row.link-row{width: 100%; border-top: 0px; border-left: 0px; border-right: 0px; background: transparent; color: var(--ink); text-align: left; font-weight: 400;}
#smart-customer .chevron{font-size: 24px; color: rgb(117, 132, 123);}
#smart-customer .section-label{font-size: 12px; margin: 24px 0px 8px; letter-spacing: 0.03em;}
#smart-customer .lead{font-size: 13px; line-height: 1.7;}
#smart-customer .tag{font-size: 11px; border-radius: 6px; white-space: nowrap;}
#smart-customer .hero{align-items: flex-start;}
#smart-customer .agent-mark{width: 48px; height: 48px; flex-basis: 48px;}
#smart-customer .agent-mark svg{width: 26px; height: 26px;}
#smart-customer .hero .title{font-size: 22px; line-height: 1.35; margin-bottom: 4px;}
#smart-customer .status-panel{padding: 18px; margin: 20px 0px; background: var(--brand-soft); border-radius: 10px;}
#smart-customer .phone-body > .status-panel:first-child{margin-top: 0px;}
#smart-customer .status-panel.neutral{background: var(--surface-soft);}
#smart-customer .status-panel.amber{background: var(--amber-soft);}
#smart-customer .status-panel h4{margin: 0px 0px 6px; font-size: 18px;}
#smart-customer .status-panel p{margin: 0px; font-size: 13px; line-height: 1.7; color: rgb(83, 97, 90);}
#smart-customer .status-panel .status-line{margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--brand);}
#smart-customer .status-panel.amber .status-line{color: var(--amber);}
#smart-customer .notice{margin: 16px 0px 0px; padding: 12px;}
#smart-customer .notice strong{font-size: 13px;}
#smart-customer .notice p{font-size: 12px; line-height: 1.7;}
#smart-customer .phone-actions{padding: 14px 20px 18px;}
#smart-customer .phone-actions .hint{font-size: 11px;}
#smart-customer .skill-block strong{font-size: 13px;}
#smart-customer .skill-block p{font-size: 12px; line-height: 1.8;}
#smart-customer .skill-summary{min-height: 48px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none;}
#smart-customer .skill-summary::-webkit-details-marker{display: none;}
#smart-customer .skill-summary::after{content: "＋"; font-weight: 400; color: var(--muted);}
#smart-customer details[open] > .skill-summary::after{content: "−";}
#smart-customer details{margin-top: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}
#smart-customer .empty{padding: 24px 6px;}
#smart-customer .empty .agent-mark{margin: 0px auto 16px; width: 60px; height: 60px;}
#smart-customer .empty strong{font-size: 17px;}
#smart-customer .empty p{font-size: 13px; max-width: 270px; line-height: 1.8;}
#smart-customer .file-row{display: flex; gap: 12px; padding: 16px 0px; border-bottom: 1px solid var(--line);}
#smart-customer .file-icon{background: var(--brand-soft); color: var(--brand); border-radius: 6px; width: 38px; height: 44px; flex: 0 0 38px; display: grid; place-items: center; font-size: 12px; font-weight: 700;}
#smart-customer .file-copy{min-width: 0px; flex: 1 1 0%;}
#smart-customer .file-copy strong{display: block; font-size: 14px; overflow-wrap: anywhere;}
#smart-customer .file-copy small{display: block; font-size: 11px; color: var(--muted); margin: 4px 0px 8px;}
#smart-customer .file-actions{display: flex; gap: 16px;}
#smart-customer .file-actions button, #smart-customer .inline-button{min-height: 48px; padding: 4px 0px; border: 0px; background: transparent; color: var(--brand); font-size: 12px;}
#smart-customer .file-actions button{min-width: 48px;}
#smart-customer .file-actions .delete{color: var(--red);}
#smart-customer .section-head{display: flex; align-items: center; justify-content: space-between; gap: 8px;}
#smart-customer .section-head h4{margin: 20px 0px 10px; font-size: 15px;}
#smart-customer .employee{display: flex; gap: 12px; padding: 18px 0px; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 1px solid var(--line); background: transparent; width: 100%; text-align: left; color: var(--ink); align-items: center;}
#smart-customer .employee > div{min-width: 0px; flex: 1 1 0%;}
#smart-customer .employee strong{display: block; font-size: 15px;}
#smart-customer .employee small{display: block; font-size: 12px; color: var(--muted); line-height: 1.65; margin-top: 5px;}
#smart-customer .employee.selected .agent-mark{background: var(--brand); color: white;}
#smart-customer .employee:disabled{cursor: default;}
#smart-customer .records-button{width: 100%; text-align: left; background: transparent; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 1px solid var(--line); padding: 16px 0px; color: var(--ink);}
#smart-customer .records-button .record-top{align-items: flex-start;}
#smart-customer .records-button strong{font-size: 14px;}
#smart-customer .records-button p{font-size: 13px; margin: 8px 0px; color: rgb(78, 89, 83); line-height: 1.7;}
#smart-customer .records-button small{font-size: 11px; color: var(--muted);}
#smart-customer .filter{display: flex; align-items: center; gap: 10px; margin: 16px 0px;}
#smart-customer .filter label{font-size: 12px; color: var(--muted);}
#smart-customer .filter select{min-height: 48px; flex: 1 1 0%; min-width: 0px; padding: 8px 12px; border: 1px solid rgb(174, 187, 178); border-radius: 8px; background: white; color: var(--ink); font: inherit;}
#smart-customer .channel-row{min-height: 76px;}
#smart-customer .channel-mark{width: 36px; height: 36px; flex-basis: 36px;}
#smart-customer .channel-row input{width: 22px; height: 22px;}
#smart-customer .check-note{display: flex; gap: 12px; align-items: flex-start; font-size: 13px; margin: 18px 0px; line-height: 1.7;}
#smart-customer .check-note svg{width: 20px; height: 20px; flex: 0 0 20px; color: var(--brand); margin-top: 2px;}
#smart-customer .error-text{font-size: 13px; min-height: 0px;}
#smart-customer .error-text:empty{display: none;}
#smart-customer .progress{height: 6px; border-radius: 4px; background: rgb(220, 230, 223); margin: 20px 0px; overflow: hidden;}
#smart-customer .progress span{height: 100%; display: block; background: var(--brand); transition: width 0.25s;}
#smart-customer .progress-steps{list-style: none; padding: 0px; margin: 0px;}
#smart-customer .progress-steps li{display: flex; justify-content: space-between; gap: 12px; padding: 16px 0px; border-bottom: 1px solid var(--line); font-size: 13px;}
#smart-customer .progress-steps small{color: var(--muted); font-size: 12px;}
#smart-customer .data-row{grid-template-columns: 76px minmax(0px, 1fr);}
#smart-customer .data-row dt, #smart-customer .data-row dd{font-size: 12px;}
#smart-customer .bubble{font-size: 13px; line-height: 1.75;}
#smart-customer .bubble small{font-size: 11px;}




#smart-customer .small-note{color: var(--muted); font-size: 12px; line-height: 1.8; margin-top: 16px;}



@media (max-width: 650px) {

#smart-customer .phone-body{padding: 18px;}
#smart-customer .phone-actions{padding: 14px 18px 18px;}


}
@media (max-width: 350px) {#smart-customer .phone-body{padding: 14px;}
#smart-customer .phone-actions{padding: 12px 14px 16px;}
#smart-customer .status-panel{padding: 14px;}
#smart-customer .appbar{padding-left: 4px;}
#smart-customer .appbar small{font-size: 11px;}
#smart-customer .hero .title{font-size: 20px;}}
@media (prefers-reduced-motion: reduce) {#smart-customer .progress span{transition: none;}}
#smart-customer{height:100vh;height:100dvh;max-width:540px;margin:auto;display:flex;flex-direction:column;background:var(--surface);color:var(--ink);font:14px/1.58 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;}
#smart-customer .phone-body{overflow-wrap:anywhere;}
#smart-customer .phone-actions{flex-shrink:0;padding-bottom:max(18px,env(safe-area-inset-bottom));} #smart-customer .appbar{flex-shrink:0;}
#smart-customer .mt20{margin-top:20px;}#smart-customer .mt14{margin-top:14px;}#smart-customer button{font-family:inherit;letter-spacing:normal;}#smart-customer .channel-row input{accent-color:var(--brand);}#smart-customer .file-actions button{width:auto;}
#smart-customer .file-icon{white-space:nowrap;overflow-wrap:normal;}
#smart-customer .filter label{flex:0 0 auto;white-space:nowrap;}
#smart-customer .filter .select-trigger{min-height:48px;flex:1;min-width:0;width:auto;padding:8px 12px;border:1px solid #aebbb2;border-radius:8px;background:white;color:var(--ink);font:inherit;}