.page-lead { margin: -12px 0 24px; color: var(--muted); }
.qr-card button { width: 100%; margin-top: 12px; }
.qr-search { max-width: 620px; min-height: 48px; margin: 0 0 20px; }
.card-tools { display: flex; align-items: center; gap: 7px; }
.mini-qr { display: grid; place-items: center; width: 31px; height: 31px; min-height: 0; padding: 0; border-radius: 8px; color: #2856bf; background: #edf2ff; }
.generated-qr { display: grid; place-items: center; min-height: 290px; padding: 17px; border-radius: 16px; background: white; border: 1px solid var(--line); }
.generated-qr img, .generated-qr canvas { width: min(256px, 100%); height: auto; image-rendering: pixelated; }
.qr-label { text-align: center; font: 700 15px ui-monospace, monospace; }
.equipment-gallery { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,220px)); gap: 12px; margin: 22px 0; }
.equipment-photo { display:block; width:100%; aspect-ratio:4/3; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#eef2f8; cursor:zoom-in; }
.equipment-photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.equipment-photo:hover img { transform:scale(1.035); }
.photo-viewer { width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:52px 24px 24px; border:0; border-radius:0; background:rgba(5,10,23,.94); overflow:hidden; }
.photo-viewer::backdrop { background:rgba(5,10,23,.94); }
.photo-viewer img { display:block; width:100%; height:100%; object-fit:contain; }
.photo-viewer-close { position:fixed; top:max(12px,env(safe-area-inset-top)); right:max(14px,env(safe-area-inset-right)); z-index:2; width:42px; height:42px; padding:0; border:1px solid #ffffff55; border-radius:50%; background:#111a; color:#fff; font-size:30px; line-height:1; }

.issues-list { display: grid; gap: 10px; }
.issue-card { display: grid; grid-template-columns: 1fr 190px; align-items: center; gap: 18px; padding: 19px; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: 0 8px 28px #1022530b; }
.issue-card h3 { margin: 8px 0 5px; font: 23px Georgia,serif; }
.issue-card p { margin: 0 0 9px; color: var(--muted); }
.issue-card small { color: var(--muted); }
.priority { display: inline-block; padding: 4px 8px; border-radius: 20px; color: #2856bf; background: #edf2ff; font-size: 11px; font-weight: 800; }
#issueForm { display: grid; gap: 14px; }
#issueForm label { font-size: 12px; font-weight: 700; }
#issueForm input, #issueForm select, #issueForm textarea { margin-top: 6px; }

.chat-layout { display: grid; grid-template-columns: minmax(210px,280px) minmax(0,1fr); gap: 12px; }
.chat-list { min-height: 480px; max-height: min(66vh,700px); padding: 8px; overflow-y: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.chat-list-row { position: relative; }
.chat-list-item { display: block; width: 100%; padding: 13px 12px; border: 0; border-radius: 11px; text-align: left; background: transparent; transition: background .2s,transform .2s; }
.chat-list-row:has(.chat-remove) .chat-list-item { padding-right: 40px; }
.chat-remove { position: absolute; z-index: 2; top: 50%; right: 5px; width: 31px; min-width: 31px; height: 31px; min-height: 31px; padding: 0; border: 0; border-radius: 8px; color: #7a8497; background: transparent; transform: translateY(-50%); font-size: 19px; }
.chat-remove:hover { color: #a43b32; background: #fff0f0; }
.chat-list-item:hover { background: #f2f5ff; transform: translateX(2px); }
.chat-list-item.active { color: #fff; background: linear-gradient(135deg,#2856bf,#6748c8); }
.chat-list-item b,.chat-list-item small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-list-item small { margin-top: 4px; opacity: .72; }
.chat-shell { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.chat-messages { height: min(58vh, 620px); min-height: 360px; padding: 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; background: linear-gradient(180deg,#f9fbff,#f4f7fd); }
.chat-message { align-self: flex-start; max-width: min(72%,580px); padding: 11px 14px; border-radius: 4px 15px 15px; background: white; border: 1px solid var(--line); box-shadow: 0 5px 16px #1022530b; }
.chat-message.mine { align-self: flex-end; border-color: #cad9ff; border-radius: 15px 4px 15px 15px; background: #e9f0ff; }
.chat-message > div { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.chat-message small { color: var(--muted); font-size: 10px; }
.chat-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-message img { display: block; max-width: 100%; max-height: 360px; border-radius: 9px; }
.chat-message audio { width: min(330px,100%); }
.chat-compose { display: grid; grid-template-columns: 46px 1fr auto; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.chat-compose > * { min-width: 0; }
.attach-button { display: grid; place-items: center; min-height: 44px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.attach-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.message-actions { justify-content: flex-end !important; gap: 5px !important; margin: 8px 0 0 !important; opacity: 0; transition: opacity .2s; }
.chat-message:hover .message-actions,.chat-message:focus-within .message-actions { opacity: 1; }
.message-actions button { min-height: 28px; padding: 4px 8px; border: 0; color: var(--muted); background: transparent; font-size: 10px; }
.chat-head-actions { display: flex; gap: 8px; }
.chat-members { margin: 14px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.chat-members legend { padding: 0 6px; font-weight: 700; }
#chatUserChoices { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
#chatUserChoices label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 9px; border-radius: 8px; background: #f7f8fc; cursor: pointer; }
#chatUserChoices input { width: auto; margin: 0; }
#newChatForm > label { display: block; margin-top: 12px; font-weight: 700; }
#newChatForm > label select,#newChatForm > label input { margin-top: 6px; }
.guide-dialog { width: min(650px,calc(100% - 24px)); }
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.guide-grid article { display: grid; grid-template-columns: 42px 1fr; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg,#fff,#f7f9ff); }
.guide-grid article > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: #fff; background: linear-gradient(135deg,#2856bf,#6748c8); font-size: 20px; font-weight: 800; }
.guide-grid h3 { margin: 1px 0 5px; font-size: 15px; }
.guide-grid p,.guide-roles p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.guide-roles { margin-top: 12px; padding: 13px 15px; border-radius: 12px; background: #eef3ff; }
.guide-roles b { display: block; margin-bottom: 5px; }
@keyframes record-pulse { 50% { box-shadow: 0 0 0 7px #d43c5220; } }

@media(max-width:820px){
  .guide-grid { grid-template-columns: 1fr; }
  .chat-layout { display: block; }
  .chat-list { display: flex; min-height: 0; max-height: none; margin-bottom: 8px; overflow-x: auto; border-radius: 12px; }
  .chat-list-row { flex: 0 0 160px; }
  .chat-list-item { height: 100%; }
  #mainNav:not([hidden]), .touch-device #mainNav:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }
  #mainNav button, .touch-device #mainNav button {
    display: grid !important;
    place-items: center;
    width: 100% !important;
    min-width: 0 !important;
    padding: 5px 1px !important;
    overflow: visible !important;
    white-space: normal !important;
    font-size: clamp(9px, 2.8vw, 11px) !important;
    text-overflow: clip !important;
  }
  .issue-card { grid-template-columns: 1fr; padding: 15px; }
  .issue-card select { width: 100%; }
  .chat-messages { height: calc(100dvh - 350px); min-height: 280px; padding: 12px; }
  .chat-message { max-width: 88%; }
  .chat-message > div { display: block; }
  .chat-message small { display: block; margin-top: 2px; }
  .chat-compose { grid-template-columns: 43px 1fr; }
  .chat-compose input[name="text"] { grid-column: 1/-1; grid-row: 1; }
  .chat-compose .primary { grid-column: 2; }
  .message-actions { opacity: 1; }
  .equipment-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .photo-viewer { padding:58px 10px 10px; }
}