/* Photos for the AIs + Make picture / video (js/sb-kitchen-media.js). */

.composer .btn-append-photo {
  flex-shrink: 0; border: 1px solid var(--chat-border, #2c4a40); background: #243029; color: var(--teal, #3cc9a0);
  border-radius: 14px; padding: 8px 10px; font-size: 0.72rem; font-weight: 700; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.composer .btn-append-photo:hover { border-color: var(--teal, #3cc9a0); background: #1a3d32; }
.composer.km-drop { outline: 2px dashed var(--teal, #3cc9a0); outline-offset: 3px; }

.km-tray {
  max-width: 680px; margin: 0 auto 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 8px; background: #16201c; border: 1px solid #2f5a4c; border-radius: 12px; box-sizing: border-box;
}
.km-tray[hidden] { display: none !important; }
.km-tray-strip { display: flex; gap: 6px; }
.km-thumb { position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid #3a6b5c; }
.km-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.km-thumb-x {
  position: absolute; top: 1px; right: 1px; width: 20px; height: 20px; border-radius: 50%; border: none;
  background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 0.7rem; line-height: 20px; padding: 0; cursor: pointer;
}
.km-thumb-x:hover { background: #b33; }
.km-tray-note { font-size: 0.74rem; color: #b9c9c2; flex: 1; min-width: 160px; }

.btn-km-make {
  flex-shrink: 0; border: 1px solid #7a5cc9; background: #231c38; color: #cdb8ff; border-radius: 10px;
  padding: 6px 12px; font-size: 0.72rem; font-weight: 800; cursor: pointer; font-family: inherit;
  white-space: nowrap; min-height: 32px;
}
.btn-km-make:hover,
.btn-km-make[aria-expanded="true"] { background: #33285a; border-color: #cdb8ff; }

.km-panel {
  position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%);
  width: min(680px, calc(100vw - 20px)); max-height: min(76vh, 680px); overflow-y: auto;
  background: #19162a; border: 1px solid #4b3d7a; border-radius: 16px; box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.55);
  padding: 12px 14px 14px; color: var(--chat-text, #e8e8e8); z-index: 9000; box-sizing: border-box;
}
.km-panel[hidden] { display: none !important; }
.km-panel.km-drop { border: 2px dashed #facc15; box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.25), 0 -8px 28px rgba(0, 0, 0, 0.55); }
.km-head { display: flex; align-items: flex-start; gap: 10px; }
.km-head-text { flex: 1; min-width: 0; }
.km-title { font-weight: 800; font-size: 1rem; color: #cdb8ff; }
.km-sub { font-size: 0.76rem; color: #bdb5d6; line-height: 1.4; margin-top: 2px; }
.km-x { background: transparent; border: none; color: #a99fc9; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.km-x:hover { color: #fff; }
.km-gate { margin: 8px 0 0; font-size: 0.8rem; color: #f0c36b; }
.km-gate[hidden] { display: none !important; }
.km-gate a { color: #cdb8ff; font-weight: 800; }

.km-kinds { display: flex; gap: 8px; margin: 12px 0 8px; }
.km-kind {
  border: 1px solid #4b3d7a; background: #221d36; color: #dcd2f7; border-radius: 999px; padding: 7px 18px;
  font-weight: 800; font-size: 0.8rem; cursor: pointer; font-family: inherit;
}
.km-kind.is-on { background: #5b45a8; border-color: #cdb8ff; color: #fff; }

.km-prompt {
  display: block; width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; font-size: 0.92rem;
  color: #fff; background: #241f3a; border: 1px solid #4b3d7a; border-radius: 10px; padding: 8px 10px;
}
.km-prompt:focus { outline: none; border-color: #cdb8ff; }
.km-opts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 0.8rem; color: #cfc6ea; }
.km-opts label[hidden] { display: none !important; }
.km-opts select {
  margin-left: 4px; font-family: inherit; font-size: 0.82rem; color: #fff; background: #241f3a;
  border: 1px solid #4b3d7a; border-radius: 8px; padding: 3px 6px;
}
.km-cost { font-size: 0.76rem; color: #bdb5d6; margin: 8px 0 0; }
.km-startrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.km-startrow[hidden] { display: none !important; }
.km-startthumbs { display: inline-flex; gap: 6px; }
.km-startthumbs img { height: 40px; width: auto; max-width: 72px; object-fit: cover; border-radius: 6px; border: 2px solid #facc15; }
.km-start { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; color: #fde68a; cursor: pointer; }
.km-start[hidden] { display: none !important; }
.km-start input { width: 16px; height: 16px; accent-color: #facc15; }
.km-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.km-cancel {
  margin-right: auto; background: transparent; border: none; color: #a99fc9; font-size: 0.8rem; font-weight: 700;
  cursor: pointer; font-family: inherit; padding: 8px 6px; text-decoration: underline;
}
.km-go {
  background: #7a5cc9; color: #fff; border: none; border-radius: 16px; padding: 8px 22px; font-weight: 800;
  font-size: 0.85rem; cursor: pointer; font-family: inherit;
}
.km-go:disabled { opacity: 0.6; cursor: wait; }
.km-status { font-size: 0.8rem; color: #e6dcff; margin: 8px 0 0; min-height: 1em; }

.km-gallery { margin-top: 10px; display: grid; gap: 10px; }
.km-gallery[hidden] { display: none !important; }
.km-keep { margin: 0; font-size: 0.72rem; color: #f0c36b; }
.km-card { background: #120f1f; border: 1px solid #3a2f60; border-radius: 12px; padding: 8px; }
.km-media { display: block; max-width: 100%; max-height: 360px; margin: 0 auto; border-radius: 8px; }
.km-cap { font-size: 0.74rem; color: #bdb5d6; margin: 6px 0; overflow-wrap: anywhere; }
.km-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.km-btn {
  border: 1px solid #4b3d7a; background: #221d36; color: #dcd2f7; border-radius: 10px; padding: 5px 12px;
  font-size: 0.76rem; font-weight: 700; cursor: pointer; font-family: inherit; text-decoration: none;
}
.km-btn:hover { border-color: #cdb8ff; color: #fff; }
.km-btn--save { background: #5b45a8; color: #fff; border-color: #7a5cc9; }
.km-btn--quiet { margin-left: auto; background: transparent; }

@media (max-width: 768px) {
  .composer .btn-append-photo { padding: 7px 8px; font-size: 0.68rem; }
  .km-panel { padding: 10px 10px 12px; bottom: 100px; }
  .km-prompt, .km-opts select { font-size: 16px; }
}