/* The feedback surface owns its styles; shared site tokens own light/dark colours. */
:root {
  --cityrail-feedback-inset: var(--ui-map-footer-inset,max(12px, env(safe-area-inset-bottom)));
}
.cityrail-feedback-button {
  --cityrail-heroicon-gap: var(--ui-map-feedback-gap,8px);
  position: fixed;
  right: var(--ui-map-footer-right,max(18px,env(safe-area-inset-right)));
  bottom: var(--cityrail-feedback-inset);
  z-index: 100250;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-map-feedback-gap,7px);
  height: var(--ui-map-feedback-height,36px);
  padding: var(--ui-map-feedback-padding,0 13px);
  border: 1px solid var(--site-border);
  border-radius: 22px;
  background: var(--site-glass);
  color: var(--site-text);
  backdrop-filter: blur(20px);
  font: 500 var(--ui-map-feedback-font-size,13px)/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
  cursor: pointer;
}
.cityrail-feedback-button svg {
  width: var(--ui-map-feedback-icon-size,17px);
  height: var(--ui-map-feedback-icon-size,17px);
}
.cityrail-feedback-badge { display:none; position:absolute; top:-7px; right:-4px; min-width:19px; padding:3px 5px; border-radius:12px; background:#e94040; color:white; font-size:10px; }
.cityrail-feedback-button.has-reply .cityrail-feedback-badge { display:block; }
.cityrail-feedback-reply-toast { position:fixed; z-index:100251; right:18px; bottom:60px; display:none; align-items:center; gap:18px; padding:12px 16px; border:1px solid var(--site-border); border-radius:18px; background:var(--material-panel,var(--site-surface)); -webkit-backdrop-filter:var(--material-blur,none); backdrop-filter:var(--material-blur,none); color:var(--site-text); box-shadow:var(--site-shadow); font-size:13px; }
.cityrail-feedback-reply-toast.visible { display:flex; }
.cityrail-feedback-reply-toast button { min-height:44px; border:0; background:transparent; color:var(--site-blue); cursor:pointer; }
#cityrail-feedback-modal {
  box-sizing:border-box;
  margin:auto;
  padding:0;
  width:min(1060px,calc(100vw - 48px));
  max-width:none;
  height:min(760px,calc(100dvh - 64px));
  max-height:none;
  overflow:hidden;
  border:1px solid var(--site-border);
  border-radius:26px;
  background:var(--material-panel,var(--site-surface));
  -webkit-backdrop-filter:var(--material-blur,none);
  backdrop-filter:var(--material-blur,none);
  color:var(--site-text);
  box-shadow:0 30px 110px #0004;
  font:400 14px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC",sans-serif;
  text-align:left;
}
#cityrail-feedback-modal::backdrop,#cityrail-feedback-image-viewer::backdrop { background:var(--site-backdrop); backdrop-filter:blur(10px); }
#cityrail-feedback-modal * { box-sizing:border-box; }
#cityrail-feedback-modal [hidden] { display:none!important; }
#cityrail-feedback-modal :is(button,input,textarea) { font:inherit; box-shadow:none; color:inherit; }
#cityrail-feedback-modal :is(button,summary),#cityrail-feedback-image-viewer button {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#cityrail-feedback-modal button:is(:active,.cityrail-pressing):not(:disabled),#cityrail-feedback-image-viewer button:is(:active,.cityrail-pressing) {
  opacity: .65;
}
#cityrail-feedback-modal button { cursor:pointer; }
#cityrail-feedback-modal button:active { transform:scale(.97); }
#cityrail-feedback-modal button:disabled { opacity:.45; cursor:default; transform:none; }
#cityrail-feedback-modal :is(button,input,textarea,summary):focus-visible { outline:3px solid var(--site-blue); outline-offset:2px; }
#cityrail-feedback-modal svg,#cityrail-feedback-image-viewer svg { display:block; width:20px; height:20px; flex-shrink:0; }
#cityrail-feedback-modal :is(h2,h3,h4,p) { margin:0; }
#cityrail-feedback-modal h2 { font-size:20px; font-weight:600; letter-spacing:-.5px; }
#cityrail-feedback-modal h3 { font-size:15px; font-weight:600; letter-spacing:-.2px; }
#cityrail-feedback-modal .cityrail-feedback-panel { display:flex; flex-direction:column; width:100%; height:100%; min-height:0; }
#cityrail-feedback-modal .feedback-toolbar { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; padding:20px 24px; background:var(--site-glass); }
#cityrail-feedback-modal .feedback-account-help {
  flex-shrink: 0;
  margin: 0 16px 16px;
  padding: 12px 16px;
  border: 1px solid var(--site-border);
  border-left: 4px solid var(--site-blue);
  border-radius: 14px;
  background: var(--site-fill);
  color: var(--site-text);
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
  user-select: text;
}
#cityrail-feedback-modal .feedback-account-help strong {
  font-weight: 750;
}
#cityrail-feedback-modal .feedback-heading { display:flex; align-items:center; gap:14px; }
#cityrail-feedback-modal .feedback-heading>svg { width:30px; height:30px; color:var(--site-blue); }
#cityrail-feedback-modal .feedback-heading p { margin-top:3px; color:var(--site-muted); font-size:12px; }
#cityrail-feedback-modal .feedback-icon-button,#cityrail-feedback-image-viewer .feedback-icon-button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:var(--site-fill); color:var(--site-muted); flex-shrink:0; }
#cityrail-feedback-modal .feedback-workspace { display:grid; grid-template-columns:300px minmax(0,1fr); flex:1; min-height:0; border-top:1px solid var(--site-border); }
#cityrail-feedback-modal .feedback-sidebar { min-height:0; display:flex; flex-direction:column; gap:12px; padding:18px 12px 14px; background:var(--site-bg); border-right:1px solid var(--site-border); }
#cityrail-feedback-modal .feedback-list-heading { display:flex; align-items:center; gap:8px; padding-left:12px; }
#cityrail-feedback-modal #cityrail-feedback-count { color:var(--site-muted); font-size:12px; }
#cityrail-feedback-modal #feedback-refresh { margin-left:auto; background:transparent; }
#cityrail-feedback-modal .feedback-new { display:flex; align-items:center; justify-content:center; gap:7px; flex-shrink:0; min-height:44px; border:1px solid var(--site-border); border-radius:12px; background:var(--site-surface); color:var(--site-blue); font-weight:500; }
#cityrail-feedback-modal .cityrail-feedback-list { flex:1; overflow:auto; min-height:0; overscroll-behavior:contain; padding:3px; }
#cityrail-feedback-modal .feedback-list-empty { padding:24px 14px; color:var(--site-muted); font-size:13px; line-height:1.8; }
#cityrail-feedback-modal .feedback-thread-link { width:100%; display:block; padding:14px 12px; margin:0 0 5px; text-align:left; background:transparent; border:1px solid transparent; border-radius:14px; }
#cityrail-feedback-modal .feedback-thread-link[aria-current="true"] { background:var(--site-surface); border-color:var(--site-border); }
#cityrail-feedback-modal .feedback-thread-link strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:500; line-height:1.5; margin:6px 0; overflow-wrap:anywhere; }
#cityrail-feedback-modal .feedback-thread-meta { display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--site-muted); }
#cityrail-feedback-modal .feedback-thread-meta>span:first-child { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#cityrail-feedback-modal .feedback-thread-state { color:var(--site-blue); white-space:nowrap; }
#cityrail-feedback-modal .feedback-thread-snippet { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--site-muted); }
#cityrail-feedback-modal .feedback-text-button { min-height:44px; flex-shrink:0; border:0; background:transparent; color:var(--site-blue); padding:8px 12px; text-align:left; }
#cityrail-feedback-modal .feedback-admin-area { flex-shrink:0; padding:0 10px; }
#cityrail-feedback-modal .feedback-admin-area summary { min-height:44px; cursor:pointer; padding:12px 2px; color:var(--site-muted); font-size:12px; }
#cityrail-feedback-modal .feedback-admin-area label { display:block; color:var(--site-muted); font-size:12px; margin:0 0 8px; }
#cityrail-feedback-modal .feedback-admin-row { display:flex; gap:8px; }
#cityrail-feedback-modal .feedback-admin-row input { min-width:0; width:100%; border:1px solid var(--site-border); border-radius:10px; min-height:44px; padding:8px 12px; background:var(--site-surface); }
#cityrail-feedback-modal .feedback-admin-row button { min-width:56px; min-height:44px; border:0; border-radius:10px; background:var(--site-fill); color:var(--site-blue); }
#cityrail-feedback-modal .feedback-conversation { min-width:0; min-height:0; display:flex; flex-direction:column; }
#cityrail-feedback-modal .feedback-conversation-heading { display:flex; align-items:center; gap:10px; min-height:80px; padding:16px 26px; flex-shrink:0; }
#cityrail-feedback-modal .feedback-conversation-heading.is-empty { display:none; }
#cityrail-feedback-modal .feedback-conversation-heading p { font-size:12px; color:var(--site-muted); margin-top:4px; }
#cityrail-feedback-modal #feedback-back { display:none; }
#cityrail-feedback-modal .feedback-thread { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:10px 26px 22px; scroll-behavior:auto; }
#cityrail-feedback-modal .feedback-welcome { display:flex; align-items:center; justify-content:center; flex-direction:column; height:100%; min-height:140px; color:var(--site-muted); text-align:center; padding:24px; }
#cityrail-feedback-modal .feedback-welcome svg { width:44px; height:44px; margin-bottom:16px; opacity:.65; }
#cityrail-feedback-modal .feedback-welcome p { max-width:260px; margin-top:10px; font-size:13px; line-height:1.8; }
#cityrail-feedback-modal .feedback-message { display:flex; flex-direction:column; align-items:flex-start; margin:0 0 22px; }
#cityrail-feedback-modal .feedback-message.is-own { align-items:flex-end; }
#cityrail-feedback-modal .feedback-message-meta { color:var(--site-muted); font-size:11px; margin:0 4px 7px; }
#cityrail-feedback-modal .feedback-bubble { max-width:88%; min-width:50px; border-radius:18px 18px 18px 5px; padding:12px 15px; background:var(--site-fill); overflow-wrap:anywhere; }
#cityrail-feedback-modal .is-own .feedback-bubble { color:#fff; background:#0071e3; border-radius:18px 18px 5px 18px; }
#cityrail-feedback-modal .feedback-bubble p { white-space:pre-wrap; line-height:1.65; }
#cityrail-feedback-modal .feedback-message-images { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
#cityrail-feedback-modal .feedback-image-button { border:0; padding:0; border-radius:10px; background:transparent; overflow:hidden; }
#cityrail-feedback-modal .feedback-image-button img { display:block; width:130px; height:100px; object-fit:cover; }
#cityrail-feedback-modal .feedback-compose { flex-shrink:0; padding:14px 22px 12px; border-top:1px solid var(--site-border); }
#cityrail-feedback-modal .feedback-compose textarea { display:block; resize:none; width:100%; min-height:78px; max-height:120px; padding:11px 14px; border:1px solid transparent; border-radius:14px; background:var(--site-fill); outline-offset:-2px; line-height:1.6; }
#cityrail-feedback-modal textarea::placeholder { color:var(--site-muted); }
#cityrail-feedback-modal .feedback-compose-actions { display:flex; align-items:center; gap:8px; margin-top:9px; }
#cityrail-feedback-modal .feedback-attach { display:flex; align-items:center; gap:7px; min-height:44px; padding:0 8px; border:0; border-radius:10px; background:transparent; color:var(--site-blue); font-size:13px; }
#cityrail-feedback-modal #cityrail-feedback-file-name { color:var(--site-muted); font-size:11px; }
#cityrail-feedback-modal .feedback-send { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; min-width:88px; padding:0 16px; margin-left:auto; border:0; border-radius:23px; background:#0071e3; color:#fff; font-weight:500; }
#cityrail-feedback-modal .feedback-send svg { width:17px; height:17px; }
#cityrail-feedback-modal .feedback-previews { display:flex; gap:10px; overflow:auto; }
#cityrail-feedback-modal .feedback-preview { position:relative; flex:0 0 auto; padding-top:10px; }
#cityrail-feedback-modal .feedback-preview img { display:block; width:72px; height:60px; object-fit:cover; border-radius:9px; }
#cityrail-feedback-modal .feedback-preview button { position:absolute; right:-7px; top:0; width:30px; height:30px; display:grid; place-items:center; border:2px solid var(--site-surface); border-radius:50%; background:var(--site-text); color:var(--site-surface); }
#cityrail-feedback-modal .feedback-preview button svg { width:14px; height:14px; }
#cityrail-feedback-modal .cityrail-feedback-status { min-height:28px; flex-shrink:0; padding:3px 24px 7px; color:var(--site-muted); font-size:12px; border-top:1px solid var(--site-border); }
#cityrail-feedback-modal .feedback-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#cityrail-feedback-image-viewer { position:fixed; inset:0; margin:auto; border:1px solid var(--site-border); border-radius:20px; padding:52px 12px 12px; width:fit-content; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); background:var(--material-panel,var(--site-surface)); -webkit-backdrop-filter:var(--material-blur,none); backdrop-filter:var(--material-blur,none); }
#cityrail-feedback-image-viewer img { display:block; max-width:calc(100vw - 50px); max-height:calc(100dvh - 104px); object-fit:contain; }
#cityrail-feedback-image-viewer .feedback-icon-button { position:absolute; top:4px; right:6px; cursor:pointer; }
@media (hover: hover) and (pointer: fine) { #cityrail-feedback-modal .feedback-thread-link:hover { background:var(--site-fill); } }
@media (max-width:760px), (pointer:coarse) and (min-width:560px) and (max-height:520px) and (orientation:landscape) {
  :root {
    --cityrail-feedback-inset: var(--ui-map-footer-inset,calc(max(12px, env(safe-area-inset-bottom)) + 68px));
  }
  .cityrail-feedback-button {
    right: var(--ui-map-footer-right,max(12px,env(safe-area-inset-right)));
    font-size: var(--ui-map-feedback-font-size,13px);
    height: var(--ui-map-feedback-height,34px);
  }
  .cityrail-feedback-reply-toast { right:12px; bottom:130px; }
  #cityrail-feedback-modal { width:var(--ui-sheet-width,calc(100vw - var(--ui-sheet-left,8px) - var(--ui-sheet-right,8px))); border-radius:var(--ui-panel-radius,20px); }
  #cityrail-feedback-modal .feedback-toolbar { padding:12px 16px; }
  #cityrail-feedback-modal .feedback-heading { gap:10px; }
  #cityrail-feedback-modal .feedback-heading>svg { width:25px; height:25px; }
  #cityrail-feedback-modal h2 { font-size:18px; }
  #cityrail-feedback-modal .feedback-workspace { display:flex; }
  #cityrail-feedback-modal .feedback-sidebar,#cityrail-feedback-modal .feedback-conversation { width:100%; }
  #cityrail-feedback-modal .feedback-workspace[data-view="list"] .feedback-conversation,#cityrail-feedback-modal .feedback-workspace[data-view="conversation"] .feedback-sidebar { display:none; }
  #cityrail-feedback-modal .feedback-sidebar { border-right:0; }
  #cityrail-feedback-modal #feedback-back { display:grid; background:transparent; }
  #cityrail-feedback-modal .feedback-conversation-heading { padding:10px 12px; min-height:70px; gap:4px; }
  #cityrail-feedback-modal .feedback-conversation-heading.is-empty { display:flex; min-height:64px; }
  #cityrail-feedback-modal .feedback-thread { padding:8px 16px 16px; }
  #cityrail-feedback-modal .feedback-compose { padding:12px; }
  #cityrail-feedback-modal .feedback-compose textarea { font-size:16px; }
  #cityrail-feedback-modal .feedback-attach { padding:0 3px; font-size:12px; }
  #cityrail-feedback-modal .feedback-send { min-width:76px; padding:0 12px; }
  #cityrail-feedback-modal .cityrail-feedback-status { padding-left:16px; }
  #cityrail-feedback-modal .feedback-bubble { max-width:92%; }
}
@media (pointer:coarse) {
  .cityrail-feedback-button {
    min-height: var(--ui-map-feedback-height,44px);
  }
  #cityrail-feedback-modal :is(input,textarea) { font-size: 16px; }
  #cityrail-feedback-modal {
    position: fixed;
    top: calc(var(--ui-visual-top,0px) + var(--ui-sheet-top,max(12px,env(safe-area-inset-top))));
    bottom: auto;
    margin: 0 auto;
    height: min(760px,calc(var(--ui-visual-height,100dvh) - var(--ui-sheet-top,max(12px,env(safe-area-inset-top))) - var(--ui-sheet-bottom,max(12px,env(safe-area-inset-bottom)))));
  }
  #cityrail-feedback-modal .cityrail-feedback-panel { overflow-y: auto; overscroll-behavior: contain; }
  #cityrail-feedback-modal .feedback-workspace { min-height: 260px; }
  #cityrail-feedback-modal .feedback-toolbar {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--material-popover,var(--site-surface));
  }
}

@media(prefers-reduced-motion:reduce) { #cityrail-feedback-modal button:active { transform:none; } }
@media(prefers-reduced-transparency:reduce) { #cityrail-feedback-modal::backdrop,#cityrail-feedback-image-viewer::backdrop,.cityrail-feedback-button { backdrop-filter:none; } #cityrail-feedback-modal .feedback-toolbar { background:var(--site-surface); } }
@media(prefers-contrast:more) { #cityrail-feedback-modal .feedback-thread-link,#cityrail-feedback-modal .feedback-bubble { border:1px solid var(--site-muted); } }
