/* Reference: lesson 3, pages 6–11. Calm message cards inside the existing host. */
:root{--orange:#347c9a;--ink:#26313b;--muted:#788591;--line:#e6eaf0}
body{font-size:14px}.shell{grid-template-columns:64px 260px minmax(0,1fr)}
#rail{gap:15px;background:#f4f6f8}#rail button{width:58px;font-size:12px;gap:5px}#rail img{width:23px;height:23px}
.conversations>header{height:57px;padding:12px 16px}.inboxfilters{padding:6px 12px 12px;display:flex;flex-wrap:wrap;gap:2px}.inboxfilters button{width:auto;gap:7px;padding:6px 9px;font-size:12px}.inboxfilters button.active{background:#edf4f7;color:#347c9a}.inboxfilters span{display:none}
.conv{height:72px;gap:12px;padding:12px 14px}.conv.active{background:#eff5f7;border-color:#347c9a;padding-left:11px}.conv strong{font-size:15px}.conv small{font-size:12px;margin-top:5px}.conv time{display:none}.conv .badge{font-size:10px;margin-left:5px}.conv .avatar{height:38px;width:38px;border-radius:10px}.avatar img{width:21px;height:21px}.orange{background:#258886}.newchat{font-size:13px;gap:12px;margin:15px}.newchat img{height:34px;width:34px;padding:9px}
.chatheader{height:66px;padding:0 24px;gap:11px}.chatheader>.avatar{width:34px;height:34px;border-radius:10px}.chatheader h1{font-size:19px}.badge{font-size:11px;padding:3px 7px}.headtools{gap:9px}.headtools img{width:20px;height:20px}
#messages{padding:20px 28px;background:#fafbfc}.stamp{font-size:11px;margin:0 0 24px}.message{gap:12px;margin-bottom:22px}.message .avatar{width:32px;height:32px;border-radius:9px}.message .bubble{font-size:14px;padding:11px 14px;border-radius:6px;background:#f0f2f5;max-width:510px}.message.user .bubble{background:#e9f2f5}.bot-content{max-width:calc(100% - 44px)}.receipt{font-size:10px}
.card{width:410px;padding:18px;border-radius:8px;border-color:#e0e6eb;margin-top:10px;background:white}.card h2{font-size:16px;gap:9px;margin-bottom:12px;border-left:3px solid #70a6c6;padding-left:10px;line-height:1.5}.card h2>.avatar,.card h2>img{display:none}.card p{font-size:13px;gap:9px;margin:8px 0;color:#67737e}.card p img{width:16px;height:16px}.card .reason{padding-top:11px;margin-top:12px!important}.actions{gap:8px;margin-top:14px}.actions button{padding:9px 11px;font-size:13px;border-radius:5px}.card .actions button.primary{background:#fff;color:#286681;border:1px solid #99b8c9}.card .actions button.primary:hover{background:#edf5f8}.card-note{font-size:11px;margin-top:10px}.smallactions button{font-size:11px}
.companion-card.desk,.companion-card.window,.companion-card.tea{background:white}.companion-card{width:410px;padding:16px}.companion-card .companion{display:flex;flex-direction:column;align-items:stretch;gap:9px}.companion-card .companion>img{width:100%;height:180px;object-fit:contain;background:#fff9ed;border-radius:5px}.companion-card .companion>div p:first-child{font-size:15px;color:#34424c}.companion-card .companion-caption{font-size:12px;color:#697a83}.companion-controls{font-size:11px;gap:7px}.companion-controls button{font-size:11px;padding:3px}.companion-anchor{background:#f0f6f7;border-color:#dce8e9;margin:8px 24px;padding:9px 12px}.companion-anchor strong{font-size:12px}
.composewrap{padding:10px 24px 0;border-top:1px solid var(--line);background:white}.quick{gap:6px;min-height:28px}.quick button{font-size:11px;padding:4px 9px;color:#536b78}.quick button:hover{border-color:#b9cfda;color:#286681}#composer{height:112px;border-radius:7px;padding:8px 12px}.toolbar{gap:14px}.toolbar img{width:18px;height:18px}textarea{font-size:14px;height:48px;padding:10px 0}.send{width:36px;height:36px;border-radius:6px;padding:9px;right:12px;bottom:12px}.send img{width:19px;height:19px}.keyboardhint{font-size:10px;right:60px;bottom:20px}footer{font-size:10px;padding:8px}.sync-status{font-size:10px;min-height:17px;padding:2px 24px}.tabs button{font-size:13px}.formrow{gap:12px}dialog{border-radius:10px}dialog h2{font-size:19px}dialog p{font-size:14px}button.primary,.send{background:#347c9a;border-color:#347c9a}button.primary:hover,.send:hover{background:#286681}
@media(min-width:1500px){.shell{grid-template-columns:68px 290px minmax(0,1fr)}#messages{padding-left:36px}.card{width:440px}.companion-card .companion>img{height:210px}}
@media(max-width:1000px){.shell{grid-template-columns:58px 210px minmax(0,1fr)}.conv .badge{display:none}.headtools{gap:2px}#messages{padding:18px 16px}.card{width:380px}}
@media(max-width:760px){.shell{display:block;min-height:0}#rail,.conversations{display:none}.chatheader{height:58px;padding:0 12px;gap:7px}.chatheader h1{font-size:17px}.headtools button{padding:6px}.chatheader>.avatar{width:28px;height:28px}.message .avatar{width:26px;height:26px}.message{gap:9px}.bot-content{width:calc(100% - 35px);max-width:calc(100% - 35px)}#messages{padding:16px 12px}.card{width:100%;padding:13px}.companion-card .companion>img{height:140px}.composewrap{padding:8px 12px 0}.companion-anchor{margin:6px 12px}.card h2{font-size:15px}.quick button{font-size:11px}.keyboardhint{display:none}.show-conversations .conversations{top:58px}.headtools .iconbutton[aria-label="新增任务"]{display:none}}
/* Keep the whole state card visible above the composer on laptop-height screens. */
@media(min-width:761px) and (max-height:850px){.companion-card .companion>img{height:105px}.companion-card{padding:12px 16px}.companion-card h2{margin-bottom:6px}.companion-card .companion-caption{margin:4px 0}.companion-card .companion{gap:4px}.companion-card .companion p{margin:4px 0}.companion-card .actions{margin-top:9px}.companion-card .smallactions{margin-top:5px}.message:has(.companion-card)>.bot-content>.bubble{padding:7px 12px;font-size:13px}.companion-controls{margin-top:3px}}
.day-check{display:inline-flex!important;margin:8px!important;gap:5px;align-items:center}fieldset{border:1px solid var(--line);border-radius:7px}.completion-card h2{color:#327d72}.completion-card .completed-title{font-size:16px;color:#26313b}.completion-card p{display:block}