/* Tive video field (video-field.js). Self-contained so it looks the same on support.tiveapp.com, Frappe web forms and tivetechnology.com.
   Website themes style every button and input, so the key rules carry !important. Brand: midnight #141a26, deep sky #0369a1, sky pale #e8f4fe. */
.tv-video { box-sizing: border-box; font-family: inherit; color: #141a26; }
.tv-video *, .tv-video *::before, .tv-video *::after { box-sizing: border-box; }

/* segmented switch */
.tv-video .tv-tabs { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin: 0 0 10px; background: #f1f4f8; border-radius: 10px; }
.tv-video .tv-tabs[hidden] { display: none !important; }
.tv-video .tv-tabs button { margin: 0 !important; width: 100% !important; font: inherit !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.2 !important; padding: 8px 6px !important;
  background: transparent !important; color: #465568 !important; border: 0 !important; border-radius: 7px !important; box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important; cursor: pointer; }
.tv-video .tv-tabs button:hover { color: #141a26 !important; }
.tv-video .tv-tabs button[aria-selected="true"] { background: #fff !important; color: #141a26 !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(20,26,38,.08), 0 0 0 1px #e3e8ef !important; }

/* the one area each choice uses */
.tv-video .tv-panel[hidden] { display: none !important; }
.tv-video .tv-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 168px; padding: 20px 16px; margin: 0;
  border: 1.5px dashed #cdd6e1; border-radius: 12px; background: #fbfcfe; text-align: center; }
.tv-video .tv-zone-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #e8f4fe; color: #0369a1; }
.tv-video .tv-zone-ico[hidden] { display: none !important; }
.tv-video .tv-drop { cursor: pointer; transition: border-color .15s, background .15s; }
.tv-video .tv-drop:hover, .tv-video .tv-drop.tv-over { border-color: #0369a1; background: #f2f9ff; }
.tv-video .tv-zone-link { align-items: stretch; }
.tv-video .tv-zone-link .tv-zone-ico { align-self: center; }
.tv-video .tv-preview { display: block; width: 100%; max-height: 340px; border-radius: 10px; background: #000; object-fit: contain; }
.tv-video .tv-preview[hidden] { display: none !important; }

/* buttons */
.tv-video .tv-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tv-video .tv-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: auto !important; min-width: 0 !important; margin: 0 !important;
  font: inherit !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; padding: 10px 18px !important; text-transform: none !important; letter-spacing: normal !important;
  background: #141a26 !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; cursor: pointer; }
.tv-video .tv-btn[hidden] { display: none !important; }
.tv-video .tv-btn:hover { background: #2a3344 !important; }
.tv-video .tv-rec::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #ff4d4f; }
.tv-video .tv-stop { background: #b3261e !important; }
.tv-video .tv-stop:hover { background: #92201a !important; }
.tv-video .tv-ghost { background: #fff !important; color: #141a26 !important; box-shadow: inset 0 0 0 1.5px #cdd6e1 !important; }
.tv-video .tv-ghost:hover { background: #f7f8fa !important; }
.tv-video .tv-timer { font-variant-numeric: tabular-nums; }

/* text and link input */
.tv-video .tv-hint { margin: 0 !important; font-size: 13px !important; line-height: 1.45; color: #64728c !important; max-width: 420px; }
.tv-video .tv-url { width: 100% !important; margin: 0 !important; font: inherit !important; font-size: 15px !important; padding: 10px 12px !important; border: 1px solid #cdd6e1 !important; border-radius: 8px !important; background: #fff !important; color: #141a26 !important; box-shadow: none !important; }
.tv-video .tv-url:focus { outline: none !important; border-color: #0369a1 !important; box-shadow: 0 0 0 3px rgba(3,105,161,.14) !important; }

/* progress, done, status */
.tv-video .tv-progress { height: 6px; border-radius: 6px; background: #e3e8ef; overflow: hidden; margin-top: 10px; }
.tv-video .tv-progress[hidden] { display: none !important; }
.tv-video .tv-progress span { display: block; height: 100%; width: 0; background: #0369a1; transition: width .3s; }
.tv-video .tv-done { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #b7e1c8; border-radius: 10px; background: #f1faf4; color: #0a7a43; font-size: 15px; font-weight: 600; }
.tv-video .tv-done[hidden] { display: none !important; }
.tv-video .tv-done-text { flex: 1; color: #14532d; font-weight: 500; }
.tv-video .tv-link-btn { margin: 0 !important; padding: 0 !important; width: auto !important; font: inherit !important; font-size: 14px !important; font-weight: 500 !important; color: #0369a1 !important; background: none !important; border: 0 !important; box-shadow: none !important; text-decoration: underline !important; text-transform: none !important; cursor: pointer; }
.tv-video .tv-status { margin: 8px 0 0 !important; font-size: 14px !important; color: #465568 !important; }
.tv-video .tv-status:empty { display: none; }
.tv-video .tv-status.tv-bad { color: #b3261e !important; }

/* extras row under a message box: [Attach files] [Add a video] (Bryce, October 9, 2026: files with the message; video folded until wanted) */
.tv-video[hidden], .tv-extras [hidden] { display: none !important; }
.tv-extras { margin: 8px 0 20px; font-family: inherit; color: #141a26; }
.tv-extras .tv-extras-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tv-extras .tv-pill { display: inline-flex !important; align-items: center; gap: 7px; width: auto !important; margin: 0 !important; font: inherit !important; font-size: 14px !important; font-weight: 500 !important;
  line-height: 1.2 !important; padding: 7px 13px !important; background: #fff !important; color: #141a26 !important; border: 1px solid #d5dbe3 !important; border-radius: 999px !important; box-shadow: none !important;
  text-transform: none !important; letter-spacing: normal !important; cursor: pointer; }
.tv-extras .tv-pill:hover { border-color: #0369a1 !important; color: #0369a1 !important; }
.tv-extras .tv-pill svg { color: #0369a1; }
.tv-extras .tv-pill-on { background: #e8f4fe !important; border-color: #b9dcf2 !important; color: #0369a1 !important; }
.tv-extras .tv-extras-hint { font-size: 13px; color: #64728c; }
.tv-extras .tv-video-box { margin-top: 10px; }
.tv-extras .tv-cancel { display: inline-block; margin-top: 8px !important; font-size: 13px !important; color: #64728c !important; }
.tv-files .tv-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tv-files .tv-chips:not(:empty) { margin-top: 10px; }
.tv-files .tv-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 8px 6px 12px; border: 1px solid #e3e8ef; border-radius: 8px; background: #f7f8fa; font-size: 13.5px; overflow: hidden; }
.tv-files .tv-chip-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tv-files .tv-chip-size { color: #64728c; }
.tv-files .tv-chip-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #e3e8ef; }
.tv-files .tv-chip-bar span { display: block; height: 100%; width: 0; background: #0369a1; transition: width .3s; }
.tv-files .tv-chip-done .tv-chip-bar { display: none; }
.tv-files .tv-chip-done { background: #f1faf4; border-color: #b7e1c8; }
.tv-files .tv-chip-failed { background: #fdf1f0; border-color: #f2c4bf; }
.tv-files .tv-chip-x { width: 22px !important; height: 22px !important; padding: 0 !important; margin: 0 !important; display: grid !important; place-items: center; border: 0 !important; border-radius: 50% !important;
  background: transparent !important; color: #64728c !important; font-size: 17px !important; line-height: 1 !important; box-shadow: none !important; cursor: pointer; }
.tv-files .tv-chip-x:hover { background: #e3e8ef !important; color: #141a26 !important; }
.tv-files .tv-status { margin: 6px 0 0 !important; font-size: 13px !important; color: #465568 !important; }
.tv-files .tv-status:empty { display: none; }
.tv-files .tv-status.tv-bad { color: #b3261e !important; }