.ai-tone-controls { display: grid; gap: 16px; margin: 0 0 18px; padding: 18px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-surface-raised); }
.ai-tone-heading,.ai-tone-saved-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ai-tone-heading b,.ai-tone-saved-heading b { font-size: 13px; }
.ai-tone-presets { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.ai-tone-presets .btn { padding: 12px; min-height: 48px; white-space: normal; text-align: left; justify-content: flex-start; font-size: 12px; }
.ai-tone-presets .btn[aria-pressed="true"] { border-color: var(--app-lime); background: color-mix(in srgb,var(--app-lime) 12%,var(--app-surface)); box-shadow: inset 3px 0 var(--app-lime); }
.ai-tone-saved { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ai-tone-saved>span:has(button) { display: flex; align-items: stretch; max-width: 100%; }
.ai-tone-saved .btn { font-size: 12px; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.ai-tone-note { margin: 0; font-size: 11px; line-height: 1.7; }
.ai-tone-controls .inline-error { margin: 0; }
@media (max-width:700px) { .ai-tone-controls { padding: 14px; } .ai-tone-presets { grid-template-columns: repeat(2,minmax(0,1fr)); } .ai-tone-saved-heading>.btn { width:100%; } }