/* ============================================================
   Shared components: the class chat and the recorded class
   library. The learner site, the admin panel and the instructor
   panel all render these, and each of those pages carries its own
   chrome styles, so the pieces they have in common live here.
   ============================================================ */

/* class chat, shared by the host room and the student's video box */
.chat-box{display:flex;flex-direction:column;min-height:0}
.chat-log{flex:1;overflow-y:auto;display:grid;gap:8px;align-content:start;padding:4px 2px;min-height:180px;max-height:420px}
.chat-line{position:relative;background:#f7f7f5;border:1px solid #ecece8;border-radius:12px;padding:9px 11px;font-size:13px;line-height:1.5}
.chat-line b{display:block;font-size:11px;color:#7a6a3c;margin-bottom:3px}
.chat-line span{display:block;word-break:break-word}
.chat-line i{display:block;font-style:normal;font-size:10px;color:#9a9a9a;margin-top:4px}
.chat-line.staff{background:#fdf8ec;border-color:#eadfc0}
.chat-line.mine{background:#111;border-color:#111;color:#fff}
.chat-line.mine b{color:#ddc072}
.chat-line.mine i{color:#9a9a9a}
.chat-remove{position:absolute;right:6px;top:6px;border:0;background:none;color:#b3b3b3;font-size:15px;line-height:1;cursor:pointer}
.chat-remove:hover{color:#c93636}
.chat-form{display:flex;gap:8px;margin-top:10px}
/* a display rule outranks the browser's [hidden]: the composer must really go
   when the class ends, leaving only the line that says why */
.chat-form[hidden],.chat-empty[hidden]{display:none!important}
.chat-form input{flex:1;min-width:0;border:1px solid #ddd4bf;border-radius:10px;padding:10px 12px;font-size:13px}
.chat-send{border:0;border-radius:10px;background:#ddc072;color:#111;font-weight:800;padding:10px 15px;cursor:pointer}
.chat-empty{color:#8b8b8b;font-size:12px;padding:10px 2px}

/* recorded class library: a responsive grid, ten to a page */
/* A display rule outranks the browser's [hidden], so every piece the library
   hides in JavaScript — a card that is not on this page, the filters and the
   pager over an empty shelf — has to be told again, or paging and filtering
   look as if they do nothing at all. */
.library-toolbar[hidden],.library-item[hidden],.library-pager[hidden],
.library-numbers[hidden],.library-count[hidden],.library-grid[hidden]{display:none!important}
.library-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;padding:14px;background:#fff;border:1px solid #e5e7eb;border-radius:14px}
.library-toolbar select,.library-toolbar input{height:42px;border:1px solid #e5e7eb;border-radius:9px;background:#fff;padding:0 12px;font-size:14px;color:#333}
.library-toolbar select:focus,.library-toolbar input:focus{outline:none;border-color:#ddc072;box-shadow:0 0 0 3px rgba(221,192,114,.18)}
.library-toolbar input{flex:1;min-width:200px}
/* Four to a row, twelve to a page. A tile this size cannot hold the player's
   full control row, so the card plays with the compact controls and Watch in
   player opens the same recording in the popup with everything on it. */
.library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
@media(max-width:1500px){.library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1080px){.library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.library-grid{grid-template-columns:minmax(0,1fr)}}
.library-item{border:1px solid #e5e7eb;border-radius:16px;background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.library-item:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(15,23,42,.1)}
/* the card holds the shared player (static/js/player.js); the tiles below
   only sit over its picture, so the controls stay clear of them */
.lib-media{position:relative;width:100%;background:#15181d;overflow:hidden}
.lib-media .vplayer{border-radius:0;border:0;box-shadow:none}
.lib-media:fullscreen,.lib-media:-webkit-full-screen{display:grid;place-items:center;height:100%;background:#000}
.lib-badge{position:absolute;z-index:5;left:11px;top:11px;background:rgba(0,0,0,.55);border-radius:999px;padding:5px 10px;font-size:10px;font-weight:800;letter-spacing:.04em;color:#fff}
.lib-length{position:absolute;z-index:5;right:11px;top:11px;background:rgba(0,0,0,.65);border-radius:7px;padding:4px 8px;font-size:11px;font-weight:800;color:#fff}
.lib-badge,.lib-length{transition:opacity .2s}
.lib-media:has(.vplayer.is-started) .lib-badge,.lib-media:has(.vplayer.is-started) .lib-length{opacity:0}
.library-meta{padding:14px 15px;display:flex;flex-direction:column;gap:6px;flex:1}
/* A title of one line and a title of three must not make two different cards,
   so the text areas are given their own room and the editor sits on the floor
   of the card whatever is above it. */
.library-meta h3{margin:0;font-size:15px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.library-meta p{margin:0;color:#6b7280;font-size:12px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.library-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:9px}
.library-chips span,.library-chips a{background:#f4f0e5;color:#6f5e2c;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:800}
.library-chips a{background:#111;color:#fff}
.library-pager{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:18px;padding:14px;background:#fff;border:1px solid #e5e7eb;border-radius:14px}
.library-pager button{border:1px solid #e5e7eb;background:#fff;border-radius:9px;padding:9px 13px;font-weight:800;font-size:13px;cursor:pointer;color:#333;transition:.15s}
.library-pager button:hover:not(:disabled){border-color:#ddc072;color:#111}
.library-pager button:disabled{opacity:.4;cursor:not-allowed}
.library-numbers{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.page-number{min-width:38px;padding:9px 11px!important;text-align:center}
.page-number.current{background:#111!important;border-color:#111!important;color:#fff!important}
.library-count{width:100%;text-align:center;font-size:12px;font-weight:800;color:#6b7280;letter-spacing:.02em}
@media(max-width:560px){.library-pager{gap:5px}.library-pager button{padding:8px 10px;font-size:12px}}

/* Publishing a class recording: a title beside its link, in a table cell or on a card. */
/* Publishing a recording and browsing the shelf are two jobs, so the form that
   does the first one stands clear of the gallery that shows the second. */
.rec-publish{margin-bottom:26px}
.rec-add{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rec-add input{height:34px;border:1px solid #e5e7eb;border-radius:8px;padding:0 9px;font-size:12px;background:#fff;color:#333}
.rec-add input[name="title"]{min-width:150px;flex:1 1 150px}
.rec-add input[type="url"]{min-width:190px;flex:2 1 190px}
.rec-add input:focus{outline:none;border-color:#ddc072;box-shadow:0 0 0 3px rgba(221,192,114,.18)}
.rec-cell b{display:block;font-size:12.5px;margin-bottom:5px}
.lib-edit{margin-top:auto;border-top:1px dashed #e5e7eb;padding-top:9px}
.lib-edit summary{cursor:pointer;font-size:11px;font-weight:800;color:#6b7280;list-style:none}
.lib-edit summary::-webkit-details-marker{display:none}
.lib-edit summary::before{content:'✎ ';}
.lib-edit summary:hover{color:#111}
.lib-edit-form{display:grid;gap:6px;margin-top:9px}
.lib-edit-form input{height:34px;border:1px solid #e5e7eb;border-radius:8px;padding:0 9px;font-size:12px;background:#fff;color:#333}
.lib-edit-form input:focus{outline:none;border-color:#ddc072;box-shadow:0 0 0 3px rgba(221,192,114,.18)}
.lib-edit form + form{margin-top:7px}