/* Shared controls and messaging, drawn from the four-tile Lavito mark. */
:root {
  --action-fill: linear-gradient(115deg, var(--surface), var(--tile-blue) 50%, var(--tile-green) 82%, var(--tile-yellow));
  --action-rim: linear-gradient(120deg, #edb5e8, #ffc6a3 24%, #f6e69c 48%, #a6e8d4 70%, #b9d6fa);
  --action-shadow: 0 3px 12px #4263d10a;
}
.kinetic .btn,
.kinetic .btn:hover,
.kinetic .usernav > .header-post,
.kinetic .usernav > .header-post:hover,
.kinetic .pill, .kinetic .pill:hover,
.kinetic .chat-attach, .kinetic .chat-attach:hover {
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--action-fill) padding-box, var(--action-rim) border-box;
  color: var(--brand-dark);
  box-shadow: var(--action-shadow);
  transition: box-shadow .16s ease, transform .08s ease;
  animation: none;
}
.kinetic .btn:hover, .kinetic .pill:hover, .kinetic .chat-attach:hover {
  box-shadow: 0 4px 16px #4263d11a;
}
.kinetic .btn-primary, .kinetic .btn-accent { font-weight: 750; }
.kinetic .btn-danger, .kinetic .btn-danger-ghost,
.kinetic .btn-danger:hover, .kinetic .btn-danger-ghost:hover {
  color: #b13548;
  background: linear-gradient(115deg, var(--surface), var(--tile-red)) padding-box, var(--action-rim) border-box;
}
.kinetic .btn:disabled, .kinetic .btn[aria-disabled="true"] { opacity: .5; box-shadow: none; cursor: default; }
.kinetic .btn:active:not(:disabled), .kinetic .pill:active { transform: scale(.985); }
.kinetic .tabbar .tab-add span { color: var(--brand-dark); border: 1px solid transparent; background: var(--action-fill) padding-box, var(--action-rim) border-box; }
.kinetic .pill.on, .kinetic .pill.on:hover {
  color: var(--ink);
  border-color: var(--brand-dark);
  font-weight: 750;
  box-shadow: inset 0 0 0 1px var(--brand-dark), var(--action-shadow);
}
/* Categories are navigation: quiet grey surfaces, including selected/hover states. */
.kinetic .category-pills { gap: 8px; }
.kinetic .category-pill, .kinetic .subcats .pill {
  border: 1px solid transparent; border-radius: 999px;
  background: var(--soft); color: var(--label); box-shadow: none;
}
.kinetic .category-pill:hover, .kinetic .subcats .pill:hover {
  background: var(--soft-hover); color: var(--ink); border-color: var(--line-strong); box-shadow: none;
}
.kinetic .category-pill.on, .kinetic .category-pill.on:hover,
.kinetic .subcats .pill.on, .kinetic .subcats .pill.on:hover {
  background: var(--soft-hover); color: var(--ink); border-color: var(--line-strong);
  box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: 750;
}
.kinetic .pill, .kinetic .view-switch a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.kinetic .subcats { gap: 10px; margin-bottom: 24px; }
.kinetic .btn { gap: 8px; }
/* Both the sidebar and the mobile sheet share the same spacing rhythm. */
.kinetic .filter-sheet-body { display: flex; flex-direction: column; gap: 18px; }
.kinetic .filter-sheet-body > :not(input[type="hidden"]) { flex-shrink: 0; }
.kinetic .filter-sheet-foot { display: grid; gap: 10px; }
.kinetic .filter-checks { display: flex; flex-direction: column; gap: 10px; }
.kinetic .filter-checks .check { min-height: 22px; }
.kinetic .price-range { gap: 8px; }
/* Native selects keep their OS picker and keyboard support, with an inset chevron. */
.kinetic select {
  appearance: none; -webkit-appearance: none; padding-inline-end: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='m2 2 6 6 6-6' fill='none' stroke='%2365748c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 12px 8px; background-position: right 16px center;
}
.kinetic .discovery-city select { padding-inline-end: 34px; background-position: right 13px center; }
.kinetic .header-city select { width: 128px; max-width: 160px; }
.kinetic .price-range select { padding-inline-start: 12px; padding-inline-end: 30px; background-position: right 11px center; background-size: 10px 7px; }
.kinetic .segmented { border-radius: 999px; padding: 3px; gap: 3px; }
.kinetic .segmented :is(a, label > span) { border-radius: 999px; border: 1px solid transparent; }
.kinetic .segmented :is(a.on, input:checked + span) {
  background: var(--action-fill) padding-box, var(--action-rim) border-box;
  color: var(--brand-dark); box-shadow: var(--action-shadow);
}
.kinetic .btn-oauth, .kinetic .btn-oauth:hover { color: var(--ink); }
/* Apple's official sign-in mark keeps its required monochrome contrast. */
.kinetic .btn-oauth-apple, .kinetic .btn-oauth-apple:hover { background: #000; border-color: #000; color: #fff; }
.kinetic input[type="date"] { min-height: 44px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; }
.kinetic .filter-sheet-body > .btn { min-height: 44px; flex-shrink: 0; }
.ui-icon { display: inline-block; width: 22px; height: 22px; flex-shrink: 0; vertical-align: middle; object-fit: contain; }
.btn .ui-icon, .pill .ui-icon { width: 22px; height: 22px; }
.kinetic .pill > .ui-icon, .kinetic .view-switch .ui-icon { width: 20px; height: 20px; }
.empty-icon .ui-icon { width: 68px; height: 68px; }
.nophoto .ui-icon { width: 48px; height: 48px; }
.nophoto.big .ui-icon { width: 80px; height: 80px; }
.dialog-photo > .ui-icon { width: 34px; height: 34px; object-fit: contain; }
.video-badge .ui-icon, .card-tags .ui-icon, .my-stats .ui-icon { width: 16px; height: 16px; }
.section-head h2 .ui-icon { width: 26px; height: 26px; margin-right: 4px; }
.kinetic .video-badge { background: var(--glass); padding: 2px 4px; border-radius: 8px; }
.kinetic .chat {
  max-width: 920px; gap: 0; overflow: hidden;
  border: 1px solid transparent; border-radius: 28px;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--action-rim) border-box;
  box-shadow: 0 16px 60px #35456c12, 0 2px 8px #35456c06;
}
.kinetic .chat-head { padding: 18px 20px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; gap: 14px; background: var(--surface); }
.kinetic .chat-back { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--soft); }
.kinetic .chat-head .dialog-photo { width: 48px; height: 48px; border-radius: 15px; }
.kinetic .chat-head .chat-listing b { font-size: 15px; letter-spacing: -.025em; }
.kinetic .chat-peer { padding: 5px 10px 5px 5px; border-radius: 999px; background: var(--soft); font-size: 13px; }
.kinetic .chat .deal-check, .kinetic .chat .chat-offer { margin: 12px 18px; border-radius: 18px; background: var(--tile-yellow); border-color: var(--line); }
.kinetic .chat-log {
  height: min(54vh, 520px); min-height: 280px; padding: 24px; gap: 15px; border-radius: 0;
  background: radial-gradient(ellipse at 0 0, var(--tile-blue), transparent 65%), radial-gradient(ellipse at 100% 100%, var(--tile-green), transparent 65%), var(--bg);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  overscroll-behavior: contain;
}
.kinetic .msg { max-width: 78%; min-width: 0; }
.kinetic .msg-body {
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 20px 20px 20px 6px;
  background: var(--surface); color: var(--ink); line-height: 1.6;
  box-shadow: 0 2px 5px #35456c05;
}
.kinetic .mine .msg-body {
  border-color: transparent; border-radius: 20px 20px 6px 20px;
  background: linear-gradient(125deg, #e1edff, #e5f4ed 85%) padding-box, var(--spectrum) border-box;
}
.kinetic .msg-time { margin-top: 5px; padding: 0 7px; font-size: 10px; color: var(--muted); }
.kinetic .msg-time .read { color: var(--brand-dark); }
.kinetic .msg-photos { border-radius: 20px; overflow: hidden; }
.kinetic .msg-translate { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; font-size: 11px; }
.kinetic .msg-translate .ui-icon { width: 18px; height: 18px; }
.kinetic .chat-empty { margin: auto; }
.kinetic .typing-line { margin: 0; padding: 4px 24px; background: var(--bg); }
.kinetic .chat-chips { margin: 0; padding: 16px 20px 10px; gap: 7px; }
.kinetic .chat-chips .pill { min-height: 36px; padding: 7px 13px; font-size: 12px; }
.kinetic .chat-form { padding: 0 18px 16px; gap: 9px; background: var(--surface); }
.kinetic .chat-form textarea {
  min-height: 48px; padding: 12px 16px; font-size: 16px; line-height: 22px;
  border-radius: 24px; background: var(--bg); border-color: var(--line);
}
.kinetic .chat-form .btn, .kinetic .chat-attach { width: 48px; height: 48px; min-height: 48px; padding: 0; flex-shrink: 0; }
.kinetic .chat-form .ui-icon { width: 30px; height: 30px; }
.kinetic .chat-attach:focus-within { outline: 3px solid var(--brand); outline-offset: 3px; }
.kinetic .chat-previews { margin: 0; padding: 8px 20px; }
.kinetic .chat > p { padding: 0 22px; margin: 0 0 12px; font-size: 11px; line-height: 1.6; }
.kinetic .chat-actions { padding: 0 20px 18px; gap: 8px; }
.kinetic .chat-actions .btn { font-size: 11px; }
.kinetic .chat-blocked { padding: 16px 22px; }
.kinetic .dialogs { max-width: 920px; margin: 0 auto; display: grid; gap: 10px; border: 0; border-radius: 0; }
.kinetic .dialog-row { border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: var(--tile-green); }
.kinetic .dialog { padding: 18px; border: 0; background: var(--surface); gap: 16px; }
.kinetic .dialog:hover { background: var(--bg); }
.kinetic .dialog.unread { background: linear-gradient(110deg, var(--surface), var(--tile-blue)); box-shadow: inset 3px 0 var(--brand-dark); }
.kinetic .dialog-photo { border-radius: 16px; }
.kinetic .dialog-title { margin-top: 3px; }
.kinetic .dialog-last { margin-top: 5px; }
.kinetic .dialog .badge { background: var(--tile-blue); color: var(--brand-dark); border: 1px solid var(--line-strong); }
@media (max-width: 640px) {
  .kinetic .chat { border-radius: 22px; }
  .kinetic .chat-head { display: grid; grid-template-columns: 38px minmax(0, 1fr); padding: 12px; gap: 8px 9px; }
  .kinetic .chat-head .chat-back { grid-column: 1; grid-row: 1; }
  .kinetic .chat-head .chat-listing { grid-column: 2; grid-row: 1; }
  .kinetic .chat-head .chat-peer { grid-column: 2; grid-row: 2; margin-left: 0; width: fit-content; max-width: 100%; padding: 2px 8px 2px 2px; }
  .kinetic .chat-peer .avatar { width: 26px; height: 26px; font-size: 10px; }
  .kinetic .chat-peer > span:last-child { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; }
  .kinetic .chat-log { padding: 18px 12px; height: min(52svh, 480px); min-height: 240px; gap: 13px; }
  .kinetic .msg { max-width: 88%; }
  .kinetic .msg-body { font-size: 14px; padding: 10px 13px; }
  .kinetic .chat-chips { padding: 12px 12px 9px; }
  .kinetic .chat-form { padding: 0 10px 12px; gap: 6px; }
  .kinetic .chat-form .btn, .kinetic .chat-attach { width: 42px; height: 46px; min-height: 46px; }
  .kinetic .chat-form textarea { padding: 11px 12px; min-height: 46px; }
  .kinetic .chat-actions { padding: 0 12px 14px; }
  .kinetic .chat .deal-check { margin: 10px 12px; padding: 12px; }
  .kinetic .dialog { padding: 14px 12px; gap: 10px; }
  .kinetic .dialog-role { display: none; }
}
@media (prefers-color-scheme: dark) {
  :root { --action-rim: var(--spectrum); }
  .kinetic .mine .msg-body { background: linear-gradient(125deg, #283d60, #244339) padding-box, var(--spectrum) border-box; }
  .kinetic .btn-danger, .kinetic .btn-danger-ghost, .kinetic .btn-danger:hover, .kinetic .btn-danger-ghost:hover { color: #ffb2bb; }
  .kinetic .btn-oauth-apple, .kinetic .btn-oauth-apple:hover { background: #fff; border-color: #fff; color: #000; }
  .kinetic select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='m2 2 6 6 6-6' fill='none' stroke='%23b5bfd1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}
@media (prefers-reduced-motion: reduce) {
  .kinetic .btn, .kinetic .pill, .kinetic .category-pill, .kinetic .chat-attach { transition: none; }
  .kinetic .btn:active:not(:disabled), .kinetic .pill:active { transform: none; }
}
@media (prefers-contrast: more) {
  .kinetic .btn, .kinetic .pill, .kinetic .category-pill { border-color: var(--line-strong); }
  .kinetic .chat, .kinetic .msg-body { border-color: var(--line-strong); }
}
@media (forced-colors: active) {
  .kinetic select { appearance: auto; -webkit-appearance: auto; background-image: none; }
}