#composer.composer { position: relative; display: grid; grid-template-columns: 34px 34px minmax(0, 1fr) 34px; align-items: center; gap: 6px; min-height: 0; padding: 10px 12px 8px; }
#composer textarea#text { grid-column: 1 / -1; grid-row: 1; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 8px; }
#composer .attach, #composer > button { grid-row: 2; width: 34px; height: 34px; padding: 0; border-radius: 7px; }
#composer .attach { grid-column: 1; background: transparent; }
#composer > button[type="submit"] { grid-column: 4; }
#composer > .quick-replies-toggle { grid-column: 2; color: #4aa34c; background: transparent; }
#composer > .quick-replies-toggle::before { content: ""; width: 21px; height: 21px; background: center / 21px 21px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 21 17 3' fill='none' stroke='%234aa34c' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
#composer > .quick-replies-toggle:hover, #composer > .quick-replies-toggle[aria-expanded="true"] { background: #edf6ed; }
#composer .attach svg, #composer > button svg { width: 21px; height: 21px; }
.composer .quick-replies-toggle { flex: 0 0 auto; width: auto; padding: 8px; font-size: 12px; color: #46596b; background: #edf2f6; border-radius: 8px; }
.quick-replies-toggle[hidden], .quick-replies-panel[hidden] { display: none !important; }
.quick-replies-panel { position: absolute; z-index: 30; left: 8px; right: 8px; bottom: calc(100% + 8px); max-height: min(360px, 55vh); display: flex; flex-direction: column; padding: 12px; border: 1px solid #dbe2e8; border-radius: 12px; background: white; box-shadow: 0 8px 30px #18304422; color: #253748; }
.quick-replies-panel input { flex: 0 0 auto; width: 100%; box-sizing: border-box; border: 1px solid #dbe2e8; border-radius: 8px; padding: 10px; font: inherit; }
.quick-replies-list { overflow-y: auto; margin-top: 8px; }
.quick-replies-list p { margin: 12px 4px; font-size: 13px; line-height: 1.5; }
#composer .quick-replies-list button { display: block; width: 100%; height: auto; background: transparent; color: inherit; border-radius: 0; border-bottom: 1px solid #edf0f2; padding: 10px 8px; text-align: left; }
#composer .quick-replies-list button:hover, #composer .quick-replies-list button:focus-visible { background: #edf2f6; }
.quick-replies-item strong, .quick-replies-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-replies-item strong { font-size: 13px; }
.quick-replies-item span { margin-top: 4px; font-size: 12px; line-height: 1.4; color: #657684; white-space: nowrap; }