.conversation-page-content { background: #f5f8fa; padding: 24px; }
.conversation-page-head { margin-bottom: 20px; align-items: center; }
.conversation-page-head h1 { font-size: 28px; letter-spacing: -.9px; color: #11252d; }
.conversation-page-head .eyebrow { color: #078653; }
.conversation-page-head .ph-text p { max-width: 880px; line-height: 1.6; }
.conversation-layout { display: grid; grid-template-columns: minmax(240px, .95fr) minmax(340px, 1.8fr) minmax(230px, .82fr); gap: 14px; background: transparent; border: 0; border-radius: 0; overflow: hidden; height: calc(100dvh - 200px); min-height: 420px; }
.conversation-list, .conversation-thread, .conversation-context { min-width: 0; min-height: 0; border: 0; background: transparent; }
.conversation-list { display: flex; flex-direction: column; border: 1px solid #e1e9ee; border-radius: 16px; background: #fff; overflow: hidden; }
.conversation-list-top { padding: 18px 16px 14px; background: #fff; border-bottom: 1px solid #edf1f4; }
.automation-list-head b { font-size: 15px; color: #142a34; }
.conversation-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.conversation-filters button { padding: 7px 8px; border: 1px solid #e3eaef; border-radius: 10px; font-size: 10px; background: #f8fafb; }
.conversation-filters button.active { background: #008e57; border-color: #008e57; color: #fff; }
.conversation-filters button.active em { color: #fff; background: #ffffff20; }
.conversation-search { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 10px; border: 1px solid #e1e9ee; border-radius: 10px; background: #f7f9fc; color: #597080; }
.conversation-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: #173035; font: inherit; font-size: 12px; }
.conversation-search:focus-within { outline: 2px solid #087b48; outline-offset: 2px; }
.conversation-search-label { display: block; margin-top: 12px; font-size: 11px; color: #597080; }
.conversation-search-label + .conversation-search { margin-top: 5px; }
.conversation-list-items { flex: 1; min-height: 0; overflow-y: auto; }
.conversation-item { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 16px 14px; border-bottom: 1px solid #edf1f4; }
.conversation-item[hidden] { display: none; }
.conversation-item.active { background: linear-gradient(90deg, #e6f8ef, #f8fffb); box-shadow: inset 3px 0 #00ba75; }
.conversation-avatar { width: 42px; height: 42px; border-radius: 50%; background: #edf1f5; color: #16323e; font-size: 13px; font-weight: 800; }
.conversation-title { flex-wrap: wrap; gap: 5px; }
.conversation-title b { font-size: 12px; overflow-wrap: anywhere; }
.conversation-item p { margin-top: 6px; font-size: 12px; color: #415a6b; }
.conversation-item small, .conversation-item time { font-size: 10px; color: #708698; }
.conversation-item > time { grid-column: 2; position: static; }
.conversation-status { border-radius: 20px; font-size: 9px; }
.conversation-thread { display: flex; flex-direction: column; background: #fff; border: 1px solid #e1e9ee; border-radius: 16px; overflow: hidden; }
.conversation-head { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px; border-bottom: 1px solid #e8eef2; }
.conversation-head > div:first-child { flex: 1; min-width: 160px; }
.conversation-head h2 { font-size: 15px; overflow-wrap: anywhere; }
.conversation-head p { font-size: 11px; line-height: 1.6; color: #708698; }
.conversation-head .actions { flex-wrap: wrap; gap: 7px; }
.conversation-messages { flex: 1; min-height: 160px; max-height: none; padding: 22px 18px; overflow-y: auto; background-color: #f3f6f3; background-image: radial-gradient(#bbd1c330 .8px, transparent .8px); background-size: 16px 16px; }
.conversation-bubble { max-width: 85%; width: fit-content; margin: 0 0 16px; padding: 11px 14px; border-radius: 13px; background: #fff; box-shadow: 0 1px 3px #1730350a; }
.conversation-bubble.user { background: #fff; color: #173035; border-bottom-left-radius: 4px; }
.conversation-bubble.assistant, .conversation-bubble.operator { margin-left: auto; background: #d9f9e3; color: #173035; border-bottom-right-radius: 4px; }
.conversation-bubble > span { font-size: 9px; color: #487460; }
.conversation-bubble p { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.conversation-bubble time { display: block; margin-top: 5px; text-align: right; color: #6b8391; font-size: 9px; }
.human-composer { flex: none; padding: 14px 16px 10px; background: #fff; border-top: 1px solid #e5ecef; gap: 10px; }
.human-composer textarea { min-height: 48px; max-height: 140px; border: 1px solid #dce6ed; border-radius: 11px; padding: 12px; font-size: 13px; }
.human-composer small { font-size: 10px; line-height: 1.5; color: #708698; }
.conversation-trace { flex: none; max-height: 190px; overflow-y: auto; border-top: 8px solid #f5f8fa; padding: 16px; background: #fff; }
.conversation-trace h3 { font-size: 14px; }
.conversation-trace .test-placeholder { min-height: 64px; padding: 12px; }
.conversation-context { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding: 0; }
.conversation-context > section { flex: none; padding: 18px; border: 1px solid #e1e9ee; border-radius: 15px; background: #fff; }
.conversation-context h3 { margin-top: 7px; font-size: 14px; }
.conversation-context p { margin-top: 8px; font-size: 12px; line-height: 1.6; color: #708698; }
.context-actions { display: flex; gap: 6px; margin-top: 16px; }
.context-actions button { flex: 1; padding: 8px 4px; font-size: 10px; }
.conversation-context .test-placeholder { min-height: 70px; padding: 12px; margin-top: 12px; border: 1px dashed #dce6ed; border-radius: 10px; background: #f8fafc; }
.conversation-return-card { display: flex; gap: 8px; margin-top: 14px; padding: 12px; border-radius: 10px; background: #edf5ff; color: #1760a8; font-size: 11px; line-height: 1.5; }
@media (max-width: 1250px) { .conversation-layout { grid-template-columns: 260px minmax(0, 1fr); } .conversation-context { display: none; } }
@media (max-width: 760px) { .conversation-page-content { padding: 16px; overflow-y: auto; } .conversation-layout { display: flex; flex-direction: column; height: auto; min-height: 0; overflow: visible; } .conversation-list { max-height: 330px; flex: none; } .conversation-thread { min-height: 600px; flex: none; } .conversation-messages { min-height: 240px; max-height: 440px; } .conversation-context { display: flex; overflow: visible; } .conversation-head .actions { width: 100%; } .conversation-page-head h1 { font-size: 24px; } }