.agent-card{position:relative}.agent-experience{position:absolute;right:24px;top:26px;display:inline-block;padding:8px 13px;background:#e6f2ef;border:1px solid #c9e4dc;border-radius:8px;color:#105e57;text-decoration:none;font-size:12px;font-weight:600}.agent-experience:hover{background:#d5eae3}.agent-experience:focus-visible{outline:3px solid #88cfc8;outline-offset:3px}
.agent-chat{display:grid;grid-template-columns:248px minmax(0,1fr);height:calc(100vh - 160px);min-height:520px;overflow:hidden}.chat-sidebar{display:flex;flex-direction:column;gap:16px;min-height:0;padding:22px 16px;background:#f6faf9;border-right:1px solid #e1e7ed}.chat-sidebar>h2{font-size:17px;margin:0;overflow-wrap:anywhere}.chat-sidebar>#chatBack{text-align:left;font-size:12px}.chat-list-heading{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#677987}.chat-sidebar #chatListStatus{font-size:12px;margin:0;overflow-wrap:anywhere}.chat-sidebar nav{flex:1;overflow:auto;min-height:0;display:flex;flex-direction:column;gap:6px}.chat-conversation{display:block;flex-shrink:0;text-align:left;padding:12px;background:transparent;color:#5d7283;font-size:13px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-conversation:hover,.chat-conversation[aria-current=true]{background:#e1efea;color:#105e57}.chat-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:#fff}.chat-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px;border-bottom:1px solid #edf1f4}.chat-heading h2{margin:0;font-size:17px;overflow-wrap:anywhere}.chat-heading p{font-size:12px;margin:7px 0 0}.chat-heading .badge{flex-shrink:0}.chat-messages{flex:1;min-height:0;overflow:auto;padding:24px;overscroll-behavior:contain}.chat-message{margin-bottom:24px;max-width:90%;overflow-wrap:anywhere}.chat-message-label{color:#7b8c98;font-size:12px;margin:0 0 8px}.chat-message-content{padding:14px 18px;line-height:1.85;border-radius:12px;background:#f3f6f8;white-space:pre-wrap}.chat-message.user{margin-left:auto}.chat-message.user .chat-message-label{text-align:right}.chat-message.user .chat-message-content{background:#e6f2ef;color:#143e3b}.chat-welcome{max-width:480px;margin:12vh auto 0;text-align:center;color:#677987}.chat-welcome h3{font-size:24px;color:#143e3b;margin-bottom:14px}.chat-welcome p{white-space:pre-wrap;font-size:14px}.chat-main>.error{margin:0;padding:0 24px 12px;font-size:13px}.chat-composer{border-top:1px solid #edf1f4;padding:18px 24px}.chat-composer textarea{width:100%;resize:vertical;min-height:76px;max-height:180px;font:inherit;line-height:1.7;border:1px solid #cbd6df;border-radius:10px;padding:12px;background:white;color:#192b3c}.chat-composer textarea:focus-visible{outline:3px solid #88cfc8;outline-offset:2px}.chat-composer-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:10px;font-size:11px}
@media(max-width:1100px){.agent-chat{grid-template-columns:200px minmax(0,1fr)}.chat-heading,.chat-messages,.chat-composer{padding:18px}.chat-heading{flex-wrap:wrap}.chat-heading code{overflow-wrap:anywhere}}
@media(max-width:760px){body:has(#agentChatView:not([hidden])) #appView{grid-template-columns:1fr}body:has(#agentChatView:not([hidden])) .portal-sidebar{position:static;height:auto;padding:12px 16px;border-bottom:1px solid #e1e7ed}body:has(#agentChatView:not([hidden])) .sidebar-caption,body:has(#agentChatView:not([hidden])) .sidebar-footer{display:none}body:has(#agentChatView:not([hidden])) .workspace-nav{flex-direction:row;flex-wrap:wrap;margin-top:12px;gap:4px}body:has(#agentChatView:not([hidden])) .workspace-nav a{padding:8px;font-size:12px}.agent-chat{grid-template-columns:158px minmax(0,1fr);height:70vh}.chat-sidebar{padding:14px 10px;gap:12px}.chat-sidebar>h2{font-size:14px}.chat-sidebar>button{font-size:12px;padding:8px}.chat-heading,.chat-messages,.chat-composer{padding:14px}.chat-composer-actions{justify-content:flex-end}.chat-heading h2{font-size:15px}.chat-message{max-width:100%}.chat-message-content{padding:10px 12px}.chat-welcome h3{font-size:19px}.agent-experience{top:20px;right:14px}}
@media(max-width:420px){.agent-chat{grid-template-columns:118px minmax(0,1fr)}.chat-conversation{padding:10px 6px;font-size:12px}.chat-list-heading{flex-wrap:wrap}.chat-heading p{font-size:11px}.chat-heading,.chat-messages,.chat-composer{padding:10px}.chat-sidebar>h2{font-size:13px}}