Testcraft Studio frontend 16: src/chat.css

.chat-heading-actions{display:flex;gap:9px;flex-wrap:wrap}
.chat-grid.chat-studio{grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.chat-studio .conversation{border-radius:22px;overflow:hidden;box-shadow:0 5px 24px #24214004}
.chat-studio .conversation-heading{padding:20px 24px;gap:12px}
.chat-studio .assistant-symbol{width:38px;height:38px;border-radius:13px;background:var(--lavender);color:var(--accent)}
.chat-studio .assistant-label{font-size:13px;gap:11px}.chat-studio .assistant-label small{font-size:10px;margin-top:4px}
.chat-studio .conversation-heading .button{font-size:10px;padding:8px 11px}
.chat-studio .chat-messages{min-height:365px;max-height:650px;padding:26px 24px;scroll-behavior:auto}
.chat-studio .chat-welcome{padding:26px 0 20px;text-align:center;max-width:660px;margin:auto}
.chat-welcome-symbol{display:grid;place-items:center;width:64px;height:64px;border-radius:23px;background:var(--lavender);color:var(--accent);margin:0 auto 23px}
.chat-kicker{color:var(--accent);font-size:9px;font-weight:750;letter-spacing:1.3px;line-height:1.5}
.chat-studio .chat-welcome h2{font-size:clamp(24px,2.1vw,33px);letter-spacing:-1.1px;font-weight:650;margin:12px 0;color:var(--text)}
.chat-studio .chat-welcome>p{font-size:12px;line-height:1.85;max-width:410px;margin:0 auto 28px;color:var(--muted)}
.chat-starters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;text-align:left}
.chat-starters>button{border:1px solid var(--line);border-radius:16px;padding:18px 15px;background:var(--surface);text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:10px;color:var(--text);transition:border-color .15s,background .15s;min-width:0;cursor:pointer}
.chat-starters>button:hover{border-color:var(--accent);background:var(--lavender)}.chat-starters>button>svg{color:var(--accent)}
.chat-starters strong{font-size:11px;line-height:1.5;font-weight:650}.chat-starters span{font-size:10px;line-height:1.7;color:var(--muted)}.chat-starters>button>svg:last-child{align-self:flex-end;margin-top:3px}
.chat-studio .message{gap:11px;margin-bottom:25px}.chat-studio .message-avatar{width:31px;height:31px;min-width:31px;border-radius:11px;margin-top:1px}
.chat-message-content{min-width:0;flex:1}.chat-studio .message-author{font-size:11px;margin-bottom:8px}.chat-studio .message-author small{font-size:9px}
.chat-studio .message-bubble{font-size:12px;line-height:1.85;white-space:normal;padding:0;background:transparent;border:0;color:var(--text)}.chat-response-text{white-space:pre-wrap;overflow-wrap:anywhere}
.chat-studio .message-user{flex-direction:row-reverse;max-width:88%;margin-left:auto}.chat-studio .message-user .message-author{justify-content:flex-end}
.chat-studio .message-user .message-bubble{background:var(--lavender);padding:13px 17px;border-radius:17px 3px 17px 17px}
.chat-source-list{display:grid;gap:8px}.chat-source-link{display:flex;gap:10px;align-items:center;width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;text-align:left;background:var(--surface);color:var(--text);cursor:pointer}
.chat-source-link:hover{border-color:var(--accent)}.chat-source-link>span:nth-child(2){flex:1;min-width:0}.chat-source-link strong{font-size:11px;font-weight:600;display:block;overflow-wrap:anywhere}.chat-source-link small{font-size:10px;line-height:1.6;display:block;color:var(--muted);margin-top:3px}
.chat-source-number{display:grid;place-items:center;min-width:26px;height:28px;border-radius:8px;background:var(--lavender);color:var(--accent);font-size:10px}.chat-source-link>svg{color:var(--muted);flex-shrink:0}
.chat-message-sources{margin-top:13px}.chat-message-sources>summary{font-size:10px;color:var(--accent);cursor:pointer;font-weight:600;padding:4px 0}.chat-message-sources[open]>summary{margin-bottom:7px}
.chat-studio .chat-composer{margin:0 22px;border-radius:19px;padding:15px 16px 12px}.chat-composer-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.chat-composer-top>label:first-child{font-size:10px;color:var(--muted);font-weight:600}.chat-kind-select{display:flex;align-items:center;gap:8px;font-size:9px;color:var(--muted)}.chat-kind-select select{font-size:10px;border-radius:9px;padding:6px 20px 6px 9px;background:var(--surface);color:var(--text);border:1px solid var(--line);max-width:130px}
.chat-studio .chat-composer textarea{font-size:13px;min-height:100px;max-height:220px;line-height:1.8;padding:13px 0 7px;resize:vertical}.chat-studio .composer-bottom{gap:10px}.chat-studio .composer-bottom>span{font-size:9px}.chat-studio .attach-button{font-size:10px;gap:6px}
.chat-studio .send-button{width:35px;height:35px;border-radius:11px;flex-shrink:0}.chat-stop{display:flex;align-items:center;gap:7px;padding:10px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:10px;cursor:pointer}.chat-stop>span{width:8px;height:8px;background:currentColor;border-radius:2px}
.chat-studio .chat-footer{font-size:9px;padding:13px 24px 17px;display:flex;gap:5px;align-items:center;flex-wrap:wrap}.chat-footer>span{margin-left:auto;color:var(--muted)}
.chat-followups{display:flex;gap:7px;flex-wrap:wrap;padding:0 23px 16px}.chat-followups>button{display:flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface);color:var(--muted);font-size:9px;cursor:pointer}.chat-followups>button:hover{color:var(--accent);border-color:var(--accent)}
.chat-working{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:11px;padding:12px 0}.chat-working .button{margin-left:auto;font-size:10px}
.chat-error{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--surface-soft);border-radius:12px;padding:12px;margin:0 23px 14px;font-size:11px;line-height:1.6}.chat-error>span{flex:1}.chat-error>button{border:0;background:none;color:var(--muted);cursor:pointer}
.chat-template-card{padding:23px 20px;border-radius:18px}.chat-template-card h2{font-size:19px;line-height:1.4;letter-spacing:-.6px;font-weight:650;margin:11px 0 9px}.chat-template-card>p{font-size:11px;line-height:1.85;color:var(--muted);margin:0 0 20px}.chat-template-label{font-size:10px;color:var(--muted);display:block;margin-bottom:8px}.chat-template-card>select{width:100%;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--text);font-size:11px;padding:11px 9px;min-width:0}.chat-template-fields{display:flex;flex-wrap:wrap;gap:5px;margin:11px 0 17px}.chat-template-fields>span{border:1px solid var(--line);background:var(--surface-soft);color:var(--muted);border-radius:6px;font-size:9px;padding:4px 6px}.chat-template-card .file-button{width:100%;justify-content:center;border-radius:11px;font-size:10px}
.chat-studio .chat-context-card{padding:22px 20px;border-radius:18px}.chat-studio .chat-context-card h2{font-size:12px}.chat-studio .chat-context-card>div:not(.section-heading){font-size:10px;gap:12px;align-items:flex-start}.chat-studio .chat-context-card strong{font-size:10px;text-align:right;max-width:65%;line-height:1.7}.chat-studio .chat-context-card>.text-button{font-size:10px;margin-top:16px}.chat-evidence-note{display:flex;align-items:flex-start;gap:8px;font-size:10px;line-height:1.8;color:var(--muted);margin:19px 0 0;padding-top:16px;border-top:1px solid var(--line)}.chat-evidence-note svg{flex-shrink:0;margin-top:3px}
.chat-studio .optional-clarifications{border-radius:18px}.chat-studio .optional-clarifications>summary{font-size:12px}.chat-studio .optional-clarifications .panel-description{font-size:11px;line-height:1.8}.chat-studio .clarification-option{font-size:11px}.chat-studio .clarification-option strong{font-size:11px}.chat-studio .question-detail h3{font-size:12px}.chat-studio .question-detail p{font-size:11px;line-height:1.8}
.chat-cited-quote{border-left:3px solid var(--accent);background:var(--lavender);padding:17px;border-radius:0 10px 10px 0;margin:20px 0;font-size:13px;line-height:1.9;white-space:pre-wrap}
.chat-test-draft{margin-top:19px;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}.chat-draft-heading{display:flex;align-items:center;gap:11px;padding:18px 17px 13px}.chat-draft-heading>div{min-width:0;flex:1}.chat-draft-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:12px;background:var(--lavender);color:var(--accent);flex-shrink:0}.chat-draft-heading h3{font-size:15px;letter-spacing:-.3px;margin:0 0 3px;line-height:1.4}.chat-draft-heading p{font-size:10px;color:var(--muted);margin:0}.chat-draft-heading>.badge{font-size:8px}
.chat-draft-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:9px;padding:0 17px 15px}.chat-draft-meta>span:first-child{display:flex;gap:5px;align-items:center}.chat-test-list{border-top:1px solid var(--line)}
.chat-test-case{border-bottom:1px solid var(--line)}.chat-test-case>summary{display:flex;gap:10px;align-items:center;list-style:none;cursor:pointer;padding:15px 17px}.chat-test-case>summary::-webkit-details-marker{display:none}.chat-case-index{display:grid;place-items:center;width:26px;height:28px;flex-shrink:0;background:var(--surface-soft);color:var(--muted);border-radius:8px;font-size:9px}.chat-test-case>summary>span:nth-child(2){flex:1;min-width:0}.chat-test-case>summary small{display:block;color:var(--muted);font-size:9px;line-height:1.5}.chat-test-case>summary strong{display:block;font-size:12px;font-weight:600;line-height:1.65}.chat-test-case>summary>.badge{font-size:8px}.chat-test-case>summary>svg{color:var(--muted);flex-shrink:0}.chat-test-case[open]>summary>svg{transform:rotate(180deg)}
.chat-case-body{padding:0 17px 17px;font-size:11px;line-height:1.85}.chat-case-objective{color:var(--muted);margin:0 0 15px}.chat-case-facts{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin:0 0 15px}.chat-case-body h4{font-size:10px;font-weight:650;color:var(--text);margin:0 0 5px}.chat-case-body p{margin:0}.chat-case-facts p,.chat-case-body ol{color:var(--muted)}.chat-case-body ol{padding-left:18px;margin:5px 0 16px}.chat-case-body li{padding-left:3px;margin:5px 0}.chat-case-expected{background:var(--green-bg);border-radius:11px;padding:13px;color:var(--text)}.chat-case-bottom{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:9px;padding-top:13px;color:var(--muted)}.chat-case-bottom>button{display:flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--accent);font-size:9px;cursor:pointer;text-align:left;overflow-wrap:anywhere}
.chat-draft-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:16px;background:var(--surface-soft)}.chat-draft-actions .button{font-size:10px;padding:9px 11px;min-height:34px}
@media(min-width:1700px){.chat-grid.chat-studio{grid-template-columns:minmax(0,1fr) 330px}}
@media(max-width:1200px){.chat-grid.chat-studio{grid-template-columns:minmax(0,1fr) 265px;gap:18px}.chat-starters{grid-template-columns:1fr}.chat-starters>button{display:grid;grid-template-columns:23px 1fr 14px;align-items:center;padding:13px}.chat-starters span{display:none}.chat-starters>button>svg:last-child{margin:0;align-self:center}.chat-studio .chat-welcome{padding-top:8px}.chat-studio .chat-messages{padding:23px 20px}.chat-studio .composer-bottom>span{display:none}.chat-footer>span{display:none}}
@media(max-width:1000px){.chat-grid.chat-studio{grid-template-columns:1fr}.chat-studio .chat-aside{display:grid;grid-template-columns:1fr 1fr;gap:18px}.chat-studio .optional-clarifications{grid-column:1/-1}.chat-starters{grid-template-columns:repeat(3,1fr)}.chat-starters>button{display:flex;padding:16px;align-items:flex-start}.chat-starters span{display:block}.chat-starters>button>svg:last-child{align-self:flex-end}.chat-studio .chat-messages{max-height:650px}}
@media(max-width:600px){.chat-heading-actions{gap:6px}.chat-heading-actions .button{font-size:10px}.chat-studio .chat-aside{grid-template-columns:1fr}.chat-studio .conversation-heading{padding:17px 15px}.chat-studio .assistant-label small{font-size:9px}.chat-studio .conversation-heading>.button{font-size:0;gap:0;padding:9px}.chat-studio .chat-messages{padding:22px 15px;max-height:650px}.chat-studio .message-avatar{display:none}.chat-studio .message-user{max-width:94%}.chat-starters{grid-template-columns:1fr}.chat-starters>button{display:grid;grid-template-columns:23px 1fr 14px;padding:13px;align-items:center}.chat-starters span{display:none}.chat-starters>button>svg:last-child{align-self:center}.chat-welcome-symbol{width:54px;height:54px;border-radius:19px}.chat-studio .chat-welcome h2{font-size:24px}.chat-studio .chat-composer{margin:0 12px;padding:13px}.chat-studio .chat-composer textarea{font-size:12px}.chat-composer-top{gap:6px}.chat-kind-select{gap:5px}.chat-kind-select>span{display:none}.chat-followups{padding:0 13px 14px}.chat-error{margin:0 13px 13px}.chat-studio .chat-footer{padding:13px 16px}.chat-case-facts{grid-template-columns:1fr}.chat-draft-heading{flex-wrap:wrap;padding:15px 12px}.chat-draft-heading h3{font-size:14px}.chat-test-case>summary{padding:13px 12px;gap:7px}.chat-test-case>summary>.badge{display:none}.chat-case-body{padding:0 12px 15px}.chat-case-bottom>button{max-width:100%}.chat-draft-actions{padding:12px;gap:6px}.chat-draft-actions .button{font-size:9px}}