/* Four hand-drawn subjects sit in equal, uncropped frames on white cards. */
body .generation-home .suggestion-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:12px}
body .generation-home .topic-suggestion{display:flex;align-items:center;justify-content:flex-start;min-width:0;min-height:94px;padding:14px 13px;gap:10px;border:1px solid #e7e8e2;border-radius:15px;background:#fff;box-shadow:none;text-align:left;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
body .generation-home .topic-suggestion strong{color:#47574f;font-size:13px;line-height:1.6;font-weight:500;letter-spacing:.01em}
body .generation-home .suggestion-image{display:block;flex:0 0 auto;width:80px;height:64px;object-fit:contain;object-position:center;border-radius:0;background:transparent;filter:none;image-rendering:auto;transition:transform .18s ease}
body .generation-home .topic-suggestion:hover{background:#fffdfa;border-color:#d3ded5;box-shadow:0 5px 16px #26362e07;transform:translateY(-1px)}
body .generation-home .topic-suggestion:hover .suggestion-image{transform:translateY(-1px)}
body .generation-home .topic-suggestion:active{box-shadow:none;transform:translateY(0)}
body .generation-home.has-conversation .suggestion-row{display:none}

@media(max-width:800px){
 body .generation-home .suggestion-row{gap:10px}
 body .generation-home .topic-suggestion{min-height:82px;padding:12px 10px;gap:7px;border-radius:13px}
 body .generation-home .suggestion-image{width:64px;height:54px}
 body .generation-home .topic-suggestion strong{font-size:12px}
}
@media(max-width:600px){
 body .generation-home .suggestion-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 body .generation-home .topic-suggestion{min-height:82px;padding:12px;gap:10px;border-radius:13px}
 body .generation-home .suggestion-image{width:68px;height:56px}
}
@media(max-width:360px){
 body .generation-home .suggestion-row{gap:8px}
 body .generation-home .topic-suggestion{min-height:72px;padding:10px;gap:8px;border-radius:12px}
 body .generation-home .suggestion-image{width:58px;height:50px}
}
@media(min-width:801px) and (max-height:660px){
 body .generation-home .topic-suggestion{min-height:70px;padding:7px 12px;gap:9px}
 body .generation-home .suggestion-image{width:68px;height:54px}
}
@media(max-width:800px) and (max-height:660px){
 body .generation-home .suggestion-row{gap:8px}
 body .generation-home .topic-suggestion{min-height:64px;padding:7px 10px;gap:8px}
 body .generation-home .suggestion-image{width:60px;height:48px}
}
@media(max-width:600px) and (max-height:620px){
 body .generation-home .suggestion-row{gap:7px}
 body .generation-home .topic-suggestion{min-height:56px;padding:5px 10px;gap:8px;border-radius:11px}
 body .generation-home .suggestion-image{width:56px;height:44px}
}
@media(max-width:600px) and (max-height:560px){
 body .generation-home .suggestion-row{gap:6px}
 body .generation-home .topic-suggestion{min-height:52px;padding:5px 9px;gap:7px}
 body .generation-home .suggestion-image{width:50px;height:40px}
}
body.reduce-motion .generation-home :is(.topic-suggestion,.suggestion-image){transition:none}
body.reduce-motion .generation-home .topic-suggestion:is(:hover,:active),
body.reduce-motion .generation-home .topic-suggestion:hover .suggestion-image{transform:none}
@media(prefers-reduced-motion:reduce){
 body .generation-home :is(.topic-suggestion,.suggestion-image){transition:none}
 body .generation-home .topic-suggestion:is(:hover,:active),
 body .generation-home .topic-suggestion:hover .suggestion-image{transform:none}
}