/* Product flows keep utility controls quiet and secondary. */
.inbox-heading .icon-button { margin-left: auto; }
.side-heading select, .letter-tools select, .context-menu select { border: 0; background: var(--paper); color: var(--ink); font: inherit; padding: 6px; border-radius: 6px; }
.conversation-list { overflow-y: auto; min-height: 100px; }
.conversation-name strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-actions { position: relative; }
.thread-actions summary { display: grid; place-items: center; width: 36px; height: 40px; cursor: pointer; list-style: none; color: var(--muted); font-size: 23px; border-radius: 8px; }
.thread-actions summary::-webkit-details-marker { display: none; }
.context-menu { position: absolute; z-index: 12; top: 45px; right: 0; width: 220px; display: grid; gap: 3px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 35px #0002; }
.context-menu button { text-align: left; min-height: 40px; border: 0; border-radius: 6px; padding: 8px; background: transparent; color: var(--ink); font-size: 12px; }
.context-menu button:hover { background: var(--sage); }
.context-menu label { font-size: 10px; color: var(--muted); padding: 9px 8px 2px; border-top: 1px solid var(--line); }
.letter-tools { display: flex; gap: 8px; align-items: center; padding: 8px 28px; color: var(--muted); font-size: 11px; border-bottom: 1px solid var(--line); }
.letter-tools button { color: var(--ink); background: none; border: 0; text-decoration: underline; }
.reply-preview, .attachment-preview { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-left: 2px solid var(--accent); margin-bottom: 8px; background: var(--sage); color: var(--ink); font-size: 11px; border-radius: 3px 8px 8px 3px; }
.reply-preview span, .attachment-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.reply-preview button, .attachment-preview button { border: 0; background: none; color: var(--ink); min-width: 36px; height: 32px; font-size: 18px; }
.quoted-message { display: block; border-left: 2px solid currentColor; padding-left: 8px; margin: 0 0 8px; opacity: .85; font-size: 11px; max-height: 4em; overflow: hidden; white-space: pre-wrap; }
.message-actions { display: flex; justify-content: flex-start; gap: 8px; }
.mine .message-actions { justify-content: flex-end; }
.message-actions button { border: 0; padding: 4px; min-height: 30px; font-size: 10px; color: var(--muted); background: none; border-radius: 4px; }
.message-actions button:hover { background: var(--sage); color: var(--ink); }
.bubble img, .bubble video { display: block; max-width: 100%; width: 300px; border-radius: 10px; margin-bottom: 8px; }
.bubble .media-open { display: block; padding: 0; border: 0; background: none; text-align: left; color: inherit; }
.bubble .media-open img { margin: 0 0 6px; }
.flow-dialog { width: min(490px, calc(100vw - 28px)); max-height: calc(100dvh - 40px); box-sizing: border-box; overflow: auto; padding: 34px 26px 24px; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: var(--surface); }
.flow-dialog::backdrop { background: #101b1488; }
.flow-dialog h2 { margin: 4px 0 14px; font: 28px/1.1 var(--serif); }
.flow-dialog p { font-size: 12px; color: var(--muted); line-height: 1.6; }
.flow-dialog form { display: grid; gap: 9px; }
.flow-dialog input, .flow-dialog textarea { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.flow-dialog label { font-size: 12px; margin-top: 6px; }
.flow-dialog small { font-size: 10px; color: var(--muted); }
.media-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.media-options button { border: 1px solid var(--line); border-radius: 12px; padding: 10px; color: var(--ink); background: var(--paper); display: grid; gap: 9px; text-align: left; }
.media-options img { width: 100%; border-radius: 8px; }
.media-options strong { font-size: 11px; }
.video-option { display: grid; place-items: center; height: 105px; background: var(--sage); border-radius: 8px; font-size: 40px; }
#viewer-content img, #viewer-content video { width: 100%; border-radius: 12px; }
.message-result { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
@media (max-width: 760px) {
  .thread-actions summary { width: 32px; height: 44px; }
  .header-actions { gap: 0; }
  .header-actions .icon-button, .header-actions .appearance-control { width: 36px; }
  .person h2 { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
  .person > div { min-width: 0; }
  .person { flex: 1; }
  .person p { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .letter-tools { padding: 7px 16px; }
  .message-actions button { min-height: 36px; }
}