* { letter-spacing: 0; }
body { font-family: Arial, "Microsoft YaHei", sans-serif; color: #e8e9e7; }
.container { justify-content: flex-start; align-items: stretch; }
.stage-container { flex: 1 1 auto; min-width: 0; margin: 0; border: 0; height: 100% !important; }
.assistant-panel { width: 380px; min-width: 320px; height: 100%; display: flex; flex-direction: column; background: #171a18; border-left: 1px solid #39413b; z-index: 2; }
.assistant-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 22px 20px 18px; border-bottom: 1px solid #353b36; }
.assistant-kicker, .assistant-label { display: block; font-size: 10px; line-height: 1.5; color: #a7b2a6; }
.assistant-header h1 { margin: 4px 0 0; font-size: 20px; font-weight: 600; color: #f3f4f1; }
.assistant-status { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 11px; color: #c1c9c0; }
.assistant-status i { width: 7px; height: 7px; border-radius: 50%; background: #a6d17b; }
.assistant-preview { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid #353b36; }
.assistant-preview > div { flex: 1 1 auto; min-width: 0; }
.assistant-preview strong { display: block; margin-top: 5px; font-size: 13px; line-height: 1.5; color: #f0f1ed; font-weight: 500; overflow-wrap: anywhere; }
.assistant-preview #launch-hint { display: block; flex: 0 0 auto; padding: 8px 10px; border: 1px solid #687c61; background: #283329; color: #d9e7d0; font-size: 11px; line-height: 1.4; text-align: center; }
.assistant-conversation { display: flex; flex: 1 1 auto; flex-direction: column; gap: 14px; min-height: 0; overflow: auto; padding: 18px 16px; }
.assistant-message { max-width: 94%; padding: 11px 12px; border-left: 2px solid #879d74; background: #222723; }
.assistant-message--user { align-self: flex-end; border-left-color: #d2a36d; background: #302a23; }
.message-role { display: block; margin-bottom: 6px; color: #b4c0af; font-size: 10px; }
.assistant-message p { margin: 0; color: #e2e5df; font-size: 13px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.clarification-question { margin-top: 8px !important; font-weight: 600; color: #f1f3ed !important; }
.clarification-options { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.clarification-option { min-height: 34px; padding: 7px 10px; border: 1px solid #65765e; border-radius: 3px; background: #2a342b; color: #e1ebda; font: inherit; font-size: 12px; line-height: 1.35; text-align: left; cursor: pointer; }
.clarification-option:hover:not(:disabled), .clarification-option:focus-visible { border-color: #b3ca9f; background: #364436; outline: none; }
.clarification-option:disabled { opacity: .55; cursor: default; }
.assistant-message--assistant { max-width: 100%; }
.assistant-message--user { max-width: 94%; }
.chat-composer-shell { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 8px; padding: 12px 16px 0; }
.assistant-composer { min-width: 0; }
#prompt-panel-toggle { width: 42px; min-height: 40px; padding: 0 6px; border: 1px solid #4a514a; border-radius: 3px; background: #222723; color: #d6ddd2; font: inherit; font-size: 11px; cursor: pointer; }
#prompt-panel-toggle:hover, #prompt-panel-toggle:focus-visible, #prompt-panel-toggle[aria-expanded="true"] { border-color: #9bb18c; color: #f0f1ed; outline: none; }
#prompt-panel-toggle:disabled { opacity: .55; cursor: wait; }
.prompt-panel { position: absolute; z-index: 5; left: 16px; bottom: calc(100% + 8px); width: min(460px, calc(100% - 32px)); max-height: min(58vh, 430px); overflow-y: auto; border: 1px solid #4a514a; border-radius: 3px; background: #171a18; box-shadow: 0 8px 24px rgb(0 0 0 / 38%); }
.prompt-panel[hidden] { display: none; }
.prompt-panel__guide { margin: 0; padding: 13px 14px; border-bottom: 1px solid #39413b; color: #c4ccc1; font-size: 12px; line-height: 1.55; }
.prompt-panel__phrases { display: flex; flex-direction: column; }
.prompt-phrase { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 9px 14px; border: 0; border-bottom: 1px solid #303630; background: transparent; color: #e5e9e2; font: inherit; font-size: 12px; line-height: 1.4; text-align: left; cursor: pointer; }
.prompt-phrase:last-child { border-bottom: 0; }
.prompt-phrase span:first-child { min-width: 0; overflow-wrap: anywhere; }
.prompt-phrase span:last-child { flex: 0 0 auto; color: #a9c28f; font-size: 16px; }
.prompt-phrase:hover, .prompt-phrase:focus-visible { background: #283129; outline: none; }
.assistant-composer:has(#send-button:disabled) { opacity: .8; }

.assistant-composer textarea { display: block; width: 100%; resize: vertical; min-height: 76px; max-height: 180px; padding: 10px; border: 1px solid #4a514a; border-radius: 3px; outline: none; background: #111411; color: #f0f1ed; font: inherit; font-size: 13px; line-height: 1.5; }
.assistant-composer textarea:focus { border-color: #9bb18c; }
.assistant-composer textarea::placeholder { color: #899087; }
.composer-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 38px; }
#chat-error { color: #f1a28d; font-size: 11px; }
#send-button { display: flex; align-items: center; gap: 12px; padding: 8px 11px; border: 0; background: #a9c28f; color: #182015; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
#send-button:disabled { opacity: .55; cursor: wait; }
.assistant-footer { padding: 0 16px 12px; color: #929a91; font-size: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
	.container { flex-direction: column; }
	.stage-container { flex: 1 1 58%; width: 100% !important; min-height: 42vh; height: auto !important; }
	.assistant-panel { width: 100%; min-width: 0; height: min(52vh, 460px); min-height: 300px; border-left: 0; border-top: 1px solid #39413b; }
	.assistant-header { padding: 12px 16px; }
	.assistant-header h1 { font-size: 17px; }
	.assistant-preview { padding: 10px 16px; }
	.assistant-conversation { padding: 12px 14px; }
	.chat-composer-shell { grid-template-columns: 40px minmax(0, 1fr); padding: 10px 14px 0; }
	#prompt-panel-toggle { width: 40px; }
	.prompt-panel { left: 14px; width: min(460px, calc(100% - 28px)); }
	.assistant-composer textarea { min-height: 76px; }
}
@media (max-height: 560px) and (min-width: 761px) {
	.assistant-header { padding-top: 12px; padding-bottom: 10px; }
	.assistant-preview { padding-top: 9px; padding-bottom: 9px; }
}