html {
  font-size: 14px;
}

header {
    padding: 0;
    margin: 0;
}

canvas {
    top: 0;
    left: 0;
    padding: 0;
    background-color: #fff; /* Set a background color for the canvas */
}

/* Style for the icon container */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.icon-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100vh;
}

/* Style for individual icons */
.icon {
    font-size: 36px;
    margin: 10px;
    cursor: pointer;
}

.main {
    width: 99.5%;
    height: calc(100vh - 65px);
    border: 0px solid black;
    padding: 0;
    margin: auto;
    position: relative;
}

.containerBroadcast {
    display: flex;
    justify-content: center;
    gap: 2px; /* Space between buttons */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000000;
    width: auto;
}

.containerMenu {
    display: flex;
    justify-content: center;
    gap: 10px; /* Space between buttons */
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000000;
    /* Shadow effect */
    background: white; /* Ensure visibility */
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.button, .broadcast, .join, .scribe {
    padding: 5px;
    background-color: #3498db;
    color: #fff;
    cursor: pointer;
    position: static; /* Remove absolute positioning */
    /* Taille STABLE : le libellé ne doit ni passer à la ligne ni changer la
       hauteur de la barre (sinon le display diffère diffuseur/spectateur). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    line-height: 1.15;
    min-height: 28px;
    box-sizing: border-box;
}

.popup-content {
    display: none;
    background: rgba(245,245,245,1);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;   /* moitié de la ZONE DE DESSIN (#main est position:relative), pas de l'écran */
    text-align: center;
    padding: 0;
    padding-bottom: 40px;
    color: #fff;
    border: 1px solid lightgrey;
    overflow-y: auto;
    z-index: 1004;
}

/* ============ Scribe : panneau de dictee vocale (bottom sheet pro) ============ */
.popup-scribe {
    display: none;
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 88vh;
    z-index: 1004;
    box-sizing: border-box;
}
.popup-scribe * { box-sizing: border-box; }
.popup-scribe .scribe-panel {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 100%;
    max-width: 1060px;
    margin: 0 auto;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #ffffff, #fbfcfe);
    border-top-left-radius: 22px; border-top-right-radius: 22px;
    box-shadow: 0 -18px 60px rgba(15, 23, 42, .22);
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, Arial, sans-serif;
    animation: scribeUp .32s cubic-bezier(.22, 1, .36, 1);
}
@keyframes scribeUp { from { transform: translateY(30px); opacity: .3; } to { transform: none; opacity: 1; } }
.popup-scribe .scribe-grip { width: 44px; height: 5px; border-radius: 3px; background: #dfe5ee; margin: 9px auto 0; flex: 0 0 auto; }

/* en-tete */
.popup-scribe .scribe-head { display: flex; align-items: center; gap: 13px; padding: 14px 22px; flex: 0 0 auto; }
.popup-scribe .scribe-badge {
    width: 42px; height: 42px; border-radius: 12px; flex: 0 0 42px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(79, 70, 229, .35);
}
.popup-scribe .scribe-badge svg { width: 22px; height: 22px; }
.popup-scribe .scribe-titles { flex: 1; min-width: 0; }
.popup-scribe .scribe-titles h2 { margin: 0; font-size: 18px; font-weight: 800; color: #0f172a; letter-spacing: -.2px; }
.popup-scribe .scribe-titles p { margin: 1px 0 0; font-size: 13px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.popup-scribe .scribe-lang {
    appearance: none; -webkit-appearance: none;
    border: 1px solid #e3e8ef; background: #fff; color: #334155;
    border-radius: 10px; padding: 9px 32px 9px 12px; font-size: 14px; font-weight: 600; cursor: pointer; max-width: 44vw;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="%2394a3b8" stroke-width="2"><path d="M4 6l4 4 4-4"/></svg>');
    background-repeat: no-repeat; background-position: right 10px center;
}
.popup-scribe .scribe-lang:hover { border-color: #cbd5e1; }
.popup-scribe .scribe-close {
    width: 38px; height: 38px; border-radius: 11px; border: none; background: #f1f5f9; color: #475569;
    cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 38px;
}
.popup-scribe .scribe-close svg { width: 19px; height: 19px; }
.popup-scribe .scribe-close:hover { background: #e7ecf3; color: #0f172a; }

/* carte enregistreur */
.popup-scribe .scribe-rec {
    display: flex; align-items: center; gap: 18px; margin: 4px 22px 0; padding: 16px 20px;
    background: linear-gradient(135deg, #f8f7ff, #f4f7ff); border: 1px solid #eceafd; border-radius: 16px; flex: 0 0 auto;
}
.popup-scribe .scribe-mic {
    position: relative; width: 66px; height: 66px; flex: 0 0 66px; border: none; border-radius: 50%; cursor: pointer; color: #fff;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 24px rgba(79, 70, 229, .38);
    transition: transform .12s, box-shadow .2s, background .25s;
}
.popup-scribe .scribe-mic svg { width: 28px; height: 28px; position: relative; z-index: 2; }
.popup-scribe .scribe-mic:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(79, 70, 229, .45); }
.popup-scribe .scribe-mic:active { transform: scale(.95); }
.popup-scribe .scribe-mic .scribe-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #ef4444; opacity: 0; }
.popup-scribe .scribe-mic.rec { background: linear-gradient(135deg, #f43f5e, #dc2626); box-shadow: 0 12px 28px rgba(220, 38, 38, .42); }
.popup-scribe .scribe-mic.rec .scribe-ring { animation: scribePulse 1.6s infinite ease-out; }
@keyframes scribePulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.7); opacity: 0; } }

.popup-scribe .scribe-recmeta { flex: 1; min-width: 0; }
.popup-scribe .scribe-statusrow { display: flex; align-items: center; gap: 9px; }
.popup-scribe .scribe-dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; flex: 0 0 9px; }
.popup-scribe .scribe-mic.rec ~ .scribe-recmeta .scribe-dot { background: #ef4444; animation: scribeDot 1.4s infinite; }
@keyframes scribeDot { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); } 70% { box-shadow: 0 0 0 7px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
.popup-scribe .scribe-status { font-size: 15px; font-weight: 700; color: #334155; }
.popup-scribe .scribe-status.is-live { color: #dc2626; }
.popup-scribe .scribe-status.is-busy { color: #7c3aed; }
.popup-scribe .scribe-status.is-err { color: #b91c1c; }
.popup-scribe .scribe-interim { font-size: 13.5px; color: #94a3b8; font-style: italic; margin-top: 4px; height: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.popup-scribe .scribe-wave { display: flex; align-items: center; gap: 3px; height: 30px; opacity: 0; transition: opacity .2s; flex: 0 0 auto; }
.popup-scribe .scribe-mic.rec ~ .scribe-wave { opacity: 1; }
.popup-scribe .scribe-wave span { width: 3px; height: 8px; border-radius: 3px; background: #a78bfa; }
.popup-scribe .scribe-mic.rec ~ .scribe-wave span { background: #fb7185; animation: scribeWave 1s infinite ease-in-out; }
.popup-scribe .scribe-wave span:nth-child(2) { animation-delay: .15s; } .popup-scribe .scribe-wave span:nth-child(3) { animation-delay: .3s; }
.popup-scribe .scribe-wave span:nth-child(4) { animation-delay: .45s; } .popup-scribe .scribe-wave span:nth-child(5) { animation-delay: .1s; }
.popup-scribe .scribe-wave span:nth-child(6) { animation-delay: .35s; } .popup-scribe .scribe-wave span:nth-child(7) { animation-delay: .05s; }
@keyframes scribeWave { 0%, 100% { height: 8px; } 50% { height: 26px; } }

/* editeur */
.popup-scribe .scribe-editorwrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin: 16px 22px 0; }
.popup-scribe .scribe-editorlbl { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; flex: 0 0 auto; }
.popup-scribe .scribe-editorlbl > span:first-child { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #94a3b8; }
.popup-scribe .scribe-count { font-size: 12px; color: #94a3b8; font-weight: 600; }
/* CKEditor : integre dans un cadre arrondi propre */
.popup-scribe .scribe-editorwrap .ck.ck-editor { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; border: 1px solid #e3e8ef; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.popup-scribe .ck.ck-editor__top { flex: 0 0 auto; }
.popup-scribe .ck-sticky-panel__content { border: none !important; }
.popup-scribe .ck.ck-toolbar { border: none !important; border-bottom: 1px solid #eef2f6 !important; border-radius: 0 !important; background: #fafbfd !important; padding: 5px 8px !important; }
.popup-scribe .ck.ck-editor__main { flex: 1 1 auto; min-height: 0; display: flex; }
.popup-scribe .ck.ck-content.ck-editor__editable {
    flex: 1 1 auto; min-height: 120px; height: 100%; overflow-y: auto;
    border: none !important; box-shadow: none !important; border-radius: 0 !important;
    padding: 16px 18px !important; font-size: 16px; line-height: 1.7; color: #1f2937;
}
.popup-scribe .ck.ck-content.ck-editor__editable.ck-focused { border: none !important; box-shadow: none !important; }

/* pied */
.popup-scribe .scribe-foot { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 14px 22px 18px; flex: 0 0 auto; }
.popup-scribe .scribe-btn {
    border: 1px solid #e3e8ef; background: #fff; color: #334155; border-radius: 10px; padding: 9px 16px;
    font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
.popup-scribe .scribe-btn svg { width: 16px; height: 16px; }
.popup-scribe .scribe-btn:hover { background: #f6f8fb; border-color: #cfd8e5; }
.popup-scribe .scribe-btn.danger { color: #dc2626; border-color: #fbd5d5; }
.popup-scribe .scribe-btn.danger:hover { background: #fef4f4; }

.pulse {
    animation: pulse-animation 1.5s infinite ease-in-out;
    transform-origin: center;
}
@keyframes pulse-animation {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.12); opacity: .75; }
    100% { transform: scale(1); opacity: 1; }
}

@media (min-width: 768px) {
    html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.popupLineSize {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.popupLineSize div {
    padding: 5px 10px;
    cursor: pointer;
}

.lineSize {
    border: none; /* Remove default borders */
    margin: 0; /* Remove any margin/padding */
    padding: 0; /* Remove padding */
}

.popupLineSize div:hover {
    background-color: #f0f0f0;
}
/* Color palette styling */
.color-option {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: inline-block;
    margin: 3px;
    cursor: pointer;
    border: 1px solid #aaa;
}

    .color-option:hover {
        border: 2px solid #333;
    }

/* Custom color picker styling */
#customColorPicker {
    width: 40px;
    height: 30px;
    border: none;
    cursor: pointer;
    margin: 5px auto;
    display: block;
}

.menuIcon {
}


ul {
    list-style-type: none;
    padding: 0;
    display: flex; /* Use flexbox to display list items in a row */
    flex-wrap: wrap;
    margin-left: 30px;
}

li {
    white-space: nowrap;
    margin-right: 10px;
    padding: 5px;
    cursor: pointer
}

.point {
    color: red;
}

.ray {
    color: blue;
}

.segment {
    color: green;
}

.line {
    color: purple;
}

.circle {
    color: orange;
}

.label {
    font-weight: normal;
    color: black;
    float: left;
    margin-left: 10px;
}